@charset "UTF-8";

/**************************************************
ローディング
**************************************************/
body:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--color-body-bg);
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 10000;
	animation: slideDown 0.4s ease 1.5s forwards;
	pointer-events: none;
}

@keyframes slideDown {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(100%);
	}
}

/* ロゴ*/
body:before {
	content: "";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;

	background-image: url(../img/common/loading.svg);
	background-size: clamp(300px, 30vw, 400px) auto;
	background-repeat: no-repeat;
	background-position: center;

	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 10001;
	color: white;
	font-size: 2rem;
	font-weight: bold;
	opacity: 0;
	animation: logoFadeIn 0.4s ease forwards, logoFadeOut 0.1s ease 1.5s forwards;
	pointer-events: none;
}

/* ロゴフェードイン */
@keyframes logoFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ロゴフェードアウト */
@keyframes logoFadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}


/**************************************************
MV
**************************************************/
.mv {
	margin-top: 0;
	padding-bottom: clamp(26px, 6vw, 80px);
	overflow-x: clip;
	background-image: var(--bg-grid-white), url(../img/top/mv_bg_sp.webp);
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
}

.mv__content {
	padding-top: 120px;
	z-index: 1000;
}

.mv__heading {
	margin-inline: auto;
}

.mv__heading img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
}

.mv__heading ._text01 {
	display: block;
	width: 90%;
}

.mv__heading ._text02 {
	display: block;
	width: 100%;
	margin-top: 16px;
}

.mv__lead {
	color: var(--color-white);
	font-size: clamp(14px, 1.5vw, 24px);
	font-weight: 500;
	line-height: 1.5;
	margin-top: 32px;
	width: fit-content;
	margin-inline: auto;
	/* text-align-last: justify; */
	text-justify: inter-ideograph;
}

.mv__button a {
	margin-top: clamp(20px, 3.3vw, 48px);
	margin-inline: auto;
}

/* ニュース */
.mv__news {
	z-index: 100;
}

.mv__news h3 {
	display: inline-block;
	color: var(--color-white);
	font-size: clamp(16px, 2vw, 24px);
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	background: var(--color-red);
	padding: 10px 16px;
	border: solid 3px var(--color-black);
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	font-family: var(--font-en);
}

.mv__news dl {
	background: var(--color-white);
	border-radius: 0 8px 8px 8px;
	border: solid 3px var(--color-black);
	padding: 12px 16px;
	max-width: 580px;
}

/* メインイメージ */
.mv__image {
	z-index: 100;
	scale: 1.1;
	transform: translateX(2%);
}

/* Smartphone-only adjustment for MV image */
@media (max-width: 767px) {
	.mv__image {
		z-index: 100;
		scale: 1.3;
		transform: translateX(10%);
	}
}

.mv__image figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center right;
}


@keyframes floating01 {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-5%);
	}
}

@keyframes floating02 {

	0%,
	100% {
		transform: translateY(-5%);
	}

	50% {
		transform: translateY(0px);
	}
}

@keyframes floating03 {

	0%,
	100% {
		transform: translateY(-7%);
	}

	50% {
		transform: translateY(0px);
	}
}

.mv__image p {
	position: absolute;
	display: inline-block;
}

.mv__image p._img01 {
	width: 20%;
	top: 69.29%;
	left: 59.29%;
	animation: floating01 3s ease-in-out infinite;
}

.mv__image p._img02 {
	width: 20%;
	top: 19.29%;
	left: 63.24%;
	animation: floating01 3s ease infinite;
}

.mv__image p._img03 {
	width: 20%;
	top: 60.36%;
	left: 7.91%;
	animation: floating01 3s ease infinite;
}

.mv__image p._img04 {
	width: 20%;
	top: 24.64%;
	left: 13.83%;
	animation: floating03 3s ease infinite;
	transform: translateY(-7%);
}

.mv__image p._img05 {
	width: 30%;
	top: 69.29%;
	left: -3.95%;
	animation: floating03 3s ease-in-out infinite;
	transform: translateY(-7%);
}



