を必ず吐く。
ブロックのままだと とスピナーがインラインで並び、
ベースライン合わせ＋行の余白のぶんだけラッパーがボタンより数px高くなる。
矢印は top:50% でラッパーの中央に置いているので、その差がそのまま
「矢印だけ下にずれる」として出る。flex にすると行ボックスが消え、
ラッパーの高さ＝ボタンの高さになるので 50% がボタンの中心と一致する */
display: flex;
@media (max-width: 750px) {
width: 50%;
min-width: auto;
}
}
/* CF7（WordPressのautop）は中身を で包んで出力する。
このままだと flex の子は ではなく になり、ボタンの width:100% が
「
の幅」基準になる。
の幅は中身なりに縮むので、ボタンだけ 222px より細くなり、
矢印（ラッパーの右端基準）がボタンの外＝黒地の外に取り残される。
display:contents で
の箱を無かったことにして を直接の子に戻す
（.p-secTtl の inner-container と同じ手。中身は消えず、箱だけ消える） */
.c-form__foot > p {
display: contents;
}
/* 送信中に出るCF7のスピナー（黒い丸）。デザインに無いので出さない。
ついでに、これが居るとフレックス行の幅も食うので消す意味は二重にある */
.c-form__foot .wpcf7-spinner {
display: none;
}
/* スピナーを消すと「送信中」の手応えが無くなるので、代わりにボタン自体を薄くする。
不要ならこのルールごと消してよい */
.wpcf7-form.submitting .c-form__foot {
opacity: 0.6;
pointer-events: none; /* 二重送信の防止も兼ねる */
}
.c-form__foot .c-btn {
justify-content: center;
width: 100%;
flex: none; /* ラッパーがflexなので、万一他の要素が並んでも幅を削られないように */
min-height: 4rem; /* 実測64px */
/* 右端の矢印とぶつからないよう、文字の中心を少し左に寄せる */
padding-right: 3.5em;
padding-left: 3.5em;
cursor: pointer;
}
.c-form__foot::after {
content: "";
position: absolute;
top: 47.7%;
/* em ではなく rem。この疑似要素は共通の .c-arrow 側で font-size:0 にしてあり
（矢印はマスクで描くので中身の文字を消す必要がある）、em だと 0 に潰れて
矢印がボタンの右端まで飛んでいってしまう */
right: 1.75rem;
margin-top: calc(var(--arrow-h) / -2);
color: var(--color-bg); /* 矢印はcurrentColorを拾うので、ボタンの文字色を指定する */
pointer-events: none; /* 矢印の上をクリックしてもボタンが押せるように */
width: 2rem;
}
/* CF7が出すメッセージ類 */
.c-form__field .wpcf7-not-valid-tip {
margin-top: 0.5rem;
font-size: var(--fz-jp-note-sp);
color: var(--form-required);
}
.c-form__field input.wpcf7-not-valid,
.c-form__field select.wpcf7-not-valid,
.c-form__field textarea.wpcf7-not-valid {
border-color: var(--form-required);
}
.wpcf7-form .wpcf7-response-output {
order: 3;
margin: var(--space-4) 0 0;
margin-left: calc(var(--form-label-w) + var(--form-col-gap));
padding: 1rem 1.25rem;
border-width: 1px;
font-size: var(--fz-jp-note-pc);
@media (max-width: 750px) {
margin-left: 0;
}
}
/* Googleスプレッドシート連携プラグイン（gscf7）が自動で挟んでくる注記文。
連携自体はユーザー指定で継続するため、表示だけ消す（プラグイン更新等で
ある時点から急に出るようになった。プラグイン設定側に無効化オプションが
見当たらない場合の代替措置） */
.gscf7-frontend-gdpr-notice {
display: none;
}
/* Cloudflare Turnstile を送信ボタンの下に出す。
このウィジェットはフォームの入力欄としてではなくプラグイン側が自動で
差し込んでいるため、CF7の管理画面で位置を動かせない（現状はフォームの
先頭に入る）。そこで .wpcf7-form を縦並びのflexにして order で
「入力欄 → 送信ボタン → Turnstile → 応答メッセージ」の順に並べ替えている。
:has() を併用しているのは、プラグインによってウィジェットが
や
に包まれて出てくる場合があり、その包みごと動かす必要があるため。
※ order は「見た目の順番」だけを変える。HTMLの並び自体は先頭のままなので、
キーボードのTab移動では送信ボタンより先にウィジェットに止まる。
DOMの順番ごと変えたい場合は、プラグイン側に表示位置の設定があるか確認すること。 */
.wpcf7-form > * {
order: 0; /* 送信ボタンは .c-form の中にあるので、まとめてこの順番で出る */
}
.wpcf7-form > [class*="turnstile"],
.wpcf7-form > [class*="cf-turnstile"],
.wpcf7-form > :has(> [class*="turnstile"]),
.wpcf7-form > :has([class*="cf-turnstile"]) {
order: 2;
margin-top: var(--space-5);
margin-left: calc(var(--form-label-w) + var(--form-col-gap));
@media (max-width: 750px) {
margin-left: 0;
}
}
/* ==========================================================================
c-wide-btn：横長ボタン（矢印つき）
デザイン元：themes/スクリーンショット 2026-09-04 12.15.31.png
実測値（元画像は2倍解像度のスクリーンショットなので、すべて1/2したCSS値）：
高さ 67.5px ／ 角丸は完全な丸（高さの半分）／ 幅は本文カラムいっぱい
文字 22px（= 1.375rem・和文なので Montserrat は当てない）
矢印 31×6px、文字との間隔 18px
線ありの方は 線1px ＋ 文字色 #18100d（= --color-black）
※ 本文の文字送りが実測31.5px（= 16px の2倍）だったので、2倍解像度と確定した。
■ 2種類あるが「形は同じで色と線だけが違う」
グラデーション塗りと線ありは同じ形。なので中身をコピーした2つのCSSにはせず、
形の定義は下の1か所にまとめ、色と線だけを -fill / -outline で切り替えている。
■ 管理画面での使い方（コードを触らずに変えられる範囲）
・エディタの「パターン → MEDIARTZ → 横長ボタン（矢印つき）」で挿入する。
・グラデーション ⇔ 線ありの切り替えは、ボタンを選択して
右サイドバー「スタイル」→「MEDIARTZ 横長（グラデーション）／（線）」を選ぶだけ。
・色・グラデーション・線の色/太さ/角丸・幅（25〜100%）は、すべて
右サイドバーの標準の設定パネルから変えられる。
サイドバーで指定した値はコア側が !important 付きで出力するため、
ここのCSSより必ず優先される（＝ここを直さなくても上書きできる）。
「線」の設定パネルを出すために functions.php で border 設定を
有効化してある（mda_editor_border_and_gradient() のコメント参照）。
■ グラデーションと矢印は既存のものを流用している（新しく作っていない）
・グラデーション … assets/css/tokens.css の :root の --gradient-contact。
フッターのお問い合わせ帯（.c-contact-cta）とヘッダーのCTAボタンと同じもの。
（元は style.css にあったが、style.css は編集画面に読み込まれないため
編集画面でだけ色が出ず真っ白になっていた。tokens.css へ移動済み）
・矢印 … 上の .c-arrow と同じ assets/img/new/btn-arrow.svg を mask で敷いている。
ここでは を置けない（コアのボタンブロックの中身は
テキストだけ）ので、リンクの ::after に同じ指定を書いている。
background-color: currentColor なので、文字色を変えれば矢印も一緒に変わる。
■ PHPテンプレートから直接書きたいとき
ラベル でも同じ見た目になる。
（-outline に変えれば線あり。ブロックを介さないぶんサイドバーでは変えられない）
========================================================================== */
/* --- 形（グラデーション・線ありで共通） --- */
.c-wide-btn,
.wp-block-button.is-style-mda-wide-fill > .wp-block-button__link,
.wp-block-button.is-style-mda-wide-outline > .wp-block-button__link {
/* 矢印のサイズと文字との間隔。下の padding-left の計算でも使うので変数にしてある。
31:6 はSVG（assets/img/new/btn-arrow.svg）の縦横比。崩さないこと */
--wbtn-arrow-w: 1.9375rem; /* 31px */
--wbtn-arrow-h: 0.375rem; /* 6px */
--wbtn-arrow-gap: 1.125rem; /* 18px：文字と矢印の間隔 */
--wbtn-pad-x: 2em;
display: flex;
align-items: center;
justify-content: center;
gap: var(--wbtn-arrow-gap);
width: 100%;
min-height: 4.25rem;
/* 高さは min-height で確保しているが、文字が2行に折り返したときに
上下が詰まらないよう padding も持たせておく。
左右の padding が非対称なのはデザインに合わせるため。元デザインでは
「ラベルがボタンのど真ん中にあって、矢印はその外側に置かれている」
（実測：線ありボタンのラベル中心1217.5px に対しボタン中心1219.5px）。
素直に flex で中央寄せすると、矢印とその間隔のぶんラベルが左に
約24pxずれる。そこで左だけ「矢印＋間隔」を余分に入れて、
ラベルの中心がボタンの中心と一致するようにしている
（左右の padding 差＝矢印＋間隔 なら、計算上ぴったり中央に来る）。 */
padding: 0.75em var(--wbtn-pad-x);
padding-left: calc(var(--wbtn-pad-x) + var(--wbtn-arrow-w) + var(--wbtn-arrow-gap));
border: 1px solid transparent;
border-radius: 999px;
/* 和文のボタンなので .c-btn のように var(--font-en) は当てない。
サイト共通の本文フォント（--font-jp）をそのまま継承させる */
font-size: var(--fz-jp-h-sm-pc);
font-weight: 400;
line-height: 1.5;
text-align: center;
text-decoration: none;
/* SPは横幅が狭く、22pxのままだと長いラベルが折り返しやすいので少し下げる。
高さは押しやすさを優先してPCと同じまま（規則どおりclamp()は使わない） */
@media (max-width: 750px) {
--wbtn-arrow-gap: 0.875rem;
--wbtn-pad-x: 1.25em;
font-size: 1.5rem!important;
}
/* ホバーは半透明にせず、矢印だけが右にずれる。
矢印の実体と動きは上の共通の .c-arrow ブロックにまとめてある */
}
/* --- グラデーション塗り --- */
.c-wide-btn.-fill,
.wp-block-button.is-style-mda-wide-fill > .wp-block-button__link {
/* background ショートハンドではなく background-color と background-image を
分けて書いている。文字が白なので、万一グラデーション（＝CSS変数）が
解決できない環境に置かれても背景が透明になって「白地に白文字」で
何も見えなくならないよう、下地に必ず単色を敷いておくため。
変数が読めれば、その上にグラデーションが乗って見た目は変わらない。 */
background-color: var(--color-accent-from);
background-image: var(--gradient-contact);
color: var(--color-bg);
}
/* --- 線あり（白地） --- */
.c-wide-btn.-outline,
.wp-block-button.is-style-mda-wide-outline > .wp-block-button__link {
background: none;
/* border-color は currentColor。文字色をサイドバーで変えると線も一緒に変わる */
border-color: currentColor;
color: var(--color-black);
}
/* コアのボタンブロックは幅設定（25〜100%）を .wp-block-button__width-◯◯ で出す。
このボタンは幅いっぱいが基本なので、パターン側では 100% を指定してある。
サイドバーで幅を50%などに変えたときに、親が中央寄せのままでも
ボタン自身が縮まるように、幅は親（.wp-block-button）任せにしておく */
.wp-block-button.is-style-mda-wide-fill,
.wp-block-button.is-style-mda-wide-outline {
max-width: 100%;
}
/* ==========================================================
c-mail-address：メールアドレスの画像表示（ショートコード [mda_mail_address]）
実装と、なぜ画像なのかの経緯は functions.php の
mda_mail_address_shortcode() のコメントに書いてある。
画像の高さを文字に合わせているのがポイント。原寸で出すと本文の中で
1行だけ極端に大きく（または小さく）なるので、高さを em で文字に追従させ、
幅は aspect-ratio 任せにして横伸びしないようにしている。
========================================================== */
.c-mail-address {
display: inline-flex;
align-items: center;
gap: 0.4em;
/* 画像の下に余計な隙間ができないように */
line-height: 1;
}
.c-mail-address__img {
/* 文字サイズに追従させる。1.15em は、大文字と小文字が混ざったアドレス画像が
まわりの文字と同じくらいの大きさに見える値 */
height: 1.15em;
width: auto;
/* wp_get_attachment_image() が width/height 属性を付けるので、
それを上書きして縦横比を保つ */
max-width: 100%;
object-fit: contain;
vertical-align: middle;
}
/* ==========================================================
.w-fixSide：SWELL標準の「追尾サイドバー」（外観 > ウィジェット）のtop位置。
投稿詳細ページ（single.css の .p-single__aside）だけ、SWELL標準の8pxだと
詰まって見えるとの指摘で35pxに広げてあった。それ以外のページ（アーカイブ・
固定ページ等、SWELL標準の.w-fixSideをそのまま使っているところ）は既定の8pxの
ままだったので、投稿詳細ページと合わせて広げる。
計算式（calc(… + var(--swl-adminbarH) + var(--swl-fix_headerH))）は
swell/build/css/main.css の .w-fixSide と同じで、8px部分だけ35pxに差し替え。
========================================================== */
.w-fixSide {
top: calc(35px + var(--swl-adminbarH, 0px) + var(--swl-fix_headerH, 0px));
/* 2026-09-10追記: single.cssの.p-single__aside（このtopと同じ式が
元ネタ）と同じ理由・同じ対策。960px未満（ハンバーガーメニュー幅）は
#header自身がposition:sticky・実寸の高さを持つ通常のヘッダーになるため、
このウィジェットを使っている他ページ（アーカイブ・固定ページ等）でも
同じ「サイドバーの上がヘッダーに被る」不具合が起こり得るので、
.w-fixSide自体にも同じ足し算をしておく。 */
@media (max-width: 959px) {
top: calc(35px + var(--swl-adminbarH, 0px) + var(--swl-fix_headerH, 0px) + var(--swl-headerH, 0px));
}
}
/* ==========================================================
p-otcTitle ・ p-otcList：One-stop Creative（媒体連携）セクション
patterns/otc-title.php（見出し＋リード＋図版）／
patterns/otc-list.php（3カラムの特徴リスト）
デザイン元：themes/スクリーンショット 2026-09-09 12.47.10.png
（正式なデザインファイルの書き出しではなくスクリーンショットのため、数値は目安。
細部の余白・サイズは挿入後にブロックエディタから調整してよい）
タイトル部とリスト部を別パターンに分けてあるのは、セクションごとに背景色を
個別に変えたいというユーザー指示のため。背景・文字色は各パターンの外側の
グループブロックが持つ「色」設定に任せてあり、ここでは付けていない
（両パターンのPHP側コメントも参照）。中央の相関図・丸アイコンはいずれも
画像として扱う（コーディングしていない）。
========================================================== */
/* --------------------------------------------------------------------------
1. タイトル＋リード＋図版（p-otcTitle）
-------------------------------------------------------------------------- */
.p-otcTitle {
padding: 5rem 6%!important;
position: relative;
}
.p-otcTitle__en {
margin: 0;
font-family: var(--font-en) !important;
/* デザイン実測ではRegular相当（太さ比 stroke/height ≒ 0.11）だが、
Montserratはこのサイトで500/600/700しか読み込んでいない
（functions.php のGoogle Fonts指定）。400を指定すると読み込んでいない
ウェイトへのフォールバック挙動がブラウザ次第になるため、実際に読み込んで
ある500を明示している（700は太すぎ・実測比0.19相当でデザインと違って見えた） */
font-weight: 500;
font-size: 6.6rem;
line-height: 1; /* デザイン実測でこの英語とすぐ下の日本語見出しの間はほぼ隙間が無いため、
余分な行間（leading）を残さない */
/* デザイン実測値（#363636相当のニュートラルグレー）。背景色 #27221f を
前提にした薄さの目安でもあるので、背景を明るい色に変えたときは
この段落を選んで文字色を選び直すこと（下の p-otcList__icon の
半透明も同じ理由で背景色に依存する） */
color: #363636;
position: absolute;
left: -0.2rem;
top: 1.2rem;
}
/* 日本語見出し（本来の見出し・SEO対象）。
構造・コメントとも patterns/sec-title.php の .p-secTtl__ja と同じ理由。
クラス名を2回書いて詳細度を上げているのは、見出しレベルをH1に変えたときに
SWELL側の編集画面用スタイル（.editor-styles-wrapper h1[data-type="core/heading"]）
に負けて編集画面だけ文字が巨大になるのを防ぐため（!important は使わない）。 */
.p-otcTitle__ttl.p-otcTitle__ttl {
/* デザイン実測で欧文(.p-otcTitle__en)とのすき間はほぼ0px
（欧文側の line-height:1 と合わせて隙間を作らないようにしている） */
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 2rem;
font-weight: 400;
line-height: 1.6;
/* SWELLの見出し装飾（カスタマイザーで付く下線・アイコン等）を殺す */
&::before,
&::after {
content: none;
}
}
.p-otcTitle__ttl {
color: inherit;
}
.p-otcTitle__lead {
margin: 2rem 0 0;
font-size: var(--fz-jp-base-pc);
line-height: 2;
}
.p-otcTitle__img {
margin: 3.5rem auto 0;
max-width: 60rem;
}
.p-otcTitle__img img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 750px) {
.p-otcTitle {
padding: var(--space-6) var(--space-4);
}
.p-otcTitle__en {
font-size: 7.4rem;
left: -0.2rem;
top: 0.7rem;
line-height: 0.8;
}
.p-otcTitle__ttl.p-otcTitle__ttl {
font-size: 1.875rem;
}
.p-otcTitle__lead {
font-size: var(--fz-jp-base-sp);
margin-top: 7.5rem;
z-index: 1;
position: relative;
}
.p-otcTitle__img {
margin-top: 2.5rem;
}
}
/* --------------------------------------------------------------------------
2. 3カラムの特徴リスト（p-otcList）
-------------------------------------------------------------------------- */
.p-otcList {
padding: var(--space-7) var(--space-6);
}
/* コアの columns ブロックが出す .wp-container-* 側の余白指定は環境によって
当たらないことがあるため（patterns/plan-basic.php と同じ理由）、
カラム間の gap はここで明示している */
.p-otcList__cols {
gap: 5rem!important;
margin-bottom: 0;
justify-content: center;
}
.p-otcList__col {
text-align: left;
}
/* ■ クラス名を2回書いて詳細度を上げている理由（重要）
SWELLは本文見出し(h3)に既定で下線バーの装飾を出す
（swell/build/css/main.css の .post_content h3 が margin・font-size を、
.post_content h3:before が下線バーの位置指定を持つ。実際の太さ・色は
カスタマイザー側から差し込まれる）。この .post_content h3 は
「クラス1つ＋タグ名」相当の詳細度なので、こちらを単一クラス（.p-otcList__ttl）
だけでリセットしようとすると負けて、SWELL側の下線バーが透けて出てしまう
（実際に発生した不具合。デザインの縦棒ではなく横線が出ていた）。
patterns/otc-title.php の .p-otcTitle__ttl.p-otcTitle__ttl と同じ対処。 */
.p-otcList__ttl.p-otcList__ttl {
position: relative;
margin: 0 0 2rem;
padding: 0 0 0 1rem;
border: 0;
background: none;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.6;
color: inherit;
/* 見出しの改行数（1行／2行）が列によって違うと、下のアイコン・本文の
開始位置がずれてしまう（実際に「隣の列と高さが揃わない」と指摘された）。
見出し1行分＝font-size×line-height＝2rem として、2行ぶんを常に確保する。
短い見出しは下に空きができるだけで、次のアイコンの開始位置は列間で揃う。
3行以上になりそうな長い見出しを使うページでは、この2rem×2を
2rem×3などに引き上げること。 */
min-height: 4rem;
&::before,
&::after {
content: none;
}
}
/* 見出し先頭の縦棒。独立ブロックにすると編集画面で消されやすいので疑似要素で描く。
上と同じ理由でこちらもクラス2回書きにしてある（単一クラスだと
.post_content h3:before の下線バーが縦棒より優先されて出てしまうため） */
.p-otcList__ttl.p-otcList__ttl::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
width: 2px;
height: 1.1em;
background: currentColor;
}
/* アイコンを収める丸。中の画像がどんな縦横比でも object-fit: contain で
丸の中に収まる。背景の半透明さは p-otcTitle__en と同じく初期の
背景色（#27221f）前提の値 */
.p-otcList__icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 10rem; /* コアのcolumnsは782px以上だとflex-wrap:nowrapで3列横並びを
強制するため、列自体がこの固定サイズより狭くなると
アイコンだけ列からはみ出していた（実際に発生した不具合）。
aspect-ratioで正方形を保ったまま縮められるようにする */
aspect-ratio: 1 / 1;
margin: 0 auto 2rem;
border-radius: 50%;
background-color: #424242;
overflow: hidden;
}
.p-otcList__icon img {
width: 60%!important;
object-fit: contain;
}
.p-otcList__text {
margin: 0;
font-size: var(--fz-jp-base-pc);
line-height: var(--lh-jp-h-xs-pc);
text-align: justify;
}
@media (max-width: 750px) {
.p-otcList {
padding: 1.1rem!important;
}
/* SPはスクリーンショット（2026-09-16 19.48.14.png）実測のとおり、
見出しを上段フル幅、アイコン（左）とテキスト（右）を下段で横並びにする
（PCの「見出し→アイコン→テキストを縦に積む・アイコンは中央寄せ」とは
別レイアウト）。gridエリアで組む */
.p-otcList__col {
display: grid;
grid-template-columns: minmax(0, 50%) 1fr;
grid-template-areas:
"ttl ttl"
"icon text";
column-gap: 2.5rem;
align-items: center;
}
.p-otcList__ttl.p-otcList__ttl {
grid-area: ttl;
/* PC用の「隣の列とアイコン開始位置を揃えるための2行ぶん確保」は
3列横並びのときだけ意味がある調整で、SPは列ごとに独立して積むので不要 */
min-height: 0;
font-size: 1.5rem;
}
.p-otcList__icon {
grid-area: icon;
width: 100%;
max-width: none;
margin: 0;
}
.p-otcList__text {
grid-area: text;
font-size: var(--fz-jp-base-sp);
}
}
/* ==========================================================
p-agencyCase：こんなお悩みありませんか？（代理店ページ冒頭）
patterns/agency-case.php
デザイン元：themes/PC_Agency.jpg（実測 #f7f3f0 付近。tokens.cssの
--color-bg-soft #f8f7f5 に合わせてある）
背景色は外側のグループブロックが持つ「色」設定に任せてあり
（patterns/agency-case.php側コメント参照）、ここでは付けていない。
========================================================== */
.p-agencyCase {
padding: 0!important;
}
.p-agencyCase__row.p-agencyCase__row {
/* コアのcolumnsブロックが出す.wp-container-*側の余白は環境によって
当たらないことがあるため（patterns/otc-list.phpと同じ理由）、
行間・列間のgapはここで明示している */
gap: var(--space-4);
margin-bottom: var(--space-4);
&:last-of-type {
margin-bottom: 0;
}
}
/* カード（「CASE nラベル」＋白背景）1枚分の縦積み。コアのcolumnsブロックは
既定で行内の列を同じ高さに揃える（stretch）ので、.p-agencyCase__col自体は
すでに同じ行の隣列と高さが揃っている。あとはその高さを白背景（.p-agencyCase__card）
まで伝えれば、本文の長さが違っても白背景の高さが行内で統一される
（2026-09-11追記：ユーザー要望により追加。「最低限、白背景の高さだけ揃えたい」
というリクエストなので、中のcolumns（本文列・画像列）まではstretchさせていない
＝画像が短い側のカードでは白背景の下に少し余白ができるだけで、崩れはしない） */
.p-agencyCase__col {
display: flex;
flex-direction: column;
}
/* 「CASE n」ラベルは白カードの外（グレージュ背景の上）に置く。
カードそのものの背景色は自前CSSではなく、内側のグループブロックが持つ
「色」設定（インラインstyle。patterns/agency-case.php参照）に任せてある。
実機でCSSクラス指定の背景色が反映されない事象があったため、確実に効く
WordPress標準のグループ背景色に統一した経緯がある（同ファイルのコメント参照） */
.p-agencyCase__no {
margin: 0 1.5rem -1.5rem;
font-family: var(--font-en);
font-weight: 400;
font-size: 1.75rem;
letter-spacing: 0.05em;
color: var(--color-placeholder);
z-index: 1;
position: relative;
@media (max-width: 750px) {
font-size: var(--fz-en-h-md-sp);margin: 0 1.5rem -1.8rem;
}
}
.p-agencyCase__card {
flex: 1 1 auto;
padding: 2.5rem 2rem !important;
}
.p-agencyCase__inner.p-agencyCase__inner {
/* 本文（左）とイラスト（右）の間隔。理由は.p-agencyCase__rowと同じ */
gap: var(--space-4);
margin-bottom: 0;
}
.p-agencyCase__caseTtl.p-agencyCase__caseTtl {
/* SWELLの本文見出し装飾（.post_content h3の下線バー等）をリセットして
独自の縦棒に差し替える。クラス名を2回書いて詳細度を上げる手口は
patterns/otc-list.php の .p-otcList__ttl.p-otcList__ttl と同じだが、
実機ではそれでも負けたため（SWELLカスタマイザーの動的CSSが強かった）
!important を付けて確実に上書きする */
position: relative;
margin: 0 0 var(--space-3) !important;
padding: 0 0 0 1em !important;
border: 0 !important;
background: none !important;
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.5;
color: inherit;
&::before,
&::after {
content: none !important;
}
@media (max-width: 750px) {
font-size: var(--fz-jp-h-sm-sp);
}
}
/* 見出し先頭の縦棒。独立ブロックにすると編集画面で消されやすいので疑似要素で描く
（patterns/otc-list.php の .p-otcList__ttl::before と同じ手） */
.p-agencyCase__caseTtl.p-agencyCase__caseTtl::before {
content: '' !important;
position: absolute;
left: 0;
top: 0.15em;
width: 3px;
height: 1.1em;
background: currentColor;
}
.p-agencyCase__text {
margin: 0;
font-size: var(--fz-jp-note-pc);
line-height: var(--lh-jp-md-pc);
color: var(--color-text-sub);
@media (max-width: 750px) {
font-size: var(--fz-jp-base-sp);
}
}
.p-agencyCase__inner {
flex-wrap: wrap!important;
justify-content: center;
row-gap: 0!important;
}
.p-agencyCase__textCol {
min-width: 40%;
}
.wp-block-columns .wp-block-column.p-agencyCase__imgCol {
/* コアのcolumnブロックの既定padding等を打ち消し、画像をカード内で
上端から素直に置く */
align-self: stretch;
/* flex-basis: 17rem!important; */
margin-right: -2rem!important;
min-width: 17rem;
@media (max-width: 750px) {
margin-right: 0rem!important;margin-top: -2rem!important;
}
}
.p-agencyCase__img {
margin: 0;
width: 100%;
height: 100%;
aspect-ratio: 275/200;
& img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.p-agencyCase__solve {
margin: var(--space-6) 0 0;
font-size: 1.5rem;
text-align: center;
}
@media (max-width: 750px) {
.p-agencyCase {
padding: var(--space-6) var(--space-4);
}
.p-agencyCase__row.p-agencyCase__row {
gap: var(--space-3);
}
.p-agencyCase__card {
padding: var(--space-4);
}
.p-agencyCase__solve {
margin-top: var(--space-5);
font-size: var(--fz-jp-h-sm-sp);
}
}
.agency_reason {
width: 28.375rem;
margin: -12rem 0 -3rem auto;
position: relative;
z-index: 1;
@media (max-width: 750px) {
margin: -6.1rem 3rem -3rem auto;/* width: 22.375rem; */
}
}
/* ==========================================================
p-agencyComm：コミュニケーションツール（代理店ページ）
patterns/agency-comm.php
デザイン元：themes/PC_Agency.jpg（「コミュニケーションツール」セクション）
背景色は外側のグループブロックが持つ「色」設定に任せてある
（patterns/agency-comm.php側コメント参照）。
アイコンの並びは- ではなくgroupのネスト（flex）で組んでいる
＝このページで繰り返し出ているSWELLの.post_content li上書き問題を、
そもそも
- を使わないことで回避している。
========================================================== */
.p-agencyComm {
padding: var(--space-7) var(--space-6);
color: var(--color-bg);
text-align: center;
}
.p-agencyComm__head {
position: relative;
margin: 0 0 var(--space-6);
}
.p-agencyComm__ghost {
/* TOPの.c-stats__marquee（CREATIVE WORKS!）と同じ「大きく薄い英字」の
演出言語（あちらも太字だと重すぎるとの指摘でweight 700→400にした経緯があり、
ここも合わせてある）。色は#403531（ユーザー指定・実機確認済み） */
margin: 0;
font-family: var(--font-en);
font-weight: 400;
font-size: 4.5rem;
letter-spacing: 0.05em;
line-height: 1;
color: #403531;
overflow: hidden;
top: -1.3rem;
position: relative;
@media (max-width: 750px) {
font-size: var(--fz-en-h-lg-sp);
top: 0rem;
width: 110%;
left: -5%;
}
}
.p-agencyComm__ttl.p-agencyComm__ttl {
/* SWELLの本文見出し装飾（.post_content h2 { margin:4em 0 2em; position:relative;
z-index:1 }）をリセットして、ghost英字の上に重ねる。marginとpositionは
この重ね配置が成立するかどうかに直結するため（リセットが効かないと
見出しが吹き飛ぶ）、クラス2回書きに加えて!importantも付けている
（patterns/otc-list.phpの.p-otcList__ttl.p-otcList__ttlと同じ理由・
より重要度が高いため対策を強めてある） */
position: absolute !important;
inset: 0;
margin: 0 !important;
padding: 0;
border: 0;
background: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
font-weight: 700;
line-height: 1.5;
color: inherit;
z-index: 1;
&::before,
&::after {
content: none !important;
}
@media (max-width: 750px) {
font-size: var(--fz-jp-h-sm-sp);
}
}
.p-agencyComm__list.p-agencyComm__list {
/* 実機で縦並びのままになる不具合の真因：patterns/sec-title.php（.p-secTtl）側の
コメントと同じSWELL/WordPressの仕様——グループブロックはフロント表示時だけ
（エディタ内では起きない）wp_restore_group_inner_container()により中身が
でもう1枚包まれる。このパターンの
.p-agencyComm__item群は.p-agencyComm__listの「孫」になってしまい、
.p-agencyComm__listに掛けたdisplay:flexが子（＝包み紙1枚だけ）にしか効かず、
孫のitem群は素のブロック要素のまま縦に積まれていた（前回の!importantは
的外れな対策だった＝的が違った）。
.p-secTtlと同じ対処：クラス名を当てにせず[class*="inner-container"]で
包み紙を検出し、display:contentsで箱ごと消して孫を子に格上げする */
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-6) var(--space-5);
margin: 0 0 var(--space-5);
& > [class*="inner-container"] {
display: contents;
}
@media (max-width: 750px) {
gap: var(--space-4) var(--space-5);
}
}
.p-agencyComm__item.p-agencyComm__item {
/* 同じ理由（.p-agencyComm__list側のコメント参照）。こちらは画像＋ラベルの
縦積みを直接の子に対して行うためのflex-columnなので、同様に包み紙を消す */
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
width: 6rem;
& > [class*="inner-container"] {
display: contents;
}
@media (max-width: 750px) {
width: 7rem;
}
}
.p-agencyComm__icon {
margin: 0 !important;
width: 2.5rem;
aspect-ratio: 1 / 1;
& img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 750px) {
width: 50%;
}
}
.p-agencyComm__label {
margin: 0;
font-family: var(--font-en);
font-size: var(--fz-jp-xs-pc);
letter-spacing: 0.03em;
@media (max-width: 750px) {
font-size: var(--fz-jp-xs-sp);line-height: 1.3;
}
}
.p-agencyComm__note {
margin: 0;
color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 750px) {
.swell-block-fullWide__inner.l-article, .swell-block-fullWide__inner.l-container {
padding-inline: 7.6vw;
}
}
.-inner-type .swell-block-fullWide__inner {
width: 90%;
padding: 0 0!important;
@media (max-width: 750px) {
width: 80%;
}
}
/* ---- common_remodal_css (reset.css) ---- */
@charset "utf-8";
/* ========================================================
Reset CSS (Corrected Version)
======================================================== */
/* 1. ベースのリセット */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit; /* フォント設定を継承 */
vertical-align: baseline;
box-sizing: border-box; /* 仕様書準拠 */
}
/* 2. HTML5要素のブロック化 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* 3. 基本設定 */
body {
line-height: 1;
-webkit-text-size-adjust: 100%;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 4. リンクと画像の基本 */
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom; /* 画像下の隙間を消す */
border-style: none;
}
/* 5. 【重要】フォーム・ボタンのリセット（今回追加・修正） */
button,
input,
select,
textarea {
font-family: inherit; /* 親要素のフォントを引き継ぐ */
font-size: 100%;
margin: 0;
border-radius: 0; /* スマホでの角丸解除 */
-webkit-appearance: none; /* ブラウザ標準スタイル削除 */
appearance: none;
background-color: transparent; /* 背景透明化 */
border: none; /* 枠線削除 */
}
/* ボタン系はカーソルを指マークに */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
cursor: pointer;
}
/* テキストエリアのサイズ変更を縦のみ許可 */
textarea {
resize: vertical;
}
/* 全称セレクタでのbox-sizing（念のためここでも明記） */
*, *::before, *::after {
box-sizing: border-box;
}
/* ---- common_main_style (renewal.css) ---- */
@charset "UTF-8";
/* ==========================================================================
RENEWAL STYLESHEET
ここから先が「新デザイン」用の置き場所です。
旧デザインは assets/css/legacy.css に凍結してあります（このファイルからは
一切参照・依存しないこと）。!important は使わない運用にしてください。
TOPページは PC_TOP.jpg（仮デザイン）に基づいています。色は原寸画像から
スポイトで拾った実測値です。
【ネスト構文について】
このファイルはCSSのネイティブネスト構文（&）で書いています。
同じコンポーネント（基本形・状態違い・レスポンシブ）のルールはできるだけ
1つの塊にまとめてあるので、既存パーツに手を入れるときはまずそのクラス名の
ブロックを探せばよい（レスポンシブの上書きもその中の @media に入っている）。
ただし、複数の無関係なコンポーネントを1つの@media（例：旧`.js-reveal`と
`.c-about`をまたぐprefers-reduced-motion）でまとめて書いていた箇所は、
無理に分割すると同じ内容の重複だらけになるため、あえてネストせず元のまま
フラットに残してある。
========================================================================== */
/* --------------------------------------------------------------------------
1. Design Tokens
トークン定義は assets/css/tokens.css へ移動した（ブロックエディタ内でも
同じ変数を参照できるようにするため）。このファイルからは変数を使うだけ。
-------------------------------------------------------------------------- */
/* SWELL本体（build/css/main.css）はhtmlのfont-sizeを --swl-fz--root というCSS変数で
決めており、実は600px未満では既に画面幅に応じた可変値（3.6vw）、600px以上では
固定16pxという2段構えになっている。ところがこのテーマのSP基準は750pxなので、
600〜750pxの間だけSWELL側が「固定16px」に切り替わってしまい、remがそこだけ
画面幅に連動しない区間ができてしまっていた（rem指定なのに750px境界で急に
固定サイズになる不自然な挙動の原因）。
--swl-fz--root変数の上書きを!important付きで試したが、実機では反映されなかった
（SWELLのカスタマイザーが動的に出力するCSS等、変数まわりに他の上書きが絡んでいる
可能性がある）。そのため変数の間接参照を諦め、htmlのfont-size自体を直接
!importantで固定する方式に変更した。こちらは変数の中身が何であっても関係なく効く。
750pxちょうどで16px（＝PC側の固定16pxと連続）になるようにし、750px以下は
画面幅に応じてrem基準そのものが連続的に拡大縮小するようにしている。
このルールはhtml要素そのものに効くため、renewal.cssを読み込む全ページ
（portfolio/recruit以外）のSP表示に影響する（TOPページだけに限定されない） */
@media (max-width: 750px) {
html {
font-size: 2.1333vw !important; /* 16px ÷ 750px × 100 */
}
:root {
--works-slide-gap: 3.6875rem; /* SP_TOP.jpg実測：カード間59px／画面幅750px */
}
}
/* --------------------------------------------------------------------------
2. Reset / Base
-------------------------------------------------------------------------- */
* {
box-sizing: border-box;
}
body {
font-family: var(--font-jp);
color: var(--color-black);
}
.p-top a {
color: inherit;
text-decoration: none;
}
/* ==================================================
汎用：左スクロールループ（無限マーキー）
※親要素に overflow: hidden; が必要です
================================================== */
.u-scroll-loop {
/* 既存の transform: translate(-50%, -50%) を上書きし、Y軸の-50%だけ維持（中央揃え） */
left: 0 !important;
display: flex !important;
width: max-content;
animation: scroll-loop 20s linear infinite; /* 秒数でスピード調整 */
}
/* data-text属性を使ってテキストを自動複製（途切れさせないため） */
.u-scroll-loop::after {
content: attr(data-text);
padding-left: 10rem;
}
/* 複製したテキストの半分（50%）まで移動したら0に戻ることで無限ループさせる */
@keyframes scroll-loop {
0% {
transform: translate(0, -50%);
}
100% {
/* padding-left: 2em の半分の 1em を引いて位置をピタッと合わせる */
transform: translate(calc(-50% - 1em), -50%);
}
}
/* --------------------------------------------------------------------------
3. Layout
-------------------------------------------------------------------------- */
.l-container {
max-width: var(--container-w);
margin-inline: auto;
padding-inline: var(--space-5);
margin-bottom: 0;
& .l-container {
padding: 0;
}
@media (max-width: 750px) {
padding-inline: 7.6vw;
}
}
.l-inner {
max-width: var(--container-w);
margin: 0 auto;
width: 85%;
}
.top {
& #content {
margin: 0 auto;
}
& .l-container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
/* margin: 0 auto; */
}
/* サイト共通ヘッダー・フッター（通常#header・追従#fix_header・#footer、
いずれも内部で.l-containerを使っている）はTOPページでも他ページと同じ
左右余白を保ちたいので、上の余白ゼロ化を打ち消して.l-container本来の
余白に戻す */
& #header .l-container,
& #fix_header .l-container,
& #footer .l-container {
max-width: var(--container-w);
padding-left: var(--space-5);
padding-right: var(--space-5);
padding-block: 0.5rem;
gap: 1rem;
}
@media (max-width: 750px) {
& #header .l-container,
& #fix_header .l-container,
& #footer .l-container {
padding-left: var(--space-3);
padding-right: var(--space-3);
}
}
}
/* --------------------------------------------------------------------------
4. Components
-------------------------------------------------------------------------- */
/* ==========================================================
TOP：3Dロゴ 固定背景（c-bg3d） / ローディング画面（c-loading）
legacy.css から移設（TOPページは本ファイルのみを読み込むため）
========================================================== */
.c-bg3d {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
contain: strict;
pointer-events: none;
& canvas {
display: block;
width: 100%!important;
height: 100%!important;
}
}
/* 2026-09-10: SPハンバーガーメニューを開くと、このロゴが#sp_menuと重なって
「ロゴが二つ」に見える不具合の対策。.c-bg3dはz-index:-1で通常は#sp_menu
（z-index:101）より確実に奥に来るはずだが、TOPページはこの3D背景＋
Barba(pjax)のラッパー等、他ページに無い要素が絡むため、スタッキング
コンテキストの作られ方次第で意図しない重なりが起きる余地がある
（このファイル内「About us」の節のコメント参照：.c-bg3dは過去にも
同種の重なり事故が起きたことがある要素）。原因の特定より確実性を優先し、
メニュー展開中は単純にこの装飾要素を消してしまう。 */
[data-spmenu="opened"] .c-bg3d {
display: none;
}
.c-loading {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg);
transition: opacity 0.6s ease, visibility 0.6s ease;
/* JS側が完全に失敗した場合（回線遮断・古いブラウザ・クローラー等）の保険。
JS側の安全タイマー（14秒）より長く設定し、通常はJS側の制御が必ず先に効くようにする */
animation: mda-loading-force-hide 0s 18s forwards;
&.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
transition: none;
}
& .c-loading__bg3d {
position: absolute;
inset: 0;
& canvas {
display: block;
width: 100%!important;
height: 100%!important;
}
}
& .c-loading__text {
position: relative;
z-index: 1;
text-align: center;
}
& .c-loading__catch {
font-family: var(--font-jp);
font-size: var(--fz-jp-h-sm-pc);
font-weight: 500;
letter-spacing: 0.05em;
margin: 0 0 1.7em;
@media (max-width: 750px) {
font-size: var(--fz-jp-h-sm-sp);
}
}
& .c-loading__logo {
margin: 0;
& img {
display: block;
width: 44rem;
height: auto;
}
@media (max-width: 750px) {
& img {
width: 40rem;
}
}
}
& .c-loading__sub {
font-family: var(--font-jp);
font-size: 0.625rem;
letter-spacing: 0.2em;
margin: 2.6em 0 0;
@media (max-width: 750px) {
font-size: 1.25rem;
margin: 2em 0 0;
}
}
}
@keyframes mda-loading-force-hide {
to {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
}
/* ==========================================================
c-ph：仮画像プレースホルダー（フラットな面。PC_TOP.jpgの
Blog/Newsダミー枠と同じ表現）差し替え時は img/picture に置き換える
========================================================== */
.c-ph {
display: block;
width: 100%;
/* aspect-ratio: 4 / 3; */
&.-ratio43 {aspect-ratio: 370 / 256;}
/* NO IMAGE画像のときだけ、白背景でも枠がわかるよう線を足す */
&.-noimg {
border: 1px solid var(--color-bg-soft);
background: #fff;
}
}
/* c-ph を img に差し替えたとき用（object-fitで枠いっぱいにトリミング表示） */
img.c-ph {
height: 100%;
object-fit: cover;
}
/* ==========================================================
c-sec-head：セクション共通見出し（デフォルトは左揃え）
========================================================== */
.c-sec-head {
margin-bottom: var(--space-5);
&.-center {
text-align: center;
width: fit-content;
margin-inline: auto;
}
/* .-small は元画像で確認したところ、サイズ・太さ・色とも通常の見出しと同一だったため
独自スタイルは持たせず、下の .-on-dark 分岐にそのまま乗せる */
&.-on-dark .c-sec-head__ja {
color: var(--color-bg);
}
&.-on-dark .c-sec-head__lead {
color: var(--color-bg);
}
}
/* __ja/__bar/__lead は .c-sec-head の中だけでなく、About us見出し（.c-about__label内）
のように単独でも使われるため、基本スタイルは.c-sec-head配下に限定せず独立させておく
（.-on-darkのような「.c-sec-headの中にあるときだけ」の上書きだけを上のブロックに置く） */
.c-sec-head__ja {
font-family: var(--font-en)!important;
font-size: var(--fz-en-h-lg-pc)!important;
color: var(--color-black);
border: none!important;
margin: 0!important;
padding: 0!important;
font-weight: 400!important;
/* SP_TOP.jpgで実測すると、この見出しはPCからほとんど縮小されていない（実測値からの
逆算で約3rem、PCの3.125remとほぼ同じ）。以前の2.25remはこのSPデザイン案が無い
段階での仮値だったため、実測に合わせて引き上げた */
@media (max-width: 750px) {
font-size: 3.125rem;
}
}
.c-sec-head__bar {
display: block;
width: 2.75rem;
height: 0.3rem;
background: var(--color-border);
margin-top: var(--space-3);
&.-on-dark {
background: var(--color-border);
}
@media (max-width: 750px) {
width: 5rem;
}
}
.c-sec-head__lead {
margin-top: var(--space-4);
font-size: var(--fz-jp-base-pc);
line-height: var(--lh-jp-base-pc);
@media (max-width: 750px) {
font-size: var(--fz-jp-base-sp);
}
}
/* c-btn / c-link / c-arrow（共通ボタン・リンク）は、ブロックエディタ内でも
同じ見た目にするため assets/css/blocks.css へ移動した。 */
/* ==========================================================
c-page-head：下層一覧ページ共通の大見出し（英字タイトル＋横棒＋日本語サブ）
使っているところ：サービス一覧（archive-service.php）／ブログ一覧
（home.php・archive.php）／制作実績一覧（archive-production-story.php ほか）。
元は page-service.css の .p-service__head 一式だったものを、3つの一覧ページで
同じ寸法に揃えるためここへ移した（page-service.css はサービス関連ページでしか
読み込まれないので、共通で使うならここに置くしかない）。
2026-09-16: 英字サイズ・横棒サイズ・余白とも独自の実測値を持っていたが、
p-secTtl / c-sec-head / c-about__label と見た目がバラバラに見えるとの指摘で、
この3つがすでに共有している数値（.c-sec-head__ja / __bar / __lead、
blocks.cssの.p-secTtl側コメント参照）にすべて揃えた。
ここを直すと3ページ全部の見出しが同時に変わる。
========================================================== */
.c-page-head {
margin-bottom: var(--space-5);
}
/* 'label' を渡したときだけ出る、英字見出しの上の小さな1行（実績タイプ等）。
使っているところ：サービス詳細のFV（parts/single/service-fv.php）のみ
（他の3ページはlabelを渡していないので影響なし）。色はc-page-head__subと揃える */
.c-page-head__label {
font-size: var(--fz-jp-base-pc);
letter-spacing: 0.08em;
margin-bottom: 1rem;
}
.c-page-head__ttl {
font-family: var(--font-en)!important;
/* .c-sec-head__ja / .p-secTtl__en と同値（PC・SPとも3.125remで揃える） */
font-size: var(--fz-en-h-lg-pc);
font-weight: 600;
line-height: 1.1;
color: var(--color-black);
@media (max-width: 750px) {
font-size: var(--fz-en-h-lg-pc);
}
}
/* 見出し下の短い横棒。.c-sec-head__bar / .p-secTtl__en::after と同値に揃える */
.c-page-head__bar {
display: block;
width: 2.75rem;
height: 0.3rem;
margin-top: var(--space-3);
background: var(--color-border);
@media (max-width: 750px) {
width: 5rem;
}
}
.c-page-head__sub {
margin-top: var(--space-4);
font-size: var(--fz-jp-base-pc);
line-height: var(--lh-jp-base-pc);
letter-spacing: 0.08em;
color: var(--color-text-sub);
@media (max-width: 750px) {
font-size: var(--fz-jp-base-sp);
}
}
.c-news-list__desc {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.c-tag {
display: inline-flex;
align-items: center;
padding: 0.4em 0.5em;
border: 1px solid currentColor;
border-radius: 0.3em;
font-size: var(--fz-jp-xs-pc);
letter-spacing: 0.05em;
}
/* [mda_role_list]ショートコード用。.c-tagと同じ「テキストの周りに枠線＋角丸」の考え方だが、
文字サイズは標準（--fz-jp-base-*）のまま変えない仕様のため別クラスにしてある。
.c-service-grid__list と同じ理由・同じ対処：本文（.post_content）の中に置くと
SWELL側の .post_content ul の行頭点が list-style:none だけでは消えないため、
ul・li 両方に !important、さらに ::marker も明示的に潰す */
.c-role-list {
list-style: none !important;
margin: 0;
padding: 0 !important;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.c-role-list__item {
list-style: none !important;
display: inline-flex;
align-items: center;
padding: 0.4em 0.8em;
border: 1px solid;
border-radius: 0.4em;
@media (max-width: 750px) {
font-size: var(--fz-jp-base-sp);
}
}
.c-role-list__item::marker {
content: "";
}
/* ==========================================================
FV
========================================================== */
.c-fv {
position: relative;
/* ヘッダーをFVに重ねる仕様はサイト共通（functions.phpのmda_add_fv_dark_body_classが
.mda-fv-lightを付与。TOPはis_front_page()で対象）。ヘッダーぶんの上余白は
一覧ページの帯・投稿詳細の帯と同じ padding-top: 13.5625rem で揃える。
※ この値はPC_TOP.jpgとの実測比較はまだ済んでいない（他ページの実測値の流用）。
見た目がズレていたら値を調整すること */
padding-top: 4.5625rem;
@media (max-width: 750px) {
padding-top: max(9rem, 120px);
}
}
.p-top__fv-head {
position: relative;
max-width: 76rem; /* 画面いっぱいに広げず、見出しのまとまりを画面中央に配置する */
margin-inline: auto;
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
/* SPでは見出しへの重ね配置が破綻するため、通常の縦積みに切り替える */
@media (max-width: 750px) {
display: block;
min-height: 0;
padding-block: 0 11rem!important;
width: 84%;
}
}
/* 見出し本体。幅を文字量に合わせて縮める（width:fit-content）ことで、
最終行「Print」の右にできる余白へ .p-top__fv-info を正しく重ねられるようにする */
.p-top__fv-titlewrap {
position: relative;
width: fit-content;
@media (max-width: 750px) {
width: auto;
}
}
.p-top__fv-catch {
width: fit-content;
font-family: var(--font-en)!important;
font-size: 9.425em;
font-weight: 600;
line-height: 1.2;
color: var(--color-black);
padding-inline: 4rem 4rem;
/* SP_TOP.jpg実測の8.5rem。一度は実機で折り返す不具合が出て4remまで縮小したが、
原因は文字サイズではなく750px以下でremの基準（html font-size）が画面幅に連動して
いなかったこと（:root側の--swl-fz--root上書きのコメント参照）。それを直した今は
750px以下のどの幅でも周囲の余白と一緒に比例して縮むので、モックアップ通りの
8.5remに戻して問題ない */
@media (max-width: 750px) {
width: auto;
font-size: 8.5rem;
line-height: 1.1;
padding-inline: 0;
}
}
/* 「Motion &」（長い行）と「Print」（短い行）の幅差でできる余白に重ねて配置 */
.p-top__fv-info {
position: absolute;
top: 74%;
left: 76%;
max-width: 24rem;
width: 21vw;
text-align: justify;
@media (max-width: 750px) {
position: static;
max-width: none;
margin-top: var(--space-5);
width: 100%;
}
}
.p-top__fv-info-lead {
font-size: 1.25em;
font-weight: 600;
line-height: 1.5;
@media (max-width: 750px) {
font-size: 1.625em;
}
}
.p-top__fv-info-text {
margin-top: var(--space-2);
font-size: 0.875em;
line-height: var(--lh-jp-h-xs-pc);
color: var(--color-text-sub);
@media (max-width: 750px) {
font-size: 1.375em;
font-weight: 500;
margin-top: var(--space-4);
}
}
/* ニュースチッカーは見出しの直下・画面右端にピッタリ突き当てる。
.p-top__fv-head は76rem幅で中央寄せされた箱なので、right:0 だと
その箱の右端（画面端よりかなり内側）で止まってしまう。
right: calc(50% - 50vw) は「中央寄せされた箱の中から画面の実際の右端まで」
はみ出させるための定番テクニック（50%=箱の半分幅、50vw=画面の半分幅） */
.c-ticker {
position: absolute;
top: 110%;
right: calc(50% - 50vw);
background: var(--color-black);
color: var(--color-bg);
border-radius: 999px 0 0 999px;
font-size: 0.875em;
line-height: 1.4;
/* Swiperを内包するための全体の幅と高さを固定 */
width: 50%;
height: 3.4rem; /* 実測に合わせて微調整してください */
overflow: hidden;
/* SP時は2段組のため高さを広げ、左端まで伸ばす */
@media (max-width: 750px) {
left: 0;
width: calc(100vw - 8%);
bottom: 0;
top: auto;
height: 8.4rem;
}
/* Swiper Container */
& .swiper {
width: 100%;
height: 100%;
}
& .swiper-wrapper {
flex-direction: column;
}
/* Slide (aタグ) */
& .c-ticker__slide {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 1rem 1.9rem;
box-sizing: border-box;
width: 100%;
text-decoration: none;
color: inherit;
@media (max-width: 750px) {
flex-wrap: wrap;
row-gap: var(--space-2);
padding: 1rem 2.9rem;
align-content: center;
}
}
/* Tag */
& .c-tag {
border-color: rgba(255, 255, 255, 0.4);
line-height: 1.6;
flex-shrink: 0;
@media (max-width: 750px) {
font-size: var(--fz-jp-note-sp);
padding: 0.1em 0.4em;
}
}
/* Text */
& .c-ticker__text {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
@media (max-width: 750px) {
font-size: var(--fz-jp-base-sp);
flex: 1;
}
}
}
/* Date */
.c-ticker__date {
font-family: var(--font-en)!important;
color: var(--color-text-sub);
flex-shrink: 0;
@media (max-width: 750px) {
flex-basis: 100%;
font-size: var(--fz-jp-note-sp);
}
}
.p-top__fv-foot {
padding-top: 18rem!important;
padding-bottom: var(--space-6)!important;
text-align: center;
/* .c-tickerは.p-top__fv-headの中でposition:absoluteのまま下にはみ出す形になっている
（.c-ticker側のコメント参照）ため、通常フローの兄弟であるこちら側でticker分の
高さをpadding-topとして確保しておかないと、fv-copyの見出しとtickerが重なってしまう */
@media (max-width: 750px) {
padding-top: 7rem!important;
}
}
.p-top__fv-copy {
font-weight: 400;
position: relative;
&::before {
content:'';
display: block;
width: 100%;
height: 100%;
position: absolute;
background: url(https://mediartz.co.jp/wp-content/themes/swell_child/assets/css/../img/new/MEDIARTZ.webp) no-repeat center/contain;
z-index: -1;
mix-blend-mode: soft-light;
top: -5.5rem;
@media (max-width: 750px) {
margin-top: 0.1rem;
}
}
/* 2つの.p-top__fv-copy-lineの間の余白は、spanをinline-blockにする代わりに
区切りの
自体をblock化して付与する（spanをinline-blockにすると上のclone効果が効かなくなるため） */
& > br {
content: '';
display: block;
margin-top: 3rem;
}
}
/* display:inline + box-decoration-break:clone にすることで、テキストが
複数行に折り返した場合でも border-bottom（下線）が折り返した行それぞれに
複製される（inline-blockのままだと箱全体の一番下にしか線が付かない） */
.p-top__fv-copy-line {
display: inline;
font-size: 2.8125em;
line-height: 2.2;
border-bottom: 2px solid var(--color-black);
padding-bottom: 0.25em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
@media (max-width: 750px) {
font-size: var(--fz-jp-h-md-sp);padding-bottom: 0.1em;
}
}
.p-top__fv-note {
text-align: center;
font-size: 1.25rem;
margin-bottom: var(--space-7);
line-height: 2;
@media (max-width: 750px) {
font-size: var(--fz-jp-base-sp);
}
}
/* スライドショー（現状は仮画像 .c-ph を並べたマーキー。実画像は今後差し替え）。
.c-photo-strip__track を同じ並びで2セット横に並べ、track自体をtranslateX(-100%)まで
等速で動かして無限ループさせる（2セット目が1セット目の続きに来るのでシームレスに繋がる、
CSSだけで組む無限マーキーの定番手法）。演出目的のみのためJS/外部ライブラリは使わない。
trackのpadding-rightはitem間と同じgapを終端にも作るためのもの
（transform: translateX(-100%) は自身のボーダーボックス幅＝padding込みの幅を基準に動くので、
これが無いと1セット目と2セット目の間だけ隙間が詰まってループ時に一瞬ズレて見える） */
.c-photo-strip {
display: flex;
overflow: hidden;
width: 100%;
margin-bottom: var(--space-7);
}
.c-photo-strip__track {
display: flex;
flex: 0 0 auto;
gap: var(--space-4);
padding-right: var(--space-4);
animation: c-photo-strip-scroll 30s linear infinite;
& > li {
flex: 0 0 auto;
width: calc(20vw - var(--space-2));
@media (max-width: 750px) {
width: calc(50vw - var(--space-2));
}
}
& .c-ph {
aspect-ratio: 370 / 256;
border-radius: 0.8rem;
}
/* 常時アニメーションはprefers-reduced-motionで停止し、複製した2セット目は表示しない
（コーディング規則のJS読み込み方針4.と同じ考え方をCSSアニメーションにも適用） */
@media (prefers-reduced-motion: reduce) {
animation: none;
&[aria-hidden="true"] {
display: none;
}
}
}
@keyframes c-photo-strip-scroll {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
/* ==========================================================
Service
========================================================== */
.p-top__service {
padding-block: var(--space-7)!important;
padding-inline: clamp(var(--space-5), 6vw, 6rem);
/* リード文とグリッドの間を実測に合わせて広げる */
& .c-sec-head {
margin-bottom: 6.5rem;
@media (max-width: 750px) {
margin-bottom: var(--space-6);
}
}
@media (max-width: 750px) {
padding-inline: var(--space-3);padding-block: 2rem var(--space-8)!important;
}
}
/* SP_TOP.jpgでは3列→1列ではなく3列→2列（01/02, 03/04, 05/06の3段組）。
1列にすると縦に長くなりすぎる上、mockupの実際のレイアウトとも異なるため2列を維持する。
border-leftは各項目に一律で付けているので、2列でも01/02間・03/04間…に自然と縦線が入る */
.c-service-grid {
/* .c-service-grid__list（内側のリスト）と同じ理由：[mda_service_grid]経由で
本文（.post_content）の中に置いたとき、外側のこの
自体にもSWELLの
行頭点が出るため、こちらも明示的に潰しておく */
list-style: none !important;
margin: 0;
padding: 0!important;
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: var(--space-6);
@media (max-width: 750px) {
grid-template-columns: repeat(2, 1fr);
row-gap: var(--space-7);
width: 100vw;
margin: 0 calc(50% - 50vw);
}
}
.c-service-grid__item {
/* 2026-09-12追記：.c-stats__item と同じ原因（SWELLの.post_content liが持つ
margin:.25em 0 / line-height:1.5がグリッドのズレを起こす） */
list-style: none !important;
list-style-type: none !important;
margin: 0 !important;
line-height: normal;
padding: 0 var(--space-4);
border-left: 1px solid var(--color-black);
text-align: center;
@media (max-width: 750px) {
padding: 0 var(--space-3);
&:nth-child(odd) {
border: 0;
}
}
}
.c-service-grid__item::marker {
content: "";
}
.c-service-grid__no {
display: block;
font-family: var(--font-en)!important;
font-size: 2.5rem;
color: var(--color-border);
text-align: left;
margin-bottom: var(--space-4);
@media (max-width: 750px) {
font-size: 3.125rem;
}
}
.c-service-grid__icon {
display: block;
width: 5.5rem;
aspect-ratio: 1 / 1;
margin: 0 auto var(--space-5);
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #6b6b6b, var(--color-black) 70%);
filter: blur(1px);
@media (max-width: 750px) {
margin-bottom: var(--space-6);
}
}
/* icon を実画像(img)に差し替えたとき用（仮アイコンのグラデーション/ぼかしは外し、素直に収める） */
img.c-service-grid__icon {
background: none;
filter: none;
object-fit: contain;
}
.c-service-grid__ja {
display: block;
font-weight: 500;
font-size: var(--fz-jp-h-sm-pc);
margin-bottom: var(--space-4);
@media (max-width: 750px) {
font-size: 1.875rem;
margin-bottom: var(--space-5);
}
}
.c-service-grid__list {
/* 2026-09-12追記：TOP（tmp/front.php）では素のマークアップなので reset.css の
ul{list-style:none} だけで点が消えていたが、[mda_service_grid] ショートコード
経由で本文（.post_content）の中に置いたときは SWELL側の .post_content ul の
行頭点が勝ってしまう（実機で確認）。.p-planCards__list と同じ理由・同じ対処で
ul・li 両方に !important、さらに ::marker も明示的に潰す
（list-style指定だけでは点が残る環境があるため） */
list-style: none !important;
margin: 0;
padding: 0;
padding-left: 0!important;
& li {
font-size: var(--fz-jp-xs-pc);
color: var(--color-text-sub);
line-height: var(--lh-jp-base-pc);
list-style: none !important;
@media (max-width: 750px) {
font-size: var(--fz-jp-base-sp);
}
}
& li::marker {
content: "";
}
& a {
display: inline-block;
color: inherit;
text-decoration: none;
transform-origin: center;
transition: transform 0.2s ease;
&:hover {
transform: scale(1.08);
}
}
}
/* ==========================================================
About us（固定フレーム＋スクロール連動トランジション）
仕組み:
- 黒→白の背景色とmix-blend-mode（3Dロゴ .c-bg3d に馴染ませる演出。現在はhard-light）は
.c-about本体ではなく.c-about::beforeだけに掛けている。.c-about自体に掛けると、
見出し・本文の文字や組織フロー図の画像まで丸ごとブレンドの対象になり、テキストや
画像までコントラストの影響を受けてしまうため、背景の塗り面だけを::beforeに分離した
（z-index:-1で他の中身の後ろに敷く）。白側はbackground-color:transparent
（var(--color-bg)ではない。詳しくは.c-about::beforeのコメント参照）。
- .c-about__stage は position: sticky; top: 0; height: 100vh。背景（写真・色）だけが
入っていて、スクロールしてもずっと画面の同じ位置に留まる「フレーム」になる。
- 見出しラベル「About us」は .c-about__scroll 側の .c-about__content（高さ指定なし＝
中の-dark/-lightぶんの自然な高さになる「器」）の中、.c-about__label-pin
（position:absolute）の中に置く。中の .c-about__label 自体が position:sticky
なので、.c-about__label-pin の高さぶんだけ画面に固定される。この高さは front.js が
実測してpxで指定する（詳しくはfront.jsのsyncLabelPinHeight()参照）。
- .c-about__scroll は margin-top: -100vh でそのフレームに重なる位置から始まる、
ふつうの（stickyではない）コンテンツ。中身はサイズを100vhにおさめる必要が一切ない。
- 固定表示（position:sticky）するのは .c-about__block--dark の中身
（.c-about__block-inner）だけ、しかもPCのみ。--dark は min-height:
--about-hold-unit 1個ぶん（+--about-content-clear）の「枠」を持ち、中身はその枠が
終わるまで画面に固定表示され続け、次のブロックに差しかかる瞬間に手放される。
見出しラベル「About us」と同じ仕組みを本文にも適用することで、実際には
スクロールしているのに「1画面の中で内容だけが切り替わっている」ような錯覚を
強めている。--about-hold-unitはあえてvh（100vh/200vh）ではなくpx固定値にしている：
vhは画面の高さそのものなので、それを基準にすると背の高いモニタでは固定表示時間が
長すぎ、ノートPCでは短すぎる、というようにデバイスによってスクロール量＝体感時間が
大きく変わってしまうため。同じ理由で、中身を画面いっぱいに見せたいときも100vhでは
なく.c-about__block-inner側の余白（padding）で対応する（100vhをmin-heightに使うと、
モバイルブラウザのURLバー等の出入りでvhの実px値がスクロール中に変動し、レイアウトが
動いてしまう不具合があったため）。
--light（FLEXIBLE & WIDE）は固定表示しない：見出し＋長文＋組織フロー図の画像＋
ボタンと縦に長く、ノートPCやタブレットの画面高には入りきらない。sticky固定は
「はみ出した下側にはスクロールで辿り着けない」性質があるため、固定すると下部が
画面外のまま見られない不具合が構造的に避けられない（実際にこの不具合が発生した）。
--dark はPC/SPとも固定表示する（見出し＋一文＋短い本文だけなので、どの画面高でも
ほぼ確実に収まる＝安全に固定できる）。SPは--about-hold-unitを短くして、保持時間が
長くなりすぎないようにしている。
- .js-about__target は .c-about__block--light の先頭に置く見えない1px要素。
IntersectionObserverのコールバックは監視対象が「画面に入った瞬間」と「完全に出た
瞬間」の2回しか呼ばれないため、背の高いブロックそのものを監視すると、本来検知したい
「上端がちょうど画面上端を通過した瞬間」を挟めずに判定がズレる。1px要素なら
「入った瞬間」≒「上端を通過した瞬間」になるため、この見えないセンチネルを監視する。
.js-about__targetが画面上端を越えたら front.js が .c-about に is-inview を
付与し、フレーム側（背景色・写真・ラベルの文字色）だけを1sで黒→白にクロスフェード
する。上下どちらのスクロールでも正しく判定される（boundingClientRect基準）。SPで.-darkが固定表示されない（収まらない）場合は、
この重なり自体が起きないためこのトグルは動かさない。
- prefers-reduced-motion: reduce の場合は front.js 側で即座に確定状態にする
========================================================== */
.c-about {
position: relative;
/* z-index:0でこの要素自身を新しいスタッキングコンテキストにする。これがないと
::before（z-index:-1）が.c-aboutの中だけでなく、ページ全体のz-index:-1な要素
（.c-bg3dなど）と直接競合してしまい、DOM順序次第で意図しない重なりになる
おそれがある。z-index:0でスタッキングコンテキストを区切ることで、::beforeの
z-index:-1は「.c-aboutの中でのいちばん奥」という意味に限定される。 */
/* 見出しラベル「About us」が画面上端から何rem下に来るか。通常は14remだが、
ウインドウの縦幅が狭いとき（50vhが14remを下回るとき、目安で高さ448px未満）は
自動的に縮み、.c-about__block-inner の本文と重ならない・画面に収まらなくなる
ことがないようにする。以前は20remだったが、MacBookくらいの高さ（画面全体の
比率に対して）だと本文が画面に収まりきらなかったため縮めた。 */
--about-label-clear: clamp(3rem, 50vh, 14rem);
/* SPは追従ヘッダー（.l-fixHeader）の分だけ、見出しラベル「About us」が画面上端に
近すぎ／隠れて見えることがあった。--swl-offset_y はSwellテーマ本体が実際の
追従ヘッダー（＋管理バー）の高さを実測してセットしているCSS変数（assets/js/
main.min.jsのw()参照）なので、決め打ちの数値より確実にヘッダーぶんをクリア
できる。これを下限にしつつ、上のclampより広い方（狭い画面では50vhで自動的に
縮む挙動はそのまま活かす）を採用する。 */
@media (max-width: 750px) {
--about-label-clear: max(clamp(6rem, 40vh, 12rem), calc(var(--swl-offset_y, 100px) + 2rem));
}
/* .c-about__block-innerが画面上端から何rem下に来るか。ラベルの真下に来るよう、
ラベル自身の見た目の高さ（見出し文字+バー、約7rem）ぶんだけ--about-label-clearより
下にずらしている。ここを--about-label-clearと同じ値にすると、ラベルの文字と
SPEED & QUALITY/FLEXIBLE & WIDEの文字が同じ高さに重なって表示されてしまう
（実際にこの不具合が発生した）。 */
--about-content-clear: calc(var(--about-label-clear) + 7rem);
/* .c-about__block（-dark/-light）の「枠」の高さの基準単位。以前は100vh/200vhを
使っていたが、vhは画面の高さそのものなのでデバイスによってスクロール量＝
固定表示される時間が大きく変わってしまう（背の高いモニタだと長すぎ、ノートPCだと
短すぎる）。px指定に変えることで、画面の高さに関係なく常に同じスクロール量・
同じ固定表示時間になるようにする。-darkはこの1個ぶん、-lightは2個ぶん
（below参照）。実測して調整してよい。 */
--about-hold-unit: 800px;
/* .-light（FLEXIBLE & WIDE）用の保持量。.-darkは見出し＋一文＋短い本文だけなので、
同じ長さ画面に留めるには長い保持が要る。一方.-lightは見出し＋長文＋組織フロー図＋
ボタンと中身自体が長く、スクロールして読み進める時間そのものが長い。両者が画面に
留まる体感（＝保持量＋中身の高さ）が釣り合うよう、.-light側は短めにしている。
また.-lightは画面高に入りきらないことがあり、固定中は、はみ出した下側にスクロールで
辿り着けないため、保持を長くしすぎると「下が読めない」不具合になる。
tests/run-tests.mjs が「両者が画面に留まる長さ」と「末尾のボタンに到達できるか」を
検査しているので、値を変えたらテストを回して確認すること。 */
--about-hold-unit-light: 700px;
/* SPは同じスクロール量でも指の移動距離＝体感時間が長くなるため、固定表示を
保持する量を短めにする（長すぎると「表示が遅い」「いつまでも進まない」と
感じられる）。実測して調整してよい。 */
@media (max-width: 750px) {
--about-hold-unit: 450px;
--about-hold-unit-light: 400px;
}
/* 黒→白の背景そのものは.c-about本体ではなく::beforeに持たせ、mix-blend-modeもこちらだけに
掛ける。以前は.c-about自体に掛けていたため、子要素（見出し・本文の細かい文字、組織
フロー図の画像など）まで丸ごとブレンドの対象になってしまい、テキストや画像まで
バンディング/コントラストの影響を受けていた。背景の塗り面だけをこの::beforeに分離
することで、実際の文字・画像は普通に（blend-mode:normalのまま）描画され、ブレンドの
効果は背景の黒/白パネルだけに限定される。
白側はbackground-color:transparentにしている（var(--color-bg)＝白ではない）。
color-burnは前景が白のとき数式上ちょうど無演算（結果＝背景そのまま）になるため、
実際にはtransparentと視覚的に同じだった。transparentにしておけば、blend-mode自体
何を選んでも白側の見え方に影響しない（アルファ0＝ブレンド計算への寄与もほぼ0のため）
ので、黒側の効果だけを見てmix-blend-modeを選べる。今はhard-lightを使用。 */
&::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background-color: var(--color-dark);
transition: background-color 1s ease;
mix-blend-mode: hard-light;
}
/* .js-about__targetが画面上端を越えると付与される（front.js参照）。
フレーム側（背景・写真・ラベルの文字色）の黒→白クロスフェードをまとめてここに書く */
&.is-inview {
&::before {
background-color: transparent;
}
& .c-about__panel--dark {
opacity: 0;
}
& .c-about__panel--light {
opacity: 1;
}
& .c-about__label .c-sec-head__ja {
color: var(--color-black);
}
& .c-about__label .c-sec-head__bar {
background: var(--color-border);
}
}
}
.c-about__stage {
position: sticky;
top: 0;
height: 100vh;
z-index: 0;
mix-blend-mode: lighten;
}
/* btm.webp: 黒→白どちらの状態でもフレームにうっすら乗り続ける背景 */
.c-about__bg-follow {
position: absolute;
z-index: 0;
pointer-events: none;
bottom: 0;
& img {
width: 100%;
height: auto;
}
}
/* 背景レイヤー（写真+色のみ）。黒/白をopacityでクロスフェード */
.c-about__panel {
position: absolute;
inset: 0;
opacity: 1;
transition: opacity 1s ease;
z-index: 0;
pointer-events: none;
&--light {
opacity: 0;
}
/* 写真の上に暗いグラデーションを重ねてテキストの可読性を確保する想定の余地 */
&--dark::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, var(--color-dark) 0%, transparent 35%);
z-index: 0;
}
}
/* top.webp: 黒パネルにだけ属する背景 */
.c-about__bg {
position: absolute;
inset: 0;
z-index: 0;
& img {
width: 100%;
height: auto;
}
}
/* .c-about__label-pinと-dark/-lightをまとめて包むだけの「器」。高さは指定しない＝
中の-dark（min-height:100vh）+-light（min-height:200vh）を並べた自然な高さがそのまま
この器の高さになる。position:relativeは.c-about__label-pin（絶対配置）の基準にするため。 */
.c-about__content {
position: relative;
}
/* 見出しラベルの固定範囲。position:absoluteの領域（.c-about__contentがposition:relative
なのでその左上基準）。高さはJSが実測してinline styleで指定する（詳しくは上のAbout us
全体のコメント、およびfront.jsのsyncLabelPinHeight()参照）。高さ100vhはJS未実行時の
フォールバックにすぎない。この高さを超えてスクロールすると中の.c-about__labelは
固定できる場所がなくなり、固定が解除される。 */
.c-about__label-pin {
position: absolute;
inset: 0 0 auto 0;
height: 100vh; /* JS未実行時のフォールバック。通常はfront.jsがpxで上書きする */
z-index: 2;
pointer-events: none;
}
/* 見出しラベル本体。sticky固定の範囲は親.c-about__label-pinの高さまで。
文字色だけ.is-inviewで黒→白クロスフェードする。当たり判定は持たせない。 */
.c-about__label {
position: sticky;
top: 0;
padding-top: var(--about-label-clear)!important;
pointer-events: none;
& .c-sec-head__ja {
/* .c-sec-head__ja 自身が color: var(--color-black) を持っているため、明示的に上書きする */
color: var(--color-bg);
transition: color 1s ease;
}
& .c-sec-head__bar {
background: var(--color-border);
transition: background-color 1s ease;
}
}
.c-about__scroll {
position: relative;
z-index: 1;
margin-top: -100vh;
}
/* 固定表示するのは.-dark（SPEED & QUALITY）だけ、しかもPCのみ。
- .-light（FLEXIBLE & WIDE）を固定しない理由：見出し＋長文＋組織フロー図の画像＋
ボタンと縦に長く、ノートPCやタブレットの画面高には入りきらない。sticky固定は
「はみ出した下側にはスクロールで辿り着けない」性質があるため、固定すると
「FLEXIBLE & WIDE以降の下部が画面外のまま見られない」不具合が構造的に避けられない
（実際にこの不具合が発生した）。逆に.-darkは見出し＋一文＋短い本文だけなので、
どの画面高でもほぼ確実に収まる＝安全に固定できる。
- SPで固定しない理由：画面の縦幅がデバイスによって大きく違ううえ、SPは見出し・本文とも
文字を大きめにしているため、.-darkでも収まらないことがある。SPは固定表示を一切せず、
背景の黒→白クロスフェードと「にゅっ」と出るリビールだけにする（見出しラベル
「About us」のsticky固定は別で、PC/SPとも継続）。 */
.c-about__block {
position: relative; /* 中の.c-about__block-inner（sticky）や.js-about__target（絶対配置）の基準 */
&.-dark {
color: var(--color-bg);
& .c-about__text {
color: rgba(255, 255, 255, 0.8);
}
}
&.-light {
color: var(--color-black);
& .c-about__text {
color: var(--color-text-sub);
}
}
}
/* 中身の固定表示ボックス。.-dark/.-lightとも position:sticky で固定表示する（PC/SP共通）。
固定していられる長さ＝「枠（.c-about__block）の高さ − この要素自身の高さ」なので、
枠の高さはfront.jsが「中身の実測の高さ + 保持量（--about-hold-unit系）」で決めている
（CSSのmin-heightだけでは中身の実測の高さを式に入れられず、中身や画面の高さによって
固定時間が3倍以上ばらついていたため）。
topは0にして、見た目の位置はpadding-topでずらしている（topに直接オフセットを指定すると、
その分だけ早いタイミングでsticky固定が始まってしまい、スクロールで入ってきた最初の
瞬間だけ本文がラベルより上に見えてしまうバグがあった）。
padding-topは、固定表示中に見出しラベル「About us」の真下に来るための余白
（--about-content-clear＝ラベルが画面上端から来る位置＋ラベル自身の見た目の高さ）。
.-light側にもこれが必要：ラベルは.-lightの中身と同じ瞬間まで固定され続ける
（＝FLEXIBLE & WIDEのタイトルの上まで来て一緒に止まる）ので、その間ラベルと重ならない
位置に本文を置く必要があるため。
padding-bottomは中身が短くても画面いっぱいの存在感を持たせるための余白で、100vhでは
なくpx/rem指定にしている（100vhをmin-heightに使うと、モバイルブラウザのURLバー等の
出入りでvhの実px値がスクロール中に変動し、レイアウトが動いてガクッとズレる不具合が
あったため）。 */
.c-about__block-inner {
position: sticky;
top: 0;
padding-top: var(--about-content-clear);
padding-bottom: var(--space-8);
}
/* 見えないセンチネル。.c-about__block.-light の一番上、つまり黒→白の境目にあたる位置に置く */
.js-about__target {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
}
.c-about__catch {
font-family: var(--font-en)!important;
font-size: 6.25rem;
letter-spacing: 0.01em;
/* SP_TOP.jpg実測の7rem（fv-catch側のコメント参照：remの基準を直したので
モックアップ通りの大きさに戻して問題ない） */
@media (max-width: 750px) {
font-size: 6.875rem;line-height: 1.1;
}
}
.c-about__sub {
font-size: var(--fz-jp-h-md-pc);
margin-top: var(--space-6);
line-height: 1.6;
@media (max-width: 750px) {
font-size: var(--fz-jp-h-md-sp);
}
}
.c-about__text {
font-size: var(--fz-jp-base-pc);
line-height: var(--lh-jp-h-sm-pc);
margin-top: var(--space-5);
text-align: justify;
@media (max-width: 750px) {
font-size: var(--fz-jp-base-sp);line-height: var(--lh-jp-md-sp);
}
}
/* grid-template-areasで文章・組織フロー図・ボタンを配置する。PCは「文章＋ボタンの列」と
「組織図の列」の横並び（ボタンは文章の下、組織図と高さを揃える）。SPはSP_TOP.jpgの実測順
（文章 → 組織図 → ボタン）に合わせて完全な縦積みに変わる。ボタン（.c-about__flex-btn）を
.c-about__flex-textの外に出してこのグリッドの3個目の項目にしてあるのはこの並び替えの
ためで、PC/SPで異なるDOM順を作らずCSSだけで実現している（front.php側のコメントも参照） */
.c-about__flex {
display: grid;
grid-template-columns: 1.2fr 1fr;
grid-template-areas:
"text img"
"btn img";
gap: var(--space-6);
/* PCの行間（＝本文とボタンの間）だけ詰める。列の間（文章と組織図の間）は
--space-6のままにしたいので、row-gapだけ上書きする。SPは「文章→組織図→ボタン」の
縦積みで、この行間がセクション間の余白そのものになるため下のSP側で戻している。 */
row-gap: var(--space-3);
/* 1行目（文章）は中身の高さぴったり、余った高さは2行目（ボタン）側が引き受ける。
これがないと、2行にまたがる組織図の画像のほうが文章＋ボタンより背が高いぶんの
余りが1行目にも配られ、本文とボタンの間が意図せず広がってしまう
（実測で、row-gapを16pxにしても本文〜ボタンが78px空いていた）。 */
grid-template-rows: max-content 1fr;
align-items: start;
@media (max-width: 750px) {
grid-template-columns: 1fr;
grid-template-areas:
"text"
"img"
"btn";
grid-template-rows: auto;
row-gap: var(--space-6);
}
}
.c-about__flex-text {
grid-area: text;
}
.c-about__flex-btn {
grid-area: btn;
& .c-btn {
display: flex;
width: fit-content;
/* 上の本文との距離。row-gapと合わせた合計が本文〜ボタンの間隔になる
（以前はrow-gap 64px + ここ40px = 126pxで離れすぎていた） */
margin-top: var(--space-3);
margin-inline: auto;
@media (max-width: 750px) {
margin-top: 0;
}
}
}
/* グリッド上の配置は、グリッド項目である.js-revealのラッパー側で行う。
中の.c-about__flex-img（span）はグリッド項目ではないため、そちらにgrid-areaを
書いても効かない（実際にそうなっており、ラッパーが自動配置されて1行目の高さを
押し上げ、本文とボタンの間に意図しない余白が入っていた）。 */
.c-about__flex-imgWrap {
grid-area: img;
}
/* top_about_member_table.webp（706×640pxで書き出し=2倍、実際の表示幅は353px）。
グリッド側は1frで可変幅だが、画像自体はその中で353px幅の実寸表示に固定する。 */
.c-about__flex-img {
display: block;
width: 22rem;
max-width: 100%;
aspect-ratio: 566 / 504;
margin: 4rem 0;
@media (max-width: 750px) {
margin-inline: auto;
width: 81%;
}
& img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* ==========================================================
汎用スクロールリビール（.js-reveal）：「下から生えてくる」動き
仕組み: 外側(.js-reveal)がoverflow:hiddenの窓、内側(.c-reveal__inner)が
translateY(300%)（窓の下に隠れた状態）から0へ動く。フェードではなく、要素自体が
窓の下端という「見えないライン」から出てくる。JS（front.js）が画面に入った瞬間
.js-revealに.is-inviewを付与し、一度だけ動いて終わる（往復はしない）。
-delay-* で複数要素をわずかにずらして連続して生えてくるように見せられる。
（CSSのanimation-timeline: view()によるJSレスなスクロール駆動アニメーションも
試したが、以前のJSでのスクロール一時停止方式より滑らかにはなったものの、
スクロール位置と正しく連動しない不具合が出たため、確実に動作するこちらの
IntersectionObserver＋sticky固定方式に戻した。） */
.js-reveal {
overflow: hidden;
&.is-inview .c-reveal__inner {
transform: translateY(0);
}
&.-delay-1 .c-reveal__inner { transition-delay: 0.15s; }
&.-delay-2 .c-reveal__inner { transition-delay: 0.3s; }
&.-delay-3 .c-reveal__inner { transition-delay: 0.45s; }
}
.c-reveal__inner {
display: block;
transform: translateY(300%);
transition: transform 1.4s cubic-bezier(0.34, 1, 0.64, 1); /* easeOutBack: わずかに勢い余ってから収まる、「にゅっ」とした質感。
ゆっくりめにするほどリッチな印象になるため0.9s→1.4sに調整 */
}
/* 複数の無関係なコンポーネントをまたぐ一括指定のため、あえてネストせずフラットのまま */
@media (prefers-reduced-motion: reduce) {
.c-about::before,
.c-about__label,
.c-about__label .c-sec-head__ja,
.c-about__label .c-sec-head__bar,
.c-about__panel,
.c-reveal__inner {
transition: none;
}
}
/* ==========================================================
ダークゾーン共通（Works〜Blog）
========================================================== */
.c-dark-zone {
color: var(--color-bg);
position: relative;
&::before {
content: '';
display:block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: var(--color-dark);
mix-blend-mode: hard-light;
z-index: -1;
}
}
/* ==========================================================
Works
========================================================== */
.p-top__works {
padding-block: 12rem var(--space-6);
/* SP_TOP.jpg実測：ダークゾーンの上端〜「Works」見出しが約133px、
タグ一覧の下〜CREATIVE WORKSマーキーの間が大きく空いている */
@media (max-width: 750px) {
padding-block: var(--space-8) 5rem;
}
}
/* このセクションだけ l-container / l-inner を使わず、左端だけコンテナに揃えて
右端は viewport 右端までフラットに伸ばす（画像リストをスライドショー全幅にするため。
.p-top__works自体を100%幅のまま残し、揃える処理は下のpadding-leftで行う） */
.p-top__works-head {
display: grid;
grid-template-columns: 17rem 1fr;
column-gap: var(--space-6);
row-gap: var(--space-5);
align-items: start;
/* SP：1列積み。.l-innerの85%＋中央寄せではなく、左だけデザイン案実測の
約94pxを空け、右は0にしてスライドショーをそのまま画面右端まで流す
（PC側の.c-work-listの「右にだけはみ出す」幅計算はSPでは不要になる）。
行間はデザイン案の「見出し〜リード〜カード〜タグ一覧」の間隔（約80px）に合わせる。
SPはgridではなくflexの縦積みにしてある。gridのままだと、.c-work-listと
.c-tag-cloudがgrid-columnを持つ「列が確定したアイテム」、見出しとMOREが
「完全自動配置のアイテム」となり、両者が別ステップで配置されるせいで
orderどおりの順番にならないことがあるため（flexのorderは素直に効く） */
@media (max-width: 750px) {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
padding-inline: 7.5% 0;
gap: 5rem;
}
}
.p-top__works-side {
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: start;
gap: var(--space-4);
& .c-sec-head {
margin-bottom: 0;
}
/* SPは「見出し→カード→タグ一覧→MORE」の順に積む。MOREリンクはDOM上この
.p-top__works-sideの中（見出しの直下＝PCの並び）にあるので、SPだけ
display:contentsでこのラッパーの箱を消し、中身（見出し・MORE）を
.p-top__works-headのグリッドアイテムに昇格させたうえでorderで並べ替える。
PCとSPでMOREの位置が大きく離れているため、こうして別々に配置している */
@media (max-width: 750px) {
display: contents;
& .c-sec-head {
order: 1;
}
/* MOREリンク。クラス名（.p-top__works-more）ではなく.c-link.-moreで拾うことで、
front.phpが古いキャッシュのまま配信されていても並び順だけは正しく効く */
& .c-link.-more {
order: 4;
}
/* 見出しまわりはWorksだけデザイン案が他セクションより一回り大きい */
& .c-sec-head__ja {
font-size: 4.25rem;
}
& .c-sec-head__bar {
width: 6rem;
height: 0.5rem;
margin-top: 2.625rem;
}
& .c-sec-head__lead {
margin-top: 4.25rem;
font-size: 1.5rem;
line-height: 1.95;
}
}
}
/* スライドショー（Swiper）。ゆっくり途切れず流れ続ける自動スライド（矢印・ドット無し。
ドラッグ/スワイプでの手動操作も可能）。loop:trueによりスライドが少ない場合は
Swiperが自動で複製してループする。実際の初期化はassets/js/works-slider.js
（読み込みはTOPページ限定でfunctions.php側が行う）。右端は.p-top__works側で
l-innerの外に出し画面右端まで伸ばしてあるので、ここではカード幅を固定して
並べるだけで、はみ出した分はSwiper標準のoverflow:hiddenにより自然に画面端で
フラットに切れる */
.c-work-list {
grid-column: 2;
grid-row: 1;
/* 右端だけ画面右端まではみ出させる。左端は元のグリッド位置のまま変えず、
右方向にだけ「.l-inner右端〜ビューポート右端」の余白分を幅に足す。
.l-innerの実幅は width:83% と max-width:var(--container-w) の小さい方
（min()で再現）。中央寄せなので余白 = (100vw - 実幅) / 2 = 50vw - 実幅/2。
.c-tag-cloud（同じgrid-column:2）はこの指定の対象外なので巻き込まれない */
width: calc(100% + 50vw - min(83vw, var(--container-w)) / 2);
/* .swiper-slideの`width:100%`（swiper.css側）に確実に勝つよう2階層のセレクタにする */
& .c-work-list__item {
width: clamp(220px, 20vw, 300px);
/* SP_TOP.jpg実測：カード幅510px／画面幅750px。右端に次のカードが少しだけ覗く */
@media (max-width: 750px) {
width: 68vw;
}
}
@media (max-width: 750px) {
grid-column: 1;
grid-row: auto;
order: 2;
/* SPは.p-top__works-head側のpadding-right:0で既に画面右端まで届いているので、
PC用の「右にだけはみ出す」幅計算は不要（そのままだと逆に横スクロールが出る） */
width: 100%;
}
}
.c-work-list__wrapper {
/* カード間の余白はここのCSS gapではなくJS側のSwiper spaceBetweenで持たせる。
gapのまま（Swiperのspace Between:0）だと、SwiperがslidesPerView:'auto'や
loop:true用に内部計算する各スライドの座標にこの余白が反映されず、実際の
見た目とズレて左端のスライドが半端に切れて見える不具合が出るため
（詳しくはworks-slider.js側のコメント参照） */
/* 2026-09-12追記：.c-service-grid__list と同じ理由（[mda_top_works]ショートコード
経由で本文の中に置くとSWELL側の.post_content ul / .post_content li の指定に
負ける）。list-styleだけでなく、SWELL側が.post_content liに持たせている
margin:.25em 0 / line-height:1.5 もスライドの横並びをズレさせるため明示的に
打ち消す（.c-stats__item側のコメント参照。同じ原因） */
list-style: none !important;
list-style-type: none !important;
margin: 0;
padding: 0!important;
& .c-work-list__item {
list-style: none !important;
list-style-type: none !important;
/* margin: 0 !important; */
line-height: normal;
}
& .c-work-list__item::marker {
content: "";
}
}
.c-work-list__ttl {
margin-top: var(--space-3);
font-weight: 700;
font-size: 0.9375rem;
line-height: 1.5;
@media (max-width: 750px) {
font-size: 1.5rem
}
}
.c-work-list__cat {
margin-top: var(--space-1);
font-size: var(--fz-jp-xs-pc);
color: rgba(255, 255, 255, 0.55);
@media (max-width: 750px) {
font-size: var(--fz-jp-base-sp);
margin-top: var(--space-1);
}
}
/* SERVICE CATEGORIESは画像リストと左端を揃えるため同じ列に配置 */
.c-tag-cloud {
grid-column: 2;
grid-row: 2;
@media (max-width: 750px) {
grid-column: 1;
grid-row: auto;
order: 3;
/* スライドショーは画面右端まで伸ばすが、タグ一覧は右にも少し余白を取る。
デザイン案の折り返し位置（1行目が「コーポレートサイト」まで）に合わせた値 */
padding-right: 2rem;
}
}
.c-tag-cloud__label {
font-family: var(--font-en)!important;
font-size: var(--fz-jp-xs-pc);
letter-spacing: 0.15em;
color: rgba(255, 255, 255, 0.5);
margin-bottom: var(--space-3);
@media (max-width: 750px) {
font-size: 1.5rem;
margin-bottom: 2rem;
}
}
.c-tag-cloud__list {
/* 2026-09-12追記：.c-service-grid__list と同じ理由・同じ対処
（[mda_top_works]ショートコード経由で本文の中に置くと行頭点が出る） */
list-style: none !important;
margin: 0;
padding: 0!important;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
/* PC_TOP.jpg実測。以前はgap未指定でタグ同士がくっついていた */
@media (max-width: 750px) {
gap: 1.5rem 1.25rem;
}
/* グループ（WEB系／印刷系）の切れ目だけ余白を広く取る（front.php側のコメント参照） */
& + & {
margin-top: var(--space-4);
@media (max-width: 750px) {
margin-top: 3.625rem;
}
}
& li {
/* 2026-09-12追記：.c-stats__item と同じ原因（SWELLの.post_content liが持つ
margin:.25em 0がタグ同士の間隔をズレさせる） */
list-style: none !important;
list-style-type: none !important;
margin: 0 !important;
line-height: normal;
padding: 0.5em 1.1em;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 999px;
font-size: var(--fz-jp-xs-pc);
color: rgba(255, 255, 255, 0.8);
@media (max-width: 750px) {
font-size: 1.1875rem;
}
}
& li::marker {
content: "";
}
}
/* PCでは見出し直下（.p-top__works-side内）、SPではタグ一覧の下。
並べ替えの仕組みは.p-top__works-side側のコメント参照。
セレクタを.c-link.-moreまで含めているのは、font-sizeを.c-link.-moreの
指定より確実に後勝ちさせるため（詳細度を揃える） */
.c-link.-more.p-top__works-more {
@media (max-width: 750px) {
margin-top: var(--space-4);
font-size: var(--fz-jp-note-sp);
}
}
/* ==========================================================
Creative Works stats banner
========================================================== */
.c-stats {
text-align: center;
padding-block: var(--space-6) 12rem;
overflow: hidden;
@media (max-width: 750px) {
width: 90%;margin: 0 auto;
/* SPのマーキーは自前でoverflow:hiddenを持ち、幅90%のこの箱から
画面端まではみ出して流れるので、ここでは切らない */
overflow: visible;
}
}
.c-stats__marquee {
/* 実測: 白の縁取り文字ではなく、背景に馴染む単色の塗り文字（#403531＝背景よりやや明るい程度）。
PCは中央揃えの上で、画面幅より意図的に大きく（vw基準・上限なし）表示し、
左右にはみ出した分は親.c-statsのoverflow:hiddenで画面端でスパッと切れる
（＝結果的に文字が画面の端から端まで敷き詰まって見える）。
文字の下にも下線を1本添える。
SPは同じ見た目のまま「横に流れ続ける」動きにする（下のトラック側コメント参照） */
font-family: var(--font-en)!important;
font-size: max(6.225rem, 10.2vw);
font-weight: 400;
letter-spacing: 0.02em;
color: #403531;
text-align: center;
white-space: nowrap;
border-bottom: 2px solid #403531;
margin-bottom: var(--space-7);
margin-left: -0.7rem;
line-height: 0.7;
mix-blend-mode: color-dodge;
/* SP_TOP.jpgでの実測値に合わせた固定値。コーディング規則によりSPでもclamp/vwは使わず
固定remにする（PC側のmax(...)はそのまま維持）。
margin-inlineは「幅90%の親の中央から画面端まで」戻すための計算
（50% = 45vw なので 45vw - 50vw = -5vw ずつ外へ出て、合計ちょうど100vw） */
@media (max-width: 750px) {
display: flex;
width: 100vw;
margin-inline: calc(50% - 50vw);
overflow: hidden;
font-size: 5.5rem;
}
}
/* 同じ文字列のトラックを2本並べ、両方を「自分の幅1本分（-100%）」だけ左へ動かす。
1本目が完全に画面外へ抜けた瞬間に2本目がちょうど元の1本目の位置に来るので、
継ぎ目なく無限にループして見える（FVの.c-photo-stripと同じ手法）。
末尾のpadding-rightは単語同士の間隔。transformの%は自分の幅（border-box）基準なので、
この余白も移動量に含まれ、繰り返しの継ぎ目に隙間ができない */
.c-stats__marquee-track {
@media (max-width: 750px) {
flex: none;
padding-right: 0.15em;
animation: c-stats-marquee 16s linear infinite;
}
}
/* PCは1行を中央に置くデザインなので2本目は不要 */
.c-stats__marquee-track + .c-stats__marquee-track {
display: none;
@media (max-width: 750px) {
display: block;
}
}
@keyframes c-stats-marquee {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
/* 動きを減らす設定の端末では流さず、複製したトラックも隠す */
@media (prefers-reduced-motion: reduce) {
.c-stats__marquee-track {
animation: none;
}
.c-stats__marquee-track + .c-stats__marquee-track {
display: none;
}
}
.c-stats__label {
font-size: var(--fz-jp-base-pc);
letter-spacing: 0.1em;
margin: var(--space-5) auto;
@media (max-width: 750px) {
font-size: 1.5rem;
}
}
.c-stats__industries {
font-size: var(--fz-jp-base-pc);
line-height: var(--lh-jp-base-pc);
letter-spacing: 0.3rem;
margin-bottom: var(--space-6);
@media (max-width: 750px) {
font-size: 1.5rem;
}
}
.c-stats__list {
/* 2026-09-12追記：.c-service-grid__list と同じ理由・同じ対処
（[mda_top_stats]ショートコード経由で本文の中に置くと行頭点が出る） */
list-style: none !important;
margin: 0;
padding: 0!important;
display: flex;
justify-content: center;
gap: var(--space-6);
@media (max-width: 750px) {
gap: var(--space-4);
flex-wrap: wrap; /* 万一circleの合計幅が画面幅を超えても横スクロールさせず折り返す保険 */
}
}
.c-stats__item {
/* 2026-09-12追記：SWELL側の.post_content li{margin:.25em 0;line-height:1.5;
position:relative}（.post_contentの中に置いたときだけ効く。list-styleと同じ
.post_content li由来）が、このflexアイテムの余白・行間まで上書きしてズレていた。
list-styleだけでなくmargin/line-heightも明示的に打ち消す */
list-style: none !important;
list-style-type: none !important;
margin: 0 !important;
line-height: normal;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 15rem;
aspect-ratio: 1 / 1;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.4);
color: var(--color-bg);
/* SP_TOP.jpg実測の20rem（fv-catch側のコメント参照：remの基準を直したので
モックアップ通りの大きさに戻して問題ない）。flex-wrapは.c-stats__list側に
保険として残してある */
@media (max-width: 750px) {
width: 20rem;
}
}
.c-stats__item::marker {
content: "";
}
.c-stats__label-en {
font-family: var(--font-en)!important;
font-size: var(--fz-jp-base-pc);
letter-spacing: 0.15em;
@media (max-width: 750px) {
font-size: 1.125rem;
}
}
.c-stats__label-ja {
font-size: var(--fz-jp-base-pc);
margin-top: var(--space-4);
@media (max-width: 750px) {
font-size: 1.125rem;
}
}
.c-stats__num {
font-family: var(--font-en)!important;
display: flex;
align-items: baseline;
gap: 0.15em;
margin-top: var(--space-3);
}
.c-stats__num-main {
font-family: var(--font-stats-num)!important;
font-size: 3.75rem;
font-weight: 700;
line-height: 1;
/* SP_TOP.jpg実測の6rem（.c-stats__item側のコメント参照） */
@media (max-width: 750px) {
font-size: 6rem;
}
}
.c-stats__num-unit {
font-size: 1.25rem;
@media (max-width: 750px) {
font-size: 1.75rem;
}
}
.c-stats__num-sub {
font-size: var(--fz-jp-base-pc);
@media (max-width: 750px) {
font-size: var(--fz-jp-note-sp);
}
}
/* ==========================================================
Portfolio strip
画像を複数のタイルに割らず、1枚の背景（将来的には動画）の上に
「PORTFOLIO」見出し＋注記のテキストブロックが1つだけ乗るレイアウト。
.c-ph は将来的に