/*
Name:           custom.css
kida-works トップページ第1稿。見本 Porto に対して足したのは次の2点だけ。
 1) 日本語を Noto Sans JP にする（英字は見本どおり Poppins のまま）
 2) 日本語が枠に入らない見出しを一段下げる
*/

/* --- 1) フォント -------------------------------------------------- */
/* Poppins を先に置くので、英字は見本のまま。日本語だけ Noto Sans JP に落ちる */
body,
h1, h2, h3, h4, h5, h6,
.btn, .nav-link, .dropdown-item,
input, select, textarea, button {
	font-family: "Poppins", "Noto Sans JP", Arial, sans-serif;
}

/* --- 2) 日本語向けに一段下げた見出し ------------------------------ */
/* ヒーロー見出し: clamp(28px, 5.83vw, 70px) -> 一段下げ
   2026-09-21 #2: 75% に縮小（85/75/65% を見比べたうえでの仮置き）
   2026-09-22 #3: 実物を見て 85% で確定（M16） */
.custom-hero-font-1 {
	font-size: clamp(20.4px, 0px + 0.039667 * 100vw, 47.6px);
	line-height: 1.45;
}

/* 実績一覧の枠内見出し: text-6 (1.80em) -> text-5 (1.50em) 相当 */
.custom-grid-1 .custom-grid-1-text h3 {
	font-size: 1.35em !important;
	line-height: 1.55;
}

/* 語りの節の見出し: text-9 / text-xl-11 (2.50 / 3.00em) -> 一段下げ */
#concept h3.text-9,
#about h3.text-9 {
	font-size: 2.00em !important;
	line-height: 1.5;
}
@media (min-width: 1200px) {
	#concept h3.text-xl-11,
	#about h3.text-xl-11 {
		font-size: 2.30em !important;
	}
}

/* 実績カードの見出し: text-8 (2.30em) -> text-7 (2.00em) 相当 */
.custom-projects-1 h3.text-8 {
	font-size: 1.75em !important;
	line-height: 1.5;
}

/* 事業概要カードの数字用フォント: 日本語の項目名が入るので一段下げ */
.custom-font-size-1 {
	font-size: 2.0em !important;
	line-height: 1.4;
}

/* 折りたたみの見出しは v1 の一文が入るので折り返せるようにする */
.toggle > .toggle-title {
	line-height: 1.7;
}

/* 日本語の行間を本文全体で少し広げる（Noto Sans JP 向け） */
body {
	line-height: 1.9;
}

/* 実物の画面を入れた枠 */
.custom-el-3 .custom-el-3-img img,
.custom-grid-1 .custom-grid-1-img img {
	image-rendering: auto;
}


/* ================================================================
   第2稿（通番 #3）で足したもの
   ================================================================ */

/* --- A) ヘッダー・フッターのロゴ ---------------------------------- */
/* 下地の四角を外した透過版を、ヘッダーの高さいっぱいまで大きくする */
.header-logo .kw-logo {
	height: 56px;
	width: auto;
	max-width: 100%;
}
@media (max-width: 991px) {
	.header-logo .kw-logo { height: 48px; }
}
@media (max-width: 575px) {
	.header-logo .kw-logo { height: 40px; }
}
.kw-logo-footer { height: 75px; width: auto; }
@media (max-width: 575px) {
	.kw-logo-footer { height: 56px; }
}

/* --- B) ヘッダー右端の Contact Us ボタン -------------------------- */
/* 第8稿（2026-09-10 #1）で金地をやめ、少し明るい紺地＋水色の細い縁＋白文字にした。
   周りの青系に馴染ませ、浮かせないため。about 節の Let's Talk と
   実績一覧 8 枠目の Contact の金は変えていない。 */
#header .kw-btn-contact,
#header .kw-btn-contact:visited {
	background-color: var(--dark--200) !important; /* 少し明るい紺 #0b1e54 */
	background-image: none !important;
	border: 1px solid var(--secondary) !important; /* 水色 #66B6E9 の細い縁 */
	outline: 0 !important;
	box-shadow: none !important;
	color: var(--light) !important;                /* 白文字 */
	transition: border-color 250ms, background-color 250ms;
}
/* 「選択中」に見えないよう、押した状態・焦点が当たった状態でも見た目を変えない */
#header .kw-btn-contact:focus,
#header .kw-btn-contact:focus-visible,
#header .kw-btn-contact:active,
#header .kw-btn-contact.active {
	background-color: var(--dark--200) !important;
	border: 1px solid var(--secondary) !important;
	outline: 0 !important;
	box-shadow: none !important;
	color: var(--light) !important;
}
/* マウスを乗せたときだけ、縁が金になる */
#header .kw-btn-contact:hover {
	background-color: var(--dark--200) !important;
	border: 1px solid var(--primary) !important;   /* 金 #C8A45A */
	color: var(--light) !important;
}

/* --- D) デバイスの枠 ----------------------------------------------
   CSS だけで描き、画像は使わない。特定製品には似せない。
   2026-09-22 #3: ノートPC をやめ、正面から見た横長ディスプレイにした。
   本体・キーボードは描かず、細いスタンドだけ付ける。縁は細く、
   画面に淡い艶と映り込みを入れる。 */

/* ヒーローの見せ場: ディスプレイの手前にスマホを重ねる */
.kw-hero-devices {
	position: relative;
	padding: 24px 0 78px;
	max-width: 600px;                     /* 2026-09-22 #4: 420px -> 600px（ディスプレイを主役に） */
	margin: 0 auto;
	perspective: 1200px;
	perspective-origin: 62% 42%;
}

/* ---- ディスプレイ ---- */
.kw-device-monitor {
	position: relative;
	z-index: 1;                           /* 画面の艶・帯をこの中に閉じ込め、スマホより上に出さない */
	width: 100%;
}
/* 画面のまわりの細い縁 */
.kw-device-monitor-panel {
	position: relative;
	padding: 5px 5px 6px;
	border-radius: 9px;
	background: linear-gradient(180deg, #27365a 0%, #141f38 55%, #0c1529 100%);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.13),
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 0 0 1px rgba(0, 8, 30, 0.55),
		0 28px 52px rgba(0, 17, 63, 0.55);
}
.kw-device-monitor-screen {
	position: relative;
	border-radius: 3px;
	overflow: hidden;
	background: #04102b;
	container-type: inline-size;
}
/* 画面の艶と映り込み。左上から斜めに淡い光の帯、上端にごく薄い光 */
.kw-device-monitor-screen:after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 3;
	pointer-events: none;
	border-radius: 3px;
	background:
		linear-gradient(118deg,
			rgba(255, 255, 255, 0.13) 0%,
			rgba(255, 255, 255, 0.05) 26%,
			rgba(255, 255, 255, 0) 26.5%,
			rgba(255, 255, 255, 0) 58%,
			rgba(255, 255, 255, 0.035) 58.5%,
			rgba(255, 255, 255, 0.035) 70%,
			rgba(255, 255, 255, 0) 70.5%),
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.07) 0%,
			rgba(255, 255, 255, 0) 18%);
	box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35);
}
/* 細く控えめなスタンド（首と台座だけ） */
.kw-device-monitor-neck {
	display: block;
	position: relative;
	width: 7%;
	height: 34px;
	margin: -2px auto 0;
	background: linear-gradient(90deg, #121d33 0%, #2c3c5e 45%, #1a2743 100%);
	box-shadow: inset 0 6px 8px -4px rgba(0, 0, 0, 0.55);
}
.kw-device-monitor-foot {
	display: block;
	width: 30%;
	height: 5px;
	margin: 0 auto;
	border-radius: 3px 3px 2px 2px;
	background: linear-gradient(180deg, #3a4c72 0%, #1b2742 100%);
	box-shadow: 0 8px 14px rgba(0, 17, 63, 0.5);
}

/* ---- スマホ ---- */
.kw-device-phone {
	position: absolute;
	right: -10px;
	bottom: 26px;
	width: 24%;                           /* 2026-09-22 #3: 128px -> 31% ／ #4: ディスプレイを主役にするため 24% */
	z-index: 5;                           /* 2026-09-22 #4: 最前面。ディスプレイが透けない */
	padding: 8px;
	border-radius: 19px;
	transform-style: preserve-3d;
	transform: rotateX(8deg) rotateY(-19deg) rotateZ(-7deg);
	background: linear-gradient(150deg, #3a4c70, #16243f);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 22px 38px rgba(0, 17, 63, 0.5);
}
/* 厚み（奥にもう一枚） */
.kw-device-phone:before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	transform: translateZ(-7px);
	border-radius: 19px;
	background: #0c1730;
}
.kw-device-phone-speaker {
	position: absolute;
	top: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.22);
	z-index: 2;
}
@media (max-width: 991px) {
	.kw-hero-devices { max-width: 560px; }
	.kw-device-phone { right: -4px; }
	.kw-device-monitor-neck { height: 26px; }
}

/* --- E) 新設した Contact 区画 ------------------------------------- */
#contact { background-color: var(--light); }


/* ================================================================
   第3稿（2026-09-07 #1）で足したもの
   見本にあった動きを本来の姿に戻すのが主で、
   新しく足したのはヒーロー背景の canvas と about 背景の線だけ。
   ================================================================ */

/* --- B1) ヒーロー背景の canvas ------------------------------------ */
.kw-hero-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}
/* 背面の大きな屋号を canvas の上に残す */
#home .custom-hero-heading { z-index: 2; }

