@charset "utf-8";

/* ==============================================
common
============================================== */

html {
	font-size: 62.5%;
}

/* 全要素で概ね共通する値を抜き出す */
body {
	font-family:
		/* 名前にスペース、数字、ハイフン以外の区切り文字を含む
		　　フォントファミリー名は引用符でくくる */
		"Zen Kaku Gothic New",
		'Noto Sans JP',
		Arilal,
		sans-serif;
	font-weight: 400;
	font-style: normal;
	/* 斜体など */
	color: #232D42;
	background-color: #CABCB5;
	/* background-color: pink; */
	line-height: 1.8;

	min-width: 350px;
}

img {
	/* 
		max-width: 100%; 
			親要素の横幅 100% まで広がる
			画像の元サイズ以上には広がらない
				指定されている数値とは無関係
				50% にしても、画像の元サイズまで広がる
		width: 100%; 
			親要素の横幅 100% まで広がる
			画像の元サイズ以上に広がる
	*/
	max-width: 100%;
	/* width: 100%; */

	height: auto;
}

.for__PC {
	display: none;
}
.for__SP {
	display: block;
}
/* ---------- PC ---------- */
@media screen and (min-width:769px) {
	.for__PC {
		display: block;
	}
	.for__SP {
		display: none;
	}
}

/* --------------------------------------
button
-------------------------------------- */

/* button primary */

.btn__primary {
	background: #232D42;
	border: 1px solid #FFF;
	box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.20);

	box-sizing: border-box;
	height: 58px;
	padding: 12px 16px;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
}
.btn__primary:hover {
	background: #3C465B;
}

.btn__primary__icon {
	width: auto;
	height: 100%;
}

.btn__primary__txt {
	display: inline-block;
	text-align: center;

	color: #FFF;
	font-family: "Zen Old Mincho";
	font-size: 2.0rem;
	font-weight: 900;
	line-height: 1.0;
}



/* button secondary */

.btn__secondary {
	background: transparent;
	border: 1px solid #232D42;

	box-sizing: border-box;
	height: 56px;
	padding: 12px 16px;

	display: flex;
	justify-content: center;
	align-items: center;

	position: relative;
}
.btn__secondary:hover {
	border: 1px solid #3C465B;
}



.btn__secondary__icon {
	width: 32px;
	height: 32px;

	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
}

.btn__secondary__txt {
	display: inline-block;
	text-align: center;

	color: #232D42;
	font-family: "Zen Old Mincho";
	font-size: 2.0rem;
	font-weight: 900;
	line-height: 1.0;
}
.btn__secondary:hover .btn__secondary__txt {
	color: #3C465B;
}


/* button teritiary */
.btn__tertiary {
	box-sizing: border-box;
	height: 56px;
	padding: 12px 0 12px 16px;

	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}
.btn__tertiary:hover {
	color: #3C465B;
}

.btn__tertiary span {
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.0;
}



/* ---------- PC ---------- */
@media screen and (min-width:769px) {

	.btn__primary {
		padding: 12px 20px;
	}

	.btn__secondary {
		padding: 12px 20px;
	}
	.btn__tertiary {
		padding: 12px 0 12px 20px;
	}

	.btn__tertiary span {
		font-size: 2.0rem;
	}


}



/* --------------------------------------
background
-------------------------------------- */

.bgPattern {
	width: 200px;
	height: 400px;

	position: absolute;
	z-index: 1;

	background-image: url(../img/pattern_01.svg);
	background-repeat: repeat;
}

.bgPattern__red {
	width: 100px;
	height: 200px;

	position: absolute;
	z-index: 1;

	background-image: url(../img/pattern_02.svg);
	background-repeat: repeat;
}

/* ---------- PC ---------- */
@media screen and (min-width:769px) {
	.bgPattern {
		width: 248px;
		height: 498px;
	}

	.bgPattern__red {
		width: 248px;
		height: 298px;
	}

}



/* ==============================================
header
============================================== */

.header {
	width: 100%;
	height: 80px;
	background-color: #232D42;

	position: fixed;
	left: 0;
	top: 0px;
	/* transform: translateX(-50%); */
	z-index: 50;
}

.contentsArea__header {
	padding: 0 20px;
	width: 100%;
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: space-between;
}



.header__logo {
	padding: 8px 0 8px 0;
	height: 100%;
}

.img_logo {
	height: 100%;
	width: auto;
}

.btn__menu {
	display: block;

	width: 40px;
	height: 40px;

	/* 
	nav_list も含まれていても、
	display: flex でレイアウトがおかしくならないので、
	position 指定は不要そう

	position: absolute;
	top: 20px; 
	right: 5%; 
	*/

	/* マウスホバー時にカーソルを手の形に */
	cursor: pointer;
}


