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


/* ---------------------------------------------------------------------------------------------

　   web font

--------------------------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');


/* ---------------------------------------------------------------------------------------------

　   サイト全体

--------------------------------------------------------------------------------------------- */

html {
	margin:			0!important;
	padding:		0!important;
	overflow-y: auto;
	-webkit-overflow-scrolling:touch;
	-moz-text-size-adjust:		none;/* スマホ文字サイズ自動調整 */
	-webkit-text-size-adjust:	100%;
	}
*{
	margin:				0;
	padding:			0;
	box-sizing:			border-box;	/* ボックスサイズ枠線まで含める */  
	}
	
body{
	background-color: #000000;
	color: #ffffff;
	font-family: 'EB Garamond', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	-webkit-font-smoothing: antialiased;/*チラつき防止*/
	line-height:	160%;
	width:			100%;
	padding:		0;
	}
	@media only screen and (max-width: 900px) {
		body{
			line-height:	150%;
			}
		}
	@media only screen and (max-width: 600px) {
		body{
			font-size:		0.85em;
			}
		}

/* ---------------------------------------------------------------------------------------------

　   パーツ

--------------------------------------------------------------------------------------------- */

/*　PC・タブレットで非表示、スマホで表示　*/
.pc_hidden8{
	display: none;
	}
	@media only screen and (max-width: 800px) {
		.pc_hidden8{
			display:block !important;
			}
		}
.pc_hidden4{
	display: none;
	}
	@media only screen and (max-width: 400px) {
		.pc_hidden4{
			display:block !important;
			}
		}

/*　スマホで非表示、PC・タブレットで表示　*/
.sp_hidden{
	display: block;
	}
	@media only screen and (max-width: 800px) {
		.sp_hidden{
			display:none!important;
			}
		}

/*改行*/
br.hd{
	display: none!important;
	}
	@media only screen and ( max-width : 480px ) {
		/*改行*/
		br.hd{
			display: block!important;
			}
		}


/*　回りこみ解除　*/
.clear{
	clear:both;
	float: none;
	}
.clear:after {
	content: " "; 
	display: block;
	clear: both;
	}

/*PCでのtel:無効に*/
[href^="tel"] {
    text-decoration: none;
    cursor: default;
    pointer-events: none;
	}
@media screen and (max-width: 860px) {
    [href^="tel"] {
        pointer-events: auto;
    	}
	}

/*PDF Embedder*/
a.pdfemb-viewer{
	width: 100%;
	height: auto;
	}
	@media screen and (max-width: 650px) {
		a.pdfemb-viewer{
			}
		}



/* ---------------------------------------------------------------------------------------------

　   画像

--------------------------------------------------------------------------------------------- */

img {
	border:			0;
	vertical-align:	middle;/*画像 縦配置時の隙間なくす*/
	}
a img {
	text-align:center;
    border-style:none;
	}

/* 画像 正方形トリミング object-fit　IE・Edge用　*/
.object-fit-img{
	object-fit: contain;
	font-family: 'object-fit: contain;'
	}
	

/* ---------------------------------------------------------------------------------------------

　   罫線

--------------------------------------------------------------------------------------------- */
hr {
	border-width: 1px 0px 0px 0px; /* 太さ */
	border-style: dashed; /* 線種 */
	border-color: #ccc; /* 線色 */
	height: 1px; /* 高さ */
    max-width: 100%;
	clear:both;
	margin: 23px 0px;
	}


/* ---------------------------------------------------------------------------------------------

　   ボタン

--------------------------------------------------------------------------------------------- */

/*-- ボタン 四角 --*/
.btn{}





/*== 下線が伸びて背景に変わる　*/
.btnlinestretches{
	position:relative;
	color:#fff;
	font-size: 16px;
	display:inline-block;
	letter-spacing: 1px;
    text-decoration: none;
	padding: 16px 30px;
	margin: 10px auto 20px auto;
    outline: none;
	width: 56%;
	}
/*テキストの設定*/
.btnlinestretches span{
    /*テキストを前面に出すためz-indexの値を高く設定*/
	position:relative;
	z-index: 2;
	}
.btnlinestretches:hover span{
	color: #000;
	}
/*線の設定*/
.btnlinestretches::after {
	content:'';
    /*絶対配置で線の位置を決める*/
	position:absolute;
	z-index:1;
	bottom:0;
	left:0;
    /*線の形状*/
	background:#aaa;
	width:100%;
	height:1px;
    /*アニメーションの指定*/
	transition:all 0.3s ease-in-out;
	}
/*線が伸びて背景に*/
.btnlinestretches:hover::after {
	height:100%;
	background:#fff;
	}

	@media screen and (max-width: 650px) {
		.btnlinestretches{
			font-size: 15px;
			padding: 14px 30px;
			margin: 2px auto 20px auto;
			width: 62%;
			}
		}









/* ---------------------------------------------------------------------------------------------

　   wrap

--------------------------------------------------------------------------------------------- */

