@charset "UTF-8";
/* ////////////////////////////////////////////////////////////////////
///// 詳細ページ共通（ALLIANCE / BEAUTY / NEWS / CREATORS / BRAND / CAFE / COMPANY など）
///// 単位 --d：Figma の px 値に掛けて使う
/////   PC（961px〜）… 1280px 基準の 1px（画面幅に合わせて伸縮）
/////   SP（〜960px）… 375px 基準の 1px（最大 1.4px）
/////   例）Figma で 12px → calc(12 * var(--d))
//////////////////////////////////////////////////////////////////// */
:root {
  --d: min(calc(100vw / 375), 1.4px);
  --dtTxt: #262222;
  --dtGray: #d9d9d9;
  --dtJp: "Noto Sans JP", sans-serif;
  --dtEn: "Aspekta Variable", "Noto Sans JP", sans-serif;
  /* 最後のコンテンツの下端からフッターまで（SP・TAB は従来どおり 120。PC は 20vw：2026-10-13 ユーザー指定） */
  --dtFtrGap: calc(120 * var(--d));
}
@media screen and (min-width: 961px) {
  :root {
    --d: calc(100vw / 1280);
    --dtFtrGap: 20vw;
  }
}

#cntsSct {
  padding-top: 0;
}
.dtArticle {
  position: relative;
  color: var(--dtTxt);
  font-family: var(--dtEn);
  letter-spacing: 0;
  text-align: left;
}
.dtArticle .jpFont {
  font-family: var(--dtJp);
}

/* ==================================================
背景（固定・ページ全体）：ぼかした写真＋グレーのオーバーレイ
・写真の見え方は各ページの CSS で --bgL / --bgT / --bgW / --bgH を指定
================================================== */
.bgObj {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100lvh;
  z-index: -1;
  overflow: hidden;
}
.bgObj::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(217, 217, 217, 0.55);
  z-index: 1;
}
.bgObj picture {
  position: absolute;
  inset: -28px; /* ぼかしで端が透けないよう、ぼかし幅の2倍だけ外に広げる */
  filter: blur(14px); /* Figma の GLASS エフェクトは 29。2026-10-13 ユーザー指定で約半分に弱めた */
}
.bgObj img {
  position: absolute;
  left: var(--bgL, 0);
  top: var(--bgT, 0);
  width: var(--bgW, 100%);
  height: var(--bgH, 100%);
  max-width: none;
  object-fit: cover;
}

/* ==================================================
左のロゴ「COOGEE (ページ名)」
・PC：他ページと同じく画面に固定（COOGEE ロゴの天地中央を画面の天地中央に合わせる）
・SP・TAB：ヒーローの上の位置（上から 64）のまま画面に固定
・どちらもフッターが見えたら一緒に上へ流れる（common/js/setting.js の ttlBlkFollowSet）
================================================== */
.cntsArea.dtArticle .articleTtlBlk {
  position: fixed;
  top: calc(64 * var(--d));
  left: calc(16 * var(--d));
  width: auto;
  margin: 0;
  align-items: flex-start;
}
.cntsArea.dtArticle .articleTtlBlk .logo {
  width: calc(120 * var(--d));
  margin-top: calc(14 * var(--d));
  line-height: 0;
}
.cntsArea.dtArticle .articleTtlBlk .logo svg {
  display: block;
  width: 100%;
  height: auto;
}
.cntsArea.dtArticle .articleTtlBlk .ttlSet {
  margin: 0;
  font-size: calc(10 * var(--d));
  line-height: 1.3;
  color: #231815;
}
@media screen and (min-width: 961px) {
  .cntsArea.dtArticle .articleTtlBlk {
    /* ロゴの上の余白 25 ＋ ロゴの高さの半分（幅 134.4 × viewBox の縦横比 31.3/200 ÷ 2）だけ上げる */
    top: calc(50vh - (25 + 134.4 * 31.3 / 200 / 2) * var(--d));
    left: calc(32 * var(--d));
  }
  .cntsArea.dtArticle .articleTtlBlk .logo {
    width: calc(134.4 * var(--d));
    margin-top: calc(25 * var(--d));
  }
  .cntsArea.dtArticle .articleTtlBlk .ttlSet {
    font-size: calc(12 * var(--d));
  }
}

/* ==================================================
画像の切り抜き：Figma のマスク範囲に合わせて img をずらして表示する
================================================== */
.cropObj {
  position: relative;
  overflow: hidden;
}
.cropObj > img {
  position: absolute;
  left: var(--imgL, 0);
  top: var(--imgT, 0);
  width: var(--imgW, 100%);
  height: var(--imgH, 100%);
  max-width: none;
  object-fit: cover;
}

