/* Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


body {
	font-family: sans-serif;
	/*background: linear-gradient(to bottom right, #1a1a1a, #2a2a2a);*/
	background:white;
	color: white;
	line-height: 1.6;
	color: white;
	line-height: 1.6;
}

html {
	scroll-padding-top: 56px; /* ヘッダーの高さ分のピクセル数 */
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2rem;
	background-color: #111;
	border-bottom: 1px solid #444;
	position: sticky;
	top: 0;
	z-index: 999;
}

/* コンテナ：ヘッダ内で縮まず、幅は画面に応じて可変 */
.logo{
	display:inline-block;
	flex: 0 0 auto;             /* ヘッダがflexの場合の保険 */
	inline-size: clamp(140px, 18vw, 240px); /* 最小140px～最大240pxで伸縮 */
}

/* モバイルでは少し大きめに見せる */
@media (max-width: 768px){
	.logo{ inline-size: clamp(140px, 40vw, 220px); }
}

/* 画像はコンテナ幅にフィット */
.logo img{
	display:block;
	width:100%;
	height:auto;                /* アスペクト比維持 */
}

/* クリック領域をきちんと確保＆装飾を消す */
.logo a{
	display:block;
	text-decoration:none;
	line-height:0;              /* 余白のにじみ防止 */
}

/* キーボード操作のアクセシビリティ */
.logo a:focus-visible{
	outline:2px solid currentColor;
	outline-offset:4px;
}


.nav {
	display: flex;
	gap: 1rem;
}

.nav a {
	text-decoration: none;
	color: #ccc;
	transition: color 0.3s;
}

.nav a:hover {
	color: white;
}

.hamburger {
	display: none;
	font-size: 1.5rem;
	cursor: pointer;
}

/* デスクトップ */
@media (min-width: 961px) {
	.nav { display: flex; gap: 20px; position: static; background: transparent; }
	.hamburger { display: none; }
}

