@charset "utf-8";
/* CSS Document */

/*------------------------------------------------------------
	旅色
------------------------------------------------------------*/
#tabiiro{
	clear:left;
	margin:0 auto;
	padding-top:50px;
	display:block;
	width:100%;
	text-align:center;
	background:#501d19;
}

#tabiiro section{
	clear:left;
	margin:0 auto;
	width:90%;
}

#tabiiro img{
	clear:left;
	margin:0;
	padding:0;
	display:block;
	width:100%;
}

/*------------------------------------------------------------
	詳細ボタン
------------------------------------------------------------*/
.border_btn01 {
	clear:left;
	margin-top:30px;
	display: inline-block;
	width: 100%;
	max-width: 350px; /* ボタン幅 */
	position: relative;
	color: #FFF; /* 文字色 */
	padding: 1em 2em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}

.border_btn01::before,
.border_btn01::after {
	position: absolute;
	width: 100%;
	height: 1px; /* 線幅 */
	content: '';
	-webkit-transition: all .3s;
	transition: all .3s;
	background: #FFF; /* 線色 */
}

.border_btn01::before {
	top: 0;
	left: 0;
}

.border_btn01::after {
	right: 0;
	bottom: 0;
}

/* マウスオーバーした際のデザイン */
.border_btn01:hover:before,
.border_btn01:hover:after {
  width: 0;
}

.border_btn02 {
	clear:left;
	margin-top:30px;
	display: inline-block;
	width: 100%;
	max-width: 350px; /* ボタン幅 */
	position: relative;
	color: #333; /* 文字色 */
	padding: 1em 2em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}

.border_btn02::before,
.border_btn02::after {
	position: absolute;
	width: 100%;
	height: 1px; /* 線幅 */
	content: '';
	-webkit-transition: all .3s;
	transition: all .3s;
	background:#333; /* 線色 */
}

.border_btn02::before {
	top: 0;
	left: 0;
}

.border_btn02::after {
	right: 0;
	bottom: 0;
}

/* マウスオーバーした際のデザイン */
.border_btn02:hover:before,
.border_btn02:hover:after {
  width: 0;
}

/*------------------------------------------------------------
	空室検索 #5f5148
------------------------------------------------------------*/
#search{
	clear:left;
	margin:0 auto;
	width:100%;
	height:600px;
	color:#FFF;
	font-size:18px;
	font-family:serif;
	letter-spacing:2px;
	line-height:2.5em;
	background:#501d19;
}

#search section{
	clear:left;
	margin:0 auto;
	padding-top:50px;
	width:80%;
	height:auto;
	text-align:center;
}

#search #title{
	float:none;
	margin-top:25px;
	margin-right:0;
	margin-bottom:10px;
	padding:0;
	padding-top:40px;
	display:block;
	width:100%;
	height:40px;
	line-height:0;
	color:#FFF;
	font-family:serif;
	font-size:24px;
	text-align:center;
	line-height:0;
	letter-spacing:3px;
	border-top:#68403d 1px solid;
	border-bottom:#68403d 1px solid;
}

#search #box1{
	float:none;
	margin-top:45px;
	margin-left:0;
	width:100%;
}

#search #btn{
	float:none;
	margin-top:50px;
	margin-left:0;
	width:100%;
	height:auto;
}

#search .btn01{
	float:none;
	margin-top:0;
	margin-left:0;
	padding:0;
	display:block;
	width:100%;
	height:60px;
	color:#333;
	font-size:16px;
	font-family:serif;
	font-weight:bold;
	text-decoration:none;
	background:#EEEEEE;
	letter-spacing:2px;
	border:0;
}

#search .btn02 a{
	float:none;
    display:block;
    overflow:hidden;
	margin-top:15px;
	margin-left:0;
	padding:0;
	width:100%;
	height:60px;
	text-align:center;
	text-decoration:none;
	color:#333;
	font-size:16px;
	font-weight:bold;
	background:#EEEEEE;
	line-height:60px;
	letter-spacing:2px;
	-webkit-transition:0.4s;
	transition:0.4s;
}

#search .btn02 a:hover{
	background:#EEEEEE;
}

#search .obj_year, .obj_month, .obj_day, .obj_no_date, .obj_per_num, .obj_stay_num{
	font-size:20px;
	font-weight:bold;
	font-family:serif;
	letter-spacing:2px;
	line-height:2em;
}


/*------------------------------------------------------------
	天然温泉
------------------------------------------------------------*/
#index1{
	float:none;
	width:100%;
	height:1100px;
	
	overflow:hidden;
}

#index1 #img{
	clear:left;
	width:100%;
	height:auto;
	display: flex;
	justify-content: center;
	position:relative;
	background:none;
	
	/* 画像を常に天地左右の中央に配置 */
	background-position: center center;
	/* 画像をタイル状に繰り返し表示しない */
	background-repeat: no-repeat;
	/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
	background-attachment: fixed;
	/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-size: cover;
}

#index1 #img::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:none;
	backdrop-filter: blur(2px);
}

#index1 #content1{
	clear:left;
	margin:0 auto;
	width:90%;
	text-align:center;
	position: absolute;
	z-index:5;
	
	justify-content: center;
	align-items: center;
}

#index1 #content1 h1{
	clear:left;
	margin-top:100px;
	margin-left:0;
	width:100%;
	height:auto;
	color:#333;
	text-align:center;
	font-size:30px;
	font-weight:bold;
	font-family:serif;
	letter-spacing:2px;
	
	-ms-writing-mode: tb-rl;
	writing-mode:horizontal-tb;
}

#index1 #content1 ul{
	clear:left;
	width:100%;
	color:#333;
	text-align:center;
	font-size:17px;
	font-family:serif;
	font-weight:bold;
	line-height:3em;
	letter-spacing:3px;
}

#index1 #content1 li span{
	font-size:20px;
}

#index1 a{
	clear:left;
	padding:10px 0;
	display:block;
	width:100%;
	color:#333;
	font-family:serif;
	font-size:16px;
	text-align:center;
	text-decoration:none;
	-webkit-transition:1s;
	transition:1s;
}

