@charset "utf-8";
/* =========================================================
   下層ページ（page-sub.php）

   下層のカンプは無いため、色・書体・角丸・波線はトップページ
   （front.css / カンプ takeuchi-01）の実装値をそのまま使う。
   ========================================================= */

/* ---------------------------------------------------------
   ブレークポイント（max-widthは大きい順に並べる）

   | 名前 | 幅      | 役割                                   |
   |------|---------|----------------------------------------|
   | lg   | 1200px  | タブレット。PCの組みのまま余白を詰める |
   | md   |  767px  | スマートフォン。縦積み                 |
   | sm   |  480px  | 小型スマートフォン                     |
   --------------------------------------------------------- */

.sub {
	--green: #04471f;
	/* ボタン（CTA）の背景。ヘッダーのお問い合わせCTA（#008236 / #01642a）に
	   合わせた階調。--green（#04471f）は文字・見出し・装飾に使い、
	   面で塗るボタンはこちらを使う（2026-09-09にユーザー判断） */
	--green-cta: #01642a;
	--green-cta-hover: #004d20;
	--green-light: #299b53;
	--paper: #f5f0eb;
	--ink: #3d3d3d;
	--line: #dce7da;
	/* 表の罫線。--line（薄緑）だと枠が読み取れず、--ink（#3d3d3d）だと黒すぎた */
	--line-table: #c9c9c9;
	/* 本文の幅。表と2枚並べの写真が入るのでトップのカード幅に合わせて1040 */
	--body-w: 1040px;
}

/* STORK SEは #main に max-width:900px を掛けている。
   ページヘッダーと仕切り線を全幅で出すため、幅の制御は内側の要素に持たせる */
.sub #main {
	max-width: none;
	width: 100%;
}

/* =========================================================
   ページヘッダー
   トップのセクション見出し（英字 + 日本語 + 波線）と同じ組み。
   面色はトップで3セクションに使っている #f5f0eb に揃える
   ========================================================= */
.page-head {
	background: var(--paper);
}
.page-head__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	/* 追従ヘッダー（64px）の下に入るので、上を厚めに取る */
	padding: 88px 40px 56px;
}
.page-head__en {
	margin: 0;
	/* トップのセクション見出しの英字と同じ色。ベージュの面では 3.14:1 で
	   AA（4.5:1）に届いていないが、濃い緑（9.63:1）だと小さい文字では
	   黒に見えてしまうため、見た目を優先してこの色にしている（ユーザー判断） */
	color: var(--green-light);
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .04em;
}
.page-head__title {
	margin: 0;
	color: #333;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
}
/* ページタイトル（h1）には波線を出さない。波線は h2 の記号にする。
   ここは面（ベージュ）と下端の段ボール断面が受けるので、記号がなくても成立する */
/* フッターと同じ段ボール断面。ページヘッダーの下端をトップと同じ表情にする */
.page-head__rule {
	width: 100%;
	height: 25px;
	background: url(../../images/divider-tile.svg) repeat-x left center / auto 100%;
}

/* =========================================================
   パンくず（親テーマの breadcrumb() が出す markup に当てる）
   ========================================================= */
.sub .breadcrumb {
	max-width: var(--body-w);
	margin: 20px auto 0;
	padding-inline: 40px;
	box-sizing: border-box;
	color: #6a7282;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 12px;
	line-height: 1.6;
}
.sub .breadcrumb a {
	color: #6a7282;
	text-decoration: none;
}
.sub .breadcrumb a:hover {
	color: var(--green);
	text-decoration: underline;
}

/* =========================================================
   兄弟ページのナビ
   ボタンはトップの .btn と同じ角丸28px・緑。現在地は塗り、他は白抜き
   ========================================================= */
.subnav {
	max-width: var(--body-w);
	margin: 0 auto;
	padding: 0 40px 96px;
	box-sizing: border-box;
}
.subnav__head {
	margin: 0 0 20px;
	color: var(--ink);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
}
.subnav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
/* 寸法はトップの .btn と同じ（角丸28px・高さ56px）。
   下層は front.css を読み込まないので、同じ値をここに持つ */
.subnav__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 12px 28px;
	background: #fff;
	border: 1px solid var(--green);
	border-radius: 28px;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
/* 親テーマがリンク色を持っているので、要素セレクタを足して上回る（.btn-doc と同じ対処） */
.sub a.subnav__link {
	color: var(--green);
}
.sub a.subnav__link:hover {
	background: var(--green-cta);
	border-color: var(--green-cta);
	color: #fff;
}
/* 現在地は塗り。押せないので <span> で出す */
.subnav__link--current {
	background: var(--green-cta);
	border-color: var(--green-cta);
	color: #fff;
	cursor: default;
}
.subnav__parent {
	margin: 0;
	font-size: 14px;
	text-align: center;
}
.sub a.subnav__parent-link {
	color: var(--green);
	text-decoration: underline;
}

