を必ず吐く。
ブロックのままだと とスピナーがインラインで並び、
ベースライン合わせ＋行の余白のぶんだけラッパーがボタンより数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;
}