@media (min-width:768px) {
	.mv {
		background-image: var(--bg-grid-white), url(../img/top/mv_bg.webp);
		position: relative;
	}

	.mv__content {
		padding-top: 230px;
	}

	.mv__heading {
		width: 100%;
		max-width: 600px;
		width: 45vw;
		margin-inline: unset;
	}

	.mv__lead {
		width: unset;
		margin-inline: unset;
		text-align-last: unset;
		text-justify: unset;
		letter-spacing: 0.05em;
	}

	.mv__button a {
		margin-inline: unset;
	}

	.mv__news {
		margin-top: clamp(10px, 5vw, 92px);
	}

	.mv__news dl {
		max-width: 580px;
		width: 45vw;
	}

	.mv__news dl div {
		display: flex;
	}

	.mv__news dl div dt {
		width: 8em;
		flex-shrink: 0;
	}

	.mv__image {
		scale: 1;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		max-width: 1500px;
		height: 100%;
		margin-inline: auto;
	}

	.mv__image-inner {
		width: 55%;
		height: 100%;
		margin-left: auto;
		display: grid;
		place-items: center;
	}

	.mv__image figure {
		height: 100%;
		aspect-ratio: 506 / 560;
	}

	.mv__image figure img {
		width: 100%;
		height: 100%;
		object-position: right center;
		object-fit: contain;
	}
}



/**************************************************
About
**************************************************/
.about {
	margin-block: clamp(64px, 6vw, 80px);
}

.about__inner {
	background-color: var(--color-white);
	margin-top: clamp(16px, 4vw, 40px);
	border-radius: 36px;
}

/* Align About H2 (logo + text) to the bottom */
#about .about__heading h2 {
	display: inline-flex;
	align-items: flex-end;
}

#about .about__heading h2 img {
	display: block;
	/* remove inline descender space */
}

.about__lead {
	padding: clamp(30px, 3.3vw, 40px);
	font-weight: 500;
	font-size: clamp(16px, 2vw, 24px);
	line-height: 1.5;
	text-align: left;
	width: fit-content;
	margin-inline: auto;
	letter-spacing: 0.05em;
}


.about__table {
	padding-top: 40px;
	border-top: solid 3px var(--color-black);
}

.about__table-inner {
	display: flex;
	gap: 6px;
	width: fit-content;
	margin-inline: auto;
	padding-bottom: 70px;
	white-space: nowrap;
}

.about__table-inner img {
	display: block;
	width: 1.5em;
	height: 1.5em;
}

.about__table-inner p {
	text-align: center;
	background-color: var(--color-red);
	color: var(--color-white);
	font-weight: 500;
	height: 4.5em;
	padding-inline: 1.5em;
	font-size: clamp(12px, 1vw, 16px);
	display: grid;
	align-content: center;
	gap: 4px;
	margin: 0;
}

/* Table cell color overrides */
.about__table-inner ._tategata p {
	background-color: var(--color-red);
	color: var(--color-white);
	border-radius: 2px;
}

.about__table-inner ._jyurai p {
	background-color: var(--color-gray);
	color: var(--color-black);
	border-radius: 2px;
}

.about__table-inner p img {
	margin-inline: auto;
	width: 20px;
	height: 20px;
	object-fit: contain;
	object-position: center;
}

.about__table-inner ._head p {
	background-color: var(--color-gray);
	color: var(--color-red);
	font-weight: 700;
	border-radius: 2px;
}

/* --- specific corner rounding for requested cells --- */
/* 価格（_head 最初の p）：左上を10px */
.about__table-inner ._head p:nth-of-type(1) {
	border-top-left-radius: 10px;
}

/* 拡散力（_head 4番目の p）：左下を10px */
.about__table-inner ._head p:nth-of-type(4) {
	border-bottom-left-radius: 10px;
}

/* ショート動画取材班タイトルのセル（_tategata ._title）：左上を10px */
.about__table-inner ._tategata ._title {
	border-top-left-radius: 10px;
}

