@charset "utf-8";
/* Dr.Energy Collagen EX の LP（Codex のデザイン画 energy-v2 E1〜E3。幅856のカンプを1024に換算＝×1.196）。読者はシニアなので文字は大きめ */

.en {
	--y-btn: linear-gradient(180deg, #FFF3A6 0%, #FFDD55 42%, #F7C629 72%, #F0B416 100%);
	--card: linear-gradient(180deg, rgba(255,255,255,.95), rgba(244,249,254,.95));
	--card-shadow: 0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(30,80,140,.12);
	color: #24324D;
	background:
		radial-gradient(40% 18% at 90% 22%, rgba(255,255,255,.8), rgba(255,255,255,0) 70%),
		radial-gradient(45% 16% at 8% 48%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
		radial-gradient(40% 14% at 92% 76%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
		linear-gradient(180deg, #EAF4FD 0%, #E2F0FC 30%, #EDF5FD 55%, #E3F0FC 80%, #EEF6FD 100%);
	overflow: hidden;
}
.en-in { position: relative; width: calc(1024 * var(--u)); margin: 0 auto; padding: 0 calc(30 * var(--u)); }
.en-pc { display: inline; }
.en-sp { display: none; }
.en-sec { position: relative; padding-block: calc(30 * var(--u)) calc(22 * var(--u)); }
.en-note { margin-top: calc(14 * var(--u)); text-align: center; font-size: max(13px, calc(16 * var(--u))); color: #4A5568; line-height: 1.7; }

/* 見出し：中央、左右に金の線 */
.en-h2 { display: flex; align-items: center; justify-content: center; gap: calc(26 * var(--u)); text-align: center; font-family: var(--serif); font-weight: 700; font-size: calc(42 * var(--u)); line-height: 1.32; color: var(--navy); letter-spacing: .04em; font-feature-settings: "palt"; white-space: nowrap; margin-bottom: calc(22 * var(--u)); }
.en-h2::before, .en-h2::after { content: ""; flex: 0 1 calc(150 * var(--u)); min-width: calc(30 * var(--u)); height: calc(2 * var(--u)); background: linear-gradient(90deg, rgba(207,175,114,0), var(--gold-1)); }
.en-h2::after { transform: scaleX(-1); }
.en-h2-one { font-size: calc(40 * var(--u)); }

/* 白いカード */
.en-card { border-radius: calc(18 * var(--u)); border: 1px solid rgba(255,255,255,.95); background: var(--card); box-shadow: var(--card-shadow); }
.en-card-title { display: flex; align-items: center; justify-content: center; gap: calc(26 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(36 * var(--u)); line-height: 1.3; color: var(--navy); letter-spacing: .06em; white-space: nowrap; }
.en-card-title::before, .en-card-title::after { content: ""; flex: 0 1 calc(130 * var(--u)); height: calc(2 * var(--u)); background: linear-gradient(90deg, rgba(207,175,114,0), var(--gold-1)); }
.en-card-title::after { transform: scaleX(-1); }

/* 黄色のボタン */
.en-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: calc(76 * var(--u)); padding: 0 calc(80 * var(--u)) 0 calc(60 * var(--u)); border-radius: 999px; background: var(--y-btn); border: 1px solid #E8B21C; color: var(--navy) !important; font-family: var(--serif); font-weight: 700; font-size: calc(42 * var(--u)); letter-spacing: .12em; 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); transition: filter .2s, transform .2s; }
.en-btn::after { content: ""; position: absolute; right: calc(52 * var(--u)); top: 50%; width: calc(13 * var(--u)); height: calc(13 * var(--u)); margin-top: calc(-7 * var(--u)); border-top: calc(3 * var(--u)) solid var(--navy); border-right: calc(3 * var(--u)) solid var(--navy); transform: rotate(45deg); }
.en-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ゆずとハチミツ（1枚の画像を左右に分けて使う） */
.en-yuzu, .en-honey { position: absolute; height: auto; z-index: 2; max-width: none; }
.en-yuzu { -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%); }
.en-honey { 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%); }

/* ===== ファーストビュー ===== */
.en-hero { position: relative; }
.en-hero::before { content: ""; position: absolute; inset: 0; background: url(../../images/energy/hero-bg.jpg) center bottom / cover no-repeat; transform: scaleX(-1); }
.en-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(60 * var(--u)); background: linear-gradient(180deg, rgba(234,244,253,0), #EAF4FD); }
.en-hero-in { height: calc(592 * var(--u)); padding: 0; }
.en-hero-copy { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; width: calc(520 * var(--u)); padding: calc(46 * var(--u)) 0 0 calc(46 * var(--u)); }
.en-hero-kicker { white-space: nowrap; font-family: var(--serif); font-weight: 700; font-size: calc(32 * var(--u)); color: var(--navy); letter-spacing: .04em; padding: 0 calc(4 * var(--u)) calc(10 * var(--u)); background: linear-gradient(90deg, var(--gold-2), var(--gold-1) 60%, rgba(207,175,114,.4)) left bottom / 100% calc(2.5 * var(--u)) no-repeat; }
.en-hero-title { white-space: nowrap; margin-top: calc(14 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(66 * var(--u)); line-height: 1.3; color: var(--navy); letter-spacing: .02em; }
.en-hero-title::first-line { letter-spacing: .06em; }
.en-hero-sub { margin-top: calc(12 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(24 * var(--u)); color: #2B3B55; letter-spacing: .05em; white-space: nowrap; }
.en-hero-brand { align-self: center; margin-top: calc(10 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(37 * var(--u)); line-height: 1.2; letter-spacing: .01em; background: linear-gradient(180deg, #CDAA62 0%, #A9833F 60%, #8F6C30 100%); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.en-hero-kana { align-self: center; margin-top: calc(2 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(17 * var(--u)); color: #8A6A33; letter-spacing: .1em; white-space: nowrap; }
.en-hero-btn { align-self: center; margin-top: calc(30 * var(--u)); width: calc(420 * var(--u)); }
.en-hero-btn-sp { display: none; }
.en-hero-visual { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.en-hero-woman { position: absolute; right: 0; top: 0; width: calc(574 * var(--u)); height: calc(592 * var(--u)); object-fit: cover; object-position: 30% 0;
	-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 22%), linear-gradient(180deg, #000 80%, rgba(0,0,0,0) 100%); -webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 22%), linear-gradient(180deg, #000 80%, rgba(0,0,0,0) 100%); mask-composite: intersect; }
.en-hero-pack { position: absolute; left: calc(758 * var(--u)); top: calc(290 * var(--u)); width: calc(215 * var(--u)); height: auto; z-index: 1; filter: drop-shadow(0 calc(12 * var(--u)) calc(16 * var(--u)) rgba(30,60,110,.28)); }
.en-hero-yuzu { left: calc(660 * var(--u)); top: calc(458 * var(--u)); width: calc(190 * var(--u)); }
.en-hero-honey { left: calc(812 * var(--u)); top: calc(452 * var(--u)); width: calc(200 * var(--u)); }

/* 1200px より広い画面：写真の右端を空にぼかす */
@media (min-width: 1240px) {
	.en-hero-woman {
		-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 22%, #000 88%, rgba(0,0,0,0) 100%), linear-gradient(180deg, #000 80%, rgba(0,0,0,0) 100%);
		mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 22%, #000 88%, rgba(0,0,0,0) 100%), linear-gradient(180deg, #000 80%, rgba(0,0,0,0) 100%); }
}

/* ===== 一生の活力を支える ===== */
.en-infra { padding-top: calc(36 * var(--u)); }
.en-photo { display: block; width: calc(884 * var(--u)); height: calc(426 * var(--u)); margin: 0 auto; object-fit: cover; object-position: center 55%; border-radius: calc(16 * var(--u)); box-shadow: var(--card-shadow); }
.en-wish { width: fit-content; margin: calc(18 * var(--u)) auto 0; }
.en-wish li { position: relative; padding: calc(2 * var(--u)) 0 calc(2 * var(--u)) calc(28 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(31 * var(--u)); line-height: 1.6; color: var(--navy); letter-spacing: .04em; }
.en-wish li::before { content: ""; position: absolute; left: 0; top: calc(8 * var(--u)); bottom: calc(8 * var(--u)); width: calc(4 * var(--u)); background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); }
.en-wish li + li { margin-top: calc(12 * var(--u)); }
.en-lead { margin-top: calc(14 * var(--u)); text-align: center; font-size: calc(19.5 * var(--u)); line-height: 1.8; letter-spacing: .02em; }

/* 文章ブロック（中央ぞろえ） */
.en-copy { display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); text-align: center; font-size: calc(20.5 * var(--u)); line-height: 1.75; letter-spacing: .03em; }
.en-quote { font-family: var(--serif); font-weight: 700; font-size: calc(37 * var(--u)); line-height: 1.4; color: var(--navy); letter-spacing: .04em; margin-top: calc(2 * var(--u)); }
.en-quote-l { font-size: calc(41 * var(--u)); }

/* ===== 「しなやかさ」こそが ===== */
.en-flex { padding-top: calc(48 * var(--u)); }
.en-chart { width: calc(910 * var(--u)); margin: calc(26 * var(--u)) auto 0; padding: calc(14 * var(--u)) 0; text-align: center; background: #fff; }
.en-chart img { display: inline-block; width: calc(700 * var(--u)); height: auto; }

/* ===== 「めぐり」が導く ===== */
.en-meguri { padding-top: calc(46 * var(--u)); }
.en-meguri::before { content: ""; position: absolute; left: 0; right: 0; top: calc(380 * var(--u)); height: calc(420 * var(--u)); background: url(../../images/energy/hero-bg.jpg) center bottom / cover no-repeat; opacity: .55; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0), #000 35%, #000 65%, rgba(0,0,0,0)); mask-image: linear-gradient(180deg, rgba(0,0,0,0), #000 35%, #000 65%, rgba(0,0,0,0)); }
.en-vessel { width: calc(856 * var(--u)); margin: 0 auto; overflow: hidden; background: #FBFAF7; }
.en-vessel img { display: block; width: 100%; height: calc(340 * var(--u)); object-fit: cover; object-position: center 52%; }
.en-meguri .en-copy { margin-top: calc(20 * var(--u)); }

/* ===== 購入カード ===== */
.en-order-sec { padding-block: calc(26 * var(--u)) calc(30 * var(--u)); }
.en-order { position: relative; width: calc(964 * var(--u)); margin: 0 auto; padding: calc(24 * var(--u)) calc(34 * var(--u)) calc(26 * var(--u)) calc(30 * var(--u)); border-radius: calc(18 * var(--u)); border: 1px solid rgba(255,255,255,.95); background: var(--card); box-shadow: var(--card-shadow); scroll-margin-top: 90px; }
.en-order-catch { display: flex; align-items: center; justify-content: center; gap: calc(24 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(31 * var(--u)); color: var(--navy); letter-spacing: .06em; }
.en-order-catch::before, .en-order-catch::after { content: ""; width: calc(130 * var(--u)); height: calc(2 * var(--u)); background: linear-gradient(90deg, rgba(207,175,114,0), var(--gold-1)); }
.en-order-catch::after { transform: scaleX(-1); }
.en-order-row { display: grid; grid-template-columns: calc(310 * var(--u)) minmax(0, 1fr); gap: calc(20 * var(--u)); align-items: center; margin-top: calc(10 * var(--u)); }
.en-order-visual { position: relative; height: calc(330 * var(--u)); }
.en-order-pack { position: absolute; left: calc(52 * var(--u)); top: 0; width: calc(232 * var(--u)); height: auto; filter: drop-shadow(0 calc(10 * var(--u)) calc(12 * var(--u)) rgba(30,60,110,.2)); }
.en-order-yuzu { left: calc(0 * var(--u)); bottom: calc(-22 * var(--u)); width: calc(210 * var(--u)); }
.en-order-honey { left: calc(96 * var(--u)); bottom: calc(-20 * var(--u)); width: calc(222 * var(--u)); }
.en-order-body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.en-order-name { font-family: var(--serif); font-weight: 700; font-size: calc(33 * var(--u)); line-height: 1.3; color: var(--navy); white-space: nowrap; }
.en-order-name small { font-size: calc(25 * var(--u)); }
.en-order-dose { margin-top: calc(8 * var(--u)); padding: calc(4 * var(--u)) calc(28 * var(--u)); border-radius: 999px; background: linear-gradient(90deg, rgba(246,230,180,.55), #F6E3A8 18%, #F6E3A8 82%, rgba(246,230,180,.55)); font-family: var(--serif); font-weight: 700; font-size: calc(20 * var(--u)); color: var(--navy); white-space: nowrap; }
.en-order-taste { margin-top: calc(10 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(20 * var(--u)); letter-spacing: .04em; }
.en-order-price { align-self: stretch; display: flex; align-items: flex-end; justify-content: space-between; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); padding-left: calc(12 * var(--u)); font-family: var(--serif); font-weight: 700; color: var(--navy); }
.en-order-regular { text-align: left; font-size: calc(18 * var(--u)); line-height: 1.55; white-space: nowrap; padding-bottom: calc(8 * var(--u)); }
.en-order-regular small, .en-order-sale small { font-size: .78em; }
.en-order-sale { display: flex; align-items: baseline; font-size: calc(31 * var(--u)); line-height: 1; white-space: nowrap; }
.en-order-sale span { font-size: calc(20 * var(--u)); margin-right: calc(8 * var(--u)); }
.en-order-sale b { font-size: calc(60 * var(--u)); letter-spacing: -.01em; }
.en-order-sale small { font-size: calc(21 * var(--u)); }
.en-order .en-btn { margin-top: calc(18 * var(--u)); width: calc(486 * var(--u)); height: calc(72 * var(--u)); padding-left: calc(30 * var(--u)); }

/* ===== 二つの希少素材 ===== */
.en-materials { padding-top: calc(34 * var(--u)); }
.en-mat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--u)); width: calc(950 * var(--u)); margin: 0 auto; }
.en-mat { position: relative; display: flex; flex-direction: column; align-items: center; height: calc(258 * var(--u)); padding-top: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); overflow: hidden; text-align: center; border: calc(2 * var(--u)) solid rgba(255,255,255,.9); background: linear-gradient(180deg, #FBFDFF 0%, #E6F1FB 60%, #CFE3F5 100%); box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(30,53,96,.14); }
.en-mat p, .en-mat h3 { position: relative; z-index: 1; }
.en-mat p { font-family: var(--serif); font-weight: 700; font-size: calc(21.5 * var(--u)); line-height: 1.45; color: var(--navy); }
.en-mat h3 { font-family: var(--serif); font-weight: 700; font-size: calc(43 * var(--u)); line-height: 1.3; color: var(--navy); letter-spacing: .06em; }
.en-mat img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: calc(126 * var(--u)); object-fit: cover; object-position: center 45%; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%); }
.en-mat-lead { margin-top: calc(22 * var(--u)); text-align: center; font-family: var(--serif); font-weight: 600; font-size: calc(21 * var(--u)); line-height: 1.75; color: var(--navy); letter-spacing: .02em; }
.en-kodawari { width: calc(964 * var(--u)); margin: calc(40 * var(--u)) auto 0; padding: calc(22 * var(--u)) calc(30 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u)); }
.en-kodawari-row { display: grid; grid-template-columns: calc(425 * var(--u)) minmax(0, 1fr); gap: calc(30 * var(--u)); align-items: center; margin-top: calc(18 * var(--u)); }
.en-kodawari-img { display: block; width: 100%; height: calc(312 * var(--u)); object-fit: cover; border-radius: calc(12 * var(--u)); }
.en-kodawari-text { display: flex; flex-direction: column; gap: calc(10 * var(--u)); font-size: calc(19.5 * var(--u)); line-height: 1.8; letter-spacing: .02em; }
.en-kodawari strong { color: #A57A2C; font-weight: 700; font-size: 1.08em; }

/* ===== お客様の声 ===== */
.en-voice { padding-top: calc(40 * var(--u)); }
.en-voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(26 * var(--u)); width: calc(894 * var(--u)); margin: 0 auto; }
.en-voice-card { display: flex; flex-direction: column; align-items: center; padding: calc(18 * var(--u)) calc(38 * var(--u)) calc(24 * var(--u)); border-radius: calc(16 * var(--u)); border: 1px solid rgba(255,255,255,.95); background: var(--card); box-shadow: var(--card-shadow); }
.en-voice-img { width: calc(186 * var(--u)); height: calc(186 * var(--u)); border-radius: 50%; object-fit: cover; object-position: center 20%; border: calc(4 * var(--u)) solid #fff; box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(30,53,96,.15); }
.en-voice-who { position: relative; margin-top: calc(-18 * var(--u)); padding: calc(3 * var(--u)) calc(40 * var(--u)); border-radius: 999px; background: linear-gradient(90deg, rgba(250,236,190,.75), #FBEBB9 20%, #FBEBB9 80%, rgba(250,236,190,.75)); font-family: var(--serif); font-weight: 700; font-size: calc(26 * var(--u)); color: var(--navy); letter-spacing: .04em; }
.en-voice-text { margin-top: calc(12 * var(--u)); font-family: var(--serif); font-weight: 600; font-size: calc(20.5 * var(--u)); line-height: 1.7; letter-spacing: .03em; color: var(--navy); }

/* ===== よくある質問（最初から開いた状態、答えは質問の下） ===== */
.en-faq { padding-top: calc(36 * var(--u)); }
.en-faq-list { width: calc(870 * var(--u)); margin: 0 auto; display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.en-faq-item { padding: calc(14 * var(--u)) calc(40 * var(--u)) calc(16 * var(--u)) calc(50 * var(--u)); border-radius: calc(12 * var(--u)); border: 1px solid #C9DCF0; background: var(--card); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(30,80,140,.08); }
.en-faq-item summary { list-style: none; cursor: default; display: flex; align-items: center; gap: calc(20 * var(--u)); }
.en-faq-item summary::-webkit-details-marker { display: none; }
.en-faq-item summary span { font-family: var(--serif); font-weight: 700; font-size: calc(26 * var(--u)); line-height: 1.45; color: var(--navy); letter-spacing: .03em; }
.en-faq-a { display: flex; align-items: flex-start; gap: calc(20 * var(--u)); margin-top: calc(6 * var(--u)); }
.en-faq-a p { font-family: var(--serif); font-weight: 600; font-size: calc(23 * var(--u)); line-height: 1.6; color: var(--navy); letter-spacing: .02em; }
.en-faq-a a { color: var(--blue-2); text-decoration: underline; text-underline-offset: .15em; }
.en-qa { flex: none; display: grid; place-items: center; width: calc(98 * var(--u)); height: calc(36 * var(--u)); border-radius: 999px; font-family: var(--serif); font-weight: 700; font-size: calc(27 * var(--u)); line-height: 1; color: var(--navy); }
.en-q { background: linear-gradient(90deg, rgba(196,222,246,.7), #C9E0F6 25%, #C9E0F6 75%, rgba(196,222,246,.7)); }
.en-a { background: linear-gradient(90deg, rgba(250,232,180,.7), #FAE6AE 25%, #FAE6AE 75%, rgba(250,232,180,.7)); color: #8F6C30; margin-top: calc(1 * var(--u)); }

/* ===== 開発者 ===== */
.en-doctor { padding-top: calc(36 * var(--u)); }
.en-doctor-row { display: grid; grid-template-columns: calc(186 * var(--u)) calc(210 * var(--u)) minmax(0, 1fr); gap: calc(26 * var(--u)); align-items: center; padding-left: calc(44 * var(--u)); }
.en-doctor-photo { width: calc(186 * var(--u)); height: calc(186 * var(--u)); border-radius: 50%; object-fit: cover; border: calc(4 * var(--u)) solid #fff; box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(30,53,96,.18); }
.en-doctor-main { align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 calc(10 * var(--u)); border-left: calc(2 * var(--u)) solid var(--gold-1); border-right: calc(2 * var(--u)) solid var(--gold-1); margin-block: calc(30 * var(--u)); font-family: var(--serif); font-weight: 700; color: var(--navy); }
.en-doctor-title { font-size: calc(26 * var(--u)); letter-spacing: .06em; }
.en-doctor-name { font-size: calc(50 * var(--u)); line-height: 1.3; letter-spacing: .12em; }
.en-doctor-quals { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: calc(18 * var(--u)) calc(16 * var(--u)); align-items: start; font-family: var(--serif); font-size: calc(19.5 * var(--u)); line-height: 1.55; color: var(--navy); }
.en-doctor-quals dt { padding: calc(2 * var(--u)) calc(14 * var(--u)); min-width: calc(92 * var(--u)); text-align: center; border-radius: 999px; background: linear-gradient(90deg, rgba(250,232,180,.7), #FAE3A6 25%, #FAE3A6 75%, rgba(250,232,180,.7)); font-weight: 700; font-size: calc(18 * var(--u)); color: #6E5220; }
.en-doctor-quals dd { margin: 0; font-weight: 600; }
.en-doctor-text { width: calc(870 * var(--u)); margin: calc(20 * var(--u)) auto 0; font-size: calc(19.5 * var(--u)); line-height: 1.85; letter-spacing: .02em; }
.en-paper { width: calc(940 * var(--u)); margin: calc(26 * var(--u)) auto 0; padding: calc(8 * var(--u)) calc(20 * var(--u)); border: 1.5px solid #CFAF72; outline: 1px solid rgba(207,175,114,.6); outline-offset: calc(-6 * var(--u)); border-radius: calc(10 * var(--u)); background: linear-gradient(180deg, #FFFDF4, #FBF0D4); text-align: center; font-family: var(--serif); font-weight: 700; font-size: calc(27 * var(--u)); color: var(--navy); letter-spacing: .04em; box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(150,120,60,.14); white-space: nowrap; }
.en-papers { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(18 * var(--u)); width: calc(910 * var(--u)); margin: calc(18 * var(--u)) auto 0; }
.en-papers a { position: relative; display: block; border-radius: calc(4 * var(--u)); overflow: hidden; background: #fff; box-shadow: 0 calc(5 * var(--u)) calc(14 * var(--u)) rgba(30,53,96,.18); transition: transform .2s; }
.en-papers a:hover { transform: translateY(-2px); }
.en-papers img { display: block; width: 100%; aspect-ratio: 254 / 360; height: auto; object-fit: contain; }
.en-papers a::after { content: ""; position: absolute; right: calc(8 * var(--u)); bottom: calc(8 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3560' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5'/%3E%3C/svg%3E") center / 60% no-repeat; box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(30,53,96,.25); }
.en-order-last { padding-top: calc(30 * var(--u)); padding-bottom: calc(40 * var(--u)); }

/* 論文の拡大表示 */
.en-lb { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px; background: rgba(15,25,45,.85); }
.en-lb[hidden] { display: none; }
.en-lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; max-height: 100%; }
.en-lb-fig img { max-width: min(92vw, 820px); max-height: calc(100vh - 90px); width: auto; height: auto; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.en-lb-fig figcaption { color: #fff; font-size: 14px; letter-spacing: .1em; }
.en-lb button { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--navy); font-size: 30px; line-height: 1; cursor: pointer; }
.en-lb-close { position: absolute; top: 16px; right: 16px; }
html.en-lb-on { overflow: hidden; }

/* スマホ固定ボタン（PC では出さない） */
.en-fixed-cta { display: none; }

/* ========== スマホ（1列。PC と同じ見た目で縦に積む） ========== */
@media (max-width: 1023px) {
	.en-in { width: auto; max-width: 560px; padding: 0 16px; }
	.en-pc { display: none; }
	.en-sp { display: inline; }
	.en-sec { padding-block: 22px 14px; }
	.en-note { font-size: 13px; margin-top: 10px; }
	.en-h2 { white-space: normal; font-size: 21px; line-height: 1.45; gap: 10px; margin-bottom: 14px; text-wrap: balance; word-break: keep-all; }
	.en-h2::before, .en-h2::after { flex: 0 1 26px; min-width: 12px; height: 1.5px; }
	.en-h2-one { white-space: nowrap; font-size: clamp(17px, 5vw, 21px); letter-spacing: .02em; }
	.en-card { border-radius: 14px; }
	.en-card-title { font-size: 20px; gap: 12px; }
	.en-card-title::before, .en-card-title::after { flex: 0 1 40px; height: 1.5px; }
	.en-btn { height: 56px; padding: 0 56px 0 36px; font-size: 22px; }
	.en-btn::after { right: 28px; width: 10px; height: 10px; margin-top: -5px; border-width: 2.5px; }
	.en-copy { gap: 8px; font-size: 16px; line-height: 1.85; text-align: left; align-items: stretch; letter-spacing: .01em; }
	.en-quote, .en-quote-l { font-size: clamp(17px, 5vw, 20px); letter-spacing: .02em; text-align: center; }
	.en-quote-l { font-size: clamp(15px, 4.5vw, 20px); letter-spacing: 0; white-space: nowrap; }

	/* ファーストビュー：文字を上、写真と袋を下 */
	.en-hero::before { background-position: 30% bottom; }
	.en-hero-in { height: auto; display: flex; flex-direction: column; align-items: center; padding: 18px 16px 22px; }
	.en-hero-copy { width: auto; align-items: center; text-align: center; padding: 0; }
	.en-hero-kicker { font-size: 17px; padding: 0 6px 6px; background-size: 100% 2px; }
	.en-hero-title { margin-top: 10px; font-size: clamp(30px, 9vw, 38px); line-height: 1.32; }
	.en-hero-sub { margin-top: 8px; font-size: clamp(15px, 4.4vw, 18px); white-space: normal; line-height: 1.5; }
	.en-hero-brand { margin-top: 8px; font-size: clamp(24px, 7vw, 30px); }
	.en-hero-kana { font-size: 12.5px; letter-spacing: .06em; }
	.en-hero-copy .en-hero-btn { display: none; }
	.en-hero-visual { position: relative; inset: auto; width: 100%; max-width: 420px; height: auto; aspect-ratio: 1 / .92; margin-top: 12px; }
	.en-hero-woman { right: -4%; width: 78%; height: 100%; object-position: 35% 0; border-radius: 0;
		-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 20%), linear-gradient(180deg, #000 82%, rgba(0,0,0,0) 100%);
		mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 20%), linear-gradient(180deg, #000 82%, rgba(0,0,0,0) 100%); }
	.en-hero-pack { left: 6%; top: 26%; width: 38%; }
	.en-hero-yuzu { left: -2%; top: auto; bottom: -2%; width: 40%; }
	.en-hero-honey { left: 18%; top: auto; bottom: -1%; width: 42%; }
	.en-hero-btn-sp { display: inline-flex; margin-top: 14px; width: 82%; max-width: 330px; }

	/* 一生の活力を支える */
	.en-photo { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 12px; }
	.en-wish { width: auto; margin-top: 14px; }
	.en-wish li { padding: 2px 0 2px 14px; font-size: 18px; line-height: 1.55; }
	.en-wish li::before { top: 6px; bottom: 6px; width: 3px; }
	.en-wish li + li { margin-top: 8px; }
	.en-lead { margin-top: 12px; font-size: 16px; text-align: left; }

	.en-flex, .en-meguri { padding-top: 26px; }
	.en-chart { width: 100%; margin-top: 16px; padding: 6px 0; }
	.en-chart img { width: 100%; }
	.en-meguri::before { top: 220px; height: 300px; background-size: 260% auto; }
	.en-vessel { width: 100%; }
	.en-vessel img { height: auto; aspect-ratio: 2.1 / 1; }
	.en-meguri .en-copy { margin-top: 14px; }

	/* 購入カード：見出し、袋、文字、価格、ボタンを縦に */
	.en-order-sec { padding-block: 14px 22px; }
	.en-order { width: auto; padding: 16px 14px 18px; border-radius: 14px; }
	.en-order-catch { font-size: 19px; gap: 12px; }
	.en-order-catch::before, .en-order-catch::after { width: 36px; height: 1.5px; }
	.en-order-row { grid-template-columns: 1fr; gap: 0; margin-top: 6px; }
	.en-order-visual { width: 72%; max-width: 280px; height: auto; aspect-ratio: 1 / .92; margin: 0 auto 8px; }
	.en-order-pack { left: 24%; width: 52%; }
	.en-order-yuzu { left: 2%; bottom: -6%; width: 60%; }
	.en-order-honey { left: 28%; bottom: -5%; width: 62%; }
	.en-order-name { font-size: 21px; line-height: 1.3; white-space: normal; }
	.en-order-name small { font-size: 15px; }
	.en-order-dose { margin-top: 8px; padding: 4px 14px; border-radius: 10px; font-size: 14.5px; line-height: 1.5; background: #F6E3A8; white-space: normal; }
	.en-order-taste { margin-top: 6px; font-size: 15px; line-height: 1.5; }
	.en-order-price { flex-direction: column; align-items: center; gap: 2px; margin-top: 8px; padding-left: 0; }
	.en-order-regular { font-size: 14px; padding-bottom: 0; }
	.en-order-regular br { display: none; }
	.en-order-sale { font-size: 20px; }
	.en-order-sale span { font-size: 15px; margin-right: 8px; }
	.en-order-sale b { font-size: clamp(32px, 9.6vw, 40px); }
	.en-order-sale small { font-size: 13.5px; }
	.en-order .en-btn { justify-self: center; width: 100%; height: 56px; margin-top: 10px; padding-left: 20px; }

	/* 素材：カードを縦に2枚 */
	.en-materials { padding-top: 22px; }
	.en-mat-grid { grid-template-columns: 1fr; gap: 12px; width: auto; }
	.en-mat { height: 200px; padding-top: 10px; border-radius: 12px; border-width: 2px; }
	.en-mat p { font-size: 15px; }
	.en-mat h3 { font-size: 27px; }
	.en-mat img { height: 112px; }
	.en-mat-lead { margin-top: 14px; font-size: 16px; text-align: left; font-weight: 500; }
	.en-kodawari { width: auto; margin-top: 22px; padding: 16px 14px 18px; }
	.en-kodawari-row { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
	.en-kodawari-img { height: auto; aspect-ratio: 4 / 2.8; border-radius: 10px; }
	.en-kodawari-text { font-size: 16px; gap: 8px; }

	/* お客様の声 */
	.en-voice { padding-top: 22px; }
	.en-voice-grid { grid-template-columns: 1fr; gap: 12px; width: auto; }
	.en-voice-card { padding: 16px 16px 18px; border-radius: 14px; }
	.en-voice-img { width: 130px; height: 130px; border-width: 3px; }
	.en-voice-who { margin-top: -14px; padding: 2px 26px; font-size: 18px; }
	.en-voice-text { margin-top: 10px; font-size: 16px; line-height: 1.8; }

	/* FAQ */
	.en-faq { padding-top: 22px; }
	.en-faq-list { width: auto; gap: 10px; }
	.en-faq-item { padding: 12px 14px 14px; border-radius: 12px; }
	.en-faq-item summary { gap: 10px; align-items: flex-start; }
	.en-faq-item summary span { font-size: 17px; line-height: 1.5; }
	.en-faq-a { gap: 10px; margin-top: 8px; }
	.en-faq-a p { font-size: 16px; line-height: 1.7; }
	.en-qa { width: 44px; height: 26px; font-size: 17px; }

	/* 開発者：写真と名前を横に、資格は下 */
	.en-doctor { padding-top: 22px; }
	.en-doctor-row { grid-template-columns: 112px minmax(0, 1fr); gap: 14px 16px; padding-left: 0; }
	.en-doctor-photo { width: 112px; height: 112px; border-width: 3px; }
	.en-doctor-main { align-items: flex-start; margin-block: 14px; padding: 0 0 0 14px; border-right: 0; border-left-width: 2px; }
	.en-doctor-title { font-size: 16px; }
	.en-doctor-name { font-size: 32px; }
	.en-doctor-quals { grid-column: 1 / -1; grid-template-columns: 78px minmax(0, 1fr); gap: 10px 12px; font-size: 16px; }
	.en-doctor-quals dt { min-width: 0; font-size: 13.5px; padding: 2px 8px; }
	.en-doctor-text { width: auto; margin-top: 14px; font-size: 16px; }
	.en-paper { width: auto; margin-top: 16px; padding: 9px 10px; font-size: 16px; letter-spacing: .02em; line-height: 1.6; white-space: normal; text-wrap: balance; }
	.en-papers { width: auto; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
	.en-papers a::after { width: 28px; height: 28px; right: 6px; bottom: 6px; }
	.en-order-last { padding-top: 18px; padding-bottom: 30px; }

	.en-lb { padding: 12px; gap: 0; }
	.en-lb-fig img { max-width: 100%; max-height: calc(100vh - 140px); }
	.en-lb-prev, .en-lb-next { position: absolute; bottom: 20px; }
	.en-lb-prev { left: calc(50% - 64px); }
	.en-lb-next { right: calc(50% - 64px); }

	/* 画面下に固定の購入ボタン（黄色） */
	.en-fixed-cta { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; justify-content: center; height: 58px; border-radius: 999px; background: linear-gradient(180deg, #FFF3A6 0%, #FFDD55 42%, #F7C629 72%, #F0B416 100%); border: 1px solid #E8B21C; color: var(--navy) !important; font-family: var(--serif); font-weight: 700; font-size: 23px; letter-spacing: .14em; box-shadow: 0 8px 22px rgba(160,110,0,.35), inset 0 2px 0 rgba(255,255,255,.75); }
	.en-fixed-cta::after { content: ""; width: 10px; height: 10px; margin-left: 22px; border-top: 2.5px solid var(--navy); border-right: 2.5px solid var(--navy); transform: rotate(45deg); }
	.rn-footer { padding-bottom: 80px; }
}

/* 「インフラ・ケア」の写真（縦長の元写真なので、横長に切りすぎない枠） */
.en-photo.en-infra-img { width: calc(640 * var(--u)); height: calc(480 * var(--u)); object-position: 40% 15%; }
@media (max-width: 1023px) {
	.en-photo.en-infra-img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
}

/* 金の文字の g・y の下が切れないように */
.en-hero-brand { padding-bottom: .16em; margin-bottom: -.16em; }

/* 明朝の文字は見た目が下がって見えるので、ボタンの文字を少し上に寄せる */
.en-btn { padding-bottom: .14em; }

/* 「インフラ・ケア」：写真の横に、心の声の吹き出しを2つ（Codex のデザイン画 en3/infra.png） */
.en-infra-row { display: grid; grid-template-columns: calc(440 * var(--u)) calc(428 * var(--u)); justify-content: center; align-items: center; gap: calc(36 * var(--u)); margin-top: calc(30 * var(--u)); }
.en-infra-row .en-infra-img { display: block; width: 100%; height: calc(414 * var(--u)); object-fit: cover; object-position: 40% 20%; border-radius: calc(16 * var(--u)); box-shadow: var(--card-shadow); }
.en-infra-row .en-wish { width: auto; margin: 0; display: flex; flex-direction: column; gap: calc(30 * var(--u)); }
.en-infra-row .en-wish li { position: relative; padding: calc(28 * var(--u)) calc(30 * var(--u)) calc(28 * var(--u)) calc(44 * var(--u)); border-radius: calc(40 * var(--u)); background: #fff; box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(40,90,150,.13); font-family: var(--serif); font-weight: 600; font-size: calc(27 * var(--u)); line-height: 1.6; letter-spacing: .05em; color: var(--navy); }
.en-infra-row .en-wish li::before { content: ""; position: absolute; left: calc(-20 * var(--u)); top: 50%; bottom: auto; width: 0; height: 0; margin-top: calc(-12 * var(--u)); border-style: solid; border-width: calc(12 * var(--u)) calc(22 * var(--u)) calc(12 * var(--u)) 0; border-color: transparent #fff transparent transparent; background: none; }
.en-infra-row .en-wish li + li { margin-top: 0; }
.en-infra .en-lead { margin-top: calc(32 * var(--u)); text-align: center; font-family: var(--serif); font-weight: 600; font-size: calc(24 * var(--u)); line-height: 1.7; color: var(--navy); }
@media (max-width: 1023px) {
	.en-infra-row { grid-template-columns: 1fr; gap: 22px; margin-top: 18px; }
	.en-infra-row .en-infra-img { height: auto; aspect-ratio: 4 / 3; border-radius: 12px; }
	.en-infra-row .en-wish { gap: 16px; }
	.en-infra-row .en-wish li { padding: 16px 20px; border-radius: 24px; font-size: 18px; line-height: 1.6; }
	.en-infra-row .en-wish li::before { left: 34px; top: -14px; margin-top: 0; border-width: 0 10px 16px 10px; border-color: transparent transparent #fff transparent; }
	.en-infra .en-lead { margin-top: 18px; font-size: 16px; text-align: left; }
}
.en-nowrap { display: inline-block; }

/* 英語ページ（html lang="en"）。日本語ページには効かない */
html:lang(en) .en-hero-kana { display: none; }
html:lang(en) .en-order-intl { margin: calc(10 * var(--u)) 0 calc(-4 * var(--u)); font-size: max(12px, calc(14 * var(--u))); line-height: 1.5; }
html:lang(en) .en-order-intl a { color: var(--navy); text-decoration: underline; text-underline-offset: .2em; }
/* 英語は文が長いので、日本語用の改行・折り返しなしをゆるめる */
html:lang(en) br.en-pc { display: none; }
html:lang(en) .en-hero-kicker { font-size: calc(20 * var(--u)); letter-spacing: .01em; }
html:lang(en) .en-hero-title { font-size: calc(60 * var(--u)); }
html:lang(en) .en-hero-sub { white-space: normal; max-width: calc(470 * var(--u)); font-size: calc(22 * var(--u)); letter-spacing: .02em; line-height: 1.45; }
html:lang(en) .en-h2, html:lang(en) .en-h2-one { white-space: normal; text-wrap: balance; letter-spacing: .01em; }
html:lang(en) .en-wish li { font-size: calc(26 * var(--u)); letter-spacing: .01em; }
html:lang(en) .en-quote, html:lang(en) .en-quote-l { letter-spacing: .01em; }
html:lang(en) .en-order-dose { white-space: normal; font-size: calc(18 * var(--u)); }
html:lang(en) .en-order-price { flex-wrap: wrap; justify-content: center; column-gap: calc(28 * var(--u)); }
html:lang(en) .en-order-sale span { margin-right: calc(12 * var(--u)); }
html:lang(en) .en-mat p { font-size: calc(16.5 * var(--u)); padding-inline: calc(12 * var(--u)); }
html:lang(en) .en-mat h3 { font-size: calc(38 * var(--u)); letter-spacing: .02em; }
html:lang(en) .en-doctor-row { grid-template-columns: calc(186 * var(--u)) calc(250 * var(--u)) minmax(0, 1fr); }
html:lang(en) .en-doctor-name { font-size: calc(36 * var(--u)); letter-spacing: .04em; text-align: center; white-space: nowrap; }
html:lang(en) .en-doctor-quals dd { line-height: 1.45; }
html:lang(en) .en-doctor-quals dd span { display: block; }
html:lang(en) .en-doctor-quals dd span + span { margin-top: .35em; }
html:lang(en) .en-order-sale small { margin-left: .3em; }
html:lang(en) .en-doctor-title { font-size: calc(19 * var(--u)); letter-spacing: .02em; text-align: center; }
html:lang(en) .en-doctor-quals { font-size: calc(17.5 * var(--u)); }
html:lang(en) .en-paper { white-space: normal; font-size: calc(23 * var(--u)); letter-spacing: .01em; }
@media (max-width: 1023px) {
	html:lang(en) .en-hero-kicker { white-space: normal; font-size: 14px; }
	html:lang(en) .en-hero-title { font-size: clamp(28px, 8.4vw, 36px); }
	html:lang(en) .en-hero-sub { max-width: none; font-size: clamp(14px, 4.2vw, 17px); }
	html:lang(en) .en-h2-one { font-size: 21px; }
	html:lang(en) .en-wish li { font-size: 17px; }
	html:lang(en) .en-quote-l { white-space: normal; }
	html:lang(en) .en-order-dose { font-size: 14px; }
	html:lang(en) .en-order-intl { font-size: 12.5px; margin-bottom: 0; }
	html:lang(en) .en-card-title { white-space: normal; text-align: center; font-size: 19px; }
	html:lang(en) .en-mat p { font-size: 13px; padding-inline: 8px; }
	html:lang(en) .en-mat h3 { font-size: 26px; }
	html:lang(en) .en-doctor-name { font-size: 26px; }
	html:lang(en) .en-doctor-title { font-size: 14px; }
	html:lang(en) .en-doctor-row { grid-template-columns: 112px minmax(0, 1fr); }
	html:lang(en) .en-doctor-name, html:lang(en) .en-doctor-title { text-align: left; }
	html:lang(en) .en-doctor-quals { grid-template-columns: 1fr; gap: 6px; font-size: 15px; }
	html:lang(en) .en-doctor-quals dt { justify-self: start; }
	html:lang(en) .en-doctor-quals dd + dt { margin-top: 6px; }
	html:lang(en) .en-paper { font-size: 16px; }
}
@media (min-width: 1024px) {
	html:lang(en) .en-h2 { font-size: calc(38 * var(--u)); }
	html:lang(en) .en-copy, html:lang(en) .en-mat-lead { max-width: calc(880 * var(--u)); margin-inline: auto; letter-spacing: .01em; }
}

/* 購入の枠：ゆず・ハチミツを外し、商品の袋だけを大きく（ローズさんの依頼） */
.en-order-visual { height: calc(360 * var(--u)); }
.en-order-pack { left: 50%; top: 0; width: calc(276 * var(--u)); transform: translateX(-50%); }
@media (max-width: 1023px) {
	.en-order-visual { width: 100%; max-width: none; aspect-ratio: auto; height: auto; margin: 0 auto 10px; }
	.en-order-pack { position: static; display: block; width: 62%; max-width: 240px; margin: 0 auto; transform: none; }
}
/* 一番上：ゆず・ハチミツを外し、袋を少し大きく（ローズさんの依頼） */
.en-hero-pack { top: calc(300 * var(--u)); width: calc(244 * var(--u)); }
@media (max-width: 1023px) { .en-hero-pack { left: 4%; top: 20%; width: 44%; } }