@charset "UTF-8";
/* ==================================================
BEAUTY ページ固有（骨組み）
・共通部品は /common/css/detail.css
・数値は Figma（2773:121、PC 1280px）の値。calc(N * var(--d)) で伸縮する
================================================== */

/* ページ全体の位置（ヒーロー） */
.dtArticle {
  --heroTop: 101;
  --heroLeft: 284;
  --heroW: 964;
  --heroAr: 964 / 626.6;
}

/* 1画面目の背景写真の見え方 */
.bgObj {
  --bgL: 0.16%;
  --bgT: -4.09%;
  --bgW: 100%;
  --bgH: 108.17%;
}

/* ヒーロー画像の切り抜き位置 */
.dtHeroImg {
  --imgL: -5.913%;
  --imgT: -6.543%;
  --imgW: 106.85%;
  --imgH: 109.64%;
}

/* ==================================================
リード（Next Daily. / 新しい美容との出会いが、）
================================================== */
@media screen and (min-width: 961px) {
  .dtLeadArea {
    margin-top: calc(-54 * var(--d));
  }
  .dtLeadGlp .txtSet:first-child {
    padding-top: calc(2 * var(--d));
  }
  .dtLeadGlp .leadTxtObj {
    margin-top: calc(47 * var(--d));
  }
  .dtLeadGlp .leadJpTxtObj {
    margin-top: calc(46 * var(--d));
  }
}

/* ==================================================
About NEDALY
================================================== */
.aboutArea {
  margin-top: calc(80 * var(--d));
}
.aboutGlp {
  display: flex;
  flex-flow: column;
  gap: calc(16 * var(--d));
  margin-top: calc(8 * var(--d));
}
.aboutGlp .aboutTtlObj {
  font-size: calc(18 * var(--d));
  line-height: 2.4;
  letter-spacing: 0.02em;
}
.aboutGlp .aboutTxtObj {
  font-size: max(10px, calc(12 * var(--d)));
  line-height: 1.7;
  letter-spacing: 0.02em;
}
/* NEDALY の概念図（中身は inc/chart.php、見た目は css/nedaly-chart.css。図は枠の幅に合わせて比例で伸縮する）
・地はガラス調カード（.glassCard）。支給データの地の色（--nc-ground）は透明にする
・SP・TAB：ほかのカードと同じ幅。図の文字が大きくなりすぎないよう幅は 546px（390 × 1.4。--d の上限と同じ倍率）まで
・PC：Figma の枠と同じ 960 幅（図は 1280 × 800 の設計なので 0.75 倍で表示） */
.conceptObj {
  max-width: 546px;
  margin: calc(32 * var(--d)) auto 0;
}
.conceptObj.glassCard::before {
  z-index: 1; /* 縁のハイライトを図の上に */
}
/* ガラスのぼかしは裏の層（::after）に移す。枠そのものに backdrop-filter があると、
   SP・TAB の詳細カード（position: fixed）が画面ではなくこの枠を基準に置かれてしまうため */
