@charset "UTF-8";
/************ 基本　↓ ************/
html{ font-size:62.5%}
body{
	font-family: "Yu Mincho";
	font-size: 1.5rem;/* 説明文共通 */
	background: url("../img/base/main_bg.jpg") repeat;
	width:100%;
	min-width:1280px;
	overflow-x:hidden;
	-webkit-text-size-adjust: 100%;
}
/************ 共通設定 ↓ ************/
a{text-decoration: none;}
.pc{display: none}
.text-red{
	color: #FF2D31;
	font-weight: bold;
}

.ml20{ margin-left:20px;}
.ml30{ margin-left:30px;}
.ml40{ margin-left:40px;}
.ml50{ margin-left:50px;}
.ml60{ margin-left:60px;}
.ml70{ margin-left:70px;}
.ml80{ margin-left:80px;}

.mr20{ margin-right:20px;}
.mr30{ margin-right:30px;}
.mr40{ margin-right:40px;}
.mr50{ margin-right:50px;}
.mr60{ margin-right:60px;}
.mr70{ margin-right:70px;}
.mr80{ margin-right:80px;}

.mb20{ margin-bottom: 20px;}
.mb30{ margin-bottom: 30px;}
.mb40{ margin-bottom: 40px;}
.mb50{ margin-bottom: 50px;}
.mb60{ margin-bottom: 60px;}
.mb70{ margin-bottom: 70px;}
.mb80{ margin-bottom: 80px;}

.pt10{ padding-top:10px;}
.pt20{ padding-top:20px;}
.pt30{ padding-top:30px;}
.pt40{ padding-top:40px;}
.pt50{ padding-top:50px;}
.pt60{ padding-top:60px;}
.pt70{ padding-top:70px;}
.pt130{ padding-top: 130px;}

.pb20{ padding-bottom:20px;}
.pb30{ padding-bottom:30px;}
.pb40{ padding-bottom:40px;}
.pb50{ padding-bottom:50px;}
.pb60{ padding-bottom:60px;}
.pb70{ padding-bottom:70px;}
.pb80{ padding-bottom:80px;}

.center { text-align: center;}
.f-left{ float:left;}
.f-right{ float:right;}
.clear{clear: both;}

.text-p{
	line-height: 1.6;
	letter-spacing: 0.1rem;
}
.font-s24{font-size: 2.4rem;}
.font-s20{font-size: 2rem;}
.brown-bg{
	width: 100%;
	background:#250d00;
	position: relative;
}
.brown-bg2{
	width: 100%;
	background-color: rgba(209,192,165,0.5);
	position: relative;
	padding: 50px 0;
}
.white-bg{
	width: 100%;
	background:#FFF;
	position: relative;
}
/* 全体の内包幅 ↓ */
.container{
	width:915px;
	margin: 0 auto;
	position: absolute; top: 0; left: 0; right: 0;
	z-index: 99;
}
/************ ヘッダー ↓ ************/
#header{
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
}
#header-in{
	width: 100%;
	overflow: hidden;
	position: relative;
}
/*** ロゴ ↓ ***/
.h-logo{
	position: absolute;
	top: 20px;
	left: 30px;
	z-index: 99;
}
.h-logo .logo-title{
	font-size: 1.9rem;
	color: #FFF;
	text-shadow: 1px 2px 10px #000;
	padding-left: 1em;
    text-indent: -1em;
    line-height: 1.2;
    margin-left:-0.5em;
}
/*** SNS ↓ ***/
.head-menu .sns{
	display: flex;
	position: absolute;
	z-index: 99;
	top: 13px;
	right: 210px;
}
.sns p{margin: 0 5px 0 0;}
.sns p a:hover{opacity: 0.5;}
.sns .twtter{padding: 3px 0 0 0;}
/*** TEL ↓ ***/
.sns .tel{
	color: #FFF;
	font-size: 3.2rem;
	text-shadow: 1px 2px 10px #000;
    line-height: 0.7;
    text-align: right;
}
.sns .tel .material-icons{
	font-size: 3.6rem;
	vertical-align: -5px;
	margin: 0 5px 0 5px;
}
/*** ご予約バナー↓ ***/
#header .plan-bn,
#header-in .plan-bn{
	position: fixed;
	z-index: 9999;
	top:0;
	right: 80px;
	width: 104px;
	height: 22px;
	color: #FFF;
	font-size: 2rem;
	cursor: pointer;
	background-color: #ee7800;
	padding: 25px 0;
	text-align: center;
}
#header .plan-bn:hover,
#header-in .plan-bn:hover{background-color: #cf6b05;}
#header .plan-bn a,
#header-in .plan-bn a{color: #FFF;}
/* ハンバーガーメニュー ↓ */
#nav-sp {
	position: fixed;
	top: 0px;
	right: 0px;
	width: 80px;
	height: 32px;
	cursor: pointer;
	background-color: #250d00;
	padding: 20px 0;
	z-index: 9999;
}
#nav-sp > div {
	position: relative;
	width: 36px;
	margin: 0 20px;
	float: right;
}
#nav-sp span:nth-child(1),
#nav-sp span:nth-child(2){
  	width: 100%;
  	height: 2px;
  	left: 0;
  	display: block;
  	background: #ee7800;
  	position: absolute;
  	transition: top .5s ease, -webkit-transform .6s ease-in-out;
  	transition: transform .6s ease-in-out, top .5s ease;
  	transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
}
#nav-sp span:nth-child(3){
	font-size: 1.4rem;
	color: #ee7800;
  	left: -3px;
  	display: block;
  	position: absolute;
}
#nav-sp span:nth-child(1) { top: 0;}
#nav-sp span:nth-child(2) { top: 12px;}
#nav-sp span:nth-child(3) { top: 28px;}
#nav-sp:hover span:nth-child(1) { top: 4px;}
#nav-sp:hover span:nth-child(2) { top: 10px;}
.open #nav-sp span:nth-child(1) {
  top: 10px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.open #nav-sp span:nth-child(2) {
  top: 10px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