/* インフルエンサータイアップタイトルのセル（_jyurai ._title）：右上を10px */
.about__table-inner ._jyurai ._title {
	border-top-right-radius: 10px;
}

/* 「FWに対するリーチ率平均20%」セル（_jyurai 最後の p）：右下を10px */
.about__table-inner ._jyurai p:nth-of-type(4) {
	border-bottom-right-radius: 10px;
}

/* Create 4px gaps between cells (rows) instead of bottom borders */
.about__table-inner ._head p+p,
.about__table-inner ._tategata p+p,
.about__table-inner ._jyurai p+p {
	margin-top: 4px;
}


/* 上部タイトル */
.about__table-inner ._title {
	color: var(--color-white);
	padding: 8px;
	margin-bottom: 6px;
	text-align: center;
	height: 4em;
	line-height: 1;
	display: grid;
	place-items: center;
	border-radius: 4px;
}

.about__table-inner ._tategata ._title {
	background-color: var(--color-red);
}

.about__table-inner ._tategata ._title img {
	width: 100%;
	height: 24px;
	aspect-ratio: 140 / 25;
}

.about__table-inner ._jyurai ._title {
	background-color: var(--color-black);
}

.about__table-inner ._jyurai ._title span {
	font-size: 24px;
	display: block;
	line-height: 1;
}


/* 縦型枠線 */
.about__table-inner ._tategata {
	z-index: 100;
}

/* .about__table-inner ._tategata::before {
	content: "";
	display: block;
	width: 100%;
	height: calc(100% + 16px);
	border: solid 6px var(--color-red);
	border-radius: 2px;
	position: absolute;
	top: -8px;
	bottom: -8px;
	left: 0;
	right: 0;
	transform: translate(-6px, -6px);
} */

@media (max-width:767px) {
	.about__table {
		overflow-x: auto;
		overflow-y: hidden;
		margin-right: calc(50% - 50vw);
		padding-left: 8px;
	}

	/* スクロールバー非表示 */
	.about__table {
		/*IE・Edge*/
		-ms-overflow-style: none;
		/*Firefox*/
		scrollbar-width: none;
	}

	.about__table::-webkit-scrollbar {
		display: none;
	}



	.about__table-inner {
		padding-right: 60px;
	}
}

@media (min-width:768px) {
	.about__table-inner ._head p {
		width: clamp(100px, 18vw, 260px);
	}

	.about__table-inner ._tategata,
	.about__table-inner ._jyurai {
		width: clamp(200px, 28vw, 400px);
	}

	.about__table-inner ._tategata::after {
		content: "";
		display: block;
		background-image: url(../img/top/about_arrow.svg);
		width: 50px;
		height: 70px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		left: 50%;
		bottom: -60px;
	}
}

/**************************************************
about__flow
**************************************************/
.about__flow {
	margin-top: -60px;
}

.about__flow img {
	width: 100%;
}



/**************************************************
about__media
**************************************************/
.about__media {
	padding-top: clamp(20px, 4.2vw, 60px);
	background-image: var(--bg-grid-black);
}

.about__media-title {
	font-size: clamp(24px, 4vw, 48px);
	font-weight: 700;
	color: var(--color-red);
	text-align: center;
	line-height: 1;
	letter-spacing: 0.05em;
	max-width: 90%;
	width: fit-content;
	margin-inline: auto;
}

.about__media-title span {
	/* display: inline;
	white-space: unset; */
	font-size: clamp(24px, 4vw, 48px);
	font-weight: 700;
}

.about__media-lead {
	font-size: clamp(16px, 2vw, 24px);
	font-weight: 500;
	line-height: 1.5;
	text-align: justify;
	max-width: 90%;
	width: fit-content;
	margin-inline: auto;
}

@media (min-width:768px) {
	.about__media-title {
		text-align: center;
		letter-spacing: 0;
	}

	.about__media-title span {
		display: inline-block;
		white-space: nowrap;
		font-size: clamp(24px, 4vw, 48px);
		font-weight: 700;
	}

	.about__media-lead {
		letter-spacing: 0.05em;
	}
}

