@charset "UTF-8";
/* ==================================================
ALLIANCE ページ固有
・共通部品（背景・ヒーロー・リード・カード・タグなど）は /common/css/detail.css
・数値は Figma（PC 1280px）の値。calc(N * var(--d)) で伸縮する
================================================== */

/* 1画面目の背景写真の見え方（Figma：2000×1334 の写真を拡大して一部を表示） */
.bgObj {
  --bgL: -18.83%;
  --bgT: -28.85%;
  --bgW: 156.25%;
  --bgH: 160.34%;
}

/* ヒーロー画像の切り抜き位置 */
.dtHeroImg {
  --imgL: -4.626%;
  --imgT: -3.559%;
  --imgW: 106.93%;
  --imgH: 109.67%;
}

/* ==================================================
リード（Be known. / 知ってもらう。）
================================================== */
@media screen and (min-width: 961px) {
  .dtLeadArea {
    margin-top: calc(-29 * var(--d)); /* Figma では背景の切れ目に少しかかる */
    padding-left: calc(4 * var(--d));
  }
  .dtLeadGlp .txtSet:first-child {
    padding-top: calc(10 * var(--d));
  }
  .dtLeadGlp .leadTxtObj {
    margin-top: calc(22 * var(--d));
  }
  .dtLeadGlp .leadJpTxtObj {
    margin-top: calc(29 * var(--d));
  }
  .dtSecTtlObj {
    padding-left: calc(4 * var(--d));
  }
}

/* ==================================================
Our Works / Back Stage（事例カードのスライダー。2026-10-13 ユーザー指定）
・スクロールしていくと欄が画面の上下中央で引っかかり（固定）、縦のスクロールに合わせてカードが横に流れる（js/common.js の scrollSliderCreate）。
  今のカードはコンテンツエリア（ロゴ列の右。.dtInner）の左右中央に来る。最後のカードまで流れたら固定が外れる
・カードはコンテンツエリアの中央から離れるほど少し下にずれる（弧を描くように流れる）
・カードは画面の左右の端まで流れる（.scrollSliderGlp を画面の端まで広げ、はみ出しは切る）
・ページ送り（.dtCardPager。見た目と液体の動きは detail.css の「ページ送り」）はコンテンツエリアの中央、カードの下 24。
  押すとその位置までスクロールする
================================================== */
.worksArea,
.backstageArea {
  position: relative; /* ページ送りの液体の層の位置の基準（固定中も同じ） */
  margin-top: calc(72 * var(--d));
}
.backstageArea {
  scroll-margin-top: calc(80 * var(--d)); /* 「〇〇の裏側を知る」から移動した時にヘッダーと重ならないように */
}
.scrollSliderGlp {
  overflow-x: clip;
  margin: calc(12 * var(--d)) calc(-16 * var(--d)) 0;
  padding: 0 0 0 calc(16 * var(--d));
}
.scrollTrack {
  position: relative;
  display: flex;
}
.scrollSlide {
  flex: none;
  width: calc(300 * var(--d));
  margin-right: calc(16 * var(--d));
}
.worksArea .dtPagerWrap,
.backstageArea .dtPagerWrap {
  margin-top: calc(24 * var(--d));
}
.dtPagerWrap .dtCardPager {
  width: auto;
  margin: 0;
}
.workCardSet {
  height: 100%;
  padding: calc(16 * var(--d)) calc(16 * var(--d)) calc(32 * var(--d));
}
.workCardSet .cropObj {
  aspect-ratio: 344 / 210;
  --imgL: -3.488%;
  --imgT: -14.29%;
  --imgW: 108.14%;
  --imgH: 118.1%;
}
.workCardSet .metaObj {
  margin-top: calc(10 * var(--d));
  font-size: max(10px, calc(12 * var(--d)));
  line-height: 1.7;
}
.workCardSet .ttlObj {
  margin-top: calc(4 * var(--d));
  font-size: calc(16 * var(--d));
  font-weight: 640;
  line-height: 1.7;
}
.workCardSet .txtObj {
  margin-top: calc(12 * var(--d));
  font-size: max(10px, calc(12 * var(--d)));
  line-height: 1.5;
}
.workCardSet .roleLabelObj {
  margin-top: calc(12 * var(--d));
  font-size: max(8px, calc(10 * var(--d)));
  line-height: 1.7;
}
.workCardSet .roleTxtObj {
  margin-top: calc(1 * var(--d));
  font-size: max(7px, calc(8 * var(--d)));
  line-height: 1.5;
}
.workCardSet .tagLists {
  margin-top: calc(28 * var(--d));
  gap: calc(12 * var(--d));
}
.workCardSet .tagObj {
  height: calc(27 * var(--d));
  font-size: max(7px, calc(8 * var(--d)));
}
@media screen and (min-width: 961px) {
  .worksArea {
    margin-top: calc(84 * var(--d));
  }
  /* What We Do の最後のカードの下端から 209（Figma） */
  .backstageArea {
    margin-top: calc(209 * var(--d));
  }
  .scrollSliderGlp {
    margin: calc(9 * var(--d)) 0 0 calc(-284 * var(--d));
    padding-left: calc(284 * var(--d));
  }
  .scrollSlide {
    width: calc(376 * var(--d));
  }
  .workCardSet {
    min-height: calc(500 * var(--d));
    padding: calc(32 * var(--d)) calc(16 * var(--d)) calc(40 * var(--d));
  }
}

