/*
Theme Name: WorkCAM 2026
Theme URI: https://www.workcam.co.jp/
Author: manomedia
Description: 株式会社ワークキャム 公式サイトテーマ。デザイン trial_pc_fix.ai（PC 1366px）に基づく。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: 制作者と株式会社ワークキャムの取り決めによる
Text Domain: workcam
*/

/* =========================================================================
   デザイン基準：アートボード幅 1366px（等倍）
   すべての数値はデザインからの実測値（px）です。

   横幅対応：左の縦罫（64px）と左余白（130px）は固定。
   コンテンツ幅だけがウィンドウに追従して伸縮します（左基準）。
   デザインどおり右端から見切れる要素（AI画像・サービス・実績・ニュース）は
   ウィンドウ右端まで伸びます。
   ========================================================================= */

:root {
	/* 色（デザインからのスポイト値） */
	--c-bg:      #ffca00; /* 地色の黄 */
	--c-ink:     #251e1c; /* 文字・罫（濃） */
	--c-rule:    #bc9b23; /* 1px 罫線（地色に約30%の濃度で乗る線） */
	--c-cream:   #eef8d7; /* 強みカードの地色 */
	--c-blue:    #000090; /* CONTACT タブ */
	--c-black:   #000000; /* 図形 */

	/* レイアウト */
	--rail:   63px;  /* 左の縦罫までの幅 */
	--gut-l: 129px;  /* 縦罫からコンテンツ左端まで（=画面左から194px／縦罫1pxを含む） */
	--gut-r:  24px;  /* コンテンツ右端から画面右端まで */

	/* 書体 */
	--f-en:     "akzidenz-grotesk-next-pro", "Helvetica Neue", arial, sans-serif; /* Adobe Fonts */
	--f-ja:     "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", meiryo, sans-serif;
	--f-serif:  "EB Garamond", "Adobe Garamond Pro", "Times New Roman", serif;
	--f-grotesk:"akzidenz-grotesk-next-pro", "Helvetica Neue", arial, sans-serif;
	--f-din:    "Barlow", "DIN Pro", "Helvetica Neue", arial, sans-serif;
}

/* -------------------------------------------------------------------------
   リセット
   ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 58px;   /* ページ内リンクの移動先が固定ヘッダーに隠れないように */
}

body {
	margin: 0;
	line-break: strict;
	overflow-wrap: break-word;
	min-width: 320px;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--f-ja);
	font-weight: 700;
	font-size: 14px;
	line-height: 30px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 8px 16px;
	background: var(--c-ink);
	color: var(--c-bg);
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------------------------------
   ヘッダー（デザイン：高さ58px／下罫1px／ロゴ左22px／ナビ右44px）
   スクロールしても画面上端に固定（sticky なので下のレイアウトは動かない）
   ---------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 70;   /* CONTACT タブ（50）より前面。SP のドロワー（ヘッダー内）もこの中で重なる */
	height: 58px;
	border-bottom: 1px solid var(--c-rule);
	background: var(--c-bg);
}
/* ドロワー展開中はヘッダー下の罫線を消す（デザインに罫線が無い） */
body.is-menu-open .site-header { border-bottom-color: transparent; }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding: 0 42px 0 22px;
}

/* ロゴ：デザインでは「Work」＝ゴシックBold／「CAM」＝Garamond の組文字。
   正式なロゴデータ（SVG）が支給され次第、カスタムロゴ機能で差し替え可能。 */
.site-logo {
	display: flex;
	align-items: baseline;
	line-height: 1;
}
.site-logo__work {
	font-family: var(--f-ja);
	font-weight: 900;
	font-size: 26px;
	letter-spacing: -0.01em;
}
.site-logo__cam {
	font-family: var(--f-serif);
	font-weight: 500;
	font-size: 23px;
	letter-spacing: 0.01em;
}
.custom-logo { max-height: 38px; width: auto; }

.gnav__list {
	display: flex;
	align-items: center;
	gap: 48px;
}
.gnav__item a,
.gnav__list > li > a {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	transition: opacity .25s;
}
.gnav__list > li > a:hover { opacity: .55; }

/* PC のデザインにドロップダウンが無いため、子階層は SP のドロワーだけに出す */
.gnav .sub-menu { display: none; }

/* ハンバーガー（SPのみ。デザイン：幅26px・3本線） */
.menu-toggle {
	display: none;
	position: relative;
	width: 26px;
	height: 14px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.menu-toggle__bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: var(--c-ink);
	transition: transform .3s, opacity .2s;
}
.menu-toggle__bar:nth-child(1) { top: 0; }
.menu-toggle__bar:nth-child(2) { top: 50%; margin-top: -0.75px; }
.menu-toggle__bar:nth-child(3) { bottom: 0; }
/* 開いた状態は「×」。デザイン実測 23×13（平たいX）に合わせて 28deg で交差させる */
.menu-toggle[aria-expanded="true"] .menu-toggle__bar { background: rgba(37, 30, 28, .45); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(6.25px) rotate(28deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-6.25px) rotate(-28deg); }

/* -------------------------------------------------------------------------
   CONTACT タブ（デザイン：#000090／幅32pxの縦長＋幅63pxの内側、2段のシルエット）
   画面に固定。位置はデザイン実測（上から553px）を基本に、画面の高さが足りないときは
   タブの下端が画面の下から24pxに収まるよう上へ寄せる（ヘッダーの下20pxより上には行かない）
   ---------------------------------------------------------------------- */

.contact-tab {
	position: fixed;
	left: 0;
	top: clamp(78px, calc(100vh - 334px), 553px);
	z-index: 50;
	display: block;
	width: 63px;
	height: 310px;
}
.contact-tab__narrow,
.contact-tab__wide {
	position: absolute;
	left: 0;
	background: var(--c-blue);
}
.contact-tab__narrow { top: 0;    width: 32px; height: 310px; }
.contact-tab__wide   { top: 30px; width: 63px; height: 249px; }

