/* ============================================================
   Crown Tiara job — airy CSS (theming-ready / fully organized)
   ============================================================ */

/* ----------------------------------------
  01) Theme Tokens ー 店舗別テーマはここだけ変更
---------------------------------------- */
:root{
  /* 基本色 */
  --brand:#1f86b3;
  --brand-ink:#0a4a66;
  --brand-tint:#cfeafe;
  --ink:#0b2a3a;
  --ink-strong:#0a3044;
  --sub:#3d5866;
  --bg:#f4fbff;
  --surface:#ffffff;
  --border:#cde8f9;
  --border-soft:#d9eefc;
  --line:rgba(11,84,121,.12);
  --accent:#2aa0d8;
  --accent-deep:#1f86b3;
  --card-title:#3e8eb8;
  --qa-strong:#1e5886;

  /* 追加：配色一括差し替え用（既定値は現行デザインの色） */
  --bg-gradient: radial-gradient(circle at 50% 0%, #e0f2fe, #ffffff 58%);
  --nav-hover-bg: rgba(0,0,0,.04);
  --mobile-nav-hover-bg:#f1f8ff;

  --eyebrow-bg:#eaf7ff;
  --eyebrow-border:#bfe7fb;

  --lead-bg: rgba(255,255,255,.68);
  --lead-border:#cfe6f7;
  --lead-shadow:rgba(125,211,252,.28);

  --image-shadow:rgba(125,211,252,.45);
  --note-shadow:rgba(125,211,252,.40);

  --section-alt-bg: linear-gradient(180deg,var(--surface),#f3f9ff);
  --section-first-bg: var(--brand-tint);

  --card-shadow:rgba(125,211,252,.24);

  --cta-num-bg:#0b8bd1;
  --on-cta-num:#ffffff;
  --cta-line-border:#a5e3b8;
  --cta-line-bg:linear-gradient(180deg,var(--surface),#f2fff5);

  --qr-border:#e5eef4;

  --focus-ring:rgba(0,136,204,.18);

  --label-accent:#60a5fa;

  --panel-border:#cfe6f7;
  --panel-shadow:rgba(125,211,252,.22);
  --panel-bg:rgba(255,255,255,.72);

  --chip-shadow:rgba(125,211,252,.25);
  --faq-shadow:rgba(125,211,252,.28);

  --link-strong:#0a3044; /* h2カードで参照されていたためトークン化 */

  /* LINE公式色もトークン化（店舗で差し替え可） */
  --line-brand:#06C755;
  --on-line-brand:#ffffff;
  --line-brand-border:#0db14a;

  /* ナビ（ヘッダー） */
  --header-bg: rgba(255,255,255,.86);
  --header-backdrop-blur: 10px;

  /* ヘッダーのボタン hover グラデーション */
  --header-btn-hover-grad-top:#f7fbff;
  --header-btn-hover-grad-bottom:#d9eefd;
  --header-btn-hover-border:#b5daf5;

  /* ボタン共通の境界線・影（黒系をトークン化） */
  --btn-border: rgba(0,0,0,.06);
  --btn-shadow-hover: rgba(0,0,0,.10);
  --btn-shadow-active: rgba(0,0,0,.12);
  --btn-primary-border:#9fd3f6;

  /* モバイルのナビトグル系 */
  --nav-toggle-border:#9fd3f6;
  --nav-toggle-grad-top:#f7fbff;
  --nav-toggle-grad-bottom:#d9eefd;
  --nav-toggle-shadow:rgba(32,105,172,.22);
  --nav-bar-grad-top:#2a6a96;
  --nav-bar-grad-bottom:#0b4a67;

  /* ナビトグルの内側ハイライト（白系） */
  --inset-white-strong: rgba(255,255,255,.7);
  --inset-white-soft: rgba(255,255,255,.6);

  /* メモ系の弱い影（Requirementsの注意書き用） */
  --note-shadow-weak: rgba(125,211,252,.1);

  /* 半径・影 */
  --radius:18px;
  --chip-radius:14px;
  --btn-radius:22px;
  --shadow:0 14px 30px rgba(0,0,0,.10);

  /* コンテナ・タイポ */
  --container:1280px;
  --bp:768px;
  --fs-body:16px;
  --fs-h1:clamp(28px, 5.2vw, 36px);
  --fs-h2:clamp(18px, 3.2vw, 24px);

  /* FAQ（昔の見た目用） */
  --faq-pad:20px;
  --faq-radius:20px;
  --faq-icon:18px;
}

/* ----------------------------------------
  02) Reset & Base
---------------------------------------- */
*{box-sizing:border-box}
html { scroll-behavior:smooth }
html,body{margin:0}
body{
  font-family:system-ui,-apple-system,'M PLUS Rounded 1c','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  color:var(--ink);
  background:var(--bg-gradient);
  font-size:var(--fs-body);
  line-height:1.9;
  -webkit-text-size-adjust:100%;
}
a{color:var(--ink);text-decoration:none}

/* ----------------------------------------
  03) Layout
---------------------------------------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:20px}
.band{padding:56px 0}
.center{text-align:center}
.small{font-size:.9rem}

/* ----------------------------------------
  04) Buttons
---------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 20px;border-radius:var(--btn-radius);
  border:1px solid var(--btn-border);background:var(--surface);color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 16px var(--btn-shadow-hover)}
.btn:active{transform:translateY(0);box-shadow:0 4px 10px var(--btn-shadow-active)}
.btn.primary{background:linear-gradient(180deg,#fff,var(--brand-tint));color:var(--brand-ink);border-color:var(--btn-primary-border);font-weight:600}
.btn.ghost{background:var(--surface);font-weight:600}
.btn.line{background:var(--line-brand);color:var(--on-line-brand);border-color:var(--line-brand-border)}

/* ----------------------------------------
  05) Header
---------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--header-bg);backdrop-filter:blur(var(--header-backdrop-blur));
  border-bottom:1px solid var(--line);
}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{font-weight:900;color:var(--brand-ink)}
.nav-desktop{display:none;gap:12px;align-items:center}
.nav-desktop a{padding:10px 14px;border-radius:999px;font-weight:700}
.nav-desktop a:hover{background:var(--nav-hover-bg)}
.nav-toggle{gap:6px;border:none;color:var(--brand-ink);border-radius:14px;box-shadow:var(--shadow)}
.nav-mobile{display:flex;flex-direction:column;gap:8px;padding:12px 18px 16px;border-top:1px solid var(--line);background:var(--surface)}
.nav-mobile a{padding:12px 14px;border-radius:12px;font-weight:700}
.nav-mobile a:hover{background:var(--mobile-nav-hover-bg)}
.hidden{display:none!important}
.site-header .nav-desktop .btn{min-height:36px;padding:6px 14px;border-radius:10px;font-size:.9rem;box-shadow:none}
.site-header .nav-desktop .btn:hover{transform:none;box-shadow:none;background:linear-gradient(180deg,var(--header-btn-hover-grad-top),var(--header-btn-hover-grad-bottom));border-color:var(--header-btn-hover-border)}

/* ----------------------------------------
  06) Hero
---------------------------------------- */
.hero-inner{display:grid;gap:26px;align-items:center}
.hero-copy .eyebrow{
  display:inline-block;padding:7px 12px;font-weight:800;color:var(--brand-ink);
  border:1px solid var(--eyebrow-border);background:var(--eyebrow-bg);border-radius:999px;
}
.hero h1{font-size:var(--fs-h1);line-height:1.28;margin:12px 0 10px;color:var(--ink-strong)}
.hero .lead{
  margin:10px 0 16px;padding:14px 16px;
  background:var(--lead-bg);border:1px solid var(--lead-border);border-radius:18px;
  box-shadow:0 22px 44px var(--lead-shadow);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--sub);
}

/* ----------------------------------------
  06-1) Actions（共通＋セクション固有）
---------------------------------------- */
/* 共通コンポーネント */
.c-actions{display:flex;gap:12px;flex-wrap:wrap}
/* セクション固有の挙動 */
.s-hero .c-actions{margin-top:30px;justify-content:flex-start}
.s-interior .c-actions{margin-top:16px;justify-content:center}

/* ----------------------------------------
  06-2) Hero visual
---------------------------------------- */
.hero-visual{position:relative;align-items: flex-start;}
.hero-visual img{
  width:100%;
  height:auto;             /* ← はみ出す部分を自然にトリミング */
  border-radius:26px;
  border:1px solid var(--border);
  box-shadow:0 26px 64px var(--image-shadow);
}
.hero-visual .note{
  position:absolute;left:12px;bottom:-12px;background:var(--surface);
  border:1px solid var(--border);border-radius:16px;padding:9px 12px;
  box-shadow:0 18px 34px var(--note-shadow);font-weight:600;font-size:.8rem;color:var(--brand-ink);
}

/* ----------------------------------------
  07) Sections
---------------------------------------- */
.section{background:var(--surface)}
.section.alt{background:var(--section-alt-bg)}
.section-title{display:flex;align-items:center;gap:10px;font-size:var(--fs-h2);font-weight:900;color:var(--ink-strong);margin:0 0 10px}
.section-title-center{justify-content:center}
.section .muted{color:var(--sub);margin:0 0 18px}
.section:first-of-type,.section.intro{background:var(--section-first-bg)!important}

/* ----------------------------------------
  08) Grid & Cards
---------------------------------------- */
.cards{margin-top:14px}
.grid{display:grid;gap:18px}
.card{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:22px;padding:22px;
  box-shadow:0 20px 40px var(--card-shadow)
}
.card h1 {font-size: clamp(22px, 4vw, 30px); font-weight: 900; color: var(--ink-strong) ;margin: 0 0 12px;}
.card h2 {margin:0 0 8px; font-size:22px;color:var(--link-strong)}
.card h3{margin:0 0 8px; font-size:18.5px;color:var(--card-title)}
.card p{margin:0}
.card ul{margin:.5rem 0 0;padding-left:1.2rem}

/* ----------------------------------------
  09) CTA
---------------------------------------- */
.cta .cta-head{display:flex;align-items:center;gap:12px}
.cta .num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--cta-num-bg);color:var(--on-cta-num);font-weight:900}
.cta.line{border-color:var(--cta-line-border);background:var(--cta-line-bg)}
.cta.line .num{background:var(--line-brand)}
.cta .cta-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:10px}
.qr{border:1px solid var(--qr-border);border-radius:14px;padding:10px;background:var(--surface)}
.qr img{width:120px;height:120px;object-fit:contain;display:block}

