/*
 * デザインパターンの差分をまとめるファイル。
 * body(または要素)の id を #design01〜#design05 に切り替えると
 * サイト全体の見た目が変わる。HTML構造・common.css は一切変更しない。
 *
 * 基本方針：
 * 1. 色・フォント・余白などは CSS変数（トークン）として各 #designXX ブロックにまとめる
 * 2. 変数だけで表現できない構造的な差分（見出しの装飾・アイコンの見せ方・カードの縁取りなど）に限り、
 *    「#designXX .xxx { ... }」の形でピンポイントに上書きする
 * 3. 案件固有の特殊調整はこのファイル末尾の project overrides に追記し、他デザインに影響させない
 *
 * design01 Simple      … シンプル（黒×白のモノトーン、ひし形のワンポイントのみ）
 * design02 Luxury      … 高級・スタイリッシュ（ベージュ×ゴールド×ローズ、明朝＋欧文セリフ＋筆記体、角丸なし）
 * design03 Natural     … やわらかい・ナチュラル（クリーム×セージグリーン、丸ゴシック、大きな角丸・ピル型ボタン）
 * design04 Professional… 信頼・専門的（ネイビー×白、太めの見出し、塗りつぶし円アイコン、カード上部アクセントライン）
 * design05 Pop         … ポップ・アクティブ（ピンク×ラベンダー、丸ゴシック、コミック風の縁取り＋オフセットシャドウ）
 *
 * トークン一覧（役割ベースの命名。各 #designXX ブロック内で必ず全16個を定義する）：
 * --color-surface / --color-surface-tint      … ページ全体の下地色 / セクションの色分け用tint背景
 * --color-text-primary / --color-text-muted   … 本文・見出しの基本文字色 / キャプション等の控えめな文字色
 * --color-border                               … 罫線・区切り線の色
 * --color-accent / --color-accent-light / --color-accent-pale … ブランドアクセント色（標準／明るいtint／淡い背景用）
 * --color-cta / --color-cta-hover              … 予約・問い合わせボタン等CTAの色（通常／hover）
 * --font-heading / --font-heading-en           … 和文見出しフォント / 欧文見出し・装飾フォント
 * --font-script                                … ヒーローのロゴ的装飾に使う筆記体・装飾フォント（多くの場合 --font-heading-en を再利用）
 * --font-base                                  … 本文フォント
 * --container-gutter / --container-width       … コンテナの左右パディング / コンテナ最大幅
 *
 * 互換トークン（common.css冒頭の旧汎用ブロックが参照。値は上記トークンへのエイリアス）：
 * --color-main / --color-sub                   … CTA色 / アクセント色のエイリアス
 * --color-bg / --color-text                    … ページ背景・文字色のエイリアス
 * --color-tint-bg / --color-surface-text       … セクションtint背景と、その上の文字色のエイリアス
 * --color-white                                … カード等の面色
 * --color-news-bg / --color-news-text          … NEWSバー専用の配色
 * --color-footer-bg / --color-footer-text      … フッター専用の配色（新footer実装は背景を#fff固定のため実質未使用）
 */

/* ==========================================================
   design01 Simple（シンプル）
   ========================================================== */
#design01 {
  --color-surface: #FFFFFF;
  --color-surface-tint: #F6F6F4;
  --color-text-primary: #222222;
  --color-text-muted: #8F8F8F;
  --color-border: #E2E2DF;
  --color-accent: #4A4A4A;
  --color-accent-light: #C9C9C6;
  --color-accent-pale: #F3F3F1;
  --color-cta: #1A1A1A;
  --color-cta-hover: #000000;
  --font-heading: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-heading-en: "Jost", sans-serif;
  --font-script: var(--font-heading-en);
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --container-gutter: clamp(18px, 4.4vw, 60px);
  --container-width: 1120px;

  --color-main: var(--color-cta);
  --color-sub: var(--color-accent);
  --color-bg: var(--color-surface);
  --color-tint-bg: var(--color-surface-tint);
  --color-text: var(--color-text-primary);
  --color-white: #ffffff;
  --color-surface-text: var(--color-text-primary);
  --color-news-bg: var(--color-accent-pale);
  --color-news-text: var(--color-text-primary);
  --color-footer-bg: #ffffff;
  --color-footer-text: var(--color-text-primary);
}

