@charset "UTF-8";
.cntsArea .articleTtlBlk {
  /* height: 100vh; */
  --logoW: min(15vw, 300px);
  width: 40%;
  position: fixed;
  top: 50vh;
  margin: 0 0 0 5%;
  /* ヘッダー（1020）と同じくコンテンツ（〜15）の上に重ねる。ヘッダー・メニュー・セクションナビ（1010）よりは下 */
  z-index: 100;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  /* translate はフッター手前でのずらし（setting.js の ttlBlkFollowSet）に使うので、アニメーションさせない */
  transition: opacity 1s ease;
  opacity: 1;
}
.cntsArea .articleTtlBlk.is-fixed {
  opacity: 1;
  transition: opacity 1s ease;
}
.cntsArea .articleTtlBlk .logo {
  width: var(--logoW);
}
.cntsArea .articleTtlBlk .logo svg {
  fill: var(--ttl-color);
  transition: fill 0.35s ease;
}
.cntsArea .articleTtlBlk .ttlSet {
  margin: -1.5em 0 0 0.5em;
}
.cntsArea .articleTtlBlk .ttlSet::before {
  content: "(";
}
.cntsArea .articleTtlBlk .ttlSet::after {
  content: ")";
}

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

@media screen and (min-width: 961px) {
  /* PC：COOGEE ロゴの天地中央を画面の天地中央に合わせる（ロゴの高さ ＝ 幅 × viewBox の縦横比 31.3/200） */
  .cntsArea .articleTtlBlk {
    top: calc(50vh - var(--logoW) * 31.3 / 200 / 2);
  }
}

/*================
liquid glass
================*/
.js-glassEf {
  position: absolute;
  inset: 0;
  border-radius: 42px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 55%);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow:
    0 6px 15px rgba(0, 0, 0, 0.1),
    inset 0 1px 3px rgba(255, 255, 255, 0.25);
  transform-origin: center center;
  will-change: transform;
  overflow: hidden;
}
.js-glassEf::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.25));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  /* -webkit-mask-composite: xor; */
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
}
.js-glassEf::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(250, 250, 250, 0.05), rgba(250, 250, 250, 0.35) 90%);
  pointer-events: none;
  opacity: 0;
}

.glassContent {
  position: relative;
  z-index: 2;
  /* padding: 60px; */
}

/* ==================================================
ガラスのゆがみ：Safari でも出せる作り方（試作。2026-10-19。common/js/setting.js の liquidGlassSceneSet）
・対象のガラス（NEWS 一覧の .glassCard、TOP の .tpCard・.js-glassEf）に is-lgScene が付き、一番奥に .lgBack が入る。
  .lgBack の中に、今ガラスの後ろにある背景の写し（.lgScene。写真は複製、TOP の MV の動画は canvas）を、画面の背景と重なる位置に敷く
・ゆがみ・ぼかしは .lgBack の filter（JS が url(#…) と、ガラスのもともとの backdrop-filter の値を入れる）
・ガラスの地の色（白の透け。hover の変化も）は .lgBack が受け継ぎ、.lgBack::after で写しの上に重ねる
・ガラス自体の backdrop-filter は使わない（写しで覆うので不要。二重にぼかさない）
================================================== */
.is-lgScene {
  isolation: isolate; /* .lgBack（z-index: -1）をガラスの地より手前・中身より奥に置く */
  -webkit-backdrop-filter: none !important; /* 各ページのガラスの指定（.tpCard・.js-glassEf など）より優先 */
  backdrop-filter: none !important;
}
.lgBack {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  background: inherit;
  pointer-events: none;
}
.lgBack::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: inherit;
}
/* 写し：背景と同じ大きさ（JS が指定）。JS が毎コマ、ガラスの画面上の位置・倍率の分だけ逆にずらす。画面に入っていないガラスでは描かない */
.lgBack > .lgScene {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  overflow: hidden;
  transform-origin: 0 0;
  visibility: hidden;
  will-change: transform;
}
/* 動画の写し（canvas）はガラスと同じ大きさで、JS が毎コマ後ろの部分を描く */
.lgBack > canvas.lgScene {
  width: 100%;
  height: 100%;
  will-change: auto;
}
.lgBack.is-on > .lgScene {
  visibility: visible;
}

