@charset "utf-8";

:root {
  --font-base: 16;
}
/* 
////--- 全体共通 ---////
*/

html {
	/* iOSなどのスマホ実機で、ホーム画面のようなヌルヌルとした軽い慣性スクロールを強制発動 */
	-webkit-overflow-scrolling: touch; 
}

main, body {
	width: 100%;
	overflow-x: hidden;
}

/* mainタグに対して、スマホで一瞬フリーズする余計なスクロールロック（バグ）を完全に解除 */
main {
	overflow: visible !important; 
}

body {
	font-family: 'Noto Serif JP', serif, "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho";
	color: #3e3a39;
	background-color: #fff;
}

/* メニューが開いている時だけスクロールを止めるためのクラス（JSで使用） */
body.is-fixed {
    overflow: hidden;
}

.pc {
	display: block;
}
.sp {
	display: none;
}

.inner {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

.inner02 {
	width: 100%;
	max-width: 1218px;
	margin: 0 auto;
}

.notice {
	font-size: 24px;
	line-height: 1.5;
}

.annotation {
	font-size: 10px;
	line-height: 1.4;
}

.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition: all 0.6s;
}

.fadein.scrollin {
  opacity : 1;
  transform : translate(0, 0);
}

.read {
  	font-size: clamp(14px, 1.1vw, 18px);
	line-height: 1.933;
	letter-spacing: 0.2em;
}

.readCenter {
  	font-size: clamp(14px, 1.1vw, 18px);
	line-height: 1.933;
	letter-spacing: 0.2em;
	text-align: center;
	margin-top: calc((40 / var(--font-base)) * 1rem);
}

.block {
	display: block;
}

.blue {
	color: #65889a;
}

.noclick {
	pointer-events: none;
	opacity: .5;
}

.nolink {
	pointer-events: none;
}