/* ひし形のワンポイント（見出しの装飾を最小限に） */
#design01 .sec-head h2,
#design01 .linkband h2 {
  position: relative;
  padding-bottom: 18px;
}

#design01 .sec-head h2::after,
#design01 .linkband h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--color-accent);
}

/* 装飾を最小限にするため、写真の角飾りは非表示 */
#design01 .portrait::after {
  display: none;
}

/* ヒーローの筆記体ロゴ風ウォーターマークは、モノトーンに合わせグラデーションをやめ薄いフラット色に */
#design01 .hero-script {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--color-accent);
  opacity: .35;
}

/* 初回クーポン：アーチ（H）。上部半円のパネルにバッジと本文を統合する */
#design01 .coupon-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-accent-light);
  border-radius: 999px 999px 4px 4px;
  padding: clamp(34px, 5vw, 46px) clamp(16px, 2.6vw, 24px) clamp(22px, 3.2vw, 30px);
}

#design01 .coupon-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--color-accent-pale);
  border-radius: 999px 999px 3px 3px;
}

#design01 .badge-jp {
  display: none;
}

#design01 .badge-en {
  position: relative;
}

#design01 .coupon-body {
  position: relative;
  margin-top: 10px;
}

/* ==========================================================
   design02 Luxury（高級・スタイリッシュ）
   ========================================================== */
#design02 {
  --color-main: #b8935a;
  --color-sub: #8a6c3f;
  --color-bg: #14110d;
  --color-tint-bg: #1c1712;
  --color-text: #ece5d8;
  --color-white: #201a14;
  --color-surface-text: #ece5d8;
  --color-news-bg: #0d0b08;
  --color-news-text: #ece5d8;
  --color-footer-bg: #0d0b08;
  --color-footer-text: #ece5d8;

  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-heading: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 32px;

  --radius-base: 0px;
  --space-section: 104px;
  --container-width: 1120px;

  --hero-direction: row;
  --col-direction: row;
  --card-columns: 2;
}

#design02 .mod-heading {
  position: relative;
  padding-bottom: 22px;
  letter-spacing: 0.08em;
}

#design02 .mod-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 1px;
  background: var(--color-main);
}

#design02 .mod-iconBadge {
  border: 1px solid var(--color-main);
  background: transparent;
  color: var(--color-main);
}

#design02 .mod-services__item,
#design02 .mod-carousel__photo img {
  border: 1px solid rgba(184, 147, 90, 0.35);
}

#design02 .mod-button--primary {
  letter-spacing: 0.05em;
}

#design02 .mod-footer__sns a {
  border-color: rgba(43, 34, 22, 0.3);
}

/* ==========================================================
   design03 Natural（やわらかい・ナチュラル）
   ========================================================== */
#design03 {
  --color-surface: #FAF6EE;
  --color-surface-tint: #F1EAD9;
  --color-text-primary: #4A3F35;
  --color-text-muted: #8A7A68;
  --color-border: #E4DAC6;
  --color-accent: #C68958;
  --color-accent-light: #E3C3A0;
  --color-accent-pale: #F7ECDD;
  --color-cta: #7A9B6E;
  --color-cta-hover: #648057;
  --font-heading: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-heading-en: "Quicksand", sans-serif;
  --font-script: var(--font-heading-en);
  --font-base: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --container-gutter: clamp(18px, 4.4vw, 60px);
  --container-width: 1060px;

  --color-main: var(--color-cta);
  --color-sub: var(--color-accent);
  --color-bg: var(--color-surface);
  --color-tint-bg: var(--color-surface-tint);
  --color-text: var(--color-text-primary);
  --color-white: #ffffff;
  --color-surface-text: var(--color-text-primary);
  --color-news-bg: var(--color-accent-pale);
  --color-news-text: var(--color-text-primary);
  --color-footer-bg: #ffffff;
  --color-footer-text: var(--color-text-primary);
}

