@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;margin:1em 0;padding:0}
input,select{vertical-align:middle}

/*================================================
 *  一般・共通設定
 ================================================*/
html {
	height: 100%;
}

body {
	height: 100%;
	font-size:14px;
	font-family:"Noto Sans JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,sans-serif;
	line-height:2;
	/*display: flex;
	flex-direction: column;*/
	min-height: calc(100vh - 58px);
}

body::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color:#fff;  /* 背景カラー */
	z-index: 10000;  /* 一番手前に */
	pointer-events: none;  /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
	opacity: 0;  /* 初期値では非表示 */
	-webkit-transition: opacity .8s ease; /* アニメーション時間は 0.8秒 */
	-ms-transition: opacity .8s ease;
	-moz-transition: opacity .8s ease;
	transition: opacity .8s ease;
}

/*body要素に.fadeoutセレクタがある場合には、レイヤーが表示されるようにopacityを１に設定します。*/
 
body.fadeout::after {
  opacity: 1;
}

header {
	height: calc(100vh - 58px);
	position: relative;
	overflow-x: hidden;
	margin-top: 58px;
}

#contents {
	width: 95%;
	/* max-width:980px; */
	margin: 0 auto;
	flex: 1;
}

#news {
	margin: 48px auto;
	display: flex;
	flex-direction: column;
	width: auto;
	justify-content: center;
	align-items: center;
}

#news div {
	margin:0 1em;
}

#news a {
	text-decoration: none; /*underline 1px solid #a95348;*/
}

#news a:hover {
	text-decoration: underline 1px solid #a95348;
}

/*
#news #message a::after {
	position: absolute;
	bottom: 0px;
	left: 0;
	content: '';
  	width: 100%;
  	height: 1px;
  	background: #a95348;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
}

#news #message a:hover::after {
	transform: scale(1, 1);
}
*/

@media screen and (min-width: 768px){
	
	.br-sp {
		display: none;
	}
	
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
	}
}

a {
	color: black;
}

h1 {
	font-size:28px;
}

titleline {
	width: 320px;
	border-bottom: 1px solid #a95348;
}

#contents h1 {
	text-align: center;
	margin: 120px 0 4px;
}

.footcontact h1 {
	font-size: 32px;
}

h2 {
	margin-top:40px;
	margin-bottom:1em;
	font-size:24px;
	text-align:center;
}

h3 {
	margin-bottom:0.25em;
	font-size:18px;
}

.threeCol h3 {
	margin-top: 96px;
}

.column h3 {
	font-size: 16px;
}

h4 {
	margin-bottom:0.25em;
	font-size:16px;
}

h5 {
	font-size: 8px;
}

h3 h5 {
	margin-top: -8px;
}

h6 {
	margin-bottom:0.25em;
	padding-left:5px;
	font-size:16px;
	font-weight:bold;
}

p {
	margin:0.3em 0;
}

.threeCol p {
	margin: 0.2em 0;
}

img {
	vertical-align:bottom;
}

em {
	font-weight:bold;
}

strong {
	font-weight:bold;
	color:#ff0000;
}

pre {
	margin:1em 0;
	padding:1em;
}

blockquote {
	margin-bottom:1em;
	padding:1em;
	border:1px dotted #ddd;
	border-left:5px solid #ddd;
}

ul,ol,dl {
	margin:0 0 1em 0;
}
ul li {
	list-style:disc;
}
ol li {
	list-style:decimal;
}
li {
	margin-left:2em;
}

dt {
	margin-bottom:0.5em;
	border-bottom:1px dotted #ddd;
}
dd {
	margin-bottom:1em;
}

table {
	margin: -0.3em 0;
	border-collapse:collapse;
}

.threeCol table {
	width: 240px;
}
th {
	padding:0.5em;
	text-align:right;
	vertical-align:middle;
	border:1px solid #ddd;
}
td {
	padding: 0.3em 1em 0.3em 0;
	text-align:left;
}

button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	margin: 0;
	outline: none;
	padding: 0;
	vertical-align: middle;
}

button a {
	text-decoration: none;
}

/*================================================
 *  汎用クラス
 ================================================*/
.logo {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	animation: fadeout 5s forwards;
}

.logo img {
	max-width: 60%;
	transform: translateY(-58px);
}

@keyframes fadeout {
	0% {opacity: 0;
		transform: translateY(-20px)
	}
	20% {opacity: 1;
		transform: translateY(0px)}
	30% {opacity: 1}
	100% {opacity: 0}
}

