@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)。画像は YouTube(data-video-id)なら JS が生成して差し込み、MP4(data-video-src)なら HTML のポスター画像を使う。
   寸法・地色のみを持ち、配置は各セクションのミックスクラス(.sec-statement__video / .sec-videos__card)が担う ---- */
.adlp-video-card {
    position: absolute;
    display: block;
    width: 69rem;
    height: 36.2rem;
    padding: 0;
    border: 0;
    overflow: hidden;
    font: inherit;
    color: var(--color-white);
    background: #d9d9d9;
    cursor: pointer;
}

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

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

/* 動画1(Figma x30, y1798) */
.sec-statement__video {
    left: 3rem;
    top: 73.7rem;
}

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

.sec-profile {
    position: relative;
    width: 100%;
    height: 146.5rem;
    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.5rem;
}

/* カードのドロップシャドウ。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;
}

/* ===========================
   Videos Section (Figma y3698-5043)
   =========================== */

/* 地色: 白地に rgba(248,248,217,0.41)(ref実測 #fcfcef)。下端 y5043 が POP UP SHOP セクションの原点 */
.sec-videos {
    position: relative;
    width: 100%;
    height: 134.5rem;
    overflow: hidden;
    background-color: rgba(248, 248, 217, 0.41);
}

/* PROFILE背景ぼかしの下方向への滲み(Figma上は動画セクションより上のレイヤー) y3698-3730 */
.sec-videos__bleed {
    position: absolute;
    left: 0;
    top: 0;
    width: 75rem;
    height: 3.2rem;
    max-width: none;
    pointer-events: none;
}

/* 動画カード(690x362)の左上が原点。Figma x30, y3757 / 4181 / 4605 */
.sec-videos__item {
    position: absolute;
    left: 3rem;
    width: 69rem;
}

.sec-videos__item.--behind {
    top: 5.9rem;
}

.sec-videos__item.--interview1 {
    top: 48.3rem;
}

.sec-videos__item.--interview2 {
    top: 90.7rem;
}

.sec-videos__card {
    left: 0;
    top: 0;
}

/* キャプション(Tenor Sans 20px lh1.5)。top はカード上端基準 Figma 367 / 368 / 369px + ref実測補正 1px(Tenor Sans のベースライン丸め差) */
.sec-videos__caption {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    text-align: center;
    white-space: nowrap;
    color: var(--color-black);
}

/* Figma: left 50%-95px, 幅191px(中央揃えではなく左固定) */
.--behind .sec-videos__caption {
    left: calc(50% - 9.5rem);
    top: 36.8rem;
    width: 19.1rem;
    transform: none;
    text-align: left;
}

.--interview1 .sec-videos__caption {
    left: calc(50% + 0.05rem);
    top: 36.9rem;
}

.--interview2 .sec-videos__caption {
    top: 37rem;
}

/* ===========================
   Common Parts (POP UP SHOP 以降のセクション共通)
   =========================== */

/* セクション見出し(Tenor Sans 36px / lh1.5 = 箱高54px)。水平位置は各セクションのミックスクラスで微調整 */
.adlp-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 400;
    font-size: 3.6rem;
    line-height: 1.5;
    letter-spacing: 0.18rem;
    white-space: nowrap;
    color: var(--color-black);
}

/* リンクボタン(689x100)。配置は各セクションのミックスクラス、子要素の座標はボタン左上が原点 */
.adlp-linkbtn {
    position: absolute;
    display: block;
    width: 68.9rem;
    height: 10rem;
    border-radius: 0.5rem;
    overflow: hidden;
    color: var(--color-white);
    text-decoration: none;
}

.adlp-linkbtn.--lr {
    background-color: var(--color-lr);
}

.adlp-linkbtn__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 68.9rem;
    height: 10rem;
    max-width: none;
}

/* ボタン文字(36px / lh1.5 = 箱高54px)。下線位置は Figma 原寸レンダリングの実測に合わせて各ボタンで text-underline-offset(ベースラインからの距離)を指定 */
.adlp-linkbtn__label {
    position: absolute;
    display: block;
    font-size: 3.6rem;
    line-height: 1.5;
    letter-spacing: 0.18rem;
    white-space: nowrap;
    color: var(--color-white);
    text-decoration: underline;
    text-decoration-thickness: 0.1rem; /* Figma レンダリング実測: 1px */
}

.adlp-linkbtn__icon {
    position: absolute;
    max-width: none;
}