.contact-tab__label {
	/* 文字は太い部分（63×249、上から30px）の上下左右の中央に置く */
	position: absolute;
	left: 50%;
	top: 154.5px;   /* 30 + 249 / 2 */
	transform: translate(-50%, -50%);
	/* 最後の文字の後ろに付く字間と同じ分を上にも足し、字面が上下の中央に来るようにする */
	padding-top: 0.063em;
	color: #fff;
	font-family: var(--f-din);
	font-weight: 700;
	/* デザイン実測：文字の高さ14px・全長90px */
	font-size: 19.8px;
	line-height: 1;
	letter-spacing: 0.063em;
	writing-mode: vertical-rl;
	white-space: nowrap;
}
.contact-tab:hover .contact-tab__narrow,
.contact-tab:hover .contact-tab__wide { background: #1a1aa8; }

/* -------------------------------------------------------------------------
   本文の器：左に縦罫。以降のセクションは上罫で区切られる。
   ---------------------------------------------------------------------- */

.site-main {
	margin-left: var(--rail);
	border-left: 1px solid var(--c-rule);
}

.section {
	border-top: 1px solid var(--c-rule);
	padding: 138px var(--gut-r) 0 var(--gut-l);
}

/* セクション見出し（英字 Akzidenz-Grotesk Next Pro Bold 47.5px＋和文28px）
   デザイン実測：英字の字面上端＝セクション上端＋150px、
   和文の字面上端＝セクション上端＋227px
   47.5px／字送り0 で、5つの見出しすべてがデザインの字面幅と ±2.4px 以内で一致する */
.sec-head__en {
	font-family: var(--f-en);
	font-weight: 700;
	font-size: 47.5px;
	line-height: 49px;
	letter-spacing: 0;
	/* 字面上端をデザインの位置（セクション上端＋150px）に合わせる。
	   下の和文の margin-top で同じ分を戻しているので、以降の要素は動かない。 */
	padding-top: 5.5px;
}
/* PC は1行、SP は2行に折り返す見出しがあるため出し分ける */
.br-sp { display: none; }

.sec-head__ja {
	margin-top: 31.5px;
	font-size: 26px;
	font-weight: 700;
	/* line-height は 28px 固定。字送りを 29px（デザイン実測）にそろえるため、
	   字面を小さめにして字間を広げている（こぶりなゴシックの字面の再現）。 */
	line-height: 28px;
	letter-spacing: 0.13em;
}

/* -------------------------------------------------------------------------
   ボタン（デザイン：高さ63px／2px罫／中央にラベル／右端に▶）
   ---------------------------------------------------------------------- */

.btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 63px;
	border: 2px solid var(--c-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	transition: background-color .25s, color .25s;
}
.btn__arrow {
	position: absolute;
	right: 25px;
	top: 50%;
	width: 0;
	height: 0;
	margin-top: -10px;
	border-style: solid;
	border-width: 10px 0 10px 17px;
	border-color: transparent transparent transparent var(--c-ink);
	transition: border-color .25s, transform .25s;
}
.btn:hover { background: var(--c-ink); color: var(--c-bg); }
.btn:hover .btn__arrow {
	border-left-color: var(--c-bg);
	transform: translateX(6px);
}

/* -------------------------------------------------------------------------
   HERO（デザイン：高さ869px）
   3行の重ね組み。セリフの「Good」とグロテスクの大文字を段差で重ねる。

   PC はファーストビューが画面ぴったり（ヘッダー＋ヒーロー＝画面の高さ）になるよう、
   ヒーローの高さを画面に合わせ、文字と位置をデザイン（869px）からの比率 --hero-u で伸縮する。
   画面の高さ 927px（＝58＋869）のときデザインと同じ寸法になる。
   横幅が足りない（縦長の）画面では横幅で縮め、上下中央に置く。
   ---------------------------------------------------------------------- */

.hero {
	/* 1px あたりの伸縮率（高さ基準／横幅基準の小さいほう。極端な画面では 0.55〜1.6 倍に留める） */
	--hero-u: clamp(0.55px, min(calc((100vh - 58px) / 869), calc((100vw - 64px) / 1302)), 1.6px);
	position: relative;
	height: calc(100vh - 58px);
	height: calc(100svh - 58px);
	min-height: calc(var(--hero-u) * 869);
}

.hero__stage {
	position: absolute;
	/* 3行を1つのかたまりとして上下左右の中央に置く（SCROLL と同じ中心軸）。
	   幅はいちばん広い行「Good＋ONE OFF」の字面幅に合わせた版面幅。 */
	top: 50%;
	left: 50%;
	width: calc(var(--hero-u) * 826.5);    /* 「Good」左端〜「ONE OFF」右端の字面幅 */
	height: calc(var(--hero-u) * 869);
	transform: translate(-50%, -50%);
}

/* 中央のアニメーション GIF（421×528 を2倍で書き出し・背景透明）。ヒーローの上下左右の中央、文字の上に重ねる */
.hero__anim {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	width: calc(var(--hero-u) * 421);
	height: calc(var(--hero-u) * 528);
	max-width: none;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.hero__good,
.hero__word {
	position: absolute;
	display: block;
	line-height: 1;
	white-space: nowrap;
}

/* 「Good」＝ Garamond。デザイン実測：キャップ高 96px。
   left は .hero__stage（中央寄せ）からの相対位置。 */
.hero__good {
	left: calc(var(--hero-u) * -6.5);   /* G の左サイドベアリング分を戻し、字面を版面の左端に合わせる */
	font-family: var(--f-serif);
	font-weight: 400;
	font-size: calc(var(--hero-u) * 145);
	letter-spacing: 0.007em;
}
.hero__good--1 { top: calc(var(--hero-u) * 67); }
.hero__good--2 { top: calc(var(--hero-u) * 295); }
.hero__good--3 { top: calc(var(--hero-u) * 523); }

/* 大文字＝グロテスク。デザイン実測：キャップ高 98px。
   「Good」との横のズレ幅 243px はデザインどおり。 */
.hero__word {
	left: calc(var(--hero-u) * 236.5);  /* 「Good」との字面のズレ幅 243px − サイドベアリング 6.5px */
	font-family: var(--f-grotesk);
	font-weight: 700;
	font-size: calc(var(--hero-u) * 137);
	letter-spacing: 0;
}
.hero__word--1 { top: calc(var(--hero-u) * 186); }
.hero__word--2 { top: calc(var(--hero-u) * 415); }
.hero__word--3 { top: calc(var(--hero-u) * 645); }


/* SCROLL（デザイン実測：字面 y 894–901／左罫の右側で中央） */
.hero__scroll {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--hero-u) * 24);
	text-align: center;
	font-family: var(--f-din);
	font-weight: 700;
	font-size: calc(var(--hero-u) * 11);
	line-height: 1;
	letter-spacing: 0;
}

/* -------------------------------------------------------------------------
   WORKCAM STRONG POINT
   デザイン実測：カード 349×348／間隔51px／3列でコンテンツ幅ぴったり
   ---------------------------------------------------------------------- */

.section--strength { padding-bottom: 64px; }

.strength {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 51px;
	margin-top: 94px;
}

.strength__card {
	position: relative;
	aspect-ratio: 349 / 348;
	overflow: hidden;
	background: var(--c-cream);
	padding: 26px 24px 0;
}
.strength__title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.015em;
}
.strength__en {
	margin-top: 12px;
	font-family: var(--f-din);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}
.strength__fig--sp { display: none; }

