@charset "UTF-8";

/* =========================================================
   選ばれる理由ページ
========================================================= */

.reason-page {
	--reason-primary: #30cec5;
	--reason-primary-dark: #109e99;
	--reason-primary-light: #e8faf8;
	--reason-navy: #123f49;
	--reason-text: #344b50;
	--reason-gray: #6b787b;
	--reason-border: #d5e8e6;
	--reason-bg: #f6fbfa;
	--reason-white: #ffffff;

	overflow-x: hidden;
	color: var(--reason-text);
}

.reason-page *,
.reason-page *::before,
.reason-page *::after {
	box-sizing: border-box;
}

.reason-container {
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto;
}

.reason-en {
	margin: 0 0 14px;
	color: var(--reason-primary-dark);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.2em;
}

/* ページタイトル */

.reason-page-title {
	background:
		linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
		url("../img/top-about-bg.jpg") no-repeat center / cover;
}

/* =========================================================
   導入
========================================================= */

.reason-hero {
	position: relative;
	padding: 105px 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 87% 10%,
			rgba(48, 206, 197, 0.16),
			transparent 32%),
		linear-gradient(120deg,
			#effcfb 0%,
			#ffffff 52%,
			#f0faf9 100%);
}

.reason-hero::before {
	position: absolute;
	top: -230px;
	right: -180px;
	width: 550px;
	height: 550px;
	border-radius: 50%;
	background: rgba(48, 206, 197, 0.1);
	content: "";
}

.reason-hero .reason-container {
	position: relative;
	z-index: 2;
	display: grid;
	align-items: center;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 75px;
}

.reason-hero__content h2 {
	margin: 0 0 30px;
	color: var(--reason-navy);
	font-size: clamp(40px, 4.5vw, 62px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.025em;
}

.reason-hero__content>p:not(.reason-en) {
	margin: 0 0 18px;
	color: var(--reason-gray);
	font-size: 16px;
	line-height: 2.1;
}

.reason-hero__content .reason-hero__lead {
	color: var(--reason-text);
	font-size: 17px;
	font-weight: 500;
}

.reason-hero__image {
	height: 620px;
	margin: 0;
	overflow: hidden;
	border-radius: 90px 10px 90px 10px;
	box-shadow: 0 24px 60px rgba(18, 63, 73, 0.15);
}

.reason-hero__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================
   理由一覧
========================================================= */

.reason-index {
	padding: 110px 0;
	background: #ffffff;
}

.reason-heading {
	max-width: 850px;
	margin: 0 auto 58px;
	text-align: center;
}

.reason-heading h2 {
	margin: 0;
	color: var(--reason-navy);
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.5;
}

.reason-index__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.reason-index__card {
	position: relative;
	display: block;
	min-height: 240px;
	padding: 34px 30px;
	overflow: hidden;
	border: 1px solid var(--reason-border);
	border-radius: 22px;
	background: #ffffff;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 12px 34px rgba(18, 63, 73, 0.06);
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease,
		border-color 0.3s ease;
}

.reason-index__card::after {
	position: absolute;
	right: -55px;
	bottom: -70px;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: rgba(48, 206, 197, 0.09);
	content: "";
}

.reason-index__card:hover {
	opacity: 1;
	border-color: rgba(48, 206, 197, 0.7);
	box-shadow: 0 20px 45px rgba(18, 63, 73, 0.12);
	transform: translateY(-7px);
}

.reason-index__card>span {
	display: block;
	margin-bottom: 20px;
	color: var(--reason-primary);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
}

.reason-index__card h3 {
	position: relative;
	z-index: 1;
	margin: 0 0 15px;
	padding: 0;
	background: none;
	color: var(--reason-navy);
	font-size: 21px;
	line-height: 1.6;
}

.reason-index__card p {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--reason-gray);
	font-size: 14px;
	line-height: 1.85;
}

/* =========================================================
   詳細
========================================================= */

.reason-detail {
	padding: 115px 0;
	scroll-margin-top: 80px;
	background: #ffffff;
}

.reason-detail--bg {
	background: var(--reason-bg);
}

.reason-detail__grid {
	display: grid;
	align-items: center;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: 75px;
}

.reason-detail__grid--reverse .reason-detail__image {
	order: 2;
}

.reason-detail__grid--reverse .reason-detail__content {
	order: 1;
}

.reason-detail__image {
	height: 520px;
	margin: 0;
	overflow: hidden;
	border-radius: 65px 8px 65px 8px;
	box-shadow: 0 20px 50px rgba(18, 63, 73, 0.12);
}

.reason-detail__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reason-detail__number {
	margin: 0 0 15px;
	color: var(--reason-primary-dark);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.17em;
}

.reason-detail__content h2 {
	margin: 0 0 30px;
	color: var(--reason-navy);
	font-size: clamp(32px, 4vw, 47px);
	line-height: 1.5;
}

.reason-detail__content>p:not(.reason-detail__number) {
	margin: 0 0 18px;
	color: var(--reason-gray);
	font-size: 16px;
	line-height: 2.05;
}

.reason-check-list {
	display: grid;
	margin: 30px 0 0;
	padding: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 13px;
	list-style: none;
}

.reason-check-list li {
	position: relative;
	padding: 15px 15px 15px 43px;
	border-radius: 10px;
	background: var(--reason-primary-light);
	color: var(--reason-text);
	font-size: 14px;
	line-height: 1.7;
}

.reason-check-list li::before {
	position: absolute;
	top: 50%;
	left: 15px;
	display: grid;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--reason-primary);
	color: #ffffff;
	content: "✓";
	font-size: 11px;
	font-weight: 700;
	place-items: center;
	transform: translateY(-50%);
}

/* アクセス */

.reason-access-box {
	display: flex;
	gap: 15px;
	margin-top: 28px;
}

.reason-access-box p {
	flex: 1;
	margin: 0;
	padding: 20px;
	border: 1px solid var(--reason-border);
	border-radius: 14px;
	background: #ffffff;
	color: var(--reason-gray);
	text-align: center;
}

.reason-access-box strong {
	display: block;
	margin-bottom: 4px;
	color: var(--reason-navy);
	font-size: 17px;
}

/* =========================================================
   継続率
========================================================= */

.reason-continuation {
	padding: 115px 0;
	background:
		linear-gradient(135deg,
			var(--reason-primary-dark),
			var(--reason-primary));
}