/* ===========================
   POP UP SHOP Section (Figma y5043-6644)
   =========================== */

/* 地色は透明(白地の上にピンクのグラデ)。下端148pxは LIMITED SET と重なり、下層の LIMITED SET が透ける */
.sec-popup {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 160.1rem;
    background-image: linear-gradient(179.889deg, rgba(250, 221, 229, 0) 4.5015%, rgba(250, 221, 229, 0.35) 16.382%, rgba(250, 221, 229, 0.35) 46.006%, rgba(250, 221, 229, 0.35) 73.689%, rgba(250, 221, 229, 0) 96.514%);
}

/* Figma y5139 */
.sec-popup__title {
    left: calc(50% - 0.05rem);
    top: 9.6rem;
}

/* Figma x30, y5289(切り欠き部分は透過) */
.sec-popup__ticket {
    position: absolute;
    left: 3rem;
    top: 24.6rem;
    width: 69rem;
    height: 98.8rem;
    max-width: none;
}

/* Figma x31, y6310 */
.sec-popup__btn {
    left: 3.1rem;
    top: 126.7rem;
}

.sec-popup__btn-label {
    left: 32.5rem;
    top: 2.3rem;
    transform: translateX(-50%);
    font-family: var(--font-jp);
    font-weight: 500;
    text-underline-offset: 0.5rem; /* Figma 実測: 下線 ボタン内 y71 */
}

.sec-popup__btn-icon {
    left: 41.6rem;
    top: 4.3rem;
    width: 2.3rem;
    height: 2.3rem;
}

/* ===========================
   LIMITED SET Section (Figma y6496-12089)
   =========================== */

/* 上端148pxは POP UP SHOP の下に潜り込む(Figma y6496 から開始) */
.sec-limited {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 559.3rem;
    margin-top: -14.8rem;
    overflow: hidden;
    background-image: linear-gradient(to bottom, rgba(247, 245, 241, 0) 0%, #f7f5f1 8.316%);
}

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

/* Figma y6566 */
.sec-limited__title {
    left: calc(50% + 0.05rem);
    top: 7rem;
}

.sec-limited__item {
    left: 3rem;
    width: 69rem;
}

/* Figma y6686 */
.sec-limited__item.--set01 {
    top: 19rem;
    height: 62.2rem;
}

/* Figma y7486 */
.sec-limited__item.--set02 {
    top: 99rem;
    height: 62.2rem;
}

/* Figma y8286 */
.sec-limited__item.--set03 {
    top: 179rem;
    height: 62.9rem;
}

/* Figma x71, y9093 */
.sec-limited__item.--gwp {
    left: 7.1rem;
    top: 259.7rem;
    width: 64.9rem;
    height: 79.7rem;
}

/* Figma y10145 */
.sec-limited__item.--online {
    top: 364.9rem;
    height: 84.4rem;
}

/* Figma x60, y11287(右端がキャンバス右端 x750 に接する) */
.sec-limited__item.--campaign {
    left: 6rem;
    top: 479.1rem;
    height: 69.4rem;
}

/* ハートの区切り線(600x18)。Figma x75 */
.sec-limited__underline {
    left: 7.5rem;
    width: 60rem;
    height: 1.8rem;
}

.sec-limited__underline.--set01 {
    top: 89.2rem;
}

.sec-limited__underline.--set02 {
    top: 169.2rem;
}

.sec-limited__underline.--set03 {
    top: 249.9rem;
}

.sec-limited__underline.--gwp {
    top: 355.1rem;
}

.sec-limited__underline.--online {
    top: 469.3rem;
}

.sec-limited__note {
    position: absolute;
    left: 3rem;
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: 0.09rem;
    white-space: nowrap;
    color: var(--color-black);
}

/* Figma y9936 */
.sec-limited__note.--gwp {
    top: 344rem;
}

/* Figma y11040 */
.sec-limited__note.--online {
    top: 454.4rem;
}

/* ===========================
   Instagram LIVE Section (Figma y12089-13299)
   =========================== */

.sec-live {
    position: relative;
    width: 100%;
    height: 121rem;
    overflow: hidden;
}

/* グラデ背景 + カード(日時等の文字を含む)を1枚に書き出した画像 */
.sec-live__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 75rem;
    height: 121rem;
    max-width: none;
}

/* Figma x30, y13111。背景はグラデ角丸のSVG(.adlp-linkbtn__bg) */
.sec-live__btn {
    left: 3rem;
    top: 102.2rem;
}