.conceptObj.glassCard {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.conceptObj.glassCard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.conceptObj .nc {
  --nc-ground: transparent;
  font-feature-settings: normal; /* body の palt を切り、支給データどおりの字詰めに */
}
.conceptObj .nc__stage {
  border-radius: calc(16 * var(--d)); /* 滲みをカードの角丸で切る */
}
/* 各プラットフォームの名称（MAG・BOOK・CLUB・LIVE・ROOM・FES・JOURNAL）はページ下の各欄へのリンク（inc/chart.php）。
   LIVE / ROOM / FES は MAG・BOOK と同じ文字（支給データの .nc__real の指定：Noto Sans JP 500・11px・字間 .1em。
   以前は button だったため支給データの .nc button { font: inherit } が勝ち、大きく細い文字になっていた）。色も MAG と同じ濃さに */
.conceptObj .nc a {
  color: inherit;
  text-decoration: underline; /* 2026-10-13 追加の指定：各プラットフォームの名称に下線 */
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.conceptObj .nc .nc__real {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nc-ink);
}
/* 楕円上の黒丸の周回（2026-10-13 ユーザー指定：もう少し速く・イージング → 追加の指定で、丸ごとにランダムな速さ）
   支給データのまとめて回す動き（.nc__spinner の回転と丸の逆回転）を止め、js/common.js の ncOrbitSet が丸ごとに動かす（is-jsOrbit）。
   JS が動かないとき・「視差効果を減らす」設定では is-jsOrbit が付かないので、支給データどおり */
.conceptObj .nc.is-jsOrbit .nc__spinner,
.conceptObj .nc.is-jsOrbit .nc__dot {
  animation: none;
}
@media screen and (min-width: 961px) {
  .aboutArea {
    margin-top: calc(155 * var(--d));
  }
  .aboutGlp {
    display: grid;
    grid-template-columns: calc(370 * var(--d)) calc(568 * var(--d));
    column-gap: calc(23 * var(--d));
    margin-top: 0;
  }
  .aboutGlp .aboutTxtObj {
    padding-top: calc(8 * var(--d));
  }
  .conceptObj {
    width: calc(960 * var(--d));
    max-width: none;
    margin: calc(72 * var(--d)) 0 0;
  }
}

/* ==================================================
NEDALY の各ブロック
・is-mag：Instagram 枠＋説明カード
・is-club：説明カード＋スライダー
・is-room / is-magazine：大きなカード（ロゴ・タグ → メディア → 文章）
・is-magazineSide：メディア＋説明カード
================================================== */
.nedalySet {
  display: flex;
  flex-flow: column;
  gap: calc(24 * var(--d));
  margin-top: calc(64 * var(--d));
  scroll-margin-top: calc(80 * var(--d)); /* 概念図の名称（MAG・LIVE など）から移動したとき、ヘッダーと重ならないように */
}
.nedalyCard,
.nedalySet.is-room,
.nedalySet.is-magazine {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 0;
  padding: calc(24 * var(--d)) calc(20 * var(--d)) calc(28 * var(--d));
}
.nedalySet .logoObj {
  width: calc(200 * var(--d));
  height: auto;
}
.nedalySet .logoObj.is-magazine {
  width: calc(260 * var(--d));
}
/* ロゴ画像が無い欄名（NEDALY LIVE / NEDALY JOURNAL / HELLO KEAUTY）は文字で出す。
   ロゴに近い細身のセリフ体（Instrument Serif、サイト共通で読み込み済み）で、高さをロゴ（SP 約 26・PC 約 35）にそろえる */
.nedalySet .logoTxtObj {
  width: auto;
  font-family: "Instrument Serif", serif;
  font-size: calc(36 * var(--d));
  line-height: 0.75;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #262222;
}
.nedalySet .tagObj {
  margin-top: calc(16 * var(--d));
}
.nedalySet .ttlObj {
  margin-top: calc(24 * var(--d));
  font-size: calc(22 * var(--d));
  line-height: 1.5;
}
.nedalySet .txtObj {
  margin-top: calc(20 * var(--d));
  font-size: max(10px, calc(12 * var(--d)));
  line-height: 1.7;
}
.nedalySet .headGlp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(12 * var(--d));
  width: 100%;
}
.nedalySet .headGlp .tagObj {
  margin-top: 0;
}
.instaLists {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(12 * var(--d));
}
.instaLists .mediaObj {
  --ar: 275 / 486;
}
.boxSliderGlp .swiper-slide {
  --ar: 417 / 371;
  width: calc(260 * var(--d));
  margin-right: calc(12 * var(--d));
}
/* ページ送り（CLUB・MAGAZINE・JOURNAL。見た目と液体の動きは detail.css の「ページ送り」）：1枚目の誌面の中央、誌面の下 16 */
.boxSliderGlp {
  --cardW: calc(260 * 371 / 417 * 773 / 1150);
  --pagerTop: 16;
}
/* 誌面（縦長のページ 773×1150）：高さはほかの枠と同じで、幅を縦横比に合わせる */
.boxSliderGlp .swiper-slide.is-page {
  --ar: 773 / 1150;
  width: calc(260 * 371 / 417 * 773 / 1150 * var(--d));
}
/* NEDALY MAG の Instagram リール（埋め込み）。読み込み中は白
   埋め込みは幅 326px で描き、枠の幅に縮める（--reelScale は js/common.js が入れる。JS が動かなければ等倍で右が切れる） */