/* --- B2) 見本の光を、見えるところまで戻す ------------------------- */
/* 見本は #FBC105（明るい黄）で目立っていたが、金にしたうえ紺 80% の被せの下で
   ほとんど見えなくなっていた。被せを緩め、光の色を水色にして戻す。 */
.custom-hero-bg:after { opacity: 0.62; }
.custom-stop-color-1 { stop-color: var(--secondary); }

/* --- B3) about 節の背景（写真の代わり） --------------------------- */
.kw-anim-bg { position: relative; overflow: hidden; }
.kw-anim-bg:before,
.kw-anim-bg:after {
	content: "";
	position: absolute;
	top: -40%;
	left: -40%;
	width: 180%;
	height: 180%;
	z-index: 0;
	pointer-events: none;
}
.kw-anim-bg:before {
	background:
		repeating-linear-gradient(58deg,
			rgba(102, 182, 233, 0.16) 0 1px,
			rgba(102, 182, 233, 0) 1px 34px);
	animation: kwDrift1 40s linear infinite;
}
.kw-anim-bg:after {
	background:
		repeating-linear-gradient(-52deg,
			rgba(200, 164, 90, 0.14) 0 1px,
			rgba(200, 164, 90, 0) 1px 52px),
		radial-gradient(circle at 22% 30%, rgba(102, 182, 233, 0.14), rgba(0, 17, 63, 0) 55%),
		radial-gradient(circle at 78% 72%, rgba(200, 164, 90, 0.12), rgba(0, 17, 63, 0) 55%);
	animation: kwDrift2 60s linear infinite;
}
.kw-anim-bg > * { position: relative; z-index: 1; }
@keyframes kwDrift1 {
	0%   { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(6%, -4%, 0); }
}
@keyframes kwDrift2 {
	0%   { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-5%, 5%, 0); }
}

/* --- B5) concept 節の形：見本の「2 秒かけた拡大」を効かせる --------- */
/* 見本は transition だけ書かれていて、拡大させる指定が無かった */
.custom-el-3 .custom-el-3-img img { transform: scale(1); }
.custom-el-3:hover .custom-el-3-img img { transform: scale(1.12); }

/* --- 動きを減らす設定の人には、足した動きを止める ------------------ */
@media (prefers-reduced-motion: reduce) {
	.kw-anim-bg:before,
	.kw-anim-bg:after { animation: none; }
}


/* ================================================================
   第4稿（2026-09-07 #2）で足したもの
   ================================================================ */

/* --- B) スマホ枠の中で画面がゆっくり上下する ---------------------- */
/* 枠の中に 390:844 の「窓」を置き、その中で画像を動かす。
   2026-09-21 #2 で中立的な仮の画面にしていたが、2026-09-22 #3 で
   とおまもりの画面写真に戻した（M9）。見え方は第4〜8稿と同じにしてある。 */
.kw-device-phone .kw-device-screen {
	position: relative;
	overflow: hidden;
	border-radius: 11px;
	background: var(--light);
	aspect-ratio: 390 / 844;
	z-index: 1;
}
.kw-device-phone .kw-device-screen img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	filter: saturate(0.55) brightness(0.92);
	will-change: transform;
	animation: kwPhoneScroll 10s ease-in-out infinite;
}
/* ヒーローの暗い背景になじませる被せ（第8稿までと同じ） */
.kw-device-phone .kw-device-screen:after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(150deg,
		rgba(0, 17, 63, 0.36) 0%,
		rgba(102, 182, 233, 0.14) 100%);
}

@keyframes kwPhoneScroll {
	0%,  20%  { transform: translateY(0); }          /* 上端で 2 秒止まる */
	55%, 70%  { transform: translateY(-18%); } /* 3.5 秒かけて下へ、1.5 秒止まる */
	100%      { transform: translateY(0); }          /* 3 秒かけて上へ戻る */
}

@media (prefers-reduced-motion: reduce) {
	.kw-device-phone .kw-device-screen img { animation: none; }
}


/* ================================================================
   第5稿（2026-09-08 #1）で足したもの
   ================================================================ */

/* --- 実績一覧の見出し: 英語ラベル＋日本語一行 --------------------- */
.custom-grid-1 .custom-grid-1-text h3 .kw-grid-ja {
	display: block;
	margin-top: 6px;
	font-size: 0.72em;
	font-weight: 400;
	line-height: 1.7;
	text-transform: none;
	opacity: 0.9;
}

/* --- 実写画像の枠：紺の被せ＋青みのガラス風 ----------------------- */
/* 通常時は「暗くてよく見えない」くらい、マウスを乗せると少し晴れる */
.custom-grid-1 .custom-grid-1-item.kw-photo .custom-grid-1-img {
	opacity: 1;
}
.custom-grid-1 .custom-grid-1-item.kw-photo .custom-grid-1-img img {
	transform: scale(1.04);
	/* --kw-b は枠ごとの明度。既定 0.62（枠1・3）。生成画像は暗いので枠ごとに上げる */
	filter: blur(2.5px) saturate(0.28) brightness(var(--kw-b, 0.62)) contrast(0.92);
	transition: filter 500ms, transform 2s;
}
.custom-grid-1 .custom-grid-1-item.kw-photo .custom-grid-1-img:after {
	opacity: 0.72;                       /* 紺の被せ。通常時は暗い */
	transition: opacity 400ms;
}
/* 青みのガラス。紺の被せの上に水色をうっすら重ねる */
.custom-grid-1 .custom-grid-1-item.kw-photo .custom-grid-1-img:before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 1;
	background: linear-gradient(150deg,
		rgba(102, 182, 233, 0.22) 0%,
		rgba(0, 17, 63, 0.10) 55%,
		rgba(200, 164, 90, 0.10) 100%);
	pointer-events: none;
}
.custom-grid-1 .custom-grid-1-item.kw-photo:hover .custom-grid-1-img:after {
	opacity: 0.45;
}
.custom-grid-1 .custom-grid-1-item.kw-photo:hover .custom-grid-1-img img {
	filter: blur(0.6px) saturate(0.6) brightness(calc(var(--kw-b, 0.62) * 1.42)) contrast(1);
	transform: scale(1.1);
}
.custom-grid-1 .custom-grid-1-item.kw-photo h3 {
	color: var(--light) !important;
	text-shadow: 0 1px 6px rgba(0, 17, 63, 0.7);
}