/* ==================================================
Beauty Market Scan
================================================== */
.bmsArea {
  margin-top: calc(64 * var(--d));
}
.bmsGlp {
  display: flex;
  flex-flow: column;
  gap: calc(24 * var(--d));
}
.bmsGlp .bmsTtlObj {
  font-size: calc(36 * var(--d));
  font-weight: 640;
  line-height: 1.3;
}
.bmsGlp .bmsTxtObj {
  margin-top: calc(16 * var(--d));
  font-size: calc(14 * var(--d));
  line-height: 2.4;
}
.bmsCardSet {
  padding: calc(16 * var(--d)) calc(16 * var(--d)) calc(24 * var(--d));
}
.bmsCardSet .cropObj {
  aspect-ratio: 558 / 286;
  /* Figma：1570×1047 に拡大した写真のうち、手元の部分（558×286）を表示 */
  --imgL: -82.08%;
  --imgT: -150%;
  --imgW: 281.36%;
  --imgH: 366.08%;
}
.bmsCardSet .txtObj {
  margin-top: calc(11 * var(--d));
  font-size: max(10px, calc(12 * var(--d)));
  line-height: 1.7;
}
.bmsCardSet .tagLists {
  margin-top: calc(24 * var(--d));
}
@media screen and (min-width: 961px) {
  .bmsArea {
    margin-top: calc(57 * var(--d));
  }
  .bmsGlp {
    display: grid;
    grid-template-columns: calc(293 * var(--d)) calc(622 * var(--d));
    column-gap: calc(49 * var(--d));
    align-items: start;
  }
  .bmsGlp .txtSet {
    padding: calc(3 * var(--d)) 0 0 calc(1 * var(--d));
  }
  .bmsGlp .bmsTtlObj {
    font-size: calc(48 * var(--d));
    line-height: 1.7;
  }
  .bmsGlp .bmsTxtObj {
    margin-top: calc(23 * var(--d));
    padding-left: calc(2 * var(--d));
    font-size: calc(16 * var(--d));
  }
  .bmsCardSet {
    min-height: calc(473 * var(--d));
    padding: calc(35 * var(--d)) calc(32 * var(--d)) calc(43 * var(--d));
  }
  .bmsCardSet .txtObj {
    padding-left: calc(2 * var(--d));
  }
  .bmsCardSet .tagLists {
    margin-top: calc(29 * var(--d));
  }
}

