@charset "utf-8";
/* CSS Document */

/*html {
  scroll-behavior: smooth;
}*/
#container{
	font-family: 'メイリオ', 'Meiryo', 'Helvetica', 'ヒラギノ角ゴシック ProN', 'Arial', 'ＭＳ Ｐゴシック';	
    width: 100%;
    margin: 0;
	font-size: 14px;
	color: #444444;
	line-height: 1.7;	
}

* { box-sizing: border-box; }
#container a{
	text-decoration: none;
/*	color: #333;*/
}
#container a:hover{
/*	color: #333;*/
	opacity: .6;
}
#container img{
	width: 100%;
	vertical-align: bottom;
}
.w1000{
	width: 1000px;
	margin: 0 auto;
}

.pc{display: block;}
.sp{display: none;}

ul {
  list-style: none;
}

/*-- 画像位置 --*/
#container img {
    margin: 0;
    padding: 0;
    vertical-align: bottom;
	max-width: 100%;
}
/*-- flex --*/
.flex_box {
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
/*	align-items: flex-end;*/
}
/*-- font --*/
.kiwi{	font-family: 'Kiwi Maru', serif;}
.kos{	font-family: 'Kosugi Maru', sans-serif;}
.s-font{font-size: 0.9em;}
/*--------------------page-top */
#page-top{
    position: fixed;
    z-index: 100;
    right: 20px;
    bottom: 20px;
}
#page-top a{
    color:  rgba(255,206,0,0.65);
}
#page-top a:hover{
    color: rgba(255,166,0,1.00);
}
/*--------------------パンくず */
#pankuzu{
	margin: 15px auto;
	width: 1000px;
	font-size: .85em;
}

#pankuzu ul{
    padding: 0 0 5px;
    _zoom: 1;
}
#pankuzu li{
    float: left;
    list-style: none;
}
#pankuzu li + li:before{
    margin: 0 8px;
    content: '>';
}

