@charset "utf-8";

/*---------------------------------------------------------------------
	JOTO ホームドクター リニューアル 2026
	modifier.css - 新デザイン用上書きCSS

	Phase 1: common.css を上書きして新デザインを適用
	Phase 2: 本ファイルの内容を common.css に移植して削除

	セクション構成:
	  §0  デザイントークン（CSS Variables）
	  §1  リセット補完
	  §2  共通レイアウト
	  §3  共通コンポーネント
	  §4  ヘッダー
	  §5  グローバルメニュー展開
	  §6  ページタイトル帯
	  §7  サイドバー
	  §8  フッター
	  §9  TOPへ戻るボタン
	  §10 フォーム
	  §11 トップページ専用
	  §12 下層ページ別固有
	  §13 ホバー・トランジション統一
---------------------------------------------------------------------*/


/*---------------------------------------------------------------------
	§0 デザイントークン
---------------------------------------------------------------------*/
:root {
	/* ブランドカラー */
	--color_primary: #1d4294;
	--color_link: #466ac4;
	--color_primary_pale: #e6f0fa;        /* 色 7 / カード背景・タグ */
	--color_primary_light: #b3d2ef;       /* 色 5 / h4 帯 */
	--color_accent_peach: #f6c7ad;        /* 色 4 / アコーディオン帯・サイドバー楕円 */
	--color_accent_peach_pale: #fcede6;   /* h2 帯 */
	--color_bg_gray: #f3f4f8;             /* 色 3 / フォーム内カード */
	--color_form_bg: #fef9f7;             /* フォーム外枠 */
	--color_form_warn: #dd6913;           /* 必須バッジ・個人情報枠 */
	--color_card_border: #d1d1d1;         /* SNS / ブランドカード枠 */
	--color_form_border: #e9edf5;         /* 色 10 / input 枠 */
	--color_text: #333;
	--color_placeholder: #acacac;
	--color_white: #fff;

	/* グラデーション */
	--gradient_pagehead: linear-gradient(90deg, #E6F0FA 25%, #FCEDE6 75%);
	--gradient_pagination: linear-gradient(152.122deg, #e6f0fa 50.995%, #fcede6 83.791%);
	--gradient_section_healthcare: linear-gradient(155.423deg, #e6f0fa 50.995%, #fcede6 83.791%);
	--gradient_section_support: linear-gradient(155.423deg, #e6f0fa 50.995%, #fcede6 83.791%);

	/* フォント（body 継承前提、各クラスで指定しない）*/
	--font_family: 'Noto Sans JP', 'メイリオ', Meiryo, sans-serif;
	--font_family_num: 'Inter', 'Noto Sans JP', sans-serif;

	/* コンテナ幅 */
	--container_max: 1240px;
	--container_top: 1200px;

	/* 共通 transition */
	--transition_default: 0.3s ease;
}


/*---------------------------------------------------------------------
	§1 リセット補完
---------------------------------------------------------------------*/

/* body フォント。既存 base.css は Noto Sans JP 指定済みだが念のため明示 */
body {
	font-family: var(--font_family);
	color: var(--color_text);
}

/* リンクカラーの上書き（既存 base.css の #EA6000 を新デザインの #466ac4 に）*/
a {
	color: var(--color_link);
	transition: color var(--transition_default);
}
a:hover,
a:focus {
	color: var(--color_primary);
	text-decoration: underline;
}
a:visited {
	color: var(--color_link);
}

/* 旧 a img の opacity:0.7 hover は base.css 側で定義済み、そのまま維持 */


/*---------------------------------------------------------------------
	§2 共通レイアウト
---------------------------------------------------------------------*/

/* コンテナ（下層 max 1240 / トップ max 1200）*/
.container {
	max-width: var(--container_max);
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: content-box;
}
.container.top {
	max-width: var(--container_top);
}
@media (min-width: 1280px) {
	.container { padding: 0 40px; }
}

/* 既存 .pagebody_inner も新コンテナ幅に上書き */
.pagebody_inner {
	max-width: var(--container_max);
	padding: 0 20px;
	box-sizing: content-box;
	margin: 0 auto;
}

/* 2カラム下層レイアウト（左 メイン / 右 サイドバー）*/
.l_page {
	display: block;
	max-width: var(--container_max);
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: content-box;
}
.l_page__main {
	width: 100%;
	margin-bottom: 40px;
}
.l_page__aside {
	width: 100%;
}
@media (min-width: 1024px) {
	.l_page {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 376px;
		gap: 40px;
		padding: 0 100px;
	}
	/* aside が無い場合は main を full-width に */
	.l_page:not(:has(.l_page__aside)) {
		grid-template-columns: minmax(0, 1fr);
	}
	.l_page__main { margin-bottom: 0; }
}

/* 単カラム（送信完了 / 404 等） */
.l_page__single {
	max-width: var(--container_max);
	margin: 0 auto;
	padding: 0 20px;
}
@media (min-width: 1024px) {
	.l_page__single { padding: 0 100px; }
}

/* 既存 #pagebody の上書き（margin-top はヘッダー高さ分確保）*/
/* Footer 直前の余白は #site_footer の margin-top: 140px で全ページ一律に確保 */
#pagebody {
	margin-top: 64px;
	padding-bottom: 0;
}
@media (min-width: 768px) {
	#pagebody { margin-top: 74px; }
}


/*---------------------------------------------------------------------
	§3 共通コンポーネント
---------------------------------------------------------------------*/

/* === 矢印アイコン === */
.icon_arrow {
	display: inline-block;
	width: 10px;
	height: 8px;
	background: no-repeat center / contain;
	vertical-align: middle;
}
.icon_arrow.white {
	background-image: url(/image/2026/icon/btn-arrow-white.svg);
	width: 34px;
	height: 8px;
}
.icon_arrow.blue {
	background-image: url(/image/2026/icon/btn-arrow-blue.svg);
	width: 34px;
	height: 8px;
}

/* === ボタン: プライマリ（塗り）===
   - デフォルト（進む）: テキスト中央 / 矢印 右寄せ absolute
   - .left（戻る）   : テキスト中央 / 矢印 左寄せ absolute */
.btn_primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	max-width: 295px;
	height: 65px;
	padding: 0 24px;
	background: var(--color_primary);
	color: var(--color_white);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border: 2px solid var(--color_primary);
	border-radius: 32.5px;
	transition: opacity var(--transition_default);
}
.btn_primary:hover,
.btn_primary:focus {
	color: var(--color_white);
	opacity: 0.85;
	text-decoration: none;
}
.btn_primary:visited {
	color: var(--color_white);
}
.btn_primary .icon_arrow {
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	background-image: url(/image/2026/icon/btn-arrow-white.svg);
	width: 34px;
	height: 8px;
}
.btn_primary.left .icon_arrow {
	right: auto;
	left: 24px;
	transform: translateY(-50%) scaleX(-1);
}
/* 下層ページ本文末の「一覧へ戻る」: PC は 300×65 / SP は 295×65 */
@media (min-width: 768px) {
	.l_page__main .btn_primary {
		max-width: 300px;
	}
}

/* === ボタン: アウトライン ===
   btn_primary と同じ配置パターン（戻る/進むで矢印の左右） */
.btn_outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	max-width: 295px;
	height: 65px;
	padding: 0 24px;
	background: var(--color_white);
	color: var(--color_primary);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border: 2px solid var(--color_primary);
	border-radius: 32.5px;
	transition: background var(--transition_default);
}
.btn_outline:hover,
.btn_outline:focus {
	color: var(--color_primary);
	background: var(--color_primary_pale);
	text-decoration: none;
}
.btn_outline:visited {
	color: var(--color_primary);
}
.btn_outline .icon_arrow {
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	background-image: url(/image/2026/icon/btn-arrow-blue.svg);
	width: 34px;
	height: 8px;
}
.btn_outline.left .icon_arrow {
	right: auto;
	left: 24px;
	transform: translateY(-50%) scaleX(-1);
}

/* 戻るボタン（送信内容確認画面）— Figma: 230×50 */
.btn_back {
	width: 100%;
	max-width: 230px;
	height: 50px;
}

/* === ボタン: 小アウトライン（一覧を見る等）=== */
.btn_outline_sm {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: auto;
	min-width: 164px;
	height: 40px;
	padding: 0 16px;
	background: var(--color_white);
	color: var(--color_primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border: 2px solid var(--color_primary);
	border-radius: 20px;
	transition: background var(--transition_default);
}
.btn_outline_sm:hover,
.btn_outline_sm:focus {
	color: var(--color_primary);
	background: var(--color_primary_pale);
	text-decoration: none;
}
.btn_outline_sm:visited {
	color: var(--color_primary);
}
.btn_outline_sm .icon_arrow_sm {
	width: 13px;
	height: 8px;
	background: no-repeat center / contain;
	background-image: url(/image/2026/icon/right-arrow.svg);
	flex-shrink: 0;
}

/* PC 拡大 */
@media (min-width: 768px) {
	.btn_primary,
	.btn_outline:not(.btn_back) {
		max-width: 300px;
		font-size: 16px;
	}
	.btn_outline.btn_back {
		font-size: 16px;
	}
}

/* === 見出し（下層用 PC_h1〜h6）=== */
.heading_h1 {
	font-size: 24px;
	font-weight: 700;
	color: var(--color_primary);
	line-height: 1.4;
	margin: 0;
}
.heading_h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--color_primary);
	background: var(--color_accent_peach_pale);
	border-radius: 12px;
	padding: 12px 56px 12px 20px;
	margin: 32px 0 16px;
	line-height: 1.4;
}
.heading_h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--color_primary);
	padding: 8px 0 8px 16px;
	margin: 28px 0 14px;
	position: relative;
	border-bottom: 2px solid var(--color_primary);
	line-height: 1.4;
}
.heading_h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-30%);
	width: 4px;
	height: 60%;
	background: var(--color_primary_light);
	border-radius: 12px;
}
.heading_h4 {
	font-size: 18px;
	font-weight: 700;
	color: var(--color_primary);
	background: var(--color_primary_light);
	border-radius: 12px;
	padding: 8px 16px;
	margin: 24px 0 12px;
	line-height: 1.4;
}
.heading_h5 {
	font-size: 16px;
	font-weight: 700;
	color: var(--color_primary);
	padding: 6px 0 6px 12px;
	margin: 20px 0 10px;
	position: relative;
	border-bottom: 1px solid var(--color_primary);
	line-height: 1.4;
}
.heading_h5::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-30%);
	width: 3px;
	height: 50%;
	background: var(--color_primary_light);
	border-radius: 12px;
}
.heading_h6 {
	font-size: 14px;
	font-weight: 700;
	color: var(--color_primary);
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 16px 0 8px;
	line-height: 1.4;
}
.heading_h6::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--color_accent_peach);
	border-radius: 50%;
	flex-shrink: 0;
}

/* PC 拡大（Figma 実測値）*/
@media (min-width: 768px) {
	.heading_h1 { font-size: 40px; }
	.heading_h2 { font-size: 28px; padding: 13px 56px 13px 24px; margin: 40px 0 24px; }
	.heading_h3 { font-size: 24px; padding: 10px 0 10px 16px; margin: 32px 0 16px; }
	.heading_h4 { font-size: 20px; padding: 8px 16px; margin: 24px 0 12px; }
	.heading_h5 { font-size: 18px; padding: 6px 0 6px 14px; margin: 20px 0 10px; }
	.heading_h6 { font-size: 16px; gap: 8px; margin: 16px 0 8px; }
}

/* === タグ・バッジ === */
.tag_category {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 90px;
	height: 24px;
	padding: 0 12px;
	background: var(--color_primary_pale);
	color: var(--color_text);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	border-radius: 29px;
	text-decoration: none;
}

.badge_required {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 24px;
	padding: 0 16px;
	background: #DD1313;
	color: var(--color_white);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	border-radius: 29px;
	flex-shrink: 0;
}