.strength__fig {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

/* 本文はデザインどおり3行までを表示（カード高さと揃える） */
.strength__text {
	margin-top: 10px;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 0.04em;
	text-align: justify;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.section--strength .btn { margin-top: 25px; }

/* -------------------------------------------------------------------------
   AI-POWERED SERVICES / OUR WORKS
   右端から見切れる画像＋右下に黄色のキャプション
   ---------------------------------------------------------------------- */

.section--ai    { padding-bottom: 0; }
.section--works { padding-bottom: 35px; }

/* 右端まで伸ばす（セクションの右余白を打ち消す）。画像はリンクで、マウスを乗せると少し拡大する */
a.figure-bleed { display: block; }
a.figure-bleed:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -2px; }
a.figure-bleed:hover .figure-bleed__img,
a.figure-bleed:focus-visible .figure-bleed__img { transform: scale(1.04); }

.figure-bleed {
	position: relative;
	margin-top: 95px;
	margin-right: calc(var(--gut-r) * -1);
	overflow: hidden;
}
/* AI 画像は CAD 画面のため、拡大時に見切れても地が馴染むよう背景色を敷く */
.section--ai .figure-bleed { height: 500px; background: #212830; }
.figure-bleed--works { height: 454px; margin-top: 94px; background: #fff; }
.section--works .btn { margin-top: 35px; }

.figure-bleed__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	max-width: none;
	transition: transform .5s;
}

/* キャプション（デザイン実測：幅534px・高さ167px・右下寄せ） */
.figure-bleed__caption {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 534px;
	min-height: 167px;
	padding: 23px 45px 23px 41px;
	background: var(--c-bg);
}
.figure-bleed__caption p,
.figure-bleed__caption span {
	display: block;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 0.04em;
	text-align: justify;
}

/* -------------------------------------------------------------------------
   CORE SERVICES
   デザイン実測：カード 327×484／間隔27px／右端から見切れる横並び
   ---------------------------------------------------------------------- */

.section--services { padding-bottom: 41px; }

.services {
	display: flex;
	gap: 27px;
	margin-top: 93px;
	margin-right: calc(var(--gut-r) * -1);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.services::-webkit-scrollbar { display: none; }

.services__item {
	flex: 0 0 327px;
	scroll-snap-align: start;
}

.services__card {
	display: block;
	height: 484px;
	border: 1px solid var(--c-rule);
	padding: 0 0 0 3px;
	overflow: hidden;
}
.services__num {
	display: block;
	margin-top: -2px;
	font-family: var(--f-din);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0;
}
.services__title {
	margin-top: 44px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.services__thumb {
	display: block;
	margin-top: 6px;
	margin-left: -3px;
	height: 395px;
	overflow: hidden;
}
.services__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s;
}
.services__card:hover .services__thumb img { transform: scale(1.04); }

.section--services .btn { margin-top: 40px; }

/* -------------------------------------------------------------------------
   NEWS
   デザイン実測：サムネイル 363×215／間隔42px／右端から見切れる横並び
   ---------------------------------------------------------------------- */

.section--news { padding-bottom: 155px; }

.news {
	display: flex;
	gap: 42px;
	margin-top: 91px;
	margin-right: calc(var(--gut-r) * -1);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.news::-webkit-scrollbar { display: none; }

.news__item { flex: 0 0 363px; }

.news__thumb {
	display: block;
	height: 215px;
	overflow: hidden;
}
.news__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s;
}
.news__link:hover .news__thumb img { transform: scale(1.04); }

/* アイキャッチが無いニュースのロゴ（トップ・ニュース一覧共通）。枠の幅に合わせて伸縮 */
.news__thumb,
.news-card__thumb {
	container-type: inline-size;
	background: var(--c-cream);
}
.thumb-logo {
	display: flex;
	align-items: baseline;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	color: var(--c-ink);
	line-height: 1;
	transition: transform .5s;
}
.thumb-logo .site-logo__work { font-size: 26px; font-size: 9.5cqw; }
.thumb-logo .site-logo__cam  { font-size: 23px; font-size: 8.4cqw; }
.news__link:hover .thumb-logo,
.news-card__link:hover .thumb-logo { transform: scale(1.04); }

.news__date {
	display: block;
	margin-top: 29px;
	font-family: var(--f-din);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.01em;
}
.news__title {
	margin-top: 18px;
	font-size: 16px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
   フッター（デザイン未確定。最下部の罫線までをデザインどおりに再現し、
   その下は地色のまま。確定後にこのブロックへ実装する）
   ---------------------------------------------------------------------- */

.site-footer {
	border-top: 1px solid var(--c-rule);
	padding: 60px var(--gut-r) 60px calc(var(--rail) + var(--gut-l));
	font-size: 12px;
	line-height: 24px;
	letter-spacing: 0.06em;
}

/* -------------------------------------------------------------------------
   下層ページの最低限のスタイル（デザイン未支給のための暫定）
   ---------------------------------------------------------------------- */

.page-body {
	padding: 90px var(--gut-r) 120px var(--gut-l);
}
.page-body__title {
	font-size: 32px;
	line-height: 1.4;
	margin-bottom: 30px;
}
.page-body__content p { margin-bottom: 24px; font-weight: 400; }
.page-body__content a { text-decoration: underline; }

/* =========================================================================
   スマートフォン（デザイン：ワークキャム様スマホ版デザイン20260902 / 幅390px）

   PC（1366px）と同じく、デザイン画像から1pxずつ実測した値で組んでいます。
   セクションの区切り（デザイン実測 y 座標）
     ヘッダー下 52 / ヒーロー下 664 / 強み下 1915.7 / AI下 2664
     サービス下 3371.7 / 実績下 4097 / ニュース下 4637

   999px 以下でこのレイアウトに切り替わります。768〜999px（タブレット）は
   スマホ用レイアウトが横に伸びた状態になります。
   ========================================================================= */

@media (max-width: 999px) {

	:root {
		--rail:  34px;   /* 左の縦罫までの幅 */
		--gut-l: 30.5px; /* 縦罫からコンテンツ左端まで（=画面左から66.5px） */
		--gut-r: 22px;   /* コンテンツ右端から画面右端まで */
	}

	/* ---- ヘッダー（高さ52px／ロゴ左52.3px／ハンバーガー右17.3px） ---- */

	html { scroll-padding-top: 52px; }
	.site-header { height: 52px; }
	/* SP のデザインでは、左の縦罫がヘッダーの中（ロゴの左）まで通っている。
	   ドロワーを開いたときのデザインには無いので、そのときは消す */
	.site-header::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: var(--rail);
		width: 1px;
		background: var(--c-rule);
	}
	body.is-menu-open .site-header::before { display: none; }
	.site-header__inner { padding: 0 17px 0 52px; }

	.menu-toggle { display: block; }

	/* ---- ドロワーメニュー（デザイン：スマホ版デザイン ページ2／390×664.7） ----
	   親項目は左、子項目は右の2カラム。区切り罫は左66.5px から画面右端まで。 */
	.gnav {
		position: fixed;
		inset: 52px 0 0;
		z-index: 60;   /* CONTACT タブ（50）より前面に */
		background: var(--c-bg);
		padding: 39.2px 0 60px 66.5px;
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .3s, transform .3s, visibility .3s;
	}
	.gnav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.gnav .sub-menu { display: block; }

	.gnav__list {
		display: block;
		gap: 0;
	}
	.gnav__list > li {
		display: flex;
		align-items: flex-start;
		column-gap: 8px;   /* 親項目が長いときも子項目とくっつかないように */
		padding: 19px 0 18.8px;
		border-bottom: 1px solid var(--c-rule);
	}
	/* 親項目：18px。左カラムの幅は子項目の開始位置（画面左から221.7px）に合わせる */
	.gnav__item > a,
	.gnav__list > li > a {
		/* 子項目の開始位置（画面左から221.7px）に合わせる。
		   子を持たない項目は 155.2px を超えて伸びてよい（お問合せ・お見積り） */
		flex: 0 0 auto;
		/* 390px 幅で 147.2px＋すき間 8px＝155.2px。それより狭い画面では、改行しない子項目が収まるよう縮める */
		min-width: clamp(96px, calc(100vw - 242.5px), 147.2px);
		white-space: nowrap;
		padding: 0;
		font-size: 18px;
		line-height: 29.3px;
		letter-spacing: 0;
	}

	/* 子項目：14px・親より薄い色。行頭に 9.7×4px のダッシュ */
	.gnav .sub-menu li > a {
		display: flex;
		align-items: baseline;
		font-size: 14px;
		font-weight: 700;
		line-height: 29.3px;
		letter-spacing: 0;
		white-space: nowrap;   /* 子項目は1行で表示 */
		color: rgba(37, 30, 28, .72);
	}
	.gnav .sub-menu li > a::before {
		content: "";
		flex: 0 0 9.7px;
		height: 4px;
		margin-right: 5.7px;
		background: currentColor;
		transform: translateY(-4px);
	}

	/* ---- CONTACT タブ（デザイン実測：上から261.3px／細部17×161.4／太部34.3×129.3）。画面に固定 ---- */

	.contact-tab { top: clamp(72px, calc(100vh - 181.4px), 261.3px); width: 34.3px; height: 161.4px; }
	.contact-tab__narrow { width: 17px; height: 161.4px; }
	.contact-tab__wide   { top: 16.4px; width: 34.3px; height: 129.3px; }
	/* 文字の高さ9.3px・全長61.3px。太い部分（上から16.4px・高さ129.3px）の中央に置く */
	.contact-tab__label  {
		top: 81.05px;   /* 16.4 + 129.3 / 2 */
		padding-top: 0.082em;
		font-size: 13.1px;
		letter-spacing: 0.082em;
	}

	/* ---- セクション共通 ---- */

	.section { padding: 112.7px var(--gut-r) 0 var(--gut-l); }

	.br-sp { display: inline; }

	/* 英字見出し 23px（PCの約半分）。2行に折り返す見出しがあるため line-height 固定 */
	.sec-head__en {
		font-size: 23px;
		line-height: 25.3px;
		padding-top: 3px;
	}
	.sec-head__ja {
		margin-top: 21.5px;
		font-size: 20px;
		line-height: 21.5px;
		letter-spacing: 0.13em;
	}

	/* ---- ボタン（高さ41px／文字12px／右余白22px） ---- */

	.btn {
		height: 41px;
		border-width: 1.5px;
		font-size: 12px;
		letter-spacing: 0.04em;
	}
	.btn__arrow {
		right: 16px;
		margin-top: -6.5px;
		border-width: 6.5px 0 6.5px 11px;
	}

	/* ---- HERO（高さ612px。3行を縦に積む） ---- */

	/* SP はデザインどおりの固定寸法（画面の高さには合わせない） */
	.hero {
		height: 612px;
		min-height: 0;
	}

	/* 3行のかたまりを左右中央に置く（PC と同じ考え方）。
	   幅は「Good」の字面の左端〜「ONE OFF」の字面の右端（295.2px） */
	.hero__stage {
		top: 0;
		bottom: 0;
		left: 50%;
		width: 295.2px;
		height: auto;
		transform: translateX(-50%);
	}

	/* アニメーションは SP デザインのグラフィックの大きさ（約52%）で中央に */
	.hero__anim {
		width: 219.6px;
		height: 275.4px;
	}

	/* 「Good」＝ 67.5px、大文字＝ 66px（デザインの字面幅から逆算）。
	   left は .hero__stage（左右中央のかたまり）の左端からの相対位置。 */
	.hero__good {
		left: -3.04px;   /* G の左サイドベアリング分を戻し、字面をかたまりの左端に合わせる */
		font-size: 67.5px;
	}
	.hero__good--1 { top: 77px; }
	.hero__good--2 { top: 233.5px; }
	.hero__good--3 { top: 390px; }

	.hero__word {
		left: 10.96px;   /* 「Good」との字面のズレ幅（デザインどおり） */
		font-size: 66px;
	}
	.hero__word--1 { top: 144.5px; }
	.hero__word--2 { top: 301.5px; }
	.hero__word--3 { top: 457.5px; }

	.hero__scroll {
		bottom: 19.4px;
		font-size: 10.6px;
	}

	/* ---- WORKCAM STRONG POINT ---- */

	/* このセクションだけデザイン上の上アキが狭い（77px） */
	.section--strength { padding-top: 69.7px; padding-bottom: 34px; }

	.strength {
		display: block;
		margin-top: 64px;
		margin-right: calc(var(--gut-r) * -1);   /* カードは右端まで伸びる */
	}
	.strength__item + .strength__item { margin-top: 57px; }

	.strength__card {
		aspect-ratio: auto;
		height: 179px;
		padding: 20px 24px 0 17px;
	}
	/* アクセスのカードは PC と SP で図形が違う（SP はビルが無い） */
	.strength__fig--pc { display: none; }
	.strength__fig--sp { display: block; }

	.strength__title { font-size: 24.5px; }
	.strength__en { margin-top: 15px; font-size: 12px; }

	.strength__text {
		margin-top: 12px;
		margin-right: var(--gut-r);
		/* 字送り 13.06px（デザイン実測）に合わせる */
		font-size: 12.8px;
		letter-spacing: 0.02em;
		line-height: 28px;
		-webkit-line-clamp: 2;   /* デザインは2行 */
	}

	.section--strength .btn { margin-top: 90.7px; }

	/* ---- AI / OUR WORKS（画像は右端まで、キャプションは画像の下） ---- */

	.section--ai { padding-bottom: 28.7px; }
	.section--works { padding-bottom: 32.3px; }

	/* SP はキャプションが画像の下に出るので、高さは画像側に持たせる */
	.figure-bleed {
		margin-top: 64px;
		height: auto;
		overflow: visible;
	}
	/* SP は画像が原寸のまま並ぶので、PC用に敷いた背景色は不要 */
	.section--ai .figure-bleed,
	.figure-bleed--works { height: auto; background: none; }
	/* SP は画像の切り取り比率が PC と大きく違うため、中央basis で見せる。
	   本番用の画像に差し替える際は、SP用の切り取りもご指定ください。 */
	.section--ai .figure-bleed__img { height: 297px; object-position: center; }
	.figure-bleed--works .figure-bleed__img { height: 296px; object-position: center; }

	.figure-bleed__caption {
		position: static;
		width: auto;
		min-height: 0;
		margin-right: var(--gut-r);
		padding: 8px 0 0;
		background: none;
	}
	.figure-bleed__caption p,
	.figure-bleed__caption span {
		font-size: 12.8px;
		letter-spacing: 0.02em;
		line-height: 28px;
	}

	/* デザイン上、SP版の OUR WORKS にはボタンがありません（PC版にはあります）。
	   意図が確認できるまでデザインどおり非表示にしています。
	   表示する場合はこの1行を削除してください。 */
	.section--works .btn { display: none; }

	/* ---- CORE SERVICES（カード 241.3×358.7／間隔19.7px） ---- */

	.section--services { padding-bottom: 34px; }

	.services {
		gap: 19.7px;
		margin-top: 64px;
	}
	.services__item { flex: 0 0 241px; }
	.services__card {
		height: 358px;
		padding-left: 2px;
	}
	.services__num { margin-top: -1px; font-size: 15px; }
	.services__title { margin-top: 32px; font-size: 15.5px; }
	.services__thumb {
		margin-top: 5px;
		margin-left: -2px;
		height: 292px;
	}

	.section--services .btn { margin-top: 26px; }

	/* ---- NEWS（写真 242.7×144.3／間隔28.7px） ---- */

	.section--news { padding-bottom: 52px; }

	.news {
		gap: 28.7px;
		margin-top: 64px;
	}
	.news__item { flex: 0 0 243px; }
	.news__thumb { height: 144px; }
	.news__date { margin-top: 15px; font-size: 12.5px; }
	.news__title { margin-top: 12px; font-size: 13px; line-height: 28px; }

	/* ---- フッター・下層ページ ---- */

	.site-footer { padding: 40px var(--gut-r) 40px calc(var(--rail) + var(--gut-l)); }
	.page-body { padding: 60px var(--gut-r) 80px var(--gut-l); }
	.page-body__title { font-size: 22px; }
}

@media (min-width: 1000px) {
	body { min-width: 1000px; }
}

/* =========================================================================
   サービスページ（page-service.php／固定ページ スラッグ service）
   デザイン：trace/service.png（PC 1366px）／service_sp.jpg（SP 390px）
   トップページと同じく、デザイン画像からの実測値で組んでいます。
   セクション境界（デザイン実測 y 座標）
     PC：ヘッダー下 57 / 導入下 898 / AI下 2288 / 基本サービス下 4005
     SP：ヘッダー下 52 / 導入下 663.7 / AI下 2268.2
   ========================================================================= */

/* このページはカード・2カラムの右端がトップページより2px 外（画面右から22px） */
.page-service,
.page-works,
.page-strongpoints,
.page-service-detail,
.page-sub,
.page-work-detail { --gut-r: 22px; }

/* 和文見出しの位置（このページはトップページより1.5px 詰まる） */
.page-service .sec-head__ja,
.page-works .sec-head__ja,
.page-strongpoints .section--intro .sec-head__ja,
.page-service-detail .sec-head__ja,
.page-sub .sec-head__ja { margin-top: 30px; }
/* 基本サービスの見出しだけデザイン上さらに1.7px 詰まる */
.page-service .section--svc-core .sec-head__ja { margin-top: 28.3px; }

/* ---- 導入（OUR SERVICES）：ヘッダー直下なので上罫なし ---- */

/* 英字の字面上端＝ヘッダー下＋87px */
.page-service .section--intro,
.page-works .section--intro,
.page-strongpoints .section--intro,
.page-service-detail .section--intro,
.page-sub .section--intro {
	border-top: 0;
	padding-top: 76px;
	padding-bottom: 0;
}

/* INDEX：暗い五角形のタグ＋下線付きのページ内リンク */
.index-nav {
	display: flex;
	align-items: center;
	margin-top: 89.5px;
}
.index-nav__tag {
	flex: none;
	display: flex;
	align-items: center;
	width: 81px;
	height: 28px;
	padding: 0 0 3px 12px;   /* 下3px で文字を1.5px 持ち上げる（デザイン実測の字面位置） */
	/* 本体68px＋45°の矢印13px（デザイン実測） */
	clip-path: polygon(0 0, 68px 0, 81px 50%, 68px 100%, 0 100%);
	background: var(--c-ink);
	color: var(--c-bg);
	font-family: var(--f-din);
	font-weight: 700;
	font-size: 15.5px;
	line-height: 1;
	letter-spacing: 0.04em;
}
.index-nav__list {
	display: flex;
	gap: 33px;
	margin-left: 41px;
}
.index-nav__list a {
	display: block;
	/* 上下に同じだけ足して、文字の位置を変えずに下線だけ下げる */
	padding: 2.2px 0 4.2px;
	border-bottom: 1.5px solid var(--c-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.13em;
	transition: opacity .25s;
}
.index-nav__list a:hover { opacity: .55; }

/* ヒーロー画像：コンテンツ左端から画面右端まで（1172×499） */
.page-hero {
	display: block;   /* <picture> で画像を出し分けるページがあるため */
	margin-top: 35px;
	margin-right: calc(var(--gut-r) * -1);
	height: 499px;
	overflow: hidden;
}
.page-hero__img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* ---- AI-POWERED SERVICES ---- */

/* 英字の字面上端＝セクション上端＋112px */
.page-service .section--svc-ai {
	padding-top: 100px;
	padding-bottom: 70.9px;
}

/* CAD 画像：右端まで（PC 1172×501） */
.page-figure {
	display: block;
	margin-top: 51.5px;
	margin-right: calc(var(--gut-r) * -1);
	height: 501px;
	overflow: hidden;
}
.page-figure img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: left center;
}

/* 2カラム（各555px・間隔40px） */
.ai-flow {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 40px;
	margin-top: 64px;
}
.ai-flow__title {
	font-size: 21.7px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
}
.ai-flow__thumb {
	margin-top: 32.3px;
	height: 324px;
	overflow: hidden;
}
.ai-flow__thumb img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
/* 3D プリントの写真はヒーローと同じ画像を、デザインの切り取りに合わせて使う */

/* 本文はデザインどおり3行で切る（トップページの強みカードと同じ組み） */
.ai-flow__text {
	margin-top: 21.1px;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 0.04em;
	text-align: justify;
}

/* ---- CORE SERVICES：3列×2段（カード 363×539） ---- */

/* 英字の字面上端＝セクション上端＋113px。下は罫線まで302px */
.page-service .section--svc-core {
	padding-top: 101px;
	padding-bottom: 191px;   /* 最後の写真の下端 → 罫線（デザイン実測 4312 → 4503） */
}

.br-svc { display: none; }

.services--grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 31px;
	row-gap: 71px;
	margin-top: 52.2px;
	margin-right: 0;
	overflow: visible;
	scroll-snap-type: none;
}
.services--grid .services__card {
	display: flex;
	flex-direction: column;
	height: 539px;
	border-bottom: 0;
	overflow: visible;   /* 写真を左右の枠の上まで広げるため（拡大は .services__thumb で切り抜く） */
}
.services--grid .services__num { margin-top: -2.9px; font-size: 22px; }
/* タイトルは写真の直上に下揃え（2行のときも） */
.services--grid .services__title {
	margin-top: auto;
	font-size: 23.5px;
	line-height: 30px;
	white-space: normal;
}
.services--grid .br-svc { display: inline; }
.services--grid .services__thumb {
	flex: none;
	margin: 1px -1px 0 -4px;   /* 左：内側の余白3px＋枠1px／右：枠1px */
	height: 440px;
}

@media (max-width: 999px) {

	/* ---- 導入 ---- */

	/* 英字の字面上端＝ヘッダー下＋68px */
	.page-service .section--intro,
	.page-works .section--intro,
	.page-strongpoints .section--intro,
	.page-service-detail .section--intro,
	.page-sub .section--intro {
		padding-top: 61.7px;
		padding-bottom: 50.3px;
	}

	.page-service .sec-head__ja,
	.page-service .section--svc-core .sec-head__ja,
	.page-works .sec-head__ja,
	.page-strongpoints .section--intro .sec-head__ja,
	.page-service-detail .sec-head__ja,
	.page-sub .sec-head__ja { margin-top: 21.5px; }

	.index-nav { margin-top: 43.7px; }
	.index-nav__tag {
		width: 74px;
		height: 25.7px;
		padding: 0 0 2px 11px;
		clip-path: polygon(0 0, 63px 0, 74px 50%, 63px 100%, 0 100%);
		font-size: 14.2px;
	}
	.index-nav__list {
		gap: 17.6px;
		margin-left: 18.3px;
	}
	.index-nav__list a {
		padding: 2.3px 0 3.9px;
		border-bottom-width: 1px;
		font-size: 11px;
	}

	/* ヒーロー：左の縦罫の右から画面右端まで（354×339） */
	.page-hero {
		margin-top: 20px;
		margin-left: calc((var(--gut-l) + 1px) * -1);   /* 縦罫に被せる（デザイン実測 x=35） */
		height: 339px;
	}
	.page-hero__img { object-position: center; }

	/* ---- AI-POWERED SERVICES ---- */

	/* 英字の字面上端＝セクション上端＋82px（SP版は1行に収まるので改行しない） */
	.page-service .section--svc-ai {
		padding-top: 75px;
		padding-bottom: 76.1px;
	}

	.page-figure {
		margin-top: 63.7px;
		height: 297px;
	}
	.page-figure img { object-position: left top; }

	/* 2カラムは縦積み。写真は右端まで */
	.ai-flow {
		display: block;
		margin-top: 0;
	}
	.ai-flow__item { margin-top: 72px; }
	.ai-flow__title {
		font-size: 19.5px;
		letter-spacing: 0.1em;
	}
	.ai-flow__thumb {
		margin-top: 34.7px;
		margin-right: calc(var(--gut-r) * -1);
		height: 189px;
	}
	/* 本文は6行で切る（トップページ SP 本文と同じ字送り） */
	.ai-flow__text {
		margin-top: 27px;
		font-size: 12.8px;
		line-height: 28px;
		letter-spacing: 0.02em;
	}

	/* ---- CORE SERVICES：トップページ SP と同じ横スクロール ---- */

	.page-service .section--svc-core {
		padding-top: 75px;
		padding-bottom: 150px;   /* デザインに下の罫線が無いため余白を仮置き */
	}

	.services--grid {
		display: flex;
		column-gap: 19.7px;
		row-gap: 0;
		margin-top: 101.2px;
		margin-right: calc(var(--gut-r) * -1);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
	.services--grid .services__item { flex: 0 0 241px; }
	.services--grid .services__card {
		display: block;
		height: 358px;
		border-bottom: 1px solid var(--c-rule);
		overflow: hidden;
	}
	.services--grid .services__num { margin-top: -2.5px; font-size: 15px; }
	.services--grid .services__title {
		margin-top: 33.5px;   /* 番号を1.5px 上げた分、以降の位置を戻す */
		font-size: 15.5px;
		line-height: 1;
		white-space: nowrap;
	}
	.services--grid .br-svc { display: none; }
	.services--grid .services__thumb {
		margin: 3.5px 0 0 -2px;
		height: 292px;
	}
}


/* =========================================================================
   実績ページ（page-works.php／固定ページ スラッグ works）
   デザイン：trace/works.png（PC 1366px）
   導入・カードはサービスページと同じ部品。セクション境界（デザイン実測 y）
     PC：ヘッダー下 57 / 導入下 898 / 一覧下 3507
   ========================================================================= */

/* 導入：INDEX が無いぶん、画像までのアキが広い（和文の字面上端＋178px）。<picture> なので block に */
.page-works .page-hero {
	display: block;
	margin-top: 152.5px;
}
.page-works .page-hero__img { object-position: left top; }

/* 実績一覧：和文だけの見出し（字面上端＝セクション上端＋188px）。下は罫線まで582px */
.page-works .section--works-list {
	padding-top: 184.2px;
	padding-bottom: 583px;
}
.page-works .section--works-list .sec-head__ja { margin-top: 0; }

/* カード：サービスと同じ 363×539。番号は「WORKS n」（字面高さ9px）、
   タイトルは24px で写真の9px 上に下揃え */
.services--works { margin-top: 50.8px; }
/* 行ピッチ 611px（写真の下端がサービスより1px 下） */
.services--works .services__card { height: 540px; }
.services--works .services__num {
	margin-top: 6.6px;
	padding-left: 2px;
	font-size: 12.9px;
	letter-spacing: 0.02em;
}
.services--works .services__title {
	padding-bottom: 6px;
	font-size: 24px;
	letter-spacing: 0.05em;
}

@media (max-width: 999px) {

	/* 導入：画像は左の縦罫の右から画面右端まで（354×339）。
	   SP は PC より広い範囲を小さく見せるため、専用の画像（works-hero-sp.png） */
	.page-works .page-hero { margin-top: 89.7px; }

	/* 実績一覧：和文の字面上端＝セクション上端＋128px／最後の写真の下は279px
	   ※ SP デザインの見出しは「AI-POWERED SERVICES / AI を用いたサービス」（サービスページの流用と判断）。
	     PC に合わせて「実績一覧」を、SP デザインの和文見出しの位置に置く */
	.page-works .section--works-list {
		padding-top: 125px;
		padding-bottom: 279.3px;
	}

	/* カード：1列の縦積み（324×341、ピッチ 360.6px）。右端は画面の端まで */
	.services--works {
		display: block;
		margin-top: 42.8px;
		margin-right: calc(var(--gut-r) * -1);
		overflow: visible;
	}
	.services--works .services__item + .services__item { margin-top: 19.9px; }
	.services--works .services__card {
		display: flex;
		flex-direction: column;
		height: 340.7px;
		border-bottom: 0;
		overflow: visible;
	}
	.services--works .services__num {
		margin: -0.5px 0 0 -1.3px;
		padding-left: 0;
		font-size: 16px;
		letter-spacing: 0.02em;
	}
	.services--works .services__title {
		margin: auto 0 0 -1.8px;   /* デザイン書体は字の左の余白が狭いぶん寄せる */
		padding-bottom: 2.9px;
		font-size: 21.5px;
		line-height: 1;
		letter-spacing: 0.05em;
		white-space: nowrap;
	}
	.services--works .services__thumb {
		margin: 1px -1px 0 -3px;
		height: 252px;
	}
}


/* =========================================================================
   私たちの強みページ（page-strongpoints.php／固定ページ スラッグ strongpoints）
   デザイン：trace/strongpoints.png（PC 1366px）／SP版 PDF の3ページ目（390px）
   導入は実績ページ、カードはトップページと同じ部品。セクション境界（デザイン実測 y）
     PC：ヘッダー下 57 / 導入下 898 / 本文下 2517
     SP：ヘッダー下 52 / 導入下 739.3
   ========================================================================= */

/* 導入：ループ動画（PC 1172×499 の枠に 1920×816 の動画）。後ろに同じ大きさの静止画を敷く */
.page-strongpoints .page-hero { margin-top: 152.5px; }
.page-hero--video { position: relative; }
.page-hero--video picture {
	display: block;
	height: 100%;
}
.page-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 本文：小見出しの字面上端＝セクション上端＋115px */
.section--strong {
	padding-top: 111.2px;
	padding-bottom: 275.5px;
}

/* 下線付きの小見出し（字面の6px 下に1px の線） */
.strong-label {
	display: table;
	padding: 0 3.7px 6.8px 0;   /* 下線の長さ・位置をデザインに合わせる */
	border-bottom: 1px solid var(--c-ink);
	font-size: 26px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: 0.13em;
}

/* 左に英字のキャッチ、右に問いかけの文章（右列はコンテンツ左端から532px） */
.strong-lead {
	display: grid;
	grid-template-columns: 532px 1fr;
	align-items: start;
	margin-top: 31px;
}
.strong-lead__catch {
	margin-top: 68.5px;
	font-family: var(--f-en);
	font-weight: 700;
	font-size: 61px;
	line-height: 79.5px;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.strong-lead__text {
	font-size: 17.5px;
	font-weight: 700;
	line-height: 44.1px;
	letter-spacing: 0.143em;
}

/* カード：349×349 の3列（右の余白25px でデザインの列位置に合わせる）。本文は全文 */
@media (min-width: 1000px) {
	.page-strongpoints { --gut-r: 25px; }
}
.page-strongpoints .strength { margin-top: 182.2px; }
.page-strongpoints .strength__card {
	aspect-ratio: auto;
	height: 349px;
}
.page-strongpoints .strength__text {
	display: block;
	margin-top: 36.2px;
	line-height: 30.3px;
	letter-spacing: 0.035em;
	overflow: visible;
}

@media (max-width: 999px) {

	/* 導入：動画は左の縦罫から画面右端まで（355×339。720×688 の SP 用動画）。導入の下アキは 44.6px */
	.page-strongpoints .section--intro { padding-bottom: 44.6px; }
	.page-strongpoints .page-hero { margin-top: 64.4px; }

	/* 本文：小見出しの字面上端＝セクション上端＋82px。下は罫線が無いため余白を仮置き */
	.section--strong {
		padding-top: 79.2px;
		padding-bottom: 150px;
	}
	/* 下線は字面の幅まで（字間の余りぶん短く） */
	.strong-label {
		padding: 0 0 3px;
		border-bottom: 0;
		background: linear-gradient(var(--c-ink), var(--c-ink)) left bottom / calc(100% - 6px) 1px no-repeat;
		font-size: 19.2px;
		line-height: 21.5px;
	}
	.strong-lead {
		display: block;
		margin-top: 70px;
	}
	.strong-lead__catch {
		margin-top: 0;
		font-size: 41.3px;
		line-height: 53.8px;
	}
	.strong-lead__text {
		margin-top: 65.7px;
		font-size: 15.5px;
		line-height: 40.2px;
	}

	.page-strongpoints .strength { margin-top: 98.3px; }
	.page-strongpoints .strength__item + .strength__item { margin-top: 43.4px; }
	.page-strongpoints .strength__card {
		height: 179px;
		padding-top: 16.3px;
	}
	.page-strongpoints .strength__en { margin-top: 11.5px; }
	.page-strongpoints .strength__text {
		margin-top: 14.7px;
		font-size: 12.8px;
		line-height: 28px;
		letter-spacing: 0.06em;
	}
}


/* =========================================================================
   サービス詳細（single-service.php／URL /service/投稿スラッグ/）
   デザイン：trace/service-detail.png（PC 1366px）／SP版 PDF の5ページ目（390px）
   本文はブロックパターン「サービス詳細の項目」（.svc-item）を並べたもの。
   デザイン実測（PC）：写真 535×312 の2列（間隔77px）、段のピッチ 553px、本文下の罫線 1950
   ========================================================================= */

@media (min-width: 1000px) {
	.page-service-detail { --gut-r: 25px; }
}
.page-service-detail .section--intro { padding-bottom: 542.7px; }

.svc-detail {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 77px;
	row-gap: 99.7px;   /* 本文2行のとき段のピッチ 553px */
	margin-top: 152.5px;
}
.svc-item .wp-block-image { margin: 0; }
.svc-item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 535 / 312;
	object-fit: cover;
}
.svc-item h2 {
	margin-top: 32px;
	font-size: 25px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 0.03em;
}
.svc-item p {
	margin-top: 16.3px;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: 0.08em;
	text-align: justify;
}

@media (max-width: 999px) {

	/* SP：1列。写真は画面の右端まで、文章は右に余白 */
	.page-service-detail .section--intro { padding-bottom: 150px; }   /* デザインに罫線が無いため仮置き */

	.svc-detail {
		display: block;
		margin-top: 77.7px;
		margin-right: calc(var(--gut-r) * -1);
	}
	.svc-item + .svc-item { margin-top: 61.4px; }
	.svc-item h2,
	.svc-item p { margin-right: var(--gut-r); }
	.svc-item h2 {
		margin-top: 21.6px;
		font-size: 20.6px;
		line-height: 24px;
	}
	.svc-item p {
		margin-top: 18px;
		font-size: 13.5px;
		line-height: 28px;
		letter-spacing: 0.02em;   /* 1行22字（デザイン実測） */
	}
}


/* =========================================================================
   下層ページ共通（ニュース／会社案内／お問合せ）
   ========================================================================= */

/* PC だけ改行／SP では消す文字 */
.br-pc { display: inline; }
@media (max-width: 999px) {
	.br-pc { display: none; }
	.sp-hide { display: none; }
}


/* =========================================================================
   ニュース一覧（home.php／category.php）
   デザイン：trace/news.png（PC 1366px）／SP版 PDF の8ページ目（390px）
   デザイン実測（PC）：タブの字面上端 343／写真 349×207 の3列（間隔52px）、段のピッチ 428px、
   最後のカードの罫線 1632、フッター上の罫線 1950
   ========================================================================= */

.news-tabs {
	display: flex;
	flex-wrap: wrap;
	margin-top: 91.5px;
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.1em;
}
/* タブの間隔はデザインの字面位置に合わせる（ALL 195／お知らせ 267／メディア紹介 380） */
.news-tabs li:nth-child(1) { margin-right: 40px; }
.news-tabs li:nth-child(2) { margin-right: 47px; }
.news-tabs a {
	display: block;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition: opacity .2s;
}
.news-tabs a[aria-current] { border-bottom-color: var(--c-ink); }
.news-tabs a:hover { opacity: .55; }

.page-news .section--intro { padding-bottom: 317px; }

.news-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 52px;
	row-gap: 89px;
	margin-top: 77px;
}
.news-card__link {
	display: block;
	height: 100%;
	padding-bottom: 17.2px;
	border-bottom: 1px solid #d3ab17;
}
.news-card__thumb {
	display: block;
	aspect-ratio: 349 / 207;
	overflow: hidden;
	background: var(--c-cream);
}
.news-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s;
}
.news-card__link:hover .news-card__thumb img { transform: scale(1.04); }
.news-card__date {
	display: block;
	margin-top: 27.5px;
	font-family: var(--f-din);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1;
}
.news-card__title {
	display: block;
	margin-top: 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 31px;
	letter-spacing: 0.06em;
}

@media (max-width: 999px) {
	.news-tabs { margin-top: 41.7px; }
	.news-tabs li:nth-child(1) { margin-right: 27px; }
	.news-tabs li:nth-child(2) { margin-right: 24px; }

	.page-news .section--intro { padding-bottom: 150px; }   /* デザインに罫線が無いため仮置き */

	/* 1列。写真と罫線は画面の右端まで */
	.news-list {
		display: block;
		margin-top: 93px;
		margin-right: calc(var(--gut-r) * -1);
	}
	.news-card + .news-card { margin-top: 64.9px; }
	.news-card__link { padding-bottom: 16.3px; }
	.news-card__thumb { aspect-ratio: 323 / 191; }
	.news-card__date { margin-top: 23px; }
	.news-card__title {
		margin-top: 6.4px;
		margin-right: var(--gut-r);
		font-size: 13.5px;
		line-height: 28px;
		letter-spacing: 0.02em;
	}
}


/* =========================================================================
   ニュース詳細（single.php）
   デザイン：trace/newsdetail.png（PC 1366px）／SP版 PDF の9ページ目（390px）
   PC は 日付→タイトル→本文→写真、SP は 日付→タイトル→写真→本文 の順（デザインどおり）
   デザイン実測（PC）：日付の字面上端 375／本文 5行 553〜686／写真 1152×682（752〜1433）／罫線 1950
   ========================================================================= */

.page-news-detail .section--intro { padding-bottom: 516.1px; }

.news-article {
	display: flex;
	flex-direction: column;
	margin-top: 184px;
}
.news-article__date {
	font-family: var(--f-din);
	font-size: 15.2px;
	font-weight: 700;
	line-height: 1;
}
.news-article__title {
	max-width: 720px;
	margin-top: 20.5px;
	font-size: 23.8px;
	font-weight: 700;
	line-height: 43px;
	letter-spacing: 0.06em;
}
.news-article__body {
	margin-top: 50.6px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 30.25px;
	letter-spacing: 0.04em;
	text-align: justify;
}
.news-article__body > * + * { margin-top: 30.25px; }
/* 文章の幅は 690px。本文中の写真（画像ブロック／段落に入った画像）はアイキャッチと同じく横幅いっぱい */
.news-article__body > * { max-width: 690px; }
.news-article__body > figure,
.news-article__body > .wp-block-image,
.news-article__body > p:has(img),
.news-article__body > div:has(img) { max-width: none; }
.news-article__body figure { margin-left: 0; margin-right: 0; margin-bottom: 0; }
.news-article__body img {
	display: block;
	width: 100% !important;   /* 旧サイトから移した画像の width 指定より優先 */
	max-width: none;
	height: auto;
}
.news-article__body p:has(img) img + img,
.news-article__body p:has(img) img + br + img { margin-top: 30.25px; }
/* 写真の説明文（キャプション） */
.news-article__body figcaption {
	margin-top: 11px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.04em;
	text-align: left;
	color: rgba(37, 30, 28, .72);
}
.news-article__figure { margin: 57px 0 0; }
.news-article__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1152 / 682;
	object-fit: cover;
}