/* Figma レンダリングでは下線が先頭の半角スペースから全体に引かれ、英字部(y67)と和文部(y68)で1px段差がある。
   先頭スペースを保持するため white-space: pre、下線は span ごとに引く */
.sec-live__btn-label {
    left: 32.7rem;
    top: 2rem;
    transform: translateX(-50%);
    white-space: pre;
    text-transform: uppercase;
    text-decoration: none;
}

.sec-live__btn-en,
.sec-live__btn-ja {
    text-decoration: underline;
    text-decoration-thickness: 0.1rem;
    text-decoration-skip-spaces: none; /* 行頭スペースにも下線を引く(既定 start end では飛ばされる) */
}

.sec-live__btn-en {
    text-underline-offset: 0.4rem;
}

.sec-live__btn-ja {
    font-family: var(--font-jp);
    font-weight: 500;
    text-underline-offset: 0.5rem;
}

.sec-live__btn-icon {
    left: 59rem;
    top: 4rem;
    width: 2.3rem;
    height: 2.3rem;
}

/* ===========================
   INSTAGRAM Section (Figma y13299-14419。白地 y14419-14560 の141pxは footer の padding-top が担う)
   =========================== */

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

/* Figma y13374 */
.sec-instagram__title {
    left: calc(50% + 0.05rem);
    top: 7.5rem;
}

/* Figma x65, y13477 */
.sec-instagram__profile {
    position: absolute;
    left: 6.5rem;
    top: 17.8rem;
    width: 62rem;
    height: 78.4rem;
    max-width: none;
}

/* Figma x31, y14319 */
.sec-instagram__btn {
    left: 3.1rem;
    top: 102rem;
}

/* 左端基準(中央寄せしない) */
.sec-instagram__btn-label {
    left: 25rem;
    top: 2.5rem;
    text-underline-offset: 0.4rem; /* Figma 実測: 下線 ボタン内 y68 */
}

.sec-instagram__btn-icon {
    left: 19.7rem;
    top: 3.7rem;
    width: 3rem;
    height: 3rem;
}

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

/* Figma: INSTAGRAM セクション下端(FOLLOW US ボタン下端 y14419 + 141px) y14560 = タグライン上端(14.1rem)、コピーライト下端 y14955 → フレーム下端 y14995(4rem) */
.adlp-footer {
    width: 100%;
    padding: 14.1rem 3rem 4rem;
    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;
}

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

.adlp-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 自体は余白ゼロ */
/* 本番はホスト(ec-force)のレイアウトに包まれ外部CSSが当たるため、クラス名はLP固有の接頭辞にし、
   中央寄せ(fixed + inset 0 + margin auto + fit-content)もブラウザ既定に頼らず id+class で明示する */
#adlp-video-modal.adlp-video-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: fit-content;
    height: fit-content;
    margin: auto;
    transform: none;
    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;
}

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

/* ラッパー自体はクリックを透過させ、×ボタン横の空白も「背景クリック」として扱う。
   dialog(margin: auto)のボックス = 動画枠のサイズにして、枠自体がビューポート中央に来るようにする */
.adlp-video-modal__inner {
    position: relative;
    pointer-events: none;
}

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

/* 閉じるボタンは動画枠の右上外側に絶対配置(通常フローに置くと枠が中央から 26px 下がる)。
   枠の高さを 100dvh - 120px 以下に抑えているので、上の 60px に必ず収まる */
.adlp-video-modal__close {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    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;
}

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

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

/* 横型 16:9(dvh 未対応ブラウザ向けに vh を先に宣言)。高さは 100dvh - 120px(上下 60px = ×ボタン分の余白)が上限 */
.adlp-video-modal[data-orientation="landscape"] .adlp-video-modal__frame {
    aspect-ratio: 16 / 9;
    width: min(92vw, calc((100vh - 120px) * 16 / 9), 1120px);
    width: min(92vw, calc((100dvh - 120px) * 16 / 9), 1120px);
}

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

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

/* 自前ホストの MP4(縦型 2160x3840)。枠は 9:16 だが端数差は黒地で吸収する */
.adlp-video-modal__frame video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    object-fit: contain;
}

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

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

.adlp-video-notice__body p {
    margin: 0 0 12px;
}

.adlp-video-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;
}

.adlp-video-notice__link:hover {
    background: #e6e8eb;
}

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

    .adlp-video-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;
    }
}