/* 見出しは太めに */
#design03 .sec-head h2,
#design03 .linkband h2,
#design03 .profile h2 {
  font-weight: 700;
}

/* 大きめの角丸（ピル型ボタンは .btn/.pill が元々border-radius:999pxのため上書き不要） */
#design03 .ba {
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(74, 63, 53, .1);
}

#design03 .portrait .frame {
  border-radius: 24px;
}

#design03 .portrait .frame img {
  border-radius: 14px;
}

#design03 .portrait::after {
  /* border-right: 1px solid var(--color-accent); */
  /* border-bottom: 1px solid var(--color-accent); */
  border-right: none;
  border-bottom: none;
}

/* 初回クーポン：六角形・亀甲（G）。SVGは常にDOM上に存在し、
   common.cssの既定でdisplay:noneになっているのをここで表示に戻す */
#design03 .coupon-inner {
  display: grid;
  justify-items: center;
}

#design03 .coupon-badge {
  position: relative;
  width: clamp(120px, 28vw, 156px);
  margin: 0 auto;
}

#design03 .coupon-badge svg {
  display: block;
  width: 100%;
  height: auto;
}

#design03 .coupon-badge .badge-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
}

#design03 .coupon-body {
  margin-top: 18px;
}

/* ヒーローのウォーターマークをセージ×テラコッタのグラデーションに */
#design03 .hero-script {
  background: linear-gradient(96deg, #7A9B6E, #D7E5CC 34%, #C68958 58%, #EAD9C0 78%, #7A9B6E);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ==========================================================
   design04 Professional（信頼・専門的）
   ========================================================== */
#design04 {
  --color-surface: #FFFFFF;
  --color-surface-tint: #F3F6F9;
  --color-text-primary: #2C2C2C;
  --color-text-muted: #6B7480;
  --color-border: #DCE3EA;
  --color-accent: #1E3A5F;
  --color-accent-light: #7C97B3;
  --color-accent-pale: #EAF0F6;
  --color-cta: #1E3A5F;
  --color-cta-hover: #142A45;
  --font-heading: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-heading-en: "Archivo", sans-serif;
  --font-script: var(--font-heading-en);
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --container-gutter: clamp(18px, 4.4vw, 60px);
  --container-width: 1120px;

  --color-main: var(--color-cta);
  --color-sub: var(--color-accent-light);
  --color-bg: var(--color-surface);
  --color-tint-bg: var(--color-surface-tint);
  --color-text: var(--color-text-primary);
  --color-white: #ffffff;
  --color-surface-text: var(--color-text-primary);
  --color-news-bg: var(--color-accent-pale);
  --color-news-text: var(--color-accent);
  --color-footer-bg: #ffffff;
  --color-footer-text: var(--color-text-primary);
}

/* 太めの見出し */
#design04 .sec-head h2,
#design04 .linkband h2,
#design04 .profile h2 {
  font-weight: 700;
}

/* 塗りつぶしの円アイコン：ヘッダーの提携バッジ */
#design04 .ra-mini {
  background: var(--color-accent);
  border-color: var(--color-accent);
  border-radius: 50%;
}

#design04 .ra-mini .rl {
  color: #fff;
}

/* 対応エリア行の先頭マークを塗りつぶしドットに */
#design04 .basics dt::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: .5em;
}

/* カード上部のアクセントライン */
#design04 .ba {
  border-top: 3px solid var(--color-accent);
}

/* 初回クーポン：二重罫線の囲み（F）。.portrait .frame と同じ
   「外枠border＋padding＋内枠border」の二重罫テクニックを流用 */
#design04 .coupon-card {
  background: var(--color-white);
  border: 1px solid var(--color-accent-light);
  padding: 9px;
}

#design04 .coupon-inner {
  border: 1px solid var(--color-accent-pale);
  padding: clamp(24px, 3.6vw, 34px) clamp(16px, 2.6vw, 24px);
  text-align: center;
}