/* @media (max-width:400px) {
	.about__media-title {
		text-align: justify;
		text-align-last: justify;
		text-justify: inter-ideograph;
	}
} */

/* ==============================
スライダー
============================== */
.media-slider {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	text-align: center;
	position: relative;
}

.media-slider .swiper-wrapper {
	display: flex;
	align-items: baseline;
	padding-top: 56px;
}

.media-slider .swiper-slide:not(.swiper-slide-active) {
	transition: transform .7s, width .7s;
	scale: 0.8;
}

.media-slider .swiper-slide figure {
	padding: 10px;
	/* border-radius: 24px;
	background-color: var(--color-white);
	box-shadow: 0 0 10px #D9D9D9 inset, 8px 8px 8px rgba(0, 0, 0, 0.25); */
	filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .35));
	transition: transform .7s, box-shadow .7s;
}


.media-slider .swiper-slide img {
	width: 100%;
	/* aspect-ratio: 234 / 506; */
	object-fit: cover;
	object-position: center;
}


/* Dim only the image on non-active slides */
.media-slider .swiper-slide:not(.swiper-slide-active) figure img {
	filter: brightness(0.5);
	transition: filter .3s;
	/* keep same corner rounding as card */
}


/* active */
.media-slider .swiper-slide-active {
	opacity: 1;
	z-index: 1;
	scale: 1;
}

.media-slider .swiper-slide-active figure {
	transform: rotate(-5deg);
}


/* --------------------
テキスト
-------------------- */
.media-slider__text {
	margin-top: 30px;
	padding-inline: 30px;
	opacity: 0;
	margin-inline: auto;
}

.media-slider__text h4 {
	color: var(--color-white);
	font-weight: 500;
	background-color: var(--color-red);
	padding: 0.5em 1em;
	border-radius: 8px;
	white-space: nowrap;
}

.media-slider__text p {
	margin-top: 8px;
	text-align: left;
}

.media-slider .swiper-slide-active .media-slider__text {
	opacity: 1;
	width: 200%;
	position: relative;
	left: -50%;
}

@media (min-width:768px) {
	.media-slider .swiper-slide:not(.swiper-slide-active) {
		width: 17.5% !important;
		margin-right: 2% !important;
		scale: 1;
	}

	.media-slider .swiper-slide-active {
		width: 22% !important;
		margin-inline: 2% 4% !important;
	}

	.media-slider .swiper-slide-active .media-slider__text>* {
		min-width: 230px;
		width: fit-content;
		margin-inline: auto;
	}
}


/* --------------------
ボタン
-------------------- */
.media-slider .swiper-button-next,
.media-slider .swiper-button-prev {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	margin: 0;
	z-index: 5;
}

.magazine-wrapper {
	display: block;
	text-align: center;
}

.magazine {
	display: inline-block;
	padding: 16px 24px;
	/* 上下に余白をつけつつ中央寄せ */
	margin-bottom: 48px;
	border-radius: 12px;
	background-color: var(--color-red);
	text-align: center;
	text-decoration: none;
	color: #fff;
}

.media-slider .swiper-button-prev::after,
.media-slider .swiper-button-next::after {
	content: "";
}

.media-slider .swiper-button-prev {
	content: "";
	display: block;
	width: clamp(36px, 6vw, 64px);
	height: clamp(36px, 6vw, 64px);
	left: clamp(8px, 2vw, 24px);
	background-image: url(../img/common/arrow_prev.svg);
	background-size: contain;
	background-repeat: no-repeat;
	transition: filter .3s;
}

.media-slider .swiper-button-prev:hover {
	filter: invert(1);
}

.media-slider .swiper-button-next {
	content: "";
	display: block;
	width: clamp(36px, 6vw, 64px);
	height: clamp(36px, 6vw, 64px);
	right: clamp(8px, 2vw, 24px);
	background-image: url(../img/common/arrow_next.svg);
	background-size: contain;
	background-repeat: no-repeat;
	transition: filter .3s;
}

.media-slider .swiper-button-next:hover {
	filter: invert(1);
}