@media (max-width: 999px) {
	.page-news-detail .section--intro { padding-bottom: 150px; }   /* デザインに罫線が無いため仮置き */

	.news-article { margin-top: 57.5px; }
	.news-article__date { font-size: 14.6px; }
	.news-article__title {
		margin-top: 5px;
		margin-right: var(--gut-r);
		font-size: 21px;
		line-height: 36.8px;
		letter-spacing: 0.02em;
	}
	/* 写真は画面の右端まで（323×191） */
	.news-article__figure {
		order: 1;
		margin: 54.6px calc(var(--gut-r) * -1) 0 0;
	}
	.news-article__figure img { aspect-ratio: 323 / 191; }
	.news-article__body {
		order: 2;
		margin-top: 37.4px;
		font-size: 13px;
		line-height: 28px;
		letter-spacing: 0.05em;
	}
	.news-article__body > * + * { margin-top: 28px; }
	.news-article__body figcaption { margin-top: 9px; margin-right: var(--gut-r); font-size: 12px; line-height: 22px; }
	/* 本文中の写真も画面の右端まで */
	.news-article__body > figure,
	.news-article__body > .wp-block-image,
	.news-article__body > p:has(img),
	.news-article__body > div:has(img) { margin-right: calc(var(--gut-r) * -1); }
}