/* 応募セクションだけ note を小さく薄く */
#apply .note{font-size:.85rem;color:var(--sub);margin-top:8px}

/* ----------------------------------------
  10) Form
---------------------------------------- */
.form{border:1px solid var(--border-soft);border-radius:22px;padding:22px;background:var(--surface);box-shadow:0 20px 40px var(--panel-shadow);margin-top:14px}
label{display:block;font-size:.95rem;font-weight:800;color:var(--ink);margin:10px 0 6px}
input,select,textarea{
  width:100%;border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:13px 15px;font:inherit;color:inherit;outline:none;transition:.12s;
}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--focus-ring)}
.radios{display:flex;gap:18px;flex-wrap:wrap;margin-top:.6rem}

/* 同意チェックの縦ズレ解消 */
label.agree{
  display:flex;align-items:center;gap:10px;margin-top:12px;
  font-size:.95rem;color:var(--ink);line-height:1.6;
}
label.agree input[type="checkbox"]{
  flex:0 0 auto;inline-size:1.1em;block-size:1.1em;margin:0;vertical-align:middle;
}
label.agree span{display:inline;font-weight:600}
label.agree .policy-link{font-weight:800;text-decoration:underline}

.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  border:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;clip-path:inset(50%)!important;
}
.form-narrow{max-width:896px}