@media (min-width:768px) {
	.media-slider .swiper-button-prev {
		left: clamp(32px, 6vw, 96px);
	}

	.media-slider .swiper-button-next {
		right: clamp(32px, 6vw, 96px);
	}
}



/**************************************************
Why
**************************************************/
.why {
	margin-top: clamp(64px, 7vw, 100px);
}

.why h2 {
	font-size: clamp(22px, 4vw, 48px);
	font-weight: 700;
	color: var(--color-white);
	letter-spacing: 0.05em;
}

#reason .about__heading h2 {
	align-items: flex-end;
	/* ← 下揃え */
	gap: 0.35em;
}

#reason .about__heading h2 img {
	display: block;
	/* 余計な下の隙間を除去 */
}

.why__content {
	padding-top: clamp(16px, 4vw, 56px);
}

.why__lead {
	color: var(--color-white);
	text-align: justify;
}

.why__lead>p {
	font-size: clamp(16px, 2vw, 24px);
	font-weight: 500;
	line-height: 1.5;
}

.why__lead h3 {
	font-weight: 500;
}

.why__lead h3 em {
	font-size: 40px;
	font-style: normal;
}

.why__lead>div {
	letter-spacing: 0.03em;
	line-height: 1.5;
}

.why__image {
	display: flex;
	gap: clamp(12px, 3vw, 20px);
	margin-top: 27px;
	margin-inline: auto;
	width: 100%;
	justify-content: center;
	max-width: clamp(320px, 90%, 680px);
}

.why__image img {
	width: 100%;
	height: auto;
	display: block;
	flex: 1 1 0;
	min-width: 0;
	max-width: 300px;
}

/* Visual (black box image) next to the two cards */
.why__visual {
	display: block;
	max-width: 612px;
	margin-inline: auto;
}

.why__visual img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .25));
	margin-inline: auto;
}


/* add top margin above the SP visual (why06_sp.svg) */
@media (max-width: 1023px) {
	.why__visual img {
		margin-top: clamp(12px, 4vw, 24px);
	}
}

@media (min-width:1024px) {

	/* Equalize heights between the two left cards and the right visual */
	.why {
		--why-card-h: clamp(260px, 28vw, 340px);
	}

	.why__image img {
		height: var(--why-card-h);
		width: auto;                 /* 高さ基準で幅は自動 */
		max-width: 100%;            /* はみ出し防止 */
		object-fit: contain;        /* 画像の見切れ防止 */
		flex: 0 1 auto;             /* 横並びを維持しつつ伸縮 */
	}

	.why__visual {
		height: var(--why-card-h);
	}

	.why__visual img {
		height: 100%;
		object-fit: contain;
		margin-top: 0; /* no extra space when side-by-side */
	}

	/* a bit more air between left block and right visual */
	.why__content {
		gap: clamp(24px, 4.5vw, 48px);
	}

	.why__image {
		gap: clamp(16px, 2.5vw, 28px);
	}
}


@media (min-width:1024px) {
	.why__lead>p {
		letter-spacing: 0.05em;
	}

	.why__content {
		display: grid;
		grid-template-columns: minmax(340px, 1fr) minmax(520px, 1.2fr);
		gap: clamp(16px, 4vw, 40px);
		align-items: start;
	}

	.why__lead {
		grid-column: 1 / -1;
	}

	.why__image {
		max-width: unset;
		margin-inline: unset;
		margin-top: 0;
		align-self: start;
	}

	.why__text {
		grid-column: 2 / 3;
		grid-row: 2;
	}

	.why__text-inner {
		width: 100%;
		max-width: none;
	}
}

.why__text-inner {
	margin-top: clamp(16px, 4vw, 56px);
	background-color: var(--color-black);
	padding: clamp(30px, 4vw, 40px) clamp(16px, 6vw, 80px);
	color: var(--color-white);
	text-align: center;
	width: fit-content;
	margin-inline: auto;
	border: solid 2px var(--color-white);
	box-shadow: -4px -4px 0 var(--color-blue), 4px 4px 0 var(--color-red);
}

