@charset "utf-8";
/* トップのファーストビュー：5枚の自動スライド（renewal.css の .rn-hero の上に重ねる）
   高さは --hero-n（デザイン画 1024 幅の単位 u の数）1つで切り替える。今の1枚目の高さ = 315、高め案 = 390。
   2〜5枚目はデザイン画（ヒーローの高さ 534u で描かれている）を、この高さに合わせて縮めて並べる。
     --ku：間隔・写真の大きさ（高さに比例して縮める）
     --tu：文字の大きさ（縮めすぎないように、間隔より控えめに縮める） */

.rn-hero.hs {
	--hero-n: 315;
	--hk: calc(var(--hero-n) / 534);
	--ku: calc(var(--u) * var(--hk));
	--tu: calc(var(--u) * (0.28 + 0.72 * var(--hk)));
	height: auto;
	background: #CFE3F4;
	touch-action: pan-y;
}
.hs-track { position: relative; display: grid; height: calc(var(--hero-n) * var(--u)); }
.hs-slide { grid-area: 1 / 1; position: relative; overflow: hidden; min-width: 0; opacity: 0; visibility: hidden; transform: translateX(calc(28 * var(--u))); transition: opacity .9s ease, transform 1.1s cubic-bezier(.22,.7,.2,1), visibility 0s linear .9s; }
.hs-slide.is-active { opacity: 1; visibility: visible; transform: none; z-index: 1; transition: opacity .9s ease, transform 1.1s cubic-bezier(.22,.7,.2,1), visibility 0s; }
.hs-slide.is-leaving { transform: translateX(calc(-28 * var(--u))); }
.hs.is-back .hs-slide:not(.is-active):not(.is-leaving) { transform: translateX(calc(-28 * var(--u))); }
.hs.is-back .hs-slide.is-leaving { transform: translateX(calc(28 * var(--u))); }
.hs-in { height: 100%; }
.hs-slide img { max-width: none; }

