/* ============================================================
   Company Theme - Custom CSS
   ============================================================ */

/* ----- Google Fonts: Noto Sans JP ----- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* ----- CSS Variables ----- */
:root {
	--color-primary:      #1a237e;
	--color-primary-dark: #0d1757;
	--color-accent:       #e53935;
	--color-accent-dark:  #c62828;
	--color-text:         #212121;
	--color-text-sub:     #616161;
	--color-white:        #ffffff;
	--color-bg:           #f5f5f5;
	--color-border:       #e0e0e0;
	--color-navy-card:    #1a237e;
	--font-main:          'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
	--container-width:    1140px;
	--header-height:      110px;
	--section-pad:        96px;
	--radius-sm:          4px;
	--radius:             8px;
	--radius-lg:          16px;
	--shadow-sm:          0 2px 8px rgba(0,0,0,.08);
	--shadow:             0 4px 20px rgba(0,0,0,.10);
	--shadow-lg:          0 8px 40px rgba(0,0,0,.16);
	--transition:         .24s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html                   { scroll-behavior: smooth; }

body {
	font-family:             var(--font-main);
	color:                   var(--color-text);
	background:              var(--color-white);
	line-height:             1.8;
	-webkit-font-smoothing:  antialiased;
}

img  { max-width: 100%; height: auto; display: block; }
ul   { list-style: none; }

a {
	color:       inherit;
	text-decoration: none;
	transition:  opacity var(--transition);
}
a:hover { opacity: .75; }

.container {
	max-width: var(--container-width);
	margin:    0 auto;
	padding:   0 28px;
}

.sp-only { display: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	padding:         14px 36px;
	border-radius:   var(--radius-sm);
	font-family:     var(--font-main);
	font-size:       .9rem;
	font-weight:     700;
	letter-spacing:  .1em;
	cursor:          pointer;
	border:          2px solid transparent;
	transition:      background var(--transition), color var(--transition),
	                 border-color var(--transition), box-shadow var(--transition),
	                 transform var(--transition);
	white-space:     nowrap;
}
.btn:hover { transform: translateY(-2px); opacity: 1; }

.btn-primary {
	background:   var(--color-accent);
	color:        var(--color-white);
	border-color: var(--color-accent);
	box-shadow:   0 4px 14px rgba(229,57,53,.35);
}
.btn-primary:hover {
	background:   var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	box-shadow:   0 6px 20px rgba(229,57,53,.45);
}

.btn-outline-white {
	background:   transparent;
	color:        var(--color-white);
	border-color: rgba(255,255,255,.65);
}
.btn-outline-white:hover {
	background:   rgba(255,255,255,.12);
	border-color: var(--color-white);
}

.btn-submit {
	background:   var(--color-primary);
	color:        var(--color-white);
	border-color: var(--color-primary);
	padding:      16px 72px;
	font-size:    1rem;
	box-shadow:   0 4px 16px rgba(26,35,126,.3);
}
.btn-submit:hover {
	background:   var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	box-shadow:   0 6px 24px rgba(26,35,126,.42);
}

/* ============================================================
   SECTION COMMONS
   ============================================================ */
.section     { padding: var(--section-pad) 0; }
.section-bg  { background: var(--color-bg); }
.section-dark { background: #0d0d1f; color: var(--color-white); }

.section-header         { text-align: center; margin-bottom: 64px; }
.section-header--left   { text-align: left; }

.section-en {
	display:         block;
	font-size:       .72rem;
	font-weight:     700;
	letter-spacing:  .3em;
	text-transform:  uppercase;
	color:           var(--color-accent);
	margin-bottom:   10px;
}

.section-title {
	font-size:     clamp(1.6rem, 2.8vw, 2.4rem);
	font-weight:   900;
	color:         var(--color-primary);
	letter-spacing:.03em;
	line-height:   1.25;
	margin-bottom: 20px;
}
.section-header--light .section-title { color: var(--color-white); }

/* Red underline bar */
.section-line {
	display: block;
	width:   52px;
	height:  4px;
	background: var(--color-accent);
	border-radius: 2px;
	margin:  0 auto 22px;
}
.section-header--left .section-line { margin-left: 0; }
.section-line--light                { background: rgba(255,255,255,.5); }

.section-desc {
	font-size:  .95rem;
	color:      var(--color-text-sub);
	max-width:  540px;
	margin:     0 auto;
	line-height:1.85;
}
.section-header--light .section-desc { color: rgba(255,255,255,.6); }

/* Scroll-in animation */
.fade-up {
	opacity:    0;
	transform:  translateY(32px);
	transition: opacity .6s ease, transform .6s ease;
}
.fade-up.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   HEADER — 白背景固定 / ロゴ左・ナビ中央・CTAボタン右
   ============================================================ */
.site-header {
	position:      sticky;
	top:           0;
	left:          0;
	right:         0;
	z-index:       1000;
	height:        var(--header-height);
	background:    var(--color-white);
	border-bottom: 1px solid var(--color-border);
	box-shadow:    0 2px 8px rgba(0,0,0,.06);
	transition:    box-shadow var(--transition);
}
.site-header.is-scrolled {
	box-shadow: 0 4px 20px rgba(0,0,0,.12);
}

.header-inner {
	display:         flex;
	align-items:     center;
	justify-content: flex-start;
	height:          var(--header-height);
	gap:             16px;
	max-width:       100%;
	margin-left:     0;
	margin-right:    0;
	padding-left:    32px;
	padding-right:   28px;
}

/* ---- Logo ---- */
.site-logo {
	margin-left: 0;
}

.site-logo a {
	display:     flex;
	align-items: center;
	gap:         0;
	flex-shrink: 0;
}
.site-logo a:hover { opacity: .8; }

.logo-img {
	height:    260px;
	width:     auto;
	display:   block;
	flex-shrink: 0;
	margin-left: -35px;
}

.logo-sub-img {
	height:    80px;
	width:     auto;
	display:   block;
	flex-shrink: 0;
	margin-left: 20px;
}

/* ---- Nav（中央） ---- */
.site-nav {
	flex:            1;
	display:         flex;
	justify-content: center;
	margin-left:     auto;
}

.nav-rows {
	display:        flex;
	flex-direction: column;
	align-items:    stretch;
	gap:            4px;
}

.nav-list {
	display:     flex;
	align-items: stretch;
	gap:         3px;
}

/* 上段・下段ともに各ボタンを均等幅で stretch */
.nav-list li {
	flex:    1;
	display: flex;
}

.nav-list--bottom {
	display:         flex;
	justify-content: center;
}

.nav-list a {
	display:    flex;
	align-items: center;
	justify-content: center;
	width:      100%;
	font-family:         var(--font-main);
	font-size:           16px;
	font-weight:         500;
	letter-spacing:      .06em;
	color:               var(--color-primary);
	white-space:         nowrap;
	padding:             8px 22px;
	border:              1.5px solid var(--color-primary);
	border-radius:       999px;
	/* 左下→右上へ対角に塗りつぶすグラデーション */
	background-image:    linear-gradient(45deg, var(--color-accent) 50%, transparent 50%);
	background-size:     300% 300%;
	background-position: 100% 0%;   /* 初期：右上（透明エリア） */
	background-repeat:   no-repeat;
	transition:          background-position .55s cubic-bezier(.33, 1, .68, 1),
	                     color .4s ease,
	                     border-color .4s ease;
}

.nav-list a:hover,
.nav-list a.is-active,
.nav-list a.is-current {
	background-position: 0% 100%;  /* ホバー：左下（赤エリア）へ移動 */
	color:               var(--color-white);
	border-color:        var(--color-accent);
	opacity:             1;
}

/* ---- お問い合わせボタン（右端） ---- */
.nav-cta {
	flex-shrink:    0;
	display:        inline-flex !important;
	align-items:    center;
	justify-content:center;
	background:     var(--color-primary) !important;
	color:          var(--color-white) !important;
	font-family:    var(--font-main);
	font-size:      18px !important;
	font-weight:    700 !important;
	letter-spacing: .08em;
	padding:        16px 40px !important;
	border-radius:  24px !important;
	border:         none;
	box-shadow:     0 3px 10px rgba(26,35,126,.28);
	transition:     background var(--transition), box-shadow var(--transition),
	                transform var(--transition);
	white-space:    nowrap;
}
.nav-cta:hover {
	background: var(--color-accent) !important;
	box-shadow: 0 5px 16px rgba(229,57,53,.42);
	transform:  translateY(-1px);
	opacity:    1;
}
.nav-cta::after { display: none !important; }

/* ---- メニュー内 × 閉じるボタン（デスクトップでは非表示） ---- */
.nav-close {
	display: none;
}

/* ---- モバイルメニュー内お問い合わせ（デスクトップでは非表示） ---- */
.nav-cta-mobile {
	display: none;
}


/* ---- ハンバーガーボタン（モバイル） ---- */
.nav-toggle {
	display:         none;
	flex-direction:  column;
	justify-content: center;
	gap:             5px;
	width:           40px;
	height:          40px;
	background:      none;
	border:          none;
	cursor:          pointer;
	padding:         6px;
	z-index:         1010;
	flex-shrink:     0;
}
.nav-toggle span {
	display:          block;
	height:           2px;
	background:       var(--color-primary);
	border-radius:    2px;
	transition:       all .3s ease;
	transform-origin: center;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero-section {
	position:    relative;
	min-height:  100vh;
	display:     flex;
	align-items: flex-start;
	color:       var(--color-white);
	background:  center/cover no-repeat;
}

/* ダークネイビー半透明オーバーレイ */
.hero-section::before {
	content:    '';
	position:   absolute;
	inset:      0;
	background: #1a237e;
	opacity:    0.3;
	z-index:    0;
}

.hero-inner {
	position: relative;
	z-index:  1;
}

.hero-inner {
	width:          100%;
	padding:        70px 0 120px 60px;
}

/* キャッチコピー */
.hero-title {
	font-size:      102px;
	font-weight:    700;
	color:          var(--color-white);
	line-height:    1.2;
	display:        inline-block;
	position:       relative;
	isolation:      isolate;
	padding-bottom: 10px;
	margin-bottom:  32px;
}

/* キャッチコピー下の赤いアンダーライン */
.hero-title::after {
	content:    '';
	position:   absolute;
	left:       0;
	bottom:     13px;
	width:      calc(100% - 0.5em);
	height:     13px;
	background: #e53935;
	z-index:    -1;
}

/* サブテキスト */
.hero-desc {
	font-size:   42px;
	font-weight: 700;
	line-height: 1.8;
	color:       var(--color-white);
	display:     flex;
	flex-direction: column;
	align-items: flex-start;
	gap:         8px;
	position:    relative;
	top:         -3px;
}

.hero-desc-line {
	display:        inline-block;
	position:       relative;
	isolation:      isolate;
	padding-bottom: 6px;
}
.hero-desc-line::after {
	content:    '';
	position:   absolute;
	left:       0;
	bottom:     18px;
	width:      100%;
	height:     6px;
	background: #e53935;
	z-index:    -1;
}

/* ============================================================
   STRENGTHS（私たちの強み）
   ============================================================ */
.strength-section {
	position:            relative;
	padding:             88px 0;
	background-size:     cover;
	background-position: center;
	background-repeat:   no-repeat;
}

.strength-overlay {
	position: absolute;
	inset:    0;
	background: rgba(13, 27, 62, 0.75);
	z-index:  0;
}

.strength-container {
	position: relative;
	z-index:  1;
}

/* タイトル */
.strength-header {
	text-align:    center;
	margin-bottom: 56px;
}

.strength-title {
	display:       inline-block;
	font-size:     clamp(2.4rem, 4vw, 3.6rem);
	font-weight:   900;
	color:         #ffffff;
	letter-spacing:.05em;
	padding-bottom:16px;
	position:      relative;
	isolation:     isolate;
}
.strength-title::after {
	content:    '';
	position:   absolute;
	bottom:     13px;
	left:       0;
	width:      100%;
	height:     7px;
	background: #e53935;
	border-radius: 2px;
	z-index:    -1;
}

/* グリッド（X字ラインはgap+背景で表現） */
.strength-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	column-gap:            150px;
	row-gap:               36px;
	background:            transparent;
	border:                none;
	max-width:             100%;
	margin:                0 auto;
	position:              relative;
}

.strength-line-svg {
	position:       absolute;
	top:            0;
	left:           0;
	pointer-events: none;
	overflow:       visible;
}

/* カード */
.strength-card {
	background: rgba(26, 35, 126, 0.70);
	border:     5px solid #ffffff;
	padding:    32px 24px;
	text-align: center;
	transition: background var(--transition);
}
.strength-card:hover {
	background: rgba(26, 35, 126, 0.88);
}

/* アイコン */
.strength-icon {
	display:       block;
	font-size:     80px;
	color:         #ffffff;
	margin-bottom: 28px;
}

/* カードタイトル */
.strength-card-title {
	display:       inline-block;
	font-size:     26px;
	font-weight:   700;
	color:         #ffffff;
	margin-bottom: 16px;
	padding-bottom:10px;
	position:      relative;
	word-break:    break-word;
}
.strength-card-title::after {
	content:    '';
	position:   absolute;
	bottom:     9px;
	left:       0;
	width:      100%;
	height:     4px;
	background: #e53935;
}

/* カードテキスト */
.strength-card-text {
	font-size:   18px;
	color:       #ffffff;
	line-height: 1.85;
	text-align:  center;
	word-break:  break-word;
	overflow-wrap: break-word;
}

/* ============================================================
   固定サイドボタン
   ============================================================ */
.fixed-side-buttons {
	position:       fixed;
	right:          16px;
	top:            50%;
	transform:      translateY(-50%);
	display:        flex;
	flex-direction: column;
	gap:            12px;
	z-index:        990;
}

.fixed-btn {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	width:           80px;
	height:          80px;
	border-radius:   50%;
	text-decoration: none;
	font-size:       10px;
	font-weight:     700;
	color:           #ffffff;
	gap:             5px;
	line-height:     1.3;
	text-align:      center;
	box-shadow:      0 4px 14px rgba(0,0,0,.3);
	transition:      transform var(--transition), box-shadow var(--transition);
}
.fixed-btn:hover {
	transform:  scale(1.1);
	box-shadow: 0 6px 20px rgba(0,0,0,.4);
	opacity:    1;
}
.fixed-btn i { font-size: 22px; }

.fixed-btn--contact { background: #e53935; }
.fixed-btn--recruit { background: #1a237e; }

/* ============================================================
   SERVICES
   ============================================================ */
.services-section { background: var(--color-bg); }

/* タイトル（私たちの強みと同スタイル・ネイビー文字） */
.services-main-title {
	display:       inline-block;
	font-size:     clamp(2.4rem, 4vw, 3.6rem);
	font-weight:   900;
	color:         var(--color-primary);
	letter-spacing:.05em;
	padding-bottom:16px;
	position:      relative;
	isolation:     isolate;
}
.services-main-title::after {
	content:       '';
	position:      absolute;
	bottom:        14px;
	left:          0;
	width:         100%;
	height:        7px;
	background:    #e53935;
	border-radius: 2px;
	z-index:       -1;
}

.services-subtitle {
	font-size:     1.45rem;
	font-weight:   700;
	color:         var(--color-text-sub);
	margin-top:    20px;
	letter-spacing:.04em;
}

/* ビジネスカード グリッド */
.services-section .container {
	max-width: 1320px;
}

.business-grid {
	display:  grid;
	gap:      48px;
	padding:  8px;
	margin-bottom: 48px;
}
.business-grid--3 { grid-template-columns: repeat(3, 1fr); }
.business-grid--2 {
	grid-template-columns: repeat(2, 1fr);
	max-width:  calc((100% - 48px) / 3 * 2 + 48px);
	margin-left:  auto;
	margin-right: auto;
}

/* カード */
.business-card {
	background:     var(--color-white);
	border-radius:  0;
	overflow:       hidden;
	box-shadow:     var(--shadow-sm);
	border:         1px solid var(--color-border);
	outline:        2px solid var(--color-primary);
	outline-offset: 5px;
	transition:     transform var(--transition), box-shadow var(--transition);
	display:        flex;
	flex-direction: column;
}
.business-card:hover {
	transform:  translateY(-6px);
	box-shadow: var(--shadow);
}

/* 画像エリア（プレースホルダー） */
.business-card-img {
	margin:     16px;
	width:      calc(100% - 32px);
	height:     200px;
	background: #d0d5e8;
	border-radius: 0;
	position:   relative;
}

/* 番号バッジ */
.business-card-num {
	position:     absolute;
	top:          10px;
	left:         10px;
	font-size:    .75rem;
	font-weight:  900;
	letter-spacing: .12em;
	color:        var(--color-white);
	background:   var(--color-accent);
	padding:      3px 9px;
	line-height:  1.6;
}

/* カード本文 */
.business-card-body {
	padding: 24px 24px 16px;
	flex:    1;
}

.business-card-title {
	font-size:     1.7rem;
	font-weight:   700;
	color:         var(--color-primary);
	text-align:    center;
	margin-top:    -25px;
	margin-bottom: 20px;
	letter-spacing:.03em;
}

.business-card-text {
	font-size:   1.05rem;
	color:       var(--color-text-sub);
	line-height: 1.85;
}

/* カードフッター（ボタン） */
.business-card-footer {
	padding:    16px 24px 24px;
	border-top: 1px solid var(--color-border);
	text-align: center;
}
.business-card-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	padding:         10px 28px;
	border:          2px solid var(--color-primary);
	color:           var(--color-primary);
	font-size:       .88rem;
	font-weight:     700;
	letter-spacing:  .04em;
	text-decoration: none;
	transition:      background var(--transition), color var(--transition);
}
.business-card-btn i { transition: transform var(--transition); font-size: .8em; }
.business-card-btn:hover {
	background: var(--color-primary);
	color:      var(--color-white);
}
.business-card-btn:hover i { transform: translateX(4px); }

.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap:     28px;
}

.service-card {
	background:    transparent;
	border:        1px solid rgba(255,255,255,.25);
	border-radius: var(--radius-lg);
	padding:       44px 32px 36px;
	text-align:    center;
	position:      relative;
	transition:    border-color var(--transition), background var(--transition),
	               transform var(--transition), box-shadow var(--transition);
}
.service-card:hover {
	border-color: var(--color-accent);
	background:   rgba(255,255,255,.04);
	transform:    translateY(-8px);
	box-shadow:   0 16px 40px rgba(0,0,0,.3);
}
.service-card--featured {
	border-color: var(--color-accent);
	background:   rgba(229,57,53,.06);
}

.service-badge {
	position:      absolute;
	top:           -13px;
	left:          50%;
	transform:     translateX(-50%);
	background:    var(--color-accent);
	color:         #fff;
	font-size:     .7rem;
	font-weight:   700;
	padding:       4px 16px;
	border-radius: 20px;
	letter-spacing:.1em;
	white-space:   nowrap;
}

/* アイコン（上部・中央） */
.service-icon {
	width:           72px;
	height:          72px;
	border:          2px solid rgba(255,255,255,.3);
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin:          0 auto 28px;
	color:           var(--color-white);
	transition:      border-color var(--transition), background var(--transition);
}
.service-card:hover .service-icon,
.service-card--featured .service-icon {
	border-color: var(--color-accent);
	background:   rgba(229,57,53,.15);
}
.service-icon svg { width: 32px; height: 32px; }

.service-title {
	font-size:     1.1rem;
	font-weight:   700;
	color:         var(--color-white);
	margin-bottom: 14px;
	letter-spacing:.03em;
}

.service-desc {
	font-size:  .86rem;
	color:      rgba(255,255,255,.62);
	line-height:1.9;
	margin-bottom: 22px;
}

.service-list {
	border-top: 1px solid rgba(255,255,255,.15);
	padding-top: 18px;
	display:     flex;
	flex-direction: column;
	gap:         10px;
	text-align:  left;
}
.service-list li {
	font-size:   .82rem;
	color:       rgba(255,255,255,.55);
	padding-left:18px;
	position:    relative;
}
.service-list li::before {
	content:    '';
	position:   absolute;
	left:       0; top: 50%;
	width:      7px; height: 7px;
	border-left: 2px solid var(--color-accent);
	border-bottom: 2px solid var(--color-accent);
	transform:  translateY(-65%) rotate(-45deg);
}

/* ============================================================
   WORKS
   ============================================================ */
.works-main-title {
	display:       inline-block;
	font-size:     clamp(2.4rem, 4vw, 3.6rem);
	font-weight:   900;
	color:         var(--color-primary);
	letter-spacing:.05em;
	padding-bottom:16px;
	position:      relative;
	isolation:     isolate;
}
.works-main-title::after {
	content:       '';
	position:      absolute;
	bottom:        15px;
	left:          0;
	width:         100%;
	height:        7px;
	background:    #e53935;
	border-radius: 2px;
	z-index:       -1;
}

.works-section {
	position:            relative;
	background-size:     cover;
	background-position: center;
	background-repeat:   no-repeat;
}

.works-overlay {
	position: absolute;
	inset:    0;
	background: rgba(13, 27, 62, 0.75);
	z-index:  0;
}

.works-container {
	position: relative;
	z-index:  1;
}

.works-main-title {
	color: #ffffff;
}

.works-subtitle {
	font-size:     1.45rem;
	font-weight:   700;
	color:         rgba(255, 255, 255, 0.85);
	margin-top:    20px;
	letter-spacing:.04em;
}

.works-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap:     28px;
}

.work-card {
	background:     var(--color-white);
	border-radius:  0;
	overflow:       hidden;
	box-shadow:     var(--shadow-sm);
	border:         1px solid var(--color-border);
	transition:     transform var(--transition), box-shadow var(--transition), border-color var(--transition);
	display:        flex;
	flex-direction: column;
}
.work-card:hover {
	transform:    translateY(-6px);
	box-shadow:   var(--shadow-lg);
	border-color: var(--color-primary);
}

.work-thumb {
	position: relative;
	margin:   16px;
	width:    calc(100% - 32px);
	height:   190px;
	display:  flex;
	align-items: flex-end;
	padding:  16px;
}
.work-thumb--01 { background: linear-gradient(135deg, #1a237e, #3949ab); }
.work-thumb--02 { background: linear-gradient(135deg, #1b5e20, #388e3c); }
.work-thumb--03 { background: linear-gradient(135deg, #4a148c, #7b1fa2); }
.work-thumb--04 { background: linear-gradient(135deg, #e65100, #f57c00); }
.work-thumb--05 { background: linear-gradient(135deg, #006064, #00838f); }
.work-thumb--06 { background: linear-gradient(135deg, #880e4f, #c2185b); }

.work-category {
	font-size:   .7rem;
	font-weight: 700;
	letter-spacing:.1em;
	color:       rgba(255,255,255,.9);
	background:  rgba(0,0,0,.3);
	padding:     4px 12px;
	border-radius: 20px;
	backdrop-filter: blur(4px);
	position:    relative;
	left:        -7px;
	top:         5px;
}

.work-body { padding: 24px 24px 16px; flex: 1; }

/* カードフッター＆ボタン */
.work-footer {
	padding:    14px 24px 20px;
	border-top: 1px solid var(--color-border);
	text-align: center;
}
.work-card-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	padding:         9px 24px;
	border:          2px solid var(--color-primary);
	color:           var(--color-primary);
	font-size:       .82rem;
	font-weight:     700;
	letter-spacing:  .04em;
	text-decoration: none;
	transition:      background var(--transition), color var(--transition);
}
.work-card-btn i { font-size: .78em; transition: transform var(--transition); }
.work-card-btn:hover { background: var(--color-primary); color: var(--color-white); }
.work-card-btn:hover i { transform: translateX(4px); }

.work-title {
	font-size:     1.1rem;
	font-weight:   700;
	color:         var(--color-primary);
	margin-top:    -3px;
	margin-bottom: 20px;
	line-height:   1.55;
}
.work-desc {
	font-size:   .82rem;
	color:       var(--color-text-sub);
	line-height: 1.75;
	margin-bottom: 14px;
}

.work-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.work-tags span {
	font-size:    .7rem;
	font-weight:  700;
	color:        var(--color-primary);
	background:   rgba(26,35,126,.07);
	border:       1px solid rgba(26,35,126,.15);
	padding:      3px 10px;
	border-radius:20px;
	letter-spacing:.04em;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-section { background: var(--color-bg); }
.contact-section .section-title { color: var(--color-primary); }
.contact-section .section-en    { color: var(--color-accent); }
.contact-section .section-desc  { color: var(--color-text-sub); }

.contact-wrapper {
	max-width:  700px;
	margin:     0 auto;
}

.form-notice {
	padding:       16px 20px;
	border-radius: var(--radius);
	margin-bottom: 28px;
	font-size:     .9rem;
	font-weight:   500;
}
.form-notice--success {
	background: rgba(46,183,105,.1);
	color:      #2e7d32;
	border:     1px solid rgba(46,183,105,.3);
}
.form-notice--error {
	background: rgba(229,57,53,.08);
	color:      var(--color-accent);
	border:     1px solid rgba(229,57,53,.2);
}

.contact-form          { display: flex; flex-direction: column; gap: 20px; }
.form-row              { display: flex; gap: 20px; }
.form-row--half > *    { flex: 1; }
.form-group            { display: flex; flex-direction: column; gap: 8px; }

.form-group label {
	font-size:    .82rem;
	font-weight:  700;
	color:        var(--color-primary);
	letter-spacing:.04em;
}

.required { color: var(--color-accent); margin-left: 3px; }

.form-group input,
.form-group textarea {
	width:         100%;
	padding:       13px 16px;
	background:    var(--color-white);
	border:        1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color:         var(--color-text);
	font-size:     .9rem;
	font-family:   var(--font-main);
	transition:    border-color var(--transition), box-shadow var(--transition);
	outline:       none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #bdbdbd; }
.form-group input:focus,
.form-group textarea:focus {
	border-color: var(--color-primary);
	box-shadow:   0 0 0 3px rgba(26,35,126,.1);
}
.form-group textarea { resize: vertical; min-height: 140px; }

.form-submit { text-align: center; margin-top: 8px; }

/* ============================================================
   STATS
   ============================================================ */
.stats-section {
	background:    #ffffff;
	border-bottom: 1px solid var(--color-border);
	box-shadow:    0 6px 24px rgba(0,0,0,.07);
	position:      relative;
	z-index:       1;
}

.stats-header { text-align: center; margin-bottom: 60px; }

.stats-main-title {
	display:        inline-block;
	font-size:      clamp(2.4rem, 4vw, 3.6rem);
	font-weight:    900;
	color:          var(--color-primary);
	letter-spacing: .05em;
	padding-bottom: 16px;
	position:       relative;
	isolation:      isolate;
}
.stats-main-title::after {
	content:    '';
	position:   absolute;
	bottom:     15px;
	left:       0;
	width:      100%;
	height:     7px;
	background: var(--color-accent);
	z-index:    -1;
	border-radius: 2px;
}

.stats-subtitle {
	font-size:   1.45rem;
	font-weight: 700;
	color:       var(--color-text-sub);
	margin-top:  16px;
}

.stats-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   32px;
}
@media (max-width: 768px) {
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.stats-card {
	background:     var(--color-white);
	border:         5px solid var(--color-primary);
	border-radius:  0;
	padding:        52px 36px 44px;
	text-align:     center;
	box-shadow:     var(--shadow-sm);
	position:       relative;
	outline:        2px solid var(--color-accent);
	outline-offset: -10px;
}

/* アイコン（右上・重ね表示） */
.stats-icon-wrap {
	position: absolute;
	top:      21px;
	right:    23px;
	width:    44px;
	height:   44px;
}
.stats-icon-back {
	position:  absolute;
	top:       0;
	left:      0;
	font-size: 56px;
	color:     #555555;
}
.stats-icon-front {
	position:  absolute;
	bottom:    13px;
	right:     17px;
	font-size: 48px;
	color:     #555555;
	background: var(--color-white);
	border-radius: 50%;
	padding:   2px;
}
.stats-icon-single {
	position:  absolute;
	top:       50%;
	left:      50%;
	transform: translate(-50%, -50%);
	font-size: 54px;
	color:     #555555;
}
.stats-number {
	font-size:       4.0rem;
	font-weight:     900;
	color:           var(--color-primary);
	line-height:     1;
	margin-bottom:   12px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             4px;
}
.stats-unit {
	font-size:   1.6rem;
	font-weight: 700;
	line-height: 1;
	align-self:  flex-end;
	margin-bottom: 5px;
}
.stats-unit-stack {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	align-self:      stretch;
	font-size:       1.45rem;
	font-weight:     700;
	line-height:     1;
	text-align:      left;
}
.stats-unit-stack span:last-child {
	margin-top: 0;
}
.stats-label {
	font-size:    1.6rem;
	color:        var(--color-primary);
	font-weight:  600;
	margin-top:   0;
	padding-top:  10px;
}
.stats-label::after {
	content:      '';
	display:      block;
	height:       3px;
	background:   var(--color-accent);
	margin-top:   4px;
	margin-left:  -16px;
	margin-right: -16px;
}
.stats-desc {
	font-size:   1.3rem;
	color:       var(--color-primary);
	margin-top:  14px;
	line-height: 1.6;
}

/* ============================================================
   COLUMN
   ============================================================ */
.column-section { background: var(--color-white); }

.column-header { text-align: center; margin-bottom: 60px; }

.column-main-title {
	display:        inline-block;
	font-size:      clamp(2.4rem, 4vw, 3.6rem);
	font-weight:    900;
	color:          var(--color-primary);
	letter-spacing: .05em;
	padding-bottom: 16px;
	position:       relative;
	isolation:      isolate;
}
.column-main-title::after {
	content:    '';
	position:   absolute;
	bottom:     15px;
	left:       0;
	width:      100%;
	height:     7px;
	background: var(--color-accent);
	z-index:    -1;
	border-radius: 2px;
}

.column-subtitle {
	font-size:   1.45rem;
	font-weight: 700;
	color:       var(--color-text-sub);
	margin-top:  16px;
}

.column-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   32px;
}
@media (max-width: 768px) {
	.column-grid { grid-template-columns: 1fr; }
}

.column-card {
	background:  var(--color-white);
	border:      1px solid #d0d0d0;
	border-radius: var(--radius);
	overflow:    hidden;
	box-shadow:  var(--shadow-sm);
	transition:  transform var(--transition), box-shadow var(--transition);
}
.column-card:hover {
	transform:  translateY(-6px);
	box-shadow: var(--shadow-lg);
}
.column-thumb {
	height:     200px;
	background: linear-gradient(135deg, var(--color-primary), #3949ab);
}
.column-body  { padding: 24px; }
.column-date  {
	font-size:   .82rem;
	color:       var(--color-text-sub);
	margin-bottom: 8px;
	letter-spacing: .05em;
}
.column-title {
	font-size:     1.1rem;
	font-weight:   700;
	color:         var(--color-primary);
	margin-bottom: 12px;
	line-height:   1.55;
	margin-top:    8px;
}
.column-desc {
	font-size:   .9rem;
	color:       var(--color-text-sub);
	line-height: 1.7;
}

/* ============================================================
   SUBPAGE — PAGE HERO & CONTENT
   ============================================================ */
.page-hero {
	background:      var(--color-primary-dark);
	padding:         100px 0 60px;
	text-align:      center;
	margin-top:      var(--header-h);
}
.page-hero-inner { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.page-hero-en {
	font-size:      .8rem;
	font-weight:    700;
	letter-spacing: .2em;
	color:          var(--color-accent);
	margin-bottom:  8px;
	text-transform: uppercase;
}
.page-hero-title {
	font-size:   clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 700;
	color:       var(--color-white);
	line-height: 1.3;
}

/* ---- company-overview-hero / business-intro-hero (共通) ---- */
.company-overview-hero,
.business-intro-hero,
.project-hero,
.products-hero,
.news-hero,
.recruit-hero,
.column-hero {
	background:  url('images/kensetsu.jpg') center / cover no-repeat;
	position:    relative;
	overflow:    hidden;
	text-align:  left;
	padding:     200px 0 140px;
	min-height:  520px;
}
.company-overview-hero__overlay,
.business-intro-hero__overlay,
.project-hero__overlay,
.products-hero__overlay,
.news-hero__overlay,
.recruit-hero__overlay,
.column-hero__overlay {
	position:    absolute;
	inset:       0;
	background:  var(--color-primary-dark);
	clip-path:   polygon(0% 0%, 42% 0%, 28% 100%, 0% 100%);
}
.company-overview-hero__inner,
.business-intro-hero__inner,
.project-hero__inner,
.products-hero__inner,
.news-hero__inner,
.recruit-hero__inner,
.column-hero__inner {
	position:        relative;
	z-index:         1;
	max-width:       none;
	padding-left:    8%;
	display:         flex;
	flex-direction:  column;
	align-items:     flex-start;
}
.company-overview-hero__title,
.business-intro-hero__title,
.project-hero__title,
.products-hero__title,
.news-hero__title,
.recruit-hero__title,
.column-hero__title {
	font-family:    var(--font-main);
	font-size:      clamp(5.5rem, 11vw, 7.5rem);
	font-weight:    700;
	color:          #ffffff;
	display:        inline-block;
	position:       relative;
	padding-bottom: 0;
	margin-bottom:  24px;
	line-height:    1.3;
	text-shadow:    2px 2px 8px rgba(0,0,0,.7), 0 0 20px rgba(0,0,0,.4);
}
.company-overview-hero__title::after,
.business-intro-hero__title::after,
.project-hero__title::after,
.products-hero__title::after,
.news-hero__title::after,
.recruit-hero__title::after,
.column-hero__title::after {
	content:    '';
	position:   absolute;
	left:       0;
	bottom:     11px;
	width:      100%;
	height:     6px;
	background: #e02020;
	z-index:    -1;
}
.company-overview-hero__en,
.business-intro-hero__en,
.project-hero__en,
.products-hero__en,
.news-hero__en,
.recruit-hero__en,
.column-hero__en {
	display:        inline-block;
	font-family:    var(--font-main);
	font-size:      clamp(2.4rem, 5vw, 3.5rem);
	font-weight:    700;
	color:          #ffffff;
	letter-spacing: .2em;
	position:       relative;
	padding-bottom: 0;
	text-shadow:    2px 2px 8px rgba(0,0,0,.7), 0 0 20px rgba(0,0,0,.4);
	margin-top:     -18px;
}
.company-overview-hero__en::after,
.business-intro-hero__en::after,
.project-hero__en::after,
.products-hero__en::after,
.news-hero__en::after,
.recruit-hero__en::after,
.column-hero__en::after {
	content:    '';
	position:   absolute;
	left:       0;
	bottom:     20px;
	width:      100%;
	height:     6px;
	background: #e02020;
	z-index:    -1;
}

.page-content-section {
	padding:    80px 0;
	background: var(--color-white);
}

/* NEWS LIST */
.news-list  { list-style: none; padding: 0; margin: 0; }
.news-item  { border-bottom: 1px solid var(--color-border); }
.news-item-link {
	display:      flex;
	align-items:  center;
	gap:          24px;
	padding:      20px 0;
	color:        var(--color-text);
	text-decoration: none;
	transition:   color var(--transition);
}
.news-item-link:hover { color: var(--color-accent); }
.news-date  {
	flex-shrink:    0;
	font-size:      .85rem;
	color:          var(--color-text-sub);
	letter-spacing: .05em;
}
.news-title { font-size: 1rem; line-height: 1.6; }
.no-posts   { color: var(--color-text-sub); padding: 40px 0; text-align: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--color-primary-dark); color: rgba(255,255,255,.55); }

.footer-inner {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	padding-top:     52px;
	padding-bottom:  52px;
	gap:             48px;
	flex-wrap:       wrap;
}

/* --- Brand --- */
.footer-brand { max-width: 300px; }

.footer-logo-box {
	display:       inline-block;
	background:    #ffffff;
	padding:       10px 18px;
	margin-bottom: 16px;
	border-radius: 4px;
}
.footer-logo-link { display: block; }
.footer-logo-img  { height: 56px; width: auto; display: block; }

.footer-company-name {
	font-size:     1.3rem;
	font-weight:   700;
	color:         var(--color-white);
	margin-bottom: 14px;
	letter-spacing:.04em;
}

.footer-info {
	margin-top:  0;
	font-style:  normal;
	display:     flex;
	flex-direction: column;
	gap:         6px;
}
.footer-info-address {
	font-size:   .83rem;
	color:       rgba(255,255,255,.55);
	line-height: 1.6;
	margin-bottom: 4px;
}
.footer-info-row {
	display:     flex;
	align-items: center;
	gap:         10px;
	font-size:   .83rem;
	color:       rgba(255,255,255,.55);
}
.footer-info-label {
	font-size:     .68rem;
	font-weight:   700;
	letter-spacing:.08em;
	color:         rgba(255,255,255,.35);
	min-width:     28px;
	border:        1px solid rgba(255,255,255,.2);
	padding:       1px 4px;
	text-align:    center;
}

.footer-tagline {
	font-size:  .78rem;
	color:      rgba(255,255,255,.4);
	line-height: 1.6;
	margin-top: 12px;
}

/* --- Nav --- */
.footer-nav {
	display:    flex;
	gap:        48px;
	flex-wrap:  wrap;
	margin-top: 20px;
}

.footer-nav-group ul {
	display:        flex;
	flex-direction: column;
	gap:            10px;
	margin-top:     12px;
}

.footer-nav-heading {
	font-size:     .7rem;
	font-weight:   700;
	letter-spacing:.12em;
	color:         rgba(255,255,255,.35);
	text-transform: uppercase;
}

.footer-nav a {
	font-size:    .85rem;
	font-weight:  500;
	color:        rgba(255,255,255,.55);
	transition:   color var(--transition);
	display:      block;
}
.footer-nav a:hover { color: var(--color-white); }

.footer-nav-child a {
	font-size:   .8rem;
	padding-left: 12px;
	position:    relative;
	color:       rgba(255,255,255,.38);
}
.footer-nav-child a::before {
	content:  '└';
	position: absolute;
	left:     0;
	color:    rgba(255,255,255,.2);
	font-size: .7rem;
	top:      1px;
}

/* --- Footer CTA Buttons --- */
.footer-cta {
	display:        flex;
	flex-direction: column;
	gap:            10px;
	min-width:      230px;
	align-self:     center;
}

.footer-cta-btn {
	display:     flex;
	align-items: center;
	gap:         16px;
	padding:     15px 20px;
	border-radius: var(--radius);
	text-decoration: none;
	color:       var(--color-white);
	transition:  transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.footer-cta-btn:hover {
	transform: translateY(-3px);
	opacity:   1;
	box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.footer-cta-btn--news {
	background: rgba(255,255,255,.07);
	border:     1px solid rgba(255,255,255,.15);
}
.footer-cta-btn--news:hover { background: rgba(255,255,255,.13); }

.footer-cta-btn--contact {
	background: var(--color-accent);
	box-shadow: 0 4px 16px rgba(229,57,53,.35);
}
.footer-cta-btn--contact:hover {
	background: var(--color-accent-dark);
	box-shadow: 0 8px 28px rgba(229,57,53,.5);
}

.footer-cta-btn--recruit {
	background: rgba(255,255,255,.11);
	border:     1px solid rgba(255,255,255,.18);
}
.footer-cta-btn--recruit:hover { background: rgba(255,255,255,.18); }

.footer-cta-icon {
	font-size:  1.25rem;
	width:      36px;
	text-align: center;
	flex-shrink: 0;
	color:      rgba(255,255,255,.8);
}
.footer-cta-btn--contact .footer-cta-icon { color: var(--color-white); }

.footer-cta-text {
	display:        flex;
	flex-direction: column;
	gap:            3px;
}

.footer-cta-en {
	font-size:      .65rem;
	font-weight:    700;
	letter-spacing: .14em;
	color:          rgba(255,255,255,.5);
	line-height:    1;
}
.footer-cta-btn--contact .footer-cta-en { color: rgba(255,255,255,.75); }

.footer-cta-ja {
	font-size:   .92rem;
	font-weight: 700;
	color:       var(--color-white);
	line-height: 1.3;
}

/* --- Bottom bar --- */
.footer-bottom {
	border-top: 1px solid rgba(255,255,255,.08);
	padding:    18px 0;
}
.copyright {
	font-size:    .73rem;
	color:        rgba(255,255,255,.3);
	text-align:   center;
	letter-spacing:.05em;
}

/* ============================================================
   RESPONSIVE — 1280px (PC 中型：パディング縮小)
   ============================================================ */
@media (max-width: 1280px) {
	.header-inner {
		padding-left:  16px;
		padding-right: 20px;
		gap:           12px;
	}
}

/* ============================================================
   RESPONSIVE — 1100px (PC 小型：2段ヘッダー)
   ロゴ＋CTAを上段、ナビを下段に並べてどの画面でも被らない
   ============================================================ */
@media (max-width: 1100px) and (min-width: 769px) {
	:root { --header-height: auto; }

	.site-header {
		height: auto;
	}

	/* 折り返しを許可して2段構成に */
	.header-inner {
		flex-wrap:      wrap;
		align-items:    center;
		padding:        10px 24px 0;
		height:         auto;
		gap:            0;
		max-width:      100%;
	}

	/* ロゴ：1段目・左 */
	.site-logo {
		flex:    1 1 auto;
		order:   1;
	}

	.logo-img    { height: 182px; margin-left: -28px; }
	.logo-sub-img { height: 56px; margin-left: 12px; }
	.site-logo a { gap: 0; }

	/* お問い合わせボタン：1段目・右 */
	.nav-cta {
		order:       2;
		flex-shrink: 0;
		font-size:   13px !important;
		padding:     8px 18px !important;
		margin-left: auto;
	}

	/* ナビ：2段目・全幅・中央寄せ */
	.site-nav {
		order:           3;
		flex:            0 0 100%;
		display:         flex;
		justify-content: center;
		margin:          0;
		padding:         6px 0 10px;
	}

	.nav-rows {
		width:           100%;
		flex-direction:  row;
		flex-wrap:       wrap;
		justify-content: center;
		align-items:     center;
		gap:             6px;
	}

	.nav-list {
		justify-content: center;
		flex-wrap:       wrap;
		gap:             6px;
		align-items:     center;
	}

	/* 中サイズではボタンを自動幅に戻す */
	.nav-list li {
		flex: 0 0 auto;
		display: block;
	}

	/* 下段のNEWSも横並びに統合 */
	.nav-list--bottom {
		display:         flex;
		justify-content: center;
	}

	.nav-list a {
		font-size: 13px;
		padding:   5px 14px;
		display:   inline-flex;
		width:     auto;
	}
}

/* ============================================================
   RESPONSIVE — 960px (コンテンツ調整)
   ============================================================ */
@media (max-width: 960px) {
	:root { --section-pad: 72px; }

	.about-content  { grid-template-columns: 1fr; gap: 48px; }
	.services-grid  { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
	.works-grid     { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */
@media (max-width: 768px) {
	:root { --section-pad: 56px; }

	.sp-only { display: inline; }

	/* Header */
	.nav-toggle { display: flex; }

	.site-nav {
		position:        fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		background:      rgba(13,23,87,.97);
		backdrop-filter: blur(16px);
		display:         flex;
		align-items:     center;
		justify-content: center;
		transform:       translateX(100%);
		transition:      transform .35s cubic-bezier(.77,0,.175,1);
		z-index:         1005;
	}
	.site-nav.is-open { transform: translateX(0); }

	/* × 閉じるボタン */
	.nav-close {
		display:         flex;
		align-items:     center;
		justify-content: center;
		position:        absolute;
		top:             20px;
		right:           20px;
		width:           44px;
		height:          44px;
		background:      rgba(255,255,255,.1);
		border:          1px solid rgba(255,255,255,.25);
		border-radius:   50%;
		color:           var(--color-white);
		font-size:       1.6rem;
		line-height:     1;
		cursor:          pointer;
		transition:      background var(--transition), transform var(--transition);
		z-index:         1020;
	}
	.nav-close:hover {
		background: rgba(229,57,53,.55);
		border-color: var(--color-accent);
		transform:  rotate(90deg);
	}

	.nav-list {
		flex-direction: column;
		gap:            8px;
		text-align:     center;
		align-items:    center;
	}
	.nav-list li {
		flex:    0 0 auto;
		display: block;
		width:   100%;
	}
	.nav-list a {
		font-size:       1.15rem;
		color:           rgba(255,255,255,.85) !important;
		padding:         14px 40px;
		display:         flex;
		width:           100%;
		justify-content: center;
	}
	/* モバイル時はヘッダー右端のCTAを非表示 */
	.header-inner > .nav-cta { display: none !important; }

	/* モバイルメニュー内のお問い合わせリンク */
	.nav-cta-mobile {
		display:         inline-flex !important;
		align-items:     center;
		justify-content: center;
		margin-top:      12px;
		background:      var(--color-accent);
		color:           var(--color-white) !important;
		font-size:       1.1rem;
		font-weight:     700;
		padding:         14px 40px;
		border-radius:   20px;
		box-shadow:      0 4px 14px rgba(229,57,53,.4);
	}

	/* Hero */
	.hero-inner  { padding: 80px 20px; }
	.hero-title  { font-size: 68px; }
	.hero-desc   { font-size: 28px; }

	/* Strengths */
	.strength-grid { grid-template-columns: 1fr; }
	.strength-card { padding: 40px 28px; }

	/* Fixed buttons */
	.fixed-side-buttons {
		top:       auto;
		bottom:    20px;
		transform: none;
	}

	/* Services */
	.service-card { padding: 36px 24px 28px; }

	/* Works */
	.works-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }

	/* Contact */
	.form-row   { flex-direction: column; }

	/* Footer */
	.footer-inner   { flex-direction: column; align-items: center; text-align: center; }
	.footer-nav     { justify-content: center; }
	.footer-nav ul  { justify-content: center; }
	.footer-tagline { text-align: center; }
	.footer-cta     { width: 100%; max-width: 360px; }
}

/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */
@media (max-width: 480px) {
	.about-stats { grid-template-columns: 1fr 1fr; }
	.stat-number { font-size: 2rem; }
	.hero-title  { font-size: 1.8rem; }
	.btn-submit  { padding: 16px 40px; }
}

/* ============================================================
   COMPANY OVERVIEW PAGE — SCROLL TARGET OFFSET
   ============================================================ */
#vision, #overview, #history, #offices, #access {
	scroll-margin-top: calc(var(--header-height) + 20px);
}

/* ---- セクションタイトル（HOMEページと同スタイル） ---- */
.co-main-title {
	display:        inline-block;
	font-size:      clamp(2.4rem, 4vw, 3.6rem);
	font-weight:    900;
	color:          var(--color-primary);
	letter-spacing: .05em;
	padding-bottom: 16px;
	position:       relative;
	isolation:      isolate;
}
.co-main-title::after {
	content:       '';
	position:      absolute;
	bottom:        15px;
	left:          0;
	width:         100%;
	height:        7px;
	background:    var(--color-accent);
	z-index:       -1;
	border-radius: 2px;
}
.co-section-sub {
	font-size:      .82rem;
	font-weight:    700;
	color:          var(--color-text-sub);
	letter-spacing: .2em;
	text-transform: uppercase;
	margin-top:     10px;
}

/* ============================================================
   VISION SECTION
   ============================================================ */
.co-vision-section { background: var(--color-white); }

.co-vision-body {
	max-width:  740px;
	margin:     0 auto;
	text-align: center;
}

.co-vision-lead {
	font-size:     clamp(1.3rem, 2.2vw, 1.8rem);
	font-weight:   900;
	color:         var(--color-primary);
	line-height:   1.65;
	margin-bottom: 28px;
}

.co-vision-text {
	font-size:   1rem;
	color:       var(--color-text-sub);
	line-height: 2;
}

/* ============================================================
   PAGE NAVIGATION BUTTONS
   ============================================================ */
.co-page-nav-wrapper {
	background: var(--color-primary);
	padding:    28px 0;
}

.co-page-nav {
	display:         flex;
	gap:             12px;
	justify-content: center;
	flex-wrap:       wrap;
}

.co-page-nav-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           180px;
	height:          64px;
	background:      transparent;
	border:          2px solid rgba(255,255,255,.55);
	color:           var(--color-white);
	font-family:     var(--font-main);
	font-size:       .92rem;
	font-weight:     700;
	letter-spacing:  .1em;
	text-decoration: none;
	border-radius:   0;
	transition:      background var(--transition), border-color var(--transition);
}

.co-page-nav-btn:hover {
	background:   var(--color-accent);
	border-color: var(--color-accent);
	opacity:      1;
}

/* ============================================================
   OVERVIEW TABLE
   ============================================================ */
.co-overview-table-wrap {
	max-width: 760px;
	margin:    0 auto;
}

.co-overview-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       .96rem;
	box-shadow:      var(--shadow-sm);
}

.co-overview-table th,
.co-overview-table td {
	padding:        20px 28px;
	text-align:     left;
	border-bottom:  1px solid var(--color-border);
	line-height:    1.75;
	vertical-align: top;
}

.co-overview-table th {
	width:          220px;
	background:     var(--color-primary);
	color:          var(--color-white);
	font-weight:    700;
	letter-spacing: .06em;
	white-space:    nowrap;
}

.co-overview-table tr:last-child th,
.co-overview-table tr:last-child td { border-bottom: none; }

.co-overview-table tr:nth-child(even) td { background: rgba(245,245,245,.7); }

/* ============================================================
   HISTORY TIMELINE
   ============================================================ */
.co-history-section { overflow: hidden; }

.co-history-timeline {
	position:  relative;
	padding:   48px 0 8px;
	max-width: 900px;
	margin:    0 auto;
}

/* Center vertical thick line */
.co-history-center-line {
	position:      absolute;
	left:          50%;
	top:           0;
	bottom:        0;
	width:         6px;
	background:    var(--color-primary);
	transform:     translateX(-50%);
	border-radius: 3px;
}

/* Row */
.co-history-item {
	display:       flex;
	align-items:   flex-start;
	margin-bottom: 0;
	position:      relative;
}
.co-history-item + .co-history-item {
	margin-top: -60px;
}

/* Card and spacer each occupy half minus dot gap */
.co-history-card,
.co-history-spacer {
	flex: 0 0 calc(50% - 36px);
}

/* Center dot */
.co-history-dot {
	flex:            0 0 72px;
	display:         flex;
	align-items:     flex-start;
	justify-content: center;
	padding-top:     22px;
}
.co-history-dot::after {
	content:       '';
	display:       block;
	width:         22px;
	height:        22px;
	background:    var(--color-accent);
	border-radius: 50%;
	border:        4px solid var(--color-white);
	box-shadow:    0 0 0 3px var(--color-accent);
	flex-shrink:   0;
}

/* Card base — flex row: portrait image left, text right */
.co-history-card {
	background: var(--color-white);
	border:     2px solid var(--color-primary);
	position:   relative;
	box-shadow: var(--shadow-sm);
	display:    flex;
}

/* Left card: arrow points right toward center line */
.co-history-item--left .co-history-card::before {
	content:      '';
	position:     absolute;
	right:        -15px;
	top:          26px;
	border-style: solid;
	border-width: 11px 0 11px 15px;
	border-color: transparent transparent transparent var(--color-primary);
	z-index:      1;
}
.co-history-item--left .co-history-card::after {
	content:      '';
	position:     absolute;
	right:        -11px;
	top:          29px;
	border-style: solid;
	border-width: 8px 0 8px 11px;
	border-color: transparent transparent transparent var(--color-white);
	z-index:      2;
}

/* Right card: arrow points left toward center line */
.co-history-item--right .co-history-card::before {
	content:      '';
	position:     absolute;
	left:         -15px;
	top:          26px;
	border-style: solid;
	border-width: 11px 15px 11px 0;
	border-color: transparent var(--color-primary) transparent transparent;
	z-index:      1;
}
.co-history-item--right .co-history-card::after {
	content:      '';
	position:     absolute;
	left:         -11px;
	top:          29px;
	border-style: solid;
	border-width: 8px 11px 8px 0;
	border-color: transparent var(--color-white) transparent transparent;
	z-index:      2;
}

/* Portrait image — fixed width, stretches to full card height */
.co-history-card-img {
	width:       110px;
	flex-shrink: 0;
	background:  #c8cfe8;
	align-self:  stretch;
	min-height:  180px;
	object-fit:  cover;
}

.co-history-card-body {
	padding: 20px;
	flex:    1;
	min-width: 0;
}

.co-history-year {
	display:        inline-block;
	background:     var(--color-accent);
	color:          var(--color-white);
	font-size:      .78rem;
	font-weight:    700;
	padding:        4px 14px;
	letter-spacing: .1em;
	margin-bottom:  12px;
}

.co-history-card-title {
	font-size:     1.05rem;
	font-weight:   700;
	color:         var(--color-primary);
	margin-bottom: 8px;
}

.co-history-card-text {
	font-size:   .86rem;
	color:       var(--color-text-sub);
	line-height: 1.8;
}

/* Scroll-in slide animation */
.co-history-item--left  .co-history-card {
	opacity:    0;
	transform:  translateX(-44px);
	transition: opacity .65s ease, transform .65s ease;
}
.co-history-item--right .co-history-card {
	opacity:    0;
	transform:  translateX(44px);
	transition: opacity .65s ease, transform .65s ease;
}
.co-history-item.is-visible .co-history-card {
	opacity:   1;
	transform: translateX(0);
}

/* ============================================================
   OFFICES LIST  (3×3 grid — each card: image left + text right)
   ============================================================ */
.co-offices-note {
	text-align:    center;
	font-size:     .88rem;
	color:         var(--color-text-sub);
	margin-top:    8px;
}

.co-offices-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   28px;
}

.co-office-card {
	background:  var(--color-white);
	border:      1px solid var(--color-border);
	border-top:  3px solid var(--color-primary);
	display:     flex;
	overflow:    hidden;
	box-shadow:  var(--shadow-sm);
	transition:  transform var(--transition), box-shadow var(--transition);
}
.co-office-card--link {
	text-decoration: none;
	color:           inherit;
	cursor:          pointer;
}
.co-office-card:hover {
	transform:  translateY(-4px);
	box-shadow: var(--shadow);
}
.co-office-card--link:hover .co-office-name {
	color: var(--color-primary);
	text-decoration: underline;
}

.co-office-img {
	flex:       0 0 110px;
	background: #c8cfe8;
	min-height: 148px;
}

.co-office-body {
	padding: 16px 16px 16px 14px;
	flex:    1;
	min-width: 0;
}

.co-office-name {
	font-size:      .92rem;
	font-weight:    700;
	color:          var(--color-primary);
	margin-bottom:  10px;
	padding-bottom: 8px;
	border-bottom:  1px solid var(--color-border);
}

.co-office-address {
	font-style:  normal;
	font-size:   .78rem;
	color:       var(--color-text-sub);
	line-height: 2;
}
.co-office-addr { margin-bottom: 4px; }

.co-office-address span {
	display:        inline-block;
	background:     var(--color-primary);
	color:          var(--color-white);
	font-size:      .68rem;
	font-weight:    700;
	padding:        1px 5px;
	margin-right:   4px;
	border-radius:  2px;
	letter-spacing: .04em;
}

/* ============================================================
   ACCESS  (map left / info right)
   ============================================================ */
.co-access-body {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   52px;
	align-items:           start;
}

.co-access-map {
	height:     480px;
	border:     1px solid var(--color-border);
	background: #c8cfe8;
	overflow:   hidden;
}
.co-access-map iframe {
	width:   100%;
	height:  100%;
	display: block;
	border:  0;
}

.co-access-info-title {
	font-size:      1.3rem;
	font-weight:    700;
	color:          var(--color-primary);
	margin-bottom:  24px;
	padding-bottom: 12px;
	border-bottom:  2px solid var(--color-primary);
}

.co-access-address {
	font-style:    normal;
	margin-bottom: 36px;
}

.co-access-addr {
	font-size:     1rem;
	line-height:   1.9;
	margin-bottom: 16px;
	color:         var(--color-text);
}

.co-access-contact p {
	font-size:     1rem;
	margin-bottom: 8px;
	display:       flex;
	align-items:   center;
	gap:           4px;
}

.co-access-label {
	display:        inline-block;
	background:     var(--color-primary);
	color:          var(--color-white);
	font-size:      .72rem;
	font-weight:    700;
	padding:        2px 8px;
	border-radius:  2px;
	letter-spacing: .06em;
	flex-shrink:    0;
}

.co-access-transport { margin-top: 32px; }

.co-access-transport-title {
	font-size:     1rem;
	font-weight:   700;
	color:         var(--color-primary);
	margin-bottom: 14px;
	display:       flex;
	align-items:   center;
	gap:           8px;
}

.co-access-transport-list {
	list-style:   disc;
	padding-left: 22px;
	font-size:    .9rem;
	color:        var(--color-text-sub);
	line-height:  2.1;
}

/* ============================================================
   RESPONSIVE — 768px  (company overview additions)
   ============================================================ */
@media (max-width: 768px) {
	.co-page-nav-btn { width: calc(50% - 6px); height: 56px; font-size: .85rem; }

	.co-overview-table th { width: 120px; padding: 14px 16px; }
	.co-overview-table td { padding: 14px 16px; }

	/* Timeline → single left-aligned column */
	.co-history-center-line { left: 22px; transform: none; }
	.co-history-item        { flex-direction: column; padding-left: 56px; gap: 0; }
	.co-history-item--left  .co-history-card,
	.co-history-item--right .co-history-card { width: 100%; }
	.co-history-spacer { display: none; }
	.co-history-dot {
		position: absolute;
		left:     8px;
		top:      12px;
		flex:     none;
		width:    28px;
		padding:  0;
	}
	.co-history-item--left  .co-history-card::before,
	.co-history-item--right .co-history-card::before,
	.co-history-item--left  .co-history-card::after,
	.co-history-item--right .co-history-card::after { display: none; }
	.co-history-item--left  .co-history-card { transform: translateX(-24px); }
	.co-history-item--right .co-history-card { transform: translateX(-24px); }

	.co-offices-grid { grid-template-columns: 1fr 1fr; }

	.co-access-body { grid-template-columns: 1fr; }
	.co-access-map  { height: 320px; }
}

/* ============================================================
   RESPONSIVE — 480px  (company overview additions)
   ============================================================ */
@media (max-width: 480px) {
	.co-page-nav-btn { width: 100%; }
	.co-offices-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BUSINESS INTRO PAGE
   ============================================================ */

/* Scroll target offset */
#kensetsu-zai, #juken-zai, #kiso-jigyo, #kanamono, #life-in {
	scroll-margin-top: calc(var(--header-height) + 20px);
}

/* ---- Breadcrumb ---- */
.bi-breadcrumb {
	background:    var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	padding:       14px 0;
}

.bi-breadcrumb-list {
	display:     flex;
	align-items: center;
	gap:         8px;
	list-style:  none;
	font-size:   .82rem;
	color:       var(--color-text-sub);
}
.bi-breadcrumb-list a {
	color:      var(--color-primary);
	transition: color var(--transition);
}
.bi-breadcrumb-list a:hover { color: var(--color-accent); opacity: 1; }
.bi-breadcrumb-sep::before { content: '›'; font-size: 1rem; }

/* ---- Lead section ---- */
.bi-lead { background: var(--color-white); }

.bi-lead-inner {
	max-width:  760px;
	margin:     0 auto;
	text-align: center;
}

.bi-lead-title {
	font-size:      clamp(2.4rem, 4vw, 3.6rem);
	font-weight:    900;
	color:          var(--color-primary);
	margin-bottom:  20px;
	letter-spacing: .03em;
	display:        inline-block;
	position:       relative;
	padding-bottom: 16px;
	isolation:      isolate;
}
.bi-lead-title::after {
	content:       '';
	position:      absolute;
	left:          0;
	bottom:        15px;
	width:         100%;
	height:        7px;
	background:    var(--color-accent);
	z-index:       -1;
	border-radius: 2px;
}

.bi-lead-text {
	font-size:   1.2rem;
	color:       var(--color-text-sub);
	line-height: 2;
}

/* ---- Quick navigation ---- */
.bi-quick-nav-wrapper { background: var(--color-primary); }

.bi-quick-nav {
	display:    flex;
	list-style: none;
}

.bi-quick-nav li {
	flex:    1;
	display: flex;
}

.bi-quick-nav-item {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             4px;
	flex:            1;
	padding:         10px 8px;
	color:           rgba(255,255,255,.72);
	font-size:       .72rem;
	font-weight:     700;
	letter-spacing:  .06em;
	text-decoration: none;
	border-right:    1px solid rgba(255,255,255,.12);
	transition:      background var(--transition), color var(--transition);
}
.bi-quick-nav li:last-child .bi-quick-nav-item { border-right: none; }
.bi-quick-nav-item:hover {
	background: var(--color-accent);
	color:      var(--color-white);
	opacity:    1;
}

.bi-quick-num {
	display:        block;
	font-size:      .7rem;
	font-weight:    700;
	letter-spacing: .14em;
	color:          var(--color-accent);
	transition:     color var(--transition);
}
.bi-quick-nav-item:hover .bi-quick-num { color: rgba(255,255,255,.65); }

.bi-quick-nav-item i { font-size: 1rem; }

/* ---- Quick nav: 商品ページカラーに合わせた個別色 ---- */
.bi-qitem--1 { background: var(--pr-c1); }
.bi-qitem--2 { background: var(--pr-c2); }
.bi-qitem--3 { background: var(--pr-c3); }
.bi-qitem--6 { background: var(--pr-c6); }
.bi-qitem--7 { background: var(--pr-c7); }

.bi-qitem--1,
.bi-qitem--2,
.bi-qitem--3,
.bi-qitem--6,
.bi-qitem--7 { color: #fff; }

.bi-qitem--1 .bi-quick-num,
.bi-qitem--2 .bi-quick-num,
.bi-qitem--3 .bi-quick-num,
.bi-qitem--6 .bi-quick-num,
.bi-qitem--7 .bi-quick-num { color: #fff; }

.bi-qitem--1:hover { background: #fff; color: var(--pr-c1); }
.bi-qitem--2:hover { background: #fff; color: var(--pr-c2); }
.bi-qitem--3:hover { background: #fff; color: var(--pr-c3); }
.bi-qitem--6:hover { background: #fff; color: var(--pr-c6); }
.bi-qitem--7:hover { background: #fff; color: var(--pr-c7); }

.bi-qitem--1:hover .bi-quick-num { color: var(--pr-c1); }
.bi-qitem--2:hover .bi-quick-num { color: var(--pr-c2); }
.bi-qitem--3:hover .bi-quick-num { color: var(--pr-c3); }
.bi-qitem--6:hover .bi-quick-num { color: var(--pr-c6); }
.bi-qitem--7:hover .bi-quick-num { color: var(--pr-c7); }

/* ---- Business section base ---- */
.bi-section--a { background: var(--color-white); }
.bi-section--b { background: var(--color-bg); }

.bi-section-inner {
	display:     flex;
	align-items: center;
	gap:         72px;
}
.bi-section-inner--ltr { flex-direction: row; }
.bi-section-inner--rtl { flex-direction: row-reverse; }

.bi-section-content { flex: 1; min-width: 0; }

.bi-section-img {
	flex:     0 0 46%;
	position: relative;
}

/* ---- Section head (number + badge) ---- */
.bi-section-head {
	display:     flex;
	align-items: center;
	gap:         16px;
	margin-bottom: 14px;
}

.bi-section-num {
	font-size:         4.5rem;
	font-weight:       900;
	color:             var(--color-border);
	line-height:       1;
	letter-spacing:    -.04em;
	font-feature-settings: "tnum";
	user-select:       none;
}

.bi-section-badge {
	display:        inline-block;
	background:     var(--color-primary);
	color:          var(--color-white);
	font-size:      .65rem;
	font-weight:    700;
	letter-spacing: .22em;
	padding:        5px 14px;
	text-transform: uppercase;
	white-space:    nowrap;
}

/* ---- Section heading ---- */
.bi-section-title {
	font-size:     clamp(1.8rem, 3vw, 2.6rem);
	font-weight:   900;
	color:         var(--color-primary);
	letter-spacing:.03em;
	line-height:   1.2;
	margin-bottom: 20px;
	position:      relative;
	padding-bottom:18px;
}
.bi-section-title::after {
	content:      '';
	position:     absolute;
	left:         0;
	bottom:       0;
	width:        52px;
	height:       4px;
	background:   var(--color-accent);
	border-radius:2px;
}

/* ---- Lead paragraph ---- */
.bi-section-lead {
	font-size:     1.5rem;
	font-weight:   700;
	color:         var(--color-text);
	line-height:   1.75;
	margin-bottom: 12px;
}

/* ---- Description ---- */
.bi-section-desc {
	font-size:     .93rem;
	color:         var(--color-text-sub);
	line-height:   1.95;
	margin-bottom: 28px;
}

/* ---- Feature list ---- */
.bi-features {
	list-style:    none;
	display:       grid;
	grid-template-columns: 1fr 1fr;
	gap:           8px 20px;
	margin-bottom: 36px;
}

.bi-feature-item {
	font-size:   .88rem;
	color:       var(--color-text);
	display:     flex;
	align-items: center;
	gap:         8px;
	line-height: 1.5;
}
.bi-feature-item i {
	color:       var(--color-accent);
	font-size:   .72rem;
	flex-shrink: 0;
}

/* ---- Button ---- */
.bi-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             10px;
	background:      var(--color-primary);
	color:           var(--color-white);
	border:          2px solid var(--color-primary);
	padding:         14px 36px;
	font-family:     var(--font-main);
	font-size:       .9rem;
	font-weight:     700;
	letter-spacing:  .1em;
	border-radius:   0;
	cursor:          pointer;
	text-decoration: none;
	transition:      background var(--transition), border-color var(--transition), transform var(--transition);
}
.bi-btn:hover {
	background:   var(--color-accent);
	border-color: var(--color-accent);
	transform:    translateX(4px);
	opacity:      1;
}
.bi-btn i { transition: transform var(--transition); }
.bi-btn:hover i { transform: translateX(4px); }

/* ---- Image frame ---- */
.bi-img-frame {
	width:         100%;
	aspect-ratio:  4 / 3;
	background:    #c8cfe8;
	overflow:      hidden;
	position:      relative;
	z-index:       1;
}
.bi-img-frame img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
	transition:  transform .5s ease;
}
.bi-section-img:hover .bi-img-frame img { transform: scale(1.04); }

/* Decorative offset border (box-shadow) */
.bi-section-inner--ltr .bi-img-frame {
	box-shadow: 12px 12px 0 var(--color-primary);
}
.bi-section-inner--rtl .bi-img-frame {
	box-shadow: -12px 12px 0 var(--color-primary);
}

/* ---- CTA section ---- */
.bi-cta-section {
	background:  var(--color-primary-dark);
	padding:     80px 0;
	text-align:  center;
}

.bi-cta-inner {
	max-width: 700px;
	margin:    0 auto;
}

.bi-cta-title {
	font-size:     clamp(1.4rem, 2.5vw, 1.9rem);
	font-weight:   900;
	color:         var(--color-white);
	margin-bottom: 16px;
	line-height:   1.5;
}

.bi-cta-text {
	font-size:     .96rem;
	color:         rgba(255,255,255,.65);
	margin-bottom: 36px;
	line-height:   1.95;
}

.bi-cta-btns {
	display:         flex;
	gap:             16px;
	justify-content: center;
	flex-wrap:       wrap;
}

.bi-cta-btn {
	border-radius: 0 !important;
	font-size:     1rem;
	padding:       16px 48px;
}

.bi-cta-btn-outline {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	background:      transparent;
	color:           var(--color-white);
	border:          2px solid rgba(255,255,255,.45);
	padding:         16px 48px;
	font-family:     var(--font-main);
	font-size:       1rem;
	font-weight:     700;
	letter-spacing:  .06em;
	text-decoration: none;
	transition:      background var(--transition), border-color var(--transition);
}
.bi-cta-btn-outline:hover {
	background:   rgba(255,255,255,.08);
	border-color: var(--color-white);
	opacity:      1;
}

/* ============================================================
   RESPONSIVE — 960px (business intro)
   ============================================================ */
@media (max-width: 960px) {
	.bi-section-inner { gap: 48px; }
	.bi-section-img   { flex: 0 0 44%; }
	.bi-section-num   { font-size: 3.2rem; }
}

/* ============================================================
   RESPONSIVE — 768px (business intro)
   ============================================================ */
@media (max-width: 768px) {
	.bi-quick-nav { flex-wrap: wrap; }
	.bi-quick-nav li { flex: 1 1 33.33%; }
	.bi-quick-nav-item {
		border-right:   none;
		border-bottom:  1px solid rgba(255,255,255,.1);
		padding:        16px 8px;
		font-size:      .75rem;
	}

	.bi-section-inner--ltr,
	.bi-section-inner--rtl {
		flex-direction: column;
		gap:            40px;
	}
	.bi-section-content,
	.bi-section-img { flex: none; width: 100%; }

	.bi-section-inner--ltr .bi-img-frame,
	.bi-section-inner--rtl .bi-img-frame {
		box-shadow: 8px 8px 0 var(--color-primary);
	}

	.bi-section-num  { font-size: 2.6rem; }
	.bi-features     { grid-template-columns: 1fr; }

	.bi-cta-btn,
	.bi-cta-btn-outline { width: 100%; justify-content: center; }
}

/* ============================================================
   RESPONSIVE — 480px (business intro)
   ============================================================ */
@media (max-width: 480px) {
	.bi-quick-nav li        { flex: 1 1 50%; }
	.bi-section-num         { font-size: 2rem; }
	.bi-section-badge       { font-size: .6rem; letter-spacing: .12em; }
	.bi-img-frame           { aspect-ratio: 3 / 2; }
}

/* ============================================================
   PROJECT PAGE
   ============================================================ */

/* ---- Lead section ---- */
.pj-lead { background: var(--color-white); }
.pj-lead .section-title {
	display:        inline-block;
	font-size:      clamp(2.4rem, 4vw, 3.6rem);
	padding-bottom: 16px;
	position:       relative;
	isolation:      isolate;
	margin-bottom:  0;
}
.pj-lead .section-title::after {
	content:       '';
	position:      absolute;
	bottom:        15px;
	left:          0;
	width:         100%;
	height:        7px;
	background:    var(--color-accent);
	z-index:       -1;
	border-radius: 2px;
}
.pj-lead-inner { max-width: 820px; margin: 0 auto; }
.pj-lead-text {
	font-size:   1.2rem;
	color:       var(--color-text-sub);
	line-height: 2;
	text-align:  center;
	margin-top:  8px;
}

/* ---- Stats section ---- */
.pj-stats-section {
	background: var(--color-primary-dark);
	padding:    64px 0;
}

.pj-stats-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   2px;
}

.pj-stat {
	text-align:  center;
	padding:     32px 20px;
	border-right:1px solid rgba(255,255,255,.1);
}
.pj-stat:last-child { border-right: none; }

.pj-stat-label {
	display:        block;
	font-size:      .78rem;
	font-weight:    700;
	color:          rgba(255,255,255,.55);
	letter-spacing: .12em;
	margin-bottom:  12px;
	text-transform: none;
}

.pj-stat-num {
	display:     block;
	font-size:   clamp(2.4rem, 4vw, 3.6rem);
	font-weight: 900;
	color:       var(--color-white);
	line-height: 1;
}

.pj-stat-unit {
	font-size:   1.1rem;
	font-weight: 700;
	color:       var(--color-accent);
	margin-left: 4px;
}

/* ---- Archive section ---- */
.pj-archive { background: var(--color-bg); }

/* ---- Filter bar ---- */
.pj-filter-bar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	margin-bottom:   40px;
	flex-wrap:       wrap;
	padding:         20px 24px;
	background:      var(--color-white);
	border:          1px solid var(--color-border);
	box-shadow:      var(--shadow-sm);
	position:        sticky;
	top:             var(--header-height);
	z-index:         800;
}

.pj-filter-btns {
	display:  flex;
	gap:      8px;
	flex-wrap:wrap;
}

.pj-filter-btn {
	display:        inline-flex;
	align-items:    center;
	gap:            7px;
	padding:        8px 18px;
	border:         1.5px solid var(--color-border);
	background:     var(--color-white);
	color:          var(--color-text);
	font-family:    var(--font-main);
	font-size:      .82rem;
	font-weight:    700;
	letter-spacing: .04em;
	cursor:         pointer;
	border-radius:  2px;
	transition:     background var(--transition), color var(--transition),
	                border-color var(--transition);
	white-space:    nowrap;
}
.pj-filter-btn:hover {
	border-color: var(--color-primary);
	color:        var(--color-primary);
}

/* Active: すべて */
.pj-filter-btn[data-filter="all"].is-active {
	background:   var(--color-primary);
	color:        var(--color-white);
	border-color: var(--color-primary);
}

/* Active: カテゴリ別カラー */
.pj-filter-btn[data-filter="kensetsu"].is-active { background: #1a237e; color: #fff; border-color: #1a237e; }
.pj-filter-btn[data-filter="juken"].is-active    { background: #00695c; color: #fff; border-color: #00695c; }
.pj-filter-btn[data-filter="kiso"].is-active     { background: #5d4037; color: #fff; border-color: #5d4037; }
.pj-filter-btn[data-filter="kanamono"].is-active { background: #4527a0; color: #fff; border-color: #4527a0; }
.pj-filter-btn[data-filter="life-in"].is-active  { background: #2e7d32; color: #fff; border-color: #2e7d32; }

/* Category dot indicators */
.pj-filter-dot {
	display:       inline-block;
	width:         9px;
	height:        9px;
	border-radius: 50%;
	flex-shrink:   0;
}
.pj-dot--kensetsu { background: #1565c0; }
.pj-dot--juken    { background: #0d1b5e; }
.pj-dot--kiso     { background: #6d4c41; }
.pj-dot--kanamono { background: #6a1b9a; }
.pj-dot--life-in  { background: #0288d1; }

.pj-result-count {
	font-size:      .82rem;
	color:          var(--color-text-sub);
	white-space:    nowrap;
	flex-shrink:    0;
}
.pj-result-count #pj-result-count {
	font-weight: 700;
	color:       var(--color-primary);
	font-size:   1rem;
}

/* ---- Project grid ---- */
.pj-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   28px;
}

/* ---- Project card ---- */
.pj-card {
	background:  var(--color-white);
	border:      1px solid var(--color-border);
	overflow:    hidden;
	box-shadow:  var(--shadow-sm);
	transition:  transform var(--transition), box-shadow var(--transition),
	             opacity .3s ease;
	display:     flex;
	flex-direction: column;
}
.pj-card:hover {
	transform:  translateY(-6px);
	box-shadow: var(--shadow);
}
.pj-card.is-hidden { display: none; }

/* Card image */
.pj-card-img {
	position:     relative;
	width:        100%;
	aspect-ratio: 4 / 3;
	overflow:     hidden;
	flex-shrink:  0;
}
.pj-card-img img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform .5s ease;
}
.pj-card:hover .pj-card-img img { transform: scale(1.06); }

/* Image placeholder colors per category */
.pj-img--kensetsu { background: linear-gradient(135deg, #90caf9 0%, #1565c0 100%); }
.pj-img--juken    { background: linear-gradient(135deg, #7986cb 0%, #0d1b5e 100%); }
.pj-img--kiso     { background: linear-gradient(135deg, #d7b899 0%, #6d4c41 100%); }
.pj-img--kanamono { background: linear-gradient(135deg, #ce93d8 0%, #6a1b9a 100%); }
.pj-img--life-in  { background: linear-gradient(135deg, #80deea 0%, #0288d1 100%); }

/* Overlay badges */
.pj-card-badge {
	position:    absolute;
	top:         14px;
	left:        14px;
	font-size:   .72rem;
	font-weight: 700;
	color:       #fff;
	padding:     4px 10px;
	letter-spacing:.06em;
	line-height: 1;
	z-index:     1;
}
.pj-badge--kensetsu { background: #1565c0; }
.pj-badge--juken    { background: #0d1b5e; }
.pj-badge--kiso     { background: #6d4c41; }
.pj-badge--kanamono { background: #6a1b9a; }
.pj-badge--life-in  { background: #0288d1; }

.pj-card-year {
	position:    absolute;
	top:         14px;
	right:       14px;
	font-size:   .72rem;
	font-weight: 700;
	color:       var(--color-white);
	background:  rgba(0,0,0,.45);
	padding:     4px 10px;
	letter-spacing:.06em;
	line-height: 1;
	z-index:     1;
	backdrop-filter: blur(2px);
}

/* Card body */
.pj-card-body {
	padding: 20px;
	flex:    1;
	display: flex;
	flex-direction: column;
	gap:     8px;
}

.pj-card-title {
	font-size:     .96rem;
	font-weight:   700;
	color:         var(--color-primary);
	line-height:   1.5;
	margin:        0;
}

.pj-card-meta {
	font-size:   .78rem;
	color:       var(--color-text-sub);
	display:     flex;
	align-items: center;
	gap:         5px;
	margin:      0;
}
.pj-card-meta i { font-size: .7rem; color: var(--color-accent); }

.pj-card-desc {
	font-size:   .82rem;
	color:       var(--color-text-sub);
	line-height: 1.75;
	margin:      0;
	flex:        1;
}

/* Tags */
.pj-card-tags {
	display:   flex;
	flex-wrap: wrap;
	gap:       5px;
	list-style:none;
	margin-top:4px;
}
.pj-card-tags li {
	font-size:     .68rem;
	font-weight:   700;
	color:         var(--color-primary);
	background:    rgba(26,35,126,.07);
	padding:       3px 8px;
	border-radius: 2px;
	letter-spacing:.04em;
}

/* No result message */
.pj-no-result {
	text-align:    center;
	padding:       60px 0;
	color:         var(--color-text-sub);
	font-size:     1rem;
	grid-column:   1 / -1;
}

/* ============================================================
   RESPONSIVE — 960px (project)
   ============================================================ */
@media (max-width: 960px) {
	.pj-stats-grid { grid-template-columns: repeat(2, 1fr); }
	.pj-stat       { border-bottom: 1px solid rgba(255,255,255,.1); }
	.pj-grid       { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE — 768px (project)
   ============================================================ */
@media (max-width: 768px) {
	.pj-filter-bar {
		position: static;
		flex-direction: column;
		align-items:    flex-start;
	}
	.pj-filter-btns { width: 100%; }
	.pj-filter-btn  { font-size: .78rem; padding: 7px 12px; }
}

/* ============================================================
   RESPONSIVE — 480px (project)
   ============================================================ */
@media (max-width: 480px) {
	.pj-stats-grid { grid-template-columns: 1fr 1fr; }
	.pj-stat       { padding: 24px 12px; }
	.pj-grid       { grid-template-columns: 1fr; }
}


/* ============================================================
   PRODUCTS PAGE  (pr- prefix)
   ============================================================ */

/* ----- Lead section ----- */
.pr-lead {
	padding: 64px 0 48px;
	text-align: center;
}
.pr-lead .section-title {
	display:        inline-block;
	font-size:      clamp(2.4rem, 4vw, 3.6rem);
	padding-bottom: 16px;
	position:       relative;
	isolation:      isolate;
	margin-bottom:  0;
}
.pr-lead .section-title::after {
	content:       '';
	position:      absolute;
	bottom:        15px;
	left:          0;
	width:         100%;
	height:        7px;
	background:    var(--color-accent);
	z-index:       -1;
	border-radius: 2px;
}
.pr-lead-heading {
	font-size: 2rem;
	font-weight: 900;
	color: var(--color-primary);
	line-height: 1.3;
	margin-bottom: 16px;
}
.pr-lead-heading span {
	display: block;
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--color-accent);
	letter-spacing: .1em;
	margin-bottom: 8px;
}
.pr-lead-text {
	font-size: 1.2rem;
	color: var(--color-text-sub);
	max-width: 680px;
	margin: 0 auto;
	line-height: 1.9;
}

/* ----- Quick nav wrapper ----- */
.pr-quick-nav-wrapper {
	background: var(--color-bg);
	padding: 40px 0;
	margin-bottom: 64px;
}
.pr-quick-nav {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             12px;
}

/* Category colors */
:root {
	--pr-c1: #1565c0; /* 建築資材 : 青 */
	--pr-c2: #0d1b5e; /* 住建資材 : 紺 */
	--pr-c3: #6d4c41; /* 基礎資材 : 茶色 */
	--pr-c4: #78909c; /* 軽量鉄骨 : シルバー */
	--pr-c5: #e65100; /* 構造資材 : オレンジ */
	--pr-c6: #6a1b9a; /* 建築金物 : 紫 */
	--pr-c7: #0288d1; /* ライフイン : 水色 */
}

.pr-quick-btn {
	display:          inline-flex;
	align-items:      center;
	gap:              8px;
	padding:          12px 22px;
	border-radius:    var(--radius);
	font-size:        .88rem;
	font-weight:      700;
	text-decoration:  none;
	border:           2px solid transparent;
	transition:       background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
	white-space:      nowrap;
}
.pr-quick-btn i {
	font-size: .8em;
	flex-shrink: 0;
}
.pr-qbtn--1 { background: var(--pr-c1); color: #fff; }
.pr-qbtn--2 { background: var(--pr-c2); color: #fff; }
.pr-qbtn--3 { background: var(--pr-c3); color: #fff; }
.pr-qbtn--4 { background: var(--pr-c4); color: #fff; }
.pr-qbtn--5 { background: var(--pr-c5); color: #fff; }
.pr-qbtn--6 { background: var(--pr-c6); color: #fff; }
.pr-qbtn--7 { background: var(--pr-c7); color: #fff; }

.pr-qbtn--1:hover { background: #fff; color: var(--pr-c1); border-color: var(--pr-c1); transform: translateY(-2px); }
.pr-qbtn--2:hover { background: #fff; color: var(--pr-c2); border-color: var(--pr-c2); transform: translateY(-2px); }
.pr-qbtn--3:hover { background: #fff; color: var(--pr-c3); border-color: var(--pr-c3); transform: translateY(-2px); }
.pr-qbtn--4:hover { background: #fff; color: var(--pr-c4); border-color: var(--pr-c4); transform: translateY(-2px); }
.pr-qbtn--5:hover { background: #fff; color: var(--pr-c5); border-color: var(--pr-c5); transform: translateY(-2px); }
.pr-qbtn--6:hover { background: #fff; color: var(--pr-c6); border-color: var(--pr-c6); transform: translateY(-2px); }
.pr-qbtn--7:hover { background: #fff; color: var(--pr-c7); border-color: var(--pr-c7); transform: translateY(-2px); }

/* ----- Categories wrapper ----- */
.pr-categories {
	padding-bottom: 96px;
}

/* ----- Category grid ----- */
.pr-grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   40px;
}

/* ----- Scroll offset for sticky header ----- */
.pr-card {
	scroll-margin-top: calc(var(--header-height) + 24px);
	background:        var(--color-white);
	border-radius:     var(--radius-lg);
	overflow:          hidden;
	box-shadow:        var(--shadow);
	display:           flex;
	flex-direction:    column;
	transition:        box-shadow var(--transition), transform var(--transition);
}
.pr-card:hover {
	box-shadow:   var(--shadow-lg);
	transform:    translateY(-4px);
}

/* Full-width card (7th category) */
.pr-card--wide {
	grid-column:  1 / -1;
	margin-top:   40px;
}

/* ----- Color banner ----- */
.pr-card-banner {
	display:         flex;
	align-items:     center;
	justify-content: center;
	height:          220px;
	position:        relative;
	overflow:        hidden;
}
.pr-card--wide .pr-card-banner { height: 260px; }

/* Banner image (shown when src is set) */
.pr-banner-img {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
	opacity:    0;
	transition: opacity var(--transition);
}
/* When a real src is set, show image */
.pr-banner-img[src]:not([src=""]) {
	opacity: 1;
}

.pr-banner--1 { background: linear-gradient(135deg, var(--pr-c1) 0%, #0d47a1 100%); }
.pr-banner--2 { background: linear-gradient(135deg, var(--pr-c2) 0%, #050d2d 100%); }
.pr-banner--3 { background: linear-gradient(135deg, var(--pr-c3) 0%, #4e342e 100%); }
.pr-banner--4 { background: linear-gradient(135deg, var(--pr-c4) 0%, #546e7a 100%); }
.pr-banner--5 { background: linear-gradient(135deg, var(--pr-c5) 0%, #bf360c 100%); }
.pr-banner--6 { background: linear-gradient(135deg, var(--pr-c6) 0%, #4a148c 100%); }
.pr-banner--7 { background: linear-gradient(135deg, var(--pr-c7) 0%, #006064 100%); }

.pr-banner-icon {
	font-size:  3.2rem;
	color:      rgba(255, 255, 255, .9);
	z-index:    1;
}
.pr-card--wide .pr-banner-icon { font-size: 3.8rem; }

/* Decorative circles in banner */
.pr-card-banner::before,
.pr-card-banner::after {
	content:       '';
	position:      absolute;
	border-radius: 50%;
	background:    rgba(255, 255, 255, .06);
}
.pr-card-banner::before { width: 180px; height: 180px; top: -60px; right: -40px; }
.pr-card-banner::after  { width: 120px; height: 120px; bottom: -50px; left: -20px; }

/* ----- Card body ----- */
.pr-card-body {
	padding:        28px 28px 0;
	flex:           1;
	display:        flex;
	flex-direction: column;
}

/* ----- Card head (number + title) ----- */
.pr-card-head {
	display:     flex;
	align-items: baseline;
	gap:         10px;
	margin-bottom: 12px;
}
.pr-card-num {
	font-size:   2.2rem;
	font-weight: 900;
	line-height: 1;
	opacity:     .15;
	flex-shrink: 0;
}
.pr-banner--1 ~ .pr-card-body .pr-card-num { color: var(--pr-c1); }
.pr-banner--2 ~ .pr-card-body .pr-card-num { color: var(--pr-c2); }

/* Use a color-matched number via data or sibling hack — simpler: just one color */
.pr-card-num { color: var(--color-primary); }

.pr-card-title {
	font-size:   1.25rem;
	font-weight: 900;
	color:       var(--color-text);
	line-height: 1.3;
}
.pr-card--wide .pr-card-title { font-size: 1.4rem; }

.pr-card-desc {
	font-size:   .9rem;
	color:       var(--color-text-sub);
	line-height: 1.8;
	margin-bottom: 20px;
}

/* ----- Divider ----- */
.pr-divider {
	border:        none;
	border-top:    1px solid var(--color-border);
	margin:        0 0 16px;
}

/* ----- Products label ----- */
.pr-products-label {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   .78rem;
	font-weight: 700;
	color:       var(--color-text-sub);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 12px;
}
.pr-products-label i { color: var(--color-accent); }

/* ----- Products list ----- */
.pr-products-list {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   6px 16px;
	margin-bottom:         24px;
}
.pr-products-list--wide {
	grid-template-columns: repeat(5, 1fr);
	gap:                   6px 16px;
}

.pr-product-item {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   .88rem;
	color:       var(--color-text);
	line-height: 1.5;
}
.pr-product-item i {
	color:      var(--color-accent);
	font-size:  .8rem;
	flex-shrink: 0;
}

/* ----- Card footer ----- */
.pr-card-footer {
	padding: 20px 28px 28px;
}

/* ----- Detail button ----- */
.pr-detail-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	width:           100%;
	padding:         14px 24px;
	border-radius:   var(--radius);
	font-size:       .95rem;
	font-weight:     700;
	text-decoration: none;
	border:          2px solid transparent;
	transition:      background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.pr-detail-btn:hover { transform: translateY(-2px); }
.pr-detail-btn i { font-size: .85em; }

.pr-dbtn--1 { background: var(--pr-c1); color: #fff; border-color: var(--pr-c1); }
.pr-dbtn--2 { background: var(--pr-c2); color: #fff; border-color: var(--pr-c2); }
.pr-dbtn--3 { background: var(--pr-c3); color: #fff; border-color: var(--pr-c3); }
.pr-dbtn--4 { background: var(--pr-c4); color: #fff; border-color: var(--pr-c4); }
.pr-dbtn--5 { background: var(--pr-c5); color: #fff; border-color: var(--pr-c5); }
.pr-dbtn--6 { background: var(--pr-c6); color: #fff; border-color: var(--pr-c6); }
.pr-dbtn--7 { background: var(--pr-c7); color: #fff; border-color: var(--pr-c7); }

.pr-dbtn--1:hover { background: #fff; color: var(--pr-c1); }
.pr-dbtn--2:hover { background: #fff; color: var(--pr-c2); }
.pr-dbtn--3:hover { background: #fff; color: var(--pr-c3); }
.pr-dbtn--4:hover { background: #fff; color: var(--pr-c4); }
.pr-dbtn--5:hover { background: #fff; color: var(--pr-c5); }
.pr-dbtn--6:hover { background: #fff; color: var(--pr-c6); }
.pr-dbtn--7:hover { background: #fff; color: var(--pr-c7); }

/* ============================================================
   RESPONSIVE — 1100px (products)
   ============================================================ */
@media (max-width: 1100px) {
	.pr-products-list--wide { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   RESPONSIVE — 960px (products)
   ============================================================ */
@media (max-width: 960px) {
	.pr-grid     { gap: 28px; }
	.pr-card-num { font-size: 1.8rem; }
}

/* ============================================================
   RESPONSIVE — 768px (products)
   ============================================================ */
@media (max-width: 768px) {
	.pr-lead-heading        { font-size: 1.5rem; }
	.pr-grid                { grid-template-columns: 1fr; gap: 24px; }
	.pr-card--wide          { grid-column: auto; }
	.pr-card-banner         { height: 180px; }
	.pr-card--wide .pr-card-banner { height: 200px; }
	.pr-products-list       { grid-template-columns: 1fr; }
	.pr-products-list--wide { grid-template-columns: repeat(2, 1fr); }
	.pr-quick-nav           { gap: 8px; }
	.pr-quick-btn           { font-size: .8rem; padding: 10px 14px; }
}

/* ============================================================
   RESPONSIVE — 480px (products)
   ============================================================ */
@media (max-width: 480px) {
	.pr-lead-heading        { font-size: 1.25rem; }
	.pr-card-body           { padding: 20px 20px 0; }
	.pr-card-footer         { padding: 16px 20px 20px; }
	.pr-products-list--wide { grid-template-columns: repeat(2, 1fr); }
	.pr-card-banner         { height: 160px; }
	.pr-card--wide .pr-card-banner { height: 180px; }
	.pr-banner-icon         { font-size: 2.4rem; }
}


/* ============================================================
   HOME NEWS SECTION  (hn- prefix)
   ============================================================ */
.hn-section {
	background: var(--color-primary);
	position:   relative;
}

/* セクションタイトル */
.hn-main-title {
	display:        inline-block;
	font-size:      clamp(2.4rem, 4vw, 3.6rem);
	font-weight:    900;
	color:          #ffffff;
	letter-spacing: .05em;
	padding-bottom: 16px;
	position:       relative;
	isolation:      isolate;
}
.hn-main-title::after {
	content:       '';
	position:      absolute;
	bottom:        15px;
	left:          0;
	width:         100%;
	height:        7px;
	background:    var(--color-accent);
	z-index:       -1;
	border-radius: 2px;
}

/* サブタイトル（dark背景用） */
.hn-section .stats-subtitle {
	color: rgba(255, 255, 255, .7);
}

.hn-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   32px;
	margin-bottom:         48px;
}

/* カード */
.hn-card {
	background:     var(--color-white);
	border-radius:  var(--radius-lg);
	overflow:       hidden;
	box-shadow:     var(--shadow);
	transition:     box-shadow var(--transition), transform var(--transition);
}
.hn-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.hn-card-link {
	display:         flex;
	flex-direction:  column;
	text-decoration: none;
	color:           inherit;
	height:          100%;
}

/* サムネイル */
.hn-thumb {
	width:    100%;
	height:   200px;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--color-bg);
}
.hn-thumb-img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.hn-card:hover .hn-thumb-img { transform: scale(1.04); }
.hn-thumb-placeholder {
	width:           100%;
	height:          100%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
	color:           #9fa8da;
	font-size:       2.5rem;
}

/* カード本文 */
.hn-card-body {
	padding:        20px;
	display:        flex;
	flex-direction: column;
	flex:           1;
}

.hn-meta {
	display:     flex;
	align-items: center;
	gap:         10px;
	margin-bottom: 10px;
	flex-wrap:   wrap;
}

.hn-cat {
	display:       inline-block;
	padding:       3px 10px;
	background:    var(--color-accent);
	color:         #fff;
	border-radius: 20px;
	font-size:     .72rem;
	font-weight:   700;
	white-space:   nowrap;
}

.hn-date {
	font-size: .78rem;
	color:     var(--color-text-sub);
}

.hn-title {
	font-size:   1rem;
	font-weight: 700;
	color:       var(--color-text);
	line-height: 1.5;
	margin-bottom: 8px;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hn-card:hover .hn-title { color: var(--color-primary); }

.hn-excerpt {
	font-size:   .82rem;
	color:       var(--color-text-sub);
	line-height: 1.7;
	display:     -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:    hidden;
}

/* もっと見るボタン（dark背景用） */
.hn-more { text-align: center; }
.hn-more-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             10px;
	padding:         14px 40px;
	border:          2px solid rgba(255, 255, 255, .6);
	color:           #ffffff;
	font-weight:     700;
	font-size:       .95rem;
	border-radius:   var(--radius);
	text-decoration: none;
	transition:      background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.hn-more-btn:hover { background: #fff; color: var(--color-primary); border-color: #fff; transform: translateY(-2px); }
.hn-more-btn i { font-size: .85em; transition: transform var(--transition); }
.hn-more-btn:hover i { transform: translateX(4px); }

.hn-empty { text-align: center; color: rgba(255, 255, 255, .7); padding: 48px 0; }

/* ---- RESPONSIVE (home news) ---- */
@media (max-width: 960px) {
	.hn-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
	.hn-grid  { grid-template-columns: 1fr; gap: 20px; }
	.hn-thumb { height: 180px; }
}


/* ============================================================
   NEWS LISTING PAGE  (nw- prefix)
   ============================================================ */

/* Hero */
.nw-hero {
	background: linear-gradient(135deg, var(--color-primary) 0%, #283593 50%, #1a237e 100%);
	min-height: 220px;
	display:    flex;
	align-items: center;
	justify-content: center;
}
.nw-hero-en {
	display:        block;
	font-size:      .78rem;
	font-weight:    700;
	letter-spacing: .2em;
	color:          rgba(255,255,255,.6);
	text-transform: uppercase;
	margin-bottom:  8px;
}
.nw-hero-title {
	font-size:   2.2rem;
	font-weight: 900;
	color:       #fff;
	text-align:  center;
}

/* Layout: sidebar + main */
.nw-layout { padding: 56px 0 80px; background: var(--color-bg); }
.nw-container {
	display:     grid;
	grid-template-columns: 260px 1fr;
	gap:         40px;
	align-items: start;
}

/* ---- Sidebar ---- */
.nw-sidebar { position: sticky; top: calc(var(--header-height) + 24px); }

.nw-sidebar-block {
	background:    var(--color-white);
	border-radius: var(--radius);
	padding:       20px;
	margin-bottom: 20px;
	box-shadow:    var(--shadow);
}
.nw-sidebar-heading {
	font-size:     .78rem;
	font-weight:   700;
	color:         var(--color-text-sub);
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom: 14px;
	display:       flex;
	align-items:   center;
	gap:           6px;
}
.nw-sidebar-heading i { color: var(--color-accent); }

/* 検索フォーム */
.nw-search-wrap {
	display:    flex;
	border:     1.5px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color .2s;
	width:      100%;
	box-sizing: border-box;
}
.nw-search-wrap:focus-within { border-color: var(--color-primary); }
.nw-search-input {
	flex:         1;
	min-width:    0;
	padding:      9px 12px;
	border:       none;
	outline:      none;
	font-size:    .88rem;
	background:   transparent;
	border-radius: var(--radius) 0 0 var(--radius);
}
.nw-search-btn {
	flex-shrink:   0;
	padding:       9px 14px;
	background:    var(--color-primary);
	color:         #fff;
	border:        none;
	cursor:        pointer;
	font-size:     .9rem;
	transition:    background var(--transition);
	border-radius: 0 var(--radius) var(--radius) 0;
}
.nw-search-btn:hover { background: #283593; }

/* カテゴリーリスト */
.nw-cat-list, .nw-year-list { list-style: none; padding: 0; margin: 0; }
.nw-cat-link, .nw-year-link {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         8px 10px;
	border-radius:   6px;
	text-decoration: none;
	color:           var(--color-text);
	font-size:       .88rem;
	transition:      background var(--transition), color var(--transition);
}
.nw-cat-link:hover, .nw-year-link:hover { background: #e8eaf6; color: var(--color-primary); }
.nw-cat-link.is-active, .nw-year-link.is-active {
	background: var(--color-primary);
	color:      #fff;
	font-weight: 700;
}
.nw-cat-count {
	font-size:   .72rem;
	background:  rgba(0,0,0,.08);
	padding:     1px 7px;
	border-radius: 20px;
	flex-shrink: 0;
}
.nw-cat-link.is-active .nw-cat-count { background: rgba(255,255,255,.25); }

/* ---- Main content ---- */
/* ステータスバー */
.nw-status-bar {
	display:       flex;
	align-items:   center;
	justify-content: space-between;
	margin-bottom: 24px;
	padding:       14px 18px;
	background:    var(--color-white);
	border-radius: var(--radius);
	box-shadow:    var(--shadow);
	flex-wrap:     wrap;
	gap:           8px;
}
.nw-result-count { font-size: .88rem; color: var(--color-text-sub); }
.nw-result-count strong { font-size: 1.1rem; font-weight: 900; color: var(--color-primary); }
.nw-filter-tag {
	display:       inline-block;
	background:    #e8eaf6;
	color:         var(--color-primary);
	padding:       2px 10px;
	border-radius: 20px;
	font-size:     .78rem;
	font-weight:   700;
	margin-right:  4px;
}
.nw-reset-link {
	display:     flex;
	align-items: center;
	gap:         4px;
	font-size:   .82rem;
	color:       var(--color-accent);
	text-decoration: none;
	white-space: nowrap;
}
.nw-reset-link:hover { text-decoration: underline; }

/* カードグリッド */
.nw-grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   24px;
	margin-bottom:         40px;
}

.nw-card {
	background:    var(--color-white);
	border-radius: var(--radius);
	overflow:      hidden;
	box-shadow:    var(--shadow);
	transition:    box-shadow var(--transition), transform var(--transition);
}
.nw-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.nw-card-link {
	display:         flex;
	flex-direction:  column;
	height:          100%;
	text-decoration: none;
	color:           inherit;
}

.nw-card-thumb {
	width:      100%;
	height:     180px;
	overflow:   hidden;
	flex-shrink: 0;
}
.nw-card-thumb--empty { background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%); }
.nw-card-img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.nw-card:hover .nw-card-img { transform: scale(1.04); }
.nw-card-no-img {
	width:           100%;
	height:          100%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           #9fa8da;
	font-size:       2.4rem;
}

.nw-card-body {
	padding:        20px;
	display:        flex;
	flex-direction: column;
	flex:           1;
}

.nw-card-meta {
	display:       flex;
	align-items:   center;
	gap:           10px;
	margin-bottom: 10px;
	flex-wrap:     wrap;
}
.nw-card-cat {
	display:       inline-block;
	padding:       3px 10px;
	background:    var(--color-primary);
	color:         #fff;
	border-radius: 20px;
	font-size:     .72rem;
	font-weight:   700;
}
.nw-card-date { font-size: .78rem; color: var(--color-text-sub); }

.nw-card-title {
	font-size:    .95rem;
	font-weight:  700;
	color:        var(--color-text);
	line-height:  1.5;
	margin-bottom: 8px;
	flex: 1;
}
.nw-card:hover .nw-card-title { color: var(--color-primary); }

.nw-card-excerpt {
	font-size:  .82rem;
	color:      var(--color-text-sub);
	line-height: 1.7;
	display:     -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:    hidden;
}

/* ページネーション */
.nw-pagination {
	display:         flex;
	justify-content: center;
	gap:             6px;
	flex-wrap:       wrap;
}
.nw-pagination .page-numbers {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           40px;
	height:          40px;
	border-radius:   6px;
	border:          1.5px solid var(--color-border);
	font-size:       .88rem;
	font-weight:     700;
	color:           var(--color-text);
	text-decoration: none;
	transition:      background var(--transition), color var(--transition), border-color var(--transition);
}
.nw-pagination .page-numbers:hover { background: #e8eaf6; border-color: var(--color-primary); color: var(--color-primary); }
.nw-pagination .page-numbers.current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.nw-pagination .prev, .nw-pagination .next { width: auto; padding: 0 16px; }

/* 空状態 */
.nw-empty {
	text-align: center;
	padding:    64px 24px;
	background: var(--color-white);
	border-radius: var(--radius);
}
.nw-empty-icon  { font-size: 3rem; color: #c5cae9; margin-bottom: 16px; display: block; }
.nw-empty-title { font-size: 1.1rem; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.nw-empty-desc  { font-size: .88rem; color: var(--color-text-sub); margin-bottom: 20px; }
.nw-empty-btn {
	display:         inline-block;
	padding:         10px 28px;
	background:      var(--color-primary);
	color:           #fff;
	border-radius:   var(--radius);
	text-decoration: none;
	font-size:       .88rem;
	font-weight:     700;
}

/* ---- RESPONSIVE (news listing) ---- */
@media (max-width: 1100px) {
	.nw-container { grid-template-columns: 220px 1fr; gap: 28px; }
}
@media (max-width: 860px) {
	.nw-container { grid-template-columns: 1fr; }
	.nw-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 768px) {
	.nw-hero-title { font-size: 1.6rem; }
	.nw-grid       { grid-template-columns: 1fr; }
	.nw-sidebar    { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.nw-hero-title { font-size: 1.3rem; }
	.nw-card-thumb { height: 160px; }
}

/* ============================================================
   PRIVACY POLICY
   ============================================================ */

/* --- Footer bottom bar with privacy link --- */
.footer-bottom-inner {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             24px;
	flex-wrap:       wrap;
}

.footer-privacy-link {
	font-size:      .73rem;
	color:          rgba(255,255,255,.45);
	letter-spacing: .05em;
	text-decoration: none;
	transition:     color var(--transition), opacity var(--transition);
	white-space:    nowrap;
}
.footer-privacy-link:hover {
	color:   var(--color-white);
	opacity: 1;
}

/* --- Page hero --- */
.pp-hero {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.pp-hero .page-hero-en    { color: rgba(255,255,255,.5); }
.pp-hero .page-hero-title { color: var(--color-white); }

/* --- Content section --- */
.pp-section { background: var(--color-white); }

.pp-body {
	max-width:  800px;
	margin:     0 auto;
}

.pp-lead {
	font-size:     1rem;
	line-height:   1.9;
	color:         var(--color-text);
	margin-bottom: 48px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--color-border);
}

.pp-block {
	margin-bottom: 40px;
}

.pp-heading {
	font-size:     1.1rem;
	font-weight:   700;
	color:         var(--color-primary);
	margin-bottom: 12px;
	padding-left:  14px;
	border-left:   3px solid var(--color-accent);
	line-height:   1.5;
}

.pp-block p {
	font-size:   .95rem;
	line-height: 1.9;
	color:       var(--color-text);
}

.pp-list {
	list-style:  disc;
	padding-left: 1.5em;
	margin-top:  10px;
}
.pp-list li {
	font-size:     .95rem;
	line-height:   1.8;
	color:         var(--color-text);
	margin-bottom: 4px;
}

.pp-contact-box {
	margin-top:    16px;
	padding:       24px 28px;
	background:    var(--color-bg);
	border-radius: var(--radius);
	border-left:   4px solid var(--color-primary);
}
.pp-contact-box p {
	font-size:     .9rem;
	line-height:   1.8;
	color:         var(--color-text);
	margin-bottom: 4px;
}
.pp-contact-company {
	font-weight:   700 !important;
	font-size:     1rem !important;
	margin-bottom: 10px !important;
}

.pp-contact-link {
	color:           var(--color-accent);
	text-decoration: underline;
}
.pp-contact-link:hover { opacity: .75; }

.pp-date {
	margin-top:  48px;
	padding-top: 24px;
	border-top:  1px solid var(--color-border);
	font-size:   .85rem;
	color:       var(--color-text-sub);
	text-align:  right;
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.pp-contact-box { padding: 18px 20px; }
}
@media (max-width: 480px) {
	.pp-heading { font-size: 1rem; }
}

/* ============================================================
   RECRUIT INFO PAGE
   ============================================================ */

/* --- Section title (HOME-page style: inline-block + full-width accent underline) --- */
.ri-message-section .section-title,
.ri-jobs-section .section-title,
.ri-benefits-section .section-title,
.ri-flow-section .section-title {
	display:        inline-block;
	padding-bottom: 16px;
	position:       relative;
	isolation:      isolate;
	margin-bottom:  0;
}
.ri-message-section .section-title::after,
.ri-jobs-section .section-title::after,
.ri-benefits-section .section-title::after,
.ri-flow-section .section-title::after {
	content:       '';
	position:      absolute;
	bottom:        15px;
	left:          0;
	width:         100%;
	height:        7px;
	background:    var(--color-accent);
	z-index:       -1;
	border-radius: 2px;
}

/* --- Message --- */
.ri-message-body {
	max-width:   800px;
	margin:      0 auto;
	text-align:  center;
}
.ri-message-lead {
	font-size:     1.15rem;
	font-weight:   700;
	color:         var(--color-primary);
	line-height:   1.8;
	margin-bottom: 28px;
}
.ri-message-text {
	font-size:     .97rem;
	color:         var(--color-text);
	line-height:   2;
	margin-bottom: 16px;
	text-align:    left;
}

/* --- Job Cards --- */
.ri-job-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap:     32px;
}
.ri-job-card {
	background:    var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow:    var(--shadow);
	overflow:      hidden;
}
.ri-job-card-head {
	background:  var(--color-primary);
	padding:     24px 28px;
	display:     flex;
	align-items: center;
	gap:         14px;
}
.ri-job-type {
	font-size:     .72rem;
	font-weight:   700;
	letter-spacing:.08em;
	color:         var(--color-primary);
	background:    var(--color-white);
	padding:       3px 10px;
	border-radius: 999px;
	white-space:   nowrap;
}
.ri-job-title {
	font-size:   1.2rem;
	font-weight: 700;
	color:       var(--color-white);
}
.ri-job-table {
	padding: 0;
}
.ri-job-row {
	display:     flex;
	border-bottom: 1px solid var(--color-border);
}
.ri-job-row:last-child { border-bottom: none; }
.ri-job-row dt {
	flex:        0 0 110px;
	font-size:   .82rem;
	font-weight: 700;
	color:       var(--color-primary);
	padding:     14px 16px;
	background:  rgba(26,35,126,.04);
	border-right: 1px solid var(--color-border);
}
.ri-job-row dd {
	flex:      1;
	font-size: .88rem;
	color:     var(--color-text);
	padding:   14px 18px;
	line-height: 1.7;
}

/* --- Benefits --- */
.ri-benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap:     20px;
	list-style: none;
}
.ri-benefit-item {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	gap:            10px;
	padding:        28px 20px;
	background:     var(--color-white);
	border-radius:  var(--radius);
	box-shadow:     var(--shadow-sm);
	transition:     transform var(--transition), box-shadow var(--transition);
}
.ri-benefit-item:hover {
	transform:  translateY(-4px);
	box-shadow: var(--shadow);
}
.ri-benefit-icon {
	font-size:   1.8rem;
	color:       var(--color-primary);
	line-height: 1;
}
.ri-benefit-label {
	font-size:   .95rem;
	font-weight: 700;
	color:       var(--color-text);
}
.ri-benefit-desc {
	font-size: .8rem;
	color:     var(--color-text-sub);
}

/* --- Flow --- */
.ri-flow-list {
	list-style:    none;
	max-width:     720px;
	margin:        0 auto;
	display:       flex;
	flex-direction: column;
	gap:           0;
}
.ri-flow-item {
	display:     flex;
	align-items: flex-start;
	gap:         24px;
	padding:     28px 0;
	border-bottom: 1px solid var(--color-border);
	position:    relative;
}
.ri-flow-item:last-child { border-bottom: none; }
.ri-flow-num {
	flex-shrink:    0;
	width:          52px;
	height:         52px;
	display:        flex;
	align-items:    center;
	justify-content: center;
	background:     var(--color-primary);
	color:          var(--color-white);
	font-size:      1.1rem;
	font-weight:    700;
	border-radius:  50%;
	letter-spacing: .04em;
}
.ri-flow-body { flex: 1; padding-top: 10px; }
.ri-flow-title {
	font-size:     1rem;
	font-weight:   700;
	color:         var(--color-primary);
	margin-bottom: 6px;
}
.ri-flow-desc {
	font-size:   .9rem;
	color:       var(--color-text);
	line-height: 1.8;
}

/* --- CTA Section --- */
.ri-cta-section { background: var(--color-primary); }
.ri-cta-box {
	text-align: center;
	padding:    20px 0;
}
.ri-cta-lead {
	font-size:     .85rem;
	color:         rgba(255,255,255,.6);
	letter-spacing:.08em;
	margin-bottom: 12px;
}
.ri-cta-title {
	font-size:     1.8rem;
	font-weight:   700;
	color:         var(--color-white);
	margin-bottom: 16px;
}
.ri-cta-desc {
	font-size:     .95rem;
	color:         rgba(255,255,255,.75);
	line-height:   1.8;
	margin-bottom: 32px;
}
.ri-cta-btn {
	display:      inline-flex;
	align-items:  center;
	gap:          10px;
	background:   var(--color-accent);
	color:        var(--color-white);
	font-size:    1rem;
	font-weight:  700;
	padding:      16px 40px;
	border-radius: 999px;
	text-decoration: none;
	box-shadow:   0 4px 20px rgba(229,57,53,.45);
	transition:   background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.ri-cta-btn:hover {
	background:  var(--color-accent-dark);
	transform:   translateY(-2px);
	box-shadow:  0 8px 28px rgba(229,57,53,.55);
	opacity:     1;
}

/* --- Fade-up animation --- */
.ri-message-body.fade-up,
.ri-job-card.fade-up,
.ri-benefit-item.fade-up,
.ri-flow-item.fade-up {
	opacity:   0;
	transform: translateY(28px);
	transition: opacity .6s ease, transform .6s ease;
}
.ri-message-body.fade-up.is-visible,
.ri-job-card.fade-up.is-visible,
.ri-benefit-item.fade-up.is-visible,
.ri-flow-item.fade-up.is-visible {
	opacity:   1;
	transform: translateY(0);
}

/* --- Responsive --- */
@media (max-width: 960px) {
	.ri-job-cards    { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
	.ri-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.ri-job-row dt   { flex: 0 0 90px; }
	.ri-cta-title    { font-size: 1.4rem; }
	.ri-cta-btn      { padding: 14px 28px; font-size: .95rem; }
}
@media (max-width: 480px) {
	.ri-benefits-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
	.ri-job-row       { flex-direction: column; }
	.ri-job-row dt    { flex: none; border-right: none; border-bottom: 1px solid var(--color-border); }
}

/* ============================================================
   BUSINESS DETAIL PAGES  (bd-*)
   ============================================================ */

/* Hero – extend existing shared hero styles */
.business-detail-hero {
	background:  url('images/kensetsu.jpg') center / cover no-repeat;
	position:    relative;
	overflow:    hidden;
	text-align:  left;
	padding:     200px 0 140px;
	min-height:  520px;
}
.business-detail-hero__overlay {
	position:    absolute;
	inset:       0;
	background:  var(--color-primary-dark);
	clip-path:   polygon(0% 0%, 42% 0%, 28% 100%, 0% 100%);
}
.business-detail-hero__inner {
	position:        relative;
	z-index:         1;
	max-width:       none;
	padding-left:    8%;
	display:         flex;
	flex-direction:  column;
	align-items:     flex-start;
}
.business-detail-hero__title {
	font-family:    var(--font-main);
	font-size:      clamp(3.6rem, 8vw, 5.8rem);
	font-weight:    700;
	color:          #ffffff;
	display:        inline-block;
	position:       relative;
	margin-bottom:  20px;
	line-height:    1.3;
	text-shadow:    2px 2px 8px rgba(0,0,0,.7), 0 0 20px rgba(0,0,0,.4);
}
.business-detail-hero__title::after {
	content:    '';
	position:   absolute;
	left:       0;
	bottom:     11px;
	width:      100%;
	height:     6px;
	background: #e02020;
	z-index:    -1;
}
.business-detail-hero__en {
	display:        inline-block;
	font-family:    var(--font-main);
	font-size:      clamp(1rem, 2vw, 1.4rem);
	font-weight:    700;
	color:          rgba(255,255,255,.75);
	letter-spacing: .25em;
	text-transform: uppercase;
	text-shadow:    1px 1px 4px rgba(0,0,0,.5);
}
.business-detail-hero__num {
	font-size:      clamp(.85rem, 1.5vw, 1rem);
	font-weight:    700;
	color:          var(--color-accent);
	letter-spacing: .2em;
	margin-bottom:  12px;
}

/* --- Lead (overview) section --- */
.bd-lead { background: var(--color-white); }
.bd-lead-inner {
	display:     grid;
	grid-template-columns: 1fr 1fr;
	gap:         60px;
	align-items: center;
}
@media (max-width: 860px) {
	.bd-lead-inner { grid-template-columns: 1fr; gap: 40px; }
}
.bd-lead-content { min-width: 0; }
.bd-lead-title {
	font-size:     clamp(1.8rem, 3vw, 2.6rem);
	font-weight:   900;
	color:         var(--color-primary);
	line-height:   1.25;
	margin-bottom: 20px;
	position:      relative;
	display:       inline-block;
	padding-bottom:16px;
	isolation:     isolate;
}
.bd-lead-title::after {
	content:       '';
	position:      absolute;
	left:          0;
	bottom:        15px;
	width:         100%;
	height:        7px;
	background:    var(--color-accent);
	z-index:       -1;
	border-radius: 2px;
}
.bd-lead-text {
	font-size:     1rem;
	color:         var(--color-text);
	line-height:   1.9;
	margin-bottom: 28px;
}
.bd-lead-img {
	border-radius: 12px;
	overflow:      hidden;
	aspect-ratio:  4/3;
	background:    var(--color-bg);
	box-shadow:    0 8px 32px rgba(0,0,0,.12);
}
.bd-lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Features --- */
.bd-features {
	list-style: none;
	padding:    0;
	margin:     0 0 32px;
	display:    grid;
	grid-template-columns: 1fr 1fr;
	gap:        10px 20px;
}
@media (max-width: 600px) { .bd-features { grid-template-columns: 1fr; } }
.bd-feature-item {
	display:     flex;
	align-items: center;
	gap:         10px;
	font-size:   .95rem;
	font-weight: 600;
	color:       var(--color-text);
	padding:     10px 14px;
	background:  var(--color-bg);
	border-radius: 6px;
	border-left: 4px solid var(--color-accent);
}
.bd-feature-item i {
	color:      var(--color-accent);
	flex-shrink:0;
	font-size:  .9rem;
}

/* --- Products/Services section --- */
.bd-products { background: var(--color-bg); }
.bd-products-header {
	text-align:    center;
	margin-bottom: 52px;
}
.bd-products-title {
	font-size:     clamp(1.6rem, 2.8vw, 2.2rem);
	font-weight:   900;
	color:         var(--color-primary);
	display:       inline-block;
	position:      relative;
	padding-bottom:16px;
	isolation:     isolate;
}
.bd-products-title::after {
	content:       '';
	position:      absolute;
	left:          0;
	bottom:        15px;
	width:         100%;
	height:        7px;
	background:    var(--color-accent);
	z-index:       -1;
	border-radius: 2px;
}
.bd-products-subtitle {
	margin-top:  12px;
	font-size:   .95rem;
	color:       var(--color-text-sub);
}
.bd-products-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   28px;
}
@media (max-width: 900px) { .bd-products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bd-products-grid { grid-template-columns: 1fr; } }
.bd-product-card {
	background:    var(--color-white);
	border-radius: 10px;
	padding:       28px 24px;
	box-shadow:    0 2px 16px rgba(0,0,0,.07);
	border-top:    4px solid var(--color-accent);
	transition:    transform var(--transition), box-shadow var(--transition);
}
.bd-product-card:hover {
	transform:   translateY(-4px);
	box-shadow:  0 8px 28px rgba(0,0,0,.13);
}
.bd-product-icon {
	font-size:     1.8rem;
	color:         var(--color-accent);
	margin-bottom: 14px;
}
.bd-product-name {
	font-size:     1.05rem;
	font-weight:   700;
	color:         var(--color-primary);
	margin-bottom: 8px;
}
.bd-product-desc {
	font-size:   .88rem;
	color:       var(--color-text-sub);
	line-height: 1.75;
}

/* --- Back link --- */
.bd-back-wrap {
	display:         flex;
	justify-content: center;
	align-items:     center;
	gap:             40px;
	padding:         60px 0 0;
	flex-wrap:       wrap;
}
.bd-back-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           8px;
	padding:       14px 32px;
	border:        2px solid var(--color-primary);
	border-radius: 4px;
	font-size:     .95rem;
	font-weight:   700;
	color:         var(--color-primary);
	text-decoration: none;
	transition:    background var(--transition), color var(--transition);
}
.bd-back-btn:hover {
	background: var(--color-primary);
	color:      var(--color-white);
}
.bd-back-btn i { font-size: .85rem; }

.bd-products-link-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	padding:         14px 32px;
	border:          2px solid var(--color-primary);
	border-radius:   4px;
	font-size:       .95rem;
	font-weight:     700;
	color:           var(--color-primary);
	text-decoration: none;
	transition:      background var(--transition), color var(--transition);
}
.bd-products-link-btn:hover {
	background: var(--color-primary);
	color:      var(--color-white);
}
.bd-products-link-btn i { font-size: .85rem; }

/* ============================================================
   PRODUCTS DETAIL PAGE  (prd-*)
   ============================================================ */

/* --- Tab nav wrapper --- */
.prd-tab-nav-wrapper {
	background:  var(--color-primary);
	position:    sticky;
	top:         var(--header-h);
	z-index:     90;
	box-shadow:  0 2px 8px rgba(0,0,0,.18);
}
.prd-tab-nav {
	display:         flex;
	list-style:      none;
	padding:         0;
	margin:          0;
	overflow-x:      auto;
	scrollbar-width: none;
}
.prd-tab-nav::-webkit-scrollbar { display: none; }
.prd-tab-nav li { flex-shrink: 0; }

.prd-tab-btn {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            6px;
	padding:        16px 22px;
	background:     transparent;
	border:         none;
	border-bottom:  3px solid transparent;
	color:          rgba(255,255,255,.65);
	font-size:      .8rem;
	font-weight:    700;
	letter-spacing: .04em;
	cursor:         pointer;
	transition:     color .2s, border-color .2s, background .2s;
	white-space:    nowrap;
	line-height:    1.3;
	text-align:     center;
}
.prd-tab-btn i { font-size: 1.2rem; }
.prd-tab-btn:hover {
	color:       #fff;
	background:  rgba(255,255,255,.07);
}
.prd-tab-btn.is-active {
	color:        #fff;
	border-bottom-color: var(--color-accent);
	background:   rgba(255,255,255,.1);
}
.prd-tab-br { display: none; }
@media (max-width: 600px) { .prd-tab-br { display: inline; } }

/* --- Panels --- */
.prd-panels { background: var(--color-white); }
.prd-panel  { display: none; }
.prd-panel.is-active { display: block; }

.prd-panel-inner { max-width: 1100px; margin: 0 auto; }

/* --- Panel header --- */
.prd-panel-head {
	display:       flex;
	align-items:   baseline;
	gap:           20px;
	margin-bottom: 32px;
	flex-wrap:     wrap;
}
.prd-panel-num {
	font-size:      clamp(2.8rem, 5vw, 4rem);
	font-weight:    900;
	color:          var(--color-accent);
	line-height:    1;
	opacity:        .25;
	letter-spacing: -.02em;
}
.prd-panel-title {
	font-size:     clamp(1.8rem, 3vw, 2.6rem);
	font-weight:   900;
	color:         var(--color-primary);
	display:       inline-block;
	position:      relative;
	padding-bottom:16px;
	isolation:     isolate;
}
.prd-panel-title::after {
	content:       '';
	position:      absolute;
	left:          0;
	bottom:        15px;
	width:         100%;
	height:        7px;
	background:    var(--color-accent);
	z-index:       -1;
	border-radius: 2px;
}
.prd-panel-subtitle {
	font-size:      .85rem;
	font-weight:    700;
	color:          var(--color-text-sub);
	letter-spacing: .15em;
	text-transform: uppercase;
	align-self:     center;
}

/* --- Panel description --- */
.prd-panel-desc {
	font-size:     1rem;
	color:         var(--color-text);
	line-height:   1.9;
	margin-bottom: 20px;
	max-width:     820px;
}

/* --- Items grid --- */
.prd-items-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   24px;
	margin-top:            40px;
}
@media (max-width: 900px) { .prd-items-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .prd-items-grid { grid-template-columns: 1fr; } }

.prd-item-card {
	background:    var(--color-bg);
	border-radius: 10px;
	padding:       28px 22px;
	border-top:    4px solid var(--color-accent);
	transition:    transform .2s, box-shadow .2s;
}
.prd-item-card:hover {
	transform:  translateY(-4px);
	box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.prd-item-icon {
	font-size:     1.6rem;
	color:         var(--color-accent);
	margin-bottom: 12px;
}
.prd-item-name {
	font-size:     1rem;
	font-weight:   700;
	color:         var(--color-primary);
	margin-bottom: 8px;
	line-height:   1.4;
}
.prd-item-desc {
	font-size:   .875rem;
	color:       var(--color-text-sub);
	line-height: 1.75;
}

/* --- Back link --- */
.prd-back-wrap {
	text-align:  center;
	padding-top: 60px;
}

/* ============================================================
   HOME — COLUMN SECTION UPDATES
   ============================================================ */
.column-card-link {
	display:         block;
	text-decoration: none;
	color:           inherit;
	height:          100%;
}
.column-meta {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-bottom: 6px;
	flex-wrap:   wrap;
}
.column-cat-badge {
	display:       inline-block;
	padding:       2px 10px;
	background:    var(--color-primary);
	color:         #fff;
	font-size:     .72rem;
	font-weight:   700;
	border-radius: 20px;
	white-space:   nowrap;
}
.column-thumb-icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	height:          100%;
	color:           rgba(255,255,255,.5);
	font-size:       2.5rem;
}
.column-footer {
	text-align:  center;
	margin-top:  48px;
}
.column-empty {
	grid-column: 1 / -1;
	text-align:  center;
	color:       var(--color-text-sub);
	padding:     40px 0;
}

/* ============================================================
   COLUMN PAGE — LAYOUT & FILTER
   ============================================================ */
.col-layout { padding: 56px 0 80px; background: var(--color-bg); }

/* Filter bar */
.col-filter-bar {
	display:         flex;
	flex-wrap:       wrap;
	gap:             10px;
	margin-bottom:   32px;
}
.col-filter-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         10px 20px;
	border-radius:   30px;
	border:          2px solid var(--color-border);
	background:      var(--color-white);
	color:           var(--color-text-sub);
	font-size:       .88rem;
	font-weight:     700;
	text-decoration: none;
	transition:      background var(--transition), color var(--transition), border-color var(--transition);
}
.col-filter-btn i { font-size: .85em; }
.col-filter-btn:hover {
	border-color: var(--color-primary);
	color:        var(--color-primary);
	background:   rgba(26,35,126,.05);
}
.col-filter-btn.is-active {
	background:   var(--color-primary);
	color:        #fff;
	border-color: var(--color-primary);
}
.col-filter-count {
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	min-width:     20px;
	height:        20px;
	padding:       0 5px;
	background:    rgba(0,0,0,.12);
	border-radius: 10px;
	font-size:     .72rem;
	font-weight:   700;
}
.col-filter-btn.is-active .col-filter-count { background: rgba(255,255,255,.25); }

/* Status bar */
.col-status-bar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             8px;
	margin-bottom:   28px;
	padding:         12px 16px;
	background:      var(--color-white);
	border-radius:   var(--radius);
	border:          1px solid var(--color-border);
}
.col-result-count { font-size: .88rem; color: var(--color-text-sub); }
.col-result-count strong { color: var(--color-primary); font-size: 1rem; }
.col-filter-tag {
	display:       inline-block;
	padding:       2px 10px;
	background:    var(--color-primary);
	color:         #fff;
	border-radius: 20px;
	font-size:     .78rem;
	font-weight:   700;
	margin-right:  4px;
}
.col-reset-link {
	color:           var(--color-accent);
	font-size:       .82rem;
	font-weight:     600;
	text-decoration: none;
	display:         flex;
	align-items:     center;
	gap:             4px;
}
.col-reset-link:hover { opacity: .8; }

/* Column grid */
.col-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   28px;
}
@media (max-width: 1024px) {
	.col-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.col-grid { grid-template-columns: 1fr; }
	.col-filter-bar { gap: 8px; }
	.col-filter-btn { padding: 8px 14px; font-size: .82rem; }
}

/* Column card */
.col-card {
	background:    var(--color-white);
	border-radius: var(--radius);
	overflow:      hidden;
	box-shadow:    var(--shadow);
	transition:    transform var(--transition), box-shadow var(--transition);
}
.col-card:hover {
	transform:  translateY(-6px);
	box-shadow: 0 12px 32px rgba(0,0,0,.14);
}
.col-card-link {
	display:         block;
	text-decoration: none;
	color:           inherit;
}
.col-card-thumb {
	height:   200px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-primary), #3949ab);
	position: relative;
}
.col-card-thumb--empty { display: flex; align-items: center; justify-content: center; }
.col-card-img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.col-card:hover .col-card-img { transform: scale(1.04); }
.col-card-no-img { color: rgba(255,255,255,.4); font-size: 2.4rem; }

.col-card-body { padding: 20px; }
.col-card-meta {
	display:     flex;
	align-items: center;
	gap:         8px;
	flex-wrap:   wrap;
	margin-bottom: 10px;
}
.col-card-cat {
	display:       inline-block;
	padding:       2px 10px;
	background:    var(--color-primary);
	color:         #fff;
	font-size:     .72rem;
	font-weight:   700;
	border-radius: 20px;
}
.col-card-date {
	font-size:      .78rem;
	color:          var(--color-text-sub);
	letter-spacing: .04em;
}
.col-card-title {
	font-size:     1.05rem;
	font-weight:   700;
	color:         var(--color-primary);
	line-height:   1.55;
	margin-bottom: 10px;
}
.col-card:hover .col-card-title { color: var(--color-accent); }
.col-card-excerpt {
	font-size:   .85rem;
	color:       var(--color-text-sub);
	line-height: 1.7;
}

/* Pagination */
.col-pagination {
	display:         flex;
	justify-content: center;
	gap:             6px;
	margin-top:      48px;
	flex-wrap:       wrap;
}
.col-pagination .page-numbers {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       40px;
	height:          40px;
	padding:         0 12px;
	border-radius:   6px;
	border:          1.5px solid var(--color-border);
	background:      var(--color-white);
	color:           var(--color-text);
	text-decoration: none;
	font-size:       .88rem;
	font-weight:     600;
	transition:      background var(--transition), color var(--transition), border-color var(--transition);
}
.col-pagination .page-numbers:hover,
.col-pagination .page-numbers.current {
	background:   var(--color-primary);
	color:        #fff;
	border-color: var(--color-primary);
}

/* Empty state */
.col-empty {
	text-align: center;
	padding:    80px 20px;
}
.col-empty-icon  { font-size: 3rem; color: #ccc; display: block; margin-bottom: 16px; }
.col-empty-title { font-size: 1.1rem; font-weight: 700; color: var(--color-text-sub); margin-bottom: 8px; }
.col-empty-desc  { font-size: .88rem; color: #aaa; margin-bottom: 24px; }
.col-empty-btn {
	display:         inline-block;
	padding:         10px 24px;
	background:      var(--color-primary);
	color:           #fff;
	border-radius:   6px;
	text-decoration: none;
	font-size:       .88rem;
	font-weight:     700;
}

/* ============================================================
   RESPONSIVE — TABLET (769px – 1024px)
   HOMEページ タブレット最適化
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {

    /* --- ヘッダー: ナビリンクのタップ領域を拡大 --- */
    .nav-list a {
        padding:    10px 16px;
        min-height: 44px;
        font-size:  13px;
    }
    .nav-cta {
        font-size:   14px !important;
        padding:     12px 22px !important;
        min-height:  44px;
    }

    /* --- ヒーロー --- */
    .hero-section  { min-height: 80vh; }
    .hero-inner    { padding: 60px 0 80px 40px; }
    .hero-title    { font-size: 72px; }
    .hero-desc     { font-size: 30px; }

    /* --- 私たちの強み --- */
    .strength-grid {
        column-gap: 60px;
        row-gap:    28px;
    }
    .strength-card       { padding: 28px 20px; }
    .strength-icon       { font-size: 60px; margin-bottom: 20px; }
    .strength-card-title { font-size: 22px; }
    .strength-card-text  { font-size: 16px; }

    /* --- 事業部紹介カード --- */
    .business-grid--3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
    .business-grid--2 {
        max-width:             none;
        grid-template-columns: repeat(2, 1fr);
    }
    .business-card-img    { height: 180px; }
    .business-card-btn {
        padding:    12px 24px;
        min-height: 44px;
    }

    /* --- 取り扱い商品グリッド --- */
    .works-grid { grid-template-columns: repeat(2, 1fr); }
    .work-thumb { height: 170px; }
    .work-card-btn {
        padding:    12px 22px;
        min-height: 44px;
    }

    /* --- 実績・数値 --- */
    .stats-card   { padding: 40px 20px 32px; }
    .stats-number { font-size: 3.2rem; }
    .stats-label  { font-size: 1.3rem; }
    .stats-desc   { font-size: 1.1rem; }

    /* --- NEWS（HOME） --- */
    .hn-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .hn-more-btn {
        min-height: 44px;
        padding:    14px 40px;
    }

    /* --- コラム（HOME） --- */
    .column-grid { grid-template-columns: repeat(2, 1fr); }
    .btn {
        min-height: 44px;
        padding:    14px 32px;
    }

    /* --- フッター --- */
    .footer-inner   { gap: 32px; }
    .footer-nav     { gap: 28px; }
    .footer-cta-btn { min-height: 48px; }
}

/* ============================================================
   RESPONSIVE — SMARTPHONE (max-width: 768px) 追加調整
   ============================================================ */
@media (max-width: 768px) {

    /* --- ヒーロー: clamp でスムーズにサイズ変化 --- */
    .hero-title { font-size: clamp(2.6rem, 13vw, 68px); }
    .hero-desc  { font-size: clamp(1.1rem, 5.5vw, 28px); }

    /* --- 事業部紹介: 1カラムに --- */
    .business-grid--3,
    .business-grid--2 {
        grid-template-columns: 1fr;
        gap:       24px;
        max-width: 480px;
        margin:    0 auto;
    }
    .business-card-btn {
        min-height: 48px;
        padding:    14px 24px;
        font-size:  .95rem;
        width:      100%;
        justify-content: center;
    }

    /* --- 取り扱い商品ボタン --- */
    .work-card-btn {
        min-height: 48px;
        padding:    14px 22px;
        width:      100%;
        justify-content: center;
    }

    /* --- NEWS（HOME）: 1カラムに --- */
    .hn-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .hn-more-btn {
        min-height: 48px;
        width:      100%;
        max-width:  360px;
    }

    /* --- 実績・数値: パディング縮小 --- */
    .stats-grid   { gap: 16px; }
    .stats-card   { padding: 36px 20px 28px; }
    .stats-number { font-size: 3rem; }
    .stats-label  { font-size: 1.3rem; }
    .stats-desc   { font-size: 1.1rem; }

    /* --- コラム（HOME）: ボタン全幅 --- */
    .column-footer { text-align: center; }
    .column-footer .btn {
        min-height: 48px;
        width:      100%;
        max-width:  360px;
        justify-content: center;
    }

    /* --- ボタン全般: タップ領域確保 --- */
    .btn        { min-height: 44px; }
    .btn-submit { min-height: 50px; }
    .nav-cta-mobile { min-height: 50px; }

    /* --- セクションヘッダー: 余白縮小 --- */
    .section-header { margin-bottom: 40px; }
    .stats-header   { margin-bottom: 40px; }
    .column-header  { margin-bottom: 40px; }

    /* --- フッターナビ: グループを縦並びに --- */
    .footer-nav       { flex-direction: column; gap: 20px; align-items: center; }
    .footer-nav-group { text-align: center; }
    .footer-cta-btn   { min-height: 48px; }

    /* --- 固定ボタン: 小さく & 間隔調整 --- */
    .fixed-btn {
        width:  64px;
        height: 64px;
        font-size: 9px;
    }
    .fixed-btn i { font-size: 18px; }
    .fixed-side-buttons { right: 10px; gap: 8px; }
}

/* ============================================================
   RESPONSIVE — SMARTPHONE 小型 (max-width: 480px) 追加調整
   ============================================================ */
@media (max-width: 480px) {

    /* --- ヒーロー --- */
    .hero-inner  { padding: 56px 16px 64px; }
    .hero-title  { font-size: 2.4rem; }
    .hero-desc   { font-size: 1.1rem; line-height: 1.7; }

    /* --- 強みカード --- */
    .strength-card       { padding: 28px 16px; }
    .strength-icon       { font-size: 52px; margin-bottom: 16px; }
    .strength-card-title { font-size: 19px; }
    .strength-card-text  { font-size: 15px; }

    /* --- 実績・数値: 1カラムに --- */
    .stats-grid   { grid-template-columns: 1fr; }
    .stats-card   { padding: 28px 20px 24px; }
    .stats-number { font-size: 2.6rem; }
    .stats-label  { font-size: 1.2rem; }

    /* --- 事業部紹介 --- */
    .business-grid--3,
    .business-grid--2 { max-width: 100%; }
    .business-card-title { font-size: 1.5rem; }
    .business-card-body  { padding: 20px 16px 12px; }
    .business-card-footer { padding: 12px 16px 18px; }
    .business-card-img   { height: 160px; }

    /* --- 取り扱い商品 --- */
    .work-thumb   { height: 160px; }
    .works-grid   { max-width: 100%; }

    /* --- NEWS --- */
    .hn-thumb   { height: 180px; }

    /* --- セクション余白縮小 --- */
    .section-header  { margin-bottom: 28px; }
    .stats-header    { margin-bottom: 32px; }
    .column-header   { margin-bottom: 32px; }

    /* --- コンテナ横幅 --- */
    .container { padding: 0 16px; }

    /* --- フッター --- */
    .footer-brand  { max-width: 100%; }
    .footer-inner  { padding-top: 36px; padding-bottom: 36px; gap: 28px; }
    .footer-nav    { align-items: flex-start; }
    .footer-nav-group { text-align: left; }
}

/* ============================================================
   SMARTPHONE — HEADER / HERO レイアウト修正
   ============================================================ */
@media (max-width: 768px) {

    /* ---- ヘッダー高さ・余白をスマホ向けに修正 ---- */
    :root { --header-height: 64px; }

    .site-header  { height: var(--header-height); }
    .header-inner {
        height:        var(--header-height);
        padding-left:  8px;
        padding-right: 16px;
        gap:           10px;
    }

    /* ロゴを小さく・折り返し防止 */
    .logo-img     { height: 143px; flex-shrink: 1; margin-left: -20px; }
    .logo-sub-img { height: 44px; flex-shrink: 1; margin-left: 8px; }
    .site-logo a { gap: 0; }

    /* ハンバーガーボタン */
    .nav-toggle {
        width:  44px;
        height: 44px;
        flex-shrink: 0;
        margin-left: auto;
    }

    /* ---- ヒーロー ---- */
    .hero-section { min-height: calc(100vh - 64px); }

    .hero-inner {
        padding: 48px 20px 56px;
    }

    .hero-title {
        font-size:      clamp(2.2rem, 10vw, 3.2rem);
        margin-bottom:  20px;
        padding-bottom: 8px;
    }

    .hero-title::after {
        height: 10px;
        bottom: 10px;
    }

    .hero-desc {
        font-size: clamp(1rem, 4vw, 1.3rem);
        gap:       10px;
    }

    /* テキストが折り返したときの下線ズレを防ぐ */
    .hero-desc-line {
        word-break:    keep-all;
        overflow-wrap: break-word;
        padding-bottom: 4px;
    }

    .hero-desc-line::after {
        bottom: 14px;
        height: 4px;
    }
}

/* ---- 小型スマホ (max-width: 390px) ---- */
@media (max-width: 390px) {

    .logo-sub-img { display: none; }   /* サブロゴを非表示にしてメインロゴだけに */
    .logo-img     { height: 130px; }

    .hero-title { font-size: 2rem; }
    .hero-desc  { font-size: .95rem; }
}

/* ============================================================
   SINGLE POST — NEWS / COLUMN 詳細ページ
   ============================================================ */

/* ---- ヒーロー（サムネイルオーバーレイ型） ---- */
.sp-hero {
	position: relative;
	width: 100%;
	height: clamp(300px, 45vw, 520px);
	overflow: hidden;
	background: var(--color-primary-dark);
}
.sp-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: brightness(.45);
	transform: scale(1.04);
	transition: transform 8s ease;
}
.sp-hero:hover .sp-hero-bg { transform: scale(1); }
.sp-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10,15,50,.85) 0%, rgba(10,15,50,.2) 60%, transparent 100%);
}
.sp-hero-body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: clamp(24px, 4vw, 56px) clamp(24px, 6vw, 80px);
}
.sp-hero-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.sp-cat {
	display: inline-flex;
	align-items: center;
	padding: 5px 16px;
	background: var(--color-accent);
	color: #fff;
	border-radius: 2px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.sp-cat--column { background: var(--color-primary); }
.sp-date {
	font-size: .82rem;
	color: rgba(255,255,255,.75);
	letter-spacing: .04em;
}
.sp-hero-title {
	font-size: clamp(1.3rem, 3.5vw, 2rem);
	font-weight: 900;
	color: #fff;
	line-height: 1.45;
	text-shadow: 0 2px 12px rgba(0,0,0,.4);
	max-width: 820px;
}

/* ---- ヒーロー（サムネイルなし） ---- */
.sp-hero--no-thumb {
	height: clamp(180px, 25vw, 280px);
	background: linear-gradient(135deg, var(--color-primary) 0%, #0d1757 100%);
}
.sp-hero--no-thumb .sp-hero-title { font-size: clamp(1.2rem, 3vw, 1.7rem); }

/* ---- メインレイアウト ---- */
.sp-main {
	padding: 56px 0 96px;
	background: var(--color-bg);
}
.sp-inner {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 40px;
	align-items: start;
}

/* ---- 記事本体 ---- */
.sp-article {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	overflow: hidden;
}

/* 本文 */
.sp-content {
	padding: 52px 56px 60px;
	line-height: 2;
	color: var(--color-text);
	font-size: 1.01rem;
}
.sp-content > *:first-child { margin-top: 0; }
.sp-content h2 {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--color-primary);
	margin: 2.4em 0 .9em;
	padding: 14px 20px;
	background: #f0f2ff;
	border-left: 5px solid var(--color-accent);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	line-height: 1.4;
}
.sp-content h3 {
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--color-text);
	margin: 2em 0 .7em;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--color-border);
}
.sp-content p { margin-bottom: 1.5em; }
.sp-content ul,
.sp-content ol { margin: 0 0 1.5em 1.6em; }
.sp-content li { margin-bottom: .5em; }
.sp-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	margin: 1.6em 0;
	display: block;
}
.sp-content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sp-content a:hover { color: var(--color-accent); }
.sp-content blockquote {
	margin: 1.6em 0;
	padding: 20px 24px;
	background: var(--color-bg);
	border-left: 4px solid var(--color-primary);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--color-text-sub);
	font-style: italic;
}

/* ---- サイドバー ---- */
.sp-sidebar { position: sticky; top: 88px; }

.sp-sidebar-card {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	overflow: hidden;
	margin-bottom: 20px;
}
.sp-sidebar-head {
	padding: 14px 20px;
	background: var(--color-primary);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.sp-sidebar-body { padding: 20px; }

/* 記事情報 */
.sp-info-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--color-border);
	font-size: .84rem;
}
.sp-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.sp-info-label {
	color: var(--color-text-sub);
	white-space: nowrap;
	min-width: 52px;
}
.sp-info-value { color: var(--color-text); font-weight: 600; }

/* 一覧に戻るボタン */
.sp-back-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px;
	background: var(--color-primary);
	color: #fff;
	font-size: .88rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.sp-back-btn:hover {
	background: var(--color-accent);
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}

/* ---- 前後ナビ ---- */
.sp-post-nav {
	margin-top: 12px;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	overflow: hidden;
}
.sp-post-nav-inner {
	display: grid;
	grid-template-columns: 1fr 1px 1fr;
}
.sp-post-nav-divider {
	background: var(--color-border);
}
.sp-post-nav-prev,
.sp-post-nav-next {
	padding: 28px 32px;
}
.sp-post-nav-next { text-align: right; }
.sp-post-nav-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--color-text-sub);
	text-transform: uppercase;
	margin-bottom: 8px;
}
.sp-post-nav-next .sp-post-nav-label { justify-content: flex-end; }
.sp-post-nav-link {
	display: block;
	font-size: .9rem;
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
	line-height: 1.5;
	transition: color var(--transition);
}
.sp-post-nav-link:hover { color: var(--color-primary); }
.sp-post-nav-empty {
	padding: 28px 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sp-post-nav-empty-text {
	font-size: .82rem;
	color: var(--color-border);
}

/* ---- レスポンシブ ---- */
@media (max-width: 1024px) {
	.sp-inner { grid-template-columns: 1fr 240px; gap: 28px; }
	.sp-content { padding: 40px 40px 48px; }
}
@media (max-width: 768px) {
	.sp-inner { grid-template-columns: 1fr; }
	.sp-sidebar { position: static; }
	.sp-content { padding: 28px 24px 36px; }
	.sp-post-nav-inner { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; }
	.sp-post-nav-divider { height: 1px; width: 100%; }
	.sp-post-nav-next { text-align: left; }
	.sp-post-nav-next .sp-post-nav-label { justify-content: flex-start; }
}

/* ============================================================
   404 ERROR PAGE
   ============================================================ */
.e404-main {
	padding: var(--section-pad) 0;
	min-height: calc(100vh - var(--header-height) - 300px);
	display: flex;
	align-items: center;
}

.e404-inner {
	display:         flex;
	align-items:     center;
	gap:             64px;
}

.e404-code {
	font-size:      clamp(6rem, 18vw, 14rem);
	font-weight:    900;
	line-height:    1;
	color:          transparent;
	-webkit-text-stroke: 3px var(--color-primary);
	letter-spacing: -.04em;
	flex-shrink:    0;
	user-select:    none;
}

.e404-content {
	flex: 1;
}

.e404-title {
	font-size:   clamp(1.4rem, 3vw, 2rem);
	font-weight: 700;
	color:       var(--color-primary);
	margin-bottom: 1rem;
}

.e404-lead {
	font-size:     .95rem;
	color:         var(--color-text-sub);
	line-height:   1.9;
	margin-bottom: 2rem;
}

.e404-home-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             .4em;
	background:      var(--color-primary);
	color:           var(--color-white);
	text-decoration: none;
	padding:         .75em 2em;
	border-radius:   var(--radius);
	font-weight:     700;
	font-size:       .95rem;
	transition:      background var(--transition), transform var(--transition);
	margin-bottom:   2.5rem;
}
.e404-home-btn:hover {
	background:  var(--color-primary-dark);
	transform:   translateY(-2px);
}

.e404-nav-title {
	font-size:     .8rem;
	font-weight:   700;
	letter-spacing: .1em;
	color:         var(--color-text-sub);
	text-transform: uppercase;
	border-bottom: 1px solid var(--color-border);
	padding-bottom: .5rem;
	margin-bottom: 1rem;
}

.e404-nav-list {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap:                   .5rem;
}

.e404-nav-list a {
	display:         flex;
	align-items:     center;
	gap:             .5em;
	padding:         .55em .9em;
	border:          1px solid var(--color-border);
	border-radius:   var(--radius-sm);
	font-size:       .88rem;
	color:           var(--color-text);
	text-decoration: none;
	transition:      border-color var(--transition), color var(--transition), background var(--transition);
}
.e404-nav-list a:hover {
	border-color: var(--color-primary);
	color:        var(--color-primary);
	background:   rgba(26,35,126,.04);
}
.e404-nav-list a i {
	font-size:  .85em;
	color:      var(--color-primary);
	flex-shrink: 0;
}

/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
	.e404-inner {
		flex-direction: column;
		align-items:    flex-start;
		gap:            24px;
	}
	.e404-code {
		font-size: clamp(5rem, 28vw, 8rem);
		-webkit-text-stroke: 2px var(--color-primary);
	}
	.e404-nav-list {
		grid-template-columns: repeat(2, 1fr);
	}
}