.fade {
	animation: fadein 5s forwards;
}

@keyframes fadein {
	0% {opacity: 0; pointer-events:none;}
	30% {opacity: 0; pointer-events: auto;}
	100% {opacity: 1;}
}

.fade2 {
	animation: fadein2 0.8s forwards;
}

@keyframes fadein2 {
	0% {opacity: 0; pointer-events: auto;}
	100% {opacity: 1;}
}

/* 写真中央寄せ */
.imgC {
	clear:both;
	overflow:hidden;
	margin-bottom:50px;
	text-align:center;
}
.imgC img {
	border-radius:5px;
	margin-bottom:0.5em;
}

/* 写真左寄せ */
.imgL {
	clear:both;
	overflow:hidden;
	margin-bottom:50px;
}
.imgL img {
	float:left;
	margin:0 1em 0.5em 0;
	border-radius:5px;
}

/* 写真右寄せ */
.imgR {
	clear:both;
	overflow:hidden;
	margin-bottom:50px;
}
.imgR img {
	float:right;
	margin:0 0 1em 0.5em;
	border-radius:5px;
}

/* 2カラム（スマートフォンでは1カラム) */
.twoCol {
	margin: 160px auto;
	width: 100%;
	overflow:hidden;
}
.twoColInner {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	overflow:hidden;
}
.twoColInner div {
	float:left;
}
.twoColInner div:nth-child(2n+1) {
	clear:both;
}
.twoColInner img {
	max-width: 100%;
	width: 720px;
	margin-bottom:0.5em;
}

/* 3カラム（スマートフォンでは1カラム) */
.threeCol {
	margin: 160px auto;
	width: 100%;
	overflow:hidden;
}
.threeColInner {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	overflow:hidden;
}
.threeColInner div {
	float:left;
}
.threeColInner div:nth-child(3n+1) {
	clear:both;
}
.threeColInner img {
	width:100%;
	max-width: 400px;
	margin-bottom:0.5em;
}

.twoCol h2 {
	margin-top: 16px;
	text-align: left;
	font-size: 20px;
	font-weight: normal;
}


.threeCol h2 {
	margin-top: 16px;
	text-align: left;
	font-size: 20px;
	font-weight: normal;
}

.clmimgleft {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 32px auto;
	max-width: 80%;
	box-sizing: border-box;
}


.center {
	text-align: center;
}

.main {
	margin-top: 58px;
	width: 95%;
	max-width: 980px;
}

.column {
	display: flex;
	flex-direction: column;
	margin: 0 16px;
	max-width: 60%;
}

.columnH {
	display: flex;
	flex-direction: column;
	margin: 0 16px;
}

.LineL {
	display: flex;
	flex-direction: column;
	margin: 56px 0;
	margin-left: 2em;
	padding: 1em 0 1em 1em;
	border-left: solid 1px #a95348;
	line-height: 24px;
}

.LineL.hotel {
	margin-bottom: 80px;
}

.twoCol .LineL {
	margin-top: 0;
}

.threeCol .LineL {
	margin-top: 0;
	max-width: 320px;
}

.valuewrap {
	flex-direction: row;
}

.value {
	text-align: right;
}

.colnarr {
	width: 80%;
	max-width: 1000px;
}

#gmap {
	width: 65%;
	max-width: 880px;
	height: 600px;
	padding-top: -120px;
	filter:grayscale(100%);
	-webkit-filter:grayscale(100%);
}

#caption {
	font-size: 12px;
	margin-top: 80px;
}

.sp {
	display:none;
}

/* ボタン（タイプ2） */
.btn02 a {
	display:block;
	color:#4D4D4D;
	text-decoration:none;
	text-align: center;
	border-radius:5px;
	border:1px solid #1b1b1b;
	background:none;
	transition:all 0.2s ease 0s;
}

.btn02 a:hover {
	background: #fff;
	transition:all 0.2s ease 0s;
	color: #a95348;
	border-color: #a95348;
}

.Room {
	margin: 80px 0;
}

.Room th {
	border: none;
	padding: 0 0.5em;
	line-height: 2em;
}

.Room hr {
	border:solid 1px;
	width:72px;
	height: 0px;
	color:#a95348;
	margin:0 4px
}

.fadeInDownTrigger {
	opacity: 0;
}

.fadeInDownTrigger.delay1 {
	animation-delay: .2s;
}

