@charset "UTF-8";

/* =========================================
   変数定義
========================================= */
:root {
	--color-primary: #17184B; /* 濃い青 */
	--color-secondary: #F8B500; /* 黄色 */
	--color-accent: #38A1DB; /* 水色 */
	--color-bg-light: #F0F8FF;
	--color-bg-yellow: #F5D066;
	--color-white: #ffffff;
	--color-text-main: #17184B;
	
	--container-width: 1280px;
	--sp-breakpoint: 768px;
	--header-height: 84px;
}

/* =========================================
   リセット & 基本設定
========================================= */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	color: var(--color-text-main);
	line-height: 1.6;
	background-color: var(--color-white);
	padding-top: var(--header-height);
}
img,svg {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	image-rendering: -webkit-optimize-contrast; /* 画質対策 */
}

a {
	text-decoration: none;
	color: inherit;
	transition: opacity 0.3s;
}
a:hover {
	opacity: 0.8;
}

.pc {
	display: block;
}
.sp {
	display: none;
}

/* =========================================
   ユーティリティ
========================================= */
.container {
	width: 90%;
	max-width: var(--container-width);
	margin: 0 auto;
	position: relative;
}

.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-highlight {
	font-size: 36px;
	color: var(--color-secondary);
	font-weight: 700;
}
.text-large { font-size: 1.5em; font-weight: 700; }

.section { padding: 80px 0; }

/* =========================================
   コンポーネント
========================================= */
.btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 15px 30px;
	border-radius: 15px;
	font-weight: 700;
	font-size: 18px;
	min-width: 200px;
	box-shadow: 5px 5px 0 var(--color-primary);
}
.btn--primary {
	background-color: var(--color-primary);
	color: var(--color-white);
	box-shadow: 5px 5px 0 var(--color-secondary);
}
.btn--secondary {
	background-color: var(--color-secondary);
	color: var(--color-white);
}

.section-title {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 40px;
	line-height: 1.4;
}
.section-title--voice { margin-bottom: 60px; }

/* =========================================
   PC版スタイル (769px以上)
========================================= */

/* ヘッダー */
.header {
	background-color: var(--color-white);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-height);
	z-index: 1000;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #eee;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.header__container {
	display: flex;
	justify-content: space-between; /* ロゴ左・ボタン右 */
	align-items: center;
	
	/* ▼ 修正: コンテナの幅制限を解除して画面いっぱいに */
	width: 100%;
	max-width: 100%;
	height: 100%;
	padding: 0; /* コンテナ自体の余白削除 */
}

.header__logo {
	display: flex;
	align-items: center;
	/* ▼ ロゴが左端にくっつきすぎないように余白追加 */
	padding-left: 30px; 
}
.header__logo img {
	height: 50px; /* ロゴサイズ調整 */
	width: auto;
}

.header__actions {
	display: flex;
	gap: 0; /* ボタン間の隙間なし */
	height: 100%; /* 高さをヘッダーに合わせる */
	margin-right: 30px;
}

