/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/
/* === 背景を全幅化するユーティリティ === */
.bg-bleed {
	position: relative;
	z-index: 0;
}
.bg-bleed::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: inherit; /* セクションの背景をそのまま全幅化 */
	z-index: -1;
}

/* === 共通設定 === */
.section-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 60px 20px;
	box-sizing: border-box;
}

.home .site-body{
	padding-top: 0;
}
.small1{ font-size: 95%; }
.small2{ font-size: 90%; }
.bold{ font-weight: bold; }

/* ========== H2（大見出し） ========== */
.container h2{
	position: relative;
	font-size: 1.6rem;
	font-weight: 700;
	color: #222;
	padding-left: 18px;
	margin: 2.5em 0 1.2em;
	line-height: 1.4;
}
.container .entry-body > h2:first-child{ margin-top: 0; }

/* 左ライン＋グラデーション */
.container h2::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	border-radius: 3px;
	background: linear-gradient(180deg, #2563EB 0%, #2563EB 30%, #E53935 35%, #E53935 100%);
}

/* ========== H3（中見出し） ========== */
.container h3{
	position: relative;
	font-size: 1.2rem;
	font-weight: 600;
	/* color: #2563EB; */
	margin: 2em 0 1em;
	padding-bottom: 6px;
}

/* 下線（青グラデ） */
.container h3::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, #2563EB 0%, #2563EB 30%, #E53935 35%, #E53935 100%);
}

/* ========== 画像リンク ========== */
a img{ transition: opacity 1s ease; }
a img:hover{ opacity: 0.5; }

/* ========== レスポンシブ調整 ========== */
@media screen and (max-width: 768px){
	.container h2{ font-size: 1.6rem; padding-left: 14px; }
	.container h3{ font-size: 1.15rem; }
	.container h3::after{ width: 45px; }
}

/* === 事業ポジションセクション === */
.section-feature {
	background: linear-gradient(135deg, #f8f9fa 0%, #edf0f3 100%);
}
.section-feature .section-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
}
.feature-media {
	flex: 0 0 280px;
	text-align: center;
}
.feature-image {
	width: 100%;
	max-width: 240px;
	height: auto;
	padding: 25px;
	border-radius: 4px;
	background: linear-gradient(145deg, #f5f5f5 0%, #e8e8e8 100%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.feature-content {
	flex: 1;
}
.section-title {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 1rem;
}
.section-text {
	font-size: 1rem;
	line-height: 1.8;
	color: #333;
}

/* === メニューセクション === */
.section-links {
	background-color: #ffffff;
	border-top: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
}
.section-links .section-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
}
/* 画像背景カード（共通） */
.link-card {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	min-height: 220px;            /* 安全値（モバイル） */
	aspect-ratio: 16 / 9;         /* 横長カードとして見せる */
	box-shadow: 0 3px 12px rgba(0,0,0,.06);
	transition: transform .3s ease, box-shadow .3s ease;
	will-change: transform;
}

/* 背景画像：擬似要素で管理（拡大アニメ用） */
.link-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform .6s ease;
	will-change: transform;
}

/* マスク（デフォ：黒マスク） */
.link-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.35);  /* 文字が読める濃さ */
	transition: background .3s ease;
}

