@charset "UTF-8";

.slider.top li .caption,#topEvent,#top-enkai {
		font-family: 'Playfair Display','Noto Serif Japanese',"Noto Serif CJK JP","ヒラギノ明朝 ProN W3",
		"Hiragino Mincho ProN","游明朝",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
}

#topOnsen .inner,#wideBnArea {
	font-family: 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'HGP明朝B', serif;
}


/* 後々main移転用 */

.linkbtn {
	position:relative;
	color:#fff;
	padding:0.8em;
	text-align:center;
	background-image:url(../images/bg_nav.gif);
	background-repeat:repeat;
	background-position:top left;
	border-radius:1.2em;
	overflow:hidden;
}
.linkbtn img {position:absolute;transition:all 1s ease-in-out;transform:translate(-300px,-20px);opacity:1;}

.linkbtn:hover img {opacity:1;transform:translate(300px,-20px);}

.linkbtn a {
	font-size:1.2em;
	color:#fff;
	text-decoration:none;
}

/*  */


.slider_t {
	border-top:1px solid #000;
	border-bottom:1px solid #111;
	line-height:0;
}
#wrapper main .slider_t li {width:1600px;margin-left:auto;margin-right:auto;}
/*.slider_t img {max-width:unset;width:auto;}*/


@media screen and (min-width:1500px) {
}
@media screen and (max-width:1120px) {
}
@media screen and (max-width:900px) {
}


/* ↓ パネル画像 tp_onsen.jpg 等に変更  */
#top .pc_slider .section.onsen:before {background-image:url(../images/bg_slddiv_onsen.jpg);}
#top .pc_slider .section.ganban:before {background-image:url(../images/bg_slddiv_ganbanyoku.jpg);}
#top .pc_slider .section.yumemi:before {background-image:url(../images/bg_slddiv_relaxation.jpg);}
#top .pc_slider .section.restaurant:before {background-image:url(../images/bg_slddiv_restaurant.jpg);}
#top .pc_slider .section.dessert:before {background-image:url(../images/bg_slddiv_dessert.jpg);}



.slick-slide img {margin: auto;}

#Intro {
	color:#fff;
	text-align:center;padding:1em;font-size:1.15em;
	background-image:url(../images/bg_asanoha_red6.gif);
	background-repeat:repeat;
	border-top: 1px solid #570e0e;
}

#topEvent {
	border-top:1px solid #000;
	position:relative;
	padding:40px 0 100px;
}
@media screen and (max-width:700px) {
	#topEvent .inner {width:70%;}
}
#topEvent .inner {overflow:visible;width:1000px;}
@media screen and (min-width:1200px) {
	#topEvent .inner {width:1200px;}
}

#topEvent #col {margin-top:50px;}

/*info掲載時*/
#topEvent .info {
	font-size:16px;text-align:center;
	background-color:#fff;border:4px solid #fb574e;padding:20px;
	position:relative;transition:all 0.5s ease;
}
#topEvent .info p:first-of-type {font-size:19px;font-weight:bold;padding-bottom:17px;}
#topEvent .info .link {
	position: absolute;
	top: 0;left: 0;width: 100%;height: 100%;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
#topEvent .info.over:hover {opacity:0.7;}


.emphasize {
	color:#f73232;
	padding:0.7em;
	background:#fff;
	font-size:18px;
	border:3px solid #fb5858;
	border-radius: 5px;
	box-sizing:border-box;
	line-height:150%;
}

/*ここまで*/


.eventBn {
	position:relative;
	transition:opacity 0.5s ease-in-out;
}
#topEvent .eventBn {width:270px !important;}
.eventBn figure {width:270px;height:200px;}
.eventBn.big figure {height:360px;}