.nav {
	background-color: rgba(35, 45, 66, 0.90);
	width: 100%;
	height: 100vh;

	position: fixed;
	left: 0;
	top: 0;

	padding: 0 5% 40px;
	z-index: 100;

	display: flex;
	flex-direction: column;


	/* 左外側に配置 */
	transform: translateX(-100%);

	/* 
	ゆっくり変化
	transform に対してのみ有効にする
	*/
	transition: transform 0.4s;
}

.nav.active {
	transform: translateX(0%);
}


.nav__header {
	box-sizing: border-box;
	height: 80px;
	padding: 20px 0;

	/* 縦幅固定 */
	flex-shrink: 0;

	display: flex;
	justify-content: flex-end;
	align-items: center;

	cursor: pointer;
}


.nav__list {
	/* 縦幅可変 */
	flex-grow: 1;
	overflow: auto;
}

.nav__item {
	margin-top: 40px;
	/* height: 3.0rem; */

	color: #FFF;

	font-family: "Zen Old Mincho";
	font-size: 2.0rem;
	font-weight: 900;
	line-height: 1.0;
}
.nav__item:hover {
	color: #D9D9D9;
}

.nav__footer {
	/* 縦幅固定 */
	flex-shrink: 0;
}

/* CTA */
.btn__cta {
	width: auto;
	height: 58px;

	position: fixed;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	z-index: 50;
}