/* === アコーディオン === */
.accordion {
	margin: 0 0 16px;
	border-radius: 12px;
	overflow: hidden;
}
.accordion__head {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--color_accent_peach);
	color: var(--color_primary);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	padding: 12px 20px;
	cursor: pointer;
	list-style: none;
	transition: opacity var(--transition_default);
}
.accordion__head::-webkit-details-marker { display: none; }
.accordion__head::marker { content: ""; }
.accordion__head:hover {
	opacity: 0.85;
}
.accordion__icon {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--color_primary);
	border-bottom: 2px solid var(--color_primary);
	transform: rotate(45deg);
	transition: transform var(--transition_default);
	flex-shrink: 0;
	margin-right: 4px;
	margin-top: -4px;
}
.accordion[open] .accordion__icon {
	transform: rotate(225deg);
	margin-top: 4px;
}
.accordion__body {
	background: var(--color_white);
	border: 2px solid var(--color_accent_peach);
	border-top: 0;
	padding: 16px 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color_text);
}
.accordion__body a {
	color: var(--color_link);
	text-decoration: underline;
}
.accordion--static .accordion__head {
	cursor: default;
	pointer-events: none;
}

@media (min-width: 768px) {
	.accordion__head { font-size: 18px; padding: 12px 24px; }
}

/* === お知らせ詳細 メタ行（カテゴリタグ + 公開日）+ 戻るボタン === */
.topics_detail__meta {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 24px;
}
.topics_detail__meta .date {
	font-family: var(--font_family_num);
	font-size: 15px;
	font-weight: 500;
	color: var(--color_text);
}
.topics_detail__back {
	margin: 50px 0 0;
	text-align: center;
}

/* === お知らせ行（トップ + 一覧で共通使用）=== */
.news_list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.news_list > li {
	margin: 0;
	border-bottom: 1px solid var(--color_form_border);
}
.news_list > li:first-child {
	border-top: 1px solid var(--color_form_border);
}
.news_list a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 16px 32px 16px 8px;
	color: var(--color_text);
	text-decoration: none;
	position: relative;
	min-height: 56px;
	transition: background var(--transition_default);
}
.news_list a:hover {
	background: var(--color_primary_pale);
	color: var(--color_text);
}
.news_list a::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 13px;
	height: 8px;
	margin-top: -4px;
	background: no-repeat center / contain url(/image/2026/icon/right-arrow.svg);
}
.news_list .cat {
	flex-shrink: 0;
}
.news_list .date {
	font-family: var(--font_family_num);
	font-size: 15px;
	font-weight: 500;
	color: var(--color_text);
	flex-shrink: 0;
}
.news_list .title {
	flex: 1 1 100%;
	font-size: 14px;
	line-height: 1.571;
}
@media (min-width: 768px) {
	.news_list a {
		flex-wrap: nowrap;
		padding: 12px 40px 12px 16px;
		min-height: 56px;
	}
	.news_list .date {
		font-size: 14px;
	}
	.news_list .title {
		flex: 1 1 auto;
		font-size: 16px;
	}
}

/* === H2 見出し（トップ用、波線アイコン付き）=== */
.heading_h2_top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	font-size: 22px;
	font-weight: 700;
	color: var(--color_primary);
	line-height: 1.3;
	text-align: center;
	margin: 0 0 32px;
}
.heading_h2_top::before,
.heading_h2_top::after {
	content: "";
	display: inline-block;
	width: 28px;
	height: 16px;
	background: no-repeat center / contain;
}
.heading_h2_top::before { background-image: url(/image/2026/icon/h2-wave-left.svg); }
.heading_h2_top::after  { background-image: url(/image/2026/icon/h2-wave-right.svg); }
@media (min-width: 768px) {
	.heading_h2_top {
		font-size: 32px;
		gap: 30px;
	}
	.heading_h2_top::before,
	.heading_h2_top::after {
		width: 36px;
		height: 22px;
	}
}

/* === 特徴カード（JOTOホームドクターとは? の3枚）=== */
.feature_card {
	background: var(--color_white);
	border: 3px solid var(--color_primary_pale);
	border-radius: 24px;
	padding: 24px 12px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	height: 100%;
}
.feature_card__visual {
	width: 100%;
	max-width: 220px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.feature_card__visual img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.feature_card__title {
	font-size: 24px;
	font-weight: 700;
	color: var(--color_primary);
	margin: 0;
	line-height: 1.25;
}
.feature_card__text {
	font-size: 14px;
	line-height: 1.714;
	color: var(--color_text);
	margin: 0;
}
@media (min-width: 768px) {
	.feature_card {
		padding: 32px 16px 56px;
		gap: 24px;
	}
	.feature_card__visual {
		max-width: 240px;
	}
	.feature_card__title {
		font-size: 24px;
		line-height: 1.25;
	}
	.feature_card__text {
		font-size: 14px;
		line-height: 24px;
	}
}

/* === 機能カード（ヘルスケア・安心サポート）SP 315×400（90+310）/ PC 280×400 === */
.function_card {
	width: 100%;
	max-width: 315px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.function_card__body { flex: 1; }
.function_card__head {
	background: var(--color_link);
	color: var(--color_white);
	padding: 14px 20px;
	border-radius: 12px 12px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	min-height: 90px;
}
.function_card__tag {
	font-size: 18px;
	font-weight: 700;
	color: var(--color_white);
	margin: 0;
	line-height: 1.2;
}
.function_card__title {
	font-size: 34px;
	font-weight: 700;
	color: var(--color_white);
	margin: 0;
	line-height: 1.1;
}
.function_card__body {
	background: var(--color_white);
	border: 2px solid var(--color_link);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 310px;
}
.function_card__caption {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--color_primary);
}
.function_card__lead {
	font-size: 20px;
	line-height: 1.5;
	color: #333333;
	margin: 0;
	font-weight: 700;
	white-space: normal;
}
.function_card__lead strong {
	color: #466AC4;
	font-weight: 700;
}
.function_card__photo {
	margin: 0;
	aspect-ratio: 280 / 210;
}
.function_card__photo img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 4px;
	object-fit: cover;
}
.function_card .badge_point {
	flex-shrink: 0;
}
@media (min-width: 768px) {
	.function_card {
		max-width: 280px;
	}
	.function_card__head {
		padding: 14px 16px 16px;
		min-height: 90px;
		justify-content: center;
	}
	.function_card__body {
		min-height: 310px;
	}
	.function_card__title {
		font-size: 34px;
	}
	.function_card__tag {
		font-size: 18px;
	}
}

/* === 一覧ページ（list-common-1column.tpl の .list_index 自動生成リスト）===
   common.css の旧 display:table / display:flex(width:48.33%) を打ち消し、
   2 列 grid + 各 item は flex row で title + thumb 配置 */
.l_page__main .list_index {
	margin: 0;
	padding: 0;
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 0;
	flex-wrap: initial;
}
.l_page__main .list_index .item {
	display: block;
	width: auto !important;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(29, 66, 148, 0.15);
}
.l_page__main .list_index .item:first-child {
	border-top: 1px solid rgba(29, 66, 148, 0.15);
}
.l_page__main .list_index .item > a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: auto !important;
	padding: 20px 16px;
	border: 0;
	color: var(--color_text);
	text-decoration: none;
	transition: background var(--transition_default);
}
.l_page__main .list_index .item:first-child > a { border-top: 0; }
.l_page__main .list_index .item > a:hover {
	background: var(--color_primary_pale);
	text-decoration: none;
}
.l_page__main .list_index .item .detail {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}
.l_page__main .list_index .item .ttl {
	font-size: 16px;
	font-weight: 700;
	color: var(--color_text);
	line-height: 1.4;
	margin: 0;
	padding: 0 0 0 24px;
	background: none;
	border: 0;
	border-radius: 0;
	min-height: 0;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.l_page__main .list_index .item .ttl::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 13px;
	height: 8px;
	background: no-repeat center / contain url(/image/2026/icon/right-arrow.svg);
}
.l_page__main .list_index .item .lead {
	margin: 8px 0 0;
	padding: 0;
	background: none;
	font-size: 13px;
	color: var(--color_text);
	line-height: 1.5;
}
.l_page__main .list_index .item .thumb {
	display: block;
	flex-shrink: 0;
	width: 140px;
	height: 80px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--color_white);
}
.l_page__main .list_index .item .thumb span {
	display: block;
	position: static;
	width: 100%;
	height: 100%;
	padding: 0;
}
.l_page__main .list_index .item .thumb img {
	position: static;
	top: auto; left: auto; right: auto; bottom: auto;
	margin: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	display: block;
}
.l_page__main .list_index .item ul { display: none; }
@media (min-width: 768px) {
	.l_page__main .list_index {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 32px;
	}
	.l_page__main .list_index .item {
		border-top: 1px solid rgba(29, 66, 148, 0.15);
	}
	.l_page__main .list_index .item > a {
		padding: 20px 8px;
		gap: 16px;
	}
	.l_page__main .list_index .item .ttl {
		font-size: 16px;
	}
	.l_page__main .list_index .item .thumb {
		width: 160px;
		height: 90px;
	}
}