/* =========================================================================
   会社案内（page-company.php）
   デザイン：trace/company.png（PC 1366px）／SP版 PDF の10ページ目（390px）
   セクション境界（デザイン実測 y）
     PC：導入下 396 / 会社概要下 1119 / アクセス下 2517
     SP：導入下 664 / 会社概要下 1689.7
   ========================================================================= */

/* 導入：見出しの下に社屋の写真（1172×501、画面右端まで）。写真の下は罫線まで 36px */
.page-company .section--intro { padding-bottom: 36px; }
.company-photo {
	display: block;
	height: 501px;
	margin: 97.5px calc(var(--gut-r) * -1) 0 0;
	overflow: hidden;
}
.company-photo img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.section--company {
	padding-top: 93.5px;
	padding-bottom: 103.1px;
}
.section--access {
	padding-top: 100px;
	padding-bottom: 335px;
}

/* 項目名＋内容の表（PC：項目名の列 159px、行の間隔 26.5px） */
.info-table {
	font-size: 13.7px;
	font-weight: 700;
	line-height: 26px;
	letter-spacing: 0.08em;
}
.info-table__row {
	display: grid;
	grid-template-columns: 159px 1fr;
}
.info-table dd { margin: 0; }
.info-table__row + .info-table__row { margin-top: 26.5px; }