/* --- LINEボタンのスタイル --- */
.btn--line {
	color: #fff;
	width: 70px !important;  /* !importantでヘッダーボタン共通設定を上書き */
	height: 70px !important;
	min-width: auto !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background-color: #06C755; /* LINE公式カラー */
	box-shadow: 5px 5px 0 #048C3B; /* 濃い緑の影 */
	margin: 4px 0px 0 4px!important;
	
	/* 中央寄せ */
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-image: url('../img/line.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px; /* アイコンの大きさ調整 */
	
	margin-left: 15px; /* 左のボタンとの間隔 */
}
/* ヘッダー内のLINEボタンアイコン（必要であれば） */
.btn--header.btn--line::after {
	/* LINEアイコン画像があれば指定（なければ削除可） */
	/* background-image: url('../img/line.svg'); */
	display: none; /* 今回は文字のみで調整 */
}

/* ヘッダーボタンの幅調整（3つ並ぶため少し狭める） */
.btn--header {
	width: 280px;
	line-height: 21px;
	margin: 10px 4px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 15px 30px;
	border-radius: 36px;
	font-weight: 700;
	font-size: 18px;
	height: 70%;
	text-align: center;
}
/* ヒーロー */
.hero { position: relative; width: 100%; min-height: 400px; overflow: hidden; }
.hero__img { width: 100%; height: auto; display: block; }
.hero__content {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;
	display: flex; align-items: center; justify-content: center;
}
.hero__content > .container {
	width: 90%; max-width: var(--container-width);
	display: flex; justify-content: flex-start; align-items: center; height: 100%;
}
.hero__logo-wrapper { width: 50%; max-width: 600px; min-width: 200px; }
.hero__logo-svg { width: 100%; height: auto; display: block; }

/* プライス */
.price {
	background: linear-gradient(to bottom, transparent 100px, var(--color-bg-light) 100px);
	padding-top: 0;
	margin-top: -100px;
	position: relative;
	z-index: 20;
}
.price-box {
	background: linear-gradient(to bottom, #38A1DB 0%, #38A1DB 260px, var(--color-white) 190px, var(--color-white) 100%);
	border-radius: 30px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.price-box__header { padding: 40px; position: relative; }
.price-box__header::before {
	content: ''; position: absolute; bottom: -36px; left: 20%; transform: translateX(-50%);
	width: 0; height: 0; border-style: solid; border-width: 50px 45px 0 45px;
	border-color: #38A1DB transparent transparent transparent; z-index: 10;
}
.price-box__items {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; padding: 0 20px;
}
.price-box__items li {
	width: calc((100% - 60px) / 3);
	min-width: 140px;
	height: 60px;
	font-size: clamp(14px, 3.6vw, 46px);
	background-color: var(--color-secondary);
	color: #17184B;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	white-space: nowrap;
}
.price-box__items li::after {
	content: ''; position: absolute; left: 100%; top: 50%; transform: translate(-50%, -50%);
	z-index: 2; width: 30px; height: 30px; margin-left: 7.5px;
	background-image: url('../img/price-plus.png'); background-repeat: no-repeat; background-position: center; background-size: contain;
}
.price-box__items li:nth-child(3)::after, .price-box__items li:last-child::after { content: none; }
.price-box__body {
	padding: 50px 20px 40px; background-color: var(--color-white);
	display: flex; justify-content: center; align-items: center; border-radius: 0 0 30px 30px;
}
.price-box__svg { max-width: 100%; height: auto; width: 830px; display: block; }

/* お悩み */
.problems { background-color: var(--color-bg-light); }
.problems__box {
	background-color: var(--color-white); padding: 60px; margin-top: -80px;
	position: relative; z-index: 10;
}
.price-box__header::before { 
	display: none;
}
.problems__img { margin: 40px 0; }
.problems__cta-text {
	line-height: 38px; font-size: 24px; font-weight: 700; margin-top: 30px; margin-bottom: 40px;text-align: center;
}
.problems__actions { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.btn--icon {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 280px; padding-right: 30px; padding-left: 30px;
}
.btn--icon::after {
	content: ''; display: inline-block; width: 24px; height: 24px; margin-left: 10px;
	background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align: middle;
}
.btn--mail::after { background-image: url('../img/mail.svg'); }
.btn--tel::after { background-image: url('../img/phone.svg'); }

/* Voice */
.voice { background-color: var(--color-bg-yellow); padding-top: 100px; position: relative; z-index: 2; padding-bottom: 0; }
.voice .container { padding-bottom: 50px; }
.voice__list { display: flex; flex-direction: column; gap: 80px; max-width: 900px; margin: 0 auto; }
.voice-card {
	background-color: var(--color-white);
	border-radius: 30px;
	border: 5px solid var(--color-accent);
	box-shadow: 16px 15px 0 var(--color-secondary);
	overflow: visible;
	position: relative;
	padding-bottom: 40px;
}
.voice-card__header {
	background-color: var(--color-accent);
	color: var(--color-white);
	padding: 12px 110px 12px;
	border-radius: 23px 23px 0 0;
}
.voice-card__title { font-size: 24px; font-weight: 700; }
.voice-card__name { text-align: left; font-size: 14px; font-weight: 700; margin-top: 10px; }
.voice-card__body-wrapper { height: 3.6em; overflow: hidden; transition: height 0.5s ease; }
.voice-card__body { 
	padding: 30px 30px;
	font-size: 19px;
	line-height: 1.7;
	color: #000;
}
.voice-card__footer { text-align: center; padding-bottom: 20px; position: relative; }
.btn-img-triangle {
	position: absolute; bottom: -75px; left: 50%; transform: translateX(-50%);
	width: 140px; height: auto; background: none; border: none; padding: 0; cursor: pointer; z-index: 10;
}
.btn-img-triangle:hover { opacity: 0.9; }
.btn-triangle-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 3px rgba(0,0,0,0.2)); transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); transform-origin: center center; }
.btn-triangle-word {
	position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%);
	color: #ffffff; font-size: 15px; font-weight: 700; letter-spacing: 0.05em; pointer-events: none; transition: top 0.5s ease; white-space: nowrap;
}
.btn-img-triangle.is-open .btn-triangle-img { transform: rotate(180deg); }
.btn-img-triangle.is-open .btn-triangle-word { top: 40%; }
.voice-bottom-divider {
	position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: translateY(99%); pointer-events: none;
}
.voice-bottom-divider svg { position: relative; display: block; width: calc(100% + 1.3px); height: 140px; }
.voice-bottom-divider .shape-fill { fill: var(--color-bg-yellow); }

