@charset "utf-8";
/* CSS Document */
/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}

html,body {
	font-size: 13px;	/*基準となるフォントサイズ*/
	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;
	font-family: "Noto Serif JP", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: var(--primary-color);		/*文字色。冒頭で指定しているprimary-colorを読み込みます。*/
	line-height: 2;		/*行間*/
}
h1{
    font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
    font-size: medium;
}
h2{
    font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
    text-align: center;
    color: #797878;
    margin-top: 30px;
}
/*画面右側の側面にある縦長ボタン（ご予約）
---------------------------------------------------------------------------*/
#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;
}
/*TOPインフォ*/
#topinfo {
    margin-top: 15px;
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 15px;
    padding: 0;	/*ロゴの幅*/
    position: relative;		/*上からの配置場所*/
    opacity: 1;
}

	/*画面幅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;
}
/*１枚目の写真*/
.list1.image1 {
	background: url("../images/1.jpg") no-repeat center center / cover;
}

/*２枚目の写真*/
.list1.image2 {
	background: url("../images/2.jpg") no-repeat center center / cover;
}

/*３枚目の写真*/
.list1.image3 {
	background: url("../images/3.jpg") no-repeat center center / cover;
}

/*４枚目の写真*/
.list1.image4 {
	background: url("../images/4.jpg") no-repeat center center / cover;
}

/*ボックス１個あたり*/
.list1 {
    padding: var(--space-large);	/*ボックス内の余白。冒頭のspace-largeを読み込みます。*/
    position: relative;
    overflow-x: hidden;
    margin-bottom: 1vw;	/*下に空けるスペース。ボックス同士の隙間です。*/
    height: 92%;
}

/*マウスオン用のアニメーション*/
.list1::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.5s 0.1s;	/*アニメーションの速度（0.5秒）と待機時間（0.1秒）。*/
}
.list1:hover::before {
	transform: translateX(100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}

/*テキストブロック*/
.list1 .text {
	position: relative;z-index: 1;
	width: 80%;		/*幅*/
	height: 100%;
	color: #fff;	/*文字色*/
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5);	/*テキストの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.3は色が30%出た状態。*/
}

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

	/*テキストブロック*/
	.list1 .text {
		width: 40%;		/*幅*/
	}

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


/*テキストの配置場所を入れ替えたい場合のスタイル。*/
.list1 .text.reverse {
	margin-left: auto;
}

/*list1内のh3見出し*/
.list1 h3 {
	margin: 0;padding: 0;
	font-weight: normal;	/*h要素のデフォルトの太字を標準に*/
	position: relative;
	font-size: 2rem;		/*文字サイズを200%*/
	letter-spacing: 0.1rem;	/*文字間隔を少しだけ広く*/
	line-height: 1.2;		/*行間を狭くする*/
}

/*list1内のh3見出し内の１文字目の大きな文字*/
.list1 h3 .large {
	font-size: 4rem;	/*文字サイズを4倍*/
}

/*見出しの右上にある英語の小さな文字*/
.list1 h3 span:not(.large) {
	font-size: 1rem;	/*文字サイズを標準に戻す*/
	opacity: 0.5;		/*透明度50%*/
	position: absolute;
	right: 0px;	/*右からの配置場所*/
	top: 0px;	/*上からの配置場所*/
}
/*テーブル設定*/
.ta3 caption {
	
    text-align: center;
    background-color: #F775DD;
    color: var(--primary-inverse-color);
    font-weight: bold;		/*太字に*/
    padding: 10px;			/*ボックス内の余白*/
}

/*ta3設定*/
.ta3 {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース*/
	font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
	text-align: center;		/*センタリング*/
	background: #fff;		/*背景色*/
	color: #797878;			/*文字色*/
}
.ta3, .ta3 td, .ta3 th {
	word-break: break-all;
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
}

/*プラン項目*/
.ta3 th {
    background-color: #E9C3F5;
}
/*faqブロック全体*/
.faq {
	background: #5E5C5A;	/*背景色*/
	color: #fff;			/*文字色*/
	position: relative;
}

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

	.faq {
		display: flex;
		flex-direction: row-reverse;	/*左右の並びをデフォルトと逆に*/
		justify-content: space-between;
	}

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


/*faq内のh2見出し*/
.faq h2 {
	margin: 0;padding: 0;
	font-size: 2rem;	/*文字サイズを2倍*/
	font-weight: 200;	/*文字を細く*/
	letter-spacing: 0.4em;	/*文字間隔を広くする*/
}

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

	/*faq内のh2見出し*/
	.faq h2 {
		writing-mode: vertical-lr;	/*日本語は縦書き。英語は90度回転。*/
		margin-right: 18vw;	/*右側に画面18%程度のスペースを空ける。そこに英語の飾り文字を入れる為。*/
	}

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


/*右側の英語の飾り文字*/
.faq h2 .kazari {
	line-height: 1;
	font-size: 0.9rem;	/*文字サイズ90%*/
}

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

	/*右側の英語の飾り文字*/
	.faq h2 .kazari {
		font-size: 20vw;	/*文字サイズ*/
		position: absolute;
		right: 0px;
		top: var(--space-large);
    	color: rgba(255,255,255,0.05);	/*文字色。255,255,255は白のことで、0.05は色が5%出た状態。*/
	}

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


/*質問*/
.faq dt {
	font-size: 1.3rem;	/*文字サイズ130%*/
	border-top: 1px solid rgba(255,255,255,0.2);	/*上の線の幅、線種、色。255,255,255は白のことで、0.2は色が20%出た状態。*/
	padding: 2rem 0 1rem 0;	/*上、右、下、左への余白*/
}

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

	.faq dt {
		padding: 2rem 2rem 1rem 2rem;	/*上、右、下、左への余白*/
	}

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


/*回答*/
.faq dd {
	padding: 0 0 2rem 0;	/*上、右、下、左への余白*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

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

	.faq dd {
		padding: 0 2rem 2rem 2rem;	/*上、右、下、左への余白*/
	}

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


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

	/*左側のテキストブロック*/
	.faq .text {
		width: 50%;	/*幅*/
	}
	
	}/*追加指定ここまで*/
/*フッター設定
---------------------------------------------------------------------------*/
footer a {color: inherit;text-decoration: none;}
footer small {font-size: 100%;}

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

	/*画面幅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.1em;}
.color-check, .color-check a {color: #F775DD !important;}