@charset "UTF-8";

/* =================================================
   ANK INNOVATION
   山口県下関市の防水工事会社オリジナルテーマ
   ================================================= */

/* -----------------------------------------------
   1. デザイントークン (CSS Variables)
   ----------------------------------------------- */
:root {
	/* カラーパレット — 誠実・清潔・職人らしい信頼感 */
	--color-navy: #0F2A47;        /* ディープネイビー（メイン） */
	--color-navy-deep: #081B30;   /* さらに濃いネイビー（フッター等） */
	--color-blue: #2E7DD1;        /* アクアブルー（アクセント） */
	--color-blue-light: #E8F1FB;  /* 淡いブルー（背景） */
	--color-accent: #C8A864;      /* 真鍮ゴールド（要所のアクセント・職人感） */
	--color-text: #1A2533;
	--color-text-sub: #5A6878;
	--color-line: #E1E6EE;
	--color-bg: #FFFFFF;
	--color-bg-alt: #F7F9FC;

	/* タイポグラフィ */
	--font-sans: "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	--font-serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
	--font-display: "Cormorant Garamond", "Noto Serif JP", serif;

	/* レイアウト */
	--container: 1200px;
	--container-narrow: 880px;
	--header-h: 88px;
	--radius: 4px;
	--radius-lg: 8px;

	/* シャドウ */
	--shadow-sm: 0 2px 8px rgba(15, 42, 71, 0.06);
	--shadow-md: 0 8px 24px rgba(15, 42, 71, 0.10);
	--shadow-lg: 0 16px 48px rgba(15, 42, 71, 0.14);

	/* イージング */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -----------------------------------------------
   2. リセット & ベース
   ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text);
	background: var(--color-bg);
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-navy); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--color-blue); }
ul, ol { padding: 0; margin: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: transparent; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* -----------------------------------------------
   3. ユーティリティ
   ----------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}
.container--narrow { max-width: var(--container-narrow); }

.section {
	padding: 100px 0;
}
@media (max-width: 768px) {
	.section { padding: 64px 0; }
}

.section-head {
	text-align: center;
	margin-bottom: 64px;
}
.section-head__en {
	display: block;
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 0.3em;
	color: var(--color-blue);
	margin-bottom: 12px;
	text-transform: uppercase;
	font-weight: 600;
}
.section-head__ja {
	font-family: var(--font-serif);
	font-size: clamp(28px, 4vw, 40px);
	color: var(--color-navy);
	font-weight: 700;
}
.section-head__lead {
	margin-top: 20px;
	color: var(--color-text-sub);
	font-size: 15px;
}

/* ボタン */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 18px 36px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.1em;
	border-radius: var(--radius);
	transition: all .3s var(--ease);
	position: relative;
	overflow: hidden;
}
.btn--primary {
	background: var(--color-navy);
	color: #fff !important;
}
.btn--primary:hover {
	background: var(--color-blue);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.btn--outline {
	background: transparent;
	color: var(--color-navy) !important;
	border: 1.5px solid var(--color-navy);
}
.btn--outline:hover {
	background: var(--color-navy);
	color: #fff !important;
}
.btn--white {
	background: #fff;
	color: var(--color-navy) !important;
}
.btn--arrow::after {
	content: "→";
	transition: transform .3s var(--ease);
}
.btn:hover .btn--arrow::after,
.btn--arrow:hover::after {
	transform: translateX(4px);
}

/* -----------------------------------------------
   4. ヘッダー
   ----------------------------------------------- */
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: all .3s var(--ease);
}
.header.is-scrolled {
	border-bottom-color: var(--color-line);
	box-shadow: var(--shadow-sm);
}
.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 32px;
}
.header__logo {
	display: flex;
	align-items: center;
	gap: 12px;
}
.header__logo-mark {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.header__logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
.header__logo-name {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--color-navy);
}
.header__logo-sub {
	font-size: 10px;
	letter-spacing: 0.2em;
	color: var(--color-text-sub);
	margin-top: 2px;
}

.gnav {
	display: flex;
	align-items: center;
	gap: 36px;
}
.gnav__list {
	display: flex;
	gap: 32px;
}
.gnav__list a {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	position: relative;
	padding: 4px 0;
}
.gnav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--color-blue);
	transition: width .3s var(--ease);
}
.gnav__list a:hover::after { width: 100%; }

.gnav__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: var(--color-navy);
	color: #fff !important;
	border-radius: var(--radius);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	transition: background .3s var(--ease);
}
.gnav__cta:hover { background: var(--color-blue); }