/* Flow */
.flow { background-color: var(--color-bg-light); padding: 180px 0 80px; }
.section-header { margin-bottom: 60px; }
.section-lead {
	font-size: 24px;
	font-weight: 700;
	color: var(--color-primary);
}
.flow__list { display: flex; flex-direction: column; gap: 40px; max-width: 900px; margin: 0 auto; }
.flow-item {
	display: flex; align-items: flex-start; gap: 20px; padding-bottom: 50px;
	background-image: radial-gradient(circle, var(--color-primary) 4px, transparent 5px);
	background-size: 20px 10px; background-repeat: repeat-x; background-position: bottom center;
}
.flow-item__num {
	background-image: url('../img/badge.png'); background-repeat: no-repeat; background-position: center; background-size: contain;
	width: 100px; height: 100px; min-width: 80px; display: flex; align-items: baseline; justify-content: center;
	font-size: 55px; font-weight: 700; color: var(--color-accent); text-align: center;
}
.flow-item__content { flex: 1; color: #000; }
.flow-item__title { font-size: 27px; font-weight: 700; margin-bottom: 10px; }
.flow-item__desc { 
	font-size: 18px;
	font-weight: 600;
}

.flow-item__img { width: 200px; height: 200px; overflow: hidden; flex-shrink: 0; }
.flow-item__img img { width: 100%; height: 100%; object-fit: cover; }

/* Area */
.area { background-color: var(--color-bg-light); }
.area-info {
	display: flex; justify-content: center; align-items: center; gap: 30px;
	border: 5px solid var(--color-accent); padding: 40px; background-color: var(--color-white); position: relative; z-index: 10;
}
.area-info::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 8px;
	right: 8px;
	border: 3px solid var(--color-accent);
	z-index: 999;
	pointer-events: none;
}
.area-info__map { max-width: 400px; text-align: center; margin: 0 auto; }
.area-info__title {
	font-size: 43px; font-weight: 700; margin-bottom: 20px; background-color: var(--color-accent);
	color: var(--color-white); padding: 10px; width: 450px; text-align: center;
}
.area-info__note { font-size: 20px; font-weight: bold; }
.btn--zoom {
	display: inline-block; margin-top: 20px; padding: 12px 40px; background-color: var(--color-primary); color: var(--color-white);
	font-size: 16px; font-weight: 700; border-radius: 100px; text-decoration: none; transition: opacity 0.3s, transform 0.3s;
	box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.btn--zoom:hover { opacity: 0.9; transform: translateY(-2px); }
.area-info__svg-box { width: 100%; max-width: 240px; margin: 0 0 0 250px; }
.area-info__svg-box img { width: 100%; height: auto; }

/* Points */
.points { background-color: var(--color-bg-light); position: relative; padding-top: 100px; padding-bottom: 240px; z-index: 1; }
.points__header-img { margin-top: 30px; margin-bottom: 30px; }
.points__header-img img { max-width: 100%; height: auto; width: 260px; }
.points::before, .points::after {
	content: ""; position: absolute; left: 0; width: 100%; height: 0;
	background-repeat: no-repeat; background-size: 100% auto; pointer-events: none;
}
.points::before { top: 0; padding-top: 420px; background-image: url('../img/points-header.png?v2'); background-position: top center; }
.points::after { bottom: 0; padding-top: 100%; background-image: url('../img/points-bottom.png?v2'); background-position: bottom center; z-index: -1; }
.points__list { margin-top: 50px; margin: 50px auto 0; max-width: 900px; }
.point-item { margin-bottom: 50px; }
.point-item__header-row { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.point-item__badge-wrapper { position: relative; width: 200px; flex-shrink: 0; }
.point-item__badge-img { width: 100%; height: auto; display: block; }
.point-item__badge-text {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	background-color: var(--color-white); padding: 12px; border-radius: 50%; font-weight: 700; border: 2px solid var(--color-primary);
	text-align: center; font-size: 13px; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; line-height: 1.3;
}
.point-item__title { font-size: 28px; font-weight: 700; color: var(--color-primary); margin-bottom: 0; line-height: 1.6; display: block; }
.point-item__title span { background: linear-gradient(transparent 85%, var(--color-secondary) 60%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-left: 5px; padding-right: 5px; }
.point-item__body-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.point-item__text-wrapper { flex: 1; }
.point-item__text { font-size: 19px; line-height: 1.8; }
.point-item__content-img { width: 200px; height: 200px; flex-shrink: 0; }
.point-item__content-img img { width: 100%; height: auto; }

/* Recommend */
.recommend { background-color: var(--color-bg-yellow); position: relative;}
.recommend__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.recommend-card {
	background-color: var(--color-white); border-radius: 25px; padding: 30px; text-align: center; box-shadow: 10px 10px 0 var(--color-primary);
}
[class^="recommend-card__icon_"] { text-align: center; margin-bottom: 20px; }
[class^="recommend-card__icon_"] img { height: 160px; width: auto; }
.recommend-card__text { font-weight: 700; font-size: 18px; }
.recommend .voice-bottom-divider {
	position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: translateY(99%); pointer-events: none;
}
.recommend .voice-bottom-divider svg { position: relative; display: block; width: calc(100% + 1.3px); height: 140px; }
.recommend .voice-bottom-divider .shape-fill { fill: var(--color-bg-yellow); }


/* =========================================
   お申し込みの流れ (Application Flow)
========================================= */
.application {
	background-color: var(--color-white);
}

.application .section-title {
	margin-top: 110px;
}

.application__list {
	display: flex;
	flex-wrap: wrap; /* 折り返しを有効化 */
	justify-content: center; /* 中央寄せ */
	gap: 40px 70px;
	position: relative;
	margin: 0 auto;
}

.application__item {
	/* 3カラムにするための幅調整 */
	width: calc((100% - 370px) / 3);
	text-align: center;
	position: relative;
}

/* ▼ PC版レイアウト調整: 2段目の最初（4番目）を右にずらす */
.application__item:nth-child(4) {
	margin-left: 220px;
}

/* 矢印（右向き三角） */
.application__item::after {
	content: "";
	position: absolute;
	top: 35%; /* 画像の高さ付近 */
	right: -25px; /* 配置調整 */
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 0 10px 15px; /* 少し大きく */
	border-color: transparent transparent transparent var(--color-secondary);
	z-index: 1;
}

/* 3番目（1段目の最後）と6番目（2段目の最後）の矢印は消す */
.application__item:nth-child(3)::after,
.application__item:nth-child(6)::after {
	display: none;
}

/* 画像ダミースペース（バッジの基準点） */
.application__img-box {
	background-color: #eee;
	width: 100%;
	aspect-ratio: 1 / 1; /* 正方形 */
	margin-bottom: 20px;
	border-radius: 50%;
	border: 4px solid var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible; /* バッジがはみ出しても見えるように */
	position: relative; /* ここを基準にする */
}

.application__img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.application__img-box .dummy-text {
	font-size: 14px;
	color: #999;
	font-weight: bold;
}

/* 丸いステップバッジ */
.application__step {
	position: absolute;
	top: 0;
	left: 0;
	width: 70px; /* バッジの大きさ */
	height: 70px;
	background-color: var(--color-primary);
	color: var(--color-white);
	border: 3px solid var(--color-white); /* 白フチで見やすく */
	border-radius: 50%; /* 丸く */
	
	/* 中の文字を中央揃え */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	font-size: 11px;
	line-height: 1.1;
	z-index: 5;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.application__step .step-num {
	font-size: 22px; /* 数字を大きく */
	font-family: Arial, sans-serif;
	margin-top: 2px;
}

.application__title {
	font-size: 25px;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1.4;
	margin-bottom: 10px;
}

.application__desc {
	font-size: 17px;
	line-height: 1.6;
	text-align: left;
	display: inline-block;
}

/* FAQ */
.faq { background-color: var(--color-bg-light); padding: 190px 0 120px;}
.faq__list { max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; }
.faq-item {
	background-color: var(--color-white); border-radius: 20px; padding: 20px 30px; border: 4px solid var(--color-primary);
	box-shadow: 10px 10px 0 var(--color-secondary); width: 100%; display: flex; flex-direction: column; height: 100%;
}
.faq-item__q { display: flex; gap: 20px; margin-bottom: 20px; }
.faq-item__a { display: flex; gap: 14px; margin-bottom: 20px; padding-left: 40px; }
.faq-link { color: var(--color-accent); text-decoration: underline; transition: color 0.3s; }
.faq-link:hover { color: var(--color-secondary); }
.faq-icon--q, .faq-icon--a {
	width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 40px; color: var(--color-white); flex-shrink: 0; font-family: -apple-system;
}
.faq-icon--q { background-color: var(--color-primary); }
.faq-icon--a { background-color: var(--color-secondary); width: 40px; height: 40px; font-size: 28px; }
.faq-item__q .faq-item__text { font-size: 25px; font-weight: 700; line-height: 1.4; }
.faq-item__a .faq-item__text { font-size: 17px; font-weight: 400; line-height: 1.6; }

/* Option */
.option {
	background-color: var(--color-white); position: relative; padding-top: 270px; z-index: 1;
}

.option .container {
width: 70%;
max-width: var(--container-width);
margin: 0 auto;
position: relative;
}
.option::before, .option::after {
	content: ""; position: absolute; left: 0; width: 100%; height: 100%; padding-top: 10%;
	background-repeat: no-repeat; background-size: 100% auto; pointer-events: none; z-index: -1;
}
.option::before { top: 0; background-image: url('../img/option-bg_header.png'); background-position: top center; }
.option::after { bottom: 0; background-image: url('../img/option-bg_bottom.png'); background-position: bottom center; }
.option__grid { display: flex; flex-direction: column; gap: 60px; margin-top: 50px; }
.option-card { border: 5px solid var(--color-accent); border-radius: 30px; padding: 40px; background-color: var(--color-white); }
.option-card__header { text-align: center; margin-bottom: 30px; }
.option-card__title {
	background-color: var(--color-primary); color: var(--color-white); display: inline-block; border-radius: 70px; font-size: 50px; padding: 3px 31px;
}
.option-card__body { display: flex; flex-direction: column; gap: 40px; }
.option-card:nth-child(even) .option-card__body { flex-direction: column; }
.option-card__desc { font-size: 29px; font-weight: 700; flex: 1; line-height: 1.5; text-align: center; }
.option-card__price { color: var(--color-primary); margin-top: 20px; text-align: center; }
.option-card__price .tax { font-size: 50px; font-weight: 700; }
.option-card__price .amount { font-family: "Noto Serif JP", serif; font-size: 90px; font-weight: 700; }
.option-card__price .unit { font-family: "Noto Serif JP", serif; font-size: 40px; }
.option-card__img--single { text-align: center; }
.option-card__img--single img { width: auto; max-width: 100%; height: auto; max-height: 300px; }
.compare-img { display: flex; gap: 60px; justify-content: center; align-items: center; position: relative; }
.compare-img::after {
	content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0;
	border-style: solid; border-width: 30px 0 30px 24px; border-color: transparent transparent transparent var(--color-secondary); z-index: 1;
}
.compare-img img { width: 330px; height: auto; max-width: 100%; }
.compare-img__item { position: relative; overflow: hidden; }
.compare-img__item span {
	position: absolute; top: 0; left: 0; z-index: 2; width: 140px; height: 90px; clip-path: polygon(0 0, 100% 0, 0 100%);
	background-color: var(--color-primary); color: var(--color-white); font-size: 20px; font-weight: 900;
	padding-top: 10px; padding-left: 10px; box-sizing: border-box; line-height: 1;
}
.compare-img__item--after span { background-color: var(--color-primary); color: var(--color-white); }

/* Diagnosis */
.diagnosis { background-color: var(--color-bg-light); padding-bottom: 100px; }
.diagnosis-banner { display: flex; justify-content: center; align-items: center; gap: 50px; }
.diagnosis-banner__img img { max-width: 800px; }
.diagnosis-banner__title { font-size: 36px; font-weight: 700; color: var(--color-primary); margin-bottom: 20px; }
.diagnosis__actions { display: flex; justify-content: center; gap: 30px; margin-top: 60px; }
.btn--diagnosis {
	/* Flexboxでアイコンとテキストを横並びに */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	
	/* フォントサイズなどは既存の設定を維持 */
	/* font-size: 24px; padding: 20px 40px; min-width: 300px; */
}

/* アイコン（擬似要素）の設定 */
.btn--diagnosis::after {
	content: '';
	display: inline-block;
	width: 30px;  /* アイコンの幅 */
	height: 30px; /* アイコンの高さ */
	margin-left: 15px; /* テキストとの間隔 */
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	vertical-align: middle;
}

/* お問い合わせフォームボタン用のアイコン（メール） */
.btn--diagnosis.btn--secondary::after {
	/* 既存のメールアイコン画像パスを指定してください */
	background-image: url('../img/mail.svg'); 
}

/* お電話ボタン用のアイコン（電話） */
.btn--diagnosis.btn--primary::after {
	/* 既存の電話アイコン画像パスを指定してください */
	background-image: url('../img/phone.svg');
}

/* Footer */
.footer { background-color: var(--color-white); padding: 60px 0 40px; }
.footer__info { text-align: center; }
.footer__info-row { display: flex; justify-content: center; align-items: flex-start; gap: 60px; margin-bottom: 40px; text-align: left; }
.footer__logo { margin-bottom: 0; flex-shrink: 0; }
.footer__logo img { width: 240px; height: auto; }
.footer__address { font-size: 15px; line-height: 1.8; color: #333; margin-bottom: 0; }
.footer__address-item { margin-bottom: 20px; }
.footer__address-item:last-child { margin-bottom: 0; }
.footer__address-title { font-weight: 700; color: var(--color-primary); margin-bottom: 5px; }
.footer__copyright { font-size: 12px; color: #999; }

/* Modal */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.modal.is-active { display: block; opacity: 1; pointer-events: auto; }
.modal__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); cursor: pointer; }
.modal__content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 95%; max-height: 95%; width: auto; }
.modal__img { display: block; max-width: 100%; max-height: 90vh; border: 4px solid #fff; border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
.modal__close-btn { position: absolute; top: -40px; right: 0; background: none; border: none; color: #fff; font-size: 32px; font-weight: bold; cursor: pointer; line-height: 1; padding: 5px; }
.modal__close-btn:hover { color: var(--color-secondary); }

/* =========================================
   トップへ戻るボタン
========================================= */
.page-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 9999;
	
	/* ボタンの形状 */
	width: 60px;
	height: 60px;
	background-color: var(--color-primary); /* 濃い青 */
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	
	/* 矢印を中央に配置 */
	display: flex;
	justify-content: center;
	align-items: center;
	
	opacity: 0; /* 最初は隠す */
	transition: opacity 0.3s, background-color 0.3s, transform 0.3s;
	cursor: pointer;
	/* クリック無効化（JSで制御するため初期状態では押せないようにする） */
	pointer-events: none; 
}

/* 表示時のクラス（JSで付与） */
.page-top.is-show {
	opacity: 1;
	pointer-events: auto;
}

/* ホバー時 */
.page-top:hover {
	background-color: var(--color-secondary); /* 黄色 */
	transform: translateY(-5px);
}

/* 矢印（CSSで描画） */
.page-top::after {
	content: '';
	width: 12px;
	height: 12px;
	border-top: 3px solid var(--color-white);
	border-right: 3px solid var(--color-white);
	transform: rotate(-45deg);
	margin-top: 6px;
}
.seo-title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* =========================================
   ▼▼▼ レスポンシブ (SP版: 768px以下) ▼▼▼
========================================= */
@media (max-width: 768px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	/* --- ユーティリティ & 全体 --- */
	.container { width: 90%; }
	.section { padding: 50px 0; }
	.text-highlight { font-size: 24px; }
	.text-large { font-size: 1.2em; }
	.section-title { font-size: 22px; margin-bottom: 30px; }
	.section-lead {
	font-size: 24px;
	font-weight: 700;
	line-height: 34px;
	}
	
	
	body {
		padding-top: 60px; /* スマホ版ヘッダーの高さに合わせる */
	}
	
	/* --- ヘッダー --- */
	.header {
		/* スマホのヘッダー高さを少し低くする場合（任意） */
		height: 60px; 
	}
	
	.header__container {
		/* PCの設定を引き継ぎつつ微調整 */
		width: 100%;
		padding: 0; 
		flex-direction: row; /* 横並びを強制 */
		gap: 0;
	}
	
	.header__logo {
		padding-left: 12px; /* スマホ用に左余白を縮小 */
		flex: 1; /* ロゴエリアを伸縮可能に */
	}
	.header__logo img {
		height: 40px; /* ロゴを小さく */
	}
	
	.header__actions {
		height: 100%;
		flex-shrink: 0; /* ボタンエリアが潰れないように */
	}
	
	.btn--header {
		height: 100%; /* 高さ100% */
		font-size: 12px; /* 文字小さく */
		padding: 0 15px; /* 横余白を狭く */
		min-width: auto;
		
		/* ボタン内の文字を改行させない、または改行させる設定 */
		white-space: nowrap; 
		line-height: 1.2;
		width: 100px;
	}
	.header__actions { gap: 0px; }

	/* --- ヒーロー --- */
	.hero {
		min-height: 500px;
		margin-top: 0;
		position: relative;
	}
	.hero__bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.hero__img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
		object-position: bottom center;
	}
	
	.hero__content > .container { align-items: flex-start;
		padding-top: 42px; }
	
	/* ロゴ位置の微調整（必要であればtopの値などで調整してください） */
	.hero__logo-wrapper { 
		width: 95%;
		margin: 0 auto;
	}

	/* --- Price --- */
	.price { 
			margin-top: -110px;
			/* スマホでの被り幅に合わせて調整 */
			background: var(--color-bg-light) 110px);
		}
	.price-box__header { padding: 20px 10px; }
	.price-box__header::before { border-width: 15px 10px 0 10px; bottom: -15px; }
	.price-box__items { gap: 8px; padding: 0 10px; }
	.price-box__items li {
		width: calc((100% - 16px) / 3);
		min-width: auto;
		height: auto; /* 高さを自動に */
		min-height: 30px;
		font-size: 17px;
		padding: 3px 2px;
	}
	.price-box__items li::after { width: 14px; height: 14px; margin-left: 4px; }
	.price-box__body { padding: 13px 10px 18px; }

	/* --- Problems --- */
	.problems__box { padding: 10px 30px 20px; margin-top: -40px; }
	.problems__img {
	margin: 10px 0;
	}
	.problems__cta-text {
		font-size: 18px;
		margin: 20px 0;
		text-align: center;
		line-height: 28px;
	}

	.problems__actions { flex-direction: column; gap: 15px; }
	.btn--icon { width: 100%; max-width: 320px; font-size: 16px; padding: 12px; }
	/* 画像縮小 */
	.problems__img img { width: 45%; margin: 0 auto; display: block; }

	/* --- Voice --- */
	.voice { padding-top: 60px; }
	.voice__list { gap: 40px; }
	.voice-card { border-width: 3px; box-shadow: 6px 9px 0 var(--color-secondary); margin-bottom: 15px; padding-bottom: 0;}
	.voice-card__header { 
		padding: 12px 13px 6px;
		border-radius: 20px 20px 0 0;
	}
	.voice-card__title { 
		font-size: 18px;
		line-height: 23px;
		text-align: center;
	}
	.voice-card__name {
	text-align: right;
	font-size: 14px;
	font-weight: 700;
	margin-top: 10px;
	}
	.voice-card__body { padding: 20px; font-size: 15px; }
	.voice-bottom-divider svg { height: 40px; }
	/* ボタン縮小 */
	.btn-img-triangle { width: 100px; bottom: -30px; }
	.btn-triangle-word { font-size: 12px; }

	/* --- Flow --- */
	.flow { padding: 100px 0 60px; }
	/* レイアウト再構築: Gridを使用 */
	.flow__list {
	display: flex;
	flex-direction: column;
	gap: 0px;
	max-width: 900px;
	margin: 0 auto;
	}
	.flow-item {
		display: grid;
		grid-template-columns: auto 1fr; /* 番号 タイトル */
		grid-template-areas:
			"num title"
			"text text"
			"img img";
		gap: 10px 6px;
		background: none; /* 一旦リセット */
		border-bottom: none; /* ボーダーは使わない */
		
		/* 丸い点線を描画 */
		background-image: radial-gradient(circle, var(--color-primary) 2px, transparent 2.5px);
		background-size: 10px 5px; /* [点の横間隔] [点の高さエリア] */
		background-repeat: repeat-x;
		background-position: bottom;
		padding-bottom: 40px;
		margin-bottom: 40px;
		align-items: center;
	}
	.flow-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 50px; }
	
	.flow-item__num {
		grid-area: num;
		width: 50px;
		height: 69px;
		min-width: 60px;
		font-size: 40px;
		margin: 0;
		padding: 0;
		letter-spacing: -2px;
	}
	.flow-item__content { display: contents; /* ラッパー解除 */ }
	.flow-item__title {
		grid-area: title; font-size: 20px; margin: 0; text-align: left;line-height: 24px;
	}
	.flow-item__desc {
		grid-area: text; font-size: 15px;padding-left: 60px;
	}
	.flow-item__img {
		grid-area: img;
		justify-self: flex-end;
		width: 50%;
		height: auto;
		max-width: 300px;
		margin-top: 20px;
		border-radius: 0;
	}

	/* --- Area (Info) --- */
	.area-info {
		flex-direction: column;
		padding: 30px 20px;
		border-width: 3px;
	}
	.area-info::before { 
		border-width: 5px;
		top: 6px;
		bottom: 6px;
		left: 6px;
		right: 6px; 
	}
	
	.area-info__desc { order: 1; width: 100%; text-align: center; }
	.area-info__title { font-size: 24px; padding: 8px; width: 100%; margin-bottom: 15px; }
	.area-info__note { font-size: 15px; margin-bottom: 20px; }
	.area-info__map { order: 2; width: 100%; max-width: 300px; }
	.btn--zoom { margin-top: 15px; }
	.area-info__svg-box { 
		order: 3;
		max-width: 160px;
		float: right;
	}
	
	/* --- モーダル (SP版: 画面いっぱい表示) --- */
	.modal__content {
		width: 100%;      /* 横幅を画面いっぱいにする */
		max-width: 100%;  /* 制限を解除 */
		padding: 0;       /* 余白削除 */
	}
	
	.modal__img {
		width: 100%;      /* 画像も幅いっぱい */
		height: auto;
		max-height: 80vh; /* 縦長画像でも画面内に収まり、閉じるボタンのスペースを残す */
		object-fit: contain;
		
		border: none;     /* 枠線を削除してスペース確保 */
		border-radius: 0; /* 角丸をなくして端まで表示 */
	}
	
	.modal__close-btn {
		top: -50px; /* 画像の上に配置 */
		right: 10px; /* 右端に寄りすぎないように調整 */
		color: #fff; /* 背景が暗いので白文字 */
	}

	/* --- Points --- */
	.points { padding-top: 60px; padding-bottom: 60px; }
	.points::before, .points::after { padding-top: 100%; }
	.points__header-img img { width: 200px; }
	
	.point-item { /* Flowと同様の構成に */ }
	.point-item__header-row {
		gap: 6px; justify-content: flex-start; /* 左寄せ */
	}
	.point-item__badge-wrapper { width: 110px; }
	.point-item__badge-text { width: 54px; height: 54px; font-size: 10px; padding: 8px; }
	.point-item__title { font-size: 18px; text-align: left; }
	
	.point-item__body-row { flex-direction: column; gap: 20px; margin: 15px auto 0;
		width: 80%;}
	.point-item__text { font-size: 15px; }
	.point-item__content-img { width: 100%; max-width: 300px; height: auto; margin: 0 auto; }

	/* --- Recommend --- */
	.recommend__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.recommend-card { padding: 12px 15px; border-radius: 15px; }
	[class^="recommend-card__icon_"] {
	text-align: center;
	margin-bottom: 7px;
	}
	[class^="recommend-card__icon_"] img { height: 80px; }
	.recommend-card__text { font-size: 13px; text-align: left;}
	.recommend .voice-bottom-divider svg { height: 40px; }
	
	/* --- お申し込みの流れ (SP) --- */
	.application__list {
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}
	
	.application__item {
		width: 100%;
		max-width: 340px;
		background-color: var(--color-bg-light);
		padding: 20px 20px 20px 30px; /* 左パディングを増やしてバッジのスペース確保 */
		border-radius: 15px;
		display: grid;
		grid-template-columns: 80px 1fr;
		grid-template-rows: auto auto auto;
		gap: 0 20px;
		text-align: left;
		border: 2px solid var(--color-accent);
		
		/* PCのずらし設定をリセット */
		margin-left: 0 !important; 
	}
	
	/* 矢印（下向き三角） */
	.application__item::after {
		display: block !important; /* PCで消した矢印を復活 */
		top: auto;
		bottom: -28px;
		left: 50%;
		right: auto;
		transform: translateX(-50%) rotate(90deg);
		border-width: 10px 0 10px 15px;
	}
	/* SPでは最後の矢印だけ消す */
	.application__item:last-child::after {
		display: none !important;
	}
	
	.application__img-box {
		grid-column: 1 / 2;
		grid-row: 1 / 4; /* 画像エリアを縦に広げる */
		width: 120px;
		height: 120px;
		margin-bottom: 0;
		border-width: 2px;
		overflow: visible;
	}
	
	/* SPでのバッジサイズ調整 */
	.application__step {
		width: 50px;
		height: 50px;
		top: -40px;
		left: -40px;
		font-size: 9px;
	}
	.application__step .step-num {
		font-size: 16px;
	}
	
	.application__title {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		font-size: 18px;
		margin-bottom: 5px;
		margin-left: 30px;
		align-self: end; /* 下揃え */
	}
	
	.application__desc {
		grid-column: 2 / 3;
		grid-row: 2 / 4;
		font-size: 14px;
		margin-top: 0;
		margin-left: 30px;

	}

	/* --- FAQ --- */
	.faq__list { gap: 30px; }
	.faq-item { padding: 20px; }
	.faq-item__q { margin-bottom: 10px; }
	.faq-icon--q, .faq-icon--a { width: 40px; height: 40px; font-size: 20px; }
	.faq-item__q .faq-item__text { font-size: 18px; }
	.faq-item__a .faq-item__text { font-size: 14px;
		font-weight: 700; }
	.faq-item__a {
		padding-left: 10px;
		gap: 10px;
		margin-top: 20px; } /* ずらし解除 */

	/* --- Option --- */
	.option { padding-top: 80px; padding-bottom: 80px; }
	.option .container {
		width: 90%;
	}
	.option-card { padding: 20px; border-radius: 20px; }
	.option-card__title { font-size: 24px; padding: 8px 20px; }
	.option-card__desc { font-size: 16px; }
	
	/* 画像縦並び & 矢印下向き */
	.compare-img {
		flex-direction: column; /* 縦並び */
		gap: 40px;
		width: 190px;
		margin: 0 auto;/* 隙間 */
	}
	.compare-img img { width: 100%; max-width: 300px; }
	.compare-img::after {
		/* 下向き矢印 */
		border-width: 20px 30px 0 30px;
		border-color: var(--color-secondary) transparent transparent transparent;
	}
	/* バッジ */
	.compare-img__item span { width: 100px; height: 60px; font-size: 14px; padding: 5px; }
	.option-card__price {
	color: var(--color-primary);
	margin-top: 0px;
	text-align: center;
	}
	.option-card__price .tax { font-size: 20px; }
	.option-card__price .amount { font-size: 60px;
		letter-spacing: -3px; }
	.option-card__price .unit { font-size: 20px; }

	/* --- Diagnosis & Footer --- */
	.diagnosis-banner { flex-direction: column; gap: 20px; text-align: center; }
	.diagnosis-banner__title { font-size: 22px; }
	.diagnosis-banner__img img { width: 100%; max-width: 400px; } /* 大きく */
	
	.diagnosis__actions { flex-direction: column;
		gap: 15px; }
	.btn--diagnosis::after {
		width: 24px; /* スマホでは少し小さく */
		height: 24px;
		margin-left: 10px;
	}
	.btn--diagnosis{
	
	width: 100%;
	max-width: 320px;
	font-size: 16px;
	padding: 12px;
}
	.diagnosis__action-item {
	margin: 0 40px;
	}
	
	.footer__info-row { flex-direction: column; align-items: center; gap: 30px; text-align: center; }
	.footer__logo img { width: 180px; }
	.footer__address { font-size: 13px; }
	
	.fixed-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background-color: #fff;
		z-index: 9990; /* 最前面（モーダルよりは下） */
		box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
	}
	
	.fixed-footer__list {
		display: flex;
		width: 100%;
		height: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.fixed-footer__item {
		width: 40%;
	}
	.fixed-footer__item:last-child {
		border-right: none;
		width: 20%;
	}
	
	.fixed-footer__link {
		display: flex;
		flex-direction: column; /* アイコンと文字を縦並び */
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		color: var(--color-text-main);
		text-decoration: none;
		background-color: #fff;
		transition: background-color 0.3s;
	}
	
	/* 各ボタンの色分け（背景色をつける場合） */
	.fixed-footer__link--mail {
		background-color: var(--color-secondary); /* 黄色 */
		color: #fff;
	}
	.fixed-footer__link--tel {
		background-color: var(--color-primary); /* 紺色 */
		color: #fff;
	}
	.fixed-footer__link--line {
		background-color: #06C755; /* LINE緑 */
		color: #fff;
	}
	
	.fixed-footer__text {
		font-size: 11px;
		font-weight: 700;
		line-height: 1;
		margin-top: 4px;
		text-align: 
	}
	
	/* アイコン設定 */
	.fixed-footer__icon {
		display: block;
		width: 20px;
		height: 20px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}
	/* アイコン画像指定（既存の画像を利用） */
	.fixed-footer__link--mail .fixed-footer__icon {
		background-image: url('../img/mail.svg');
		filter: brightness(0) invert(1); /* 白くする */
	}
	.fixed-footer__link--tel .fixed-footer__icon {
		background-image: url('../img/phone.svg');
		filter: brightness(0) invert(1); /* 白くする */
	}
	/* LINEアイコンは別途用意してパスを指定してください */
	.fixed-footer__link--line .fixed-footer__icon {
		/* background-image: url('../img/line.svg'); */
		/* 画像がない場合は仮で四角を表示 */
		background-color: rgba(255,255,255,0.3);
		border-radius: 4px;
	}
	
	/* --- トップへ戻るボタンの位置調整 --- */
	.page-top {
		/* 固定フッター(60px) + 余白(10px) = 70px */
		bottom: 70px; 
	}
	
	.page-top::after {
		width: 10px;
		height: 10px;
		margin-top: 4px;
	}
}