/* ギャラリーの外側だけを整える。見本そのものは 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-body{ display:grid; grid-template-columns:1fr 1fr; grid-template-areas: "steps steps" "after note"; column-gap:28px; align-items:start; } .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; } } /* ===== 磨きの層（2026-09-21 Fable 5.1 が6ギャラリー共通で設計）===== 方針: 色もフォントも変えない。「紙とインク」の質感を足し、奥行き・触れる感じ・呼吸を作る。 1 空気（ヒーローに柔らかい光と紙の目） 2 額装（写真をマットに載せた奥行き） 3 押せる感じ（ボタン・カード・チップの立体と反応） 4 見出しの背骨（短い朱の線） 戻すとき: 各CSSの *.bak-20260921-polish を戻すか、このコメント以降を削除 */ :root{--polish-r:14px;--polish-r-lg:18px;--polish-shadow-1:0 1px 2px #1a1c1614,0 8px 24px #1a1c1612;--polish-shadow-2:0 2px 4px #1a1c161a,0 22px 48px #1a1c1622;--polish-glow:color-mix(in srgb,var(--accent) 14%,transparent)} :root[data-theme=dark]{--polish-shadow-1:0 1px 2px #0006,0 10px 28px #0007;--polish-shadow-2:0 2px 4px #0008,0 26px 56px #000a} @media(prefers-color-scheme:dark){:root:not([data-theme=light]){--polish-shadow-1:0 1px 2px #0006,0 10px 28px #0007;--polish-shadow-2:0 2px 4px #0008,0 26px 56px #000a}} /* 1 空気: ヒーローの背後に光の玉と、ごく薄い紙の目 */ .hero{position:relative;isolation:isolate} .hero::before{content:"";position:absolute;inset:-60px 0 -40px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 78% 45%,var(--polish-glow),transparent 70%),radial-gradient(ellipse 40% 40% at 10% 90%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 70%)} body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,")} :root[data-theme=dark] body::after{mix-blend-mode:screen;opacity:.035} @media(prefers-color-scheme:dark){:root:not([data-theme=light]) body::after{mix-blend-mode:screen;opacity:.035}} /* 4 見出しの背骨: 小見出しの下に短い朱の線、大見出しは少し詰める */ .hero .eyebrow{position:relative;padding-bottom:14px;margin-bottom:22px} .hero .eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--accent);border-radius:2px} .hero h1{letter-spacing:-.02em;text-wrap:balance} .hero-description{max-width:40ch} h2{letter-spacing:-.01em} /* 2 額装: ヒーローの絵をマットに載せる（後ろに朱の紙を1枚ずらして敷く） */ .hero-art,.hero-photo{position:relative} .hero-art>:first-child,.hero-photo>:first-child{border-radius:var(--polish-r-lg);box-shadow:var(--polish-shadow-2);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden} .hero-art::before,.hero-photo::before{content:"";position:absolute;inset:14px -14px -14px 14px;z-index:-1;border-radius:var(--polish-r-lg);background:color-mix(in srgb,var(--accent) 12%,var(--surface));pointer-events:none} .hero-art .phone{border-radius:28px} /* 3 押せる感じ: 主ボタン */ .explore{border-radius:999px;padding-inline:26px;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 28%,transparent),inset 0 1px 0 #fff2;transition:transform .22s ease,box-shadow .22s ease,opacity .22s} .explore:hover{transform:translateY(-2px);opacity:1;box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 36%,transparent),inset 0 1px 0 #fff2} .explore:active{transform:translateY(0)} /* 3 押せる感じ: カード（角・縁・浮き上がり・写真がわずかに寄る） */ .card{border-radius:var(--polish-r);overflow:hidden;background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);box-shadow:var(--polish-shadow-1);transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s} .card .preview{overflow:hidden} .card .preview :is(img,video){transition:transform .6s cubic-bezier(.2,.7,.2,1)} @media(hover:hover){.card:hover{transform:translateY(-4px);box-shadow:var(--polish-shadow-2);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}.card:hover .preview :is(img,video){transform:scale(1.035)}} .card-title{font-weight:600} .card-open{transition:gap .22s,color .22s} @media(hover:hover){.card:hover .card-open{color:var(--accent)}.card:hover .card-arrow{transform:translateX(3px)}} .card-arrow{display:inline-block;transition:transform .22s} /* 3 押せる感じ: チップ・絞り込みボタン（丸く・選択中は朱） */ .chip,.filter-button{border-radius:999px;border:1px solid var(--line);background:transparent;transition:background .18s,border-color .18s,color .18s,transform .18s} @media(hover:hover){.chip:hover,.filter-button:hover{border-color:var(--accent);transform:translateY(-1px)}} .chip[aria-pressed=true],.chip.is-active,.chip.active,.chip[aria-selected=true],.filter-button[aria-pressed=true],.filter-button.is-active,.filter-button.active,.filter-button[aria-selected=true]{background:var(--accent);color:var(--bg);border-color:var(--accent)} /* 使い方の箱: 左に朱の背骨・角丸 */ .howto-box{border-radius:var(--polish-r);border-left:3px solid var(--accent);background:color-mix(in srgb,var(--surface) 85%,var(--bg))} /* 開いた見本の面（シート）: 上の角を丸く */ .sheet{border-radius:20px 20px 0 0;box-shadow:var(--polish-shadow-2)} @media(min-width:900px){.sheet{border-radius:20px}} /* 足元の線 */ .footer-line{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)} @media(prefers-reduced-motion:reduce){.card,.explore,.chip,.filter-button,.card .preview :is(img,video){transition:none}} /* 折りたたみ2つ（使い方・デザインを探す）2026-09-29 徳満さん指示 閉じた状態でも「読みたくなる」見出しにする。右の丸ボタンは開くと＋が45度回って×になる。 文字の「開く／閉じる」も残す（記号だけでは伝わらない人がいるため）。 */ .howto-box > summary,.search-fold > summary{list-style:none;cursor:pointer} .howto-box > summary::-webkit-details-marker,.search-fold > summary::-webkit-details-marker{display:none} .fold-toggle{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto} .fold-label{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--dim)} .fold-label::after{content:'開く'} [open] > summary .fold-label::after{content:'閉じる'} .fold-icon{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 10%,transparent);transition:transform .35s cubic-bezier(.2,.7,.2,1),background .2s,border-color .2s} .fold-icon::before,.fold-icon::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--accent);border-radius:2px;transform:translate(-50%,-50%)} .fold-icon::after{transform:translate(-50%,-50%) rotate(90deg)} [open] > summary .fold-icon{transform:rotate(45deg);background:var(--accent)} [open] > summary .fold-icon::before,[open] > summary .fold-icon::after{background:var(--bg)} @media(hover:hover){ .howto-box > summary:hover .fold-icon,.search-fold > summary:hover .fold-icon{background:color-mix(in srgb,var(--accent) 22%,transparent)} [open] > summary:hover .fold-icon{background:var(--accent)} } .howto-box > summary:focus-visible,.search-fold > summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:10px} /* 使い方の箱：紙に朱のにじみを少し */ .howto-box{position:relative;overflow:hidden;padding:0!important; background: radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--accent) 13%,transparent) 0%,transparent 55%), color-mix(in srgb,var(--surface) 85%,var(--bg)); box-shadow:var(--polish-shadow-1);transition:box-shadow .25s,transform .25s} @media(hover:hover){.howto-box:not([open]):hover{box-shadow:var(--polish-shadow-2);transform:translateY(-1px)}} .howto-box > summary{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0!important;padding:18px 18px 18px 20px;font-size:inherit;letter-spacing:0} .fold-head{display:flex;flex-direction:column;gap:4px;min-width:0} .fold-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--accent)} .fold-title{font-family:'Shippori Mincho',serif;font-weight:700;font-size:21px;line-height:1.4;letter-spacing:.04em} .fold-title em{font-style:normal;font-size:1.35em;color:var(--accent);margin:0 .06em;line-height:1} .howto-flow{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:13px;color:var(--dim)} .howto-flow span{display:inline-flex;align-items:center;gap:6px;position:relative} .howto-flow span + span::before{content:'';position:absolute;left:-11px;top:50%;width:7px;height:1px;background:var(--line)} .howto-flow i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);font-size:11px;font-weight:700} .howto-box[open] .howto-flow{display:none} .howto-body{padding:4px 18px 18px 20px;animation:fold-in .35s ease} @keyframes fold-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (min-width:701px){ .howto-box > summary{padding:24px 30px} .fold-title{font-size:24px} .hero .howto-body{padding:4px 30px 26px} } @media (prefers-reduced-motion:reduce){.howto-body,.search-fold .filter-panel{animation:none}.fold-icon{transition:none}} /* デザインを探す：見出しの行全体が開閉ボタン。一覧のカードは常に見える */ .search-fold{margin-bottom:26px;border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent)} .search-fold > summary.gallery-heading{margin:0;padding:18px 0;align-items:center} .search-hint{margin:6px 0 0;font-size:12.5px;color:var(--dim);display:flex;flex-wrap:wrap;align-items:center;gap:8px} .search-active{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 10px;border-radius:999px;background:var(--accent);color:var(--bg)} .search-side{display:flex;align-items:center;gap:22px} .search-side .count{margin:0} .search-fold .filter-panel{padding-top:4px;animation:fold-in .35s ease} @media (max-width:700px){ .search-fold > summary.gallery-heading{align-items:flex-start} .search-side{flex-direction:column-reverse;align-items:flex-end;gap:8px} .search-side .fold-label{display:none} .howto-box .fold-label{display:none} .howto-box > summary{padding:16px 14px 16px 16px;gap:10px} .fold-title{font-size:19px;white-space:nowrap} .howto-flow{gap:6px 16px;font-size:12.5px} .howto-flow span + span::before{left:-12px} .howto-body{padding:2px 14px 16px 16px} } /* ===== 2026-09-29 徳満さん指示（カードの窮屈さ・スマホの横幅・空白・トップ写真の影）===== 1 カードに枠を付けたのに中の文字に内側の余白が無く、字が枠にくっついていた → 内側に余白 2 スマホは左右の余白を36px→16pxにして、画像を大きく 3 「デザインを選ぶ」ボタンを外したので、使い方の下の空白（78px/60px）を詰める 4 トップの写真の後ろのずらした板（影に見える）と影を外す */ .card-meta{padding:0 16px;margin-top:14px} .card-title,.card-description{padding:0 16px} .card-tags{padding:6px 16px 14px} .card-visual{border-radius:0} .fold-title{font-weight:500} .hero{padding-bottom:34px} .hero-art::before,.hero-photo::before{content:none!important} .hero-art>:first-child,.hero-photo>:first-child{box-shadow:none!important} .hero-photo{box-shadow:none!important} @media(max-width:700px){ .wrap{width:calc(100% - 32px)} .frow{margin-inline:-16px;padding-inline:16px} .grid{gap:18px 10px} .hero{padding-bottom:22px} .hero-art{margin-bottom:18px} .card-meta{padding:0 10px;margin-top:10px} .card-title,.card-description{padding:0 10px} .card-tags{padding:4px 10px 10px} } /* 5 表示を速く：本文はiPhone・Macに最初から入っている「ヒラギノ角ゴ」を先に使う（見た目はNoto Sans JPとほぼ同じ）。 ヒラギノが無いWindows・AndroidだけNoto Sans JPを読みに行く。書体データの読み込みが約2.2MB→ほぼ0になる */ body,.detail-section pre{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif} /* 6 「100 DESIGNS ／ 東京山側のデザイン見本帳」は「デザインを探す」の件数と同じ情報なので出さない。 要素は消さない（rich.js が #total に数字を書き込むため。消すと画面が動かなくなる） */ .edition{display:none} @media(max-width:700px){.hero{padding-bottom:10px}}