@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;800&family=Klee+One:wght@400;600&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

/* ==========================================================================
   gurekono-theme.css
   グレコノデザイン本サイトのトンマナを shindan_simulator の各ツールに適用する
   上書きレイヤー。各ページの <style> より後ろで読み込むこと。
   本体のCSSは書き換えず、:root のトークンだけを差し替えている。
   ========================================================================== */

:root{
  /* --- 本サイトのブランドトークン（正） --- */
  --gk-bg:            #FBF3F1;
  --gk-bg-soft:       #F6E9E7;
  --gk-card:          #FFFDFB;
  --gk-ink:           #2E2A2E;
  --gk-ink-soft:      #6B6266;
  --gk-primary:       #043B68;
  --gk-primary-dark:  #022A4B;
  --gk-accent:        #CE2E6A;
  --gk-accent-soft:   #F7D8E3;
  --gk-navy:          #043B68;
  --gk-line:          #E8D5D6;
  --gk-white:         #FFFFFF;
  --gk-hd-bg:         rgba(251,243,241,.94);

  --gk-font-display: 'Shippori Mincho', "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gk-font-hand:    'Klee One', "Hiragino Maru Gothic ProN", cursive;
  --gk-font-body:    'Zen Kaku Gothic New', "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif;

  --gk-bar-h: 56px;

  /* --- ツール側トークンの差し替え（ミストブルー系 → ワイン／ローズ系） --- */
  --bg:        #FFFDFB;
  --card:      #FFFDFB;
  --panel:     #FBF3F1;
  --surface:   #FBF3F1;
  --surface-2: #F7D8E3;
  --surface2:  #F6E9E7;

  --ink:       #2E2A2E;
  --muted:     #6B6266;
  --ink-soft:  #6B6266;
  --ink-weak:  #6B6266;
  --line:      #E8D5D6;

  --acc:         #043B68;
  --acc-soft:    #F7D8E3;
  --accent:      #043B68;
  --accent-soft: #F7D8E3;
  --brand:       #043B68;
  --brand-deep:  #022A4B;
  --brand-tint:  #F7D8E3;

  --c1: #043B68;
  --c2: #C24C6C;
  --c3: #CE2E6A;
  --grad:      linear-gradient(120deg,#022A4B 0%,#043B68 48%,#CE2E6A 100%);
  --grad-gold: linear-gradient(120deg,#043B68 0%,#4A587D 100%);

  /* 副色は本サイトのネイビーに置き換える（ゴールドはサイトに存在しないため） */
  --gold:      #043B68;
  --gold-2:    #4A587D;
  --gold-soft: #EDEFF5;
  --gold-tint: #EDEFF5;

  --hit-bg: #F7D8E3;

  /* 判定色は機能色なので残す */
  --ok:#4E8A6B;   --ok-tint:#EAF3EE;
  --warn:#B58224; --warn-tint:#FAF2E1;
  --ng:#B4574B;   --ng-tint:#F9EDEB;

  --shadow: 0 2px 12px rgba(2,42,75,.07);
  --sh-1:   0 4px 20px rgba(2,42,75,.08);
  --sh-2:   0 14px 40px rgba(2,42,75,.13);
  --sh-3:   0 22px 60px rgba(2,42,75,.18);
}

/* ダークモード（管理画面／システム図／デモサイトのトグル）＝「夜の紙」 */
html[data-theme="dark"]{
  /* シェル（ヘッダー／フッター／ドロワー）側も夜の紙に切り替える */
  --gk-bg:#1B1518; --gk-bg-soft:#241D21; --gk-card:#241D21; --gk-line:#3D3036;
  --gk-ink:#F2E9E9; --gk-ink-soft:#B6A6AB;
  --gk-primary:#E58AA1; --gk-primary-dark:#F2AFC0; --gk-accent:#E58AA1; --gk-accent-soft:#3A2A31;
  --gk-hd-bg:rgba(27,21,24,.94);

  --bg:#241D21; --card:#241D21; --panel:#1B1518; --surface:#1B1518; --surface2:#2C2429; --surface-2:#3A2A31;
  --ink:#F2E9E9; --muted:#B6A6AB; --ink-soft:#B6A6AB; --ink-weak:#B6A6AB;
  --line:#3D3036;
  --acc:#E58AA1; --acc-soft:#3A2A31;
  --accent:#E58AA1; --accent-soft:#3A2A31;
  --brand:#E58AA1; --brand-deep:#F2AFC0; --brand-tint:#3A2A31;
  --c1:#E58AA1; --c2:#EA9DB1; --c3:#F2AFC0;
  --grad:linear-gradient(120deg,#043B68 0%,#E58AA1 100%);
  --gold:#9FAEDB; --gold-2:#B8C4E6; --gold-soft:#242A3A; --gold-tint:#242A3A;
  --hit-bg:#4A333C;
  --sh-1:0 4px 20px rgba(0,0,0,.32); --sh-2:0 14px 40px rgba(0,0,0,.40); --sh-3:0 22px 60px rgba(0,0,0,.48);
}

/* --------------------------------------------------------------------------
   タイポグラフィをサイト側に合わせる
   -------------------------------------------------------------------------- */
body{
  font-family: var(--gk-font-body);
  background: var(--gk-bg);
}
h1,h2,h3,h4{ font-family: var(--gk-font-display); }
/* 自前でcolorを持つ見出し（グラデ文字など）を壊さないよう :where で最弱にする */
:where(h1,h2,h3,h4){ color: var(--gk-primary-dark); }
html[data-theme="dark"] :where(h1,h2,h3,h4){ color:#F2D9DF; }

/* ai-type-shindan の背景オーラをブランド色へ */
.aura-1{ background: radial-gradient(circle,#CE2E6A 0%, rgba(206,46,106,0) 70%) !important; }
.aura-2{ background: radial-gradient(circle,#043B68 0%, rgba(4,59,104,0) 70%) !important; }
.aura-3{ background: radial-gradient(circle,#043B68 0%, rgba(44,53,80,0) 70%) !important; }

/* --------------------------------------------------------------------------
   共通シェル（ヘッダー／パンくず／フッター）— 本サイトと同じ作法
   クラス名は gk- 接頭辞。既存ページの .site-header 等とは衝突しない。
   -------------------------------------------------------------------------- */
.gk-hd, .gk-ft, .gk-bar, .gk-crumb{ font-family: var(--gk-font-body); }
.gk-hd *, .gk-ft *, .gk-bar *{ box-sizing: border-box; }
.gk-hd a, .gk-ft a, .gk-bar a, .gk-crumb a{ text-decoration: none; color: inherit; }

.gk-wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }

.gk-brand{ display:flex; flex-direction:column; line-height:1.15; }
.gk-brand-ja{ font-family:var(--gk-font-display); font-weight:800; font-size:1.35rem; color:var(--gk-primary-dark); }
.gk-brand-en{ font-family:var(--gk-font-hand); font-size:.68rem; color:var(--gk-ink-soft); letter-spacing:.12em; }

/* --- フルヘッダー --- */
.gk-hd{
  position:sticky; top:0; z-index:900;
  background:var(--gk-hd-bg);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--gk-line);
}
.gk-hd .gk-wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:78px; }
.gk-nav{ display:flex; align-items:center; gap:30px; }
.gk-nav ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.gk-nav a{ font-size:.95rem; font-weight:500; color:var(--gk-ink); position:relative; padding:4px 0; }
.gk-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:var(--gk-accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.gk-nav a:hover::after, .gk-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.gk-nav a[aria-current="page"]{ color:var(--gk-primary); font-weight:700; }

.gk-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gk-primary); color:var(--gk-white) !important;
  padding:11px 20px; border-radius:999px; font-size:.88rem; font-weight:700; white-space:nowrap;
  box-shadow:0 10px 22px -10px rgba(2,42,75,.55);
  transition:transform .2s ease, background .2s ease;
}
.gk-cta:hover{ background:var(--gk-primary-dark); transform:translateY(-1px); }

.gk-hd-right{ display:flex; align-items:center; gap:14px; }
.gk-hd-toggle{
  display:none; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--gk-line); background:var(--gk-card); position:relative; cursor:pointer;
}
.gk-hd-toggle span, .gk-hd-toggle span::before, .gk-hd-toggle span::after{
  content:""; position:absolute; left:11px; right:11px; height:2px; background:var(--gk-primary-dark);
  transition:transform .2s ease, opacity .2s ease;
}
.gk-hd-toggle span{ top:21px; }
.gk-hd-toggle span::before{ top:-7px; }
.gk-hd-toggle span::after{ top:7px; }
.gk-hd-toggle[aria-expanded="true"] span{ background:transparent; }
.gk-hd-toggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.gk-hd-toggle[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  .gk-nav{
    /* .gk-hd は backdrop-filter を持つため fixed の基準になってしまう。
       同じ見た目を absolute で組み、ドロワーが画面いっぱいに開くようにする。 */
    position:absolute; top:78px; left:0; width:100vw; height:calc(100vh - 78px);
    background:var(--gk-bg); overflow-y:auto;
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:34px 28px; gap:26px; transform:translateX(100%); transition:transform .28s ease; z-index:899;
  }
  .gk-nav.is-open{ transform:translateX(0); }
  .gk-nav ul{ flex-direction:column; gap:22px; font-size:1.15rem; }
  .gk-hd-toggle{ display:block; }
}

/* --- 現在地パンくず（フルヘッダーの直下） --- */
.gk-crumb{
  background:var(--gk-bg-soft); border-bottom:1px solid var(--gk-line);
  font-size:.85rem; color:var(--gk-ink-soft); line-height:1.8;
}
.gk-crumb .gk-wrap{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:11px; padding-bottom:11px; }
.gk-crumb a:hover{ color:var(--gk-primary); text-decoration:underline; }
.gk-crumb .sep{ opacity:.5; }
.gk-crumb .cur{ color:var(--gk-primary-dark); font-weight:700; }

/* --- スリムバー（管理画面・デモサイト用） --- */
.gk-bar{
  background:var(--gk-navy); color:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:.85rem; line-height:1.7; position:relative; z-index:800;
}
.gk-bar .gk-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:var(--gk-bar-h); padding-top:9px; padding-bottom:9px; flex-wrap:wrap;
}
.gk-bar b{ font-family:var(--gk-font-display); color:#fff; font-weight:600; }
.gk-bar .gk-note{ color:#F7D8E3; }
.gk-bar-links{ display:flex; gap:8px; flex-wrap:wrap; }
.gk-bar-links a{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(255,255,255,.28); border-radius:999px;
  padding:7px 15px; color:#fff; font-weight:700; white-space:nowrap;
  transition:background .2s ease, transform .2s ease;
}
.gk-bar-links a:hover{ background:rgba(255,255,255,.14); transform:translateY(-1px); }

/* --- フッター --- */
.gk-ft{ background:var(--gk-navy); color:rgba(255,255,255,.85); padding:56px 0 26px; font-size:.92rem; line-height:1.9; }
.gk-ft-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.gk-ft h4{ font-family:var(--gk-font-display); color:#fff; font-size:1rem; margin:0 0 12px; }
.gk-ft ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.gk-ft p{ margin:0; }
.gk-ft a:hover{ color:#F7D8E3; text-decoration:underline; }
.gk-ft .gk-brand-ja{ color:#fff; font-size:1.15rem; }
.gk-ft .gk-brand-en{ color:rgba(255,255,255,.6); }
.gk-ft-bottom{
  margin-top:36px; padding-top:18px; border-top:1px solid rgba(255,255,255,.16);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:.8rem; color:rgba(255,255,255,.6);
}
@media (max-width:760px){ .gk-ft-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   フルヘッダーを載せたページ側のレイアウト調整
   -------------------------------------------------------------------------- */
/* AI活用タイプ診断の固定進捗バーが、追従ヘッダー（高さ78px）の下に出るようにする */
html[data-gk-shell="full"] .progress{ top:78px; }

/* --------------------------------------------------------------------------
   スリムバーを載せたページ側のレイアウト調整
   -------------------------------------------------------------------------- */
/* デモサイトの固定ヘッダーがバーに重ならないようにする */
html[data-gk-shell="bar"] header.site{ position:sticky; }

/* 印刷時はシェルを出さない（見積書のA4印刷を壊さないため） */
@media print{
  .gk-hd, .gk-ft, .gk-bar, .gk-crumb{ display:none !important; }
}

/* スマホで横にはみ出さないように（本サイトと同じ） */
html, body{ overflow-x: clip; }
@media (max-width:980px) and (min-width:761px){ .gk-ft-grid{ grid-template-columns:1fr 1fr; } }
/* フッターを本サイトとそろえる */
.gk-ft{ font-size:.88rem; padding:64px 0 30px; }
.gk-ft h4{ font-family:var(--gk-font-body); font-size:.95rem; font-weight:700; margin:0 0 16px; }
.gk-ft ul{ gap:14px; }
.gk-ft-grid img{ height:48px !important; }
.gk-ft .gk-cta{ background:#CE2E6A !important; color:#fff !important; border-radius:999px; padding:12px 20px; font-weight:700; }
.gk-ft .gk-cta:hover{ text-decoration:none !important; filter:brightness(1.05); }