.why__text-inner h3 {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.why__text-inner div {
	margin-top: 16px;
	text-align: justify;
}



/**************************************************
導入事例
**************************************************/
.case {
	margin-top: clamp(64px, 12vw, 170px);
}

.case__lead {
	color: var(--color-white);
	margin-top: 16px;
	font-size: clamp(16px, 2vw, 24px);
	font-weight: 500;
	line-height: 1.5;
}

.case__company-list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background-color: var(--color-white);
	margin-top: 56px;
	padding: 32px;
	list-style: none;
	flex-wrap: wrap;
}

.case__company-item {
	width: 40%;
}

.case__list {
	list-style: none;
	padding-left: unset;
	margin-top: 56px;
}

/* アンカーリンク上部に余白 */
.case__list::before {
	content: "";
	display: block;
	height: 80px;
	margin-top: -80px;
	visibility: hidden;
}

.case__item {
	background-color: var(--color-white);
	margin-top: 40px;
	border: solid 3px var(--color-red);
	padding-bottom: 32px;
	position: relative;
	background-image: var(--bg-grid-black);
}

.case__item::before {
	content: "";
	display: block;
	width: 100%;
	height: 80px;
	background-color: var(--color-red);
}

.case__item-title {
	width: 630px;
	max-width: 95%;
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
}

.case__item-title img {
	width: 100%;
	height: 100%;
	max-height: 100px;
	object-fit: contain;
	object-position: center;
}

.case__item-inner {
	max-width: 1016px;
	margin-inline: auto;
}

.case__item-lead {
	margin-top: 24px;
	text-align: justify;
}

.case__item-content {
	display: grid;
	align-items: center;
}

.case__item-content ._main {
	margin-top: 24px;
	width: 100%;
	aspect-ratio: 288 / 216;
}

.case__item-content ._main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.case__item-content ._example {
	display: flex;
	justify-content: center;
	gap: clamp(24px, 2.5vw, 28px);
}

.case__item-content ._example picture {
	width: calc(100% / 3);
	scale: 1.3;
	margin-block: clamp(20px, 4vw, 60px);
}

@media (max-width: 767px) {
	.case__item-content ._example picture {
		width: 24%;
		scale: 1;
	}

	.case__item-content ._example picture img {
		display: block;
		width: 100%;
		height: auto;
		filter: drop-shadow(0 0px 20px rgba(0, 0, 0, .35));
	}
}


@media (min-width:768px) {
	.case__lead {
		letter-spacing: 0.05em;
	}

	.case__company-list {
		flex-wrap: unset;
	}

	.case__company-item {
		width: unset;
	}

	.case__item-title {
		top: -50px;
		left: -60px;
		transform: unset;
	}

	.case__item-title img {
		max-height: unset;
	}

	.case__item-content {
		grid-template-columns: 3fr 7fr;
		gap: 60px;
		margin-top: -20px;
	}

	.case__item-content ._main {
		aspect-ratio: 1/1;
	}

	.case__item-content ._main img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.case__item-content ._example {
		justify-content: flex-start;
		margin-top: 24px;
	}

	.case__item-content ._example picture {
		scale: unset;
		margin-block: unset;
	}
}


/**************************************************
縦型動画班が選ばれる理由
**************************************************/
.reason {
	margin-top: clamp(100px, 12vw, 200px);
	padding-bottom: clamp(64px, 7vw, 100px);
}

.reason__list {
	display: grid;
	gap: 10px;

	list-style: none;
	padding-left: unset;
	margin-top: 56px;
	max-width: 90%;
	margin-inline: auto;
}

.reason__item {
	background-color: var(--color-red);
	color: var(--color-white);
	border: solid 3px var(--color-white);
	border-radius: 16px;
	padding: 56px 16px;
	max-width: 300px;
	margin-inline: auto;
}

.reason__item figure {
	width: 100px;
	height: 100px;
	margin-inline: auto;
}

.reason__item:nth-child(1) {
	transform: rotate(-5deg);
}

.reason__item:nth-child(3) {
	transform: rotate(5deg);
}

