/*
 * /consumer-oriented-voluntary-declaration-2/（消費者志向自主宣言）専用。テンプレート page-acm-declaration.php とセット。
 *
 * ■ 色は /evidence/ と同じく TOP カテゴリ欄と /data/ のカードの実際の値（フラット）
 *   区切り 2px #9bdeec／アイコン 線だけ #007e9b／淡い面 #f6fbfd・枠 #dfedf2
 *   カード 白・枠 #d3eaf3・角丸12px・影 0 2px 7px #0a609a05／補足 #526b80／筆記体 #00a8d0／黄色 #fff18b
 *   ⚠ グラデーション・塗りのアイコンタイル・濃い色の面は使わない
 * ■ 見せ場は「上部のイラスト＋消費者庁バッジ」「黄色マーカーのスローガン」「大きな番号の取り組み方針」。
 *   イラストは About の6コマ画像（3×2）の左上だけを出す。⚠ 右下のコマはミナトなので位置を変えない
 * ■ 改行：見出し・スローガン・方針など短い文だけ文節で折り返す（word-break:auto-phrase）。本文にはかけない＝行末が不揃いになる
 *   スローガンは text-wrap:balance で2行の長さをそろえる（2026-09-30 指摘「変に改行されてる」）
 * ⚠ セレクタは `.acmcd` から始め、SWELL の `.post_content h2` 等の装飾に負けないようにする。
 */