/*クリック時のメニュー表示*/
#nav-menu {
  background-color: rgba(37,13,0,0.9);/* 背景 */
  color: #fff;
  position: fixed;
  top: 0; right: 0; left: 0; bottom: 0;
  z-index: 999;
  text-align: left;/* メニュー 揃え位置 */
  display: flex;
  visibility: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 2rem;/* メニュー フォントサイズ */
font-weight: normal;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
}
#nav-menu ul {
	width: 900px;
	margin: 0 auto;
	list-style: none;
}
#nav-menu ul li {
	float: left;
	opacity: 0;
  -webkit-transform: translateX(200px);
          transform: translateX(200px);
  transition: opacity .2s ease, -webkit-transform .6s ease;
  transition: transform .6s ease, opacity .2s ease;
  transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
}
#nav-menu ul li:nth-child(2) { transition-delay: .15s;}/*お食事*/
#nav-menu ul li:nth-child(3) { transition-delay: .3s;}/*温泉*/
#nav-menu ul li:nth-child(4) { transition-delay: .45s;}/*客室*/
#nav-menu ul li:nth-child(5) { transition-delay: .6s; margin: 0 0 0 5px;}/*ペット宿泊*/
#nav-menu ul li:nth-child(6) { transition-delay: .75s; margin: 0 0 0 -60px;}/*周辺観光*/
#nav-menu ul li:nth-child(7) { transition-delay: .9s;}/*料金・ご予約*/
#nav-menu ul li:nth-child(8) { transition-delay: .105s; margin: 0 0 0 -75px;}/*アクセス*/
#nav-menu ul li:nth-child(9) { transition-delay: .12s; margin: 0 0 0 -20px;}/*団体利用*/
#nav-menu ul li:nth-child(10) { transition-delay: .12s; margin: 0 0 0 0;}/*パンフレット*/
#nav-menu ul li:nth-child(11) { transition-delay: .12s; margin: 0 0 0 -75px;}/*よくある質問*/
#nav-menu a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px 100px;
  transition: color .6s ease;
}
#nav-menu a:hover { color: #666;}

/* open */
.open { overflow: hidden;}
.open #nav-menu { visibility: visible; opacity: 1;}
.open #nav-menu li {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  transition: opacity .9s ease, -webkit-transform 1s ease;
  transition: transform 1s ease, opacity .9s ease;
  transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
}
/*** キャッチコピー ↓ ***/
.copy{
	position: absolute;
	z-index: 99;
	top: 40%;
	left: 45%;
	transform: translateX(-45%);
    -webkit-transform: translateX(-45%);
    -ms-transform: translateX(-45%);
}
/* スライダー ↓ */
#demo-1{
    overflow: hidden;
    width: 100%;
    min-height: 600px;
    background-color: #999;
}
#movie .slider{
	 overflow: hidden;
    width: auto;
    min-height: 100%;
		height:100vh;
	position: relative;
}
#movie .slider img{
		width: auto;
		min-height: 100%;
		height:100vh;
		position: relative; top: 0; left: 50%;
		z-index: 0;
		vertical-align: middle;transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
}