.fadeInDownTrigger.delay2 {
	animation-delay: .4s;
}

.fadeInDownTrigger.delay3 {
	animation-delay: .6s;
}

.fadeInDownTrigger.delay4 {
	animation-delay: .8s;
}

.fadeInDownTrigger.delay5 {
	animation-delay: 1s;
}


.fadeDown {
	animation-name: fadeDownAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	pacity: 0;
}

@keyframes fadeDownAnime{
from {
	opacity: 0;
	transform: translateY(-20px);
}
	
to {
	opacity: 1;
	transform: translateY(0);
}
}

.fadeInLineTrigger {
	transform: scale(0, 1);
	transform-origin: left top;
}

.fadeLine {
	animation-name: fadeLineAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	transform: scale(0, 1);
	transform-origin: left top;
}

@keyframes fadeLineAnime{
from {
	transform: scale(0, 1);
}
	
to {
	transform: scale(1, 1);
}
}

#message {
	width: auto;
	max-width: 100%;
	min-height: 160px;
	margin: 0 auto;
	text-align: left;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

#message a {
	display:block;
	color:#4D4D4D;
	text-decoration:none;
	border:1px solid #1b1b1b;
	background:none;
	transition:all 0.2s ease 0s;
	padding: 4px 16px;
}

#message a:hover {
	background: #fff;
	text-decoration:none;
	transition:all 0.2s ease 0s;
	border-color: #a95348;
}

#message .news-col {
	width: 240px;
	max-width: 25%;
	min-height: 160px;
	text-align: left;
	margin: 0 16px;
}

#message .ndate {
	font-size: 12px
}

#message .nbody {
	margin-left: 0.3em;
	margin-right: 24px;
	line-height: 24px;
}

#message .ndot {
	font-size: 21px;
	text-align: right;
	margin-right: 8px;
	margin-top: 12px;
}

#readmore{
	width: 70px;
	height: 70px;
	padding-top: 32px;
 	margin: 0 auto;
}

#readmore img{
	width: 100%;
 	cursor: pointer;
 	filter: grayscale(100%);
 	transition-duration: 0.2s;
}
#readmore img:hover{
 	filter: grayscale(0);
 	transition-duration: 0.2s;
}


/*================================================
 *  ヘッダー
 ================================================*/
header h1 {
	position:  absolute;
	text-align: center;
	vertical-align: middle;
	top: 50%;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 80%;
	z-index: 10;
}

header h1 img {
	width: 100%;
	max-width: 400px;
	margin: auto;
}

header img {
	object-fit: cover;
}

.topimg {
	background: rgba(255,255,255,0.25) center no-repeat;
	background-size: cover;
	background-attachment: scroll;
}

#about{
	background-image: url("../img/TPAbout.jpg");
}

#about.topimg{
	background-position: bottom;
}

#access{
	background-image: url("../img/TPAccess.jpg");
}

#restaurant {
	background-image: url("../img/TPRestaurant.jpg");
}

#hotel{
	background-image: url("../img/TPHotel.jpg");
}

header .da img, header .topimg .da img {
	position: absolute;
	left: 50%;
    transform: translateX(-50%);
	width: 80px;
	bottom: 8px;
	z-index: 5000;
}

/*================================================
 *  グローバルナビゲーション
 ================================================*/
nav {
	width:100%;
	font-size: 13px;
	min-width: 1040px;
	position:fixed;
	z-index: 10000;
	top:0;
	left:0;
	background:rgba(245,245,245,0.90);
	align-items: center;
	height: 58px
}

nav li a::after {
	position: absolute;
	bottom: -2px;
	left: 0;
	content: '';
  	width: 100%;
  	height: 1px;
  	background: #a95348;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
}

#g-nav a.g-insta::after,
#g-nav .btn02 a::after{
	display: none;
}

nav li a:hover::after {
	transform: scale(1, 1);
}

