@import url('https://fonts.googleapis.com/css?family=BioRhyme+Expanded');
/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}

html,body {
	font-size: 14px;	/*基準となるフォントサイズ*/
	height: 100%;
}

	/*画面幅1200px以上の追加指定*/
	@media screen and (min-width:1200px) {

	html, body {
		font-size: 14px;
	}

	}/*追加指定ここまで*/

	/*画面幅1600px以上の追加指定*/
	@media screen and (min-width:1600px) {

	html, body {
		font-size: 1vw;
	}

	}/*追加指定ここまで*/


body {
    margin: 0;
    padding: 0;
    background: #fff;	/*背景色*/
    line-height: 2;		/*行間*/
    letter-spacing: normal;
}
h1{
    opacity: 1;
    font-size: medium;
}
h2{
    font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
    text-align: center;
    color: #797878;
    margin-top: 30px;
}
span{
    border-bottom-style: inset;
}
.c-g{color: #0DC334;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.small {font-size: 80%;}
.large {font-size: 130%; letter-spacing: 0.1em;}

/*画面右側の側面にある縦長ボタン（ご予約）
---------------------------------------------------------------------------*/
#btn-special {padding: 0;margin: 0;}
#btn-special a {
	display: block;text-decoration: none;
	position: fixed;z-index: 100;
	right: 0px;	/*右からの配置場所*/
	top: 20vw;	/*上からの配置場所*/
	writing-mode: vertical-rl;
	text-orientation: upright;
	/*background: linear-gradient(#906f53, #6b5038);背景グラデーション*/
	background: linear-gradient(#ec9347, #d36b12);
	color: #f6ebd2;	/*文字色*/
	padding: 2rem 1rem;	/*上下、左右へのボタン内の余白*/
	border-radius: 3px 0px 0px 3px;	/*角を丸くする指示。左上、右上、右下、左下への順番。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}
/*画像全般の設定*/
img {
    border: none;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
/*インフォ*/
#infotitl {
    margin-top: 15px;
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 15px;
}

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {
	
	#logo {
		top: 0;			/*上からの配置場所*/
		width: 60px;	/*ロゴの幅*/
	}

	}
/*section*/
section {
    overflow-x: hidden;
    padding: var(--space-large);
    margin-left: 30px;
    margin-right: 30px;
}
/*list-c2-parts（お問い合わせ、オンラインショップ）
---------------------------------------------------------------------------*/
.list-c2-parts > a {
    text-decoration: none;
    display: block;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	/*２つのボックスを囲むボックス*/
	.list-c2-parts {
		display: flex;	/*横並びにする*/
	}

	}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list-c2-parts .list-parts {
	text-align: center;
	position: relative;
	overflow-y: hidden;
	color: #fff;		/*文字色*/
	padding: 5rem 2rem;	/*上下、左右へのボックス内の余白*/
	margin: 1rem 0;		/*上下、左右へのマージン*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {
	
	.list-c2-parts > * {
		flex: 1;
	}
	.list-c2-parts .list-parts {
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.list-c2-parts > a .list-parts {
		height: 100%;
	}

	}/*追加指定ここまで*/


/*左側ボックスの背景*/
.list-c2-parts .list-parts.image1-parts {
	background: url("../images/1.jpg") no-repeat center center / cover;
}
/*右側ボックスの背景*/
.list-c2-parts .list-parts.image2-parts {
	background: url("../images/2.jpg") no-repeat center center / cover;
}

/*h4見出し*/
.list-c2-parts h4 {
	font-weight: 200;	/*細字にする*/
	line-height: 1.2;	/*行間を狭く*/
}

/*h4見出し内のメインテキスト（main-text-parts）*/
.list-c2-parts h4 .main-text-parts {
	display: block;
	font-size: 3rem;		/*文字サイズ。3倍。*/
	padding-top: 1.5rem;	/*上に空ける余白*/
	padding-bottom: 3rem;	/*下に空ける余白*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	.list-c2-parts h4 .main-text-parts {
		font-size: 4rem;	/*文字サイズ。4倍。*/
	}

	}/*追加指定ここまで*/


/*h4見出し内のサブテキスト（sub-text-parts）*/
.list-c2-parts h4 .sub-text-parts {
	position: relative;
	padding: 0 5rem;	/*上下、左右への余白設定ですが、両サイドのラインの配置にも影響します。お好みで。*/
}
/*h4見出し内のサブテキストの左右のライン*/
.sub-text-parts::before {left: 0;}
.sub-text-parts::after {right: 0;}
.list-c2-parts h4 .sub-text-parts::before,.list-c2-parts h4 .sub-text-parts::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 2rem;	/*線の長さ*/
	border-top: 1px solid #fff;	/*ラインの幅、線種、色*/
}

/*見出しの下の説明テキスト*/
.list-c2-parts .list-parts .text-parts {
	position: relative;z-index: 1;
	font-size: 0.85rem;	/*文字サイズ85%*/
}

/*マウスオン用のアニメーション*/
.list-c2-parts .list-parts::before {
	content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.3s 0.1s;	/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
}
.list-c2-parts .list-parts:hover::before {
	transform: translateY(100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}

/*フッター設定
---------------------------------------------------------------------------*/
footer a {color: inherit;text-decoration: none;}
footer small {font-size: 100%;}

footer {
	background: #000;	/*背景色*/
	color: #fff;			/*文字色*/
	position: relative;
	font-size: 0.85rem;	/*文字サイズ85%*/
	padding: 3vw;		/*余白*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	footer {
		display: flex;
		justify-content: space-between;
	}

	}/*追加指定ここまで*/



/*ロゴが入ったブロック*/
footer .image {
	width: 200px;	/*ボックス幅*/
	text-align: center;	/*中身をセンタリング*/
}

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {

	footer .image {
		width: auto;	/*ボックス幅*/
	}
	footer .image img {
		width: 80px;
	}

	}/*追加指定ここまで*/

/*ロゴ*/
footer .logo {
	opacity: 0.5;	/*透明度。色を50%だけ出す設定。全部出したいならこの１行は削除。*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	footer .text {
		display: flex;	/*CompanyとFollow Usを横並びにする*/
		gap: 5rem;	/*CompanyとFollow Usの間の余白。５文字分。*/
	}

	}/*追加指定ここまで*/


/*h4見出し（CompanyとFollow Usのテキスト部分*/
footer h4 {
	font-weight: 200;	/*太さを細くする*/
	font-size: 1.2rem;	/*文字サイズを120%*/
}
/*フッター内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	align-self: center;
	gap: 1rem;	/*アイコン同士のマージン的な要素。１文字分。*/
}
.icons i {
	font-size: 30px;	/*アイコンサイズ*/
}
/*その他の設定*/
.small {font-size: 0.75em;}
.large {
    font-size: 2em;
    letter-spacing: 0.1%;
}
.color-check, .color-check a {color: #F775DD !important;}
@media (min-width: 500px) {
a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
}
}