/* === ポイントプログラムページ（/about/point/）=== */
.point { max-width: 809px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.l_page__main .content1 .point__intro {
	position: relative;
	background: var(--color_white);
	border: 2px solid var(--color_primary);
	border-radius: 24px;
	padding: 84px 20px 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
	overflow: hidden;
	container-type: inline-size;
	container-name: point-intro;
}

/* コンテナクエリは content-box 幅で評価。
   big 1行 fit 必要幅 ≈ 607 → max-width 620 を下回ったら 2 行へ
   catch 1行 fit 必要幅 ≈ 518 → max-width 540 を下回ったら 2 行へ
   1024+ サイドバー出現時の中途半端な改行を回避する */
@container point-intro (max-width: 620px) {
	.l_page__main .content1 .point__intro-big br.point__intro-br-sp {
		display: inline;
	}
}
@container point-intro (max-width: 540px) {
	.l_page__main .content1 .point__intro-catch br.is_sp_only {
		display: inline;
	}
}
/* さらに狭くなった場合（1024 viewport + sidebar 等）は SP レイアウト相当のフォントへフォールバック。
   PC media と同 specificity だと後勝ちで PC が勝つため、parent .point__intro を加えて specificity を上げる。
   container query rule は container の descendants にのみ適用されるため、container 自身の padding 等は viewport media で行う（下記） */
@container point-intro (max-width: 360px) {
	.l_page__main .content1 .point__intro .point__intro-badge {
		width: 80px;
		height: 70px;
	}
	.l_page__main .content1 .point__intro .point__intro-catch {
		font-size: 18px;
	}
	.l_page__main .content1 .point__intro .point__intro-big {
		font-size: 20px;
	}
}
/* 1024-1199 viewport（sidebar 出現直後で main 列が極端に狭い）では intro の左右 padding を縮小。
   PC media（768+, 後出）と同 specificity だと後勝ちで PC が勝つため、二重クラスで specificity を上げる */
@media (min-width: 1024px) and (max-width: 1199.98px) {
	.l_page__main .content1 .point__intro.point__intro {
		padding-left: 20px;
		padding-right: 20px;
	}
}
.l_page__main .content1 .point__intro-badge {
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 70px;
}
.l_page__main .content1 .point__intro-heading {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.l_page__main .content1 .point__intro-catch {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	color: var(--color_text);
	line-height: 1.6;
}
.l_page__main .content1 .point__intro-big {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--color_primary);
	line-height: 1.4;
}
.l_page__main .content1 .point__intro-big::after {
	content: "";
	display: block;
	width: 196px;
	max-width: 92%;
	aspect-ratio: 198 / 14;
	background: url("/image/2026/about/point-underline-sp.svg") center/100% 100% no-repeat;
	margin: 8px auto 0;
}
.l_page__main .content1 .point__intro-lead {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color_text);
	text-align: center;
}
.l_page__main .content1 .point__intro-lead strong {
	color: var(--color_primary);
	font-weight: 700;
}
.l_page__main .content1 .point__intro-note {
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--color_text);
	text-align: left;
}
.l_page__main .content1 .point__brands {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	max-width: 295px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
.l_page__main .content1 .point__brands > li { margin: 0; }
.l_page__main .content1 .point__brands .brand_card {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	display: block;
}
.l_page__main .content1 .point__brands .brand_card img {
	display: block;
	width: 100%;
	height: auto;
}
.l_page__main .content1 .point__heading {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--color_link);
	background: var(--color_accent_peach_pale);
	border-radius: 12px;
	padding: 12px 20px;
	border: 0;
	min-height: 0;
	line-height: 1.4;
}
.l_page__main .content1 .point__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.l_page__main .content1 .point__steps > li {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}
.l_page__main .content1 .point__steps > li:not(:last-child)::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	margin: 12px auto 0;
	border-right: 4px solid var(--color_link);
	border-bottom: 4px solid var(--color_link);
	transform: rotate(45deg);
}
.l_page__main .content1 .point__step-image {
	margin: 0;
	max-width: 240px;
}
.l_page__main .content1 .point__step-image img {
	width: 100%;
	height: auto;
	display: block;
}
.l_page__main .content1 .point__table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 13px;
	line-height: 1.6;
}
.l_page__main .content1 .point__table thead th {
	background: #ffeacd;
	color: #1d4294;
	font-weight: 700;
	padding: 12px 8px;
	text-align: center;
	border: 1px solid #d1d1d1;
}
.l_page__main .content1 .point__table tbody th {
	background: var(--color_white);
	color: var(--color_text);
	font-weight: 500;
	padding: 12px 8px;
	text-align: center;
	border: 1px solid #d1d1d1;
	vertical-align: middle;
}
.l_page__main .content1 .point__table tbody td {
	background: var(--color_white);
	color: var(--color_text);
	padding: 12px 8px;
	text-align: center;
	border: 1px solid #d1d1d1;
	vertical-align: middle;
}
.l_page__main .content1 .point__table strong {
	color: var(--color_form_warn);
	font-weight: 700;
}
@media (min-width: 768px) {
	.point { gap: 56px; }
	.l_page__main .content1 .point__intro {
		padding: 100px 64px 56px;
		gap: 32px;
	}
	.l_page__main .content1 .point__intro-badge {
		width: 98px;
		height: 85px;
	}
	.l_page__main .content1 .point__intro-br-sp { display: none; }
	.l_page__main .content1 .point__intro-catch {
		font-size: 24px;
	}
	.l_page__main .content1 .point__intro-big {
		font-size: 34px;
		line-height: 1.3;
	}
	.l_page__main .content1 .point__intro-big::after {
		width: 680px;
		max-width: 100%;
		aspect-ratio: 682.5 / 14.5;
		background-image: url("/image/2026/about/point-underline-pc.svg");
		margin-top: 12px;
	}
	.l_page__main .content1 .point__intro-lead {
		font-size: 16px;
	}
	.l_page__main .content1 .point__intro-note {
		font-size: 14px;
	}
	.l_page__main .content1 .point__brands {
		grid-template-columns: repeat(2, minmax(0, 336px));
		justify-content: center;
		gap: 12px 10px;
		max-width: 682px;
	}
	.l_page__main .content1 .point__heading {
		font-size: 20px;
		padding: 12px 24px;
	}
	.l_page__main .content1 .point__steps {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}
	.l_page__main .content1 .point__steps > li {
		flex-direction: row;
	}
	.l_page__main .content1 .point__steps > li:not(:last-child)::after {
		margin: 0 0 0 8px;
		transform: rotate(-45deg);
	}
	.l_page__main .content1 .point__step-image {
		max-width: 220px;
	}
	.l_page__main .content1 .point__table {
		font-size: 14px;
	}
	.l_page__main .content1 .point__table strong {
		font-size: 16px;
		line-height: 30px;
	}
	.l_page__main .content1 .point__table thead th,
	.l_page__main .content1 .point__table tbody th,
	.l_page__main .content1 .point__table tbody td {
		padding: 16px 20px;
	}
}

/* === プレミアム会員特典ページ（/about/premium/）=== */
.premium { max-width: 809px; margin: 0 auto; }
.l_page__main .content1 .premium__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.l_page__main .content1 .premium__points > li {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	background: var(--color_white);
	border-radius: 12px;
	overflow: hidden;
	text-align: center;
	box-shadow: 0 0 0 1px rgba(29, 66, 148, 0.08);
}
.l_page__main .content1 .premium__points .premium__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 20px 20px;
}
/* SP: badge_premium を li 上部の横長ピーチ帯として使用 */
.l_page__main .content1 .premium__points .badge_premium {
	width: 100%;
	height: 40px;
	background: linear-gradient(180deg, #fbdac4 0%, #fef0e6 100%);
	border-radius: 0;
	flex-direction: row;
	gap: 8px;
}
.l_page__main .content1 .premium__points .badge_premium__label {
	margin: 0;
}
.l_page__main .content1 .premium__points .badge_premium__num {
	margin: 0;
	font-size: 20px;
}
.l_page__main .content1 .premium__points .premium__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--color_link);
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	line-height: 1.4;
	min-height: 0;
}
.l_page__main .content1 .premium__points .premium__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--color_text);
	margin: 0;
}
@media (min-width: 768px) {
	.l_page__main .content1 .premium__points {
		gap: 0;
	}
	.l_page__main .content1 .premium__points > li {
		flex-direction: row;
		align-items: flex-start;
		gap: 32px;
		padding: 24px 0;
		background: transparent;
		border-radius: 0;
		overflow: visible;
		box-shadow: none;
		border-bottom: 1px solid rgba(29, 66, 148, 0.15);
		text-align: left;
	}
	.l_page__main .content1 .premium__points > li:first-child {
		border-top: 1px solid rgba(29, 66, 148, 0.15);
	}
	.l_page__main .content1 .premium__points .premium__text {
		padding: 0;
	}
	.l_page__main .content1 .premium__points .premium__title {
		font-size: 20px;
	}
	.l_page__main .content1 .premium__points .premium__desc {
		font-size: 16px;
	}
	/* PC: badge_premium は円形（既存定義どおり）に戻す */
	.l_page__main .content1 .premium__points .badge_premium {
		width: 80px;
		height: 80px;
		background: no-repeat center / contain url(/image/2026/mv/mv-badge-ellipse.svg);
		border-radius: 0;
		flex-direction: column;
		gap: 0;
	}
	.l_page__main .content1 .premium__points .badge_premium__num {
		font-size: 32px;
	}
}

/* === ヘルスケア機能ページ（/about/health_care/）=== */
.health_care {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 809px;
	margin: 0 auto;
}
.health_care__mv {
	margin: 0;
	text-align: center;
}
.health_care__mv img {
	width: 100%;
	max-width: 502px;
	height: auto;
	display: inline-block;
}
.health_care__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.health_care__intro-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}
.health_care__intro-lead {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--color_text);
}
.health_care__intro-lead strong {
	color: #DD1313;
	font-weight: 700;
}
.l_page__main .content1 .health_care__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.l_page__main .content1 .health_care__cards > li { margin: 0; }

/* function_card のヘルスケアページ専用拡張（横長 + body 内 PC 横並び/SP 縦積み）
   head のレイアウト（縦並び中央）はトップと同じ。title は .content1 h2 の peach pill を流用。 */
.function_card--wide {
	max-width: none;
	width: 100%;
}
/* tag は <p> なので .content1 p の color: var(--color_text) に勝つ specificity 必要 */
.l_page__main .content1 .function_card--wide .function_card__head .function_card__tag {
	color: var(--color_white);
	margin: 0;
}
/* title (h3) のデフォルト装飾（border-bottom / ::before の縦線 / color など）を完全リセット */
.l_page__main .content1 .function_card--wide .function_card__head .function_card__title {
	margin: 0;
	padding: 0;
	font-size: 22px;
	line-height: 1.2;
	color: var(--color_white);
	background: transparent;
	border: 0;
	position: static;
}
.l_page__main .content1 .function_card--wide .function_card__head .function_card__title::before,
.l_page__main .content1 .function_card--wide .function_card__head .function_card__title::after {
	display: none;
	content: none;
}
.function_card--wide .function_card__body {
	min-height: 0;
	padding: 16px;
	gap: 16px;
}
.function_card--wide .function_card__main {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.l_page__main .content1 .function_card--wide .function_card__lead {
	font-size: 20px;
	line-height: 1.5;
	color: var(--color_text);
	margin: 0;
	font-weight: 700;
	white-space: normal;
	min-height: 3em;
}
.function_card--wide .function_card__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color_text);
}
.l_page__main .content1 .function_card--wide .function_card__note-label {
	align-self: stretch;
	background: var(--color_accent_peach_pale);
	color: var(--color_text);
	border: 0;
	border-radius: 6px;
	padding: 4px 14px;
	font-size: 14px;
	font-weight: 700;
	margin: 4px 0 0;
	line-height: 1.4;
	text-align: left;
}
.l_page__main .content1 .function_card--wide .function_card__note-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color_text);
}
.l_page__main .content1 .function_card--wide .function_card__note-text strong {
	color: #DD1313;
	font-weight: 700;
}
.function_card--wide .function_card__photo {
	margin: 0;
	flex-shrink: 0;
	aspect-ratio: auto;
}
.function_card--wide .function_card__photo img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

@media (min-width: 768px) {
	.health_care { gap: 56px; }
	.health_care__intro-icon { width: 28px; height: 28px; }
	.health_care__intro-lead { font-size: 16px; line-height: 1.8; }
	.health_care__cards { gap: 26px; }

	.function_card--wide .function_card__head {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 12px;
		min-height: 64px;
		padding: 12px 24px;
	}
	.l_page__main .content1 .function_card--wide .function_card__head .function_card__tag {
		font-size: 20px;
		line-height: 1.3;
	}
	.l_page__main .content1 .function_card--wide .function_card__head .function_card__title {
		font-size: 28px;
		padding: 0;
	}
	.function_card--wide .function_card__body {
		flex-direction: row;
		align-items: flex-start;
		padding: 32px;
		gap: 32px;
	}
	.function_card--wide .function_card__photo {
		width: 246px;
		max-width: 246px;
		min-width: 0;
		flex-shrink: 1;
	}

	.function_card--wide .function_card__caption {
		justify-content: flex-start;
		padding-bottom: 0;
		border-bottom: 0;
	}
	.l_page__main .content1 .function_card--wide .function_card__lead {
		flex: 1;
		padding-bottom: 8px;
		border-bottom: 1px solid var(--color_primary);
	}
}

@media (min-width: 768px) and (max-width: 1319.98px) {
	.function_card--wide .function_card__body {
		padding: 20px;
		gap: 16px;
	}
	.function_card--wide .function_card__photo {
		min-width: 180px;
	}
	.l_page__main .content1 .function_card--wide .function_card__lead {
		font-size: 17px;
	}
	.l_page__main .content1 .anshin .function_card__lead {
		font-size: 15px;
		white-space: nowrap;
	}
	.l_page__main .content1 .merit_list .merit_list__text {
		font-size: 13px;
	}
	.l_page__main .content1 .merit_list > li {
		gap: 8px;
	}
	.l_page__main .content1 .merit_list .merit_list__pill {
		width: 80px;
		padding: 0 8px;
		font-size: 12px;
	}
}

