/* 赤田佳史 Official Website の見た目。index.html と ai/index.html で共通して使う。 */
  :root{
    --ink:#0C0A09;
    --ink-2:#17120F;
    --ink-3:#221B16;
    --paper:#F4F0E9;
    --mute:#A79E93;
    --metal:#6E655C;
    --accent:oklch(60% 0.2 27);
    --accent-dim:oklch(48% 0.16 27);
    --brass:#B99256;
    --hud:14px;

    /* 半透明にするとき用。上の色と同じものを、数字の並びで持っておく。
       これがあると、配色をまるごと着せ替えても半透明の部分までついてくる */
    --ink-rgb:12 10 9;
    --paper-rgb:244 240 233;
    --brass-rgb:185 146 86;
  }
/*
  トップページを、白い紙の配色にする（2026-09-23）。
  <body class="theme-light"> が付いているページにだけ効く。

  **ヒーローとナビは、これまでどおり暗いまま。**
  写真の上に白い文字を置いているので、ここまで白くすると文字が消える。
  ヒーローの中だけ、暗いときの色を上書きしてある（下の .theme-light .hero）。

  戻すときは、index.html の body から theme-light を外すだけ。
*/
  body.theme-light{
    --ink:#FFFFFF;        /* いちばん奥。ページの地 */
    --ink-2:#F5F2ED;      /* 一段手前。帯になる章 */
    --ink-3:#EBE6DE;      /* さらに手前。写真の下地 */
    --paper:#1E1A17;      /* 文字 */
    --mute:#6B625A;       /* 補足の文字 */
    --metal:#9A9189;      /* いちばん控えめな文字 */
    --accent:oklch(52% 0.19 27);      /* 押すところ。白地でも沈まない濃さ */
    --accent-dim:oklch(44% 0.16 27);
    --brass:#8A6A38;      /* 枠の印・小さな見出し。白地で読める濃さ */

    --ink-rgb:255 255 255;
    --paper-rgb:30 26 23;
    --brass-rgb:138 106 56;
  }

  /* ヒーローの中だけ、暗いときの色に戻す。写真の上の白文字を守るため */
  .theme-light .hero{
    --ink-rgb:12 10 9;
    --paper:#F4F0E9;
    --paper-rgb:244 240 233;
    --mute:#A79E93;
    --metal:#6E655C;
    --brass:#B99256;
    --brass-rgb:185 146 86;
    color:var(--paper);
  }

  /* ナビ。ヒーローの上にいるあいだは暗いまま、下へ進むと白くなる */
  .theme-light .nav:not(.solid):not(.open){
    background:linear-gradient(to bottom,rgb(12 10 9 / .92),rgb(12 10 9 / 0));
    color:#F4F0E9;
  }
  .theme-light .nav:not(.solid):not(.open) .nav-toggle{border-color:rgb(244 240 233 / .28);color:#F4F0E9}
  .theme-light .nav:not(.solid):not(.open) .nav-toggle .bars i{background:#F4F0E9}
  .theme-light .nav.solid{
    background:rgb(255 255 255 / .92);
    border-bottom:1px solid rgb(var(--paper-rgb) / .12);
  }

/*
  「AIで事業をお手伝い」のページだけ、操縦席の計器盤（HUD）の配色にする。
  <body class="theme-hud"> が付いているページにだけ効く。

  トップページは、いままでの焦げ茶＋真鍮のまま。
  見る人が違うため（トップは名刺から来たご家族、AIページは事業者の方）。
  戻すときは、AIページの body から theme-hud を外すだけ。
*/
  body.theme-hud{
    --ink:#04080E;        /* いちばん奥。ページの地 */
    --ink-2:#0A141D;      /* 一段手前 */
    --ink-3:#0E1C28;      /* さらに手前。囲み */
    --paper:#DFF1FB;      /* 文字。白より少し青い */
    --mute:#7EA6BD;       /* 補足の文字 */
    --metal:#4A6B80;      /* いちばん控えめな文字 */
    --accent:oklch(74% 0.14 215);      /* 押すところ。計器の水色 */
    --accent-dim:oklch(62% 0.13 215);
    --brass:#FFB648;      /* 小さな見出し・枠の印。計器の琥珀色 */

    --ink-rgb:4 8 14;
    --paper-rgb:223 241 251;
    --brass-rgb:255 182 72;

    /* 発光の色。水色の線に合わせてある */
    --glow:rgb(125 220 255 / .35);
    --glow-strong:rgb(125 220 255 / .55);
  }

  *{box-sizing:border-box}
  /* 上に固定したナビの分だけ、行き先の見出しが隠れないよう余白をとる */
  html{scroll-behavior:smooth;scroll-padding-top:72px}
  body{
    margin:0;background:var(--ink);color:var(--paper);
    font-family:'Noto Sans JP',sans-serif;-webkit-font-smoothing:antialiased;
    overflow-x:hidden;

    /* 日本語の改行を、意味のかたまりで折り返す。
       これがないと「お手伝いできま／す。」のように語の途中で切れる。
       対応していないブラウザでは、これまでどおりの折り返しになるだけ。 */
    word-break:auto-phrase;
    line-break:strict;
    text-wrap:pretty;
  }
  /* 見出しは、最後の行に1語だけ残らないよう均等に割る */
  h1,h2,h3,h4{text-wrap:balance}
  a{color:inherit;text-decoration:none}
  .hud{font-family:'DotGothic16',monospace;letter-spacing:.14em;font-size:var(--hud);line-height:1}
  .px{display:block;image-rendering:pixelated;shape-rendering:crispEdges}

  /* --- ドット絵のアニメーション ---
     6コマを横に並べた1枚を、1コマずつ横にずらして見せる。
     ずらす量は「%」ではなく1コマの幅そのもので指定すること。
     %にすると、画像が枠より大きいときに計算の基準が変わり、
     コマの途中で止まって「ちらついているだけ」に見える。 */
  .sprite{flex:0 0 auto;
    --fw:208px;                                  /* 1コマの幅 */
    --n:6;                                       /* コマ数。絵ごとに変える */
    width:var(--fw);
    --aw:32; --ah:28;                            /* 元絵の縦横。絵ごとに変える */
    height:calc(var(--fw) * var(--ah) / var(--aw));
    background-repeat:no-repeat;
    background-size:calc(var(--fw) * var(--n)) 100%;
    background-position:0 0;
    image-rendering:pixelated;
    animation-name:sprite;
    animation-timing-function:steps(6);
    animation-iteration-count:infinite;
  }
  @keyframes sprite{to{background-position:calc(var(--fw) * var(--n) * -1) 0}}
  .typing{background-image:url(/pixel/akada-typing.png);
    --n:6;animation-timing-function:steps(6);animation-duration:1.25s}
  .with-anim{display:flex;gap:clamp(20px,4vw,48px);align-items:center;justify-content:space-between}
  .with-anim .txt{min-width:0}
  /* 撮影は10コマ。持っている→構える→光る→下ろす、のひと続き */
  /* お店から出てきてお辞儀する。元絵は24×30の12コマ */
  .shopbow{background-image:url(/pixel/akada-shop.png);
    --n:12;--aw:24;--ah:30;animation-timing-function:steps(12);animation-duration:3.6s}
  .cta-row{display:flex;align-items:center;gap:clamp(16px,3vw,32px)}
  .cta-row .shopbow{--fw:96px}

  .shooting{background-image:url(/pixel/akada-shoot.png);
    --n:10;animation-timing-function:steps(10);animation-duration:2.8s}

  /* ---------- 共通：RPGウィンドウ枠 ---------- */
  .frame{position:relative;border:1px solid rgb(var(--paper-rgb) / .22);background:rgb(var(--ink-rgb) / .42)}
  .frame::before{content:"";position:absolute;inset:3px;border:1px solid rgb(var(--paper-rgb) / .10);pointer-events:none}
  .corner{position:absolute;width:9px;height:9px;border:2px solid var(--brass);opacity:.85}
  .corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
  .corner.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
  .corner.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
  .corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0}

  /* ---------- ナビ ---------- */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:80;
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 28px;
    background:linear-gradient(to bottom,rgb(var(--ink-rgb) / .92),rgb(var(--ink-rgb) / 0));
    transition:background .3s ease,backdrop-filter .3s ease;
  }
  .nav.solid{background:rgb(var(--ink-rgb) / .9);backdrop-filter:blur(10px);border-bottom:1px solid rgb(var(--paper-rgb) / .1)}
  .nav-name{display:flex;align-items:center;gap:10px;font-weight:900;font-size:16px;letter-spacing:.02em}
  .nav-links{display:flex;gap:22px}
  .nav-links a{opacity:.72;transition:opacity .2s ease,color .2s ease}
  .nav-links a:hover{opacity:1;color:var(--brass)}
  .nav-toggle{display:none}

  /* 画面がせまいときは、行き先を全部しまってボタンで開ける。
     ここを1040pxにしてあるのは、9つの行き先が1行に収まらなくなるのがこのあたりだから。 */
  @media (max-width:1040px){
    .nav-toggle{
      display:inline-flex;align-items:center;gap:10px;
      background:transparent;border:1px solid rgb(var(--paper-rgb) / .28);color:var(--paper);
      padding:10px 14px;cursor:pointer;font-family:inherit;
    }
    .nav-toggle .bars{display:flex;flex-direction:column;gap:4px;width:16px}
    .nav-toggle .bars i{display:block;height:2px;background:var(--paper);transition:transform .2s ease,opacity .2s ease}
    .nav.open .nav-toggle{border-color:var(--brass);color:var(--brass)}
    .nav.open .nav-toggle .bars i{background:var(--brass)}
    .nav.open .nav-toggle .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
    .nav.open .nav-toggle .bars i:nth-child(2){opacity:0}
    .nav.open .nav-toggle .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
    /* 開いているあいだは、うしろの写真や大きな文字が透けないよう、しっかり塗りつぶす */
    .nav.open{background:var(--ink)}
    .nav-links{
      position:absolute;top:100%;left:0;right:0;
      flex-direction:column;gap:0;
      padding:6px 18px 16px;
      background:var(--ink);
      border-top:1px solid rgb(var(--paper-rgb) / .12);
      border-bottom:1px solid rgb(var(--paper-rgb) / .14);
      max-height:calc(100svh - 58px);overflow:auto;
      opacity:0;visibility:hidden;transform:translateY(-10px);
      transition:opacity .22s ease,transform .22s ease,visibility .22s;
    }
    .nav.open .nav-links{opacity:1;visibility:visible;transform:translateY(0)}
    .nav-links a{opacity:1;padding:15px 4px;font-size:15px;border-bottom:1px solid rgb(var(--paper-rgb) / .08)}
    /* 相談窓口だけは、すぐ押せるように押しボタンの形にする */
    .nav-links .to-contact{
      border-bottom:0;margin-top:14px;padding:16px;text-align:center;
      background:var(--accent);color:#fff;font-size:15px;
    }
    .nav-links .to-contact:hover{background:var(--accent-dim);color:#fff}
  }

  /* ---------- ヒーロー ---------- */
  .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
  .hero-bg{position:absolute;inset:-4% -4% -4% -4%;z-index:0;will-change:transform}
  .hero-bg img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity 2s ease;filter:saturate(.82) contrast(1.05);
  }
  .hero-bg img.on{opacity:1}
  .hero-veil{
    position:absolute;inset:0;z-index:1;
    background:
      linear-gradient(to right,rgb(var(--ink-rgb) / .94) 0%,rgb(var(--ink-rgb) / .78) 46%,rgb(var(--ink-rgb) / .34) 100%),
      linear-gradient(to top,rgb(var(--ink-rgb) / .96) 0%,rgb(var(--ink-rgb) / 0) 38%);
  }
  /* 走査線：うっすらとゲーム画面の質感 */
  .scan{
    position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
    background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 3px,rgba(0,0,0,.18) 3px 4px);
  }
  .hero-inner{position:relative;z-index:3;width:100%;max-width:1200px;margin:0 auto;padding:120px 32px 96px}
  .hero-label{
    display:inline-flex;align-items:center;gap:9px;color:var(--brass);
    border:1px solid rgb(var(--brass-rgb) / .45);padding:9px 14px;margin-bottom:26px;
  }
  /* 入口のラベルに置く、お店のドット絵。暖簾のかかった店先 */
  .shop-mark{width:44px;height:44px;image-rendering:pixelated;margin:-11px 4px -11px -4px;flex:0 0 auto}

  .hero-name-ja{font-size:17px;font-weight:700;letter-spacing:.34em;color:var(--mute);margin:0 0 10px}
  h1{
    font-size:clamp(38px,7.4vw,86px);font-weight:900;line-height:1.02;letter-spacing:.01em;
    margin:0 0 22px;text-shadow:0 2px 24px rgba(0,0,0,.6);
  }
  h1 .thin{display:block;font-size:.46em;font-weight:700;letter-spacing:.06em;color:var(--paper);opacity:.95}
  /* 名前のつぎに、いちばん大きく出す一言。ここで「何をしてくれる人か」を伝える */
  .hero-lead{
    font-size:clamp(19px,3.1vw,30px);font-weight:900;line-height:1.75;letter-spacing:.01em;
    margin:0 0 18px;max-width:22em;text-shadow:0 2px 20px rgba(0,0,0,.6);
  }
  .hero-lead .em{color:var(--brass)}
  .hero-msg{
    font-size:clamp(14.5px,1.9vw,17px);line-height:2.05;color:rgb(var(--paper-rgb) / .86);
    margin:0 0 20px;max-width:32em;
  }
  /* 肩書きは、一言のあとに小さく添えるだけ */
  .roles{display:flex;flex-wrap:wrap;gap:8px 0;align-items:center;margin:0 0 32px;line-height:1.6}
  .roles span{font-size:12px;letter-spacing:.12em;color:var(--mute)}
  .roles i{display:inline-block;width:4px;height:4px;background:var(--metal);margin:0 12px;transform:rotate(45deg)}
  .cta{
    display:inline-flex;align-items:center;gap:12px;
    background:var(--accent);color:#fff;font-weight:700;font-size:16px;
    padding:17px 34px;border:0;cursor:pointer;
    box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 14px 34px -16px rgba(0,0,0,.9);
    transition:background .2s ease,transform .2s ease;
  }
  .cta:hover{background:var(--accent-dim);transform:translateY(-2px)}
  .cta .tri{width:0;height:0;border-left:8px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}

  /* 画面四隅のHUD */
  .hud-corner{position:absolute;z-index:4;color:var(--paper);opacity:.85;display:flex;align-items:center;gap:8px}
  .hud-corner.tl{top:78px;left:28px}
  .hud-corner.tr{top:78px;right:28px}
  .dot{width:8px;height:8px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px var(--accent);animation:blink 2.2s infinite}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
  .scroll-hint{
    position:absolute;z-index:4;left:50%;bottom:26px;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--mute);
  }
  .scroll-hint .arrow{width:9px;height:9px;border-right:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(45deg);animation:bob 1.8s infinite}
  @keyframes bob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(4px,4px)}}

  /* ---------- いま、やっていること（NOW） ---------- */
  .now{position:relative;background:var(--ink-2);padding:clamp(64px,9vw,112px) 32px;border-top:1px solid rgb(var(--paper-rgb) / .08)}
  .now::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(1000px 420px at 18% 0%,rgb(var(--brass-rgb) / .09),transparent 70%)}
  .wrap{position:relative;z-index:1;max-width:1100px;margin:0 auto}
  .sec-head{display:flex;align-items:baseline;gap:16px;margin:0 0 32px}
  .sec-head .en{color:var(--accent);letter-spacing:.2em}
  .sec-head h2{font-size:clamp(26px,4vw,38px);font-weight:900;margin:0;letter-spacing:.02em}
  .sec-note{color:var(--mute);font-size:14px;margin:-18px 0 34px}

  .status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px}
  .stat{padding:20px 22px}
  .stat .k{color:var(--brass);margin-bottom:12px}
  .stat .v{font-size:clamp(17px,2.4vw,22px);font-weight:900;letter-spacing:.02em;line-height:1.4}
  .stat .s{font-size:12px;color:var(--mute);margin-top:7px;letter-spacing:.04em}
  .v-active{display:inline-flex;align-items:center;gap:10px;color:oklch(78% 0.17 145)}
  .v-active .dot{background:oklch(72% 0.19 145);box-shadow:0 0 10px oklch(72% 0.19 145)}

  /* 主な活動は大きなカード、そのほかは下に小さく並べる */
  .pick-head{display:flex;align-items:center;justify-content:space-between;color:var(--brass);margin:0 0 12px;padding:0 2px}
  .pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
  .pick-card{
    display:flex;flex-direction:column;align-items:flex-start;padding:24px 22px 20px;
    transition:background .2s ease,border-color .2s ease,transform .2s ease;
  }
  .pick-card:hover{background:rgb(var(--paper-rgb) / .05);border-color:rgb(var(--brass-rgb) / .5);transform:translateY(-2px)}
  .pick-card .ico{width:34px;height:34px;color:var(--paper);margin-bottom:16px}
  .pick-card .k{font-family:'DotGothic16',monospace;letter-spacing:.14em;font-size:var(--hud);line-height:1;color:var(--brass);margin-bottom:10px}
  .pick-card .t{font-size:clamp(16px,2vw,19px);font-weight:900;line-height:1.6;letter-spacing:.02em}
  .pick-card .d{font-size:13.5px;color:var(--mute);line-height:1.9;margin-top:9px}
  .pick-card .go{margin-top:auto;padding-top:18px;font-size:12px;color:var(--brass);letter-spacing:.08em}

  .quests{padding:8px 0 4px}
  .etc .quest .t{font-size:14px}
  .quest-bar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 22px;border-bottom:1px solid rgb(var(--paper-rgb) / .1);color:var(--brass);
  }
  .quest{
    display:flex;align-items:center;gap:16px;padding:16px 22px;
    border-bottom:1px solid rgb(var(--paper-rgb) / .07);transition:background .2s ease;
  }
  .quest:last-child{border-bottom:0}
  .quest:hover{background:rgb(var(--paper-rgb) / .04)}
  .quest .ico{flex:0 0 auto;width:28px;height:28px;color:var(--paper)}
  .quest .body{min-width:0;flex:1}
  .quest .body{display:flex;flex-direction:column}
  .quest .t{font-size:15px;font-weight:700;letter-spacing:.02em}
  .quest .d{font-size:13px;color:var(--mute);margin-top:4px;line-height:1.7}
  .quest .go{flex:0 0 auto;font-size:12px;color:var(--brass);letter-spacing:.08em;white-space:nowrap;opacity:.9}

  .making{display:flex;gap:16px;align-items:flex-start;margin-top:22px;padding:22px}
  .making .ico{flex:0 0 auto;width:30px;height:30px}
  .making .k{color:var(--accent);margin-bottom:10px}
  .making .t{font-size:15px;font-weight:700;line-height:1.8}
  .making .d{font-size:13px;color:var(--mute);margin-top:6px;line-height:1.8}

  .making .play{
    display:inline-flex;align-items:center;gap:9px;margin-top:14px;
    border:1px solid var(--brass);color:var(--brass);
    font-size:13px;font-weight:700;letter-spacing:.06em;padding:10px 18px;
    transition:background .2s ease,color .2s ease;
  }
  .making .play:hover{background:var(--brass);color:var(--ink)}
  .making .play .tri-s{width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}

  /* ---------- ここから下：各セクション共通 ---------- */
  .sec{position:relative;padding:clamp(60px,8vw,104px) 32px;border-top:1px solid rgb(var(--paper-rgb) / .08)}
  .sec.alt{background:var(--ink-2)}
  details summary{list-style:none;cursor:pointer}
  details summary::-webkit-details-marker{display:none}
  .mark{margin-left:auto;flex:0 0 auto;color:var(--brass);font-size:12px;transition:transform .2s ease}
  details[open] > summary .mark{transform:rotate(90deg)}

  /* ---------- 店主について ---------- */
  .about{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
  .about-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;filter:saturate(.88) contrast(1.02)}
  .about-photo .frame{padding:8px}
  .card-list{margin:14px 0 0;padding:16px 18px}
  .card-list .row{display:flex;gap:14px;padding:7px 0;font-size:13px;border-bottom:1px dotted rgb(var(--paper-rgb) / .14)}
  .card-list .row:last-child{border-bottom:0}
  .card-list .row .k{flex:0 0 76px;color:var(--brass)}
  .card-list .row .v{color:rgb(var(--paper-rgb) / .9);min-width:0}
  .about-body p{font-size:15.5px;line-height:2.1;color:rgb(var(--paper-rgb) / .86);margin:0 0 20px}
  .about-body p:last-child{margin-bottom:0}
  .about-quote{margin:30px 0 0;padding:6px 0 6px 20px;border-left:2px solid var(--accent);
    font-size:16px;line-height:2.05;color:var(--paper)}

  /* ---------- 活動の記録 ---------- */
  .log + .log{margin-top:14px}
  .log-bar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 22px;border-bottom:1px solid rgb(var(--paper-rgb) / .1);color:var(--brass);
  }
  /* 主な活動のほうを目立たせたいので、その他はひかえめにする */
  .etc-log{background:rgb(var(--ink-rgb) / .24)}
  .etc-log .ttl{font-size:15px}
  .log > details{border-bottom:1px solid rgb(var(--paper-rgb) / .09)}
  .log > details:last-child{border-bottom:0}
  .log summary{display:flex;align-items:center;gap:18px;padding:18px 22px;transition:background .2s ease}
  .log summary:hover{background:rgb(var(--paper-rgb) / .04)}
  .log .no{flex:0 0 auto;color:var(--brass)}
  .log .ttl{display:block;font-size:16px;font-weight:700;letter-spacing:.02em}
  .log .sub{display:block;font-size:13px;color:var(--mute);margin-top:3px}
  .log .panel{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:26px;padding:2px 22px 28px 22px}
  .log .panel img{width:100%;height:190px;object-fit:cover;display:block}
  /* 写真のかわりにドット絵を置くとき用の枠 */
  .panel-art{display:flex;align-items:center;justify-content:center;min-height:190px;
    background:rgb(var(--ink-rgb) / .45);border:1px solid rgb(var(--paper-rgb) / .08)}
  .panel-art .sprite{--fw:172px}
  .log .panel p{margin:0 0 16px;font-size:14.5px;line-height:2;color:rgb(var(--paper-rgb) / .84)}
  .log .next summary{color:var(--mute)}
  .btn-line{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--brass);color:var(--brass);
    font-size:13px;font-weight:700;letter-spacing:.06em;padding:10px 18px;transition:background .2s ease,color .2s ease}
  .btn-line:hover{background:var(--brass);color:var(--ink)}
  .btn-line .tri-s{width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}

  /* ---------- 途中の相談窓口 ---------- */
  .cta-band{padding:clamp(44px,6vw,72px) 32px}
  .band{display:flex;align-items:center;gap:clamp(20px,4vw,44px);padding:clamp(24px,3.4vw,36px)}
  .band-txt{flex:1;min-width:0}
  .band .k{color:var(--accent);margin-bottom:12px}
  .band h2{font-size:clamp(19px,2.6vw,26px);font-weight:900;line-height:1.7;letter-spacing:.01em;margin:0 0 12px}
  .band p{margin:0;font-size:14px;line-height:1.95;color:rgb(var(--paper-rgb) / .82)}
  .band-act{flex:0 0 auto;display:flex;flex-direction:column;gap:12px;align-items:stretch}
  .band-act .cta{justify-content:center;white-space:nowrap}
  .band-sub{font-size:12.5px;color:var(--brass);text-align:center;letter-spacing:.04em}
  .band-sub:hover{text-decoration:underline}

  /*
    サイト診断の帯。上の相談の帯と続けて置くので、
    **地の色を変えて、別のものだと分かるようにしてある。**
    同じ見た目で2つ並ぶと、同じことを2回言っているように見えるため。
    上が「相談」、ここは「見てもらうだけ」。段がひとつ下がる。
  */
  .cta-band.tight{padding-top:0}
  .band.check-band{
    background:
      linear-gradient(180deg, rgb(var(--brass-rgb) / .16), rgb(var(--brass-rgb) / .06)),
      var(--ink);
    border-color:rgb(var(--brass-rgb) / .62);
  }
  .check-band .k{color:var(--brass)}
  .br-sp{display:none}
  @media (max-width:760px){
    .br-sp{display:inline}
  }

  /* ---------- お困りごと ---------- */
  .quest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
  .qcard summary{display:flex;align-items:flex-start;gap:14px;padding:22px}
  .qcard summary:hover{background:rgb(var(--paper-rgb) / .04)}
  .qcard .ask{font-size:16px;font-weight:700;line-height:1.75;min-width:0}
  .qcard .q{flex:0 0 auto;color:var(--accent);margin-top:2px}
  .qcard .ans{padding:0 22px 22px 22px}
  .qcard .ans .to{color:var(--brass);margin-bottom:10px}

  /*
    AIページの「まず、いまのサイトを見るところから」。サイト診断への入口。

    **この箱だけ、地の色を変えて浮かせてある。**
    まわりの囲みと同じ見た目だと、並んだ資料の1枚に見えて素通りされるため。
    地を水色寄りにして、枠と角の印も水色にそろえ、うっすら発光させている。
  */
  .frame.check{
    padding:26px 28px;
    border-color:rgb(125 220 255 / .55);
    background:
      linear-gradient(180deg, rgb(125 220 255 / .11), rgb(125 220 255 / .035)),
      rgb(var(--ink-rgb) / .62);
    box-shadow:0 0 34px -12px var(--glow-strong, rgb(125 220 255 / .5));
  }
  .frame.check::before{border-color:rgb(125 220 255 / .18)}
  /* 角の印も、この箱だけ水色にそろえる（ほかは琥珀色） */
  .check .corner{border-color:var(--accent);opacity:1}

  .check .to{color:var(--accent);margin-bottom:10px;font-size:12px;letter-spacing:.1em}
  .check h4{margin:0 0 12px;font-size:1.2rem}
  .check p{margin:0 0 14px;line-height:1.95}
  .check p.small{font-size:.86rem;color:var(--mute);line-height:1.8}
  .check .btn-fill{margin-top:4px}

  @media (max-width:760px){
    .frame.check{padding:20px}
  }
  .qcard .ans p{margin:0 0 14px;font-size:14px;line-height:1.95;color:rgb(var(--paper-rgb) / .84)}

  /* ---------- 道具箱 ---------- */
  .tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
  .tool summary{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 12px;text-align:center}
  .tool summary:hover{background:rgb(var(--paper-rgb) / .05)}
  .tool .ico{width:32px;height:32px;color:var(--paper)}
  .tool .nm{font-size:13px;font-weight:700;letter-spacing:.02em}
  .tool .en{font-size:10px;color:var(--brass);letter-spacing:.14em}
  .tool .txt{padding:0 16px 20px;font-size:13px;line-height:1.95;color:rgb(var(--paper-rgb) / .82)}

  /* ---------- 作品 ---------- */
  .filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
  .filters button{font-family:'DotGothic16',monospace;letter-spacing:.1em;font-size:13px;
    background:transparent;border:1px solid rgb(var(--paper-rgb) / .22);color:var(--paper);
    padding:10px 18px;cursor:pointer;transition:background .2s ease,border-color .2s ease}
  .filters button:hover{border-color:var(--brass);color:var(--brass)}
  .filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
  .shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .shots figure{margin:0;overflow:hidden;background:var(--ink-3)}
  .shots figure[hidden]{display:none}
  .shots img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .5s ease;filter:saturate(.95)}
  .shots figure:hover img{transform:scale(1.05)}

  /* ---------- よくある質問 ---------- */
  .faq > details{border-bottom:1px solid rgb(var(--paper-rgb) / .09)}
  .faq > details:last-child{border-bottom:0}
  .faq summary{display:flex;align-items:center;gap:14px;padding:18px 22px;font-size:15px;font-weight:700}
  .faq summary:hover{background:rgb(var(--paper-rgb) / .04)}
  .faq .a{padding:0 22px 22px 56px;font-size:14px;line-height:2;color:rgb(var(--paper-rgb) / .82)}
  .faq .q{flex:0 0 auto;color:var(--brass)}

  /* ---------- 相談窓口 ---------- */
  .talk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
  .talk .wide{grid-column:1 / -1}
  .talk .box{padding:26px}
  .talk .who{color:var(--brass);margin-bottom:12px}
  .talk h3{font-size:19px;font-weight:900;margin:0 0 10px;letter-spacing:.01em}
  .talk p{margin:0 0 18px;font-size:14px;line-height:1.95;color:rgb(var(--paper-rgb) / .82)}
  .talk .tel{font-size:26px;font-weight:900;letter-spacing:.02em;color:var(--paper);display:inline-block;margin-bottom:6px}
  .talk .note{font-size:12px;color:var(--mute);margin:0}
  .btn-fill{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;
    font-size:15px;font-weight:700;padding:15px 28px;transition:background .2s ease}
  .btn-fill:hover{background:var(--accent-dim)}
  .btn-fill .tri{width:0;height:0;border-left:8px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}

  /* ---------- AI案内人 ---------- */
  .guide-btn{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;align-items:center;gap:10px;
    background:var(--ink-3);color:var(--paper);border:1px solid var(--brass);
    padding:13px 18px;cursor:pointer;font-family:'DotGothic16',monospace;letter-spacing:.1em;font-size:13px;
    box-shadow:0 16px 34px -16px rgba(0,0,0,.9);transition:background .2s ease}
  .guide-btn:hover{background:var(--accent);border-color:var(--accent)}
  /* 相談窓口を見ているときは、電話番号に重ならないよう引っこめる */
  .guide-btn.away{opacity:0;pointer-events:none;transform:translateY(8px)}
  .guide-btn{transition:background .2s ease,opacity .3s ease,transform .3s ease}
  .guide-btn .ico{width:20px;height:20px;flex:0 0 auto}
  .navme{flex:0 0 auto;margin-bottom:-4px}
  .guide{position:fixed;right:22px;bottom:78px;z-index:71;width:min(330px,calc(100vw - 44px));
    background:var(--ink-2);border:1px solid var(--brass);box-shadow:0 26px 60px -20px rgba(0,0,0,.95)}
  .guide[hidden]{display:none}
  .guide .head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgb(var(--paper-rgb) / .14);color:var(--brass)}
  .guide .head .x{margin-left:auto;background:none;border:0;color:var(--mute);cursor:pointer;font-size:16px;padding:0 4px;font-family:inherit}
  .guide .body{padding:16px}
  .guide .body > p{margin:0 0 14px;font-size:13px;line-height:1.9;color:rgb(var(--paper-rgb) / .84)}
  .guide .ask-list{display:flex;flex-direction:column;gap:7px}
  .guide .ask-list a{border:1px solid rgb(var(--paper-rgb) / .18);padding:11px 13px;font-size:13px;line-height:1.6;transition:border-color .2s ease,color .2s ease}
  .guide .ask-list a:hover{border-color:var(--brass);color:var(--brass)}
  .guide .soon{margin:14px 0 0;font-size:11px;color:var(--mute);line-height:1.8}

  /* ---------- トップページに置いたドット絵 ---------- */
  /* 大きさは1コマの幅（--fw）で決まる */
  .me-shoot{--fw:150px}
  /* 引用のとなりに置く。文章と絵を上下の中心でそろえる */
  .quote-row{display:flex;gap:clamp(20px,3vw,44px);align-items:center;margin-top:30px}
  .quote-row .about-quote{margin-top:0;flex:1 1 auto;min-width:0}
  .me-type{--fw:132px;margin-left:auto;align-self:center}

  /* ---------- フッター ---------- */
  .foot{background:var(--ink);padding:56px 32px 96px;border-top:1px solid rgb(var(--paper-rgb) / .08)}
  .foot-in{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:flex-start}
  .foot .sites{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px}
  .foot .sites a{color:rgb(var(--paper-rgb) / .78)}
  .foot .sites a:hover{color:var(--brass)}
  .foot .cr{font-size:12px;color:var(--metal)}

  .wip{max-width:1100px;margin:0 auto;padding:40px 32px 72px;color:var(--metal);font-size:13px;text-align:center;letter-spacing:.1em}

  /* ---------- タブレット・スマホ ---------- */
  @media (max-width:900px){
    .hud-corner.tl,.hud-corner.tr{top:64px}
    .pick{grid-template-columns:1fr}
    .band{flex-direction:column;align-items:stretch;gap:22px}
    .status{grid-template-columns:1fr}
    .about{grid-template-columns:1fr;gap:28px}
    .about-photo{max-width:320px}
    .log .panel{grid-template-columns:1fr;gap:16px}
    .quest-grid{grid-template-columns:1fr}
    .tools{grid-template-columns:repeat(2,minmax(0,1fr))}
    .shots{grid-template-columns:repeat(3,minmax(0,1fr))}
    .talk{grid-template-columns:1fr}
  }
  @media (max-width:767px){
    :root{--hud:12px}
    .nav{padding:12px 18px}
    .hero-inner{padding:104px 20px 120px}
    .hud-corner.tl{left:18px}
    .hud-corner.tr{right:18px}
    .hero-msg{line-height:1.95}
    .cta{width:100%;justify-content:center}
    /* スマホは画面が細く、左右が大きく切られる。人が写っている中央寄りを
       見せたいので、1枚ずつ指定した位置より内側に寄せる。 */
    .hero-bg img{object-position:58% 50%!important}

    /* 肩書きが折り返すと区切りの菱形が行末に残るので、スマホでは間隔だけで区切る */
    .roles{gap:6px 18px}
    .roles i{display:none}
    .now{padding:56px 18px}
    .pick-card{padding:20px 18px 18px}
    .pick-card .ico{width:30px;height:30px;margin-bottom:12px}
    .quest{padding:14px 16px;gap:12px}
    .quest .go{display:none}
    .stat{padding:18px}
    .me-shoot{--fw:120px}
    .cta-row{flex-direction:column;align-items:flex-start;gap:18px}
    .cta-row .shopbow{--fw:88px}
    .quote-row{gap:16px}
    /* スマホでは、ドット絵を文章の下へ回して、文章に幅をぜんぶ使わせる */
    .making{flex-wrap:wrap}
    .making > div:not(.sprite){flex:1 1 calc(100% - 46px);min-width:0}
    .me-type{--fw:110px;margin:14px 0 0}
    .sec{padding:52px 18px}
    .log summary{padding:16px;gap:12px}
    .log-bar{padding:14px 16px}
    .log .panel{padding:2px 16px 22px}
    .panel-art{min-height:150px}
    .panel-art .sprite{--fw:140px}
    .cta-band{padding:44px 18px}
    .band{padding:20px}
    .qcard summary{padding:18px}
    .qcard .ans{padding:0 18px 18px}
    .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
    .faq summary{padding:16px}
    .faq .a{padding:0 16px 18px 16px}
    .talk .box{padding:20px}
    .btn-fill{width:100%;justify-content:center}
    .guide-btn{right:14px;bottom:14px}
    .guide{right:14px;bottom:68px}
    .foot{padding:44px 18px 90px}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    html{scroll-behavior:auto}
  }