/* モバイル */
@media (max-width: 960px) {
	.header { position: sticky; top: 0; z-index: 1200; } /* ヘッダーも固定推奨 */
	
	.hamburger {
display: block;         /* ← ここ重要 */
color: #fff;            /* 3本線（☰）を白に */
font-size: 1.8rem;
line-height: 1;
padding: 8px;
cursor: pointer;
user-select: none;
z-index: 1300;          /* ナビより上に */
	}
	
	.nav {
position: fixed;
top: 100%; left: 0; right: 0;
display: none;          /* 閉じている状態 */
flex-direction: column;
background: #111;       /* 背景が暗い想定。サイトに合わせて調整可 */
padding: 12px 16px;
border-top: 1px solid rgba(255,255,255,.12);
box-shadow: 0 8px 24px rgba(0,0,0,.08);
z-index: 1200;
	}
	.nav.open { display: flex; }   /* 開いた状態 */
	.nav a { color: #fff; padding: 12px 8px; }
	
	/* メニュー展開中は背景スクロール停止（JSと連動・任意） */
	body.menu-open { overflow: hidden; }
}


.hero {
	background: linear-gradient(to bottom right, #1a1a1a, #2a2a2a);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	padding: 4rem 2rem;
	align-items: center;
}

.hero-image.fade-in {
	animation-name: fadeInImage;
	animation-duration: 1s;
}

@keyframes fadeInImage {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* テキストのフェードインアニメーション */
.fade-in-text {
	animation: fadeInText 1s forwards;
}

@keyframes fadeInText {
	from {
opacity: 0;
transform: translateY(20px);
	}
	to {
opacity: 1;
transform: translateY(0);
	}
}

.hero-content h2 {
	font-size: 38px;
	font-weight: bold;
	margin-bottom: 1rem;
	line-height: 1.3;
	color:white;
}

.hero-content h2 span {
	font-size: 1rem;
	color: #aaa;
}

.hero-content p {
	color: #ccc;
	margin-bottom: 1rem;
}

.hero-buttons {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
	justify-content: flex-start; /* PCでは左寄せ（任意） */
}

/* スマホ等の小さな画面で中央寄せ */
@media (max-width: 680px) {
	.hero-buttons {
		justify-content: center;
		/* 必要なら折返しも */
		/* flex-wrap: wrap; */
		width: 100%;  // 親の幅いっぱいにしたい場合だけ */
	}
}


button {
	padding: 0.5rem 1rem;
	background-color: #444;
	border: none;
	color: white;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: background 0.3s;
}

button:hover {
	background-color: #666;
}

.btn {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.8rem 1.5rem;
	background: linear-gradient(90deg, #d7d7d7, #eaeaea);
	border: 1px solid #ccc;
	border-radius: 4px;
	color: #222;
	font-weight: 500;
	cursor: pointer;
	transition: 0.3s;
}
.btn:hover {
	background: linear-gradient(90deg, #c0c0c0, #dddddd);
}

/* Catch Cards Section */
.hero-image {
	height: 300px;
	background: linear-gradient(to top left, #555, #777);
	border-radius: 1rem;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center;
}

.catches {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	padding: 3rem 2rem;
}

.catch-card {
	background-color: #222;
	padding: 1.5rem;
	border-radius: 1rem;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	transition: box-shadow 0.3s;
}

.catch-card:hover {
	box-shadow: 0 0 20px rgba(255,255,255,0.1);
}

.catch-card h3 {
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
	color:#fff;
}

.catch-card p {
	color: #ccc;
	font-size: 0.9rem;
}

.footer {
	
	background-color: #111;
	text-align: center;
	padding: 1rem;
	border-top: 1px solid #444;
	font-size: 0.8rem;
	color: #999;
}

/* Comparison Section */
section {
	background-color: #fff;
	color: #222;
	padding: 4rem 2rem;
	margin: 0 auto;
	max-width: 1200px;
}

section h2 {
	color: #111;
}

.table-container {
	overflow-x: auto;
	max-width: 100%;
}

.table-container table {
}

.table-container th,
.table-container td {
	padding: 15px;
	text-align: left;
	border: 1px solid #ccc;
	overflow-wrap:anywhere;      /* 長文対策 */
}

.table-container th {
	background-color: #444;
	font-weight: bold;
	text-align:center;
	color:#fff;
}

.table-container td {
	vertical-align:top;
}


.table-container td ul {
	list-style: none;
	padding: 0;
}

.table-container td li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 5px;
}

.table-container td li::before {
	content: '-';
	position: absolute;
	left: 0;
	color: #a0a0a0;
}
	
	/* === 横スクロールの器 === */
	.table-scroll{
overflow-x:auto;
max-width:100%;
-webkit-overflow-scrolling:touch;       /* iOS慣性 */
scrollbar-gutter: stable both-edges;    /* 対応ブラウザでズレ防止 */
	}
	
	/* === 比較テーブル本体 === */
	.cmp-table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
background:#fff;
border:1px solid #ccc;

/* 1列目の理想幅（可変）と “最小幅” を変数化 */
--first-col: clamp(120px, 12ch, 30%);
--first-col-min: 120px;
--rest-col-min: 220px;                  /* 2/3列目の最低幅 */

/* 画面が狭い時は min-width により横スクロールが出る */
min-width: calc(var(--first-col-min) + 2 * var(--rest-col-min));
	}
	
	/* 1列目は可変、残り2列は“合計幅”を指定（÷2しない。ブラウザが均等配分） */
	.cmp-table .col-first{ width: var(--first-col); }
	.cmp-table col:not(.col-first){ width: calc(100% - var(--first-col)); }
	
	.cmp-table th,
	.cmp-table td{
	}
	
	/* 見出し行 */
	.cmp-table thead th{
background:#444;
color:#fff;
text-align:center;
	}
	
	/* 行見出し（1列目のセル）を太字に */
	.cmp-table tbody th[scope="row"]{
font-weight:700;
background:#fafafa;
color: #111;
text-align:center;
	}
	
	/* モバイル微調整（任意） */
	@media (max-width: 600px){
.cmp-table{ --rest-col-min: 200px; }   /* もう少し狭める */
	}

/* Clients Section */
.clients-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	gap: 20px;
	margin-top:2rem;
}

.clients-grid span {
	padding: 10px 20px;
	border: 1px solid #444;
	border-radius: 5px;
	font-weight: bold;
	color: #a0a0a0;
	transition: background-color 0.3s ease;
}

.clients-grid span:hover {
	background-color: #383838;
}


/* Responsive */
@media (max-width: 768px) {
	.hero {
grid-template-columns: 1fr;
text-align: center;
	}
	
	.hero-image {
order: -1;
	}
	
	.hamburger {
display: block;
	}
	
	.nav {
display: none;
flex-direction: column;
background: #111;
position: absolute;
top: 100%;
right: 0;
padding: 1rem;
	}
	
	.nav.open {
display: flex;
	}
	
	.nav a {
margin: 0.5rem 0;
	}
	
	.comparison-table {
font-size: 0.8rem;
	}
}

/* 製品事例グリッド */
.products {
	margin: 3rem auto 5rem auto;
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
	gap: 2rem;
	color: #eee;
}
.product-item {
	background-color: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 0 12px rgba(58,110,165,0.3);
	transition: transform 0.3s;
}
.product-item:hover {
	/*transform: translateY(-10px);*/
}
.product-image {
	background: linear-gradient(90deg, #d7d7d7, #eaeaea);
	padding:5px;
}
.product-image img {
	width: 100%;
	display: block;
	height: 200px;
	object-fit: contain;
}

/* 画像ボタン */
.product-image.zoom{
	display:block;
	width:100%;
	cursor: zoom-in;          /* crosshair ではなく zoom-in に */
}


.product-info {
	padding: 1rem 1.5rem;
}
.product-info h3 {
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: #3A6EA5;
}
.product-info table {
	width: 100%;
	font-size: 0.9rem;
	color: #111;
	border-collapse: collapse;
}
.product-info td {
	padding: 4px 8px;
	border-bottom: 1px solid #222;
}
.product-info td:first-child {
	font-weight: 600;
	color: #888;
	width: 30%;
	} 

/* === FMC鋳造法とは === */
.method-section {
	background-color: #f9f9f9;   /* 薄いグレーで背景を分ける */
	padding: 4rem 2rem;
}

.method-section .section-title {
	font-size: 2rem;
	text-align: center;
	margin-bottom: 2rem;
	color: #111;
	border-bottom: 3px solid #444; /* 下線で強調 */
	display: inline-block;
	padding-bottom: .5rem;
}

/* テキスト＋画像の横並び（PC時） */
.method-content {
	display: flex;
	flex-wrap: wrap;       /* 画面幅が狭いと縦並びに */
	gap: 2rem;
	align-items: center;
	justify-content: center;
}

.method-text {
	flex: 1 1 400px;       /* 400px以上で可変 */
	font-size: 1.1rem;
	line-height: 1.8;
	color: #333;
}

.method-text p {
	margin-bottom: 1rem;
}

.method-image {
	flex: 1 1 300px;       /* 300px以上で可変 */
	text-align: center;
}

.method-image img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;    /* 角丸 */
	box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 影で浮かせる */
}

/* スマホ向け調整 */
@media (max-width: 768px) {
	.method-section {
padding: 2rem 1rem;
	}
	.method-section .section-title {
font-size: 1.6rem;
	}
	.method-text {
font-size: 1rem;
line-height: 1.6;
	}
}
.fmc-flow {
	background: #f7f7f7;
	padding: 4rem 2rem;
	text-align: center;
}

.flow-steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 2rem;
	margin-top: 2rem;
}

.step {
	flex: 1 1 200px;
	max-width: 220px;
}

.step img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 3px 10px rgba(0,0,0,0.15);
	margin-bottom: .8rem;
}

.step p {
	font-weight: 600;
	font-size: 1rem;
}


/* === FMC鋳造法の強みセクション === */
#fmc-advantages {
	background-color: #fff;
	color: #222;
	padding: 4rem 2rem;
	margin: 0 auto;
	max-width: 1200px;
}