/* === 安心サポート機能ページ（/about/support/）=== */
.anshin {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 809px;
	margin: 0 auto;
}
.anshin__mv {
	margin: 0;
	text-align: center;
}
.anshin__mv img {
	width: 100%;
	max-width: 502px;
	height: auto;
	display: inline-block;
}
.intro_lead {
	--intro_lead_emphasis_color: var(--color_primary);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
.intro_lead__icon {
	display: inline-flex;
}
.intro_lead__icon img {
	width: 24px;
	height: 24px;
	display: block;
}
.intro_lead__text {
	margin: 0;
	font-size: 18px;
	line-height: 29px;
	color: var(--color_text);
}
.intro_lead__emphasis {
	color: var(--intro_lead_emphasis_color);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 29px;
}
.l_page__main .content1 .anshin__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.l_page__main .content1 .anshin__cards > li {
	margin: 0;
}

/* Card 1: variant A — head に tag がない単一タイトル中央 */
.function_card--no-tag .function_card__head {
	justify-content: center;
}

.l_page__main .content1 .function_card__supplement {
	margin: 0;
	font-size: 11px;
	line-height: 1.6;
	color: var(--color_text);
	text-align: center;
	white-space: nowrap;
}

.l_page__main .content1 .function_card__caution {
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--color_text);
	text-align: center;
	white-space: nowrap;
}

.function_card--wide .function_card__desc {
	text-align: center;
}

/* Card 2/3: メリットリスト（ピーチピル + テキスト） */
.l_page__main .content1 .merit_list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.l_page__main .content1 .merit_list > li {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: stretch;
}
.merit_list__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color_accent_peach);
	border-radius: 14px;
	height: 28px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 700;
	color: var(--color_text);
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}
.merit_list__text {
	font-size: 15px;
	font-weight: 700;
	color: var(--color_primary);
	line-height: 1.6;
	text-align: center;
}

@media (min-width: 768px) {
	.anshin {
		gap: 56px;
	}
	.intro_lead__icon img {
		width: 28px;
		height: 28px;
	}
	.l_page__main .content1 .anshin__cards {
		gap: 26px;
	}
	.l_page__main .content1 .function_card__supplement {
		font-size: 14px;
		text-align: left;
		white-space: nowrap;
	}
	.l_page__main .content1 .function_card__caution {
		font-size: 14px;
		text-align: left;
	}

	.function_card--wide .function_card__desc {
		text-align: left;
	}

	/* PC: メリットリストは横並び（pill 96px + テキスト） */
	.l_page__main .content1 .merit_list {
		gap: 8px;
	}
	.l_page__main .content1 .merit_list > li {
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}
	.merit_list__pill {
		width: 96px;
		flex-shrink: 0;
	}
	.merit_list__text {
		text-align: left;
		white-space: nowrap;
	}
}

/* === 連携について（/about/link/）=== */
.link_page {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 809px;
	margin: 0 auto;
}
.link_phones {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-direction: column;
	margin: 16px 0 24px;
}
.link_phones figure {
	margin: 0;
	width: 100%;
	max-width: 237px;
}
.link_phones figure img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}
.link_phones__arrow {
	display: block;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40' fill='%231d4294'><path d='M0 0 L32 20 L0 40 Z'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(90deg);
}
.link_completion {
	text-align: center;
	margin: 32px 0 0;
}
.link_completion img {
	max-width: 467px;
	width: 100%;
	height: auto;
	display: inline-block;
}

@media (min-width: 768px) {
	.link_page {
		gap: 40px;
	}
	.link_phones {
		flex-direction: row;
		gap: 8px;
		margin: 24px 0 32px;
	}
	.link_phones figure {
		max-width: 237px;
	}
	.link_phones__arrow {
		transform: none;
	}
}

/* === Pointたまるバッジ（カード用 SVG） === */
.badge_point {
	display: block;
	width: 62px;
	height: 62px;
	flex-shrink: 0;
}

/* === POINT バッジ（プレミアム会員特典）円 80×80
   トップ MV の楕円バッジ（mv-badge-ellipse.svg）と同じ柔らかい質感 + 青文字 === */
.badge_premium {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	background: no-repeat center / contain url(/image/2026/mv/mv-badge-ellipse.svg);
	color: var(--color_primary);
	font-family: var(--font_family_num);
	line-height: 1;
}
.badge_premium__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-top: 4px;
}
.badge_premium__num {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-top: 2px;
}

/* === SNS カード === */
.sns_card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--color_white);
	border: 1px solid var(--color_card_border);
	border-radius: 12px;
	padding: 16px 20px;
	box-shadow: 0 4px 0 0 var(--color_card_border);
	color: var(--color_text);
	text-decoration: none;
	transition: opacity var(--transition_default);
	max-width: 424px;
	width: 100%;
}
.sns_card:hover,
.sns_card:focus {
	color: var(--color_text);
	opacity: 0.85;
	text-decoration: none;
}
.sns_card__icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sns_card__icon img {
	width: 100%;
	height: auto;
}
.sns_card__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sns_card__title {
	display: block;
	font-size: 22px;
	font-weight: 500;
	color: var(--color_text);
	margin: 0;
	line-height: 1.2;
}
.sns_card__sub {
	display: block;
	font-size: 12px;
	color: var(--color_text);
	margin: 4px 0 0;
}
@media (min-width: 768px) {
	.sns_card__title { font-size: 26px; }
}
/* YouTube バリアント: SVG内にブランド名「YouTube」が含まれているため、
   アイコンとテキストを縦並び、タイトルは SR 用に視覚的に非表示にして重複を回避 */
.sns_card--youtube {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
}
.sns_card--youtube .sns_card__icon {
	width: auto;
	height: 34px;
}
.sns_card--youtube .sns_card__icon img {
	height: 34px;
	width: auto;
	max-width: 120px;
}
.sns_card--youtube .sns_card__title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
@media (min-width: 768px) {
	.sns_card--youtube .sns_card__icon { height: 40px; }
	.sns_card--youtube .sns_card__icon img { height: 40px; max-width: 140px; }
}

/* Instagram バリアント: アイコン + テキストを 1 グループとしてカード中央に配置 */
.sns_card--instagram {
	justify-content: center;
	gap: 12px;
}
.sns_card--instagram .sns_card__icon {
	width: 50px;
	height: 50px;
}
.sns_card--instagram .sns_card__text {
	flex: 0 0 auto;
}
.sns_card--instagram .sns_card__title {
	font-weight: 500;
}

/* === ブランドロゴカード（ポイント交換先）=== */
/* 画像自体が角丸枠付きカード型のため、CSS 側の border/padding/bg は持たせない */
.brand_card {
	display: block;
}
.brand_card img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* === QR インストール案内カード === */
.qr_card {
	display: flex;
	align-items: center;
	gap: 15px;
	background: var(--color_primary_pale);
	border: 1px solid var(--color_primary_light);
	border-radius: 12px;
	padding: 13px;
	max-width: 454px;
	width: 100%;
	box-sizing: border-box;
}
.qr_card__icon {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	background: transparent;
	border-radius: 0;
	padding: 0;
	display: block;
}
.qr_card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.qr_card__text {
	flex: 1;
	min-width: 0;
}
.qr_card__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--color_primary);
	line-height: normal;
	margin: 0 0 8px;
}
.qr_card__sub {
	font-size: 17px;
	font-weight: 700;
	line-height: 26px;
	color: var(--color_primary);
	margin: 0;
}
@media (min-width: 768px) {
	.qr_card__icon { width: 110px; height: 106px; }
}

/* === お知らせカード（トップ用、薄ブルー帯の中の白カード）=== */
.news_card {
	background: var(--color_white);
	border-radius: 24px;
	padding: 24px 20px;
}
@media (min-width: 768px) {
	.news_card { padding: 40px 56px; }
}

/* === 機能アイコン帯（SP: 7個 35×35 gap 11.5 / PC: 11個 65×65 gap 18.76）=== */
.icon_row_band {
	background: var(--color_primary);
	padding: 14.5px 20px;
}
.icon_row_band__list {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 11.5px;
	max-width: 310px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.icon_row_band__list li {
	margin: 0;
	flex-shrink: 0;
	width: 35px;
	height: 35px;
}
.icon_row_band__list img {
	display: block;
	width: 100%;
	height: 100%;
}
/* SP は is_pc_only クラスで 8〜11番目を非表示 */
.icon_row_band__list .is_pc_only { display: none; }
@media (min-width: 768px) {
	.icon_row_band {
		padding: 27.5px 40px;
		position: relative;
		z-index: 1;
	}
	.icon_row_band__list {
		flex-wrap: nowrap;
		gap: 18.76px;
		max-width: 1200px;
		padding-left: 320px;
		box-sizing: border-box;
		justify-content: flex-end;
	}
	.icon_row_band__list li {
		width: 65px;
		height: 65px;
	}
	.icon_row_band__list .is_pc_only { display: list-item; }
}

/* === ページネーション === */
.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	margin: 40px 0;
	padding: 0;
	list-style: none;
}
.pagination__nums {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pagination__nums li {
	margin: 0;
}
.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: var(--color_primary);
	background: var(--gradient_pagination);
	border: 2px solid var(--color_primary);
	border-radius: 29px;
	text-decoration: none;
	transition: opacity var(--transition_default);
}
.pagination a:hover {
	color: var(--color_primary);
	opacity: 0.85;
	text-decoration: none;
}
/* アクティブ */
.pagination .current,
.pagination [aria-current="page"] {
	background: var(--color_primary);
	color: var(--color_white);
	border-color: var(--color_primary);
}
/* 前後ボタン */
.pagination__prev,
.pagination__next {
	min-width: 100px;
	background: var(--color_white);
	padding: 0 16px;
	gap: 8px;
}
@media (min-width: 768px) {
	.pagination__prev,
	.pagination__next {
		min-width: 164px;
	}
}

/* IamCMS pager.tpl 出力（.pager > ul）に新ページネーションを当てる */
.pager {
	margin: 40px 0;
	padding: 0;
	background: none;
	text-align: center;
}
.pager ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pager li {
	margin: 0;
}
.pager a,
.pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: var(--color_primary);
	background: var(--gradient_pagination);
	border: 2px solid var(--color_primary);
	border-radius: 29px;
	text-decoration: none;
	transition: opacity var(--transition_default);
}
.pager a:hover {
	color: var(--color_primary);
	opacity: 0.85;
	text-decoration: none;
}
/* 詳細度を上げて common.css の旧 .pager li.current span を上書き */
.pager ul li.current span {
	background: var(--color_primary);
	color: var(--color_white);
	border-color: var(--color_primary);
}
/* prev/next: pager.tpl の出力 `&lt; 前` `次 &gt;` を消して、
   Figma 仕様の「矢印 SVG + 前へ/次へ」表記に置換（pager.tpl を触らずに対応）*/
.pager ul li.prev a,
.pager ul li.next a {
	min-width: 97px;
	background: var(--color_white);
	font-size: 0;
	gap: 12px;
}
.pager ul li.prev a::before,
.pager ul li.next a::after {
	content: '';
	display: inline-block;
	width: 11px;
	height: 8px;
	background: no-repeat center / contain url(/image/2026/icon/btn-arrow-blue.svg);
	flex-shrink: 0;
}
.pager ul li.prev a::before {
	transform: scaleX(-1);
}
.pager ul li.prev a::after,
.pager ul li.next a::before {
	font-size: 16px;
	font-weight: 700;
	line-height: 30px;
	color: var(--color_primary);
}
.pager ul li.prev a::after { content: '前へ'; }
.pager ul li.next a::before { content: '次へ'; }
.pager ul { gap: 8px; }
@media (min-width: 768px) {
	.pager ul { gap: 8px 16px; }
	.pager .prev a,
	.pager .next a {
		min-width: 164px;
	}
}


/*---------------------------------------------------------------------
	§4 ヘッダー
	Figma: 04_ページ別/下層ページ共通/01_ヘッダー.md
	  PC: 1440×74 / 白背景 / ロゴ124×46 + グロナビ3項目 + 青丸ハンバーガー47×47
	  SP: 375×64 / ロゴ110×42 + 青丸ハンバーガー47×47
---------------------------------------------------------------------*/

/* 既存 #site_header の上書き（旧 padding/border 解除）*/
#site_header {
	border-bottom: none;
	background: var(--color_white);
	padding: 0;
	height: 64px;
}
#site_header .header_inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding: 0 20px;
}