#index1 a:hover{
	color:#333;
	-webkit-transition:1s;
	transition:1s;
}

#index1 p{
	clear:left;
	margin:0 auto;
	margin-top:30px;
	width:100%;
	border:none;
}

#index1 p img{
	width:100%;
	height:auto;
}

#index1 .border_btn01 {
	clear:left;
	margin-top:0;
	display: inline-block;
	width: 100%;
	max-width: 350px; /* ボタン幅 */
	position: relative;
	color: #333; /* 文字色 */
	padding: 1em 2em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}

#index1 .border_btn01::before,
#index1 .border_btn01::after {
	position: absolute;
	width: 100%;
	height: 1px; /* 線幅 */
	content: '';
	-webkit-transition: all .3s;
	transition: all .3s;
	background: #333; /* 線色 */
}

#index1 .border_btn01::before {
	top: 0;
	left: 0;
}

#index1 .border_btn01::after {
	right: 0;
	bottom: 0;
}

/* マウスオーバーした際のデザイン */
#index1 .border_btn01:hover:before,
#index1 .border_btn01:hover:after {
  width: 0;
}

/*------------------------------------------------------------
	お料理
------------------------------------------------------------*/
#index2{
	float:none;
	width:100%;
	height:1100px;
	border-top:#CCC 1px solid;
	
	overflow:hidden;
}

#index2 #img{
	clear:left;
	width:100%;
	height:auto;
	display: flex;
	justify-content: center;
	position:relative;
	background:none;
	
	/* 画像を常に天地左右の中央に配置 */
	background-position: center center;
	/* 画像をタイル状に繰り返し表示しない */
	background-repeat: no-repeat;
	/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
	background-attachment: fixed;
	/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-size: cover;
}

#index2 #img::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:none;
	backdrop-filter: blur(2px);
}

#index2 #content1{
	clear:left;
	margin:0 auto;
	width:90%;
	text-align:center;
	position: absolute;
	z-index:5;
	
	justify-content: center;
	align-items: center;
}

#index2 #content1 h1{
	clear:left;
	margin-top:100px;
	margin-left:0;
	width:100%;
	height:auto;
	color:#333;
	text-align:center;
	font-size:30px;
	font-weight:bold;
	font-family:serif;
	letter-spacing:2px;
	
	-ms-writing-mode: tb-rl;
	writing-mode:horizontal-tb;
}

#index2 #content1 ul{
	clear:left;
	width:100%;
	color:#333;
	text-align:center;
	font-size:17px;
	font-family:serif;
	font-weight:bold;
	line-height:3em;
	letter-spacing:3px;
}

#index2 #content1 li span{
	font-size:20px;
}

#index2 a{
	clear:left;
	padding:10px 0;
	display:block;
	width:100%;
	color:#333;
	font-family:serif;
	font-size:16px;
	text-align:center;
	text-decoration:none;
	-webkit-transition:1s;
	transition:1s;
}

#index2 a:hover{
	color:#333;
	-webkit-transition:1s;
	transition:1s;
}

#index2 p{
	clear:left;
	margin:0 auto;
	margin-top:30px;
	width:100%;
	border:none;
}

#index2 p img{
	width:100%;
	height:auto;
}

#index2 .border_btn01 {
	clear:left;
	margin-top:0;
	display: inline-block;
	width: 100%;
	max-width: 350px; /* ボタン幅 */
	position: relative;
	color: #333; /* 文字色 */
	padding: 1em 2em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}

#index2 .border_btn01::before,
#index2 .border_btn01::after {
	position: absolute;
	width: 100%;
	height: 1px; /* 線幅 */
	content: '';
	-webkit-transition: all .3s;
	transition: all .3s;
	background: #333; /* 線色 */
}

#index2 .border_btn01::before {
	top: 0;
	left: 0;
}

#index2 .border_btn01::after {
	right: 0;
	bottom: 0;
}

/* マウスオーバーした際のデザイン */
#index2 .border_btn01:hover:before,
#index2 .border_btn01:hover:after {
  width: 0;
}

/*------------------------------------------------------------
	客室
------------------------------------------------------------*/
#index3{
	clear:left;
	margin-top:0;
	width:100%;
	height:1200px;
	
	overflow:hidden;
}

#index3 #img1{
	clear:left;
	margin:0 auto;
	top:650px;
	width:100%;
	height:450px;
	display:none;
	position:relative;
	background:url(../common/bg02.jpg);
	z-index:-1;
}

#index3 .pic1{
	float:none;
	position:absolute;
	width:100%;
	height:300px;
	z-index:1;
}

#index3 .pic1 img{
	clear:left;
	width:100%;
	height:300px;
	object-fit:cover;
	position:absolute;
}

#index3 #content{
	float:none;
	position:absolute;
	margin-top:350px;
	right:0;
	width:100%;
	height:auto;
	text-align:center;
}

#index3 .pic2{
	clear:left;
	margin-top:50px;
	position:absolute;
	width:100%;
	height:300px;
	z-index:1;
}

#index3 .pic2 img{
	clear:left;
	width:90%;
	height:300px;
	object-fit:cover;
}

#index3 ul{
	clear:left;
	margin:0 auto;
	margin-top:30px;
	width:90%;
	font-family:serif;
	font-size:17px;
	text-align:left;
	color:#333;
	letter-spacing:3px;
	line-height:2.3em;
}

#index3 li span{
	clear:left;
	display:block;
	font-size:22px;
	font-weight:bold;
	text-align:center;
}	
	
#index3 a{
	clear:left;
	padding:10px 0;
	display:block;
	width:100%;
	color:#333;
	font-family:serif;
	font-size:16px;
	text-align:center;
	text-decoration:none;
	-webkit-transition:1s;
	transition:1s;
}

#index3 a:hover{
	color:#333;
	-webkit-transition:1s;
	transition:1s;
}

