@charset "UTF-8";
#hdrSct div.logoArea {
  display: none;
}
.clr-wh {
  --ttl-color: #fff;
}

.clr-bk {
  --ttl-color: #111;
}
/* ヘッダーの日時：TOPではタイトル(.indexTtlBlk)と同じカラークラスで色を切り替える。
   共通CSSの mix-blend-mode: exclusion（背景に応じた反転）だと指定色が濁るため打ち消す */
#hdrSct .nowdate {
  color: var(--ttl-color, var(--clr-wh));
  mix-blend-mode: normal;
  transition: color 0.35s ease;
}
.mainArea {
  width: 100%;
  height: 100svh; /* dvhはアドレスバーの出し入れで高さが変わり、下の全ブロックがずれるためsvh（固定）にする */
  /* position: fixed; */
  left: 0;
  top: 0;
  z-index: -1;
}
.mainArea .bgObj::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  /* backdrop-filter: blur(20px); */
  top: 0;
  z-index: 15;
  pointer-events: none;
  left: 0;
  opacity: 0;
  transition: 0.4s ease;
}
.js-posScrolled .mainArea .bgObj::before {
  opacity: 1;
  transition: 0.4s ease;
  z-index: 10;
}

.mainArea .txtGlp {
  position: absolute;
  z-index: 10;
  width: 80%;
  right: 0;
  margin: 0 auto;
  left: 0;
  bottom: 10vh;
  text-align: left;
  padding: 10% 5%;
}
.mainArea .txtGlp .ttlObj {
}
.mainArea .txtGlp .txtObj {
  margin: 9% auto 0;
  text-align: justify;
}

.mainArea .bgObj {
  width: 100%;
  height: 100lvh; /* %だとアドレスバーの出し入れで動画がリサイズされるため、最大時の高さで固定 */
  top: 0;
  width: 100%;
  position: fixed;
  z-index: -1;
}
.mainArea .bgObj video,
.mainArea .bgObj img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 769px) {
}
@media screen and (min-width: 961px) {
  .mainArea {
    width: 100%;
    height: 100svh;
    /* position: fixed; */
    left: 0;
    top: 0;
    z-index: -1;
  }
  .mainArea .bgObj::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /* backdrop-filter: blur(20px); */
    top: 0;
    z-index: 15;
    pointer-events: none;
    left: 0;
    opacity: 0;
    transition: 0.4s ease;
  }
  .js-posScrolled .mainArea .bgObj::before {
    opacity: 1;
    transition: 0.4s ease;
    z-index: 10;
  }

  .mainArea .txtGlp {
    position: absolute;
    z-index: 10;
    width: 24.4em;
    left: 5%;
    bottom: 10vh;
    text-align: left;
    padding: 6% 12% 6% 4%;
  }
  .mainArea .txtGlp .ttlObj {
  }
  .mainArea .txtGlp .txtObj {
    margin: 9% auto 0 0;
    text-align: justify;
    width: 80%;
  }

  .mainArea .bgObj {
    width: 100%;
    height: 100lvh;
    top: 0;
    width: 100%;
    position: fixed;
    z-index: -1;
  }
  .mainArea .bgObj video,
  .mainArea .bgObj img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media screen and (min-width: 1281px) {
}

/*====================================
cntsArea
====================================*/
.cntsArea {
  /* MV（100svh）の直後から。以前は 30lvh あけていたが、スクロールしてすぐ左のロゴが下から上がってくるように詰めた */
  margin-top: 0;
  padding: 0vh 0 0;
  position: relative;
}
.cntsArea::after {
}
.cntsArea::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
}
/* 左のロゴ「COOGEE (セクション名)」（Figma：PC_TOP 4:2 の Group 20）
   ・.cntsArea の先頭（MV の直後）に置いた position: sticky。ページを開いた直後は画面の下の外にあり、
     スクロールするとコンテンツと一緒に下から上がってきて、定位置（〜960px は上から 10vh、PC は 961px〜 の指定）で止まる
   ・高さ 0 にして後ろのコンテンツを押し下げない（ロゴと文字は下へはみ出して表示）
   ・フッターが見えたら一緒に上へ流れる（common/js/setting.js の ttlBlkFollowSet。translate を使うのでアニメーションさせない）
   ・〜960px は Figma が無いので、ロゴは下層ページの SP（common/css/detail.css の .articleTtlBlk）と同じ幅 120、
     文字との位置関係は PC の Figma の比率 */
.indexTtlBlk {
  --rd: min(calc(100vw / 375), 1.4px);
}
.cntsArea .ttlBlk {
  position: sticky;
  top: 10vh;
  height: 0;
  margin: 0 0 0 5%;
  /* ヘッダー（1020）と同じくコンテンツ（〜15）の上に重ねる。ヘッダー・メニュー・セクションナビ（1010）よりは下 */
  z-index: 100;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.cntsArea .ttlBlk .logo {
  width: calc(120 * var(--rd));
  margin-top: calc(18 * var(--rd));
  line-height: 0;
}
.cntsArea .ttlBlk .logo svg {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--ttl-color);
  transition: fill 0.35s ease;
}
/* MESSAGE（clr-bk）のときのロゴと文字は Figma の色。ヘッダーの日時は .clr-bk の #111 のまま */
.indexTtlBlk.clr-bk {
  --ttl-color: #231815;
}

.cntsArea .ttlSet {
  position: relative;
  overflow: hidden;
  /* 縦スライドの上下だけ隠し、横は切らない（「(ALLIANCE)」などが右で切れないように）。clip 非対応のブラウザは上の hidden のまま */
  overflow-x: visible;
  overflow-y: clip;
  width: 8em;
  height: 1.3em;
  margin: 0 0 0 calc(6 * var(--rd));
  font-size: calc(10 * var(--rd));
  line-height: 1.3;
}

.cntsArea .ttlObj {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  /* h2 の既定の大きさ（1.5em）と行の高さを打ち消して .ttlSet に合わせる */
  font-size: 1em;
  line-height: inherit;
  white-space: nowrap;
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  color: var(--ttl-color);
  transition: color 0.35s ease;
}

.cntsArea .ttlObj span {
  display: block;
}