/* 日本語の一行が長いので、枠の右側にも余白を入れて外にはみ出さないようにする */
.custom-grid-1 .custom-grid-1-text .ps-4 {
	padding-right: 1.5rem;
}

/* --- 枠ごとの明度 ------------------------------------------------
   生成画像は元が暗いので、明るい画像（明度 0.62）と通常時の見え方が
   揃うよう、実測して画像ごとに明度だけを上げてある。
   処理（blur / 彩度 / 紺の被せ / ガラス風 / ホバー）は全枠まったく同じ。
   2026-09-21 #2 で 8 枠 -> 6 枠に組み替えたとき、class 名を
   「枠の番号」から「入っている画像」に変えた（実測値はそのまま引き継いでいる）。
     kw-img-flow    = cell2_business.png（旧 kw-cell2）
     kw-img-scooter = cell4_scooter.png （旧 kw-cell4）
     kw-img-ai      = cell5_ai.png      （旧 kw-cell5）
     kw-img-chart   = cell6_forex.png   （旧 kw-cell6）
     kw-img-site    = cell3_website.png （旧 kw-cell3。既定の 0.62 のまま）
     kw-img-product = cell1_toomamori.png（旧 kw-cell1。下の第8稿 B を参照） */
.custom-grid-1 .kw-img-flow .custom-grid-1-img img { --kw-b: 2.69; }
.custom-grid-1 .kw-img-scooter .custom-grid-1-img img { --kw-b: 4.6; }
.custom-grid-1 .kw-img-ai .custom-grid-1-img img { --kw-b: 4.6; }
.custom-grid-1 .kw-img-chart .custom-grid-1-img img { --kw-b: 4.6; }


/* ================================================================
   第7稿（2026-09-09 #2）で足したもの
   ================================================================ */

/* ヒーローの添え文（見出しの下） */
.kw-hero-lead {
	max-width: 34em;
}

/* Contact 区画に置いた事業概要の表 */
.kw-about-table {
	width: 100%;
	text-align: left;
	border-collapse: collapse;
}
.kw-about-table th,
.kw-about-table td {
	padding: 14px 8px;
	border-bottom: 1px solid var(--grey-300);
	vertical-align: top;
	font-size: 1.05em;
	line-height: 1.9;
}
.kw-about-table th {
	width: 8em;
	font-weight: 600;
	color: var(--dark);
	white-space: nowrap;
}
.kw-about-table td {
	color: var(--grey-1000);
}
@media (max-width: 575px) {
	.kw-about-table th,
	.kw-about-table td { display: block; width: auto; }
	.kw-about-table th { border-bottom: 0; padding-bottom: 0; }
	.kw-about-table td { padding-top: 4px; }
}


/* ================================================================
   第8稿（2026-09-10 #1）で足したもの
   ================================================================ */

/* --- C) ヒーローの PC 枠の中身: 暗いエディタ画面 ------------------ */
/* 文字の大きさは枠の幅に追従させる（cqw）。
   2026-09-22 #3: 横長ディスプレイに合わせて 16:9 にし、大きな画面を縮小して
   載せているように文字をずっと小さくした（2.85cqw -> 1.45cqw。読めなくてよい）。 */
.kw-code-screen {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 3px;
	background-color: #04102b;
	background-image: linear-gradient(160deg,
		rgba(102, 182, 233, 0.07) 0%,
		rgba(0, 17, 63, 0) 62%);
	box-shadow: inset 0 0 0 1px rgba(102, 182, 233, 0.16);
	font-family: Consolas, "SFMono-Regular", Menlo, "Liberation Mono", monospace;
	font-size: 6px;
	font-size: 1.45cqw;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
	font-weight: 400;
	letter-spacing: 0;
}
/* 上の細い帯（点 3 つだけ。文字は入れない） */
.kw-code-screen:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1.9em;
	z-index: 2;
	background-color: #08183a;
	background-image:
		radial-gradient(circle at 1.00em 0.95em, rgba(255,255,255,0.26) 0.17em, rgba(255,255,255,0) 0.19em),
		radial-gradient(circle at 1.80em 0.95em, rgba(255,255,255,0.26) 0.17em, rgba(255,255,255,0) 0.19em),
		radial-gradient(circle at 2.60em 0.95em, rgba(255,255,255,0.26) 0.17em, rgba(255,255,255,0) 0.19em);
	border-bottom: 1px solid rgba(102, 182, 233, 0.14);
}
.kw-code-body {
	position: absolute;
	top: 1.9em;
	left: 0;
	right: 0;
	padding: 0.5em 0.7em 0.5em 0;
	will-change: transform;
	transition: transform 220ms ease-out;
}
.kw-code-line {
	display: flex;
	align-items: center;
	white-space: pre;
	height: 1.5em;
}
.kw-code-num {
	flex: 0 0 2.6em;
	text-align: right;
	padding-right: 0.8em;
	color: rgba(255, 255, 255, 0.28);
	opacity: 0;                            /* まだ打っていない行は行番号も出さない */
}
.kw-code-line.is-typing .kw-code-num,
.kw-code-line.is-done .kw-code-num { opacity: 1; }
/* 打ち込みは、単純に幅を 0 から全文の幅まで広げて見せる（幅は JS が実測する） */
.kw-code-text {
	display: inline-block;
	width: 0;
	overflow: hidden;
	white-space: pre;
}
.kw-code-text span { font-style: normal; }
/* 打っている行の右端に出る棒 */
.kw-code-line.is-typing:after {
	content: "";
	width: 0.5em;
	height: 1.05em;
	margin-left: 1px;
	background: var(--secondary);
	opacity: 0.85;
	animation: kwCaret 1s steps(1, end) infinite;
}
@keyframes kwCaret {
	0%, 55%  { opacity: 0.85; }
	56%, 100% { opacity: 0.15; }
}
/* 色分けは水色・金・白の 3 色だけ */
.kw-code-kw { color: var(--secondary); }
.kw-code-st { color: var(--primary); }
.kw-code-cm { color: rgba(255, 255, 255, 0.42); }

/* 動きを減らす設定のときは、打ち込まず静止したまま出す */
@media (prefers-reduced-motion: reduce) {
	.kw-code-body { transition: none; }
	.kw-code-line.is-typing:after { animation: none; }
}


/* --- B) とおまもりの画面が入る枠を、他の枠に揃える ---------------- */
/* とおまもりの画面自体が白地のため、他より白っぽく明るく（輝度 64.7 対 46.6）、
   青みも足りなかった（+45.7 対 +56.2）。明度だけでは青みが揃わないので、
   枠1 だけ紺の被せを 0.72 -> 0.92 に強め、そのぶん明度を戻して
   輝度と青みの両方を枠2〜7 の平均に合わせた（実測は report_C9.md）。
   ホバーで晴れる比率（実測 約 1.46 倍）も枠2〜7 と揃えてある。 */