/* ==================================================
ヒーロー（1画面目）
・PC の位置・大きさは --heroTop / --heroLeft / --heroW / --heroAr（各ページの CSS）
================================================== */
.dtHeroArea {
  padding: calc(110 * var(--d)) calc(16 * var(--d)) calc(56 * var(--d));
}
.dtHeroImg {
  aspect-ratio: var(--heroAr, 960 / 624);
}
@media screen and (min-width: 961px) {
  .dtHeroArea {
    height: calc(832 * var(--d));
    padding: calc(var(--heroTop, 126) * var(--d)) 0 0 calc(var(--heroLeft, 288) * var(--d));
  }
  .dtHeroImg {
    width: calc(var(--heroW, 960) * var(--d));
  }
}

/* ==================================================
ヒーローの写真スライダー（CAFE / COMPANY）
・写真を横に並べ、次の写真が画面の右端にのぞく。写真ごとの縦横比は style="--ar: 740 / 481"
・各ページの CSS で指定：--heroLeft（PC の左位置）/ --heroH（PC の写真の高さ）/ --heroGap（写真の間隔）
  / --ar1（1枚目の縦横比。ページ送りを1枚目の中央に置くのに使う）/ --pagerTop（写真とページ送りの間）
・ページ送りは下の「ページ送り」の .dtPager ＋ .dtHeroPager
================================================== */
.dtHeroSliderArea {
  --heroSpH: 200; /* SP の写真の高さ（375px 基準） */
  padding: calc(110 * var(--d)) 0 0 calc(16 * var(--d));
}
.dtHeroSlider .swiper-slide {
  width: auto;
  padding-right: calc(var(--heroGap, 16) * var(--d));
}
.dtHeroSlider .imgObj {
  height: calc(var(--heroSpH) * var(--d));
  aspect-ratio: var(--ar, 740 / 481);
  overflow: hidden;
}
.dtHeroSlider .imgObj img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dtHeroPager {
  width: calc(var(--heroSpH) * var(--d) * var(--ar1, 740 / 481));
  margin-top: calc(var(--pagerTop, 16) * var(--d));
}
.dtHeroSliderArea {
  position: relative; /* 液体のページ送りの層の位置の基準 */
}
@media screen and (min-width: 961px) {
  .dtHeroSliderArea {
    padding: calc(126 * var(--d)) 0 0 calc(var(--heroLeft, 288) * var(--d));
  }
  .dtHeroSlider .imgObj {
    height: calc(var(--heroH, 481) * var(--d));
  }
  .dtHeroPager {
    width: calc(var(--heroH, 481) * var(--d) * var(--ar1, 740 / 481));
  }
}