.cntsArea .ttlObj.is-current {
  transform: translateY(0);
  opacity: 1;
}
.cntsArea .ttlObj.is-current::before {
  content: "(";
}
.cntsArea .ttlObj.is-current::after {
  content: ")";
}

.cntsArea .bgObj {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.cntsArea .bgObj.is-active {
  opacity: 1;
}

.cntsArea .bgObj::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

/* 切り替わりの瞬間だけ発火するブラーパルス */
@keyframes bgBlurPulse {
  0% {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  45% {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  100% {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
}
.bgObj.is-switching::after {
  animation: bgBlurPulse 0.7s ease;
}

@media screen and (min-width: 769px) {
}
@media screen and (min-width: 961px) {
  /* Figma（PC_TOP 4:2）では MV（832px）の直後から MESSAGE。MV に文章カードが無くなったので余白は取らない */
  .cntsArea {
    margin-top: 0;
    padding: 0vh 0 0;
    position: relative;
  }
  .cntsArea::after {
  }
  .cntsArea::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
  }
  /* 左のロゴ（Figma の Group 20：253×52）：ロゴ 171.8 を x32。(MESSAGE) は 12px で、ロゴの右 9.2、
     文字の上端がロゴの上端の 25.15 上。止まる位置は COOGEE ロゴの天地中央が画面の天地中央
     （ロゴの上の余白 25.15 ＋ ロゴの高さの半分。高さ ＝ 幅 × viewBox の縦横比 31.3/200） */
  .indexTtlBlk {
    --rd: calc(100vw / 1280);
  }
  .cntsArea .ttlBlk {
    top: calc(50vh - (25.147 + 171.806 * 31.3 / 200 / 2) * var(--rd));
    margin: 0 0 0 calc(32 * var(--rd));
  }
  .cntsArea .ttlBlk .logo {
    width: calc(171.806 * var(--rd));
    margin-top: calc(25.147 * var(--rd));
  }
  .cntsArea .ttlSet {
    height: calc(16 * var(--rd));
    margin: 0 0 0 calc(9.194 * var(--rd));
    font-size: calc(12 * var(--rd));
    line-height: normal;
  }

  .cntsArea .bgObj {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  .cntsArea .bgObj.is-active {
    opacity: 1;
  }

  .cntsArea .bgObj::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
}
@media screen and (min-width: 1281px) {
}

/*====================================
TOP 各セクション（Figma：PC_TOP 4:2）
・PC（961px〜）は Figma の px 値に --rd を掛けて配置する
  --rd … PC：1280px 基準の 1px（画面幅に合わせて伸縮）/ SP：375px 基準の 1px（最大 1.4px）
・写真の欄は「写真だけの1画面（100vh）」の下に本文エリア（Figma の Rectangle 54）が続く。
  本文エリア内の位置は、本文エリアの上端からの Figma の px
・〜960px は SP 表示。768px 以下では各欄の中身を横に流す（.sp-sideScroll。大きさは Figma の SP_TOP 338:4。ファイル末尾のブロック）
====================================*/
.idxBlk {
  --rd: min(calc(100vw / 375), 1.4px);
}
.newsArea,
.logArea,
.creatorArea,
.allianceArea,
.beautyArea,
.brandArea {
  margin: 10vh 0 0;
  padding-top: 100vh;
}
.newsArea .cntsWrap,
.logArea .cntsWrap,
.creatorArea .cntsWrap,
.allianceArea .cntsWrap,
.beautyArea .cntsWrap,
.brandArea .cntsWrap {
  padding: 0 0 20%;
}
/* 背景：表示中（is-active）以外はぼかしておく */
.idxBlk.js-bgFxd .bgObj::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(10px);
  opacity: 1;
  transition: 0.2s ease;
}
.idxBlk.js-bgFxd .bgObj.is-active::before {
  opacity: 0;
}

/* --- テキストカード（ガラス）。中身の位置は欄ごとに指定 --- */
.idxBlk .txtBlk {
  position: relative;
  margin: 0 5vw;
  padding: 6vw 5vw;
  text-align: left;
}
.idxBlk .txtGlp {
  display: flex;
  flex-flow: column;
  gap: 8vw;
}
.idxBlk .txtSet .txtObj {
  margin: 1.5em 0 0;
}
.idxBlk .is-jp .sTtlObj,
.idxBlk .is-jp .txtObj {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

/* --- View More ＋：部品は common/css/layout.css の .liquidMore（Figma の Group 115・button 3795:302） --- */
.idxBlk .linkBlk {
  display: flex;
  margin: 8vw 0 0 calc(5vw + 8 * var(--rd));
}
.idxBlk .liquidMore {
  --u: var(--rd);
}

/* --- 小カード（NEWS・LOG・ALLIANCE の事例）：Figma 256×318、白30%＋ぼかし4、角丸16
       （地はユーザー指定で白 45% にして透けにくくしている）
       画像 222×165（上 29・左 16）、文字 12px（画像の下 17px）、タイトル・空行・日付 --- */
.tpCards,
.tpCreators {
  display: flex;
  flex-flow: wrap;
  align-items: flex-start;
  gap: 6vw 4%;
  margin: 0 5vw;
}
.tpCards > .tpCardSet,
.tpCreators > .tpCardSet {
  width: 48%;
}
.tpCard {
  display: block;
  position: relative;
  padding: calc(29 * var(--rd)) calc(18 * var(--rd)) calc(24 * var(--rd)) calc(16 * var(--rd));
  border-radius: calc(16 * var(--rd));
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #000; /* Figma は白。ユーザー指定で黒 */
  text-align: left;
  text-decoration: none;
}
/* base.css の a:link（下線・文字色）、base_pc.css の a:hover（半透明・transition .4s）より優先させる。
   hover の反応は写真のぼかしを外すことと、index/js/common.js のポヨン（scale を毎フレーム書くので transition は付けない） */
.idxBlk a.tpCard,
.idxBlk a.tpCard:hover,
.idxBlk a.tpLogoCard,
.idxBlk a.tpLogoCard:hover {
  color: #000;
  text-decoration: none;
  opacity: 1;
  transition: none;
}
.tpCard .imgObj {
  position: relative;
  aspect-ratio: 222 / 165;
  overflow: hidden;
}
.tpCard .imgObj img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Figma の Rectangle 45（画像に重ねた白10%） */
.tpCard .imgObj::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
/* リンクのある写真カードは NEWS 一覧（news/css/style.css）と同じく写真をぼかし、hover で外してはっきり見せる。
   COMING SOON 枠は写真が無いので付けない。リンクのないカードは見る手段が無いのでぼかさない */
.idxBlk a.tpCard .imgObj:not(.is-blank)::after {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity 0.5s ease;
}
@media (hover: hover) {
  .idxBlk a.tpCard:hover .imgObj::after {
    opacity: 0;
  }
}
/* マウスの無い端末（スマホ・タブレット）：画面に入っているカードは写真のぼかしを外す（is-inview は common/js/setting.js の inviewUnblurSet。2026-10-19） */
@media (hover: none) {
  .idxBlk a.tpCard.is-inview .imgObj::after {
    opacity: 0;
  }
}
.tpCard .imgObj.is-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
}
.tpCard .imgObj.is-blank span {
  font-size: max(10px, calc(12 * var(--rd)));
  letter-spacing: 0.1em;
}
.tpCard .ttl,
.tpCard .sub {
  font-size: max(10px, calc(12 * var(--rd)));
  line-height: 1.35; /* Figma：5行（タイトル3行・空行・日付）で 81px */
  letter-spacing: 0;
}
.tpCard .ttl {
  margin: calc(17 * var(--rd)) 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.tpCard .sub {
  margin: 1.35em 0 0; /* Figma の空行1行分 */
}
/* 大カード（CREATOR・BRAND）：Figma 408×370、画像 343×240（上 37・左 33） */
.tpCard.is-l {
  padding: calc(37 * var(--rd)) calc(32 * var(--rd)) calc(24 * var(--rd)) calc(33 * var(--rd));
}
.tpCard.is-l .imgObj {
  aspect-ratio: 343 / 240;
}
.tpCard.is-l .role {
  margin: calc(10 * var(--rd)) 0 0;
  font-size: max(12px, calc(16 * var(--rd)));
  line-height: normal;
  letter-spacing: 0;
}
.tpCard.is-l .name {
  font-size: max(16px, calc(24 * var(--rd)));
  line-height: normal;
  letter-spacing: 0;
}
/* BRAND：画像 344×256（上 36・左 32）、ブランド名 24px（画像の下 13px） */
.tpCard.is-brand {
  padding: calc(36 * var(--rd)) calc(32 * var(--rd)) calc(28 * var(--rd));
}
.tpCard.is-brand .imgObj {
  aspect-ratio: 344 / 256;
}
.tpCard.is-brand .name {
  margin: calc(13 * var(--rd)) 0 0;
}

/*------------------------------------
messageArea（写真なし。MV の動画の上にカード2枚）
------------------------------------*/
/* 上の余白：左のロゴが下から上がってきて定位置（上から 10vh）で止まり、そこから 15vh スクロールしたところで
   カードが画面の下から入ってくる（100vh − 10vh ＋ 15vh）。PC は 961px〜 の指定 */
.messageArea {
  padding: 105vh 0 20vh;
}
.messageArea .cntsWrap {
  display: flex;
  flex-flow: column;
  gap: 10vw;
}
.messageArea .txtBlk {
  padding: 8vw 6vw;
  color: #262222;
  text-align: justify;
  letter-spacing: 0; /* Figma は字間 0（全体の字間が付くと1行多く折り返す） */
  font-feature-settings: normal;
}
.messageArea .txtBlk .js-glassEf {
  border-radius: calc(32 * var(--rd));
}
.messageArea .sTtlObj {
  font-size: calc(20 * var(--rd));
  line-height: normal;
  text-align: left;
}
.messageArea .txtSet .txtObj {
  margin: 1.8em 0 0;
  font-size: max(12px, calc(13 * var(--rd)));
  line-height: normal;
}
/* 段落の間は Figma の空行の数（Aspekta の行送り normal ≒ 1.42em） */
.messageArea .txtSet .txtObj .is-gap1 {
  margin-top: 1.42em;
}
.messageArea .txtSet .txtObj .is-gap2 {
  margin-top: 2.84em;
}
.messageArea .txtSet .txtObj .is-gap3 {
  margin-top: 4.26em;
}

/*------------------------------------
allianceArea（日本語・英語のテキストカード＋事例カード）
------------------------------------*/
.allianceArea .tpTxtCards {
  display: flex;
  flex-flow: column;
  gap: 6vw;
}
.allianceArea .tpTxtCards .txtBlk,
.beautyArea .txtBlk {
  letter-spacing: 0; /* Figma は字間 0 */
  font-feature-settings: normal;
}
.allianceArea .tpTxtCards .txtBlk .js-glassEf {
  border-radius: calc(16 * var(--rd));
}
.allianceArea .tpTxtCards .sTtlObj {
  font-size: max(14px, calc(16 * var(--rd)));
  line-height: normal;
}
.allianceArea .tpTxtCards .txtObj {
  font-size: max(10px, calc(11 * var(--rd)));
  line-height: normal;
}
.allianceArea .tpTxtCards .is-en .txtObj {
  font-size: max(10px, calc(12 * var(--rd)));
  text-align: justify;
}
.allianceArea .tpCards {
  margin-top: 10vw;
}

/*------------------------------------
beautyArea（テキストカード＋ロゴ入りの画像カード2枚）
------------------------------------*/
.beautyArea .txtBlk .js-glassEf,
.tpLogoCard .js-glassEf {
  border-radius: calc(16 * var(--rd));
}
.beautyArea .txtSet .sTtlObj,
.beautyArea .txtSet .txtObj {
  font-size: max(10px, calc(12 * var(--rd)));
  line-height: normal;
  text-align: justify;
}
.beautyArea .txtSet.is-jp .sTtlObj,
.beautyArea .txtSet.is-jp .txtObj {
  font-size: max(10px, calc(11 * var(--rd)));
}
.beautyArea .tpLogoCards {
  display: flex;
  flex-flow: wrap;
  gap: 6vw 4%;
  margin: 10vw 5vw 0;
}
.beautyArea .tpLogoCards > .tpCardSet {
  width: 48%;
}
/* Figma 408×334、ぼかしのガラス、画像 335×250（上 44・左 37）、ロゴ 164×57 */
.tpLogoCard {
  display: block;
  position: relative;
  padding: calc(44 * var(--rd)) calc(36 * var(--rd)) calc(40 * var(--rd)) calc(37 * var(--rd));
}
.tpLogoCard .imgObj {
  position: relative;
  aspect-ratio: 335 / 250;
  overflow: hidden;
}
.tpLogoCard .imgObj img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tpLogoCard .imgObj img.logo {
  position: absolute;
  left: 26%;
  top: 41.2%;
  width: 48.95%;
  height: auto;
  object-fit: contain;
}

/*------------------------------------
brandArea（カード1枚）
------------------------------------*/
.brandArea .tpBrands {
  margin: 0 5vw;
}

@media screen and (min-width: 769px) {
}
@media screen and (min-width: 961px) {
  .idxBlk {
    --rd: calc(100vw / 1280);
  }
  .newsArea.js-bgFxd,
  .logArea.js-bgFxd,
  .creatorArea.js-bgFxd,
  .allianceArea.js-bgFxd,
  .beautyArea.js-bgFxd,
  .brandArea.js-bgFxd {
    margin: 0;
    padding-bottom: 0;
  }
  .idxBlk .txtBlk {
    margin: 0;
  }
  .idxBlk .txtGlp {
    gap: 0;
  }
  .idxBlk .txtSet .txtObj {
    margin: 0;
  }
  .idxBlk .linkBlk {
    margin: 0;
  }

  /* 小カード3枚：x を 48px 間隔、上端を 0・40・82px ずらす */
  .tpCards {
    flex-flow: nowrap;
    gap: 0 calc(48 * var(--rd));
    margin: 0;
  }
  .tpCards > .tpCardSet {
    width: calc(256 * var(--rd));
  }
  .tpCards > .tpCardSet:nth-child(2) {
    margin-top: calc(40 * var(--rd));
  }
  .tpCards > .tpCardSet:nth-child(3) {
    margin-top: calc(82 * var(--rd));
  }
  .tpCards .tpCard {
    min-height: calc(318 * var(--rd));
  }

  /* MESSAGE：カード 560×572（角丸32）を x352 と x656 に、間隔 100、下の余白 319（Figma）。
     上の余白は Figma の 134 ではなく、左のロゴが定位置（top ＝ 50vh − 38.59）で止まってから 15vh スクロールしたところで
     カードが画面の下から入ってくる量（100vh − top ＋ 15vh）。ロゴ → カードの順に出すため（ユーザー指定） */
  .messageArea {
    padding: calc(65vh + (25.147 + 171.806 * 31.3 / 200 / 2) * var(--rd)) 0 calc(319 * var(--rd));
  }
  .messageArea .cntsWrap {
    gap: calc(100 * var(--rd));
  }
  .messageArea .txtBlk {
    width: calc(560 * var(--rd));
    min-height: calc(572 * var(--rd));
    margin-left: calc(352 * var(--rd));
    padding: calc(46 * var(--rd)) calc(24 * var(--rd)) calc(40 * var(--rd)) calc(40 * var(--rd));
  }
  .messageArea .txtBlk + .txtBlk {
    margin-left: calc(656 * var(--rd));
  }
  .messageArea .sTtlObj {
    font-size: calc(32 * var(--rd));
    text-align: justify;
  }
  .messageArea .txtSet .txtObj {
    width: calc(452 * var(--rd));
    margin: calc(30 * var(--rd)) 0 0;
    font-size: max(12px, calc(16 * var(--rd)));
  }

  /* NEWS：本文エリア 924px。カード x354・y136、ボタン x731・y633 */
  .newsArea .cntsWrap {
    min-height: calc(924 * var(--rd));
    padding: calc(136 * var(--rd)) 0 0;
  }
  .newsArea .tpCards {
    margin-left: calc(354 * var(--rd));
  }
  .newsArea .linkBlk {
    margin: calc(97 * var(--rd)) 0 0 calc(731 * var(--rd));
  }

  /* LOG：本文エリア 924px。カード x352・y93、ボタン x732・y566 */
  .logArea .cntsWrap {
    min-height: calc(924 * var(--rd));
    padding: calc(93 * var(--rd)) 0 0;
  }
  .logArea .tpCards {
    margin-left: calc(352 * var(--rd));
  }
  .logArea .linkBlk {
    margin: calc(73 * var(--rd)) 0 0 calc(732 * var(--rd));
  }

  /* CREATOR：本文エリア 1386px。カード 408×370 の2列（x352・x808）。右の列は 64px 下げる。ボタン x741・y1120 */
  .creatorArea .cntsWrap {
    min-height: calc(1386 * var(--rd));
    padding: calc(132 * var(--rd)) 0 0;
  }
  .tpCreators {
    width: calc(864 * var(--rd));
    gap: calc(30 * var(--rd)) calc(48 * var(--rd));
    margin: 0 0 0 calc(352 * var(--rd));
  }
  .tpCreators > .tpCardSet {
    width: calc(408 * var(--rd));
  }
  .tpCreators > .tpCardSet:nth-child(even) {
    margin-top: calc(64 * var(--rd));
  }
  .tpCreators .tpCard {
    min-height: calc(370 * var(--rd));
  }
  .creatorArea .linkBlk {
    margin: calc(90 * var(--rd)) 0 0 calc(741 * var(--rd));
  }

  /* ALLIANCE：本文エリア 1273px。和文カード 314×312（x538・y70）、英文カード 316×373（x900・y127）、
     事例カード x352・y585、ボタン x743・y1058 */
  .allianceArea .cntsWrap {
    min-height: calc(1273 * var(--rd));
    padding: calc(70 * var(--rd)) 0 0;
  }
  .allianceArea .tpTxtCards {
    flex-flow: row;
    align-items: flex-start;
    gap: calc(48 * var(--rd));
    margin-left: calc(538 * var(--rd));
  }
  .allianceArea .tpTxtCards .txtBlk.is-jp {
    width: calc(314 * var(--rd));
    min-height: calc(312 * var(--rd));
    padding: calc(57 * var(--rd)) calc(36 * var(--rd)) calc(30 * var(--rd)) calc(37 * var(--rd));
  }
  .allianceArea .tpTxtCards .txtBlk.is-en {
    width: calc(316 * var(--rd));
    min-height: calc(373 * var(--rd));
    margin-top: calc(57 * var(--rd));
    padding: calc(48 * var(--rd)) calc(39 * var(--rd)) calc(30 * var(--rd)) calc(36 * var(--rd));
  }
  .allianceArea .tpTxtCards .is-jp .txtObj {
    margin-top: calc(25 * var(--rd));
  }
  .allianceArea .tpTxtCards .is-en .sTtlObj {
    font-size: calc(20 * var(--rd));
  }
  .allianceArea .tpTxtCards .is-en .txtObj {
    margin-top: calc(53 * var(--rd));
  }
  .allianceArea .tpCards {
    margin: calc(85 * var(--rd)) 0 0 calc(352 * var(--rd));
  }
  .allianceArea .linkBlk {
    margin: calc(73 * var(--rd)) 0 0 calc(743 * var(--rd));
  }

  /* BEAUTY：本文エリア 1070px。テキストカード 408×587（x808・y62）、画像カード 408×334（x350・y177 と y575） */
  .beautyArea .cntsWrap {
    min-height: calc(1070 * var(--rd));
    padding: calc(62 * var(--rd)) 0 0;
  }
  .tpBeauty {
    display: grid;
    grid-template-columns: calc(408 * var(--rd)) calc(408 * var(--rd));
    column-gap: calc(50 * var(--rd));
    align-items: start;
    margin-left: calc(350 * var(--rd));
  }
  .tpBeauty .txtBlk {
    grid-column: 2;
    grid-row: 1;
    min-height: calc(587 * var(--rd));
    padding: calc(44 * var(--rd)) calc(40 * var(--rd)) calc(40 * var(--rd));
  }
  .tpBeauty .txtGlp {
    gap: calc(38 * var(--rd));
  }
  .beautyArea .txtSet .txtObj {
    margin: calc(17 * 3 * var(--rd)) 0 0; /* Figma の空行3行分 */
  }
  .beautyArea .txtSet.is-jp .txtObj {
    margin: calc(16 * 3 * var(--rd)) 0 0;
  }
  .beautyArea .tpLogoCards {
    grid-column: 1;
    grid-row: 1;
    flex-flow: column;
    gap: calc(64 * var(--rd));
    margin: calc(115 * var(--rd)) 0 0;
  }
  .beautyArea .tpLogoCards > .tpCardSet {
    width: 100%;
  }

  /* BRAND：本文エリア 726px。カード 408×369（x808・y144）、ボタン x740・y613 */
  .brandArea .cntsWrap {
    min-height: calc(726 * var(--rd));
    padding: calc(144 * var(--rd)) 0 0;
  }
  .brandArea .tpBrands {
    width: calc(408 * var(--rd));
    margin: 0 0 0 calc(808 * var(--rd));
  }
  .tpCard.is-brand {
    min-height: calc(369 * var(--rd));
  }
  .brandArea .linkBlk {
    margin: calc(100 * var(--rd)) 0 0 calc(740 * var(--rd));
  }
}
@media screen and (min-width: 1281px) {
}

/*====================================
cafeArea・companyArea・recruitArea（テキストカード＋View More の欄）
・Figma（PC_TOP の cafe・company・recruit）は3欄とも同じ配置
・〜960px のテキストブロックは上の共通指定（.idxBlk .txtBlk）
====================================*/
.cafeArea,
.companyArea,
.recruitArea {
  margin: 10vh 0 0;
  padding-top: 100vh;
}
.cafeArea .cntsWrap,
.companyArea .cntsWrap,
.recruitArea .cntsWrap {
  padding: 0 0 20%;
}

@media screen and (min-width: 769px) {
}
@media screen and (min-width: 961px) {
  /* Figma：写真だけの1画面（832px）の下に 610px の本文エリアが続く */
  .cafeArea.js-bgFxd,
  .companyArea.js-bgFxd,
  .recruitArea.js-bgFxd {
    margin: 0;
    padding-bottom: 0;
  }
  .cafeArea .cntsWrap,
  .companyArea .cntsWrap,
  .recruitArea .cntsWrap {
    min-height: calc(610 * var(--rd));
    padding: calc(97 * var(--rd)) 0 calc(48 * var(--rd));
  }
  /* ガラス：x560・幅656・高さ350・角丸48、文字は内側 48px（上は 98px） */
  .cafeArea .txtBlk,
  .companyArea .txtBlk,
  .recruitArea .txtBlk {
    width: calc(656 * var(--rd));
    min-height: calc(350 * var(--rd));
    margin: 0 0 0 calc(560 * var(--rd));
    padding: calc(98 * var(--rd)) calc(48 * var(--rd)) calc(48 * var(--rd));
  }
  .cafeArea .txtBlk .js-glassEf,
  .companyArea .txtBlk .js-glassEf,
  .recruitArea .txtBlk .js-glassEf {
    border-radius: calc(48 * var(--rd));
  }
  .cafeArea .txtGlp,
  .companyArea .txtGlp,
  .recruitArea .txtGlp {
    flex-flow: row;
    gap: calc(48 * var(--rd));
    letter-spacing: 0;
    font-feature-settings: normal;
  }
  .cafeArea .txtGlp .txtSet,
  .companyArea .txtGlp .txtSet,
  .recruitArea .txtGlp .txtSet {
    flex: none;
    width: calc(256 * var(--rd));
  }
  /* 文字：英 Aspekta 12px・和 Zen Kaku Gothic New 11px、行送りは Figma の自動（normal）。
     見出しと本文の間は Figma の空行3行分。狭い PC 幅では他セクション（.MTxt）と同じく 10px を下限にする */
  .cafeArea .txtGlp .txtSet .sTtlObj,
  .cafeArea .txtGlp .txtSet .txtObj,
  .companyArea .txtGlp .txtSet .sTtlObj,
  .companyArea .txtGlp .txtSet .txtObj,
  .recruitArea .txtGlp .txtSet .sTtlObj,
  .recruitArea .txtGlp .txtSet .txtObj {
    font-size: max(10px, calc(12 * var(--rd)));
    line-height: normal;
    text-align: justify;
  }
  .cafeArea .txtGlp .txtSet .txtObj,
  .companyArea .txtGlp .txtSet .txtObj,
  .recruitArea .txtGlp .txtSet .txtObj {
    margin: calc(17 * 3 * var(--rd)) 0 0;
  }
  .cafeArea .txtGlp .txtSet.is-jp .sTtlObj,
  .cafeArea .txtGlp .txtSet.is-jp .txtObj,
  .companyArea .txtGlp .txtSet.is-jp .sTtlObj,
  .companyArea .txtGlp .txtSet.is-jp .txtObj,
  .recruitArea .txtGlp .txtSet.is-jp .sTtlObj,
  .recruitArea .txtGlp .txtSet.is-jp .txtObj {
    font-size: max(10px, calc(11 * var(--rd)));
  }
  .cafeArea .txtGlp .txtSet.is-jp .txtObj,
  .companyArea .txtGlp .txtSet.is-jp .txtObj,
  .recruitArea .txtGlp .txtSet.is-jp .txtObj {
    margin: calc(16 * 3 * var(--rd)) 0 0;
  }
  /* ボタン：ガラス下端から 64px、x568 */
  .cafeArea .linkBlk,
  .companyArea .linkBlk,
  .recruitArea .linkBlk {
    margin: calc(64 * var(--rd)) 0 0 calc(568 * var(--rd));
  }
}
@media screen and (min-width: 1281px) {
}

.js-bgFxd {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 50lvh;
}
.js-bgFxd .bgObj {
  position: fixed; /* 常に画面に固定し、is-active切り替え時にクロスフェードさせる */
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh; /* アドレスバーが隠れた最大時の高さで固定し、出し入れに依存させない */
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  will-change: opacity;
}
.js-bgFxd .bgObj.is-active {
  opacity: 1;
}
.js-bgFxd .bgObj picture {
  display: block;
  width: 100%;
  height: 100%;
}
.js-bgFxd .bgObj picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12) translateY(0);
  will-change: transform;
}
.js-bgFxd .cntsWrap {
  position: relative;
  z-index: 10;
}

/*====================================
sectionNav（右側の現在位置ナビゲーション）
・2026-10-19 Figma の変更（PC_TOP 4:2 の Group 70 2361:227）に合わせて作り直し。SP（768px 以下）でも PC と同じものを出す（ユーザー指定）
  ・縦の細い線（1px・#d9d9d9）の上に、欄ごとの小さな丸（3px・#d9d9d9）を 16px おきに並べる
  ・今の欄は黒い丸（7px・#262222）。そこにガラスのカプセル（横長 35×17・角丸。Figma の Rectangle 15。Liquid Glass）を
    黒い丸が左端の丸みの中心に来るように重ね、右は画面の外へはみ出す。
    左上に今の欄名のラベル（#d9d9d9・高さ 21・角丸 10.5・B612 Mono 10px。Figma の Group 71。中心は黒い丸の中心の 20px 上）
  ・線の中心は画面の右端から 11.5px（Figma の x 1268.5）、上下は画面の中央
  ・2026-10-19 ユーザー指定で Figma の更新に合わせた（以前はカプセルが縦長 13×47 で黒い丸が中心、ラベルは黒い丸の高さ）
・黒い丸は以前と同じく液体の動き（index/js/common.js の 7 番。頭・しっぽ・首、goo は #dotGoo）。カプセルは弾むように、ラベルは少し遅れて付いていく
・ほかの丸に乗せると、その欄名を同じ形のラベルで出す（::after）。押すとその欄へスクロール
====================================*/
.sectionNav {
  position: fixed;
  right: 3.5px; /* 丸のリンク（幅 16）の中心 ＝ 線の中心を右端から 11.5px に */
  top: 50%;
  transform: translateY(-50%);
  z-index: 1010;
  transition: filter 0.3s ease;
  --navDot: #d9d9d9;
  --navInk: #262222;
}

.js-spMenuOn .sectionNav {
  filter: blur(4px);
  pointer-events: none;
}

.sectionNav-dots {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 縦の線：最初の丸の中心から最後の丸の中心まで */
.sectionNav-dots::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 1px;
  margin-left: -0.5px;
  background: var(--navDot);
  pointer-events: none;
}

.sectionNav-dot {
  position: relative;
}

/* 丸のリンク：押せる範囲は 16×16、見える丸は 3px（::before） */
.sectionNav-dotLink {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}
.sectionNav-dotLink::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--navDot);
}
/* JS が動かないとき：今の丸を黒い 7px に */
.sectionNav:not(.is-liquid) .sectionNav-dot.is-current .sectionNav-dotLink::before {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--navInk);
}

