/* =================================================================
 * c-site-header — PC共通ヘッダー
 * Figma: 5371:84863 (ヘッダー PC default)
 *        5824:94695（Wireframe-17「ヘッダー」canonical / スクロール挙動・3BP仕様の正）
 *
 * 仕様:
 *   - PC（1024px〜）で表示。SP は別ヘッダー（site-shell/sp/header）に委譲
 *   - position: sticky でスクロール追従
 *   - 高さ 120px、左右パディング 40px
 *   - 半透明白 rgba(255,255,255,0.6) / backdrop-blur
 *   - 下角 32px 丸
 *   - ロゴ（250×56）左、右側に2段（utility + main nav）
 * =================================================================*/

/* デフォルトは SP では非表示 */
.c-site-header { display: none; }

@media (min-width: 1024px) {

.c-site-header {
  display: flex;
  /* fixed でコンテンツ上に重ねる（ヒーロー/KVは上にヘッダー分の余白を確保済み）。
     スクロール追従も維持＝Figma 4954:99026 の挙動。フロー外なので背後にヒーローのグラデが透ける。 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--header-z);
  width: 100%;
  height: var(--header-height-pc);
  padding: 0 40rem;
  align-items: center;
  justify-content: space-between;
  /* Figma 4954:99026: 初期は #FFFFFF 不透明度60%（ぼかし指定なし）。
     backdrop-filter は sticky で静止時に背景を取りこぼし白く描画されるバグがあるため使わない */
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 0 0 32rem 32rem;
  box-sizing: border-box;
  /* スクロールで背景の不透明度のみ変化（Figma 4954:99026）。最上部に戻ると初期状態へ */
  transition: background-color var(--duration-base) var(--easing-default);
}

/* スクロール後（Figma 4954:99026）: 背景 #FFFFFF 不透明度100% のみ。角丸32px・影なしは初期状態のまま */
.c-site-header.is-scrolled {
  background-color: var(--color-white);
}

/* ---------- ロゴ ---------- */
.c-site-header__logo {
  display: inline-flex;
  flex-shrink: 0;
  text-decoration: none;
}

.c-site-header__logo-img {
  display: block;
  width: 250rem;
  height: auto;
  max-height: 56rem;
}

/* ---------- 右カラム ---------- */
.c-site-header__right {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-end;
  gap: 14rem;
  min-width: 0;
}

/* ---------- 上段：ユーティリティ ---------- */
.c-site-header__utility {
  display: flex;
  align-items: center;
  gap: 32rem;
}

.c-site-header__util-link {
  font-family: var(--font-jp);
  font-size: 13rem;
  font-weight: var(--fw-bold);
  line-height: 1.8;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-default);
  text-decoration: none;
  padding-bottom: 2rem;
  border-bottom: 2rem solid transparent;
  transition: color var(--duration-fast) var(--easing-default),
              border-color var(--duration-fast) var(--easing-default);
}

/* Figma navi_txt_link: hover=濃い下線(文字色は据え置き) / active・現在ページ=キーカラー文字 */
.c-site-header__util-link:hover { border-bottom-color: var(--color-text-default); }
.c-site-header__util-link:active,
.c-site-header__util-link[aria-current="page"] { color: var(--color-key); }

.c-site-header__divider {
  width: 1px;
  height: 12rem;
  background-color: var(--color-text-default);
}

/* SNS / Language 共通の表示部 */
.c-site-header__util-pair {
  display: inline-flex;
  align-items: center;
  gap: 6rem;
  font-family: var(--font-jp);
  font-size: 12rem;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--color-text-default);
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}

.c-site-header__util-pair:hover { color: var(--color-key); }

.c-site-header__util-pair-icon {
  width: 20rem;
  height: 20rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.c-site-header__util-pair-icon--sns {
  -webkit-mask-image: url("/img/common/icons/sns.svg");
          mask-image: url("/img/common/icons/sns.svg");
}

.c-site-header__util-pair-icon--language {
  -webkit-mask-image: url("/img/common/icons/language.svg");
          mask-image: url("/img/common/icons/language.svg");
}

/* ---------- 下段：メインナビ＋アクション ---------- */
.c-site-header__primary {
  display: flex;
  align-items: center;
  gap: 32rem;
  max-width: 1200rem;
  width: 100%;
}

.c-site-header__nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  /* Figma(1440px)では 80px。狭いPC幅(〜1280px)では 0 まで詰めて溢れを防ぐ（追加ブレイクポイントなしの流動指定） */
  padding-left: clamp(0px, calc((100vw - 1280px) * 0.5), 80px);
  height: 100%;
  gap: 24rem;
}

