/*
Theme Name: 児島ガイドブック
Theme URI: https://www.kojimaguide.net/
Description: 倉敷市児島地域のタウン情報ポータル「児島ガイドブック」のテーマ。リニューアルに向けた暫定（とりあえず）ページです。
Author: DEGGER
Version: 0.1.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kojimaguide
*/

:root {
	--kg-navy: #103a5c;
	--kg-blue: #1f6fb2;
	--kg-indigo: #2b4a6f;
	--kg-accent: #e8a33d;
	--kg-bg: #f4f1ea;
	--kg-text: #2a2a2a;
	--kg-muted: #6b6b6b;
	--kg-line: #d9d3c7;
	--kg-white: #ffffff;
	--kg-max: 1080px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	color: var(--kg-text);
	background: var(--kg-bg);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; vertical-align: bottom; }

a { color: var(--kg-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.kg-container {
	width: 100%;
	max-width: var(--kg-max);
	margin: 0 auto;
	padding: 0 20px;
}

/* ===== Header ===== */
.kg-header {
	background: var(--kg-white);
	border-bottom: 3px solid var(--kg-navy);
}
.kg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	flex-wrap: wrap;
}
.kg-brand { display: flex; align-items: center; gap: 12px; }
.kg-brand__mark {
	width: 46px; height: 46px;
	border-radius: 10px;
	background: var(--kg-navy);
	color: #fff;
	font-weight: 700;
	display: grid; place-items: center;
	font-size: 20px;
	letter-spacing: 1px;
	flex: 0 0 auto;
}
.kg-brand__name { font-size: 1.25rem; font-weight: 700; color: var(--kg-navy); }
.kg-brand__sub { font-size: .72rem; color: var(--kg-muted); letter-spacing: .05em; }
.kg-header__tag { font-size: .8rem; color: var(--kg-muted); }

/* ===== Hero ===== */
.kg-hero {
	position: relative;
	color: #fff;
	text-align: center;
	padding: 80px 20px 88px;
	background:
		linear-gradient(135deg, rgba(16,58,92,.92), rgba(31,111,178,.88)),
		repeating-linear-gradient(45deg, #16456b 0 14px, #123a5a 14px 28px);
}
.kg-hero__badge {
	display: inline-block;
	border: 1px solid rgba(255,255,255,.6);
	border-radius: 999px;
	padding: 5px 16px;
	font-size: .78rem;
	letter-spacing: .12em;
	margin-bottom: 22px;
}
.kg-hero__title {
	margin: 0 0 14px;
	font-size: clamp(1.7rem, 4.4vw, 2.8rem);
	font-weight: 800;
	line-height: 1.4;
	text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.kg-hero__lead {
	margin: 0 auto;
	max-width: 640px;
	font-size: clamp(.95rem, 2.4vw, 1.05rem);
	opacity: .96;
}
.kg-hero__wave { display: block; line-height: 0; margin-top: -1px; }

/* ===== Notice ===== */
.kg-notice {
	max-width: 760px;
	margin: -40px auto 0;
	position: relative;
	background: var(--kg-white);
	border: 1px solid var(--kg-line);
	border-top: 4px solid var(--kg-accent);
	border-radius: 12px;
	padding: 30px 32px;
	box-shadow: 0 10px 30px rgba(16,58,92,.12);
}
.kg-notice h2 {
	margin: 0 0 10px;
	font-size: 1.25rem;
	color: var(--kg-navy);
}
.kg-notice p { margin: 0 0 6px; color: #444; }
.kg-notice .kg-small { font-size: .85rem; color: var(--kg-muted); }

/* ===== Section ===== */
.kg-section { padding: 56px 0; }
.kg-section__title {
	text-align: center;
	font-size: 1.4rem;
	color: var(--kg-navy);
	margin: 0 0 8px;
}
.kg-section__sub {
	text-align: center;
	color: var(--kg-muted);
	font-size: .85rem;
	letter-spacing: .12em;
	margin: 0 0 36px;
}

/* ===== Cards ===== */
.kg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 20px;
}
.kg-card {
	background: var(--kg-white);
	border: 1px solid var(--kg-line);
	border-radius: 12px;
	padding: 24px 22px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.kg-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(16,58,92,.12);
}
.kg-card__icon {
	width: 48px; height: 48px;
	border-radius: 10px;
	background: var(--kg-bg);
	display: grid; place-items: center;
	font-size: 24px;
	margin-bottom: 14px;
}
.kg-card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--kg-indigo); }
.kg-card p { margin: 0; font-size: .9rem; color: var(--kg-muted); }

/* ===== Contact ===== */
.kg-contact {
	background: var(--kg-navy);
	color: #fff;
	text-align: center;
	padding: 50px 20px;
}
.kg-contact h2 { margin: 0 0 10px; font-size: 1.3rem; }
.kg-contact p { margin: 0 0 20px; opacity: .9; }
.kg-btn {
	display: inline-block;
	background: var(--kg-accent);
	color: #3a2600;
	font-weight: 700;
	padding: 12px 28px;
	border-radius: 999px;
	transition: filter .15s ease;
}
.kg-btn:hover { filter: brightness(1.06); text-decoration: none; }

/* ===== Footer ===== */
.kg-footer {
	background: #0d2c46;
	color: #c7d4e0;
	font-size: .82rem;
	text-align: center;
	padding: 26px 20px;
}
.kg-footer a { color: #9fc3e4; }
.kg-footer__nav { margin-bottom: 12px; }
.kg-footer__nav a { margin: 0 10px; }

@media (max-width: 600px) {
	.kg-notice { margin-left: 16px; margin-right: 16px; padding: 24px 20px; }
	.kg-header__tag { display: none; }
}