#index3 .btn01{
	clear:left;
	margin:0 auto;
	width:70%;
	padding-bottom: 3px; /* テキストと下線の間隔 */
	background-image: linear-gradient(#333, #333);
	background-repeat: no-repeat;
	background-position: bottom right; /* 下線の初期位置 */
	background-size: 0 3px; /* 下線のサイズ（横幅、高さ） */
	transition: background-size 0.5s;
	letter-spacing:5px;
}

#index3 .btn01:hover {
	background-position: bottom left; /* 下線のホバー時位置 */
	background-size: 100% 2px; /* 下線の横幅を100%にする */
}

/*------------------------------------------------------------
	日本庭園
------------------------------------------------------------*/
#index4{
	clear:left;
	width:100%;
	height:auto;
	position:relative;
	background:none;
	background-image:none;
	
	/* 画像を常に天地左右の中央に配置 */
	background-position: left bottom;
	/* 画像をタイル状に繰り返し表示しない */
	background-repeat: no-repeat;
	/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
	background-attachment: fixed;
	border-top:#CCC 1px solid;
	
	overflow:hidden;
}

#index4 #content{
	clear:left;
	float:none;
	width:100%;
	height:auto;
	text-align:center;
	background:none;
}

#index4 ul{
	clear:left;
	padding-left:0;
	margin:0 auto;
	margin-top:100px;
	width:90%;
	font-family:serif;
	font-size:17px;
	text-align:left;
	color:#333;
	letter-spacing:3px;
	line-height:2.3em;
}

#index4 li span{
	clear:left;
	font-size:22px;
	font-weight:bold;
	text-align:center;
}	
	
#index4 a{
	clear:left;
	padding:10px 0;
	display:block;
	width:100%;
	color:#333;
	font-family:serif;
	font-size:16px;
	text-align:center;
	text-decoration:none;
	-webkit-transition:1s;
	transition:1s;
}

#index4 a:hover{
	color:#333;
	-webkit-transition:1s;
	transition:1s;
}

#index4 .pic1{
	clear:left;
	margin:0 auto;
	margin-top:60px;
	width:90%;
	height:300px;
}

#index4 .pic1 img{
	clear:left;
	width:100%;
	height:300px;
	object-fit:cover;
}

#index4 .btn01{
	clear:left;
	margin:0 auto;
	width:50%;
	padding-bottom: 3px; /* テキストと下線の間隔 */
	background-image: linear-gradient(#333, #333);
	background-repeat: no-repeat;
	background-position: bottom right; /* 下線の初期位置 */
	background-size: 0 3px; /* 下線のサイズ（横幅、高さ） */
	transition: background-size 0.5s;
	letter-spacing:5px;
}

#index4 .btn01:hover {
	background-position: bottom left; /* 下線のホバー時位置 */
	background-size: 100% 2px; /* 下線の横幅を100%にする */
}

/*------------------------------------------------------------
	スライダー
------------------------------------------------------------*/
#index4_img{
	clear:left;
	margin-top:50px;
	width:100%;
}

/*------------------------------------------------------------
	新着情報
------------------------------------------------------------*/
#index5{
	clear:left;
	padding-top:0;
	width:100%;
	height:900px;
	
	overflow:hidden;
}

#index5 h1{
	clear:left;
	padding-top:100px;
	margin-bottom:30px;
	text-align:center;
	font-family:serif;
	font-size:30px;
	font-weight:normal;
	color:#333;
	letter-spacing:5px;
}

#index5 h1 span{
	font-size:40px;
}

#index5 p{
	clear:left;
	margin:0 auto;
	width:90%;
	border:#CCC 1px solid;
}

/*------------------------------------------------------------
	バナー
------------------------------------------------------------*/
#index6{
	clear:left;
	padding-top:50px;
	width:100%;
	height:600px;
	background:#da948f;
	
	overflow:hidden;
}

#index6 section{
	clear:left;
	margin:0 auto;
	width:90%;
	height:auto;
}

#index6 li{
	float:left;
	margin:0 1%;
}

#index6 img{
	clear:left;
	margin-bottom:30px;
	width:100%;
	height:auto;
}

#index6 .banner01{
	width:48%;
}

#index6 .banner02{
	width:48%;
}





@media(min-width:768px) and ( max-width:1200px){
/*------------------------------------------------------------
	旅色
------------------------------------------------------------*/
#tabiiro{
	clear:left;
	margin:0 auto;
	padding-top:50px;
	display:block;
	width:100%;
	text-align:center;
	background:#501d19;
}

#tabiiro section{
	clear:left;
	margin:0 auto;
	width:90%;
}

#tabiiro img{
	clear:left;
	margin:0;
	padding:0;
	display:block;
	width:100%;
}

/*------------------------------------------------------------
	詳細ボタン
------------------------------------------------------------*/
.border_btn01 {
	clear:left;
	margin-top:30px;
	display: inline-block;
	width: 100%;
	max-width: 350px; /* ボタン幅 */
	position: relative;
	color: #FFF; /* 文字色 */
	padding: 1em 2em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}

.border_btn01::before,
.border_btn01::after {
	position: absolute;
	width: 100%;
	height: 1px; /* 線幅 */
	content: '';
	-webkit-transition: all .3s;
	transition: all .3s;
	background: #FFF; /* 線色 */
}

.border_btn01::before {
	top: 0;
	left: 0;
}

.border_btn01::after {
	right: 0;
	bottom: 0;
}

/* マウスオーバーした際のデザイン */
.border_btn01:hover:before,
.border_btn01:hover:after {
  width: 0;
}

.border_btn02 {
	clear:left;
	margin-top:30px;
	display: inline-block;
	width: 100%;
	max-width: 350px; /* ボタン幅 */
	position: relative;
	color: #333; /* 文字色 */
	padding: 1em 2em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}

.border_btn02::before,
.border_btn02::after {
	position: absolute;
	width: 100%;
	height: 1px; /* 線幅 */
	content: '';
	-webkit-transition: all .3s;
	transition: all .3s;
	background:#333; /* 線色 */
}

.border_btn02::before {
	top: 0;
	left: 0;
}