/************ ヘッダー ↑ ************/
/* じんわり表示 ↓ */
.img-text img {
  opacity: 0;
  -moz-transition: -moz-transform 051s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.img-blur {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: .5s;
}

@-webkit-keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }
  to {
      opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
/* じんわり表示 ↑ */
/* 導入文 ↓ */
.aisatsu{display: flex;}
.aisatsu .text{
	width: 38%;
	margin: 50px 0 0 0px;
}
.aisatsu .gaikan img{width: 95%;}
/* アピール ↓ */
.app1 .in{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 396px;
}
.app1 .in .text,
.miryoku .in .text{
	position: absolute;
	z-index: 2;
	color: #FFF;
	font-size: 1.8rem;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom: 80px;
	text-align: center;
}
.app1 .in .text a,
.miryoku .in .text a{
	display: inline-block;
	border: solid #FFF 1px;
	padding: 15px 40px;
	position: relative;
}
.app1 .in .text a::after,
.miryoku .in .text a::after{
	content: url("https://shiranuhi-hotel.com/img/base/link-arrow.png");
	position: absolute;
	top:10px;
	right: -30px;
}
.miryoku .in{
	position: relative;
	overflow: hidden;
	float: left;
	width: calc((100%)/2);
	height: 450px;
}
.miryoku .in a,
.app1 .in a{
	position: relative;
	z-index: 99;
	top:-20px;
	display: block;
	list-style: none;
	color: #FFF;
}
.miryoku .in:after,
.app1 .in:after{
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.miryoku .in:hover:after,
.app1 .in:hover:after{
	opacity: 0.9;
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
.app1 .in:after{background-image: url("https://shiranuhi-hotel.com/img/top/pet_bg.jpg");}
.miryoku .in:nth-child(1):after{background-image: url("https://shiranuhi-hotel.com/img/top/spa_bg.jpg");}
.miryoku .in:nth-child(2):after{background-image: url("https://shiranuhi-hotel.com/img/top/cuisine_bg.jpg");}
/* 空室検索 ↓ */
.search{
	background-color: #250d00;
	z-index: 2;
}
.plan_form{
	display: flex;
	width: 1200px;
	margin: 0 auto;
	padding: 20px 0;
	color: #FFF;
}
.plan_form .title_in{
	width: 20%;
	line-height: 1.5;
	border-right: #FFF solid 1px;
	margin: 0px 40px 0 0;
}
.plan_form .material-icons{
	font-size: 2.8rem;
	margin: 0px 5px 0 0;
	float: left;
	color: #FFF;
}
.plan_form .kensak{
	font-size: 2rem;
	font-weight: normal;
	color: #FFF;
	margin: 10px 0 0 0;
}
/* レビュー ↓ */
.con .review{
	display: flex;
	justify-content: center;
}
.con .review p{
	text-align: center;
	background-color: #ae9865;
	padding: 10px 20px;
	font-size: 1.6rem;
	font-weight: bold;
	margin: 0 20px 40px 0;
}
.con .review p a{
	display: block;
	color: #FFF;
}
.con .review p:hover{background-color: #6e6143;}
.con p{line-height: 1.5;}
.con .info{
	display: flex;
	color: #FFF;
	padding: 0 0 20px 0;
}
/* プランRSS ↓ */
.plan{display: flex;}
.plan-rss,
.plan-rss-no{
	width: 400px;
	color: #250d00;
	background-color: #FFF;
}
.plan-rss{margin: 0 20px 0 0;}
.plan-rss-no{margin: 0;}
.plan-rss h3,
.plan-rss-no h3{
	color: #250d00;
	font-size: 2.2rem;
	margin: 20px 0;
	text-align: center;
}
.plan-rss .text,
.plan-rss-no .text{
	font-size: 1.6rem;
	padding: 0 20px 20px 20px;
	line-height: 1.5;
}
.plan-bg .info,.plan-bg .info *{
    box-sizing: border-box;
}
.plan-bg .info{
	display: flex;
	justify-content: space-between;
	margin: clamp(40px,6vw,60px) auto;
}
.plan-bg .note{
	width: 80%;
	background-color: #FFF;
	padding: 50px 40px;
	margin: 0 0 20px 0;
}
.plan-bg .note p{margin: 0 0 20px 0;}
/* アクセス ↓ */
#access{
	background: url("https://shiranuhi-hotel.com/img/top/access_bg.jpg") no-repeat;
    width: 100%;
	height: 710px;
    overflow: hidden;
	background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#access .in{
	display: flex;
	justify-content:center;
	padding: 190px 0 0 0;
}
#access .car{
	border-right: #FFF 1px dashed;
	padding: 20px 30px 0 0;
}
#access .public{
	border-right: #FFF 1px dashed;
	padding: 20px 60px 0 60px;
}
#access .airport{padding: 20px 60px 0 60px;}
#access .car h4,
#access .public h4,
#access .airport h4{
	color: #FFF;
	text-align: center;
	font-size: 2.4rem;
	line-height: 1.5;
	font-weight: 400;
	margin: 0 0 30px 0;
}
#access .car h4 span,
#access .public h4 span,
#access .airport h4 span{
	display: block;
	font-size: 5rem;
	margin: 0 0 20px 0;
}
#access p{
	color: #FFF;
	text-align: center;
	line-height: 1.5;
}
/* 日奈久マップ ↓*/
.hinagu{display: flex;}
.hinagu .text{margin: 100px 0 0 0;}
/* お問い合わせリンク ↓ ↓*/
.contact-link{
	display: flex;
	justify-content: space-between;
}
/**** W1280px時 ↓ ****/
@media screen and (max-width: 1281px) {
	.aisatsu .gaikan img{width: 90%;}
	.aisatsu .text img{width: 100%;}
	.aisatsu .text{margin: 40px 30px 0 0;}
	.aisatsu .plan-bn img{width: 100%;}
	#access{
	background: url("https://shiranuhi-hotel.com/img/top/access_bg.jpg") no-repeat;
    width: 100%;
	height: 710px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
}
/************ フッターー ↓ ************/
.kasou-f{
	margin: 100px 0 0 0;
}
#footer-menu{
	font-size: 1.8rem;
	padding: 20px 0;
}
#footer-menu nav ul{
	width: 1100px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	justify-content: space-between;
}
#footer-menu nav ul li + li{
	border-left: 1px solid #FFF;
	padding: 0 0 0 40px;
}
#footer-menu nav ul a{color: #FFF;}
#footer-menu nav ul a:hover{color: #ae9865;}
#footer {
	background: url("../img/base/footer_bg.jpg") no-repeat;
    width: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#footer .f-logo{
	font-size: 3rem;
	color: #FFF;
	text-align: center;
	margin: 10px 0 50px 0;
}
#footer .f-logo span{
	font-size: 1.6rem;
	vertical-align: 5px;
	margin: 0 5px 0 0;
}
#footer .review{
	display: flex;
	justify-content: center;
}
#footer .review p{
	text-align: center;
	background-color: #ae9865;
	padding: 10px 20px;
	font-size: 1.6rem;
	font-weight: bold;
	margin: 0 20px 40px 0;
}
#footer .review p a{
	display: block;
	color: #FFF;
}
#footer .review p:hover{background-color: #6e6143;}
#footer p{line-height: 1.5;}
#footer .info{
	display: flex;
	color: #FFF;
	padding: 0 0 20px 0;
}
#footer .info .text{width:350px;}
#footer .plan-bn{
	height: 30px;
	font-size: 2rem;
	background: #ee7800;
	align-items: flex-start;
	padding: 15px 200px;
	margin: 0 0 0 30px;
}
#footer .plan-bn:hover{
	background: #cf6b05;
	transition : all 0.5s ease 0s;
}
#footer .plan-bn a{color: #FFF;}
#footer .plan-bn a::after{
	content: ">";
	font-size: 1.5rem;
	font-weight: bold;
	margin: 0 0 0 50px;
}
#footer .f-copy{
	font-size: 1.2rem;
	color: #FFF;
	text-align: center;
	padding: 30px 0 10px 0;
}
/* ページトップ ↓ */
#page_top{
	position: fixed;
	right: 10px; bottom: 10px;
	background-color:rgba(255,255,255,0.6);
	padding: 10px;
}
#page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 60px;
	text-decoration: none;
}
#page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f102';
	font-size: 2.5rem;
	color: #000;
	position: absolute;
	width: 25px;
	height: 25px;
	top: -40px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 1.3rem;
  color: #000;
  position: absolute;
	z-index: 99;
  top: 30px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/************ フッターー ↑ ************/