/* ハンバーガー */
.hamburger {
	display: none;
	width: 40px;
	height: 40px;
	position: relative;
	z-index: 110;
}
.hamburger span {
	display: block;
	position: absolute;
	left: 8px;
	width: 24px;
	height: 2px;
	background: var(--color-navy);
	transition: all .3s var(--ease);
}
.hamburger span:nth-child(1) { top: 14px; }
.hamburger span:nth-child(2) { top: 20px; }
.hamburger span:nth-child(3) { top: 26px; }
.hamburger.is-open span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

@media (max-width: 960px) {
	.hamburger { display: block; }
	.gnav {
		position: fixed;
		top: 0; right: 0;
		width: 100%;
		height: 100vh;
		background: #fff;
		flex-direction: column;
		justify-content: center;
		gap: 24px;
		transform: translateX(100%);
		transition: transform .4s var(--ease-out);
	}
	.gnav.is-open { transform: translateX(0); }
	.gnav__list { flex-direction: column; align-items: center; gap: 24px; }
	.gnav__list a { font-size: 18px; }
}

/* -----------------------------------------------
   5. ヒーロー
   ----------------------------------------------- */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-navy-deep) 0%, var(--color-navy) 60%, #1a3d63 100%);
	color: #fff;
	padding-top: var(--header-h);
}
/* 背景の装飾的なライン（雨のメタファー） */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(180deg, transparent 0%, transparent 70%, rgba(46, 125, 209, 0.15) 100%),
		repeating-linear-gradient(
			115deg,
			transparent 0,
			transparent 80px,
			rgba(255, 255, 255, 0.02) 80px,
			rgba(255, 255, 255, 0.02) 81px
		);
	pointer-events: none;
}
/* 大きな円（雫のイメージ） */
.hero::after {
	content: "";
	position: absolute;
	right: -10%;
	top: 50%;
	transform: translateY(-50%);
	width: 700px;
	height: 700px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(46, 125, 209, 0.25), transparent 70%);
	pointer-events: none;
	animation: heroOrb 12s ease-in-out infinite;
}
@keyframes heroOrb {
	0%, 100% { transform: translateY(-50%) scale(1); }
	50% { transform: translateY(-52%) scale(1.05); }
}

.hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 32px;
}
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.3em;
	color: var(--color-accent);
	margin-bottom: 32px;
	font-weight: 600;
	text-transform: uppercase;
	opacity: 0;
	animation: fadeUp .8s var(--ease-out) .2s forwards;
}
.hero__eyebrow::before {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: var(--color-accent);
}
.hero__title {
	font-family: var(--font-serif);
	font-size: clamp(36px, 6vw, 68px);
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 32px;
	opacity: 0;
	animation: fadeUp 1s var(--ease-out) .4s forwards;
}
.hero__title em {
	font-style: normal;
	color: var(--color-accent);
	position: relative;
}
.hero__sub {
	font-size: 16px;
	line-height: 2;
	max-width: 540px;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 48px;
	opacity: 0;
	animation: fadeUp 1s var(--ease-out) .6s forwards;
}
.hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	opacity: 0;
	animation: fadeUp 1s var(--ease-out) .8s forwards;
}
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}