@font-face{font-family:'ACM Hand';src:url('../acm-minato/caveat.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}

.acmcd{
	--cd-ink:#09284b; --cd-sub:#526b80; --cd-icon:#007e9b; --cd-hover:#007c99; --cd-script:#00a8d0;
	--cd-rule:#d3eaf3; --cd-line:#9bdeec; --cd-soft:#f6fbfd; --cd-soft-line:#dfedf2; --cd-yellow:#fff18b;
	color:var(--cd-ink); line-break:strict;
}
/* 短い文（見出し・スローガン・方針の見出し）だけ文節で折り返す。長い本文にかけると行末が不揃いになる */
/* ⚠ 箇条書き・本文にはかけない（「双方／向コミュニケーション」のような不自然な区切りが出た） */
.acmcd .acmcd-head__ttl,.acmcd .acmcd-sec__ttl,.acmcd .acmcd-slogan__txt,.acmcd .acmcd-policy__ttl{ word-break:auto-phrase; }
.acmcd :where(h1,h2,h3)::before,.acmcd :where(h1,h2,h3)::after{ content:none !important; display:none !important; }
.acmcd svg{ display:block; }
.acmcd a{ color:var(--cd-icon); }
.acmcd a:hover{ color:var(--cd-hover); }

/* ── 見出し共通（日本語 → 右に筆記体） ── */
.acmcd .acmcd-head,.acmcd .acmcd-sec__head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 16px; }
.acmcd .acmcd-head__ttl,.acmcd .acmcd-sec__ttl{
	margin:0 !important; padding:0 !important; border:0 !important; background:none !important;
	color:var(--cd-ink) !important; font-weight:700 !important; line-height:1.55 !important;
	text-decoration:underline; text-decoration-color:var(--cd-yellow); text-decoration-thickness:5px;
	text-underline-offset:3px; text-decoration-skip-ink:none;
}
.acmcd .acmcd-head__ttl{ font-size:26px !important; }
.acmcd .acmcd-sec__ttl{ font-size:20px !important; }
.acmcd .acmcd-script{
	display:inline-block; flex:0 0 auto; color:var(--cd-script); font-family:'ACM Hand','Segoe Print',cursive;
	font-size:34px; font-weight:400; line-height:1; transform:rotate(-9deg); white-space:nowrap;
}
.acmcd .acmcd-script.-sm{ font-size:26px; }

/* ══════════ ヒーロー（左：見出しと宣言文／右：イラスト＋消費者庁バッジ） ══════════ */
.acmcd .acmcd-hero{
	display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:28px; align-items:center;
	margin:4px 0 48px; padding:30px 30px 30px 32px; border:1px solid var(--cd-rule); border-radius:12px; background:#fafdff;
}
.acmcd .acmcd-head{ margin:0 0 16px; column-gap:12px; }
/* タイトル＋英字が1行に収まる幅（左 約404px ≧ タイトル238＋間隔12＋英字約132）。右の幅や文字を大きくするときは要再計算 */
.acmcd .acmcd-head .acmcd-script{ font-size:31px; }
.acmcd .acmcd-lead{ margin:0 0 12px; font-size:15px; line-height:2; color:var(--cd-ink); }
.acmcd .acmcd-lead:last-child{ margin-bottom:0; }
.acmcd .acmcd-lead strong{ font-weight:700; background:linear-gradient(transparent 62%,var(--cd-yellow) 62%); }

.acmcd .acmcd-hero__side{ position:relative; padding-bottom:34px; }
.acmcd .acmcd-hero__art{
	aspect-ratio:1/1; border-radius:12px; border:1px solid var(--cd-rule);
	background-repeat:no-repeat; background-size:300% 200%; background-position:0 0; /* 左上のコマ（⚠ 右下はミナト） */
}
.acmcd .acmcd-logo{
	position:absolute; left:-22px; bottom:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px;
	padding:12px 14px 10px; border:1px solid var(--cd-rule); border-radius:12px; background:#fff; box-shadow:0 6px 18px rgba(10,96,154,.10);
	text-decoration:none; transition:border-color .15s ease;
}
.acmcd a.acmcd-logo:hover{ border-color:#7cc9dd; }
.acmcd a.acmcd-logo:focus-visible{ outline:3px solid rgba(0,126,155,.35); outline-offset:2px; }
.acmcd .acmcd-logo img{ display:block; width:150px; height:auto; }
.acmcd .acmcd-logo__label{ display:flex; align-items:center; gap:5px; color:var(--cd-icon); font-size:12px; font-weight:700; line-height:1.5; white-space:nowrap; }
.acmcd .acmcd-logo__label svg{ width:12px; height:12px; }
.acmcd a.acmcd-logo:hover .acmcd-logo__label{ color:var(--cd-hover); text-decoration:underline; text-underline-offset:3px; }

/* ══════════ 節（TOP カテゴリ欄と同じ「上線で区切る」形） ══════════ */
.acmcd .acmcd-sec{ margin:0 0 52px; padding-top:16px; border-top:2px solid var(--cd-line); }
.acmcd .acmcd-sec__head{ margin:0 0 16px; }
.acmcd .acmcd-p{ margin:0 0 12px; font-size:15px; line-height:2; color:var(--cd-ink); }

/* ── 理念のスローガン（大きな文字＋黄色マーカー） ── */
.acmcd .acmcd-slogan{
	position:relative; margin:10px 0 22px; padding:40px 44px; border:1px solid var(--cd-soft-line); border-radius:12px;
	background:var(--cd-soft); text-align:center;
}
.acmcd .acmcd-slogan__txt{ margin:0; font-size:24px; font-weight:700; line-height:1.8; letter-spacing:.02em; color:var(--cd-ink); text-wrap:balance; }
.acmcd .acmcd-slogan__txt strong{ font-weight:inherit; }
.acmcd .acmcd-slogan__txt mark{ padding:0 .1em; background:linear-gradient(transparent 58%,var(--cd-yellow) 58%); color:inherit; }
.acmcd .acmcd-slogan__q{
	position:absolute; left:18px; top:6px; color:var(--cd-line); font-family:'ACM Hand','Segoe Print',cursive;
	font-size:72px; line-height:1;
}
.acmcd .acmcd-slogan__q.-end{ left:auto; top:auto; right:18px; bottom:-18px; }

/* ── 取り組み方針（1方針＝横長のカード。左に大きな番号とアイコン） ── */
.acmcd .acmcd-policies{ display:grid; gap:12px; }
.acmcd .acmcd-policy{
	display:grid; grid-template-columns:96px minmax(0,1fr); gap:0 22px; padding:22px 24px;
	border:1px solid var(--cd-rule); border-radius:12px; background:#fff; box-shadow:0 2px 7px #0a609a05;
}
.acmcd .acmcd-policy__side{ display:flex; flex-direction:column; align-items:center; gap:10px; padding-right:20px; border-right:1px solid var(--cd-rule); }
.acmcd .acmcd-policy__no{ color:var(--cd-script); font-family:'ACM Hand','Segoe Print',cursive; font-size:46px; line-height:1; transform:rotate(-9deg); }
.acmcd .acmcd-policy__ic{ color:var(--cd-icon); }
.acmcd .acmcd-policy__ic svg{ width:30px; height:30px; }
.acmcd .acmcd-policy__ttl{
	margin:2px 0 12px !important; padding:0 !important; border:0 !important; background:none !important;
	color:var(--cd-ink) !important; font-size:17px !important; font-weight:700 !important; line-height:1.6 !important;
	text-decoration:underline; text-decoration-color:var(--cd-yellow); text-decoration-thickness:4px;
	text-underline-offset:3px; text-decoration-skip-ink:none;
}
.acmcd .acmcd-checks{ margin:0 !important; padding:0 !important; list-style:none !important; }
.acmcd .acmcd-checks > li{
	display:flex; gap:9px; margin:0 0 7px !important; padding:0 !important; list-style:none !important;
	font-size:14px; line-height:1.85; color:var(--cd-ink);
}
.acmcd .acmcd-checks > li:last-child{ margin-bottom:0 !important; }
.acmcd .acmcd-checks > li::before,.acmcd .acmcd-checks > li::marker{ content:none !important; display:none !important; }
.acmcd .acmcd-checks__ic{
	flex:0 0 auto; display:grid; place-items:center; width:19px; height:19px; margin-top:4px;
	border-radius:50%; background:#e7f7fb; color:var(--cd-icon);
}
.acmcd .acmcd-checks__ic svg{ width:11px; height:11px; }

/* ── お問い合わせ（/data/ の引用ボックスと同じ淡い面） ── */
.acmcd .acmcd-sec.-cta{
	display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 20px;
	padding:20px 24px; border:1px solid var(--cd-rule); border-top:2px solid var(--cd-line); border-radius:0 0 12px 12px; background:#f5fbff;
}
.acmcd .acmcd-sec.-cta .acmcd-sec__head{ margin:0; }
.acmcd .acmcd-cta{ margin:0; }
.acmcd .acmcd-btn{
	display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:10px 24px;
	border-radius:8px; background:var(--cd-icon); color:#fff !important; text-decoration:none;
	font-size:14.5px; font-weight:700; line-height:1.5; transition:background .15s ease;
}
.acmcd .acmcd-btn:hover{ background:#006a82; color:#fff !important; }
.acmcd .acmcd-btn:focus-visible{ outline:3px solid rgba(0,126,155,.35); outline-offset:2px; }
.acmcd .acmcd-btn svg{ width:16px; height:16px; transition:transform .15s ease; }
.acmcd .acmcd-btn:hover svg{ transform:translateX(2px); }

/* ══════════ タブレット・スマホ ══════════ */
@media (max-width:760px){
	.acmcd .acmcd-hero{ grid-template-columns:1fr; gap:22px; padding:24px 20px; }
	.acmcd .acmcd-hero__side{ max-width:300px; margin:0 auto; width:100%; }
	.acmcd .acmcd-logo{ left:-10px; }
}
@media (max-width:600px){
	.acmcd .acmcd-head__ttl{ font-size:23px !important; }
	.acmcd .acmcd-script{ font-size:29px; }
	.acmcd .acmcd-script.-sm{ font-size:23px; }
	.acmcd .acmcd-lead,.acmcd .acmcd-p{ font-size:14.5px; }
	.acmcd .acmcd-sec{ margin-bottom:40px; }
	.acmcd .acmcd-sec__ttl{ font-size:18px !important; }
	.acmcd .acmcd-slogan{ padding:30px 18px; }
	.acmcd .acmcd-slogan__txt{ font-size:18.5px; }
	.acmcd .acmcd-slogan__q{ font-size:54px; left:10px; }
	.acmcd .acmcd-slogan__q.-end{ right:10px; bottom:-14px; }
	.acmcd .acmcd-policy{ grid-template-columns:1fr; padding:18px 16px; }
	.acmcd .acmcd-policy__side{ flex-direction:row; align-items:center; gap:12px; margin:0 0 10px; padding:0 0 10px; border-right:0; border-bottom:1px solid var(--cd-rule); }
	.acmcd .acmcd-policy__no{ font-size:36px; }
	.acmcd .acmcd-policy__ic svg{ width:26px; height:26px; }
	.acmcd .acmcd-policy__ttl{ font-size:16px !important; }
	.acmcd .acmcd-sec.-cta{ padding:18px 16px; }
	.acmcd .acmcd-cta,.acmcd .acmcd-btn{ width:100%; }
	.acmcd .acmcd-btn{ justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
	.acmcd .acmcd-logo,.acmcd .acmcd-btn,.acmcd .acmcd-btn svg{ transition:none; }
	.acmcd .acmcd-btn:hover svg{ transform:none; }
}