/* ロゴ */
#site_header .site_logo {
	float: none;
	max-width: none;
	margin: 0;
	line-height: 1;
}
#site_header .site_logo a {
	display: block;
	padding: 0;
}
#site_header .site_logo img {
	display: block;
	width: 110px;
	height: auto;
}

/* 右側グループ（グロナビ + ハンバーガー）*/
#site_header .header_links {
	float: none;
	display: flex;
	align-items: center;
	gap: 24px;
}
#site_header .header_links > * {
	float: none;
}

/* グロナビ（PC のみ表示）*/
#site_header .g_navi {
	display: none;
}
#site_header .g_navi > li {
	float: none;
	position: static;
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 500;
}
#site_header .g_navi > li + li {
	margin-left: 30px;
	padding-left: 30px;
	border-left: 1px solid #ccc;
	line-height: 16px;
}
#site_header .g_navi > li > a {
	display: inline-block;
	color: var(--color_text);
	text-decoration: none;
	padding: 0;
	transition: color var(--transition_default);
}
#site_header .g_navi > li > a:hover {
	color: var(--color_primary);
}

/* ハンバーガーボタン（青丸 42×42 radius 14px、Figma仕様）*/
#site_header .btn_site_navi {
	position: static;
	width: 42px;
	height: 42px;
	background: transparent;
}
#site_header .btn_site_navi a {
	display: block;
	position: relative;
	width: 42px;
	height: 42px;
	background: transparent;
	border-radius: 14px;
	transition: opacity var(--transition_default), background var(--transition_default);
}
#site_header .btn_site_navi__icon {
	display: block;
	width: 42px;
	height: 42px;
}
/* active時はSVGを隠してCSS擬似要素の×を表示 */
#site_header .btn_site_navi.active .btn_site_navi__icon {
	display: none;
}
/* SP〜PC共通でactive時のみ×印（後段のCSSで定義済）が表示されるよう、通常時は span を非表示に */
#site_header .btn_site_navi:not(.active) span,
#site_header .btn_site_navi:not(.active) span::before,
#site_header .btn_site_navi:not(.active) span::after {
	display: none;
}
/* active時の青丸背景は span を中心とした疑似要素で表現 */
#site_header .btn_site_navi.active a {
	background: var(--color_primary);
	border-radius: 14px;
}
#site_header .btn_site_navi a:hover {
	background: var(--color_primary);
	opacity: 0.85;
}
#site_header .btn_site_navi a:focus {
	outline: 3px solid var(--color_primary_light);
	outline-offset: 2px;
	background: var(--color_primary);
}

/* ハンバーガー線（階段状 非対称3本線 / Figma実測：上8右寄/中18全幅/下8左寄）*/
#site_header .btn_site_navi span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 2px;
	margin-left: -9px;
	margin-top: -1px;
	background: var(--color_white);
	border-radius: 1px;
}
#site_header .btn_site_navi span::before,
#site_header .btn_site_navi span::after {
	content: "";
	position: absolute;
	height: 2px;
	background: var(--color_white);
	border-radius: 1px;
	transition: transform var(--transition_default), top var(--transition_default), left var(--transition_default), right var(--transition_default), width var(--transition_default);
}
#site_header .btn_site_navi span::before {
	top: -5px;
	right: 0;
	width: 8px;
}
#site_header .btn_site_navi span::after {
	top: 5px;
	left: 0;
	width: 8px;
}

/* メニュー展開時：×印（上下線を中心に集めて回転） */
#site_header .btn_site_navi.active span {
	background: transparent;
}
#site_header .btn_site_navi.active span::before {
	top: 0;
	right: auto;
	left: 0;
	width: 18px;
	transform: rotate(45deg);
}
#site_header .btn_site_navi.active span::after {
	top: 0;
	left: 0;
	width: 18px;
	transform: rotate(-45deg);
}

/* PC（768px以上）*/
@media (min-width: 768px) {
	#site_header {
		height: 74px;
	}
	#site_header .header_inner {
		padding: 0 64px 0 64px;
	}
	#site_header .site_logo img {
		width: 124px;
	}
	#site_header .g_navi {
		display: flex;
		align-items: center;
	}
	#site_header .header_links {
		gap: 30px;
	}
}


/*---------------------------------------------------------------------
	§5 グローバルメニュー展開（.site_navi）
	Figma: 04_ページ別/メニュー/概要.md
	  全画面オーバーレイ、薄ブルー〜ピーチグラデ背景
	  ナビ8項目縦積み、PC ではナビ左に装飾写真2枚
	  既存 .site_navi.active トグル（site.js）を踏襲
---------------------------------------------------------------------*/
.site_navi {
	position: fixed;
	right: 0;
	left: 0;
	top: 64px;
	bottom: 0;
	width: 100%;
	height: auto;
	background: linear-gradient(152deg, #E6F0FA 50.99%, #FCEDE6 83.79%);
	z-index: 20;
	visibility: hidden;
	opacity: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0;
	transition: opacity var(--transition_default), visibility 0s linear var(--transition_default);
}
.site_navi.active {
	right: 0;
	visibility: visible;
	opacity: 1;
	transition: opacity var(--transition_default), visibility 0s;
}
.site_navi .inner {
	background: transparent;
	padding: 32px 20px 60px;
	height: auto;
	max-width: 1440px;
	margin: 0 auto;
}
.site_navi__photos {
	display: none;
}
.site_navi__photos img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 720px;
	margin: 0 auto;
}
.site_navi .links {
	display: block;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}
.site_navi .links li {
	width: auto;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(29, 66, 148, 0.15);
}
.site_navi .links li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--color_text);
	text-decoration: none;
	padding: 16px 8px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	transition: background var(--transition_default), color var(--transition_default);
}
.site_navi .links li a::before {
	content: none;
}
.site_navi__arrow {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--color_primary);
	border-right: 2px solid var(--color_primary);
	transform: rotate(45deg);
	flex-shrink: 0;
}
.site_navi .links li a:hover {
	background: var(--color_primary_pale);
	color: var(--color_primary);
	padding-left: 16px;
}

/* メニュー下部（ロゴ + DLボタン + QR案内）*/
.site_navi__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin-top: 40px;
}
.site_navi__logo { margin: 0; }
.site_navi__logo img {
	display: block;
	width: 120px;
	height: auto;
}
.site_navi__store {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site_navi__store li { margin: 0; }
.site_navi__store img {
	display: block;
	height: 40px;
	width: auto;
}
.site_navi__qr { display: none; }

/* PC（768px以上）*/
@media (min-width: 768px) {
	.site_navi {
		top: 74px;
	}
	.site_navi .inner {
		padding: 0 0 60px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"photos links"
			"photos footer";
		column-gap: 60px;
		row-gap: 40px;
		align-items: start;
	}
	.site_navi__photos {
		grid-area: photos;
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.site_navi__photos img {
		max-width: 100%;
	}
	.site_navi .links {
		display: block;
		flex-wrap: initial;
		grid-area: links;
		margin: 0;
	}
	.site_navi .links li {
		width: auto;
		padding-right: 0;
	}
	.site_navi .links li a {
		font-size: 18px;
		padding: 20px 16px;
	}
	.site_navi__footer {
		grid-area: footer;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		margin-top: 0;
		padding-right: 100px;
	}
	.site_navi .links {
		padding-right: 100px;
	}
	.site_navi__logo img { width: 280px; }
	.site_navi__store img { height: 63px; }
	.site_navi__qr { display: flex; }
}


/*---------------------------------------------------------------------
	§6 ページタイトル帯（PC_h1 帯）
	Figma: 04_ページ別/下層ページ共通/02_ページタイトル_パンくず.md
	  PC: 1440×198 / 内側 1240 / grad 267.56deg / padding 56 0
	  SP: 375×176 / 内側 padding 20 / grad 249.077deg / padding 24 0 62 / h1 24px
---------------------------------------------------------------------*/
.pagehead {
	background: var(--gradient_pagehead);
	padding: 24px 0 62px;
	margin-bottom: 32px;
}
.pagehead__inner {
	max-width: var(--container_max);
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: content-box;
}

/* パンくず（topic_path.tpl の出力 .topic_path_top を pagehead 内で新デザイン化）*/
.pagehead .topic_path_top {
	background: none;
	padding: 0;
	max-width: none;
	margin: 0 0 24px;
	font-size: 12px;
	color: var(--color_text);
	line-height: 1.5;
}
.pagehead .topic_path_top > ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	max-width: none;
}
.pagehead .topic_path_top > ol > li {
	display: inline-flex;
	align-items: center;
	margin: 0;
}
.pagehead .topic_path_top > ol > li + li::before {
	content: "／";
	margin: 0 8px;
	color: var(--color_text);
}
.pagehead .topic_path_top > ol > li a {
	color: var(--color_text);
	text-decoration: none;
	transition: color var(--transition_default);
}
.pagehead .topic_path_top > ol > li a:hover {
	color: var(--color_primary);
	text-decoration: underline;
}
.pagehead .topic_path_top > ol > li[aria-current="page"],
.pagehead .topic_path_top > ol > li:last-child {
	color: var(--color_primary);
	font-weight: 500;
}
.pagehead .topic_path_top > ol > li[aria-current="page"] a,
.pagehead .topic_path_top > ol > li:last-child a {
	color: var(--color_primary);
}

.pagehead__title {
	font-size: 24px;
	font-weight: 700;
	color: var(--color_primary);
	line-height: 1.583;
	margin: 0;
}
@media (min-width: 768px) {
	.pagehead {
		background: var(--gradient_pagehead);
		padding: 56px 0;
		margin-bottom: 60px;
	}
	.pagehead__inner {
		padding: 0 120px;
	}
	.pagehead__title {
		font-size: 40px;
	}
}


/*---------------------------------------------------------------------
	§7 サイドバー（IamCMS widget: side_menu_topics.tpl 出力 .list_side_menu）
	Figma: 04_ページ別/下層ページ共通/06_サイドバー.md
	IR: メモ/Figma/refactored/257-80141-topics-list-pc.md §4 SidebarBlock
	  - head 帯 335×48 #e6f0fa（上角丸 12px のみ）
	  - body 枠 white border 2px #e6f0fa（下角丸 12px のみ）
	  - 項目 Regular 14/22 #333 / 左 padding 24 + 楕円 10×10 #F6C7AD + gap 8
---------------------------------------------------------------------*/
.list_side_menu {
	width: 100%;
	margin: 0 0 16px;
	background: var(--color_white);
	border: 2px solid var(--color_primary_pale);
	border-radius: 12px;
}
.list_side_menu:last-child {
	margin-bottom: 0;
}
.list_side_menu > .ttl {
	margin: 0;
	padding: 13px 42px;
	font-size: 18px;
	font-weight: 700;
	line-height: 22px;
	color: var(--color_primary);
	background: var(--color_primary_pale);
	border-radius: 10px 10px 0 0;
}
.list_side_menu > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.list_side_menu > ul > li {
	margin: 0;
}
.list_side_menu > ul > li + li {
	border-top: 1px solid var(--color_form_border);
}
.list_side_menu > ul > li > a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 8px 24px;
	background: none;
	color: var(--color_text);
	text-decoration: none;
	font-size: 14px;
	line-height: 22px;
	transition: color var(--transition_default);
}
.list_side_menu > ul > li > a::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--color_accent_peach);
	border-radius: 50%;
	flex-shrink: 0;
}
.list_side_menu > ul > li > a:hover {
	color: var(--color_primary);
	text-decoration: underline;
}
.list_side_menu > ul > li[aria-current="page"] > a,
.list_side_menu > ul > li > a.current {
	color: var(--color_primary);
	font-weight: 500;
}
/* widget 出力 `<strong>2025</strong>年（1）` を Figma 通り全文 Regular に */
.list_side_menu > ul > li > a strong {
	font-weight: inherit;
}
/* 最近の記事: 楕円 + .date を 1 行目、.title を 2 行目（楕円分インデント） */
.list_side_menu > ul > li > a > .date {
	font-family: var(--font_family_num);
	font-weight: 500;
}
.list_side_menu > ul > li > a > .title {
	flex: 1 1 100%;
	padding-left: 18px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* === side_menu widget 構造（widgets/body/side_menu.tpl 出力 + 固定HTML共通）=== */
.side_menu {
	width: 100%;
}
.side_menu .inner {
	margin: 0;
	padding: 0;
	list-style: none;
}
.side_menu .inner > li {
	margin: 0;
	border-bottom: 1px solid var(--color_form_border);
}
.side_menu .inner > li:last-child {
	border-bottom: 0;
}
.side_menu .inner > li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 4px;
	background: none;
	color: var(--color_text);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.6;
	transition: color var(--transition_default);
}
.side_menu .inner > li > a::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--color_accent_peach);
	border-radius: 50%;
	flex-shrink: 0;
}
/* Figma パターン B では外部リンクにも楕円を表示するため noIcon の非表示を解除 */
.side_menu .inner > li > a.noIcon::before {
	display: block;
}
.side_menu .inner > li > a:hover {
	color: var(--color_primary);
	text-decoration: underline;
}
.side_menu .inner > li[aria-current="page"] > a,
.side_menu .inner > li > a.selected,
.side_menu .inner > li > a strong {
	color: var(--color_primary);
	font-weight: 500;
}
.side_menu .inner > li > a strong { font-weight: 700; }
/* common.css の selected 状態 arrow_03.png 背景を打ち消す */
.side_menu .inner > li > a:hover,
.side_menu .inner > li > a.selected {
	background-image: none;
}
/* ネスト（level_2 / level_3 / level_4） */
.side_menu .level_2,
.side_menu .level_3,
.side_menu .level_4 {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color_form_border);
}
.side_menu .level_2 li,
.side_menu .level_3 li,
.side_menu .level_4 li {
	margin: 0;
	border-bottom: 1px solid var(--color_form_border);
}
.side_menu .level_2 li:last-child,
.side_menu .level_3 li:last-child,
.side_menu .level_4 li:last-child {
	border-bottom: 0;
}
.side_menu .level_2 a,
.side_menu .level_3 a,
.side_menu .level_4 a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 4px;
	color: var(--color_text);
	text-decoration: none;
	font-size: 12px;
	line-height: 1.6;
	transition: color var(--transition_default);
}
.side_menu .level_2 > li > a::before,
.side_menu .level_3 > li > a::before,
.side_menu .level_4 > li > a::before {
	content: "";
	position: static;
	width: 8px;
	height: 2px;
	margin-top: 0;
	background: var(--color_accent_peach);
	flex-shrink: 0;
}
.side_menu .level_2 a:hover,
.side_menu .level_3 a:hover,
.side_menu .level_4 a:hover {
	color: var(--color_primary);
	text-decoration: underline;
}
.side_menu .level_2 a.selected,
.side_menu .level_3 a.selected,
.side_menu .level_4 a.selected {
	color: var(--color_primary);
	font-weight: 500;
}
.side_menu .level_2 > li > a.selected::before,
.side_menu .level_3 > li > a.selected::before,
.side_menu .level_4 > li > a.selected::before {
	background: var(--color_primary);
}