/* =========================================================
   本文
   ブロック編集で組むので、素のタグに当てる
   ========================================================= */
.sub__body {
	max-width: var(--body-w);
	margin: 0 auto;
	padding: 56px 40px 96px;
	box-sizing: border-box;
	color: var(--ink);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.9;
}

/* --- 見出し ---
   STORK SEは entry-content の見出しに既定のスタイルを持っている。
   h2 は `.entry-content h2:not([class*=is-style-style]):not(.has-background)`
   でテーマカラーのベタ帯（--main-ttl-bg）、h3 は上下のボーダー。

   :not() は中身の詳細度が加算されるので、相手は「クラス相当3＋要素1」ある。
   `.sub .sub__body h2` はクラス2＋要素1で負ける。body を足して確実に上回る */
/* 相手が持つプロパティ（背景・文字色・余白・角丸・影・字送り）は
   すべてこの詳細度で指定する。素の `.sub__body h2` に書くと負ける */
/* 波線は「そのページの h2 ＝ セクションの区切り」を示す記号として使う。
   トップページのセクション見出し（.section-heading）と同じ組みにしてある。
   格が同じものは同じ形にし、格が違うページタイトル（h1）は別の形で受ける。

   英字はトップでは EN を添えているが、本文の小見出しに英字は過剰なので付けない。

   STORK SEは entry-content の見出しに既定のスタイルを持っている。
   h2 は `.entry-content h2:not([class*=is-style-style]):not(.has-background)`
   でテーマカラーのベタ帯、h3 は上下のボーダー。:not() は中身の詳細度が
   加算されるので相手は「クラス相当3＋要素1」ある。body を足して確実に上回る */
body .sub .sub__body.entry-content h2 {
	position: static;
	/* flex にしてはいけない。flex-direction:column だと <sup> や <span> が
	   別のflexアイテムになり、「FSC<sup>®</sup>認証取得」が3段に割れる。
	   波線（::after）は margin: auto で中央に置く */
	display: block;
	margin: 80px 0 32px;
	padding: 0;
	background: none;
	box-shadow: none;
	border: none;
	border-radius: 0;
	color: #333;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(22px, 1.95vw, 28px);
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}
body .sub .sub__body.entry-content h2:first-child {
	margin-top: 0;
}
body .sub .sub__body.entry-content h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 6px;
	/* flex の gap: 12px の代わり */
	margin: 12px auto 0;
	background: url(../../images/head-wave.svg) no-repeat center / contain;
	border: none;
	box-shadow: none;
}

body .sub .sub__body.entry-content h3 {
	margin: 48px 0 16px;
	padding: 0 0 0 14px;
	border: none;
	border-left: 4px solid var(--green);
	color: var(--green);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
}

/* --- 段落・リスト --- */
.sub__body p {
	margin: 0 0 1.5em;
}
.sub__body ul,
.sub__body ol {
	margin: 0 0 1.5em;
	padding-left: 1.4em;
}
.sub__body li {
	margin-bottom: .4em;
}
.sub__body a {
	color: var(--green);
}

/* --- 画像 --- */
.sub__body figure {
	margin: 0 0 1.5em;
}
.sub__body img {
	height: auto;
	max-width: 100%;
	border-radius: 8px;
}

/* --- 表（会社概要など） --- */
.sub__body table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	font-size: 15px;
	line-height: 1.8;
}
.sub__body th,
.sub__body td {
	padding: 18px 24px;
	border: 1px solid var(--line-table);
	text-align: left;
	vertical-align: top;
}
/* テーブルブロックは全セルが td で出るので、項目名の列は
   .spec を付けた表の1列目として指定する（会社概要・製品仕様など） */
.sub__body th,
.sub__body .spec td:first-child {
	width: 25%;
	background: var(--paper);
	/* ベージュ（--paper）の面に載る文字は黒で通す。緑にしても
	   コントラストは変わらない（緑9.63:1 / 黒9.60:1）ので、色の使い分けの問題 */
	color: var(--ink);
	font-weight: 700;
}
.sub__body th {
	white-space: nowrap;
}

/* =========================================================
   本文のパーツ（ブロックの className に当てる）
   ========================================================= */

/* --- 理念・方針の掲示。明朝で中央に置く --- */
/* 面はページヘッダーと同じベージュ（--paper）にしない。
   同じ色だと「薄い面が2つ続く」だけになり、理念の特別さが出ない */
.philosophy {
	margin: 0 0 40px;
	padding: 56px 40px;
	background: #f3f8f1;
	border-radius: 18px;
	text-align: center;
}
.philosophy p {
	margin: 0;
	color: #23301f;
	font-family: "Noto Serif JP", serif;
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 700;
	line-height: 2;
}

/* --- 制定日。「（2026年4月1日制定）」のような但し書き --- */
.enacted {
	margin-top: -.8em;
	color: #6a7282;
	font-size: 14px;
}