/* ==================================================
What We Do
・ナビ（Figma 3425:1175）：ガラス調の丸いボタン。高さ 48・角丸 24・間隔 16。
  ボタンの幅は Figma の値（style="--w"）、文字は左 36 から 12px、∨ は文字の右 16。はみ出す分は横スクロール
  （横スクロールの箱は影が切れないよう上下に余白を取り、その分だけ外側の余白を減らしている）
・ブロック（Figma 211:1104・3429:1224・3429:1261・3429:1291・3429:1321・3429:1348）：メディア（枠なし）と文章のガラス調カード 376×477 を並べる。
  PC の組み方は inc/conts.php の layout（is-wide / is-right / is-tall）。ブロックの間隔 123。SP・TAB はメディア → カードの順に縦に積む
・2026-10-13 ユーザー指定
  ・見出しとナビ（.wwdHeadGlp）はヘッダーの所まで来たら画面の上で止まり、ブロックはその下を抜けていく（欄の終わりで一緒に流れる）。
    止まっている間の後ろのすりガラスの帯は、追加の指定（引っかかった後のぼかしなし）でやめた
  ・03・06 の縦動画は 1.6 倍（250 → 400）、05 の写真は参考サイト（制作共有用プレビュー）と同じ 5:4 の横長（464 幅）
  ・03・05・06 はメディアとカードを合わせた幅をコンテンツの中央に（is-center）
================================================== */
.wwdArea {
  --wwdHeadTop: 104; /* 止まる位置（画面の上から。SP・TAB は画面に止まっている左のロゴ（上 64〜97）の下） */
  --wwdHeadH: 121; /* 止まっている見出し＋ナビの高さ（ナビから移動したブロックがこの下に来るように） */
  margin-top: calc(80 * var(--d));
}
.wwdHeadGlp {
  position: sticky;
  top: calc(var(--wwdHeadTop) * var(--d));
  z-index: 5;
}
.wwdNavLists {
  display: flex;
  gap: calc(16 * var(--d));
  margin: calc(8 * var(--d)) calc(-16 * var(--d)) 0 0;
  padding: calc(8 * var(--d)) calc(16 * var(--d)) calc(16 * var(--d)) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.wwdNavLists::-webkit-scrollbar {
  display: none;
}
.wwdNavList {
  flex: none;
}
.wwdNavList a {
  display: flex;
  align-items: center;
  width: calc(var(--w, 200) * var(--d));
  height: calc(48 * var(--d));
  padding-left: calc(36 * var(--d));
  border-radius: calc(24 * var(--d));
  color: var(--dtTxt);
  font-family: var(--dtJp);
  font-size: max(10px, calc(12 * var(--d)));
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
}
.wwdNavList .iconObj {
  flex: none;
  width: auto;
  height: auto;
  /* ＞ を回して ∨ に。回したあとの見た目の左端が文字の右 16 に来るよう、幅の差（7.4 − 4.5）の半分を足す */
  margin-left: calc(17.5 * var(--d));
  transform: translateY(calc(1 * var(--d))) rotate(90deg);
}
@media (hover: hover) {
  .wwdNavList a:hover {
    opacity: 0.6;
  }
}

.wwdLists {
  display: flex;
  flex-flow: column;
  gap: calc(48 * var(--d));
  margin-top: calc(24 * var(--d));
}
.wwdSet {
  display: flex;
  flex-flow: column;
  gap: calc(16 * var(--d));
  scroll-margin-top: calc((var(--wwdHeadTop) + var(--wwdHeadH) + 16) * var(--d)); /* ナビから移動したとき、止まっている見出し＋ナビの下に来るように */
}
.wwdSet .mediaGlp {
  display: flex;
  gap: calc(16 * var(--d));
}
.wwdSet .mediaObj.is-wide,
.wwdSet .mediaObj.is-tall {
  flex: 1 1 0;
}
.wwdSet .mediaObj.is-tall:only-child {
  flex: 0 0 60%;
  margin: 0 auto;
}
.wwdSet .mediaObj.is-photo {
  --ar: 5 / 4;
  flex: 1 1 0;
}
.wwdSet .txtGlp {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  padding: calc(24 * var(--d)) calc(16 * var(--d)) calc(32 * var(--d));
}
.wwdSet .labelTxt {
  font-size: max(10px, calc(12 * var(--d)));
  line-height: 1.7;
}
.wwdSet .ttlObj {
  margin-top: calc(4 * var(--d));
  font-size: calc(24 * var(--d));
  line-height: 1.5;
}
.wwdSet .txtObj {
  margin-top: calc(24 * var(--d));
  font-size: max(10px, calc(12 * var(--d)));
  line-height: 1.7;
}
.wwdSet .tagLists {
  gap: calc(12 * var(--d)) calc(14.5 * var(--d));
  margin-top: calc(24 * var(--d));
}
/* 下線のリンク：Figma は幅 214。文言が長いときは伸ばす */
.wwdSet .moreLinkObj {
  gap: calc(16 * var(--d));
  width: auto;
  min-width: calc(214 * var(--d));
  margin-top: calc(32 * var(--d));
  white-space: nowrap;
}
@media screen and (min-width: 961px) {
  .wwdArea {
    --wwdHeadTop: 13; /* 見出しの文字の天地中央が、ヘッダーの日時の天地中央（40）に来る位置 */
    --wwdHeadH: 135;
    margin-top: calc(126 * var(--d));
  }
  .wwdNavLists {
    margin: calc(8.6 * var(--d)) 0 0;
  }
  .wwdLists {
    gap: calc(123 * var(--d));
    margin-top: calc(41 * var(--d));
  }
  .wwdSet {
    flex-flow: row;
    align-items: flex-start;
    gap: 0;
  }
  /* 文章のカード 376×477（内側 32）。リンクはカードの下端から 32 */
  .wwdSet .txtGlp {
    flex: none;
    width: calc(376 * var(--d));
    min-height: calc(477 * var(--d));
    padding: calc(32 * var(--d));
  }
  .wwdSet .mediaGlp {
    flex: none;
    gap: calc(33 * var(--d));
  }
  .wwdSet .mediaObj.is-tall,
  .wwdSet .mediaObj.is-tall:only-child,
  .wwdSet .mediaObj.is-photo {
    flex: 0 0 calc(var(--mw, 250) * var(--d)); /* 幅は inc/conts.php の w（無ければ Figma の 250） */
    margin: 0;
  }
  /* 01：横長のメディア 574×399.5、カードとの間 14 */
  .wwdSet.is-wide .mediaGlp {
    margin-right: calc(14 * var(--d));
  }
  .wwdSet.is-wide .mediaObj.is-wide {
    flex: 0 0 calc(574 * var(--d));
  }
  /* 02・04・06：左にカード、右にメディア（カードとの間 21・上 10、メディアの間 33） */
  .wwdSet.is-right .mediaGlp {
    order: 2;
    margin: calc(10 * var(--d)) 0 0 calc(21 * var(--d));
  }
  /* 03・05：メディアとカードの間 16。ブロックの左位置は Figma どおり（style="--x"） */
  .wwdSet.is-tall {
    margin-left: calc(var(--x, 0) * var(--d));
  }
  /* 05・06：メディアとカードを合わせた幅をコンテンツ（964）の中央に */
  .wwdSet.is-center {
    justify-content: center;
    margin-left: 0;
  }
  .wwdSet.is-tall .mediaGlp {
    margin-right: calc(16 * var(--d));
  }
  .wwdSet .ttlObj {
    margin-top: calc(3.6 * var(--d));
  }
  .wwdSet .txtObj {
    min-height: calc(112 * var(--d));
    margin-top: calc(33 * var(--d));
  }
  .wwdSet .tagLists {
    margin-top: calc(17 * var(--d));
  }
  .wwdSet .moreLinkObj {
    margin-top: auto;
  }
  /* カードが右にあるブロック（01・03・05）はリンクを右寄せ */
  .wwdSet.is-wide .moreLinkObj,
  .wwdSet.is-tall .moreLinkObj {
    align-self: flex-end;
  }
}