/*---------------------------------------------------------------------
	§8 フッター
	Figma: 04_ページ別/下層ページ共通/08_フッター.md
	  PC: 1440×641 / 上から ロゴ+DL帯(273) → サイトリンク帯(27,padding 120) → 沖縄セルラー帯(158, bg #1d4294)
	  SP: 375×918 / 縦積み
---------------------------------------------------------------------*/

#site_footer {
	position: relative;
	background: var(--color_white);
	padding: 0;
	margin: 140px 0 0;
	border-top: 0;
	border-bottom: 0;
	padding-bottom: 0;
}

/* === ロゴ + DL ボタン + QR 帯（SP base / PC override）=== */
#site_footer .footer_main {
	padding: 40px 20px 24px;
}
#site_footer .footer_main_inner {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
#site_footer .footer_logo {
	margin: 0;
	line-height: 1;
}
#site_footer .footer_logo img {
	display: block;
	width: 216px;
	height: auto;
}
#site_footer .footer_dl {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}
#site_footer .footer_dl .store_link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#site_footer .footer_dl .store_link li {
	margin: 0;
}
#site_footer .footer_dl .store_link img {
	display: block;
	width: 220px;
	min-width: 220px;
	max-width: 220px;
	height: 63px;
	flex-shrink: 0;
}
/* QR カードは SP では非表示（PC のみ表示） */
#site_footer .footer_qr {
	display: none;
}

/* === サイトリンク帯 === */
#site_footer .footer_links {
	padding: 16px 20px;
}
#site_footer .footer_links ul {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	padding: 0;
	list-style: none;
}
#site_footer .footer_links li {
	margin: 0;
}
/* SP: 行 1 (FAQ/企業向け/利用規約) は inline、行 2-4 は full width で 3-1-1-1 wrap */
#site_footer .footer_links li:nth-child(n+4) {
	flex: 0 0 100%;
}
#site_footer .footer_links a {
	display: inline-block;
	color: var(--color_text);
	text-decoration: none;
	font-size: 16px;
	line-height: 1.6;
	padding-left: 18px;
	position: relative;
	transition: color var(--transition_default);
}
#site_footer .footer_links a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -4px;
	width: 13px;
	height: 8px;
	background: no-repeat center / contain url(/image/2026/icon/right-arrow.svg);
}
#site_footer .footer_links a:hover {
	color: #1D4294;
	text-decoration: none;
}

/* === 沖縄セルラー帯 ===
   Figma SP (288:1775): OCT_logo → ─ → 社名 + 住所 → ─ → リンク 2 → Copyright
   HTML 構造はそのままで、SP では grid-template-areas + display: contents で順序変更 */
#site_footer .footer_cellular {
	background: var(--color_primary);
	color: var(--color_white);
	padding: 24px 20px 16px;
}
#site_footer .footer_cellular_inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-areas:
		"logo"
		"address"
		"links"
		"copyright";
	row-gap: 12px;
	text-align: center;
}
#site_footer .footer_cellular_logo {
	grid-area: logo;
	width: 80%;
	max-width: 303px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}
#site_footer .footer_cellular_logo a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
#site_footer .footer_cellular_logo img {
	display: block;
	width: 192px;
	height: 68px;
	object-fit: contain;
}
/* SP: info は contents で消し、子の address / copyright を grid item に */
#site_footer .footer_cellular_info {
	display: contents;
}
#site_footer .footer_cellular_info .address {
	grid-area: address;
	width: 80%;
	max-width: 303px;
	margin: 0 auto;
	padding-top: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
	font-size: 14px;
	line-height: 22.4px;
}
#site_footer .footer_cellular_info .address strong {
	display: block;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 2px;
}
#site_footer .footer_cellular_info .address__spacer {
	display: none;
}
#site_footer .footer_cellular_info .copyright {
	grid-area: copyright;
	margin: 0;
	font-size: 8px;
	line-height: 16px;
}
#site_footer .footer_cellular_links {
	grid-area: links;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 12px 0 0;
	border-top: 1px solid rgba(255,255,255,0.5);
	display: flex;
	flex-direction: column;
	gap: 4px;
	list-style: none;
	font-size: 12px;
	line-height: 25.6px;
	text-align: left;
}
#site_footer .footer_cellular_links li {
	margin: 0;
}
#site_footer .footer_cellular_links a {
	display: inline-block;
	color: var(--color_white);
	text-decoration: none;
	padding-left: 18px;
	position: relative;
	transition: opacity var(--transition_default);
	white-space: nowrap;
}
#site_footer .footer_cellular_links a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -4px;
	width: 13px;
	height: 8px;
	background-color: var(--color_white);
	-webkit-mask: no-repeat center / contain url(/image/2026/icon/right-arrow.svg);
	mask: no-repeat center / contain url(/image/2026/icon/right-arrow.svg);
}
#site_footer .footer_cellular_links a:hover {
	opacity: 0.7;
	color: var(--color_white);
	text-decoration: underline;
}

/* PC（768px以上）— Figma 288:1065 仕様 */
@media (min-width: 768px) {
	#site_footer .footer_main {
		padding: 80px 40px 40px;
	}
	#site_footer .footer_main_inner {
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}
	#site_footer .footer_logo img {
		width: 270px;
	}
	#site_footer .footer_dl {
		width: auto;
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}
	#site_footer .footer_dl .store_link {
		flex-direction: column;
		gap: 8px;
	}
	#site_footer .footer_qr {
		display: flex;
		align-items: center;
		gap: 16px;
		width: 454px;
		max-width: 454px;
		height: 132px;
		background: #e6f0fa;
		border: 3px solid #a6caec;
		border-radius: 8px;
		padding: 13px 16px;
		box-sizing: border-box;
	}
	#site_footer .footer_qr_icon {
		margin: 0;
		flex-shrink: 0;
	}
	#site_footer .footer_qr_icon img {
		display: block;
		width: 106px;
		height: 106px;
	}
	#site_footer .footer_qr_text {
		flex: 1;
		min-width: 0;
	}
	#site_footer .footer_qr_text .title {
		font-size: 20px;
		font-weight: 700;
		color: var(--color_primary);
		margin: 0 0 6px;
		line-height: 1.4;
	}
	#site_footer .footer_qr_text p {
		font-size: 17px;
		font-weight: 700;
		color: var(--color_primary);
		margin: 0;
		line-height: 26px;
	}
	#site_footer .footer_links {
		padding: 0 40px 32px;
	}
	#site_footer .footer_links ul {
		flex-wrap: nowrap;
		justify-content: center;
		gap: 24px;
	}
	/* PC では SP の 100% basis をリセット（横並び 6 項目） */
	#site_footer .footer_links li:nth-child(n+4) {
		flex: 0 0 auto;
	}
	#site_footer .footer_cellular {
		padding: 40px 100px;
		min-height: 159px;
		display: flex;
		align-items: center;
	}
	#site_footer .footer_cellular_inner {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text-align: left;
		gap: 0;
		row-gap: 0;
		grid-template-areas: none;
		width: 100%;
		max-width: 1240px;
		padding: 0 20px;
	}
	/* PC: separator 線リセット（縦罫線で表現） */
	#site_footer .footer_cellular_logo {
		width: 225.16px;
		max-width: none;
		margin: 0;
		padding-right: 20px;
		justify-content: flex-start;
	}
	#site_footer .footer_cellular_logo a {
		flex-direction: column;
		align-items: flex-start;
	}
	#site_footer .footer_cellular_info {
		display: block;
		border-left: 1px solid var(--color_white);
		padding: 15px 20px 10px 21px;
		width: auto;
		max-width: none;
		font-size: 16px;
		line-height: 25.6px;
		white-space: nowrap;
	}
	#site_footer .footer_cellular_info .address {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
		border-top: 0;
		font-size: 16px;
		line-height: 25.6px;
		white-space: nowrap;
	}
	#site_footer .footer_cellular_info .copyright {
		white-space: nowrap;
	}
	#site_footer .footer_cellular_info .address strong {
		display: inline;
		font-size: 16px;
		line-height: 25.6px;
		margin: 0;
	}
	#site_footer .footer_cellular_info .address__spacer {
		display: inline;
	}
	#site_footer .footer_cellular_info .copyright {
		font-size: 14px;
		line-height: 22.4px;
		margin: 0;
	}
	#site_footer .footer_cellular_links {
		width: 437.83px;
		max-width: none;
		margin: 0;
		padding: 10px 0 11px 21px;
		border-top: 0;
		border-left: 1px solid var(--color_white);
		font-size: 16px;
		line-height: 25.6px;
		gap: 4px;
		text-align: left;
	}
}