/* タイトル（中央） */
.link-card__title {
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: .4em .9em;
	border-radius: 8px;
	font-size: clamp(1.2rem, 2.6vw, 1.8rem);
	font-weight: 700;
	color: #fff;
	text-align: center;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* ホバー／フォーカス時の変化 */
.link-card:hover,
.link-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.link-card:hover::before,
.link-card:focus-visible::before { transform: scale(1.06); }
.link-card:hover::after,
.link-card:focus-visible::after  { background: rgba(0,0,0,.5); }

/* キーボードフォーカス輪郭 */
.link-card:focus-visible { outline: 3px solid rgba(37,99,235,.6); outline-offset: 3px; }

/* 画像の割当（パスは必要に応じて変更） */
.link-card--wholesale::before { background-image: url("https://kakenzuone.com/wp/wp-content/uploads/2025/11/link03.jpg"); } /* 機械の卸販売 */
.link-card--procurement::before { background-image: url("https://kakenzuone.com/wp/wp-content/uploads/2025/11/link02.jpg"); } /* 調達サポート */

/* 白マスクにしたい場合のオプション */
.link-card.is-light-mask::after { background: rgba(255,255,255,.45); }
.link-card.is-light-mask:hover::after,
.link-card.is-light-mask:focus-visible::after { background: rgba(255,255,255,.6); }

/* レスポンシブ */
@media (max-width: 768px) {
	.link-card { min-height: 180px; }
}

/* 動きを苦手とする環境に配慮 */
@media (prefers-reduced-motion: reduce) {
	.link-card,
	.link-card::before,
	.link-card::after { transition: none; }
}

/* === Newsセクション === */
.section-news {
	background-color: #fff;
	padding: 40px 0;
}

/* === レスポンシブ === */
@media screen and (max-width: 768px) {
	.section-feature .section-inner {
		flex-direction: column;
		text-align: center;
	}
	.feature-media {
		margin-bottom: 20px;
	}
}

/* === 動画 === */
.video-frame{
	aspect-ratio: 16 / 9;
	width: 100%;
	max-width: 960px;
	background: #222;
	margin: 0 auto 2.5em;
	border-radius: 8px;
	overflow: hidden;
}
.video-player{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	background: #222;
}

/* === マップ === */
.map-card{
	--radius: 16px;
	--shadow: 0 8px 24px rgba(0,0,0,.10);
	--border: 1px solid #e5e7eb;

	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	background: linear-gradient(135deg, #f7f8fa, #eef1f4);
	border: var(--border);
}

.map-card iframe{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	filter: saturate(0.95) contrast(1.02);
	transition: transform .6s ease, filter .6s ease;
	background: #222;
}
.map-card:hover iframe,
.map-card:focus-within iframe{
	transform: scale(1.01);
	filter: saturate(1.08) contrast(1.06);
}

.map-card:focus-within{
	outline: 3px solid rgba(37,99,235,.5);
	outline-offset: 4px;
}

.map-card::after{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: calc(var(--radius) - 2px);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
	pointer-events: none;
}

@media (prefers-color-scheme: dark){
	.map-card{
		--shadow: 0 10px 28px rgba(0,0,0,.35);
		--border: 1px solid #1f2937;
		background: linear-gradient(135deg, #0f172a, #1f2937);
	}
	.map-card::after{
		box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
	}
}

/* === フォーム === */
.contact-form{
	padding: 25px 3%;
	border: 1px solid #bfcbd0;
	background: #fafdff;
}

/* === 会社概要 === */
.company-intro{
	margin-bottom: 1.8rem;
	line-height: 1.8;
	color: #444;
}
.company-table-wrapper{
	width: 100%;
	overflow-x: auto;
}

.company-table{
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
	background-color: #fff;
	border: 1px solid #e5e7eb;
}
.company-table th,
.company-table td{
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #e5e7eb;
	vertical-align: top;
	font-size: 0.95rem;
}
.company-table th{
	width: 26%;
	background: #f3f4f6;
	font-weight: 600;
	color: #111827;
	border-right: 1px solid #e5e7eb;
}
.company-table td{
	color: #333;
}
.company-table thead{
	display: none;
}
.company-table tr:first-child th{
	border-top: 3px solid #2563EB;
}
.company-table tr:first-child td{
	border-top: 3px solid #2563EB;
}
.company-list{
	margin: 0.25rem 0 0;
	padding-left: 1.2rem;
}
.company-list li{
	margin: 0.15rem 0;
}

.company-table a{
	color: #2563EB;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.company-table a:hover{
	text-decoration-thickness: 2px;
}

@media screen and (max-width: 768px){
	.company-table{
		min-width: 0;
	}

	.company-table,
	.company-table tbody,
	.company-table tr,
	.company-table th,
	.company-table td{
		display: block;
		width: 100%;
	}

	.company-table tr{
		border-bottom: 1px solid #e5e7eb;
		margin-bottom: 0.75rem;
	}

	.company-table th{
		border-right: none;
		border-bottom: none;
		background: transparent;
		padding-bottom: 0.25rem;
		color: #6b7280;
	}

	.company-table td{
		padding-top: 15px;
	}

	.company-table tr:first-child th,
	.company-table tr:first-child td{
		border-top: 3px solid #2563EB;
	}
}

/* === フッター === */
.site-footer{
	background-color: #f8f8f8;
	border-top: 3px double #ddd;
	color: #333;
}