.border_btn02::after {
	right: 0;
	bottom: 0;
}

/* マウスオーバーした際のデザイン */
.border_btn02:hover:before,
.border_btn02:hover:after {
  width: 0;
}

/*------------------------------------------------------------
	空室検索 #5f5148
------------------------------------------------------------*/
#search{
	clear:left;
	margin:0 auto;
	width:100%;
	height:600px;
	color:#FFF;
	font-size:18px;
	font-family:serif;
	letter-spacing:2px;
	line-height:2.5em;
	background:#501d19;
}

#search section{
	clear:left;
	margin:0 auto;
	padding-top:50px;
	width:80%;
	height:auto;
	text-align:center;
}

#search #title{
	float:none;
	margin-top:25px;
	margin-right:0;
	margin-bottom:10px;
	padding:0;
	padding-top:40px;
	display:block;
	width:100%;
	height:40px;
	line-height:0;
	color:#FFF;
	font-family:serif;
	font-size:24px;
	text-align:center;
	line-height:0;
	letter-spacing:3px;
	border-top:#68403d 1px solid;
	border-bottom:#68403d 1px solid;
}

#search #box1{
	float:none;
	margin-top:45px;
	margin-left:0;
	width:100%;
}

#search #btn{
	float:none;
	margin-top:50px;
	margin-left:0;
	width:100%;
	height:auto;
}

#search .btn01{
	float:none;
	margin-top:0;
	margin-left:0;
	padding:0;
	display:block;
	width:100%;
	height:60px;
	color:#333;
	font-size:16px;
	font-family:serif;
	font-weight:bold;
	text-decoration:none;
	background:#EEEEEE;
	letter-spacing:2px;
	border:0;
}

#search .btn02 a{
	float:none;
    display:block;
    overflow:hidden;
	margin-top:15px;
	margin-left:0;
	padding:0;
	width:100%;
	height:60px;
	text-align:center;
	text-decoration:none;
	color:#333;
	font-size:16px;
	font-weight:bold;
	background:#EEEEEE;
	line-height:60px;
	letter-spacing:2px;
	-webkit-transition:0.4s;
	transition:0.4s;
}

#search .btn02 a:hover{
	background:#EEEEEE;
}

#search .obj_year, .obj_month, .obj_day, .obj_no_date, .obj_per_num, .obj_stay_num{
	font-size:20px;
	font-weight:bold;
	font-family:serif;
	letter-spacing:2px;
	line-height:2em;
}


/*------------------------------------------------------------
	天然温泉
------------------------------------------------------------*/
#index1{
	float:none;
	width:100%;
	height:1100px;
	
	overflow:hidden;
}

#index1 #img{
	clear:left;
	width:100%;
	height:auto;
	display: flex;
	justify-content: center;
	position:relative;
	background:none;
	
	/* 画像を常に天地左右の中央に配置 */
	background-position: center center;
	/* 画像をタイル状に繰り返し表示しない */
	background-repeat: no-repeat;
	/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
	background-attachment: fixed;
	/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-size: cover;
}

#index1 #img::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:none;
	backdrop-filter: blur(2px);
}

#index1 #content1{
	clear:left;
	margin:0 auto;
	width:90%;
	text-align:center;
	position: absolute;
	z-index:5;
	
	justify-content: center;
	align-items: center;
}

#index1 #content1 h1{
	clear:left;
	margin-top:100px;
	margin-left:0;
	width:100%;
	height:auto;
	color:#333;
	text-align:center;
	font-size:30px;
	font-weight:bold;
	font-family:serif;
	letter-spacing:2px;
	
	-ms-writing-mode: tb-rl;
	writing-mode:horizontal-tb;
}

#index1 #content1 ul{
	clear:left;
	width:100%;
	color:#333;
	text-align:center;
	font-size:17px;
	font-family:serif;
	font-weight:bold;
	line-height:3em;
	letter-spacing:3px;
}

#index1 #content1 li span{
	font-size:20px;
}

#index1 a{
	clear:left;
	padding:10px 0;
	display:block;
	width:100%;
	color:#333;
	font-family:serif;
	font-size:16px;
	text-align:center;
	text-decoration:none;
	-webkit-transition:1s;
	transition:1s;
}

#index1 a:hover{
	color:#333;
	-webkit-transition:1s;
	transition:1s;
}

#index1 p{
	clear:left;
	margin:0 auto;
	margin-top:30px;
	width:100%;
	border:none;
}

#index1 p img{
	width:100%;
	height:auto;
}

#index1 .border_btn01 {
	clear:left;
	margin-top:0;
	display: inline-block;
	width: 100%;
	max-width: 350px; /* ボタン幅 */
	position: relative;
	color: #333; /* 文字色 */
	padding: 1em 2em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}

#index1 .border_btn01::before,
#index1 .border_btn01::after {
	position: absolute;
	width: 100%;
	height: 1px; /* 線幅 */
	content: '';
	-webkit-transition: all .3s;
	transition: all .3s;
	background: #333; /* 線色 */
}

#index1 .border_btn01::before {
	top: 0;
	left: 0;
}

#index1 .border_btn01::after {
	right: 0;
	bottom: 0;
}

/* マウスオーバーした際のデザイン */
#index1 .border_btn01:hover:before,
#index1 .border_btn01:hover:after {
  width: 0;
}

/*------------------------------------------------------------
	お料理
------------------------------------------------------------*/
#index2{
	float:none;
	width:100%;
	height:1100px;
	border-top:#CCC 1px solid;
	
	overflow:hidden;
}

#index2 #img{
	clear:left;
	width:100%;
	height:auto;
	display: flex;
	justify-content: center;
	position:relative;
	background:none;
	
	/* 画像を常に天地左右の中央に配置 */
	background-position: center center;
	/* 画像をタイル状に繰り返し表示しない */
	background-repeat: no-repeat;
	/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
	background-attachment: fixed;
	/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-size: cover;
}

#index2 #img::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:none;
	backdrop-filter: blur(2px);
}