.wrap{
	overflow: hidden;
	margin-bottom: 0;
	position: relative;
	}

/*コンテンツ全体*/
#wrapper{
	width:96%;
	max-width:1000px;
	margin:0 auto;
	}



/* ---------------------------------------------------------------------------------------------

　   main

--------------------------------------------------------------------------------------------- */

/*-- グループ名 --*/
h1{
	position: absolute;
	bottom: 130px;
	color: #fff;
	width: 100%;
	text-align: center;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 2px;
	}
	@media screen and (max-width: 900px) {
		h1{
			bottom: 140px;
			width: 100%;
			font-size: 15px;
			}
		}



/*-------

店舗ごとの囲み

-------*/

.bundle{
	width: 100%;
	min-height: 800px;
	display: flex;
	align-items: center;
	vertical-align: middle;
	}
/*1つおきにレイアウト逆*/
.bundle:nth-child(odd){
	-webkit-flex-direction: row-reverse;
	-moz-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	-o-flex-direction: row-reverse;
	flex-direction: row-reverse;
	}

/*ルグルトン*/
.bundle.block_leg{
	background-image: url("../img/bg_leg.jpg");
	}
/*ぐのん*/
.bundle.block_gn{
	background-image: url("../img/bg_gn.jpg");
	}
/*はなれや*/
.bundle.block_hnr{
	background-image: url("../img/bg_hnr.jpg");
	}
/*やない荘*/
.bundle.block_yni{
	background-image: url("../img/bg_yni.jpg");
	}

.bundle.block_leg,
.bundle.block_gn,
.bundle.block_hnr,
.bundle.block_yni{
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right center;
	}
.bundle.block_gn,
.bundle.block_yni{
	background-position: left center;
	}

	@media screen and (max-width: 1260px) {
		.bundle.block_leg,
		.bundle.block_gn,
		.bundle.block_hnr,
		.bundle.block_yni{
			background-size: cover;
			}
		}
	@media screen and (max-width: 900px) {
		.bundle{
			min-height: auto;
			padding-top: 480px;
			padding-bottom: 100px;
			}
		.bundle.block_leg{
			background-image: url("../img/bg_leg_s.jpg");
			}
		.bundle.block_gn{
			background-image: url("../img/bg_gn_s.jpg");
			}
		.bundle.block_hnr{
			background-image: url("../img/bg_hnr_s.jpg");
			}
		.bundle.block_yni{
			background-image: url("../img/bg_yni_s.jpg");
			}
		.bundle.block_leg,
		.bundle.block_gn,
		.bundle.block_hnr,
		.bundle.block_yni{
			background-size: 100%;
			background-position: center top;
			}
		}
	@media screen and (max-width: 650px) {
		.bundle{
			padding-top: 360px;
			padding-bottom: 80px;
			}
		}
	@media screen and (max-width: 600px) {
		.bundle{
			padding-top: 280px;
			padding-bottom: 20px;
			}
		}
	@media screen and (max-width: 480px) {
		.bundle{
			padding-top: 220px;
			padding-bottom: 50px!important;
			}
		}



/*----------

店舗情報 囲み

----------*/
.inner{
	width: 60%;
	text-align: center;
	}
	@media screen and (max-width: 980px) {
		.inner{
			margin-left: 3%;
			}
		}
	@media screen and (max-width: 900px) {
		.inner{
			width: 80%;
			margin: 0 auto;
			/*padding-top: 80px;
			background-color: rgba(0,0,0,0.6);*/
			}
		}
	@media screen and (max-width: 650px) {
		.inner{
			width: 96%;
			}
		}

/*-- 店舗ロゴマーク --*/
.inner .shop_thmb{
	margin-bottom: 50px;
	}
.inner .shop_thmb h2.ttl{}
.inner .shop_thmb h2.ttl img{
	width: 100%;
	max-width: 324px;
	height: auto;
	}

/*-- 店舗情報 --*/
.inner .detail{}
/*キャッチ*/
.inner .detail h3.chath{
	font-size: 20px;
	font-weight: normal;
	line-height: 170%;
	margin-bottom: 28px;
	}
/*コピー*/
.inner .detail .txt{
	font-size: 16px;
	line-height: 190%;
	margin-bottom: 20px;
	}
/*住所*/
.inner .detail .add{
	font-size: 14px;
	margin-bottom: 18px;
	}

/*-- sns --*/
.inner .sns{}
.inner .sns a{
	display: block;
	color: #fff;
	text-decoration: none;
	margin-bottom: 7px;
	transition: .4s;
	}
.inner .sns a:hover{
	opacity: .55;
	}
.inner .sns a:last-child{
	margin-bottom: 0;
	}
.inner .sns a span{
	font-size: 14px;
	margin-right: 10px;
	position: relative;
	top: -8px;
	}
.inner .sns a i{
	font-size: 30px;
	}