/* --- 行動指針。「一、」で始まる箇条書き --- */
.creed {
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
}
.creed li {
	position: relative;
	margin-bottom: .6em;
	padding-left: 2.2em;
	font-family: "Noto Serif JP", serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.9;
}
/* STORK SEが `.entry-content ul li::before` で丸（Font Awesome）を出すので、
   同じ疑似要素を上書きする。詳細度で勝つようクラスを重ねる */
.sub .sub__body .creed li::before {
	font-family: "Noto Serif JP", serif;
	content: "一、";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--green);
	transform: none;
}

/* --- 署名（代表挨拶の差出人） --- */
.signature {
	margin-top: 2.5em;
	line-height: 2;
}

/* --- 制作側の申し送り。素材が未入手の箇所に置く。差し替えたら削除する --- */

/* --- アクセス。左に住所ボックス、右に写真 ---
   ブロックの columns は使わない。レイアウトCSS（.wp-container-core-*-is-layout-*）は
   ブロックをレンダリングしたときだけ生成されるので、テンプレートに直接書くと効かない */
.access {
	display: flex;
	align-items: stretch;
	gap: 32px;
	margin-bottom: 40px;
}
.access__box {
	flex: 1 1 0;
	min-width: 0;
}
.access__figure {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}
.access__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 18px;
}
.access__box {
	padding: 40px;
	background: var(--paper);
	border-radius: 18px;
}
body .sub .sub__body.entry-content .access__box h3 {
	margin-top: 0;
}
.access__box p:last-child {
	margin-bottom: 0;
}
/* 地図へのボタン。トップの .btn と同じ角丸28px・緑 */
.btn-map {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 192px;
	min-height: 48px;
	padding: 8px 24px;
	background: var(--green-cta);
	border-radius: 28px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .2s ease;
}
body .sub .sub__body.entry-content a.btn-map {
	color: #fff;
}
.btn-map:hover {
	background: var(--green-cta-hover);
}

/* --- 沿革。年月と内容の2列。左に縦線を通す --- */
.history {
	position: relative;
	margin: 0;
	padding: 0;
}
.history__item {
	position: relative;
	display: flex;
	gap: 32px;
	padding: 0 0 28px 0;
}
/* 縦線。日付（.history__date）に載せると1行分の高さしか取れず、次の丸まで
   届かない。項目そのものを基準にして、下端から12px先（次の丸の中心）まで伸ばす */
.history__item::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: -12px;
	/* 丸は left:0 / 幅10px で中心が5px。線は幅2pxなので left:4px で中心が揃う */
	left: 4px;
	width: 2px;
	background: var(--line);
}
.history__item:last-child::before {
	display: none;
}
.history__date {
	position: relative;
	flex: 0 0 168px;
	padding-left: 24px;
	color: var(--green);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.9;
}
.history__date::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 10px;
	height: 10px;
	background: var(--green);
	border-radius: 50%;
}
.history__text {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	line-height: 1.9;
}

/* ===== lg: タブレット ===== */
@media (max-width: 1200px) {
	.page-head__inner { padding: 80px 40px 48px; }
	.sub .breadcrumb,
	.sub__body { padding-inline: 32px; }
	.sub__body { padding-top: 48px; padding-bottom: 80px; }
	body .sub .sub__body.entry-content h2 { margin-top: 64px; }
}

/* ===== md: スマートフォン ===== */
@media (max-width: 767px) {
	.page-head__inner { padding: 72px 20px 40px; }
	.sub .breadcrumb,
	.sub__body { padding-inline: 20px; }
	.subnav { padding-inline: 20px; padding-bottom: 64px; }
	/* 兄弟が多いページ（CSRの4ページなど）があるので、SPでは横幅いっぱいに積む。
	   .subnav__link は inline-flex なので、そのままだと幅が文字数ぶんになって不揃いになる */
	.subnav__list { flex-direction: column; align-items: stretch; gap: 10px; }
	.subnav__link { display: flex; }
	.sub__body {
		padding-top: 40px;
		padding-bottom: 64px;
	}
	body .sub .sub__body.entry-content h2 { margin-top: 56px; }
	body .sub .sub__body.entry-content h3 { font-size: 18px; }
	.philosophy { padding: 40px 24px; }
	/* 2列だと写真も住所も狭いので縦に積む */
	.access {
		flex-direction: column;
		gap: 24px;
	}
	.access__figure img { height: auto; }

	/* 表は2列のままだと項目名が潰れるので縦積みにする */
	.sub__body table,
	.sub__body tbody,
	.sub__body tr,
	.sub__body th,
	.sub__body td {
		display: block;
		width: auto;
	}
	.sub__body tr + tr { margin-top: -1px; }
	.sub__body th,
	.sub__body .spec td:first-child {
		border-bottom: none;
		white-space: normal;
		/* 縦積みでは1列目の25%指定を解く。詳細度が
		   （クラス2＋要素1＋疑似クラス1）あり、上の width: auto では負ける。
		   「最大通紙寸法（通常）」のような長い項目名が89.5pxに潰れていた */
		width: auto;
	}
	.sub__body td { padding-top: 14px; }
	.sub__body .spec td:first-child { padding-bottom: 8px; }

	/* 沿革も縦積み。年月の下に内容を置く */
	.history__item {
		flex-direction: column;
		gap: 4px;
		padding-bottom: 24px;
	}
	.history__date { flex: none; }
	.history__item { padding-bottom: 24px; }
	.history__item::before { bottom: -12px; }
	.history__text { padding-left: 24px; }
}