#index2 #content1{
	clear:left;
	margin:0 auto;
	width:90%;
	text-align:center;
	position: absolute;
	z-index:5;
	
	justify-content: center;
	align-items: center;
}

#index2 #content1 h1{
	clear:left;
	margin-top:100px;
	margin-left:0;
	width:100%;
	height:auto;
	color:#333;
	text-align:center;
	font-size:30px;
	font-weight:bold;
	font-family:serif;
	letter-spacing:2px;
	
	-ms-writing-mode: tb-rl;
	writing-mode:horizontal-tb;
}

#index2 #content1 ul{
	clear:left;
	width:100%;
	color:#333;
	text-align:center;
	font-size:17px;
	font-family:serif;
	font-weight:bold;
	line-height:3em;
	letter-spacing:3px;
}

#index2 #content1 li span{
	font-size:20px;
}

#index2 a{
	clear:left;
	padding:10px 0;
	display:block;
	width:100%;
	color:#333;
	font-family:serif;
	font-size:16px;
	text-align:center;
	text-decoration:none;
	-webkit-transition:1s;
	transition:1s;
}

#index2 a:hover{
	color:#333;
	-webkit-transition:1s;
	transition:1s;
}

#index2 p{
	clear:left;
	margin:0 auto;
	margin-top:30px;
	width:100%;
	border:none;
}

#index2 p img{
	width:100%;
	height:auto;
}

#index2 .border_btn01 {
	clear:left;
	margin-top:0;
	display: inline-block;
	width: 100%;
	max-width: 350px; /* ボタン幅 */
	position: relative;
	color: #333; /* 文字色 */
	padding: 1em 2em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}

#index2 .border_btn01::before,
#index2 .border_btn01::after {
	position: absolute;
	width: 100%;
	height: 1px; /* 線幅 */
	content: '';
	-webkit-transition: all .3s;
	transition: all .3s;
	background: #333; /* 線色 */
}

#index2 .border_btn01::before {
	top: 0;
	left: 0;
}

#index2 .border_btn01::after {
	right: 0;
	bottom: 0;
}

/* マウスオーバーした際のデザイン */
#index2 .border_btn01:hover:before,
#index2 .border_btn01:hover:after {
  width: 0;
}

/*------------------------------------------------------------
	客室
------------------------------------------------------------*/
#index3{
	clear:left;
	margin-top:0;
	width:100%;
	height:1200px;
	
	overflow:hidden;
}

#index3 #img1{
	clear:left;
	margin:0 auto;
	top:650px;
	width:100%;
	height:450px;
	display:none;
	position:relative;
	background:url(../common/bg02.jpg);
	z-index:-1;
}

#index3 .pic1{
	float:none;
	position:absolute;
	width:100%;
	height:300px;
	z-index:1;
}

#index3 .pic1 img{
	clear:left;
	width:100%;
	height:300px;
	object-fit:cover;
	position:absolute;
}

#index3 #content{
	float:none;
	position:absolute;
	margin-top:350px;
	right:0;
	width:100%;
	height:auto;
	text-align:center;
}

#index3 .pic2{
	clear:left;
	margin-top:50px;
	position:absolute;
	width:100%;
	height:300px;
	z-index:1;
}

#index3 .pic2 img{
	clear:left;
	width:90%;
	height:300px;
	object-fit:cover;
}

#index3 ul{
	clear:left;
	margin:0 auto;
	margin-top:30px;
	width:90%;
	font-family:serif;
	font-size:17px;
	text-align:left;
	color:#333;
	letter-spacing:3px;
	line-height:2.3em;
}

#index3 li span{
	clear:left;
	display:block;
	font-size:22px;
	font-weight:bold;
	text-align:center;
}	
	
#index3 a{
	clear:left;
	padding:10px 0;
	display:block;
	width:100%;
	color:#333;
	font-family:serif;
	font-size:16px;
	text-align:center;
	text-decoration:none;
	-webkit-transition:1s;
	transition:1s;
}

#index3 a:hover{
	color:#333;
	-webkit-transition:1s;
	transition:1s;
}

#index3 .btn01{
	clear:left;
	margin:0 auto;
	width:70%;
	padding-bottom: 3px; /* テキストと下線の間隔 */
	background-image: linear-gradient(#333, #333);
	background-repeat: no-repeat;
	background-position: bottom right; /* 下線の初期位置 */
	background-size: 0 3px; /* 下線のサイズ（横幅、高さ） */
	transition: background-size 0.5s;
	letter-spacing:5px;
}

#index3 .btn01:hover {
	background-position: bottom left; /* 下線のホバー時位置 */
	background-size: 100% 2px; /* 下線の横幅を100%にする */
}

/*------------------------------------------------------------
	日本庭園
------------------------------------------------------------*/
#index4{
	clear:left;
	width:100%;
	height:auto;
	position:relative;
	background:none;
	background-image:none;
	
	/* 画像を常に天地左右の中央に配置 */
	background-position: left bottom;
	/* 画像をタイル状に繰り返し表示しない */
	background-repeat: no-repeat;
	/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
	background-attachment: fixed;
	border-top:#CCC 1px solid;
	
	overflow:hidden;
}

#index4 #content{
	clear:left;
	float:none;
	width:100%;
	height:auto;
	text-align:center;
	background:none;
}

#index4 ul{
	clear:left;
	padding-left:0;
	margin:0 auto;
	margin-top:100px;
	width:90%;
	font-family:serif;
	font-size:17px;
	text-align:left;
	color:#333;
	letter-spacing:3px;
	line-height:2.3em;
}

#index4 li span{
	clear:left;
	font-size:22px;
	font-weight:bold;
	text-align:center;
}	
	
#index4 a{
	clear:left;
	padding:10px 0;
	display:block;
	width:100%;
	color:#333;
	font-family:serif;
	font-size:16px;
	text-align:center;
	text-decoration:none;
	-webkit-transition:1s;
	transition:1s;
}

#index4 a:hover{
	color:#333;
	-webkit-transition:1s;
	transition:1s;
}