/*================
liquid goo（ヘッダーのハンバーガー⇄メニューパネル接続）
JS（common/js/setting.js の menuLiquidSync）でボタン/パネルの実際の位置・サイズを
.menuLiquid-btn / .menuLiquid-panel に同期する。レイヤーは2枚：
  --base：ボタンの丸背景だけ。フィルターなしで常時表示（閉じている時の見た目）。
  --goo ：ボタン＋パネルに goo フィルターをかけて1枚の液体にしたもの。メニュー表示中だけ出す。
--goo は中身を動かさず、レイヤー自体の transform/opacity だけで開閉する。
（中身のopacity等をアニメーションさせると、重いSVGフィルターが毎フレーム再計算されて
  カクつき、さらにgooのしきい値処理で「ある瞬間に急に現れる」見え方になるため）
アイコンの線や文字は別レイヤー（実要素側）にあるため、ぼやけない。
================*/
/*
  backdrop-filter は filter: url() がかかった祖先の中では正しく描画されない
  （中の要素が透明・消失して見えるブラウザ制限がある）ため、ここでは使わない。
  その代わり、不透明寄りのグラデーション＋ハイライト＋影だけで「液体ガラス」の質感を作る。
*/
.menuLiquidLayer {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
/* 閉じている時のボタン背景。開いている間は --goo 側のボタンに入れ替える */
.menuLiquidLayer--base {
  transition: opacity 0.3s ease;
}
.js-spMenuOn .menuLiquidLayer--base {
  opacity: 0;
}
/* 位置・サイズ・transform-origin（ボタンの中心）はJSが設定する。
   閉じている間は visibility:hidden で描画対象から外し、SVGフィルターのコストをかけない */
.menuLiquidLayer--goo {
  inset: auto;
  filter: url(#hdrGoo) opacity(0.75) brightness(2) drop-shadow(1px 1px 2px rgba(20, 10, 5, 0.6));
  opacity: 0;
  visibility: hidden;
  transform: scale(0.35);
  will-change: transform, opacity;
  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.55, 0, 0.8, 0.4),
    visibility 0s linear 0.4s;
}
.js-spMenuOn .menuLiquidLayer--goo {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.25s ease,
    transform 0.6s cubic-bezier(0.22, 1.2, 0.36, 1),
    visibility 0s linear 0s;
}
/* goo の中では外側の影はしきい値で消えて見えず、形を下に膨らませるだけなので外す
   （影はフィルターの drop-shadow で付ける）。内側の影は色味なので残す */
.menuLiquidLayer--goo .menuLiquid-btn,
.menuLiquidLayer--goo .menuLiquid-panel {
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.8),
    inset 0 -6px 10px rgba(31, 30, 26, 0.06);
}
.menuLiquid-btn,
.menuLiquid-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background: radial-gradient(120% 140% at 22% 18%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(165deg, #fbfaf6 0%, #e2ded0 100%);
  box-shadow:
    0 10px 24px rgba(31, 30, 26, 0.28),
    0 1px 0 rgba(31, 30, 26, 0.12),
    inset 0 1px 2px rgba(255, 255, 255, 0.8),
    inset 0 -6px 10px rgba(31, 30, 26, 0.06);
}
.menuLiquid-btn {
  border-radius: 50%;
  /* background: red; */
}
.menuLiquid-panel {
  border-radius: 16px; /* Figma のパネルの角丸。goo のぼかしで実際は少し丸くなる */
}

/*================
liquid more（View More ＋ ボタン。Figma の button 3795:302）
hover で角丸「View More」が中心から 1.25 倍になり、丸が左に寄って角丸の右端にくっつき、くっついたまま右へ倍の大きさにふくらむ。
継ぎ目は goo フィルター（#btnGoo：common/inc/svgset.php）で液体のようにつながる。丸の中の ＋ は › に変わる。
・寸法は Figma の px × --u（各ページで --rd などを入れる。既定 1px）。文字の最小は --liquidMoreFsMin
・中身の HTML は common/inc/setting.php の $liquidMoreInner
・レイヤーは下から ::before / ::after（背景ぼかしだけ）→ .liquidMore-goo（白の液体）→ .liquidMore-txt / -icon（文字と線）
  goo をかけた要素の中では backdrop-filter が効かず、文字側にかけると goo の白までぼけるので、ぼかしは goo の下に置く
・hover の状態は --lmOn（0 / 1）だけで切り替え、各レイヤーの transform はこの値から計算する。
  動きは transform だけ（ボタンの大きさ 110×23 は変えないので周りのレイアウトはずれない）
================*/
.liquidMore {
  --u: 1px;
  --lmOn: 0;
  --lmIn: 0.5s cubic-bezier(0.22, 1.2, 0.36, 1); /* 入るとき：メニューを開くときと同じ、少し行き過ぎて戻る */
  --lmOut: 0.35s ease;
  --lmT: var(--lmOut);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--u));
  height: calc(23 * var(--u));
  font-size: max(var(--liquidMoreFsMin, 8px), calc(8 * var(--u)));
  line-height: 1;
}
/* base.css の a:link { underline } より優先させる */
.liquidMore,
.liquidMore:link,
.liquidMore:visited {
  color: #000;
  text-decoration: none;
}
/* base_pc.css の a:hover { opacity: .5 } を打ち消す（リンクが半透明になると、中の背景ぼかしが外の背景を拾えなくなるため） */
.liquidMore:hover {
  opacity: 1;
}
@media (hover: hover) {
  .liquidMore:hover {
    --lmOn: 1;
    --lmT: var(--lmIn);
  }
}
.liquidMore:focus-visible {
  --lmOn: 1;
  --lmT: var(--lmIn);
}
@media (prefers-reduced-motion: reduce) {
  .liquidMore {
    --lmIn: 0s;
    --lmOut: 0s;
  }
}