/* 欄名のラベル（今の欄：.sectionNav-label、乗せた欄：::after）。Figma の Group 71：#d9d9d9・高さ 21・角丸 10.5、B612 Mono 10px #262222。
   右端は線の中心から 14.5px 左（Figma の 1254 と 1268.5） */
.sectionNav-label,
.sectionNav-dotLink::after {
  position: absolute;
  right: 22.5px;
  height: 21px;
  padding: 0 12px;
  border-radius: 10.5px;
  background: var(--navDot);
  color: var(--navInk);
  font-family: "B612 Mono", monospace;
  font-size: 10px;
  line-height: 21px;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}
.sectionNav-dotLink::after {
  content: attr(data-label);
  top: calc(50% - 20px); /* 今の欄のラベルと同じく、丸の中心の 20px 上 */
  right: calc(100% + 6.5px); /* リンクの左端（線の中心 − 8）から 6.5 → 線の中心から 14.5 */
  transform: translateY(-50%);
  opacity: 0;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
@media (hover: hover) {
  .sectionNav-dot:not(.is-current) .sectionNav-dotLink:hover::after {
    opacity: 0.85;
    transform: translateY(-50%) translateX(-4px);
  }
}
.sectionNav-dot:not(.is-current) .sectionNav-dotLink:focus-visible::after {
  opacity: 0.85;
}
.sectionNav-label {
  top: 0;
  left: auto;
  will-change: transform;
}

/* ガラスのカプセル（Figma の Rectangle 15：横長 35×17、Liquid Glass）。JS が黒い丸の高さに動かす。
   左端は線の中心から 8.5px 左（黒い丸が左端の丸みの中心）。右は画面の外へはみ出す（固定の要素なので横スクロールは出ない）。
   ゆがみ（屈折）は Chromium のマウスのある端末だけ（common/js/setting.js の liquidGlassSet） */
.sectionNav-lens {
  position: absolute;
  left: 50%;
  top: 0;
  width: 35px;
  height: 17px;
  margin-left: -8.5px;
  border-radius: 8.5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
  -webkit-backdrop-filter: blur(2px) saturate(140%);
  backdrop-filter: blur(2px) saturate(140%);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.7),
    inset 0 1px 2px rgba(255, 255, 255, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  will-change: transform;
}

/* 液体の層（index/js/common.js の 7 番 navLiquidCreate が .sectionNav の中に追加し、.sectionNav に is-liquid を付ける）
   今の丸の黒はこの層が描き、次の丸へ伸びてくっつき、ちぎれて移る（docs/specs/2026-10-08-nav-pager-liquid-design.md の 4 章）。
   goo は小さい丸用の #dotGoo（common/inc/svgset.php）。フィルターで少し小さく見えるので、頭・しっぽは半径 3.78 で描く（見た目 7px） */
.sectionNav-liquid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: url(#dotGoo);
}
.sectionNav-liquid > span {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--navInk);
  will-change: transform;
}
.sectionNav-liquidHead,
.sectionNav-liquidTail {
  width: 7.56px;
  height: 7.56px;
  border-radius: 50%;
}
/* 首：1px 角を JS が scale(太さ, 長さ) で伸ばす（左上を基準） */
.sectionNav-liquidNeck {
  width: 1px;
  height: 1px;
  transform-origin: 0 0;
}