.custom-grid-1 .custom-grid-1-item.kw-photo.kw-img-product .custom-grid-1-img img {
	--kw-b: 0.65;
}
.custom-grid-1 .custom-grid-1-item.kw-photo.kw-img-product .custom-grid-1-img:after {
	opacity: 0.92;
}
.custom-grid-1 .custom-grid-1-item.kw-photo.kw-img-product:hover .custom-grid-1-img:after {
	opacity: 0.795;                       /* ホバーで晴れる比率を他の枠と同じ約 1.46 倍に合わせた値 */
}
@media (hover: none) {
	.custom-grid-1 .custom-grid-1-item.kw-photo.kw-img-product .custom-grid-1-img:after {
		opacity: 0.92;
	}
}


/* ================================================================
   第9稿（2026-09-10 #2）で足したもの
   2 ページ目 works.html だけで使う。index.html には無い id / class に
   限ってあるので、トップページの見え方は変わらない。
   ================================================================ */

/* works.html の上部（見出し Works と一行）。ヘッダーが上に重なるので、
   その高さぶん上を空ける */
.kw-page-head {
	position: relative;
	z-index: 3;
	padding-top: 190px;
	padding-bottom: 90px;
}
@media (max-width: 991px) {
	.kw-page-head { padding-top: 150px; padding-bottom: 64px; }
}
@media (max-width: 575px) {
	.kw-page-head { padding-top: 130px; padding-bottom: 52px; }
}

/* 一覧の日本語一行。頭に金の短い線を置く */
/* 大きさは、どの画面幅でも 1 行が枠に収まる値を実測で決めた（320〜1920px の 18 幅） */
.kw-works-items li {
	position: relative;
	padding-left: 1.4em;
	margin-bottom: 0.35em;
	font-size: 1em;
	line-height: 1.9;
}
.kw-works-items li:last-child { margin-bottom: 0; }
.kw-works-items li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.9em;
	width: 0.85em;
	height: 2px;                          /* 1px だと行ごとに乗る位置が変わって色が薄く見えるため */
	background: var(--primary);
}


/* ================================================================
   第10稿（2026-09-21 #2）で足したもの
   設計図 docs/site_spec_decided.md の C-1〜C-8・D と、
   8-0「追加決定（2026-09-21 午後）」を実装したぶん。
   ================================================================ */

/* --- 0) ページ内リンクの着地点をヘッダーの下にずらす（Q9） -------- */
/* ヘッダーは上へスクロールしたとき画面上部に固定表示されるので、
   その高さぶん手前で止める。works.html のカテゴリ見出しにも効かせる。 */
html { scroll-padding-top: 110px; }
.kw-works-cat { scroll-margin-top: 110px; }
@media (max-width: 991px) {
	html { scroll-padding-top: 96px; }
	.kw-works-cat { scroll-margin-top: 96px; }
}

/* --- 1) ヒーローの重なりを直す（C-2） ----------------------------- */
/* 直す前: 中身が min-vh-100 の中で上下中央に置かれていたため、
   幅が狭くなって中身が縦に伸びると、上端がヘッダーの下へ潜り込んでいた
   （棚卸し §6。viewport 高さ 735px・幅 740px 以下で発生）。
   直し方: works.html の .kw-page-head と同じく、ヘッダーの高さぶんの
   余白を先に取る。中央寄せはその内側で効くので、ヘッダーの下には入らない。
   下の余白は、背面の大書き kida-works（13cqw）に文字が掛からない量。 */
.kw-hero-row {
	padding-top: 150px;
	padding-bottom: clamp(96px, 13vw, 190px);
}
@media (max-width: 991px) {
	.kw-hero-row { padding-top: 128px; padding-bottom: clamp(88px, 15vw, 150px); }
}
@media (max-width: 575px) {
	.kw-hero-row { padding-top: 108px; }
}

/* --- 2) How we work の右側: 3 項目を最初から全部開いておく -------- */
.kw-how-list .kw-how-item {
	padding: 14px 0;
	border-top: 1px solid var(--grey-300);
}
.kw-how-list .kw-how-item:first-child {
	padding-top: 0;
	border-top: 0;
}
.kw-how-list .kw-how-title {
	margin: 0 0 4px;
	font-weight: 600;
	line-height: 1.7;
}
.kw-how-list .kw-how-text {
	margin: 0;
	color: var(--grey-1000);
	line-height: 1.9;
}

/* --- 3) How we work の左側: 枝に茂る 5 枚の葉（C-4） -------------- */
/* 大きさ・位置・丸める角は、基準の枠（--fw × --fh）の上の値で書き、% に直して置く。
   枠ごと比率を保って縮むので、同じ枠の中では重なり方が変わらない。
   2026-09-22 #4: 一枚ずつ離した結果「図形が並んでいる」ように見えたため、
   見本 Creative Agency 2 の丸め方（角を1つだけ大きく／向かい合う2角／3角で円に近く）と、
   試し描き（docs/ref/leaves_cluster_20260921.png）の重ね方に寄せて、5枚を一つの茂みにした。
   重ね順は、40 years の葉(b)を一番手前、金の太枠の葉(a)をその次にし（2026-09-22 #5）、
   触れたときに出る文字は、上に重なる葉を避けるよう葉ごとに余白（--pt〜--pl）を取る。
   スマホ幅（575px 以下）では、文字を 15px 以上のまま収めるため縦長の枠に組み替える。 */