#index4 .pic1{
	clear:left;
	margin:0 auto;
	margin-top:60px;
	width:90%;
	height:300px;
}

#index4 .pic1 img{
	clear:left;
	width:100%;
	height:300px;
	object-fit:cover;
}

#index4 .btn01{
	clear:left;
	margin:0 auto;
	width:50%;
	padding-bottom: 3px; /* テキストと下線の間隔 */
	background-image: linear-gradient(#333, #333);
	background-repeat: no-repeat;
	background-position: bottom right; /* 下線の初期位置 */
	background-size: 0 3px; /* 下線のサイズ（横幅、高さ） */
	transition: background-size 0.5s;
	letter-spacing:5px;
}

#index4 .btn01:hover {
	background-position: bottom left; /* 下線のホバー時位置 */
	background-size: 100% 2px; /* 下線の横幅を100%にする */
}

/*------------------------------------------------------------
	スライダー
------------------------------------------------------------*/
#index4_img{
	clear:left;
	margin-top:50px;
	width:100%;
}

/*------------------------------------------------------------
	新着情報
------------------------------------------------------------*/
#index5{
	clear:left;
	padding-top:0;
	width:100%;
	height:900px;
	
	overflow:hidden;
}

#index5 h1{
	clear:left;
	padding-top:100px;
	margin-bottom:30px;
	text-align:center;
	font-family:serif;
	font-size:30px;
	font-weight:normal;
	color:#333;
	letter-spacing:5px;
}

#index5 h1 span{
	font-size:40px;
}

#index5 p{
	clear:left;
	margin:0 auto;
	width:90%;
	border:#CCC 1px solid;
}

/*------------------------------------------------------------
	バナー
------------------------------------------------------------*/
#index6{
	clear:left;
	padding-top:50px;
	width:100%;
	height:600px;
	background:#da948f;
	
	overflow:hidden;
}

#index6 section{
	clear:left;
	margin:0 auto;
	width:90%;
	height:auto;
}

#index6 li{
	float:left;
	margin:0 1%;
}

#index6 img{
	clear:left;
	margin-bottom:30px;
	width:100%;
	height:auto;
}

#index6 .banner01{
	width:48%;
}

#index6 .banner02{
	width:48%;
}

}






@media(min-width:1200px){
/*------------------------------------------------------------
	旅色
------------------------------------------------------------*/
#tabiiro{
	clear:left;
	margin:0 auto;
	padding-top:50px;
	display:block;
	width:100%;
	text-align:center;
	background:#501d19;
}

#tabiiro section{
	clear:left;
	margin:0 auto;
	width:60%;
}

#tabiiro img{
	clear:left;
	margin:0;
	padding:0;
	display:block;
	width:100%;
}

/*------------------------------------------------------------
	詳細ボタン
------------------------------------------------------------*/
.border_btn01 {
	clear:left;
	margin-top:30px;
	display: inline-block;
	width: 100%;
	max-width: 350px; /* ボタン幅 */
	position: relative;
	color: #FFF; /* 文字色 */
	padding: 1em 2em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}

.border_btn01::before,
.border_btn01::after {
	position: absolute;
	width: 100%;
	height: 1px; /* 線幅 */
	content: '';
	-webkit-transition: all .3s;
	transition: all .3s;
	background: #FFF; /* 線色 */
}

.border_btn01::before {
	top: 0;
	left: 0;
}

.border_btn01::after {
	right: 0;
	bottom: 0;
}

/* マウスオーバーした際のデザイン */
.border_btn01:hover:before,
.border_btn01:hover:after {
  width: 0;
}

.border_btn02 {
	clear:left;
	margin-top:30px;
	display: inline-block;
	width: 100%;
	max-width: 350px; /* ボタン幅 */
	position: relative;
	color: #333; /* 文字色 */
	padding: 1em 2em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}

.border_btn02::before,
.border_btn02::after {
	position: absolute;
	width: 100%;
	height: 1px; /* 線幅 */
	content: '';
	-webkit-transition: all .3s;
	transition: all .3s;
	background:#333; /* 線色 */
}

.border_btn02::before {
	top: 0;
	left: 0;
}

.border_btn02::after {
	right: 0;
	bottom: 0;
}

/* マウスオーバーした際のデザイン */
.border_btn02:hover:before,
.border_btn02:hover:after {
  width: 0;
}

/*------------------------------------------------------------
	空室検索
------------------------------------------------------------*/
#search{
	clear:left;
	margin:0 auto;
	width:100%;
	height:180px;
	color:#FFF;
	font-size:16px;
	font-weight:bold;
	font-family:serif;
	letter-spacing:2px;
	line-height:2em;
	background:#501d19;
	
	overflow:hidden;
}

#search section{
	clear:left;
	margin:0 auto;
	padding:0;
	width:80%;
	height:180px;
}

#search #title{
	float:left;
	margin-top:35px;
	margin-right:50px;
	padding:0;
	padding-top:50px;
	display:block;
	width:130px;
	height:50px;
	line-height:80px;
	color:#FFF;
	font-family:serif;
	font-size:18px;
	text-align:center;
	line-height:0;
	border:#68403d 1px solid;
}

#search #box{
	float:left;
	margin-top:52px;
}

#search #btn{
	float:left;
	margin-top:52px;
	margin-left:30px;

	width:720px;
	height:auto;
}

#search .btn01{
	float:left;
	margin-top:0;
	margin-left:0;
	padding:0;
	display:block;
	width:350px;
	height:70px;
	line-height:70px;
	color:#333;
	font-size:16px;
	font-weight:bold;
	font-family:serif;
	text-decoration:none;
	background:#EEEEEE;
	letter-spacing:3px;
	border:0;
}

#search .btn02 a{
	float:left;
    display:block;
    overflow:hidden;
	margin-top:0;
	margin-left:10px;
	padding:0;
	width:350px;
	height:70px;
	line-height:70px;
	text-align:center;
	text-decoration:none;
	color:#333;
	font-size:16px;
	background:#EEEEEE;
	letter-spacing:3px;
	-webkit-transition:0.4s;
	transition:0.4s;
}