/*---------------------------------------------------------------------
	§9 TOPへ戻るボタン
	Figma: 04_ページ別/下層ページ共通/09_TOPへ戻るボタン.md
	  60×60 / #1d4294 / 右下固定 / クリックでスムーススクロール
	  TODO: 「1」の意味は要確認（確認事項.md #2-2）→ 仮で ↑ 矢印で実装
---------------------------------------------------------------------*/
/* 旧 #page_scroll_navi と同じ「.fixed クラスで position 切替」方式
   - base: position: absolute で footer 直上に配置 → フッター可視領域で停止
   - .fixed: position: fixed でビューポート右下 → スクロール中はここ */
.back_to_top {
	position: absolute;
	z-index: 10;
	right: 20px;
	top: -80px;
	width: 60px;
	height: 60px;
	background: transparent;
	border-radius: 0;
	border: none;
	cursor: pointer;
	padding: 0;
	display: none;
	text-decoration: none;
	transition: opacity var(--transition_default);
}
.back_to_top img {
	display: block;
	width: 100%;
	height: 100%;
}
.back_to_top.fixed {
	position: fixed;
	top: auto;
	bottom: 20px;
}
.back_to_top:hover {
	opacity: 0.85;
}
@media (min-width: 768px) {
	.back_to_top {
		right: 40px;
		top: -100px;
	}
	.back_to_top.fixed {
		bottom: 40px;
	}
}


/*---------------------------------------------------------------------
	§10 フォーム（お問い合わせ専用）
	Figma: 04_ページ別/お問い合わせ/概要.md
	  外枠 #fef9f7 radius 24 / 入力欄 white border 2px #e9edf5 radius 8 / 高さ 48
	  ステップインジケーター 3段階
---------------------------------------------------------------------*/

/* === 導入バナー === */
.contact_intro {
	margin: 0 0 24px;
}
.contact_intro__head {
	font-size: 18px;
	font-weight: 700;
	color: var(--color_primary);
	background: var(--color_accent_peach_pale);
	border-radius: 12px;
	padding: 12px 20px;
	margin: 0 0 16px;
	line-height: 1.4;
}
.contact_intro p {
	font-size: 14px;
	font-weight: 700;
	line-height: 30px;
	color: #333;
	margin: 0 0 8px;
}
@media (min-width: 768px) {
	.contact_intro p { font-size: 16px; white-space: nowrap; }
}

/* === ステップインジケーター === */
.steps {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin: 24px 0;
	padding: 0;
	list-style: none;
	position: relative;
}
.steps::before {
	content: "";
	position: absolute;
	top: 19px;
	left: 14%;
	right: 14%;
	height: 1px;
	background: var(--color_form_border);
	z-index: 0;
}
.steps li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 1 1 0;
	font-size: 14px;
	color: var(--color_text);
	position: relative;
	z-index: 1;
}
.steps li > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color_white);
	border: 2px solid var(--color_primary);
	color: var(--color_primary);
	font-family: var(--font_family_num);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}
.steps li.is_active {
	font-weight: 700;
	color: var(--color_primary);
}
.steps li.is_active > span {
	background: var(--color_primary);
	color: var(--color_white);
}

/* === フォーム外枠 === */
.contact_form {
	background: var(--color_form_bg);
	border-radius: 24px;
	padding: 24px 20px;
	margin: 24px 0;
}
.contact_form__row {
	margin: 0 0 20px;
}
.contact_form__row:last-child {
	margin-bottom: 0;
}
.contact_form__label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 500;
	color: var(--color_text);
	margin: 0 0 8px;
	line-height: 1.4;
}
.contact_form input[type="text"],
.contact_form input[type="email"],
.contact_form input[type="tel"],
.contact_form input[type="password"],
.contact_form select,
.contact_form textarea {
	width: 100%;
	padding: 12px 16px;
	font-size: 16px;
	font-family: var(--font_family);
	color: var(--color_text);
	background: var(--color_white);
	border: 2px solid var(--color_form_border);
	border-radius: 8px;
	box-sizing: border-box;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--transition_default);
}
.contact_form input[type="text"]:focus,
.contact_form input[type="email"]:focus,
.contact_form input[type="tel"]:focus,
.contact_form input[type="password"]:focus,
.contact_form select:focus,
.contact_form textarea:focus {
	border-color: var(--color_primary);
}
.contact_form input::placeholder,
.contact_form textarea::placeholder {
	color: var(--color_placeholder);
	font-weight: 500;
	font-size: 14px;
}
.contact_form input[type="text"],
.contact_form input[type="email"],
.contact_form input[type="tel"],
.contact_form input[type="password"],
.contact_form select {
	height: 48px;
}
.contact_form textarea {
	min-height: 144px;
	resize: vertical;
}

/* === 個人情報取扱いボックス === */
.contact_privacy {
	background: var(--color_white);
	border: 3px solid var(--color_form_warn);
	border-radius: 8px;
	padding: 20px;
	margin: 24px 0;
}
.contact_privacy__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--color_form_warn);
	margin: 0 0 8px;
}
.contact_privacy p {
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
}

/* === チェックボックス === */
.contact_checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--color_text);
	cursor: pointer;
	margin: 16px 0;
}
.contact_checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid var(--color_placeholder);
	border-radius: 3px;
	accent-color: var(--color_primary);
	flex-shrink: 0;
}

/* === 送信ボタン中央寄せ（SP は送信→戻るの縦積み / PC は横並び）=== */
.contact_submit {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 16px;
	margin: 32px 0 0;
}
.contact_submit > * {
	flex-shrink: 0;
}
@media (min-width: 768px) {
	.contact_submit {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* === 確認画面: 入力内容表示 === */
.contact_confirm {
	background: var(--color_form_bg);
	border-radius: 24px;
	padding: 24px 20px;
	margin: 24px 0;
}
.contact_confirm dl {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px 16px;
	margin: 0 0 20px;
}
.contact_confirm dt {
	font-weight: 700;
	color: var(--color_primary);
	font-size: 14px;
}
.contact_confirm dd {
	margin: 0 0 8px;
	padding: 12px 16px;
	background: var(--color_white);
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.6;
	word-break: break-word;
}
@media (min-width: 768px) {
	.contact_intro__head { font-size: 20px; padding: 16px 24px; }
	.contact_form { padding: 40px 56px; }
	.contact_confirm { padding: 40px 56px; }
	.contact_confirm dl { grid-template-columns: 200px 1fr; align-items: start; }
	.contact_confirm dt { padding-top: 14px; }
}

/* === 完了画面のメッセージバナー === */
.complete_banner {
	font-size: 20px;
	font-weight: 700;
	color: var(--color_primary);
	background: var(--color_accent_peach_pale);
	border-radius: 12px;
	padding: 16px 20px;
	margin: 24px 0;
	line-height: 1.4;
}
@media (min-width: 768px) {
	.complete_banner { font-size: 24px; padding: 20px 24px; }
}


/*---------------------------------------------------------------------
	§11 トップページ専用
	※ area_01〜05 相当のセクション固有レイアウトは top.css 側に書く
---------------------------------------------------------------------*/

/* （Phase 1.5 で追加）*/


/*---------------------------------------------------------------------
	§12 下層ページ別固有
---------------------------------------------------------------------*/

/* === content1 内の旧スタイル上書き（既存 common.css の .content1 h2-h5 が
   黄色帯・赤枠など旧デザイン。新 heading_h2 風に上書き）=== */
.l_page__main .content1 h2,
.l_page__main .content1 .lead_01 {
	font-size: 22px;
	font-weight: 700;
	color: var(--color_primary);
	background: var(--color_accent_peach_pale);
	border: none;
	border-radius: 12px;
	padding: 12px 56px 12px 20px;
	margin: 32px 0 16px;
	min-height: 0;
	line-height: 1.4;
}
.l_page__main .content1 h3,
.l_page__main .content1 .lead_02 {
	font-size: 20px;
	font-weight: 700;
	color: var(--color_primary);
	padding: 8px 0 8px 16px;
	margin: 28px 0 14px;
	position: relative;
	border-bottom: 2px solid var(--color_primary);
	line-height: 1.4;
}
.l_page__main .content1 h3::before,
.l_page__main .content1 .lead_02::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: auto;
	top: 50%;
	transform: translateY(-30%);
	width: 4px;
	height: 60%;
	background: var(--color_primary_light);
	border-radius: 12px;
}
.l_page__main .content1 h3::after,
.l_page__main .content1 .lead_02::after {
	display: none;
}
.l_page__main .content1 h4,
.l_page__main .content1 .lead_03 {
	font-size: 18px;
	font-weight: 700;
	color: var(--color_primary);
	background: var(--color_primary_light);
	border-radius: 12px;
	border: none;
	padding: 8px 16px;
	margin: 24px 0 12px;
	line-height: 1.4;
}
.l_page__main .content1 h5,
.l_page__main .content1 .lead_04 {
	font-size: 16px;
	font-weight: 700;
	color: var(--color_primary);
	padding: 6px 0 6px 12px;
	margin: 20px 0 10px;
	position: relative;
	border-bottom: 1px solid var(--color_primary);
	line-height: 1.4;
}
.l_page__main .content1 h5::before,
.l_page__main .content1 .lead_04::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-30%);
	width: 3px;
	height: 50%;
	background: var(--color_primary_light);
	border-radius: 12px;
}

@media (min-width: 768px) {
	.l_page__main .content1 h2,
	.l_page__main .content1 .lead_01 { font-size: 28px; padding: 13px 56px 13px 24px; }
	.l_page__main .content1 h3,
	.l_page__main .content1 .lead_02 { font-size: 24px; padding: 10px 0 10px 16px; }
	.l_page__main .content1 h4,
	.l_page__main .content1 .lead_03 { font-size: 20px; }
	.l_page__main .content1 h5,
	.l_page__main .content1 .lead_04 { font-size: 18px; }
}

/* content1 内のリンクも新カラーに */
.l_page__main .content1 a {
	color: var(--color_link);
}
.l_page__main .content1 a:hover {
	color: var(--color_primary);
}

/* === 規約系ページの旧フォントサイズユーティリティ上書き（SP: 14/22 / PC: 16/24）=== */
.l_page__main .content1 .fsr22,
.l_page__main .content1 .fsr20,
.l_page__main .content1 .fsr18 {
	font-size: 14px;
	line-height: 1.571;
	font-weight: 400;
	margin: 0 0 22px;
}
.l_page__main .content1 .fsr22 strong,
.l_page__main .content1 .fsr20 strong,
.l_page__main .content1 .fsr18 strong {
	font-weight: 700;
}
@media (min-width: 768px) {
	.l_page__main .content1 .fsr22,
	.l_page__main .content1 .fsr20,
	.l_page__main .content1 .fsr18 {
		font-size: 16px;
		line-height: 1.5;
		margin: 0 0 24px;
	}
}

/* === 規約系ページ：SP 条文間/項目間 32px / PC 40px（R1 #5-2 / #5-3）=== */
.l_page__main .content1 h2,
.l_page__main .content1 .lead_01 {
	margin-top: 32px;
}
.l_page__main .content1 h3,
.l_page__main .content1 .lead_02 {
	margin-top: 32px;
}
.l_page__main .content1 h2:first-child,
.l_page__main .content1 h3:first-child {
	margin-top: 0;
}
@media (min-width: 768px) {
	.l_page__main .content1 h2,
	.l_page__main .content1 .lead_01,
	.l_page__main .content1 h3,
	.l_page__main .content1 .lead_02 {
		margin-top: 40px;
	}
}