/*--------------------btn */
.btn {
	position: relative;
	z-index: 1;
/*	display: inline-block;*/
	width: 50%;
	max-width: 35em;
	margin: 3em auto 1em;
	line-height: 3;
	cursor: pointer;
	user-select: none;
	transition: transform 0.2s, color 0.2s;
	transform: translate(0.5em -0.4em);
/*	color: #26c6da;*/
	border: 1px solid #555;
	background: transparent;
	text-align: center;

	font-family: 'Kosugi Maru', sans-serif;
	font-size: 1.2em;
	font-weight: bold;
}
.btn:before {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: '';
	transition: transform 0.2s, background-color 0.2s;
	transform: translate(-0.4em, -0.3em);
	background-color: rgba(5,171,117,0.50);
}
.btn a{
	color: #222; display: block;
}
.btn a:hover{
	color: #000;
	z-index: 1;
}
.btn:hover {
	transform: translate(0.1em, -0.1em);
}
.btn:hover:before {
	transform: translate(0.4em, 0.4em);
	background-color: rgba(54,208,9,0.40);	
}
.btn:active {
	transition-duration: 0.1s;
	transform: translate(0, 0);
}
.btn:active:before {
	transition-duration: 0.1s;
	transform: translate(0, 0);
	background-color: #FFB800;
}
.btn a:active {color: #FFF!important;}
.btn:focus {
	color: #ffca3f;
	border: 1px solid #ffca3f;
}
.btn:focus:hover {
	color: #ffffff;
}
.btn:focus:before {
	background-color: rgba(128,214,217,0.50);
}

.btn.activity:before {	background-color: rgba(255,202,63,0.50);}
.btn.activity:active:before {	background-color: #ffca3f;}
.btn.activity:focus {	color: #fff;	border: 1px solid #ffca3f;}
.btn.activity:focus:before {	background-color:  rgba(255,202,63,0.50);}


.btn.other_link:before {	background-color: rgba(255,247,59,0.50);}
.btn.other_link:hover {	transform: translate(0, 0);}
.btn.other_link:active:before {	background-color: #ffca3f;}
.btn.other_link:focus {	color: #fff;	border: 1px solid #ffca3f;}
.btn.other_link:focus:before {	background-color: rgba(255,247,59,0.50);}

/*------------------------------marker*/
.marker{
background:linear-gradient(transparent 65%, #fff799 65%);
font-weight:500; 
}
/*------------------------------title*/
.hero{	
	background: 
/*		url("../img/intro_bottom_bg.png") repeat-x center bottom,*/
		url("../img/intro_bg.jpg") repeat center top;
}

#title{
	background:url("../img/bg_main.png") repeat-x center top;
/*	background-size:contain;*/
/*	height:400px;*/
/*	min-height: 600px;*/
	height:auto;
	text-align: center;
	padding-top: 1.5em;
	padding-bottom:4em;
}
#title .w1000{position: relative;}
#title h1{
    max-width: 474px;
    margin: 0 auto ;
    padding: 23% 0;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    background: url("../img/title_iihida.png") no-repeat top center;
    background-size: 100%;
}
/*#title ul{
	justify-content: center;
	width: 60%;
	margin: 1.5em auto;
}
#title ul li{
	flex: 1;
}*/
#title p{
	width: 60%;
	max-width: 579px;
	margin: 1.5em auto;
}
/*.cre{
	text-align: right;
	font-size: .8em;
	line-height: 1;
}*/
#title .jr_train{
	position: absolute;
	bottom:-45%;
	right:12%;
	max-width: 158px;
}
/*------------------------------intro*/
#intro{
	font-family: 'Kiwi Maru', serif;

/*	background: url("../img/intro_bg.jpg") repeat ;*/
/*	text-align: center;	*/
	
	padding-bottom: 8em;
}
#intro h2{
	font-size: 2.3em;
	font-weight: 500;
	text-align: center;
	margin: 1em 0 .5em;
}
#intro .desc{
	font-size: 1.3em;
	text-align: center;
}
#intro h3{
	text-align: center;
	width: 11em;
	margin: 3em auto 0;
	font-size: 1.8em;
	color: #3F9E73;
	font-weight: normal;
	padding-top: .5em;
	background: rgba(241,231,159,0.40);
    padding: 2px 1em;/*文字まわりの余白*/
    border: solid 2px #3F9E73;/*線の種類、太さ、色*/
    position: relative;
}
#intro h3:before{ 
    content:'';
    width: 100%;
    height: 100%;

    position: absolute;
	right:3px;
	bottom:2px;
    border: solid 2px #3F9E73;
}
#intro ul{	
	margin: 0 .5em 5em;
}
#intro .z-list{
    flex: 1;	

    position: relative;
    margin: 2em .7em 0;
/*    padding: 2em 2em;/*文字まわりの余白
    border: solid 1px #9ECFD8;/*線の種類、太さ、色
    border-radius: 50px;/*ボックスの角のまるみ*/
}
#intro .z-list h4{
	font-size: 1.5em;
	font-weight: 500;
	display: inline-block;
	padding: 1px 1em;
	color: #fff;
	background: #3F9E73;
	margin-left: -.5em;
}
#intro .z-list .image{
	position: relative;
	margin-bottom: 6em;
}
#intro .z-list .image span{
	background: rgba(118,221,194,0.40);
	width: 85%;
	min-height: 5em;
	padding: .5em 1em;
	font-size: 1.1em;
	font-weight: 500;
	position: absolute;
	top:100%;
	right: -0.2em;
	line-height: 1.4;
	text-align: justify;
	text-justify: auto;
}

#intro .z-list .link a{
	font-size: 1.1em;
	display: inline-block;
	padding: 5px 1em;
	color: #fff;
	background: #3F9E73;
}
#intro .s-font{text-align: center;}



/*-----------------------------------------------------------------tour*/
/*冬*/
/*.tour{
	background: url("../img/tour_bg_snow.png") repeat-y top right 10%,	#85c8eb;
	background-size: 20%,auto;
	padding: 15em 0 10em;
}*/
/*夏*/
/*.tour{
		background: url("../img/hotei_bg.jpg") repeat;
}*/
/*-----------------------------------------------------------------tab*/
/*h4{
	text-align: center;
	margin-bottom: 10px;
}*/

