/* ギャラリーの外側だけを整える。見本そのものは preview.css と既存 pv 指定を維持。 */
:root{color-scheme:light;--bg:#f5f3ec;--ink:#252820;--dim:#62665c;--accent:#984329;--surface:#eae8df;--line:#d9d9cf;--gold:var(--accent);--shadow:0 18px 40px #23281e15}
:root[data-theme=dark]{color-scheme:dark;--bg:#171c18;--ink:#f5f3ec;--dim:#b5beb1;--accent:#e8a386;--surface:#252d26;--line:#3e493e;--shadow:0 18px 40px #0004}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg:#171c18;--ink:#f5f3ec;--dim:#b5beb1;--accent:#e8a386;--surface:#252d26;--line:#3e493e;--shadow:0 18px 40px #0004}}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans JP',sans-serif;font-size:16px;line-height:1.8;-webkit-text-size-adjust:100%}button,select{font:inherit;color:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-underline-offset:6px}button{border:0}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}.wrap{width:min(1168px,calc(100% - 112px));margin-inline:auto}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:600;margin:0 0 20px}.skip{position:fixed;left:20px;top:12px;z-index:100;transform:translateY(-150%);padding:10px;background:var(--bg)}.skip:focus{transform:none}
.masthead{display:flex;align-items:center;justify-content:space-between;padding-block:26px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.06em}.brand-mark{font-family:'Shippori Mincho',serif;font-size:34px;line-height:1.2}.brand small{display:block;font-size:10px;letter-spacing:.14em}.head-actions{display:flex;align-items:center;gap:30px;font-size:14px}.head-actions a{text-decoration:none}.head-actions a span{margin-left:8px}.icon-button{background:transparent;width:44px;height:44px;display:grid;place-items:center;font-size:24px;border-radius:50%}.icon-button:hover{background:var(--surface)}
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:54px;align-items:center;padding-top:30px;padding-bottom:78px}.hero-copy{padding-block:24px}.hero .eyebrow{color:var(--dim);margin-bottom:28px;font-size:11px}.hero h1{font-family:'Shippori Mincho',serif;font-weight:500;font-size:clamp(36px,5vw,64px);line-height:1.55;letter-spacing:-.045em;margin:0 0 24px;white-space:nowrap}.hero-description{font-size:15px;line-height:2.1;margin:0 0 28px;color:var(--dim)}.explore{display:inline-flex;align-items:center;justify-content:space-between;gap:48px;background:var(--accent);color:var(--bg);border-radius:3px;padding:13px 24px;font-size:14px;font-weight:600;text-decoration:none;transition:transform .28s,opacity .28s}.explore:hover{transform:translateY(-3px);opacity:.9}.edition{font-size:10px;color:var(--dim);letter-spacing:.08em;margin:26px 0 0}.edition-sep{margin:0 8px}.hero-art{padding:0;background:transparent;text-align:left;min-width:0;display:block}.hero-photo{display:block;position:relative;aspect-ratio:1.22;overflow:hidden;border-radius:4px;isolation:isolate;color:#fff}.hero-photo img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:50% 56%;transition:transform .4s}.hero-photo-shade{position:absolute;inset:0;background:linear-gradient(180deg,#101b194d,#101b1900 25%,#101b19bb 100%)}.hero-art:hover img{transform:scale(1.035)}.art-overline{position:absolute;top:26px;left:30px;font-size:10px;letter-spacing:.23em}.art-title{position:absolute;left:30px;bottom:84px;font-family:'Shippori Mincho',serif;font-size:36px;font-weight:500;line-height:1.65;letter-spacing:.07em}.art-bottom{position:absolute;bottom:28px;left:30px;right:30px;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.09em}.art-bottom>span{font-size:24px}.art-caption{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--dim);padding-top:14px}.hero-art:active{transform:scale(.99)}
.gallery-section{scroll-margin-top:25px}.gallery-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.gallery-heading .eyebrow{margin-bottom:6px;font-size:10px;color:var(--dim)}h2{font-family:'Shippori Mincho',serif;font-weight:500;font-size:28px;letter-spacing:.03em;margin:0}.count{font-size:13px;color:var(--dim);margin:0 0 3px}.count strong{font-size:25px;font-weight:500;color:var(--ink);margin-right:3px}.filter-panel{padding-bottom:30px}.filter-row{display:flex;align-items:baseline;gap:24px;margin-bottom:12px}.filter-label{flex:0 0 70px;font-size:12px;color:var(--dim)}.frow{display:flex;flex-wrap:wrap;gap:4px 6px}.chip{padding:7px 13px;min-height:40px;background:transparent;border-radius:3px;font-size:13px;color:var(--dim);transition:transform .24s,opacity .24s}.chip:hover{background:var(--surface)}.chip[aria-pressed=true]{background:var(--ink);color:var(--bg);font-weight:500}.chip:active{transform:scale(.96)}.filter-tools{display:flex;align-items:center;gap:25px;padding-top:9px;padding-left:94px;min-height:53px}.select-label{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--dim);min-width:0}.select-label select{border:0;border-radius:0;background:transparent;color:var(--ink);padding:10px 24px 10px 0;font-size:13px;max-width:180px;cursor:pointer}.text-button{background:transparent;padding:8px 0;min-height:44px;color:var(--dim);font-size:12px}.text-button span{margin-left:8px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 24px;min-height:300px}.gsec{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;padding-top:20px;margin:10px 0 -10px}.gsec:first-child{padding-top:0;margin-top:0}.gsec h3{font-size:16px;font-weight:500;margin:0}.gsec span{font-size:11px;letter-spacing:.06em;color:var(--dim)}.card{min-width:0;position:relative;transition:transform .3s,opacity .3s}.card.opening{opacity:0;transform:translateY(18px)}.card-open{display:block;width:100%;padding:0;background:none;text-align:left;border-radius:3px;color:var(--ink)}.card-visual{position:relative;overflow:hidden;border-radius:3px;background:var(--surface);box-shadow:0 3px 10px #00000008}.card .pv{transition:transform .35s,opacity .3s}.card-open:hover .pv{transform:scale(1.025)}.card-open:active .pv{transform:scale(.985)}.card-arrow{position:absolute;bottom:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;background:var(--bg);color:var(--ink);border-radius:50%;font-size:20px;opacity:0;transform:translateY(7px);transition:transform .28s,opacity .28s}.card-open:hover .card-arrow,.card-open:focus-visible .card-arrow{transform:none;opacity:1}.card-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:15px 0 5px;font-size:10px;color:var(--dim);letter-spacing:.08em}.card-title{display:block;font-size:15px;font-weight:600;line-height:1.6;letter-spacing:.01em}.card-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.85;color:var(--dim);margin-top:5px}.card-tags{display:flex;flex-wrap:wrap;gap:0 10px;padding-top:6px}.tag-button{padding:3px 0;min-height:32px;font-size:11px;color:var(--dim);background:transparent}.tag-button:hover,.tag-button[aria-pressed=true]{text-decoration:underline;text-underline-offset:4px;color:var(--accent)}.badge{position:absolute;left:12px;top:12px;z-index:2;font-size:10px;letter-spacing:.04em;color:var(--ink);background:var(--bg);padding:4px 9px}.empty{grid-column:1/-1;padding:60px 0;text-align:center}.empty h3{font-family:'Shippori Mincho',serif;font-weight:500;font-size:24px}.empty p{font-size:14px;color:var(--dim)}.empty button{background:var(--ink);color:var(--bg);padding:12px 24px;border-radius:3px}.skeleton span{display:block;background:var(--surface);aspect-ratio:9/16;animation:breathe 1.2s ease infinite alternate}.skeleton i{display:block;width:65%;height:14px;background:var(--surface);margin-top:18px}.pv.loading::before{content:'';position:absolute;inset:0;background:var(--surface);z-index:8;animation:breathe 1.2s ease infinite alternate;pointer-events:none}.pv.loading>img{opacity:0}.pv img{aspect-ratio:3/4}.photo-error{position:absolute;bottom:4px;right:4px;z-index:9;background:var(--bg);color:var(--ink);font:10px 'Noto Sans JP',sans-serif;padding:4px}@keyframes breathe{from{opacity:.55}to{opacity:1}}
.guide{padding-block:100px 88px;margin-top:60px}.guide .eyebrow{color:var(--dim);font-size:10px;margin-bottom:12px}.guide h2{font-size:30px}.guide ol{display:flex;gap:44px;padding:0;margin:30px 0;list-style:none;font-size:14px}.guide li span{font-family:'Shippori Mincho',serif;font-size:24px;margin-right:12px;color:var(--accent)}.guide>a{font-size:13px}.footer-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.footer-line p{font-size:14px}.footer-line>span{font-size:10px;letter-spacing:.12em}footer{padding-block:30px 44px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}footer p{margin:0}.credits{margin-top:20px;max-width:960px;font-size:11px}.credits summary{cursor:pointer;min-height:32px}.credits p{padding-top:12px;line-height:2;overflow-wrap:anywhere}
.sheet{padding:0;color:var(--ink);background:var(--bg);border:0;border-radius:7px;width:min(1120px,calc(100vw - 64px));max-width:none;max-height:calc(100dvh - 56px);overflow:auto;overscroll-behavior:contain;box-shadow:var(--shadow)}.sheet::backdrop{background:#090f0cd9;backdrop-filter:blur(7px)}.sheet[open]{animation:dialog-in .3s ease}.sheet[open]::backdrop{animation:fade-in .3s ease}@keyframes dialog-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes fade-in{from{opacity:0}to{opacity:1}}.sh-head{position:sticky;top:0;z-index:12;display:flex;align-items:center;justify-content:space-between;padding:16px 25px;background:var(--bg);gap:20px}.sh-label{font-size:11px;letter-spacing:.12em;color:var(--dim)}.sh-controls{display:flex;gap:5px;align-items:center}.sh-controls .icon-button{font-size:20px}.sh-position{font-size:11px;color:var(--dim);margin-inline:8px}.sh-cols{display:grid;grid-template-columns:1.1fr 1fr;gap:42px;padding:4px 32px 32px;align-items:start}.sh-preview-side{position:sticky;top:90px;padding:22px;background:var(--surface);display:flex;align-items:center;flex-direction:column}.sh-pv{width:min(100%,330px);overflow:hidden;box-shadow:var(--shadow)}.sh-preview-note{font-size:10px;color:var(--dim);text-align:center;margin:16px 0 0}.detail-en{font-size:11px;color:var(--dim);letter-spacing:.12em;margin:10px 0}.detail-content h2{font-family:'Shippori Mincho',serif;font-size:30px;line-height:1.6;margin:0 0 18px}.detail-content .detail-best{font-size:14px;line-height:1.9;margin:0 0 16px}.detail-tags{font-size:12px;color:var(--dim);margin:0 0 24px}.cta{display:flex;flex-direction:column;gap:10px}.btn{display:block;width:100%;font:inherit;font-size:14px;font-weight:500;text-align:center;text-decoration:none;padding:15px 16px;border-radius:3px;transition:transform .25s,opacity .25s}.btn:hover{transform:translateY(-2px);opacity:.9}.btn.go{background:var(--accent);color:var(--bg)}.btn.sub{background:var(--surface);color:var(--ink)}.cta-note{font-size:12px;line-height:1.9;color:var(--dim);margin:14px 0 24px}.detail-section{margin-top:22px}.detail-section summary{cursor:pointer;font-size:14px;font-weight:500;padding:10px 0;list-style:none;display:flex;justify-content:space-between}.detail-section summary::after{content:'＋';font-weight:400}.detail-section[open] summary::after{content:'−'}.detail-section p{font-size:13px;line-height:2}.detail-section pre{font:12px/2 'Noto Sans JP',sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0;color:var(--dim)}.kv{display:grid;grid-template-columns:90px 1fr;gap:12px 16px;font-size:12px;line-height:1.9}.kv dt{color:var(--dim)}.kv dd{margin:0}.detail-warning{font-size:13px;padding-block:10px}.detail-warning strong{display:block;margin-bottom:6px}.sh-bar{display:none}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,12px);opacity:0;z-index:100;background:var(--ink);color:var(--bg);padding:12px 22px;border-radius:3px;font-size:13px;max-width:calc(100% - 40px);width:max-content;pointer-events:none;transition:transform .25s,opacity .25s}.toast.on{opacity:1;transform:translate(-50%,0)}.sheet .toast{position:sticky;bottom:20px;margin:0 auto;left:auto;transform:translateY(12px);max-width:calc(100% - 32px)}.sheet .toast.on{transform:none}.totop{position:fixed;right:22px;bottom:22px;background:var(--bg);box-shadow:var(--shadow);z-index:20}
@media(min-width:1600px){.hero h1{font-size:64px}}
@media(max-width:1000px){.wrap{width:calc(100% - 72px)}.hero{gap:30px}.hero h1{font-size:4.4vw}.art-title{font-size:29px}.art-bottom{font-size:9px}.grid{gap:30px 20px;grid-template-columns:repeat(3,minmax(0,1fr))}.sh-cols{gap:26px;padding:0 24px 24px}.sh-preview-side{padding:14px}.hero-description{font-size:13px}}
@media(max-width:700px){.wrap{width:calc(100% - 72px)}.masthead{padding-block:18px}.brand{font-size:12px;gap:8px}.brand-mark{font-size:29px}.brand small{font-size:8px}.head-actions{gap:8px;font-size:12px}.head-actions a span{margin-left:3px}.hero{grid-template-columns:1fr;gap:30px;padding-top:18px;padding-bottom:60px}.hero-copy{padding:0}.hero .eyebrow{font-size:9px;margin-bottom:17px}.hero h1{font-size:clamp(30px,8.8vw,58px);line-height:1.55;margin-bottom:19px}.hero-description{font-size:13px;line-height:2;margin-bottom:20px}.explore{padding:12px 18px;font-size:13px;gap:40px}.edition{font-size:9px;margin-top:18px}.hero-photo{aspect-ratio:1.15}.art-title{font-size:25px;left:22px;bottom:58px}.art-overline{left:22px;top:19px;font-size:8px}.art-bottom{left:22px;right:22px;bottom:17px;font-size:8px;letter-spacing:0}.art-caption{font-size:9px;gap:8px;padding-top:11px}.gallery-heading{margin-bottom:22px;gap:12px}.gallery-heading .eyebrow{font-size:8px}.gallery-heading h2{font-size:24px}.count{font-size:10px;white-space:nowrap}.count strong{font-size:20px}.filter-row{display:block;margin-bottom:16px}.filter-label{display:block;font-size:11px;margin-bottom:5px}.frow{flex-wrap:nowrap;overflow-x:auto;margin-inline:-36px;padding-inline:36px;scrollbar-width:thin;padding-bottom:5px;gap:5px}.chip{flex:0 0 auto;padding:7px 12px;min-height:40px;font-size:12px}.filter-tools{padding:0;gap:8px 14px;flex-wrap:wrap;align-items:start}.select-label{gap:8px;font-size:11px}.select-label select{font-size:12px;max-width:127px;padding-right:8px}.sort-label{margin-left:auto}.filter-panel{padding-bottom:22px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}.gsec{gap:10px;padding-top:15px;margin-bottom:-10px}.gsec h3{font-size:14px}.gsec span{font-size:10px}.card-meta{font-size:8px;margin-top:10px;gap:3px;letter-spacing:0}.card-title{font-size:12px;line-height:1.6}.card-description{font-size:10px;line-height:1.8;margin-top:4px}.card-tags{gap:0 8px;padding-top:4px}.tag-button{font-size:9px;min-height:32px}.card-arrow{display:none}.badge{font-size:8px;padding:3px 5px;left:7px;top:7px}.guide{padding-block:50px;margin-top:28px}.guide h2{font-size:23px;line-height:1.7}.guide ol{display:block;margin:23px 0}.guide li{padding-block:5px;font-size:13px}.guide li span{font-size:20px;margin-right:18px}.guide>a{font-size:12px}.footer-line{display:block}.footer-line>span{font-size:9px}.footer-line p{margin-bottom:8px;font-size:13px}footer{font-size:11px;padding-bottom:32px}.sheet{width:100%;max-height:96dvh;border-radius:12px 12px 0 0;margin:auto 0 0}.sh-head{padding:9px 18px}.sh-label{font-size:10px}.sh-controls{gap:0}.sh-position{font-size:10px;margin:0 3px}.sh-cols{grid-template-columns:1fr;gap:26px;padding:0 26px 24px}.sh-preview-side{position:static;padding:18px;max-width:100%}.sh-pv{width:min(100%,220px)}.sh-preview-note{margin-top:12px;font-size:9px}.detail-content h2{font-size:26px}.detail-en{margin-top:0}.detail-content .detail-best{font-size:14px}.detail-tags{margin-bottom:18px}.sh-bar{display:block;position:sticky;bottom:0;padding:12px 26px max(12px,env(safe-area-inset-bottom));background:var(--bg);z-index:10}.sh-bar .btn{padding:13px 12px;font-size:13px}.sheet .toast{z-index:15;bottom:84px}#goBtn{display:none}.totop{right:12px;bottom:12px}.sheet::backdrop{backdrop-filter:blur(3px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.card.opening{opacity:1;transform:none}}
@media(forced-colors:active){.chip[aria-pressed=true],.btn,.explore{outline:1px solid ButtonText}.card-visual{outline:1px solid CanvasText}}

/* 狭い画面では操作を揃え、カード名の読みやすさを保つ。 */
@media(max-width:700px){.filter-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}.select-label{display:block}.select-label select{display:block;width:100%;max-width:100%;font-size:12px}.sort-label{margin-left:0}.filter-tools .text-button{grid-column:1/-1;justify-self:start}.card-title{font-size:14px}.card-description{font-size:12px}.card-meta{font-size:9px}.tag-button{font-size:11px;min-height:36px}.frow{scrollbar-width:none}.frow::-webkit-scrollbar{display:none}}

/* 使い方3ステップ＋設定の注意（2026-09-10 追加）
   スマホ（375px）で読めることを最優先にしている。
   数字は丸バッジ、1行を短く、タップ領域は44px以上。 */
.howto-box{
  margin:4px 0 22px; padding:18px 18px 16px;
  border:1px solid rgba(128,128,128,.34); border-radius:14px;
}
.howto-title{
  margin:0 0 12px; font-size:15px; font-weight:700; letter-spacing:.04em;
}
.howto-steps{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.howto-steps li{ display:flex; align-items:flex-start; gap:12px; }
.howto-n{
  flex:0 0 28px; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; line-height:1;
  border:1.5px solid currentColor;
}
.howto-t{ display:block; font-size:15px; line-height:1.6; }
.howto-t b{ display:block; font-weight:700; }
.howto-d{ display:block; margin-top:3px; font-size:14.5px; opacity:.78; line-height:1.65; }
.howto-note{
  margin:16px 0 0; padding:13px 15px 11px; border-radius:10px;
  border:1px solid currentColor; border-left-width:4px;
  font-size:14.5px; line-height:1.7; color:#b8860b;
}
.howto-note p{ margin:0; }
.howto-note b{ font-weight:700; }
.howto-note-t{ font-size:15px; margin-bottom:3px !important; }
.howto-note-b{ line-height:1.75; }
.howto-note-a{
  display:inline-block; margin-top:8px; padding:8px 0; min-height:44px;
  display:flex; align-items:center;
  color:inherit; text-decoration:underline; font-weight:700;
}
@media (prefers-color-scheme: dark){ .howto-note{ color:#e6c98a; } }
:root[data-theme="dark"] .howto-note{ color:#e6c98a; }
:root[data-theme="light"] .howto-note{ color:#b8860b; }

/* スマホ：横並びをやめ、余白を詰め、タップ領域を確保する */
@media (max-width:560px){
  .howto-box{ padding:16px 14px 14px; margin:2px 0 18px; }
  .howto-title{ font-size:16px; margin-bottom:10px; }
  .howto-steps{ gap:14px; }
  .howto-n{ flex:0 0 26px; width:26px; height:26px; font-size:14px; }
  .howto-t{ font-size:15.5px; }
  .howto-d{ font-size:14px; }
  .howto-note{ font-size:14px; padding:12px 13px 10px; }
  .howto-note-t{ font-size:15px; }
}

/* スマホ：見本画像を大見出しの直後へ持ち上げる（2026-09-10 徳満さん指示）
   もとは「使い方」の下（993px地点）にあり、スクロールしないと見えなかった。
   .hero-copy を display:contents にして、その子と .hero-art を同じ grid に並べ、
   order で順番だけを入れ替える（HTMLの構造は変えない＝PC表示に影響しない）。 */
@media (max-width:700px){
  .hero{ display:grid; grid-template-columns:1fr; gap:0; }
  .hero-copy{ display:contents; }
  .hero .eyebrow   { order:1; }
  .hero h1         { order:2; margin-bottom:18px; }
  .hero-art        { order:3; margin:0 0 22px; }
  .hero-description{ order:4; margin-bottom:20px; }
  .hero .howto-box { order:5; }
  .hero .explore   { order:6; }
  .hero .edition   { order:7; }
  /* 写真の比率に合わせて切り取りを最小にする（元画像 620x465 = 1.33）。
     1.5 に横長化すると空が切れて棚田の暗い部分だけが残り、真っ暗に見えた（実測）。 */
  .hero-photo{ aspect-ratio:1.33; }
  .hero-photo img{ object-position:50% 42%; }
  .art-title{ font-size:22px; bottom:52px; }
}

/* 「このあとAIが3つ質問します」の帯と、写真の注意の強調（2026-09-10 徳満さん指示）
   操作（3ステップ）と、そのあとのAIとのやりとりを分けて書く。
   「写真はまだ付けなくてよい」が伝わらず、最初に写真を貼ってしまう人が出るため強調する。 */
.howto-after{
  margin:14px 0 0; padding:12px 14px; border-radius:10px;
  background:rgba(128,128,128,.13);
  font-size:14.5px; line-height:1.75;
}
.howto-after b{ display:block; font-weight:700; margin-bottom:2px; }
.howto-d .hl{ display:inline; font-weight:700; opacity:1; }
@media (max-width:560px){
  .howto-after{ font-size:14px; padding:11px 12px; margin-top:12px; }
}

/* 左上のアイコンを、会社のロゴマークに差し替え（2026-09-10 徳満さん指示）
   もとは明朝体の「山」の1文字だった。ロゴは黒の線画・透過PNG（500x362）なので、
   暗い地の上では invert(1) で白抜きにする。テーマ切り替えの両方に対応させる。 */
img.brand-mark{
  height:30px; width:auto; display:block; flex:0 0 auto;
  filter:invert(1);            /* 既定＝暗い地 */
}
:root[data-theme="light"] img.brand-mark{ filter:none; }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) img.brand-mark{ filter:none; }
}
@media (max-width:700px){
  img.brand-mark{ height:26px; }
}

/* PC：使い方を写真の下へ、横幅いっぱいに置く（2026-09-11 徳満さん指示）
   もとは左カラムの中（大見出しの下）にあり、写真の高さに合わせて縦に細長く潰れていた。
   .hero を2列2行にして、1行目＝見出し｜写真 ／ 2行目＝使い方（左右いっぱい）にする。
   スマホ（700px以下）は従来どおり order で1列に並べるので、ここは効かせない。 */
@media (min-width:701px){
  .hero{
    grid-template-areas:
      "copy  art"
      "howto howto";
    align-items:start;
    row-gap:46px;
  }
  .hero-copy{ grid-area:copy; align-self:center; }
  .hero-art { grid-area:art;  }
  .hero .howto-box{
    grid-area:howto; margin:0;
    padding:26px 30px 24px; border-radius:16px;
  }
  .hero .howto-title{ font-size:16px; margin-bottom:16px; }
}

/* 880px以上：3ステップを横に3つ並べる（縦積みだと横幅が余るため） */
@media (min-width:880px){
  .hero .howto-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 32px; }
  .hero .howto-steps li{ align-items:flex-start; }
}

/* 1000px以上：補足2つ（AIの3つの質問／Chatにする注意）も左右に並べる */
@media (min-width:1000px){
  .hero .howto-box{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "title title"
      "steps steps"
      "after note";
    column-gap:28px;
    align-items:start;
  }
  .hero .howto-title{ grid-area:title; }
  .hero .howto-steps{ grid-area:steps; }
  .hero .howto-after{ grid-area:after; margin-top:22px; }
  .hero .howto-note { grid-area:note;  margin-top:22px; }
  .hero .howto-note-a{ min-height:0; padding:4px 0 0; }
}