.c-site-header__nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8rem;
}

.c-site-header__nav-link {
  font-family: var(--font-jp);
  font-size: 14rem;
  font-weight: var(--fw-bold);
  line-height: 1.8;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-default);
  text-decoration: none;
  padding-bottom: 2rem;
  border-bottom: 2rem solid transparent;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--easing-default),
              border-color var(--duration-fast) var(--easing-default);
  cursor: pointer;
}

/* Figma navi_txt_link: hover=濃い下線(文字色は据え置き) / active・現在ページ=キーカラー文字 */
.c-site-header__nav-link:hover { border-bottom-color: var(--color-text-default); }
.c-site-header__nav-link:active,
.c-site-header__nav-link[aria-current="page"] { color: var(--color-key); }

/* チェブロン（▽）— その他サービス／製品の特徴と品質。Figma 446:4536: キーカラー */
.c-site-header__caret {
  display: inline-block;
  width: 8rem;
  height: 8rem;
  border-right: 1.5rem solid var(--color-key);
  border-bottom: 1.5rem solid var(--color-key);
  transform: rotate(45deg);
  margin-top: -4rem;
  transition: transform var(--duration-fast) var(--easing-default);
}

.c-site-header__nav-item:hover .c-site-header__caret {
  transform: rotate(-135deg);
  margin-top: 4rem;
}

/* ---------- ドロップダウン ----------
 * Figma その他サービス 4957:82456 / Language 4957:82780 / SNS 4957:83092:
 *   背景 Back Ground01(#FBF9F8) / メニュー用ドロップシャドウ / 角丸40px(ナビ)・32px(ユーティリティ)
 *   内側 padding 32px(SNS=24px) / 項目を gap で縦並び。リンクは navi_txt_link と同仕様。
 * アニメ仕様(指示 5693:90526 参照: corp.shiseido.com/report/jp/2021/):
 *   マウスオン時に上から滑らかにスライドダウン＋フェードイン。
 *   easing は ease-out 系 cubic-bezier、duration は 360ms（fast=150ms より長め）。 */
.c-site-header__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8rem;
  padding: 32rem;
  background-color: var(--color-bg-01);
  border-radius: 40rem;
  box-shadow: var(--shadow-menu);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12rem);
  transform-origin: top center;
  transition: opacity 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 360ms;
  z-index: 1;
}

/* ホバー遷移ブリッジ: トリガーとドロップダウンの 8rem 隙間でマウスが外れて閉じないよう、
   ドロップダウン上端に透明な感知領域を伸ばす */
.c-site-header__dropdown::before {
  content: "";
  position: absolute;
  top: -8rem;
  left: 0;
  right: 0;
  height: 8rem;
}

/* 上段ユーティリティ（SNS / Language）: 右端のトリガー基準で右寄せ・角丸32px */
.c-site-header__utility .c-site-header__dropdown {
  left: auto;
  right: 0;
  border-radius: 32rem;
}

.c-site-header__nav-item:hover > .c-site-header__dropdown,
.c-site-header__nav-item:focus-within > .c-site-header__dropdown,
.c-site-header__util-pair:hover + .c-site-header__dropdown,
.c-site-header__util-pair:focus-visible + .c-site-header__dropdown,
.c-site-header__dropdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* リンクは navi_txt_link 同仕様（14px・現在ページ/言語=キーカラー）。
   hover: 下線が左→右へスライドイン（advantage カードと同じ background-size 手法・0.3s ease-in-out）。
   background-image の linear-gradient を 0幅→100%幅 にアニメーションして下端 2rem の下線を伸ばす。 */
.c-site-header__dropdown-link {
  align-self: flex-start;
  font-family: var(--font-jp);
  font-size: 14rem;
  font-weight: var(--fw-bold);
  line-height: 1.8;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-default);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0 2rem;
  transition: color var(--duration-fast) var(--easing-default),
              background-size 0.3s ease-in-out;
}

.c-site-header__dropdown-link:hover { background-size: 100% 2rem; }
.c-site-header__dropdown-link:active,
.c-site-header__dropdown-link[aria-current] { color: var(--color-key); }

/* SNS ドロップダウン専用（Figma 4957:83092: padding24・2列・フルカラーアイコン・eightワードマーク） */
.c-site-header__dropdown--sns {
  padding: 24rem;
  gap: 4rem;
}

.c-site-header__sns-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
}

.c-site-header__sns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48rem;
  height: 48rem;
  border-radius: 24rem;
  background: none;
  transition: background-color var(--duration-fast) var(--easing-default);
}

.c-site-header__sns-btn:hover { background-color: var(--color-light-orange-02); }