nav .pc{
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.pc .navL{
	display: flex;
	justify-content: center;
	margin: 0 16px;
	align-items: center;
	flex-grow: 1;
}

.pc .navL img {
	width: 280px;
}

.pc .navR{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
	margin: 0 16px;
	flex-grow: 1;
}

span {
	display: inline-block;
}

.navR .btn02 {
	margin-left: 32px;	
	line-height: 16px;
}

.navR .btn02 a {
	font-size: 12px;
	padding: 2px 8px;
}

.pc ul {
	width: 50%;
	max-width: 600px;
	min-width: 500px;
	flex-grow: 2;
	display: flex;
	justify-content: space-between;
	margin:0 16px;
}

nav li {
	position:relative;
	list-style:none;
	margin: 0;
}

nav li a {
	text-decoration:none;
}

nav li a:hover {
	color:#000;
	text-decoration:none;
}

#g-nav .btn02 {
	background-color: rgba(255,255,255,0.50);
	font-size: 12px;
	margin-left: 0;
	margin-top: 24px;
}
.Room span {
	margin: 0 0.5em;
}

/*================================================
 *  メイン
 ================================================*/
main {
	width:100%;
}

section {
	margin-bottom:10%;
}

/*================================================
 *  フッター
 ================================================*/
footer {
	position: sticky;
	top: 100vh;
	background-color: #F5F5F5;
	color: #4D4D4D;
	width: 100%;
	display: inline-flex;
	justify-content: space-evenly;
	flex-direction: column;
	align-items: center;
	clear:both;
	box-sizing: border-box;
	padding:40px 0;
	font-size:12px;
}

#footlogo {
	width: 300px;
}

.footcontact {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	width: 95%;
	max-width: 640px;
	row-gap: 32px;
	margin: 40px 0;
}



.footcontact div {
	margin: 16px 40px;
}

footer .btn02 a {
	width: 70px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	padding: 14px 32px;
	border-radius: 50%;
	text-align: center;
}

footer .btn02 a:hover{
	background: #fff;
}

footer small {
	display: inline-block;
	color: #767676;
	text-align: center;
}

footer .copy {
	font-family: 'Noto Serif JP', serif;
	font-size: 11px;
}

/*================================================
 *  ページトップへの戻り
 ================================================*/
.totop {
	position:fixed;
	bottom:15px;
	right:15px;
	opacity: 0;
	transition: all 0.65s;
}

.totop.isActive {
 	opacity: 1;
 	transition: all 0.65s;
}
.totop a {
	display:block;
	text-decoration:none;
}

/*================================================
 *  スライドショー
 ================================================*/
.slide {
	height: calc(100vh - 58px);
	overflow:hidden;
	position:relative;
	list-style:none;
	margin:0;
	padding:0;
}

/*
.slide img {
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(-20%);
	min-height: calc(100vh - 58px);
	min-width: 100vw;
}
*/

.slide div {
	background-size: cover;
	height: calc(100vh - 58px);
	width: 100%;
}

.slide .slide01 {
	background-image: url("../img/slide/slide01.jpg");
}	

.slide img {
	height: calc(100vh - 58px);
	width: 100vw;
	object-fit: cover;
}

.slide li {
	position:absolute;
	width: 100vw;
	height: 100vh;
	margin:0;
	padding:0;
	background-color:#fff;
    visibility: hidden;
    animation: anime_slider_fade 72s 0s infinite;
}

.slide > li:nth-of-type(2) {
    animation-delay: 8s;
}
.slide > li:nth-of-type(3) {
    animation-delay: 14s;
}
.slide > li:nth-of-type(4) {
    animation-delay: 20s;
}
.slide > li:nth-of-type(5) {
    animation-delay: 26s;
}
.slide > li:nth-of-type(6) {
    animation-delay: 32s;
}
.slide > li:nth-of-type(7) {
    animation-delay: 38s;
}
.slide > li:nth-of-type(8) {
    animation-delay: 44s;
}
.slide > li:nth-of-type(9) {
    animation-delay: 50s;
}
.slide > li:nth-of-type(10) {
    animation-delay: 56s;
}
.slide > li:nth-of-type(11) {
    animation-delay: 62s;
}
.slide > li:nth-of-type(12) {
    animation-delay: 68s;
}
 
@keyframes anime_slider_fade {
    0% {
        visibility: visible;
        opacity: 0;
    }
    3.03% {
        opacity: 1;
    }
    11.09% {
        opacity: 1;
    }
    14.09% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/*================================================
 *  Swiper
 ================================================*/

.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
}

.arrowarea {
	background-color: #fff;
	height: 100%;
	
}

#mySwiper {
	width: 100%;
}

#mySwiper2 {
	padding: 0;
	padding-top: 2px;
	float: right;
	max-width: 195px;
}
	
#mySwiper2 .swiper-slide img {
	width: 24px;
}

#mySwiper2 .swiper-wrapper {
	
}