/* ==================================================
ページ送り（ヒーローの写真スライダー .dtHeroPager・事例カードのスライダー .dtCardPager で共通）
・見た目（Figma の Group 52）：黒い丸 6px、今の位置だけ灰色の横長 73.5px、間隔 4.5px
・液体の動き（.js-liquidPager。common/js/setting.js の liquidPagerSet が is-liquid と .dtPagerLiquid を追加）：
  Swiper の丸はクリック用に残して透明にし、すぐ後ろに重ねた液体の層が同じ形を描く。
  切り替わると TOP の右ナビと同じく、今のバーの先が行き先へ伸びてくっつき、元の側がちぎれて移り、着くと少しふくらんで戻る
  （2026-10-13 ユーザー指定：形は CAFE、動きは TOP。docs/specs/2026-10-08-nav-pager-liquid-design.md の 8 章）。
  丸の並びが変わった直後の位置を測るので、幅のアニメーションは外す。goo は小さい丸用の #dotGoo
================================================== */
.dtPager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(4.5 * var(--d));
}
.dtPager .swiper-pagination-bullet {
  display: block;
  width: calc(6 * var(--d));
  height: calc(6 * var(--d));
  border-radius: calc(3 * var(--d));
  background: #231815;
  opacity: 1;
  transition: width 0.4s ease, background-color 0.4s ease;
}
.dtPager .swiper-pagination-bullet-active {
  width: calc(73.5 * var(--d));
  background: var(--dtGray);
}
.dtPager.is-liquid .swiper-pagination-bullet {
  opacity: 0;
  transition: none;
}
.dtPagerLiquid {
  position: absolute;
  pointer-events: none;
  filter: url(#dotGoo);
}
.dtPagerLiquid > span {
  position: absolute;
  left: 0;
  top: 0;
}

/* ==================================================
情報欄の見出し（Menu / Overview / Access など）
================================================== */
.dtInfoTtlObj {
  font-size: calc(20 * var(--d));
  font-weight: 640;
  line-height: 1.7;
}

/* ==================================================
2画面目以降：コンテンツ幅
・背景は塗らず、NEWS ページと同じく固定背景（.bgObj）をページ全体で見せる
・PC：左 284px から 964px 幅（.dtInner）。スライダーは画面右端まで抜ける
================================================== */
.dtBodyArea {
  display: flow-root; /* 先頭要素の負のマージンが親の外にはみ出さないように */
  position: relative;
  z-index: 1;
  padding: 0 calc(16 * var(--d)) var(--dtFtrGap);
}
@media screen and (min-width: 961px) {
  .dtBodyArea {
    padding: 0 0 var(--dtFtrGap) calc(284 * var(--d));
  }
  .dtInner {
    width: calc(964 * var(--d));
  }
}

/* ==================================================
リード（2カラム）
・ページごとの細かい位置合わせは各ページの CSS
================================================== */
.dtLeadArea {
  padding-top: calc(48 * var(--d));
}
.dtLeadGlp {
  display: flex;
  flex-flow: column;
  gap: calc(40 * var(--d));
}
.dtLeadGlp .leadTtlObj {
  font-size: calc(40 * var(--d));
  font-weight: 640;
  line-height: 1.4;
}
.dtLeadGlp .leadTxtObj {
  margin-top: calc(20 * var(--d));
  font-size: max(10px, calc(12 * var(--d)));
  line-height: 2;
}
.dtLeadGlp .leadTxtObj br {
  display: none; /* 英文の改行位置は PC 用。SP では自然に折り返す */
}
.dtLeadGlp .leadJpTtlObj {
  font-family: var(--dtJp);
  font-size: calc(24 * var(--d));
  line-height: 2;
  letter-spacing: 0.02em;
}
.dtLeadGlp .leadJpTxtObj {
  margin-top: calc(20 * var(--d));
  font-family: var(--dtJp);
  font-size: max(9px, calc(11 * var(--d)));
  line-height: 2.4;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 961px) {
  .dtLeadArea {
    padding-top: 0;
  }
  .dtLeadGlp {
    flex-flow: row;
    gap: calc(48 * var(--d));
  }
  .dtLeadGlp .txtSet {
    width: calc(456 * var(--d));
  }
  .dtLeadGlp .leadTtlObj {
    font-size: calc(48 * var(--d));
    line-height: 1.7;
  }
  .dtLeadGlp .leadTxtObj br {
    display: inline;
  }
  .dtLeadGlp .leadJpTtlObj {
    font-size: calc(32 * var(--d));
    line-height: 2.6;
  }
  .dtLeadGlp .leadJpTxtObj {
    font-size: max(8px, calc(10 * var(--d)));
  }
}

/* ==================================================
セクション見出し（Our Works / What We Do など）
================================================== */
.dtSecTtlObj {
  font-size: calc(24 * var(--d));
  font-weight: 640;
  line-height: 1.7;
}
@media screen and (min-width: 961px) {
  .dtSecTtlObj {
    font-size: calc(32 * var(--d));
  }
}

/* ==================================================
ガラス調カード（Figma の GLASS エフェクト）
・薄い白＋細いハイライトの縁＋やわらかい影
================================================== */
.glassCard {
  position: relative;
  border-radius: calc(16 * var(--d));
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 calc(4 * var(--d)) calc(16 * var(--d)) rgba(0, 0, 0, 0.06),
    inset 0 1px 3px rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.glassCard::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;
}

/* ==================================================
サムネイルカード（NEWS・LOG・BRAND・CREATORS・クリエイター詳細の SNS 投稿で共通。2026-10-13 ユーザー指定）
・.dtThumbCard：ガラス調カード（.glassCard と一緒に使う）、.dtThumbLink：カードの中のリンク（カード自体がリンクのときは不要）
・.dtThumbImg：写真の枠。白 10%＋ぼかし 4px の層（Figma の GLASS 4）を重ねて、写真をぼかしておく
・hover（マウスのある端末）：写真がはっきりし（層を外す）、ガラスの白を 10% → 35% にして透け具合を下げる。
  カード全体の不透明度は変えない（base_pc.css の全リンク共通の a:hover { opacity: .5 } を打ち消す）
・リンクの無いカード（COMING SOON など）は変わらない
================================================== */
.dtThumbCard {
  transition: background-color 0.5s ease;
}
.dtThumbImg {
  position: relative;
  overflow: hidden;
}
.dtThumbImg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity 0.5s ease;
  pointer-events: none;
}
@media (hover: hover) {
  a.dtThumbCard:hover,
  .dtThumbCard:has(.dtThumbLink:hover) {
    background-color: rgba(255, 255, 255, 0.35);
  }
  a.dtThumbCard:hover .dtThumbImg::after,
  .dtThumbCard:has(.dtThumbLink:hover) .dtThumbImg::after {
    opacity: 0;
  }
  a.dtThumbCard:hover,
  .dtThumbLink:hover {
    opacity: 1;
  }
}
/* マウスの無い端末：画面に入っているカードは写真のぼかしを外す（is-inview は common/js/setting.js の inviewUnblurSet。2026-10-19） */
@media (hover: none) {
  .dtThumbCard.is-inview .dtThumbImg::after {
    opacity: 0;
  }
}