.kw-leaves-wrap {
	max-width: 680px;
	margin: 0 auto;
}
.kw-leaves {
	--fw: 1000;
	--fh: 770;
	position: relative;
	width: 100%;
	aspect-ratio: var(--fw) / var(--fh);
	container-type: inline-size;
}
.kw-leaf {
	position: absolute;
	left:   calc(var(--x) / var(--fw) * 100%);
	top:    calc(var(--y) / var(--fh) * 100%);
	width:  calc(var(--w) / var(--fw) * 100%);
	height: calc(var(--h) / var(--fh) * 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3.2cqw;
	text-align: center;
	cursor: default;
	opacity: 0;
	transform: scale(0.28) rotate(-16deg);
	transition: opacity 520ms ease-out, transform 640ms cubic-bezier(0.2, 0.85, 0.25, 1);
}
.kw-leaf:focus { outline: none; }
.kw-leaf:focus-visible { box-shadow: 0 0 0 3px rgba(102, 182, 233, 0.55); }
/* 画面に入ったら、付け根を起点に開くように現れる（一度だけ。JS が is-in を付ける） */
.kw-leaf.is-in {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}
/* 並び。(a) 左上 / (b) 上中央 / (c) 右 / (d) 左下の大きい葉 / (e) 右下 */
.kw-leaf-a {
	--x: 0;   --y: 30;  --w: 350; --h: 350;
	--pt: 12%; --pr: 12%; --pb: 12%; --pl: 12%;
	background: #FBE4EA;                  /* 2026-09-22 #9: 金の太枠を外し、塗りだけに */
	border-radius: 0 45% 0 45%;           /* 見本 1: 向かい合う 2 角 */
	transform-origin: 100% 100%;
	z-index: 9;                           /* 2026-09-22 #5: 40 years の葉(b)の下へ。一部が潜ってよい */
}
.kw-leaf-b {
	--x: 305; --y: 0;   --w: 385; --h: 370;
	--pt: 13%; --pr: 7%; --pb: 8%; --pl: 16%;
	background: #4A6FA5;
	color: #ffffff;
	border-radius: 45% 0 0 0;             /* 見本 2: 角を 1 つだけ */
	transform-origin: 50% 100%;
	z-index: 10;                          /* 2026-09-22 #5: 一番手前（数字の上に無地の葉を載せない） */
}
.kw-leaf-c {
	--x: 648; --y: 110; --w: 352; --h: 352;
	--pt: 10%; --pr: 9%; --pb: 12%; --pl: 17%;
	background: #A9CBEA;
	color: #16294A;
	border-radius: 45% 45% 45% 0;         /* 見本 3: 3 角で円に近く */
	transform-origin: 0% 100%;
	z-index: 5;
}
.kw-leaf-d {
	--x: 130; --y: 338; --w: 425; --h: 425;
	--pt: 20%; --pr: 8%; --pb: 8%; --pl: 12%;
	background: #E3EEF8;
	color: #16294A;
	border-radius: 58% 3% 3% 3%;          /* 見本 4: 1 つの角だけ大きく */
	transform-origin: 100% 0%;
	z-index: 4;
}
.kw-leaf-e {
	--x: 525; --y: 400; --w: 345; --h: 345;
	--pt: 22%; --pr: 12%; --pb: 12%; --pl: 13%;
	background: #FBF6CF;
	color: #16294A;
	border-radius: 0 0 45% 0;             /* 見本 5: 右下だけ */
	transform-origin: 0% 0%;
	z-index: 2;
}
@media (max-width: 575px) {
	.kw-leaves { --fw: 1000; --fh: 1450; }
	.kw-leaf-a { --x: 0;   --y: 0;    --w: 470; --h: 470; }
	.kw-leaf-b { --x: 430; --y: 40;   --w: 570; --h: 520; --pl: 11%; }
	.kw-leaf-c { --x: 530; --y: 590;  --w: 470; --h: 470; --pl: 11%; --pt: 9%; }
	.kw-leaf-d { --x: 0;   --y: 500;  --w: 565; --h: 565; --pt: 15%; --pr: 11%; --pl: 9%; }
	.kw-leaf-e { --x: 250; --y: 1030; --w: 500; --h: 410; --pt: 14%; --pl: 9%; }
}
/* 葉が一枚ずつ開く時間差 */
.kw-leaf-a { transition-delay: 0ms; }
.kw-leaf-b { transition-delay: 140ms; }
.kw-leaf-c { transition-delay: 280ms; }
.kw-leaf-d { transition-delay: 420ms; }
.kw-leaf-e { transition-delay: 560ms; }

/* 常に見えている面と、触れたときに出る面 */
.kw-leaf-face,
.kw-leaf-back {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	transition: opacity 240ms;
}
.kw-leaf-back {
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	padding: var(--pt) var(--pr) var(--pb) var(--pl);
	opacity: 0;
	font-size: clamp(15px, 2.4cqw, 16px);  /* 2026-09-22 #4: 約12px -> 15〜16px */
	line-height: 1.6;
}
.kw-leaf:hover .kw-leaf-face,
.kw-leaf:focus-within .kw-leaf-face,
.kw-leaf.is-on .kw-leaf-face { opacity: 0; }
.kw-leaf:hover .kw-leaf-back,
.kw-leaf:focus-within .kw-leaf-back,
.kw-leaf.is-on .kw-leaf-back { opacity: 1; }

/* 数字と単位。単位は「年」ではなく years */
.kw-leaf-face strong {
	display: block;
	font-size: max(40px, 10cqw);          /* 2026-09-22 #5: 7.4cqw -> はっきり大きく */
	font-weight: 600;
	line-height: 1.1;
}
.kw-leaf-face small {
	display: block;
	margin-top: 0.2em;
	font-size: max(16px, 3.4cqw);         /* 2026-09-22 #5: 2.6cqw -> 小さすぎたので大きく */
	letter-spacing: 0.06em;
	opacity: 0.85;
}
/* 左上の葉: 「速く」「確かに」を別々の段で、句読点なしで */
.kw-leaf-words em {
	display: block;
	font-style: normal;
	font-weight: 600;
	font-size: max(16px, 4.3cqw);
	line-height: 1.7;
	color: #16294A;
}

/* 右下の葉: クレヨンで描いたような、じょうろと芽の絵 */
.kw-grow {
	display: block;
	width: 72%;
	height: auto;
	margin-bottom: 2%;
}
.kw-grow path {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3;
}
.kw-grow-ground { stroke: #C8A45A; opacity: 0.6; }
.kw-grow-can-body,
.kw-grow-can-handle,
.kw-grow-can-spout,
.kw-grow-can-rose { stroke: #4A6FA5; }
.kw-grow-can-body { fill: rgba(169, 203, 234, 0.38); }
.kw-grow-can-rose { fill: rgba(169, 203, 234, 0.55); }
.kw-grow-can {
	transform-box: fill-box;
	transform-origin: 74% 88%;
}
.kw-grow-drop {
	stroke: #66B6E9;
	stroke-width: 2.6;
	opacity: 0;
}
.kw-grow-stem {
	stroke: #5A8F4A;
	stroke-width: 3.2;
	stroke-dasharray: 36;
	stroke-dashoffset: 36;
}
.kw-grow-leaf {
	fill: #7FB069;
	stroke: #5A8F4A;
	stroke-width: 2;
	transform: scale(0);
	transform-box: fill-box;
}
.kw-grow-leaf-l { transform-origin: 100% 50%; }
.kw-grow-leaf-r { transform-origin: 0% 50%; }
.kw-leaf-cap {
	font-size: clamp(15px, 2.6cqw, 16px);
	font-weight: 600;
	line-height: 1.6;
}

/* 触れるたびに再生（JS が is-playing を付け直す） */
.kw-leaf-e.is-playing .kw-grow-can    { animation: kwCanPour 1800ms ease-in-out forwards; }
.kw-leaf-e.is-playing .kw-grow-drop-1 { animation: kwDropFall 800ms 500ms ease-in forwards; }
.kw-leaf-e.is-playing .kw-grow-drop-2 { animation: kwDropFall 800ms 700ms ease-in forwards; }
.kw-leaf-e.is-playing .kw-grow-drop-3 { animation: kwDropFall 800ms 900ms ease-in forwards; }
.kw-leaf-e.is-playing .kw-grow-stem   { animation: kwStemGrow 900ms 1100ms ease-out forwards; }
.kw-leaf-e.is-playing .kw-grow-leaf-l { animation: kwLeafOpen 700ms 1800ms ease-out forwards; }
.kw-leaf-e.is-playing .kw-grow-leaf-r { animation: kwLeafOpen 700ms 2000ms ease-out forwards; }

@keyframes kwCanPour {
	0%   { transform: rotate(0deg); }
	28%  { transform: rotate(24deg); }
	78%  { transform: rotate(24deg); }
	100% { transform: rotate(0deg); }
}
@keyframes kwDropFall {
	0%   { opacity: 0; transform: translateY(0); }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(34px); }
}
@keyframes kwStemGrow {
	0%   { stroke-dashoffset: 36; }
	100% { stroke-dashoffset: 0; }
}
@keyframes kwLeafOpen {
	0%   { transform: scale(0); }
	70%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}

/* 動きを減らす設定の人には、葉もクレヨンの絵も最初から完成形で出す（M18） */
.kw-leaves.kw-no-motion .kw-leaf {
	opacity: 1;
	transform: none;
	transition: none;
}
.kw-leaves.kw-no-motion .kw-grow-can { transform: none; }
.kw-leaves.kw-no-motion .kw-grow-drop { opacity: 0; }
.kw-leaves.kw-no-motion .kw-grow-stem { stroke-dashoffset: 0; }
.kw-leaves.kw-no-motion .kw-grow-leaf { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
	.kw-leaf { opacity: 1; transform: none; transition: none; }
	.kw-grow-can { transform: none; }
	.kw-grow-drop { opacity: 0; }
	.kw-grow-stem { stroke-dashoffset: 0; }
	.kw-grow-leaf { transform: scale(1); }
	.kw-leaf-e.is-playing .kw-grow-can,
	.kw-leaf-e.is-playing .kw-grow-drop-1,
	.kw-leaf-e.is-playing .kw-grow-drop-2,
	.kw-leaf-e.is-playing .kw-grow-drop-3,
	.kw-leaf-e.is-playing .kw-grow-stem,
	.kw-leaf-e.is-playing .kw-grow-leaf-l,
	.kw-leaf-e.is-playing .kw-grow-leaf-r { animation: none; }
}


/* --- 4) About 区画から about.html へのリンク（C-5。文言は仮） ----- */
.kw-about-more {
	display: inline-block;
	padding-bottom: 2px;
	color: var(--primary);
	text-decoration: none;
	border-bottom: 1px solid rgba(200, 164, 90, 0.5);
	transition: color 250ms, border-color 250ms;
}
.kw-about-more:hover,
.kw-about-more:focus {
	color: var(--light);
	border-bottom-color: var(--light);
}

/* --- 5) Contact 区画: 表の最終行とフッターの間に余白を足す（C-7） - */
#contact { padding-bottom: 56px; }
.kw-about-table td a { color: var(--dark); }
.kw-about-table td a:hover { color: var(--primary); }

/* --- 7) about.html の本文（B。5 節） ------------------------------ */
.kw-about-body p {
	margin: 0 0 1.7em;
	line-height: 2;
	color: var(--grey-1000);
}
.kw-about-body .kw-about-h2 {
	display: inline-block;
	margin: 2.6em 0 1.2em;
	padding-top: 0.7em;
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.6;
	color: var(--dark);
	border-top: 2px solid var(--primary);
}
.kw-about-body .kw-about-h2:first-child { margin-top: 0; }
.kw-about-body .kw-about-turn {
	margin: 2em 0;
	font-size: 1.26em;
	line-height: 1.8;
	color: var(--dark);
}
.kw-about-body .kw-about-foot { padding-top: 1.2em; }

/* --- 8) ヘッダーの項目名をそのままの綴りで出す（Q8） -------------- */
/* 見本のヘッダーは単語ごとに頭文字を大文字にするため、決めた文言
   「How we work」が「How We Work」と表示されてしまう。ここだけ戻す。 */
#header .header-nav-main nav > ul > li > .nav-link {
	text-transform: none !important;
}

/* --- 9) ヒーローと下の区画の重なりを直す（C-2） ------------------- */
/* 見本は実績一覧を -70px 引き上げてヒーローに食い込ませる作り。
   ヒーロー背面の大書き（.custom-hero-heading。z-index:2）が
   実績一覧の枠の上に描かれてしまい、枠の画像に文字が乗っていた。
   食い込ませる作り自体は見本のままにして、重ね順だけ実績一覧を上にする。 */
#grid {
	position: relative;
	z-index: 3;
}


