@charset "UTF-8";

/*
 * 資料請求ページ（page-request.php）のスタイル。
 *
 * メインビジュアルと Q&A は page-first.css、
 * 入力欄まわりは page-consult.css を流用しているため、
 * functions.php で 'first-time' と 'consult' を extends に指定している。
 *
 * モバイルファースト。PC は 840px 以上。
 */

.p-request {
	--r-cream: #fdf5f1;      /* セクション背景のうすいオレンジ */
	--r-rule: #e8b87f;       /* 「声」の見出し上下の細い線 */
}

/* --------------------------------------------------------------------------
   メインビジュアルのボタン（冊子アイコンつき）
   -------------------------------------------------------------------------- */
.p-request__mv-icon {
	flex: 0 0 auto;
	display: block;
	margin-right: 8px;
	line-height: 0;
}

.p-request__mv-icon img,
.p-request__mv-icon .img-slot--empty {
	width: 16px;
	height: auto;
	aspect-ratio: 21 / 27;
}

/* --------------------------------------------------------------------------
   1. このような方は結婚物語。のサポートがおすすめ。
   -------------------------------------------------------------------------- */
.p-request__recommend {
	position: relative;
	padding: 48px 0 0;
	/* 上から下へ、白 → うすいオレンジ */
	background: linear-gradient(180deg, #fff 0%, var(--r-cream) 28%, var(--r-cream) 100%);
	/* ぼかし円がはみ出しても横スクロールさせない */
	overflow: hidden;
}

/*
 * 背景の白いぼかし円。
 * 画像ではなく CSS のグラデーションで描いている。
 */
.p-request__glow {
	position: absolute;
	top: 32%;
	z-index: 0;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%);
	filter: blur(24px);
	pointer-events: none;
}

.p-request__glow--left {
	left: -14%;
	width: clamp(180px, 50vw, 368px);
}

.p-request__glow--right {
	right: -14%;
	width: clamp(140px, 38vw, 275px);
}

.p-request__recommend-inner {
	position: relative;
	z-index: 1;
}

.p-request__recommend-title {
	font-size: 22px;
}

.p-request__recommend-image {
	margin-top: 24px;
}

.p-request__recommend-image img,
.p-request__recommend-image .img-slot--empty {
	display: block;
	width: 100%;
	height: auto;
	margin-inline: auto;
	object-fit: contain;
}

.p-request__recommend-image--sp img,
.p-request__recommend-image--sp .img-slot--empty {
	aspect-ratio: 343 / 520;
}

.p-request__recommend-image--pc img,
.p-request__recommend-image--pc .img-slot--empty {
	max-width: 961px;
	aspect-ratio: 961 / 491;
}

/* SP用に別の画像を書き出す前提。PC / SP で出し分ける */
.p-request__recommend-image--pc {
	display: none;
}

/* セクション下のウェーブは、画像と重ならないよう少し下げる */
.p-request__recommend .c-wave-divider {
	position: relative;
	z-index: 1;
	margin-top: 24px;
}

/* --------------------------------------------------------------------------
   2. 資料の中身を少しだけご紹介。
   -------------------------------------------------------------------------- */
.p-request__preview {
	padding: 40px 0 48px;
	background-color: var(--color-bg);
}

.p-request__preview-title {
	font-size: 22px;
}

.p-request__carousel {
	margin-top: 28px;
}

/*
 * 横スクロールする入れ物。
 * scroll-snap で1枚ずつ中央に止まるので、JavaScript が動かなくても
 * 指でスワイプすれば閲覧できる。
 */
.p-request__slides {
	/* 中央以外を小さく見せる倍率。左右の食い込み量もここから決まる */
	--slide-w: min(300px, 78vw);
	--side-scale: .88;

	position: relative;
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* 端のスライドも中央に来られるよう、左右に余白をとる */
	padding-inline: calc(50% - var(--slide-w) / 2);
	/* スクロールバーは隠す（指やドット操作で足りるため） */
	scrollbar-width: none;
}

.p-request__slides::-webkit-scrollbar {
	display: none;
}

.p-request__slides:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
}