.instaLists .reelObj {
  background: #fff;
}
.instaLists .reelObj iframe {
  inset: auto;
  left: 0;
  top: 0;
  width: 326px;
  height: calc(100% / var(--reelScale, 1));
  transform: scale(var(--reelScale, 1));
  transform-origin: 0 0;
}
.nedalySet.is-room .roomMediaObj {
  --ar: 895 / 371;
  width: 100%;
  margin-top: calc(24 * var(--d));
}
/* カード内のスライダー：SP はカードの右端まで抜ける（flex の子なので幅を親に合わせる） */
.nedalySet.is-magazine .boxSliderGlp {
  align-self: stretch;
  margin: calc(24 * var(--d)) calc(-20 * var(--d)) 0 0;
}
.nedalySet.is-magazineSide .sideMediaObj {
  --ar: 456 / 406;
}
@media screen and (min-width: 961px) {
  .nedalySet {
    display: grid;
    align-items: start;
    gap: 0;
    margin-top: calc(96 * var(--d));
  }
  /* 横に並ぶ欄（MAG・CLUB・LIVE・MAGAZINE・HELLO KEAUTY）の説明カードは、隣の画像・動画のブロックが過ぎるまで
     ヘッダーの下で止めておく（2026-10-13 ユーザー指定。止まる範囲は欄の中。カードの方が高い欄では動かない） */
  .nedalySet .nedalyCard {
    position: sticky;
    top: calc(96 * var(--d));
  }
  .aboutArea + .nedalySet {
    margin-top: calc(128 * var(--d));
  }
  .nedalySet .ttlObj {
    font-size: calc(24 * var(--d));
  }
  .nedalySet .logoObj.is-mag {
    width: calc(278 * var(--d));
  }
  .nedalySet .logoObj.is-club {
    width: calc(279 * var(--d));
  }
  .nedalySet .logoObj.is-room {
    width: calc(282 * var(--d));
  }
  .nedalySet .logoObj.is-magazine {
    width: calc(382 * var(--d));
  }
  .nedalySet .logoTxtObj {
    font-size: calc(48 * var(--d));
  }
  /* MAGAZINE のロゴを CLUB と同じ幅のカード（376）に入れるときは、カードの内側の幅に収める */
  .nedalySet.is-club .logoObj.is-magazine {
    width: calc(312 * var(--d));
  }

  /* MAG：Instagram 枠（275×486 を 2列）＋カード 374×462 */
  .nedalySet.is-mag {
    grid-template-columns: calc(572 * var(--d)) calc(374 * var(--d));
    column-gap: calc(18 * var(--d));
  }
  .instaLists {
    grid-template-columns: repeat(2, calc(275 * var(--d)));
    gap: calc(27 * var(--d)) calc(22 * var(--d));
  }
  .nedalySet.is-mag .nedalyCard {
    min-height: calc(462 * var(--d));
    padding: calc(57 * var(--d)) calc(30 * var(--d)) calc(32 * var(--d)) calc(25 * var(--d));
  }
  .nedalySet.is-mag .tagObj {
    margin: calc(28 * var(--d)) 0 0 calc(-1 * var(--d));
  }
  .nedalySet.is-mag .ttlObj {
    margin-top: calc(28 * var(--d));
  }
  .nedalySet.is-mag .txtObj {
    margin-top: calc(31 * var(--d));
  }

  /* CLUB：カード 376×400 ＋スライダー（417×371、間隔 20） */
  .nedalySet.is-club {
    grid-template-columns: calc(376 * var(--d)) calc(572 * var(--d));
    column-gap: calc(16 * var(--d));
  }
  .nedalySet.is-club .nedalyCard {
    min-height: calc(400 * var(--d));
    padding: calc(41 * var(--d)) calc(32 * var(--d)) calc(32 * var(--d));
  }
  .nedalySet.is-club .tagObj {
    margin-top: calc(15 * var(--d));
  }
  .nedalySet.is-club .ttlObj {
    margin-top: calc(30 * var(--d));
  }
  .nedalySet.is-club .txtObj {
    margin-top: calc(26 * var(--d));
  }
  .nedalySet.is-club .boxSliderGlp {
    margin-top: calc(8 * var(--d));
  }
  .boxSliderGlp .swiper-slide {
    width: calc(417 * var(--d));
    margin-right: calc(20 * var(--d));
  }
  .boxSliderGlp .swiper-slide.is-page {
    width: calc(371 * 773 / 1150 * var(--d));
  }
  .boxSliderGlp {
    --cardW: calc(371 * 773 / 1150);
  }

  /* ROOM / MAGAZINE：大きなカード 964×734 */
  .nedalySet.is-room,
  .nedalySet.is-magazine {
    display: flex;
    min-height: calc(734 * var(--d));
    padding: calc(72 * var(--d)) calc(32 * var(--d)) calc(40 * var(--d)) calc(39 * var(--d));
  }
  .nedalySet .headGlp .tagObj {
    margin-top: calc(3 * var(--d));
  }
  .nedalySet.is-room .roomMediaObj {
    width: calc(895 * var(--d));
    margin-top: calc(42 * var(--d));
  }
  .nedalySet.is-magazine .boxSliderGlp {
    align-self: flex-start;
    width: calc(893 * var(--d));
    margin: calc(43 * var(--d)) 0 0;
  }
  .nedalySet.is-room .ttlObj,
  .nedalySet.is-magazine .ttlObj {
    margin-top: calc(42 * var(--d));
  }
  .nedalySet.is-room .txtObj,
  .nedalySet.is-magazine .txtObj {
    margin-top: calc(31 * var(--d));
  }

  /* MAGAZINE（横並び）：メディア 456×406 ＋カード 460×489 */
  .nedalySet.is-magazineSide {
    grid-template-columns: calc(456 * var(--d)) calc(460 * var(--d));
    column-gap: calc(48 * var(--d));
  }
  .nedalySet.is-magazineSide .nedalyCard {
    min-height: calc(489 * var(--d));
    padding: calc(72 * var(--d)) calc(32 * var(--d)) calc(40 * var(--d));
  }
  .nedalySet.is-magazineSide .logoObj {
    margin-left: calc(7 * var(--d));
  }
  .nedalySet.is-magazineSide .tagObj {
    margin-top: calc(18 * var(--d));
  }
  .nedalySet.is-magazineSide .ttlObj {
    margin-top: calc(54 * var(--d));
  }
  .nedalySet.is-magazineSide .txtObj {
    margin-top: calc(25 * var(--d));
  }
}