/************ 下層ページheader ↓ ************/
#cuisine-head{ 
	background: url("https://shiranuhi-hotel.com/img/cuisine/head_img.jpg") no-repeat;
    width: 100%;
    height: 550px;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#spa-head{ 
	background: url("https://shiranuhi-hotel.com/img/spa/head_img.jpg") no-repeat;
    width: 100%;
    height: 550px;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#fac-head{ 
	background: url("https://shiranuhi-hotel.com/img/facilities/head_img.jpg") no-repeat;
    width: 100%;
    height: 550px;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#pet-head{ 
	background: url("https://shiranuhi-hotel.com/img/pet/head_img.jpg") no-repeat;
    width: 100%;
    height: 550px;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#sig-head{ 
	background: url("https://shiranuhi-hotel.com/img/sightseeing/head_img.jpg") no-repeat;
    width: 100%;
    height: 550px;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#group-head{ 
	background: url("https://shiranuhi-hotel.com/img/group/head_img.jpg") no-repeat;
    width: 100%;
    height: 550px;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#charge-head{ 
	background: url("https://shiranuhi-hotel.com/img/charge/head_img.jpg") no-repeat;
    width: 100%;
    height: 550px;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#qa-head{ 
	background: url("../img/qa/head_img.jpg") no-repeat;
    width: 100%;
    height: 550px;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#cuisine-head h2,