/* アクセスは項目名の列 93px。住所と最寄駅の間は詰め、首都高速の前だけ広い（デザインどおり） */
.info-table--access { margin-top: 91.5px; }
.info-table--access .info-table__row { grid-template-columns: 95px 1fr; }
.info-table--access .info-table__row + .info-table__row { margin-top: 4px; }
.info-table--access .info-table__row.info-table__row--gap { margin-top: 22px; }

/* 地図（Google マップの埋め込み 1147×548） */
.company-map {
	height: 548px;
	margin-top: 54px;
}
.company-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 999px) {
	/* 導入：社屋の写真は左の縦罫から画面右端まで（355×339）。画像は SP 用（建物全体）に切り替わる */
	.page-company .section--intro { padding-bottom: 50.3px; }
	.company-photo {
		height: 339px;
		margin: 89.7px calc(var(--gut-r) * -1) 0 calc((var(--gut-l) + 1px) * -1);
	}

	.section--company {
		padding-top: 47.9px;
		padding-bottom: 140.8px;
	}
	.section--access {
		padding-top: 61.3px;
		padding-bottom: 150px;   /* デザインに罫線が無いため仮置き */
	}

	.info-table {
		font-size: 12px;
		line-height: 28px;
		letter-spacing: 0;   /* 設備機械が9行（デザインどおり）に収まる字間 */
	}
	.info-table__row,
	.info-table--access .info-table__row { grid-template-columns: 82px 1fr; }
	.info-table__row + .info-table__row,
	.info-table--access .info-table__row + .info-table__row,
	.info-table--access .info-table__row.info-table__row--gap { margin-top: 28px; }

	.info-table--access { margin-top: 62px; }
	.company-map {
		height: 188px;
		margin-top: 73.2px;
	}
}


