）。サイト制作実績はカテゴリ小見出し（.work-cat）でグループ化。
======================================================================== */
/* カテゴリ小見出し（サイト制作実績：コーポレートサイト／LP 等のグループ見出し） */
.page-works .work-cat {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-base);
font-weight: 700;
color: var(--color-text);
line-height: 1.4;
margin: 0 0 var(--space-5);
}
/* 見出し前の金の短い罫（works-head より小ぶり：階層を一段下げる） */
.page-works .work-cat::before {
content: "";
flex-shrink: 0;
width: 20px;
height: 2px;
background: var(--color-accent);
}
/* グループ間の余白（2つ目以降の小見出しは上に間隔を空ける） */
.page-works .work-grid + .work-cat {
margin-top: var(--space-12);
}
.page-works .work-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.page-works .work-card {
display: flex;
flex-direction: column;
border: 1px solid var(--color-line);
border-radius: 12px;
overflow: hidden;
background: var(--color-bg);
color: inherit; /* リンク化しても本文色を継承 */
text-decoration: none;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.page-works .work-card:hover {
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
border-color: var(--color-accent-weak); /* ホバーで淡金の縁を添える（クリック可能の合図） */
}
/* キーボード操作時のフォーカス可視化（リンクカードのため） */
.page-works .work-card:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* 上：実績画像（アスタの制作実績スクリーンショット） */
.page-works .work-card__photo {
aspect-ratio: 16 / 10;
background: var(--color-bg-subtle);
border-bottom: 1px solid var(--color-line);
overflow: hidden;
}
.page-works .work-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center; /* サイト上部（ヘッダー／ファースト）が見えるように */
display: block;
}
.page-works .work-card__body {
padding: var(--space-5) var(--space-6) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* 種別タグ（金の角枠） */
.page-works .work-card__tag {
align-self: flex-start;
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-accent);
border: 1px solid var(--color-accent);
border-radius: 5px;
padding: 0.22em 0.8em;
line-height: 1.5;
}
/* 名称と外部リンク指標を横並びにする行 */
.page-works .work-card__titlerow {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
/* 外部リンクアイコン（細線の金。別タブで公開先へ飛ぶことを示すUI記号）。
常時表示はせず、ホバー時にだけ控えめに浮かび上がらせる。
非ホバー時も領域は確保し、ホバーでレイアウトがずれないようにする。 */
.page-works .work-card__titlerow::after {
content: "";
flex-shrink: 0;
width: 16px;
height: 16px;
background-color: var(--color-accent);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
opacity: 0;
transform: translate(-2px, 2px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
/* ホバー（とキーボードフォーカス）でアイコンを控えめに表示 */
.page-works .work-card:hover .work-card__titlerow::after,
.page-works .work-card:focus-visible .work-card__titlerow::after {
opacity: 1;
transform: translate(0, 0);
}
/* 実績名称（社名・案件名・プロダクト名） */
.page-works .work-card__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-text);
margin: 0;
line-height: 1.45;
}
/* ========================================================================
自社プロダクト導入の効果（3指標）
======================================================================== */
/* 効果の前置き文（句点で改行・本文トーン）。見出し直下に置く */
.page-works .effect-intro {
font-size: var(--text-base);
color: var(--color-text);
opacity: 0.82;
line-height: 1.95;
margin: 0 0 var(--space-10);
}
.page-works .effect-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.page-works .effect-card {
display: flex;
align-items: flex-start;
gap: var(--space-4);
border: 1px solid var(--color-line);
border-radius: 12px;
padding: var(--space-6);
background: var(--color-bg);
}
.page-works .effect-card__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
color: var(--color-accent); /* 金の線アイコン */
}
.page-works .effect-card__icon svg {
width: 100%;
height: 100%;
display: block;
}
.page-works .effect-card__body {
min-width: 0;
}
.page-works .effect-card__label {
font-size: var(--text-sm);
color: var(--color-text);
opacity: 0.6;
margin: 0 0 var(--space-2);
line-height: 1.5;
}
.page-works .effect-card__value {
margin: 0 0 var(--space-2);
line-height: 1.2;
}
.page-works .effect-value__before {
color: var(--color-text);
opacity: 0.5;
font-size: var(--text-base);
}
.page-works .effect-value__arrow {
color: var(--color-accent);
font-size: var(--text-lg);
margin: 0 0.25em;
}
.page-works .effect-value__after {
color: var(--color-accent);
font-size: var(--text-2xl);
font-weight: 700;
}
/* 「約」「%」など強調数字に添える小さめの金テキスト（モック：数字が主役・前後は小さく） */
.page-works .effect-value__unit {
color: var(--color-accent);
font-size: var(--text-base);
font-weight: 600;
}
/* 「向上」＝強調数字のあとに続く金の中サイズ語（モック準拠） */
.page-works .effect-value__suffix {
color: var(--color-accent);
font-size: var(--text-lg);
font-weight: 600;
margin-left: 0.4em;
}
.page-works .effect-card__desc {
font-size: var(--text-xs);
color: var(--color-text);
opacity: 0.62;
line-height: 1.7;
margin: 0;
}
.page-works .effect-note {
text-align: center;
font-size: var(--text-xs);
color: var(--color-text);
opacity: 0.55;
line-height: 1.9;
margin: var(--space-10) 0 0;
}
/* CTA は全ページ共通コンポーネント化に伴い header-footer.css へ移設（旧 works 専用 .cta は廃止） */
/* ========================================================================
レスポンシブ（タブレット：3カラム→2カラム）
======================================================================== */
@media (max-width: 1000px) {
.page-works .work-grid {
grid-template-columns: 1fr 1fr;
}
}
/* ========================================================================
レスポンシブ（768px 以下）
======================================================================== */
@media (max-width: 768px) {
/* ページヘッダー帯（partners と同一の扱い） */
.page-works .page-head__inner {
padding: var(--space-8) var(--space-6);
}
/* 透かしはタイトル背面でごく薄く（partners と同じ扱い） */
.page-works .page-head__watermark {
right: var(--space-6);
opacity: 0.2;
}
/* 帯下のリード */
.page-works .works-intro__inner {
padding: var(--space-10) var(--space-6) 0;
}
.page-works .works-section {
padding: var(--space-12) 0;
}
.page-works .works-section__inner {
padding: 0 var(--space-6);
}
.page-works .works-head__title {
font-size: var(--text-2xl);
}
/* 業界制作実績：1カラムに */
.page-works .work-grid {
grid-template-columns: 1fr;
}
/* 効果：縦積み */
.page-works .effect-grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
}
/* ==========================================================================
▼ partners.css → .page-partners 配下にスコープ */
/* ==========================================================================
partners.css — パートナー募集ページ（/partners）専用スタイル
（base.css・header-footer.css の後に読み込む）
--------------------------------------------------------------------------
採用モック mockup/下層ページ/partners.png を正本に実装。
トップA案と同じデザイン言語（白基調＋真鍮ゴールド #BF9B46 の細線／
濃色はCTA帯・フッターのみ）。
========================================================================== */
/* ========================================================================
ページヘッダー（パンくず＋タイトル＋透かし）
------------------------------------------------------------------------
下層ページ共通パターン（services.css と同一）に合わせる。
======================================================================== */
.page-partners .page-head {
background-color: var(--color-bg-tint); /* ごく薄い地（下層共通） */
border-bottom: 1px solid var(--color-line);
}
.page-partners .page-head__inner {
position: relative; /* 透かしテキストの配置基準 */
max-width: 1200px;
margin: 0 auto;
padding: var(--space-8) var(--space-8) var(--space-12);
overflow: hidden;
}
/* パンくず */
.page-partners .breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
list-style: none;
margin: 0 0 var(--space-8);
padding: 0;
font-size: var(--text-xs);
color: var(--color-text);
}
.page-partners .breadcrumb li {
opacity: 0.6;
}
.page-partners .breadcrumb li + li::before {
content: "›";
margin-right: var(--space-2);
color: var(--color-accent);
}
.page-partners .breadcrumb a {
color: var(--color-text);
text-decoration: none;
transition: color 0.2s ease;
}
.page-partners .breadcrumb a:hover {
color: var(--color-accent);
}
/* タイトル上の金の短い罫 */
.page-partners .page-head__tick {
display: block;
width: 44px;
height: 3px;
background: var(--color-accent);
margin-bottom: var(--space-4);
}
.page-partners .page-head__title {
position: relative;
z-index: 1;
font-size: clamp(2.25rem, 4vw, 3rem);
font-weight: 700;
line-height: 1.2;
color: var(--color-text);
margin: 0;
}
/* 右下の大きな金の透かし「PARTNERS」 */
.page-partners .page-head__watermark {
position: absolute;
right: var(--space-8);
bottom: var(--space-4);
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-accent);
opacity: 0.28;
line-height: 1;
pointer-events: none;
user-select: none;
}
/* ========================================================================
セクション共通：左寄せ見出し（金の短いバー付き）
======================================================================== */
.page-partners .ptn-heading {
margin-bottom: var(--space-8);
}
.page-partners .ptn-heading__title {
position: relative;
font-size: var(--text-2xl);
font-weight: 700;
color: var(--color-text);
margin: 0;
padding-left: var(--space-4);
line-height: 1.4;
}
/* 見出し左の金の縦バー */
.page-partners .ptn-heading__title::before {
content: "";
position: absolute;
left: 0;
top: 0.15em;
bottom: 0.15em;
width: 4px;
background: var(--color-accent);
border-radius: 2px;
}
/* ========================================================================
② イントロ（左テキスト＋右写真）
======================================================================== */
.page-partners .ptn-intro {
background: var(--color-bg);
}
.page-partners .ptn-intro__inner {
max-width: 1200px;
margin: 0 auto;
padding: var(--space-16) var(--space-8);
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: var(--space-12);
}
.page-partners .ptn-intro__lead {
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: 700;
line-height: 1.55;
color: var(--color-text);
margin: 0 0 var(--space-10);
}
/* リード下の金の飾り罫（線＋右端ドット。ヒーロー見出し下と同じモチーフ） */
.page-partners .ptn-intro__lead::after {
content: "";
display: block;
width: 160px;
height: 10px;
margin-top: var(--space-10); /* 見出し↔金線の間隔をトップ（hero）と統一して広げる */
background:
radial-gradient(circle at calc(100% - 4px) 50%, var(--color-accent) 4px, transparent 4px),
linear-gradient(var(--color-accent), var(--color-accent)) 0 50% / calc(100% - 8px) 2px no-repeat;
}
.page-partners .ptn-intro__text {
font-size: var(--text-base);
line-height: 1.95;
color: var(--color-text);
opacity: 0.78;
margin: 0;
}
/* 右：協業の握手シーン写真（image2生成・黒×金トーン） */
.page-partners .ptn-intro__photo-wrap {
width: 100%;
aspect-ratio: 4 / 3;
background: var(--color-bg-subtle);
border-radius: 10px; /* 下層共通（svc-intro と同じ） */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* はめ込んだ写真は枠いっぱいに表示し、見切れはトリミングで調整 */
.page-partners .ptn-intro__photo-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ========================================================================
③ 競合しない理由（3カード）
======================================================================== */
.page-partners .ptn-reasons {
background: var(--color-bg-tint); /* ごく薄い地でセクション区切り */
padding: var(--space-16) 0;
}
.page-partners .ptn-reasons__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-8);
/* モック：見出しを左カラム、3カードを右に並べる */
display: grid;
grid-template-columns: minmax(180px, 220px) 1fr;
gap: var(--space-12);
align-items: start;
}
/* このセクションでは見出し下マージンを詰める（横並びのため） */
.page-partners .ptn-reasons .ptn-heading {
margin-bottom: 0;
}
.page-partners .ptn-reasons__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
}
.page-partners .reason-card {
padding: var(--space-6) var(--space-6) var(--space-6) 0;
border-top: 2px solid var(--color-line);
}
.page-partners .reason-card__num {
display: block;
font-size: 2.25rem;
font-weight: 700;
color: var(--color-accent);
line-height: 1;
letter-spacing: 0.02em;
margin-bottom: var(--space-4);
}
.page-partners .reason-card__title {
font-size: var(--text-xl);
font-weight: 700;
line-height: 1.45;
color: var(--color-text);
margin: 0 0 var(--space-4);
}
.page-partners .reason-card__text {
font-size: var(--text-sm);
line-height: 1.9;
color: var(--color-text);
opacity: 0.72;
margin: 0;
}
/* ========================================================================
④ 協業の形（ベン図：GINGUN × Win-Win × パートナー）
======================================================================== */
.page-partners .ptn-shape {
background: var(--color-bg);
padding: var(--space-16) 0;
}
.page-partners .ptn-shape__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-8);
}
/* 2円を重ねて本物のベン図に。重なり（レンズ部）の中央に Win-Win を前面で重ねる。
円は絶対配置で左右対称に重ね、Win-Win はコンテナ中央＝レンズ中央に置く。
左右の強みリストはそれぞれ外側の三日月部に収め、中央の Win-Win と干渉させない。
box-sizing を border-box に固定し、border・padding で円の外寸がずれないようにする
（これを怠ると左右非対称になり Win-Win が中央からずれる）。 */
.page-partners .ptn-venn {
position: relative;
width: min(720px, 100%);
height: 380px;
margin: var(--space-10) auto 0;
}
/* 左右の円（やや横長の楕円。金の細線＋ごく淡い金の塗り。
重なり部は塗りが2枚重なって自然に少し濃く見える）。
コンテナ幅720・円幅440なので、左右の円の中心間距離は280、
重なり（レンズ）はコンテナ中央に幅160で生まれる。 */
.page-partners .ptn-venn__circle {
position: absolute;
box-sizing: border-box; /* border・padding を外寸440px内に含め左右対称を担保 */
top: 50%;
transform: translateY(-50%); /* 縦中央 */
width: 440px;
height: 360px;
border-radius: 50%;
border: 1.5px solid var(--color-accent);
background: rgba(191, 155, 70, 0.06);
display: flex;
align-items: center;
}
/* 左の円：コンテナ左端に密着。リストは左の三日月（外側）へ寄せる */
.page-partners .ptn-venn__circle--gingun {
left: 0;
justify-content: flex-start;
padding-left: 30px;
}
/* 右の円：コンテナ右端に密着。リストは右の三日月（外側）へ寄せる */
.page-partners .ptn-venn__circle--partner {
right: 0;
justify-content: flex-end;
padding-right: 30px;
}
.page-partners .ptn-venn__body {
width: 210px;
text-align: center;
}
.page-partners .ptn-venn__label {
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-accent); /* モック：円ラベルは金 */
margin: 0 0 var(--space-3);
}
.page-partners .ptn-venn__list {
list-style: none;
margin: 0;
padding: 0;
}
.page-partners .ptn-venn__list li {
font-size: var(--text-sm);
line-height: 1.95;
color: var(--color-text);
opacity: 0.82;
}
/* 中央：Win-Win（重なり部＝レンズの水平・垂直センターに前面で重ねる）。
白い背景箱・角丸・影は使わない（背景透過）。可読性は淡い白の発光で補い、
レンズ部の塗りが自然に明るい範囲に文字を収める。 */
.page-partners .ptn-venn__center {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
text-align: center;
background: transparent;
}
.page-partners .ptn-venn__center-label {
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-accent);
letter-spacing: 0.02em;
margin: 0 0 var(--space-2);
/* 白箱の代わりに淡い白の発光で文字の輪郭を出す（箱は使わない） */
text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.7);
}
.page-partners .ptn-venn__center-text {
font-size: var(--text-xs);
line-height: 1.7;
color: var(--color-text);
opacity: 0.8;
margin: 0;
text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 10px rgba(255, 255, 255, 0.7);
}
/* ========================================================================
⑤ こんな会社と協業したい（タイトル＋チェックリスト＋写真）
======================================================================== */
.page-partners .ptn-wanted {
background: var(--color-bg-tint);
padding: var(--space-16) 0;
}
.page-partners .ptn-wanted__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-8);
display: grid;
/* 見出しは2行に収まる幅・リストを広めにして余計な改行をなくす */
grid-template-columns: minmax(190px, 220px) 1.8fr 1fr;
align-items: center;
gap: var(--space-8);
}
.page-partners .ptn-wanted__heading {
margin-bottom: 0;
}
/* リストは区切り線付きで上質に。各項目は金の丸バッジ＋チェック */
.page-partners .ptn-wanted__list {
list-style: none;
margin: 0;
padding: 0;
}
.page-partners .ptn-wanted__list li {
position: relative;
padding: var(--space-4) 0 var(--space-4) var(--space-10);
font-size: var(--text-base);
line-height: 1.7;
color: var(--color-text);
border-bottom: 1px solid var(--color-line);
}
.page-partners .ptn-wanted__list li:last-child {
border-bottom: none;
}
/* 金の丸バッジ */
.page-partners .ptn-wanted__list li::before {
content: "";
position: absolute;
left: 0;
top: calc(var(--space-4) + 1px);
width: 24px;
height: 24px;
border-radius: 50%;
border: 1.5px solid var(--color-accent);
background: rgba(191, 155, 70, 0.08);
}
/* バッジ内の金チェック */
.page-partners .ptn-wanted__list li::after {
content: "";
position: absolute;
left: 7px;
top: calc(var(--space-4) + 8px);
width: 10px;
height: 5px;
border-left: 2px solid var(--color-accent);
border-bottom: 2px solid var(--color-accent);
transform: rotate(-45deg);
}
.page-partners .ptn-wanted__photo-wrap {
width: 100%;
aspect-ratio: 4 / 3;
background: var(--color-bg-subtle);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* はめ込んだ写真は枠いっぱいに表示し、見切れはトリミングで調整 */
.page-partners .ptn-wanted__photo-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* CTA は全ページ共通コンポーネント化に伴い header-footer.css へ移設（旧 .ptn-cta は廃止） */
/* ========================================================================
レスポンシブ（768px 以下）
======================================================================== */
@media (max-width: 768px) {
/* ページヘッダー帯 */
.page-partners .page-head__inner {
padding: var(--space-8) var(--space-6);
}
/* 透かしはタイトル背面でごく薄く（services と同じ扱い） */
.page-partners .page-head__watermark {
right: var(--space-6);
opacity: 0.2;
}
/* イントロ：縦積み（写真を上に） */
.page-partners .ptn-intro__inner {
grid-template-columns: 1fr;
padding: var(--space-12) var(--space-6);
gap: var(--space-8);
}
.page-partners .ptn-intro__media {
order: -1;
}
/* 狭幅では強制改行を解除し、自然な折り返しに任せる（孤立文字を防ぐ） */
.page-partners .ptn-intro__lead br {
display: none;
}
/* 競合しない理由：1列 */
.page-partners .ptn-reasons {
padding: var(--space-12) 0;
}
.page-partners .ptn-reasons__inner {
padding: 0 var(--space-6);
grid-template-columns: 1fr; /* モバイルは見出しを上に積む */
gap: var(--space-8);
}
.page-partners .ptn-reasons .ptn-heading {
margin-bottom: 0;
}
/* 1列幅では見出しの強制改行を解除し、自然な1行に任せる */
.page-partners .ptn-reasons .ptn-heading__title br {
display: none;
}
.page-partners .ptn-reasons__grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.page-partners .reason-card {
padding: var(--space-5) 0;
}
.page-partners .reason-card__title br {
display: none; /* 1列幅では自然折り返しに任せる */
}
/* 協業の形：円を縦積み（重なりを解除して読みやすく） */
.page-partners .ptn-shape {
padding: var(--space-12) 0;
}
.page-partners .ptn-shape__inner {
padding: 0 var(--space-6);
}
/* 狭幅では重なりを解除し、円→Win-Win→円の縦積みにフォールバック */
.page-partners .ptn-venn {
position: static;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-5);
margin-top: var(--space-6);
}
/* 円を画面幅いっぱい近くまで広げ、文字を一段小さくして円内に収める */
.page-partners .ptn-venn__circle {
position: static;
transform: none; /* 縦積み時は縦中央化の transform を解除 */
margin: 0;
padding: 0;
width: min(300px, 84vw);
height: min(300px, 84vw);
justify-content: center;
}
.page-partners .ptn-venn__body {
width: 80%;
}
.page-partners .ptn-venn__list li {
font-size: var(--text-xs);
line-height: 1.8;
}
/* Win-Win は2円の間に通常配置（下地・シャドウは外す） */
.page-partners .ptn-venn__center {
position: static;
transform: none;
width: auto;
max-width: 320px;
background: transparent;
box-shadow: none;
padding: var(--space-2) 0;
}
/* こんな会社：縦積み */
.page-partners .ptn-wanted {
padding: var(--space-12) 0;
}
.page-partners .ptn-wanted__inner {
grid-template-columns: 1fr;
padding: 0 var(--space-6);
gap: var(--space-8);
}
.page-partners .ptn-wanted__heading .ptn-heading__title br {
display: none;
}
}
/* ==========================================================================
▼ contact.css → .page-contact 配下にスコープ */
/* ==========================================================================
contact.css — お問い合わせページ専用スタイル
（base.css・header-footer.css の後に読み込む）
--------------------------------------------------------------------------
正本モック: mockup/下層ページ/contact.png（A案準拠）
========================================================================== */
/* ========================================================================
① ページヘッダー帯（下層ページ共通の見出し帯）
------------------------------------------------------------------------
partners/works/about と同一パターン。薄い地＋下罫、金の短い罫、
右下の大きな金透かし「CONTACT」。写真は②カード節の背景へ移設した。
======================================================================== */
.page-contact .page-head {
background-color: var(--color-bg-tint); /* ごく薄い地（下層共通） */
border-bottom: 1px solid var(--color-line);
}
.page-contact .page-head__inner {
position: relative; /* 透かしテキストの配置基準 */
max-width: 1200px;
margin: 0 auto;
padding: var(--space-8) var(--space-8) var(--space-12);
overflow: hidden;
}
/* パンくず（他下層と統一：金の「›」区切り・ホバー金） */
.page-contact .breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
list-style: none;
margin: 0 0 var(--space-8);
padding: 0;
font-size: var(--text-xs);
color: var(--color-text);
}
.page-contact .breadcrumb li {
opacity: 0.6;
}
.page-contact .breadcrumb li + li::before {
content: "›";
margin-right: var(--space-2);
color: var(--color-accent);
}
.page-contact .breadcrumb a {
color: var(--color-text);
text-decoration: none;
transition: color 0.2s ease;
}
.page-contact .breadcrumb a:hover {
color: var(--color-accent);
}
/* タイトル上の金の短い罫 */
.page-contact .page-head__tick {
display: block;
width: 44px;
height: 3px;
background: var(--color-accent);
margin-bottom: var(--space-4);
}
.page-contact .page-head__title {
position: relative;
z-index: 1;
font-size: clamp(2.25rem, 4vw, 3rem);
font-weight: 700;
line-height: 1.2;
color: var(--color-text);
margin: 0;
}
/* 右下の大きな金の透かし「CONTACT」 */
.page-contact .page-head__watermark {
position: absolute;
right: var(--space-8);
bottom: var(--space-4);
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-accent);
opacity: 0.28;
line-height: 1;
pointer-events: none;
user-select: none;
}
/* ========================================================================
② 目的別2カード分岐
======================================================================== */
.page-contact .contact-routes {
position: relative; /* 背景写真（::before）の配置基準 */
background-color: var(--color-bg-tint); /* ごく薄い地でセクションを区切る */
padding: var(--space-16) 0 var(--space-12);
overflow: hidden;
}
/* 背景写真（自動車学校の校舎・コース。①ヒーローから移設）。
右側に表示し、左へ向かって薄くなるグラデ（左フェード）を維持。
画像全体をさらに薄くして、白いカードの可読性を確保する。 */
.page-contact .contact-routes::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: url(../img/contact-hero.webp);
background-size: cover;
background-position: center 58%;
opacity: 0.14; /* 画像全体をさらに薄く */
/* 左に向かって薄くなる（右が濃く・左は消える） */
-webkit-mask-image: linear-gradient(
90deg,
transparent 0%,
transparent 36%,
rgba(0, 0, 0, 0.55) 62%,
#000 100%
);
mask-image: linear-gradient(
90deg,
transparent 0%,
transparent 36%,
rgba(0, 0, 0, 0.55) 62%,
#000 100%
);
pointer-events: none;
}
.page-contact .contact-routes__inner {
position: relative;
z-index: 1; /* 背景写真より前面 */
max-width: 1000px;
margin: 0 auto;
padding: 0 var(--space-8);
}
.page-contact .contact-routes__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
margin-top: var(--space-8);
}
/* 分岐カード */
.page-contact .route-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%; /* グリッド内で2枚の高さを揃える */
box-sizing: border-box;
padding: var(--space-8) var(--space-6); /* 下パディングでボタンを内側に収める */
border: 1px solid var(--color-line);
border-radius: 12px;
background: var(--color-bg);
transition: box-shadow 0.2s ease;
}
.page-contact .route-card:hover {
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.page-contact .route-card__icon {
width: 76px;
height: 76px;
margin-bottom: var(--space-4); /* アイコンは image2 生成PNG（背景透過）を配置 */
}
.page-contact .route-card__icon img {
width: 100%;
height: 100%;
display: block;
}
.page-contact .route-card__title {
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-text);
line-height: 1.4;
margin: 0 0 var(--space-2);
}
.page-contact .route-card__subtitle {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-accent);
margin: 0 0 var(--space-4);
}
.page-contact .route-card__text {
font-size: var(--text-sm);
line-height: 1.9;
color: var(--color-text);
opacity: 0.75;
/* 左寄せのテキストをブロックごと中央配置（改行の不揃いを解消） */
width: fit-content;
max-width: 100%;
margin: 0 auto var(--space-6);
text-align: left;
}
/* カード下のボタン（白地・金枠。モック準拠） */
.page-contact .route-card__btn {
margin-top: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box; /* パディング込みでカード幅に収める（はみ出し防止） */
padding: var(--btn-py) var(--btn-px);
border: 1px solid var(--color-accent);
border-radius: var(--btn-radius);
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-jp);
font-size: var(--text-sm);
font-weight: 600;
line-height: 1.5;
text-align: center;
text-decoration: none;
cursor: pointer; /* button要素のためポインタを明示 */
transition: background-color 0.2s ease, color 0.2s ease;
}
.page-contact .route-card__btn:hover {
background-color: var(--color-accent-weak);
}
/* ========================================================================
③ 問い合わせフォーム
======================================================================== */
.page-contact .contact-form-section {
background-color: var(--color-bg);
padding: 0 0 var(--space-16);
scroll-margin-top: var(--space-8); /* スムーズスクロール時の上余白 */
}
/* 自動車学校向け／ベンダー向けの切替パネル */
.page-contact .contact-panel[hidden] {
display: none; /* 非表示パネル（hidden属性のフォールバック） */
}
.page-contact .contact-form {
max-width: 760px;
margin: 0 auto;
padding: 0 var(--space-8);
}
/* 1行＝ラベル（左固定幅）＋入力欄（右） */
.page-contact .form-row {
display: grid;
grid-template-columns: 200px 1fr;
align-items: start;
gap: var(--space-6);
padding: var(--space-6) 0;
border-bottom: 1px solid var(--color-line);
}
.page-contact .form-row:first-child {
border-top: 1px solid var(--color-line);
}
/* ラベル（左）：ラベル文字＋必須バッジ */
.page-contact .form-row__label {
display: flex;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-3); /* 入力欄の高さと視覚的に揃える */
font-size: var(--text-sm);
font-weight: 700;
color: var(--color-text);
line-height: 1.5;
}
/* 必須バッジ（金枠・薄地） */
.page-contact .form-badge {
font-size: 0.6875rem;
font-weight: 600;
color: var(--color-accent);
background: rgba(191, 155, 70, 0.1);
border: 1px solid var(--color-accent);
border-radius: 3px;
padding: 0.1em 0.5em;
line-height: 1.5;
white-space: nowrap;
}
/* 入力欄（右） */
.page-contact .form-row__field {
min-width: 0;
}
.page-contact .form-input,
.page-contact .form-select,
.page-contact .form-textarea {
width: 100%;
box-sizing: border-box;
font-family: var(--font-jp);
font-size: var(--text-base);
color: var(--color-text);
line-height: 1.6;
background: var(--color-bg);
border: 1px solid var(--color-line);
border-radius: var(--btn-radius);
padding: var(--space-3) var(--space-4);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.page-contact .form-input::placeholder,
.page-contact .form-textarea::placeholder {
color: var(--color-text);
opacity: 0.38;
}
.page-contact .form-input:focus,
.page-contact .form-select:focus,
.page-contact .form-textarea:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(191, 155, 70, 0.15);
}
/* セレクト（右端に金の山形を自前で描く） */
.page-contact .form-select {
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--color-accent) 50%),
linear-gradient(135deg, var(--color-accent) 50%, transparent 50%);
background-position:
calc(100% - 20px) calc(50% - 2px),
calc(100% - 14px) calc(50% - 2px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: var(--space-12);
color: var(--color-text);
}
/* 未選択（プレースホルダ表示）のときは薄く（入力欄プレースホルダと同じ濃度） */
.page-contact .form-select:invalid {
color: var(--color-text);
opacity: 0.38;
}
.page-contact .form-textarea {
min-height: 160px;
resize: vertical;
}
/* 入力欄下の補足 */
.page-contact .form-note {
font-size: var(--text-xs);
color: var(--color-text);
opacity: 0.55;
line-height: 1.7;
margin: var(--space-2) 0 0;
}
/* 送信ボタン（白地・金枠。モック準拠。中央寄せ） */
.page-contact .contact-form__actions {
text-align: center;
margin-top: var(--space-12);
}
.page-contact .btn-submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 280px;
padding: var(--btn-py) var(--btn-px);
border: 1px solid var(--color-accent);
border-radius: var(--btn-radius);
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-jp);
font-size: var(--text-base);
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
transition: background-color 0.2s ease;
}
.page-contact .btn-submit:hover {
background-color: var(--color-accent-weak);
}
/* ------------------------------------------------------------------------
③-2 Contact Form 7（CF7）出力のスタイル
WP化時、各パネルに do_shortcode() で差し込む CF7 フォームコード（管理画面）は、
元の静的フォームと同じ .form-row / .form-row__label / .form-row__field /
.contact-form__actions 構造（2カラム：ラベル左・入力右）で記述する。
そのため上の「2カラムCSS（.page-contact .form-row 系）」がそのまま効く。
auto-p は functions.php で無効化済み（wpcf7_autop_or_not＝false）のため、
CF7 は /
を勝手に挿入せず、書いた div 構造のまま出力される。
ここでは CF7 固有の差分だけを補う：
- CF7 のフォーム外枠（.wpcf7）の幅・余白を .contact-form と揃える。
- CF7 の入力欄（フォームコードに class:form-input 等を付けなくても効くよう、
.form-row__field 内の入力要素を要素セレクタで拾う）を .form-input 相当に。
- CF7 の送信ボタン（.wpcf7-submit）を .btn-submit 相当に。
- CF7 のスピナー・バリデーション・応答メッセージ。
※ローカルにCF7が無く実描画確認ができないため防御的に指定。最終確認は
ステージング/本番（Cocoon＋CF7環境）で行う。
------------------------------------------------------------------------ */
/* フォーム全体の枠（既存 .contact-form と同じ幅・余白） */
.page-contact .wpcf7 {
max-width: 760px;
margin: 0 auto;
padding: 0 var(--space-8);
}
/* CF7 はフォームコントロールを で包む。
2カラムの右側（.form-row__field）でこの span を block にして、内側の
input/textarea/select が幅100%で列いっぱいに広がるようにする。 */
.page-contact .form-row__field .wpcf7-form-control-wrap {
display: block;
}
/* 入力欄（既存 .form-input/.form-select/.form-textarea と同じ見た目）。
2カラムなので margin-top は付けない（ラベルは別列。上端はラベル側の
padding-top で揃える）。 */
.page-contact .form-row__field input[type="text"],
.page-contact .form-row__field input[type="email"],
.page-contact .form-row__field input[type="tel"],
.page-contact .form-row__field input[type="url"],
.page-contact .form-row__field input[type="number"],
.page-contact .form-row__field input[type="date"],
.page-contact .form-row__field textarea,
.page-contact .form-row__field select {
width: 100%;
box-sizing: border-box;
font-family: var(--font-jp);
font-size: var(--text-base);
color: var(--color-text);
line-height: 1.6;
background: var(--color-bg);
border: 1px solid var(--color-line);
border-radius: var(--btn-radius);
padding: var(--space-3) var(--space-4);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.page-contact .form-row__field input::placeholder,
.page-contact .form-row__field textarea::placeholder {
color: var(--color-text);
opacity: 0.38;
}
.page-contact .form-row__field input[type="text"]:focus,
.page-contact .form-row__field input[type="email"]:focus,
.page-contact .form-row__field input[type="tel"]:focus,
.page-contact .form-row__field input[type="url"]:focus,
.page-contact .form-row__field input[type="number"]:focus,
.page-contact .form-row__field input[type="date"]:focus,
.page-contact .form-row__field textarea:focus,
.page-contact .form-row__field select:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(191, 155, 70, 0.15);
}
/* セレクト：右端に金の山形を自前で描く（既存 .form-select と同じ） */
.page-contact .form-row__field select {
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--color-accent) 50%),
linear-gradient(135deg, var(--color-accent) 50%, transparent 50%);
background-position:
calc(100% - 20px) calc(50% - 2px),
calc(100% - 14px) calc(50% - 2px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: var(--space-12);
}
.page-contact .form-row__field textarea {
min-height: 160px;
resize: vertical;
}
/* 送信ボタン（既存 .btn-submit と同じ見た目）。
フォームコードでは .contact-form__actions（中央寄せ・上余白を持つ）で包む。
ボタン自体は display:block＋margin:0 auto で中央寄せのみ担い、上余白は親に
任せる（.contact-form__actions の margin-top と二重に効かせない）。 */
.page-contact .wpcf7-submit {
display: block;
margin: 0 auto;
min-width: 280px;
padding: var(--btn-py) var(--btn-px);
border: 1px solid var(--color-accent);
border-radius: var(--btn-radius);
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-jp);
font-size: var(--text-base);
font-weight: 700;
letter-spacing: 0.04em;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease;
}
.page-contact .wpcf7-submit:hover {
background-color: var(--color-accent-weak);
}
/* 送信処理中スピナー */
.page-contact .wpcf7-spinner {
margin: var(--space-3) auto 0;
}
/* 各項目のバリデーションエラー（小さく・エラー色） */
.page-contact .wpcf7-not-valid-tip {
display: block;
margin-top: var(--space-2);
color: #c0392b; /* エラー表示用の赤（ブランド配色外の機能色） */
font-size: var(--text-xs);
line-height: 1.6;
}
/* エラーの入力欄は枠を赤に */
.page-contact .wpcf7-form input.wpcf7-not-valid,
.page-contact .wpcf7-form textarea.wpcf7-not-valid,
.page-contact .wpcf7-form select.wpcf7-not-valid {
border-color: #c0392b;
}
/* フォーム下部の応答メッセージ（送信完了／エラー／確認） */
.page-contact .wpcf7-form .wpcf7-response-output {
margin: var(--space-6) 0 0;
padding: var(--space-4) var(--space-5);
border: 1px solid var(--color-line);
border-radius: var(--btn-radius);
font-size: var(--text-sm);
line-height: 1.7;
}
/* 送信成功（淡金で控えめに強調） */
.page-contact .wpcf7-form.sent .wpcf7-response-output {
border-color: var(--color-accent);
background: var(--color-accent-weak);
color: var(--color-text);
}
/* 入力エラー・送信失敗 */
.page-contact .wpcf7-form.invalid .wpcf7-response-output,
.page-contact .wpcf7-form.unaccepted .wpcf7-response-output,
.page-contact .wpcf7-form.failed .wpcf7-response-output,
.page-contact .wpcf7-form.aborted .wpcf7-response-output {
border-color: #c0392b;
color: #c0392b;
}
/* ========================================================================
④ 問い合わせ先情報帯（会社情報＋受付シーン写真）
======================================================================== */
.page-contact .contact-info {
background-color: var(--color-bg);
border-top: 1px solid var(--color-line);
padding: var(--space-12) 0;
}
.page-contact .contact-info__inner {
max-width: 1000px;
margin: 0 auto;
padding: 0 var(--space-8);
display: grid;
grid-template-columns: 1fr 360px; /* 左：会社情報／右：受付シーン写真 */
gap: var(--space-12);
align-items: center;
}
.page-contact .contact-info__company {
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-text);
margin: 0 0 var(--space-3);
}
.page-contact .contact-info__address {
font-size: var(--text-sm);
color: var(--color-text);
opacity: 0.78;
line-height: 1.8;
margin: 0 0 var(--space-4);
}
/* TEL・Email（ラベル＋値の行） */
.page-contact .contact-info__contacts {
margin: 0 0 var(--space-4);
}
.page-contact .contact-info__row {
display: flex;
align-items: baseline;
gap: var(--space-4);
padding: var(--space-1) 0;
}
.page-contact .contact-info__row dt {
flex-shrink: 0;
width: 52px;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.08em;
color: var(--color-accent); /* ラベルだけ金 */
}
.page-contact .contact-info__row dd {
margin: 0;
font-size: var(--text-base);
color: var(--color-text);
}
.page-contact .contact-info__row dd a {
color: var(--color-text);
text-decoration: none;
transition: color 0.2s ease;
}
.page-contact .contact-info__row dd a:hover {
color: var(--color-accent);
}
.page-contact .contact-info__note {
font-size: var(--text-sm);
line-height: 1.9;
color: var(--color-text);
opacity: 0.7;
margin: 0;
}
/* 右：受付シーン写真（受付スタッフの対応シーン。image2生成） */
.page-contact .contact-info__media {
aspect-ratio: 4 / 3;
background-color: var(--color-bg-subtle);
border-radius: 8px;
overflow: hidden;
}
.page-contact .contact-info__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ========================================================================
レスポンシブ（768px 以下）
======================================================================== */
@media (max-width: 768px) {
/* ページヘッダー帯：狭幅では左右パディングを詰める（下層共通） */
.page-contact .page-head__inner {
padding: var(--space-6) var(--space-6) var(--space-10);
}
.page-contact .breadcrumb ol {
margin-bottom: var(--space-6);
}
/* 狭幅では透かしを薄く（partners と同様に主張を抑える） */
.page-contact .page-head__watermark {
opacity: 0.22;
}
/* 分岐カード：1列 */
.page-contact .contact-routes {
padding: var(--space-12) 0 var(--space-8);
}
.page-contact .contact-routes__inner {
padding: 0 var(--space-6);
}
.page-contact .contact-routes__grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
/* フォーム：ラベルを上、入力欄を下に積む */
.page-contact .contact-form {
padding: 0 var(--space-6);
}
.page-contact .form-row {
grid-template-columns: 1fr;
gap: var(--space-3);
padding: var(--space-5) 0;
}
.page-contact .form-row__label {
padding-top: 0;
}
.page-contact .contact-form__actions {
margin-top: var(--space-8);
}
.page-contact .btn-submit {
width: 100%;
min-width: 0;
}
/* CF7も静的フォームと同じ：左右余白を詰め、送信ボタンをスマホ幅に合わせる。
上余白は .contact-form__actions（上の指定で space-8）が持つので重ねない。 */
.page-contact .wpcf7 {
padding: 0 var(--space-6);
}
.page-contact .wpcf7-submit {
width: 100%;
min-width: 0;
}
/* 問い合わせ先情報帯：縦積み（写真を下に） */
.page-contact .contact-info {
padding: var(--space-8) 0;
}
.page-contact .contact-info__inner {
grid-template-columns: 1fr;
padding: 0 var(--space-6);
gap: var(--space-6);
}
}
/* ==========================================================================
▼ privacy.css → .page-privacy 配下にスコープ */
/* ==========================================================================
privacy.css — プライバシーポリシーページ（/privacy）専用スタイル
（base.css・header-footer.css の後に読み込む）
--------------------------------------------------------------------------
下層ページ共通の見出し帯（.page-head）＋読みやすい本文レイアウト。
トップA案と同じデザイン言語（白基調＋真鍮ゴールド #BF9B46 の細線）。
========================================================================== */
/* ========================================================================
ページヘッダー（パンくず＋タイトル＋透かし）
------------------------------------------------------------------------
下層ページ共通パターン（partners.css・services.css と同一）に合わせる。
======================================================================== */
.page-privacy .page-head {
background-color: var(--color-bg-tint); /* ごく薄い地（下層共通） */
border-bottom: 1px solid var(--color-line);
}
.page-privacy .page-head__inner {
position: relative; /* 透かしテキストの配置基準 */
max-width: 1200px;
margin: 0 auto;
padding: var(--space-8) var(--space-8) var(--space-12);
overflow: hidden;
}
/* パンくず */
.page-privacy .breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
list-style: none;
margin: 0 0 var(--space-8);
padding: 0;
font-size: var(--text-xs);
color: var(--color-text);
}
.page-privacy .breadcrumb li {
opacity: 0.6;
}
.page-privacy .breadcrumb li + li::before {
content: "›";
margin-right: var(--space-2);
color: var(--color-accent);
}
.page-privacy .breadcrumb a {
color: var(--color-text);
text-decoration: none;
transition: color 0.2s ease;
}
.page-privacy .breadcrumb a:hover {
color: var(--color-accent);
}
/* タイトル上の金の短い罫 */
.page-privacy .page-head__tick {
display: block;
width: 44px;
height: 3px;
background: var(--color-accent);
margin-bottom: var(--space-4);
}
.page-privacy .page-head__title {
position: relative;
z-index: 1;
font-size: clamp(2.25rem, 4vw, 3rem);
font-weight: 700;
line-height: 1.2;
color: var(--color-text);
margin: 0;
}
/* 右下の大きな金の透かし「PRIVACY」 */
.page-privacy .page-head__watermark {
position: absolute;
right: var(--space-8);
bottom: var(--space-4);
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-accent);
opacity: 0.28;
line-height: 1;
pointer-events: none;
user-select: none;
}
/* ========================================================================
本文（プライバシーポリシー）
======================================================================== */
.page-privacy .privacy {
background-color: var(--color-bg);
}
.page-privacy .privacy__inner {
max-width: 820px; /* 法務文書は1行が長すぎないよう本文幅を絞る */
margin: 0 auto;
padding: var(--space-16) var(--space-8);
}
.page-privacy .privacy__lead {
font-size: var(--text-lg);
line-height: 1.9;
color: var(--color-text);
margin: 0 0 var(--space-12);
}
/* 大見出し（個人情報保護方針） */
.page-privacy .privacy__heading {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--color-text);
margin: 0 0 var(--space-6);
padding-bottom: var(--space-3);
border-bottom: 2px solid var(--color-accent); /* 金の細線 */
}
/* 条項見出し（金の縦バー付き） */
.page-privacy .privacy__subheading {
position: relative;
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-text);
margin: var(--space-12) 0 var(--space-4);
padding-left: var(--space-4);
}
.page-privacy .privacy__subheading::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
bottom: 0.2em;
width: 3px;
background: var(--color-accent);
}
.page-privacy .privacy__text {
font-size: var(--text-base);
line-height: 1.95;
color: var(--color-text);
margin: 0 0 var(--space-4);
}
.page-privacy .privacy__list {
margin: 0 0 var(--space-4);
padding-left: var(--space-6);
font-size: var(--text-base);
line-height: 1.95;
color: var(--color-text);
}
.page-privacy .privacy__list li {
margin-bottom: var(--space-2);
}
/* お問い合わせ先（金の縁取りボックス） */
.page-privacy .privacy__contact {
margin: var(--space-4) 0 0;
padding: var(--space-6) var(--space-8);
background-color: var(--color-bg-tint);
border: 1px solid var(--color-line);
border-left: 3px solid var(--color-accent);
line-height: 1.9;
color: var(--color-text);
}
.page-privacy .privacy__contact p {
margin: 0;
}
.page-privacy .privacy__contact a {
color: var(--color-accent);
text-decoration: none;
transition: color 0.2s ease;
}
.page-privacy .privacy__contact a:hover {
text-decoration: underline;
}
.page-privacy .privacy__date {
margin: var(--space-12) 0 0;
font-size: var(--text-sm);
color: var(--color-text);
opacity: 0.6;
text-align: right;
}
/* ========================================================================
レスポンシブ（768px 以下）
======================================================================== */
@media (max-width: 768px) {
.page-privacy .page-head__inner {
padding: var(--space-8) var(--space-6);
}
.page-privacy .page-head__watermark {
right: var(--space-6);
opacity: 0.2;
}
.page-privacy .privacy__inner {
padding: var(--space-12) var(--space-6);
}
.page-privacy .privacy__contact {
padding: var(--space-5) var(--space-6);
}
}
/* ==========================================================================
▼ news.css → お知らせ（投稿）一覧 home.php／記事詳細 single.php
--------------------------------------------------------------------------
body に付与する .page-news 配下にスコープ（functions.php の gingun_body_class）。
見出し帯（.page-head）は partners/privacy と同一体裁（下層ページ共通）。
トップA案と同じデザイン言語（白基調＋真鍮ゴールド #BF9B46 の細線）。
========================================================================== */
/* お知らせ見出し内のリンク（トップ⑩・一覧 共通）。
Cocoon親テーマの a:hover オレンジ漏れを避けるため色を明示する（詳細度 0,2,1 で勝つ）。 */
.news-item__title a {
color: var(--color-text);
text-decoration: none;
transition: color 0.2s ease;
}
.news-item__title a:hover {
color: var(--color-accent);
}
/* ------------------------------------------------------------------------
見出し帯（パンくず＋タイトル＋透かし）：partners/privacy と同一体裁
------------------------------------------------------------------------ */
.page-news .page-head {
background-color: var(--color-bg-tint); /* ごく薄い地（下層共通） */
border-bottom: 1px solid var(--color-line);
}
.page-news .page-head__inner {
position: relative; /* 透かしテキストの配置基準 */
max-width: 1200px;
margin: 0 auto;
padding: var(--space-8) var(--space-8) var(--space-12);
overflow: hidden;
}
/* パンくず */
.page-news .breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
list-style: none;
margin: 0 0 var(--space-8);
padding: 0;
font-size: var(--text-xs);
color: var(--color-text);
}
.page-news .breadcrumb li {
opacity: 0.6;
}
.page-news .breadcrumb li + li::before {
content: "›";
margin-right: var(--space-2);
color: var(--color-accent);
}
.page-news .breadcrumb a {
color: var(--color-text);
text-decoration: none;
transition: color 0.2s ease;
}
.page-news .breadcrumb a:hover {
color: var(--color-accent);
}
/* タイトル上の金の短い罫 */
.page-news .page-head__tick {
display: block;
width: 44px;
height: 3px;
background: var(--color-accent);
margin-bottom: var(--space-4);
}
.page-news .page-head__title {
position: relative;
z-index: 1;
font-size: clamp(2.25rem, 4vw, 3rem);
font-weight: 700;
line-height: 1.2;
color: var(--color-text);
margin: 0;
}
/* 右下の大きな金の透かし「NEWS」 */
.page-news .page-head__watermark {
position: absolute;
right: var(--space-8);
bottom: var(--space-4);
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-accent);
opacity: 0.28;
line-height: 1;
pointer-events: none;
user-select: none;
}
/* ------------------------------------------------------------------------
一覧（home.php）：お知らせ一覧＋ページネーション
------------------------------------------------------------------------ */
.page-news .news-archive {
background-color: var(--color-bg);
}
.page-news .news-archive__inner {
max-width: 820px; /* 一覧は1行が長すぎないよう本文幅を絞る（privacy と同方針） */
margin: 0 auto;
padding: var(--space-16) var(--space-8);
}
.page-news .news-list {
list-style: none;
margin: 0;
padding: 0;
}
.page-news .news-item {
display: grid;
grid-template-columns: auto auto 1fr;
align-items: baseline;
gap: var(--space-3);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--color-line);
}
.page-news .news-item__date {
font-size: var(--text-sm);
color: var(--color-text);
opacity: 0.55;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.page-news .news-item__cat {
font-size: var(--text-xs);
color: var(--color-accent);
border: 1px solid var(--color-accent-weak);
border-radius: 999px;
padding: 0.1em 0.7em;
line-height: 1.6;
white-space: nowrap;
}
.page-news .news-item__title {
font-size: var(--text-sm);
color: var(--color-text);
line-height: 1.6;
margin: 0;
}
/* 投稿が無いときの案内（一覧・トップ⑩共通の見た目） */
.page-news .news-empty,
.home .news-empty {
font-size: var(--text-base);
color: var(--color-text);
opacity: 0.7;
margin: 0;
padding: var(--space-4) 0;
}
/* ページネーション（the_posts_pagination が出力する .pagination / .page-numbers） */
.page-news .pagination {
margin-top: var(--space-10);
}
.page-news .pagination .nav-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-2);
}
.page-news .pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5em;
padding: 0.5em 0.75em;
border: 1px solid var(--color-line);
border-radius: var(--btn-radius);
font-size: var(--text-sm);
line-height: 1;
color: var(--color-text);
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.page-news .pagination a.page-numbers:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
.page-news .pagination .page-numbers.current {
border-color: var(--color-accent);
background-color: var(--color-bg-subtle);
color: var(--color-accent);
font-weight: 700;
}
.page-news .pagination .page-numbers.dots {
border-color: transparent;
}
/* ------------------------------------------------------------------------
記事詳細（single.php）：本文を読みやすいタイポ・配色で整える
------------------------------------------------------------------------ */
.page-news .post {
background-color: var(--color-bg);
}
.page-news .post__inner {
max-width: 820px; /* 本文の1行を読みやすい幅に絞る */
margin: 0 auto;
padding: var(--space-16) var(--space-8);
}
/* 日付＋カテゴリ */
.page-news .post__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-6);
}
.page-news .post__date {
font-size: var(--text-sm);
color: var(--color-text);
opacity: 0.55;
font-variant-numeric: tabular-nums;
}
.page-news .post__cat {
font-size: var(--text-xs);
color: var(--color-accent);
border: 1px solid var(--color-accent-weak);
border-radius: 999px;
padding: 0.1em 0.7em;
line-height: 1.6;
}
/* 本文（the_content）の各要素 */
.page-news .post-content {
font-size: var(--text-base);
line-height: 1.95;
color: var(--color-text);
}
.page-news .post-content > *:first-child {
margin-top: 0;
}
.page-news .post-content p {
margin: 0 0 var(--space-5);
}
.page-news .post-content h2 {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--color-text);
margin: var(--space-12) 0 var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 2px solid var(--color-accent); /* 金の細線 */
}
.page-news .post-content h3 {
position: relative;
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-text);
margin: var(--space-10) 0 var(--space-4);
padding-left: var(--space-4);
}
.page-news .post-content h3::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
bottom: 0.2em;
width: 3px;
background: var(--color-accent);
}
.page-news .post-content h4 {
font-size: var(--text-lg);
font-weight: 700;
color: var(--color-text);
margin: var(--space-8) 0 var(--space-3);
}
.page-news .post-content ul,
.page-news .post-content ol {
margin: 0 0 var(--space-5);
padding-left: var(--space-6);
}
.page-news .post-content li {
margin-bottom: var(--space-2);
}
.page-news .post-content a {
color: var(--color-accent);
text-decoration: underline;
transition: color 0.2s ease;
}
.page-news .post-content a:hover {
color: var(--color-accent);
text-decoration: none;
}
.page-news .post-content img {
max-width: 100%;
height: auto;
border-radius: 6px;
}
.page-news .post-content blockquote {
margin: 0 0 var(--space-5);
padding: var(--space-4) var(--space-6);
background-color: var(--color-bg-tint);
border-left: 3px solid var(--color-accent);
color: var(--color-text);
}
.page-news .post-content blockquote p:last-child {
margin-bottom: 0;
}
/* 一覧へ戻る導線 */
.page-news .post__back {
margin-top: var(--space-12);
padding-top: var(--space-6);
border-top: 1px solid var(--color-line);
}
/* ------------------------------------------------------------------------
レスポンシブ（768px 以下）
------------------------------------------------------------------------ */
@media (max-width: 768px) {
.page-news .page-head__inner {
padding: var(--space-8) var(--space-6);
}
.page-news .page-head__watermark {
right: var(--space-6);
opacity: 0.2;
}
.page-news .news-archive__inner,
.page-news .post__inner {
padding: var(--space-12) var(--space-6);
}
/* 一覧項目：日付・カテゴリを上段、見出しを下段に（トップ⑩と同じ畳み方） */
.page-news .news-item {
grid-template-columns: auto auto;
row-gap: var(--space-2);
}
.page-news .news-item__title {
grid-column: 1 / -1;
}
}
/* ==========================================================================
親テーマ（Cocoon）対策 ／ WP（Cocoon子テーマ）でのみ効く防御的な上書き
--------------------------------------------------------------------------
ローカル（静的サイト）には Cocoon が無いため見た目は変わらない。
ステージング（WP＝Cocoon子テーマ）でのみ、親テーマの既定スタイルが
当サイトに漏れるのを打ち消すための定義。ファイル末尾に置き、ソース順でも
確実に後勝ちさせる。!important は最小限にとどめる。
※ これは「②Cocoon耐性ベース」の二層構成のうち“必ず勝たせる打ち消し”側。
箱モデル・フォント・rem基準などの“正規化”はファイル先頭の②本節を参照。
========================================================================== */
/* --------------------------------------------------------------------------
B. ホバー色漏れ対策
Cocoon 親テーマは a:hover 等にオレンジ系の色を当てるため、明示ホバー色を
持たない当サイトのボタン/リンクで文字がオレンジになることがある。
対象要素のホバー時の文字色を「黒×金」の意図した色で明示し直す。
いずれも 要素なので a.クラス まで詳細度を上げ（0,2,x）、親テーマの
a:hover（0,1,1）／body a:hover（0,1,2）に確実に勝たせる（!important 不要）。
-------------------------------------------------------------------------- */
/* 黒地・白文字（メインCTA）：ホバーは opacity のみ＝文字色は白のまま保つ */
a.btn-primary:hover {
color: #FFFFFF;
}
/* 白地・黒枠（サブCTA）：ホバーで地が薄くなる＝文字は本文の黒（ink）のまま */
a.btn-secondary:hover {
color: var(--color-ink);
}
/* 白地・金枠ボタン：ホバーは意図どおり金文字（既存挙動の再宣言で固定） */
a.btn-text:hover {
color: var(--color-accent);
}
a.btn-text:hover .btn-arrow {
color: var(--color-accent);
}
/* 濃色帯の上の金枠ボタン（CTA帯）：ホバーで地に淡金＝文字は白のまま保つ */
a.btn-cta:hover {
color: #FFFFFF;
}
/* サービスページの3本柱（リンクカード）：ホバーは opacity のみ。
.pillar__title は色指定が無く .pillar（=a）の色を継承するため、
ホバー時の親テーマ色がタイトルに漏れないよう本文色を明示する。 */
.page-services a.pillar:hover {
color: var(--color-text);
}
/* 実績カード（works）：リンク化済み。子要素は明示色だが、念のため
カード自身のホバー文字色も継承（黒×金）に固定しておく。 */
a.work-card:hover {
color: inherit;
}
/* 以下は