.bundle.block_leg .sns a span,
.bundle.block_gn .sns a span,
.bundle.block_hnr .sns a span{
	display: none;
	}

	@media screen and (max-width: 650px) {
		/*ロゴマーク*/
		.inner .shop_thmb h2.ttl img{
			max-width: 65%;
			}
		/*キャッチ*/
		.inner .detail h3.chath{
			font-size: 18px;
			margin-bottom: 20px;
			}
		/*コピー*/
		.inner .detail .txt{
			font-size: 14px;
			}
		/*住所*/
		.inner .detail .add{
			font-size: 13px;
			}
		/*sns*/
		.inner .sns a{
			margin-bottom: 5px;
			}
		.inner .sns a span{
			font-size: 12px;
			margin-right: 6px;
			top: -8px;
			}
		}
	@media screen and (max-width: 600px) {
		/*ロゴマーク*/
		.inner .shop_thmb{
			margin-bottom: 35px;
			}
		/*キャッチ*/
		.inner .detail h3.chath{
			font-size: 17px;
			}
		/*コピー*/
		.inner .detail .txt{
			font-size: 13px;
			}
		/*住所*/
		.inner .detail .add{
			font-size: 12px;
			}
		.inner .sns a span{
			font-size: 11px;
			}
		}





/* ---------------------------------------------------------------------------------------------

　   footer

--------------------------------------------------------------------------------------------- */

/*-- 全体 --*/
footer#footer{}
#footer .f_block{}



/*----------

　コピーライト

----------*/

.cpright{
	width: 100%;
	padding-top: 160px;
	padding-bottom: 60px;
	text-align: center;
	}
.cpright small{
	color: #fff;
	font-size: 11px;
	letter-spacing: 1px;
	}

	@media screen and (max-width: 900px) {
		.cpright{
			padding-bottom: 40px;
			}
		.cpright small{
			font-size: 10px;
			}
		}

/* ---------------------------------------------------------------------------------------------

　   ページトップ

--------------------------------------------------------------------------------------------- */

.page-top{
	display: flex;
	justify-content: center;
	margin: 100px auto 0 auto;
	}
.page-top a{
	text-align: center;
	text-decoration: none;
	}
.page-top a .arrow-bottom{
	display: inline-block;
	width: 45px;
	height: 45px;
	margin: 0 10px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	transform: rotate(45deg);
	}
.page-top a p{
	position: relative;
	top: -18px;
	color: #fff;
	font-size: 13px;
	letter-spacing: 1px;
	}




/*-- スクロールダウン --*/
.scroll-wrap{
	position: absolute;
	top: 0;
	width: 100%;
	min-height: 100vh;
  	min-height: calc(var(--vh, 1vh) * 100);
	overflow: hidden;
	z-index: 1;
	pointer-events: none
	}
a.scroll {
	display: inline-block;
	position: absolute;
	right: 40px;
	top: 20px;
	z-index: 2;
	padding: 10px 10px 110px;
	overflow: hidden;
	color: #fff;
	font-size: 14px;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	-webkit-writing-mode: vertical-lr;
	-moz-writing-mode: vertical-lr;
	-ms-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	}
a.scroll::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 100px;
	background: #fff;
	}
a.scroll::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 100px;
	background: rgba(255, 255, 255, .4);
	}
a.scroll::after {
	height: 30px;
	-webkit-animation: sdl 1.5s ease infinite;
	-moz-animation: sdl 1.5s ease infinite;
	-ms-animation: sdl 1.5s ease infinite;
	-o-animation: sdl 1.5s ease infinite;
	animation: sdl 1.5s ease infinite;
	}
	@keyframes sdl {
		0% {
			-webkit-transform: translateY(-70px);
			-ms-transform: translateY(-70px);
			-o-transform: translateY(-70px);
			transform: translateY(-70px);
			}
		50%, 100% {
			-webkit-transform: translateY(30px);
			-ms-transform: translateY(30px);
			-o-transform: translateY(30px);
			transform: translateY(30px);
			}
		}
	@media only screen and (max-width: 800px) {
		a.scroll {
			right: 15px;
			font-size: 12px;
			}
		}
	@media only screen and (max-width: 600px) {
		a.scroll {
			right: 12px;
			top: 10px;
			padding: 10px 10px 90px;
			font-size: 11px;
			}
		a.scroll::after {
			height: 80px;
			}
		a.scroll::before {
			height: 80px;
			}
		a.scroll::after {
			height: 10px;
			-webkit-animation: sdl 1.5s ease infinite;
			-moz-animation: sdl 1.5s ease infinite;
			-ms-animation: sdl 1.5s ease infinite;
			-o-animation: sdl 1.5s ease infinite;
			animation: sdl 1.5s ease infinite;
			}
		}









.rollAnime.roll {
    transition-property: opacity,transform;
    transform: rotateY(360deg);
    transition: all .8s cubic-bezier(.77,0,.175,1);
    transition-timing-function: cubic-bezier(.77,0,.175,1);
    display: inline-block;
}





/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}