/* =========================================================================
   お問合せ・お見積り（page-contact.php）
   デザイン：trace/contact.png（PC 1366px）／SP版 PDF の11ページ目（390px）
   フォームは Contact Form 7 の出力（input / textarea / 送信ボタン）にも同じ見た目が付く。
   デザイン実測（PC）：電話番号の下線 495／入力欄 1031×59（707・786）、本文欄 397（864）、
   送信ボタン 58（1281）／罫線 2019
   ========================================================================= */

.page-contact .section--intro { padding-bottom: 679px; }

.contact-tel {
	margin-top: 181.1px;
	margin-right: calc(var(--gut-r) * -1);
	padding-bottom: 39.4px;
	border-bottom: 1px solid #d3ab17;
	font-family: var(--f-din);
	font-size: 28.6px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
}
.contact-form__title {
	margin-top: 148.4px;
	font-size: 21.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.13em;
}

.contact-form {
	max-width: 1031px;
	margin-top: 40.5px;
}
.contact-form p { margin: 0; }
.contact-form p + p { margin-top: 20px; }
.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	display: block;
	width: 100%;
	height: 59px;
	padding: 0 27px;
	border: 1px solid var(--c-rule);
	border-radius: 0;
	background: transparent;
	color: var(--c-ink);
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	appearance: none;
}
.contact-form textarea {
	height: 397px;
	padding-top: 18px;
	padding-bottom: 18px;
	resize: vertical;
}
.contact-form ::placeholder {
	color: #a68b2e;
	opacity: 1;
}
.contact-form input:focus,
.contact-form textarea:focus {
	outline: 2px solid var(--c-ink);
	outline-offset: -2px;
}
.contact-form [type="submit"] {
	display: block;
	width: 100%;
	height: 58px;
	padding: 0 0 0 0.9em;   /* 字間の余りぶん右へ寄せて中央に */
	border: 0;
	border-radius: 0;
	background: var(--c-ink);
	color: var(--c-bg);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.9em;
	cursor: pointer;
	appearance: none;
	transition: opacity .2s;
}
.contact-form [type="submit"]:hover { opacity: .8; }