/* ----------------------------------------
  11) Footer
---------------------------------------- */
.site-footer{border-top:1px solid var(--line);background:var(--surface);padding:22px 0}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.footer-nav{display:flex;gap:14px;flex-wrap:wrap}
.copy{color:var(--ink-strong);font-weight:700}

/* ----------------------------------------
  12) Hero extra
---------------------------------------- */
.hero-extra{margin-top:36px}
.support{margin:12px 0 8px;color:var(--brand-ink);font-weight:700}
.benefits{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px;padding:0;list-style:none}
.benefits>li{background:var(--surface);border:1px solid var(--border);border-radius:var(--chip-radius);padding:10px 12px;font-weight:600;color:var(--brand-ink);box-shadow:0 8px 18px var(--chip-shadow);font-size:.85rem}

/* ----------------------------------------
  13) Interior
---------------------------------------- */
.interior-container{position:relative}
.interior-label,.about-label{
  position:relative;display:inline-block;margin-bottom:12px;font-size:.85rem;font-weight:700;color:var(--label-accent)
}
.interior-wrap{display:grid;gap:22px;align-items:start}
.photo-card{position:relative}
.photo-card img{width:100%; height: auto; border-radius:26px;border:1px solid var(--border);box-shadow:0 26px 64px var(--image-shadow)}
.photo-note{position:absolute;left:14px;bottom:-14px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:9px 12px;color:var(--brand-ink);font-weight:600;font-size:.8rem;box-shadow:0 18px 36px var(--note-shadow)}
#interior .interior-copy .muted{margin:10px 0 18px;padding:14px 16px;color:var(--sub);background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;box-shadow:0 18px 36px var(--panel-shadow);backdrop-filter:blur(6px)}