/* スクロール促し */
.hero__scroll {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.6);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	z-index: 2;
}
.hero__scroll::after {
	content: "";
	width: 1px;
	height: 40px;
	background: linear-gradient(180deg, var(--color-accent), transparent);
	animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
	0% { transform: scaleY(0); transform-origin: top; }
	50% { transform: scaleY(1); transform-origin: top; }
	51% { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* -----------------------------------------------
   6. About / Strength セクション
   ----------------------------------------------- */
.about {
	background: var(--color-bg);
	position: relative;
}
.about__lead {
	font-family: var(--font-serif);
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.9;
	color: var(--color-navy);
	text-align: center;
	margin-bottom: 32px;
	font-weight: 500;
}
.about__text {
	max-width: 720px;
	margin: 0 auto;
	color: var(--color-text-sub);
	line-height: 2.1;
	text-align: center;
}

/* 強み3カラム */
.strengths {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin-top: 80px;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
}
.strength {
	padding: 56px 32px;
	text-align: center;
	position: relative;
	transition: background .3s var(--ease);
}
.strength + .strength {
	border-left: 1px solid var(--color-line);
}
.strength:hover {
	background: var(--color-bg-alt);
}
.strength__num {
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 0.3em;
	color: var(--color-blue);
	margin-bottom: 16px;
	font-weight: 600;
}
.strength__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 24px;
	color: var(--color-navy);
}
.strength__title {
	font-family: var(--font-serif);
	font-size: 22px;
	color: var(--color-navy);
	margin-bottom: 16px;
}
.strength__text {
	font-size: 14px;
	color: var(--color-text-sub);
	line-height: 1.9;
}

@media (max-width: 768px) {
	.strengths { grid-template-columns: 1fr; }
	.strength + .strength {
		border-left: none;
		border-top: 1px solid var(--color-line);
	}
}

/* -----------------------------------------------
   7. サービス
   ----------------------------------------------- */
.services {
	background: var(--color-bg-alt);
	position: relative;
	overflow: hidden;
}
.services::before {
	content: "WATERPROOFING";
	position: absolute;
	top: 40px;
	right: -40px;
	font-family: var(--font-display);
	font-size: clamp(80px, 14vw, 200px);
	font-weight: 600;
	color: rgba(15, 42, 71, 0.04);
	letter-spacing: 0.02em;
	pointer-events: none;
	white-space: nowrap;
}
.service-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	position: relative;
	z-index: 1;
}
.service-card {
	background: #fff;
	padding: 48px 40px;
	border-radius: var(--radius-lg);
	transition: all .4s var(--ease);
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-line);
}
.service-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: var(--color-blue);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .4s var(--ease);
}
.service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
}
.service-card:hover::before { transform: scaleY(1); }

.service-card__num {
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.3em;
	color: var(--color-blue);
	font-weight: 600;
	margin-bottom: 12px;
}
.service-card__title {
	font-family: var(--font-serif);
	font-size: 26px;
	color: var(--color-navy);
	margin-bottom: 20px;
}
.service-card__desc {
	color: var(--color-text-sub);
	font-size: 14px;
	line-height: 2;
	margin-bottom: 24px;
}
.service-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.service-card__tag {
	display: inline-block;
	padding: 4px 12px;
	background: var(--color-blue-light);
	color: var(--color-navy);
	font-size: 12px;
	border-radius: 100px;
	letter-spacing: 0.05em;
}

@media (max-width: 768px) {
	.service-grid { grid-template-columns: 1fr; }
	.service-card { padding: 36px 28px; }
}

/* -----------------------------------------------
   8. 施工事例
   ----------------------------------------------- */
.works-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.work-card {
	display: block;
	background: #fff;
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: all .4s var(--ease);
	color: inherit !important;
}
.work-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}
.work-card__media {
	aspect-ratio: 4 / 3;
	background: var(--color-blue-light);
	overflow: hidden;
	position: relative;
}
.work-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.work-card:hover .work-card__media img {
	transform: scale(1.05);
}
.work-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--color-blue-light), #fff);
	color: var(--color-navy);
	font-family: var(--font-display);
	font-size: 18px;
	letter-spacing: 0.2em;
	opacity: 0.5;
}
.work-card__body {
	padding: 24px;
}
.work-card__cat {
	display: inline-block;
	font-size: 12px;
	color: var(--color-blue);
	letter-spacing: 0.1em;
	margin-bottom: 8px;
}
.work-card__title {
	font-family: var(--font-serif);
	font-size: 18px;
	color: var(--color-navy);
	line-height: 1.6;
}

@media (max-width: 960px) {
	.works-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.works-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------
   9. お知らせ
   ----------------------------------------------- */
.news {
	background: var(--color-bg);
}
.news-list {
	max-width: 880px;
	margin: 0 auto;
}
.news-item {
	display: flex;
	gap: 32px;
	padding: 24px 0;
	border-bottom: 1px solid var(--color-line);
	color: inherit !important;
	transition: padding .3s var(--ease);
}
.news-item:hover {
	padding-left: 12px;
}
.news-item:hover .news-item__title {
	color: var(--color-blue);
}
.news-item__date {
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--color-blue);
	min-width: 100px;
	letter-spacing: 0.05em;
	font-weight: 600;
}
.news-item__cat {
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--color-text-sub);
	border: 1px solid var(--color-line);
	padding: 2px 12px;
	border-radius: 100px;
	height: fit-content;
	white-space: nowrap;
}
.news-item__title {
	flex: 1;
	font-size: 15px;
	color: var(--color-navy);
	transition: color .3s var(--ease);
}

@media (max-width: 600px) {
	.news-item { flex-wrap: wrap; gap: 12px; }
	.news-item__date { min-width: auto; }
}