/*---------------------------------------------------hotel*/
/*冬*/
/*.hotel_box{
    padding: 3em 0 4em;
	clear: both;
	margin-bottom: 17em ;
	background: 		url("../img/intro_bottom_bg.png") repeat-x center bottom,#fff;
}*/
/*夏*/
.hotel_box{
    padding: 4em 0 ;
	clear: both;	
}
.hotel_box{background: url("../img/hotei_bg1.jpg") repeat;}
.hotel_box:nth-child(even){background: #F9F9F9;}
.hotel_box:last-child{	margin-bottom: 0 ;}
/*.hotel h3{
	font-family: 'Kiwi Maru', serif;
	text-align: center;
	background-color: #FFF;
	width: 5em;
	height: 5em;
/*	margin: -4em auto 0;
	font-size: 2em;
	color: #3F9E73;
	font-weight: 500;
	padding:1.5em 0;

	
    background-repeat: no-repeat,no-repeat;
    background-position: top,bottom;

}*/
.hotel h3{
	font-family: 'Kiwi Maru', serif;
	line-height: 1.2;
	text-align: center;
	width: 6em;
	margin: 3em auto 0;
	font-size: 1.8em;
	color: #004224;
	font-weight: normal;
	background-color: #FFF9E4;
    padding: 1em 1.2em 1.2em 1em ;/*文字まわりの余白*/
    border: solid 2px #3F9E73;/*線の種類、太さ、色*/
    position: relative;
}
.hotel #hida h3{
	line-height: .7;
	width: 9em;
}
.hotel #green h3{
	line-height: .7;
	width: 15em;
}
.hotel h3:before{ 
    content:'';
    width: 100%;
    height: 100%;

    position: absolute;
	right:3px;
	bottom:2px;
    border: solid 2px #3F9E73;
}
/*#hida h3{
	padding:1.2em 0;
	line-height: 1.2;
}*/
.hotel_box ul{
	padding: 5px 0;
/*	margin-bottom: 5em;*/
	justify-content: center;
	flex-wrap: wrap;
}
.hotel_list{
    background: #FFF;
    width : calc(100% / 3 - 1em);
    position: relative;
    margin: 1em 1em 1em 0;
/*	padding-bottom: 5em;
    padding-bottom: 3em;*/
    box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.30);
	
	display: flex;
	flex-direction: column;
}
.hotel_list dl{flex-grow: 1;}

.hotel_list:nth-child(3n){
	margin-right: 0;
}
.hotel_list .area{	
	font-family: 'Kiwi Maru', serif;
	background: rgba(255,39,0,0.70);
	color: #FFF;
	padding: 0 .4em 2px;
	font-size: 1.1em;
	
	position: absolute;
	top:0;
	left:0;
	
	
	display: none;
}
#hida .hotel_list .area,
#green .hotel_list .area
{display: block;	}
.hotel_list dt{
	font-size: 1.4em;
	padding: .5em 5px .2em;
	margin: 0 15px;
	border-bottom: 1px #079F6D solid;
	font-weight: 500;
	font-family: 'Kiwi Maru', serif;
}

