@charset 'utf-8';

.serif { font-family: 'Helvetica Neue' , Helvetica , Arial , Verdana , Roboto , '游ゴシック' , 'Yu Gothic' , '游ゴシック体' , 'YuGothic' , 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'Meiryo UI' , 'メイリオ' , Meiryo , 'MS Pゴシック' , 'MS PGothic' , sans-serif !important; }
.sumaho_contents, .sumaho_footer_wrap { display: none; }

@media screen and (max-width: 1500px) { .mainimg1txt { top: -40%; } }

@media screen and (max-width: 1400px) { .mainimg2txt { top: 25px; } }

@media screen and (max-width: 1200px) { .footer_reservation_ttl { display: none; }
	.footer_reservation_number_days { width: 43%; }
	.footer_reservation_btns { width: 57%; } }

@media screen and (max-width: 1100px) { .mainimg2txt .ja1 { font-size: 13px; }
	.mainimg2txt .ja2 { font-size: 12px; }
	.mainimg2txt .en { font-size: 12px; } }

@media screen and (max-width:1140px) { .mainimg1txt { top: -50%; }
	.anniversary1th { width: 80%; } }

@media screen and (max-width: 1024px) { .mainimg2txt { top: 24px; } }

@media screen and (max-width:1080px) { #gnav, #gnav2, .contents_inner { width: 100%; } }

@media screen and (max-width:970px) { .anniversary1th { top: 76%; } }

/* iPad */
@media screen and (max-width: 768px) { #pc_page_top { display: none; }
	.anniversary1th { top: 0; bottom: 140px; }
	.gnav_outer { display: none; }
	/* 読み込み前の目隠し */
	#preloader, #preloader_normal, #preloader_logo { position: fixed; width: 100%; height: 100%; background-color: #fff; z-index: 3000; top: 0; left: 0; }
	#preloader_logo { background: #fff url('../img/preloader/logo.png') no-repeat center / 70%; }
	.contents_outer2 { margin-bottom: 15%; border-bottom: solid 1px #333; }
	.contents_outer3 { margin-bottom: 15%; }

	.pc_contents { display: none; }
	.sumaho_contents, .sumaho_footer_wrap { display: block; }
	#bnr_headertop a { font-size: 1.5em; }
	#sumaho_header { position: absolute; display: block; box-sizing: border-box; width: 100%; height: 60px; background-color: #fff; z-index: 61; -webkit-transition: opacity .5s ease-out; transition: opacity .5s ease-out; }
	#sumaho_header.fixed { position: fixed; }
	.sumaho_footer_wrap select { box-sizing: border-box; padding: 10px 0 10px 5px; color: #fff; background-color: #222; border: solid 1px #333; letter-spacing: 2px; }
	/*#sumaho_logo { float: left; width: 73px; height: 30px; padding: 15px 0; background: url('../img/sumaho/icon/gahama.png') no-repeat center; background-size: contain; }*/
	#sumaho_logo { float: left; width: 140px; height: 30px; padding: 15px 0; margin-left: 15px; background: url('../img/sumaho/icon/gahama.png') no-repeat center; background-size: contain; }
	#sumaho_logo a { display: block; height: 30px; }

	#sumaho_reserve { position: relative; float: right; width: 60px; height: 60px; overflow: hidden; }
	#sumaho_lang {display: block; position: relative; float: right;overflow: hidden; padding: 3%;}
	#sumaho_reserve .effect, #sumaho_menu .effect, .sumaho_footer_copyright .effect { position: absolute; width: 20px; height: 20px; margin: auto; background-color: #000; opacity: .8; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation: effect_scale .9s ease-out; animation: effect_scale .9s ease-out; border-radius: 50%; }
	.sumaho_footer_copyright .effect {background-color: #fff;  -webkit-animation: effect_scale_white .8s ease-out; animation: effect_scale_white .8s ease-out; }
	@-webkit-keyframes effect_scale { from {opacity: 1;  -webkit-transform: scale(1,1); }
		99.9%, to {opacity: 0;  -webkit-transform: scale(6,6); } }
	@-webkit-keyframes effect_scale_white { 0% {opacity: 1;  -webkit-transform: scale(1,1); }
		100% {opacity: 0;  -webkit-transform: scale(20,20); } }

	@keyframes effect_scale { 100% {opacity: 0;  -webkit-transform: scale(6); transform: scale(6); } }
	@keyframes effect_scale_white { 100% {opacity: 0;  -webkit-transform: scale(20); transform: scale(20); } }
	#sumaho_reserve .icon_txt_wrap { display: table-cell; width: 60px; height: 60px; text-align: center; vertical-align: middle; }
	#sumaho_reserve .icon { display: block; width: 17px; height: 18px; text-align: center; margin: 0 auto 3px ; background: url('../img/sumaho/icon/reserve/off.png') no-repeat center; background-size: contain; }
	#sumaho_reserve.menu_active .icon { display: block; width: 17px; height: 18px; text-align: center; margin: 0 auto 3px ; background: url('../img/sumaho/icon/reserve/on.png') no-repeat center; background-size: contain; }
	#sumaho_reserve .icon_txt {display: block;  font-weight: bold; }

	#sumaho_menu, #sumaho_reserve { position: relative; float: right; width: 60px; height: 60px; overflow: hidden; -webkit-transition: .5s ease-out; transition: .5s ease-out; }
	#sumaho_menu.menu_active, #sumaho_reserve.menu_active { background-color: #000; }
	#sumaho_menu .icon_txt_wrap { display: table-cell; width: 60px; height: 60px; text-align: center; vertical-align: middle; }

	#sumaho_menu .icon { display: block; width: 16px; height: 15px; text-align: center; margin: 2px auto 2px ; background: url('../img/sumaho/icon/menu/off.png') no-repeat center; background-size: contain; }

	#sumaho_menu.menu_active .icon { display: block; width: 16px; height: 15px; text-align: center; margin: 2px auto 2px ; background: url('../img/sumaho/icon/menu/on.png') no-repeat center; background-size: contain; }

	#sumaho_menu .icon_txt { display: block; }
	#sumaho_menu.menu_active .icon_txt, #sumaho_reserve.menu_active .icon_txt { color: #fff; }

	#sumaho_header_menu .sumaho_header_menu_txt, #sumaho_header_menu .sumaho_gnav, #sumaho_header_menu .sumaho_gnav2, #sumaho_header_menu .sumaho_footer, #sumaho_header_reservation .pagetop, #sumaho_header_menu .pagetop, #sumaho_reservation_plan, .sumaho_header_menu_txt, #sumaho_reservation_year_month_day, #sumaho_reservation_staydays { background-color: rgba(0,0,0,.9); }


	#sumaho_header_menu { position: fixed; display: none; width: 100%; overflow-y: scroll; z-index: 60; top: -517px; right: 0; bottom: 0; left: 0; }
	#sumaho_header_reservation { position: fixed; width: 100%; 	/* display: none; */ z-index: 60; top: -517px; left: 0; }
	.sumaho_header_menu_txt, #sumaho_header_menu a { color: #fff; }
	.sumaho_header_menu_txt {padding: 15px 0 15px 15px; border-bottom: 1px solid #fff;  font-size: 14px; }
	#sumaho_header_menu .sumaho_footer { padding: 10px 0; }
	#sumaho_header_menu .sumaho_footer_snsbtn { padding-bottom: 10px; }
	#sumaho_header_menu .sumaho_gnav a, #sumaho_header_menu .sumaho_gnav span { height: 57px; }

	#sumaho_header_menu .sumaho_footer_copyright .pagetop, #sumaho_header_reservation .sumaho_footer_copyright .pagetop { position: relative; width: 100%; height: 60px; }

	#sumaho_mainimg1 { position: relative; background: url('../img/sumaho/top/mainimg_1/after/img.jpg') no-repeat center; background-size: cover; }
	#sumaho_mainimg1_txt {position: absolute; box-sizing: border-box; width: 90vw; margin: auto; padding: 20px; color: #fff; background-color: rgba(0,0,0,.8);  line-height: 1.4; right: 0; bottom: 3%; left: 0; letter-spacing: 1px; }
	#sumaho_mainimg1_txt .ja {display: block; margin-bottom: 5px;  font-size: 18px; }

	#top_anim1_1, #top_anim1_2 { position: relative; opacity: 0; right: 15px; }

	#sumaho_mainimg2 { position: relative; background: url('../img/sumaho/top/mainimg_2/after/img.jpg') no-repeat center; background-size: cover; }
	#sumaho_mainimg2_txt {position: absolute; height: 50%; text-align: center; margin: auto; color: #fff;  line-height: 1.5; top: 0; right: 0; bottom: 0; left: 0; letter-spacing: 1px; }
	#sumaho_mainimg2_txt .ja1 {margin-bottom: 7%;  font-size: 18px; }
	#sumaho_mainimg2_txt .ja2 {margin-bottom: 7%;  font-size: 12px; }
	#sumaho_mainimg2_txt .en { font-size: 12px; }

	#top_anim2_1, #top_anim2_2 { position: relative; opacity: 0; top: 15%; }
	#top_anim2_3 { opacity: 0; }

	#sumaho_gnav_wrap { width: 100%; border-bottom: solid 1px #000; }
	.sumaho_gnav li, .sumaho_gnav2 li { float: left; box-sizing: border-box; width: 50%; border: solid 1px #ccc; }
	.sumaho_gnav2 li { border: none; }
	.sumaho_gnav a, .sumaho_gnav2 a { color: #333; }
	.sumaho_gnav a, .sumaho_gnav2 a, .sumaho_gnav span {display: block; box-sizing: border-box; height: 60px; padding: 20px 0 20px 15px;  font-size: 14px; letter-spacing: 1px; }
	.sumaho_gnav2 a {height: 40px; padding: 10px 0 10px 15px;  font-size: 12px; }

	.sumaho_gnav:first-of-type li { border-bottom: none; }
	.sumaho_gnav:nth-of-type(2) li { border-bottom: none; }
	.sumaho_gnav li:first-of-type { border-right: none; }
	.sumaho_gnav li:nth-of-type(odd) { border-left: none; }
	.sumaho_gnav li:nth-of-type(even) { border-right: none; }

	.sumaho_gnav_submenu, .sumaho_gnav_submenu2 { display: none; width: 100%; }

	.sumaho_gnav_submenu a, .sumaho_gnav_submenu2 a {position: relative; display: block; box-sizing: border-box; padding: 20px 0 20px 15px; color: #ccc; background-color: #222; border-bottom: solid 1px #333;  font-size: 14px; letter-spacing: 1px; }

	.sumaho_gnav_submenu span, .sumaho_gnav_submenu2 span { position: relative; opacity: 0; right: 20px; }

	.sumaho_gnav .sumaho_gnav_restaurant { border-bottom: solid 1px #ccc; }

	.arrow1 { position: relative; color: #333; background-color: #fff; }
	.sumaho_gnav_restaurant2 .arrow1 { color: #fff; background-color: transparent; }
	.sumaho_gnav_restaurant2 .arrow1.txt_black { color: #333; }
	.sumaho_gnav_restaurant2 .arrow1::before, .sumaho_gnav_restaurant2 .arrow1::after { background-color: #fff; }

	.arrow1::before, .arrow1::after, .arrow2::before, .arrow2::after { position: absolute; display: block; width: 1px; height: 10px; content: ''; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }

	.arrow1::before, .arrow1::after {background-color: #333;  right: 16px; }
	.arrow1::before { top: 37%; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
	.arrow1::after { top: 47%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

	.arrow2::before, .arrow2::after {background-color: #999;  right: 25px; }
	.arrow2::before { top: 25px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
	.arrow2::after { top: 19px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

	.active .arrow1 { position: relative; color: #fff; background-color: #000; }
	.sumaho_gnav_restaurant2.active .arrow1 { position: relative; color: #fff; background-color: #222; }
	.active .arrow1::before, .active .arrow1::after {background-color: #fff;  top: 25px; }
	.active .arrow1::before { right: 13px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
	.active .arrow1::after { right: 19px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

	.sumaho_footer { padding: 30px 0; background-color: #f6f6f6; border-bottom: solid 1px #d8d8d8; padding-bottom: 400px; }
	/*.sumaho_footer_logo { width: 73px; height: 30px; margin: 0 auto 30px; background: url('../img/sumaho/icon/gahama.png') no-repeat center; background-size: contain; }*/
	.sumaho_footer_logo { width: 140px; height: 40px; margin: 0 auto 30px; background: url('../img/sumaho/icon/gahama.png') no-repeat center; background-size: contain; }
	.sumaho_telbtn {position: relative; display: block; width: 90%; text-align: center; margin: 0 auto 20px; padding: 15px 0; color: #333; background: #fff; border: solid 1px #ccc;  font-size: 15px; }

	#sumaho_header_menu .sumaho_telbtn { background-color: transparent; }

	.sumaho_telbtn::before, .sumaho_telbtn::after { position: absolute; top: 37%; content: ''; }

	.sumaho_telbtn::before {width: 16px; height: 16px; background: url('../img/sumaho/icon/tel/black.png') no-repeat center; background-size: contain;  left: 15px; }

	.sumaho_telbtn.white::before {width: 16px; height: 16px; background: url('../img/sumaho/icon/tel/white.png') no-repeat center; background-size: contain;  left: 15px; }

	.sumaho_telbtn::after {width: 7px; height: 12px; background: url('../img/sumaho/icon/arrow_right/black.png') no-repeat center; background-size: contain;  right: 15px; }

	.sumaho_telbtn.white::after {width: 7px; height: 12px; background: url('../img/sumaho/icon/arrow_right/white.png') no-repeat center; background-size: contain;  right: 15px; }

	.sumaho_footer_snsbtn { width: 170px; margin: 0 auto; }
	.sumaho_footer_snsbtn li { float: left; }

	.sumaho_footer_snsbtn .facebook, .sumaho_footer_snsbtn .instagram, .sumaho_footer_snsbtn .seikai ,.sumaho_footer_snsbtn .shop{ display: block; width: 30px; height: 30px; }

	.sumaho_footer_snsbtn .facebook { margin-right: 15px; background: url('../img/sumaho/icon/facebook.png') no-repeat center; background-size: contain; }
	.sumaho_footer_snsbtn .instagram { margin-right: 15px; background: url('../img/sumaho/icon/instagram.png') no-repeat center; background-size: contain; }
	.sumaho_footer_snsbtn .seikai {margin-right: 15px; background: url('../img/sumaho/icon/seikai.png') no-repeat center; background-size: contain; }
	.sumaho_footer_snsbtn .shop { background: url('../img/sumaho/icon/logo.png') no-repeat center; background-size: contain; }

	.sumaho_footer_copyright, .sumaho_footer_copyright .pagetop { position: relative; overflow: hidden; }
	.sumaho_footer_copyright .copyright { float: left; box-sizing: border-box; width: 60%; height: 60px; text-align: center; margin: 0 0 0 20%; padding: 15px 0; }
	.sumaho_footer_copyright .pagetop { position: relative; display: block; float: left; width: 20%; height: 60px; }

	.sumaho_footer_copyright .pagetop::before { position: absolute; width: 18px; height: 15px; margin: auto; background: url('../img/sumaho/icon/pagetop/black.png') no-repeat center; background-size: contain; top: 0; right: 0; bottom: 0; left: 0; content: ''; }

	.sumaho_footer_copyright .pagetop.white_icon::before { position: absolute; width: 18px; height: 15px; margin: auto; background: url('../img/sumaho/icon/pagetop/white.png') no-repeat center; background-size: contain; top: 0; right: 0; bottom: 0; left: 0; content: ''; }
	#sumaho_reservation_year_month_day, #sumaho_reservation_staydays, #sumaho_reservation_plan {box-sizing: border-box; padding: 15px; border-bottom: solid 1px #333;  font-size: 16px; }
	#sumaho_reservation_year_month_day .txt, #sumaho_reservation_staydays .txt {margin-right: 10px; color: #999;  font-size: 13px; }
	#sumaho_year_month { margin-right: 5px; }

	#sumaho_reservation_plan .btn1 { position: relative; display: block; width: 100%; text-align: center; margin-bottom: 20px; padding: 10px 0; color: #000; background-color: #fff; }
	#sumaho_reservation_plan .btn2 { position: relative; display: block; box-sizing: border-box; width: 100%; padding: 10px 0; padding-left: 20px; color: #fff; border: solid 1px #333; }
	#sumaho_reservation_plan a:nth-child(2) { border-bottom: none; }
	#sumaho_reservation_plan .btn2::after { position: absolute; width: 7px; height: 12px; background: url('../img/sumaho/icon/arrow_right/white.png')no-repeat; background-size: contain; top: 16px; right: 12px; content: ''; }

	#sumaho_reservation_plan .btn1 span { position: relative; padding-left: 20px; }
	#sumaho_reservation_plan .btn1 span::before { position: absolute; width: 16px; height: 16px; background: url('../img/sumaho/icon/search.png')no-repeat center; background-size: contain; top: 2px; left: 0; content: ''; }
	.mainimg3txt { width: 100%; }
	.mainimg3txt .ja { font-size: 20px; z-index: 4; }
	.contents_outer { padding: 4% 3% 0 3%; }
	#ttl1Anim_3 { font-size: 12px; }
	.fz14 { font-size: 14px; }
	.ttl3 { width: 100%; }
	.ttl3:before, .ttl3:after {width: 100%;  left: 0; }
	.ttl3_contents_left { float: none; }
	.ttl3_contents_right { float: none; }
	.ttl4:before { display: none; }
	.ttl4 .txt { font-size: 25px; }
	.btn3 { width: 90%; margin: 0 auto; padding-top: 20px; padding-bottom: 20px; }

	/* 宿泊プランをみるボタン */
	.btn5 {display: block; padding: 10px 30px 15px; color: #000; background-color: #fff; border: solid 1px #000;  font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif; -webkit-transition: .5s opacity ease-in-out; transition: .5s opacity ease-in-out; }
	.btn5_txt_wrap { text-align: center; }
	.btn5_txt_wrap .ja { font-size: 14px; }
	.btn5_txt_wrap .en { font-size: 20px; }
	.omotenashi_ttl.show:before { top: 40px; } }

@media only screen and (max-width: 600px) and (min-width: 960px) { .vw {font-size:2vw;}}
@media only screen and (max-width: 470px) and (min-width: 600px) { .vw {font-size:3vw;}}
@media only screen and (max-width: 320px) and (min-width: 470px) { .vw {font-size:4.5vw;}}


@media screen and (max-width:600px) {
.sumaho { display: block !important; }
.nosumaho { display:none;}
.telbtn { display: block; background-color: #fff; color: #000; text-align: center; border:solid 1px #000; padding: 5% 0;}
 }

@media screen and (max-width:470px) {
	.omotenashi_omimai {font-size: 1.4em; padding: 5% 0;}
	.anniversary1th { width: 100%; bottom: 90px; }
	#ttl1Anim_1, .ttl1 { font-size: 20px; }
	.ttl6 .txt { font-size: 20px; }
	#footer_nav { width: 100%; }
	.omotenashi_ttl { font-size: 22px; }
	.omotenashiContentsWrapper { padding: 0 5%; }
	.omotenashi_links { margin-bottom: 10px; }
	.omotenashi_links li {width: 100%; margin: 0 0 20px 0; }
	.omotenashi_access_btn { width: 50%; text-align: center;margin: 0 auto; padding-top: 15px; padding-bottom: 15px; }
	.omotenashi_link_txt {width: 70%;  text-align: center; margin: 0 auto; padding: 0; }
	.omotenashi_link_txt span {padding-bottom: 3px; border-bottom: solid 1px #000; }
	.omotenashi_ttl.show:before { top: 64px; }
	.omotenashi_ttl.show { margin-bottom: 20px; }
	.sumaho_footer { padding-bottom: 30px; }
	.ttl17{font-size: 17px;}
	 }
/* iphone5 */
@media screen and (max-width: 320px) { .ttl4 .txt { font-size: 23px; }
	.omotenashi_link_txt {width: 90%;}
	#preloader_logo { background-size: 60%; }
	#footer { padding-top: 30px; padding-bottom: 30px; }
	}