.reason-continuation__box {
	display: grid;
	align-items: center;
	grid-template-columns: 0.72fr 1.28fr;
	gap: 65px;
	padding: 70px;
	border-radius: 36px;
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 25px 65px rgba(9, 92, 89, 0.2);
}

.reason-continuation__number {
	text-align: center;
}

.reason-continuation__number strong {
	display: block;
	color: var(--reason-primary-dark);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(90px, 10vw, 150px);
	line-height: 0.9;
}

.reason-continuation__number span {
	display: block;
	margin-top: 15px;
	color: var(--reason-navy);
	font-size: 25px;
	font-weight: 700;
}

.reason-continuation__content h2 {
	margin: 0 0 25px;
	color: var(--reason-navy);
	font-size: clamp(32px, 4vw, 47px);
	line-height: 1.5;
}

.reason-continuation__content>p:not(.reason-en) {
	margin: 0 0 15px;
	color: var(--reason-gray);
	font-size: 15px;
	line-height: 2;
}

.reason-continuation__content small {
	display: block;
	margin-top: 20px;
	color: #899295;
	font-size: 12px;
}

/* =========================================================
   CTA
========================================================= */

.reason-cta {
	padding: 115px 0;
	background:
		radial-gradient(circle at 80% 20%,
			rgba(48, 206, 197, 0.16),
			transparent 33%),
		#f4fbfa;
	text-align: center;
}

.reason-cta h2 {
	margin: 0 0 25px;
	color: var(--reason-navy);
	font-size: clamp(34px, 4vw, 50px);
	line-height: 1.5;
}

.reason-cta>.reason-container>p:not(.reason-en):not(.reason-cta__access) {
	margin: 0;
	color: var(--reason-gray);
	font-size: 16px;
	line-height: 2;
}

.reason-cta__buttons {
	display: flex;
	justify-content: center;
	gap: 18px;
	margin-top: 38px;
}

.reason-btn {
	display: inline-flex;
	min-width: 245px;
	min-height: 62px;
	align-items: center;
	justify-content: center;
	padding: 15px 30px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition:
		transform 0.25s ease,
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}

.reason-btn:hover {
	opacity: 1;
	transform: translateY(-3px);
}

.reason-btn--primary {
	border: 1px solid var(--reason-primary);
	background: var(--reason-primary);
	color: #ffffff;
	box-shadow: 0 12px 28px rgba(48, 206, 197, 0.25);
}

.reason-btn--primary:hover {
	background: var(--reason-primary-dark);
}

.reason-btn--outline {
	border: 1px solid var(--reason-primary-dark);
	background: #ffffff;
	color: var(--reason-primary-dark);
}

.reason-btn--outline:hover {
	background: var(--reason-primary-light);
}