.eventBn figure img {width:100%;height:100%;border: 1px solid #222;box-sizing: border-box;}
.eventBn .title {
	background:url(../images/bg_koushi_brown.gif) repeat;
	margin-top:1.5rem;font-size:17px;font-weight:bold;
}
.eventBn .period {
	margin-top: 15px;padding: 5px;line-height: 100%;
	font-size: 15px;font-weight: bold;text-align: center;
}
.eventBn .txt {margin-top:1rem;font-size:14px;text-align:left;display:none;}
.eventBn .link {position:absolute;top:0;left:0;width:100%;height:100%;color: transparent;}
.eventBn:hover {opacity:0.8;}
#topEvent .bx-wrapper .bx-viewport {background:none;height:auto !important;}
#topEvent .bx-wrapper .bx-controls-direction a {top:134px !important;margin-top:0 !important;}
#topEvent .bx-wrapper .bx-pager {display:none;}
#topEvent .linkBtn {font-size:20px;background:#fff;}
#topEvent .linkBtn.cale {position:relative;margin-top:50px;}
#topEvent .linkBtn.cale figure {position:absolute;bottom:0;left:100px;}
#topEvent .linkBtn.cale a {padding:15px 0;}

/*.popArea {
	width:90%;
	display:flex;justify-content:space-between;
	margin-top:40px;
}
.popArea p {width:31%;}
*/


#topOnsen .inner {
	width:1000px;
	-webkit-font-feature-settings: 'pkna';
	font-feature-settings: 'pkna';
	font-size:17px;font-size: 1.7rem;
	line-height: 1.9;
	letter-spacing: 0.3em;
	height:500px;
	position:relative;
}
#topOnsen {
	background-image:url(../images/bg_top_onsen-pr.jpg);
	background-position:center;
	background-repeat:no-repeat;
	padding-top:50%;
	position:relative;
}
#topOnsen.effect {background-size:120%;transition:all 3s ease-in-out;transiton-delay:2s;}
#topOnsen.effect.fade{background-size:100%;}

#topOnsen.effect h3 {
	position:absolute;top:0;
	font-size:5vw;
	width:100%;text-align:center;
	transition:opacity 1s ease-in-out;opacity:0;
	-webkit-font-feature-settings: 'pkna';
	font-feature-settings: 'pkna';
}
#topOnsen.fade h3 {opacity:1;}
#topOnsen .textBox {
	width:75%;background:#fff;padding:30px 60px;
	text-align:left;font-size:18px;line-height:180%;
	position:absolute;bottom:-180px;left:50%;transform:translateX(-50%);
}

/*---------共通ボタン----------*/
.linkBtn2 {
	display:block;
	margin-left:auto;margin-right:auto;
	background:#d7bfb0;border-radius:5px;transition:background 0.5s ease;
	position:relative;
	background-image:url(../images/bg_asanoha_red6.gif);
}
.linkBtn2:hover {background:#9f1328;}
.linkBtn2 p {color:#fff;text-align:center;padding:2.5% 0;letter-spacing:0.18em;transition:color 0.5s ease;}
.linkBtn2 p:hover {color:#fff;}
.linkBtn2::after {
	content:"";display:block;
	width: 0;height: 0;
	border-left: 11px solid #fff;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	position:absolute;left:5%;top:50%;transform:translateY(-50%);
} 
/*--------------------*/


.maru1 {position:absolute;bottom:0px;left:0;}
.maru2 {position:absolute;bottom:25px;right:0;}
.maru1 .effect {opacity:0;transition:all 1s ease-in;}
.maru2 .effect {opacity:0;transition:all 1s ease-in;transition-delay:0.5s;}
.maru1 .effect.fade,.maru2 .effect.fade {
		opacity:1;
		-webkit-animation:fuwafuwa 3s infinite linear alternate;
		animation:fuwafuwa 3s infinite linear alternate;
}
@keyframes popin {
  0%    {opacity:0;transform:scale(0);}
  50%    {opacity:0.5;transform:scale(0.6);}
  90%    {opacity:1;transform:scale(1.2);}
  100%    {opacity:1;transform:scale(1);}
}

@-webkit-keyframes fuwafuwa {
0% {-webkit-transform:translate(0, 0) rotate(-5deg);}
50% {-webkit-transform:translate(0, -5px) rotate(0deg);}
100% {-webkit-transform:translate(0, 0)rotate(5deg);}
}

@keyframes fuwafuwa {
0% {transform:translate(0, 0) rotate(-5deg);}
50% {transform:translate(0, -5px) rotate(0deg);}
100% {transform:translate(0, 0)rotate(5deg);}
}



#topTopics {padding:100px 0 50px;background:#e6d6ce;
	background-image:url(../images/bg_asanoha_red5.gif);
	background-repeat:repeat;
	border-top: 1px solid #570e0e;

}
#topTopics h2 {color:#fff;}

#topTopics h2 .eng {
	color:#FFDA3F;
	background-color:#601a1a;
	border-radius: 15px;
	width: 150px;
	text-align: center;
	margin: auto;
}

#topTopics .topicsUl {margin-top:50px;height:180px;overflow-y:scroll;text-align:left;}
#topTopics .topicsUl li {
	letter-spacing:0.2em;margin-bottom:15px;
	overflow:hidden;
	color:#fff;
}
#topTopics .topicsUl li .mark {
	width:85px;display:block;text-align: center;float:left;
	margin-right:30px;font-size:11px;color:#fff;
	font-style:italic;letter-spacing:0.1em;line-height:130%;
	padding: 2px;
	border-radius: 4px

}


