を2つに分けると
main.js の取得対象（1要素前提）とずれるため、内側のspanで
出し分けている。SP＝--sp のみ表示、768px以上＝--default のみ表示。 */
.p-hero__lead-text {
display: block;
}
.p-hero__lead-text--default {
display: none;
}
/* ---- FVのCTA（2ボタン縦積み・PC専用） ------------------------ */
/* SPはハンバーガーメニュー内のCTAが担うため非表示。Tablet後半（1024px〜）とPCで表示する。
grid にしているのは、2つのボタンを固定幅を使わずに同じ幅へ揃えるため。 */
.p-hero__actions {
display: none;
gap: var(--cta-gap);
margin-top: var(--space-lg);
}
/* ================================================================
3. FV下部の4つの特徴
FVの上に乗るパネル。枠線は使わず、薄い影で「乗っている」ことを示す
================================================================ */
/* 縦の余白はセル（.p-hero__feature）側だけで持たせ、
パネル側は左右のみ。上下の余白が二重にかかるのを避ける。
SP・TabletはFV画像の真下に通常フローで置くだけなので、
重ねるための position / z-index は持たせない（PCだけで付ける）。 */
.p-hero__panel {
/* SPは左右16px。セル幅を稼いでテキストの折り返しを減らす
（PCは24pxに戻す。5.レスポンシブ 参照） */
padding: 0 var(--space-sm);
border-radius: var(--radius-md);
background-color: var(--color-white);
box-shadow: var(--shadow-md);
}
/* 区切り線は border ではなく「1pxのgap＋下地の色」で作る。
項目数が変わっても内側だけに線が入り、外周には線が出ない。
:nth-child に依存しないため、ACFで項目が増減してもCSS変更が不要。 */
.p-hero__features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--hairline);
background-color: var(--color-border);
}
/* 全ブレイクポイントで「アイコン＋テキスト」の横並び。
SP・Tabletはアイコンを1.5remへ縮め、gapと左右paddingも詰めることで、
1セル約150pxでもテキストの折り返しが2行までに収まるようにしている。 */
.p-hero__feature {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-xs);
padding: var(--hero-panel-padding-block) var(--space-xs);
background-color: var(--color-white); /* gapの下地を隠し、線だけを見せる */
}
/* テキスト側。flexアイテムの最小幅は既定で内容幅になるため、
長い項目名でセルからはみ出さないよう 0 に戻しておく。 */
.p-hero__feature-body {
min-width: 0;
}
/* アイコン領域。SVG実物を入れたため、仮枠だった紫の枠線は外している。
一辺は --hero-feature-icon-size（SP 1.5rem / PC 2.25rem）。 */
.p-hero__feature-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: var(--hero-feature-icon-size);
height: var(--hero-feature-icon-size);
}
/* アイコンごとに viewBox の縦横比が違う（正方形とは限らない）ため、
contain で比率を保つ。fill のままだと横長のアイコンが引き伸ばされる。 */
.p-hero__feature-icon svg,
.p-hero__feature-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.p-hero__feature-text {
display: block;
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
color: var(--color-text-main);
}
/* base.css の small（xs / サブ色）を活かし、余白だけ足す。
本文とひとまとまりに見せたいので、間隔は詰めておく。 */
.p-hero__feature-note {
margin-top: 0;
line-height: var(--line-height-tight);
}
/* ================================================================
4. Tablet差分（min-width 768px）
----------------------------------------------------------------
Header : SPと同じ「ロゴ＋ハンバーガー」。ナビ・ヘッダーCTAは出さない。
PCヘッダーを無理に縮小せず、1280pxまで待つ。
Header : ハンバーガーをやめ、ヘッダーへナビを直接置く。ヘッダーCTAは出さない
（2つのCTAはHero内へ小サイズで載せる）。
768〜1023pxはロゴ＋ナビが1行に収まらないため、ナビを2段目へ折り返す。
Hero : 画像が hero_tablet.webp（横位置構図）へ切り替わるため、
SPの「上に重ねる」から「左40%に重ねる」へ組み替える。
.p-hero__inner を 40:60 の2カラムにし、左カラムのコピー面を
画像の高さいっぱいに伸ばして横グラデーションで写真へ溶かす。
この2カラム重ねの土台はPCとも共通で、1280px以上では
カラム比（46:54）と文字サイズだけを 6. で上書きしている。
4ポイント帯は画像の真下のまま（重ねない）。
================================================================ */
@media (min-width: 768px) {
/* ---- Hero：左コピー／右は画像を見せる2カラム ------------- */
/* hero_tablet.webp は横長のため、幅によってはコピーの方が画像より高くなる。
画像を伸縮・トリミングせずHeroが下へ伸びるので、その部分がコピー面の白と
分かれて見えないようHero自体の背景も白にしておく。 */
.p-hero {
background-color: var(--color-white);
}
/* コピー面を画像の高さいっぱいに伸ばすため、上詰め（SP）を解除する。
右カラムは空。画像は同じセルの下層に敷いてあるため、ここは
「コピー面の幅を決めるための枠」でしかない（左右分割ではない）。 */
.p-hero__inner {
display: grid;
grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
gap: 0;
align-items: center;
align-self: stretch;
padding-block: var(--hero-main-padding-block);
}
/* 白面をFVの高さいっぱい・画面左端まで敷き、右（写真側）へ向かって
透明にフェードさせる。上下の負マージンは .p-hero__inner の
padding-block と対で管理し、白面だけが画像の高さに一致する。 */
.p-hero__content {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
margin-inline: 0;
margin-block: calc(var(--hero-main-padding-block) * -1);
margin-left: calc(var(--hero-bleed) * -1);
padding-block: var(--hero-main-padding-block);
padding-left: var(--hero-bleed);
padding-right: var(--space-md);
background-image: linear-gradient(
to right,
var(--color-white) 0%,
var(--color-white) 62%,
transparent 100%
);
}
/* ---- Heroのコピー ---------------------------------------- */
/* 「2027年度」の囲みはSPと同じ md のまま（ここでは戻さない）。
囲み・色・太さ・paddingはSP/Tablet/PC共通。 */
/* 左40%の幅に収めるため、base.css の h1（768px以上で40px）ではなく
親（.p-hero__content ＝ 16px）基準の 1.4em＝22.4px を指定する。
base.css の h1 自体は変更しない。 */
.p-hero__title {
margin-top: var(--space-sm);
font-size: 1.4em;
}
/* カラムが狭いので本文は sm のまま。見出しとの間隔と行間も詰めて、
コピー全体の高さを抑える（PCでは 6. 側で戻す）。 */
.p-hero__lead {
margin-top: 0.7em;
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
}
/* ---- Hero内のCTA（Tablet後半＝1024〜1279pxだけ表示） ------ */
/* 配色・矢印は base.css の .c-btn--cta / .c-btn--sample。
ここでは寸法だけを決め、表示の可否は1024px以上（Tablet後半）で切り替える。
左40%カラムに収めるため .c-btn の既定より小さくし、幅はPCと同じ fit-content。 */
.p-hero__actions {
margin-top: var(--space-md);
width: fit-content;
max-width: 100%;
}
.p-hero__cta {
min-height: 44px;
padding-inline: var(--space-md);
font-size: var(--font-size-sm);
}
/* ---- 4つの特徴 ------------------------------------------- */
/* 1セルの内容幅が確保できる 1024px 以上で横4列にする。
768〜1023px は1セル約150pxしかなく、4列にすると
「細かな仕様決め不要」が3行に割れるため2×2のままにする
（文字を小さくして4列を維持することはしない）。 */
.p-hero__panel {
padding: 0 var(--space-md);
}
.p-hero__feature {
gap: var(--space-sm);
padding: var(--hero-panel-padding-block) var(--space-sm);
}
}
/* ================================================================
4-1. Tablet差分（min-width 1024px）
1セルの幅が足りるようになるので4特徴を横1列にする。
================================================================ */
@media (min-width: 1024px) {
/* ---- FVのCTA：Tablet後半（1024px〜）から表示 ------------- */
/* 768〜1023px（Tablet前半）＝ 画像が低く、CTAを足すとコピーが
画像から大きくはみ出すため出さない。
1024〜1279px（Tablet後半）＝ 画像が高くなり収まりが良くなるので、
PCと同じ2つのCTAをFVに載せる（寸法は 5. で指定済み）。 */
.p-hero__actions {
display: grid;
}
.p-hero {
--hero-panel-padding-block: 1rem;
--hero-feature-icon-size: 2.25rem;
}
.p-hero__features {
grid-template-columns: repeat(4, 1fr);
}
.p-hero__feature {
padding: var(--hero-panel-padding-block) var(--space-md);
}
.p-hero__feature-note {
margin-top: var(--space-xs);
}
}
/* ================================================================
5. レスポンシブ（PC差分：min-width 1280px）
----------------------------------------------------------------
ここで初めて「ロゴ＋グローバルナビ＋CTA」のヘッダーと、
コピーをFV画像へ重ねるHeroに切り替える。
画像の見せ方（width:100% / height:auto の全体縮小）はPCでも変えない。
================================================================ */
@media (min-width: 1280px) {
/* ---- 重ねレイヤーへ戻す（1279px以下はoverlayが display:contents） --------- */
/* 1279px以下で display:contents にしていた上層をグリッドとして復活させ、
下層の画像と同じセルに重ねる。
上層は「コピー面（1fr）／4特徴（auto）」の2行で、
padding-bottom の分だけ下層の画像が下へ続いて見える（見本の約30px）。 */
.p-hero__overlay {
display: grid;
position: relative;
z-index: 1; /* 画像より前面（同一スタッキング内の最小限の指定） */
grid-template-rows: 1fr auto;
padding-bottom: var(--hero-media-overhang);
}
/* 下層・上層を同じセルへ重ねる（左右2カラムに分割しない）。
grid-area のショートハンドが1279px以下の grid-row 指定を上書きする。
.p-hero__media は通常フローに参加したまま（absolute にしない）なので、
画像の height:auto がそのままHeroの高さになる。 */
.p-hero__media,
.p-hero__overlay {
grid-area: 1 / 1;
min-width: 0;
}
/* SP・Tabletで付けた帯の余白と生成りの面は、画像へ重ねるPCでは不要 */
.p-hero__foot {
grid-row: 2;
padding-top: 0;
background-color: transparent;
}
/* 画像の上に乗るので、PCでだけ重ね順を明示する。
帯は .p-hero__foot（--wide＝1280px）いっぱいではなく、
本文コンテンツと同じ --container-max-width（1080px）に揃えて中央に置く。 */
.p-hero__panel {
position: relative;
z-index: 1;
max-width: var(--container-max-width);
margin-inline: auto;
}
/* 中身だけを中央寄せにする。セルに auto マージンを与えると白背景が行の高さより縮み、
gapで作っている区切り線の形が変わってしまうため使わない。 */
.p-hero__feature {
justify-content: center;
}
/* カラム比だけTabletの40:60から46:54へ広げる
（2カラム重ねの土台は 5. Tablet差分と共通）。 */
.p-hero__inner {
grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
}
/* ---- コピー面 -------------------------------------------- */
/* PCはカテゴリーを従来どおり2行で見せる（1279px以下だけ1列）。
flex-basis:100% で「法人向けオリジナルカレンダー」を次の行へ送る。 */
.p-hero__category-text {
flex-basis: 100%;
}
/* 「2027年度」の囲みはPCだけ一段大きく（SP・Tabletは md のまま） */
.p-hero__year {
font-size: var(--font-size-lg);
}
/* 説明文はPCだけ通常文（長い方）に切り替える。
SP・Tabletは短縮版（--sp）のまま。 */
.p-hero__lead-text--sp {
display: none;
}
.p-hero__lead-text--default {
display: block;
}
/* 白面をFVの高さいっぱい・画面左端まで敷き、右（写真側）へ向かって
透明にフェードさせる。実写真をFV全面に敷いてもコピーの可読性が保てる。
上下の負マージンは .p-hero__inner の padding-block と対で管理する。 */
/* 横グラデーション・負マージンは 5. Tablet差分と共通。
PCはカラムが広いぶん右の余白だけ広げる。 */
.p-hero__content {
padding-right: var(--space-lg);
}
/* カンプの改行位置（2行）を保つため、左カラム幅に収まるまで縮める。
上限は base.css の h1（3xl）、下限は 2xl。 */
.p-hero__title {
margin-top: var(--space-md);
font-size: clamp(var(--font-size-2xl), 2.6vw, var(--font-size-3xl));
}
.p-hero__lead {
/* カンプと同じく3行程度で折り返す。
em基準なので br に頼らず自然に折り返る。
上の余白と行間はTabletで詰めたぶんを base（SP）の値へ戻す。 */
max-width: 30em;
margin-top: var(--space-sm);
font-size: var(--font-size-md);
line-height: var(--line-height-base);
}
/* 1279px以下で隠していたFVのCTAをPCで表示する。
画面幅いっぱいには広げず、長い方のラベル（用紙サンプル請求）に
合わせた幅にする。fit-content にしているので固定幅を持たせずに済み、
文言が変わっても2つのボタンが同じ幅のまま追従する。 */
.p-hero__actions {
display: grid;
margin-top: var(--space-md);
width: fit-content;
max-width: 100%;
}
/* .c-btn の左右padding（PCは80px）のままだと、コピー列が狭い
1280px前後でラベルが2行に折り返すため、この面だけ詰める。 */
.p-hero__cta {
/* Tabletで 44px に下げた下限を .c-btn（PC）と同じ 56px へ戻す */
min-height: 3.5rem;
padding-inline: var(--space-lg);
font-size: var(--font-size-lg);
}
}
/* ============================================================
Needs（こんなカレンダーを作りたい方へ）
------------------------------------------------------------
SP 1カラム。項目内は「左＝番号／右＝見出し＋説明」で写真だけ下に全幅
Tablet 2カラム×2段（768px〜）。項目内は番号→見出し→説明→写真の縦積み
PC 4カラム1段（1024px〜）
============================================================ */
/* ================================================================
1. ブロック内トークン / セクション枠
================================================================ */
.p-needs {
/* base.css に該当する変数がない値はここに集約し、
px がルール内に散らばらないようにしている。 */
--needs-hairline: 1px; /* カラム間の細い縦罫線 */
padding-block: var(--section-space);
background-color: var(--color-bg-light);
/* 固定ヘッダーがある場合のアンカー着地位置（ヘッダー高に合わせて調整） */
scroll-margin-block-start: var(--space-lg);
}
/* ================================================================
2. 要望リスト
カード化しない。背景・枠線・影は持たせず、余白と罫線だけで整理する
================================================================ */
/* SP：1カラムで縦に積む */
.p-needs__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-xl);
}
/* 4項目とも同一構造。番号 → 見出し → 説明 → 写真 の順に縦へ流す。
背景・角丸・影・hover は持たせない（カードに見せない）。 */
.p-needs__item {
display: grid;
align-content: start;
}
/* このセクションの主役。写真より先に目に入る大きさを取る。
旧レイアウトで付けていた右の縦罫線は、番号が見出しの上に来る
構成になったため廃止した。 */
.p-needs__number {
font-family: var(--font-family-serif);
font-size: var(--font-size-2xl);
font-weight: 500;
line-height: 1;
letter-spacing: var(--letter-spacing-heading);
color: var(--color-primary);
}
/* 見出しは明朝体（base.css の h3 を継承）。
カラムが狭いのでサイズは上げず、2行に折り返る前提で組む。 */
.p-needs__title {
margin-top: var(--space-md);
font-size: var(--font-size-lg);
line-height: var(--line-height-heading);
color: var(--color-text-main);
}
/* 説明はゴシック体・サブ色。2行程度に収まる短さを前提にする */
.p-needs__description {
margin-top: var(--space-xs);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
color: var(--color-text-sub);
text-wrap: pretty;
}
/* ================================================================
3. ビジュアル
写真は説明の補助。主役の番号・見出しより目立たせない
================================================================ */
.p-needs__visual {
margin-top: var(--space-lg);
}
/* 画像未配置でも領域が潰れないよう、プレースホルダーと img に
同じ寸法規則を当てている。
を
![]()
に置き換えるだけで差し替え可能。
比率は素材（needs01〜04.webp ＝ 800×540）と同じ 40:27 に揃え、
SP・PCとも cover でのトリミングが起きないようにしている。 */
.p-needs__placeholder,
.p-needs__visual img {
width: 100%;
aspect-ratio: 40 / 27;
}
.p-needs__placeholder {
background-color: var(--color-bg-muted);
}
.p-needs__visual img {
height: 100%;
object-fit: cover;
border-radius: 10px;
}
/* ================================================================
4. 次セクションへの誘導
ボタンではないため、背景・枠・浮き上がりは付けない
================================================================ */
.p-needs__guide {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
margin-top: var(--space-xl);
color: var(--color-primary);
}
/* base.css の a:hover（primary）では変化が出ないため、濃色側へ寄せる */
.p-needs__guide:hover {
color: var(--color-primary-dark);
}
.p-needs__guide-text {
font-family: var(--font-family-serif);
font-size: var(--font-size-md);
line-height: var(--line-height-heading);
letter-spacing: var(--letter-spacing-heading);
}
/* stroke は currentColor。リンクの色変化にそのまま追従する */
.p-needs__guide-arrow {
width: 2.5rem;
height: auto;
}
/* ================================================================
5. SP専用：項目内を「番号 / 見出し＋説明」の2カラムにする
----------------------------------------------------------------
このファイルは原則モバイルファースト（min-width）で書くが、
ここだけは max-width を使う。SPだけの組み方であり、
768px以上で grid-template-areas / columns を1つずつ打ち消すより
「SPだけに存在する状態」として閉じ込めたほうが安全なため。
HTMLにラッパーは足さず、grid-area で配置だけを変えている。
================================================================ */
@media (max-width: 767px) {
.p-needs__item {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"number title"
"number description"
"visual visual";
column-gap: var(--space-md);
}
/* 番号は見出し＋説明の2行分にまたがる。伸ばさず上端に置く */
.p-needs__number {
grid-area: number;
align-self: start;
}
/* 番号の右に来るので、縦積み用の上余白は解除する */
.p-needs__title {
grid-area: title;
margin-top: 0;
}
.p-needs__description {
grid-area: description;
}
/* 写真だけは番号の下も使って全幅で見せる */
.p-needs__visual {
grid-area: visual;
margin-top: var(--space-md);
}
}
/* ================================================================
6. レスポンシブ（タブレット差分：min-width 768px）
2カラム×2段。4カラムのまま縮小すると1カラム約170pxまで痩せ、
見出しも説明も細かく折り返してしまうため、この幅では2列に留める。
================================================================ */
@media (min-width: 768px) {
/* このセクションは1段に収まるようになったため、上下は --section-space
（PC 100px）より少し詰めた 80px にする。 */
.p-needs {
padding-block: var(--space-2xl);
}
.p-needs__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 0;
row-gap: var(--space-2xl);
}
/* カラム間の罫線を中央に置くため、左右に等しい余白を持たせる。
全項目に同じ padding を入れることで、内容幅も均等に保たれる。 */
.p-needs__item {
padding-inline: var(--space-md);
}
/* 2カラムでは右列（偶数番目）にだけ縦罫線を入れる。
外周は囲まないので、線は列と列の間にしか現れない。 */
.p-needs__item:nth-child(even) {
border-left: var(--needs-hairline) solid var(--color-border);
}
/* 主役として十分な大きさにする */
.p-needs__number {
font-size: var(--font-size-3xl);
}
/* 見出しの行数が項目ごとに違っても、説明と写真の上端を横に並ぶ項目どうしで揃える。
※ .p-needs__item の直下が4要素であることが前提（ACF等で増減する場合は span も合わせる）。
subgrid 未対応ブラウザでは各カラムが個別の高さで流れるだけで破綻しない。 */
@supports (grid-template-rows: subgrid) {
.p-needs__item {
grid-row: span 4;
/* grid-template-rows: subgrid; */
/* 4ブロック間の間隔は各要素の margin-top が持つため、
親の row-gap（段の間隔）はここでは効かせない */
row-gap: 0;
}
}
/* 誘導の下には次セクション（.p-lineup）の上padding 100px が続くため、
ここの上余白は詰めても窮屈にならない */
.p-needs__guide {
margin-top: var(--space-lg);
}
.p-needs__guide-text {
font-size: var(--font-size-lg);
}
}
/* ================================================================
7. レスポンシブ（PC差分：min-width 1024px）
4カラム1段。セクションの縦幅をここで大きく圧縮する。
================================================================ */
@media (min-width: 1024px) {
/* 1080pxコンテナ内で4等分。罫線の左右余白（.p-needs__item の
padding-inline）が列間の余白を兼ねるので column-gap は持たせない。 */
.p-needs__list {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* 4カラムでは2〜4番目に縦罫線を入れる（1番目の左には引かない）。
タブレットの :nth-child(even) と同詳細度で、こちらが後に来るため
2・4番目もこのルールで上書きされ、3番目にも線が入る。 */
.p-needs__item:nth-child(n + 2) {
border-left: var(--needs-hairline) solid var(--color-border);
}
}
/* ============================================================
Lineup（7つの商品スタイル）
------------------------------------------------------------
カード化せず、写真＋テキストを直接置くカタログ型。
商品ごとに「メイン画像＋サムネイル3枚」のギャラリー（切替は main.js）。
============================================================ */
/* ================================================================
1. ブロック共通
================================================================ */
/* base.css に該当する変数がない値はこのブロックスコープに集約し、
px がルール内に散らばらないようにしている。
将来 base.css へ昇格させる想定（提案はファイル末尾のコメント参照）。 */
.p-lineup {
--lineup-hairline: 1px; /* 区切り罫線の太さ */
--lineup-decor-thickness: 2px; /* カテゴリー見出し左の装飾罫の太さ */
--lineup-icon-size: 1.5rem; /* 用途例アイコン（24px） */
--lineup-thumb-size: 4.5rem; /* サムネイルの横幅（72px） */
--lineup-fade-duration: 0.28s; /* メイン画像の切り替えfade。切り替わりが分かる程度に少し長め */
padding-block: var(--section-space);
background-color: var(--color-bg-main);
}
/* ================================================================
2. カテゴリー（卓上カレンダー / 壁掛け・カードカレンダー）
================================================================ */
/* カテゴリー間はセクション内の他の余白よりも明確に広く取る */
.p-lineup__category + .p-lineup__category {
margin-top: var(--space-2xl);
padding-top: var(--space-2xl);
border-top: var(--lineup-hairline) solid var(--color-border);
}
/* カテゴリー見出し。左にブランドカラーの短い横線を置く */
.p-lineup__category-title {
display: flex;
align-items: center;
gap: var(--space-sm);
font-family: var(--font-family-serif);
font-weight: 700;
color: var(--color-text-main);
}
.p-lineup__category-title::before {
content: "";
flex: 0 0 auto;
width: var(--decor-line-width);
height: var(--lineup-decor-thickness);
background-color: var(--color-primary);
}
/* 商品グリッド。SPは1カラム、PCで3カラム（末尾のレスポンシブ参照） */
.p-lineup__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
margin-top: var(--space-lg);
}
/* ================================================================
3. 商品カード
白背景・角丸・シャドウは使わず、写真と文字を直接置く
================================================================ */
/* 商品詳細ページが無いためカード全体をリンクにしない（hover演出も付けない）。
min-width:0 は、グリッドアイテムが最小内容幅でトラックを押し広げないための解除。 */
.p-lineup__item {
display: flex;
flex-direction: column;
min-width: 0;
}
/* バッジの位置基準。高さは固定せず aspect-ratio で比率だけを揃える */
.p-lineup__figure {
position: relative;
}
/* 04（写真入り卓上）の商品写真も、上段3商品とまったく同じ規則にする。
別ルールで同じ値を書くと片方だけ直され続けるため、セレクタをまとめている。
※上段3商品の描画は変わらない（宣言内容は従来と同一）。 */
.p-lineup__image,
.p-lineup__feature-image {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* ================================================================
3-1. 画像ギャラリー（7商品共通）
メイン画像の下に小さなサムネイルを3枚だけ置く。
「1 / 3」・矢印・ドット・中面/表紙/年間のラベルは一切出さない。
商品名以下（.p-lineup__body）の構造・順序には手を入れていない。
================================================================ */
/* .p-lineup__figure に併記するクラス。JSがギャラリーの単位として拾う。
位置指定は .p-lineup__figure が持つため、ここでは何も足さない。 */
/* 切り替え時のfadeだけを足し、サイズには触れない（寸法は .p-lineup__image 側）。
prefers-reduced-motion 時は base.css が transition を潰すため即時切り替えになる。 */
.p-lineup__gallery-main {
transition: opacity var(--lineup-fade-duration) ease;
}
/* 差し替えの直前だけJSが付ける。付け外しでフェードアウト→インになる。
完全な 0 にすると一瞬だけ枠が空白になって目立つため、薄く残す。
（フェード時間は --lineup-fade-duration。JS側は秒数を持たず、
この transition-duration を読んで待ち時間を決めている） */
.p-lineup__gallery-main.is-fading {
opacity: 0.15;
}
/* サムネイルは小さな3枚を左揃えで置く（商品カードの縦幅を伸ばさないため）。
flex-wrap は必須。固定幅で縮まないため nowrap だと「枚数×72px」が最小幅になり、
320px級の端末で横スクロールが発生する。 */
.p-lineup__thumbs {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
margin-top: var(--space-xs);
}
/* base.css の button リセット（背景なし・枠なし・cursor:pointer）を前提に、
選択状態を示す枠だけを持たせる。
非選択時も同じ太さの透明枠を確保しているので、
選択が移ってもサムネイルの寸法は変わらない。 */
.p-lineup__thumb {
flex: 0 0 auto;
width: var(--lineup-thumb-size);
border: var(--lineup-hairline) solid transparent;
transition: border-color var(--transition-base);
}
/* 選択中はブランドカラーの細い枠のみ。背景の塗り・影・拡大はしない */
.p-lineup__thumb[aria-pressed="true"] {
border-color: var(--color-primary);
}
/* 押せることが分かる程度の控えめなhover（選択中の紫は上書きしない） */
.p-lineup__thumb[aria-pressed="false"]:hover {
border-color: var(--color-border);
}
/* メイン画像と同じ 4:3。高さは指定せず比率だけで決める。
72 x 54px となり、タップ領域も確保できる。 */
.p-lineup__thumb img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.p-lineup__body {
margin-top: var(--space-md);
}
.p-lineup__name {
font-weight: 500;
color: var(--color-text-main);
}
/* 通し番号だけをブランドカラー＋1段大きく。h4 は base.css で SP 16px／PC 18px と
変わるため、番号も各1段上（lg／xl）を当てる。
line-height:1 は行boxを膨らませず、スペック以下の位置を動かさないため。 */
/* 書体は装飾番号の共通ルールに合わせて明朝体（商品名はゴシックのまま）。 */
.p-lineup__number {
font-family: var(--font-family-serif);
font-size: var(--font-size-lg);
line-height: 1;
color: var(--color-primary);
}
/* 商品名（.p-lineup__product-name）には意図的にCSSを持たせていない。
h4 の既定（フォント・色・サイズ）をそのまま継承させたいだけで、
番号と分離するための入れ物＝PHP/ACF から差し込む単位として置いている。 */
/* スペック（サイズ｜ページ数｜最小ロット）。
PHP/ACF から1つの文字列として差し込めるよう、
1行のテキストとして扱い、内側に要素を持たせない。 */
.p-lineup__meta {
margin-top: var(--space-xs);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
color: var(--color-text-sub);
}
/* 特徴コピー。04（写真入り卓上）も同じ密度に揃えるため、
上段3商品と同一ルールで扱う（上段の描画は変わらない）。 */
.p-lineup__catch,
.p-lineup__feature-catch {
margin-top: var(--space-sm);
font-weight: 500;
line-height: var(--line-height-heading);
color: var(--color-primary);
}
/* ================================================================
4. 写真入り卓上（04.ワイド（L）ポートレート）
「卓上カレンダー4商品目」として、上段3商品と同じグリッドに載せる。
SP : 商品 → 説明 の縦積み1カラム
PC : 1列目=商品 / 2列目=説明 / 3列目=空欄
3列目には要素を置かず、グリッドのトラックを未使用のまま残している
（空欄用のHTMLは追加しない）。
================================================================ */
.p-lineup__feature {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
/* 上の3商品との間隔は .p-lineup__grid の gap と同じ値にし、
「別ブロック」ではなく「4商品目」として続いて見えるようにする */
margin-top: var(--space-xl);
}
/* ---- 左：商品写真とスペック ---------------------------------- */
/* 写真（4/3）・商品名・スペック・特徴コピーは、いずれも上段3商品と
同じルールを共有している（3.商品カード を参照）。
ここに固有の指定は不要。 */
/* ---- 右：PR詳細 ---------------------------------------------- */
/* カード化はしない。1px の枠だけで「商品スペックとは別の情報」を示す。
SP・PCとも全周の細い枠。角丸・影は付けない。
PC側は列の割り当てと左右paddingだけを差分で持つ（4.〜5. のレスポンシブ 参照）。 */
.p-lineup__feature-detail {
padding: var(--space-lg) var(--space-md);
border: var(--lineup-hairline) solid var(--color-border);
}
/* 詳細ブロックの先頭要素なので上余白は持たせない */
.p-lineup__feature-title {
font-family: var(--font-family-base);
font-weight: 500;
line-height: var(--line-height-heading);
color: var(--color-text-main);
}
/* ---- 用途例（アイコン＋短いテキスト） ------------------------- */
.p-lineup__uses {
margin-top: var(--space-sm);
}
/* 1カラム幅では3項目が横1列に入らないため2列に折る。
1列目を auto にしているのは、等幅2列だと「施設・地域紹介に」が2行に折り返るため。 */
.p-lineup__use-list {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-xs) var(--space-sm);
}
/* ---- Tablet（768〜1279px）だけ縦積み ------------------------ */
/* この幅ではPR詳細の右カラムが狭く、2列に折ると
「施設・地域紹介に」が2行になるため、3項目を素直に縦へ重ねる。
このファイルは原則モバイルファースト（min-width）だが、
SPとPCは2列のままにしたいので、ここだけ範囲指定にしている。 */
@media (min-width: 768px) and (max-width: 1279px) {
.p-lineup__use-list {
grid-template-columns: minmax(0, 1fr);
}
}
/* カード化しない。小さな紫アイコンと短いテキストだけで並べる */
.p-lineup__use {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
color: var(--color-text-main);
}
/* 下段に1項目だけ残るときは全幅を使わせる。左揃えのまま伸びるだけで、
中央寄せにはならない。項目数が偶数になれば自動的に無効化される。 */
.p-lineup__use:nth-child(odd):last-child {
grid-column: 1 / -1;
}
/* テキストと同じ紫。サイズはPCで18pxへ落とす（末尾のレスポンシブ参照） */
.p-lineup__use-icon {
flex: 0 0 auto;
width: var(--lineup-icon-size);
height: var(--lineup-icon-size);
color: var(--color-primary);
}
/* 中身は assets/img の実素材（icon-goods / icon-house / icon-art）。
SVG側が紫（#5249A6）を持っているため、span の color は効かない。
アイコンごとに viewBox の比率が違うので、枠の寸法は変えずに
contain で収める（横長のアイコンが引き伸ばされない）。 */
.p-lineup__use-icon svg,
.p-lineup__use-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* ---- 差し替え用サンプル写真 ---------------------------------- */
/* 囲みではなく、上の罫線だけで「別の話題」であることを示す。
区切り線の上下は詰め、特集ブロックが縦に伸びないようにする。 */
.p-lineup__samples {
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: var(--lineup-hairline) solid var(--color-border);
}
.p-lineup__samples-title {
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
color: var(--color-text-main);
}
.p-lineup__sample-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-sm);
margin-top: var(--space-xs);
}
/* 横並びにすると2カラム内で写真が潰れるため、
写真の上にラベルを重ねず縦積みにして写真の面積を確保する */
.p-lineup__sample {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
/* 比率は素材（lineup-sample-*.webp ＝ 400×284）と同じ 100:71。
16/9 にしていたときは cover で上下が約21%切れていた。 */
.p-lineup__sample-image {
width: 100%;
aspect-ratio: 100 / 71;
object-fit: cover;
}
.p-lineup__sample-name {
font-size: var(--font-size-xs);
line-height: var(--line-height-heading);
color: var(--color-text-sub);
}
/* ================================================================
5. レスポンシブ（PC差分：min-width 768px）
SPの値は上記で既定済み。ここではPCの差分のみ記述する。
================================================================ */
@media (min-width: 768px) {
/* ---- 商品グリッド：3カラム均等 ---------------------------- */
.p-lineup__grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
margin-top: var(--space-lg);
}
/* ---- 写真入り卓上：上段と同じ3カラムに載せる -------------- */
/* .p-lineup__grid と同じ列指定・同じ gap を使うため、
1列目の左端は01と、2列目の左端は02と必ず一致する。
幅を直接指定しないので、コンテナ幅が変わっても揃い続ける。
3列目は要素を置かず、意図的に空欄のまま残す。 */
.p-lineup__feature {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-lg);
/* 上段の行間（.p-lineup__grid の gap）と同じ量にする */
margin-top: var(--space-xl);
align-items: start;
}
/* 自動配置でも同じ位置になるが、「3列目は空ける」という意図を
CSS側に残すため列を明示している。 */
.p-lineup__feature-main {
grid-column: 1;
}
/* 枠線はSPと共通（上のブロックで全周指定済み）。
ここは列の割り当てと、3カラム幅に合わせた左右paddingだけ。 */
.p-lineup__feature-detail {
grid-column: 2;
padding: var(--space-md);
}
/* ---- 商品名の通し番号 ------------------------------------ */
/* PCでは h4 が 18px（lg）になるので、番号も1段上げて 22px（xl）にする */
.p-lineup__number {
font-size: var(--font-size-xl);
}
/* ---- 用途例のアイコン ------------------------------------ */
/* 1カラム幅では 24px だと文字に対して大きく見えるため 18px に落とす */
.p-lineup__use-icon {
width: 1.125rem;
height: 1.125rem;
}
/* ---- サンプル写真 ---------------------------------------- */
/* PR詳細の中では優先度が最も低い情報。カラム幅いっぱいまで
広げず、2枚を含む領域を右カラム内容幅の88%に抑える。
比率（16/9）はそのままで横幅だけが縮む。 */
.p-lineup__sample-list {
max-width: 88%;
}
}
/* ================================================================
base.css へ追加を推奨する変数
（現状は各セクションCSSのブロックスコープで個別に定義している）
----------------------------------------------------------------
--radius-circle: 50%;
円形アイコン枠用。人気No.1バッジ廃止に伴い .p-lineup では
使わなくなったが、p-customize.css が同名で独自定義している。
--border-width-hairline: 1px;
細い区切り罫線の太さ。カタログ型UIの基準として共通化したい。
--color-primary-tint: #EFEDF9;
primary の淡いティント。カンプのサンプル写真ボックスの
枠線・背景はごく淡い紫だが、現状 base.css に該当色がないため
--color-border（暖色グレー）で代用している。
追加されればカンプにより近づけられる。
================================================================ */
/* ============================================================
Customize（業務に合わせたカスタマイズ）
------------------------------------------------------------
01〜05の図解はPC/SPで別構造。どちらもHTMLに置き、display だけで出し分ける。
PC : 1枚画像（customize-01-05.webp）
SP : 全体図（customize-sp-01-05.webp）＋個別画像（customize-sp-01〜05.webp）
図版はすべて画像素材で、HTML/CSSでは描き直さない。
============================================================ */
/* ================================================================
1. ブロック内トークン / セクション枠
================================================================ */
.p-customize {
/* base.css に該当する変数がない値はここに集約し、
px がルール内に散らばらないようにしている。 */
--hairline: 1px; /* 区切り罫線の太さ */
--radius-circle: 50%; /* 円形（CTAアイコン枠用） */
padding-block: var(--section-space);
background-color: var(--color-bg-sub);
}
/* ================================================================
2. 上段：01〜05 のカスタマイズ図解
PC＝1枚画像 ／ SP＝全体図＋01〜04の縦4段＋05の全幅。
両方をHTMLに置き、ここで表示を切り替える（JSでの出し分けはしない）。
================================================================ */
/* ---- PC用：1枚画像（SPでは非表示） --------------------------- */
.p-customize__main-visual-wrap {
display: none;
}
.p-customize__main-image {
width: 90%;
/* 元画像の縦横比を保つ。トリミングしないので object-fit は使わない */
height: auto;
background-color: transparent; /* base.css の img 地色を打ち消す */
margin: 0 auto;
}
/* ---- SP用：見出し直下の全体図（PCでは非表示） ---------------- */
/* 番号バッジ入りのカレンダー全体図。下の01〜04の番号と対応する。
トリミングすると番号や誌面が読めなくなるため、
object-fit は使わず元画像の比率のまま表示する。 */
.p-customize__sp-visual {
display: block;
}
.p-customize__sp-visual-image {
width: 100%;
height: auto;
background-color: transparent; /* base.css の img 地色を打ち消す */
}
/* ---- SP用：01〜05（PCでは非表示） --------------------------- */
/* カード化はせず、1カラムを細い横罫線で区切るだけにする
（下段06〜09と同じ考え方。白箱・角丸・影は使わない）。
01〜04は縦4段。05（PRスペース）だけ全幅の縦積みのまま。 */
.p-customize__sp-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
margin-top: var(--space-md);
}
/* 01〜04は項目の内部を左テキスト／右画像の2カラムにして、1項目の高さを抑える。
ラッパーを足さずに済むよう grid-template-areas で配置している。
05（全幅）は下で display:block に戻すため、項目を増やす場合も05は必ず最後に置く。 */
.p-customize__sp-item:not(:last-child) {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
grid-template-areas:
"title media"
"description media";
align-content: start;
column-gap: var(--space-sm);
padding-block: var(--space-md);
}
.p-customize__sp-item:not(:last-child) .p-customize__sp-title {
grid-area: title;
}
.p-customize__sp-item:not(:last-child) .p-customize__sp-description {
grid-area: description;
}
/* 画像は右カラムの中で上下中央。縦積み用の上余白はここで打ち消す */
.p-customize__sp-item:not(:last-child) .p-customize__sp-media {
grid-area: media;
align-self: center;
margin-top: 0;
}
/* 03（ミニカレンダー掲載数）だけは1枚に3例（2ヶ月／1ヶ月／なし）が入っていて
縦の情報量が多く、3fr では各例の誌面が潰れて読めない。
この項目だけ画像側を広げて 65:35 にする。
縦積みへは戻さず、左テキスト＋右画像という構造は他と揃える。 */
.p-customize__sp-item:nth-child(3) {
grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
}
/* 05（PRスペース）は横長画像のため、従来どおり全幅の縦積み。
01〜04の7:3レイアウトは適用しない。 */
.p-customize__sp-item:last-child {
display: block;
padding-block: var(--space-md);
}
/* 項目間は細い横罫線だけで区切る（旧2×2の中央縦罫線は不要になった） */
.p-customize__sp-item + .p-customize__sp-item {
border-top: var(--hairline) solid var(--color-border);
}
/* 番号＋見出し。見出しはゴシック（h4はbodyから継承）、
番号だけ装飾として明朝にする。
文字サイズは 06〜09 の .p-customize__title と同じ --font-size-md。 */
.p-customize__sp-title {
display: flex;
align-items: baseline;
gap: var(--space-xs);
font-family: var(--font-family-base);
font-size: var(--font-size-md);
font-weight: 500;
color: var(--color-text-main);
}
.p-customize__sp-number {
flex: 0 0 auto;
font-family: var(--font-family-serif);
font-size: var(--font-size-lg);
font-weight: 500;
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-base);
color: var(--color-primary);
}
/* 縦4段になったぶん、行間は本文標準（1.8）より詰めて
1項目あたりの高さを抑える。文字サイズは下げない。 */
.p-customize__sp-description {
margin-top: var(--space-xs);
font-size: var(--font-size-sm);
line-height: var(--line-height-heading);
color: var(--color-text-sub);
text-wrap: pretty;
}
/* 05（全幅の縦積み）でだけ効く上余白。
01〜04はグリッド配置なので上で 0 に打ち消している。 */
.p-customize__sp-media {
margin-top: var(--space-sm);
}
/* 図版は素材ごとに縦横比が違う（05のPRスペースだけ極端な横長）ため、
枠の比率は固定せず、元画像の比率のまま表示する。
トリミングしないので object-fit は使わない。 */
.p-customize__sp-media img {
width: 100%;
height: auto;
background-color: transparent; /* base.css の img 地色を打ち消す */
}
/* ================================================================
3. 中見出し「さらに広がるカスタマイズ」
左右に細い罫線を伸ばした水平構成
================================================================ */
.p-customize__more {
margin-top: var(--space-2xl);
}
.p-customize__more-title {
display: flex;
align-items: center;
gap: var(--space-md);
font-size: var(--font-size-lg);
font-weight: 500;
color: var(--color-text-main);
}
/* flex-shrink を 0、基準幅を --decor-line-width にすることで、
狭い幅でも罫線が 0px に潰れず必ず表示される（テキスト側が折り返す） */
.p-customize__more-title::before,
.p-customize__more-title::after {
content: "";
flex: 1 0 var(--decor-line-width);
height: var(--hairline);
background-color: var(--color-text-sub);
}
/* ================================================================
4. 下段：06〜09 の4項目
カードではなく、1つのグリッドを細い罫線で静かに分割する
================================================================ */
.p-customize__grid {
display: grid;
grid-template-columns: 1fr;
margin-top: var(--space-lg);
}
/* 背景・角丸・影を持たせず、カードに見せない */
.p-customize__item {
padding-block: var(--space-lg);
}
/* SPは項目間を横罫線で区切る（PCでは打ち消して縦横の罫線に切り替える） */
.p-customize__item + .p-customize__item {
border-top: var(--hairline) solid var(--color-border);
}
/* ---- 番号＋見出し -------------------------------------------- */
/* 見出しはゴシック体（base.css の h4 もゴシックだが意図を明示している）。
番号だけは装飾番号の共通ルールに合わせて明朝体にする。 */
.p-customize__title {
display: flex;
align-items: baseline;
gap: var(--space-sm);
font-family: var(--font-family-base);
font-weight: 500;
color: var(--color-text-main);
}
.p-customize__number {
flex: 0 0 auto;
font-family: var(--font-family-serif);
font-size: var(--font-size-xl);
font-weight: 500;
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-base);
color: var(--color-primary);
}
/* ---- 画像 ----------------------------------------------------- */
.p-customize__media {
margin-top: var(--space-md);
}
/* 枠の比率は素材（customize-06〜09.webp ＝ 900×400）と同じ 9:4。
比率がずれると contain で上下にレターボックスが出るので、素材差し替え時はこの値も合わせる。 */
.p-customize__placeholder,
.p-customize__media img {
width: 100%;
aspect-ratio: 9 / 4;
}
.p-customize__placeholder {
background-color: var(--color-bg-muted);
}
/* 既定は contain。09 年間カレンダー・10 海外仕様のような図版は
トリミングすると内容が読めなくなるため、切らずに収める。 */
.p-customize__media img {
height: 100%;
object-fit: contain;
}
.p-customize__description {
margin-top: var(--space-md);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
color: var(--color-text-sub);
}
/* ================================================================
5. 最下部：相談CTA
横長の白いエリア。強い影は付けない
================================================================ */
.p-customize__cta {
display: flex;
flex-direction: column;
gap: var(--space-md);
margin-top: var(--space-2xl);
padding: var(--space-lg);
border-radius: var(--radius-md);
background-color: var(--color-white);
}
.p-customize__cta-content {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.p-customize__cta-title {
font-family: var(--font-family-serif);
font-size: var(--font-size-xl);
font-weight: 500;
line-height: var(--line-height-heading);
color: var(--color-text-main);
}
.p-customize__cta-text {
margin-top: var(--space-xs);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
color: var(--color-text-sub);
}
/* .c-btn の色・hover・角丸は base.css 側。ここでは幅と矢印のみ */
/* SPは押しやすいよう幅いっぱい（PCでは内容幅に戻す） */
.p-customize__cta-button {
flex: 0 0 auto;
width: 100%;
}
.p-customize__cta-button::after {
content: "\2192"; /* → */
line-height: 1;
}
/* ================================================================
6. レスポンシブ（PC差分：min-width 768px）
SPの値は上記で既定済み。ここではPCの差分のみ記述する。
================================================================ */
@media (min-width: 768px) {
/* ---- 上段：PCは1枚画像だけを表示 ------------------------- */
/* 引き出し文字が読めるよう、コンテナのgutter分だけ外へ広げて 1080→1160px で見せる。
画面が狭いときは広げる量が自動的に0へ近づくので、左右の安全余白が消えない。 */
.p-customize__main-visual-wrap {
display: block;
margin-inline: calc(
min(
var(--container-gutter),
max(0px, (100vw - var(--container-max-width)) / 2)
) * -1
);
}
/* SP専用の全体図・01〜05はPCでは出さない（PCは上の1枚画像が担当） */
.p-customize__sp-visual,
.p-customize__sp-list {
display: none;
}
/* ---- 中見出し -------------------------------------------- */
/* 上段を主役にするため、区切り以降の余白を抑える */
.p-customize__more {
margin-top: var(--space-xl); /* 80px → 48px */
}
.p-customize__more-title {
font-size: var(--font-size-xl);
}
/* ---- 06〜09：2カラム×2段 --------------------------------- */
.p-customize__grid {
grid-template-columns: repeat(2, 1fr);
margin-top: var(--space-lg); /* 48px → 32px */
}
.p-customize__item {
padding: var(--space-xl);
}
/* SPの横罫線を一旦解除し、下の2ルールで縦横の罫線に組み直す */
.p-customize__item + .p-customize__item {
border-top: none;
}
/* 中央の縦罫線：右列（2・4番目）の左側 */
.p-customize__item:nth-child(even) {
border-left: var(--hairline) solid var(--color-border);
}
/* 上下段の間の横罫線：下段（3・4番目）の上側 */
.p-customize__item:nth-child(n + 3) {
border-top: var(--hairline) solid var(--color-border);
}
/* ---- 相談CTA：左アイコン／中央テキスト／右ボタン --------- */
/* 左（説明）65% ／ 右（ボタン）35% の比率。
flex-basis で比率を決め、gap 分は両者から均等に引く。 */
.p-customize__cta {
flex-direction: row;
align-items: center;
gap: var(--space-xl);
padding: var(--space-xl);
}
.p-customize__cta-content {
flex: 0 1 65%;
flex-direction: row;
align-items: center;
}
.p-customize__cta-button {
flex: 0 1 35%;
width: auto;
padding:var(--space-sm) var(--space-sm);
}
}
/* ================================================================
7. Tablet差分（768〜1279px）
このファイルは原則モバイルファースト（min-width）だが、
ここはSP・PCを変えずにTabletだけ詰めたいので範囲指定にしている。
================================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
/* 横並びになるぶん内側の余白は詰め、帯を低く抑える */
.p-customize__cta {
padding: var(--space-md);
}
}
/* ============================================================
Cases（制作事例）
------------------------------------------------------------
カードUIにせず、写真と文章を直接置く編集レイアウト。
SP＝1カラム縦積み ／ PC＝横3カラム（件数が増えても自然に折り返す）。
============================================================ */
/* ================================================================
1. ブロック内トークン / セクション枠
================================================================ */
.p-cases {
/* base.css に該当する変数がない値はここに集約し、
px がルール内に散らばらないようにしている。 */
--hairline: 1px; /* 詳細行を区切る細い横罫線 */
--decor-line-height: 2px; /* 番号上の装飾罫の太さ */
padding-block: var(--section-space);
/* 次の「紙と印刷の品質」(bg-sub) との交互配色を維持する */
background-color: var(--color-bg-main);
}
/* ================================================================
2. 事例一覧・事例ブロック
================================================================ */
/* SP：事例同士を縦余白で分ける（PCではグリッドのgapに置き換わる） */
.p-cases__item + .p-cases__item {
margin-top: var(--space-xl);
}
/* SP・PCとも 番号＋見出し → 画像 → 詳細 の自然な文書順のまま縦に流す。
HTML の並び順がそのまま読み順になるので order 指定は不要。
背景・枠線・影・hover を持たせず、カードに見せない。 */
/* ================================================================
3. 番号と見出し
================================================================ */
/* 番号の下に置く短いブランドカラーの横線（::after なので番号のあと） */
.p-cases__number::after {
content: "";
display: block;
width: var(--decor-line-width);
height: var(--decor-line-height);
margin-bottom: var(--space-xs);
background-color: var(--color-primary);
}
/* サイズはSP・PC共通で 2xl。3カラム化後の1カラム幅（約339px）では
3xl だと番号だけが強く出すぎるため、PCでも上げない。 */
.p-cases__number {
font-family: var(--font-family-serif);
font-size: var(--font-size-2xl);
font-weight: 500;
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-heading);
color: var(--color-primary);
}
/* 見出しの明朝体・サイズは base.css の h3 を使用。ここでは余白のみ。
3カラムでは2〜3行に折り返る前提で、文字は小さくしない。 */
.p-cases__heading {
margin-top: var(--space-xs);
}
/* 業種とタイトルの区切り。テキストではなく装飾として挿入し、
ACFで業種・タイトルを別フィールドにしてもそのまま使える。 */
.p-cases__industry::after {
content: "｜";
color: var(--color-text-sub);
}
/* ================================================================
4. 画像
================================================================ */
.p-cases__media {
margin-top: var(--space-md);
}
/* 実画像に差し替えても枠が変わらないよう、
プレースホルダーと img に同じ寸法規則を当てている。
固定heightは使わず aspect-ratio で3事例の比率・高さを統一する。 */
.p-cases__placeholder,
.p-cases__media img {
width: 100%;
aspect-ratio: 16 / 9;
}
/* 画像未配置でも高さが 0 にならないよう、空の面として見せる */
.p-cases__placeholder {
background-color: var(--color-bg-muted);
}
.p-cases__media img {
height: 100%;
object-fit: cover;
}
/* ================================================================
5. 課題／変更／用途
カードのような囲みは使わず、行間の細い横罫線だけで区切る
================================================================ */
.p-cases__details {
margin-top: var(--space-md);
}
/* 行と行の間だけに罫線を引く（最終行の下には引かない） */
.p-cases__detail + .p-cases__detail {
border-top: var(--hairline) solid var(--color-border);
}
.p-cases__text {
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
color: var(--color-text-main);
}
/* ================================================================
5-1. SP専用：番号と見出しを横並びにする（max-width 767px）
----------------------------------------------------------------
1カラムでは番号と見出しを縦に積むと余白ばかりが増えるため、
SPだけ左右に並べる。768px以上の3カラムでは縦積みのまま。
================================================================ */
@media (max-width: 767px) {
.p-cases__header {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
}
.p-cases__number {
flex: 0 0 auto;
}
/* 見出しは残り幅いっぱい。min-width:0 は長い見出しが
はみ出さないようにするための指定（flexの既定は内容幅）。 */
.p-cases__heading {
flex: 1;
min-width: 0;
margin-top: 0;
}
}
/* ================================================================
6. レスポンシブ（PC差分：min-width 768px）
SPの値は上記で既定済み。ここではPCの差分のみ記述する。
================================================================ */
@media (min-width: 768px) {
/* ---- 3事例を横3カラムに ---------------------------------- */
/* 事例を縦に積むのをやめ、セクションの縦幅を大きく圧縮する。
列は均等。件数が増えても repeat(3, ...) のまま次段へ折り返すので、
ACF等で4件・6件になってもCSS変更は不要。
列間より行間を広く取り、折り返した際に段の切れ目が分かるようにする。 */
.p-cases__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--space-lg);
row-gap: var(--space-2xl);
}
/* 事例間の余白はグリッドの gap が担うため、SPの縦余白は解除する */
.p-cases__item + .p-cases__item {
margin-top: 0;
}
/* 見出しの行数が事例ごとに違っても、画像と詳細の縦位置を揃える。
※ .p-cases__item の直下が3要素であることが前提（ACF等で増減する場合は span も合わせる）。
subgrid 未対応ブラウザでは各カラムが個別の高さで流れるだけで破綻しない。 */
@supports (grid-template-rows: subgrid) {
.p-cases__item {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
/* 3ブロック間の間隔は各要素の margin-top が持つため、
親の row-gap（段の間隔）はここでは効かせない */
row-gap: 0;
}
}
/* 番号と見出しの間だけ、SPよりわずかに空ける */
.p-cases__heading {
margin-top: var(--space-sm);
}
}
/* ============================================================
Quality（紙と印刷の品質）
------------------------------------------------------------
セクションタイトル（.c-section-title）を2カラムの右側に置くため、
.p-quality__heading のスコープ内でサイズと余白だけを調整している。
============================================================ */
/* ================================================================
1. セクション枠
================================================================ */
/* 4特徴の区切り罫線・加工ラベルの装飾罫を廃止したため、
このセクション独自のトークン（--hairline / --decor-line-short）は不要になった。
直値が必要な箇所がなく、すべて base.css の変数で足りている。 */
.p-quality {
padding-block: var(--section-space);
/* ページ後半は bg-main / bg-sub を交互に敷いてセクションの境界を示す。
制作事例(main) → ここ(sub) → ご注文の流れ(main) → 基本情報(sub) → FAQ(main)。
背景は section 要素全体に敷き、画面左右端まで色が続くようにする。 */
background-color: var(--color-bg-light);
}
/* ================================================================
2. 全体レイアウト
SPは1カラム（写真 → 英字ラベル → 見出し → 導入文 → 特徴1 → 特徴2）。
HTMLの並び順がそのまま読み順になるので order 指定は不要。
================================================================ */
/* ================================================================
3. メインビジュアル
アラベール紙の質感を見せる、このセクションの主役
================================================================ */
/* 写真は他のコンテンツと同じ左右位置に揃える。
SPでも .l-container の内側で止め、画面端まではみ出させない。 */
/* 比率はSP・PCとも素材（quality-kv.webp ＝ 1200×600）と同じ 2:1。固定heightは使わない。 */
.p-quality__main-media .p-quality__placeholder,
.p-quality__main-media img {
width: 100%;
aspect-ratio: 2 / 1;
}
/* 画像未配置でも高さが 0 にならないよう、空の面として見せる */
.p-quality__placeholder {
background-color: var(--color-bg-muted);
}
/* 高さは aspect-ratio から決まるので auto。
枠と画像の比率差は cover でトリミングする（変形はさせない）。 */
.p-quality__main-media img {
height: auto;
object-fit: cover;
}
/* ================================================================
4. セクションタイトル（右カラム内）
.c-section-title を --left で左寄せにして流用する。
書体・色・字間は base.css のままで、ここでは
「カラム幅に収まるサイズ」と「特徴との間隔」だけを決める。
================================================================ */
/* 共通コンポーネントの下余白（SP 48px / PC 80px）は
セクション見出し用の間隔なので、カラム内では詰める。 */
.p-quality__heading {
margin-bottom: var(--space-lg);
}
/* 共通のセクションタイトル（SP 28px / PC 40px）のままでは
右カラム幅（PC実測 約495px）で不自然に折り返すため、
1段下げて2行に収まるサイズにする。 */
.p-quality__heading .c-section-title__ja {
font-size: var(--font-size-xl);
/* 「アラベール紙」の途中で改行されないよう、行末の調整も併用する */
text-wrap: pretty;
}
/* 導入文は最終行に2〜3文字だけ残りやすいため、行末を整える */
.p-quality__heading .c-section-title__lead {
text-wrap: pretty;
}
/* ================================================================
5. 紙の2つの特徴
カード・枠線・背景を持たせず、縦に並べる。
見出し左のチェックは疑似要素（画像素材を増やさない）。
================================================================ */
.p-quality__features {
display: grid;
gap: var(--space-md);
}
/* 見出しと本文の左端を揃えるため、チェック分のインデントは
見出し・本文の双方に同じ値（--space-md）で入れる。 */
.p-quality__feature-title {
position: relative;
padding-left: var(--space-md);
font-size: var(--font-size-md);
/* 明朝体は同じ太さでも細く見えるため、本文（400）との差を
出すために 600 にする（Noto Serif JP は 600 まで読み込み済み）。 */
font-weight: 600;
line-height: var(--line-height-heading);
color: var(--color-text-main);
}
/* アクセントカラーはサイト既存のブランドカラーのみを使う */
.p-quality__feature-title::before {
content: "\2713"; /* ✓ */
position: absolute;
left: 0;
color: var(--color-primary);
}
/* 説明はゴシック体。紫は使わず、落ち着いたサブ色にする */
.p-quality__feature-text {
margin-top: var(--space-xs);
padding-left: var(--space-md);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
color: var(--color-text-sub);
text-wrap: pretty;
}
/* ================================================================
6. レスポンシブ（PC差分：min-width 768px）
SPの値は上記で既定済み。ここではPCの差分のみ記述する。
================================================================ */
@media (min-width: 768px) {
/* ---- 左：メイン写真 ／ 右：情報 の2カラム ---------------- */
/* 左を大きく取り、メイン写真をセクションの主役として見せる。
写真は右カラムの高さには合わせず 2:1 のまま上端で揃える
（stretch のままだと写真が右カラムの高さまで縦に伸びてしまう）。 */
.p-quality__content {
display: grid;
grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
column-gap: var(--space-xl);
align-items: start;
}
/* 写真の比率（2:1）はSPと共通のため、ここでの上書きは不要。 */
/* ---- セクションタイトル ---------------------------------- */
/* SP専用の改行を解除し、カンプどおりの2行構成に戻す */
.p-quality__title-br {
display: none;
}
/* ---- 2つの特徴：カラム幅に余裕が出るぶん文字を戻す ------- */
.p-quality__feature-title {
font-size: var(--font-size-lg);
}
}
/* ============================================================
Order（ご注文の流れ／ご注文の基本情報）
------------------------------------------------------------
流れ 5工程が1本につながった帯（薄紫・斜めの区切り）。帯はPC 1280px〜のみで、
1279px以下は「左＝番号＋アイコン／右＝見出し＋本文」の縦リスト。
基本情報 5枚の独立カード（白ベース・細罫）
============================================================ */
/* ================================================================
1. ご注文の流れ
================================================================ */
/* セクション枠。
.l-section は使用していない。2セクションを連続配置するため、
両方に上下 --section-space を持たせると間隔が空きすぎる。
このセクションの padding-bottom が、下のセクションとの間隔を兼ねる。 */
.p-order-flow {
padding-block: var(--section-space);
background-color: var(--color-bg-main);
/* 固定ヘッダーがある場合のアンカー着地位置（ヘッダー高に合わせて調整） */
scroll-margin-block-start: var(--space-lg);
/* このブロック内で使う配色・斜角をローカル変数化。
配色変更はここ1か所で完結する。
薄紫は base.css の --color-primary-soft を使用。
区切り線をより淡くしたい場合は --flow-line だけ差し替える。 */
--flow-bg: var(--color-primary-soft);
--flow-line: var(--color-primary);
--flow-skew: 12deg;
}
/* ---- ステップ一覧 -------------------------------------------- */
/* SP：縦方向のステップリスト。
gap がそのままステップ間コネクターの長さになる。 */
.p-order-flow__steps {
display: grid;
gap: var(--space-xl);
}
/* SP：各ステップが独立した薄紫ブロック。
PCでは枠線と背景を外し、帯の一部になる。 */
.p-order-flow__step {
position: relative;
padding: var(--space-lg) var(--space-md);
border: 1px solid var(--flow-line);
border-radius: var(--radius-md);
background-color: var(--flow-bg);
text-align: center;
}
/* ステップ間の進行表現：::after＝細い縦ライン ／ ::before＝下向きの矢印。
SP（767px以下）は矢印を出さず縦線だけ。PCでは同じ疑似要素を斜めの区切り線に作り替える。 */
.p-order-flow__step::before,
.p-order-flow__step::after {
content: "";
position: absolute;
left: 50%;
bottom: calc(var(--space-xl) * -1);
}
.p-order-flow__step::after {
width: 1px;
height: var(--space-xl);
background-color: var(--flow-line);
transform: translateX(-50%);
}
.p-order-flow__step::before {
width: 7px;
height: 7px;
border-right: 1px solid var(--flow-line);
border-bottom: 1px solid var(--flow-line);
transform: translate(-50%, 0) rotate(45deg);
}
/* 最後の工程の先には進行表現を出さない（SP・PC共通） */
.p-order-flow__step:last-child::before,
.p-order-flow__step:last-child::after {
content: none;
}
/* ---- ステップ内部 -------------------------------------------- */
/* 既定（768px以上で使う値）は「番号 → アイコン → 見出し → 本文」の
中央揃え縦積み。SPだけ 1-1. で左右2ブロックに組み替える。
.p-order-flow__visual / .p-order-flow__body のラッパーは
SPのグループ化専用で、768px以上では display:contents で透過させる。 */
.p-order-flow__number {
display: block;
font-family: var(--font-family-serif);
font-size: var(--font-size-2xl);
font-weight: 500;
line-height: 1;
letter-spacing: var(--letter-spacing-heading);
color: var(--color-primary);
}
/* アイコン領域。
後からSVGへ差し替えてもレイアウトが動かないよう、サイズを固定で確保する。 */
.p-order-flow__icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-block: var(--space-sm);
margin-inline: auto;
color: var(--color-primary); /* SVG側を currentColor にすると連動する */
}
.p-order-flow__icon > svg,
.p-order-flow__icon > img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* 工程名。h3 だが本文系ゴシックで組む
（明朝の見出しは .c-section-title 側の役割） */
.p-order-flow__title {
font-family: var(--font-family-base);
font-size: var(--font-size-md);
font-weight: 500;
line-height: var(--line-height-heading);
color: var(--color-text-main);
}
/* text-wrap: balance で行長を揃え、末尾に1〜2文字だけ残る折り返しを防ぐ
（未対応ブラウザでは通常の折り返しになるだけで破綻しない） */
.p-order-flow__text {
margin-top: var(--space-xs);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
color: var(--color-text-sub);
text-wrap: balance;
}
/* HTMLの
は全幅で解除し、折り返しは text-wrap: balance に任せる
（SP・Tabletの本文幅にもPCの帯幅にも改行位置が合わないため）。
基本情報カード側（.p-order-info__text）の
は活かしている。 */
.p-order-flow__text br {
display: none;
}
/* ---- 帯下の補足 ---------------------------------------------- */
/* 本文よりわずかに目立たせる（本文色＋500）。ボタンにはしない。 */
.p-order-flow__note {
margin-top: var(--space-lg);
text-align: center;
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text-main);
text-wrap: balance; /* SPで最終行に1文字だけ残るのを防ぐ */
}
/* ================================================================
1-1. SP・Tablet：ステップ内を左右2ブロックにする（max-width 1279px）
----------------------------------------------------------------
縦積みのままだと1ステップが高くなりすぎるため、
「左＝番号＋アイコン ／ 右＝見出し＋本文」の横並びにして縦幅を詰める。
このファイルは原則モバイルファースト（min-width）だが、
「横一列の帯」になるのは1280px以上（PC）だけで、
それ未満はSP・Tabletとも同じ縦ステップリストのため、
max-width 側にまとめている。
================================================================ */
@media (max-width: 1279px) {
/* 中央揃えをやめて左寄せに。上下paddingも詰める */
.p-order-flow__step {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
text-align: left;
}
/* 左ブロック：番号の下にアイコン */
.p-order-flow__visual {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
}
/* 右ブロック。min-width:0 は長い工程名がはみ出さないための指定 */
.p-order-flow__body {
flex: 1;
min-width: 0;
}
/* 縦積み用の上下マージンは左ブロックの gap に置き換わるので解除。
横並びで幅が要るぶん、アイコンは 56px → 44px に少しだけ縮める。 */
.p-order-flow__icon {
width: 44px;
height: 44px;
margin-block: 0;
}
/* 見出しと本文の間隔も詰める */
.p-order-flow__text {
margin-top: 0;
}
/* ステップ間は矢印にせず、細い縦線だけでつなぐ。
縦線は ::after が担当しているので、矢印の先端（::before）だけ消す。 */
.p-order-flow__step::before {
content: none;
}
}
/* ================================================================
2. ご注文の基本情報
================================================================ */
/* 直前の .p-order-flow と背景色が変わるため、上側の余白はこのセクション自身で持つ。 */
.p-order-info {
padding-block: var(--section-space);
/* ページ後半の交互配色。直前の「ご注文の流れ」(bg-main) との境界を示す */
background-color:var(--color-bg-light);
/* フッターの #order-info リンクからの着地位置。
sticky ヘッダーに見出しが隠れないよう、他セクションと同じ値を持たせる */
scroll-margin-block-start: var(--space-lg);
}
/* SP：横2カラム。1カラムが約170pxと狭くなるため、カード間の余白・
カードの左右padding・本文サイズもSP向けに詰めている。 */
.p-order-info__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-xs);
}
/* 独立した情報カード。
フローの薄紫帯と区別するため、白ベース＋細罫＋小さめ角丸・影なし。
flex にしておくとグリッドの伸縮に追随し、5枚の高さが揃う。 */
/* SPの2カラムは1枚167px。左右paddingを16pxにすると本文幅が133pxとなり
「税込270円／部〜」（148px）が折り返すため、PC同様8pxに詰める。 */
.p-order-info__item {
display: flex;
flex-direction: column;
padding: var(--space-md) var(--space-xs);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background-color: var(--color-white);
text-align: center;
}
.p-order-info__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: var(--space-sm);
margin-inline: auto;
color: var(--color-primary);
}
.p-order-info__icon > svg,
.p-order-info__icon > img {
width: 100%;
height: 100%;
object-fit: contain;
}
.p-order-info__label {
font-family: var(--font-family-base);
font-size: var(--font-size-md);
font-weight: 500;
line-height: var(--line-height-heading);
color: var(--color-text-main);
}
/* 項目名の下に置く短いブランドカラーの罫 */
.p-order-info__label::after {
content: "";
display: block;
width: 24px;
height: 1px;
margin: var(--space-xs) auto 0;
background-color: var(--color-primary);
}
/* 主要情報。数値と単位をインライン要素で並べ、ベースラインを揃える */
.p-order-info__value {
margin-top: var(--space-sm);
font-size: var(--font-size-lg);
font-weight: 500;
line-height: var(--line-height-heading);
color: var(--color-text-main);
}
/* 判断材料になる数値を最も強く見せる。
SPの2カラムでは360px級の端末で「税込270円／部〜」が折り返すため、
--font-size-xl 〜 --font-size-2xl の範囲で画面幅に追従させる。 */
.p-order-info__number {
font-size: clamp(var(--font-size-xl), 6.4vw, var(--font-size-2xl));
font-weight: 500;
letter-spacing: 0.01em;
}
/* SPの2カラムでは「税込270円／部〜」が1行に収まらないため、
単位だけ1段小さくする（768px以上で16pxに戻す） */
.p-order-info__unit {
font-size: var(--font-size-sm);
font-weight: 500;
}
.p-order-info__text {
margin-top: var(--space-sm);
font-size: 0.78rem;
line-height: var(--line-height-heading);
color: var(--color-text-sub);
text-wrap: balance;
}
/* SPの2カラムは本文幅が約130pxしかなく、PC想定の改行位置（
）を残すと
かえって行数が増えるため解除する。768px以上で復帰させる。 */
.p-order-info__text br {
display: none;
}
.p-order-info__note {
margin-top: var(--space-xs);
font-size: var(--font-size-xs);
line-height: var(--line-height-tight);
color: var(--color-text-sub);
text-wrap: balance;
}
/* ---- 見積もり補足・CTA --------------------------------------- */
.p-order-info__cta {
margin-top: var(--space-lg);
text-align: center;
}
/* .c-btn は再定義せず、幅と矢印だけをこのブロック側で足す */
.p-order-info__btn {
position: relative;
width: 100%;
max-width: 400px;
}
/* ボタン右端の矢印。ラベルを中央に保つため絶対配置にしている */
.p-order-info__btn::after {
content: "";
position: absolute;
top: 50%;
right: var(--space-md);
width: 7px;
height: 7px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
/* ================================================================
3. レスポンシブ（タブレット差分：min-width 768px）
SPの値は上記で既定済み。ここでは差分のみを記述する。
================================================================ */
@media (min-width: 768px) {
/* ---- ご注文の流れ --------------------------------------- */
/* 帯にするのはPC（1280px〜）だけ。768〜1279pxは1工程が痩せて説明が4行に割れるため、
SPと同じ縦ステップリスト（左＝番号＋アイコン／右＝テキスト）のまま幅だけ絞る。 */
.p-order-flow__steps {
max-width: 480px;
margin-inline: auto;
}
.p-order-flow__note {
margin-top: var(--space-xl);
font-size: var(--font-size-md);
}
/* ---- ご注文の基本情報：独立カードの多カラム化 ------------- */
/* カラム幅に余裕が出るので、単位サイズとカンプの改行位置を戻す */
.p-order-info__unit {
font-size: var(--font-size-md);
}
.p-order-info__text br {
display: inline;
}
/* auto-fit により、コンテナ幅に応じて 3列 → 4列 → 5列 と追従する。
コンテナが最大幅（1080px）に達する 1160px 以上でカンプどおりの5列、
それ未満は列数を減らしてカード幅を確保する（5列のまま縮小しない）。 */
.p-order-info__grid {
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: var(--space-sm);
}
/* 5列時は1カラムが約200pxと狭い。左右paddingを詰めて本文幅を確保しないと、
禁則処理で説明文・注記が1行余分に折り返し、カード高さが不揃いになる
（カンプもカード幅いっぱいに近い組み） */
.p-order-info__item {
padding: var(--space-sm) var(--space-xs);
}
.p-order-info__value {
font-size: clamp(var(--font-size-md), 1.5vw, var(--font-size-lg));
}
.p-order-info__number {
font-size: clamp(var(--font-size-xl), 2.4vw, var(--font-size-2xl));
}
.p-order-info__cta {
margin-top: var(--space-xl);
}
}
/* ================================================================
4. レスポンシブ（PC差分：min-width 1280px）
ご注文の流れを「5工程が一続きの帯」に切り替える。
帯は横一列が前提のレイアウトのため、必要な幅が確保できる
1280px 以上（＝ヘッダー・Heroと同じPC開始幅）でのみ適用する。
1279px以下は上の「SPと同じ縦ステップリスト」が担当する。
================================================================ */
@media (min-width: 1280px) {
/* grid-auto-flow: column により、工程数が増減しても横一列を維持する
（ACF等で工程を追加してもCSS変更が不要）。
枠線・薄紫背景・角丸は「帯」であるこの要素が持つ。 */
.p-order-flow__steps {
max-width: none; /* タブレットで絞った幅を解除 */
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 0;
border: 1px solid var(--flow-line);
border-radius: var(--radius-md);
background-color: var(--flow-bg);
overflow: hidden; /* 斜め線が角丸からはみ出さないようにする */
}
/* 帯の内側は全体が薄紫。各ステップを白背景に戻さない。 */
.p-order-flow__step {
padding: var(--space-lg) var(--space-sm);
border: none;
border-radius: 0;
background-color: transparent;
}
/* 各ステップ右端の斜め区切り。
::before ＝ 上半分（＼）／ ::after ＝ 下半分（／）で、
右へ進む「＞」形の境界をつくる。 */
.p-order-flow__step::before,
.p-order-flow__step::after {
left: auto;
right: 0;
width: 1px;
height: 50%;
border: none;
background-color: var(--flow-line);
}
.p-order-flow__step::before {
top: 0;
bottom: auto;
transform: skewX(var(--flow-skew));
}
.p-order-flow__step::after {
top: auto;
bottom: 0;
transform: skewX(calc(var(--flow-skew) * -1));
}
/* 数字・工程名は、カラム幅が狭い 1024〜1160px 域で自然に縮むよう clamp で可変。
ブレイクポイントをこれ以上増やさないための措置。 */
.p-order-flow__number {
font-size: clamp(var(--font-size-2xl), 3.2vw, var(--font-size-3xl));
}
.p-order-flow__icon {
width: 64px;
height: 64px;
margin-block: var(--space-md);
}
.p-order-flow__title {
font-size: clamp(var(--font-size-sm), 1.4vw, var(--font-size-md));
}
.p-order-flow__text {
font-size: var(--font-size-xs);
}
}
/* ============================================================
FAQ（よくあるご質問）
------------------------------------------------------------
開閉の状態源は質問ボタンの aria-expanded だけ（状態クラスは使わない）。
CSSは「質問ボタンの隣接要素＝回答」を前提にしているため、
ボタンを別要素で囲む場合は隣接セレクタの見直しが必要。
============================================================ */
/* ================================================================
1. セクション枠 / ブロック内トークン
================================================================ */
/* 直前のセクションが padding-bottom を持つ場合は、
ここの padding-top を落として調整する。 */
.p-faq {
padding-block: var(--section-space);
background-color: var(--color-bg-main);
/* 固定ヘッダーがある場合のアンカー着地位置（ヘッダー高に合わせて調整） */
scroll-margin-block-start: var(--space-lg);
/* Q. / A. のマーク幅と、マーク〜本文の間隔。
質問行と回答行で同じ値を使い、縦のラインを揃えるためトークン化する。 */
--faq-mark-width: 1.75rem;
--faq-mark-gap: var(--space-sm);
/* 罫線の端から内容までの左右余白（カンプでは罫線より内側にQ.と＋がある）。
質問行・回答行の両方で同じ値を使う。 */
--faq-row-padding: var(--space-xs);
/* ＋−アイコンの外形。線の太さは 1px 固定（罫線と同じ細さに合わせる） */
--faq-toggle-size: 14px;
}
/* ================================================================
2. リスト・項目
================================================================ */
/* 1問目の上にも罫線を引く（カンプ再現） */
.p-faq__list {
border-top: 1px solid var(--color-border);
}
.p-faq__item {
border-bottom: 1px solid var(--color-border);
}
/* ================================================================
3. 質問行
================================================================ */
/* Q. / 質問文 / ＋ の3カラム。
中央カラムを minmax(0, 1fr) にすることで、質問文が長くても
＋アイコンを押し出さず、必ず折り返す。 */
.p-faq__question {
display: grid;
grid-template-columns: var(--faq-mark-width) minmax(0, 1fr) auto;
align-items: center;
gap: var(--faq-mark-gap);
width: 100%;
min-height: 44px; /* タップ領域の下限 */
padding-block: var(--space-sm);
padding-inline: var(--faq-row-padding);
text-align: left;
}
.p-faq__question-mark {
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
font-weight: 700;
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-base);
color: var(--color-primary);
}
/* text-wrap: pretty は最終行に1〜2文字だけ残る折り返しを避けるための指定。
未対応ブラウザでは通常の折り返しになるだけで破綻しない。 */
/* 質問文はゴシック体（回答本文と揃える）。
明朝はセクションタイトル（.c-section-title__ja）側の役割に限定する。 */
.p-faq__question-text {
font-family: var(--font-family-base);
font-size: var(--font-size-md);
font-weight: 500;
line-height: var(--line-height-heading);
letter-spacing: var(--letter-spacing-base);
color: var(--color-text-main);
text-wrap: pretty;
transition: color var(--transition-base);
}
/* 操作できることが伝わる程度の控えめなホバー */
.p-faq__question:hover .p-faq__question-text {
color: var(--color-primary);
}
/* ---- ＋ / − アイコン ----------------------------------------- */
/* 2本の細線で構成し、開いたときに縦線を回転させて「−」にする。
画像・アイコンフォントは使用しない。 */
.p-faq__toggle {
position: relative;
width: var(--faq-toggle-size);
height: var(--faq-toggle-size);
}
.p-faq__toggle::before,
.p-faq__toggle::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: var(--color-primary);
}
/* 縦線。開いたときに 90deg → 0deg で横線に重なり「−」になる */
.p-faq__toggle::after {
transform: rotate(90deg);
transition: transform var(--transition-base);
}
.p-faq__question[aria-expanded="true"] .p-faq__toggle::after {
transform: rotate(0deg);
}
/* ================================================================
4. 回答と開閉アニメーション
================================================================ */
/* grid-template-rows を 0fr → 1fr で補間する方式。max-height の決め打ちが不要で、
回答の文字量が変わっても調整が要らない。
visibility も併せて切り替え、閉じている間は支援技術・タブ移動の対象から外す。 */
.p-faq__answer {
display: grid;
grid-template-rows: 0fr;
visibility: hidden;
transition:
grid-template-rows var(--transition-base),
visibility var(--transition-base);
}
.p-faq__question[aria-expanded="true"] + .p-faq__answer {
grid-template-rows: 1fr;
visibility: visible;
}
/* 行の高さが 0 のときに中身をはみ出させないための受け皿。
Q. と同じカラム構成にして A. の位置を質問行と揃える。
※ここに padding-bottom を置くと、行高が 0 のときも padding 分だけ
高さが残ってしまうため、下方向の余白は回答本文側で確保する。 */
.p-faq__answer-inner {
display: grid;
grid-template-columns: var(--faq-mark-width) minmax(0, 1fr);
gap: var(--faq-mark-gap);
min-height: 0;
overflow: hidden;
padding-inline: var(--faq-row-padding);
}
.p-faq__answer-mark {
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
font-weight: 700;
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
color: var(--color-primary);
}
/* 背景色・角丸は付けず、A.表記とインデントだけで質問と区別する。
padding-bottom は回答の下余白（閉じたときは一緒にクリップされる） */
.p-faq__answer-text {
padding-bottom: var(--space-md);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
color: var(--color-text-sub);
text-wrap: pretty;
}
/* 動きを減らす設定への配慮。
base.css の全称セレクタでも無効化されるが、このブロック単体で
完結させるため明示しておく。 */
@media (prefers-reduced-motion: reduce) {
.p-faq__answer,
.p-faq__toggle::after,
.p-faq__question-text {
transition: none;
}
}
/* ================================================================
5. レスポンシブ（PC差分：min-width 768px）
SPの値は上記で既定済み。ここではPCの差分のみを記述する。
================================================================ */
@media (min-width: 768px) {
.p-faq {
--faq-mark-width: 2.5rem;
--faq-mark-gap: var(--space-lg);
--faq-row-padding: var(--space-lg);
--faq-toggle-size: 16px;
}
.p-faq__question {
padding-block: var(--space-md);
}
.p-faq__question-mark,
.p-faq__answer-mark {
font-size: var(--font-size-md);
}
.p-faq__question-text {
font-size: var(--font-size-lg);
}
.p-faq__answer-text {
padding-bottom: var(--space-lg);
font-size: var(--font-size-md);
}
}
/* ============================================================
Final Contact（最終CTA＋お問い合わせフォーム）
------------------------------------------------------------
SP : 導入コピー（生成りのカード）の下にフォーム
PC : 左に導入コピー40% ／ 右にフォーム60%（1280px幅の内側で止める）
フォームは静的モック。WP化時に .p-final-contact__form の中身を
Contact Form 7 のショートコードへ置き換える前提で、コントロールの指定は
クラスだけでなく「.p-contact-form__field 内の input/select/textarea」でも効く。
============================================================ */
/* ================================================================
1. セクション枠
================================================================ */
.p-final-contact {
padding-block: var(--section-space);
background-color: var(--color-bg-sub);
/* 固定ヘッダーがある場合のアンカー着地位置（ヘッダー高に合わせて調整） */
scroll-margin-block-start: var(--space-lg);
}
/* 全体の最大幅。左右の安全余白はグリッドの両端カラム側で確保する
（4.〜5. のレスポンシブ 参照）。 */
.p-final-contact__inner {
display: grid;
gap: var(--space-xl);
max-width: var(--container-wide-max-width);
margin-inline: auto;
}
/* SP：導入コピーのまとまりを生成りのカードにする。
左右の安全余白は SP ではカードとフォームの各ブロック側に持たせる。 */
.p-final-contact__body {
margin-inline: var(--container-gutter);
padding: var(--space-xl) var(--space-md);
background-color: var(--color-bg-sub);
}
.p-final-contact__form {
margin-inline: var(--container-gutter);
}
/* ================================================================
2. テキスト
================================================================ */
.p-final-contact__label {
display: block;
margin-bottom: var(--space-xs);
font-family: var(--font-family-base);
font-size: var(--font-size-section-label);
font-weight: 700;
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-wide);
color: var(--color-primary);
}
/* SPは28pxだと1行12文字しか入らず、禁則処理で最終行に1文字だけ残るため22px。
768px以上で28px。1024px以上は左カラムが40%幅になるため28pxのままにする。 */
.p-final-contact__title {
font-size: var(--font-size-xl);
line-height: var(--line-height-heading);
color: var(--color-text-main);
text-wrap: pretty;
}
.p-final-contact__text {
margin-top: var(--space-md);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
color: var(--color-text-sub);
text-wrap: pretty;
}
/* SPは1行の文字数が足りず、PC想定の改行位置（
）を残すと
「も、」だけが1行になるなど半端な折り返しが出るため解除する。
768px以上で復帰させる（4.レスポンシブ 参照）。 */
.p-final-contact__title br,
.p-final-contact__text br {
display: none;
}
/* ================================================================
3. お問い合わせフォーム（.p-contact-form）
カード化は「白地＋1pxの罫線」までに留め、影は付けない。
項目ごとの枠線・背景も持たせない。
================================================================ */
.p-contact-form {
/* base.css に該当する変数がない値はここに集約し、
px がルール内に散らばらないようにしている。 */
--form-hairline: 1px; /* 罫線の太さ */
--form-privacy-height: 9rem; /* 個人情報ボックスの高さ（SP 144px） */
--form-submit-max-width: 25rem; /* 送信ボタンの最大幅（400px） */
padding: var(--space-md);
border: var(--form-hairline) solid var(--color-border);
border-radius: var(--radius-md);
background-color: var(--color-white);
}
/* 各ブロックの間隔はここで一括して決める。
CF7へ置き換えた後も