#fmc-advantages .section-title {
	font-size: 2rem;
	margin-bottom: 2rem;
	text-align: center;
	color: #111;
	border-bottom: 3px solid #444;
	display: inline-block;
	padding-bottom: .5rem;
}

.fmc-block {
	margin-bottom: 2.5rem;
}

.fmc-block h3 {
	font-size: 1.4rem;
	margin-bottom: 1rem;
	color: #444;
	border-left: 4px solid #444;
	padding-left: .6rem;
}

.fmc-block ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.fmc-block li {
	margin-bottom: .8rem;
	padding-left: 1.2rem;
	position: relative;
	line-height: 1.6;
}

.fmc-block li::before {
	content: "✔";                /* アイコン風 */
	position: absolute;
	left: 0;
	color: #2c7a2c;               /* グリーン */
	font-size: 0.9rem;
}

.fmc-block strong {
	color: #000;
}

.fmc-summary {
	font-size: 1.1rem;
	font-weight: 600;
	text-align: center;
	padding: 1rem;
	background-color: #f7f7f7;
	border-left: 5px solid #444;
	border-radius: 6px;
}


h2 {
	font-size: 1.8rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid #ccc;
	padding-bottom: 0.5rem;
	color: #222;
}


/* === FMC製造工程セクション === */