/* 角丸の形（::before・-gooTxt・-txt）：中心から 80×23 → 100×29 */
.liquidMore::before,
.liquidMore-gooTxt,
.liquidMore-txt {
  width: calc(80 * var(--u));
  height: calc(23 * var(--u));
  border-radius: calc(8 * var(--u));
  transform: scale(calc(1 + 0.25 * var(--lmOn)));
  transition: transform var(--lmT);
}
/* 丸の形（::after・-gooIcon・-icon）：角丸の右端（中心から 40 → 50）に合わせて右へ 3 寄せ、
   左端を角丸にくっつけたまま倍（23 → 46）に。右へふくらむので丸の中心は右へ動く。中の › も一緒に倍になる
   （Figma の hover は丸 23 のままだが、ユーザー指定で倍にした） */
.liquidMore::after,
.liquidMore-gooIcon,
.liquidMore-icon {
  width: calc(23 * var(--u));
  height: calc(23 * var(--u));
  border-radius: 50%;
  transform-origin: 0 50%;
  transform: translateX(calc(3 * var(--u) * var(--lmOn))) scale(calc(1 + var(--lmOn)));
  transition: transform var(--lmT);
}

/* 背景ぼかし */
.liquidMore::before,
.liquidMore::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.liquidMore::before {
  left: 0;
}
.liquidMore::after {
  left: calc(87 * var(--u));
}

/* 白の液体。ぼかし（3σ ≒ 9px）と hover で広がる分（角丸は左へ 10、丸は右へ 26・上下へ 11.5。行き過ぎる動きの分も）が
   切れないよう、ボタンより左 24・右 46・上下 28 大きくする */
.liquidMore-goo {
  position: absolute;
  z-index: 1;
  top: calc(-28 * var(--u));
  left: calc(-24 * var(--u));
  width: calc((24 + 110 + 46) * var(--u));
  height: calc((28 + 23 + 28) * var(--u));
  filter: url(#btnGoo);
  opacity: 0.3;
  pointer-events: none;
}
.liquidMore-gooTxt,
.liquidMore-gooIcon {
  position: absolute;
  top: calc(28 * var(--u));
  background: #fff;
}
.liquidMore-gooTxt {
  left: calc(24 * var(--u));
}
.liquidMore-gooIcon {
  left: calc((24 + 87) * var(--u));
}

/* 文字と線 */
.liquidMore-txt,
.liquidMore-icon {
  position: relative;
  z-index: 2;
}
.liquidMore-txt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 calc(3 * var(--u)); /* Figma の文字枠（77）は角丸の左端から 3 内側で中央揃え */
  letter-spacing: -0.03em;
}
/* hover では角丸の中央へ（左の 3 の余白の半分だけ戻す） */
.liquidMore-txt > span {
  transform: translateX(calc(-1.5 * var(--u) * var(--lmOn)));
  transition: transform var(--lmT);
}
/* ＋ の2本の線（7、線 1px）→ › の2本（約 5.3、線 0.5px、上下に 1.75 ずつ離して ±41°）。
   どちらも時計回りに約 45° 回る（縦の線は 90° → 139° ＝ -41° と同じ向き）。
   hover では丸ごと倍になるので、見た目の › は約 10.6・線 1px */