/* ---------- 1枚目（今のヒーローそのまま。背景だけスライドに移す） ---------- */
.hs-s1 { background: url(../images/renewal/hero-bg.jpg?v=2) center / cover no-repeat, #CFE3F4; }
/* 高め案（--hero-n を 315 より大きくしたとき）は、文字を上下の真ん中へ、写真を高さに合わせて大きく */
.hs-s1 .rn-hero-copy { top: calc((49 + (var(--hero-n) - 315) / 2) * var(--u)); }
.hs-s1 .rn-hero-photo { height: calc((var(--hero-n) - 2) * var(--u)); width: calc(343 * var(--hero-n) / 315 * var(--u)); left: calc((609 - 343 * (var(--hero-n) / 315 - 1) / 2) * var(--u)); }

/* ---------- 2〜5枚目の共通部品 ---------- */
.hs-copy { position: absolute; z-index: 3; top: 0; bottom: calc(34 * var(--ku)); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hs-kicker { font-family: var(--serif); font-weight: 700; font-size: calc(19 * var(--tu)); line-height: 1.5; letter-spacing: .04em; color: var(--navy); white-space: nowrap; font-feature-settings: "palt"; }
.hs-kicker-u { padding-bottom: calc(10 * var(--ku)); background: linear-gradient(90deg, var(--gold-1), var(--gold-1) 70%, rgba(207,175,114,.15)) left bottom / 100% calc(1.5 * var(--u)) no-repeat; }
.hs-title { font-family: var(--serif); font-weight: 700; color: var(--navy); letter-spacing: .04em; white-space: nowrap; font-feature-settings: "palt"; }
.hs-sub { font-family: var(--serif); font-weight: 700; color: #2B3B55; letter-spacing: .05em; white-space: nowrap; }
.hs-text { color: #2F3B4E; font-weight: 500; letter-spacing: .08em; white-space: nowrap; }
.hs-brand { white-space: nowrap; background: linear-gradient(180deg, #D3B57A 0%, #B08A4F 55%, #9A773F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .12em; margin-bottom: -.12em; }
.hs-kana { display: flex; align-items: center; font-family: var(--serif); font-weight: 600; color: var(--navy); white-space: nowrap; }
.hs-kana::before, .hs-kana::after { content: ""; height: 1px; background: var(--gold-1); }
.hs-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: calc(46 * var(--tu)); padding: 0 calc(54 * var(--tu)) .1em calc(38 * var(--tu)); border-radius: 999px; color: #fff !important; font-family: var(--serif); font-weight: 700; font-size: calc(17 * var(--tu)); letter-spacing: .1em; white-space: nowrap; transition: filter .2s, transform .2s; }
.hs-btn::after { content: ""; position: absolute; right: calc(26 * var(--tu)); top: 50%; width: calc(8 * var(--tu)); height: calc(8 * var(--tu)); margin-top: calc(-4 * var(--tu)); border-top: calc(1.8 * var(--u)) solid #fff; border-right: calc(1.8 * var(--u)) solid #fff; transform: rotate(45deg); }
.hs-btn-arrow::after { width: calc(15 * var(--tu)); height: 0; margin-top: 0; border-right: 0; transform: none; }
.hs-btn-arrow::before { content: ""; position: absolute; right: calc(26 * var(--tu)); top: 50%; width: calc(7 * var(--tu)); height: calc(7 * var(--tu)); margin-top: calc(-3.5 * var(--tu) + .5 * var(--u)); border-top: calc(1.8 * var(--u)) solid #fff; border-right: calc(1.8 * var(--u)) solid #fff; transform: rotate(45deg); }
.hs-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hs-btn-yellow { background: linear-gradient(180deg, #FFF3A6 0%, #FFDD55 42%, #F7C629 72%, #F0B416 100%); border: 1px solid #E8B21C; color: var(--navy) !important; box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(196,140,10,.3), inset 0 calc(2 * var(--u)) 0 rgba(255,255,255,.75); }
.hs-btn-yellow::after { border-color: var(--navy); }
.hs-btn-rose { background: linear-gradient(180deg, #D9577F 0%, #BC3366 55%, #A72857 100%); box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(169,40,87,.28), inset 0 1px 0 rgba(255,255,255,.35); }

/* ---------- 2枚目：クラウドファンディング ---------- */
.hs-s2 { background: radial-gradient(60% 70% at 72% 45%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%), linear-gradient(180deg, #FBEAF1 0%, #F9E4EE 60%, #F6DCE8 100%); }
.hs-s2::before { content: ""; position: absolute; inset: 0; background: url(../images/decolla/hero-bg.jpg) center / cover no-repeat; opacity: .45; }
.hs-s2 .hs-copy { left: calc(78 * var(--u)); }
.hs-s2 .hs-kicker { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.hs-s2 .hs-kicker::before { content: ""; width: calc(48 * var(--u)); height: calc(1.5 * var(--u)); background: var(--gold-1); }
.hs-s2 .hs-title { margin-top: calc(22 * var(--ku)); font-size: calc(48 * var(--tu)); line-height: 1.42; }
.hs-line { display: block; width: calc(73 * var(--u)); height: calc(2 * var(--u)); margin-top: calc(22 * var(--ku)); background: linear-gradient(90deg, var(--gold-2), var(--gold-1) 60%, rgba(207,175,114,0)); }
.hs-s2 .hs-text { margin-top: calc(20 * var(--ku)); font-size: calc(18 * var(--tu)); line-height: 1.85; }
.hs-s2 .hs-btn { margin-top: calc(26 * var(--ku)); }
.hs-s2-model { position: absolute; z-index: 1; left: calc(520 * var(--u)); top: 0; height: 100%; max-height: 1086px; width: auto;
	-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 30%, #000 94%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 30%, #000 94%, rgba(0,0,0,0) 100%); }

/* ---------- 3枚目：Dr.DECOLLA ---------- */
.hs-s3 { background: url(../images/decolla/hero-bg.jpg) center / cover no-repeat, #FBE6EE; }
.hs-s3 .hs-copy { left: calc(78 * var(--u)); }
.hs-s3 .hs-kicker { font-size: calc(24 * var(--tu)); padding-right: calc(30 * var(--u)); }
.hs-s3 .hs-title { margin-top: calc(18 * var(--ku)); font-size: calc(44 * var(--tu)); line-height: 1.34; }
.hs-s3 .hs-brand { margin-top: calc(10 * var(--ku)); font-family: var(--latin); font-weight: 600; font-size: calc(34 * var(--tu)); line-height: 1.1; letter-spacing: .06em; }
.hs-s3 .hs-kana { margin-top: calc(4 * var(--ku)); gap: calc(12 * var(--u)); font-size: calc(13 * var(--tu)); letter-spacing: .3em; }
.hs-s3 .hs-kana::before, .hs-s3 .hs-kana::after { width: calc(38 * var(--u)); }
.hs-s3 .hs-btn { margin-top: calc(22 * var(--ku)); }
.hs-s3-model { position: absolute; z-index: 1; right: calc(40 * var(--u)); top: calc(-40 * var(--ku)); height: calc(680 * var(--ku)); max-height: 1100px; width: auto;
	-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 26%, #000 82%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 26%, #000 82%, rgba(0,0,0,0) 100%); }
.hs-s3-pack { position: absolute; z-index: 2; left: calc(410 * var(--u)); top: calc(150 * var(--ku)); height: calc(300 * var(--ku)); max-height: 760px; width: auto; filter: drop-shadow(0 calc(16 * var(--u)) calc(20 * var(--u)) rgba(120,40,70,.25)); }

/* ---------- 4枚目：Dr.Energy Collagen EX ---------- */
.hs-s4 { background: #EAF4FD; }
.hs-s4::before { content: ""; position: absolute; inset: 0; background: url(../images/energy/hero-bg.jpg) center bottom / cover no-repeat; transform: scaleX(-1); }
.hs-s4 .hs-copy { left: calc(78 * var(--u)); }
.hs-s4 .hs-kicker { font-size: calc(27 * var(--tu)); padding-right: calc(8 * var(--u)); }
.hs-s4 .hs-title { margin-top: calc(16 * var(--ku)); font-size: calc(56 * var(--tu)); line-height: 1.3; }
.hs-s4 .hs-title { letter-spacing: .02em; }
.hs-s4 .hs-sub { margin-top: calc(10 * var(--ku)); font-size: calc(20 * var(--tu)); }
.hs-s4 .hs-brand { margin-top: calc(6 * var(--ku)); font-family: var(--serif); font-weight: 700; font-size: calc(32 * var(--tu)); line-height: 1.25; letter-spacing: .01em; background: linear-gradient(180deg, #CDAA62 0%, #A9833F 60%, #8F6C30 100%); -webkit-background-clip: text; background-clip: text; }
.hs-s4 .hs-btn { margin-top: calc(22 * var(--ku)); }
.hs-s4-visual { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.hs-s4-photo { position: absolute; left: calc(440 * var(--u)); top: 0; width: calc(640 * var(--u)); height: 100%; max-height: 992px; object-fit: cover; object-position: 50% 30%;
	-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 24%, #000 84%, rgba(0,0,0,0) 100%), linear-gradient(180deg, #000 82%, rgba(0,0,0,0) 100%); -webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 24%, #000 84%, rgba(0,0,0,0) 100%), linear-gradient(180deg, #000 82%, rgba(0,0,0,0) 100%); mask-composite: intersect; }
.hs-s4-pack { position: absolute; z-index: 2; left: calc(750 * var(--u)); bottom: calc(52 * var(--ku)); height: calc(250 * var(--ku)); max-height: 520px; width: auto; filter: drop-shadow(0 calc(12 * var(--u)) calc(16 * var(--u)) rgba(30,60,110,.28)); }
.hs-s4-yuzu, .hs-s4-honey { position: absolute; z-index: 3; height: calc(150 * var(--ku)); max-height: 675px; width: auto; }
.hs-s4-yuzu { left: calc(670 * var(--u)); bottom: calc(10 * var(--ku)); -webkit-mask-image: linear-gradient(90deg, #000 47%, rgba(0,0,0,0) 55%); mask-image: linear-gradient(90deg, #000 47%, rgba(0,0,0,0) 55%); }
.hs-s4-honey { left: calc(788 * var(--u)); bottom: calc(14 * var(--ku)); clip-path: inset(0 0 13% 0); -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 53%, #000 57%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 53%, #000 57%); }

/* ---------- 5枚目：Dr.ACIS ---------- */
.hs-s5 { background: radial-gradient(70% 60% at 25% 35%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%), linear-gradient(180deg, #FBE9F0 0%, #FCEFF4 70%, #F9E3EC 100%); }
.hs-s5 .hs-copy { left: calc(78 * var(--u)); }
.hs-s5 .hs-kicker { font-size: calc(22 * var(--tu)); padding-right: calc(16 * var(--u)); }
.hs-s5 .hs-title { margin-top: calc(18 * var(--ku)); font-size: calc(42 * var(--tu)); line-height: 1.4; }
.hs-s5 .hs-brand { margin-top: calc(4 * var(--ku)); font-family: var(--latin); font-weight: 600; font-size: calc(64 * var(--tu)); line-height: 1; letter-spacing: .02em; background: linear-gradient(180deg, #D7BA7E 0%, #B48D50 55%, #9A773F 100%); -webkit-background-clip: text; background-clip: text; }
.hs-s5 .hs-kana { align-self: stretch; margin-top: calc(6 * var(--ku)); gap: calc(14 * var(--u)); font-size: calc(14 * var(--tu)); letter-spacing: .24em; max-width: calc(300 * var(--u)); }
.hs-s5 .hs-kana::before, .hs-s5 .hs-kana::after { flex: 1; }
.hs-s5 .hs-text { margin-top: calc(10 * var(--ku)); font-size: calc(16 * var(--tu)); line-height: 1.7; letter-spacing: .06em; }
.hs-s5 .hs-btn { margin-top: calc(20 * var(--ku)); }
.hs-s5-petals { position: absolute; z-index: 1; left: calc(-20 * var(--u)); bottom: calc(-40 * var(--ku)); width: calc(560 * var(--u)); max-width: 1000px; height: auto; opacity: .35; pointer-events: none; }
.hs-s5-model { position: absolute; z-index: 1; left: calc(540 * var(--u)); top: calc(-16 * var(--ku)); height: calc(720 * var(--ku)); max-height: 874px; width: auto; mix-blend-mode: multiply;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,0) 64%), linear-gradient(90deg, rgba(0,0,0,0) 4%, #000 26%, #000 84%, rgba(0,0,0,0) 99%); -webkit-mask-composite: source-in;
	mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,0) 64%), linear-gradient(90deg, rgba(0,0,0,0) 4%, #000 26%, #000 84%, rgba(0,0,0,0) 99%); mask-composite: intersect; }
.hs-s5-pack { position: absolute; z-index: 2; left: calc(715 * var(--u)); top: calc(225 * var(--ku)); height: calc(265 * var(--ku)); max-height: 900px; width: auto; filter: drop-shadow(0 calc(16 * var(--u)) calc(20 * var(--u)) rgba(120,40,70,.22)); }

/* ---------- 点と矢印 ---------- */
.hs-nav { position: absolute; z-index: 5; left: 50%; bottom: calc(10 * var(--ku)); translate: -50% 0; display: flex; align-items: center; gap: calc(22 * var(--u)); }
.hs-dots { display: flex; align-items: center; }
.hs-dot { position: relative; width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: 0; border: 0; background: none; cursor: pointer; }
.hs-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(8 * var(--u)); height: calc(8 * var(--u)); translate: -50% -50%; border-radius: 50%; background: rgba(30,53,96,.22); transition: background .3s, transform .3s; }
.hs-dot:hover::before { background: rgba(30,53,96,.45); }
.hs-dot.is-active::before { background: var(--rose-d); transform: scale(1.3); }
.hs-s1-on .hs-dot.is-active::before { background: var(--navy); }
.hs-s4-on .hs-dot.is-active::before { background: #E9A90F; box-shadow: 0 0 0 1px rgba(160,110,0,.35); }
.hs-arrow { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); padding: 0; border-radius: 50%; border: 1px solid rgba(30,53,96,.45); background: rgba(255,255,255,.7); cursor: pointer; transition: background .2s, border-color .2s; }
.hs-arrow svg { width: 62%; height: 62%; fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-arrow:hover { background: #fff; border-color: var(--navy); }
.hs-dot:focus-visible, .hs-arrow:focus-visible, .hs-btn:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }

/* ---------- 英語：文が長いので少し小さく ---------- */
html[lang="en"] .hs-s2 .hs-title { font-size: calc(44 * var(--tu)); }
html[lang="en"] .hs-s2 .hs-text { letter-spacing: .02em; }
html[lang="en"] .hs-s3 .hs-title { line-height: 1.3; }
html[lang="en"] .hs-s4 .hs-kicker { font-size: calc(22 * var(--tu)); }
html[lang="en"] .hs-s5 .hs-kicker { font-size: calc(18 * var(--tu)); }
html[lang="en"] .hs-s5 .hs-title { font-size: calc(30 * var(--tu)); letter-spacing: .01em; }
html[lang="en"] .hs-s5 .hs-text { font-size: calc(15 * var(--tu)); letter-spacing: .02em; }
html[lang="en"] .hs-s5 .hs-brand { margin-top: calc(10 * var(--ku)); }

@media (prefers-reduced-motion: reduce) {
	.hs-slide, .hs-slide.is-active { transform: none !important; transition: opacity .01s, visibility 0s; }
}

/* ---------- スマホ・タブレット（〜1023px）：今の1枚目と同じ並び（左に文字、右に写真） ---------- */
@media (max-width: 1023px) {
	.hs-track { height: auto; }
	.hs-in { position: relative; min-height: calc(160 * var(--s)); }
	.hs-s1 .rn-hero-copy { top: 0; }
	.hs-s1 .rn-hero-photo { left: auto; height: auto; width: 50%; }

	.hs-copy { position: relative; left: 0 !important; top: 0; bottom: auto; width: 62%; padding: calc(18 * var(--s)) 0 44px 24px; }
	.hs-kicker { font-size: 11px !important; letter-spacing: .02em; white-space: normal; padding-right: 0 !important; }
	.hs-kicker-u { padding-bottom: 6px; background-size: 100% 1px; }
	.hs-title { font-size: clamp(20px, calc(20 * var(--s)), 28px) !important; line-height: 1.42 !important; white-space: normal; }
	.hs-sub { font-size: 11.5px !important; white-space: normal; }
	.hs-text { font-size: 11px !important; line-height: 1.65 !important; letter-spacing: .02em !important; white-space: normal; }
	.hs-text br, .hs-title br.hs-pc { display: none; }
	.hs-brand { font-size: 19px !important; }
	.hs-kana { font-size: 10px !important; gap: 6px !important; }
	.hs-kana::before, .hs-kana::after { width: 14px !important; flex: none !important; }
	.hs-btn { height: 32px; padding: 0 30px .1em 16px; font-size: 12px; letter-spacing: .06em; box-shadow: 0 4px 10px rgba(30,53,96,.18); }
	.hs-btn::after { right: 14px; width: 6px; height: 6px; margin-top: -3px; border-width: 1.5px; }
	.hs-btn-arrow::after { width: 10px; height: 0; margin-top: 0; }
	.hs-btn-arrow::before { right: 14px; width: 5px; height: 5px; margin-top: -2.5px; border-width: 1.5px; }
	.hs-s2 .hs-kicker::before { width: 18px; }
	.hs-s2 .hs-kicker { gap: 6px; }
	.hs-line { width: 40px; height: 2px; margin-top: 8px; }
	.hs-s2 .hs-title, .hs-s3 .hs-title, .hs-s4 .hs-title, .hs-s5 .hs-title { margin-top: 8px; }
	.hs-s2 .hs-text, .hs-s5 .hs-text { margin-top: 6px; }
	.hs-s3 .hs-brand, .hs-s4 .hs-brand, .hs-s5 .hs-brand { margin-top: 4px; }
	.hs-s4 .hs-sub { margin-top: 4px; }
	.hs-s5 .hs-kana { margin-top: 2px; max-width: 160px; }
	.hs-s2 .hs-btn, .hs-s3 .hs-btn, .hs-s4 .hs-btn, .hs-s5 .hs-btn { margin-top: 12px; }
	.hs-s4 .hs-title { font-size: clamp(22px, calc(22 * var(--s)), 30px) !important; }
	.hs-s5 .hs-title { font-size: clamp(16px, calc(16 * var(--s)), 23px) !important; }
	.hs-s5 .hs-brand { font-size: 28px !important; }
	html[lang="en"] .hs-s5 .hs-text { display: none; }
	.hs-s4 .hs-brand { font-size: 15px !important; }
	.hs-s4::after { content: ""; position: absolute; z-index: 2; inset: 0 40% 0 0; background: linear-gradient(90deg, rgba(234,244,253,.75), rgba(234,244,253,0)); pointer-events: none; }

	/* 写真：右側に寄せて、下をそろえる */
	.hs-s2-model { left: auto; right: -21%; height: 100%; }
	.hs-s3-model { right: -10%; top: 0; height: 100%; }
	.hs-s3-pack { left: auto; right: 30%; top: auto; bottom: 30px; height: auto; width: 20%; max-width: 120px; }
	.hs-s4-photo { left: 34%; right: auto; width: 66%; object-position: 72% 30%; }
	.hs-s4-pack { left: auto; right: 12%; bottom: 30px; height: auto; width: 20%; max-width: 120px; }
	.hs-s4-yuzu, .hs-s4-honey { height: auto; width: 30%; max-width: 200px; bottom: 6px; }
	.hs-s4-yuzu { left: auto; right: 20%; }
	.hs-s4-honey { left: auto; right: -2%; }
	.hs-s5-model { left: auto; right: -1%; top: 0; height: 128%; }
	.hs-s5-pack { left: auto; right: 6%; top: auto; bottom: 30px; height: auto; width: 22%; max-width: 140px; }
	.hs-s5-petals { width: 70%; left: -10%; bottom: -10%; }

	.hs-nav { bottom: 6px; gap: 6px; padding: 2px 4px; border-radius: 999px; background: rgba(255,255,255,.72); box-shadow: 0 2px 8px rgba(30,53,96,.1); }
	.hs-dot { width: 22px; height: 26px; }
	.hs-dot::before { width: 7px; height: 7px; }
	.hs-arrow { width: 26px; height: 26px; }
}
@media (max-width: 1023px) {
	html[lang="en"] .hs-s5 .hs-title { font-size: clamp(14px, calc(14 * var(--s)), 20px) !important; }
	html[lang="en"] .hs-s2 .hs-title { font-size: clamp(19px, calc(19 * var(--s)), 26px) !important; }
	html[lang="en"] .hs-s2 .hs-copy { width: 58%; }
}

/* Energy のスライド：スマホだけ女性1人の写真（index.html の picture）。顔が入る位置に（ローズさんの依頼 2026-11-11） */
@media (max-width: 1023px) { .hs-s4-photo { object-position: 50% 28%; } }