#spa-head h2,
#fac-head h2,
#pet-head h2,
#sig-head h2,
#group-head h2,
#charge-head h2,
#qa-head h2{
	text-align: center;
	position:absolute;
	top:50%;
	left: 50%;
	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	color: #FFF;
	font-size: 3rem;
	font-weight: normal;
	line-height: 1.5;
	
}
/**** 内包共通 ↓ ****/
.inner {
	width: 1240px;
	margin: 0 auto;
}
.inner2 {
	width: 1000px;
	margin: 0 auto;
}
/**** 共通タイトル ↓ ****/
/** TOP導入タイトル ↓ **/
.title1{
	font-size: 3rem;
	line-height: 1.5;
	margin: 0 0 60px 0;
}
.title1 span{display: block;}
/** 英語＋タイトル ↓ **/
.title2{
	color: #250d00;
	font-size: 3rem;
	text-align: center;
	margin: 0 0 30px 0;
}
.title2 span{
	min-width: 50px;
	max-width: 150px;
	margin: 0 auto 15px auto;
	padding: 0 0 5px 0;
	color: #996c33;
	font-size: 1.6rem;
	font-weight: normal;
	display: block;
	border-bottom: dotted 1px #a58b5e;
}
/** 上にタテ線タイトル ↓ **/
.title3{
	position: absolute;
	z-index: 2;
	font-size: 4rem;
	font-weight: 100;
	color: #FFF;
	margin: 0 auto;
	left: 0;
	right: 0;
	text-align: center;
}
.title3::before {
    content: "";
    display: block;
    margin: 0 auto 10px auto;
    width: 1px;
    height: 105px;
    background-color: #fff;
}
.title3 span{
	display: block;
	font-size: 1.5rem;
	line-height: 1.5;
	margin: 40px 0 0 0;
}
.title3 span:nth-child(2){margin: 0;}