.garamond {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

img {
  width: 100%;
  height: auto;
  display: block;
}
a {
	display: block;
	text-decoration: none;
	transition: all  0.5s ease;
}

a:hover {
	opacity: .7;
	cursor: pointer;
}

.request a {
	color: #fff;
}

.reserve a {
	color: #3e3a39;
}

/* 
////--- 見出し ---////
*/

h1 {
	font-family: 'EB Garamond', serif;
	font-size: calc((50 / var(--font-base)) * 1rem);
	font-weight: 400;
	color: #fff;
	letter-spacing: 0.15em;
	line-height: 1;
	text-align: center;
}



/* 
////--- header ---////
*/
header {
	width: 100%;
	padding: 25px 30px 15px 30px;
	box-sizing: border-box;
}

.header-inner {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.header-logo img {
	width: 266px;
	height: auto;
}

.header-right {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-right: 30px; /* ボタンの横幅 30px 分 */
}

.header-copy img {
    display: block;
    width: 250px;
    height: auto;
    margin-right: 30px; 
}

/* 
////--- ハンバーガーボタン (通常時) ---////
*/
.menu-trigger {
    all: unset;
    display: block;
    width: 30px;
    height: 20px;
    cursor: pointer;
    position: fixed; 
    /* 画面右端から30pxの位置に固定 */
    top: 35px;       
    right: 30px;     
    z-index: 110;
    transition: all 0.4s ease;
}

/* --- 【重要】メニュー展開時の×印の位置固定 --- */
/* 右端から30px、上から32pxの位置へ */
.menu-trigger.is-active {
    /* position: fixed; は維持したまま、指定の座標へ移動 */
    top: 32px;  /* 35pxから32pxへ滑らかに移動 */
    right: 30px; /* 数値が変わらなければそのまま */
}

.menu-trigger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: rgba(163,157,152,1.00);
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

/* 3本の線の初期位置 */
.menu-trigger span:nth-child(1) { top: 0; }
.menu-trigger span:nth-child(2) { top: 9px; }
.menu-trigger span:nth-child(3) { bottom: 0; }

/* --- バッテン（×）のアニメーション --- */
.menu-trigger.is-active span:nth-child(1) {
    top: 9px;
    transform: rotate(34.42deg);
    background-color: #fff;
}
.menu-trigger.is-active span:nth-child(2) {
    opacity: 0;
}
.menu-trigger.is-active span:nth-child(3) {
    top: 9px;
    transform: rotate(-34.42deg);
    background-color: #fff;
}

/* 
////--- ナビゲーションメニュー本体 ---////
*/
.g-nav {
    position: fixed;
    top: 0;
    right: -375px;
    width: 375px;
    height: 100vh;
    background-image: url("../images/vertical-logo.svg");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-color: rgba(163,157,152,.9);
    transition: right 0.4s ease;
    z-index: 105;
    /* 配置を「上詰め」に変更してマージンで制御 */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 30px 40px; /* 上部のバッテンを避けるため100px確保 */
    box-sizing: border-box;
    overflow-y: auto;
}

.g-nav {
    /* 他の設定は維持 */
    padding: 80px 30px 40px; /* 上部・左右・下部のパディング */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.g-nav.is-active {
	right: 0;
}

/*.g-nav ul {
	margin: 100px auto 75px;
}*/

/* メニューリスト */
.g-nav ul:first-of-type {
    margin: 0;
    padding: 0;
    list-style: none;
}

.g-nav ul li {
    color: #fff;
    font-size: 1.06rem; /* 17px相当 */
    line-height: 2.2;
    font-family: "EB Garamond", serif;
    text-align: center;
}

.g-nav ul li a {
	color: #fff;
}

.g-nav ul li a:hover {
	color: #3e3a39;
}

/* アクションボタンエリア (資料請求・来場予約) */
.g-nav .g-nav-forAction {
    margin-top: 75px; 
    width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.g-nav .g-nav-forAction li {
    width: 170px;
    height: 35px;
    line-height: 35px;
    font-size: 12px;
    text-align: center;
    list-style: none;
}

.g-nav-forAction li:nth-child(1) {
    background-color: #221815;
    color: #fff;
    margin-bottom: 10px;
}

.g-nav-forAction li:nth-child(1) a:hover {
	background-color: #fff;
    color: #221815;
}

.g-nav-forAction li:nth-child(2) {
    background-color: #fff;
    color: #221815;
    margin-bottom: 63px; /* ボタンから下部ロゴまで（ガイドライン値） */
}

.g-nav-forAction li:nth-child(2) a {
    color: #221815;
}

.g-nav-forAction li:nth-child(2) a:hover {
    background-color: #221815;
    color: #fff;
    margin-bottom: 63px; /* ボタンから下部ロゴまで（ガイドライン値） */
}
/*
//// ↑↑ 数値の割り出し根拠 ↑↑
全体の高さ（100vh）からの逆算:
ガイドラインの図の右側のメニュー画面において、一番下のロゴのベースラインから画面端までが 40px。
///要素間の合計値:
下部ロゴの高さ：40px
最下部の余白：40px（ロゴのベースラインより下）
ボタン2（来場予約）からロゴ上端までの距離：ここがガイドライン上で明確な数字の記載がなかったため、図の比率から 「ボタンの高さ（35px）の約1.8倍程度」 と推測し、他の余白とのバランスを見て 63px と設定。
*/

/* 最下部のコピーとロゴ（高さ40px） */
.g-nav-forAction li:last-child {
    width: auto;
    height: auto;
    margin-bottom: 0;
}

.g-nav-copy {
    font-size: 10px;
    color: #fff;
    margin-bottom: 8px;
}

.g-nav-forAction li img {
    width: auto;
    height: 40px; /* ガイドラインの高さ指定 */
    margin: 0 auto;
}

.sc-grayBg {
 background-color: rgba(163,157,152,1.00);
}

/*
////footer////
*/
footer {
	width: 100%;
}

footer .hoursInfo {
	color: #fff;
	text-align: center;
	padding: calc((70 / var(--font-base)) * 1rem) 0;
}

footer .hoursInfo .hoursInfo-title {
	font-size: clamp(16px, 3.2vw, 25px);
	letter-spacing: 0.15em;
	line-height: 1.5;
	margin-bottom:  calc((35 / var(--font-base)) * 1rem);
}

footer .hoursInfo .hoursInfo-tell {
/* 【新設定】
 最小値：36px（スマホ縦画面で綺麗に1行に収まるサイズ）
 可変値：7vw  （画面幅に応じてダイナミックに伸縮）
 最大値：96px （PC大画面での圧倒的な視認性）
*/
	font-size: clamp(36px, 7vw, 90px); 
	/*font-family: 'EB Garamond', serif;ß
	font-weight: 500;  */                /* 線の美しさを際立たせる絶妙な太さ */
	letter-spacing: 0.02em;            /* 数字の間隔をカンプの高級感に合わせる */
	line-height: 1.2;
	margin-bottom: calc((35 / var(--font-base)) * 1rem); /* 下の受付時間との間隔を美しく調整 */
}

footer .hoursInfo .hoursInfo-tell a {
	color: #fff;
}

footer .hoursInfo .hoursInfo-reception {
	font-size: clamp(14px, 3.2vw, 20px);
	line-height: 1.45;
	margin-bottom:  calc((16 / var(--font-base)) * 1rem);
}

footer .hoursInfo .hoursInfo-reception span {
	display: block;
}

footer .hoursInfo .hoursInfo-annotation {
	font-size: clamp(10px, 3.2vw, 14px);
	line-height: 1.5;
}

footer .footer-btnBox {
	background-color: #fff;
}

footer .footer-forAction {
    display: flex;
    align-items: center;
	justify-content: center;
	margin: calc((35 / var(--font-base)) * 1rem) auto;
}

footer .footer-forAction li {
    width: 170px;
	height: 35px;
    font-size: calc((17 / var(--font-base)) * 1rem);
	line-height: 35px;
    text-align: center;
    list-style: none;
	box-sizing: border-box;
}

footer .footer-forAction li:nth-child(1) {
    background-color: #221815;
    color: #fff;
	margin-right: 18px;
}

footer .footer-forAction li:nth-child(1) a:hover {
    background-color: #fff;
    color: #221815;
}

footer .footer-forAction li.reserve a {
	color: #fff;
}

footer .footer-forAction li:nth-child(2) {
    background-color: rgba(163,157,152,1.00);
    color: #fff;
	margin-left: 18px;
}

footer .footer-forAction li:nth-child(2) a:hover {
    background-color: #eee;
    color: #221815;
}

footer .footer-forAction-sns {
	padding: calc((20 / var(--font-base)) * 1rem) 0;
}

footer .footer-forAction-sns img {
	width: 300px;
	height: auto;
	margin: 0 auto;
}

footer .footer-logo {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 30px 50px 50px 50px;
	box-sizing: border-box;
}

footer .footer-logoBox {
	width: 60%;
	height: auto;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	flex-shrink: 0;
	gap: 40px;
}

footer .footer-logoBox img {
	width: 167px;
	height: auto;
}

footer .footer-logoBox img.buy {
	width: 145px;
	height: auto;
}

footer .footer-copyBox {
	width: 40%;
	height: auto;
	display: flex;
	justify-content: flex-end;
	flex-shrink: 0;
}

footer .footer-copyBox img {
	width: 127px;
	height: auto;
}

footer nav.footer-navSp {
	display: none;
}

/*
////トップへ戻る////
*/
.pagetop {
	position: fixed;
	right: 57px;
	bottom: 90px;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
}

/* JSでこのクラスがついたら、ふわっと浮き上がって表示される */
.pagetop.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);  /* 元の位置に戻る */
}

.pagetop img {
	max-width: 90px;
	height: auto;
}

.pagetop a:hover {
	opacity: 1;
}

/* ipad */
@media (max-width: 768px) {
.pc {
	display: none;
}

.sp {
	display: block;
}

.inner {
	padding: 0 20px;
	box-sizing: border-box;
}

.inner02 {
	padding: 0 20px;
	box-sizing: border-box;
}

.readCenter {
  	text-align: left;
	margin-top: calc((20 / var(--font-base)) * 1rem);
}

/* 
////--- header ---////
*/
header {
	padding: 15px 15px 10px 15px;
}

.header-right {
    padding-right: 15px;
}

.header-logo img {
	width: 161px;
	height: auto;
}

.header-copy,
.header-copy img {
	display: none;
}

/* 
////--- ハンバーガーボタン (通常時) ---////
*/
.menu-trigger {
    top: 15px;       
    right: 15px;     
}

.menu-trigger.is-active {
    top: 12px;
    right: 15px;
}

/*
////Footer////
*/
footer {
	padding-bottom: 70px !important;
}

footer nav.footer-navSp {
	width: 100%;
	display: flex !important;
	justify-content: center;
	color: #fff;
	background-color: #221815;
	padding: 14px 10px;
	box-sizing: border-box;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99999;
	box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.15);
}

footer nav.footer-navSp a {
	color: #fff;
	display: block;
}

footer nav.footer-navSp a:active {
	opacity: .6;
}

footer nav.footer-navSp p {
	width: calc(100% / 5);
	max-width: 120px;               /* ★重要：タブレット横幅でもボタンが巨大化して間延びするのを防ぐブレーキ */
	border-right: solid 1px #fff;
	box-sizing: border-box;
	font-size: clamp(10px, 1.8vw, 12px); /* ★文字サイズが小さすぎたり大きすぎたりしないようclampで保護 */
	text-align: center;
	margin: 0;
}

footer nav.footer-navSp p:last-child {
	border-right: none;
}

footer nav.footer-navSp p img {
	max-width: 26px;                /* ★重要：画像の最大幅を制限して、タブレットでの巨大化を防止 */
	height: auto;
	margin: 0 auto 6px;
}

footer nav.footer-navSp p span {
	display: block;
	white-space: nowrap;            /* 文字の意図しない自動改行をガード */
}

/*
//// トップへ戻るボタンの位置調整 ////
*/
.pagetop {
	position: fixed;
	right: 20px;
	bottom: 85px !important;       /* ★768pxの段階から、固定ナビに被らない位置へ引き上げ */
}

.pagetop img {
	max-width: 50px;                /* ボタンサイズも調整 */
}

/*
////トップへ戻る////
*/
.pagetop {
	right: 30px;
}
}


/* sp */
@media (max-width: 430px) {

/*
////見出し////
*/
.page-header-outline h1 {
  font-size: calc((23 / var(--font-base)) * 1rem);
}

/*
////footer////
*/
footer {
	padding-bottom: 66px !important;
}

footer .footer-logo {
	padding: 25px 20px 30px 20px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

footer .footer-logoBox {
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: 25px;
	margin-bottom: 30px;
}

footer .footer-logoBox img {
	max-width: 100%;
	max-height: none;
}

footer .footer-logoBox img {
	width: 250px;
	height: auto;
}

footer .footer-logoBox img.buy {
	width: 217px;
	height: auto;
}

footer .footer-copyBox {
	width: 100%;
	justify-content: center;
	align-items: center;
	margin: auto;
}

footer .footer-copyBox img {
	margin: 0 auto;
}

/*
////トップへ戻る////
*/
.pagetop {
	position: fixed;
	right: 15px;
	bottom: 85px !important; /* 固定バー（高さ約66px）の少し上の位置へ避難 */
}

.pagetop img {
	max-width: 45px;
}
}