@charset "UTF-8";
/* ============================================================
コーユーレンティア 70周年 ブランドストーリー
SP(スマートフォン)用スタイル
■ 座標の切り替え方
SP のカンプは 375 x 667(PSD は2倍の 750x1334)。
PC と SP でレイアウトが別物なので、要素ごとに SP 用の座標を持たせる。
![]()
--sx / --sy / --sw / --sh を書いた要素は SP でそちらが使われる。
書かなければ PC の値がそのまま使われる(var() のフォールバック)。
HTML は1つのまま、PC と SP で別々の紙面を組める。
SP だけに出す要素 → class="sp-only"
SP では消す要素 → class="pc-only"
============================================================ */
@media screen and (max-width: 767px) {
:root {
/* SP カンプ 375 x 667 基準。
高さは svh(アドレスバーが出ている状態の高さ)。理由は style.css の :root 参照。 */
--u: min(100vw / 375, 100vh / 667);
--u: min(100vw / 375, 100svh / 667);
--u: min(100vw / 375, 100dvh / 667);
}
/* 版面を SP カンプのサイズに差し替える */
.board {
width: calc(375 * var(--u));
height: calc(667 * var(--u));
}
/* 座標は SP 用があればそちらを使う */
.el {
left: calc(var(--sx, var(--x)) * var(--u));
top: calc(var(--sy, var(--y)) * var(--u));
width: calc(var(--sw, var(--w)) * var(--u));
height: calc(var(--sh, var(--h)) * var(--u));
}
/* 四隅を起点に置く要素も、角からの距離に SP 用があればそちらを使う */
.el.corner--tl { left: calc(var(--sox, var(--ox)) * var(--u)); top: calc(var(--soy, var(--oy)) * var(--u)); }
.el.corner--tr { right: calc(var(--sox, var(--ox)) * var(--u)); top: calc(var(--soy, var(--oy)) * var(--u)); }
.el.corner--bl { left: calc(var(--sox, var(--ox)) * var(--u)); bottom: calc(var(--soy, var(--oy)) * var(--u)); }
.el.corner--br { right: calc(var(--sox, var(--ox)) * var(--u)); bottom: calc(var(--soy, var(--oy)) * var(--u)); }
/* 版面と一緒に縮めない固定UI。SP 用の座標(--sox/--sw)で組み直す。
考え方は style.css の同名ルールと同じ。 */
.el.corner.is-fixed-size {
width: calc(var(--sw, var(--w)) * var(--u-ui));
height: calc(var(--sh, var(--h)) * var(--u-ui));
}
.el.corner.is-fixed-size.logo { height: auto; }
.el.corner--tl.is-fixed-size { left: calc(var(--sox, var(--ox)) * var(--u-ui)); top: calc(var(--soy, var(--oy)) * var(--u-ui)); }
.el.corner--tr.is-fixed-size { right: calc(var(--sox, var(--ox)) * var(--u-ui)); top: calc(var(--soy, var(--oy)) * var(--u-ui)); }
.el.corner--br.is-fixed-size { right: calc(var(--sox, var(--ox)) * var(--u-ui)); bottom: calc(var(--soy, var(--oy)) * var(--u-ui)); }
.pc-only { display: none !important; }
.sp-only { display: block; }
/* SP でだけ入れる改行。br に display:block を当てると効き方が怪しいので戻す */
br.sp-only { display: inline; }
/* 奥に敷く写真のぼかし。SP は PC の半分になる(1960 で実測: PC 3.5 / SP 1.75)。
SP 用の値があればそちらを使う。 */
.ph--back { filter: blur(calc(var(--sblur, 1.75) * var(--u))); }
/* ---------- ここから下に SP のレイアウトを実装する ---------- */
/* 級数・行送り
2026-08-31 に SP カンプ(prologue_sp / history_1990 / epilogue_sp)を実測し直した。
3つとも 見出しの行送り 49 / 本文の行送り 30、本文の墨の高さ 13.5 で揃っている。
級数は「墨の高さ」から、字間は「1字送り」から出す(この2つは別物で、
カンプは Photoshop の詰めが効いているぶん 1字送り < 級数 になっている)。
見出し … 墨の高さ 28.0 → 級数 30.5。
2行目「言葉がなかった時代に」(全角10字)の墨幅 303 → 1字送り 30.6 ≒ 級数
なので字間 0。
本文 … 墨の高さ 13.5 → 級数 14.5。
「役割を終えたものを、また次の場所へ活かしてい」(全角22字)の墨幅 298、
「その発想は、…仕組みへと形」(24字/約物3つ)の墨幅 307 →
どちらも 1字送り 13.6 → 字間 -.062em。
以前の 22 / 13.5・行送り 38.5 / 27 はカンプの読み違い。 */
:root {
--fs-hd: 30.5;
--lh-hd: 1.607; /* 30.5 x 1.607 = 49.0px */
/* 本文はカンプ実測 14.5 → 実機で小さく感じて 15.5 → 読みやすさ優先で 16 に
(2026-09-02、PC と統一)。1行 23字 → 22字になり改行位置はカンプから離れるが、
増えたぶんは本文の送りが吸収する。 */
--fs-body: 16;
--lh-body: 1.9355; /* 16 x 1.9355 = 30.97px */
--ink-hd: -14.4;
/* 1行目の背の高い文字(漢字の縦画、カギ括弧、濁点)が overflow:hidden で
上を削られないよう、墨を枠の上端から 6px ほど下げて逃がしてある。
canvas の measureText で出した「墨の上端」は 3〜4px ずれるので当てにならない。
3倍に拡大した実画面を撮って、削れが消えるところを見て決めた。
従来の実測 -6.5 / 級数 15.5 の比を em にしたもの。 */
--ink-body: -0.4194em;
}
.hd { letter-spacing: 0; }
.body__inner { letter-spacing: -.062em; }
/* ヒストリーは PC だけ1行組みにするため nowrap を入れてある(css/style.css)。
SP はカンプどおり2行組みなので戻す。
の改行はここでも効くが、
枠(--sw)より長い行が来たときに折り返せるようにしておく。 */
.sec--history .hd { white-space: normal; }
/* 本文の字送りも、PC 側で .sec--history .body__inner に 0 を入れてある。
あちらのほうが詳しい(0,2,0)ので、ここの .body__inner(0,1,0)では
上書きできない。同じ詳しさで書き直す。
SP の -.062em は SPカンプ実測の値で、PC とは別に決まっている。 */
.sec--history .body__inner { letter-spacing: -.062em; }
/* 送りはじめたら上端もぼかす。PC は 2%(ほぼ効かない)だが、
SP は枠が 7.5行ぶんしかなく上に文字が消えていくのがはっきり見えるので、
下端と同じようにきちんとフェードさせる。
16% = 枠225 のうち 36px ≒ 1.2行ぶん。 */
.body.is-scrolled {
-webkit-mask-image: linear-gradient(to bottom,
transparent 0, rgba(0,0,0,.35) 6%, #000 16%,
#000 70%, rgba(0,0,0,.35) 88%, transparent 100%);
mask-image: linear-gradient(to bottom,
transparent 0, rgba(0,0,0,.35) 6%, #000 16%,
#000 70%, rgba(0,0,0,.35) 88%, transparent 100%);
}
/* プロローグだけ、画面の上 205px を螺旋の写真に空け渡すために
見出しを一回り小さくして、見出しごと本文を下げてある。
ヒストリー/エピローグはカンプどおり 30.5 のまま。 */
.sec--prologue .hd {
font-size: calc(26 * var(--u));
line-height: calc(42 / 26 * 1em);
margin-top: calc(-12.3 * var(--u));
}
/* カンプは Photoshop の「約物半角」が効いていて、句読点やカギ括弧が半角になる。
そのぶん 1 行に 1 字ぶん多く入るので、同じところで折り返すには web でも要る。
Noto Serif JP は palt を持っていないが halt は効く(実測: 22字＋読点3つの行が
319.8 → 299.6 に詰まる)。 */
.hd, .body__inner { font-feature-settings: "halt" 1; }
/* 左上のロゴは PC と同じ大きさ(1行目 157.5x12)なので指定はそのまま使える。
円の中の大ロックアップだけ SP 用に 0.6 倍。
PSD実測(top_sp1.psd を1/2倍): 1行目 x64 y315 246.5x19 / 2行目 x107 y353 160.5x18.5
→ 410 x .6 = 246 / 267.5 x .6 = 160.5 / 行間 32 x .6 = 19.2 */
.top__brand { --lg: .6; }
/* ============================================================
01 TOP
============================================================ */
/* 写真モザイク: カンプは列幅・段数が一定でなく
2列(1・2・5段目)/3列(3・4段目)の変則グリッド。
エピローグの敷き詰め(.epilogue__photos)は、円が閉じたあと
「TOP の写真が並んだ状態」に戻すための層なので、同じ並びにする。
写真も順番も HTML 側で TOP と同じものを使っている。
PC はどちらも 4列3段なので、揃えるのは SP だけでよい。 */
.mosaic--top,
.epilogue__photos {
display: block;
}
.mosaic--top img,
.epilogue__photos img {
position: absolute;
object-fit: cover;
width: auto;
height: auto;
}
.mosaic--top img:nth-child(1), .epilogue__photos img:nth-child(1) { left: 0%; top: 0%; width: 50%; height: 20%; }
.mosaic--top img:nth-child(2), .epilogue__photos img:nth-child(2) { left: 50%; top: 0%; width: 50%; height: 20%; }
.mosaic--top img:nth-child(3), .epilogue__photos img:nth-child(3) { left: 0%; top: 20%; width: 50%; height: 20%; }
.mosaic--top img:nth-child(4), .epilogue__photos img:nth-child(4) { left: 50%; top: 20%; width: 50%; height: 20%; }
.mosaic--top img:nth-child(5), .epilogue__photos img:nth-child(5) { left: 0%; top: 40%; width: 33.34%; height: 20%; }
.mosaic--top img:nth-child(6), .epilogue__photos img:nth-child(6) { left: 33.33%; top: 40%; width: 33.34%; height: 20%; }
.mosaic--top img:nth-child(7), .epilogue__photos img:nth-child(7) { left: 66.66%; top: 40%; width: 33.34%; height: 20%; }
.mosaic--top img:nth-child(8), .epilogue__photos img:nth-child(8) { left: 0%; top: 60%; width: 33.34%; height: 20%; }
.mosaic--top img:nth-child(9), .epilogue__photos img:nth-child(9) { left: 33.33%; top: 60%; width: 33.34%; height: 20%; }
.mosaic--top img:nth-child(10), .epilogue__photos img:nth-child(10) { left: 66.66%; top: 60%; width: 33.34%; height: 20%; }
.mosaic--top img:nth-child(11), .epilogue__photos img:nth-child(11) { left: 0%; top: 80%; width: 50%; height: 20%; }
.mosaic--top img:nth-child(12), .epilogue__photos img:nth-child(12) { left: 50%; top: 80%; width: 50%; height: 20%; }
/* CTA ボタン。SP は右上に縦積み(PSD実測: 132.5 x 27.5 を 3px あけて2つ)。
文字は PC より一回り小さい 11.5px。 */
.top__cta {
flex-direction: column;
gap: calc(3 * var(--u-ui));
}
.top__cta-btn { font-size: calc(11.5 * var(--u-ui)); }
.top__cta-btn:first-child,
.top__cta-btn:last-child { flex: 0 0 calc(27.5 * var(--u-ui)); }
/* style.css の .top__lead は height:auto だが、この @media の .el が
あとから --sh(160) を入れてしまうので、SP では高さが固定になる。
すると縦並びの flex の中で子が縮められ、中身のない罫線(span)が
height:0 に潰れて消える。ここで auto に戻す。 */
.top__lead {
white-space: normal;
height: auto;
}
/* TOP のリード文は --fs-hd を共用していたが、SP はヒストリーの見出しより
ずっと小さい。top_sp2.psd 実測(750px を1/2倍)。
2026-09-28 に改訂版が届き、行送りと下半分が詰まった。
旧カンプ 新カンプ(いまはこちら)
見出し1行目 墨 y266 幅213.5 墨 y266 幅213.5 ← 変わらず
見出し2行目 墨 y309 幅241.5 墨 y297 幅241.5
行送り 43 31
罫線 y355.5 高1.5 y339 高1 幅43 は同じ
サブ y378.5 2行 幅114 y360.5 1行 幅231
級20・字間.075em で 212.5 / 239.5(カンプ 213.5 / 241.5)。
サブは級16・字間 -.036em で 231.0(カンプ 231)。
旧カンプの -.05em は2行組み(1行114px)に合わせた値だった。 */
.top__title {
white-space: nowrap;
font-size: calc(20 * var(--u));
line-height: calc(31 / 20 * 1em);
letter-spacing: .075em;
margin-top: calc(-22.8 * var(--u));
}
/* 罫線はカンプ実測で 43 x 1.5(PC は 72 x 2)。
上下の空きは、見出し2行目の墨の下端(閉じカギ括弧の先)と
サブ1行目の墨の上端の、ちょうど真ん中に来るようにする。
※ canvas の measureText では墨の上下が正しく取れなかったので、
4倍に拡大した実画面を撮って画素で数えた(上35.0 / 下23.4 → 5.8 上げる)。 */
.top__rule {
width: calc(43 * var(--u));
height: calc(1 * var(--u));
margin-top: calc(20.3 * var(--u));
flex-shrink: 0; /* 潰れて消えないように(高さが 1.5px しかないため) */
}
/* 2026-09-28、1行に戻した。
カンプ(top_sp2.psd)は「働く人のそばで、／支え続ける価値」の2行組みで、
width:132 はその折り返し位置を作るための決め打ちだった。
ただ画像の1枚絵と違って、ここは折り返すと収まりが悪い。
親の枠(--sw 242)に対して 1行は 228px なので、字間はカンプ実測の
-.05em のままで入る(余り 14px)。--u で全体が同じ比率に縮むので、
窓が 320px でも 360px でも比率は 94.2% のまま変わらない。
行送りは 32 のまま。1行ぶんの箱に収まるだけで、下には何も続かない。 */
.top__sub {
width: auto;
white-space: nowrap;
text-align: center;
margin-top: calc(11.44 * var(--u));
font-size: calc(16 * var(--u));
line-height: calc(32 / 16 * 1em);
letter-spacing: -.036em;
}
/* ============================================================
03-07 HISTORY / タイムライン
============================================================ */
/* SP の年表は「文字が自然に読める大きさのまま、入り切らない分を横に送る」形
(2026-09-28)。級数を落として詰め込む / 2行に折る、を順に試したが、
8.5px は小さすぎ、11px の2行は年号との釣り合いが悪かった。
大きさは PC と同じ(--u-ui は SP でも 1px なので物理的に同寸)にして、
器のほうを横スクロールにする。
・.timeline は全画面のかぶせ物をやめ、画面下の帯にする。
帯の外は触らないので、本文のタッチは奪わない。
・中の .board は版面の縮尺から外し、内容ぶんの幅を持つ普通の箱にする。
・点の間隔は 110。いちばん長い [社会への広がり] が 98.4px なので、
隣り合う一言のあきが 11.6px 残る(PC は 310 間隔だが SP では送りすぎる)。
・内容幅 = 左右のあき 20 + 点の間隔 110x4 + 右端の一言のはみ出し 49.2
≒ 530。画面 375 なので 155px ぶん横に送れる。
・現在地が画面の外に出ないよう、章が変わったら js が中央へ寄せる
(main.js の centerTimeline)。 */
.timeline {
inset: auto 0 0 0;
height: calc(68 * var(--u-ui));
overflow-x: auto;
overflow-y: hidden;
pointer-events: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* 左右は本文と同じ位置(x30 / x345)で消す。本文の下端のぼかしと同じ考え方で、
送った先が版面の外へ流れていくように見せる。端が切れて見えること自体が
「まだ続きがある」の合図にもなる。 */
-webkit-mask-image: linear-gradient(to right, transparent 0,
#000 calc(30 * var(--u)), #000 calc(345 * var(--u)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0,
#000 calc(30 * var(--u)), #000 calc(345 * var(--u)), transparent 100%);
}
.timeline::-webkit-scrollbar { display: none; }
/* 中身の左右には、マスクで消える帯のぶんだけ余白を持たせる。
左 50 は、いちばん左の [創業](幅 31.8)が中心 50 に置かれても
左端が 34.1 で、マスクが効きはじめる 30 より内側に入る値。
幅 566 は、いちばん右まで送ったとき [現在とこれから] の右端が
345 の内側に収まる値(実測 344 前後)。 */
.timeline .board {
position: relative;
left: auto; top: auto;
transform: none;
width: calc(566 * var(--u-ui));
height: 100%;
pointer-events: auto;
}
.timeline .timeline__inner {
left: calc(50 * var(--u-ui));
top: calc(8 * var(--u-ui));
width: calc(440 * var(--u-ui));
height: auto;
}
/* 一言は PC の 12.5 から少しだけ落とす。年号(墨の高さ 10.5)との差が縮まって
並びが落ち着き、点の間隔 110 に対する余裕も増える。 */
.timeline__word { font-size: calc(11.5 * var(--u-ui)); }
/* 中身の大きさは PC のまま使う。SP 用の縮小(点 1.0 / 年号 1.2 / 一言 8.5)は
もう要らないので、ここでは何も上書きしない。 */
.timeline__rail,
.timeline__fill { top: calc(4 * var(--u-ui)); }
/* ---------- スクロールの合図(top_sp1.psd 実測) ----------
PC はマウスの絵。SP は指のイラストだけを置く。
2026-09-10、支給の PSD(750x1334)から取り直した。
それまでのマスクは一回り(約1.13倍)大きかった。おそらく版面の違う
古い書き出しから起こしていたため。
同じ日に、カンプにあった手描きの矢印(x165 y425.5 9.5x24.5)を外した。
指の絵は「こう動かせ」と読まれるので、下向きに動かすと、
そのとおり払った人が前ではなく後ろへ戻ってしまう。
実際の操作は「画面を上へ払う → ページは下へ進む」。
下向きの矢印を残すと指と逆を向いてちぐはぐになるので、一緒に外した。
版面座標(1x): SCROLL x168.5 y402 38.5 x 7.5
手 y419.5 29 x 36
横位置は、矢印が抜けたぶん SCROLL の中心(x187.75)に合わせ直した
(カンプの x179 は矢印と並べたときの位置)。
枠(--sx:161.5 --sy:401.5 50x54.5)を基準に、マスクの余白 0.5px ぶん
左上へずらして置く。 */
.top__cue { display: block; }
.top__cue-label {
position: absolute;
left: calc(6.5 * var(--u));
top: 0;
margin: 0;
}
/* 手。下から上へ、1.5秒で繰り返し払う(cue-hand)。
PC の矢印(cue-arrow)と間合いは同じで、向きだけ逆。 */
@keyframes cue-hand {
0% { transform: translateY(calc(8 * var(--u))); opacity: 0; }
22% { opacity: 1; }
72% { opacity: 1; }
100% { transform: translateY(calc(-10 * var(--u))); opacity: 0; }
}
/* 縦位置。カンプの墨は y419.5(= 枠から 17.5)だが、上へ払う動きを付けたので
いちばん上に来たとき(-10)に SCROLL とくっついてしまう。
動きぶん 8 下げて、最接近でも PC と同じ 8px のすきまが残るようにした。 */
.top__cue-hand {
position: absolute;
left: calc(11.25 * var(--u));
top: calc(25.5 * var(--u));
width: calc(30 * var(--u));
height: calc(37 * var(--u));
background-color: var(--c-ink);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
animation: cue-hand 1.5s cubic-bezier(.45, 0, .55, 1) infinite;
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABKCAYAAADnhzeuAAAEmElEQVR42u2bb2iPURTHz15MaMobkn40skLmFWsUsRfLJEmsNGtJQm2xTNSUFV7ot2Vla9MostVeEPLCTyNkmppQ1sgW2pbJhEYsW7/xrLs6Tvff+e1P9z7t1PNmv++9z/08z33uueecO4ApG7EiAHgGAH8AYBgAOgCgHACmhw00AwC+CUjZFQeA4rDArtGA0qssDMDfCdQXAKgGgHMA8E4Cvcxn2CME5rpEU0I0930GfoFA+jW6GIFO8hV4EEFcNixqGNjbBWwIQVQbtHgVf+8r8BsE8cGgPUve8iIfgU8zIOYT7TkfgecRiEqD/q3lIue0cSAKyQNa7yPwQQKxwaA3+W0vjANxj+yxvbQmBsQW8oB2+whMIfIN+gGkfe7rW8YQLwzaS+QBpfgIzIFYSbSlPgKnE4gTBv0npO3xdVpjiI8GbVkY4uSTBGK5RjubaC/4CMyFeIm0v8OQFDBB7CEPKGeM954uYu9gyxqZLGAuRBxpY+jvcwGgTuTIcAh6StJHFtnTj15BDH58MqBVEDK7TQYpW9DoNSA2O4FdtMiWvppo4FsSCJVlEe1jRto3xtC+VNx/IQAsHSvwRnKzAwb9T81AW8W0PCtcnQ6qSniGVJFR7Se/F6J71pCcXHA1i08pIfuBOmo3aKsVAPslWtUUlgUhKWLhHNV8BoA0SS4dX0GZKDMR4CrSke7JLZHcuEmjp2+6Q6MtJdrfFtM/WCNmcIEXk07OMHZpprDxGNHe1WhnaMA6/82+XFEueihZH9jWhTr4atCeJzeMGvwt1vYa+n4qgX0t0bURzRwu8FHSwWqNNkK03Ya++xmeYJcEeJ1Et5poDnOBk0kH9czVWmdXibaOsTcYthzDzUSmdQtZAccLgn6bpozpK6LfZJFz+5QIcC650XaNdhoTopcRYpYT7ROF7hRjlikNO/hHBu1HBkQZw5XR7GqXZX4uoZJQI6NcepL53ccZU7DWYvYsHI8ILpO5+uGqpCnawcFHjcVYmoWLzLGcCQmXdjnl0nQRREQt+84SicHxMvwJ1to2CvaxW4UPXCQGj59cqsNJDBxbP7BpcFPi6N96VC7FrqnNJO40nNfyoVzagMbZpxPWMAJyl8ullWiMQ7YuItgUrBBF83YF8A1HgStsNh/U9Wwmv19TQLtoUZsx7iCimRJNiSfHEa3ecA4RLVDoCiWpVNesyqbeHbHIR6liWdeOMF23LfT9skzc0SlzxzFgnCF5xkncRSz3q4OOAffYnllZQECuaLTUVeU5BMw5UvlfRVB3wGWHZOvpig0zojXIZpzO++OoT+ZUTUasm7zlaZZBxkEHgQtsGmwjjRoVulkOuieaHNxp2/A1aZim0K0S285sR6d0vm2jtRaZfleN/Q2PWoy74vm4SmNLJitx3PHUjgy4gtt4H+nAh0NorWi8RYl08IBR3nTBkkQ189hYOukj0LUQcksje9RhxRGkUNk2ScYjGnboQxLohrBDFyuOIKSEGTpPAj041pXRdctQnJkKzlPtDTN4iyJn3eH7P1jrrIAkAXGpIynMb7uU/IeMLrQMldUbkgdTNpH2F7eALcW/jXr8AAAAAElFTkSuQmCC");
mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABKCAYAAADnhzeuAAAEmElEQVR42u2bb2iPURTHz15MaMobkn40skLmFWsUsRfLJEmsNGtJQm2xTNSUFV7ot2Vla9MostVeEPLCTyNkmppQ1sgW2pbJhEYsW7/xrLs6Tvff+e1P9z7t1PNmv++9z/08z33uueecO4ApG7EiAHgGAH8AYBgAOgCgHACmhw00AwC+CUjZFQeA4rDArtGA0qssDMDfCdQXAKgGgHMA8E4Cvcxn2CME5rpEU0I0930GfoFA+jW6GIFO8hV4EEFcNixqGNjbBWwIQVQbtHgVf+8r8BsE8cGgPUve8iIfgU8zIOYT7TkfgecRiEqD/q3lIue0cSAKyQNa7yPwQQKxwaA3+W0vjANxj+yxvbQmBsQW8oB2+whMIfIN+gGkfe7rW8YQLwzaS+QBpfgIzIFYSbSlPgKnE4gTBv0npO3xdVpjiI8GbVkY4uSTBGK5RjubaC/4CMyFeIm0v8OQFDBB7CEPKGeM954uYu9gyxqZLGAuRBxpY+jvcwGgTuTIcAh6StJHFtnTj15BDH58MqBVEDK7TQYpW9DoNSA2O4FdtMiWvppo4FsSCJVlEe1jRto3xtC+VNx/IQAsHSvwRnKzAwb9T81AW8W0PCtcnQ6qSniGVJFR7Se/F6J71pCcXHA1i08pIfuBOmo3aKsVAPslWtUUlgUhKWLhHNV8BoA0SS4dX0GZKDMR4CrSke7JLZHcuEmjp2+6Q6MtJdrfFtM/WCNmcIEXk07OMHZpprDxGNHe1WhnaMA6/82+XFEueihZH9jWhTr4atCeJzeMGvwt1vYa+n4qgX0t0bURzRwu8FHSwWqNNkK03Ya++xmeYJcEeJ1Et5poDnOBk0kH9czVWmdXibaOsTcYthzDzUSmdQtZAccLgn6bpozpK6LfZJFz+5QIcC650XaNdhoTopcRYpYT7ROF7hRjlikNO/hHBu1HBkQZw5XR7GqXZX4uoZJQI6NcepL53ccZU7DWYvYsHI8ILpO5+uGqpCnawcFHjcVYmoWLzLGcCQmXdjnl0nQRREQt+84SicHxMvwJ1to2CvaxW4UPXCQGj59cqsNJDBxbP7BpcFPi6N96VC7FrqnNJO40nNfyoVzagMbZpxPWMAJyl8ullWiMQ7YuItgUrBBF83YF8A1HgStsNh/U9Wwmv19TQLtoUZsx7iCimRJNiSfHEa3ecA4RLVDoCiWpVNesyqbeHbHIR6liWdeOMF23LfT9skzc0SlzxzFgnCF5xkncRSz3q4OOAffYnllZQECuaLTUVeU5BMw5UvlfRVB3wGWHZOvpig0zojXIZpzO++OoT+ZUTUasm7zlaZZBxkEHgQtsGmwjjRoVulkOuieaHNxp2/A1aZim0K0S285sR6d0vm2jtRaZfleN/Q2PWoy74vm4SmNLJitx3PHUjgy4gtt4H+nAh0NorWi8RYl08IBR3nTBkkQ189hYOukj0LUQcksje9RhxRGkUNk2ScYjGnboQxLohrBDFyuOIKSEGTpPAj041pXRdctQnJkKzlPtDTN4iyJn3eH7P1jrrIAkAXGpIynMb7uU/IeMLrQMldUbkgdTNpH2F7eALcW/jXr8AAAAAElFTkSuQmCC");
}
/* ============================================================
08-09 EPILOGUE / CTA
本文が画面高より長いため、SP では固定(pin)を使わず
自然な縦スクロールで全文を見せる。box を実測の全文高に合わせて
確保することで、overflow が発生せず JS 側の pin 処理もスキップされる
(js/main.js は変更していない)。
board / section の高さもその分だけ拡張する。 */
/* 代表挨拶(990)とCTA(292)を1画面に統合したので、その合計 1282 にしていたが、
2026-09-03 に足したテキストリンク(--sy 1287.5 + 高52 = 下端 1339.5)が
版面の外に出てしまい、送りきっても画面に入らなかった。
リンクの下に 40.5 空けて 1380 にする。
本文が伸びたぶん(--epi-extra)は js/main.js が実測して足す。 */
.sec--epilogue,
.sec--epilogue .board--tall { height: calc((1380 + var(--epi-extra, 0)) * var(--u)); }
/* SP は --sy を使うので、押し下げの計算もそちらで組み直す */
.sec--epilogue .epilogue-role,
.sec--epilogue .epilogue-sign,
.sec--epilogue .hd--cta,
.sec--epilogue .cta__buttons,
.sec--epilogue .cta__links {
top: calc((var(--sy, var(--y)) + var(--epi-extra, 0)) * var(--u));
}
.sec--epilogue { overflow: visible; }
/* 役職と署名は PC と同じく中央揃え。
2026-09-09 のカンプで PC が右端揃えから中央揃えになったので、
SP カンプ(9/1・もともと中央組み)と同じ組みに戻した。
役職は枠幅を版面いっぱい(375)にして中央寄せ。 */
.epilogue-role { text-align: center; }
/* 本文も SP カンプどおり左端 31 揃え(PC だけ中央組み) */
.sec--epilogue .body__inner { text-align: left; }
/* 見出しは SP カンプ(epilogue_sp.psd)どおり左端 32.5 揃え・級数もそのまま。
PC だけ 2026-09-09 のカンプで中央揃え・級数 51 になったので、ここで戻す。 */
.sec--epilogue .hd:not(.hd--cta) {
text-align: left;
font-size: calc(var(--fs-hd) * var(--u));
line-height: var(--lh-hd);
margin-top: calc(var(--ink-hd) * var(--u));
}
/* SP は縦長のまま自然にスクロールさせるので、PC の上端合わせは戻す */
.sec--epilogue .board--tall { left: 0; width: 100%; }
.hd--cta {
font-size: calc(20 * var(--u));
line-height: calc(27 / 20 * 1em);
margin-top: calc(-4.1 * var(--u));
white-space: normal;
}
/* PC と同じく、ボタンだけ実寸で止める(考え方は style.css の同名ルール参照)。
SP も横位置は中央から引く。--sx(36.5)のままだと左右の余白が食い違う。 */
.cta__buttons {
flex-direction: column;
gap: calc(9 * var(--u-ui));
left: calc(50% - (302 * var(--u-ui)) / 2);
width: calc(302 * var(--u-ui));
}
.cta__btn {
width: 100%;
height: calc(82 * var(--u-ui));
/* 2026-09-09 に 14 → 16。7字で墨 112 なので 302 の枠には余裕で収まる */
font-size: calc(16 * var(--u-ui));
}
/* テキストリンクは縦積み。PC と同じ横並びだと 375 に収まらず、
実測で左が -4.1、右が 379.1 まではみ出していた。
丸の位置を揃えたいので、長いほう(「商品・サービスサイトへ」= 193)の幅で
箱を作って中央に置き、中は左揃えにする。
箱の高さは 20 + あいだ14 + 20 = 54(HTML の --sh も同じ値にしてある)。 */
.sec--epilogue .cta__links {
flex-direction: column;
align-items: flex-start;
gap: calc(14 * var(--u-ui));
left: calc(50% - (193 * var(--u-ui)) / 2);
width: calc(193 * var(--u-ui));
}
}
/* PC では SP 専用要素を出さない */
@media screen and (min-width: 768px) {
.sp-only { display: none !important; }
}