/* -----------------------------------------------
   10. CTA
   ----------------------------------------------- */
.cta {
	background:
		linear-gradient(135deg, rgba(15, 42, 71, 0.92), rgba(8, 27, 48, 0.92)),
		var(--color-navy);
	color: #fff;
	text-align: center;
	padding: 100px 0;
	position: relative;
	overflow: hidden;
}
.cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(
			115deg,
			transparent 0,
			transparent 80px,
			rgba(255, 255, 255, 0.03) 80px,
			rgba(255, 255, 255, 0.03) 81px
		);
	pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; }
.cta__eyebrow {
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.3em;
	color: var(--color-accent);
	margin-bottom: 16px;
	font-weight: 600;
}
.cta__title {
	font-family: var(--font-serif);
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.5;
	margin-bottom: 24px;
}
.cta__text {
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 40px;
	font-size: 15px;
}
.cta__actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}
.cta__tel {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 18px 36px;
	background: #fff;
	color: var(--color-navy);
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 0.05em;
	transition: all .3s var(--ease);
}
.cta__tel:hover {
	background: var(--color-accent);
	color: #fff;
}
.cta__tel-label {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--color-text-sub);
	display: block;
	margin-bottom: 4px;
	font-weight: 500;
}
.cta__tel:hover .cta__tel-label { color: rgba(255,255,255,0.8); }

/* -----------------------------------------------
   11. フッター
   ----------------------------------------------- */
.footer {
	background: var(--color-navy-deep);
	color: rgba(255, 255, 255, 0.7);
	padding: 80px 0 32px;
	font-size: 14px;
}
.footer__top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 56px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer__brand-name {
	font-family: var(--font-display);
	font-size: 24px;
	color: #fff;
	letter-spacing: 0.05em;
	margin-bottom: 4px;
	font-weight: 600;
}
.footer__brand-sub {
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--color-accent);
	margin-bottom: 24px;
}
.footer__brand-info {
	font-size: 13px;
	line-height: 2;
	color: rgba(255, 255, 255, 0.6);
}
.footer__heading {
	font-size: 13px;
	color: #fff;
	letter-spacing: 0.15em;
	margin-bottom: 20px;
	font-weight: 700;
}
.footer__list a {
	color: rgba(255, 255, 255, 0.7) !important;
	font-size: 13px;
	display: inline-block;
	padding: 4px 0;
	transition: color .3s var(--ease);
}
.footer__list a:hover { color: #fff !important; }
.footer__list li + li { margin-top: 4px; }
.footer__bottom {
	padding-top: 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 960px) {
	.footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}
@media (max-width: 600px) {
	.footer__top { grid-template-columns: 1fr; }
	.footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* -----------------------------------------------
   12. 下層ページ共通
   ----------------------------------------------- */
.page-hero {
	padding: calc(var(--header-h) + 80px) 0 80px;
	background: linear-gradient(135deg, var(--color-navy-deep), var(--color-navy));
	color: #fff;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		115deg, transparent 0, transparent 60px,
		rgba(255,255,255,0.02) 60px, rgba(255,255,255,0.02) 61px
	);
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__en {
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 0.3em;
	color: var(--color-accent);
	margin-bottom: 12px;
	font-weight: 600;
}
.page-hero__title {
	font-family: var(--font-serif);
	font-size: clamp(28px, 4vw, 44px);
}

.breadcrumb {
	background: var(--color-bg-alt);
	padding: 16px 0;
	font-size: 12px;
	color: var(--color-text-sub);
}
.breadcrumb ol {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.breadcrumb li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--color-line);
}

.entry-content {
	max-width: var(--container-narrow);
	margin: 0 auto;
	padding: 80px 24px;
	line-height: 2.1;
}
.entry-content h2 {
	font-family: var(--font-serif);
	font-size: 28px;
	color: var(--color-navy);
	margin: 48px 0 24px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--color-blue);
}
.entry-content h3 {
	font-size: 20px;
	color: var(--color-navy);
	margin: 32px 0 16px;
	padding-left: 16px;
	border-left: 4px solid var(--color-blue);
}
.entry-content p { margin-bottom: 1.5em; }
.entry-content img { border-radius: var(--radius); margin: 24px 0; }
.entry-content ul, .entry-content ol {
	padding-left: 1.5em;
	margin-bottom: 1.5em;
}
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

/* -----------------------------------------------
   13. スクロール時の演出
   ----------------------------------------------- */
.fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}