/* ガラスのゆがみ：Safari でも出せる作り方（.lgBack・.is-lgScene）は TOP でも使うので common/css/layout.css に置く（2026-10-19） */

/* ==================================================
タグ（角丸の枠線）
・幅は Figma の値を style="--w: 140" のように渡す
================================================== */
.tagLists {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--d)) calc(16 * var(--d));
}
.tagObj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--w, 120) * var(--d));
  height: calc(28 * var(--d));
  padding: 0 calc(4 * var(--d));
  border: 1px solid var(--dtTxt);
  border-radius: calc(22 * var(--d));
  font-family: var(--dtJp);
  font-size: max(8px, calc(10 * var(--d)));
  line-height: 1.5;
  white-space: nowrap;
}
.tagObj.is-en {
  font-family: var(--dtEn);
  line-height: 1.7;
}

/* ==================================================
下線リンク（「〇〇の裏側を知る ＋」）
================================================== */
.moreLinkObj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(236 * var(--d));
  height: calc(42 * var(--d));
  padding: 0 calc(11 * var(--d)) calc(6 * var(--d)) 0;
  border-bottom: 1px solid var(--dtTxt);
  color: var(--dtTxt);
  font-family: var(--dtJp);
  font-size: calc(16 * var(--d));
  line-height: 1.5;
}
.dtArticle .moreLinkObj {
  text-decoration: none; /* base.css の a:link { underline } より優先させる */
}
.moreLinkObj .iconObj {
  flex: none;
  width: auto;
  height: auto;
}
@media (hover: hover) {
  .moreLinkObj:hover {
    opacity: 0.6;
  }
}

/* ==================================================
メディア枠（YouTube / 画像 / 動画 / 仮のグレー枠）
・縦横比は --ar で指定（例：style="--ar: 275 / 486"）
・画像・動画は枠いっぱいに切り抜く（object-fit: cover）
================================================== */
.mediaObj {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--ar, 16 / 9);
  background: var(--dtGray);
  overflow: hidden;
}
.mediaObj.is-wide {
  --ar: 533 / 371;
}
.mediaObj.is-tall {
  --ar: 250 / 371;
}
.mediaObj iframe,
.mediaObj > img,
.mediaObj > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.mediaObj .labelObj {
  font-family: var(--dtJp);
  font-size: calc(16 * var(--d));
  line-height: 1.5;
  color: #000;
}
.mediaObj .labelObj.is-en {
  font-family: var(--dtEn);
  font-size: max(10px, calc(12 * var(--d)));
  line-height: 1.7;
  color: var(--dtTxt);
}

/* ==================================================
地図（CAFE / COMPANY。中身は common/inc/gmap.php が出す）
・API キーがあるとき：Google Maps JavaScript API ＋ Snazzy Maps「Apple Maps-esque」のスタイル（common/js/gmap.js）
・キーが無い・使えないときは埋め込み地図（iframe）。配色は指定できないので Google の通常の色のまま
・.mediaObj と一緒に使う
================================================== */
.dtMapObj {
  background: #f7f1df; /* Apple Maps-esque の地面の色（読み込み中） */
}
.dtMapObj .gmapObj {
  position: absolute;
  inset: 0;
}

/* ==================================================
横スライダー（Swiper 3）
・.swiper-slide の幅と間隔（margin-right）は各ページの CSS で指定
・SP：画面右端まで抜ける
・ページ送りを付けるときは .dtPager.dtCardPager（1枚目のカードの中央。カードの幅は --cardW、カードとの間は --pagerTop）
================================================== */
.dtSliderGlp {
  position: relative; /* 液体のページ送りの層の位置の基準 */
  margin-right: calc(-16 * var(--d));
}
.dtCardPager {
  width: calc(var(--cardW, 300) * var(--d));
  margin-top: calc(var(--pagerTop, 24) * var(--d));
}
/* ページ送りをスライダーの外に置くときの囲み（ALLIANCE）。液体の層の位置の基準 */
.dtPagerWrap {
  position: relative;
}
/* Swiper 標準の height: 100% だと高さが膨らむため、中身の高さに合わせる */
.dtSliderGlp .swiper-wrapper,
.dtSliderGlp .swiper-slide {
  height: auto;
}
@media screen and (min-width: 961px) {
  .dtSliderGlp {
    margin-right: 0;
  }
}