/* ベース（白） */
:root {
	--ink: #222;
	--muted: #666;
	--line: #e5e7eb;
	--brand: #0f172a;      /* 濃紺グレーで締める */
	--badge: #0ea5e9;      /* アクセント（控えめブルー） */
	--card: #fff;
	--shadow: 0 6px 20px rgba(15,23,42,.08);
}

html, body {
	background: #fff;
	color: var(--ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

/* ステップナビ（横スクロール） */
.step-nav {
	position: sticky; top: 0; z-index: 20;
	background: #fff;
	border-bottom: 0px solid var(--line);
}
.step-nav ul {
	margin: 0 auto; padding: .75rem 1rem; display: flex; gap: .5rem;
	max-width: 1200px; overflow-x: auto; scrollbar-width: thin;
	list-style:none;
}
.step-nav a {
	display: inline-grid; place-items: center;
	width: 38px; height: 38px; border-radius: 999px;
	border: 1px solid var(--line); color: var(--ink);
	background: #fff; font-weight: 600; text-decoration: none;
	transition: .2s ease;
}
.step-nav a:hover { border-color: var(--badge); color: var(--badge); }
.step-nav a.active { background: var(--badge); color: #fff; border-color: var(--badge); }

/* 見出し */
.steps-header {
	max-width: 1200px; margin: 1.5rem auto 0; padding: 1.25rem 1rem 0;
}
.steps-header h1 { font-size: clamp(20px, 2vw, 28px); font-weight: 800; color: var(--brand); }
.steps-header .lead { color: var(--muted); margin-top: .25rem; }

/* グリッド */
.step-grid {
	list-style: none;
	max-width: 1200px; margin: 1rem auto 3rem; padding: 1rem;
	display: grid; gap: 1rem;
	grid-template-columns: repeat(1, minmax(0,1fr));
}
@media (min-width: 640px) { .step-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px){ .step-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* カード */
.step-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px; box-shadow: var(--shadow);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.step-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15,23,42,.12); }

/* 画像ボタン */
.step-card .zoom { display: block; padding: 0; border: 0; width: 100%; background: none; cursor: zoom-in; }
.step-card img { display: block; width: 100%; height: 200px; object-fit: contain; }

/* メタ情報 */
.step-card .meta { padding: .9rem 1rem 1.1rem; }
.step-card h2 { font-size: 1rem; line-height: 1.4; margin: .25rem 0 .35rem; color: var(--brand); }
.step-card p { color: var(--muted); font-size: .92rem; }

/* バッジ */
.badge {
	display: inline-grid; place-items: center;
	width: 32px; height: 32px; border-radius: 999px;
	background: var(--badge); color: #fff; font-weight: 700; font-size: .9rem;
	box-shadow: 0 4px 12px rgba(14,165,233,.25);
}

/* ライトボックスを画面中央に配置 */
dialog#lightbox {
	border: none;
	border-radius: 12px; 
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0,0,0,.35);
	max-width: min(96vw, 1100px);
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 1rem;
	background: #fff;
}
dialog#lightbox::backdrop { background: rgba(0,0,0,.55); }

/* 画像を最大化して中央に */
#lightbox img {
display: block; 
width: 100%; 
height: auto;
	background: #1f1f1f;
}

/* 閉じるボタンを右上に固定 */
#lightbox .close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	backdrop-filter: blur(6px);
}

/* アンカー位置ずれ対策（固定ナビ分） */
.step-card { scroll-margin-top: 76px; }


/* ===== About Us（白ベース） ===== */
.about-hero, .about-values, .about-timeline, .about-company {
	background: #fff;
	color: #222;
	padding: 4rem 2rem;
	margin: 0 auto;
	max-width: 1200px;
}