#design04 .badge-jp {
  display: none;
}

#design04 .coupon-body .off {
  position: relative;
  margin-top: 16px;
  padding-top: 14px;
}

#design04 .coupon-body .off::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 1px;
  background: var(--color-accent);
}

/* 信頼感を損なわないよう、装飾的な筆記体ウォーターマークは薄いフラット表示に */
#design04 .hero-script {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--color-accent);
  opacity: .12;
}

/* ==========================================================
   design05 Pop（ポップ・アクティブ）
   ========================================================== */
#design05 {
  --color-surface: #FDF3F8;
  --color-surface-tint: #F3ECFF;
  --color-text-primary: #3A3550;
  --color-text-muted: #8983A6;
  --color-border: #E7DFF7;
  --color-accent: #6EA8FE;
  --color-accent-light: #C5DBFF;
  --color-accent-pale: #EDF3FF;
  --color-cta: #FF6F9C;
  --color-cta-hover: #E85586;
  --font-heading: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-heading-en: "Baloo 2", sans-serif;
  --font-script: var(--font-heading-en);
  --font-base: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", sans-serif;
  --container-gutter: clamp(18px, 4.4vw, 60px);
  --container-width: 1080px;

  --color-main: var(--color-cta);
  --color-sub: var(--color-accent);
  --color-bg: var(--color-surface);
  --color-tint-bg: var(--color-surface-tint);
  --color-text: var(--color-text-primary);
  --color-white: #ffffff;
  --color-surface-text: var(--color-text-primary);
  --color-news-bg: var(--color-cta);
  --color-news-text: #ffffff;
  --color-footer-bg: #ffffff;
  --color-footer-text: var(--color-text-primary);
}

#design05 .sec-head h2,
#design05 .linkband h2,
#design05 .profile h2 {
  font-weight: 800;
}

/* コミック風の縁取り＋オフセットシャドウ */
#design05 .ba {
  border: 3px solid var(--color-text-primary);
  box-shadow: 6px 6px 0 var(--color-accent);
}

#design05 .btn,
#design05 .pill {
  border: 3px solid var(--color-text-primary);
}

#design05 .btn-primary,
#design05 .pill {
  box-shadow: 4px 4px 0 var(--color-accent);
}

#design05 .btn-primary:hover,
#design05 .btn-primary:focus-visible,
#design05 .pill:hover,
#design05 .pill:focus-visible {
  box-shadow: 2px 2px 0 var(--color-accent);
  transform: translate(2px, 2px);
}

/* アイコン（項目）ごとの色分け：予約導線の3ピル */
#design05 .pills .pill:nth-child(3n+1) { background: #FF6F9C; }
#design05 .pills .pill:nth-child(3n+2) { background: #6EA8FE; }
#design05 .pills .pill:nth-child(3n+3) { background: #FFC24B; }
#design05 .pills .pill:nth-child(3n+1):hover { background: #E85586; }
#design05 .pills .pill:nth-child(3n+2):hover { background: #4C8CE0; }
#design05 .pills .pill:nth-child(3n+3):hover { background: #E8A400; }

/* 初回クーポン：かぎ罫・四隅（I）。DOMに装飾用要素を増やさず、
   background-image の複数レイヤーで四隅の角罫を描く */
#design05 .coupon-card {
  --coupon-accent: var(--color-accent);
  position: relative;
  background-color: var(--color-white);
  padding: clamp(28px, 4vw, 38px) clamp(18px, 3vw, 26px);
  background-repeat: no-repeat;
  background-size: 18px 2px, 2px 18px;
  background-position:
    top left, top left,
    top right, top right,
    bottom left, bottom left,
    bottom right, bottom right;
  background-image:
    linear-gradient(var(--coupon-accent), var(--coupon-accent)),
    linear-gradient(var(--coupon-accent), var(--coupon-accent)),
    linear-gradient(var(--coupon-accent), var(--coupon-accent)),
    linear-gradient(var(--coupon-accent), var(--coupon-accent)),
    linear-gradient(var(--coupon-accent), var(--coupon-accent)),
    linear-gradient(var(--coupon-accent), var(--coupon-accent)),
    linear-gradient(var(--coupon-accent), var(--coupon-accent)),
    linear-gradient(var(--coupon-accent), var(--coupon-accent));
}

