/* ========================================================================== 雄喜晃株式会社 — Typography Layer（組版）v1 2026-09-05 -------------------------------------------------------------------------- SASAYAホールディングス（sasaya-company.jp）を分解して抽出した4つの手。 01 縦組みを1か所だけ ／ 02 英字の字間を開ける 03 見出しの後ろに巨大な文字を薄く敷く ／ 04 揃えを混ぜる（全部中央にしない） ★ style/motion/stage/craft は触らない。読み込みは必ず最後。 ★ 縦組みに writing-mode は使わない（下の注意書き参照）。 ========================================================================== */ /* ---------- 02 英字ラベルの字間 -------------------------------------------- ★詰まった英字は既製品に見え、開いた英字は誂えものに見える。 サイズは少し下げて、そのぶん字間を開ける。 */ /* ★2026-09-05 木戸さん決定。ISSEI のサイト（Noto Sans JP を細く・字間を広く）に揃える。 日本語と英語を1書体でそろえた方が、面として静かになる。 */ .section-subtitle, .sec-head .label, .page-header-en{font-family:'Noto Sans JP','Hiragino Sans',sans-serif!important; font-weight:300!important;letter-spacing:.46em!important} .section-subtitle,.sec-head .label{font-size:.72rem} .page-header-en{font-size:.7rem} /* 字間を開けると右にはみ出て中央からずれるので、最後の1字ぶんを戻す */ .section-subtitle,.sec-head .label,.page-header-en{text-indent:.46em} /* ---------- 見出しだけ明朝、本文とラベルはゴシック ------------------------- ★2026-09-05 木戸さん決定（3案を見比べて C を選択）。 見出し = Noto Serif JP（明朝）… 言葉を選んでいる会社に見せる 本文/ラベル = Noto Sans JP（ゴシック）… 読みやすさを引き受ける 数字 = Noto Sans JP … 明朝の数字は桁が揃わず金額が読みにくい ★太さと字間は ISSEI／SASAYA と同じ考え方のまま。 大きい見出しほどウェイトを落として字間を開ける。 h1 200 / .14em h2 300 / .22em h3 400 / .12em h4 400 / .10em ★!important が要る。style.css 側は .section-title のようなクラス指定（0,1,0）で、 こちらの h1,h2,h3,h4（0,0,1）より詳細度が高い。後ろに書いても負ける。 ★字間を開けた行を中央寄せにすると、最後の1字ぶんだけ左にずれる。 text-indent で同じ量を戻す。 */ h1,h2,h3,h4, .serif,.message-quote,.product-group-label .grp{ font-family:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif!important} h1{font-weight:200!important;letter-spacing:.14em!important;line-height:1.62!important} h2{font-weight:300!important;letter-spacing:.22em!important;line-height:1.8!important} h3{font-weight:400!important;letter-spacing:.12em!important;line-height:1.85!important} h4{font-weight:400!important;letter-spacing:.1em!important} .message-quote{font-weight:200!important;letter-spacing:.18em!important;line-height:2.15!important} .text-center h1,.hero h1{text-indent:.14em} .text-center h2,.section-head h2,.sec-head h2{text-indent:.22em} /* ★数字は字間を詰めて細く。開けると桁がばらけて金額が読みにくい。 */ .ph-num,.amt,.value-number,.step-no,.why-no, .hero-facts b,.price-strip .amt,.hp-point b{ font-family:'Noto Sans JP','Hiragino Sans',sans-serif!important; font-weight:200!important;letter-spacing:.04em!important;text-indent:0} /* ---------- 03 見出しの後ろの巨大な透かし ---------------------------------- ★ 文字数で大きさが変わる（--ty-n は type.js が入れる）。 決め打ちにすると "WHAT'S INCLUDED" のような長いラベルが画面からはみ出す。 ★ セクションに overflow:hidden を足さないこと。中の position:sticky が死ぬ （2026-09-04 に実績の横流しで踏んだ罠）。だから幅の方を抑える。 */ .ty-wm{position:absolute;top:14px;right:4%;z-index:0;pointer-events:none; font-family:'Noto Sans JP','Hiragino Sans',sans-serif;font-weight:200;line-height:1; white-space:nowrap;max-width:92%;letter-spacing:.06em; color:rgba(10,37,64,.036); font-size:clamp(2rem, calc(78vw / var(--ty-n, 12)), 5.6rem)} .hero .ty-wm,.page-header .ty-wm,.cta .ty-wm{color:rgba(255,255,255,.05)} .bg-surface .ty-wm{color:rgba(10,37,64,.05)} /* 透かしより前に本文を出す */ .section > .container,.section-head,.sec-head{position:relative;z-index:1} @media(max-width:860px){ .ty-wm{opacity:.6;top:10px} } /* ---------- 04 揃えを混ぜる ------------------------------------------------- ★「全部左づめ」がAI感なら「全部中央」も同じくらい機械的。 どのセクションを左に振るかは type.js の LEFT_SECTIONS で決めている。 ★ 中身の .text-center は inline style で margin:0 auto を持っているので、 !important でないと外れない。 */ .ty-left .text-center, .ty-left .sec-head{text-align:left!important;margin-left:0!important;margin-right:auto!important} .ty-left .section-subtitle, .ty-left .sec-head .label{position:relative;padding-left:52px;display:inline-block} .ty-left .section-subtitle::before, .ty-left .sec-head .label::before{content:"";position:absolute;left:0;top:50%; width:36px;height:1px;background:var(--color-accent,#d97843)} .ty-left .lead,.ty-left .sec-head p{margin-left:0;margin-right:0} @media(max-width:640px){ .ty-left .section-subtitle,.ty-left .sec-head .label{padding-left:34px} .ty-left .section-subtitle::before,.ty-left .sec-head .label::before{width:22px} } /* ---------- 01 縦組み（PCのみ・ヒーローに1か所だけ） ------------------------ ★★ writing-mode:vertical-rl は使わない。 Chromium で明朝＋letter-spacing を併用すると字送りが足りず、 文字が2つずつ重なって読めなくなる（2026-09-05 実測）。 1文字ずつ縦に積む方が確実で、句読点の位置も自分で決められる。 */ .ty-tate,.ty-scroll{display:none;flex-direction:column;align-items:center;line-height:1; position:absolute;z-index:3;pointer-events:none} .ty-tate i,.ty-scroll i{font-style:normal;display:block} .ty-tate i.pt{transform:translate(.38em,-.3em)} /* 、。は右上へ寄せる */ @media(min-width:1024px){ .ty-tate,.ty-scroll{display:flex} } /* ★右端は章立てインジケーター（.cf-chap）の指定席なので、そこまで寄せない。 38px だと点と重なって窮屈になった（2026-09-05 実測）。 */ .ty-tate{top:96px;right:72px;gap:.36em; font-family:'Noto Serif JP','Yu Mincho',serif;font-weight:400; font-size:.84rem;letter-spacing:.02em;color:rgba(255,255,255,.62); opacity:0;transform:translateX(12px); animation:ty-in .9s cubic-bezier(.22,1,.36,1) 1.1s forwards} /* ★bottom で置くと、背の高いヒーロー（/web-design は959px）では 画面外に出てスクロールの合図にならない。min() で「ヒーローの下寄り」と 「画面の下寄り」の近い方に置く。 */ .ty-scroll{left:36px;top:min(78vh,calc(100% - 96px));bottom:auto;gap:.5em; font-family:'Noto Sans JP','Hiragino Sans',sans-serif;font-weight:300; font-size:.64rem;letter-spacing:.06em;color:rgba(255,255,255,.45); opacity:0;animation:ty-in .9s ease 1.4s forwards} .ty-scroll::after{content:"";display:block;width:1px;height:34px;margin-top:14px; background:linear-gradient(rgba(255,255,255,.4),transparent)} @keyframes ty-in{to{opacity:1;transform:none}} /* 縦組みを出したら、既存の横並びスクロールキューは重複するので隠す */ @media(min-width:1024px){ .ty-has-tate .mo-cue{display:none} } @media(prefers-reduced-motion:reduce){ .ty-tate,.ty-scroll{animation:none;opacity:1;transform:none} } /* ========================================================================== 05 章に三色を配る（ロゴの緑・橙・青） 2026-09-05 木戸さん決定 -------------------------------------------------------------------------- ★三色を「面」で使うと散らかる。「線」と「点」だけで使う。 章ごとに1色を決め、英字ラベルの色と、その左の短い線にだけ乗せる。 青 #2c6ba8 … 事業・仕組み（何をやるか） 緑 #5a7b3e … 実績・人（誰がやってきたか） 橙 #d84f1e … 料金・行動（いくらで、次に何をするか） ★色の割り当ては type.js が英字ラベルの文言を見て data-hue を付ける。 HTML 側には何も書かない（18ページに手を入れずに済む）。 ========================================================================== */ :root{ --yk-b:#2c6ba8; /* ロゴの青 */ --yk-g:#5a7b3e; /* ロゴの緑 */ --yk-o:#d84f1e; /* ロゴの橙 */ } /* いままでのテラコッタ（#d97843）をロゴの橙に寄せて1色に統一する */ :root{ --color-accent:#d84f1e; --color-accent-hover:#b84016; } [data-hue="b"]{--yk-hue:var(--yk-b)} [data-hue="g"]{--yk-hue:var(--yk-g)} [data-hue="o"]{--yk-hue:var(--yk-o)} /* 英字ラベルと、その左の短い線 */ [data-hue] .section-subtitle, [data-hue] .sec-head .label, [data-hue] .page-header-en{color:var(--yk-hue)!important} [data-hue] .ty-left .section-subtitle::before, [data-hue] .ty-left .sec-head .label::before{background:var(--yk-hue)} /* 中央ぞろえの章にも、ラベルの下に同じ線を1本だけ引く */ [data-hue] .section-subtitle:not(.ty-left *)::after{content:"";display:block; width:34px;height:1px;margin:11px auto 0;background:var(--yk-hue);opacity:.85} [data-hue] .ty-left .section-subtitle::after{display:none} /* 見出しの後ろの巨大な透かしも、章の色をごく薄く含ませる */ [data-hue] .ty-wm{color:color-mix(in srgb, var(--yk-hue) 22%, rgba(10,37,64,.036))} [data-hue] .bg-surface .ty-wm{color:color-mix(in srgb, var(--yk-hue) 16%, rgba(10,37,64,.05))} /* 事業内容の3枚だけは、三色を1枚ずつ受け持つ（ここが色の見せ場） */ .yk-tri > *:nth-child(3n+1){border-top:2px solid var(--yk-b)} .yk-tri > *:nth-child(3n+2){border-top:2px solid var(--yk-g)} .yk-tri > *:nth-child(3n+3){border-top:2px solid var(--yk-o)} @media(max-width:640px){ .yk-tri > *{border-top-width:2px} } /* アイコンの面も、そのカードの色にそろえる（style.css は橙のグラデ固定） */ .yk-tri > *:nth-child(3n+1) .service-icon{background:var(--yk-b)} .yk-tri > *:nth-child(3n+2) .service-icon{background:var(--yk-g)} .yk-tri > *:nth-child(3n+3) .service-icon{background:var(--yk-o)} /* 番号（SERVICE 01 など）も同じ色に */ .yk-tri > *:nth-child(3n+1) .service-number{color:var(--yk-b)} .yk-tri > *:nth-child(3n+2) .service-number{color:var(--yk-g)} .yk-tri > *:nth-child(3n+3) .service-number{color:var(--yk-o)} /* ========================================================================== 06 スマホの手当て 2026-09-05 -------------------------------------------------------------------------- ★広い字間は「小さい文字」でしか効かない。狭い画面の大きな見出しに同じ量を かけると、1行に収まらなくなって語の途中で折れる。実測（Noto Serif JP）： 「仕組みで進む。」 幅393pxの画面・43px .14em → 345px（使える幅 345px）… 収まらない → 仕/組み/で進む。と割れる .04em → 315px … 収まる（余裕30px） 幅375pxの画面・41px でも .04em なら 300px（使える幅 327px）で収まる。 なので見出しだけスマホで字間を戻す。小さいラベルは開いたままでよい。 ========================================================================== */ @media(max-width:760px){ /* ① ヒーロー右上の橙の光を消す。 520px の円を右上に置いているので、PCでは隅の差し色でも、 幅390pxの画面では画面の上半分が橙に曇る。 */ .hero::before{display:none} /* ただし /web-design の ::before は橙ではなく方眼なので残す */ .hero.hero-center-lp::before{display:block} /* /web-design 側の橙は別物。420pxの円を blur(70px) で右上に置いているので、 こちらも狭い画面ではヒーローの上半分が橙に曇る。青い方（.blob.b）は残す。 */ .hero .blob.a{display:none} /* ② 見出しの字間を戻す（上の実測どおり） */ h1{letter-spacing:.04em!important;line-height:1.5!important} h2{letter-spacing:.08em!important;line-height:1.7!important} h3,h4{letter-spacing:.04em!important} .message-quote{letter-spacing:.06em!important;line-height:1.95!important} .text-center h1,.hero h1{text-indent:.04em} .text-center h2,.section-head h2,.sec-head h2{text-indent:.08em} /* ラベルは字が小さいので開いたまま。ただし .46em だと2行に折れるので少し戻す */ .section-subtitle,.sec-head .label,.page-header-en{ letter-spacing:.34em!important;text-indent:.34em} /* ③ 強調した語（仕組み）が途中で切れないようにする */ .hero-title em,.hp-title em,.section-title em{white-space:nowrap} /* ④ /web-design の見出しは10文字あって、字間を戻しても1行に入らない。 ここだけ文字を落として「作ってお見／せします。」の割れを止める。 実測：43px→489px、31px→326px（使える幅 345px） */ .hero.hero-center-lp .hero-title{font-size:clamp(1.7rem,8vw,2.6rem)!important} /* ⑤ 見出しが2行に収まったぶん、数字まわりの間延びを詰める */ .hero-facts{margin-top:22px!important;margin-bottom:24px!important} } /* ========================================================================== 07 本文も明朝に揃える 2026-09-05 木戸さん決定 -------------------------------------------------------------------------- ★「トップの見出しの書体に他の文字も合わせたい」。 見出しだけ明朝→全部 Noto Serif JP に変更。ゴシックは残さない。 ★入力欄とボタンだけはゴシックのまま残す。ここは読み物ではなく操作部品で、 13〜14pxの明朝は入力中の確認がしづらくなる。 ========================================================================== */ body, .section-subtitle,.sec-head .label,.page-header-en, .ph-num,.amt,.value-number,.step-no,.why-no, .hero-facts b,.price-strip .amt,.hp-point b, .ty-wm,.ty-scroll,.ty-tate{ font-family:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif!important} /* 金額と連番は桁を揃える（明朝は字幅がばらつきやすい） */ .ph-num,.amt,.value-number,.step-no,.why-no, .hero-facts b,.price-strip .amt,.hp-point b{ font-variant-numeric:tabular-nums;font-weight:400!important} /* 操作部品はゴシック */ input,textarea,select,button,.btn,.form-control{ font-family:'Noto Sans JP','Hiragino Sans',sans-serif!important} /* ========================================================================== 08 強調語の線を1種類にそろえる 2026-09-05 木戸さん決定 -------------------------------------------------------------------------- ★「トップの“仕組み”の下線を、/web-design の“お見せ”の線と一緒に」。 /web-design は文字の下半分に帯を敷くマーカー（.u）で、左から塗られる。 トップは文字の下に細い棒を引く別方式（.mo-underline）だった。 マーカー側に寄せて、サイト全体で1種類にする。 ★マーカーは白い文字の下に敷く前提の帯なので、"仕組み" も白にする。 橙の文字に橙の帯を重ねると、文字の下半分が帯に沈んで読めなくなる。 ★色はロゴの橙に統一（/web-design 側は #d97843 を直書きしていた）。 ========================================================================== */ .hero .hero-title em, .hero h1 .u, .hero h1 .mo-uwipe{ color:#fff!important; background-image:linear-gradient(transparent 78%, rgba(216,79,30,.85) 78%, rgba(216,79,30,.85) 96%, transparent 96%)!important} /* 旧方式の棒は消す */ .hero h1 .mo-underline::after, .hero .hero-title .mo-underline::after{display:none!important} /* ★/web-design の 無料で は橙の文字のまま。マーカーは .u だけが持つ。 （em にも当てたら「無料で」まで白くなった。2026-09-05 実測して戻した） ただし色はロゴの橙にそろえる。ページ内の