/* ================================================================
   第11稿（2026-09-22 #3）で足したもの
   実物確認後の追加決定（設計図 8-0-2）
   ================================================================ */

/* --- 1) ヒーロー背景の大書き「KIDA-WORKS」を小さくする ------------ */
/* 見本は 13cqw。8cqw に下げる。PC 幅では下端から少し浮かせ、6枠の上端に字が接しないようにする */
.custom-hero-heading strong {
	font-size: 8cqw;
	line-height: 8cqw;
}
@media (min-width: 992px) {
	#home .custom-hero-heading { bottom: 28px; }
}

/* --- 2) 実績6枠をヒーローに食い込ませない ------------------------- */
/* 見本は .custom-grid-1 を -70px 引き上げていた。これをやめ、
   6枠はヒーローの下端から始める。ヒーローは overflow: hidden なので、
   背面の大書きはどの画面幅でも6枠に掛からない。 */
#grid .custom-grid-1 { margin-top: 0; }


/* ================================================================
   第12稿（2026-09-22 #4）で足したもの
   実物確認2回目の追加決定（設計図 8-0-3）
   ================================================================ */

/* --- 1) ヒーローの机の写真 ------------------------------------------ */
/* 写真は背景の飾り（CSS 背景なので alt なし）。docs/ref/hero_desk.png を暗めに処理して
   WebP に書き出したもの。
   2026-09-22 #5: 画面幅いっぱいに敷くと小物（ノート・ペン・フロー図）が大きすぎ、
   背面の大書き KIDA-WORKS にも重なっていたため、画面幅の 25%（幅・高さとも約 1/4）に縮め、
   ディスプレイの台座の真下に置いた。小物の上端（写真の高さの 60% の位置）が台座の
   すぐ下に来るよう引き上げ、周りは楕円のぼかしで紺に溶かして机の面の切れ目を見せない。
   2026-09-22 #6: 台座の真下ではディスプレイの右寄りに偏って見えたため、大きさはそのままで
   横方向の中心をページの中央に合わせた。置き場は右の列（.kw-hero-devices-col）の中で、
   幅992px以上では列の左端がちょうどページの中央、991px以下では列の中央がページの中央。
   縦は列の下端から測る。列の下端＝並びの下端で、台座の下端はその 78px 上
   （.kw-hero-devices の下の余白）なので、写真の下端を台座の下端に置いてから
   写真の高さの 42% だけ下げる（＝小物の上端が台座のすぐ下に来る。#5 と同じ高さ）。 */