/* ===== sm: 小型スマートフォン ===== */
@media (max-width: 480px) {
	.page-head__inner { padding: 64px 16px 36px; }
	.sub .breadcrumb,
	.sub__body { padding-inline: 16px; }
	.sub__body th,
	.sub__body td { padding-inline: 16px; }
	.philosophy { padding: 32px 20px; }
}

/* =========================================================
   事業紹介の本文パーツ
   ========================================================= */

/* --- リード。見出しの下に置く一文 --- */
.lead {
	margin: 0 0 32px;
	color: var(--green);
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 700;
	line-height: 1.7;
	text-align: center;
}
.lead-center {
	margin: 0 0 56px;
	text-align: center;
}
/* 上の56pxは .sub__body p（margin:0 0 1.5em）に負けて24pxになっている。
   リードの直後に図（チラシ・写真）が来るときだけ、図の上を空けて48pxにする（2026-10-26 ユーザー指摘） */
.sub__body .lead-center + .figure {
	margin-top: 48px;
}

/* --- 2列。左右どちらにも本文と図版を置ける --- */
.cols {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	margin: 0 0 40px;
}
.cols__body,
.cols__figure {
	flex: 1 1 0;
	min-width: 0;
}
.cols__body > :last-child,
.cols__figure > :last-child {
	margin-bottom: 0;
}

/* --- 認証マーク。見出しの直下に中央で置く --- */
.cert-mark {
	margin: 0 0 32px;
	text-align: center;
}
/* .sub__body img の角丸8pxを打ち消す。
   FSCマークは素材自体が角丸の緑地を持っているので、重ねると角が欠ける */
.cert-mark img {
	display: inline-block;
	width: 160px;
	height: auto;
	border-radius: 0;
}

/* --- 小さな見出しラベル --- */
.label {
	margin: 0 0 8px;
	color: var(--green);
	font-size: 14px;
	font-weight: 700;
}

/* --- 特徴を3つ並べるバッジ。
   資料は赤・黄・緑の3色だが、サイトの配色は緑系で通しているので
   色分けはせず、同じ緑の枠で揃える --- */
.points {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}
/* 枠で囲むと3択のボタンに見える（2026-10-26 ユーザー指摘）ので、枠は付けず
   行頭のチェックと文字だけにする。押せるもの（.card・.btn）とは形を分ける */
.points__item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--green);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}
/* 本文のリストの字下げ（.sub__body ul の padding-left）が残ると右にずれるので、詳細度を上げて消す */
.sub .sub__body .points {
	justify-content: center;
	gap: 8px 32px;
	padding: 0;
}
/* STORK SEが行頭に出す丸の代わりに、緑のチェックを出す */
.sub .sub__body .points li {
	margin: 0;
	padding: 0;
}
.sub .sub__body .points li::before {
	content: "";
	position: static;
	flex: none;
	width: 6px;
	height: 12px;
	margin: 0 4px 4px 2px;
	background: none;
	border-right: 2.5px solid var(--green-light);
	border-bottom: 2.5px solid var(--green-light);
	border-radius: 0;
	transform: rotate(45deg);
}
@media (max-width: 767px) {
	.sub .sub__body .points {
		flex-direction: column;
		align-items: flex-start;
		width: fit-content;
		margin-inline: auto;
	}
}

/* --- 図版。写真・図をキャプション付きで置く。
   資料PDFからの切り出しは元が小さく、拡大するとぼやける。
   引き伸ばさず実寸で置き、カラムに収まらないときだけ縮める --- */
.figure {
	margin: 0 0 1.5em;
}
.figure__img {
	display: block;
	margin-inline: auto;
	max-width: 100%;
	height: auto;
}
/* 縦長の写真を横長に切り抜いて出す（製版事業のテナフレックス2枚。2026-10-23 ユーザー要望） */
.figure__img--landscape {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
/* 背景が透明の切り抜き画像は、切ると物が途中で切れるので枠の中に全体を収める */
.figure__img--contain {
	object-fit: contain;
}
.figure__caption {
	margin-top: 8px;
	color: #6a7282;
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
}

/* --- 素材待ちのプレースホルダー。
   「何が入るか」は直前のPHPコメント（差し替え用メモ）に書く。以前は data-note に
   書いて ::after で枠内に出していたが、社内向けの文が公開ページに出るので
   2026-10-22にやめた --- */
.ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 200px;
	margin: 0 0 1.5em;
	padding: 24px;
	background: #f7f7f5;
	border: 1px dashed #b9c4bb;
	border-radius: 8px;
	color: #6a7282;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}
.ph--square {
	flex: 1 1 0;
	min-height: 120px;
	margin: 0;
}
/* --- 動画（梱包事業の耐油紙紹介）。width/height属性から比率を取るので、
   読み込み前でも16:9の高さが確保されてガタつかない --- */
.movie__video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	background: #000;
}