.reason__item:nth-child(4) {
	transform: translateY(-10px);
}

.reason__item figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.reason__item h3 {
	font-family: var(--font-family-en);
	font-size: 48px;
	font-weight: 500;
	text-align: center;
	margin-top: 16px;
}

.reason__item div {
	text-align: justify;
}

.reason__item:not(:first-child) h3 {
	text-transform: uppercase;
}

.reason__button {
	margin-top: clamp(8px, 4vw, 56px);
	margin-inline: auto;
	width: fit-content;
}

.reason2__button {
	margin-top: 36px;
	margin-inline: auto;
	width: fit-content;
}


@media (min-width:768px) {
	.reason__list {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
		max-width: unset;
	}

	.reason__item {
		max-width: unset;
		margin-inline: unset;
	}
}



/**************************************************
料金について
**************************************************/
.price {
	padding-block: clamp(64px, 6vw, 80px);
	background-image: var(--bg-grid-white);
	overflow: hidden;
}

.price-slider {
	overflow: visible;
}

.price-slider__list {
	display: block;
	margin-top: 56px;

	list-style: none;
	padding-left: unset;
}

.price-slider__item {
	background-color: var(--color-white);
	border: solid 3px var(--color-red);
	border-radius: 32px;
	padding: clamp(40px, 6vw, 80px) 8px clamp(32px, 6vw, 48px) 8px;
	margin-top: 24px;
	max-width: 288px;
	margin-inline: auto;
}

/* ---- Equalize button position across price cards ---- */
.price-slider__item {
	display: flex;
	flex-direction: column;
}

.price-slider__item-button {
	margin-top: auto;
	/* push the button to the bottom */
}

.price-slider__item-button a {
	margin-inline: auto;
	/* center the button */
}

.price-slider__item-button a span {
	font-size: 16px;
}

/* Override nested contact card margin so both align */
.price-slider__item._contact .price-slider__item-button {
	margin-top: auto;
}

.price-slider__item._contact .price-slider__item-button a {
	margin-top: 0;
}

.price-slider__item-title {
	color: var(--color-red);
	font-size: 24px;
	font-weight: 500;
	text-align: center;
}

.price-slider__item:first-child .price-slider__item-price {
	color: var(--color-red);
}

.price-slider__item-title span {
	font-size: 48px;
	font-weight: 700;
	line-height: 2;
}

.price-slider__item-price {
	text-align: center;
	font-size: clamp(24px, 4vw, 32px);
	font-weight: 700;
	line-height: 1;
	color: var(--color-navy);
}

.price-slider__item-price span {
	font-size: clamp(48px, 10vw, 72px);
	font-family: var(--font-family-en);
	line-height: 1;
	/* font-family: var(--font-family-en); duplicate */
	font-weight: 500;
}

/*
.price-slider__item-content {
	list-style: none;
	padding-left: unset;
	display: grid;
	gap: 16px;
	margin-top: 32px;
	width: fit-content;
	margin-inline: auto;
}

.price-slider__item-content li {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	letter-spacing: 0.03em;
	font-size: 16px;
	letter-spacing: 0.03em;
}

.price-slider__item-content li::before {
	content: "";
	display: block;
	width: 25px;
	height: 25px;
	background-image: url(../img/top/price_list.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
	flex-shrink: 0;
}
*/

/* 先着10社 */
.price-slider__item ._campaign {
	position: absolute;
	top: -20px;
	left: -30px;
	width: clamp(80px, 12vw, 120px);
	height: clamp(80px, 12vw, 120px);
	transform: rotate(-10deg);
}

.price-slider__item ._campaign img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.price-slider__item._contact2 {
	div {
		font-weight: 500;
		text-align: center;
		margin-top: 16px;
		margin-bottom: 16px;
		letter-spacing: 0.05em;
	}
}

/* カスタムプラン */
.price-slider__item._contact1 {
	background-color: var(--color-red);
	color: var(--color-white);
	border-radius: 32px;
	padding: 80px clamp(20px, 3vw, 44px);
}