@media screen and (max-width:480px){
    .title3{
        font-size: 2.8rem!important;
        letter-spacing: -1px;
        white-space: nowrap;
    }  
    .title3 > span{
        letter-spacing: 0px;
    }
}
/** ヨコにタテ線タイトル ↓ **/
.title4{
	font-size: 4rem;
	line-height: 1.5;
	font-weight: 400;
	border-left: solid 1px #250d00;
	padding: 0 0 0 10px;
	margin: 0 0 30px 0;
}
.title4 span{
	display: block;
	font-size: 2rem;
}
/** 注意事項タイトル ↓ **/
.title5{
	font-size: 2rem;
	font-weight: 500;
	text-align: center;
	margin: 0 0 20px 0;
	position: relative;
}
.title5:after {
     position: absolute;
     content: "";
     left: 0;
     right: 0;
     bottom: -10px;
     width: 100px;
     margin:auto;
     border-bottom: 1px solid #250d00;
}
/** 太文字改行＋タイトル ↓ **/
.title6{
	font-size: 3rem;
	text-align: center;
	margin: 0 0 30px 0;
}
.title6 span{
	margin: 0 auto 10px auto;
	font-size: 1.7rem;
	font-weight: 500;
	display: block;
}
/***** リンク共通 ↓ *****/
.link-bn1{
	border: solid #252625 1px;
	width: 100%;
	text-align: center;
	margin: 30px auto;
	padding: 8px 0;
	font-size: 1.8rem;
	font-weight: 500;
}
.link-bn2{
	border: solid #252625 1px;
	width: 100%;
	text-align: center;
	margin: 20px auto;
	padding: 2px 0;
	font-size: 1.7rem;
}
.link-bn3{
	border: double #252625 4px;
	width: calc(100% / 3 - 50px);
	text-align: center;
	padding: 10px 10px;
	font-size: 1.8rem;
	line-height: 1.3;
	font-weight: 500;
	box-shadow: 1px 1px 2px #ccc;
    display: grid;
    place-items: center;
}
.link-bn4{
	border: solid #252625 1px;
	width: 80%;
	text-align: center;
	margin: 30px auto 0 auto;
	padding: 8px 0;
	font-size: 1.8rem;
	font-weight: 500;
}
.link-bn3 span{
	display: block;
	font-size: 2.5rem;;
}
.link-bn1 a,
.link-bn2 a,
.link-bn3 a,
.link-bn4 a{
	display: block;
	color: #252625;
}
.link-bn1:hover,
.link-bn2:hover,
.link-bn3:hover,
.link-bn4:hover{
	opacity: 0.5;
	 -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
}
.link-bn1 a::after,
.link-bn2 a::after,
.link-bn4 a::after{
	content: "▶";
	font-size: 1.3rem;
	font-weight: bold;
	margin: 0 0 0 40px;
}
/************ 団体利用 ↓ ************/
.dantai h2{
	font-size: 3rem;
	text-align: center;
	line-height: 1.5;
	margin: 100px 0 20px 0;
}
.dantai .info{
	width: 100%;
	margin: 50px 0 0 0;
}
.dantai .info .title{width: 30%;}
.dantai .info tr,
.dantai .info th,
.dantai .info td{
	color: #FFF;
	border: solid 1px #362e2b;
}
.dantai .info th{
	text-align: left;
	vertical-align: middle;
  background-color:rgba(166,147,124,0.8);
  color: #FFF;
	font-size: 1.5rem;
	font-weight: 500;
	padding: 6px 0 0 20px;
}
.dantai .info td{
	color: #250d00;
	line-height: 1.7;
  background-color: #FFF;
  padding: 15px 30px;
}
.dantai .note{
	background-color: #FFF;
	margin: 60px 0 100px 0;
	padding: 40px 30px;
}
/************ お食事 ↓ ************/
.cuisine-bg{
	background: url("https://shiranuhi-hotel.com/img/cuisine/dinner_bg.jpg") no-repeat;
	width: 100%;
    height: 549px;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.cuisine-bg .text{
	padding: 195px 0 0 0;
	text-align: center;
	color: #FFF;
	line-height: 1.5;
}
.tomato{
	background: url("https://shiranuhi-hotel.com/img/cuisine/yasai_bg.png") no-repeat;
	height: 442px;
	padding: 50px 0 0 0;
	margin: 0 0 70px 0;
}
.tomato .info{
	display: flex;
	justify-content:space-between;
}
.tomato .text,
.fruits .text{
	width: 38%;
	line-height: 1.5;
	padding: 20px 0 0 0;
}
.fruits{
	background: url("https://shiranuhi-hotel.com/img/cuisine/banpeiyu_bg.png") no-repeat;
	background-position: right;
	height: 442px;
	padding: 50px 0 0 0;
	margin: 0 0 70px 0;
}
.fruits .info{
	display: flex;
	justify-content:space-between;
	flex-direction: row-reverse;
}
.tanpin{
	display: flex;
	justify-content:space-between;
}
.tanpin{
    width: min(100%,1240px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0 20px;
}
.tanpin .img-blur{
    width:100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.tanpin h4{
	font-size: 2.2rem;
	margin: 10px 0;
    display: grid;
    grid-template-columns: auto 1fr;
    justify-items: start;
    line-height: 1.4;
    align-items: center;
    gap: 0 10px;
}
.tanpin h4 span{
	font-size: 1.5rem;
	vertical-align: middle;
	margin: 0 0 0 0px;
   line-height: 1.4;
    padding-left:0.4em;
    text-indent: -0.4em;
    display: inline-block;
}
.tanpin > p:last-child{
    grid-column: 1 / -1;
    justify-self: center;
    padding-top: 25px;
    font-size: 16px;
    line-height: 1.5;
}
/*
.tanpin h4 > span span{
    display: inline-block;
}
*/
.restaurant{
	display: flex;
	justify-content:space-between;
	margin: 100px 0 0 0;
}
.restaurant .text{padding: 50px 0 0 0;}
/************ 温泉 ↓ ************/
.spa-movie{
	width: 650px;
	margin: 0 auto 60px auto;
}
.spa-dounyu{
	background: url("https://shiranuhi-hotel.com/img/spa/spa_bg.jpg") no-repeat;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	margin: 0 0 100px 0;
	padding: 0 0 50px 0;
}
.spa-dounyu .contents{padding: 190px 0 0 0;}
.spa-dounyu .text{
	line-height: 1.5;
	color: #FFF;
	text-align: center;
}
.seibun{
	width: 100%;
	margin: 50px 0 0 0;
}
.seibun .title{width: 30%;}
.seibun tr,
.seibun th,
.seibun td{
	color: #FFF;
	border: solid 1px #362e2b;
}
.seibun th{
	text-align: left;
	vertical-align: middle;
  background-color:rgba(166,147,124,0.8);
  color: #FFF;
	font-size: 1.5rem;
	font-weight: 500;
	padding: 6px 0 0 20px;
}
.seibun td{
	color: #250d00;
	line-height: 1.7;
  background-color: #FFF;
  padding: 15px 30px;
}
.uchiyu{margin: 0 0 100px 0;}
.banpeiyu{
	background: url("https://shiranuhi-hotel.com/img/spa/banpeiyu_bg.jpg") no-repeat;
    width: 100%;
    height: 576px;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.banpeiyu .text{
	padding: 200px 0 0 0;
	color: #FFF;
	line-height: 1.5;
	text-align: center;
}
.banpeiyu .kikan{
	font-size: 2.6rem;
	color: #FFF;
	text-align: center;
	margin: 40px 0 0 0;
}
.banpeiyu .kikan span{
	font-size: 1.5rem;
	vertical-align: 3px;
}
.banpeiyu .note{
	margin: 40px 0 0 0;
	background-color: rgba(255,255,255,0.5);
}
.banpeiyu .note .in{
	text-align: center;
	padding: 30px 0;
}
/************ 客室 ↓ ************/
.room-dounyu{margin: 70px 0 70px 0;}
.room-dounyu .text{
	display: flex;
	justify-content: space-between;
	margin: 20px 0 0 0;
}
.wa-room{position: relative;}
.wa-room p{
	font-size: 2rem;
	font-weight: 500;
	padding: 10px 0 10px 20px;
	position: absolute;
	z-index: 1;
	bottom: 20px;
	width: 15%;
	background-color: rgba(0,0,0,0.5);
	color: #FFF;
}
.room-note {
	display: flex;
	justify-content: space-between;
    align-items: center;
	margin: 0 0 100px 0;
}
.room-note .text{
	width: 45%;
	margin: 0px 0 0 0;
    display: grid;
    gap: 40px 0;
}
.room-note h4{
	font-size: 2rem;
	margin: 0 0 10px 0;
}
.room-note h4::before{
	content: url("https://shiranuhi-hotel.com/img/base/sensu_img.png");
	margin: 0 10px 0 0;
	vertical-align: middle;
}
.setsubi-note,
.kankou-note{
	width: 100%;
	background-color: #FFF;
	padding: 40px 0;
	margin: 60px 0 100px 0;
}
.setsubi-note .text,
.kankou-note .text{
	text-align: center;
	padding: 20px 0 0 0;
}
.kankou-note .text a{
	line-height: 2.5;
	color: #445E00;
}
.kankou-note .text a:hover{border-bottom: solid #445E00 1px;}
/************ ペット宿泊 ↓ ************/
.pet-dounyu {
	display: flex;
	justify-content: space-between;
	margin: 70px 0 100px 0;
}
.pet-dounyu .text{
	margin: 55px 0 0 0;
	width: 40%;
}
.pet-white-bg{
	width: 100%;
	background-color: #FFF;
	padding: 40px 0;
	margin: 60px 0 0 0;
}
.pet-white-bg ul{margin: 40px 0 0 60px;}
.pet-white-bg ul li{
	list-style: none;
	margin: 0 0 10px 0;
}
.pet-white-bg ul li::before{content: "・";}
/************ 周辺観光 ↓ ************/
.fac-dounyu{padding: 70px 0 100px 0;}
.sig-container{margin: 0 0 100px 0;}
.sightseeing{
	display: flex;
	margin: 0 0 10px 0;
    z-index: 10;
}
.sightseeing-not{display: flex;}
.sightseeing .in,
.sightseeing-not .in{
	margin: 30px 0 0 20px;
}
.sightseeing .in h4,
.sightseeing-not .in h4{
	color: #250d00;
	font-size: 2.6rem;
	font-weight: 500;
	margin: 0 0 20px 0;
}
.sightseeing h4 span {
    font-size: 1.4rem;
    font-weight: normal;
    color: #FFF;
    background: #ee7800;
    padding: 4px 10px 2px 10px;
    margin: 0 0 0 10px;
    vertical-align: 3px;
}
.sightseeing .info span::before,
.sightseeing-not .info span::before{
	content:  url("https://shiranuhi-hotel.com/img/sightseeing/car-icon.png");
	margin: 0px 6px 0 0;
	vertical-align: bottom;
}
.sightseeing .info span:nth-child(2)::before,
.sightseeing-not .info span:nth-child(2)::before{
	content:  url("https://shiranuhi-hotel.com/img/sightseeing/walk_img.png");
	margin: 0px 6px 0 0;
	vertical-align: bottom;
}
.sightseeing p,
.sightseeing-not p{
	color: #250d00;
	line-height: 1.8;
	margin: 0 0 40px 0;
}
/************ よくある質問 ↓ ************/
/*ラベル*/
.qa label {
    display: block;
    cursor :pointer;
	font-size: 1.8rem;
	color: #250d00;
	font-weight: 500;
	border-bottom: #250d00 dotted 1px;
	padding: 0 0 10px 0 ;
	width: 100%;
	position: relative;
}
.qa label::before{
	display: inline-block;
	content: "Q";
	font-family: 'Solway', sans-serif;
	color: #FFF;;
	text-align: center;
	font-size: 2.7rem;
	background: #250d00;
	height: 33px;
    width: 37px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
	padding: 5px 0 0 0;
	margin: 0 15px 0 0;
}
/*チェックボックスを非表示にする*/
.qa input {display: none;}
/*中身を非表示にしておく*/
.qa div {
	position: relative;
    height: 0;
    overflow-y: hidden;
    transition: 0.8s;
    opacity: 0;
	margin: 20px 0 40px 0;
}
.qa p{
	color: #250d00;
	height: auto;
	min-height: 100px;
	padding: 0 0 0 60px;
	line-height: 1.7;
}
.qa p a{
	color: #eb6100;
	font-weight: 500;
}
.qa p a:hover{border-bottom: #eb6100 1pt solid;}
.qa div::before{
	position: absolute;
	z-index: 1;
	top: 0;
	left:0;
	display: inline-block;
	content: "A";
	font-family: 'Solway', sans-serif;
	text-align: center;
	font-size: 3.4rem;
	color: #FFF;;
	background: #eb6100;
	height: 39px;
    width: 44px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
	padding: 5px 0 0 0;
	margin: 0 0 0 0;
}
/*クリックで中身を表示*/
.qa input:checked + label + div {
    height: auto;
    opacity: 1;
}
/*アイコン*/
.qa label::after {
    content: '\f067';
    font-family: 'Font Awesome 5 Free';
	font-size: 1.8rem;
	font-weight: 600;
	padding: 0 10px 0 20px;
	position: absolute;
	top: 20px;
	right: 0;
}
/*クリックでアイコン入れ替え*/
.qa input:checked + label::after {content: '\f068';}
/************ 料金・予約 ↓ ************/
.charge-t2 {
	width: 100%;
	margin: 0 auto 20px auto;
}
.charge-t2 .midashi {
	font-weight: bold;
	color: #FFF;
	background: #a6937c;
}
.charge-t2 tr {
	width: 100%;
	border: solid 1px #362e2b;
	background: #FFF;
}
.charge-t2 td {
	border: solid 1px #362e2b;
	padding: 20px 10px;
}
.charge-t2 th{
	border: solid 1px #362e2b;
	text-align: left;
	vertical-align: middle;
	background: #a6937c;
  color: #FFF;
	font-size: 1.5rem;
	font-weight: 500;
	padding: 10px 0 10px 10px;
}
/*キャンセル*/
.charge-t .title{padding: 10px 20px;}
.charge-t .title2{
  width: 30%;
  padding: 10px 20px;
}
.charge-t .title{width: 100%;}
.charge-t tr
.charge-t td{width: 100%;}
.charge-t th{padding: 6px 0 0 20px;}
.charge-t{
	width: 100%;
	margin: 30px 0 20px 0;
}
.charge-t .title,
.charge-t .title-sub{
	padding: 10px 20px;
}
.charge-t .title2{
	width: 20%;
	padding: 10px 20px;
}
.charge-t tr,
.charge-t th,
.charge-t td{
	color: #FFF;
	border: solid 1px #362e2b;
}
.charge-t th{
	text-align: left;
	vertical-align: middle;
	background: #a6937c;
  color: #FFF;
	font-size: 1.5rem;
	font-weight: 500;
	padding: 6px 0 0 20px;
}
.charge-t td{
	color: #250d00;
	line-height: 1.7;
  background-color: #FFF;
  padding: 15px 20px;
}
/*問い合わせフォーム*/
.contact{padding: 20px 0 80px 0;}
  .contact .item{
	overflow: hidden;
	margin: 0 0 20px 0;
  }
  .contact .label,
  .contact .label2{
	float: left;
	width:20%;
	padding:10px 10px 0 0;
	font-size: 1.8rem;
	font-weight: bold;
	color: #250d00;
  }
  .contact .label2{padding:0 10px 0 0;}
  .contact .inputs,
  .contact .inputs2{
	float: left;
	width:70%;
  }
  .contact .inputs2 label{
	  font-weight: bold;
	  margin: 0 30px 0 5px;
  }
  .contact input[type="text"],input[type="email"]{
	border: solid 1px #aaa;
	border-radius:5px;
	padding:10px;
	font-size: 15px;
  }
  .contact textarea{
	border: solid 1px #aaa;
	border-radius:5px;
	padding: 10px;
	height: 160px;
	font-size: 1.5rem;
  }
  .contact .btn-area{
	text-align: center;
  }
  .contact input[type="submit"]{
	background: #ee7800;
	border-radius:5px;
	border: none;
	color: white;
	font-size:17px;
	font-weight:bold;
	padding: 10px 20px;
	margin: 30px 30px 0 0;
	box-shadow: 0px 2px #463728;
  }
  .contact input[type="reset"]{
	background: #aaa;
	border-radius:5px;
	border: none;
	color: white;
	font-size:17px;
	font-weight:bold;
	padding: 10px 20px;
	margin: 30px 5px 0 0;
	box-shadow: 0px 2px #463728;
  }
@media screen and (max-width: 901px){
    .pc_only{
        display: none;
    }
}
@media screen and (min-width: 481px) and (max-width: 901px){
.tab_only_none{
    display: none;
}
}
@media screen and (min-width: 768px){
    .sp_on{
        display: none;
    }
}
@media screen and (max-width: 767px){
    .pc_on{
        display: none;
    }    
}
@media screen and (min-width: 481px){
    .sp_only{
        display: none;
    }    
}
@media screen and (max-width: 480px){
    .sp_only_none{
        display: none;
    }    
}