.reason-cta__access {
	margin: 28px 0 0;
	color: var(--reason-primary-dark);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* =========================================================
   タブレット
========================================================= */

@media screen and (max-width: 1024px) {

	.reason-hero .reason-container,
	.reason-detail__grid {
		grid-template-columns: 1fr;
		gap: 50px;
	}

	.reason-hero__image {
		height: 560px;
	}

	.reason-detail__grid--reverse .reason-detail__image,
	.reason-detail__grid--reverse .reason-detail__content {
		order: initial;
	}

	.reason-index__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.reason-continuation__box {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 55px;
	}
}

/* =========================================================
   スマートフォン
========================================================= */

@media screen and (max-width: 768px) {

	.reason-container {
		width: calc(100% - 30px);
	}

	.reason-hero,
	.reason-index,
	.reason-detail,
	.reason-continuation,
	.reason-cta {
		padding: 75px 0;
	}

	.reason-hero .reason-container {
		gap: 35px;
	}

	.reason-hero__content h2 {
		margin-bottom: 22px;
		font-size: 35px;
	}

	.reason-hero__content>p:not(.reason-en) {
		font-size: 14px;
		line-height: 1.95;
	}

	.reason-hero__image {
		height: 380px;
		border-radius: 48px 7px 48px 7px;
	}

	.reason-index__grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.reason-index__card {
		min-height: 0;
		padding: 27px 24px;
	}

	.reason-detail__grid {
		gap: 35px;
	}

	.reason-detail__image {
		height: 360px;
		border-radius: 42px 7px 42px 7px;
	}

	.reason-detail__content h2 {
		margin-bottom: 22px;
		font-size: 31px;
	}

	.reason-detail__content>p:not(.reason-detail__number) {
		font-size: 14px;
		line-height: 1.95;
	}

	.reason-check-list {
		grid-template-columns: 1fr;
	}

	.reason-access-box {
		display: grid;
		grid-template-columns: 1fr;
	}

	.reason-continuation__box {
		gap: 30px;
		padding: 40px 24px;
		border-radius: 25px;
	}

	.reason-continuation__number strong {
		font-size: 95px;
	}

	.reason-continuation__content h2 {
		font-size: 31px;
	}

	.reason-cta h2 {
		font-size: 31px;
	}

	.reason-cta>.reason-container>p:not(.reason-en):not(.reason-cta__access) {
		font-size: 14px;
		line-height: 1.9;
	}

	.reason-cta__buttons {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.reason-btn {
		width: 100%;
		min-width: 0;
	}
}



/* =========================================================
   reasonページ 最終レスポンシブ調整
   必ずreason.cssの一番下に追加
========================================================= */

/* タブレット・ノートPC */
@media screen and (min-width: 769px) and (max-width: 1200px) {

	.reason-page .reason-container {
		width: calc(100% - 60px);
	}

	.reason-page .reason-detail__grid {
		grid-template-columns: 1fr 1fr;
		gap: 45px;
	}

	.reason-page .reason-detail__image {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.reason-page .reason-detail__content h2 {
		font-size: clamp(30px, 3.4vw, 40px);
	}

	.reason-page .reason-detail__content>p:not(.reason-detail__number) {
		font-size: 15px;
		line-height: 1.95;
	}

	.reason-page .reason-check-list {
		gap: 10px;
	}

	.reason-page .reason-check-list li {
		padding: 13px 12px 13px 40px;
		font-size: 13px;
	}
}


/* スマートフォン */
@media screen and (max-width: 768px) {

	/* ページ全体 */
	.reason-page {
		width: 100%;
		overflow-x: hidden;
	}

	.reason-page .reason-container {
		display: block;
		width: calc(100% - 30px);
		max-width: none;
		margin-right: auto;
		margin-left: auto;
	}

	/* セクション余白 */
	.reason-page .reason-hero,
	.reason-page .reason-index,
	.reason-page .reason-detail,
	.reason-page .reason-continuation,
	.reason-page .reason-cta {
		padding-top: 65px;
		padding-bottom: 65px;
	}

	/* 詳細を必ず縦並びにする */
	.reason-page .reason-detail__grid,
	.reason-page .reason-detail__grid--reverse {
		display: flex;
		flex-direction: column;
		gap: 32px;
		width: 100%;
	}

	/* REASON02、04、06も画像を上にする */
	.reason-page .reason-detail__grid--reverse .reason-detail__image {
		order: 1;
	}

	.reason-page .reason-detail__grid--reverse .reason-detail__content {
		order: 2;
	}

	.reason-page .reason-detail__grid:not(.reason-detail__grid--reverse) .reason-detail__image {
		order: 1;
	}

	.reason-page .reason-detail__grid:not(.reason-detail__grid--reverse) .reason-detail__content {
		order: 2;
	}

	/* 画像 */
	.reason-page .reason-detail__image {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		margin: 0;
		overflow: hidden;
		border-radius: 35px 6px 35px 6px;
		box-shadow: 0 14px 35px rgba(18, 63, 73, 0.12);
	}

	.reason-page .reason-detail__image img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	/* 写真ごとの表示位置調整 */
	.reason-page #reason02 .reason-detail__image img {
		object-position: center center;
	}

	.reason-page #reason05 .reason-detail__image img {
		object-position: center 30%;
	}

	.reason-page #reason06 .reason-detail__image img {
		object-position: center center;
	}

	/* 文章 */
	.reason-page .reason-detail__content {
		width: 100%;
		min-width: 0;
		padding: 0;
	}

	.reason-page .reason-detail__number {
		margin-bottom: 12px;
		font-size: 12px;
		letter-spacing: 0.16em;
	}

	.reason-page .reason-detail__content h2 {
		margin: 0 0 20px;
		font-size: clamp(27px, 8vw, 32px);
		line-height: 1.55;
		letter-spacing: 0;
		word-break: normal;
		overflow-wrap: anywhere;
	}

	.reason-page .reason-detail__content>p:not(.reason-detail__number) {
		margin-bottom: 15px;
		font-size: 14px;
		line-height: 1.95;
	}

	/* チェック項目 */
	.reason-page .reason-check-list {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
		margin-top: 24px;
	}

	.reason-page .reason-check-list li {
		width: 100%;
		min-width: 0;
		padding: 13px 12px 13px 42px;
		font-size: 13px;
		line-height: 1.7;
	}

	/* アクセス */
	.reason-page .reason-access-box {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
		margin-top: 23px;
	}

	.reason-page .reason-access-box p {
		padding: 16px;
	}

	/* 継続率 */
	.reason-page .reason-continuation .reason-container {
		width: calc(100% - 30px);
	}

	.reason-page .reason-continuation__box {
		display: flex;
		flex-direction: column;
		gap: 28px;
		width: 100%;
		padding: 35px 22px;
		border-radius: 24px;
	}

	.reason-page .reason-continuation__number {
		width: 100%;
		text-align: center;
	}

	.reason-page .reason-continuation__number strong {
		font-size: clamp(82px, 25vw, 105px);
		line-height: 0.9;
	}

	.reason-page .reason-continuation__number span {
		margin-top: 10px;
		font-size: 22px;
	}

	.reason-page .reason-continuation__content {
		width: 100%;
		min-width: 0;
	}

	.reason-page .reason-continuation__content h2 {
		margin-bottom: 20px;
		font-size: clamp(27px, 8vw, 32px);
		line-height: 1.55;
	}

	.reason-page .reason-continuation__content>p:not(.reason-en) {
		font-size: 14px;
		line-height: 1.95;
	}

	.reason-page .reason-continuation__content small {
		font-size: 11px;
		line-height: 1.7;
	}

	/* CTA */
	.reason-page .reason-cta h2 {
		font-size: 29px;
		line-height: 1.55;
	}

	.reason-page .reason-cta__buttons {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
		width: 100%;
	}

	.reason-page .reason-btn {
		width: 100%;
		min-width: 0;
	}
}


/* 小さいスマートフォン */
@media screen and (max-width: 390px) {

	.reason-page .reason-container {
		width: calc(100% - 24px);
	}

	.reason-page .reason-detail__content h2,
	.reason-page .reason-continuation__content h2,
	.reason-page .reason-cta h2 {
		font-size: 27px;
	}

	.reason-page .reason-detail__image {
		border-radius: 28px 5px 28px 5px;
	}
}

/* 見出しをPCで2行に固定 */
.reason-hero__content h2 {
	font-size: clamp(40px, 4.2vw, 68px);
	line-height: 1.35;
	letter-spacing: -0.04em;
}

.reason-hero__line {
	display: block;
	white-space: nowrap;
}

/* スマートフォンは画面幅に合わせる */
@media screen and (max-width: 768px) {

	.reason-hero__content h2 {
		font-size: clamp(31px, 10vw, 43px);
		line-height: 1.45;
	}

	.reason-hero__line {
		white-space: normal;
	}
}

/* PCの見出しを必ず2行にする */
@media screen and (min-width: 769px) {

	.reason-hero .reason-hero__content h2 {
		width: 100% !important;
		max-width: none !important;
		font-size: clamp(48px, 3.5vw, 60px) !important;
		line-height: 1.4 !important;
		letter-spacing: -0.05em !important;
	}

	.reason-hero .reason-hero__content .reason-hero__line {
		display: block !important;
		width: max-content !important;
		max-width: none !important;
		white-space: nowrap !important;
		word-break: keep-all !important;
		overflow-wrap: normal !important;
	}
}