/* ---------- PC ---------- */
@media screen and (min-width:769px) {
	.header {
		height: 100px;
	}

	.contentsArea__header {
		padding: 0 20px;
		margin: 0 auto;
		max-width: 1040px;

		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header__logo {
		padding: 8px 0 8px 0;
		height: 100%;
	}

	.img_logo {
		height: 100%;
		width: auto;
	}

	.btn__menu {
		display: none;
	}

	.nav {
		background: transparent;
		/* width: auto;  
		height: auto; */
		width: 100%;
		height: 100%;

		padding: 0;

		/* fixed を解除 */
		position: static;

		/* 元の位置に戻す */
		transform: translate(0);


		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.nav__header {
		display: none;
	}

	.nav__list {
		display: flex;
		align-items: center;
		justify-content: space-between;

		max-width: 660px;
	}

	.nav__item {
		margin-top: 0px;
	}

	.nav__footer {
		display: none;
	}

	.btn__cta {
		width: auto;
		height: 58px;

		transform: translate(0);
		left: auto; /* left:50% のクリア */
		right: 10px;
		top: 110px;
	}

}


/* ==============================================
main
============================================== */



/* --------------------------------------
transition
-------------------------------------- */


.load-fade {
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
  transform: translateY(150px);
}

.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --------------------------------------
article 
-------------------------------------- */

.article__header__topImage {
	width: 100%;
	height: 205px;

	background-size: cover;
	background-repeat: no-repeat;

	display: flex;
	justify-content: center;
	align-items: center;
}

/* ---------- PC ---------- */
@media screen and (min-width:769px) {
	.article__header__topImage {
		width: 100%;
		height: 300px;
	}
}


/* --------------------------------------
section 
-------------------------------------- */

.section__heading {
	font-family: "Zen Old Mincho";
	font-size: 2.8rem;
	font-weight: 900;
	line-height: normal;

	text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.section__heading__right {
	text-align: right;
}

.section__heading__topImage {
	color: #FFF;
	text-shadow: 0 0 16px #232D42;

	font-family: "Zen Old Mincho";
	font-size: 2.8rem;
	font-weight: 900;
	line-height: normal;
}

.subsection__heading {
	font-size: 2.0rem;
	font-weight: 500;
	line-height: normal;
}

.section__txt {
	margin-top: 20px;

	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.8;
}

.section__txt__right {
	text-align: right;
}


/* ---------- PC ---------- */
@media screen and (min-width:769px) {
	.section__heading {
		font-size: 3.6rem;
	}
	.subsection__heading {
		font-size: 2.4rem;
	}
	.section__txt {
		margin-top: 40px;
		font-size: 2.0rem;
	}

	.brSP {
		display: none;
	}

}


/* --------------------------------------
reservation
-------------------------------------- */

.section__reservation {
	background-color: #CABCB5;

	position: relative;
	overflow: hidden;
}

.contentsArea__reservation {
	padding: 60px 20px;

	position: relative;
	z-index: 2; 
} 

.section__heading__reservation {
	text-align: center;
}

.reservation__wrap {
	margin-top: 80px;
	position: relative;
	z-index: 2;
}


.btn__reservation {
	margin-top: 20px;
}

.phoneNumber {
	margin-top: 20px;
	text-align: center;

	font-size: 2.0rem;
	font-weight: 500;
	line-height: normal;
}

.btn__footerInfo {
	margin-top: 80px;
}

.bgPattern__primary__01 {
	right: 0;
	top: 0;
}

.bgPattern__primary__02 {
	left: 0;
	bottom: 0;
}



/* ---------- PC ---------- */
@media screen and (min-width:769px) {
	
	.contentsArea__reservation {
		padding: 120px 20px;
		margin: 0 auto;
		max-width: 1040px;
	} 

	.reservation__wrap {
		width: 100%;
		display: flex;
		justify-content: center;
		gap: 20px;
		align-items: flex-start;
	}

	.btn__reservation {
		margin-top: 0px;
		width: 360px;
	}

	.phoneNumber {
		margin-top: 20px;

		font-size: 2.4rem;
		font-weight: 500;
	}

	.btn__footerInfo {
		margin-top: 0px;
		width: 360px;
	}

}


/* --------------------------------------
breadcrumbs
-------------------------------------- */


.breadcrumbs {
	margin-top: 40px;

	display: flex;
	justify-content: left;
	align-items: center;
	gap: 10px;

	position: relative;
	z-index: 2;
}

.breadcrumbs__item {
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.8;
}

/* ---------- PC ---------- */
@media screen and (min-width:769px) {
	.breadcrumbs {
		margin-top: 80px;
	}

	.breadcrumbs__item {
		font-size: 1.8rem;
	}

}


/* --------------------------------------
access
-------------------------------------- */

.section__access {
	background-color: #232D42;
}

.contentsArea__access {
	padding: 60px 0px 0px;

	position: relative;
	z-index: 2;
}

.section__heading__access {
	color: #FFF;

	padding: 0 20px;
	text-align: center;
}

.map {
	margin-top: 40px;
	width: 100%;
	height: 300px;
}


.address {
	padding: 0 20px;
}

.address__txt {
	text-align: left;
	color: #FFF;
}




/* ---------- PC ---------- */
@media screen and (min-width:769px) {
	.contentsArea__access {
		padding: 120px 0px 0px;
		margin: 0 auto;
		max-width: 1040px;
	}

	.section__heading__access {
		padding: 0 20px;
	}

	.map {
		width: 100%;
		height: 600px;
	}

	.address {
		padding: 0 20px;
	}

}

/* ==============================================
footer
============================================== */

.section__footer {
	background-color: #232D42;
}

.contentsArea__footer {
	padding: 60px 20px 100px;
	position: relative;
	z-index: 2;
}

.footer__img {
	box-sizing: border-box;
	border: 2px solid #FFF;

	width: 100%;
}

.footer__img img {
	width: 100%;
}

.footer__img__pc {
	display: none;
}

.footer__heading {
	margin-top: 40px;
	color: #FFF;
	font-family: "Zen Old Mincho";
	font-size: 2.8rem;
	font-weight: 900;
	line-height: normal;
	text-align: center;
}

.footerInfo {
	margin-top: 40px;
	color: #FFF;
}

.footerInfo__item {
	text-align: left;

	color: #FFF;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.8;
}

.footerInfo__item__address {
	margin-top: 40px;
}

.footerInfo__item__phoneNumber {
	margin-top: 10px;
}

.footerInfo__item__open {
	margin-top: 40px;
}

.footerInfo__item__close {
	margin-top: 40px;
}

.copy__wrap {
	margin-top: 40px;
	text-align: center;
}

.copy {
	color: #FFF;

	font-family: "Zen Old Mincho";
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.8;
}

/* ---------- PC ---------- */
@media screen and (min-width:769px) {

	.contentsArea__footer {
		padding: 80px 20px 120px;

		margin: 0 auto;
		max-width: 1040px;
	}
	.footer__img__pc {
		display: block;
	}
	.footer__img__sp {
		display: none;
	}

	.footer__heading {
		font-size: 3.6rem;
	}

	.footerInfo {
		margin-top: 40px;
	}

	.footerInfo__item {
		font-size: 1.8rem;
	}

	.footerInfo__item__address {
		margin-top: 0px;
	}

	.footerInfo__item__phoneNumber {
		margin-top: 20px;
	}

	.footerInfo__item__open {
		margin-top: 40px;
	}

	.footerInfo__item__close {
		margin-top: 40px;
	}

	.copy {
		font-size: 1.8rem;
	}

}