.p-request__slide {
	flex: 0 0 var(--slide-w);
	scroll-snap-align: center;
	/*
	 * 中央以外は少し小さく見せる。
	 * 幅ではなく transform を変えることで、スクロール中に
	 * 他のスライドの位置がずれないようにしている。
	 */
	transform: scale(var(--side-scale));
	opacity: .85;
	transition: transform .3s ease, opacity .3s ease;
	/*
	 * 縮めたぶんだけ左右に食い込ませ、デザインどおり
	 * 隣のページが中央のページに寄り添うようにする。
	 */
	margin-inline: calc(var(--slide-w) * (var(--side-scale) - 1) / 2);
}

.p-request__slide.is-active {
	/* 中央のページは等倍で、隣より手前に出す */
	transform: none;
	opacity: 1;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.p-request__slide {
		transition: none;
	}
}

.p-request__slide-figure {
	margin: 0;
	padding: 12px;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .1);
}

.p-request__slide-image {
	position: relative;
}

.p-request__slide-image img,
.p-request__slide-image .img-slot--empty {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 470 / 333;
	object-fit: cover;
	border-radius: 2px;
}

/* 表紙だけに付く吹き出し */
.p-request__slide-badge {
	position: absolute;
	left: 8px;
	top: 8px;
	padding: 10px 12px;
	border-radius: 999px;
	background-color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	font-size: 10px;
	line-height: 1.5;
	text-align: center;
	color: var(--color-text);
}

.p-request__slide-caption {
	margin-top: 10px;
	/* 説明文がまだのページでも高さが変わらないようにする */
	min-height: 2.6em;
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
	color: var(--color-text-muted);
}

.p-request__slide.is-cover .p-request__slide-caption {
	font-size: 13px;
	color: var(--color-text);
}

/* --- 下の丸い印 --- */
.p-request__dots {
	display: flex;
	justify-content: center;
	gap: 23px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.p-request__dot {
	display: block;
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #dcdcdc;
	cursor: pointer;
	transition: background-color .2s linear;
}

/* 見た目の点は 9px のまま、押せる範囲だけを 25px 四方に広げる（点どうしの間隔 23px より内側） */
.p-request__dot {
	position: relative;
}

.p-request__dot::before {
	content: "";
	position: absolute;
	inset: -8px;
}

.p-request__dot.is-current {
	background-color: var(--color-primary);
}

.p-request__dot:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}
/* --- カルーセル左右ボタン --- */
.p-request__carousel {
	position: relative;
}

.p-request__carousel-button {
	position: absolute;
	top: 50%;
	z-index: 10;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;
	padding: 0;

	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .15);

	font-size: 19px;
	line-height: 1;
	color: var(--color-primary);

	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity .2s ease;
}

.p-request__carousel-button:hover {
	opacity: .8;
}

.p-request__carousel-button--prev {
	left: 10px;
}

.p-request__carousel-button--next {
	right: 10px;
}

.p-request__carousel-button:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

@media (max-width: 839px) {
	.p-request__carousel-button {
		width: 42px;
		height: 42px;
		font-size: 19px;
	}

	.p-request__carousel-button--prev {
		left: 4px;
	}

	.p-request__carousel-button--next {
		right: 4px;
	}
}
/* =========================================================
   資料カルーセル 左右ボタン
   ========================================================= */

   .p-request__carousel {
	position: relative;
}

.p-request__carousel-button {
	position: absolute;
	top: 50%;
	z-index: 10;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 46px;
	height: 46px;
	padding: 0;

	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .15);

	color: var(--color-primary);
	font-size: 19px;
	line-height: 1;

	cursor: pointer;
	transform: translateY(-50%);
}

.p-request__carousel-button--prev {
	left: 12px;
}

.p-request__carousel-button--next {
	right: 12px;
}

.p-request__carousel-button:hover {
	opacity: .8;
}

@media (max-width: 839px) {
	.p-request__carousel-button {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}

	.p-request__carousel-button--prev {
		left: 4px;
	}

	.p-request__carousel-button--next {
		right: 4px;
	}
}
/* --------------------------------------------------------------------------
   3. ご入会された方の声
   -------------------------------------------------------------------------- */
.p-request__voices {
	padding: 48px 0;
	background-color: var(--r-cream);
}

/*
 * SP では縦に1列。
 * カードの高さは中身に合わせる（grid の既定で伸びないよう align-items を指定）。
 */
