@charset "utf-8";

/* 260612 つくろう未来の笑顔リニューアル
 *
 * 目次:
 * 1. Tokens / Base
 * 2. KV
 * 3. Lead
 * 4. Pillars（共通）
 * 5. Carousel stack（カルーセル①）
 * 6. Carousel ticker（カルーセル②）
 * 7. Section overlap（柱の重なりスクロール）
 * 8. Ad Gallery
 * 9. Closing
 * 10. Side nav（PC）
 * 11. Bottom nav（SP）
 */

/* ----- 1. Tokens / Base ----- */

/* Breakpoint: SP <=959px, PC >=960px */

/* Google Fonts: Dela Gothic One / Noto Sans JP (700,900) / Imbue / Manrope */
:root {
	--sf-font-display: "Dela Gothic One", sans-serif;
	--sf-font-body: "Noto Sans JP", sans-serif;
	--sf-font-en: "Imbue", serif;
	--sf-font-ad-heading: "Manrope", sans-serif;
	--sf-ad-heading-size: clamp(2rem, 4.444vw, 64px);
	--sf-ad-lead-size: clamp(1rem, 2.222vw, 32px);
	--sf-ad-label-size: clamp(1rem, 1.667vw, 24px);
	--sf-ad-title-size: clamp(1rem, 1.667vw, 24px);
	--sf-ad-desc-size: clamp(0.875rem, 1.25vw, 18px);
	--sf-ad-btn-size: clamp(16px, 1.389vw, 20px);
	--sf-ad-btn-size-sp: clamp(16px, 4.8vw, 20px);
	--sf-ad-subheading-size: clamp(1.5rem, 3.333vw, 48px);
	--sf-ad-newspaper-width: min(280px, 19.444vw);
	--sf-ad-newspaper-date-size: clamp(14px, 1.389vw, 20px);
	--sf-ad-pdf-link-size: clamp(14px, 1.389vw, 20px);
	--sf-ad-newspaper-gap: clamp(32px, 5.556vw, 80px);
	--sf-closing-heading-size: clamp(2rem, 4.444vw, 64px);
	--sf-closing-text-size: clamp(1rem, 1.389vw, 20px);
	--sf-color-bg: #fff8e6;
	--sf-color-red: #e50012;
	--sf-color-orange: #ff8c00;
	--sf-inner-max: 1200px;
	--sf-kv-inner-max: 1306px;
	--sf-kv-design-width: 1440;
	--sf-fade-duration: 0.8s;
	--sf-lead-fade-duration: 1.25s;
	--sf-lead-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sf-lead-heading-size: clamp(2rem, 7.6vw, 72px);
	--sf-lead-body-size: clamp(1rem, 1.067vw + 0.75rem, 20px);
	--sf-lead-heading-gap: clamp(2.75rem, 4vw, 3.75rem);
	--sf-pillar-stack-text-size: clamp(1rem, 1.389vw, 20px);
	--sf-pillar-stack-text-size-sp: clamp(0.9375rem, 4.267vw, 2.125rem);
	--sf-card-num-size: clamp(1.75rem, 2.778vw, 2.5rem);
	--sf-card-ticker-title-size: clamp(1rem, 2.083vw, 1.75rem);
	--sf-card-ticker-title-size-sp: clamp(0.9375rem, 4.5vw, 1.375rem);
	--sf-card-ticker-sub-size: clamp(0.875rem, 1.458vw, 1.25rem);
	--sf-card-ticker-sub-size-sp: clamp(0.75rem, 3vw, 1rem);
	--sf-card-ticker-num-size: clamp(1.25rem, 10cqi, 2.5rem);
	--sf-card-ticker-num-size-sp: clamp(1.125rem, 8.5cqi, 3rem);
	--sf-overlap-top: 67px;
	--sf-overlap-exit-height: 240px;
	--sf-ticker-tilt: -12deg;
	--sf-ticker-design-width: 400;
	--sf-ticker-design-height: 400;
	--sf-ticker-card-size: min(400px, 27.778vw);
	--sf-ticker-slide-width: var(--sf-ticker-card-size);
	--sf-ticker-media-ratio: 320 / 210;
	--sf-ticker-media-width-ratio: 0.9;
	--sf-ticker-card-pad-top: 11.75%;
	--sf-ticker-card-pad-inline: 5%;
	--sf-ticker-card-pad-bottom: 2.5%;
	--sf-ticker-body-pad-bottom: min(16px, 4cqi);
	--sf-ticker-media-gap: 7%;
	--sf-ticker-title-gap: min(4px, 0.278vw);
	--sf-ticker-gap: clamp(12px, 3vw, 24px);
	--sf-ticker-duration: 0.45s;
	--sf-nav-icon-size: 42px;
	--sf-nav-item-gap: 52px;
	--sf-nav-offset-right: 41px;
	--sf-nav-label-size: 14px;
	--sf-nav-icon-size-sp: clamp(40px, 11vw, 48px);
	--sf-nav-fill-start: #ff8c00;
	--sf-nav-fill-mid: #ff5a1f;
	--sf-nav-fill-end: #e50012;
	--sf-nav-track-bg: #d9d4cc;
	--sf-nav-sp-bar-bg: rgba(77, 77, 77, 0.8);
	--sf-nav-sp-line-bg: rgba(255, 255, 255, 0.45);
	--sf-nav-sp-dot-ring: rgba(255, 255, 255, 0.9);
	--sf-nav-sp-dot-bg: #bab3ab;
	--sf-nav-progress: 0;
	--sf-nav-border-width: 3px;
	--sf-nav-border-color: #fff;
	--sf-carousel-nav-btn-size: 60px;
	--sf-carousel-nav-btn-bg: rgba(77, 47, 20, 0.75);
	--sf-carousel-nav-btn-border: 2px solid #fff;
	--sf-carousel-nav-btn-shadow: 8px 8px 8px 0 rgba(0, 0, 0, 0.25);
	--sf-carousel-nav-chevron-w: 28px;
	--sf-carousel-nav-chevron-h: 43px;
	--sf-carousel-nav-bar-w: clamp(20px, 5.5vw, 28px);
	--sf-carousel-nav-bar-h: 8px;
	--sf-carousel-nav-bar-gap: clamp(6px, 1.6vw, 8px);
	--sf-carousel-nav-bar-active: #fff;
	--sf-carousel-nav-bar-inactive: rgba(120, 55, 10, 0.45);
	--sf-carousel-ticker-controls-w: min(616px, 42.778vw);
	--sf-carousel-pause-bar-w: 5px;
	--sf-carousel-pause-bar-h: 20px;
	--sf-carousel-pause-bar-gap: 7px;
	--sf-carousel-nav-end-gap: 40px;
	--sf-carousel-controls-gap: 40px;
}

.sf {
	background-color: var(--sf-color-bg);
	background-image: url("/tsunagu/smilefuture/image_renewal/kv-bg.png");
	background-repeat: no-repeat;
	background-position: top -30px center;
	background-size: 100% auto;
	color: #333;
	font-family: var(--sf-font-body);
	font-weight: 700;
	letter-spacing: 0.05em;
}

/* ----- 1b. Scroll fade ----- */
.sf-fade {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--sf-fade-duration) ease,
		transform var(--sf-fade-duration) ease;
}

.sf-fade.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.sf-fade {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.sf-fade.is-visible,
	.sf-fade[data-sf-fade-delay] {
		transition-delay: 0s;
	}
}

/* リード：ふわっとフェードイン（見出し → 本文 → 写真） */
.sf-lead [data-sf-lead-item="heading"],
.sf-lead [data-sf-lead-item="body"] {
	opacity: 0;
	transform: translateY(28px) scale(0.97);
	filter: blur(6px);
	transition:
		opacity var(--sf-lead-fade-duration) var(--sf-lead-fade-ease),
		transform var(--sf-lead-fade-duration) var(--sf-lead-fade-ease),
		filter var(--sf-lead-fade-duration) var(--sf-lead-fade-ease);
	will-change: opacity, transform, filter;
}

.sf-lead [data-sf-lead-item^="photo-"] {
	opacity: 0;
	filter: blur(6px);
	transform: none;
	transition:
		opacity var(--sf-lead-fade-duration) var(--sf-lead-fade-ease),
		filter var(--sf-lead-fade-duration) var(--sf-lead-fade-ease);
	will-change: opacity, filter;
}

.sf-lead.is-in-view [data-sf-lead-item="heading"],
.sf-lead.is-in-view [data-sf-lead-item="body"] {
	opacity: 1;
	transform: translateY(0) scale(1);
	filter: blur(0);
}

.sf-lead.is-in-view [data-sf-lead-item^="photo-"] {
	opacity: 1;
	filter: blur(0);
}

.sf-lead.is-in-view [data-sf-lead-item="heading"] {
	transition-delay: 0.08s;
}

.sf-lead.is-in-view [data-sf-lead-item="body"] {
	transition-delay: 0.28s;
}

.sf-lead.is-in-view [data-sf-lead-item="photo-1"] {
	transition-delay: 0.48s;
}

.sf-lead.is-in-view [data-sf-lead-item="photo-2"] {
	transition-delay: 0.62s;
}

.sf-lead.is-in-view [data-sf-lead-item="photo-3"] {
	transition-delay: 0.76s;
}