.hotel_list .comingsoon{
	text-align: center;
    position: absolute;
	padding: 40% 0;
	background: rgba(153,176,188,0.30);
	top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
.hotel_list .comingsoon p{
	font-size: 2.5em;
	color: #FFF;
	text-shadow: 2px 2px 3px #111;
	line-height: 1;
	transform: rotate(-10deg);
	border: 3px #FFF solid;
	width: 70%;
	margin: auto;
	box-shadow: 1px 1px 5px #111;
}
.hotel_list .green{
	font-size: .9em;
	position: absolute;
	top:40%;
	left:2%;
	background-size: auto auto;
	background-color:rgba(25, 158, 98, 1);
	background-image:repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(39, 176, 97, 1) 3px, rgba(39, 176, 97, 1) 6px );
	color: #fff;
	border-radius: 100px;
	padding: 1.5em .7em;
	text-align: center;
	font-weight: bold;
}
.hotel_info{
	font-size: .9em;
	margin: 0 15px;
	padding: .2em 5px;
	line-height: 1.2;
/*	border-bottom: 1px #9BD8E4 solid;*/
}
.price,.price-child{
	font-size: 1.15em;
	margin: 0 15px;
	padding: .5em 5px;
	color: #d98000;
	font-weight: bold;
}
.room:before,.meal:before,.bk:before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 1.5em;
	color: #A4ECD4;
	padding-right: .3em;
}
.room:before{	content:"\f236";}
.bk:before{	
	content:"\f0f4";
	padding-right: .4em;
}
.meal:before{
	content:"\f2e7";
	padding-right: .5em;
	padding-left: .3em;
}
.price:before{
	content:"大人おひとり様";
	font-size: .8em;
	font-weight: normal;
	border:0.5px solid #d98000;
	padding: 0 3px;
	margin-right: .5em;
}
.price-child:before{
	content:"こども(小学生)お一人様";
	font-size: .7em;
	font-weight: normal;
	border:0.5px solid #d98000;
	padding: 0 3px;
	margin-right: .5em;
}
.hotel_list dd.link_url span{
	display:block; 
	margin-bottom: .5em;
}
.hotel_list dd.link_url a{
 /*   position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;*/
	background: #008A69;
	color: #fff;
	padding: 3px .5em;
}
.hotel_list dd.link_url{
	position: absolute;
	bottom:0;
	right: .5em;
}
/*.hotel_list dd.link_url a:hover{ background: rgba(255,244,92,.3);}*/
/*.dep_top a{
	float: right;
	margin-top: -3em;
	text-align: center;
	border-radius: 90px;
	text-shadow: 0px 0px 3px #d43b00;	
    background: url("../img/tour_tab.jpg");	
	color: #fff;
	display: block;
	padding: 1.5em .3em;		
}
*/


.hotel_list .link_url{
	margin: 1em 1em 0.5em;
	text-align: right;
}
.hotel_list .link_url span{
	display:block; 
	margin-bottom: .5em;
}
.hotel_list .link_url a{
	background: #3274B1;
	color: #fff;
	padding: 3px .5em;
}
.hotel_list .link_url .chu a{	background: #E15E7B;}
.hotel_list .link_url .kix a{	background: #459BA6;}
/*-----------------------------------------------------------------------gadget*/
.deptlist{display: none;}
.pricelist .left{display: none;}
/*------------------------------------------------------other*/
.other{
	 background: 
		 url(../img/other_bottom_bg.png) no-repeat center bottom -5px/100%,
		 url(../img/other_bg.jpg) repeat center top;
	padding: 7em 0 10em;
	text-align: center;
}

/*---------------------movie*/
.other dl{
	max-width:700px; 
	margin: 5em auto 0;
	background: #000;
	padding: 1em;
}
.other dt{
	font-weight: bold; 
	margin-bottom: .5em;
	color: #fff;
}
.other .flex_box dl{
	flex: 1;
	margin: .5em;
}
/*-----------------------------------------------------------------------90周年ロゴ*/

.jr90th img{width: 10%;}
.jr90th{
	position: absolute;
	bottom:-13em;
	left:2%;
	width:20%!important;
	z-index: 99;
}
/************************************************************
					★min770px－max999px
************************************************************/
@media screen /*and (min-width: 770px) */and (max-width: 1000px){
#title .w1000{position: static;}	
#title{position: relative;}
#title .jr_train{
	position: absolute;
	bottom:-20%;
	right:10%;
}
.jr90th{
	top:73%;
	left:1em;
	width:20%!important;
}
}
/************************************************************
					★タブレット対応
************************************************************/
@media screen /*and (min-width:600px) */and (max-width:769px)  {
#title{	padding-bottom:0;}	
#title .w1000{position: relative;}
#title .jr_train{
	width: 30%;
	position: absolute;
	bottom:19%;
	left:-7%;
}
.jr90th{
	top:58%;
	left:3%;
	width:27%!important;

}
}



/************************************************************
					★min770px－max999px
************************************************************/
@media screen /*and (min-width: 770px) */and (max-width: 1000px){

#container, .w1000 {
	min-width: 100%;  
	width: 100%;
	margin: 0;

	overflow: hidden;
}
.w1000 {	padding: 0 5px;}

/*img{max-width:100%;}*/
/*br{display: none}*/


/*---------------------------------------------コンテナ用★★★★★★★★-----*/
/*------------------------------title*/
#title{
	background:
		url("../img/bg_main.png") repeat-x right 43% top 100%,url("../img/hotei_bg.jpg") repeat center top