#search .obj_year, .obj_month, .obj_day, .obj_no_date, .obj_per_num, .obj_stay_num{
	font-size:20px;
	font-weight:bold;
	font-family:serif;
	letter-spacing:2px;
	line-height:2em;
}


/*------------------------------------------------------------
	天然温泉
------------------------------------------------------------*/
#index1{
	float:left;
	width:50%;
	height:1700px;
	
	overflow:hidden;
}

#index1 #img{
	clear:left;
	width:100%;
	height:1500px;
	display: flex;
	justify-content: center;
	position:relative;
	background:url(../index/index1_img1.jpg);
	
	/* 画像を常に天地左右の中央に配置 */
	background-position: center center;
	/* 画像をタイル状に繰り返し表示しない */
	background-repeat: no-repeat;
	/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
	background-attachment: fixed;
	/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-size: cover;
}

#index1 #img::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
}

#index1 #content1{
	clear:left;
	margin:0 auto;
	width:90%;
	text-align:center;
	position: absolute;
	z-index:5;
	
	justify-content: center;
	align-items: center;
}

#index1 #content1 h1{
	clear:left;
	margin-top:150px;
	margin-left:43%;
	width:100px;
	height:auto;
	color:#FFF;
	text-align:center;
	font-size:40px;
	font-weight:bold;
	font-family:serif;
	letter-spacing:5px;
	
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

#index1 #content1 ul{
	clear:left;
	width:100%;
	color:#FFF;
	text-align:center;
	font-size:17px;
	font-family:serif;
	font-weight:bold;
	line-height:3em;
	letter-spacing:3px;
}

#index1 #content1 li span{
	font-size:24px;
}

#index1 a{
	clear:left;
	padding:10px 0;
	display:block;
	width:100%;
	color:#FFF;
	font-family:serif;
	font-size:16px;
	text-align:center;
	text-decoration:none;
	-webkit-transition:1s;
	transition:1s;
}

#index1 a:hover{
	color:#FFF;
	-webkit-transition:1s;
	transition:1s;
}

#index1 p{
	clear:left;
	margin:0 auto;
	margin-top:80px;
	width:50%;
	border:#FFF 5px solid;
}

#index1 p img{
	width:100%;
	height:auto;
}

#index1 .border_btn01 {
	clear:left;
	margin-top:30px;
	display: inline-block;
	width: 100%;
	max-width: 350px; /* ボタン幅 */
	position: relative;
	color: #FFF; /* 文字色 */
	padding: 1em 2em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}

#index1 .border_btn01::before,
#index1 .border_btn01::after {
	position: absolute;
	width: 100%;
	height: 1px; /* 線幅 */
	content: '';
	-webkit-transition: all .3s;
	transition: all .3s;
	background: #FFF; /* 線色 */
}

#index1 .border_btn01::before {
	top: 0;
	left: 0;
}

#index1 .border_btn01::after {
	right: 0;
	bottom: 0;
}

/* マウスオーバーした際のデザイン */
#index1 .border_btn01:hover:before,
#index1 .border_btn01:hover:after {
  width: 0;
}

/*------------------------------------------------------------
	お料理
------------------------------------------------------------*/
#index2{
	float:right;
	width:50%;
	height:1700px;
	border-top:none;
	
	overflow:hidden;
}

#index2 #img{
	clear:left;
	width:100%;
	height:1500px;
	display: flex;
	justify-content: center;
	position:relative;
	background:url(../index/index2_img1.jpg);
	
	/* 画像を常に天地左右の中央に配置 */
	background-position: center center;
	/* 画像をタイル状に繰り返し表示しない */
	background-repeat: no-repeat;
	/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
	background-attachment: fixed;
	/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
	background-size: cover;
}

#index2 #img::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
}

#index2 #content1{
	clear:left;
	margin:0 auto;
	width:90%;
	text-align:center;
	position: absolute;
	z-index:5;
	
	justify-content: center;
	align-items: center;
}

#index2 #content1 h1{
	clear:left;
	margin-top:150px;
	margin-left:43%;
	width:100px;
	height:auto;
	color:#FFF;
	text-align:center;
	font-size:40px;
	font-weight:bold;
	font-family:serif;
	letter-spacing:5px;
	
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

#index2 #content1 ul{
	clear:left;
	width:100%;
	color:#FFF;
	text-align:center;
	font-size:17px;
	font-family:serif;
	font-weight:bold;
	line-height:3em;
	letter-spacing:3px;
}

#index2 #content1 li span{
	font-size:24px;
}

#index2 a{
	clear:left;
	padding:10px 0;
	display:block;
	width:100%;
	color:#FFF;
	font-family:serif;
	font-size:16px;
	text-align:center;
	text-decoration:none;
	-webkit-transition:1s;
	transition:1s;
}

#index2 a:hover{
	color:#FFF;
	-webkit-transition:1s;
	transition:1s;
}

#index2 p{
	clear:left;
	margin:0 auto;
	margin-top:80px;
	width:50%;
	border:#FFF 5px solid;
}

#index2 p img{
	width:100%;
	height:auto;
}

#index2 .border_btn01 {
	clear:left;
	margin-top:30px;
	display: inline-block;
	width: 100%;
	max-width: 350px; /* ボタン幅 */
	position: relative;
	color: #FFF; /* 文字色 */
	padding: 1em 2em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}

#index2 .border_btn01::before,
#index2 .border_btn01::after {
	position: absolute;
	width: 100%;
	height: 1px; /* 線幅 */
	content: '';
	-webkit-transition: all .3s;
	transition: all .3s;
	background: #FFF; /* 線色 */
}

#index2 .border_btn01::before {
	top: 0;
	left: 0;
}

#index2 .border_btn01::after {
	right: 0;
	bottom: 0;
}

/* マウスオーバーした際のデザイン */
#index2 .border_btn01:hover:before,
#index2 .border_btn01:hover:after {
  width: 0;
}

