@charset "UTF-8";

/* ===========================
   Base Styles
   =========================== */

:root {
    --color-lr: #4bbdc3;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-save: #6bbfc1;
    --font-jp: "Zen Kaku Gothic New", sans-serif;
}

* {
    outline: none;
    vertical-align: baseline;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
    /* 750pxデザインの等比スケール基準: 1rem = Figma 10px (最大450px幅) */
    font-size: calc(min(100vw, 450px) / 75);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

body {
    font-family: "Tenor Sans", sans-serif;
    font-weight: 400;
    font-size: 2.4rem;
    line-height: normal;
    color: var(--color-black);
    background-color: var(--color-white);
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
}

h1 {
    position: relative;
    font-weight: 400;
}

*:focus {
    outline: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.w100 {
    width: 100%;
    height: auto;
}

/* ===========================
   Layout
   =========================== */

.adlp-outer {
    width: 100%;
    background-color: var(--color-white);
    display: flex;
    justify-content: center;
}

.adlp-wrapper {
    width: 100%;
    max-width: 75rem;
    margin: 0 auto;
}

.adlp-main {
    width: 100%;
}

/* ===========================
   FV Section (Figma y0-1061)
   =========================== */

.fv {
    position: relative;
    width: 100%;
    height: 106.1rem;
    overflow: hidden;
    background-color: var(--color-white);
}

.fv__photo {
    position: absolute;
    left: 0;
    top: 0;
    width: 75rem;
    height: 106.1rem;
    max-width: none;
}

/* line-height: Figmaは行高(0.9)を整数pxに丸めて描画するため、テキストボックス実高(57px / 24px)を指定。以降のテキストも同様 */
.fv__title,
.fv__tagline {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    color: var(--color-white);
}

.fv__title {
    left: 50%;
    top: 55.5rem;
    font-size: 6.3rem;
    line-height: 5.7rem;
    letter-spacing: 0.315rem;
}

.fv__tagline {
    left: calc(50% + 0.05rem);
    top: 63rem;
    font-size: 2.7rem;
    line-height: 2.4rem;
    letter-spacing: 0.135rem;
}

/* ===========================
   Statement Section (Figma y1061-2233)
   =========================== */

.sec-statement {
    position: relative;
    width: 100%;
    height: 117.2rem;
    overflow: hidden;
    background-color: var(--color-white);
}

/* PROFILE背景ぼかしの上方向への滲み(Figma上は淡色ベタの下のレイヤー) y2180-2233 */
.sec-statement__bleed {
    position: absolute;
    left: 0;
    top: 111.9rem;
    width: 75rem;
    height: 5.3rem;
    max-width: none;
}

.sec-statement__tint {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(198, 226, 215, 0.34);
}

.sec-statement__text {
    position: absolute;
    /* + 0.0805rem: Figmaは行末の字間(1.61px)を中央揃えの幅に含めないため、その半分だけ右へ */
    left: calc(50% + 0.05rem + 0.0805rem);
    top: 6.8rem; /* Figma 1128px + ref実測補正 1px(FigmaとChromeのベースライン丸め差) */
    width: 62.9rem;
    height: 52.3rem;
    transform: translateX(-50%);
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 2.3rem;
    line-height: 4.5rem; /* 1.94 x 23px = 44.62px → Figma描画 45px(ref実測の行送り) */
    letter-spacing: 0.161rem;
    text-align: center;
    color: var(--color-black);
}

/* 注記記号: Figmaでは別テキストノードの絶対配置(本文ブロック左上 x61,y1129 が原点) */
.sec-statement__mark,
.sec-statement__note {
    position: absolute;
    transform: translateX(-50%);
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.7rem;
    letter-spacing: 0.072rem;
    text-align: center;
    white-space: nowrap;
    color: var(--color-black);
}

.sec-statement__mark.--first {
    left: calc(56.65rem - 0.0805rem);
    top: 18.9rem;
}

.sec-statement__mark.--second {
    left: calc(38.95rem - 0.0805rem);
    top: 45.9rem;
}

.sec-statement__note {
    left: 50%;
    top: 63.5rem;
}

/* ---- 動画サムネイル(実体は button)。画像は JS が data-video-id から生成して差し込む ---- */
.video-card {
    position: absolute;
    left: 3rem;
    top: 73.7rem;
    display: block;
    width: 69rem;
    height: 36.2rem;
    padding: 0;
    border: 0;
    overflow: hidden;
    font: inherit;
    color: var(--color-white);
    background: #d9d9d9;
    cursor: pointer;
}

.video-card__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.video-card__play {
    position: absolute;
    left: 30.8rem;
    top: 14.4rem;
    z-index: 1;
    width: 7.5rem;
    height: 7.5rem;
    max-width: none;
}

/* ===========================
   Profile Section (Figma y2233-3701)
   =========================== */

.sec-profile {
    position: relative;
    width: 100%;
    height: 146.8rem;
    overflow: hidden;
    background-color: var(--color-white);
}

.sec-profile img {
    position: absolute;
    max-width: none;
}

.sec-profile__bg {
    left: 0;
    top: 0;
    width: 75rem;
    height: 146.8rem;
}

/* カードのドロップシャドウ。Figma「Mask group」(x74-676, y2387-3368, 角丸20)の書き出し実測: offset 0 / blur 20 / #000 10% */
.sec-profile__shadow {
    position: absolute;
    left: 7.4rem;
    top: 15.4rem;
    width: 60.2rem;
    height: 98.1rem;
    border-radius: 2rem;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}

/* 白ヘッダ(y2387-2510) + 写真(-y3172) を1枚に合成した画像 */
.sec-profile__photo {
    left: 7.4rem;
    top: 15.4rem;
    width: 60.2rem;
    height: 78.5rem;
    border-radius: 2rem 2rem 0 0;
}

.sec-profile__polaroid {
    left: 50.4rem;
    top: 24.1rem;
    width: 22rem;
    height: 25.6rem;
}

.sec-profile__panel {
    position: absolute;
    left: 7.4rem;
    top: 93.9rem;
    width: 60.2rem;
    height: 40.4rem;
    border-radius: 0 0 2rem 2rem;
    background-color: var(--color-white);
}

.sec-profile__cutout {
    left: 0;
    top: 72.45rem;
    width: 28.7rem;
    height: 44rem;
}

.sec-profile__title {
    position: absolute;
    left: calc(50% - 9.9rem);
    top: 18rem;
    font-weight: 400;
    font-size: 3.7rem;
    line-height: 5.6rem;
    letter-spacing: 0.185rem;
    white-space: nowrap;
    color: var(--color-black);
}

.sec-profile__term,
.sec-profile__desc {
    position: absolute;
    line-height: 1.5;
    white-space: nowrap;
}

.sec-profile__term {
    /* top は Figma値 + ref実測補正 1px(Tenor Sans のベースライン丸め差) */
    left: 28.9rem;
    font-size: 2rem;
    letter-spacing: 0.1rem;
    color: var(--color-lr);
}

.sec-profile__desc {
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 2.4rem;
    letter-spacing: 0.12rem;
    color: var(--color-black);
}

.sec-profile__term.--name {
    top: 95.809rem;
}

.sec-profile__term.--birthday {
    top: 100.126rem;
}

.sec-profile__term.--skin {
    top: 104.401rem;
}

.sec-profile__term.--item {
    top: 108.8rem;
}

.sec-profile__term.--comment {
    left: 10rem;
    top: 117.902rem;
}

.sec-profile__desc.--name {
    left: 36.7rem;
    top: 95.2rem;
}

.sec-profile__desc.--birthday {
    left: 39.5rem;
    top: 99.8rem;
    font-family: "Tenor Sans", sans-serif;
    font-weight: 400;
}

.sec-profile__desc.--skin {
    left: 40.9rem;
    top: 103.901rem;
}

.sec-profile__desc.--item {
    left: 29rem;
    top: 111.902rem;
    font-size: 1.8rem;
    letter-spacing: 0.09rem;
}

.sec-profile__desc.--comment {
    left: calc(50% - 27.7rem);
    top: 121.1rem;
    width: 55.4199rem;
    font-size: 1.8rem;
    line-height: 3rem; /* 1.65 x 18px = 29.7px → Figma描画 30px(ref実測の行送り) */
    letter-spacing: 0.126rem;
    white-space: normal;
    word-break: break-word;
}

/* 点線(1px / dash 2-2)。SVGは線の上下に1pxずつ余白を持つ3px高(縮小時に画像ボックスが0pxへ潰れて線が消えるのを防ぐ)。
   線の中心がFigmaのy座標になるよう 0.15rem 上げる */
.sec-profile__dot {
    left: 28.9rem;
    height: 0.3rem;
}

.sec-profile__dot.--name {
    top: calc(99.1rem - 0.15rem);
    width: 17.1rem;
}

.sec-profile__dot.--birthday {
    top: calc(103.7rem - 0.15rem);
    width: 17.1rem;
}

.sec-profile__dot.--skin {
    top: calc(108.2rem - 0.15rem);
    width: 22.6rem;
}

.sec-profile__dot.--item {
    top: calc(115.6rem - 0.15rem);
    width: 31.2rem;
}

.sec-profile__product {
    left: 60.3rem;
    top: 98.9rem;
    width: 10.5rem;
    height: 19.2rem;
}

/* ===========================
   Next Section (Figma y3701-4771)
   =========================== */

.sec-next {
    position: relative;
    width: 100%;
    height: 107rem;
    overflow: hidden;
    background-color: var(--color-white);
    background-image: linear-gradient(76.58347829509395deg, rgba(0, 148, 157, 0.283) 4.9685%, rgba(107, 191, 193, 0.41) 35.711%, rgba(161, 209, 199, 0.41) 56.495%, rgba(198, 226, 215, 0.41) 73.815%, rgba(248, 248, 217, 0.41) 95.032%);
}

/* カード形状(565x400)の左上が原点。1枚目 y3780 / 2枚目 y4263 */
.sec-next__card {
    position: absolute;
    left: 9.3rem;
    top: 7.9rem;
    width: 56.5rem;
    height: 40rem;
}

.sec-next__card.--second {
    top: 56.2rem;
}

.sec-next__card img {
    position: absolute;
    max-width: none;
}

/* 影込みSVG(627x462)。形状は内側 31px から始まる */
.sec-next__card-bg {
    left: -3.1rem;
    top: -3.1rem;
    width: 62.7rem;
    height: 46.2rem;
}

.sec-next__badge {
    position: absolute;
    left: 23.6rem;
    top: 0.4rem;
    width: 9.3rem;
    height: 9.3rem;
    border-radius: 50%;
    background-color: var(--color-lr);
}

.sec-next__logo {
    left: 1.8rem;
    top: 3.1rem;
    width: 6.2rem;
    height: 2.5rem;
}

.sec-next__label {
    position: absolute;
    left: 21rem;
    top: 10.7rem; /* Figma 106px + ref実測補正 1px */
    font-size: 5.7rem;
    line-height: 6.7rem;
    letter-spacing: 0.342rem;
    white-space: nowrap;
    color: var(--color-lr);
}

.sec-next__title {
    position: absolute;
    left: 50%;
    top: 19.2rem;
    transform: translateX(-50%);
    font-family: "Tenor Sans", var(--font-jp);
    font-weight: 500;
    font-size: 3.9rem;
    line-height: normal;
    letter-spacing: 0.156rem;
    text-align: center;
    white-space: nowrap;
    color: var(--color-black);
}

/* 1枚目はFigma上 Tenor Sans 指定(和文はフォールバック描画)でボックス高 46px。和文フォントの行ボックス膨張を防ぐため実高を指定 */
.sec-next__title.--interview {
    line-height: 4.6rem;
}

.sec-next__title-en {
    font-weight: 400;
}

.sec-next__info {
    position: absolute;
    left: 50%;
    top: 26.1rem;
    width: 38.5rem;
    transform: translateX(-50%);
    font-size: 2.4rem;
    line-height: 2.8rem;
    letter-spacing: 0.144rem;
    text-align: center;
    color: var(--color-black);
}

/* 罫線 0.75px。SVGは線の両側に余白を持つ3px幅(縮小時の消失防止)。線の中心がFigma座標になるよう 0.15rem ずらす */
.sec-next__line.--h {
    left: 0.25rem;
    top: calc(33.4rem - 0.15rem);
    width: 56.05rem;
    height: 0.3rem;
}

.sec-next__line.--v {
    left: calc(28.2rem - 0.15rem);
    top: 33.4rem;
    width: 0.3rem;
    height: 6.6rem;
}

.sec-next__action {
    position: absolute;
    top: 35.1rem;
    transform: translateX(-50%);
    font-size: 2.4rem;
    line-height: 2.8rem;
    letter-spacing: 0.144rem;
    text-align: center;
    white-space: nowrap;
    color: var(--color-save);
}

.sec-next__action.--save {
    left: 13.85rem;
}

.sec-next__action.--keep {
    left: 42.55rem;
}

/* PROFILE背景ぼかしの下方向への滲み(Figma上はカードより上のレイヤー) y3701-3790 */
.sec-next__bleed {
    position: absolute;
    left: 0;
    top: 0;
    width: 75rem;
    height: 8.9rem;
    max-width: none;
    pointer-events: none;
}

/* ===========================
   Footer
   =========================== */

/* Figma: Next部下端 y4771 → タグライン上端 y4849(7.8rem)、コピーライト下端 y5244 → フレーム下端 y5342(9.8rem) */
.adlp-footer {
    width: 100%;
    padding: 7.8rem 3rem 9.8rem;
    background-color: var(--color-white);
}

.adlp-footer__tagline {
    height: 7.3rem;
    padding-left: 0.1rem;
    font-size: 2.8rem;
    line-height: normal;
    letter-spacing: 0.112rem;
    text-align: center;
    white-space: nowrap;
    color: var(--color-black);
}

.adlp-footer__links {
    width: 100%;
}

.adlp-footer__item + .adlp-footer__item {
    margin-top: 1.8rem;
}

.adlp-footer__btn {
    position: relative;
    display: block;
    width: 69rem;
    height: 7.5rem;
    border: 0.2rem solid var(--color-lr);
    border-radius: 0.2rem;
    background-color: var(--color-white);
    color: var(--color-black);
}

/* 子要素の座標はボタン外枠(border-box)左上が原点。border 0.2rem 分を差し引いて配置 */
.adlp-footer__icon {
    position: absolute;
    max-width: none;
}

.adlp-footer__icon.--cart {
    left: calc(4.878rem - 0.2rem);
    top: calc(2.25rem - 0.2rem);
    width: 3.388rem;
    height: 2.974rem;
    transform: scaleX(-1);
}

.adlp-footer__icon.--instagram {
    left: calc(5.216rem - 0.2rem);
    top: calc(2.4215rem - 0.2rem);
    width: 2.657rem;
    height: 2.657rem;
}

.adlp-footer__icon.--website {
    left: calc(5.052rem - 0.2rem);
    top: calc(2.357rem - 0.2rem);
    width: 3.0998rem;
    height: 2.8929rem;
}

.adlp-footer__label {
    position: absolute;
    display: block;
    height: 3rem;
    font-size: 2.4rem;
    line-height: normal;
    letter-spacing: 0.096rem;
    white-space: nowrap;
    color: var(--color-black);
}

.adlp-footer__label.--shop {
    left: calc(12.796rem - 0.2rem);
    top: calc(2.25rem - 0.2rem);
}

.adlp-footer__label.--instagram {
    left: calc(11.596rem - 0.2rem);
    top: calc(2.357rem - 0.2rem);
    width: 18.7138rem;
    text-align: center;
}

.adlp-footer__label.--brand {
    left: calc(12.796rem - 0.2rem);
    top: calc(2.464rem - 0.2rem);
}

.adlp-footer__arrow {
    position: absolute;
    left: calc(64.178rem - 0.05rem - 0.2rem);
    top: calc(2.893rem - 0.05rem - 0.2rem);
    width: 0.565969rem;
    height: 1.8143rem;
    max-width: none;
    transform: scaleY(-1);
}

.adlp-footer__copyright {
    height: 1.9rem;
    margin-top: 4.2rem;
    padding-left: 0.1rem;
    font-size: 1.4rem;
    line-height: normal;
    letter-spacing: 0.056rem;
    text-align: center;
    white-space: nowrap;
    color: var(--color-black);
}

/* ===========================
   Video Modal
   ビューポート基準のUIのため rem スケール対象外(px / vw / dvh)
   =========================== */

/* モーダル表示中は背面スクロールを抑止 */
html:has(dialog[open]) {
    overflow: hidden;
}

/* body は overflow-x: hidden + height: 100% のため、html を hidden にすると body 自身がスクロールコンテナ化して
   スクロール位置が先頭へ飛ぶ。モーダル表示中だけ visible に戻して現在位置を維持する */
html:has(dialog[open]) body {
    overflow: visible;
}

.video-card:focus-visible,
.modal__close:focus-visible,
.notice__link:focus-visible {
    outline: 3px solid #4c9aff;
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 背景クリック判定(event.target === dialog)のため dialog 自体は余白ゼロ */
/* margin: auto は全称セレクタのリセットで消える dialog 既定の中央寄せを戻すため */
.modal {
    margin: auto;
    padding: 0;
    border: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    background: transparent;
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.8);
}

/* ラッパー自体はクリックを透過させ、×ボタン横の空白も「背景クリック」として扱う */
.modal__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

.modal__close,
.modal__frame {
    pointer-events: auto;
}

/* 閉じるボタンは動画枠の右上外側。通常フローに置くので狭い画面でも画面内に収まる */
.modal__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-family: inherit;
    font-size: 28px;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.modal__close:hover {
    background: rgba(255, 255, 255, 0.32);
}

.modal__frame {
    overflow: hidden;
    border-radius: 8px;
    background: #000;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

/* 横型 16:9(dvh 未対応ブラウザ向けに vh を先に宣言) */
.modal[data-orientation="landscape"] .modal__frame {
    aspect-ratio: 16 / 9;
    width: min(92vw, calc(85vh * 16 / 9), 1120px);
    width: min(92vw, calc(85dvh * 16 / 9), 1120px);
}

/* 縦型 9:16 */
.modal[data-orientation="portrait"] .modal__frame {
    aspect-ratio: 9 / 16;
    width: min(92vw, calc(85vh * 9 / 16), 480px);
    width: min(92vw, calc(85dvh * 9 / 16), 480px);
}

.modal__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

/* file:// で開かれたときの案内パネル(枠内スクロール可) */
.notice {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 20px;
    text-align: left;
    background: #1b1f24;
}

/* margin: auto で中央寄せ(あふれた場合も上端が切れない) */
.notice__body {
    margin: auto;
    max-width: 100%;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.notice__body p {
    margin: 0 0 12px;
}

.notice__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 20px;
    border-radius: 999px;
    font-weight: 600;
    color: #1b1f24;
    text-decoration: none;
    background: #fff;
}

.notice__link:hover {
    background: #e6e8eb;
}

@media (prefers-reduced-motion: no-preference) {
    .modal[open] {
        animation: modal-in 0.2s ease-out;
    }

    .modal[open]::backdrop {
        animation: backdrop-in 0.2s ease-out;
    }
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
}

@keyframes backdrop-in {
    from {
        opacity: 0;
    }
}