/* PC：見出しを必ず2行にする */
@media screen and (min-width: 1025px) {

	.reason-page .reason-hero .reason-container {
		width: min(1400px, calc(100% - 60px));
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		gap: 60px;
	}

	.reason-page .reason-hero__content {
		min-width: 0;
	}

	.reason-page .reason-hero__title {
		font-size: clamp(36px, 3.25vw, 54px) !important;
		line-height: 1.4 !important;
		letter-spacing: -0.045em !important;
	}

	.reason-page .reason-hero__title .reason-hero__line {
		display: block !important;
		width: auto !important;
		white-space: nowrap !important;
		word-break: keep-all !important;
	}
}

.reason-page .reason-detail {
	position: relative;
	overflow: hidden;
}

/* ========================================
   REASON：西海岸デザイン
======================================== */

.reason-page .reason-detail {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* 文章と写真を装飾より前へ */
.reason-page .reason-detail .reason-container {
	position: relative;
	z-index: 2;
}

/* REASON 01：朝の海 */
.reason-page #reason01 {
	background:
		radial-gradient(circle at 92% 15%,
			rgba(255, 197, 105, 0.28) 0 150px,
			transparent 152px),
		linear-gradient(145deg, #ffffff 35%, #eafafa 100%);
}

/* REASON 02：海と砂浜 */
.reason-page #reason02 {
	background:
		linear-gradient(165deg,
			#e7f9f8 0%,
			#f4ffff 58%,
			#f3e6d2 58.2%,
			#fffaf2 100%);
}

/* REASON 03：ターコイズの海 */
.reason-page #reason03 {
	background:
		radial-gradient(ellipse at -5% 100%,
			rgba(39, 205, 197, 0.22) 0 280px,
			transparent 283px),
		#ffffff;
}

/* REASON 04：砂浜 */
.reason-page #reason04 {
	background:
		radial-gradient(circle at 88% 20%,
			rgba(255, 193, 100, 0.25) 0 125px,
			transparent 128px),
		linear-gradient(135deg, #fffaf1 0%, #ffffff 65%);
}

/* REASON 05：サンセット */
.reason-page #reason05 {
	background:
		linear-gradient(145deg,
			#ffffff 0%,
			#fff5e8 55%,
			#e9fafa 100%);
}

/* REASON 06：海岸線 */
.reason-page #reason06 {
	background:
		radial-gradient(ellipse at 5% 85%,
			rgba(39, 205, 197, 0.2) 0 260px,
			transparent 263px),
		linear-gradient(145deg, #eefafa, #ffffff);
}

/* 背景の大きな英字 */
.reason-page .reason-detail::before {
	position: absolute;
	right: 3%;
	bottom: -35px;
	z-index: 0;
	color: rgba(18, 63, 73, 0.035);
	font-family: Arial, sans-serif;
	font-size: clamp(80px, 11vw, 190px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.06em;
	white-space: nowrap;
	pointer-events: none;
	content: "WEST COAST";
}

/* 偶数セクションは英字を左へ */
.reason-page #reason02::before,
.reason-page #reason04::before,
.reason-page #reason06::before {
	right: auto;
	left: 2%;
}

/* 写真を西海岸風の変形フレームへ */
.reason-page #reason01 .reason-detail__image,
.reason-page #reason03 .reason-detail__image,
.reason-page #reason05 .reason-detail__image {
	border-radius: 90px 12px 90px 12px;
	box-shadow:
		18px 18px 0 rgba(39, 205, 197, 0.12),
		0 25px 55px rgba(18, 63, 73, 0.15);
}

.reason-page #reason02 .reason-detail__image,
.reason-page #reason04 .reason-detail__image,
.reason-page #reason06 .reason-detail__image {
	border-radius: 12px 90px 12px 90px;
	box-shadow:
		-18px 18px 0 rgba(242, 207, 155, 0.22),
		0 25px 55px rgba(18, 63, 73, 0.15);
}

/* REASON番号をサーフショップ風ラベルに */
.reason-page .reason-detail__number {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	margin-bottom: 22px;
	padding: 7px 18px;
	border: 1px solid rgba(16, 158, 153, 0.25);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.75);
	box-shadow: 0 8px 24px rgba(18, 63, 73, 0.08);
	color: #109e99;
	backdrop-filter: blur(8px);
}

/* 見出し左のアクセント */
.reason-page .reason-detail__content h2 {
	position: relative;
	padding-left: 24px;
}

.reason-page .reason-detail__content h2::before {
	position: absolute;
	top: 0.18em;
	bottom: 0.18em;
	left: 0;
	width: 6px;
	border-radius: 10px;
	background: linear-gradient(to bottom,
			#30cec5 0%,
			#30cec5 55%,
			#f2cf9b 55%,
			#f2cf9b 100%);
	content: "";
}

/* 写真を少し動かす */
@media (hover: hover) {
	.reason-page .reason-detail__image img {
		transition: transform 0.8s ease;
	}

	.reason-page .reason-detail:hover .reason-detail__image img {
		transform: scale(1.035);
	}
}

/* スマートフォン調整 */
@media screen and (max-width: 768px) {
	.reason-page .reason-detail::before {
		right: -10px;
		bottom: 5px;
		font-size: 65px;
	}

	.reason-page #reason02::before,
	.reason-page #reason04::before,
	.reason-page #reason06::before {
		left: -10px;
	}

	.reason-page .reason-detail__content h2 {
		padding-left: 17px;
	}

	.reason-page .reason-detail__content h2::before {
		width: 4px;
	}

	.reason-page #reason01 .reason-detail__image,
	.reason-page #reason02 .reason-detail__image,
	.reason-page #reason03 .reason-detail__image,
	.reason-page #reason04 .reason-detail__image,
	.reason-page #reason05 .reason-detail__image,
	.reason-page #reason06 .reason-detail__image {
		border-radius: 45px 8px 45px 8px;
		box-shadow:
			8px 10px 0 rgba(39, 205, 197, 0.1),
			0 15px 35px rgba(18, 63, 73, 0.12);
	}
}

/* ========================================
   6つの理由：西海岸カラー
======================================== */

.reason-page .reason-index {
	position: relative;
	padding: 120px 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 88% 8%,
			rgba(255, 193, 100, 0.45) 0 170px,
			transparent 173px),
		radial-gradient(circle at 4% 95%,
			rgba(32, 200, 195, 0.32) 0 250px,
			transparent 253px),
		linear-gradient(145deg,
			#dff8f6 0%,
			#f0fbf9 48%,
			#f5e7d2 100%) !important;
}

