/* =========================================================
   キャレット 共通スタイル（Studio の実測値で再現）
   画面幅の切り替え：1140 / 990（左メニュー → 上の帯） / 690（スマホ） / 360
   ページごとのスタイルは assets/css/page-○○.css
   ========================================================= */
:root {
	--navy: #67729d;      /* 文字・見出しの紺 */
	--pink: #f9d3cd;      /* ボタン・予約の丸の薄ピンク */
	--salmon: #ff8272;    /* ロゴ CARETTE */
	--coral: #f4a99d;
	--beige: #caa97f;
	--gray-bg: #eeeeee;
	--text: #333333;
	--serif: "Noto Serif JP", serif;
	--mont: "Montserrat", sans-serif;
	--lato: "Lato", sans-serif;
	--open: "Open Sans", sans-serif;
	--hira: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W6", "Hiragino Sans", "Noto Sans JP", sans-serif;
	--side: 180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--text); font-family: var(--serif); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
button { font: inherit; }
.ct-page { position: relative; overflow: clip; min-height: 100vh; }
.ct-main { display: block; }

/* ---------- ロゴ（文字） ---------- */
.ct-logo { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 20px 0; }
.ct-logo__sub { font-family: var(--open); font-weight: 700; font-size: 10px; line-height: 10px; letter-spacing: .15em; color: var(--navy); }
.ct-logo__main { font-family: var(--mont); font-weight: 900; font-size: 18px; line-height: 18px; letter-spacing: .3em; color: var(--salmon); }

