@charset "UTF-8"; /* ============================================================================ 信州マーケティング　共通デザインシステム（2026-09 リニューアル）方向：エディトリアル × 大型タイポグラフィ × 控えめなスクロール演出 ■ 設計の芯　1. 語るのは「文字と余白」。装飾ではなく、字の大きさの差で階層を作る　2. 面は生成り（--paper）と墨（--ink）の2枚。色はサービス色を「点」で使う　3. 罫線は1本（--hair）。カードの箱・影・グラデーションは使わない　4. 動きは遅く・大きく・一度だけ（出現時）。ループするのは帯（marquee）だけ　5. 書体は Noto Sans JP と Archivo の2本だけ。明朝は使わない。数字はライニング・等幅 ■ 使い方（各ページ共通）　 … サービス色。無指定なら墨　.mask > .ln … 行ごとの出現（下からせり上がる）　.reveal … フェード＋上昇　.img-reveal > img … 写真の開き　[data-count="2.3"] … 数字のカウントアップ　.marquee > .marquee-track … 流れる帯（中身は2回置く） ========================================================================== */ /* ---- 1. トークン ------------------------------------------------------- */ :root{ --paper:#f4f1ea; --paper-2:#ebe7dd; --ink:#141414; --ink-2:#3d3c3a; --ink-3:#6e6b66; --soft:#6f6b65; --hair:rgba(20,20,20,.16); --hair-2:rgba(20,20,20,.08); --hair-inv:rgba(244,241,234,.18); --accent:#141414; --accent-ink:#f4f1ea; --c-site:#e4560a; --c-mk:#0f8a5f; --c-rc:#1f56d6; /* 書体は和文・欧文の2本だけ。明朝は使わない（2026-09-14 統一）。欧文と数字は Archivo。ライニング（高さの揃った数字）で、 0 と O が見分けやすく、金額や章番号を並べても腰が揃う */ --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; --en:"Archivo","Helvetica Neue",Arial,"Noto Sans JP",sans-serif; --maxw:1480px; --gutter:clamp(20px,4.2vw,64px); --sec:clamp(76px,9vw,128px); --sec-s:clamp(56px,6.6vw,92px); --fs-display:clamp(46px,9.2vw,138px); --fs-h1:clamp(38px,6.4vw,92px); --fs-h2:clamp(30px,4.4vw,62px); --fs-h3:clamp(20px,1.9vw,26px); --fs-lede:clamp(16.5px,1.85vw,25px); --fs-num:clamp(60px,10vw,150px); --ease:cubic-bezier(.16,1,.3,1); /* 文字の出現用。指数（--ease）は最初に一気に動いて止まるので、文字だと跳ねて見える。 3次の減速は最後まで動き続けて静かに着地するので、読ませる要素にはこちらを使う */ --ease-text:cubic-bezier(.33,1,.68,1); --dur-text:1.15s; --ease-io:cubic-bezier(.65,0,.35,1); --dur:1.1s; --header-h:76px; } body[data-theme="site"]{--accent:var(--c-site);--accent-ink:#fff} body[data-theme="mk"]{--accent:var(--c-mk);--accent-ink:#fff} body[data-theme="rc"]{--accent:var(--c-rc);--accent-ink:#fff} /* ---- 2. リセット ------------------------------------------------------- */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%} body{ font-family:var(--jp);color:var(--ink);background:var(--paper); font-size:15px;line-height:1.95;letter-spacing:.01em; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; font-feature-settings:"palt";overflow-x:clip; /* 本文の折り返しは日本語の標準（1文字ずつ・禁則あり）。 auto-phrase（文節で折る）は右端がガタガタになり、「人が／集まらない」のように語尾だけの行が増えるので使わない（2026-09-14 指摘） */ word-break:normal;line-break:strict; } img,svg,video{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul,ol{list-style:none} strong,b{font-weight:700} ::selection{background:var(--ink);color:var(--paper)} :focus-visible{outline:2px solid var(--accent);outline-offset:4px} /* キーボードで本文へ飛ぶためのリンク。ふだんは画面の外、Tabで押せる位置に出てくる */ .skip{position:fixed;top:-60px;left:12px;z-index:200;display:inline-block;padding:12px 18px; background:var(--paper);color:var(--ink);border:1px solid var(--ink);font-size:13.5px;font-weight:700;letter-spacing:.04em; transition:top .2s ease} .skip:focus{top:calc(12px + env(safe-area-inset-top, 0px))} .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ここだけは絶対に折りたくない、という語に付ける（例：中小企業） */ .nw{white-space:nowrap} /* 数字はライニング・等幅。和文の中に混ざっても腰が揃う */ .num,[data-count],.en,.label{font-family:var(--en);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1} /* ---- 3. 版面 ----------------------------------------------------------- */ .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)} .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:clamp(24px,3vw,48px)} .col{grid-column:span var(--span,12)} .s1{--span:1}.s2{--span:2}.s3{--span:3}.s4{--span:4}.s5{--span:5}.s6{--span:6} .s7{--span:7}.s8{--span:8}.s9{--span:9}.s10{--span:10}.s11{--span:11}.s12{--span:12} .o2{grid-column-start:2}.o3{grid-column-start:3}.o4{grid-column-start:4}.o5{grid-column-start:5}.o6{grid-column-start:6}.o7{grid-column-start:7}.o8{grid-column-start:8}.o9{grid-column-start:9} /* 節の余白。--pad を節ごとに持たせておき、下の「詰め」で使い回す */ section,.sec{--pad:var(--sec);padding:var(--pad) 0} .sec-s{--pad:var(--sec-s)} /* 同じ色の面が続くと、下の余白と上の余白が足し算になって「意味のない空白の帯」ができる。色が変わらないときだけ上を詰める。色が変わるところ（生成り↔墨）は、その余白が面の内側の呼吸になるので詰めない */ section:not(.inv)+section:not(.inv), .inv+.inv{padding-top:calc(var(--pad) * .56)} .hair-t{border-top:1px solid var(--hair)} .hair-b{border-bottom:1px solid var(--hair)} /* 墨の面。中の罫線・文字色をまとめて反転させる */ /* 墨面が続くときは、境目に罫線を1本入れて別の節だと分かるようにする */ main>section.inv+section.inv{border-top:1px solid rgba(244,241,234,.22)} .inv{background:var(--ink);color:var(--paper);--hair:var(--hair-inv);--hair-2:rgba(244,241,234,.1);--ink-2:#cfcac0;--ink-3:#a9a49a;--soft:#87837b} .inv ::selection{background:var(--paper);color:var(--ink)} /* ---- 4. タイポグラフィ ------------------------------------------------- */ /* 見出しの折り返し規則。 text-wrap:balance は行の長さを揃えることを優先するあまり、「長野の、中／小企業専門の」のように**語の途中で折る**。日本語では使わない。代わりに keep-all（句読点でしか折らない）＋ overflow-wrap（どうしても入らない時だけ折る）。これで「中小企業」「WEB担当」のような語のかたまりが割れなくなる。 */ h1,h2,h3,h4,.display,.h1,.h2,.h3,.statement,.sv-name,.r-title,.plan h3,.step h3,.faq summary{ word-break:keep-all;overflow-wrap:break-word;line-break:strict;text-wrap:pretty} /* リード文・本文は「見出し」ではなく文章。keep-all を当てると読点が行頭に落ちるので、標準の折り返し（word-break:normal）に戻す。行はきれいに右端まで詰まる */ .body,.step p,.item p,.plan li{word-break:normal;line-break:strict} h1,h2,h3,h4{font-weight:700;letter-spacing:-.005em;line-height:1.18} .display{font-size:var(--fs-display);line-height:1.02;letter-spacing:-.02em;font-weight:700} .h1{font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.015em} /* 和文の2行見出しは 1.14 だと行が噛み合って窮屈に見える。少しだけ開ける */ .h2{font-size:var(--fs-h2);line-height:1.2;letter-spacing:-.012em} .h3{font-size:var(--fs-h3);line-height:1.4;letter-spacing:0} /* リード文は1文＝1行（）で書く。text-wrap:pretty は和文では効かない。幅に入らないときは句読点でだけ折れる（keep-all）ので、「使用しま／す。」のような語尾の落ち方にならず、文の切れ目で自然に2行になる */ .lede{font-weight:500;font-size:var(--fs-lede);line-height:1.72;letter-spacing:.01em;word-break:keep-all;overflow-wrap:break-word} .lede .ln{display:block} .lede .ln+.ln{margin-top:.26em} /* リード文は1文＝1行。まとめて出すより、読む速さに合わせて順に置くほうが自然 */ body.anim .reveal .lede .ln,body.anim .lede.reveal .ln{opacity:0;transform:translateY(10px); transition:opacity .8s var(--ease-text),transform .9s var(--ease-text)} body.anim .reveal.in .lede .ln,body.anim .lede.reveal.in .ln{opacity:1;transform:none} .lede .ln:nth-child(2){transition-delay:.07s} .lede .ln:nth-child(3){transition-delay:.14s} .lede .ln:nth-child(4){transition-delay:.21s} .lede .ln:nth-child(5){transition-delay:.28s} .lede b{font-weight:600} .body{color:var(--ink-2);font-size:15px;line-height:2.05;max-width:36em} .body p+p{margin-top:1.5em} .body b{color:var(--ink)} .inv .body b{color:var(--paper)} .small{font-size:13px;line-height:1.9;color:var(--ink-3)} .note{font-size:11.5px;line-height:1.9;color:var(--ink-3);letter-spacing:0} .note a{text-decoration:underline;text-underline-offset:.2em} /* 小さな見出しラベル。頭に点を打つ。点の色がサービス色 */ .label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);line-height:1} .label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none} .label.plain::before{display:none} .inv .label{color:var(--ink-3)} /* 墨の面では、墨色の点が消えてしまう。生成り（サービス色のページはその色）にする */ .inv .label::before{background:var(--paper)} body[data-theme] .inv .label::before{background:var(--accent)} /* 通し番号。輪郭だけの文字（-webkit-text-stroke）は、線が細って安っぽく見えるので使わない。実体のある数字を、地の色に近い濃さで置く。大きさは残しつつ主張は下げる。数字は必ずライニング＋等幅（tnum/lnum）で、01〜06 を縦に並べたとき腰が揃う */ .idx{display:block;font-family:var(--en);font-weight:600;font-size:clamp(19px,1.7vw,23px); line-height:1;letter-spacing:.04em;color:var(--ink); font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1} .inv .idx{color:var(--paper)} /* 行ごとの出現。.ln を1行に対応させて書く */ /* 隠す指定は body.anim（js/site.js が最初に付ける）の中だけに閉じる。 JSが読めなかった環境では、下の .ln は最初から見えている状態になる */ .mask{overflow:hidden} .mask .ln{display:block} body.anim .mask .ln{transform:translateY(100%);opacity:0; transition:transform var(--dur-text) var(--ease-text),opacity .5s linear} body.anim .mask.in .ln,body.anim .in .mask .ln{transform:none;opacity:1} .mask .ln:nth-child(2){transition-delay:.11s} .mask .ln:nth-child(3){transition-delay:.22s} .mask .ln:nth-child(4){transition-delay:.33s} .mask .ln:nth-child(5){transition-delay:.44s} /* 見出しの中で複数の .mask を並べる場合（1行=1つの .mask） */ .mask + .mask .ln{transition-delay:.08s} .mask + .mask + .mask .ln{transition-delay:.16s} .mask + .mask + .mask + .mask .ln{transition-delay:.24s} /* ---- 5. 出現 ----------------------------------------------------------- */ .reveal{opacity:1} body.anim .reveal{opacity:0;transform:translateY(16px); transition:opacity .92s var(--ease-text),transform 1.05s var(--ease-text)} body.anim .reveal.in{opacity:1;transform:none} [data-stagger]>.reveal:nth-child(2){transition-delay:.1s} [data-stagger]>.reveal:nth-child(3){transition-delay:.2s} [data-stagger]>.reveal:nth-child(4){transition-delay:.3s} [data-stagger]>.reveal:nth-child(5){transition-delay:.4s} [data-stagger]>.reveal:nth-child(6){transition-delay:.5s} .img-reveal{overflow:hidden;background:var(--paper-2)} .img-reveal img{width:100%;height:100%;object-fit:cover} body.anim .img-reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease)} body.anim .img-reveal img{transform:scale(1.12);transition:transform 1.8s var(--ease)} body.anim .img-reveal.in{clip-path:inset(0)} body.anim .img-reveal.in img{transform:scale(1)} /* 写真の色調をそろえる。ストック写真はそれぞれ色味が違うので、彩度を落とし、わずかに暖色へ寄せ、その上に紙の色を薄く重ねる。どの写真も同じ「紙に刷った」トーンになる */ .photo img{filter:saturate(.72) contrast(1.04) brightness(1.01) sepia(.14)} .photo .img-reveal{position:relative} .photo .img-reveal::after{content:"";position:absolute;inset:0;pointer-events:none; background:var(--paper);opacity:.14;mix-blend-mode:multiply} .inv .photo .img-reveal::after{background:var(--ink);opacity:.18} /* ---- 6. ボタン --------------------------------------------------------- */ /* 主ボタン：墨の面。ホバーで下から色が満ちる */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px; height:58px;padding:0 30px;border-radius:999px;overflow:hidden; background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;letter-spacing:.06em; transition:color .5s var(--ease);isolation:isolate; } .btn::before{content:"";position:absolute;inset:0;background:var(--accent); transform:translateY(101%);transition:transform .6s var(--ease);z-index:-1;border-radius:inherit} .btn:hover::before,.btn:focus-visible::before{transform:none} .btn:hover{color:var(--accent-ink)} .btn .arr{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paper);color:var(--ink); transition:transform .6s var(--ease),background .5s var(--ease),color .5s var(--ease)} .btn .arr svg{width:12px;height:12px} .btn:hover .arr{transform:translateX(4px)} .btn:active{transform:scale(.985)} body:not([data-theme]) .btn:hover{color:var(--ink)} body:not([data-theme]) .btn::before{background:var(--paper-2)} body:not([data-theme]) .btn:hover .arr{background:var(--ink);color:var(--paper)} /* 輪郭だけの副ボタン */ .btn-o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)} .btn-o::before{background:var(--ink)} .btn-o:hover{color:var(--paper)} .btn-o .arr{background:var(--ink);color:var(--paper)} .btn-o:hover .arr{background:var(--paper);color:var(--ink)} body:not([data-theme]) .btn-o:hover{color:var(--paper)} body:not([data-theme]) .btn-o::before{background:var(--ink)} body:not([data-theme]) .btn-o:hover .arr{background:var(--paper);color:var(--ink)} /* 墨の面の上 */ .inv .btn{background:var(--paper);color:var(--ink)} .inv .btn::before{background:var(--accent)} .inv .btn:hover{color:var(--accent-ink)} .inv .btn .arr{background:var(--ink);color:var(--paper)} body:not([data-theme]) .inv .btn::before{background:var(--paper-2)} body:not([data-theme]) .inv .btn:hover{color:var(--ink)} .inv .btn-o{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px var(--hair-inv)} .inv .btn-o::before{background:var(--paper)} .inv .btn-o:hover{color:var(--ink)} .inv .btn-o .arr{background:var(--paper);color:var(--ink)} .inv .btn-o:hover .arr{background:var(--ink);color:var(--paper)} /* 罫線1本のテキストリンク */ .tlink{position:relative;display:inline-flex;align-items:center;gap:10px;padding-bottom:6px;font-size:13.5px;font-weight:600;letter-spacing:.06em} .tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .6s var(--ease)} .tlink:hover::after{transform:scaleX(0);transform-origin:left;} .tlink svg{width:14px;height:14px;transition:transform .6s var(--ease)} .tlink:hover svg{transform:translate(4px,-4px)} /* 大きな丸ボタン（締めのCTA） */ .circle{ position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(150px,16vw,220px);aspect-ratio:1;border-radius:50%; background:var(--paper);color:var(--ink);font-weight:700;font-size:clamp(15px,1.3vw,18px);letter-spacing:.06em;text-align:center;line-height:1.5; overflow:hidden;isolation:isolate;transition:color .5s var(--ease),transform .8s var(--ease); } .circle::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .7s var(--ease);z-index:-1} .circle:hover::before{transform:scale(1.02)} .circle:hover{color:var(--accent-ink)} body:not([data-theme]) .circle::before{background:var(--paper-2)} body:not([data-theme]) .circle:hover{color:var(--ink)} .circle small{display:block;font-weight:500;font-size:11px;letter-spacing:.1em;opacity:.7;margin-top:6px} /* ---- 7. ヘッダー ------------------------------------------------------- */ .header{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--header-h); transition:transform .6s var(--ease),background .5s var(--ease),border-color .5s var(--ease); border-bottom:1px solid transparent} .header.is-scrolled{background:rgba(244,241,234,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--hair-2)} /* 読み進めた量を、ヘッダー下端の細い線で示す（js/site.js が --progress を更新） */ .header::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accent); transform:scaleX(var(--progress,0));transform-origin:left;opacity:0;transition:opacity .4s} .header.is-scrolled::after{opacity:1} body:not([data-theme]) .header::after{background:var(--ink)} .header.is-hidden{transform:translateY(-100%)} .header.on-dark:not(.is-scrolled){color:var(--paper)} .header-in{height:100%;display:flex;align-items:center;gap:32px} .brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.04em;font-size:15.5px;white-space:nowrap;padding:8px 0} .brand .mark{width:26px;height:26px;flex:none} .brand .mark svg{width:100%;height:100%} .brand .en{font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-left:2px} .brand .sub{font-weight:500;font-size:12px;color:var(--ink-3);letter-spacing:.04em} .brand .sub::before{content:"／";margin:0 6px;color:var(--soft)} .nav{display:flex;align-items:center;gap:clamp(18px,2vw,30px);margin-left:auto} /* 項目名は折り返さない。「ホームページ制作」が2行になると天地が崩れる */ .nav a{position:relative;font-size:13px;font-weight:500;letter-spacing:.04em;padding:6px 0;color:inherit;opacity:.78;white-space:nowrap;transition:opacity .4s var(--ease)} .nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)} .nav a:hover,.nav a[aria-current]{opacity:1} .nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left} .head-cta{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 6px 0 18px;border-radius:999px; background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:600;letter-spacing:.08em;white-space:nowrap; transition:background .4s var(--ease),color .4s var(--ease)} .head-cta .arr{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--paper);color:var(--ink);transition:transform .5s var(--ease)} .head-cta .arr svg{width:11px;height:11px} .head-cta:hover .arr{transform:rotate(45deg)} .header.on-dark:not(.is-scrolled) .head-cta{background:var(--paper);color:var(--ink)} .header.on-dark:not(.is-scrolled) .head-cta .arr{background:var(--ink);color:var(--paper)} /* メニューボタン（スマホ）*/ .menu-btn{display:none;position:relative;width:44px;height:44px;margin-left:auto;flex:none} .menu-btn i{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .5s var(--ease),opacity .3s} .menu-btn i:nth-child(1){top:17px} .menu-btn i:nth-child(2){top:26px} body.menu-open .menu-btn i:nth-child(1){transform:translateY(4.5px) rotate(45deg)} body.menu-open .menu-btn i:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)} /* 全画面メニュー */ .menu{position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--paper); display:flex;flex-direction:column;padding:calc(var(--header-h) + 24px) var(--gutter) 32px; clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);visibility:hidden} body.menu-open .menu{clip-path:inset(0);visibility:visible} body.menu-open{overflow:hidden} body.menu-open .header{color:var(--paper);background:transparent;border-color:transparent;transform:none} body.menu-open .header .head-cta{display:none} /* 墨の面の上・メニュー展開時はロゴを反転して見えるようにする */ body.menu-open .brand img,.header.on-dark:not(.is-scrolled) .brand img{filter:invert(1) hue-rotate(180deg)} .menu-links{display:grid;gap:4px;margin-top:auto} .menu-links a{display:flex;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--hair-inv); font-size:clamp(28px,7vw,44px);font-weight:700;letter-spacing:-.01em;line-height:1.2; opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .menu-links a small{font-family:var(--en);font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--soft)} body.menu-open .menu-links a{opacity:1;transform:none} body.menu-open .menu-links a:nth-child(2){transition-delay:.06s} body.menu-open .menu-links a:nth-child(3){transition-delay:.12s} body.menu-open .menu-links a:nth-child(4){transition-delay:.18s} body.menu-open .menu-links a:nth-child(5){transition-delay:.24s} body.menu-open .menu-links a:nth-child(6){transition-delay:.3s} .menu-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:32px;font-size:12.5px;color:var(--ink-3)} .menu-foot a{color:var(--paper)} /* ---- 8. ヒーロー（トップ）--------------------------------------------- */ .hero{position:relative;overflow:clip;padding-bottom:0;padding-top:calc(var(--header-h) + clamp(26px,5vh,64px));min-height:100svh;display:flex;flex-direction:column} .hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap} .hero-meta{display:flex;gap:clamp(20px,3vw,48px);font-size:12px;color:var(--ink-3);letter-spacing:.04em;line-height:1.7} .hero-meta b{display:block;font-weight:500;color:var(--ink);letter-spacing:.02em} .hero-title{margin-top:clamp(20px,4vh,48px)} .hero-title .display{font-size:var(--fs-display)} /* ヒーローの抽象の図版（build-heromark.js が index.html に書き出すSVG）。 3案あり、figure の is-ripple／is-grid／is-overprint で切り替わる。・写真ではなく線と文字なので、罫線1本・角丸なし・影なしという方針と矛盾しない・色はトークンに従う。墨の面に置いても勝手に反転する・文字の裏に敷く（z-index:-1）。.wrap を position:relative にして位置の基準にする・下はぼかす。ボタンと注記の後ろで線が騒がしくなるため・動きは site.js の [data-hero] に乗せ、--i の順に一度だけ開く */ /* 図版は .hero の直下にあるので、基準は節そのもの＝画面の幅いっぱい。 .wrap（最大1480px）の中に置くと、広い画面で左右に余白が残る */ .hero{isolation:isolate} .hero-mark{position:absolute;z-index:-1;pointer-events:none; right:-7vw;top:-6%; width:clamp(300px,48vw,760px);aspect-ratio:1; -webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 88%); mask-image:linear-gradient(180deg,#000 52%,transparent 88%)} .hero-mark svg{width:100%;height:100%;overflow:visible} /* 線の案（波紋・方眼）*/ .hero-mark .hm-line path{fill:none;stroke:var(--ink);stroke-width:1; vector-effect:non-scaling-stroke;opacity:var(--o)} .hero-mark .hm-dot{fill:var(--ink);stroke:none;opacity:var(--o)} /* 刷り重ねの案。輪郭は SVG の stroke なので太さを実寸で決められる（site.css が禁じているのは CSS の -webkit-text-stroke。線が細って安っぽくなるため） */ .hero-mark .hm-print text{font-family:var(--jp);font-weight:700;font-size:452px; text-anchor:middle;dominant-baseline:central;opacity:var(--o)} .hero-mark .hm-print .hm-f{fill:var(--ink);stroke:none} .hero-mark .hm-print .hm-s{fill:none;stroke:var(--ink);stroke-width:1.6; vector-effect:non-scaling-stroke} .hero-mark .hm-print .hm-reg{fill:none;stroke:var(--ink);stroke-width:1; vector-effect:non-scaling-stroke;opacity:var(--o)} /* 刷り重ねだけは配置が違う。線の案は端を断ち切って良いが、字は切れると字に見えないので、版面の中に収めて下も切らない */ .hero-mark.is-overprint{right:0;top:2%; width:clamp(240px,30vw,440px); -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 99%); mask-image:linear-gradient(180deg,#000 78%,transparent 99%)} /* 流れる色のリボン（Stripe型）。版面の右を縦いっぱいに使い、上下は断ち切る。 ⚠ この案だけは「面は生成りと墨の2枚」「グラデーションは使わない」から外れる。採用するなら site.css 冒頭の設計の芯に例外として書き足すこと */ .hero-mark.is-flow{right:calc(-1 * var(--gutter));top:13%; width:min(50%,720px);height:104%;aspect-ratio:auto;opacity:.88; /* 上は「事業／かたち」の行を避けて始める。重ねると濃い色の上の墨文字が読めない */ -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 64%,transparent 96%); mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 64%,transparent 96%)} .hero-mark.is-flow svg{overflow:hidden} /* 色の塊がゆっくり回り続ける。JSで毎フレーム計算しないので電池を食わない */ .hero-mark .hm-blobs{transform-box:view-box;transform-origin:50% 50%; animation:hm-drift 34s ease-in-out infinite} @keyframes hm-drift{ 0% {transform:translate(0,0) rotate(0deg) scale(1)} 33% {transform:translate(-3%,2.5%) rotate(7deg) scale(1.06)} 66% {transform:translate(2.5%,-2%) rotate(-5deg) scale(1.03)} 100%{transform:translate(0,0) rotate(0deg) scale(1)} } @media(prefers-reduced-motion:reduce){.hero-mark .hm-blobs{animation:none}} /* WebGL版（横に流れる煙）。canvas をSVGの上に重ね、1枚描けた時点で js/hero-gradient.js が .gl-ready を付けて入れ替える。 WebGLが無い環境では .gl-ready が付かないので、下のSVG版がそのまま見える。 ■ 輪郭を CSS の mask で切らない　煙に硬い縁は無い。clipPath や mask で切ると縁が立って「謎のオブジェクト」に見える。　形はシェーダーの中でアルファごと作る（band 関数）。ここでは場所と大きさだけ決める。 ■ 左半分には色が来ない　シェーダー側で uv.x < 0.33 を完全に透明にしてあるので、　版面いっぱいに広げても大見出しの可読性は落ちない */ .hero-mark.is-webgl{inset:0;width:auto;height:auto;aspect-ratio:auto;opacity:.95; -webkit-mask-image:none;mask-image:none} .hero-mark.is-webgl svg{position:absolute;inset:0;width:100%;height:100%; transition:opacity .6s var(--ease)} .hm-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0; transition:opacity .8s var(--ease)} .hero-mark.is-webgl.gl-ready .hm-canvas{opacity:1} .hero-mark.is-webgl.gl-ready svg{opacity:0} /* 光の筋（墨の面）。版面いっぱいに敷き、上下左右とも端で光が落ちる。 ⚠ 加算合成なので、ヒーローの節に inv（墨の面）が付いていることが前提。　生成りの上に置くと、足した光が見えず白く飛ぶだけになる */ .hero-mark.is-beam{inset:0;width:auto;height:auto;aspect-ratio:auto;opacity:1; -webkit-mask-image:none;mask-image:none} .hero-mark.is-beam svg{position:absolute;inset:0;width:100%;height:100%; transition:opacity .6s var(--ease)} .hero-mark.is-beam.gl-ready .hm-canvas{opacity:1} .hero-mark.is-beam.gl-ready svg{opacity:0} /* 墨のヒーロー。節の色が変わるので、下の節との境の罫線だけ足す */ /* isolation が要る。これが無いと z-index:-1 の図版が節の背景の下に潜って見えなくなる */ .hero.inv{background:var(--ink);isolation:isolate} .hero.inv .hero-meta b{color:var(--paper)} /* 出現。--i の順に、内側から外へ一度だけ */ body.anim .hero-mark .hm-el{opacity:0;transform:scale(.955); transform-box:view-box;transform-origin:50% 50%; transition:opacity 1.1s var(--ease),transform 1.5s var(--ease); transition-delay:calc(var(--i) * 40ms)} body.anim .hero-mark.in .hm-el{opacity:var(--o);transform:none} @media(max-width:900px){ /* 狭い画面では文字と重なるので、右上に小さく逃がして薄くする */ .hero-mark{right:-10vw;top:-2%; width:clamp(240px,74vw,420px);opacity:.62} /* 色のリボンは、狭い画面では見出しとリード文にかからない上端だけに置く。墨の文字が濃い色に乗ると読めなくなるため */ .hero-mark.is-flow{right:0;top:0; width:72%;height:34%;opacity:.8; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 96%); mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 96%)} /* 煙は狭い画面でも版面いっぱいのまま。左が透明なのは画面幅によらない */ .hero-mark.is-webgl{inset:0;opacity:.9} } .hero-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:end;margin-top:clamp(22px,3.6vh,48px)} .hero-row .lede{grid-column:1/span 7} .hero-acts{grid-column:8/span 5;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end} .hero-note{grid-column:8/span 5;font-size:11.5px;color:var(--ink-3);text-align:right;margin-top:14px} .hero-visual{margin-top:clamp(40px,7vh,88px);position:relative} .hero-visual .img-reveal{height:clamp(340px,64vh,760px)} /* 写真の下端に薄い暗がりを敷く。ここに文字を置かないと、明るい空の上では何色にしても読めない（差の混色では色が転ぶ） */ .hero-visual::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none; background:linear-gradient(to top,rgba(10,10,10,.72),rgba(10,10,10,.34) 40%,transparent)} .hero-visual figcaption{position:absolute;z-index:1;left:var(--gutter);right:var(--gutter);bottom:20px; display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap; font-family:var(--en);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.9)} /* 次があることを示す小さな合図。線が下へ伸びては消える */ .scroll-cue{display:inline-flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:inherit} .scroll-cue i{position:relative;display:block;width:1px;height:34px;background:rgba(255,255,255,.35);overflow:hidden} .scroll-cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:12px;background:#fff;animation:cue 2.2s var(--ease-io) infinite} @keyframes cue{0%{transform:translateY(-14px)}60%,100%{transform:translateY(38px)}} @media(prefers-reduced-motion:reduce){.scroll-cue i::after{animation:none;height:34px;opacity:.6}} /* 狭い画面では説明文と2行に割れて落ち着かない。指で触る人には合図も要らない */ @media(max-width:700px){.scroll-cue{display:none}} /* ページ先頭（下層）*/ .page-hero{padding-top:calc(var(--header-h) + clamp(48px,9vh,120px));padding-bottom:clamp(48px,7vw,96px)} .page-hero .h1{margin-top:clamp(20px,3vw,36px)} .page-hero .display{margin-top:clamp(20px,3vw,36px)} .page-hero .lede{margin-top:clamp(24px,3vw,40px)} .page-hero-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:24px;align-items:end;margin-top:clamp(28px,4vw,56px)} .page-hero-row .lede{grid-column:1/span 7} .page-hero-row .acts{grid-column:9/span 4;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end} .page-hero-row .body{grid-column:1/span 6} .page-hero .kv{margin-top:clamp(40px,6vw,80px)} .page-hero .kv .img-reveal{height:clamp(260px,46vh,560px)} /* 見出し帯（節の頭）*/ /* 見出しと中身の間。88pxも空けると、見出しが宙に浮いて節の一部に見えない。右端に章番号（01, 02…）を自動で振る。雑誌の柱のように、いまどこを読んでいるかが分かる */ main{counter-reset:chapter} main>section:not(.hero):not(.page-hero):not(.cta-final):not(.no-ch){counter-increment:chapter} .sec-head{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:18px;align-items:end;margin-bottom:clamp(32px,4.2vw,62px)} .sec-head::after{content:counter(chapter,decimal-leading-zero);position:absolute;right:0;top:.1em; font-family:var(--en);font-weight:500;font-size:clamp(26px,2.4vw,36px);letter-spacing:-.03em;line-height:1;color:var(--ink);opacity:.16; font-variant-numeric:lining-nums tabular-nums} .inv .sec-head::after{color:var(--paper);opacity:.26} .sec-head .label{grid-column:1/span 3;align-self:start;margin-top:.9em} /* 見出しを持たない節（Why など）：ラベルと章番号だけ。下の余白は小さく */ .sec-head.only-label{margin-bottom:clamp(22px,2.8vw,40px);align-items:start} .sec-head.only-label .label{margin-top:.2em} .sec-head .h2{grid-column:4/span 9} .sec-head .lead{grid-column:4/span 7;color:var(--ink-2);font-size:15px;line-height:2.05;max-width:38em} .sec-head.tight{margin-bottom:clamp(24px,3.2vw,44px)} /* ---- 9. 流れる帯 ------------------------------------------------------- */ .marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:18px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)} .marquee-track{display:inline-flex;gap:0;animation:marquee 46s linear infinite;will-change:transform} .marquee span{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font-size:14px;font-weight:500;letter-spacing:.08em;color:var(--ink-2)} .marquee span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)} .marquee.big{padding:0;border:0;mask-image:none;-webkit-mask-image:none} .marquee.big span{font-family:var(--en);font-size:clamp(72px,15vw,240px);font-weight:600;letter-spacing:-.04em;line-height:1;padding-right:.35em;color:inherit;text-transform:uppercase} .marquee.big span::after{width:.12em;height:.12em;background:var(--accent);margin-left:.05em} .marquee.big .marquee-track{animation-duration:60s} /* 2本の帯が同じ向きに流れると単調になる。下の帯だけ逆に流す */ .marquee.rev .marquee-track{animation-direction:reverse} @keyframes marquee{to{transform:translateX(-50%)}} /* 流れる帯・サンプルサイト版（トップのメインビジュアル）。ストック写真の代わりに「実際に作った型」を流す。写真ではなく証拠を見せる、という考え方。中身は build-gallery.js が themes.js から書き出すので、目印の間を手で編集しない。 ■ 斜めに流す作り　帯そのものは水平のまま（translateX で流す）で、入れ物を回して斜めにしている。　だから流れる向きは回転角に従い、右上へ進む。　回すと左右の端で上下にずれるので、帯は画面より広く取って外へ逃がす。 ■ 大きさ　1枚の高さ（--cardh）を先に決め、幅は 16:10 で従わせる。入れ物の高さはそれより低くして、　写真が上下に食み出すようにしている。端で斜めに切れた辺が見えるのが、この作りの見どころ。 ■ ホバーでは止めない。目地は細く（紙が線で覗く程度）*/ .smp-band{--cardh:clamp(268px,58vh,680px); position:relative;overflow:hidden;height:calc(var(--cardh) * .80); margin-bottom:clamp(8px,1.4vw,20px)} .smp-band .marquee{position:absolute;left:50%;top:50%;width:136%;padding:0;border:0; transform:translate(-50%,-50%) rotate(-8deg); -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)} /* 流れる向きは右上。translateX(-50%) は左へ動くので反転させる */ .smp-band .marquee-track{animation-duration:120s;animation-direction:reverse} /* ホバーで止めない（既定の一時停止を打ち消す）*/ .smp-card{display:inline-block;flex:none;overflow:hidden; height:var(--cardh);width:calc(var(--cardh) * 1.6); margin-right:clamp(10px,1.1vw,20px);background:var(--paper-2)} .smp-card picture{display:block;width:100%;height:100%} .smp-card img{width:100%;height:100%;object-fit:cover;object-position:top; filter:saturate(.86) contrast(1.02);transition:transform 1s var(--ease)} .smp-card:hover img,.smp-card:focus-visible img{transform:scale(1.04)} @media(max-width:700px){ /* 狭い画面では角度を寝かせる。立てたままだと1枚しか入らず、流れが見えない */ .smp-band{--cardh:clamp(200px,30vh,280px)} .smp-band .marquee{width:150%;transform:translate(-50%,-50%) rotate(-7deg)} .smp-band .marquee-track{animation-duration:64s} .smp-card{margin-right:8px} } /* ---- 10. 数字 ---------------------------------------------------------- */ .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hair)} /* 3つだけのとき。狭い幅では共通の2列→1列に従う（inline で固定しない） */ @media(min-width:761px){.stats.c3{grid-template-columns:repeat(3,minmax(0,1fr))}} .stat{padding:clamp(28px,3vw,44px) clamp(16px,2vw,32px) clamp(28px,3vw,44px) 0;border-bottom:1px solid var(--hair);position:relative} .stat+.stat{padding-left:clamp(16px,2vw,32px);border-left:1px solid var(--hair)} .stat .k{display:block;font-size:12px;letter-spacing:.08em;color:var(--ink-3)} .stat .v{display:flex;align-items:baseline;gap:4px;margin:16px 0 12px;font-size:clamp(46px,7vw,108px);font-weight:500;line-height:1;letter-spacing:-.045em} .stat .v small{font-family:var(--jp);font-size:clamp(13px,1.2vw,17px);font-weight:700;letter-spacing:.02em;margin-left:2px} .stat .s{font-size:11.5px;color:var(--ink-3);line-height:1.8} /* とても大きな1つの数字 */ .bignum{font-size:var(--fs-num);font-weight:500;letter-spacing:-.05em;line-height:.95} .bignum small{font-family:var(--jp);font-size:.22em;font-weight:700;letter-spacing:.02em;margin-left:.08em} /* ---- 11. 行のリスト（サービス・特長）---------------------------------- */ .rows{border-top:1px solid var(--hair)} .row{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,3fr) minmax(0,3fr) minmax(0,1.6fr) 56px;column-gap:clamp(12px,2vw,32px);align-items:center; padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--hair);color:inherit;transition:color .5s var(--ease);isolation:isolate} .row::before{content:"";position:absolute;inset:0 calc(-1 * var(--gutter));background:var(--ink);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease)} .row .r-idx{font-family:var(--en);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--ink-3);transition:color .5s} .row .r-title{font-size:clamp(22px,2.6vw,38px);font-weight:700;letter-spacing:-.01em;line-height:1.2;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .row .r-title i{width:10px;height:10px;border-radius:50%;background:var(--dot,var(--ink));flex:none} .row .r-desc{font-size:13.5px;line-height:1.9;color:var(--ink-2);transition:color .5s} .row .r-desc b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px;transition:color .5s} .row .r-price{font-size:clamp(18px,1.9vw,28px);font-weight:500;letter-spacing:-.02em;white-space:nowrap;text-align:right} .row .r-price small{font-family:var(--jp);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-3);margin-left:4px;transition:color .5s} .row .r-price small.pre{margin:0 2px 0 0} .row .r-arr{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair);display:grid;place-items:center;justify-self:end;transition:background .5s var(--ease),transform .6s var(--ease),box-shadow .5s} .row .r-arr svg{width:14px;height:14px} @media(hover:hover){ .row:hover{color:var(--paper)} .row:hover::before{transform:scaleY(1);transform-origin:top} .row:hover .r-idx,.row:hover .r-desc,.row:hover .r-desc b,.row:hover .r-price small{color:var(--paper)} .row:hover .r-desc{opacity:.86} .row:hover .r-arr{background:var(--paper);color:var(--ink);box-shadow:none;transform:rotate(-45deg)} } .inv .row::before{background:var(--paper)} @media(hover:hover){ .inv .row:hover{color:var(--ink)} .inv .row:hover .r-idx,.inv .row:hover .r-desc,.inv .row:hover .r-desc b,.inv .row:hover .r-price small{color:var(--ink)} .inv .row:hover .r-arr{background:var(--ink);color:var(--paper)} } /* ---- 12. 3列の項目（理由・約束など）------------------------------------ */ .cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,48px);row-gap:48px} .cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,48px);row-gap:48px} .cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:40px} /* 上の罫線は、出現時に左から引かれる（body.anim のときだけ） */ .item{position:relative;padding-top:20px;border-top:1px solid var(--ink)} .inv .item{border-top-color:var(--paper)} body.anim .item{border-top-color:transparent} body.anim .item::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink); transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .1s} body.anim .inv .item::before{background:var(--paper)} body.anim .item.in::before{transform:scaleX(1)} .item .idx{display:block;margin-bottom:clamp(20px,2.4vw,30px)} .item h3{font-size:var(--fs-h3);margin-bottom:12px} .item p{font-size:13.5px;line-height:2;color:var(--ink-2)} .item p b{color:var(--ink)} .inv .item p b{color:var(--paper)} .item .item-k{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px} /* 4列に並べると1枠が狭く、「広告費に手数料を乗せませ／ん」のように 1文字だけ落ちる。列数に合わせて見出しを一段落とす */ .cols4 .item h3{font-size:clamp(16.5px,1.38vw,19.5px);line-height:1.5} .cols3 .item h3{font-size:clamp(18px,1.62vw,23px)} /* ---- 13. 手順（流れ）--------------------------------------------------- */ .steps{border-top:1px solid var(--hair);counter-reset:step} .step{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,4fr) minmax(0,5fr);column-gap:clamp(16px,3vw,48px);padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--hair);align-items:start} .step .st-no{font-family:var(--en);font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.03em;line-height:1} .step .st-no small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:8px;color:var(--ink-3);font-weight:600} .step h3{font-size:clamp(18px,1.7vw,24px);line-height:1.4} .step h3 small{display:block;font-size:12px;font-weight:500;color:var(--ink-3);margin-top:6px;letter-spacing:.04em} .step p{font-size:13.5px;line-height:2;color:var(--ink-2)} .step p b{color:var(--ink)} /* ---- 13b. 型（5つの工程）---------------------------------------------- */ /* 知る・形にする・届ける・育てる（4段）。横一列、狭い画面では縦に。 .inv の中でも外でも使える。数字は .k-no（小さく、等幅） */ .kata{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)} .kata>div{padding:clamp(28px,3vw,44px) clamp(16px,1.8vw,28px) clamp(30px,3.2vw,48px) 0} .kata>div+div{padding-left:clamp(16px,1.8vw,28px);border-left:1px solid var(--hair)} .kata .k-no{display:block;font-family:var(--en);font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--ink-3); font-variant-numeric:lining-nums tabular-nums} .kata h3{font-size:clamp(20px,1.9vw,26px);margin:18px 0 12px;line-height:1.3} .kata p{font-size:13px;line-height:1.95;color:var(--ink-2)} .kata p b{color:var(--ink)} .inv .kata p b{color:var(--paper)} .kata-note{margin-top:22px} @media(max-width:1100px){ .kata{grid-template-columns:1fr} .kata>div+div{padding-left:0;border-left:0} .kata>div{padding-right:0} } /* 型を「図」にする：上の罫線の上に、工程ごとの点を打つ。罫線は出現時に左から引かれ、右端に「毎月、はじめに戻る」を添えて循環を示す。5つの箱の並びが、流れに見える */ .kata{position:relative;margin-top:0} .kata::before{display:none} body.anim .kata::before{transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .1s} body.anim .kata.in::before{transform:scaleX(1)} .kata>div{position:relative} .kata>div::before{display:none;content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:currentColor; transition:transform .6s var(--ease),opacity .6s var(--ease)} .kata>div+div::before{left:clamp(14px,1.6vw,24px)} body.anim .kata>div::before{transform:scale(0);opacity:0} body.anim .kata.in>div::before{transform:none;opacity:1} body.anim .kata.in>div:nth-child(2)::before{transition-delay:.3s} body.anim .kata.in>div:nth-child(3)::before{transition-delay:.55s} body.anim .kata.in>div:nth-child(4)::before{transition-delay:.8s} .kata::after{content:"↻ 毎月、はじめに戻る";position:absolute;right:0;bottom:-30px;font-size:11px;letter-spacing:.08em;color:var(--ink-3)} .kata-note{margin-top:52px} @media(max-width:1100px){ .kata>div+div::before{left:0} .kata>div::before{top:auto;left:auto} .kata>div::before{display:none} .kata::after{position:static;display:block;margin:12px 0 0;text-align:right} } /* ---- 13c. 月次の動き（タイムライン）------------------------------------ */ /* 「毎月、こう動きます」。左に時期、右に内容。上下の罫線で1行ずつ */ .month{border-top:1px solid var(--hair)} .month>div{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,3fr) minmax(0,6fr);column-gap:clamp(16px,3vw,48px); padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--hair);align-items:start} .month .mw{font-family:var(--en);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-top:6px; font-variant-numeric:lining-nums tabular-nums} .month .mw b{display:block;font-family:var(--jp);font-size:clamp(16px,1.4vw,19px);font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);margin-top:4px} .month h3{font-size:clamp(17px,1.6vw,22px);line-height:1.4} .month p{font-size:13.5px;line-height:2;color:var(--ink-2)} .month p b{color:var(--ink)} .inv .month .mw b,.inv .month p b{color:var(--paper)} /* ---- 13d. 判断基準（状況 → すること）---------------------------------- */ .rules{border-top:1px solid var(--ink)} .inv .rules{border-top-color:var(--paper)} .rules>div{display:grid;grid-template-columns:minmax(0,5fr) 40px minmax(0,6fr);column-gap:clamp(12px,2vw,28px); padding:clamp(18px,2.2vw,28px) 0;border-bottom:1px solid var(--hair);align-items:start} .rules .rc{font-size:clamp(14.5px,1.3vw,17px);font-weight:700;line-height:1.7} .rules .ra{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair);margin-top:2px} .rules .ra svg{width:12px;height:12px} .rules .rd{font-size:13.5px;line-height:1.95;color:var(--ink-2)} .rules .rd b{color:var(--ink)} .inv .rules .rd b,.inv .rules .rc{color:var(--paper)} .rules-head{display:grid;grid-template-columns:minmax(0,5fr) 40px minmax(0,6fr);column-gap:clamp(12px,2vw,28px);padding-bottom:10px; font-family:var(--en);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} @media(max-width:900px){ .month>div{grid-template-columns:1fr;row-gap:6px} .rules>div{grid-template-columns:1fr;row-gap:8px} .rules .ra{display:none} .rules-head{display:none} } /* ---- 13e. 下層の先頭にも、光を1本 -------------------------------------- トップの琥珀の光を、細く弱く。表紙（トップ）と章（下層）が同じ糸でつながる */ .page-hero.inv{position:relative;overflow:hidden;isolation:isolate} .page-hero.inv::before,.page-hero.inv::after{content:"";position:absolute;left:-12%;right:-12%;pointer-events:none;z-index:-1; background:linear-gradient(90deg,transparent 0%,#6b4d2e 22%,#e8cc9e 52%,#e08a3c 78%,transparent 100%)} .page-hero.inv::before{top:58%;height:2px;filter:blur(18px);opacity:.55;transform:rotate(-5deg)} .page-hero.inv::after{top:58%;height:1px;opacity:.35;transform:rotate(-5deg)} @media(prefers-reduced-motion:no-preference){ .page-hero.inv::before{animation:beam-breathe 9s ease-in-out infinite} } @keyframes beam-breathe{0%,100%{opacity:.45}50%{opacity:.7}} /* ---- 14. 料金 ---------------------------------------------------------- */ .plans{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));border-top:1px solid var(--hair);border-left:1px solid var(--hair)} .plan{padding:clamp(26px,3vw,44px) clamp(20px,2.6vw,40px);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);display:flex;flex-direction:column;position:relative} .plan.main{background:var(--ink);color:var(--paper);--hair:var(--hair-inv)} .plan .p-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;font-family:var(--en)} .plan.main .p-k{color:#a9a49a} .plan h3{font-size:clamp(20px,1.8vw,26px);margin-top:12px;line-height:1.35} .plan h3 small{display:block;font-size:12.5px;font-weight:500;color:var(--ink-3);margin-top:4px;letter-spacing:.02em} .plan.main h3 small{color:#cfcac0} .plan .p-fee{display:flex;align-items:baseline;gap:6px;margin:clamp(20px,2.4vw,32px) 0 18px;line-height:1;flex-wrap:wrap} .plan .p-fee b{font-family:var(--en);font-weight:500;font-size:clamp(48px,5.4vw,80px);letter-spacing:-.045em} .plan .p-fee .pre{font-size:15px;font-weight:700;letter-spacing:.02em;margin-right:2px} .plan .p-fee .u{font-size:16px;font-weight:700;letter-spacing:.02em} .plan .p-fee .tax{font-size:11.5px;color:var(--ink-3);margin-left:6px;letter-spacing:0;width:100%;margin-top:6px} .plan.main .p-fee .tax{color:#a9a49a} .plan ul{display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--hair);flex:1;align-content:start} .plan li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.85;color:var(--ink-2)} .plan.main li{color:#cfcac0} .plan li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:currentColor} .plan li b{color:var(--ink)} .plan.main li b{color:var(--paper)} .plan .p-tag{position:absolute;top:-1px;right:clamp(20px,2.6vw,40px);transform:translateY(-50%);background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;letter-spacing:.1em;padding:6px 14px;border-radius:999px} body:not([data-theme]) .plan .p-tag{background:var(--ink);color:var(--paper)} .plan .p-foot{margin-top:20px;font-size:12px;color:var(--ink-3);line-height:1.8} .plan.main .p-foot{color:#a9a49a} /* 料金の推移（月ごと）や補足の定義リスト */ .dl{border-top:1px solid var(--hair)} .dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:clamp(16px,3vw,48px);padding:18px 0;border-bottom:1px solid var(--hair)} .dl dt{font-size:12.5px;letter-spacing:.06em;color:var(--ink-3);padding-top:3px} .dl dd{font-size:14px;line-height:2;color:var(--ink-2)} .dl dd b{color:var(--ink)} .inv .dl dd b{color:var(--paper)} .dl dd a{text-decoration:underline;text-underline-offset:.22em} /* ---- 15. 比較表 -------------------------------------------------------- */ .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .tbl{width:100%;min-width:640px;border-collapse:collapse;font-size:13.5px} .tbl th,.tbl td{text-align:left;padding:18px 16px 18px 0;border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.85} .tbl thead th{font-size:12px;letter-spacing:.06em;color:var(--ink-3);font-weight:600;padding-bottom:14px;border-bottom:1px solid var(--ink)} .inv .tbl thead th{border-bottom-color:var(--paper)} .tbl thead th.ours{color:var(--ink);font-size:14px;font-weight:700} .inv .tbl thead th.ours{color:var(--paper)} .tbl thead th.ours::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px} .tbl tbody th{font-weight:600;color:var(--ink);width:150px;font-size:13px} .inv .tbl tbody th{color:var(--paper)} .tbl td{color:var(--ink-2)} .tbl td.ours{color:var(--ink);font-weight:600} .inv .tbl td.ours{color:var(--paper)} .tbl td small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:400;letter-spacing:0} .tbl .o{font-weight:700} .tbl-hint{font-size:11.5px;color:var(--ink-3);margin-bottom:10px;display:none} /* ---- 16. FAQ ----------------------------------------------------------- */ .faq{border-top:1px solid var(--hair)} .faq details{border-bottom:1px solid var(--hair)} .faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:48px minmax(0,1fr) 44px;column-gap:16px;align-items:center;padding:clamp(20px,2.4vw,30px) 0; font-size:clamp(15.5px,1.4vw,19px);font-weight:600;line-height:1.6;transition:opacity .3s} .faq summary::-webkit-details-marker{display:none} .faq summary .q{font-family:var(--en);font-size:12px;letter-spacing:.12em;color:var(--ink-3);font-weight:600} .faq summary .pm{position:relative;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair);justify-self:end;transition:transform .6s var(--ease),background .4s} .faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)} .faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s var(--ease)} .faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0)} .faq details[open] summary .pm{transform:rotate(180deg)} .faq summary:hover{opacity:.7} .faq .a{display:grid;grid-template-columns:48px minmax(0,1fr) 44px;column-gap:16px;padding:0 0 clamp(20px,2.4vw,30px)} .faq .a .m{font-family:var(--en);font-size:12px;letter-spacing:.12em;color:var(--accent);font-weight:600;padding-top:6px} .faq .a p{grid-column:2;font-size:14px;line-height:2.05;color:var(--ink-2);max-width:40em} .faq .a p b{color:var(--ink)} .faq .a p+p{margin-top:10px} /* ---- 17. 引用・宣言 ---------------------------------------------------- */ /* 宣言文。1行をで明示して、折り位置を幅まかせにしない。長い行が入りきらない幅でも読めるよう、最小サイズは小さめに取ってある */ .statement{font-weight:700;font-size:clamp(21px,3.4vw,44px);line-height:1.5;letter-spacing:-.01em} .statement .ln{display:block} .statement .ln+.ln{margin-top:.3em} /* 強調は下半分に色の帯。サービス色のページでは、その色を薄く敷く */ /* 強調：ゴールドのマーカー。下半分に帯。見えたときに左から引かれる。墨面でも同じ色で効く */ .statement em{font-style:normal;background-image:linear-gradient(transparent 52%,rgba(212,168,58,.48) 52%,rgba(212,168,58,.48) 92%,transparent 92%);background-repeat:no-repeat;background-size:100% 100%;padding:0 .04em;margin:0 -.04em} .inv .statement em{background-image:linear-gradient(transparent 52%,rgba(212,168,58,.6) 52%,rgba(212,168,58,.6) 92%,transparent 92%)} body.anim .statement.reveal em{background-size:0% 100%;transition:background-size .9s cubic-bezier(.2,.7,.3,1) .6s} body.anim .statement.reveal.in em{background-size:100% 100%} body[data-theme] .statement em{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--accent) 20%,transparent) 62%)} .inv .statement em{background:linear-gradient(transparent 62%,rgba(244,241,234,.14) 62%)} body[data-theme] .inv .statement em{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--accent) 45%,transparent) 62%)} /* ---- 18. 締めのCTA ----------------------------------------------------- */ .cta-final{position:relative;overflow:clip;isolation:isolate} /* 締めのCTAの光。ヒーローと同じ仕組みで、形（data-phase）と明るさ（data-dim）だけ変える。ページの頭と終わりで同じ光が走ると、間に挟まれた本文が一続きに見える */ .cta-beam{position:absolute;inset:0;z-index:-1;pointer-events:none; width:auto;height:auto;aspect-ratio:auto;opacity:1; -webkit-mask-image:none;mask-image:none} .cta-beam .hm-canvas{opacity:0;transition:opacity .8s var(--ease)} .cta-beam.gl-ready .hm-canvas{opacity:1} .cta-final .cta-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:end} /* 締めの見出し。112pxだと1行に10文字ほどしか入らず、「見せていただくところ／から。」のように語尾が落ちる。少し落として余裕を持たせる */ .cta-final .h2{font-size:clamp(34px,6.2vw,92px);line-height:1.12;letter-spacing:-.02em} .cta-final .cta-sub{margin-top:clamp(20px,3vw,40px);font-size:14.5px;line-height:2.05;max-width:36em;color:var(--ink-2)} .cta-final .cta-meta{display:flex;gap:8px 28px;flex-wrap:wrap;margin-top:22px;font-size:12.5px;color:var(--ink-3)} .cta-final .cta-meta span::before{content:"— ";color:var(--soft)} .cta-final .mail{margin-top:24px;font-size:14px} .cta-final .mail a{text-decoration:underline;text-underline-offset:.24em;text-decoration-thickness:1px;font-family:var(--en);letter-spacing:.02em} /* 申し込みの円。地味さの正体は「白い丸に黒い文字」だけだったこと。・輪をもう1本、少し外側に回す（ホバーで広がる）・矢印を右下に出す・光の面に置くので、白い円が発光しているように見える */ .cta-final .circle{position:relative;display:grid;place-items:center; width:clamp(190px,19vw,268px);aspect-ratio:1;border-radius:50%; background:var(--paper);color:var(--ink);text-align:center; font-size:clamp(15px,1.35vw,19px);font-weight:700;line-height:1.65;letter-spacing:.02em; /* 既定の .circle は overflow:hidden。外へ出す輪と矢印が切れるので解除する */ overflow:visible; transition:transform .7s var(--ease),box-shadow .7s var(--ease)} .cta-final .circle small{display:block;margin-top:8px;font-size:11.5px;font-weight:500;color:var(--ink-3);letter-spacing:.02em} .cta-final .circle-in{position:relative;z-index:1} /* 外側の輪。罫線1本なので、角丸カード禁止の方針とは別物 */ .cta-final .circle-ring{position:absolute;inset:-14px;border-radius:50%; border:1px solid var(--hair-inv);transition:inset .7s var(--ease),opacity .7s var(--ease);opacity:.8} .cta-final .circle-arr{position:absolute;right:4%;bottom:4%;display:grid;place-items:center; width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper); transition:transform .6s var(--ease)} .cta-final .circle-arr svg{width:16px;height:16px} @media(hover:hover){ .cta-final .circle:hover{transform:scale(1.035);box-shadow:0 0 0 0 transparent} .cta-final .circle:hover .circle-ring{inset:-26px;opacity:1} .cta-final .circle:hover .circle-arr{transform:rotate(-45deg)} } @media(max-width:900px){ .cta-final .circle{width:min(62vw,240px);margin-top:8px} } /* ---- 19. フッター ------------------------------------------------------ */ .footer{padding:clamp(48px,6vw,88px) 0 28px;border-top:1px solid var(--hair)} .footer .foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,48px);row-gap:36px} .footer .fb{font-weight:700;font-size:16px;letter-spacing:.04em;display:flex;align-items:center;gap:10px} .footer .fb .mark{width:22px;height:22px} .footer .fb .mark svg{width:100%;height:100%} /* 「長野県上田／市」のように語の途中で折れないよう、区切り記号でだけ折る */ .footer .fp{margin-top:14px;font-size:12.5px;line-height:2;color:var(--ink-2);word-break:keep-all;overflow-wrap:break-word} .menu-foot span{word-break:keep-all;overflow-wrap:break-word} .footer .fp a{text-decoration:underline;text-underline-offset:.22em} .footer .fh{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;font-family:var(--en);font-weight:600} .footer .fl a{display:block;padding:5px 0;font-size:13.5px;color:var(--ink-2);transition:color .3s;width:fit-content} .footer .fl a:hover{color:var(--ink)} .inv .footer .fl a:hover{color:var(--paper)} .footer .notes{margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--hair);font-size:11px;line-height:1.95;color:var(--ink-3);max-width:92em} .footer .copy{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-family:var(--en)} .footer .totop{display:inline-flex;align-items:center;gap:8px;color:var(--ink-3)} .footer .totop svg{width:12px;height:12px} /* ---- 20. 本文ページ（規約・ポリシー）---------------------------------- */ .prose{max-width:760px} .prose h2{font-size:clamp(18px,1.6vw,22px);margin:clamp(40px,4vw,56px) 0 16px;padding-top:18px;border-top:1px solid var(--hair);line-height:1.5} .prose h2:first-child{margin-top:0} .prose h3{font-size:15.5px;margin:26px 0 10px} .prose p,.prose li{font-size:14px;line-height:2.1;color:var(--ink-2)} .prose p{margin-bottom:14px} .prose ul,.prose ol{margin:0 0 16px 1.4em;list-style:disc} .prose ol{list-style:decimal} .prose li{margin-bottom:6px} .prose b{color:var(--ink)} .prose a{text-decoration:underline;text-underline-offset:.22em} .prose .rev{font-size:12px;color:var(--ink-3);margin-top:40px;padding-top:18px;border-top:1px solid var(--hair)} .prose table{width:100%;border-collapse:collapse;font-size:13.5px;margin:12px 0 18px} .prose th,.prose td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.8} .prose th{font-weight:600;color:var(--ink);white-space:nowrap} .toc{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 clamp(32px,4vw,56px);font-size:12.5px} .toc a{color:var(--ink-3);border-bottom:1px solid var(--hair);padding-bottom:2px} .toc a:hover{color:var(--ink);border-color:var(--ink)} /* ---- 21. フォーム ------------------------------------------------------ */ .form{display:grid;gap:clamp(24px,3vw,36px)} .field{display:grid;gap:8px} .field label{display:flex;align-items:baseline;gap:10px;font-size:13px;font-weight:600;letter-spacing:.04em} .field label .req,.field label .opt{font-family:var(--en);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-3)} .field label .req{color:var(--accent)} body:not([data-theme]) .field label .req{color:var(--ink)} .field input,.field select,.field textarea{ width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair);border-radius:0; padding:14px 0;font:inherit;font-size:16px;color:var(--ink);line-height:1.6; transition:border-color .4s var(--ease);-webkit-appearance:none;appearance:none} .field textarea{min-height:150px;resize:vertical} .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 2px center;padding-right:28px;cursor:pointer} .field input::placeholder,.field textarea::placeholder{color:var(--soft)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink)} /* マウスでは下線だけ、キーボードでは輪郭も出す（どこにいるか分からなくなるため） */ .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .field .hint{font-size:11.5px;color:var(--ink-3);line-height:1.8} .field.is-error input,.field.is-error select{border-bottom-color:#c0392b} .form .consent{font-size:12px;color:var(--ink-3);line-height:1.9} .form .consent a{text-decoration:underline;text-underline-offset:.2em} .form .status{font-size:13px;line-height:1.9;min-height:1em} .form .status.ng{color:#b03a2e} .form .status a{text-decoration:underline} .btn[disabled]{opacity:.5;pointer-events:none} /* ---- 22. 追従CTA（スマホ）--------------------------------------------- */ .sticky-cta{display:none} /* ---- 23. カーソル・粒子 ----------------------------------------------- */ .cursor{position:fixed;left:0;top:0;z-index:200;width:10px;height:10px;border-radius:50%;background:var(--ink);pointer-events:none; transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),background .35s,opacity .3s;opacity:0;mix-blend-mode:difference;background:#fff} body.has-cursor .cursor{opacity:1} body.cursor-hover .cursor{width:56px;height:56px} body.cursor-down .cursor{width:6px;height:6px} @media(pointer:coarse){.cursor{display:none}} .grain{position:fixed;inset:-50%;z-index:150;pointer-events:none;opacity:.05;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 1.2s steps(6) infinite} @keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}} /* ページを離れるとき（サイト内リンク）：一瞬で消えて、次のページが静かに出る */ body.anim.is-leaving{opacity:0;transition:opacity .22s var(--ease-io)} /* 読み込み直後の1回だけ：ページ全体を静かに出す。隠すのは body.anim のときだけ＝JSが動いた場合に限る。さらに保険として、JSがどこかで止まっても2.5秒後には必ず表示される（opacity を戻すアニメーションが fill:forwards で効く） */ body.anim{opacity:0;transition:opacity .6s var(--ease);animation:safety-show .01s linear 2.5s forwards} body.anim.is-ready{opacity:1} @keyframes safety-show{to{opacity:1}} /* ---- 24. 印刷 ---------------------------------------------------------- */ @media print{ .header,.menu,.sticky-cta,.cursor,.grain,.marquee{display:none!important} body,body.anim{opacity:1;background:#fff;color:#000;font-size:11pt;animation:none} body.anim .reveal,body.anim .mask .ln,body.anim .img-reveal,body.anim .img-reveal img{opacity:1;transform:none;clip-path:none} section,.sec{padding:16pt 0} .inv{background:#fff;color:#000} } /* ---- 25. 動きを減らす設定 ---------------------------------------------- */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} body,body.anim{opacity:1;transition:none;animation:none} /* 動きを減らす設定では、隠す指定をすべて打ち消す。ここに書き漏らすと、その要素は永久に見えないままになる */ body.anim .reveal,body.anim .mask .ln,body.anim .img-reveal, body.anim .reveal .lede .ln,body.anim .lede.reveal .ln{opacity:1;transform:none;clip-path:none;transition:none} body.anim .img-reveal img{transform:none;transition:none} .marquee-track{animation:none} .grain{animation:none} .cursor{display:none} *{transition-duration:.01ms!important} } /* ---- 26. 可変 ---------------------------------------------------------- */ @media(max-width:1100px){ .sec-head .label{grid-column:1/span 12;margin-top:0} .sec-head .h2,.sec-head .lead{grid-column:1/span 12} .row{grid-template-columns:minmax(0,.8fr) minmax(0,3fr) minmax(0,3fr) minmax(0,1.6fr) 48px} } /* ナビの項目名が一般名詞になって長くなったので、横並びは1100pxまで。それ以下はメニューボタンに切り替える（900pxでは4項目が入りきらない） */ @media(max-width:1240px){ .brand .en{display:none} } @media(max-width:1100px){ .nav,.head-cta{display:none} .menu-btn{display:block} .brand .sub{display:none} } @media(max-width:900px){ :root{--header-h:64px} .nav,.head-cta{display:none} .menu-btn{display:block} .brand .en,.brand .sub{display:none} .hero-row .lede{grid-column:1/span 12} .hero-acts,.hero-note{grid-column:1/span 12;justify-content:flex-start;text-align:left} .hero-note{margin-top:0} .page-hero-row .lede,.page-hero-row .body{grid-column:1/span 12} .page-hero-row .acts{grid-column:1/span 12;justify-content:flex-start} .stats{grid-template-columns:repeat(2,minmax(0,1fr))} .stat+.stat{padding-left:0;border-left:0} .stat:nth-child(even){padding-left:clamp(16px,2vw,32px);border-left:1px solid var(--hair)} .row{grid-template-columns:minmax(0,1fr) 44px;row-gap:12px;padding:24px 0} .row .r-idx{grid-column:1} .row .r-title{grid-column:1} .row .r-desc{grid-column:1/span 2} .row .r-price{grid-column:1;text-align:left} .row .r-arr{grid-row:1/span 2;grid-column:2} .cols3,.cols4{grid-template-columns:repeat(2,minmax(0,1fr))} .step{grid-template-columns:minmax(0,1fr);row-gap:10px} .plans{--n:1!important} .cta-final .cta-in{grid-template-columns:1fr} .footer .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .dl>div{grid-template-columns:1fr;row-gap:4px;padding:14px 0} .tbl-hint{display:block} .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(244,241,234,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--hair-2); transform:translateY(100%);transition:transform .6s var(--ease)} .sticky-cta.is-on{transform:none} .sticky-cta a{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;letter-spacing:.06em} body{padding-bottom:0} } @media(max-width:560px){ /* 3列の小さな表は、1列に積む（「長野県上田／市」のように語が割れる） */ .hero-meta{flex-direction:column;gap:12px} .hero-meta span{display:grid;gap:2px} .hero-meta b{display:block} /* 画面が狭いのに見出しだけ大きいままだと、1行に11文字しか入らず「ありません／か？」のように語尾が落ちる。字階ごと一段下げる */ :root{--fs-display:clamp(30px,8.6vw,44px);--fs-h1:clamp(29px,8.4vw,40px); --fs-h2:clamp(22px,6.4vw,30px);--fs-h3:clamp(16px,4.4vw,20px)} :root{--sec:clamp(72px,18vw,110px);--sec-s:clamp(56px,14vw,84px)} .cols2,.cols3,.cols4{grid-template-columns:1fr} .stats{grid-template-columns:1fr} .stat:nth-child(even){padding-left:0;border-left:0} .footer .foot-grid{grid-template-columns:1fr} .hero-acts .btn,.page-hero-row .acts .btn{width:100%} .row .r-title{font-size:24px} .faq summary,.faq .a{grid-template-columns:32px minmax(0,1fr) 36px;column-gap:10px} .tbl tbody th{width:110px} } /* ---- スマホの詰め直し（2026-09-14）------------------------------------ ここは最後に置く。上のメディアクエリを上書きするため */ @media(max-width:700px){ /* 光は文字の下に敷くものなので、狭い画面では主張を下げる。図版そのものを薄くしたうえで、暗幕を1枚かけて白文字の地を作る */ .hero-mark.is-beam{opacity:.52} .hero-mark.is-beam::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg, rgba(20,20,20,.30) 0%, rgba(20,20,20,.10) 26%, rgba(20,20,20,.58) 62%, rgba(20,20,20,.80) 100%)} .cta-beam{opacity:.6} /* 「事業／かたち」は狭い画面では出さない。 4事業はメニュー・下の帯・事業内容の節と、同じ画面で3回重なる。かたち（月額制・プロが実務まで担当）もリード文と事業内容にある。 PCでは右上の余白を埋める柱として働くので、そちらには残す */ .hero-meta{display:none} .hero-top{gap:0} .hero-title{margin-top:clamp(22px,4.5vh,40px)} /* 大見出しは画面の主役。狭い画面でも字階を落としすぎない */ :root{--fs-display:clamp(34px,10.2vw,46px)} .hero-row{margin-top:clamp(20px,3vh,32px)} .hero-acts{gap:10px} /* 申し込みの円。画面幅を超えて左へはみ出していた */ .cta-final .circle{width:min(58vw,216px);justify-self:center; margin-top:clamp(22px,6vw,36px);font-size:16px} .cta-final .circle-ring{inset:-9px} .cta-final .circle-arr{width:38px;height:38px;right:2%;bottom:2%} .cta-final .cta-in{gap:0} .cta-final .cta-sub{margin-top:18px} /* 100svh のままだと、帯の下に用のない暗い余白が残る。中身の高さで終わらせる */ .hero{min-height:auto;padding-bottom:clamp(26px,7vw,46px)} } /* ---- スマホの余白（2026-09-14）---------------------------------------- .hero-row / .page-hero-row は column-gap しか持っていない。広い画面では横並びなので問題なかったが、1列に落ちると行間がゼロになり、リード文にボタンがくっつく。行方向の間隔をここで与える */ @media(max-width:900px){ .hero-row{row-gap:clamp(26px,6.5vw,40px)} .page-hero-row{row-gap:clamp(24px,6vw,36px)} /* ボタンどうし。指で押す的なので、詰めすぎると押し間違える */ .hero-acts,.page-hero-row .acts{gap:14px;width:100%} .hero-note{margin-top:16px} } @media(max-width:700px){ /* 版面の左右。狭い画面で 20px は窮屈なので、文字の高さぶんは確保する */ :root{--gutter:clamp(22px,5.6vw,32px)} /* ボタンは指の的。高さを上げ、上下にも余白を持たせる */ .btn{height:62px} .hero{padding-bottom:clamp(34px,9vw,56px)} /* 帯の前後。ラベルと帯が本文にくっついて見えていた */ .hero .marquee{padding:16px 0} /* 締めのCTA。節の余白が効いておらず、上下が詰まっていた */ .cta-final{padding:clamp(64px,16vw,96px) 0} .cta-final .cta-sub{margin-top:20px} } /* ===== 型の輪（トップ）：輪・目盛り・4つの段・まわる点。文章は最小限 ===== */ .loop{position:relative;width:min(100%,980px);margin:0 auto} .lp-svg{display:block;width:58%;margin:0 auto;overflow:visible} .lp-ticks line{stroke:var(--ink);stroke-opacity:.28;stroke-width:1.2} .lp-ring{fill:none;stroke:var(--ink);stroke-width:1.5} .lp-arr path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .lp-node circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.5} .lp-node text{font-family:var(--en);font-size:12px;font-weight:600;letter-spacing:.06em;text-anchor:middle;fill:var(--ink)} .lp-wm{font-family:var(--en);font-size:92px;font-weight:500;letter-spacing:-.045em;text-anchor:middle;fill:var(--ink)} .lp-k{font-family:var(--en);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-anchor:middle;fill:var(--ink-3)} .lp-dot{fill:var(--ink)} .lp-lab{position:absolute;display:grid;gap:4px;width:calc(26.8% - 40px);transform:translateY(-50%)} .lp-lab b{font-family:var(--en);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase} .lp-lab span{font-size:13px;line-height:1.7;color:var(--ink-2);word-break:keep-all} .lp-lab .num{font-style:normal;font-weight:600;color:var(--ink)} .lp-1{left:calc(50% + 23.2% + 36px);top:calc(50% - 40%)} .lp-2{left:calc(50% + 23.2% + 36px);top:calc(50% + 40%)} .lp-3{right:calc(50% + 23.2% + 36px);top:calc(50% + 40%);text-align:right} .lp-4{right:calc(50% + 23.2% + 36px);top:calc(50% - 40%);text-align:right} .lp-foot{display:grid;justify-items:center;gap:22px;margin-top:clamp(28px,3.5vw,48px);text-align:center} .lp-foot .note{max-width:640px} /* 描き込み：輪が1周、目盛りと節が順に現れる */ body.anim .loop .lp-ring{stroke-dasharray:1508 1508;stroke-dashoffset:1508;transition:stroke-dashoffset 1.8s var(--ease) .2s} body.anim .loop.in .lp-ring{stroke-dashoffset:0} body.anim .loop .lp-ticks,body.anim .loop .lp-arr,body.anim .loop .lp-center,body.anim .loop .lp-dot{opacity:0;transition:opacity .8s var(--ease) 1.4s} body.anim .loop.in .lp-ticks,body.anim .loop.in .lp-arr,body.anim .loop.in .lp-center,body.anim .loop.in .lp-dot{opacity:1} body.anim .loop .lp-node{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity .6s var(--ease) var(--d),transform .6s var(--ease) var(--d)} body.anim .loop.in .lp-node{opacity:1;transform:none} body.anim .loop .lp-lab{opacity:0;transition:opacity .8s var(--ease) 1.5s} body.anim .loop.in .lp-lab{opacity:1} @media(prefers-reduced-motion:reduce){.lp-dot{display:none}} @media(max-width:760px){ .loop{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px} .lp-svg{width:100%;grid-column:1/-1;margin-bottom:8px} .lp-lab{position:static;transform:none;width:auto;text-align:left} .lp-lab span{font-size:12.5px} } /* 型の輪：段の名前を節の中に。墨面では白黒を反転 */ .kn-no{font-family:var(--en);font-size:12px;font-weight:600;letter-spacing:.12em;text-anchor:middle;fill:var(--ink-3)} .kn-nm{font-size:22px;font-weight:700;letter-spacing:.02em;text-anchor:middle;fill:var(--ink)} .kr-wm{font-size:120px;font-weight:700;letter-spacing:-.02em;text-anchor:middle;fill:var(--ink)} .lp-ret{font-size:12px;font-weight:600;letter-spacing:.04em;text-anchor:middle;fill:var(--ink-3)} .kring .lp-lab span{font-size:13.5px} /* ラベルは節と同じ高さに（節は中心から45度・半径240＝縦28.3%の位置） */ .kring .lp-1,.kring .lp-4{top:calc(50% - 28.3%)} .kring .lp-2,.kring .lp-3{top:calc(50% + 28.3%)} .lp-lead line{stroke:var(--ink);stroke-opacity:.45;stroke-width:1} .inv .lp-lead line{stroke:var(--paper);stroke-opacity:.45} body.anim .loop .lp-lead{opacity:0;transition:opacity .8s var(--ease) 1.5s} body.anim .loop.in .lp-lead{opacity:1} .kring .lp-lab{width:calc(26.8% - 56px)} .kring .lp-1,.kring .lp-2{left:calc(50% + 23.2% + 52px)} .kring .lp-3,.kring .lp-4{right:calc(50% + 23.2% + 52px)} .inv .lp-ticks line,.inv .lp-ring,.inv .lp-arr path{stroke:var(--paper)} .inv .lp-node circle{fill:var(--ink);stroke:var(--paper)} .inv .kn-nm,.inv .kr-wm,.inv .lp-dot{fill:var(--paper)} .inv .lp-dot{fill:var(--paper)} .inv .kn-no,.inv .lp-k,.inv .lp-ret{fill:var(--ink-3)} /* 段の名前は見出しとして持つ。画面の広いときは図の節に同じ名前があるので、読み上げ・検索にだけ残す */ .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .kring .lp-lab .lp-nm{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;font-size:13px;font-weight:700;letter-spacing:.02em} .kring .lp-lab .lp-nm .num{font-weight:600;color:var(--ink-3);margin-right:2px} @media(max-width:760px){ .kring .lp-lab{width:auto} .kring .lp-lab .lp-nm{position:static;width:auto;height:auto;margin:0;clip:auto;overflow:visible} .lp-lead{display:none} } /* 指で押す場所は 44px 以上に。狭い画面だけ広げ、広い画面の詰まりは保つ */ @media(max-width:760px),(pointer:coarse){ .footer .fl a{padding:11px 0} .footer .totop{padding:12px 0} .tlink{padding-top:8px;padding-bottom:12px} .footer .fp a{display:inline-block;padding:4px 0} } /* ===== 細線のアイコン：型の4段・作り方の3つ。線1.5px・currentColor。出現時に描き込む ===== */ .ico{display:block;width:60px;height:60px;color:var(--ink);margin:20px 0 4px} .ico .s,.ico path{stroke-width:1.35} .inv .ico{color:var(--paper)} .kata .ico{margin:22px 0 2px} .kata .ico+h3{margin-top:14px} /* ===== アイコンの動き：意味に沿って、はっきり動く ===== 初期状態は静止して見えている。JSが動き、画面に入ったら（.reveal.in）ループが始まる。変形の基準は view-box（=48×48の座標）で指定する。 */ .ico *{transform-box:view-box} /* 知る：波紋 */ @keyframes k-wave{0%{opacity:0;transform:scale(.55)}25%{opacity:1}100%{opacity:0;transform:scale(1.35)}} @keyframes k-beat{0%,100%{transform:scale(1)}12%{transform:scale(1.45)}30%{transform:scale(1)}} .k-w{transform-origin:17px 24px} .k-dot{transform-origin:17px 24px} body.anim .reveal.in .k-w{animation:k-wave 2.4s cubic-bezier(.2,.6,.3,1) infinite} body.anim .reveal.in .k-w2{animation-delay:.6s} body.anim .reveal.in .k-dot{animation:k-beat 2.4s ease-out infinite} /* 形にする：行を順に引き、そろったら消す */ @keyframes f-type{0%{stroke-dashoffset:1;opacity:1}18%{stroke-dashoffset:0}78%{stroke-dashoffset:0;opacity:1}88%{opacity:0}89%{stroke-dashoffset:1}100%{stroke-dashoffset:1;opacity:1}} .f-l{stroke-dasharray:1 1;stroke-dashoffset:0} body.anim .reveal.in .f-l{animation:f-type 3.4s cubic-bezier(.2,.7,.3,1) infinite} body.anim .reveal.in .f-l2{animation-delay:.5s} body.anim .reveal.in .f-l3{animation-delay:1s} /* 届ける：点は SMIL で道をたどる。円は着いた瞬間に受け取る */ @keyframes t-catch{0%,78%{transform:scale(1);stroke-width:1.35}86%{transform:scale(1.28);stroke-width:2.2}100%{transform:scale(1);stroke-width:1.35}} .t-goal{transform-origin:34.5px 14px} .t-mover{opacity:0} body.anim .reveal.in .t-goal{animation:t-catch 2.6s ease-out infinite} /* 育てる：線が伸び、先端の点がふくらむ */ @keyframes g-grow{0%{stroke-dashoffset:1;opacity:1}38%{stroke-dashoffset:0}82%{stroke-dashoffset:0;opacity:1}92%{opacity:0}93%{stroke-dashoffset:1}100%{stroke-dashoffset:1;opacity:1}} @keyframes g-pop{0%,34%{opacity:0;transform:scale(.3)}44%{opacity:1;transform:scale(1.7)}56%{transform:scale(1)}82%{opacity:1}92%,100%{opacity:0}} .g-line{stroke-dasharray:1 1;stroke-dashoffset:0} .g-dot{transform-origin:39px 14px} body.anim .reveal.in .g-line{animation:g-grow 3.6s cubic-bezier(.3,.6,.2,1) infinite} body.anim .reveal.in .g-dot{animation:g-pop 3.6s ease-out infinite} /* 型から選ぶ：選択が4つの枡を順に移る */ @keyframes p-pick{0%,22%{transform:translate(0,0)}25%,47%{transform:translate(17px,0)}50%,72%{transform:translate(17px,17px)}75%,97%{transform:translate(0,17px)}100%{transform:translate(0,0)}} body.anim .reveal.in .p-sel{animation:p-pick 3.2s cubic-bezier(.7,0,.2,1) infinite} /* フルスクラッチ：当たり線が動き、交点の印が追う */ @keyframes c-hy{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}} @keyframes c-vx{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}} @keyframes c-xy{0%,100%{transform:translate(0,0)}50%{transform:translate(9px,9px)}} body.anim .reveal.in .c-h{animation:c-hy 3s ease-in-out infinite} body.anim .reveal.in .c-v{animation:c-vx 3s ease-in-out .75s infinite} /* 交点は横線と縦線の両方に追いつく必要があるので、縦横で別々に動かす */ body.anim .reveal.in .c-x{animation:c-hy 3s ease-in-out infinite,c-vx 3s ease-in-out .75s infinite;animation-composition:add} /* ECサイト：商品が落ちて袋に入り、袋が弾む */ @keyframes e-drop{0%{transform:translateY(0);opacity:0}8%{opacity:1}42%{transform:translateY(22px);opacity:1}50%{transform:translateY(22px);opacity:0}100%{transform:translateY(22px);opacity:0}} @keyframes e-bump{0%,40%{transform:scale(1,1)}48%{transform:scale(1.06,.93)}58%{transform:scale(.98,1.03)}66%,100%{transform:scale(1,1)}} .e-item{opacity:0} .e-bag{transform-origin:24px 39px} body.anim .reveal.in .e-item{animation:e-drop 2.6s cubic-bezier(.5,0,.9,.6) infinite} body.anim .reveal.in .e-bag{animation:e-bump 2.6s ease-out infinite} @media(prefers-reduced-motion:reduce){.ico *{animation:none!important}.t-mover{display:none}.e-item{display:none}.f-l,.g-line{stroke-dashoffset:0}} /* ===== リスト項目のアイコン（約束・進め方・仕事・毎月の動き）===== */ .ico-s{width:52px;height:52px;margin:0 0 14px} .item .ico-s{margin-top:-6px} /* 3列の行（進め方・毎月の動き）：番号｜アイコン＋見出し｜本文 */ .step{grid-template-rows:auto auto} .step .st-no,.step p{grid-row:1/span 2} .step .ico-s{grid-column:2;grid-row:1;margin-bottom:10px} .step h3{grid-column:2;grid-row:2} .step p{grid-column:3} .month>div{grid-template-rows:auto auto} .month .mw,.month p{grid-row:1/span 2} .month .ico-s{grid-column:2;grid-row:1;margin-bottom:10px} .month h3{grid-column:2;grid-row:2} .month p{grid-column:3} @media(max-width:760px){ .step,.month>div{grid-template-rows:auto} .step .st-no,.step p,.month .mw,.month p{grid-row:auto} .step .ico-s,.step h3,.step p,.month .ico-s,.month h3,.month p{grid-column:1/-1} .step .ico-s,.step h3,.month .ico-s,.month h3{grid-row:auto} .step .st-no,.month .mw{order:-1;margin-bottom:14px} } /* 汎用の動き。部品ごとにクラスで割り当てる。初期状態は静止して見えている */ .ico-s [pathLength]{stroke-dasharray:1 1;stroke-dashoffset:0} @keyframes a-draw{0%{stroke-dashoffset:1;opacity:1}30%{stroke-dashoffset:0}80%{stroke-dashoffset:0;opacity:1}90%{opacity:0}91%{stroke-dashoffset:1}100%{stroke-dashoffset:1;opacity:1}} @keyframes a-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.75}} @keyframes a-beat{0%,100%{transform:scale(1)}15%{transform:scale(1.5)}35%{transform:scale(1)}} @keyframes a-spin{to{transform:rotate(360deg)}} @keyframes a-grow{0%{transform:scaleY(0)}35%{transform:scaleY(1)}80%{transform:scaleY(1)}95%,100%{transform:scaleY(0)}} @keyframes a-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes a-slide{0%,100%{transform:translateX(0);opacity:1}50%{transform:translateX(5px);opacity:.6}} @keyframes a-hop{0%,20%{transform:translate(0,0)}25%,45%{transform:translate(7.5px,0)}50%,70%{transform:translate(15px,0)}75%,95%{transform:translate(15px,7px)}100%{transform:translate(0,0)}} @keyframes a-blink{0%,100%{opacity:.25}50%{opacity:1}} @keyframes a-swing{0%,100%{transform:rotate(-35deg)}50%{transform:rotate(30deg)}} body.anim .reveal.in .an-draw{animation:a-draw 3.2s cubic-bezier(.2,.7,.3,1) infinite} body.anim .reveal.in .an-pulse{animation:a-pulse 2.6s ease-in-out infinite} body.anim .reveal.in .an-beat{animation:a-beat 2.6s ease-out infinite} body.anim .reveal.in .an-spin{animation:a-spin 4s cubic-bezier(.6,0,.3,1) infinite} body.anim .reveal.in .an-grow{animation:a-grow 3.2s cubic-bezier(.2,.7,.3,1) infinite;transform-origin:center bottom;transform-box:fill-box} body.anim .reveal.in .an-bob{animation:a-bob 1.8s ease-in-out infinite} body.anim .reveal.in .an-slide{animation:a-slide 1.8s ease-in-out infinite} body.anim .reveal.in .an-hop{animation:a-hop 3.6s cubic-bezier(.7,0,.2,1) infinite} body.anim .reveal.in .an-blink{animation:a-blink 2s ease-in-out infinite} body.anim .reveal.in .an-swing{animation:a-swing 2.4s ease-in-out infinite} body.anim .reveal.in .d1{animation-delay:.15s} body.anim .reveal.in .d2{animation-delay:.55s} body.anim .reveal.in .d3{animation-delay:.95s} body.anim .reveal.in .d4{animation-delay:1.35s} @media(prefers-reduced-motion:reduce){.ico-s *{animation:none!important;transform:none!important;opacity:1!important;stroke-dashoffset:0!important}} /* ===== 他のサービスへ（サービスページの締め直前）===== */ .xs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)} .xs-card{display:flex;flex-direction:column;gap:10px;padding:clamp(26px,3vw,40px) clamp(20px,2.6vw,44px) clamp(28px,3.2vw,44px) 0;color:inherit;position:relative} .xs-card+.xs-card{padding-left:clamp(20px,2.6vw,44px);border-left:1px solid var(--hair)} .xs-k{font-family:var(--en);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--ink-3)} .xs-card h3{font-size:clamp(19px,1.8vw,25px);line-height:1.4;margin-top:6px} .xs-card p{font-size:13.5px;line-height:1.95;color:var(--ink-2);word-break:normal;max-width:34em} .xs-foot{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:18px;border-top:1px solid var(--hair-2)} .xs-price{font-size:clamp(24px,2.2vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1;white-space:nowrap} .xs-price small{font-family:var(--jp);font-size:13px;font-weight:700;letter-spacing:.02em;margin-left:3px} .xs-price small.pre{margin:0 4px 0 0} .xs-go{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;letter-spacing:.04em;padding-bottom:4px;border-bottom:1px solid currentColor} .xs-go svg{width:14px;height:14px;transition:transform .5s var(--ease)} .xs-card:hover .xs-go svg{transform:translateX(5px)} .xs-card:hover h3{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px} @media(max-width:760px){.xs{grid-template-columns:1fr}.xs-card+.xs-card{padding-left:0;border-left:0;border-top:1px solid var(--hair)}} /* トップの事業行：六角の紋（ロゴと同じ形・中央に一字）。行が反転したら白線になる */ /* 紋は番号と同じ行に小さく置く（段を増やさない） */ .sv-mark{display:inline-block;width:30px;height:34px;color:var(--ink);vertical-align:middle;margin:-6px 10px 0 0;transition:color .35s} .sv-mark+.sv-idx{display:inline-block;vertical-align:middle} .svc:hover .sv-mark{color:var(--paper)} /* ===== 時刻で変わる光：WebGL が無いときの SVG の光も、調子に合わせて色相と明るさをずらす ===== */ html[data-tone="dawn"] .hero-mark svg{filter:hue-rotate(-8deg) saturate(1.15)} html[data-tone="day"] .hero-mark svg{filter:saturate(.8) brightness(1.08)} html[data-tone="dusk"] .hero-mark svg{filter:hue-rotate(-12deg) saturate(1.25)} html[data-tone="night"] .hero-mark svg{filter:saturate(.9) brightness(.8)} /* ===== 紋の押印：触れると印面が琥珀に染まって押され、朱肉が紙に滲むように広がって消える ===== */ .sv-mark{transform-origin:center;overflow:visible} .sv-mark .hex,.sv-mark .ch{transition:fill .25s} .sv-mark .stamp-halo{transform-box:view-box;transform-origin:66.45px 76px;opacity:0} @keyframes stamp{0%{transform:translateY(0) scale(1)}28%{transform:translateY(2px) scale(.9)}55%{transform:translateY(-1px) scale(1.05)}100%{transform:translateY(0) scale(1)}} @keyframes hexfill{0%{fill:transparent;stroke:currentColor}22%{fill:#141414;stroke:#141414}60%{fill:#141414;stroke:#141414}100%{fill:transparent;stroke:currentColor}} @keyframes chfill{0%{fill:currentColor}22%{fill:#f4f1ea}60%{fill:#f4f1ea}100%{fill:currentColor}} @keyframes bleed{0%{opacity:0;transform:scale(.7)}22%{opacity:.55;transform:scale(1.1)}100%{opacity:0;transform:scale(2.6)}} .svc:hover .sv-mark{animation:stamp .6s cubic-bezier(.3,.9,.3,1) both} .svc:hover .sv-mark .hex{animation:hexfill 1.1s cubic-bezier(.2,.7,.3,1) both} .svc:hover .sv-mark .ch{animation:chfill 1.1s cubic-bezier(.2,.7,.3,1) both} .svc:hover .sv-mark .stamp-halo{animation:bleed 1.2s cubic-bezier(.2,.7,.3,1) .05s both} @media(prefers-reduced-motion:reduce){.svc:hover .sv-mark,.svc:hover .sv-mark .hex,.svc:hover .sv-mark .ch,.svc:hover .sv-mark .stamp-halo{animation:none}}