/* === content1 内の本文・リスト基礎タイポ（SP: 14/22 / PC: 16/24）=== */
.l_page__main .content1 p {
	font-size: 14px;
	line-height: 1.5714;
	margin: 0 0 22px;
	color: var(--color_text);
}
.l_page__main .content1 ul,
.l_page__main .content1 ol {
	margin: 0 0 22px;
	padding-left: 24px;
}
.l_page__main .content1 ul { list-style: disc; }
.l_page__main .content1 ol,
.l_page__main .content1 ol.list_decimal {
	list-style: decimal;
}
.l_page__main .content1 li {
	font-size: 14px;
	line-height: 1.5714;
	color: var(--color_text);
	margin-bottom: 8px;
}
@media (min-width: 768px) {
	.l_page__main .content1 p {
		font-size: 16px;
		line-height: 1.5;
		margin: 0 0 24px;
	}
	.l_page__main .content1 ul,
	.l_page__main .content1 ol {
		margin: 0 0 24px;
	}
	.l_page__main .content1 li {
		font-size: 16px;
		line-height: 1.5;
	}
}
/* base.css の .list_disc li::before（オレンジ点）と list-style: disc（黒丸）が二重表示されるため、::before を無効化
   ネイティブマーカーの色を #1D4294 に変更し、base.css の li 用余白（padding-left: 20px）を打ち消してテキストを近づける */
.l_page__main .content1 ul.list_disc li::before { content: none; }
.l_page__main .content1 ul.list_disc li { padding-left: 0; }
.l_page__main .content1 ul.list_disc > li::marker { color: #1D4294; }

/* === 404 ページ === */
.error404 {
	text-align: center;
	padding: 24px 0 32px;
}
.error404__message {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--color_text);
	text-align: left;
}
.error404__message p {
	margin: 0 0 12px;
}
.error404__visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 16px 0;
}
.error404__number {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.error404__num {
	font-family: var(--font_family_num);
	font-size: 80px;
	font-weight: 700;
	color: var(--color_primary);
	line-height: 1;
}
.error404__label {
	font-family: var(--font_family_num);
	font-size: 14px;
	color: var(--color_primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.error404__illust {
	max-width: 200px;
}
.error404__illust img {
	width: 100%;
	height: auto;
}
.error404__back {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}
@media (min-width: 768px) {
	.error404 { padding: 32px 0 48px; }
	.error404__message { text-align: center; font-size: 16px; margin-bottom: 16px; }
	.error404__visual { flex-direction: row; gap: 32px; margin: 16px 0; }
	.error404__num { font-size: 120px; }
	.error404__label { font-size: 18px; }
	.error404__back { margin-top: 48px; }
	.error404__illust { max-width: 220px; }
}


/*---------------------------------------------------------------------
	§13 ホバー・トランジション統一
---------------------------------------------------------------------*/

/* （必要に応じて追加）*/


/*---------------------------------------------------------------------
	§14 タブレット最適化（768-1199.98px）
	---------------------------------------------------------------------
	対象: Header navi → hamburger 拡張 / Footer / icon_row_band
	既存 PC ルール（min-width: 768px）には手を加えず、後勝ちで上書き。
	1200px 以上では下記 query が無効化されるので PC は完全に現行通り。
	仕様書: メモ/Figma/04_ページ別/トップ/00_タブレット仕様.md §3
---------------------------------------------------------------------*/

@media (min-width: 768px) and (max-width: 991.98px) {
	/* === icon_row_band TB-narrow: PC overlap (padding-left 320px) を解除 ===
	   TB-narrow では MV が SP-grid の上下構成で iPhone が小さいため overlap 不要。
	   icons を中央寄せ + wrap 許可。 */
	.icon_row_band {
		padding: 24px clamp(20px, 5vw, 40px);
		position: static;
		z-index: auto;
	}
	.icon_row_band__list {
		padding-left: 0;
		justify-content: center;
		flex-wrap: wrap;
		max-width: 100%;
		gap: clamp(12px, 2vw, 18.76px);
	}
}

@media (min-width: 992px) and (max-width: 1319.98px) {
	/* === icon_row_band TB-wide: PC と同じ overlap 配置を vw 等比スケール ===
	   MV iPhone が下にはみ出してくるので、icons を右にずらして被らないようにする。
	   PC ルール (padding-left: 320px / max-width: 1200px / gap: 18.76 / flex-end / nowrap) を踏襲。 */
	.icon_row_band {
		padding: calc(27.5 * 100vw / 1332) calc(40 * 100vw / 1332);
	}
	.icon_row_band__list {
		flex-wrap: nowrap;
		gap: calc(18.76 * 100vw / 1332);
		max-width: calc(1200 * 100vw / 1332);
		padding-left: calc(320 * 100vw / 1332);
		justify-content: flex-end;
	}
	.icon_row_band__list li {
		width: calc(65 * 100vw / 1332);
		height: calc(65 * 100vw / 1332);
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	/* === Header: navi 非表示、ハンバーガー (btn_site_navi) のみ ===
	   TB-narrow のみ。992+ では PC ナビ表示に戻す。 */
	#site_header .g_navi {
		display: none;
	}

	/* === TB-narrow only: icon_row の icons 7 個（SP 同等） === */
	.icon_row_band__list .is_pc_only {
		display: none;
	}

	/* === Footer 上段: QR 非表示、padding 調整 ===
	   TB-wide (992+) は PC レイアウトに戻す方針のため、Footer は TB-narrow のみ縦組。 */
	#site_footer .footer_qr {
		display: none;
	}
	#site_footer .footer_main {
		padding: 56px clamp(24px, 5vw, 40px) 32px;
	}
	#site_footer .footer_main_inner {
		gap: 32px;
	}

	/* === Footer site_links: 2x4 grid === */
	#site_footer .footer_links {
		padding: 16px clamp(20px, 5vw, 40px) 32px;
	}
	#site_footer .footer_links ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 24px;
		flex-wrap: initial;
		justify-content: initial;
	}
	/* PC で li:nth-child(n+4) に flex: 0 0 auto を当てているので grid 内では問題ないが念のため明示 */
	#site_footer .footer_links li:nth-child(n+4) {
		flex: 0 0 auto;
	}

	/* === Footer 青帯: 縦3段 (logo / address / links / copyright) + separator === */
	#site_footer .footer_cellular {
		padding: 24px clamp(20px, 5vw, 48px) 16px;
		min-height: 0;
		display: block;
		align-items: initial;
	}
	#site_footer .footer_cellular_inner {
		display: grid;
		grid-template-areas:
			"logo"
			"address"
			"links"
			"copyright";
		grid-template-columns: none;
		flex-direction: initial;
		align-items: initial;
		justify-content: initial;
		text-align: center;
		row-gap: 12px;
		column-gap: 0;
		padding: 0;
		width: 100%;
		max-width: 100%;
	}
	#site_footer .footer_cellular_logo {
		grid-area: logo;
		width: 80%;
		max-width: 303px;
		margin: 0 auto;
		padding-right: 0;
		justify-content: center;
	}
	#site_footer .footer_cellular_logo a {
		flex-direction: column;
		align-items: center;
	}
	/* SP と同じく info を contents で消し、子要素を grid item に */
	#site_footer .footer_cellular_info {
		display: contents;
		border-left: 0;
		padding: 0;
		width: auto;
		max-width: none;
	}
	#site_footer .footer_cellular_info .address {
		grid-area: address;
		width: 80%;
		max-width: 480px;
		margin: 0 auto;
		padding: 12px 0 0;
		border-top: 1px solid rgba(255,255,255,0.5);
		border-left: 0;
		font-size: 14px;
		line-height: 22.4px;
		text-align: center;
	}
	#site_footer .footer_cellular_info .address strong {
		display: block;
		font-size: 16px;
		line-height: 24px;
		margin-bottom: 2px;
	}
	#site_footer .footer_cellular_info .address__spacer {
		display: none;
	}
	#site_footer .footer_cellular_info .copyright {
		grid-area: copyright;
		margin: 0;
		font-size: 12px;
		line-height: 20px;
		text-align: center;
	}
	#site_footer .footer_cellular_links {
		grid-area: links;
		width: 80%;
		max-width: 480px;
		margin: 0 auto;
		padding: 12px 0 0;
		border-top: 1px solid rgba(255,255,255,0.5);
		border-left: 0;
		font-size: 14px;
		line-height: 22.4px;
		text-align: center;
	}
	#site_footer .footer_cellular_links li {
		margin: 0 auto;
	}
}

/*---------------------------------------------------------------------
	§13 サイトマップ（/sitemap/）
	旧 common.css の .list_sitemap オレンジ系スタイルを打ち消し、
	設計システム（primary #1d4294 / peach accent / sidemenu パターン）に統一
---------------------------------------------------------------------*/
.l_page__main .content1 .list_sitemap a {
	color: var(--color_text);
	text-decoration: none;
	transition: color var(--transition_default);
}
.l_page__main .content1 .list_sitemap a:hover {
	color: var(--color_primary);
	text-decoration: underline;
	opacity: 1;
}

/* level01: セクション見出し（旧 content1 h2 の peach pill と旧 #e77328 帯を両方打ち消し） */
.l_page__main .content1 .list_sitemap .level01,
.l_page__main .content1 .list_sitemap > .level01 {
	background: none;
	border: 0;
	border-bottom: 2px solid var(--color_primary);
	border-radius: 0;
	padding: 8px 0;
	margin: 40px 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: var(--color_primary);
	line-height: 1.4;
	min-height: 0;
}
.l_page__main .content1 .list_sitemap .level01:first-child {
	margin-top: 0;
}
.l_page__main .content1 .list_sitemap .level01 > a {
	background: none;
	color: var(--color_primary);
	padding: 0;
	border-radius: 0;
	font-size: inherit;
	font-weight: inherit;
	display: inline;
}

/* level02: サイドメニュー level1 風の peach ellipse bullet リスト */
.l_page__main .content1 .list_sitemap .level02 {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}
.l_page__main .content1 .list_sitemap .level02 > li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--color_form_border);
}
.l_page__main .content1 .list_sitemap .level02 > li:last-child {
	border-bottom: 0;
}
.l_page__main .content1 .list_sitemap .level02 > li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 4px;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 14px;
	line-height: 1.6;
}
.l_page__main .content1 .list_sitemap .level02 > li > a::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--color_accent_peach);
	border-radius: 50%;
	flex-shrink: 0;
	border: 0;
	margin: 0;
	position: static;
}

/* level03 以下: peach dash bullet（サイドメニュー level2 と同じパターン） */
.l_page__main .content1 .list_sitemap .level03,
.l_page__main .content1 .list_sitemap .level04,
.l_page__main .content1 .list_sitemap .level05 {
	list-style: none;
	margin: 0;
	padding: 0 0 0 18px;
	color: inherit;
}
.l_page__main .content1 .list_sitemap .level03 > li,
.l_page__main .content1 .list_sitemap .level04 > li,
.l_page__main .content1 .list_sitemap .level05 > li {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color_form_border);
}
.l_page__main .content1 .list_sitemap .level03 a,
.l_page__main .content1 .list_sitemap .level04 a,
.l_page__main .content1 .list_sitemap .level05 a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 4px;
	font-size: 13px;
	line-height: 1.6;
}
.l_page__main .content1 .list_sitemap .level03 a::before,
.l_page__main .content1 .list_sitemap .level04 a::before,
.l_page__main .content1 .list_sitemap .level05 a::before {
	content: "";
	width: 8px;
	height: 1px;
	background: var(--color_accent_peach);
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.l_page__main .content1 .list_sitemap .level01,
	.l_page__main .content1 .list_sitemap > .level01 {
		font-size: 22px;
		padding: 10px 0;
	}
	.l_page__main .content1 .list_sitemap .level02 > li > a {
		font-size: 16px;
		padding: 14px 4px;
	}
	.l_page__main .content1 .list_sitemap .level03 a,
	.l_page__main .content1 .list_sitemap .level04 a,
	.l_page__main .content1 .list_sitemap .level05 a {
		font-size: 14px;
	}
}


/* === ユーティリティ: SP/PC専用改行 ===
   <br class="is_sp_only" /> → SPでのみ改行、PCでは無効
   <br class="is_pc_only" /> → PCでのみ改行、SPでは無効 */
br.is_sp_only { display: inline; }
br.is_pc_only { display: none; }
@media (min-width: 768px) {
	br.is_sp_only { display: none; }
	br.is_pc_only { display: inline; }
}