.about-hero__inner {
	display: grid; gap: 1.25rem;
	grid-template-columns: 1fr;
}
@media (min-width: 992px) {
	.about-hero__inner { grid-template-columns: 1.1fr .9fr; align-items: center; }
}
.about-hero__copy h2 {
	font-size: clamp(24px, 3.2vw, 36px);
	font-weight: 800; color: #0f172a;
}
.about-hero__copy h2 span { color: #6b7280; font-weight: 700; }
.about-hero__copy .lead { margin-top: .6rem; color: #555; }
.about-hero__stats {
	display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap;
}
.about-hero__stats li {
	list-style: none; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
	padding: .75rem 1rem; box-shadow: 0 6px 20px rgba(15,23,42,.06); min-width: 140px;
}
.about-hero__stats strong { display: block; font-size: 1.4rem; color: #0f172a; }
.about-hero__stats span { color: #666; font-size: .9rem; }
.about-hero__media img {
	display: block; width: 100%; height: auto; border-radius: 14px;
	box-shadow: 0 10px 28px rgba(15,23,42,.12);
}

/* Values */
.sec-head { margin-bottom: 1rem; }
.sec-head h3 {
	font-size: clamp(20px, 2.6vw, 28px);
	font-weight: 800; color: #0f172a;
}
.sec-head .sub { color: #666; margin-top: .25rem; }

.values-grid {
	display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 768px) { .values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.value-card {
	background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
	padding: 1rem 1.1rem; box-shadow: 0 6px 20px rgba(15,23,42,.06);
}
.value-card h4 { font-size: 1.05rem; color: #0f172a; margin-bottom: .35rem; }
.value-card p { color: #444; }

/* Timeline */
.timeline {
	list-style: none; padding: 0; margin: 0; position: relative;
}
.timeline li { display: grid; grid-template-columns: 90px 1fr; gap: .75rem; padding: .8rem 0; }
.timeline time {
	color: #0ea5e9; font-weight: 800; font-size: 1rem;
}
.timeline strong { color: #0f172a; display: block; margin-bottom: .15rem; }
.timeline p { color: #555; }

/* Company */
.company-grid {
	display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 992px) { .company-grid { grid-template-columns: 1.2fr .8fr; } }

.company-table {
	background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
	padding: .5rem; box-shadow: 0 6px 20px rgba(15,23,42,.06);
}
.company-table > div {
	display: grid; grid-template-columns: 140px 1fr; gap: .75rem;
	padding: .7rem .6rem; border-bottom: 1px solid #eef;
}
.company-table > div:last-child { border-bottom: 0; }
.company-table dt {
	color: #6b7280; font-weight: 600; font-size: .92rem;
}
.company-table dd {
	margin: 0; color: #222; font-size: .95rem;
}

.company-side { display: grid; gap: 1rem; }
.company-card {
	background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
	padding: 1rem 1.1rem; box-shadow: 0 6px 20px rgba(15,23,42,.06);
}
.company-card h4 { font-size: 1rem; color: #0f172a; margin-bottom: .35rem; }
.company-card ul { margin: 0; padding-left: 1rem; color: #444; }
.company-card li { margin: .25rem 0; }



/* ========= お問い合わせ（電話＋メール） ========= */
.contact {
	background: #fff;
	color: #222;
	padding: 4rem 2rem;
	margin: 0 auto;
	max-width: 1200px;
}

.contact__header { margin-bottom: 1.25rem; text-align: left; }
.contact__header h2 {
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 800;
	color: #0f172a;
}
.contact__lead { color: #666; margin-top: .25rem; }

.contact__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.contact__grid { grid-template-columns: 1fr 1fr; }
}

.contact__card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 1.5rem 1.25rem;
	box-shadow: 0 6px 20px rgba(15,23,42,.06);
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.contact__label {
	display: inline-block;
	font-size: .8rem;
	color: #0ea5e9;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.contact__value { margin: .25rem 0; }
.contact__link {
	color: #0f172a;
	text-decoration: none;
	font-weight: 800;
	font-size: clamp(18px, 2vw, 22px);
	word-break: break-word;
}
.contact__link--lg { font-size: clamp(24px, 3vw, 32px); }
.contact__link:hover { color: #0ea5e9; }

.contact__note {
	color: #555;
	font-size: .95rem;
}

.contact__cta {
	margin-top: .5rem;
	display: inline-block;
	text-align: center;
	border-radius: 10px;
	padding: .85rem 1.25rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform .08s ease, filter .2s ease;
	border: 1px solid transparent;
}
.contact__cta:active { transform: translateY(1px); }

.contact__cta--phone {
	background: #111;
	color: #fff;
	border-color: #111;
}
.contact__cta--phone:hover { filter: brightness(1.15); }

.contact__cta--mail {
	background: #fff;
	color: #0f172a;
	border-color: #d1d5db;
	box-shadow: 0 4px 14px rgba(15,23,42,.06);
}
.contact__cta--mail:hover {
	border-color: #0ea5e9;
	color: #0ea5e9;
}

/* 小さな画面での余白最適化 */
@media (max-width: 480px) {
	.contact__card { padding: 1.25rem 1rem; }
}

/* すでに contact__card 系のデザインがある前提で追加調整 */
.contact__card--fax .contact__value {
	font-size: 1.4rem;
	font-weight: 700;
	color: #0f172a;
}

.contact__card--fax .contact__note {
	color: #555;
	font-size: .9rem;
}


/* 強みセクション（白ベース） */
.strengths {
	background: #fff;
	color: #222;
	padding: 4rem 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

.strength-header h2 {
	font-size: clamp(22px, 2.5vw, 30px);
	font-weight: 800;
	color: #0f172a;
}
.strength-header .lead {
	color: #666;
	margin-top: .25rem;
	font-size: 1rem;
}

.strength-grid {
	display: grid;
	gap: 1.5rem;
	margin-top: 2rem;
	grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) {
	.strength-grid {
grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 992px) {
	.strength-grid {
grid-template-columns: repeat(3, 1fr);
	}
}

.strength-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 6px 20px rgba(15,23,42,.06);
	text-align: center;
	transition: transform .2s ease, box-shadow .2s ease;
}
/*.strength-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(15,23,42,.12);
}*/

.strength-number {
	width: 40px;
	height: 40px;
	margin: 0 auto .75rem;
	background: #0ea5e9;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
}

.strength-card h3 {
	font-size: 1.1rem;
	color: #0f172a;
	margin-bottom: .5rem;
}

.strength-card p {
	font-size: .95rem;
	color: #444;
	line-height: 1.4;
}


/* ===== Timeline (About - これまでの歩み) ===== */
.about-timeline {
	background: #fff;
	color: #222;
	padding: 4rem 2rem;
	margin: 0 auto;
	max-width: 1200px;
}

.about-timeline .sec-head {
	text-align: left;
	margin-bottom: 1.25rem;
}
.about-timeline .sec-head h3 {
	font-size: clamp(20px, 2.6vw, 28px);
	font-weight: 800;
	color: #0f172a;
}
.about-timeline .sec-head .sub {
	color: #666;
	margin-top: .25rem;
}

.timeline {
	position: relative;
	list-style: none;
	margin: 2rem auto 0;
	padding: 0 0 0 0;
	max-width: 1000px;
}

/* 中央ライン（PC） */
@media (min-width: 992px) {
	.timeline::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: #e5e7eb;
transform: translateX(-50%);
	}
}

.timeline li {
	position: relative;
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: .75rem;
	padding: 1.1rem 0;
}

/* カード化 */
.timeline li .tl-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(15,23,42,.06);
	padding: 1rem 1.1rem;
}

/* 年の表示 */
.timeline li time {
	color: #0ea5e9;
	font-weight: 800;
	font-size: 1rem;
	white-space: nowrap;
	padding-top: .4rem;
}

/* タイトル＆本文（テキストはそのまま） */
.timeline li .tl-card h4 {
	margin: 0 0 .25rem;
	font-size: 1.05rem;
	color: #0f172a;
}
.timeline li .tl-card p {
	margin: 0;
	color: #555;
	line-height: 1.6;
}

/* PC時は左右交互配置 + ポイント装飾 */
@media (min-width: 992px) {
	.timeline li {
grid-template-columns: 1fr 1fr;
gap: 2rem 2.5rem;
align-items: start;
	}
	/* 左列：奇数／右列：偶数 */
	.timeline li:nth-child(odd) time { grid-column: 1; justify-self: end; }
	.timeline li:nth-child(odd) .tl-card { grid-column: 2; }
	.timeline li:nth-child(even) time { grid-column: 2; }
	.timeline li:nth-child(even) .tl-card { grid-column: 1; }
	
	/* 中央ポイントドット */
	.timeline li::after {
content: "";
position: absolute;
top: 24px;
left: 50%;
transform: translateX(-50%);
width: 12px; height: 12px; border-radius: 50%;
background: #0ea5e9;
box-shadow: 0 0 0 6px rgba(14,165,233,.15);
	}
}

/* スクロール出現アニメーション（JSで .inview を付与） */
.timeline li { opacity: 0; transform: translateY(12px); transition: .45s ease; }
.timeline li.inview { opacity: 1; transform: translateY(0); }

/* ===== History / これまでの歩み ===== */
.about-history {
	background:#fff; color:#222;
	padding:4rem 2rem; margin:0 auto; max-width:1200px;
}
.about-history .sec-head { margin-bottom:1.25rem; }
.about-history .sec-head h3 {
	font-size:clamp(20px,2.6vw,28px); font-weight:800; color:#0f172a;
}
.about-history .sec-head .sub { color:#666; margin-top:.25rem; }

.history-card {
	background:#fff; border:1px solid #e5e7eb; border-radius:14px;
	box-shadow:0 6px 20px rgba(15,23,42,.06);
	padding:1.25rem 1.25rem 1.35rem;
}

.history-body {
	display:grid; gap:.75rem;
	/* 文章はそのままでも読みやすく */
}
.history-body p { margin:0; color:#444; line-height:1.8; }

/* 日本語/英語が混在する場合の区切り調整（任意） */
.history-body .split {
	height:1px; background:linear-gradient(90deg,#e5e7eb,transparent 60%);
	margin:.75rem 0 1rem;
}

/* 画像やアイコンを置くなら（任意） */
.history-head {
	display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem;
}
.history-badge {
	display:inline-grid; place-items:center;
	width:34px; height:34px; border-radius:999px;
	background:#0ea5e9; color:#fff; font-weight:700;
	box-shadow:0 0 0 6px rgba(14,165,233,.12);
}
.history-title { font-weight:800; color:#0f172a; font-size:1.05rem; }



/*　///////////　納入実績 /////////// */
.clients { padding: 56px 0; }
.clients h2 { font-size: clamp(1.25rem, 1.1rem + 1.2vw, 1.75rem); margin: 0 0 8px; }
.clients-sub { color: #666; margin: 0 0 20px; }

.client-grid {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: 16px;
	grid-template-columns: repeat( auto-fit, minmax(140px, 1fr) );
	align-items: stretch;
}

.client-card {
	background: #fff;
	border: 1px solid #e9edf1;
	border-radius: 16px;
	padding: 16px;
	height: 100%;
	display: grid;
	place-items: center;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.client-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0,0,0,.06);
	border-color: #d7dee6;
}

/* ロゴ画像の共通調整 */
.client-card img {
	max-width: 120px; max-height: 40px; object-fit: contain; filter: grayscale(20%);
}

/* ロゴが無い場合の頭文字アバター */
.client-fallback .avatar {
	width: 48px; height: 48px; border-radius: 999px;
	display: grid; place-items: center;
	background: #eef2f7; color: #2b3a4a; font-weight: 700;
	font-size: 20px; letter-spacing: .02em;
}

/* スクリーンリーダー用 */
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ダーク背景セクションにも映えるよう微調整（任意） */
:where(.section-dark) .client-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
:where(.section-dark) .client-card:hover { background: rgba(255,255,255,.12); }
:where(.section-dark) .client-card img { filter: brightness(0) invert(1) opacity(.85); }


/* //納入実績追加// */

.clients { padding: 56px 0; }
.clients h2 { margin: 0 0 8px; font-size: clamp(1.25rem, 1.1rem + 1.2vw, 1.75rem); }
.clients-sub { color:#666; margin: 0 0 20px; }

.client-grid { list-style: none; padding:0; margin:0; display:grid; gap:16px;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items:stretch; }

.client-card { background:#fff; border:1px solid #e9edf1; border-radius:16px; padding:14px;
height:100%; display:flex; }

.client-link { display:grid; grid-template-rows:auto 1fr; gap:10px; text-decoration:none; color:inherit; width:100%; }

.client-media { display:grid; place-items:center; height:56px; }

.client-logo { max-width:120px; max-height:40px; object-fit:contain; filter: grayscale(20%); }

.client-avatar { display:none; width:48px; height:48px; border-radius:999px; background:#eef2f7; color:#2b3a4a;
font-weight:700; font-size:18px; letter-spacing:.02em; place-items:center; }

.client-name { text-align:center; font-size:14px; font-weight:600; line-height:1.3; }

.client-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.06); border-color:#d7dee6; }

/* ダークテーマ対応（任意） */
@media (prefers-color-scheme: dark) {
	.client-card { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
	.client-card:hover { background:rgba(255,255,255,.12); }
	.client-logo { filter: brightness(0) invert(1) opacity(.85); }
}

/* 画像が無い・読み込めない場合はアバターを表示 */
.client-logo:is(:not([src]), [src=""]), .client-logo.error { display:none; }
.client-logo.error + .client-avatar, .client-logo:not([src]) + .client-avatar { display:grid; }

/* クリック不可の項目（URL無）に軽い無効スタイルを適用したい場合（任意） */
.client-link[href="#"] { pointer-events: none; opacity: .7; }


/* タグ風 */
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.tag {
	display: inline-block;
	padding: .35rem .75rem;
	font-size: .85rem;
	font-weight: 600;
	color: #0ea5e9;
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	border-radius: 999px; /* 丸みを帯びたタグ風 */
	transition: all 0.2s ease;
	cursor: default;
}

.tag:hover {
	background: #0ea5e9;
	border-color: #0ea5e9;
	color: #fff;
}


/* =========================
   実装スタイル
   ========================= */

/* 帯背景（交互）— 対象sectionに .band を付けたものだけ交互で色替え */
:root { --band-bg: #F8FAFC; }
.band:nth-of-type(even){ background: var(--band-bg); }
/* 交互（偶数）セクションにだけ帯背景を適用 */
main > section:nth-of-type(even){
	background: var(--band-bg);
}


/*　デザインメリハリ */
:root{
	--accent: var(--brand, #0F3D5F); /* ロゴから抽出 */
	--ink: #0F172A; --muted:#64748B; --line:#E2E8F0; --bg:#F8FAFC;
	--r:4px; --space-lg:88px; --space-md:56px;
}
h1{
	font-size:48px;
	line-height:1.16;
	font-weight:700;
	letter-spacing:.01em
	}
	
	h2{
		font-size:32px;
		line-height:1.25;font-weight:700
		}
		
	h3{
		font-size:22px;
		line-height:1.45;
		font-weight:600
		}
	p,li{
		font-size:16px;
		line-height:1.75;
		color:#0F172A
		}
	.section{
		padding-block:var(--space-lg)
		}
	.section.alt{
		background:var(--bg)
		}
						
.kicker{color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.underline-short{position:relative;display:inline-block}
.underline-short::after{content:"";display:block;width:34%;height:2px;background:var(--accent);margin-top:8px}
.card{border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card img{display:block;aspect-ratio:3/2;object-fit:cover;border-bottom:1px solid var(--line)}
.chip{display:inline-block;padding:.25em .5em;border:1px solid var(--line);border-radius:999px;font-size:12px;color:#334155}
.btn-primary{background:var(--accent);color:#fff;padding:.8em 1.1em;border-radius:8px;font-weight:700}
.btn-link{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.badge-num{--s:34px;display:inline-grid;place-items:center;width:var(--s);height:var(--s); border-radius:999px;background:rgba(15,61,95,.08);color:var(--accent);font-weight:700}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 0 var(--accent)}

	
/* ---- 製造工程：番号バッジを左に & 説明弱め ---- */
/* バッジ・見出し・説明を2カラム風に並べる */
	#steps .step-card .meta{
		display:grid; grid-template-columns:36px 1fr; column-gap:12px; align-items:start;
		}
	#steps .step-card .badge{ grid-row:1 / span 2; }          /* バッジを左縦並び */
	#steps .step-card p{ color: var(--muted); }               /* 説明はやや薄め */


/* ===== 404 page layout (Sticky Footer with Grid) ===== */
/*html, body { height: 100%; }*/
body.is-404 {
	min-height: 100dvh;
	display: grid;
	grid-template-rows: auto 1fr auto; /* header / main / footer */
	background: linear-gradient(to bottom right, #1a1a1a, #2a2a2a); /* 既存トーン */
}

/* Hero の404バリエーション */
.hero--404 {
	/* 404はコンテンツが短いので高さを確保して見栄えを担保 */
	padding-top: 6rem;
	padding-bottom: 6rem;
}
@media (min-width: 1024px) {
	.hero--404 { min-height: 60vh; }
}

/* 404メッセージの調整（既存のhero系に上書き） */
.hero--404 .hero-title { font-size: 48px; }
.hero--404 .hero-title span { font-size: 18px; color: #bbb; }
.hero--404 .hero-desc { color: #ccc; margin-top: .5rem; margin-bottom: 1.25rem; }

/* 一文だけのセクション（白ベースでコントラスト） */
.notfound-note {
	background: #fff;
	color: #222;
	padding: 2rem 1.5rem;
	margin: 0 auto 50px;
	max-width: 100%;
	text-align: center;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(15,23,42,.06);
}
.notfound-note p {
	margin: 0;
	font-size: clamp(14px, 1.5vw, 16px);
	color: #444;
}