/* ---------- 左メニュー（PC） ---------- */
.ct-side { position: fixed; top: 0; left: 0; bottom: 0; width: var(--side); z-index: 3; }
.ct-side__in { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; background: #fffefe; }
.ct-side__logo { width: 100%; margin-top: 20px; }
.ct-side__nav { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 40px; flex: 1 1 0; }
.ct-side__link { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 70px; padding: 20px 0; border-bottom: 2px dashed var(--gray-bg); transition: opacity .3s; }
.ct-side__en { font-family: var(--mont); font-weight: 700; font-size: 14px; line-height: 14px; letter-spacing: .5em; margin-right: -.5em; color: var(--navy); }
.ct-side__ja { margin-top: 4px; font-family: var(--open); font-weight: 700; font-size: 10px; line-height: 10px; letter-spacing: .15em; color: var(--navy); }
@media (hover: hover) { .ct-side__link:hover, .ct-logo:hover { opacity: .6; } }

/* ---------- 上の帯（990px 以下） ---------- */
.ct-spbar { display: none; }
.ct-burger { all: unset; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 34px; height: 70px; margin-right: 24px; }
.ct-burger span { display: block; width: 34px; height: 3px; background: var(--pink); transition: transform .3s, opacity .3s; }
.ct-burger span + span { margin-top: 8px; }

/* ---------- 予約の丸（右下に固定） ---------- */
.ct-reserve { position: fixed; right: 60px; bottom: 60px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 180px; height: 180px; border-radius: 50%; background: var(--pink); box-shadow: 0 2px 5px rgba(0,0,0,.2); color: var(--navy); font-family: var(--lato); font-weight: 700; text-align: center; transition: opacity .3s; }
.ct-reserve__ja { font-size: 15px; line-height: 21px; letter-spacing: .2em; }
.ct-reserve__en { font-size: 20px; line-height: 28px; letter-spacing: .2em; }
@media (hover: hover) { .ct-reserve:hover { opacity: .8; } }

/* ---------- フッター ---------- */
.ct-foot { display: flex; justify-content: center; padding-left: var(--side); background: #fff; color: var(--navy); }
.ct-foot__in { display: flex; flex-direction: column; align-items: center; width: calc(100% - 160px); max-width: 932px; margin: 0 80px; }
.ct-foot__logo { align-self: flex-start; margin-top: 60px; }
.ct-logo--foot { align-items: flex-start; }
.ct-logo--foot .ct-logo__sub { font-size: 15px; line-height: 15px; letter-spacing: .15em; }
.ct-logo--foot .ct-logo__main { font-size: 24px; line-height: 24px; letter-spacing: .3em; }
.ct-foot__row { display: flex; align-items: center; gap: 10px; align-self: stretch; margin-bottom: 30px; }
.ct-foot__addr { display: flex; flex-direction: column; align-items: flex-start; width: 277px; font-weight: 500; }
.ct-foot__zip, .ct-foot__tel { font-size: 14px; line-height: 19.6px; letter-spacing: .2em; }
.ct-foot__pref { font-size: 16px; line-height: 22.4px; letter-spacing: .2em; margin-bottom: 15px; }
.ct-foot__sns { display: flex; align-items: center; justify-content: center; gap: 10px; width: 220px; height: 64px; padding: 20px 40px; border-radius: 4px; background: var(--pink); box-shadow: 3px 3px 0 rgba(0,0,0,.2); font-weight: 500; font-size: 16px; line-height: 22.4px; letter-spacing: .2em; transition: opacity .3s; }
.ct-foot__sns i { font-size: 21px; width: 21px; text-align: center; }
@media (hover: hover) { .ct-foot__sns:hover { opacity: .7; } }
.ct-foot__copy { margin-bottom: 30px; font-weight: 500; font-size: 10px; line-height: 14px; text-align: center; }

/* ---------- 表示アニメーション（Studio の appear） ----------
   .ap を付けた要素が画面に入ると .is-in が付いて、下から20pxふわっと出る。
   遅れは data-ap="200"（ms）。.ap-fade は位置を動かさず 1.2秒かけて出す。 */
.ap { opacity: 0; translate: 0 20px; transition: opacity .8s, translate .8s; }
.ap-fade { opacity: 0; transition: opacity 1.2s cubic-bezier(.445,.05,.55,.95); }
.ap.is-in { opacity: 1; translate: 0 0; }
.ap-fade.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ap, .ap-fade { opacity: 1; translate: none; transition: none; } }

/* ---------- 共通：セクション（PC は左メニューの分だけ右へずらす。背景は画面の左端まで） ---------- */
.ct-sec { padding-left: var(--side); }
@media (max-width: 990px) { .ct-sec { padding-left: 0; } }

/* ---------- 共通：セクション見出し（CONCEPT・MENU など） ---------- */
.ct-h2 { font-family: var(--mont); font-weight: 600; font-size: 40px; line-height: 40px; letter-spacing: .15em; color: var(--navy); text-align: center; }

/* =========================================================
   990px 以下：左メニューを隠し、上の帯＋全画面メニューに
   ========================================================= */
@media (max-width: 990px) {
	.ct-spbar { position: fixed; top: 0; left: 0; right: 0; z-index: 4; display: flex; justify-content: space-between; align-items: center; height: 82px; background: #fff; }
	.ct-burger { height: 82px; }
	.ct-spbar__logo { margin-left: 30px; }
	.ct-side { display: none; width: auto; right: 0; z-index: 5; }
	body.is-menu-open { overflow: hidden; }
	body.is-menu-open .ct-side { display: block; }
	.ct-side__in { overflow-y: auto; }
	.ct-side__logo { margin-top: 40px; }
	.ct-side__nav { flex: none; margin-top: 20px; padding: 0 20px; }
	.ct-main { padding-top: 0; }
	.ct-foot { padding-left: 0; }
	.ct-foot__in { width: calc(100% - 60px); max-width: none; margin: 0 30px; align-items: flex-start; }
	.ct-foot__row { margin-bottom: 0; }
	.ct-foot__addr { width: 211px; }
	.ct-foot__sns { width: 195px; }
	.ct-foot__copy { align-self: center; margin: 60px 0 30px; }
	.ct-reserve { width: 140px; height: 140px; }
}

/* =========================================================
   690px 以下：スマホ
   ========================================================= */
@media (max-width: 690px) {
	.ct-spbar, .ct-burger { height: 70px; }
	.ct-reserve { right: 30px; bottom: 30px; width: 100px; height: 100px; }
	.ct-reserve__ja { font-size: 10px; line-height: 14px; }
	.ct-reserve__en { font-size: 13px; line-height: 18.2px; }
	.ct-h2 { font-size: 32px; line-height: 32px; }
	.ct-foot { padding: 0 30px; }
	.ct-foot__in { width: 100%; margin: 0; padding-top: 30px; align-items: flex-start; }
	.ct-foot__logo { margin-top: 0; }
	.ct-foot__row { flex-direction: column; align-items: flex-start; gap: 10px; margin: 12px 0 23px; }
	.ct-foot__addr { width: auto; }
	.ct-foot__pref { font-size: 14px; line-height: 19.6px; }
	.ct-foot__tel { margin-top: 14px; font-size: 16px; line-height: 22.4px; }
	.ct-foot__sns { width: 195px; font-size: 14px; }
	.ct-foot__sns:first-of-type { margin-top: 30px; }
	.ct-foot__copy { align-self: center; margin: 50px 0 23px; }
}