@media (prefers-reduced-motion: reduce) {
	.sf-lead [data-sf-lead-item="heading"],
	.sf-lead [data-sf-lead-item="body"],
	.sf-lead [data-sf-lead-item^="photo-"] {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}

/* ----- 2. KV ----- */
.sf-kv {
	position: relative;
	padding: 88px 0 48px;
	overflow: hidden;
}

.sf-kv__inner {
	position: relative;
	width: min(var(--sf-kv-inner-max), calc(100vw * 1306 / var(--sf-kv-design-width)));
	margin: 0 auto;
}

.sf-kv__stage {
	position: relative;
	z-index: 1;
}

.sf-kv__heading {
	margin: 0;
}

.sf-kv__image {
	display: block;
	width: 100%;
	height: auto;
}

/* ----- 3. Lead ----- */
.sf-lead {
	position: relative;
	overflow-x: clip;
	padding: 77px clamp(16px, 1.389vw, 30px) clamp(250px, 31vw, 760px);
}

.sf-lead__inner {
	position: relative;
	max-width: var(--sf-inner-max);
	margin: 0 auto;
	min-height: 520px;
	padding: 0 4px;
}

.sf-lead__content {
	position: relative;
	z-index: 2;
	max-width: 863px;
	text-align: left;
}

.sf-lead__heading {
	font-family: var(--sf-font-display);
	font-size: var(--sf-lead-heading-size);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.05em;
	color: var(--sf-color-red);
	margin: 0 0 var(--sf-lead-heading-gap);
	text-align: left;
}

.sf-lead__body {
	color: var(--sf-color-red);
	font-size: var(--sf-lead-body-size);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.05em;
	text-align: left;
}

.sf-lead__body p:last-child {
	margin-top: 2.22222222vw;
}

.sf-lead__photos {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

.sf-lead__photo {
	position: absolute;
	box-sizing: border-box;
	border-radius: 50%;
	overflow: hidden;
}

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

/* PC：1440px 基準・右寄せ段差配置 */
.sf-lead__photo--01 {
	width: clamp(200px, 27.778vw, 500px);
	height: clamp(200px, 27.778vw, 500px);
	top: clamp(146px, 18.819vw, 200px);
	right: clamp(-24px, -1.5vw, -33px);
	z-index: 1;
}

.sf-lead__photo--02 {
	width: clamp(120px, 16.667vw, 300px);
	height: clamp(120px, 16.667vw, 300px);
	top: clamp(323px, 41.528vw, 550px);
	right: clamp(173px, 22.5vw, 486px);
	z-index: 3;
}

.sf-lead__photo--03 {
	width: clamp(100px, 13.889vw, 250px);
	height: clamp(100px, 13.889vw, 250px);
	top: clamp(384px, 49.514vw, 750px);
	right: clamp(323px, 42.5vw, 908px);
	z-index: 2;
}

/* 改行：PCのみ / SPのみ（リニューアル共通） */
.sf-br--pc {
	display: none;
}

.sf-br--sp {
	display: inline;
}

/* ----- 4. Pillars（共通） ----- */
.sf-pillars {
	padding: 0 0 clamp(32px, 8vw, 118px);
}

.sf-pillars > .sf-pillar {
	padding-left: 0;
	padding-right: 0;
}

.sf-pillar {
	padding: 48px 20px;
}

.sf-pillar__inner,
.sf-closing__inner,
.sf-ad__inner {
	max-width: var(--sf-inner-max);
	margin: 0 auto;
}

.sf-pillar__action {
	display: none;
}

/* 4本柱 ブロック */
.sf-pillar {
	background-color: #ff8c00;
	color: #fff;
}

.sf-pillar--theme-red {
	background-color: #e60012;
}

.sf-pillar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
}

.sf-pillar__inner--stack {
	flex-direction: column;
}

.sf-pillar__content {
	flex: 1 1 280px;
}

.sf-pillar__media {
	flex: 1 1 320px;
	min-width: 0;
}

.sf-pillar__heading {
	font-family: var(--sf-font-display);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.05em;
	margin: 0 0 20px;
}

.sf-pillar__text {
	margin-bottom: 24px;
	line-height: 1.6;
	letter-spacing: 0.05em;
}

.sf-pillar__cards {
	min-height: 200px;
	width: 100%;
	padding: 24px;
	background: rgba(255, 246, 222, 0.25);
	border: 2px dashed rgba(255, 255, 255, 0.6);
	border-radius: 16px;
	color: #fff6de;
	text-align: center;
	line-height: 200px;
}

.sf-pillar__btn {
	display: inline-block;
	padding: 12px 32px;
	border: 2px solid #fff;
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
}

.sf-pillar--theme-red .sf-pillar__btn {
	border-color: #fff;
}

/* 柱①③：おいしさと安心 / 食べるよろこび（stack・横並びレイアウト共通） */
.sf-pillar--taste {
	--sf-pillar-accent: var(--sf-color-orange);
}

.sf-pillar--joy {
	--sf-pillar-accent: #f03c00;
}

.sf-pillar--taste,
.sf-pillar--joy {
	background: transparent;
	padding: 0;
	color: #fff;
}

.sf-pillar--taste .sf-pillar__shell,
.sf-pillar--joy .sf-pillar__shell {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: clamp(86px, 9vw, 100px) 10vw 14.5vw;
	background-color: var(--sf-pillar-accent);
	border-radius: clamp(40px, 8.333vw, 120px);
}

.sf-pillar--taste .sf-pillar__heading,
.sf-pillar--joy .sf-pillar__heading {
	font-size: clamp(2rem, 6vw, 72px);
	line-height: 1.2;
	margin-bottom: 3vw;
}

.sf-pillar--taste .sf-pillar__text,
.sf-pillar--joy .sf-pillar__text {
	font-size: var(--sf-pillar-stack-text-size);
	max-width: 36em;
}

.sf-pillar--taste .sf-card,
.sf-pillar--joy .sf-card {
	color: var(--sf-pillar-accent);
}

.sf-pillar--taste .sf-card__num,
.sf-pillar--joy .sf-card__num {
	background-color: var(--sf-pillar-accent);
}

.sf-pillar--taste .sf-card__title,
.sf-pillar--taste .sf-card__sub,
.sf-pillar--joy .sf-card__title,
.sf-pillar--joy .sf-card__sub {
	color: var(--sf-pillar-accent);
}

/* 柱②④：学びと体験 / おいしさのその先（ticker・中央寄せレイアウト共通） */
.sf-pillar--learning {
	--sf-pillar-ticker-accent: #ff7327;
	--sf-pillar-ticker-shell-inline: clamp(20px, 4vw, 64px);
}

.sf-pillar--beyond.sf-pillar--theme-red {
	background: transparent;
}

.sf-pillar--beyond {
	--sf-pillar-ticker-accent: #e50012;
	--sf-pillar-ticker-shell-inline: clamp(20px, 4vw, 64px);
}

.sf-pillar--learning,
.sf-pillar--beyond {
	background: transparent;
	padding: 0;
	color: #fff;
}

.sf-pillar--learning .sf-pillar__shell,
.sf-pillar--beyond .sf-pillar__shell {
	width: 100%;
	max-width: none;
	margin: 0;
	padding:clamp(40px, 5.5vw, 88px)
	var(--sf-pillar-ticker-shell-inline)
	clamp(48px, 7vw, 96px);
	background-color: var(--sf-pillar-ticker-accent);
	border-radius: clamp(40px, 8.333vw, 120px);
	text-align: center;
	overflow: hidden;
}

.sf-pillar--learning .sf-pillar__inner--stack,
.sf-pillar--beyond .sf-pillar__inner--stack {
	align-items: center;
	width: 100%;
}

.sf-pillar--learning .sf-pillar__heading,
.sf-pillar--beyond .sf-pillar__heading {
	font-size: clamp(2rem, 5.5vw, 72px);
	line-height: 1.2;
	margin: 0 0 clamp(8px, 3.5vw, 38px);
	text-align: center;
}

.sf-pillar--learning .sf-pillar__media--ticker,
.sf-pillar--beyond .sf-pillar__media--ticker {
	width: calc(100% + 2 * var(--sf-pillar-ticker-shell-inline));
	max-width: none;
	margin-left: calc(-1 * var(--sf-pillar-ticker-shell-inline));
	margin-right: calc(-1 * var(--sf-pillar-ticker-shell-inline));
	overflow: visible;
}

.sf-pillar--learning .sf-carousel--ticker,
.sf-pillar--learning .sf-carousel--ticker .sf-carousel__viewport,
.sf-pillar--beyond .sf-carousel--ticker,
.sf-pillar--beyond .sf-carousel--ticker .sf-carousel__viewport {
	width: 100%;
	max-width: none;
}

.sf-pillar--learning .sf-carousel--ticker .sf-carousel__track,
.sf-pillar--beyond .sf-carousel--ticker .sf-carousel__track {
	padding-left: 0;
	padding-right: 0;
}

.sf-pillar--learning .sf-pillar__text,
.sf-pillar--beyond .sf-pillar__text {
	margin: 0 auto;
	font-size: var(--sf-pillar-stack-text-size);
	line-height: 1.6;
	letter-spacing: 0.05em;
	text-align: center;
}

.sf-pillar--learning .sf-pillar__text p,
.sf-pillar--beyond .sf-pillar__text p {
	margin: 0 0 1em;
}

.sf-pillar--learning .sf-pillar__text p:last-child,
.sf-pillar--beyond .sf-pillar__text p:last-child {
	margin-bottom: 0;
}

.sf-pillar--learning .sf-card,
.sf-pillar--beyond .sf-card {
	color: var(--sf-pillar-ticker-accent);
}

.sf-pillar--learning .sf-card__num,
.sf-pillar--beyond .sf-card__num {
	background-color: var(--sf-pillar-ticker-accent);
}

.sf-pillar--learning .sf-card__title,
.sf-pillar--learning .sf-card__sub,
.sf-pillar--beyond .sf-card__title,
.sf-pillar--beyond .sf-card__sub {
	color: var(--sf-pillar-ticker-accent);
}

.sf-pillar--learning .sf-card--ticker,
.sf-pillar--beyond .sf-card--ticker {
	border: 1px solid var(--sf-pillar-ticker-accent);
}

/* 柱②④：ticker カード本文を stack カルーセルと同じフォントサイズに */
.sf-pillar--learning .sf-carousel--ticker .sf-card--ticker .sf-card__title,
.sf-pillar--beyond .sf-carousel--ticker .sf-card--ticker .sf-card__title {
	font-size: min(28px, 1.9vw);
	line-height: 1.2;
	letter-spacing: 0.05em;
}

.sf-pillar--learning .sf-carousel--ticker .sf-card--ticker .sf-card__title--compact {
	font-size: min(26px, 1.8vw);
}

.sf-pillar--learning .sf-carousel--ticker .sf-card--ticker .sf-card__sub,
.sf-pillar--beyond .sf-carousel--ticker .sf-card--ticker .sf-card__sub {
	font-size: min(20px, 1.458vw);
	line-height: 1.2;
}

/* 柱②④：ticker の .sf-card__body は残り高さを取り天地中央 */
.sf-pillar--learning .sf-carousel--ticker .sf-card--ticker .sf-card__body,
.sf-pillar--beyond .sf-carousel--ticker .sf-card--ticker .sf-card__body {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

/* ----- 5. Carousel stack（カルーセル①） ----- */
.sf-carousel--stack {
	--sf-stack-card-height: min(512px, 36.111vw);
	/* デザイン 800px 時: 上余白 33 / 画像 545 / ギャップ 40 / テキスト 210 / 下余白 50 */
	--sf-stack-card-pad-top: calc(var(--sf-stack-card-height) * 33 / 800);
	--sf-stack-card-pad-bottom: calc(var(--sf-stack-card-height) * 50 / 800);
	--sf-stack-card-inner-height: calc(var(--sf-stack-card-height) - var(--sf-stack-card-pad-top) - var(--sf-stack-card-pad-bottom));
	--sf-stack-card-media-height: calc(var(--sf-stack-card-inner-height) * 545 / 795);
	--sf-stack-card-gap: calc(var(--sf-stack-card-inner-height) * 10 / 795);
	--sf-stack-card-text-height: calc(var(--sf-stack-card-inner-height) * 210 / 795);
	padding: 0;
	background: none;
	border: none;
	min-height: 0;
}

.sf-carousel--stack .sf-carousel__viewport {
	position: relative;
	width: 100%;
	max-width: min(588px, 40.833vw);
	min-height: min(520px, 36.111vw);
	padding: min(32px, 2.222vw) 0;
	margin: 0 auto;
	overflow: visible;
	box-sizing: content-box;
}

/* 重なり最下層：常時表示（切り替えても変わらない下地カード） */
.sf-carousel--stack .sf-carousel__deck {
	position: absolute;
	left: 50%;
	top: min(32px, 2.222vw);
	z-index: 5;
	width: min(400px, 27.778vw);
	height: var(--sf-stack-card-height);
	margin: 0;
	border-radius: min(32px, 2.222vw);
	background-color: #fff6de;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	transform: translateX(-50%);
	opacity: 1;
	visibility: visible;
	pointer-events: none;
}

.sf-carousel--stack .sf-carousel__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sf-carousel--stack .sf-carousel__slide {
	--sf-pos-center: -50%;
	--sf-pos-peek: 68%;
	--sf-pos-off: 42%;
	--sf-pos-enter: 120%;
	position: absolute;
	left: 50%;
	top: min(32px, 2.222vw);
	width: min(400px, 27.778vw);
	height: var(--sf-stack-card-height);
	margin: 0;
	transform: translateX(var(--sf-pos-off));
	transition:
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.5s ease;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* 左の山・手前カード */
.sf-carousel--stack .sf-carousel__slide.is-top {
	opacity: 1;
	visibility: visible;
	z-index: 50;
	pointer-events: auto;
	transform: translateX(var(--sf-pos-center));
}

/* 進む操作：重なり中の下層カード（中央・傾き維持） */
.sf-carousel--stack .sf-carousel__slide.is-stacked {
	pointer-events: none;
	opacity: 1;
	visibility: visible;
	z-index: var(--sf-slide-z, 20);
	transform: translateX(var(--sf-pos-center));
	transition: opacity 0.5s ease;
}

.sf-carousel--stack .sf-carousel__slide.is-stacked.is-fading-out {
	opacity: 0;
}

/* 進む操作：右 peek から開始（傾きなし） */
.sf-carousel--stack .sf-carousel__slide.is-entering-from-peek {
	opacity: 1;
	visibility: visible;
	z-index: 55;
	pointer-events: none;
	transform: translateX(var(--sf-pos-peek));
	transition: none;
}

/* 進む操作：左へ移動しながら重なる */
.sf-carousel--stack .sf-carousel__slide.is-entering-overlap {
	opacity: 1;
	visibility: visible;
	z-index: 55;
	pointer-events: none;
	transform: translateX(var(--sf-pos-center));
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 左の山：手前の下に常に1枚（中央・transition なしで瞬時配置） */
.sf-carousel--stack .sf-carousel__slide.is-under {
	opacity: 1;
	visibility: visible;
	z-index: var(--sf-slide-z, 20);
	pointer-events: none;
	transform: translateX(var(--sf-pos-center));
	transition: none;
}

/* 戻る操作：手前の1枚だけ右へ退く */
.sf-carousel--stack .sf-carousel__slide.is-exiting {
	opacity: 1;
	visibility: visible;
	z-index: 50;
	pointer-events: none;
	transform: translateX(var(--sf-pos-peek));
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 戻る操作：右の控えカードをさらに右へ退く */
.sf-carousel--stack .sf-carousel__slide.is-peek-exiting {
	opacity: 1;
	visibility: visible;
	z-index: 40;
	pointer-events: none;
	transform: translateX(var(--sf-pos-enter));
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 右外から peek 位置へ入る（次へ後の新しい右カード） */
.sf-carousel--stack .sf-carousel__slide.is-peek-arriving {
	opacity: 0;
	visibility: visible;
	z-index: 45;
	pointer-events: none;
	transform: translateX(var(--sf-pos-enter));
	transition: none;
}

/* 右カード：次の番号を常に配置（手前の is-top より下の層） */
.sf-carousel--stack .sf-carousel__slide.is-peek {
	opacity: 1;
	visibility: visible;
	z-index: 40;
	pointer-events: auto;
	cursor: pointer;
	transform: translateX(var(--sf-pos-peek));
	transition:
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.45s ease,
		visibility 0s;
}

/* 待機中（右外・非表示） */
.sf-carousel--stack .sf-carousel__slide.is-off {
	z-index: 0;
	transform: translateX(var(--sf-pos-enter));
	opacity: 0;
	visibility: hidden;
}

/* ⑥挙動：初回表示時の逆再生（戻る操作と同じ動き・速め） */
.sf-carousel--stack.is-intro-playing {
	pointer-events: none;
}

/* イントロ開始時：右の控えなし・左の山だけを瞬時配置 */
.sf-carousel--stack.is-intro-setup .sf-carousel__slide,
.sf-carousel--stack.is-intro-setup .sf-carousel__slide .sf-card {
	transition: none !important;
}

.sf-carousel--stack.is-intro-fast .sf-carousel__slide.is-exiting,
.sf-carousel--stack.is-intro-fast .sf-carousel__slide.is-peek-exiting,
.sf-carousel--stack.is-intro-fast .sf-carousel__slide.is-entering-overlap,
.sf-carousel--stack.is-intro-fast .sf-carousel__slide.is-stacked.is-fading-out {
	transition-duration: 0.32s;
}

.sf-carousel--stack.is-intro-fast .sf-carousel__slide.is-entering-overlap .sf-card,
.sf-carousel--stack.is-intro-fast .sf-carousel__slide.is-exiting .sf-card,
.sf-carousel--stack.is-intro-fast .sf-carousel__slide.is-peek-exiting .sf-card {
	transition-duration: 0.32s;
}

@media (prefers-reduced-motion: reduce) {
	.sf-carousel--stack .sf-carousel__slide {
		transition: none;
	}
}

.sf-card {
	position: relative;
	display: block;
	padding: clamp(20px, 4vw, 28px) clamp(16px, 3vw, 24px) clamp(24px, 4vw, 32px);
	background: #fff6de;
	border-radius: clamp(16px, 3vw, 24px);
	color: var(--sf-color-orange);
	text-decoration: none;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* stack カルーセル内カード：1440px 時 400×512px 固定 */
.sf-carousel--stack .sf-card {
	box-sizing: border-box;
	container-type: inline-size;
	display: grid;
	grid-template-rows: var(--sf-stack-card-media-height) var(--sf-stack-card-text-height);
	row-gap: var(--sf-stack-card-gap);
	width: 100%;
	height: 100%;
	min-height: var(--sf-stack-card-height);
	padding: var(--sf-stack-card-pad-top) min(24px, 1.667vw) var(--sf-stack-card-pad-bottom);
	text-align: center;
	border: 1px solid #E58A00;
	border-radius: min(32px, 2.222vw);
	transform: none;
	transform-origin: center center;
}

.sf-carousel--stack .sf-card__body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	box-sizing: border-box;
}

/* 左の山：手前・重なり中カードは傾ける（再アニメなし） */
.sf-carousel--stack .sf-carousel__slide.is-top .sf-card,
.sf-carousel--stack .sf-carousel__slide.is-stacked .sf-card,
.sf-carousel--stack .sf-carousel__slide.is-under .sf-card {
	transform: rotate(-8deg);
	transition: none;
}

/* 進む操作：左へ移動しながら傾く */
.sf-carousel--stack .sf-carousel__slide.is-entering-overlap .sf-card {
	transform: rotate(-8deg);
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 右の控え・入場開始・退場は傾けない */
.sf-carousel--stack .sf-carousel__slide.is-peek .sf-card,
.sf-carousel--stack .sf-carousel__slide.is-peek-arriving .sf-card,
.sf-carousel--stack .sf-carousel__slide.is-peek-exiting .sf-card,
.sf-carousel--stack .sf-carousel__slide.is-exiting .sf-card,
.sf-carousel--stack .sf-carousel__slide.is-entering-from-peek .sf-card {
	transform: none;
}

.sf-carousel--stack .sf-carousel__slide.is-exiting .sf-card,
.sf-carousel--stack .sf-carousel__slide.is-peek-exiting .sf-card {
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.sf-carousel--stack .sf-carousel__slide.is-peek .sf-card,
.sf-carousel--stack .sf-carousel__slide.is-peek-arriving .sf-card,
.sf-carousel--stack .sf-carousel__slide.is-entering-from-peek .sf-card {
	transition: none;
}

.sf-carousel--stack .sf-card__num {
	top: var(--sf-stack-card-pad-top);
	left: clamp(16px, 7.75cqi, 26px);
	width: min(80px, 20%);
	height: auto;
	aspect-ratio: 1;
	min-width: 48px;
	font-size: clamp(1.75rem, 3.333vw, calc(3rem + 0.5vw));
}

.sf-carousel--stack .sf-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	min-width: 0;
	box-sizing: border-box;
}

.sf-carousel--stack .sf-card__media img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.sf-carousel--stack .sf-card__media.sf-rounded {
	width: min(92cqw, min(300px, 20.833vw), 100%);
	height: min(100%, 92cqw, min(300px, 20.833vw));
	max-width: 100%;
	max-height: 100%;
	aspect-ratio: 1;
	flex: 0 1 auto;
	align-self: center;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}

.sf-carousel--stack .sf-card__media.sf-rounded img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
}

.sf-carousel .sf-card__title {
	font-size: min(28px, 2.083vw);
	line-height: 1.20;
	letter-spacing: 0.05em;
	text-align: center;
}

.sf-carousel--stack .sf-card__title {
	margin: 0;
}

.sf-carousel .sf-card__sub {
	font-size: min(20px, 1.458vw);
	text-align: center;
}

.sf-card__num {
	position: absolute;
	top: clamp(8px, 2vw, 12px);
	left: clamp(8px, 2vw, 12px);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: var(--sf-color-orange);
	font-family: var(--sf-font-en);
	font-size: var(--sf-card-num-size);
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.sf-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 12px;
}

.sf-card__media img {
	display: block;
	width: 100%;
	height: auto;
}

.sf-card__title {
	margin: 0 0 6px;
	font-family: var(--sf-font-body);
	font-size: clamp(1rem, 2.8vw, 1.25rem);
	font-weight: 900;
	line-height: 1.45;
	color: var(--sf-color-orange);
}

.sf-card__title sup {
	font-size: 0.75em;
	vertical-align: super;
	line-height: 0;
}

.sf-card__sub {
	margin: 0;
	font-family: var(--sf-font-en);
	font-size: clamp(0.75rem, 2vw, 0.875rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--sf-color-orange);
	opacity: 0.9;
}

.sf-carousel .sf-carousel__controls {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--sf-carousel-controls-gap);
	width: 100%;
	max-width: 100%;
	min-width: 0;
	transform: translate(18px, 32px);
}

.sf-carousel__arrow {
	flex-shrink: 0;
	width: var(--sf-carousel-nav-btn-size);
	height: var(--sf-carousel-nav-btn-size);
	padding: 0;
	background-color: var(--sf-carousel-nav-btn-bg);
	color: transparent;
	position: relative;
	border: var(--sf-carousel-nav-btn-border);
	border-radius: 50%;
	box-shadow: var(--sf-carousel-nav-btn-shadow);
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.sf-carousel__arrow span {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	overflow: hidden;
	position: relative;
	opacity: 0;
	visibility: hidden;
}

.sf-carousel__arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--sf-carousel-nav-chevron-w);
	height: var(--sf-carousel-nav-chevron-h);
	border: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transform: translate(-60%, -40%);
}

.sf-carousel__arrow--prev::after {
	background-image: url(/tsunagu/smilefuture/image_renewal/carousel-nav-arrow.svg);
}

.sf-carousel__arrow--next::after {
	background-image: url(/tsunagu/smilefuture/image_renewal/carousel-nav-arrow.svg);
	transform: translate(-40%, -40%) scaleX(-1);
}

.sf-carousel__arrow:hover {
	opacity: 0.85;
}

.sf-carousel__arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.sf-carousel__dots {
	display: flex;
	flex: 1 1 0;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: stretch;
	gap: var(--sf-carousel-nav-bar-gap);
	width: 100%;
	min-width: 0;
}

.sf-carousel__dot {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	height: var(--sf-carousel-nav-bar-h);
	padding: 0;
	border: none;
	border-radius: 999px;
	background-color: var(--sf-carousel-nav-bar-inactive);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.sf-carousel__dot.is-active {
	background-color: var(--sf-carousel-nav-bar-active);
}

.sf-carousel__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}


/* ----- 6. Carousel ticker（カルーセル②・中央スナップ＋傾き） ----- */
.sf-carousel--ticker {
	padding: 0;
	background: none;
	border: none;
	min-height: 0;
	width: 100%;
}

.sf-carousel--ticker .sf-carousel__viewport {
	width: 100%;
	min-height: 0;
	padding: clamp(8px, 2vw, 16px) 0;
	overflow: visible;
}

.sf-carousel--ticker .sf-carousel__track {
	display: flex;
	align-items: flex-start;
	gap: var(--sf-ticker-gap);
	list-style: none;
	margin: 0;
	padding: 0 clamp(12px, 4vw, 24px);
	will-change: transform;
	transition: transform var(--sf-ticker-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.sf-carousel--ticker .sf-carousel__slide {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 0 0 var(--sf-ticker-slide-width);
	margin: 0;
	transition: opacity 0.35s ease;
}

.sf-carousel--ticker .sf-carousel__slide.is-active {
	z-index: 10;
}

.sf-carousel--ticker .sf-carousel__slide--clone {
	pointer-events: none;
}

.sf-carousel--ticker.is-ticker-instant .sf-card--ticker {
	transition: none;
}

/* ticker カルーセル内カード：400px 基準の比率を保ち width に合わせて拡大 */
.sf-carousel--ticker .sf-card--ticker {
	box-sizing: border-box;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	width: 100%;
	aspect-ratio: var(--sf-ticker-design-width) / var(--sf-ticker-design-height);
	height: auto;
	min-height: 0;
	padding:
		var(--sf-ticker-card-pad-top)
		var(--sf-ticker-card-pad-inline)
		var(--sf-ticker-card-pad-bottom);
	border-radius: 40px;
	transform: rotate(0deg);
	box-shadow: none;
	transition:
		transform var(--sf-ticker-duration) cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow var(--sf-ticker-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.sf-carousel--ticker .sf-carousel__slide.is-active .sf-card--ticker {
	transform: rotate(var(--sf-ticker-tilt));
	box-shadow: 3px 13px 7px 0 rgba(0, 0, 0, .25);
}

.sf-carousel--ticker .sf-card--ticker .sf-card__num {
	top: 5.75%;
	left: 5.75%;
	width: min(80px, 20%);
	height: min(80px, 20%);
	min-width: 48px;
	min-height: 48px;
	font-size: clamp(1.75rem, 3.333vw, calc(3rem + 0.5vw));
}

.sf-carousel--ticker .sf-card--ticker .sf-card__media {
	flex: 0 0 auto;
	align-self: center;
	width: calc(100% * var(--sf-ticker-media-width-ratio));
	max-width: 320px;
	aspect-ratio: var(--sf-ticker-media-ratio);
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 20px;
}

.sf-carousel--ticker .sf-card--ticker .sf-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	border-radius: 0;
}

.sf-carousel--ticker .sf-card--ticker .sf-card__body {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding-bottom: var(--sf-ticker-body-pad-bottom);
	box-sizing: border-box;
}

.sf-carousel--ticker .sf-card--ticker .sf-card__title {
	margin: 0;
	font-size: var(--sf-card-ticker-title-size);
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-align: center;
}

.sf-carousel--ticker .sf-card--ticker .sf-card__sub {
	font-size: var(--sf-card-ticker-sub-size);
	line-height: 1.2;
	text-align: center;
}

.sf-card__sub {
	font-size: min(20px, 1.458vw);
	text-align: center;
	line-height: 1.2;
}

/* ticker: prev / dots / pause / next（1440px 時 616px 幅） */
.sf-carousel .sf-carousel__controls.sf-carousel__controls--ticker,
.sf-carousel--ticker > .sf-carousel__controls {
	width: var(--sf-carousel-ticker-controls-w);
	max-width: 100%;
	margin-top: clamp(12px, 5vw, 60px);
	margin-left: auto;
	margin-right: auto;
	transform: none;
}

.sf-carousel .sf-carousel__controls.sf-carousel__controls--ticker .sf-carousel__dots,
.sf-carousel--ticker > .sf-carousel__controls .sf-carousel__dots {
	transform: none;
	margin: 0;
	padding: 0;
}

.sf-carousel .sf-carousel__controls.sf-carousel__controls--ticker .sf-carousel__nav-end,
.sf-carousel--ticker > .sf-carousel__controls .sf-carousel__nav-end {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--sf-carousel-nav-end-gap);
}

.sf-carousel .sf-carousel__controls.sf-carousel__controls--ticker .sf-carousel__playback,
.sf-carousel--ticker > .sf-carousel__controls .sf-carousel__playback {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

.sf-carousel--ticker:not(.is-paused) .sf-carousel__playback-btn--play {
	display: none;
}

.sf-carousel--ticker.is-paused .sf-carousel__playback-btn--pause {
	display: none;
}

.sf-carousel__playback-btn {
	width: var(--sf-carousel-nav-btn-size);
	height: var(--sf-carousel-nav-btn-size);
	padding: 0;
	border: none;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.sf-carousel__playback-btn span,
.sf-carousel__playback-btn {
	position: relative;
	overflow: visible;
	text-indent: -9999px;
}

.sf-carousel__playback-btn--play,
.sf-carousel__playback-btn--pause {
	width: calc(var(--sf-carousel-pause-bar-w) * 2 + var(--sf-carousel-pause-bar-gap));
	height: var(--sf-carousel-nav-btn-size);
}

.sf-carousel__playback-btn--play::after {
	content: "";
	width: 0;
	height: 0;
	margin-left: 3px;
	border-style: solid;
	border-width: calc(var(--sf-carousel-pause-bar-h) / 2) 0 calc(var(--sf-carousel-pause-bar-h) / 2) calc(var(--sf-carousel-pause-bar-h) * 0.85);
	border-color: transparent transparent transparent #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-indent: 0;
}

.sf-carousel__playback-btn--pause::before,
.sf-carousel__playback-btn--pause::after {
	content: "";
	position: absolute;
	top: 50%;
	width: var(--sf-carousel-pause-bar-w);
	height: var(--sf-carousel-pause-bar-h);
	border: none;
	border-radius: 999px;
	background-color: #fff;
	margin: 0;
	transform: translate(-50%, -50%);
	text-indent: 0;
	display: block;
}

.sf-carousel__playback-btn--pause::before {
	left: calc(50% - (var(--sf-carousel-pause-bar-gap) / 2 + var(--sf-carousel-pause-bar-w) / 2));
}

.sf-carousel__playback-btn--pause::after {
	left: calc(50% + (var(--sf-carousel-pause-bar-gap) / 2 + var(--sf-carousel-pause-bar-w) / 2));
}

.sf-carousel--ticker .sf-carousel__playback-btn--play,
.sf-carousel--ticker .sf-carousel__playback-btn--pause {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

/* ----- 7. Section overlap（柱の重なりスクロール） ----- */
/* 柱ごとに JS で top を設定（高さ不足は早め、十分時はヘッダー直下基準） */
.sf-pillars[data-sf-pillars-overlap] {
	--sf-overlap-panel-min: calc(100vh - var(--sf-overlap-top));
	--sf-overlap-sticky-top: var(--sf-overlap-top);
	overflow-x: clip;
	max-width: 100%;
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar {
	position: sticky;
	top: var(--sf-pillar-sticky-top, var(--sf-overlap-sticky-top, var(--sf-overlap-top)));
	z-index: 1;
	min-height: var(--sf-overlap-panel-min);
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: visible;
	scroll-margin-top: var(--sf-overlap-top);
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--taste {
	z-index: 10;
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--taste .sf-pillar__shell {
	flex: 1;
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--taste .sf-pillar__inner {
	flex: 1;
	/* align-items: center; */
}

/* stack 柱 overlap: transform 分を padding で確保（PC） */
@media screen and (min-width: 960px) {
	.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--taste .sf-carousel--stack,
	.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--joy .sf-carousel--stack {
		padding-bottom: 12px;
	}
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--taste .sf-carousel--stack .sf-carousel__controls,
.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--joy .sf-carousel--stack .sf-carousel__controls {
	transform: translate(0, 0);
	margin-top: 0;
}

/* stack: absolute スライド分を viewport 高さに含める（flow 計測・clip 防止） */
.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--taste .sf-carousel--stack .sf-carousel__viewport,
.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--joy .sf-carousel--stack .sf-carousel__viewport {
	min-height: calc(min(512px, 36.111vw) + min(32px, 2.222vw));
	overflow: visible;
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--taste .sf-pillar__media,
.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--joy .sf-pillar__media {
	overflow: visible;
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--taste .sf-pillar__shell,
.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--joy .sf-pillar__shell {
	padding-bottom: calc(14.5vw + 18px);
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--beyond .sf-pillar__shell {
	padding-bottom: clamp(12px, 1.75vw, 24px);
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--learning .sf-pillar__shell {
	padding-bottom: clamp(24px, 2.5vw, 40px);
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--learning {
	z-index: 20;
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--learning .sf-pillar__shell,
.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--beyond .sf-pillar__shell {
	flex: 1;
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--learning .sf-pillar__inner--stack,
.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--beyond .sf-pillar__inner--stack {
	flex: 1;
	justify-content: flex-start;
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--joy {
	z-index: 30;
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--joy .sf-pillar__shell {
	flex: 1;
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--joy .sf-pillar__inner {
	flex: 1;
	align-items: center;
}

.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--beyond {
	z-index: 40;
}

/* 最後の柱のあと、Ad へ抜ける最小余白（JS で --sf-overlap-exit-height を上書き） */
.sf-pillars[data-sf-pillars-overlap]::after {
	content: "";
	display: block;
	height: var(--sf-overlap-exit-height);
	pointer-events: none;
}

.sf-pillars.is-overlap-reduced > .sf-pillar {
	position: relative;
	top: auto;
	z-index: auto;
	min-height: 0;
	display: block;
}

.sf-pillars.is-overlap-reduced::after {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.sf-pillars[data-sf-pillars-overlap] > .sf-pillar {
		position: relative;
		top: auto;
		min-height: 0;
		display: block;
	}

	.sf-pillars[data-sf-pillars-overlap]::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sf-carousel--ticker .sf-carousel__track,
	.sf-carousel--ticker .sf-card--ticker {
		transition: none;
	}

	.sf-carousel--ticker .sf-carousel__slide.is-active .sf-card--ticker {
		transform: none;
	}
}

/* ----- 8. Ad Gallery ----- */
.sf-ad {
	padding: 0.5vw clamp(16px, 4vw, 40px) 0;
	background-color: var(--sf-color-bg);
	color: var(--sf-color-red);
}

.sf-ad__panel {
	max-width: min(1200px, 100%);
	margin: 0 auto;
	padding: 7vw 0 0;
	background-color: #fff6de;
	border-radius: 120px;
	overflow: hidden;
}

.sf-ad__panel > .sf-ad__inner {
	padding: 0 5.5vw;
}

.sf-ad__newspaper-area {
	background-color: #f6edd8;
	padding: clamp(47px, 2vw, 90px) 5.5vw clamp(40px, 6vw, 65px);
}

.sf-ad__inner {
	margin: 0 auto;
	text-align: center;
}

.sf-ad__header {
	margin-bottom: clamp(40px, 3.5vw, 105px);
}

.sf-ad__heading {
	font-family: var(--sf-font-ad-heading);
	font-size: var(--sf-ad-heading-size);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 clamp(12px, 2vw, 30px);
	color: var(--sf-color-red);
}

.sf-ad__lead {
	margin: 0;
	font-size: var(--sf-ad-lead-size);
	font-weight: 700;
	line-height: 1.7;
	color: var(--sf-color-red);
}

.sf-ad__subheading {
	margin: 0 0 clamp(24px, 3.5vw, 56px);
	font-family: var(--sf-font-ad-heading);
	font-size: var(--sf-ad-subheading-size);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.05em;
	color: var(--sf-color-red);
}

.sf-ad__block--newspaper {
	margin-top: 0;
}

.sf-ad__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5.5vw;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sf-ad__card {
	margin: 0;
}

.sf-ad__thumb-link {
	display: block;
	text-decoration: none;
	border-radius: 20px;
	overflow: hidden;
}

.sf-ad__thumb-link:hover {
	opacity: 0.88;
}

.sf-ad__thumb {
	display: block;
	width: 100%;
	height: auto;
	border-radius: clamp(12px, 2vw, 20px);
	aspect-ratio: 528 / 301;
	object-fit: cover;
}

.sf-ad__caption {
	margin-top: 0.5vw;
	text-align: center;
}

.sf-ad__label {
	margin: 0 0 16px;
	font-family: var(--sf-font-ad-heading);
	font-size: var(--sf-ad-label-size);
	font-weight: 800;
}

.sf-ad__label span {
	display: inline-block;
	line-height: 1;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--sf-color-red);
}

.sf-ad__title {
	margin: 0 0 15px;
	font-size: var(--sf-ad-title-size);
	font-weight: 700;
	line-height: 1.5;
	color: var(--sf-color-red);
}

.sf-ad__desc {
	margin: 0;
	font-size: var(--sf-ad-desc-size);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.05em;
	text-align: left;
	color: #6b5b4d;
}

.sf-ad__newspaper-list {
	display: grid;
	grid-template-columns: repeat(2, var(--sf-ad-newspaper-width));
	justify-content: center;
	gap: var(--sf-ad-newspaper-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sf-ad__newspaper-card {
	margin: 0;
}

.sf-ad__newspaper-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: clamp(12px, 2vw, 20px);
	aspect-ratio: 280 / 377;
	object-fit: cover;
}

.sf-ad__newspaper-caption {
	margin-top: clamp(12px, 1.5vw, 24px);
	text-align: center;
}

.sf-ad__newspaper-date {
	margin: 0 0 clamp(8px, 1.5vw, 16px);
	font-family: var(--sf-font-body);
	font-size: var(--sf-ad-newspaper-date-size);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.05em;
	color: var(--sf-color-red);
}

.sf-ad__pdf-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0 3px 6px;
	border-bottom: 2px solid var(--sf-color-red);
	font-family: var(--sf-font-body);
	font-size: var(--sf-ad-pdf-link-size);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	color: #333;
	text-align: center;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.sf-ad__pdf-link-icon {
	display: block;
	flex-shrink: 0;
	width: 0.5em;
	height: auto;
	aspect-ratio: 10 / 18;
	transform: translate(-0.15em, 1px);
}

.sf-ad__pdf-link:hover {
	opacity: 0.88;
}

.sf-ad__action {
	margin: clamp(40px, 6vw, 72px) 0 clamp(40px, 6vw, 65px);
}

.sf-ad__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 280px;
	height: 80px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background-color: var(--sf-color-red);
	color: #fff;
	font-size: var(--sf-ad-btn-size);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.sf-ad__btn:hover {
	opacity: 0.88;
}

/* ----- 9. Closing ----- */
.sf-closing {
	position: relative;
	padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 40px) clamp(56px, 9vw, 112px);
	background-color: var(--sf-color-bg);
	background-image: url("/tsunagu/smilefuture/image_renewal/closing-bg.png");
	background-repeat: no-repeat;
	background-position: top -95px center;
	background-size: 100% auto;
}

.sf-closing__inner {
	position: relative;
	z-index: 1;
	margin: 0 auto;
}

.sf-closing__stage {
	position: relative;
	margin-top: 7.5vw;
	padding: 3vw 0 clamp(24px, 15vw, 400px);
	background-image: url(/tsunagu/smilefuture/image_renewal/closing-stage-bg.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	transform: translateX(-50px);
}

.sf-closing__photos {
	position: absolute;
	inset: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.sf-closing__photo {
	position: absolute;
	overflow: hidden;
	border-radius: 50%;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	z-index: 3;
}

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

.sf-closing__photo--01 {
	top: clamp(-2vw, -3vw, 50px);
	left: -1.5vw;
	width: clamp(120px, 22vw, 240px);
	height: clamp(120px, 22vw, 240px);
}

.sf-closing__photo--02 {
	top: -6.5vw;
	right: -4vw;
	width: clamp(140px, 24vw, 320px);
	height: clamp(140px, 24vw, 320px);
}

.sf-closing__photo--03 {
	right: -4.5vw;
	top: clamp(416px, 57vw, 780px);
	width: clamp(100px, 18vw, 240px);
	height: clamp(100px, 18vw, 240px);
}

.sf-closing__cloud {
	position: relative;
	z-index: 2;
	margin: 0 auto;
}

.sf-closing__cloud-frame {
	position: absolute;
	inset: -12px -16px;
	background: url("/tsunagu/smilefuture/image_renewal/closing/cloud-frame.svg") center / 100% 100% no-repeat;
	pointer-events: none;
}

.sf-closing__cloud-inner {
	position: relative;
	padding: 5.5vw clamp(28px, 5vw, 48px) 10vw;
	background-color: transparent;
	text-align: center;
}

.sf-closing__heading {
	font-family: var(--sf-font-display);
	font-size: var(--sf-closing-heading-size);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.05em;
	padding-left: .5em;
	margin: 0 0 clamp(31px, 4.1vw, 80px);
	color: var(--sf-color-red);
}

.sf-closing__text {
	font-size: var(--sf-closing-text-size);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.05em;
	color: var(--sf-color-red);
}

.sf-closing__text p {
	margin: 0 0 1em;
}

.sf-closing__text p:last-child {
	margin-bottom: 0;
}

.sf-closing__logo {
	width: clamp(215px, 45vw, 580px);
	margin: clamp(57px, 5vw, 50px) auto 0;
	display: flex;
	justify-content: center;
	transform: translateX(19px);
}

.sf-closing__logo img {
	width: 100%;
	height: auto;
}

.sf-closing__tagline {
	position: relative;
	z-index: 2;
	margin: clamp(28px, 5vw, 40px) 0 0;
	font-family: var(--sf-font-display);
	font-size: clamp(1.5rem, 5vw, 2.5rem);
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	color: #000;
}

[data-sf-fade-delay="1"] {
	transition-delay: 0.1s;
}

[data-sf-fade-delay="2"] {
	transition-delay: 0.2s;
}

[data-sf-fade-delay="3"] {
	transition-delay: 0.3s;
}

[data-sf-fade-delay="4"] {
	transition-delay: 0.45s;
}

@media screen and (min-width: 960px) {
	.sf-br--pc {
		display: inline;
	}

	.sf-br--sp {
		display: none;
	}
}

/* ----- SP ----- */
@media screen and (max-width: 959px) {
	.sf {
		background-image: url(/tsunagu/smilefuture/image_renewal/kv-bg-sp.png);
		background-position: top 14px center;
	}
	
	.sf-kv {
		padding: 39px 20px 24px 23px;
	}

	.sf-kv__inner {
		width: 100%;
	}

	.sf-lead {
		padding: 41px clamp(16px, 3.52vw, 27px) clamp(104px, 18vw, 176px);
	}

	.sf-lead__inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(1.5rem, 4.5vw, 2.75rem);
		min-height: 0;
		padding: 0 2px;
	}

	.sf-lead__content {
		max-width: none;
		width: 100%;
	}

	.sf-lead__heading {
		font-size: 8.5vw;
		line-height: 1.2;
		letter-spacing: 0.05em;
	}

	.sf-lead__body {
		font-size: 4.26666667vw;
		line-height: 1.6;
		letter-spacing: 0;
	}

	.sf-lead__body p {
		margin-bottom: 0.85em;
	}

	.sf-lead__body p:last-child {
		margin-top: 8.222222vw;
	}

	/* 円形写真：オーガニックな段差配置（SP） */
	.sf-lead__photos {
		--sf-lead-photo-1-size: clamp(200px, 72cqi, 300px);
		--sf-lead-photo-2-size: clamp(120px, 45cqi, 170px);
		--sf-lead-photo-3-size: clamp(100px, 37cqi, 140px);
		--sf-lead-photo-3-top: clamp(48px, 14cqi, 88px);
		position: relative;
		inset: auto;
		width: min(100%, clamp(300px, 92vw, 380px));
		max-width: 100%;
		min-height: clamp(440px, 134cqi, 540px);
		container-type: inline-size;
		margin: clamp(8px, 2.5vw, 20px) auto 0;
		padding: 0;
		overflow: hidden;
	}

	.sf-lead__photo {
		position: absolute;
		margin: 0;
	}

	/* 食事プレート：右上 */
	.sf-lead__photo--02 {
		top: 0;
		right: 0;
		left: auto;
		bottom: auto;
		width: var(--sf-lead-photo-2-size);
		height: var(--sf-lead-photo-2-size);
		z-index: 3;
	}

	/* 研究者：左中段 */
	.sf-lead__photo--03 {
		top: var(--sf-lead-photo-3-top);
		left: 0;
		right: auto;
		bottom: auto;
		width: var(--sf-lead-photo-3-size);
		height: var(--sf-lead-photo-3-size);
		z-index: 2;
	}

	/* 母子：左下（大） */
	.sf-lead__photo--01 {
		
		bottom: 0;
		left: 0;
		top: auto;
		right: auto;
		width: var(--sf-lead-photo-1-size);
		height: var(--sf-lead-photo-1-size);
		z-index: 1;
	}

	.sf-pillar {
		padding: 32px 16px;
	}

	.sf-pillars > .sf-pillar {
		padding-left: 0;
		padding-right: 0;
	}

	.sf-pillar--taste,
	.sf-pillar--joy {
		padding-bottom: 0;
	}

	.sf-pillar--taste .sf-pillar__shell,
	.sf-pillar--joy .sf-pillar__shell {
		padding: 78px 31px 40px;
		border-radius: 80px;
	}
	
	.sf-pillar--taste .sf-pillar__heading, 
	.sf-pillar--joy .sf-pillar__heading {
		font-size: clamp(2rem, 8vw, 72px);
		margin-bottom: 7.5vw;
	}

	.sf-pillar--taste .sf-pillar__inner,
	.sf-pillar--joy .sf-pillar__inner {
		flex-direction: column;
		gap: 38px;
	}

	.sf-pillar--taste .sf-pillar__text,
	.sf-pillar--joy .sf-pillar__text {
		font-size: var(--sf-pillar-stack-text-size-sp);
		line-height: 1.75;
		max-width: 100%;
	}

	.sf-pillar--taste .sf-pillar__media,
	.sf-pillar--joy .sf-pillar__media {
		width: 100%;
		overflow: visible;
	}

	.sf-carousel--stack .sf-carousel__viewport {
		max-width: 100%;
		min-height: min(520px, 36.111vw);
		padding: 24px 0;
		margin-left: -6vw;
	}

	.sf-carousel--stack {
		--sf-stack-card-height: 84vw;
	}

	.sf-carousel--stack .sf-carousel__deck {
		width: 65vw;
		max-width: 80vw;
		height: var(--sf-stack-card-height);
		border-radius: 24px;
		transform: translateX(calc(-50% - 11px));
	}

	.sf-carousel--stack .sf-card__num {
		top: var(--sf-stack-card-pad-top);
		left: 5.75%;
		width: 12%;
		height: auto;
		aspect-ratio: 1;
		min-width: 48px;
		font-size: var(--sf-card-ticker-num-size-sp);
	}

	.sf-carousel--stack .sf-carousel__slide {
		width: 65vw;
		height: var(--sf-stack-card-height);
		top: 4px;
		margin-left: -4vw;
		--sf-pos-peek: 61%;
		--sf-pos-off: 38%;
		--sf-pos-enter: 105%;
	}

	.sf-carousel--stack .sf-card {
		width: 64vw;
		height: 100%;
		min-height: var(--sf-stack-card-height);
		border-radius: 24px;
	}

	.sf-carousel--stack .sf-card__media img {
		max-height: 100%;
	}

	.sf-carousel--stack .sf-card__media.sf-rounded {
		width: min(92cqw, 52vw, 100%);
		height: min(100%, 92cqw, 52vw);
	}

	.sf-pillar__inner {
		flex-direction: column;
	}

	.sf-carousel .sf-card__title {
		font-size: 5vw;
	}

	.sf-carousel--ticker .sf-card--ticker .sf-card__title {
		font-size: 5vw;
	}

	.sf-carousel .sf-card__sub {
		font-size: 3vw;
	}
	
	.sf-carousel--stack .sf-carousel__controls {
		transform: translate(0px, 168px);
		width: 100%;
		max-width: 100%;
		padding-inline: clamp(8px, 3vw, 16px);
		box-sizing: border-box;
	}

	.sf-carousel .sf-carousel__controls.sf-carousel__controls--ticker,
	.sf-carousel--ticker > .sf-carousel__controls {
		width: 100%;
		max-width: 100%;
		padding-inline: clamp(8px, 3vw, 16px);
		box-sizing: border-box;
	}

	.sf-carousel__dots {
		gap: var(--sf-carousel-nav-bar-gap);
	}

	:root {
		--sf-ticker-tilt: -5deg;
		--sf-ticker-peek: clamp(48px, 15vw, 88px);
		--sf-ticker-card-size: calc(100vw - 2 * var(--sf-ticker-peek));
		--sf-ticker-slide-width: var(--sf-ticker-card-size);
		--sf-ticker-media-gap: clamp(10px, 3.733vw, 16px);
		--sf-ticker-title-gap: clamp(6px, 2.133vw, 10px);
		--sf-ticker-gap: clamp(4px, 1.067vw, 8px);
		--sf-carousel-nav-btn-size: 30px;
		--sf-carousel-nav-btn-border: 1px solid #fff;
		--sf-carousel-nav-btn-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
		--sf-carousel-nav-chevron-w: 14px;
		--sf-carousel-nav-chevron-h: 22px;
		--sf-carousel-nav-bar-h: 4px;
		--sf-carousel-nav-bar-gap: 4px;
		--sf-carousel-pause-bar-w: 2.5px;
		--sf-carousel-pause-bar-h: 10px;
		--sf-carousel-pause-bar-gap: 3.5px;
		--sf-carousel-nav-end-gap: 20px;
		--sf-carousel-controls-gap: 20px;
	}

	.sf-pillar--learning,
	.sf-pillar--beyond {
		--sf-pillar-ticker-shell-inline: 16px;
	}

	.sf-pillar--learning .sf-pillar__shell,
	.sf-pillar--beyond .sf-pillar__shell {
		padding: 74px 25px 40px;
		border-radius: 80px;
	}

	.sf-carousel--ticker .sf-card--ticker {
		border-radius: 24px;
	}

	.sf-carousel--ticker .sf-carousel__slide.is-active .sf-card--ticker {
		transform: rotate(-12deg);
	}
	
	.sf-carousel--ticker .sf-card--ticker .sf-card__num {
		top: 5.75%;
		left: 5.75%;
		width: 12%;
		height: 12%;
		min-width: 48px;
		min-height: 48px;
		font-size: var(--sf-card-ticker-num-size-sp);
	}

	.sf-pillar--learning .sf-pillar__heading,
	.sf-pillar--beyond .sf-pillar__heading {
		font-size: 8.5vw;
		margin-bottom: 12vw;
	}

	.sf-pillar--learning .sf-carousel--ticker .sf-card--ticker .sf-card__title,
	.sf-pillar--beyond .sf-carousel--ticker .sf-card--ticker .sf-card__title {
		font-size: 5vw;
		margin-bottom: var(--sf-ticker-title-gap);
	}

	.sf-pillar--learning .sf-carousel--ticker .sf-card--ticker .sf-card__title--compact {
		font-size: 4.5vw;
	}

	.sf-pillar--learning .sf-carousel--ticker .sf-card--ticker .sf-card__sub,
	.sf-pillar--beyond .sf-carousel--ticker .sf-card--ticker .sf-card__sub {
		font-size: 3vw;
	}

	.sf-pillar--learning .sf-pillar__text, 
	.sf-pillar--beyond .sf-pillar__text {
		font-size: 4vw;
		line-height: 1.75;
    max-width: 100%;
	}

	.sf-pillar--learning .sf-pillar__text p, 
	.sf-pillar--beyond .sf-pillar__text p {
		letter-spacing: 0;
	}

	.sf-carousel--ticker .sf-card--ticker .sf-card__media {
		width: calc(100% * var(--sf-ticker-media-width-ratio));
		max-width: none;
	}

	.sf-carousel--ticker .sf-carousel__track {
		padding: 0 8vw;
	}

	.sf-pillar--learning .sf-carousel--ticker .sf-carousel__viewport,
	.sf-pillar--beyond .sf-carousel--ticker .sf-carousel__viewport {
		overflow: visible;
		padding-bottom: 12px;
	}

	.sf-pillar--learning .sf-carousel--ticker .sf-carousel__track,
	.sf-pillar--beyond .sf-carousel--ticker .sf-carousel__track {
		padding-left: 0;
		padding-right: 0;
	}

	.sf-pillars[data-sf-pillars-overlap] > .sf-pillar {
		top: var(--sf-pillar-sticky-top, var(--sf-overlap-sticky-top, var(--sf-overlap-top)));
		padding: 0;
	}

	.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--taste .sf-carousel--stack,
	.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--joy .sf-carousel--stack {
		padding-bottom: 42px;
	}

	.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--taste .sf-carousel--stack .sf-carousel__viewport,
	.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--joy .sf-carousel--stack .sf-carousel__viewport {
		margin-left: 0;
		min-height: calc(84vw + 28px);
		overflow: visible;
	}

	.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--taste .sf-pillar__shell,
	.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--joy .sf-pillar__shell {
		padding-bottom: calc(40px + 24px);
	}

	.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--taste .sf-pillar__media,
	.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--joy .sf-pillar__media {
		overflow: visible;
	}

	.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--taste .sf-carousel--stack .sf-carousel__slide,
	.sf-pillars[data-sf-pillars-overlap] > .sf-pillar--joy .sf-carousel--stack .sf-carousel__slide {
		margin-left: 0;
	}

	.sf-pillar--learning .sf-carousel .sf-carousel__controls.sf-carousel__controls--ticker,
	.sf-pillar--beyond .sf-carousel .sf-carousel__controls.sf-carousel__controls--ticker {
		transform: translate(0, 15px);
	}

	.sf-ad {
		padding: 0 26px;
    background-color: var(--sf-color-bg);
    background-image: url(/tsunagu/smilefuture/image_renewal/ad-bg-sp.png);
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 16vw auto;
	}

	.sf-ad__panel {
		padding: 67px 0 0;
		border-radius: 80px;
	}

	.sf-ad__panel > .sf-ad__inner {
		padding: 0 5vw;
	}

	.sf-ad__newspaper-area {
		padding: 15vw 5vw 15vw;
	}

	.sf-ad__heading {
		font-size: 10.5vw;
		margin-bottom: 10vw;
	}

	.sf-ad__lead {
		font-size: 5vw;
		letter-spacing: 0;
		margin-bottom: 8vw;
	}

	.sf-ad__subheading {
		font-size: 8vw;
		margin-bottom: 8vw;
	}

	.sf-ad__block--newspaper {
		margin-top: 0;
	}

	.sf-ad__list {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.sf-ad__newspaper-list {
		grid-template-columns: 1fr;
		gap: 40px;
		width: 100%;
		max-width: none;
	}

	.sf-ad__newspaper-item {
		width: 100%;
	}

	.sf-ad__newspaper-img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.sf-ad__newspaper-date {
		font-size: 5vw;
	}

	.sf-ad__pdf-link {
		font-size: 5vw;
	}

	.sf-ad__pdf-link-icon {
		width: auto;
		height: 0.8em;
		aspect-ratio: 10 / 18;
	}

	.sf-ad__action {
		margin: 15vw 0 15vw;
	}

	.sf-ad__caption {
		margin-top: 5vw;
	}

	.sf-ad__label {
		font-size: 5vw;
		margin-bottom: 4vw;
	}

	.sf-ad__label span{
		border-width: 3px;
	}
	
	.sf-ad__title {
		font-size: 5vw;
		line-height: 1.6;
	}

	.sf-ad__desc {
		font-size: 4vw;
	}

	.sf-ad__btn {
		width: min(280px, 100%);
		height: min(60px, 18.667vw);
		border: none;
		font-size: var(--sf-ad-btn-size-sp);
	}

	.sf-closing {
		padding: clamp(100px, 38vw, 280px) clamp(16px, 4vw, 24px) clamp(64px, 21vw, 150px);
		background-image: url(/tsunagu/smilefuture/image_renewal/closing-bg-sp.png);
		background-position: top -114px center;
	}

	.sf-closing__stage {
		width: 100%;
		margin-top: 0;
		padding: clamp(32px, 10vw, 64px) 0 clamp(120px, 28vw, 240px);
		background-image: url(/tsunagu/smilefuture/image_renewal/closing-stage-bg-sp.png);
		transform: translateX(0);
		overflow: visible;
	}

	.sf-closing__photos {
		overflow: visible;
	}

	.sf-closing__heading{
		font-size: 7.5vw;
		letter-spacing: 0;
		padding-left: 0;
		margin: 0 0 4.5vw;
	}

	.sf-closing__text {
		font-size: 4.5vw;
		line-height: 1.55;
	}

	/* 円形写真：左上・右上・左下（雲形の周囲） */
	.sf-closing__photo--01 {
		top: auto;
		left: auto;
		right: clamp(0px, 4vw, 16px);
		bottom: clamp(-3px, -3vw, 12px);
		width: clamp(120px, 37vw, 200px);
		height: clamp(120px, 37vw, 200px);
	}

	.sf-closing__photo--02 {
		top: clamp(-150px, -27vw, -36px);
		right: auto;
		left: clamp(-8px, -0.5vw, 4px);
		width: clamp(130px, 44vw, 220px);
		height: clamp(130px, 44vw, 220px);
	}

	.sf-closing__photo--03 {
		top: auto;
		right: auto;
		left: clamp(4px, 13vw, 48px);
		bottom: clamp(-53px, -19vw, 138px);
		width: clamp(100px, 32vw, 180px);
		height: clamp(100px, 33vw, 180px);
	}

	.sf-closing__logo {
    width: 58vw;
    margin: 7vw auto 0;
    display: flex;
    justify-content: center;
    transform: translateX(0);
	}

	.sf-closing__cloud {
		max-width: 100%;
	}

	.sf-closing__cloud-frame {
		inset: -8px -4px;
	}

	.sf-closing__cloud-inner {
		padding: 22px 20px 14vw;
	}
}

@media screen and (min-width: 960px) {
	.sf-pillar--taste .sf-pillar__inner,
	.sf-pillar--joy .sf-pillar__inner {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: clamp(24px, 4vw, 56px);
	}

	.sf-pillar--taste .sf-pillar__content,
	.sf-pillar--joy .sf-pillar__content {
		flex: 0 1 61%;
	}

	.sf-pillar--taste .sf-pillar__media,
	.sf-pillar--joy .sf-pillar__media {
		flex: 1 1 52%;
		min-width: 0;
		overflow: visible;
		transform: translate(-5.75vw, -7px);
	}

	.sf-pillar--taste .sf-carousel--stack,
	.sf-pillar--joy .sf-carousel--stack {
		width: 100%;
		max-width: min(588px, 40.833vw);
		margin-left: auto;
		margin-right: auto;
	}

	.sf-pillar--taste .sf-carousel--stack .sf-carousel__viewport,
	.sf-pillar--joy .sf-carousel--stack .sf-carousel__viewport {
		max-width: 100%;
		margin-right: 0;
	}
}

/* ----- 10. Side nav（PC） / 11. Bottom nav（SP） ----- */

.sf-nav {
	--sf-nav-local-progress: var(--sf-nav-progress, 0);
	position: fixed;
	z-index: 90;
	pointer-events: none;
	visibility: hidden;
}

.sf-nav.is-visible {
	visibility: visible;
	pointer-events: auto;
}

/* 柱ジャンプ未対応の間はナビを表示専用（クリック不可） */
.sf-nav.is-scroll-disabled .sf-nav__dot {
	pointer-events: none;
	cursor: default;
}

.sf-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ドット＋ラベル（参照: s3-section-nav__dot 構造） */
.sf-nav__dot {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
	border: var(--sf-nav-border-width) solid transparent;
	border-radius: 999px;
	text-decoration: none;
	color: inherit;
	transition:
		border-color 0.35s ease,
		background-color 0.35s ease;
}

.sf-nav__dot-inner {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--sf-nav-icon-size);
	height: var(--sf-nav-icon-size);
	border-radius: 50%;
	background-color: var(--sf-nav-track-bg);
	transition: background-color 0.35s ease;
}

.sf-nav__dot-inner img {
	display: block;
	width: auto;
	height: auto;
	max-width: 62%;
	max-height: 62%;
	object-fit: contain;
}

.sf-nav__label {
	overflow: hidden;
	max-width: 0;
	opacity: 0;
	padding: 0;
	font-family: var(--sf-font-body);
	font-size: var(--sf-nav-label-size);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: #fff;
	transition:
		max-width 0.4s cubic-bezier(0.5, 1, 0.89, 1),
		opacity 0.3s ease,
		padding 0.4s cubic-bezier(0.5, 1, 0.89, 1);
}

.sf-nav__track {
	pointer-events: none;
}

.sf-nav__line {
	display: block;
	position: absolute;
	background: var(--sf-nav-track-bg);
}

.sf-nav__line--fill {
	background: linear-gradient(
		180deg,
		var(--sf-nav-fill-start) 0%,
		var(--sf-nav-fill-mid) 45%,
		var(--sf-nav-fill-end) 100%
	);
	transition: transform 0.15s linear;
}

/* PC: 右サイド・ドット固定・ホバーでラベル＋白枠カプセル */
@media (min-width: 960px) {
	.sf-nav {
		top: 50%;
		right: var(--sf-nav-offset-right);
		overflow: visible;
		transform: translateY(-50%);
		width: auto;
	}

	.sf-nav__track {
		position: absolute;
		top: calc(var(--sf-nav-icon-size) / 2);
		right: calc(var(--sf-nav-border-width) + var(--sf-nav-icon-size) / 2);
		bottom: calc(var(--sf-nav-icon-size) / 2);
		width: 6px;
		transform: translateX(50%);
	}

	.sf-nav__line {
		left: 0;
		width: 100%;
		border-radius: 3px;
	}

	.sf-nav__line--base {
		top: 0;
		height: 100%;
	}

	.sf-nav__line--fill {
		top: 0;
		height: 100%;
		transform: scaleY(1);
		transform-origin: top center;
	}

	.sf-nav__list {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: var(--sf-nav-item-gap);
		overflow: visible;
	}

	.sf-nav__item {
		overflow: visible;
	}

	.sf-nav__dot {
		margin-left: auto;
		border-color: var(--sf-nav-border-color);
	}

	.sf-nav__label {
		font-size: var(--sf-nav-label-size);
		/* ホバー解除: テキストを先に隠し、幅・背景は同期して縮める */
		transition:
			max-width 0.4s cubic-bezier(0.5, 1, 0.89, 1),
			opacity 0.1s ease,
			padding 0.4s cubic-bezier(0.5, 1, 0.89, 1);
	}

	/* PC: 常に柱カラー。is-active は見た目を変えない（ホバー時のみカプセル化） */
	.sf-nav__dot {
		transition:
			background-color 0.4s cubic-bezier(0.5, 1, 0.89, 1),
			border-color 0.35s ease;
	}

	.sf-nav__dot-inner {
		background-color: var(--sf-nav-dot-color, var(--sf-nav-fill-start));
		transition: none;
	}

	@media (hover: hover) {
		.sf-nav__dot:hover {
			border-color: var(--sf-nav-border-color);
			background-color: var(--sf-nav-dot-color, var(--sf-nav-fill-start));
			transition:
				background-color 0.25s ease,
				border-color 0.25s ease;
		}

		.sf-nav__dot:hover .sf-nav__dot-inner {
			background-color: transparent;
		}

		.sf-nav__dot:hover .sf-nav__label {
			max-width: 320px;
			opacity: 1;
			padding: 12px 20px 12px 24px;
			transition:
				max-width 0.4s cubic-bezier(0.5, 1, 0.89, 1),
				opacity 0.25s ease 0.06s,
				padding 0.4s cubic-bezier(0.5, 1, 0.89, 1);
		}
	}
}

/* SP: 下部固定・横並び・スクロールでライン着色 */
@media (max-width: 959px) {
	.sf-nav {
		left: 50%;
		right: auto;
		bottom: max(12px, env(safe-area-inset-bottom, 0px));
		transform: translateX(-50%);
		width: min(360px, calc(100% - 24px));
		padding: 12px clamp(16px, 4.5vw, 24px);
		border-radius: 999px;
		background-color: var(--sf-nav-sp-bar-bg);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	}

	.sf-nav__track {
		position: absolute;
		top: 50%;
		left: calc(var(--sf-nav-icon-size-sp) / 2 + 10px);
		right: calc(var(--sf-nav-icon-size-sp) / 2 + 10px);
		height: 4px;
		margin-top: -2px;
		transform: translateY(-50%);
	}

	.sf-nav__line {
		top: 0;
		left: 0;
		height: 100%;
		border-radius: 2px;
	}

	.sf-nav__line--base {
		width: 100%;
		background-color: var(--sf-nav-sp-line-bg);
	}

	.sf-nav__line--fill {
		width: 100%;
		transform: scaleX(var(--sf-nav-local-progress));
		transform-origin: left center;
		background: linear-gradient(
			90deg,
			var(--sf-nav-fill-start) 0%,
			var(--sf-nav-fill-mid) 50%,
			var(--sf-nav-fill-end) 100%
		);
	}

	.sf-nav__list {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 4px;
	}

	.sf-nav__item {
		flex: 0 0 auto;
	}

	.sf-nav__dot {
		flex-direction: column;
		border: none;
		background: transparent;
	}

	.sf-nav__dot-inner {
		box-sizing: border-box;
		width: var(--sf-nav-icon-size-sp);
		height: var(--sf-nav-icon-size-sp);
		border: 2px solid var(--sf-nav-sp-dot-ring);
		background-color: var(--sf-nav-sp-dot-bg);
	}

	.sf-nav__dot.is-passed .sf-nav__dot-inner,
	.sf-nav__dot.is-active .sf-nav__dot-inner {
		background-color: var(--sf-nav-dot-color, var(--sf-nav-fill-start));
	}

	.sf-nav__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sf-nav,
	.sf-nav__label,
	.sf-nav__dot,
	.sf-nav__dot-inner,
	.sf-nav__line--fill {
		transition: none;
	}
}

/* OneTrust cookie banner: close icon centering */
#onetrust-banner-sdk .onetrust-close-btn-handler,
#onetrust-banner-sdk .onetrust-close-btn-handler.onetrust-close-btn-ui,
#onetrust-banner-sdk .banner-close-button,
#onetrust-banner-sdk .ot-close-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	padding: 0 !important;
	vertical-align: middle;
}