.p-request__voice-list {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: 20px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.p-request__voice {
	padding: 24px 20px;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

.p-request__voice-head {
	display: flex;
	align-items: center;
	gap: 13px;
}

.p-request__voice-photo {
	flex: 0 0 auto;
}

.p-request__voice-photo img,
.p-request__voice-photo .img-slot--empty {
	display: block;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}

.p-request__voice-name {
	margin: 0;
	font-size: 18px;
	line-height: 1.4;
}

/* 活動期間・入会理由 */
.p-request__voice-meta {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 6px 10px;
	margin: 10px 0 0;
}

.p-request__voice-meta dt {
	padding: 2px 9px;
	border-radius: 999px;
	background-color: var(--voice-accent);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	color: #fff;
}

.p-request__voice-meta dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.p-request__voice-title {
	margin: 20px 0 0;
	padding: 15px 0;
	border-top: 1px solid var(--voice-accent);
	border-bottom: 1px solid var(--voice-accent);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

.p-request__voice-body {
	margin: 20px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-body);
}
/* ご入会された方の声：カードごとのアクセントカラー */

/* 1枚目 */
.p-request__voice--1 {
	--voice-accent: #FAA41D;
}

/* 2枚目 */
.p-request__voice--2 {
	--voice-accent: #F1801C;
}

/* 3枚目 */
.p-request__voice--3 {
	--voice-accent: #E54600;
}

/* --------------------------------------------------------------------------
   4. 資料を申し込む
   -------------------------------------------------------------------------- */
.p-request__apply {
	background-color: var(--color-bg);
}

/* --------------------------------------------------------------------------
   PC（840px 以上）
   -------------------------------------------------------------------------- */
@media (min-width: 840px) {

	/* --- 1. おすすめ --- */
	.p-request__recommend {
		padding-top: 100px;
	}

	.p-request__glow {
		top: 287px;
	}

	.p-request__glow--left {
		left: 174px;
		width: 368px;
	}

	.p-request__glow--right {
		right: 153px;
		width: 275px;
	}

	.p-request__recommend-title {
		font-size: 25px;
	}

	.p-request__recommend-image {
		margin-top: 41px;
	}

	.p-request__recommend-image--pc {
		display: block;
	}

	.p-request__recommend-image--sp {
		display: none;
	}

	/* デザインどおり、画像の足元に少しだけ重ねる */
	.p-request__recommend .c-wave-divider {
		margin-top: -150px;
	}

	/* --- 2. 資料の中身 --- */
	.p-request__preview {
		padding: 50px 0 60px;
	}

	.p-request__preview-title {
		font-size: 25px;
	}

	.p-request__carousel {
		margin-top: 47px;
	}

	.p-request__slides {
		--slide-w: 500px;
		--side-scale: .715;
	}

	.p-request__slide-figure {
		padding: 16px;
	}

	.p-request__slide-badge {
		left: 7px;
		top: 8px;
		padding: 14px 16px;
		font-size: 12px;
	}

	.p-request__slide-caption {
		margin-top: 12px;
		font-size: 13px;
	}

	.p-request__slide.is-cover .p-request__slide-caption {
		font-size: 16px;
	}

	.p-request__dots {
		margin-top: 47px;
	}

	/* --- 3. 声 --- */
	.p-request__voices {
		padding: 100px 0;
	}

	/* PC は3列。高さはそろえたいので伸ばす */
	.p-request__voice-list {
		grid-template-columns: repeat(3, 1fr);
		align-items: stretch;
		gap: 26px;
		margin-top: 43px;
	}

	.p-request__voice {
		padding: 32px 25px;
	}

	.p-request__voice-photo img,
	.p-request__voice-photo .img-slot--empty {
		width: 103px;
		height: 103px;
	}

	.p-request__voice-name {
		font-size: 17px;
	}

	.p-request__voice-meta {
		margin-top: 13px;
	}

	.p-request__voice-meta dt {
		font-size: 12px;
	}

	.p-request__voice-meta dd {
		font-size: 16px;
	}

	.p-request__voice-title {
		margin-top: 25px;
		padding: 15px 0;
		font-size: 17px;
	}

	.p-request__voice-body {
		margin-top: 25px;
		font-size: 16px;
	}
}