#design05 .badge-jp {
  display: none;
}

/* アイコン（項目）ごとの色分け：クーポン3枚（角罫・英字ラベル・割引額すべてに適用） */
#design05 .coupon-card:nth-child(3n+1) { --coupon-accent: #FF6F9C; }
#design05 .coupon-card:nth-child(3n+2) { --coupon-accent: #6EA8FE; }
#design05 .coupon-card:nth-child(3n+3) { --coupon-accent: #E8A400; }

#design05 .badge-en,
#design05 .coupon-body .off {
  color: var(--coupon-accent);
}

/* ヒーローのウォーターマークをピンク×ラベンダーに */
#design05 .hero-script {
  background: linear-gradient(96deg, #FF6F9C, #FFD1E0 34%, #6EA8FE 58%, #C5DBFF 78%, #FF6F9C);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ==========================================================
   design06（雛形）
   量産6件目以降で値を決めて実装する。値が未設定の間は
   common.css 側の初期値（フォールバック）で崩れずに表示される。
   ========================================================== */
#design06 {
  /* --color-surface: ...; */
  /* --color-text-primary: ...; */
  /* --color-accent: ...; */
  /* --color-cta: ...; */
  /* --font-heading: ...; */
  /* --font-base: ...; */
}

/* ==========================================================
   project-specific overrides
   この案件だけの特殊調整があればここに追記する（他案件に影響しない）
   ========================================================== */

/*
 * TOP ARTMAKE（design02ベース、top-artmake.html採用）
 * design02本来の黒×ゴールドの配色を、ベージュ×ゴールド×ローズの配色に上書きする。
 * 他案件のdesign02には影響しない（このファイルは案件フォルダごとにコピーされるため）。
 */
#design02 {
  --color-surface: #FDFBF7;
  --color-surface-tint: #F8F3EA;
  --color-text-primary: #2C2723;
  --color-text-muted: #7C746B;
  --color-border: #E4DACA;
  --color-accent: #AE8B52;
  --color-accent-light: #D9C299;
  --color-accent-pale: #F2E8D4;
  --color-cta: #E2A398;
  --color-cta-hover: #C98577;
  --font-heading: "Zen Old Mincho", serif;
  --font-heading-en: "Marcellus", serif;
  --font-script: "Parisienne", cursive;
  --font-base: "Zen Kaku Gothic New", sans-serif;
  --container-gutter: clamp(18px, 4.4vw, 60px);
  --container-width: 1080px;

  /* --- 旧汎用トークン（common.css冒頭の共通ブロックが参照するため残置） --- */
  --color-main: var(--color-cta);
  --color-sub: var(--color-accent);
  --color-bg: var(--color-surface);
  --color-tint-bg: var(--color-surface-tint);
  --color-text: var(--color-text-primary);
  --color-white: #ffffff;
  --color-surface-text: var(--color-text-primary);
  --color-news-bg: var(--color-accent-pale);
  --color-news-text: var(--color-text-primary);
  --color-footer-bg: #ffffff;
  --color-footer-text: var(--color-text-primary);
}

/* 初回クーポン：ひし形（E）。45度回転した正方形＋内側にもう一本の細罫 */
#design02 .coupon-inner {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: clamp(158px, 36vw, 204px);
}

#design02 .coupon-badge {
  position: relative;
  width: clamp(108px, 25vw, 140px);
  aspect-ratio: 1;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-accent-light);
  transform: rotate(45deg);
  display: grid;
  place-content: center;
}

#design02 .coupon-badge::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid var(--color-accent-pale);
}

#design02 .coupon-badge .badge-label {
  transform: rotate(-45deg);
}

#design02 .coupon-body {
  margin-top: 20px;
}