/* ----------------------------------------
  14) Chips (Interior)
---------------------------------------- */
#interior .chip-list{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin:12px 0 0;padding:0;list-style:none;max-width:560px}
#interior .chip{background:var(--surface);border:1px solid var(--border);border-radius:var(--chip-radius);padding:10px 12px;font-weight:600;color:var(--brand-ink);box-shadow:0 8px 18px var(--chip-shadow);font-size:.85rem}

/* ----------------------------------------
  15) Requirements Note
---------------------------------------- */
#requirements .card .note{
  display:block;margin-top:12px;padding:10px 14px;
  border:1px solid var(--border);border-radius:10px;background:var(--bg);
  color:var(--brand-ink);font-size:.6rem;box-shadow:0 6px 14px var(--note-shadow-weak)
}

/* ----------------------------------------
  16) FAQ（昔の見た目を再現・高さ統一）
---------------------------------------- */
#faq .grid{ gap:16px }

details.faq{
  margin:0;
  padding:var(--faq-pad);
  border:1px solid var(--border);
  border-radius:var(--faq-radius);
  background:var(--surface);
  box-shadow:0 24px 48px var(--faq-shadow);
  transition:box-shadow .2s ease,border-color .2s ease;
}
details.faq[open]{ border-color:var(--accent) }

details.faq summary{
  display:block;
  margin:0;
  padding:0 28px 0 0;
  line-height:1.25;
  font-weight:700;
  color:var(--qa-strong);
  font-size:1rem;
  list-style:none;outline:none;cursor:pointer;
  position:relative;
}
details.faq summary::-webkit-details-marker{ display:none }
details.faq summary::after{
  content:'+';position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-weight:900;font-size:var(--faq-icon);color:var(--accent-deep);line-height:1;
  transition:transform .25s ease;
}
details.faq[open] summary::after{ transform:translateY(-50%) rotate(45deg) }

details.faq p{
  margin:8px 0 0;padding:0;
  color:var(--sub);line-height:1.7;font-size:.95rem;
}
details.faq:not([open]) p{ display:none }