/* --- 製版部の機械の写真。3枚を横に並べる（2026-10-27 修正依頼） --- */
.machines {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0 0 32px;
}
.machines__img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- AR案内。先方が見出し・QR・説明文・ARマークを1枚にまとめた画像を、小さく下に置く。
   .sub__body img（max-width:100%・角丸8px）より強くするため .sub__body を付ける。
   角丸は打ち消す（QRは角が欠けると読み取りに影響する） --- */
.sub__body .ar-image {
	display: block;
	width: 100%;
	max-width: 460px;
	height: auto;
	margin: 48px auto 56px;
	border-radius: 0;
}

/* --- 直通電話 --- */
.tel {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 40px 0;
	padding: 24px 32px;
	background: var(--paper);
	border-radius: 18px;
}
.tel__label {
	flex: 0 0 auto;
	margin: 0;
	padding: 10px 16px;
	border: 2px solid var(--green);
	border-radius: 8px;
	color: var(--green);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}
.tel__body {
	min-width: 0;
}
.tel__place {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}
.tel__number {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 700;
	line-height: 1.2;
}
.tel__number a {
	color: var(--ink);
	text-decoration: none;
}
.tel__address {
	margin: 8px 0 0;
	font-size: 14px;
}
/* .sub__body p（下に1.5em）が上の margin より強く効き、番号の下だけ大きく空いて
   ラベルも上にずれていた。枠の中の段落の余白をここで決め直す */
.sub__body .tel p { margin: 0; }
.sub__body .tel .tel__address { margin-top: 8px; }

/* --- 面いっぱいの帯。事業の基本理念など --- */
/* --- 番号付きの見出し。中央組みなので連番は見出しの上に出す --- */
body .sub .sub__body.entry-content h2.num::before {
	content: attr(data-num);
	color: var(--green-light);
	font-family: "Montserrat", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .08em;
}

/* --- 資料ダウンロードのボタン --- */
/* ラッパーに .btn-wrap は使わない。親テーマ（STORK SE）が同名のボタン用クラスを
   持っており、`.btn-wrap { margin: .5em auto 1em !important }` と
   `.btn-wrap a { ... }`（詳細度が .btn-doc より高い）でこちらの指定を潰すため。
   2026-09-09に実測して .btn-doc-wrap へ変えた */
/* ラッパーは <p> なので、本文の段落ルール `.sub__body p`（詳細度がひとつ上）に
   負ける。同じ深さで指定して margin を通す（2026-09-09に実測） */
.sub__body .btn-doc-wrap {
	margin: 32px 0 0;
	text-align: center;
}
.btn-doc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 12px 32px;
	background: var(--green-cta);
	border-radius: 28px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease;
}
.sub .sub__body a.btn-doc {
	color: #fff;
}
.btn-doc:hover {
	background: var(--green-cta-hover);
}

/* --- ページの最後に置く行き先ボタン（ベトナムのサイト・お問い合わせ）。
   .btn-doc と同じ形で、読ませる文字なので16px --- */
.sub__body .btn-cta-wrap {
	margin: 48px 0 0;
	text-align: center;
}
.btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 12px 32px;
	background: var(--green-cta);
	border-radius: 28px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease;
}
.sub .sub__body a.btn-cta {
	color: #fff;
}
.btn-cta:hover {
	background: var(--green-cta-hover);
}
/* お問い合わせ（parts/sub-cta.php）だけ、ヘッダーの「お問い合わせ」（style.css の nav-contact）と同じ上下2色＋影にする。
   一覧の「今いるページ」（.subnav__link--current・緑一色）と見分けがつくように（2026-10-27 ユーザー指摘）。
   ベトナムのサイトへのリンクも .btn-cta なので、.sub-cta の中に絞る */