/* 送信エラー（フォーム上部のお知らせ／入力欄ごとの注意書き） */
.contact-form__notice {
	margin-bottom: 20px;
	padding: 15px 27px;
	background: var(--c-ink);
	color: var(--c-bg);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.06em;
}
.contact-form__error {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.06em;
}
.contact-form__error::before { content: "※"; }
.contact-form [aria-invalid="true"] {
	border-color: var(--c-ink);
	box-shadow: inset 0 0 0 1px var(--c-ink);
}

/* 送信完了 */
.contact-form__done {
	padding: 40px 0 44px;
	border-top: 1px solid var(--c-rule);
	border-bottom: 1px solid var(--c-rule);
	font-size: 14px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 0.06em;
}
.contact-form .contact-form__done-title {
	margin-bottom: 26px;
	font-size: 21.5px;
	line-height: 1.4;
	letter-spacing: 0.13em;
}
.contact-form .contact-form__done-title + p { margin-top: 0; }

/* 迷惑送信対策の入力欄（画面には出さない） */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 999px) {
	.page-contact .section--intro { padding-bottom: 150px; }   /* デザインに罫線が無いため仮置き */

	.contact-tel {
		margin-top: 116px;
		padding-bottom: 28.3px;
		font-size: 24.8px;
	}
	.contact-form__title {
		margin-top: 92.6px;
		font-size: 13px;
	}
	.contact-form {
		margin-top: 43px;
		margin-right: -2px;   /* 入力欄の右端 370（デザイン実測） */
	}
	.contact-form input[type="text"],
	.contact-form input[type="email"],
	.contact-form input[type="tel"] { height: 43px; }
	.contact-form textarea { height: 396.3px; }

	.contact-form__notice { padding: 12px 16px; font-size: 12.8px; }
	.contact-form__error { font-size: 12px; }
	.contact-form__done { padding: 30px 0 34px; font-size: 13px; line-height: 28px; }
	.contact-form .contact-form__done-title { margin-bottom: 18px; font-size: 18px; }
}


/* =========================================================================
   実績詳細（single-work.php／URL /works/投稿スラッグ/）
   デザイン：trace/works-detail.png（PC 1366px）／SP版 PDF の7ページ目（390px）
   セクション境界（デザイン実測 y）
     PC：製作工程下 2634 / その他実績下 3810
     SP：製作工程下 3438.3
   ========================================================================= */

.page-work-detail .section--intro { padding-bottom: 129.5px; }

/* 説明文（字面上端＝品名の下100px。1行あたり14px／行送り30px） */
.work-lead {
	max-width: 610px;
	margin-top: 102.5px;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 0.04em;
	text-align: justify;
}
.work-lead p + p { margin-top: 30px; }

/* 動画（1150×649＝16:9。コンテンツ幅いっぱい） */
.work-video {
	margin-top: 37px;
	aspect-ratio: 1150 / 649;
}
.work-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.work-process__head { margin-top: 117.9px; }

/* 製作工程：3列（写真 361×211）。番号は自動で付く */
.work-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 33px;
	row-gap: 91.4px;
	margin-top: 83.5px;
	counter-reset: workstep;
}
.work-step { counter-increment: workstep; }
.work-step h3 {
	display: flex;
	align-items: baseline;
	height: 37px;   /* 番号が大きいぶん行の高さが広がらないようにする（デザイン実測） */
	font-size: 21.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
}
.work-step h3::before {
	content: counter(workstep);
	margin-right: 35px;
	font-family: var(--f-din);
	font-size: 51px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}
.work-step .wp-block-image,
.work-step figure { margin: 0; }
.work-step img {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 35px;
	aspect-ratio: 361 / 211;
	object-fit: cover;
}

/* その他実績：カード 324×487 の横スクロール */
.section--other-works {
	padding-top: 130px;
	padding-bottom: 443px;
}
.other-works__title {
	font-size: 26px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: 0.13em;
}
.services--other-works {
	display: flex;
	column-gap: 28px;
	margin-top: 88px;
	margin-right: calc(var(--gut-r) * -1);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}
.services--other-works .services__item { flex: 0 0 324px; }
.services--other-works .services__card {
	display: flex;
	flex-direction: column;
	height: 487px;
	border-bottom: 0;
	overflow: visible;
}
.services--other-works .services__num {
	margin-top: 5.6px;
	padding-left: 2px;
	font-size: 15.7px;
	letter-spacing: 0.02em;
}
.services--other-works .services__title {
	margin-top: auto;
	padding-bottom: 5px;
	font-size: 21px;
	line-height: 26px;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
.services--other-works .services__thumb {
	flex: none;
	margin: 1px -1px 0 -4px;
	height: 391px;
}

@media (max-width: 999px) {

	.page-work-detail .section--intro { padding-bottom: 137px; }

	.work-lead {
		max-width: none;
		margin-top: 61.5px;
		font-size: 12.8px;
		line-height: 28px;
		letter-spacing: 0.02em;
	}
	.work-lead p + p { margin-top: 28px; }

	/* 動画は画面の右端まで（323×182） */
	.work-video {
		margin-top: 65.7px;
		margin-right: calc(var(--gut-r) * -1);
		aspect-ratio: 323 / 182;
	}

	.work-process__head { margin-top: 146px; }

	/* 製作工程：1列（写真は画面の右端まで 323×189） */
	.work-steps {
		display: block;
		margin-top: 58px;
	}
	.work-step + .work-step { margin-top: 60.3px; }
	.work-step h3 {
		height: 33.5px;
		font-size: 20px;
	}
	.work-step h3::before {
		margin-right: 30px;
		font-size: 46px;
	}
	.work-step img {
		margin-top: 15.4px;
		margin-right: calc(var(--gut-r) * -1);
		width: calc(100% + var(--gut-r));
		max-width: none;
		aspect-ratio: 323 / 189;
	}

	/* その他実績：カード 240×357 の横スクロール */
	.section--other-works {
		padding-top: 88.6px;
		padding-bottom: 150px;   /* デザインに罫線が無いため仮置き */
	}
	.other-works__title {
		font-size: 20px;
		line-height: 21.5px;
	}
	.services--other-works {
		column-gap: 20.7px;
		margin-top: 62px;
		margin-right: calc(var(--gut-r) * -1);
	}
	.services--other-works .services__item { flex: 0 0 240px; }
	/* 実績一覧（縦積み）のカード間の余白を打ち消し、全カードの上端を揃える */
	.services--other-works .services__item + .services__item { margin-top: 0; }
	.services--other-works .services__card {
		height: 357px;
		border-bottom: 1px solid var(--c-rule);
		overflow: hidden;
	}
	.services--other-works .services__num { margin-top: 2px; font-size: 11.9px; }
	.services--other-works .services__title {
		margin-top: auto;
		padding-bottom: 3px;
		font-size: 15.5px;
		line-height: 1;
	}
	.services--other-works .services__thumb {
		margin: 3.5px 0 0 -2px;
		height: 291px;
	}
}