#topTopics .topicsUl li .date {margin-right:30px;width:105px;display:block;text-align: center;float:left;line-height:130%;}
#topTopics .topicsUl li .txt {display:block;float:right;width:610px;overflow: hidden;}
#topTopics .topicsUl a {color:#fff;transition:all 0.2s ease-in-out;}
#topTopics .topicsUl a:hover {color:#eee;text-decoration:underline;}



/* wideBnArea deleted */

/* Appeal */

#AppealArea {
	background-position:top left;
	background-repeat:repeat;
}
#AppealArea .inner {overflow:visible;}
.app-bg {
	background-color:#fff;height:540px;
	background-position:center top;background-repeat:no-repeat;background-size:auto;
	/*padding-top:28.125%;*/
}
/*.app-area {margin-top:-50px;width:480px;padding:1.8em;background-color:rgba(255,255,255,1);padding-bottom:4em;}*/
.app-bg {
	opacity: 0;
	transition: all 2s ease-in-out;
	-webkit-transition: all 2s ease-in-out;
}
.app-bg.effect::after {
	content:'';
	background-color:rgba(0,0,0,.5);
	position:absolute;left: 0;right:0;top:0;bottom:0;height:540px;
	transition:background-color 2s ease;
}
.app-bg.fade::after {
	background-color:rgba(0,0,0,.0);
}

#ganban.app-bg.lazyloaded {background-image:url(../images/bg_appeal_ganban.jpg);opacity: 1;}
#restaurant.app-bg.lazyloaded {background-image:url(../images/bg_appeal_restaurant.jpg);opacity: 1;}
#shabu.app-bg.lazyloaded {background-image:url(../images/bg_appeal_shabu.jpg);opacity: 1;}
#yoga.app-bg.lazyloaded {background-image:url(../images/bg_appeal_yoga.jpg);opacity: 1;}
#relaxation.app-bg.lazyloaded {background-image:url(../images/bg_appeal_relaxation.jpg);opacity: 1;}
#chaidii.app-bg.lazyloaded {background-image:url(../images/bg_appeal_chaidii.jpg);opacity: 1;}
#kids.app-bg.lazyloaded {background-image:url(../images/bg_appeal_kids.jpg);opacity: 1;}