.kw-hero-devices-col { position: relative; }
.kw-hero-desk {
	position: absolute;
	bottom: 78px;
	left: 50%;
	width: 25vw;
	aspect-ratio: 1344 / 800;
	z-index: -1;
	transform: translate(-47.4%, 42%);      /* 小物の中心は写真の幅の 47.4%（ノート左端 165〜紙の右端 1110 ／ 1344） */
	pointer-events: none;
	background: url("../img/hero/hero_desk_800.webp") center / 100% auto no-repeat;
	/* 2026-09-22 #6: 下端がまっすぐ切れて暗い影に見えたため、ぼかしを小物のまわりに締め、
	   縦のぼかしも重ねて下端を必ず透明にした。写真そのものも、暗い机の面が周りの紺
	   (16,44,90) に寄るようスクリーン合成して書き出し直してある */
	-webkit-mask-image:
		radial-gradient(ellipse 46% 36% at 47.4% 76%, #000 50%, rgba(0, 0, 0, 0) 100%),
		linear-gradient(to bottom, #000 84%, rgba(0, 0, 0, 0) 100%);
	-webkit-mask-composite: source-in;
	mask-image:
		radial-gradient(ellipse 46% 36% at 47.4% 76%, #000 50%, rgba(0, 0, 0, 0) 100%),
		linear-gradient(to bottom, #000 84%, rgba(0, 0, 0, 0) 100%);
	mask-composite: intersect;
	opacity: 0.9;
}


/* ================================================================
   第13稿（2026-09-22 #5）で足したもの
   実物確認3回目の追加決定（設計図 8-0-4）
   ================================================================ */

/* --- 1) How we work の右側の文章を大きくする ------------------------ */
/* この区画の文章はリード文と 3 項目だけなので、読みやすい大きさにする。
   目安は葉に触れたときに出る文字（15〜16px）以上。
   変更前: リード文 18.9px（スマホ 17.55px）、項目見出し 16.8px、説明文 14px（スマホ 13px） */
#concept .kw-how-lead {
	font-size: 21px !important;
	line-height: 1.8 !important;
}
.kw-how-list .kw-how-title { font-size: 19px !important; }
.kw-how-list .kw-how-text { font-size: 17px; }
@media (max-width: 575px) {
	#concept .kw-how-lead { font-size: 19px !important; }
	.kw-how-list .kw-how-title { font-size: 18px !important; }
	.kw-how-list .kw-how-text { font-size: 16px; }
}


/* ================================================================
   第14稿（2026-09-22 #6）で足したもの
   実物確認4回目の追加決定（設計図 8-0-5）
   ================================================================ */

/* --- 1) 机の写真: 幅992px以上は右の列の左端（＝ページの中央）に中心を置く --- */
@media (min-width: 992px) {
	.kw-hero-desk { left: 0; }
}
/* 幅992〜1199px は、ボタンと小物の上端が近いので 14px 下げる（KIDA-WORKS の字とは 50px 以上空く） */
@media (min-width: 992px) and (max-width: 1199px) {
	.kw-hero-desk { transform: translate(-47.4%, calc(42% + 14px)); }
}

/* --- 2) 葉に触れたときに出る説明文を、大きく太く ------------------- */
/* 15〜16px -> 20px 前後の太字。区画が 680px のとき 20px、スマホ（366px）で 18px。
   収まらない幅は葉を大きくする（下の 3)）。数字と years は変えない。 */
.kw-leaf-back {
	font-size: clamp(18px, 2.95cqw, 20px);
	font-weight: 700;
	line-height: 1.55;
}
.kw-leaf-cap {
	font-size: clamp(18px, 2.95cqw, 20px);
	font-weight: 700;
}
.kw-leaf-words em { font-weight: 700; }
/* PC 幅（992px 以上）は区画の幅によらず 20px */
@media (min-width: 992px) {
	.kw-leaf-back,
	.kw-leaf-cap { font-size: 20px; }
}

/* --- 3) 幅992〜1199px は、葉の区画を文章の上に置いて大きく取る ------ */
/* 横並びでは区画が 456px しか取れず、20px 前後の文字が葉に収まらないため。
   HTML 側で列を col-lg-6 -> col-xl-6 にした。ここでは縦に並んだときの間隔だけ整える。 */
@media (max-width: 1199px) {
	#concept .kw-leaves-wrap { margin-bottom: 40px; }
}


/* ================================================================
   第15稿（2026-09-22 #7）で足したもの
   works.html の作り直し（設計図 8-0-6・D-1・D-4・D-5）
   （How we think のカードの飾りは 2026-09-22 #8 で区画ごと削除したので外した）
   works.html だけにある class に限ってあるので、index.html の見え方は変わらない。
   ================================================================ */

/* --- 1) カテゴリごとの大きな帯 -------------------------------------- */
/* 背景はトップの6枠と同じ画像（img/works/band_*.webp。元は img/stock/cell*.png）を
   ぼかして暗く落とし（:before）、その上に紺を重ねる（:after）。
   何の写真か分からないくらいまで落とし、文字が読めることを優先する。 */
.kw-band {
	position: relative;
	overflow: hidden;
	padding: 42px 0 46px;
	background-color: #00113f;
	color: #ffffff;
}
.kw-band + .kw-band { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.kw-band:before {
	content: "";
	position: absolute;
	top: -40px; left: -40px; right: -40px; bottom: -40px;
	background: center / cover no-repeat;
	filter: blur(16px) saturate(0.55) brightness(0.55);   /* 画像を約3倍に引き伸ばすので、写っている文字まで読めないよう強めにぼかす */
}
/* 帯ごとの画像（トップの枠と同じ。「このほかに」はトップで使っていない cell7） */
#business-systems.kw-band:before { background-image: url("../img/works/band_business-systems.webp"); } /* cell5_ai */
#products.kw-band:before         { background-image: url("../img/works/band_products.webp"); }         /* cell1_toomamori */
#maintenance.kw-band:before      { background-image: url("../img/works/band_maintenance.webp"); }      /* cell4_scooter */
#planning.kw-band:before         { background-image: url("../img/works/band_planning.webp"); }         /* cell2_business */
#web.kw-band:before              { background-image: url("../img/works/band_web.webp"); }              /* cell3_website */
#data.kw-band:before             { background-image: url("../img/works/band_data.webp"); }             /* cell6_forex */
#others.kw-band:before           { background-image: url("../img/works/band_others.webp"); }           /* cell7_content */
.kw-band:after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(90deg, rgba(0, 17, 63, 0.9) 0%, rgba(0, 17, 63, 0.8) 60%, rgba(0, 17, 63, 0.72) 100%);
}
.kw-band > .container {
	position: relative;
	z-index: 1;
}
.kw-band-title {
	margin: 0 0 8px;
	font-size: clamp(30px, 3.35vw, 48px);  /* PC幅(1440)で 48px */
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #ffffff;
	text-transform: none;
}
.kw-band-ja {
	margin: 0 0 20px;
	font-size: clamp(17px, 1.46vw, 21px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}
.kw-band .kw-band-items li {
	font-size: clamp(16.5px, 1.32vw, 19px);
	line-height: 1.8;
	color: #eef2f8;
	margin-bottom: 0.3em;                 /* 2026-09-25 #1: 状態ラベルが無くなったぶん詰める */
}
/* 「このほかに」は同じ大きさの帯で、文字だけ少し小さめ */
.kw-band-others .kw-band-title { font-size: clamp(26px, 2.8vw, 40px); margin-bottom: 22px; }
.kw-band-others .kw-band-items li { font-size: clamp(16px, 1.2vw, 17px); }
@media (max-width: 575px) {
	.kw-band { padding: 44px 0 48px; }
}

/* --- 2) 着いた帯を一度だけ明るく縁取る（JS が is-arrived を付ける） ---- */
.kw-band.is-arrived:after { animation: kwBandArrive 1600ms ease-out 1; }
@keyframes kwBandArrive {
	0%   { opacity: 1;    box-shadow: inset 0 0 0 0 rgba(200, 164, 90, 0); }
	22%  { opacity: 0.82; box-shadow: inset 0 0 0 2px rgba(200, 164, 90, 0.95), inset 0 0 48px rgba(200, 164, 90, 0.28); }
	100% { opacity: 1;    box-shadow: inset 0 0 0 2px rgba(200, 164, 90, 0), inset 0 0 48px rgba(200, 164, 90, 0); }
}
/* 動きを減らす設定の人には、光る動きの代わりに縁取りを一瞬だけ出す */
@media (prefers-reduced-motion: reduce) {
	.kw-band.is-arrived:after { animation: kwBandArriveStill 700ms steps(1, end) 1; }
}
@keyframes kwBandArriveStill {
	0%   { box-shadow: inset 0 0 0 2px rgba(200, 164, 90, 0.95); }
	100% { box-shadow: none; }
}


/* ================================================================
   第16稿（2026-09-22 #8）で足したもの
   works.html の仕上げ・飾りがリンクを覆う不具合（設計図 8-0-7）
   ================================================================ */

/* --- 1) 飾りの上向き矢印はクリックを受けない ------------------------ */
/* 幅768px以下で、フッターの飾り（.custom-el-1）が Planning / Web / Data の
   リンクに重なり、クリックを横取りしていた（index / works / about の3ページ）。
   見た目は変えず、飾りをクリックの対象から外す。ヒーローの飾り（.custom-el-2）も同じ扱い。 */
.custom-el-1,
.custom-el-2 { pointer-events: none; }

/* --- 2) works.html: 帯の下の about.html へのリンク ------------------ */
/* How we think の代わり。サイトの定型ボタン（ヒーローの Works / Contact と同じ見た目）を1本だけ。
   見本のフッターは 70px 上に食い込むので、下の余白はそのぶん足してある（見た目は上下とも約 56px） */
.kw-works-more {
	padding: 56px 0 126px;
	background-color: var(--light);
}


/* ================================================================
   第17稿（2026-09-22 #9）で足したもの
   実物確認5回目の追加決定（設計図 8-0-8）
   ================================================================ */

/* --- 1) 左上の葉: 的と矢のクレヨン風の絵 ---------------------------- */
/* 右下の葉（じょうろと芽）と同じ作り: SVG＋線をガタつかせるフィルタ、絵の下に文字。
   的が現れる -> 矢が左から飛んで真ん中に刺さる -> 的が少し揺れて金の小さな光。
   触れるたびに再生（JS が is-playing を付け直す）。 */
.kw-leaf-a { --pr: 16%; }                 /* 右側の一部が 40 years の葉の下に潜るので、文字をそこから避ける */
.kw-aim {
	display: block;
	width: 86%;
	height: auto;
	margin-bottom: 2%;
	overflow: visible;
}
.kw-aim path,
.kw-aim circle {
	stroke-linecap: round;
	stroke-linejoin: round;
}
.kw-aim-ring-out { fill: #4A6FA5; stroke: #3A5B8E; stroke-width: 2.4; }
.kw-aim-ring-mid { fill: #F4C6D3; stroke: #3A5B8E; stroke-width: 2; }
.kw-aim-ring-in  { fill: #A9CBEA; stroke: #3A5B8E; stroke-width: 2; }
.kw-aim-shaft  { fill: none; stroke: #8A5A34; stroke-width: 3.2; }
.kw-aim-head   { fill: #8A5A34; stroke: #6E4526; stroke-width: 1.4; }
.kw-aim-fletch { fill: none; stroke: #C8A45A; stroke-width: 3.2; }
.kw-aim-spark path { fill: none; stroke: #C8A45A; stroke-width: 2.6; }
.kw-aim-target {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	opacity: 0;
}
.kw-aim-arrow { opacity: 0; }
.kw-aim-spark { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }

/* 「速く」「確かに」は、右下の葉の「小さく始めて育てる」と同じ大きさ・色・太さ・行の高さ */
.kw-leaf-words em {
	font-size: inherit;
	line-height: 1.6;
	color: #16294A;
	font-weight: 700;
}

.kw-leaf-a.is-playing .kw-aim-target { animation: kwAimTargetIn 450ms ease-out forwards, kwAimWobble 520ms 1050ms ease-in-out; }
.kw-leaf-a.is-playing .kw-aim-arrow  { animation: kwAimFly 600ms 450ms cubic-bezier(0.3, 0.1, 0.5, 1) forwards; }
.kw-leaf-a.is-playing .kw-aim-spark  { animation: kwAimSpark 700ms 1050ms ease-out forwards; }
@keyframes kwAimTargetIn {
	0%   { opacity: 0; transform: scale(0.55); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes kwAimFly {
	0%   { opacity: 0; transform: translateX(-70px); }
	15%  { opacity: 1; }
	100% { opacity: 1; transform: translateX(0); }
}
@keyframes kwAimWobble {
	0%, 100% { transform: rotate(0deg); }
	25%      { transform: rotate(4deg); }
	55%      { transform: rotate(-3deg); }
	80%      { transform: rotate(1.5deg); }
}
@keyframes kwAimSpark {
	0%   { opacity: 0; transform: scale(0.6); }
	35%  { opacity: 1; transform: scale(1.1); }
	100% { opacity: 0.85; transform: scale(1); }
}
/* 動きを減らす設定の人には、最初から完成形（矢が刺さった状態）で出す */
.kw-leaves.kw-no-motion .kw-aim-target,
.kw-leaves.kw-no-motion .kw-aim-arrow,
.kw-leaves.kw-no-motion .kw-aim-spark { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.kw-aim-target, .kw-aim-arrow, .kw-aim-spark { opacity: 1; transform: none; }
	.kw-leaf-a.is-playing .kw-aim-target,
	.kw-leaf-a.is-playing .kw-aim-arrow,
	.kw-leaf-a.is-playing .kw-aim-spark { animation: none; }
}

/* --- 2) 定型ボタンの大きさ ------------------------------------------ */
/* How we work の Learn More、works.html の「kida-works の考え方」、about.html 末尾の Works / Contact。
   文字 PC幅 18px（991px以下は 17px）、押せる高さ 48px 以上。ヘッダーの Contact Us とヒーローのボタンは変えない。 */
.kw-btn-std {
	display: inline-flex !important;
	align-items: center;
	min-height: 50px;
	padding: 12px 24px !important;
	font-size: 18px !important;
	line-height: 1.4 !important;
}
@media (max-width: 991px) {
	.kw-btn-std { font-size: 17px !important; min-height: 48px; }
}
/* About 区画の「詳しくはこちら」は文字リンク（金の下線）。見た目は変えず、大きさだけそろえる。
   下線は枠線ではなく文字の下線にして、押せる高さを取っても下線が文字から離れないようにする */
.kw-about-more {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding-bottom: 0;
	border-bottom: 0;
	font-size: 18px;
	text-decoration: underline;
	text-decoration-color: rgba(200, 164, 90, 0.5);
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}
.kw-about-more:hover,
.kw-about-more:focus { text-decoration-color: var(--light); }
@media (max-width: 991px) {
	.kw-about-more { font-size: 17px; }
}


/* ================================================================
   第18稿（2026-09-29 #1）で足したもの
   スマホ実機確認の追加決定（設計図 8-0-11）
   ================================================================ */

/* --- 1) スマホ幅では、ディスプレイとスマホ枠を半分の大きさに ------- */
/* 実機で見ると画面いっぱいに感じるため。スマホ枠は並びの幅の 24% のままなので、
   ディスプレイとスマホの大きさの比は変わらない。PC幅（769px 以上）は変えない。
   小さくなったぶん、並びの下の余白も詰めて、見出し・文章との間を空ける。 */
/* 2026-09-29 #4: 表示幅の条件だけだと、Chrome の「PC版サイトを見る」を有効にした端末では
   表示幅が約 980px 扱いになり、この指定が効かない。端末の画面幅（max-device-width）でも
   効くように条件を足す。PC・タブレットは画面幅が 768px より広いので影響しない。 */
@media (max-width: 768px), (max-device-width: 768px) {
	.kw-hero-devices {
		max-width: min(280px, 47vw);      /* 幅768pxで 560 -> 280、幅390pxで 366 -> 183 */
		padding-bottom: 44px;             /* 78px から。枠が小さくなったぶん詰める */
		perspective: 600px;               /* 枠と同じ割合で縮める。固定のままだと傾きの見え方が変わり、
		                                     ディスプレイとスマホの大きさの比がずれる */
		/* 2026-09-29 #5: 中央ではなく、PC幅と同じように少し右寄りに置く。
		   右端は列の内側に 6% 残し、スマホ枠がはみ出さないようにする */
		margin-left: auto;
		margin-right: 6%;
	}
	/* 2026-09-29 #5: 背面の大書き「kida-works」は、スマホでも一番目立つ文字にする。
	   8cqw -> 12cqw（幅768pxでは 76px で頭打ち）。下端の位置（80px）は変えないので 6枠との隙間は同じ。
	   PC幅（769px以上）の大きさは変えない。 */
	#home .custom-hero-heading strong {
		font-size: min(12cqw, 76px);
		line-height: min(12cqw, 76px);
	}
}