/* ----------------------------------------
  17) Responsive
---------------------------------------- */
@media (min-width:768px){
  .container{padding-inline:24px}
  .band{padding:68px 0}
  .hero-inner{grid-template-columns:1.05fr .95fr;gap:32px}
  .interior-wrap{grid-template-columns:1fr 1fr;gap:26px}
  .grid-2{grid-template-columns:1fr 1fr;gap:22px}
  .grid-3{grid-template-columns:repeat(3,1fr);gap:22px}
  .nav-desktop{display:flex}
  .nav-mobile,.nav-toggle{display:none!important}
  .benefits{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@media (max-width:767.98px){
  .site-header .header-row{
    padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));
    padding-block:10px;gap:10px
  }
  .nav-toggle{
    display:inline-grid;place-content:center;width:38px;height:36px;border:1px solid var(--nav-toggle-border);
    background:linear-gradient(180deg,var(--nav-toggle-grad-top) 0%,var(--nav-toggle-grad-bottom) 100%);
    box-shadow:0 2px 0 var(--inset-white-strong) inset,0 6px 16px var(--nav-toggle-shadow),0 1px 0 var(--inset-white-soft) inset;
    transition: box-shadow .15s ease, transform .12s ease, background .15s ease;
    margin-inline-start:auto;margin-inline-end:14px;gap:3px;
  }
  .nav-toggle .bar{width:13px;height:1.2px;background:linear-gradient(180deg,var(--nav-bar-grad-top) 0%,var(--nav-bar-grad-bottom) 100%);border-radius:1px;opacity:.95}

  /* HERO：画像を先／テキストを後 */
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{order:-1}

  /* c-actions（共通）をモバイルで縦並び化 */
  .c-actions{flex-direction:column;align-items:stretch;gap:10px}
  .c-actions .btn{width:100%}
}
@media (min-width:1024px){
  .container{padding-inline:32px}
}

/* ----------------------------------------
  18) Sparkle（丸くならない・堅牢版）— 位置補正つき
---------------------------------------- */
.sparkle{
  --sp-size:.78em;                    /* 大きさ */
  --sp-core:#6fc6ee;                  /* 本体色（菱形） */
  --sp-glow:rgba(191,232,255,.55);    /* 外側の淡い発光 */
  --sp-offset:0;                   /* 縦位置の既定補正（以前と同じ） */

  display:inline-block;
  inline-size:var(--sp-size);
  block-size:var(--sp-size);
  vertical-align:middle;
  margin:0 .35em;
  margin-top: -.1em;
  position:relative;
  top: var(--sp-offset);              /* ← transform を使わず安全に縦補正 */
}

/* 発光（菱形を維持したままブラー） */
.sparkle::after{
  content:"";
  position:absolute; inset:0;
  background:var(--sp-glow);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  transform:scale(1.28);
  filter:blur(2px);
  opacity:.8;
  pointer-events:none;
}

/* 本体（くっきりダイヤ） */
.sparkle::before{
  content:"";
  position:absolute; inset:0;
  background:var(--sp-core);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}

/* ひかえめアニメ（transform は ::after のみで使用） */
@keyframes spGlow{
  0%,100%{filter:blur(2px)}
  50%{filter:blur(3px)}
}
.sparkle::after{ animation: spGlow 2.2s ease-in-out infinite }

/* motion配慮 */
@media (prefers-reduced-motion: reduce){
  .sparkle::after{ animation:none !important }
}



/* === Policy page専用のカード余白（indexに影響しない） === */
.policy-section{margin-bottom: 30px;}
.prose {
  padding: 1rem;
}

@media (min-width:768px){
  .prose { padding: 3rem; }
}

.policy-section:not(:last-child){border-bottom:1px solid var(--border-soft);padding-bottom:1.5rem;}

/* === Terms page専用スタイル（indexに影響しない） === */

/* 各章の区切り */
.terms-section {
  margin-bottom: 30px;
}

/* 本文用カード余白 */
.prose {
  padding: 1rem;
}

/* デスクトップ時の広め余白 */
@media (min-width:768px) {
  .prose { padding: 3rem; }
}

/* 区切り線と下余白（最後は除外） */
.terms-section:not(:last-child) {
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 1.5rem;
}