.sub-cta .btn-cta {
	background: linear-gradient(180deg, #008236 50%, #01642a 50%);
	filter: drop-shadow(0 4px 3px rgba(13, 84, 43, .2)) drop-shadow(0 2px 2px rgba(13, 84, 43, .2));
}
.sub-cta .btn-cta:hover {
	background: linear-gradient(180deg, #01642a 50%, #004d20 50%);
}

/* --- 製品ページの最後の問い合わせ（parts/sub-cta.php） --- */
.sub-cta {
	margin: 64px 0 0;
	padding: 40px 24px;
	background: #f3f8f1;
	border-radius: 16px;
	text-align: center;
}
.sub__body .sub-cta__text {
	margin: 0 0 24px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
}
.sub__body .sub-cta__btn {
	margin: 0;
}

/* --- 先方のポスター。押すと原寸の画像を開く --- */
.poster__link {
	display: block;
	text-decoration: none;
}
.poster .figure__img {
	width: 100%;
	border-radius: 8px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
}
.sub__body .poster__hint {
	display: block;
	margin-top: 8px;
	color: var(--green);
	font-size: 16px;
	text-align: right;
	text-decoration: underline;
}

/* --- 輸送箱：段ボール製と木製の比較表。会社概要などの表はスマホで縦積みにしているが、
   比較表は横に並んでいないと比べられないので、スマホでも表のまま出す --- */
.sub__body .compare {
	margin: 0 0 48px;
}
.sub__body .compare table {
	font-size: 16px;
}
.sub__body .compare th,
.sub__body .compare td {
	display: table-cell;
	width: auto;
	text-align: center;
	vertical-align: middle;
}
/* 木製とたたんだ段ボール製を左右に並べて比べる（輸送箱）。
   比べるものなので、スマホでも縦に積まず横並びのまま。下端をそろえて高さの差を見せる */
/* 絵と文字を別の行にして（subgrid）、文字の行数が左右で違っても絵の下端と文字の上端がそろうようにする */
.sub__body .size-compare {
	/* 絵の高さを実物の高さ（--size、単位mm。テンプレート側で指定）に比例させ、チラシと同じ大きさの比で見せる。
	   --h は420mmぶんの表示の高さ。スマホでは2つが横に収まるよう、画面幅から逆算して縮める（2026-10-26 ユーザー指摘） */
	--h: min(240px, calc((100vw - 48px) / 2.6));
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	justify-content: center;
	column-gap: 48px;
	margin: 0 0 32px;
}
.sub__body .size-compare__item {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	align-items: end;
	justify-items: center;
	min-width: 0;
	margin: 0;
	text-align: center;
}
.sub__body .size-compare__item img {
	display: block;
	width: auto;
	max-width: none;
	height: calc(var(--h) * var(--size) / 420);
	/* 本文の画像の下余白（32px）を消し、文字との間は .size-compare__label の12pxだけにする */
	margin: 0;
}
.sub__body .size-compare__label {
	align-self: start;
	margin-top: 12px;
	color: var(--ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}
.sub__body .size-compare__size {
	display: block;
	font-weight: 400;
}
.sub__body .size-compare .nowrap {
	white-space: nowrap;
}
.sub__body .compare thead th {
	background: var(--paper);
}
/* 段ボール製の列を緑で目立たせる */
.sub__body .compare thead th:nth-child(2),
.sub__body .compare td:nth-of-type(1) {
	color: var(--green);
	font-weight: 700;
}
@media (max-width: 767px) {
	.sub__body .size-compare { column-gap: 16px; }
	/* 表・行の単位でも縦積み（display:block）が効いているので、全部表に戻す */
	.sub__body .compare table { display: table; width: 100%; }
	.sub__body .compare thead { display: table-header-group; }
	.sub__body .compare tbody { display: table-row-group; }
	.sub__body .compare tr { display: table-row; margin-top: 0; }
	.sub__body .compare th,
	.sub__body .compare td {
		display: table-cell;
		padding: 12px 8px;
		border-bottom: 1px solid var(--line-table);
		white-space: normal;
	}
}

/* --- ベトナムのロゴ。元画像は余白を除くと376×219pxしかなく、これより大きく出すとぼやける --- */
.vietnam-logo .figure__img {
	width: 280px;
}
/* 冒頭の文章。2段落を中央にまとめる */
.sub__body .vietnam-intro .lead-center {
	margin-bottom: 16px;
}
.sub__body .vietnam-intro__text {
	margin: 0;
	text-align: center;
}
/* 事務所の写真。文章との間を空けて、本文幅いっぱいに出す。
   .sub__body figure（margin:0 0 1.5em）より強くするため .sub__body を付ける */
.sub__body .vietnam-office {
	margin: 48px 0 64px;
}
.vietnam-office .figure__img {
	width: 100%;
	border-radius: 8px;
}
@media (max-width: 767px) {
	/* スマホでは改行位置がずれるので <br> を効かせない */
	.vietnam-intro__text br { display: none; }
	.sub__body .vietnam-office { margin: 32px 0 48px; }
}

/* ===== md: スマートフォン ===== */
@media (max-width: 767px) {
	.cols {
		flex-direction: column;
		gap: 24px;
	}
	.machines { grid-template-columns: 1fr; }
	.cert-mark img { width: 140px; }

	.points__item { flex: 1 1 100%; }
	.tel {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 20px;
	}
	.band { padding: 32px 20px; }
	.ph { min-height: 160px; }
}

/* =========================================================
   下層のカード一覧（事業紹介トップ・段ボール事業の製品）
   トップページの .business-card と同じ語彙。白地に薄緑の枠、角丸18px、
   右端に矢印の丸。押せるものなので、押せないラベル（.points__item）とは
   形を分けている
   ========================================================= */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}
.cards--tight {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}
/* 4枚など偶数の並びを2列にする。3列だと最後の1枚だけが次の行に残る。
   本文幅1040pxでは440×2＋gapで2列に収まり、3列にはならない。
   本文幅が440pxより狭いスマホでは、min()で1列の幅に縮める（440px固定だと右にはみ出す） */
.cards--half {
	grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
}
.card {
	margin: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 12px 14px rgba(0, 0, 0, .05);
	transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover {
	box-shadow: 0 16px 22px rgba(0, 0, 0, .1);
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.card { transition: none; }
	.card:hover { transform: none; }
}
/* STORK SEが行頭に出す丸を、このリストでは消す */
.sub .sub__body .cards li::before {
	content: none;
}
/* 本文のリストの字下げ（.sub__body ul の padding-left:1.4em）と、STORK SEが丸のために
   liに空ける左の余白が残ると、並びが右に21pxずれ、カードの中身も右に寄る（2026-10-26） */
.sub .sub__body .cards {
	margin: 0 0 40px;
	padding: 0;
}
/* 親テーマの .entry-content li の上下の余白（.7em）も残ると、縦の間隔だけ横より11px広がる */
.sub .sub__body .cards li {
	margin: 0;
	padding: 0;
}
.card__link {
	position: relative;
	display: block;
	height: 100%;
	padding: 16px 16px 20px;
	box-sizing: border-box;
	color: inherit;
	text-decoration: none;
}
/* 図版はプレースホルダー（.ph）と共用。カードの中では余白と高さを詰める */
/* カードの写真。カードごとに元画像の縦横比が違うので、
   3:2 に固定して cover で流す。縦長の写真は中央が出る */
.card__figure img {
	display: block;
	width: 100%;
	margin: 0 0 16px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 8px;
}
.card__figure.ph {
	min-height: 150px;
	margin: 0 0 16px;
	padding: 16px;
	border-radius: 8px;
}
.card__body {
	display: block;
	/* 右下の矢印に文字がかからないよう空ける */
	padding-right: 44px;
}
.card__title {
	display: block;
	color: var(--green);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}
.card__text {
	display: block;
	margin-top: 8px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
}
.card__arrow {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--green);
	border-radius: 50%;
	color: var(--green);
	transition: background-color .2s ease, color .2s ease;
}
/* 山形はCSSで描く。「›」の文字はグリフの中で下に約2.5pxずれており
   （10倍に拡大して実測）、円の中心に合わない。文字をやめると
   フォントに依存しなくなる */
.card__arrow::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	/* 45度回した正方形の見た目の中心は幾何中心とずれるので、その分を戻す */
	transform: rotate(45deg) translate(-1.5px, 1.5px);
}
.card:hover .card__arrow {
	background: var(--green);
	color: #fff;
}

/* 製品名だけのカードは、名前と矢印が同じ行に並ぶので下の余白を詰める */
.cards--tight .card__link { padding-bottom: 16px; }
.cards--tight .card__figure.ph { min-height: 130px; }

/* =========================================================
   お問い合わせフォーム（Contact Form 7）

   STORK SEが .wpcf7 input[type="text"] などに枠と幅を当てているので、
   打ち消しは .sub__body を足した高詳細度側にまとめて置く。
   （素のセレクタに書くと枠・角丸・余白が個別に負ける）
   ========================================================= */
/* 案内文とフォームは同じ幅にそろえる。左端が食い違って見えるため */
.contact-body {
	max-width: 640px;
	margin: 0 auto;
}
.sub__body .wpcf7 {
	margin: 40px 0 0;
}

/* CF7はフィールドを inline の span で包むので、幅指定が効くように block にする */
.sub__body .wpcf7-form-control-wrap {
	display: block;
}

.form-row {
	margin: 0 0 28px;
}
.sub__body .form-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}
.form-label label {
	cursor: pointer;
}