/*		linear-gradient(to bottom, #cde8f2 0%, #cde8f2 50%, rgba(255,255,255,0.00) 50%, rgba(255,255,255,0.00)100%)*/;
	background-size:150%,8%;
}


/*------------------------------title*/



/*------------------------------------------------------point*/
#point table,#point dl,#point ul{
	width: 100%;
}

}




/************************************************************
					★タブレット対応
************************************************************/
@media screen /*and (min-width:600px) */and (max-width:769px)  {

img{
    width /***/: auto;
    max-width: 100%;
    height: auto;
}
/* 非表示指定 */
.pc {display: none;}
.pc{display: none;}
.sp{display: block;}	
#breadcrumbs,#pankuzu,#breadcrumb {display: none;}

/*---------------------------------------------コンテナ用★★★★★★★★-----*/
/*--------------------btn */
.btn {	width: 80%;}
/*------------------------------title*/
#title{
	background:none;
	height:auto;
}
#title .w1000{padding: 0;}
#title h1 span{
	margin-top: -1.5em;
	}
#title h1{
    padding: 0;
    text-indent: 0;
    background: none;
    margin-bottom: 0;
    max-width: 770px;	
}

#title p:last-of-type{	width:90%;	margin: .5em auto; padding-top: 10%;}

/*---------------------------------------------------#intro*/
#intro .z-list .image{	margin-bottom: 40%;}	
#intro .z-list .image span{
	min-height: 40%;
	width: 100%;
	font-size: .95em;
	padding: 3px .8em;
	right:0;
	line-height: 1;
}	
	
/*---------------------------------------------------hotel*/
.hotel_box{    padding: 1em 0 ;}
.hotel h3{
	margin: 1em auto 0;
	font-size: 1.5em;
    padding: .8em 1.2em 1em 1em ;/*文字まわりの余白*/
}	
.hotel_list{
	background: #FFF;
	width : calc(100% / 2 - 1em) ;
	position: relative;
	margin: 1em .5em;
}	
.hotel_list:nth-child(3n){
	margin-right: .5em;
}
.hotel_box ul{
	margin-bottom: 1.5em;
}
.hotel_box .btn {	margin: .5em auto 1em;}

}

/************************************************************
						★スマホ対応
************************************************************/
@media screen and (max-width:599px)  {


/*--- 非表示 ---*/
img{max-width:100%;}
.sp_none{display: none;}

/*#breadcrumbs,#pankuzu {display: none;}*/
.pc{display: none;}
.sp{display: block;}



/*---------------------------------------------コンテナ用★★★★★★★★-----*/

/*--------------------btn */
.btn{    
	width:95%;	
	font-size: 4vw; 
	margin-top: 1em;
	line-height: 1.3;
	padding: .5em 0;
}

/*------------------------------title*/
#title p:last-of-type{	width: 95%;}	


/*------------------------------intro*/
#intro{	padding-bottom: 0;}
#intro h2{	font-size: 6.5vw;}
#intro .desc{
	font-size: 1.2em;

}
#intro h3{	font-size: 6vw;}
#intro ul{	margin: 2em auto; display: block;}
#intro .z-list{    margin: 1em .7em 0;}
#intro .z-list h4{
	position:absolute;
	top:-.7em;
	z-index: 99;
}
#intro .z-list .link a{
	display: block;
	text-align: right;
}
#intro .s-font{text-align: left;}
#intro .z-list .image{	margin-bottom: 18%;}	
#intro .z-list .image span{
	min-height: auto;
	padding: .8em;
}	
/*-----------------------------------------------------------------tour*/
/*冬*/
/*.tour{
	background: url("../img/tour_bg_snow.png") repeat-y top right ,	#85c8eb;
	background-size: 30%,auto;
	padding: 6em 0;	
}*/ 
/*---------------------------------------------------hotel*/
.hotel_list{	width : 100% ;}	
/*---------------------------------------------------hotel*/
.hotel_box{    
	padding: 2em 0;
	margin-bottom: 5em ;
}


/*------------------------------------------------------other*/
.other{	padding: 2em 0 3.5em;}



	
}