#mySwiper2 .swiper-slide {
	opacity: 0.4;
	line-height: 0;
	width: 24px;
	height: 24px;
}

#mySwiper2 .swiper-slide-thumb-active {
 	opacity: 1;
}

#mySwiper2 .dash {
	opacity: 0.4;
	margin: 0 4px;
	height: 24px;
	width: 10px;
}

#mySwiper3 {
	max-width: 900px;
	width: 80%;
	height: 400px;
	padding: 0 80px;
}

#mySwiper3 .swiper-slide {
	width: 1060px;
	max-width: 100%;
}

#mySwiper3 img {
	width: 900px;
	max-width: 100%;
	height: 400px;
	object-fit: cover;
}

#mySwiper3 .swiper-wrapper {
	margin: 0 auto;
	width: 900px;
	max-width: 100%;
}

/*================================================
 *  タブレット向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width : 979px ){
	
	header{
		margin-top: 0;
		height: 100vh;
	}
	
	#contents {
		box-sizing:border-box;
		width:100%;
		padding:0 10px;
	}
	
	.logo img {
	transform: translateY(0);
	}
	
	.slide {
		height: 100vh;
		min-height: 100%;
	}
	
	.slide div {
		height: 100vh;
	}
	
	.slide li {
		height: 100%;
	}

	.slide img {
		height: 100%;
	}
	
	.topimg {
		background-blend-mode:lighten;
	}
	
	.text {
		max-width: 90vw;
	}
	
	header {
		height: 100vh;
	}
	
	nav {
		z-index: 10000;
		width: auto;
		min-width: auto;
		height: auto;
		min-height: 600px;
		background: rgba(0,0,0,0.00);
	}
	
	#news {
		text-align: center;
	}
	
	.btn02 a:active {
		background: #fff;
		transition:all 0.2s ease 0s;
		color: #a95348;
		border-color: #a95348;
	}
	
	/* 以下、ハンバーガーボタン */
	.pc , nav .pc {
		display: none;
	}
	
	.sp {
		display: inherit;
	}
	
	/*========= ナビゲーションのためのCSS ===============*/
	
	#g-nav{
	    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
	    position:fixed;
		display: flex;
	    /*ナビのスタート位置と形状*/
	    z-index: 9999;
		top:0;
	    right:-50%;
		width: 50%;
	    height: 100vh;/*ナビの高さ*/
		min-height: 100vh;
		background:rgba(255,255,255,0.8);
	    /*動き*/
		transition: all 0.7s;
	}
	
	/*アクティブクラスがついたら位置を0に*/
	#g-nav.panelactive{
	    right: 0;
	}
	
	/*ナビゲーションの縦スクロール*/
	#g-nav.panelactive #g-nav-list{
	    /*ナビの数が増えた場合縦スクロール*/
	    position: fixed;
	    z-index: 9999;
	    width: 50%;
	    height: 100vh;/*表示する高さ*/
	    overflow: auto;
	    -webkit-overflow-scrolling: touch;
	}
	
	/*ナビゲーション*/
	#g-nav ul {
	    /*ナビゲーション天地中央揃え*/
	    position: absolute;
		display: list-item;
	    z-index: 9999;
		margin-top: 104px;
	    top:50%;
	    left:65%;
	    transform: translate(-50%,-65%);
	}
	
	/*リストのレイアウト設定*/
	
	#g-nav li{
		list-style: none;
	    text-align: right;
	}
	
	#g-nav li a{
		padding:16px 10px;
		display: block;
		letter-spacing: 0.1em;
	}

	nav li a::after {
		bottom: 12px;
	}

	nav li a:hover::after {
		transform: none;
	}

	nav li a:active::after {
		transform: scale(1, 1);
	}
	
	/*========= ボタンのためのCSS ===============*/
	
	.openbtn{
		/*ボタン内側の基点となるためrelativeを指定。
		追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
		position: fixed;
    	transition: all .8s;
		cursor: pointer;
		background-color: rgba(255,255,255,0.00);
		z-index: 12000;
    	width: 50px;
    	height: 50px;
		right: 10px;
	}

	/*ボタン内側*/
	.openbtn span{
    	display: inline-block;
    	transition: all .8s;/*アニメーションの設定*/
    	position: absolute;
    	left: 11px;
    	height: 3px;
		border: solid 1px rgba(255,255,255,0.80);
    	border-radius: 2px;
		background: #000;
  		width: 55%;
	}

	.openbtn span:nth-of-type(1) {
		top:15px;	
	}

	.openbtn span:nth-of-type(2) {
		top:23px;
	}

	.openbtn span:nth-of-type(3) {
		top:31px;
	}

	/*activeクラスが付与されると線が回転して×に*/
	.openbtn.active {
		background-color: rgba(255,255,255,0.00);
	}
	
	.openbtn.active span:nth-of-type(1) {
		border: none;
 		top: 18px;
		left: 12px;
		transform: translateY(6px) rotate(-45deg);
	    width: 50%;
	}

	.openbtn.active span:nth-of-type(2) {
		opacity: 0; /*真ん中の線は透過*/
	}

	.openbtn.active span:nth-of-type(3){
		border: none;
	    top: 30px;
	    left: 12px;
	    transform: translateY(-6px) rotate(45deg);
	    width: 50%;
	}


	
	.column {
		width: 100vw;
		max-width: none;
		padding: 0 16px;
		align-items: center;
	}
	
	.twoCol {
		margin-top: 80px
	}
	
	.twoColInner , .threeColInner {
		flex-direction: column;
		align-items: center;
		align-content: center;
	}
	
	.colInner {
		max-width: 640px;
	}
	
	.LineL {
		align-content: center;
	}
	
	.clmimgleft {
		align-content: center;
		align-items: stretch;
		width: 70%;
	}
	
	.clmimgleft.resttop {
		align-items: center;
	}
	
	.sp img {
		transform: translateY(-50%);
	}
	
	/*================================================
	 *  Swiper
	 ================================================*/
	
	#mySwiper img {
		width: 100%;
	}
}
/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {
	
	#g-nav li a{
		padding:12px 10px;
	}
	
	#g-nav .btn02 {
		margin-top: 0px;		
	}
	
	#g-nav .btn02 a {
		padding:2px 24px;
		line-height: 20px;
	}
	
	.g-insta {
		margin-top: 8px;
	}
	
	#contents {
		padding: 0;
	}
	
	h2 {
		margin-top:30px;
	}
	
	#news {
		flex-direction: column;
	}

	#message {
		flex-direction: column;
		align-items: center;
	}
	
	#message .news-col {
		margin-bottom: 16px;
		width: 300px;
		max-width: 90%;
	}
	
	#readmore {
		width: 88px;
		padding: 24px 0 16px;
	}
	
	.footcontact {
		flex-direction: column;
	}
	
	#gmap {
		width: 100vw;
		padding-top: 0;
	}
	
	.imgC {
		margin-bottom:30px;
	}
	
	.imgC img {
		max-width:100%;
	}

	.imgL {
		margin-bottom:30px;
	}
	
	.imgL img {
		float:none;
		max-width:100%;
		margin-right:0;
	}

	.imgR {
		margin-bottom:30px;
	}
	
	.imgR img {
		float:none;
		max-width:100%;
		margin-left:0;
	}

	.twoCol {
		width:100vw;
		margin-bottom: 120px;
	}
	
	.LineL {
		margin: 0 2em 32px;
		min-width: 240px;
	}
	
	.column {
		margin: 0 8px 80px;
		box-sizing: border-box;
	}
	
	.twoCol img , .threeCol img {
		width: 100vw;
		max-width: none;
	}

	.threeCol {
		width:100vw;
		margin-bottom:30px;
	}

	.clmimgleft {
		width: 90%;
	}

	.fadeInDownTrigger.delay1,
	.fadeInDownTrigger.delay2,
	.fadeInDownTrigger.delay3,
	.fadeInDownTrigger.delay4,
	.fadeInDownTrigger.delay5 {
		animation-delay: 0s;
	}
	
	.spcenter {
		text-align: center;
	}

	#caption p {
		margin:1em 0;
	}
	
	.Room th {
		padding-bottom: 24px;
	}
	
	.Room hr {
		width: 40px;
	}
	
	#footlogo {
		width: 240px;
	}
	
	.footcontact h1 {
		font-size: 24px;
	}
	/*================================================
	 *  Swiper
	 ================================================*/
	
	#mySwiper2 .swiper-wrapper {
		width: 240px;
	}
	
	#mySwiper2 .swiper-slide {
	}

	#mySwiper3 {
		width: 100%;
		padding: 0;
	}
	
	#mySwiper3 .swiper-slide {
		width: 100%;
	}
}