.price-slider__item._contact1 {
	h3 {
		font-size: 32px;
		font-weight: 700;
		text-align: center;
	}

	div {
		font-size: clamp(16px, 2vw, 24px);
		font-weight: 500;
		text-align: center;
		margin-top: 32px;
		letter-spacing: 0.05em;
	}

	.price-slider__item ._campaign {
		top: -40px;
		left: -80px;
	}

	.price-slider__item-button a {
		margin-top: 32px;
		margin-inline: auto;
	}
}


@media (min-width:1000px) {
	.price-slider {
		margin-right: 0; /* prevent full-bleed shift so the grid fits within the inner width */
	}

	.price-slider__list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
		width: 100%; /* ensure all four cards fit without horizontal scroll */
	}

	.price-slider__item {
		width: 100% !important;
		margin-top: unset;
	}

	/* 先着10社 */
	.price-slider__item ._campaign {
		position: absolute;
		top: -40px;
		left: -60px;
	}
}

@media (min-width:768px) and (max-width:999px) {
	.price-slider__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.price-slider__item {
		width: 100% !important;
	}
}

/* ==============================
Price text: add margin under each desktop line break
============================== */
@media (min-width:768px) {

	.price-slider__item._contact2 div br.pc,
	.price-slider__item._contact1 div br.pc {
		display: block;
		margin-bottom: clamp(6px, 1vw, 12px);
	}

	.price-slider__item._contact2 div br.pc:last-of-type,
	.price-slider__item._contact1 div br.pc:last-of-type {
		margin-bottom: 0;
	}
}

.price-slider__item,
.price-slider__item._contact1,
.price-slider__item._contact2 {
	padding: clamp(20px, 6vw, 44px) clamp(20px, 3vw, 32px);
	padding-bottom: clamp(32px, 6vw, 48px);
}

/**************************************************
新・料金レイアウト（plans）
**************************************************/
.plans {
	padding-block: clamp(64px, 7vw, 100px);
	background-image: var(--bg-grid-white);
}

.plans__list {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 24px;
	align-items: stretch;
}

@media (min-width:768px) {
	.plans__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.plans__card {
	background: var(--color-white);
	border: 3px solid var(--color-red);
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.plans__card-head {
	background: var(--color-red);
	color: var(--color-white);
	border-radius: 20px 20px 0 0;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: .4em;
	font-weight: 700;
}

.plans__card-head ._label {
	font-size: 14px;
}

.plans__card-head ._num {
	font-size: 36px;
	line-height: 1;
	font-weight: 700;
}

.plans__card-head ._unit {
	font-size: 18px;
}

.plans__body {
	padding: clamp(20px, 3vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.plans__assure {
	color: var(--color-navy);
	font-weight: 700;
	font-size: 24px;
}

.plans__price {
	text-align: left;
	font-size: 24px;
	font-weight: 700;
	color: var(--color-navy);
}

.plans__price ._num {
	font-size: clamp(36px, 6vw, 60px);
	font-family: var(--font-family-en);
}

.plans__price ._yen {
	margin-left: .25em;
}

.plans__features {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 8px;
	margin-top: 8px;
}

.plans__features li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.plans__features li::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url(../img/top/price_list.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	flex-shrink: 0;
}

.plans__btn {
	margin-top: auto;
}

.plans__btn a {
	margin-inline: auto;
}

.small {
	font-size: 9px !important;
}

.footer__links {
	margin-top: 16px;
}

.footer__links ul {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: center;
}

.footer__links a {
	text-decoration: underline;
	font-size: clamp(12px, 1.8vw, 14px);
	color: var(--color-white);
	text-decoration: none;
}

/* reCAPTCHA (Contact) */
.contact-form__recaptcha {
	margin-top: 24px;
	text-align: center;
}

.contact-form__recaptcha p {
	display: block;
	margin-top: 8px;
	opacity: .8;
	color: var(--color-white);
	font-size: 12px;
}

.contact-form__recaptcha a {
	text-decoration: underline;
	color: var(--color-white);
	font-size: 12px;
}