/* 必須のしるし。サイトに赤系の色がないため緑の塗りで出す */
.form-req {
	flex: none;
	padding: 3px 8px;
	background: var(--green);
	border-radius: 4px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.2;
}

/* 姓／名、セイ／メイ の小見出し */
.sub__body .form-sub {
	display: block;
	margin: 0 0 4px;
	color: var(--ink);
	font-size: 13px;
	font-weight: 500;
}

/* 姓と名を横に並べる */
.form-pair {
	display: flex;
	gap: 16px;
}
.form-pair__item {
	flex: 1 1 0;
	min-width: 0;
}

/* 郵便番号。前3桁と後4桁を数字の桁数どおりの幅にする */
.form-zip {
	display: flex;
	align-items: center;
	gap: 10px;
}
.sub__body .form-zip .wpcf7-form-control-wrap:first-of-type { width: 96px; }
.sub__body .form-zip .wpcf7-form-control-wrap:last-of-type { width: 120px; }
.form-zip__sep {
	color: var(--ink);
}

/* 住所は都道府県のセレクトと市区町村を縦に積む */
.sub__body .wpcf7 select + .wpcf7-form-control-wrap,
.sub__body .wpcf7 .wpcf7-form-control-wrap + .wpcf7-form-control-wrap {
	margin-top: 10px;
}

