/* 赤田佳史 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;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  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 rgba(244,240,233,.22);background:rgba(12,10,9,.42)}
  .frame::before{content:"";position:absolute;inset:3px;border:1px solid rgba(244,240,233,.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,rgba(12,10,9,.92),rgba(12,10,9,0));
    transition:background .3s ease,backdrop-filter .3s ease;
  }
  .nav.solid{background:rgba(12,10,9,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(244,240,233,.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)}

  /* ---------- ヒーロー ---------- */
  .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,rgba(12,10,9,.94) 0%,rgba(12,10,9,.78) 46%,rgba(12,10,9,.34) 100%),
      linear-gradient(to top,rgba(12,10,9,.96) 0%,rgba(12,10,9,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 rgba(185,146,86,.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}
  .roles{display:flex;flex-wrap:wrap;gap:8px 0;align-items:center;margin:0 0 30px}
  .roles span{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--paper);opacity:.88}
  .roles i{display:inline-block;width:5px;height:5px;background:var(--accent);margin:0 14px;transform:rotate(45deg)}
  .hero-msg{
    font-size:clamp(15px,2.1vw,19px);line-height:2.05;color:rgba(244,240,233,.9);
    margin:0 0 40px;max-width:30em;
  }
  .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 rgba(244,240,233,.08)}
  .now::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(1000px 420px at 18% 0%,rgba(185,146,86,.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)}

  .quests{padding:8px 0 4px}
  .quest-bar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 22px;border-bottom:1px solid rgba(244,240,233,.1);color:var(--brass);
  }
  .quest{
    display:flex;align-items:center;gap:16px;padding:16px 22px;
    border-bottom:1px solid rgba(244,240,233,.07);transition:background .2s ease;
  }
  .quest:last-child{border-bottom:0}
  .quest:hover{background:rgba(244,240,233,.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 rgba(244,240,233,.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 rgba(244,240,233,.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:rgba(244,240,233,.9);min-width:0}
  .about-body p{font-size:15.5px;line-height:2.1;color:rgba(244,240,233,.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 > details{border-bottom:1px solid rgba(244,240,233,.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:rgba(244,240,233,.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}
  .log .panel p{margin:0 0 16px;font-size:14.5px;line-height:2;color:rgba(244,240,233,.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}

  /* ---------- お困りごと ---------- */
  .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:rgba(244,240,233,.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}
  .qcard .ans p{margin:0 0 14px;font-size:14px;line-height:1.95;color:rgba(244,240,233,.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:rgba(244,240,233,.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:rgba(244,240,233,.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 rgba(244,240,233,.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 rgba(244,240,233,.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:rgba(244,240,233,.04)}
  .faq .a{padding:0 22px 22px 56px;font-size:14px;line-height:2;color:rgba(244,240,233,.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:rgba(244,240,233,.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 rgba(244,240,233,.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:rgba(244,240,233,.84)}
  .guide .ask-list{display:flex;flex-direction:column;gap:7px}
  .guide .ask-list a{border:1px solid rgba(244,240,233,.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 rgba(244,240,233,.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:rgba(244,240,233,.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){
    .nav-links{display:none}
    .hud-corner.tl,.hud-corner.tr{top:64px}
    .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}
    .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}
    .me-type{--fw:110px;margin:14px 0 0}
    .sec{padding:52px 18px}
    .log summary{padding:16px;gap:12px}
    .log .panel{padding:2px 16px 22px}
    .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}
  }