.c-site-header__sns-btn-icon { display: block; width: 27rem; height: 27rem; }
.c-site-header__sns-btn--x .c-site-header__sns-btn-icon { width: 23rem; height: 23rem; }
.c-site-header__sns-btn--youtube .c-site-header__sns-btn-icon { width: 27rem; height: 19rem; }
.c-site-header__sns-btn--eight { width: auto; padding: 0 8rem; }
.c-site-header__sns-btn--eight .c-site-header__sns-btn-icon { width: 86rem; height: 18rem; }

/* ---------- アクション（CTA + 検索） ---------- */
.c-site-header__actions {
  display: flex;
  align-items: center;
  gap: 12rem;
  flex-shrink: 0;
}

/* お問い合わせ CTA（Figma 500:15697: h40・w164・radius24・key色・白文字＋矢印） */
.c-site-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12rem;
  width: 164rem;
  height: 40rem;
  padding: 4rem 20rem;
  box-sizing: border-box;
  flex-shrink: 0;
  background-color: var(--color-key);
  border-radius: 24rem;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-default);
}

.c-site-header__cta:hover { background-color: var(--color-orange-01); }
.c-site-header__cta:active { transform: translateY(1px); }

.c-site-header__cta-text {
  flex: 1;
  font-family: var(--font-jp);
  font-size: 14rem;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

.c-site-header__cta-icon {
  width: 13rem;
  height: 13rem;
  flex-shrink: 0;
  background-color: currentColor; /* = 白 */
  -webkit-mask: url("/img/common/icons/arrow-cta.svg") no-repeat center / contain;
          mask: url("/img/common/icons/arrow-cta.svg") no-repeat center / contain;
}

.c-site-header__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48rem;
  height: 48rem;
  background: none;
  border: 0;
  border-radius: 24rem;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-default);
}

.c-site-header__search-btn:hover { background-color: var(--color-bg-02); }

.c-site-header__search-icon { width: 24rem; height: 24rem; }

/* ===================================================================
 * 992〜1439px（PC middle / Figma 5077:239105）
 *   インラインナビと上段ユーティリティリンクを隠し、ハンバーガーに格納。
 *   SNS / Language / お問い合わせ / 検索 は残す。フルナビは ≥1440px。
 * ===================================================================*/
.c-site-header__util-link,
.c-site-header__divider { display: none; }

.c-site-header__nav { display: none; }

/* nav が無くなるためアクションを右寄せ */
.c-site-header__actions { margin-left: auto; }

/* ハンバーガー（48px・key色・白アイコン） */
.c-site-header__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48rem;
  height: 48rem;
  flex-shrink: 0;
  background-color: var(--color-key);
  border: 0;
  border-radius: 24rem;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-default);
}

.c-site-header__menu-btn:hover,
.c-site-header__menu-btn:active { background-color: var(--color-orange-01); }

/* 3本線アイコン（指示 5693:90533: codepen altro-nvp2/xqVeKO 左端アニメ）。
   span を 3 本配置し、is-open 時に top=回転45°+下移動、middle=透明化、bottom=回転-45°+上移動で × へ。 */
.c-site-header__menu-icon {
  position: relative;
  display: inline-block;
  width: 20rem;
  height: 14rem;
  background: none;
  -webkit-mask: none;
          mask: none;
}

.c-site-header__menu-icon::before,
.c-site-header__menu-icon::after,
.c-site-header__menu-icon > span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2rem;
  background-color: var(--color-white);
  border-radius: 1rem;
  transform-origin: center;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 200ms ease;
}

.c-site-header__menu-icon::before { top: 0; }
.c-site-header__menu-icon > span   { top: 50%; transform: translateY(-50%); }
.c-site-header__menu-icon::after  { bottom: 0; }

.c-site-header__menu-btn.is-open .c-site-header__menu-icon::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.c-site-header__menu-btn.is-open .c-site-header__menu-icon > span {
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
}
.c-site-header__menu-btn.is-open .c-site-header__menu-icon::after {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

} /* end @media min-width 1024px */

/* ===================================================================
 * 1440px〜（フルPC / Figma 5371:84863）: インラインナビ表示・ハンバーガー非表示
 * ===================================================================*/
@media (min-width: 1440px) {
  .c-site-header__right       { gap: 12rem; }
  .c-site-header__util-link   { display: inline-block; }
  .c-site-header__divider     { display: block; }
  .c-site-header__nav         { display: flex; }
  .c-site-header__actions     { margin-left: 0; }
  .c-site-header__search-btn  { width: 44rem; height: 44rem; border-radius: 50%; }
  .c-site-header__menu-btn    { display: none; }
}