.sub__body .wpcf7 input[type="text"],
.sub__body .wpcf7 input[type="email"],
.sub__body .wpcf7 input[type="tel"],
.sub__body .wpcf7 select,
.sub__body .wpcf7 textarea {
	width: 100%;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--line-table);
	border-radius: 4px;
	color: var(--ink);
	/* 16px未満にするとiOSが入力時にページを拡大する */
	font-size: 16px;
	line-height: 1.6;
}
.sub__body .wpcf7 textarea {
	min-height: 200px;
	resize: vertical;
}
.sub__body .wpcf7 select {
	/* セレクトだけ幅いっぱいだと選択肢の短さに対して間延びする */
	max-width: 240px;
}
.sub__body .wpcf7 input:focus-visible,
.sub__body .wpcf7 select:focus-visible,
.sub__body .wpcf7 textarea:focus-visible {
	outline: 2px solid var(--green-light);
	outline-offset: 1px;
}
.sub__body .wpcf7 ::placeholder {
	color: #9a9a9a;
}

/* 送信ボタン。下層の .btn-doc と同じ形にそろえる */
.form-submit {
	margin: 40px 0 0;
	text-align: center;
}
.sub__body .wpcf7 input[type="submit"] {
	min-width: 240px;
	min-height: 56px;
	padding: 12px 32px;
	background: var(--green-cta);
	border: none;
	border-radius: 28px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease;
}
.sub__body .wpcf7 input[type="submit"]:hover {
	background: var(--green-cta-hover);
}

/* 売り込みお断りなどの注記 */
.sub__body .note {
	padding: 16px 20px;
	background: var(--paper);
	border-radius: 8px;
	font-size: 14px;
}

/* CF7が出す検証メッセージ */
.sub__body .wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #b3261e;
	font-size: 13px;
}
.sub__body .wpcf7 .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 14px;
}

@media (max-width: 767px) {
	.form-pair {
		flex-direction: column;
		gap: 16px;
	}
	.sub__body .wpcf7 select { max-width: none; }
	.sub__body .wpcf7 input[type="submit"] { width: 100%; }
}

/* =========================================================
   お知らせ（一覧・詳細）
   ========================================================= */

/* 詳細のページヘッダーに出す日付。タイトルの下に小さく添える */
.page-head__date {
	display: block;
	margin: 16px 0 0;
	color: var(--green);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	letter-spacing: .04em;
}

/* 本文の ul は padding-left:1.4em を持つ（クラス1＋要素1）ので、
   .post-list だけでは負けて左端がパンくずと62pxずれる */
.sub__body .post-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}
.sub__body .post-list .post-list__item {
	margin-bottom: 0;
}
/* 素のリストのマーカー（.sub__body li の指定）を消す */
.sub .sub__body .post-list li::before {
	content: none;
}
.post-list__item {
	border-bottom: 1px solid var(--line);
}
.post-list__link {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 24px;
	padding: 20px 44px 20px 8px;
	color: var(--ink);
	text-decoration: none;
	transition: background-color .2s ease;
}
.sub .sub__body a.post-list__link {
	color: var(--ink);
	text-decoration: none;
}
.post-list__link:hover {
	background: #f7faf6;
}
.post-list__date {
	flex: none;
	width: 8.5em;
	color: var(--green);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	letter-spacing: .02em;
}
.post-list__title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
}
.post-list__link:hover .post-list__title {
	text-decoration: underline;
}

/* 矢印はカードと同じくCSSで描く。「›」の字面は円の中心に来ない */
.post-list__arrow {
	position: absolute;
	top: 50%;
	right: 8px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-top: 1.5px solid var(--green);
	border-right: 1.5px solid var(--green);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.post-list__link:hover .post-list__arrow {
	transform: rotate(45deg) translate(2px, -2px);
}

/* ページ送り。1ページに収まるときは出力そのものが無い */
.sub__body .navigation.pagination {
	margin: 48px 0 0;
}
.sub__body .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.sub__body .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid var(--green);
	border-radius: 4px;
	color: var(--green);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.sub__body .nav-links .page-numbers.current,
.sub__body .nav-links a.page-numbers:hover {
	background: var(--green);
	color: #fff;
}

@media (max-width: 767px) {
	/* 日付とタイトルを縦に積む。8.5emの日付列を残すとタイトルが狭くなりすぎる */
	.post-list__link {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding: 16px 36px 16px 4px;
	}
	.post-list__date { width: auto; }
	.post-list__title { font-size: 15px; }
}