/* 背景の大きな英字 */
.reason-page .reason-index::before {
	position: absolute;
	top: 25px;
	left: 3%;
	color: rgba(18, 63, 73, 0.055);
	font-family: Arial, sans-serif;
	font-size: clamp(70px, 10vw, 170px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.06em;
	white-space: nowrap;
	content: "PACIFIC COAST";
	pointer-events: none;
}

/* 下部の海をイメージした曲線 */
.reason-page .reason-index::after {
	position: absolute;
	right: -8%;
	bottom: -210px;
	width: 65%;
	height: 300px;
	border-radius: 50% 50% 0 0;
	background: rgba(32, 200, 195, 0.14);
	content: "";
	pointer-events: none;
}

.reason-page .reason-index .reason-container {
	position: relative;
	z-index: 2;
}

/* 英字見出し */
.reason-page .reason-index .reason-en {
	color: #078f91;
}

/* カード共通 */
.reason-page .reason-index__card {
	border: 1px solid rgba(255, 255, 255, 0.8);
	background: rgba(255, 255, 255, 0.82);
	box-shadow:
		0 20px 45px rgba(18, 63, 73, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
}

/* カードごとに少し色を変える */
.reason-page .reason-index__card:nth-child(3n + 1) {
	background:
		linear-gradient(145deg,
			rgba(255, 255, 255, 0.95),
			rgba(222, 249, 247, 0.93));
}

.reason-page .reason-index__card:nth-child(3n + 2) {
	background:
		linear-gradient(145deg,
			rgba(255, 255, 255, 0.95),
			rgba(249, 235, 213, 0.93));
}

.reason-page .reason-index__card:nth-child(3n) {
	background:
		linear-gradient(145deg,
			rgba(225, 249, 247, 0.95),
			rgba(255, 255, 255, 0.93));
}

/* カード番号 */
.reason-page .reason-index__card>span {
	color: #12aaa8;
	text-shadow: 3px 3px 0 rgba(255, 205, 125, 0.3);
}

/* カード内の丸い装飾を濃くする */
.reason-page .reason-index__card::after {
	background: rgba(32, 200, 195, 0.17);
}

/* スマートフォン */
@media screen and (max-width: 768px) {
	.reason-page .reason-index {
		padding: 80px 0;
		background:
			radial-gradient(circle at 100% 5%,
				rgba(255, 193, 100, 0.3) 0 90px,
				transparent 92px),
			linear-gradient(160deg,
				#dff8f6 0%,
				#f5eee1 100%) !important;
	}

	.reason-page .reason-index::before {
		top: 20px;
		left: -5px;
		font-size: 58px;
	}

	.reason-page .reason-index::after {
		right: -30%;
		bottom: -230px;
		width: 120%;
	}
}

/* ========================================
   6つの理由：スクロールアニメーション
======================================== */

/* 見出しの初期状態 */
.reason-page .reason-index .reason-heading {
	opacity: 0;
	transform: translateY(35px);
	transition:
		opacity 0.8s ease,
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* カードの初期状態 */
.reason-page .reason-index__card {
	opacity: 0;
	transform: translateY(55px) scale(0.96);
	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s ease,
		border-color 0.3s ease;
}

/* 表示された状態 */
.reason-page .reason-index.is-visible .reason-heading {
	opacity: 1;
	transform: translateY(0);
}

.reason-page .reason-index.is-visible .reason-index__card {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* カードを順番に表示 */
.reason-page .reason-index.is-visible .reason-index__card:nth-child(1) {
	transition-delay: 0.1s;
}

.reason-page .reason-index.is-visible .reason-index__card:nth-child(2) {
	transition-delay: 0.2s;
}

.reason-page .reason-index.is-visible .reason-index__card:nth-child(3) {
	transition-delay: 0.3s;
}

.reason-page .reason-index.is-visible .reason-index__card:nth-child(4) {
	transition-delay: 0.4s;
}

.reason-page .reason-index.is-visible .reason-index__card:nth-child(5) {
	transition-delay: 0.5s;
}

.reason-page .reason-index.is-visible .reason-index__card:nth-child(6) {
	transition-delay: 0.6s;
}

/* PC：カーソルを乗せたとき */
@media (hover: hover) {
	.reason-page .reason-index.is-visible .reason-index__card:hover {
		transform: translateY(-10px) scale(1.02);
		box-shadow: 0 28px 55px rgba(18, 63, 73, 0.18);
	}
}

/* 動きを減らす設定の端末へ配慮 */
@media (prefers-reduced-motion: reduce) {

	.reason-page .reason-index .reason-heading,
	.reason-page .reason-index__card {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ========================================
   6つの理由：ストーリー見出し
======================================== */

.reason-page .reason-heading--story {
	position: relative;
	z-index: 2;
	max-width: 1100px;
	margin: 0 auto 75px;
	text-align: center;
}

.reason-page .reason-heading__small {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 25px;
	color: #078f91;
	font-family: Arial, sans-serif;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.25em;
}

.reason-page .reason-heading__small::before,
.reason-page .reason-heading__small::after {
	width: 45px;
	height: 2px;
	background: #20c8c3;
	content: "";
}

.reason-page .reason-heading__story-title {
	margin: 0;
	color: #073e47;
}

.reason-page .reason-heading__story-title>span {
	display: block;
	margin-bottom: 15px;
	font-size: clamp(24px, 2.5vw, 37px);
	font-weight: 600;
	letter-spacing: 0.05em;
}

.reason-page .reason-heading__story-title>strong {
	display: block;
	font-size: clamp(47px, 6vw, 88px);
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.055em;
}

/* 「夢中」と「また来たくなる」を強調 */
.reason-page .reason-heading__story-title>strong::after {
	display: block;
	width: min(430px, 65%);
	height: 8px;
	margin: 24px auto 0;
	border-radius: 999px;
	background:
		linear-gradient(90deg,
			#20c8c3 0%,
			#20c8c3 68%,
			#f3b45d 68%,
			#f3b45d 100%);
	content: "";
}

.reason-page .reason-heading__story-lead {
	margin: 30px auto 0;
	color: #4d696e;
	font-size: 17px;
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.035em;
}

/* 6つの理由ラベル */
.reason-page .reason-heading__six {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 35px;
	padding: 10px 28px 10px 12px;
	border: 2px solid #073e47;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
	color: #073e47;
	box-shadow: 8px 8px 0 rgba(32, 200, 195, 0.25);
	font-size: 18px;
	font-weight: 800;
}

.reason-page .reason-heading__six strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	background: #073e47;
	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 43px;
	line-height: 1;
}

/* スマートフォン */
@media screen and (max-width: 768px) {
	.reason-page .reason-heading--story {
		margin-bottom: 50px;
		text-align: left;
	}

	.reason-page .reason-heading__small {
		font-size: 10px;
	}

	.reason-page .reason-heading__small::before,
	.reason-page .reason-heading__small::after {
		width: 20px;
	}

	.reason-page .reason-heading__story-title>span {
		font-size: 22px;
	}

	.reason-page .reason-heading__story-title>strong {
		font-size: clamp(40px, 12vw, 55px);
		line-height: 1.28;
	}

	.reason-page .reason-heading__story-title>strong::after {
		width: 75%;
		height: 6px;
		margin: 18px 0 0;
	}

	.reason-page .reason-heading__story-lead {
		margin-top: 25px;
		font-size: 14px;
		line-height: 1.9;
	}

	.reason-page .reason-heading__six {
		gap: 9px;
		margin-top: 28px;
		padding: 8px 18px 8px 8px;
		font-size: 14px;
	}

	.reason-page .reason-heading__six strong {
		width: 52px;
		height: 52px;
		font-size: 35px;
	}
}

/* ========================================
   新しい見出し＋カードのアニメーション
======================================== */

/* JavaScriptが動く場合だけ非表示にする */
.reason-page .reason-index.motion-ready .reason-heading__small,
.reason-page .reason-index.motion-ready .reason-heading__story-title>span,
.reason-page .reason-index.motion-ready .reason-heading__story-title>strong,
.reason-page .reason-index.motion-ready .reason-heading__story-lead,
.reason-page .reason-index.motion-ready .reason-heading__six,
.reason-page .reason-index.motion-ready .reason-index__card {
	opacity: 0;
}

/* 初期位置 */
.reason-page .reason-index.motion-ready .reason-heading__small {
	transform: translateY(-20px);
}

.reason-page .reason-index.motion-ready .reason-heading__story-title>span {
	transform: translateY(25px);
}

.reason-page .reason-index.motion-ready .reason-heading__story-title>strong {
	transform: translateY(45px);
}

.reason-page .reason-index.motion-ready .reason-heading__story-lead {
	transform: translateY(30px);
}

.reason-page .reason-index.motion-ready .reason-heading__six {
	transform: translateY(25px) scale(0.9);
}

.reason-page .reason-index.motion-ready .reason-index__card {
	transform: translateY(55px) scale(0.96);
}

/* 共通アニメーション */
.reason-page .reason-index.motion-ready .reason-heading__small,
.reason-page .reason-index.motion-ready .reason-heading__story-title>span,
.reason-page .reason-index.motion-ready .reason-heading__story-title>strong,
.reason-page .reason-index.motion-ready .reason-heading__story-lead,
.reason-page .reason-index.motion-ready .reason-heading__six,
.reason-page .reason-index.motion-ready .reason-index__card {
	transition:
		opacity 0.75s ease,
		transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 表示後 */
.reason-page .reason-index.motion-ready.is-visible .reason-heading__small,
.reason-page .reason-index.motion-ready.is-visible .reason-heading__story-title>span,
.reason-page .reason-index.motion-ready.is-visible .reason-heading__story-title>strong,
.reason-page .reason-index.motion-ready.is-visible .reason-heading__story-lead,
.reason-page .reason-index.motion-ready.is-visible .reason-heading__six,
.reason-page .reason-index.motion-ready.is-visible .reason-index__card {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* 見出しを順番に表示 */
.reason-page .reason-index.is-visible .reason-heading__small {
	transition-delay: 0.05s;
}

.reason-page .reason-index.is-visible .reason-heading__story-title>span {
	transition-delay: 0.15s;
}

.reason-page .reason-index.is-visible .reason-heading__story-title>strong {
	transition-delay: 0.28s;
}

.reason-page .reason-index.is-visible .reason-heading__story-lead {
	transition-delay: 0.42s;
}

.reason-page .reason-index.is-visible .reason-heading__six {
	transition-delay: 0.55s;
}

/* カードを順番に表示 */
.reason-page .reason-index.is-visible .reason-index__card:nth-child(1) {
	transition-delay: 0.65s;
}

.reason-page .reason-index.is-visible .reason-index__card:nth-child(2) {
	transition-delay: 0.75s;
}

.reason-page .reason-index.is-visible .reason-index__card:nth-child(3) {
	transition-delay: 0.85s;
}

.reason-page .reason-index.is-visible .reason-index__card:nth-child(4) {
	transition-delay: 0.95s;
}

.reason-page .reason-index.is-visible .reason-index__card:nth-child(5) {
	transition-delay: 1.05s;
}

.reason-page .reason-index.is-visible .reason-index__card:nth-child(6) {
	transition-delay: 1.15s;
}

/* PCのホバー */
@media (hover: hover) {
	.reason-page .reason-index.is-visible .reason-index__card:hover {
		transform: translateY(-10px) scale(1.02);
		box-shadow: 0 28px 55px rgba(18, 63, 73, 0.18);
	}
}

/* 動きを減らす設定への対応 */
@media (prefers-reduced-motion: reduce) {

	.reason-page .reason-index.motion-ready .reason-heading__small,
	.reason-page .reason-index.motion-ready .reason-heading__story-title>span,
	.reason-page .reason-index.motion-ready .reason-heading__story-title>strong,
	.reason-page .reason-index.motion-ready .reason-heading__story-lead,
	.reason-page .reason-index.motion-ready .reason-heading__six,
	.reason-page .reason-index.motion-ready .reason-index__card {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ========================================
   サメ：右下から泳ぐアニメーション
======================================== */

.reason-page .reason-index__card {
	position: relative;
	padding-bottom: 92px;
	overflow: hidden;
}

/* サメの通常位置 */
.reason-page .reason-index__card::after {
	position: absolute;
	right: 15px;
	bottom: 10px;
	z-index: 1;
	width: 130px;
	height: 88px;
	border-radius: 0;
	background:
		url("../img/shark-heading-icon.png") no-repeat center / contain;
	content: "";
	opacity: 0.11;
	filter: grayscale(1);
	transform: translateX(0) rotate(-4deg);
	transform-origin: 70% 50%;
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
	pointer-events: none;
}

/* 文章をサメより前へ */
.reason-page .reason-index__card>span,
.reason-page .reason-index__card h3,
.reason-page .reason-index__card p {
	position: relative;
	z-index: 2;
}

/* PC：カーソルを置くと泳ぎ出す */
@media (hover: hover) {
	.reason-page .reason-index__card:hover::after {
		opacity: 0.23;
		animation: shark-swim 1.7s ease-in-out infinite;
	}
}

/* 左へ泳ぎながら少し上下する */
@keyframes shark-swim {
	0% {
		transform:
			translateX(0) translateY(0) rotate(-4deg) scale(1);
	}

	25% {
		transform:
			translateX(-15px) translateY(-4px) rotate(-1deg) scale(1.03);
	}

	50% {
		transform:
			translateX(-32px) translateY(2px) rotate(-5deg) scale(1.05);
	}

	75% {
		transform:
			translateX(-17px) translateY(5px) rotate(-2deg) scale(1.03);
	}

	100% {
		transform:
			translateX(0) translateY(0) rotate(-4deg) scale(1);
	}
}

/* スマートフォンは常にゆっくり泳ぐ */
@media screen and (max-width: 768px) {
	.reason-page .reason-index__card {
		padding-bottom: 78px;
	}

	.reason-page .reason-index__card::after {
		right: 8px;
		bottom: 5px;
		width: 105px;
		height: 72px;
		opacity: 0.1;
		animation: shark-swim-sp 4.5s ease-in-out infinite;
	}

	/* カードごとに動き出す時間をずらす */
	.reason-page .reason-index__card:nth-child(2)::after {
		animation-delay: -0.8s;
	}

	.reason-page .reason-index__card:nth-child(3)::after {
		animation-delay: -1.6s;
	}

	.reason-page .reason-index__card:nth-child(4)::after {
		animation-delay: -2.4s;
	}

	.reason-page .reason-index__card:nth-child(5)::after {
		animation-delay: -3.2s;
	}

	.reason-page .reason-index__card:nth-child(6)::after {
		animation-delay: -4s;
	}
}

/* スマートフォン用：控えめな動き */
@keyframes shark-swim-sp {

	0%,
	100% {
		transform:
			translateX(0) translateY(0) rotate(-4deg);
	}

	50% {
		transform:
			translateX(-18px) translateY(-3px) rotate(-1deg);
	}
}

/* 動きを減らす設定への対応 */
@media (prefers-reduced-motion: reduce) {
	.reason-page .reason-index__card::after {
		animation: none !important;
		transform: none;
	}
}

/* ========================================
   横長カード＋泳ぐサメ
======================================== */

/* PC：カードエリアを広げる */
.reason-page .reason-index .reason-container {
	width: min(1480px, calc(100% - 60px));
}

.reason-page .reason-index__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

/* カードを横長にする */
.reason-page .reason-index__card {
	min-height: 315px !important;
	height: auto;
	padding: 32px 32px 72px;
}

/* サメの通常位置 */
.reason-page .reason-index__card::after {
	right: 18px;
	bottom: 3px;
	width: 120px;
	height: 72px;
}

/* PC：カーソルを乗せると泳ぐ */
@media (hover: hover) {
	.reason-page .reason-index__card:hover::after {
		opacity: 0.23;
		animation: shark-swim 1.7s ease-in-out infinite;
	}
}

/* サメの泳ぐ動き */
@keyframes shark-swim {

	0%,
	100% {
		transform:
			translateX(0) translateY(0) rotate(-4deg) scale(1);
	}

	25% {
		transform:
			translateX(-15px) translateY(-4px) rotate(-1deg) scale(1.03);
	}

	50% {
		transform:
			translateX(-32px) translateY(2px) rotate(-5deg) scale(1.05);
	}

	75% {
		transform:
			translateX(-17px) translateY(5px) rotate(-2deg) scale(1.03);
	}
}

/* タブレット：2列 */
@media screen and (max-width: 1150px) {
	.reason-page .reason-index .reason-container {
		width: min(920px, calc(100% - 40px));
	}

	.reason-page .reason-index__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.reason-page .reason-index__card {
		min-height: 290px !important;
	}
}

/* スマートフォン */
@media screen and (max-width: 768px) {
	.reason-page .reason-index .reason-container {
		width: calc(100% - 28px);
	}

	.reason-page .reason-index__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.reason-page .reason-index__card {
		min-height: 250px !important;
		padding: 27px 25px 65px;
	}

	.reason-page .reason-index__card::after {
		right: 10px;
		bottom: 2px;
		width: 100px;
		height: 65px;
		opacity: 0.1;
		animation: shark-swim-sp 4.5s ease-in-out infinite;
	}

	/* サメが一斉に動かないようにする */
	.reason-page .reason-index__card:nth-child(2)::after {
		animation-delay: -0.8s;
	}

	.reason-page .reason-index__card:nth-child(3)::after {
		animation-delay: -1.6s;
	}

	.reason-page .reason-index__card:nth-child(4)::after {
		animation-delay: -2.4s;
	}

	.reason-page .reason-index__card:nth-child(5)::after {
		animation-delay: -3.2s;
	}

	.reason-page .reason-index__card:nth-child(6)::after {
		animation-delay: -4s;
	}
}

/* スマートフォン用のゆっくりした泳ぎ */
@keyframes shark-swim-sp {

	0%,
	100% {
		transform:
			translateX(0) translateY(0) rotate(-4deg);
	}

	50% {
		transform:
			translateX(-18px) translateY(-3px) rotate(-1deg);
	}
}

/* 動きを減らす設定への対応 */
@media (prefers-reduced-motion: reduce) {
	.reason-page .reason-index__card::after {
		animation: none !important;
	}
}

/* ========================================
   3列カード：見出しと説明文のバランス調整
======================================== */

@media screen and (min-width: 1101px) {

	/* カードエリア */
	.reason-page .reason-index .reason-container {
		width: min(1560px, calc(100% - 70px)) !important;
		max-width: none !important;
	}

	/* 3列×2段 */
	.reason-page .reason-index__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 26px !important;
	}

	/* カードの高さを抑える */
	.reason-page .reason-index__card {
		min-height: 295px !important;
		height: 295px !important;
		padding: 27px 22px 68px !important;
	}

	/* 番号 */
	.reason-page .reason-index__card>span {
		margin-bottom: 18px !important;
		font-size: 43px !important;
	}

	/* 見出しを1行に固定 */
	.reason-page .reason-index__card h3 {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 35px;
		margin: 0 0 16px !important;
		padding: 0;
		font-size: clamp(17px, 1.2vw, 21px) !important;
		line-height: 1.35 !important;
		letter-spacing: -0.04em;
		white-space: nowrap !important;
		word-break: keep-all !important;
	}

	/* 説明文の幅と行間を統一 */
	.reason-page .reason-index__card p {
		max-width: 390px;
		margin: 0 auto !important;
		font-size: 14px !important;
		line-height: 1.75 !important;
		letter-spacing: 0.01em;
		text-align: center;
	}

	/* サメのスペースを取りすぎない */
	.reason-page .reason-index__card::after {
		right: 12px;
		bottom: 0;
		width: 110px;
		height: 65px;
	}
}

/* ========================================
   継続率：ブランド訴求デザイン
======================================== */

.reason-page .reason-continuation {
	position: relative;
	padding: 130px 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 88% 12%,
			rgba(244, 181, 91, 0.25) 0 190px,
			transparent 193px),
		linear-gradient(135deg,
			#052f38 0%,
			#074a53 50%,
			#0ca8a5 100%);
}

/* 背景の巨大文字 */
.reason-page .reason-continuation::before {
	position: absolute;
	top: -40px;
	left: -20px;
	color: rgba(255, 255, 255, 0.035);
	font-family: Arial, sans-serif;
	font-size: clamp(130px, 19vw, 330px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.08em;
	white-space: nowrap;
	content: "KEEP GOING";
	pointer-events: none;
}

.reason-page .reason-continuation__box {
	position: relative;
	z-index: 2;
	display: grid;
	align-items: center;
	grid-template-columns: 0.78fr 1.22fr;
	gap: 80px;
	padding: 75px 85px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 70px 15px 70px 15px;
	background: rgba(4, 47, 56, 0.75);
	box-shadow:
		22px 22px 0 rgba(32, 200, 195, 0.2),
		0 35px 80px rgba(0, 20, 25, 0.35);
	backdrop-filter: blur(14px);
}

/* 背景のサメ */
.reason-page .reason-continuation__box::before {
	position: absolute;
	left: 25px;
	bottom: -20px;
	width: 380px;
	height: 250px;
	background:
		url("../img/shark-heading-icon.png") no-repeat center / contain;
	content: "";
	opacity: 0.055;
	filter: grayscale(1) brightness(5);
	transform: rotate(-7deg);
	pointer-events: none;
}

/* 数字側 */
.reason-page .reason-continuation__number {
	position: relative;
	z-index: 2;
	text-align: center;
}

.reason-page .reason-continuation__label {
	display: inline-block;
	margin: 0 0 15px;
	padding: 7px 17px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.07em;
}

.reason-page .reason-continuation__percentage {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

/* 大きな65 */
.reason-page .reason-continuation__percentage strong {
	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(145px, 14vw, 225px);
	font-weight: 700;
	line-height: 0.82;
	letter-spacing: -0.09em;
	text-shadow:
		8px 9px 0 rgba(32, 200, 195, 0.35),
		0 25px 45px rgba(0, 0, 0, 0.25);
}

/* % */
.reason-page .reason-continuation__percentage span {
	margin: 5px 0 0 12px;
	color: #f4b55b;
	font-family: Arial, sans-serif;
	font-size: 55px;
	font-weight: 900;
	line-height: 1;
}

/* OVER */
.reason-page .reason-continuation__over {
	margin: 20px 0 0;
	color: #ffffff;
	font-family: Arial, sans-serif;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: 0.5em;
}

/* 文章側 */
.reason-page .reason-continuation__content {
	position: relative;
	z-index: 2;
}

.reason-page .reason-continuation__content .reason-en {
	color: #66e3df;
}

/* メインコピー */
.reason-page .reason-continuation__content h2 {
	margin: 0 0 30px;
	color: #ffffff;
	line-height: 1.3;
}

.reason-page .reason-continuation__content h2 span {
	display: block;
	margin-bottom: 8px;
	font-size: clamp(26px, 2.5vw, 39px);
	font-weight: 600;
}

.reason-page .reason-continuation__content h2 strong {
	display: block;
	color: #ffffff;
	font-size: clamp(47px, 5vw, 76px);
	font-weight: 900;
	letter-spacing: -0.05em;
}

/* オレンジのライン */
.reason-page .reason-continuation__content h2 strong::after {
	display: block;
	width: 230px;
	height: 7px;
	margin-top: 20px;
	border-radius: 999px;
	background: linear-gradient(90deg,
			#20c8c3 0%,
			#20c8c3 68%,
			#f4b55b 68%,
			#f4b55b 100%);
	content: "";
}

.reason-page .reason-continuation__content p:not(.reason-en, .reason-continuation__lead) {
	margin: 17px 0 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 15px;
	line-height: 1.9;
}

.reason-page .reason-continuation__lead {
	margin: 0;
	color: #ffffff;
	font-size: 17px;
	font-weight: 600;
	line-height: 2;
}

.reason-page .reason-continuation__content small {
	display: block;
	margin-top: 22px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
}

/* スマートフォン */
@media screen and (max-width: 768px) {
	.reason-page .reason-continuation {
		padding: 80px 0;
	}

	.reason-page .reason-continuation__box {
		grid-template-columns: 1fr;
		gap: 45px;
		padding: 50px 25px;
		border-radius: 45px 10px 45px 10px;
	}

	.reason-page .reason-continuation__percentage strong {
		font-size: 135px;
	}

	.reason-page .reason-continuation__percentage span {
		font-size: 40px;
	}

	.reason-page .reason-continuation__content h2 strong {
		font-size: 43px;
	}

	.reason-page .reason-continuation__lead {
		font-size: 14px;
		line-height: 1.9;
	}

	.reason-page .reason-continuation__lead br {
		display: none;
	}

	.reason-page .reason-continuation__box::before {
		left: -30px;
		bottom: 10px;
		width: 240px;
		height: 150px;
	}
}