@charset "utf-8";

body{
	margin:0px; padding:0px; color:#444444; background-color:#fff; font-size: 14px!important;  line-height: 1.9em!important; font-weight: normal;
	font-family:"メイリオ", "Yu Gothic", YuGothic, "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
@media screen and ( max-width:479px )
{
	body{
		margin:0px; padding:0px; color:#444444; background-color:#fff; font-size: 12px!important;  line-height: 1.9em!important; font-weight: normal;
	}
}

h1,h2,h3,h4{
	font-family: "メイリオ", "Yu Gothic", YuGothic, "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: normal;
}

/*=============　共通スタイル　=============*/

a, a:hover, a:visited{ color:#444444; text-decoration: none;}
li a, li a:hover, li a:visited{ color:#444444; text-decoration: none;}

ul,li{margin:0; padding: 0;}


/*フォント*/
.txtred{ color:#FB2626;}
.txtbold{ font-weight:bold;}


/*PC-SMP 表示・非表示*/
@media screen and ( max-width:479px )
{
	.none {display:none;}
}
@media screen and ( min-width:480px )
{
	.pcnone {display:none;}
}

/*=============　ヘッダー　=============*/

/*header*/
header{ width: 100%; height: 80px; background: #313131; color: #EBEBEB; font-size: 19px; font-family: "Copperplate"!important;}
header a, header a:hover, header a:visited{ color:#EBEBEB; text-decoration: none; font-size: 19px;}
header ul{ width: 65%; margin: auto; display:flex; justify-content: space-between;}
header li{ height: 42px; margin-top: 18px; line-height: 42px;}
header li.icon img{ width: 30px; height: auto; margin-top: 5px;}
header a.booking{ width: 210px; height: 42px; background: #FB2626; border: 1px #ffffff solid; color: #ffffff; display:flex; justify-content: center;}
header a.booking:hover{ background: #e42121; color: #ffffff;}
header a.booking img{ width: 27px; height: 27px; margin: 5px 8px 0 0;}

@media screen and ( max-width:1240px )
{
	header ul{ width: 80%; margin: auto; display:flex; justify-content: space-between;}
}
@media screen and ( max-width:479px )
{
	header{ height: 60px; font-size: 15px;}
	header a, header a:hover, header a:visited{ font-size: 15px;}
	header ul{ width: 90%;}
	header li{ margin-top: 12px;}
	header li.icon img{ width: 24px; height: auto; margin-top: 5px;}
}


/*=============　vision　=============*/
#vision {width: 100%; height: auto; background: #fff; position:relative}
#vision li{width: 1000px; height: auto;}
#vision li img{ width: 100%; height: 70vh; object-fit: cover;}
#vision h1.logo{position: absolute; top: 50%; left: 50%; width: 25%; transform: translate(-50%,-50%);}
#vision h1.logo img{width: 100%;}

@media screen and ( max-width:1240px )
{
	#vision li{width: 900px; height: auto;}
}
@media screen and ( max-width:479px )
{
	#vision li{width: 100%; height: auto;}
#vision h1.logo{ width: 70%; transform: translate(-50%,-50%);}
#vision h1.logo img{width: 100%;}
}



/*=============　about　=============*/
#about {width: 100%; margin: 20px auto 0 auto; text-align: center;}
#about p.main_txtA{ font-weight: bold; margin-bottom: 15px;}
#about p.main_txtB{ margin-bottom: 15px;}

@media screen and ( max-width:1240px )
{
}
@media screen and ( max-width:479px )
{
	#about {width: 90%; margin: 20px auto 0 auto; text-align: center;}
}


/*=============　room　=============*/
#room { width: 100%; margin-top: 90px; display: flex; justify-content: space-between;}
#room img.room_imgA{ width: 17%; height: 500px; object-fit: cover;}
#room img.room_imgB{ width: 19%; height: 500px; object-fit: cover;}
#room div{ width: 23%; padding: 15px;}
#room dt { width: 100%; text-align: center; font-size: 33px; font-family: "Copperplate"!important;}
#room dd {  width: 100%; text-align: center; font-siz: 8px!important; font-family:"Yu Gothic"!important;}
#room p{ margin-top: 20px;}

@media screen and ( max-width:1240px )
{
}
@media screen and ( max-width:479px )
{
	#room { margin-top: 40px auto 0 auto;}
	#room div{ width: 100%; padding: 0 5%;}
}


/*=============　gallery_mov　=============*/
#gallery_mov { width: 65%; margin: 30px auto 0 auto;}
#gallery_mov div{  position: relative; width: 100%; padding-top: 56.25%;}
#gallery_mov div iframe{ position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
/*#gallery div img{ width: 100%; height: 500px; object-fit: cover;}*/

@media screen and ( max-width:1240px )
{
	#gallery_mov { width: 80%; margin: 30px auto 0 auto;}
}
@media screen and ( max-width:479px )
{
	#gallery_mov { width: 90%; margin: 15px auto 0 auto;}
}

/*=============　room_about　=============*/
#room_about { width: 65%; margin: 30px auto 0 auto;}
#room_about div.about{ display: flex; justify-content: space-between;}
#room_about div.about dl{ width: 31%;}
#room_about div.about dt{ font-size:21px; font-family: "Copperplate"!important;}
#room_about div.about img{ width:21px; margin-right: 6px;}
#room_about div.about dd{ margin-top: 10px;}

@media screen and ( max-width:1240px )
{
	#room_about { width: 80%; margin: 30px auto 0 auto;}
}
@media screen and ( max-width:479px )
{
	#room_about { width: 90%; margin: 15px auto 0 auto;}
	#room_about div.about{ display: flex; justify-content: space-between; flex-wrap:wrap;}
	#room_about div.about dl{ width: 100%;}
	#room_about div.about dt{ font-size:18px; margin-top: 20px;}
	#room_about div.about img{ width:18px; margin-right: 6px;}
	#room_about div.about dd{ margin-top: 10px;}
}

#room_about div.attention{ border: 1px #FB2626 solid; padding: 36px; margin-top: 30px;}
#room_about div.attention dt{ width: 100%; text-align: center; font-size:24px; font-family: "Copperplate"!important;}
#room_about div.attention dd{ margin-top: 15px;}

@media screen and ( max-width:479px )
{
	#room_about div.attention{ padding: 15px; margin-top: 15px;}
	#room_about div.attention dt{ width: 100%; text-align: center; font-size:21px; line-height: 1.5em;}
	#room_about div.attention dd{ margin-top: 10px;}
}


/*=============　booking_new　=============*/
#booking_new { width: 65%; margin: 30px auto 0 auto; padding: 36px 0;}
#booking_new dl.book_title dt{ width: 100%; text-align: center; font-size: 33px; font-family: "Copperplate"!important;}
#booking_new dl.book_title dd {  width: 100%; text-align: center; font-siz: 8px!important; font-family:"Yu Gothic"!important;}
#booking_new dl.book_ja dd { width: 80%; margin: 15px auto 0 auto; padding-bottom: 18px; text-align: center;}
#booking_new .book_dot {border-bottom: 1px #707070 dotted;}
#booking_new .book_line {border-bottom: 1px #707070 solid;}
#booking_new div.book_con {display: flex; justify-content: space-between;}
#booking_new div.book_con dl{width:48%; margin-bottom: 20px;}
#booking_new div.book_con dt{background: #F8A6A6; padding: 5px 10px; color: #ffffff; text-align: center;}
#booking_new div.book_con dd{margin-top: 10px; width: 100%;}
#booking_new div.book_con dl img{width:100%;}
#booking_new div.book_con table{width:100%;}
#booking_new div.book_con tr{width:100%;}
#booking_new div.book_con td{padding: 5px; width: 50%;}
#booking_new div.book_link {width: 100%; margin-top: 30px; text-align: center;}
#booking_new div.book_link img{width:400px;}
#booking_new div.book_link img:hover{opacity: 0.8;}

@media screen and ( max-width:1240px )
{
	#booking_new { width: 80%; margin: 30px auto 0 auto; padding: 36px 0;}
}
@media screen and ( max-width:479px )
{
	#booking_new { width: 100%; margin: 30px auto 0 auto; padding: 30px 0;}
	#booking_new dl{ width: 100%;}
	#booking_new div.book_con {width:90%; display: flex; flex-wrap:wrap; margin: 0 auto;}
	#booking_new div.book_con dl{width:100%; margin-bottom: 20px;}
	#booking_new div.book_con img{width: 100%; height: 200px; object-fit: cover;}
	#booking_new div.book_link {width: 80%; margin-top: 10px; text-align: center; margin: 0 auto;}
	#booking_new div.book_link img{width:100%;}
}


/*=============　booking　=============*/
#booking { width: 65%; margin: 30px auto 0 auto; padding: 36px 0; text-align: center; background: #C6C6C6;}
#booking dl{ width: 80%; margin: auto;}
#booking dl.book_title dt{ width: 100%; text-align: center; font-size: 33px; font-family: "Copperplate"!important;}
#booking dl.book_title dd {  width: 100%; text-align: center; font-siz: 8px!important; font-family:"Yu Gothic"!important;}
#booking dl.book_ja dt { width: 100%; border: 1px #707070 solid; padding: 10px; margin-top: 24px;}
#booking dl.book_ja dd { width: 80%; margin: 15px auto 0 auto; padding-bottom: 18px;}
#booking dl.book_ja dd.book_dot {border-bottom: 1px #707070 dotted;}
#booking img { width: 400px;  height: auto; margin: 25px auto 0 auto;}

@media screen and ( max-width:1240px )
{
	#booking { width: 80%; margin: 30px auto 0 auto; padding: 36px 0;}
}
@media screen and ( max-width:479px )
{
	#booking { width: 100%; margin: 30px auto 0 auto; padding: 30px 0;}
	#booking dl{ width: 100%;}
	#booking dl.book_ja dt { width: 80%; border: 1px #707070 solid; padding: 10px; margin: 24px auto 0 auto;}
	#booking dl.book_ja dd { width: 80%; margin: 15px auto 0 auto;}
	#booking img { width: 80%;  height: auto;}
}


/*=============　gallery_sec　=============*/
#gallery_sec { width: 50%; margin: 60px auto 0 auto;}
#gallery_sec div { width: 100%; text-align: center; display: flex; justify-content:center;}
#gallery_sec div img{ width: 8%; height: 8%; margin-right: 6px;}
#gallery_sec dt { font-size: 33px; font-family: "Copperplate"!important;}
#gallery_sec dd {  width: 100%; text-align: center; font-siz: 8px!important; font-family:"Yu Gothic"!important;}
#gallery_sec ul{ width: 100%; display: flex; flex-wrap: wrap; margin-top: 30px;}
#gallery_sec ul li{ position: relative; width: 33%;}
#gallery_sec ul li:before{ content: ""; display: block; padding-top: 100%;}
#gallery_sec ul li img{ position: absolute; width: 96%; height: 96%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; object-fit: cover;}

@media screen and ( max-width:1240px )
{
	#gallery_sec { width: 70%; margin: 40px auto 0 auto;}
	#gallery_sec div img{ width: 8%; height: 8%; margin-right: 6px;}
}
@media screen and ( max-width:479px )
{
	#gallery_sec { width: 80%; margin: 40px auto 0 auto;}
	#gallery_sec ul{ margin-top: 15px;}
}


/*=============　access　=============*/
#access { width: 100%; margin-top: 90px; padding: 36px 0; background: #353535;}
#access dl.access_title dt{ width: 100%; text-align: center; font-size: 33px; font-family: "Copperplate"!important; color:#EBEBEB;}
#access dl.access_title dd { width: 100%; text-align: center; font-siz: 8px!important; font-family:"Yu Gothic"!important; color:#EBEBEB;}
#access dl.access_about { width: 65%; margin: 24px auto 0 auto; display: flex; justify-content: space-between;}
#access dl.access_about dt { width: 60%; font-size: 13px; color:#FB2626;}
#access dl.access_about dd.access_photo { width: 38%; display: flex; flex-direction: column;}
#access dl.access_about dd.access_photo img{ margin-bottom: 10px;}
#access dl.access_img { width: 65%; margin: 24px auto 0 auto;}
#access img{ width: 100%;}

@media screen and ( max-width:1240px )
{
	#access dl.access_about { width: 80%; margin: 24px auto 0 auto; display: flex; justify-content: space-between;}
}
@media screen and ( max-width:479px )
{
	#access { margin-top: 40px; padding: 30px 0;}
	#access dl.access_about { width: 90%; margin: 24px auto 0 auto; display: flex; justify-content: space-between; flex-wrap:wrap;}
	#access dl.access_about dt { width: 100%; padding-bottom: 15px;}
	#access dl.access_about dd.access_photo { width: 100%; display: flex; flex-direction: column;}
	#access dl.access_img { width: 90%; margin: 24px auto 0 auto;}
	#access img{ width: 100%;}
}


/*=============　address　=============*/
address { width: 100%; background: #C6C6C6;}
address iframe{width: 100%; height: 510px;  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);}
address dl{width: 100%; padding: 36px 0; text-align: center;}
@media screen and ( max-width:479px )
{
	address dl{width: 100%; padding: 20px 0; text-align: center;}
}


/*=============　フッター　=============*/
footer {width: 100%; background: #E0E0E0;}
footer ul{width: 65%; margin: auto; display: flex; justify-content: flex-end;}
footer a{width: 200px; height: 60px; line-height: 60px; text-align: center; font-family: "Copperplate"!important;}
footer a, footer a:hover, footer a:visited{ color:#ffffff; text-decoration: none; font-size: 21px;}
footer a.contact{background: #888888; display:flex; justify-content: center;}
footer a.contact:hover{ background: #777777; color: #ffffff;}
footer a.booking{background: #FB2626; display:flex; justify-content: center;}
footer a.booking:hover{ background: #e42121; color: #ffffff;}
footer img{ width: 28px; height: 28px; margin: 13px 6px 0 0;}
.copyright{width: 100%; background: #353535; padding: 30px 0 30px 0; color: #EBEBEB; font-size: 11px; text-align: center;}

@media screen and ( max-width:1240px )
{
	footer ul{width: 80%; margin: auto; display: flex; justify-content: flex-end;}
}
@media screen and ( max-width:479px )
{
	.copyright{width: 100%; background: #353535; padding: 30px 0 60px 0; color: #EBEBEB; font-size: 11px; text-align: center;}
}


@media screen and ( max-width:479px )
{
	div.smp_pagetop{ width: 100%; height: 40px; position: fixed; bottom: 0;}
	div.smp_pagetop ul{ display: flex; justify-content: space-between;}
	div.smp_pagetop li{ text-align: center; line-height: 40px;}
	div.smp_pagetop li.smp_inst{ width: 25%; background: #767676; border-right:2px #ffffff solid;}
	div.smp_pagetop li.smp_mail{ width: 25%; background: #404040; border-right:2px #ffffff solid;}
	div.smp_pagetop li.smp_booking{ width: 50%; background: #FB2626;}
	div.smp_pagetop a.smp_booking, div.smp_pagetop a.smp_booking:hover, div.smp_pagetop a.smp_booking:visited{ width: 100%; background: #FB2626; color: #FFFFFF; font-size: 18px;}
	div.smp_pagetop img{ height: 21px; margin-top: 9px;}
}


/*=============　ページトップ　=============*/
#page_top{
  width: 60px;
  height: 60px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;
}
#page_top a{
  width: 60px;
  height: 60px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f139';
  font-size: 50px;
  color: #000;
}