/* ==================================================
モバイル（768px 以下）：各欄の中身を横に流す（Figma：SP_TOP 338:4）
・.sp-sideScroll を付けた要素を1本の横トラックとし、縦スワイプを横の動きに変える（index/js/common.js の 8 番と対）。
  NEWS と同じ動きを全欄に使う。MESSAGE・CAFE・COMPANY・RECRUIT は .spTrack、ALLIANCE も .spTrack（テキストカード・事例カード・
  View More を1本に）、BEAUTY は .tpBeauty、BRAND は .tpBrands が列。.spTrack は 769px〜 では display: contents（無いのと同じ）
・大きさは SP_TOP（640 幅）の px に --sd（画面幅 / 640）を掛ける。文字の大きさは従来どおり --rd（375 基準）
  カード大 581（CREATOR・BRAND・BEAUTY の画像カード・テキストカード。Figma の Group 32）、
  カード小 379（NEWS・LOG・ALLIANCE の事例。Group 33）、View More の丸 101（Group 122）、間隔 32、左の余白 17
・View More は列の最後の丸（.spMoreBtn）。PC・TAB の View More（.linkBlk）は隠す
・2026-10-19 ユーザー指定
  ・欄の横のはみ出しは overflow-x: clip で切る（以前の hidden は縦も切る箱になり、横に流し終わって固定が外れたとき
    MESSAGE のカードの下が欄の下端で切れていた）
  ・NEWS・LOG・ALLIANCE の小カードも大カード（581）の大きさに。View More の丸は2倍（202）、手前のカードとの間は 96
  ・列は View More の丸が左の余白 17 の位置に来るまで流れてから上へ抜ける（index/js/common.js の 8 番）
  ・列の中の要素は天地中央でそろえず、1つずつランダムに上下にずらす（index/js/common.js の 8 番が要素の translate に入れる）
※ 欄ごとの指定（.tpCards・.beautyArea .tpLogoCards など）と同じ詳細度のものは後勝ちで上書きしているので、
  このブロックはファイル末尾に置くこと
================================================== */
@media screen and (min-width: 769px) {
  .spTrack {
    display: contents;
  }
  .spMoreBtn {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .idxBlk {
    --sd: calc(100vw / 640);
  }
  .messageArea,
  .newsArea,
  .logArea,
  .creatorArea,
  .allianceArea,
  .beautyArea,
  .brandArea,
  .cafeArea,
  .companyArea,
  .recruitArea {
    overflow-x: hidden; /* clip に対応していない端末用 */
    overflow-x: clip; /* 縦は切らない（hidden だと縦も切る箱になる） */
  }

  /* JSが差し込むピン用ラッパー（.cntsWrap の z-index:10 と同じ重なり順を保つ）
     flow-root：トラックの margin-top がラッパーの外へ相殺（マージンの相殺）されるのを防ぐ。
     相殺されたままだと、ピン留めで position:fixed になった瞬間に相殺が解けて
     margin分ブロックが下にずれ、横スクロール開始時に「ガクッ」と動いて見える */
  .js-hScrollPin {
    position: relative;
    z-index: 10;
    display: flow-root;
  }

  /* トラック */
  .idxBlk .sp-sideScroll {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: calc(32 * var(--sd));
    width: 100%;
    margin: 0;
    padding: 0 0 0 calc(17 * var(--sd));
    box-sizing: border-box;
  }
  /* 列の右端の余白。padding-right だと flex コンテナのスクロール幅に含まれない場合があるため疑似要素で確保する。
     手前の間隔（gap 32）を負のマージンで打ち消して、最後の要素の右を 17 にする */
  .idxBlk .sp-sideScroll::after {
    content: "";
    flex: none;
    width: calc(17 * var(--sd));
    height: 1px;
    margin-left: calc(-32 * var(--sd));
  }
  /* 小カードで終わる列：丸の右に 640 − 17 − 379 − 32 − 101 ＝ 111（間隔 32 ＋ 79） */
  .idxBlk .sp-sideScroll.is-endS::after {
    width: calc(79 * var(--sd));
    margin-left: 0;
  }
  /* 列の中を囲んでいるだけの要素は外して、中のカードを列に並べる */
  .allianceArea .tpTxtCards,
  .allianceArea .tpCards,
  .beautyArea .tpLogoCards {
    display: contents;
  }

  /* 列に並ぶ要素：カード大・テキストカード 581。NEWS・LOG・ALLIANCE の小カードも 581（2026-10-19 ユーザー指定。以前は Figma のカード小 379）
     天地中央でそろえず、1つずつ上下にずらす（index/js/common.js の 8 番が要素の translate に入れる） */
  .idxBlk .sp-sideScroll .tpCardSet,
  .idxBlk .sp-sideScroll .txtBlk {
    flex: none;
    width: calc(581 * var(--sd));
    margin: 0;
  }

  /* 小カード（NEWS・LOG・ALLIANCE の事例）も大カード（Group 32）と同じ枠：画像 488×342（上 53・左 47）、文字は画像の下 24 */
  .idxBlk .tpCards .tpCard {
    min-height: calc(526.89 * var(--sd));
    padding: calc(52.69 * var(--sd)) calc(45.57 * var(--sd)) calc(24.18 * var(--sd)) calc(46.99 * var(--sd));
    border-radius: calc(16 * var(--sd));
  }
  .idxBlk .tpCards .tpCard .imgObj {
    aspect-ratio: 488.44 / 341.76;
  }
  .idxBlk .tpCards .tpCard .ttl {
    margin-top: calc(24.24 * var(--sd));
  }

  /* カード大（Group 32）：581×527、画像 488×342（上 53・左 47）、文字は画像の下 24。BRAND も同じ枠 */
  .idxBlk .tpCard.is-l {
    min-height: calc(526.89 * var(--sd));
    padding: calc(52.69 * var(--sd)) calc(45.57 * var(--sd)) calc(24.18 * var(--sd)) calc(46.99 * var(--sd));
    border-radius: calc(16 * var(--sd));
  }
  .idxBlk .tpCard.is-l .imgObj,
  .idxBlk .tpCard.is-brand .imgObj {
    aspect-ratio: 488.44 / 341.76;
  }
  .idxBlk .tpCard.is-l .role,
  .idxBlk .tpCard.is-brand .name {
    margin-top: calc(24.24 * var(--sd));
  }

  /* BEAUTY の画像カード：SP の Figma が無いので、PC（408×334、画像 335×250）をカード大の幅 581 に拡大した内側の余白 */
  .idxBlk .tpLogoCard {
    padding: calc(62.66 * var(--sd)) calc(51.27 * var(--sd)) calc(56.96 * var(--sd)) calc(52.69 * var(--sd));
  }
  .idxBlk .tpLogoCard .js-glassEf {
    border-radius: calc(16 * var(--sd));
  }

  /* View More の丸：Figma（Group 122）の 101×101 の2倍（2026-10-19 ユーザー指定）、白 30%。中の文字・› も2倍
     （Figma は「View More」12px（上 35）、› 10.5×18.4（左 46・上 59））。手前のカードとの間は 96（間隔 32 ＋ 64） */
  .idxBlk .linkBlk {
    display: none;
  }
  .spMoreBtn {
    position: relative;
    display: block;
    flex: none;
    width: calc(202 * var(--sd));
    height: calc(202 * var(--sd));
    margin-left: calc(64 * var(--sd));
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
  }
  /* base.css の a:link（下線・文字色）より優先させる */
  .idxBlk a.spMoreBtn,
  .idxBlk a.spMoreBtn:hover {
    color: #000;
    text-decoration: none;
    opacity: 1;
  }
  .spMoreBtn .txt {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(81 * var(--sd));
    transform: translateY(-50%);
    font-size: max(14px, calc(24 * var(--sd)));
    line-height: 1;
    letter-spacing: -0.03em;
    font-feature-settings: normal;
    text-align: center;
    white-space: nowrap;
  }
  .spMoreBtn img {
    position: absolute;
    left: calc(92 * var(--sd));
    top: calc(118 * var(--sd));
    width: calc(21.0824 * var(--sd));
    height: auto;
  }
}
/* 「視差効果を減らす」設定では横の動き（index/js/common.js の 8 番）を作らないので、列を指で横にスクロールできるようにする */
@media screen and (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .idxBlk .sp-sideScroll {
    overflow-x: auto;
  }
}

/*btn*/

.idxBlk .btnBlk {
  width: 74%;
  margin: 10% 5.5% 0 auto;
  display: flex;
  justify-content: center;
}
.idxBlk .btnBlk .mainBtn {
}

@media screen and (min-width: 769px) {
  .idxBlk .mainBtn {
  }
}

/* ==================================================
モバイル：パフォーマンス対策
実機（iPhone等）でのスクロールカクつき対策。
主因は「画面全体サイズの backdrop-filter レイヤーが常時8枚（セクション毎）DOMに
存在し続けている」こと。backdrop-filterはモバイルSafariで特に負荷が高く、
opacity:0で非表示中でも合成コストがかかるため、768px以下では無効化し、
代わりに背景色そのものの不透明度を上げて可読性を保つ。
================================================== */
@media screen and (max-width: 768px) {
  .js-bgFxd .bgObj::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* 切り替え時のブラーパルス（::after）も同じ理由で止める。
     blur(0px) でも backdrop-filter レイヤーは生成され続けるため none にする */
  .cntsArea .bgObj::after,
  .cntsArea .bgObj.is-switching::after {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
  }
  /* 非アクティブの背景（opacity:0）を visibility:hidden にして描画対象から外す。
     フェードアウトが終わってから hidden にするため visibility の切り替えだけ遅らせる。
     レイヤー化（will-change/translateZ）は残す：レイヤーでないとiOSは見えている範囲しか
     描画せず、上スワイプでアドレスバーが出た瞬間に画面下部が描画されないまま
     後ろ（.mainArea の動画）が透けて見えるため。hidden 中の背景は描画されないので負荷は表示中の1〜2枚分のみ */
  .js-bgFxd .bgObj {
    visibility: hidden;
    transition:
      opacity 0.5s ease,
      visibility 0s linear 0.5s;
    will-change: opacity;
    transform: translateZ(0);
  }
  .js-bgFxd .bgObj.is-active {
    visibility: visible;
    transition:
      opacity 0.5s ease,
      visibility 0s linear 0s;
  }
  /* 画像はtransformを動かしていないので常時レイヤー化しない */
  .js-bgFxd .bgObj picture img {
    will-change: auto;
  }
}

/* セクション背景（.js-bgFxd .bgObj）が表示中の間は、奥のTOP動画を隠す
   （index/js/common.js が is-covered を付け外しし、動画も一時停止する）。
   背景の隙間から動画が透けないようにし、見えない動画のデコード負荷も止める。
   隠す時は手前の背景のフェードイン（0.5s）が終わってから、戻す時は即座に切り替える */
.mainArea .bgObj {
  transition: visibility 0s linear 0s;
}
.mainArea .bgObj.is-covered {
  visibility: hidden;
  transition: visibility 0s linear 0.6s;
}