#AppealArea section {position:relative;margin-bottom:320px;}
#AppealArea section#topOnsen {margin-bottom:350px;}
#AppealArea .title_box {
	position: absolute;z-index:2;
	background: rgba(255,255,255,0.8);
	width:30%;padding:2% 1%;
	top:15px;left:-35%;opacity:0;
	transition:all 0.8s ease;
}
#AppealArea .title_box.fade {left:0;opacity:1;}
#AppealArea .title_box .line {
	display:inline-block;font-size:35px;
	border-left:2px solid #8a7c7c;padding-left:25px;
	line-height:100%;
}
#AppealArea #relaxation .title_box .line {font-size:33px;}
#AppealArea #relaxation .text_box {bottom:-140px;}
#AppealArea .title_box .eng {
	font-size: 11px;
	line-height: 100%;
	letter-spacing: 2px;
	color: #AC973D;
	vertical-align:baseline;
}
#AppealArea .text_box {
	position:absolute;z-index:2;
	font-size:18px;
	line-height:160%;
	text-align:left;width:900px;
	left:50%;transform: translateX(-50%);
	top: 500px;
	background:#fff;
	padding:20px 30px;
}
#AppealArea .text_box .linkBtn2 p {font-size:15px;}

#AppealArea .sb_box {padding:70px 0 60px;border-top: 1px solid #f2eee4;}
#AppealArea .sb_box .flex-box {justify-content:space-between;}
#AppealArea .sb_box .item {border: 2px solid #fff;}
#AppealArea .sb_box .tt {font-size: 28px;}


#top-bus {padding:80px 0;border-top:1px solid #f2eee4;}

#top-bus .effect .bus {opacity:0;padding-right:80px;transition:all 1s ease-in-out;}
#top-bus .effect.fade .bus {opacity:1;padding-right:0;}


.mgnLR0 {margin-left:0;margin-right:0;}

/* effect */
/*
#topOnsen.effect {}
#topOnsen.effect.fade {}

#topOnsen .mainTt span {opacity:0;transition:all 2s ease-in-out;}
#topOnsen.fade .mainTt span {animation: uptxt 1s ease-out forwards;}

#topOnsen.fade span:nth-child(1) {animation-delay: 0.1s;}
#topOnsen.fade span:nth-child(2) {animation-delay: 0.2s;}
#topOnsen.fade span:nth-child(3) {animation-delay: 0.3s;}
#topOnsen.fade span:nth-child(4) {animation-delay: 0.4s;}
#topOnsen.fade span:nth-child(5) {animation-delay: 0.5s;}
#topOnsen.fade span:nth-child(6) {animation-delay: 0.6s;}
#topOnsen.fade span:nth-child(7) {animation-delay: 0.7s;}
#topOnsen.fade span:nth-child(8) {animation-delay: 0.8s;}
#topOnsen.fade span:nth-child(9) {animation-delay: 0.9s;}
#topOnsen.fade span:nth-child(10) {animation-delay: 1.0s;}
#topOnsen.fade span:nth-child(11) {animation-delay: 1.1s;}
#topOnsen.fade span:nth-child(12) {animation-delay: 1.2s;}
#topOnsen.fade span:nth-child(13) {animation-delay: 1.3s;}
#topOnsen.fade span:nth-child(14) {animation-delay: 1.4s;}


#topOnsen .txtArea {margin-top:-3rem;transition:all 0.4s ease-in-out;}
#topOnsen.fade .txtArea {margin-top:0rem;}



@keyframes uptxt {
  0%    {opacity:0;transform: translateY(50px);}
  50%    {opacity:0.5;transform: translateY(20px);}
  100%    {opacity:1;transform: translateY(0);}
}
*/


.box-sizing {box-sizing:border-box;}



#pnArea .letter span {
	opacity:1;color: transparent;
	animation: blur-txt-wh 4.5s ease-out forwards;
}
#pnArea .letter span:nth-child(1) {animation-delay: 0.2s;}
#pnArea .letter span:nth-child(2) {animation-delay: 0.4s;}
#pnArea .letter span:nth-child(3) {animation-delay: 0.6s;}
#pnArea .letter span:nth-child(4) {animation-delay: 0.8s;}
#pnArea .letter span:nth-child(5) {animation-delay: 1.0s;}
#pnArea .letter span:nth-child(6) {animation-delay: 1.2s;}
#pnArea .letter span:nth-child(7) {animation-delay: 1.4s;}
#pnArea .letter span:nth-child(8) {animation-delay: 1.6s;}



.effect.e1 {transition: all 0.7s ease-in;opacity:0;}
.fade.e1 {opacity:1;}