/*------------------------------------------------------------
	客室
------------------------------------------------------------*/
#index3{
	clear:left;
	margin-top:200px;
	width:100%;
	height:1100px;
	
	overflow:hidden;
}

#index3 #img1{
	clear:left;
	margin:0 auto;
	top:650px;
	width:100%;
	height:450px;
	display: flex;
	position:relative;
	background:#b1554e;
	z-index:-1;
}

#index3 .pic1{
	float:left;
	position:absolute;
	width:60%;
	height:800px;
	z-index:1;
}

#index3 .pic1 img{
	clear:left;
	width:100%;
	height:800px;
	object-fit:cover;
	position:absolute;
}

#index3 #content{
	float:right;
	position:absolute;
	margin-top:50px;
	right:3%;
	width:30%;
	height:auto;
	text-align:center;
}

#index3 .pic2{
	clear:left;
	margin-top:100px;
	position:absolute;
	width:100%;
	height:400px;
	z-index:1;
}

#index3 .pic2 img{
	clear:left;
	width:100%;
	height:400px;
	object-fit:cover;
}

#index3 ul{
	clear:left;
	margin-top:30px;
	width:100%;
	font-family:serif;
	font-size:18px;
	text-align:left;
	color:#333;
	letter-spacing:3px;
	line-height:2.3em;
}

#index3 li span{
	clear:left;
	display:block;
	font-size:26px;
	font-weight:bold;
	text-align:left;
}	
	
#index3 a{
	clear:left;
	padding:10px 0;
	display:block;
	width:100%;
	color:#333;
	font-family:serif;
	font-size:16px;
	text-align:center;
	text-decoration:none;
	-webkit-transition:1s;
	transition:1s;
}

#index3 a:hover{
	color:#333;
	-webkit-transition:1s;
	transition:1s;
}

#index3 .btn01{
	clear:left;
	margin:0 auto;
	width:70%;
	padding-bottom: 3px; /* テキストと下線の間隔 */
	background-image: linear-gradient(#333, #333);
	background-repeat: no-repeat;
	background-position: bottom right; /* 下線の初期位置 */
	background-size: 0 3px; /* 下線のサイズ（横幅、高さ） */
	transition: background-size 0.5s;
	letter-spacing:5px;
}

#index3 .btn01:hover {
	background-position: bottom left; /* 下線のホバー時位置 */
	background-size: 100% 2px; /* 下線の横幅を100%にする */
}

/*------------------------------------------------------------
	日本庭園
------------------------------------------------------------*/
#index4{
	clear:left;
	width:100%;
	height:1200px;
	position:relative;
	background-color:#020204;
	background-image:url(../index/index4_img1.jpg);
	
	/* 画像を常に天地左右の中央に配置 */
	background-position: left bottom;
	/* 画像をタイル状に繰り返し表示しない */
	background-repeat: no-repeat;
	/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
	background-attachment: fixed;
	border-top:none;
	
	overflow:hidden;
}

#index4 #content{
	clear:left;
	float:right;
	width:45%;
	height:1200px;
	text-align:center;
	background:#b1554e;
}

#index4 ul{
	clear:left;
	padding-left:20%;
	margin:0 auto;
	margin-top:180px;
	width:100%;
	font-family:serif;
	font-size:18px;
	text-align:left;
	color:#FFF;
	letter-spacing:3px;
	line-height:2.3em;
}

#index4 li span{
	clear:left;
	font-size:26px;
	font-weight:bold;
}	
	
#index4 a{
	clear:left;
	padding:10px 0;
	display:block;
	width:100%;
	color:#FFF;
	font-family:serif;
	font-size:16px;
	text-align:center;
	text-decoration:none;
	-webkit-transition:1s;
	transition:1s;
}

#index4 a:hover{
	color:#FFF;
	-webkit-transition:1s;
	transition:1s;
}

#index4 .pic1{
	clear:left;
	margin:0 auto;
	margin-top:100px;
	width:70%;
	height:350px;
}

#index4 .pic1 img{
	clear:left;
	width:100%;
	height:350px;
	object-fit:cover;
}

#index4 .btn01{
	clear:left;
	margin:0 auto;
	width:50%;
	padding-bottom: 3px; /* テキストと下線の間隔 */
	background-image: linear-gradient(#FFF, #FFF);
	background-repeat: no-repeat;
	background-position: bottom right; /* 下線の初期位置 */
	background-size: 0 3px; /* 下線のサイズ（横幅、高さ） */
	transition: background-size 0.5s;
	letter-spacing:5px;
}

#index4 .btn01:hover {
	background-position: bottom left; /* 下線のホバー時位置 */
	background-size: 100% 2px; /* 下線の横幅を100%にする */
}

/*------------------------------------------------------------
	スライダー
------------------------------------------------------------*/
#index4_img{
	clear:left;
	margin-top:0;
	width:100%;
}

/*------------------------------------------------------------
	新着情報
------------------------------------------------------------*/
#index5{
	clear:left;
	padding-top:80px;
	width:100%;
	height:900px;
	
	overflow:hidden;
}

#index5 h1{
	clear:left;
	padding-top:100px;
	margin-bottom:30px;
	text-align:center;
	font-family:serif;
	font-size:30px;
	font-weight:normal;
	color:#333;
	letter-spacing:5px;
}

#index5 h1 span{
	font-size:40px;
}

#index5 p{
	clear:left;
	margin:0 auto;
	width:70%;
	border:#CCC 1px solid;
}

/*------------------------------------------------------------
	バナー
------------------------------------------------------------*/
#index6{
	clear:left;
	padding-top:50px;
	width:100%;
	height:200px;
	background:#da948f;
	
	overflow:hidden;
}

#index6 section{
	clear:left;
	margin:0 auto;
	width:70%;
	height:auto;
}

#index6 li{
	float:left;
	margin:0 1%;
}

#index6 img{
	width:100%;
	height:auto;
}

#index6 .banner01{
	width:15%;
}

#index6 .banner02{
	width:15%;
}
}