.liquidMore-icon span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(7 * var(--u));
  height: 1px;
  margin: -0.5px 0 0 calc(-3.5 * var(--u));
  background: currentColor;
  transition: transform var(--lmT);
}
.liquidMore-icon span:nth-child(1) {
  transform: translate(calc(-0.1 * var(--u) * var(--lmOn)), calc(-1.75 * var(--u) * var(--lmOn))) rotate(calc(41deg * var(--lmOn))) scale(calc(1 - 0.24 * var(--lmOn)), calc(1 - 0.5 * var(--lmOn)));
}
.liquidMore-icon span:nth-child(2) {
  transform: translate(calc(-0.1 * var(--u) * var(--lmOn)), calc(1.75 * var(--u) * var(--lmOn))) rotate(calc(90deg + 49deg * var(--lmOn))) scale(calc(1 - 0.24 * var(--lmOn)), calc(1 - 0.5 * var(--lmOn)));
}

/*hover*/
.js-hoverGlass {
  position: relative;
}
.js-hoverGlass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 42px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 55%);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow:
    0 6px 15px rgba(0, 0, 0, 0.1),
    inset 0 1px 3px rgba(255, 255, 255, 0.25);
  transform-origin: center center;
  will-change: transform;
  overflow: hidden;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  transform: scale(1);
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  animation-fill-mode: forwards;
}
.js-hoverGlass:hover::before {
  opacity: 1;
  transform: scale(1);
}

@keyframes hoverGlassIn {
  0% {
    transform: scale(0.95, 0.95);
    opacity: 0;
  } /* スタート */
  100% {
    transform: scale(1.22, 1.22);
  }
}

@keyframes hoverGlassOut {
  0% {
    transform: scale(1.13);
    opacity: 1;
  } /* スタート */
  100% {
    transform: scale(1);
    opacity: 0;
  } /* 元のサイズに着地 */
}

.js-hoverGlass.is-hoverIn::before {
  animation: hoverGlassIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.js-hoverGlass.is-hoverOut::before {
  animation: hoverGlassOut 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ==================================================
モバイル：パフォーマンス対策
.js-glassEf / .js-hoverGlass は1ページに数十個存在し、それぞれが
backdrop-filter（iOS Safariでは -webkit-backdrop-filter: blur(26px) が採用され
とりわけ重い）と will-change: transform を常時抱えている。
モバイルでは backdrop-filter を止め、背景そのものの不透明度を上げて
可読性を保つ。will-changeも常時は付けず、実際にアニメーションしている
瞬間（is-hoverIn/is-hoverOut）だけ付与する。
================================================== */
@media screen and (max-width: 768px) {
  .js-glassEf,
  .js-hoverGlass::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.22) 55%);
    will-change: auto;
  }
  .js-hoverGlass.is-hoverIn::before,
  .js-hoverGlass.is-hoverOut::before {
    will-change: transform, opacity;
  }
}

/* ==================================================
スライドイン（下層の各ブロックが一拍おいて下からふわっと入る。common/js/setting.js の dtRevealSet。2026-10-13 ユーザー指定）
・JS が対象に .dtReveal を付けて隠し、ページが表示されて一拍（0.5 秒）おいたあとと、スクロールで画面に入ったときに .is-in を付ける。
  入り終わったら両方のクラスを外す（対象のもともとの transition に戻すため）
・transform ではなく translate で動かす（パララックスの GSAP の y とぶつからない）
・LOG の記事ページは detail.css を読み込まないので、全ページ共通のこのファイルに置く（--d が無いページは 1px 扱い）
・「視差効果を減らす」設定では何もしない（JS が対象に付けない）
・対象のもともとの transition（.dtThumbCard の背景色など）より優先させるため body から書く
================================================== */
body .dtReveal {
  opacity: 0;
  translate: 0 calc(48 * var(--d, 1px));
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--revealDelay, 0s),
    translate 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--revealDelay, 0s);
}
body .dtReveal.is-in {
  opacity: 1;
  translate: 0 0;
}