@charset "utf-8";
/* ============================================================
   PCトップ 新デザイン（ヘッダー / ファーストビュー）
   Figma: node 348:3629「Desktop - 4」（1440px幅）を基準。
   ・完全リキッドではなく基本px指定。全幅で見せる要素だけ width:100%。
   ・内部コンテンツの最大幅は 1300px（Figmaは1240pxだが指示により拡大）。
   ・クラス名／is-shrink の考え方は sp/renewal/css/top.css と共通。
     将来レスポンシブへ統合する際にメディアクエリだけで寄せられるようにしてある。

   ヘッダーの考え方（旧案から変更）:
     告知バー（38px・濃紺）だけがMVを押し下げ、
     ブランド行（ロゴ／タグライン／ハンバーガー）は**MVに重なる**。
     スクロールすると告知バーが畳まれ、ブランド行の背景が半透明の白になり、
     ロゴ・タグライン・ハンバーガーが濃紺へ反転する。
   ============================================================ */

:root {
  --gh-notice-h: 38px;       /* 告知バー */
  --gh-brand-h: 80px;        /* ブランド行（MVに重なる） */
  --navy: #143484;
  --inner: 1300px;           /* 内部コンテンツの最大幅 */
}
:root.is-shrink {
  --gh-notice-h: 0px;
}

body {
  min-width: 1200px;         /* PC専用レイアウト。これ以下は横スクロール */
  font-family: "Noto Sans JP", sans-serif;
  color: #111;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
/* 移植したサイドメニューのアイコン(.external)はインライン前提なので戻す */
.h_navi img { display: inline; }
html.menu-open { overflow: hidden; }


/* ---------- ヘッダー ---------- */

.gh {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  min-width: 1200px;         /* position:fixed は body の min-width を継がないため個別指定 */
  z-index: 10001;            /* ドロワー .h_navi(10002) と ×ボタン .gh-close(10003) の下 */
}

/* 上部の告知バー（スクロールで畳まれる） */
.gh-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--gh-notice-h);
  background: var(--navy);
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: 15.5px;
  color: #fff;
  overflow: hidden;
  transition: height .3s ease;
}

/* ブランド行：通常は背景なし（MVに重ねる）。スクロール後だけ半透明の白 */
.gh-brand {
  display: flex;
  align-items: center;
  height: var(--gh-brand-h);
  transition: background-color .3s ease, box-shadow .3s ease;
}
:root.is-shrink .gh-brand {
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
}

.gh-inner {
  display: flex;
  align-items: center;
  width: 100%;               /* ヘッダーは最大幅なし。画面幅いっぱいに左右余白だけ取る */
  padding: 0 40px;
}

/* ロゴ：白と濃紺の2枚を重ねてクロスフェードする（filterで色を作らない） */
.gh-logo {
  position: relative;
  flex: none;
  width: 142px;
  height: 45px;
}
.gh-logo img {
  position: absolute;
  top: 0; left: 0;
  width: 142px;
  height: 45px;
  transition: opacity .3s ease;
}
.gh-logo .gh-logo-navy { opacity: 0; }
:root.is-shrink .gh-logo .gh-logo-w { opacity: 0; }
:root.is-shrink .gh-logo .gh-logo-navy { opacity: 1; }

.gh-tagline {
  margin-bottom: 12px;
  margin-left: 76px;         /* Figma: ロゴ右端242 → タグライン左端318 */
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 24.9px;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: #fff;
  white-space: nowrap;
  transition: color .3s ease;
}
:root.is-shrink .gh-tagline { color: var(--navy); }

/* 電話・来店予約（ハンバーガーの左）。通常時は白、is-shrink で濃紺に反転（ロゴ等と同じ考え方） */
.gh-contact {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 12px;       /* ハンバーガーと中心を揃える */
  margin-left: auto;
  margin-right: 32px;
  color: #fff;
  transition: color .3s ease;
}
:root.is-shrink .gh-contact { color: var(--navy); }

.gh-tel {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .04em;
  transition: opacity .3s ease;
}
.gh-tel:hover { opacity: .8; }
.gh-tel-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* 予約ボタン：通常時は白枠（動画の上）、is-shrink で予約セクションと同じ #08144b のベタ */
.gh-reserve {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 42px;
  border: 1px solid #fff;
  font-size: 15px;
  letter-spacing: .08em;
  color: #fff;
  transition: background-color .3s ease, border-color .3s ease, opacity .3s ease;
}
.gh-reserve:hover { opacity: .8; }
:root.is-shrink .gh-reserve {
  background: #08144b;
  border-color: #08144b;
}

/* ハンバーガー（30 x 22px / バー2.44px・間隔7.33px＝現行サイトの .pc_menu_trigger と同寸） */
.gh-burger {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
}
.gh-burger span {
  width: 100%;
  height: 2.44px;
  border-radius: 1.22px;
  background: #fff;
  transition: transform .3s ease, opacity .3s ease, background-color .3s ease;
}
:root.is-shrink .gh-burger span { background: var(--navy); }

/* メニューの×（下層ページの .pc_menu_trigger.active と同じ：右上 25px / 20px・白・30x22）。
   ドロワーは下層と同じく画面上端から出すため、ヘッダー(.gh)より前面にある。
   ハンバーガーは .gh の中にあって前面に出せないので、×はドロワーの上に重ねる別ボタンにしている。
   開くとき：3本線（中央は消える）が回転して×になる。下層と同じ .2s。 */
.gh-close {
  position: fixed;
  top: 25px;
  right: 20px;
  z-index: 10003;
  width: 30px;
  height: 22px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility 0s .3s;
}
:root.menu-open .gh-close {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s, visibility 0s;
}
.gh-close span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 4px;
  background: #fff;
  transition: transform .2s;
}
.gh-close span:nth-child(1) { top: 0; }
.gh-close span:nth-child(2) { bottom: 0; }
:root.menu-open .gh-close span:nth-child(1) { transform: translateY(10px) rotate(-45deg); }
:root.menu-open .gh-close span:nth-child(2) { transform: translateY(-10px) rotate(45deg); }


/* ---------- 本文 ---------- */
/* 押し下げるのは告知バー分だけ。ブランド行はMVに重ねる。
   縮小時もガタつかないよう var ではなく初期値で固定 */
.content { padding-top: 38px; }


/* ---------- ファーストビュー ---------- */

.fv {
  position: relative;
  width: 100%;
  /* 高さは固定せず比率を保つ。動画の実寸(1632x864)の比率にしてあるので
     画面幅がいくつでもトリミングが起きない（Figmaの1440x771とほぼ同じ比率） */
  aspect-ratio: 1632 / 864;
  overflow: hidden;
  background: #000;
}
.fv-movie {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 告知バーの濃紺からMVへ繋ぐグラデーション（Figma: Rectangle 63／1440x200） */
.fv-scrim {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(180deg, rgba(20, 52, 132, .99) 0%, rgba(20, 52, 132, 0) 100%);
  pointer-events: none;
}


/* ---------- ブランド / 大カテゴリー ---------- */
/* Figma: 画像787 + ラベル面453 = 1240（＝旧内部幅）を並べた行を4本。
   行の高さ415pxもこの比率で決まっているので、内部幅1300pxに合わせて
   aspect-ratio で全体を比例拡大する（画像は object-fit: cover）。 */

.brands {
  width: min(var(--inner), 100% - 40px);
  margin: 0 auto;
  padding-top: 70px;         /* Figma: MV下端812 → セクション上端882 */
}

.brand {
  display: flex;
  aspect-ratio: 1240 / 415;
  color: inherit;
}
.brand + .brand { margin-top: 24px; }

.brand-img {
  width: 63.468%;            /* 787 / 1240 */
  overflow: hidden;
}
.brand-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .4s ease;
}
.brand:hover .brand-img img { opacity: .8; }

.brand-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 36.532%;            /* 453 / 1240 */
  padding: 0 20px 0;
  text-align: center;
}
/* 1・3行目はラベル面が左（DOMは画像→ラベルの順で統一してある） */
.brand:nth-child(odd) .brand-label { order: -1; }

.brand-alagin  .brand-label { background: #e9efe9; }
.brand-jewelry .brand-label { background: #fcf3ee; }
.brand-bridal  .brand-label { background: #eff4ff; }
.brand-glab    .brand-label { background: #d9d9d9; }

.brand-logo-alagin { width: 184px; height: auto; }
.brand-logo-glab   { width: 127px; height: auto; }

.brand-en {
  font-family: "Cormorant Garamond", serif;
  font-size: 36px;
  line-height: 1.2;
  color: #1a1714;
}
.brand-name {
  margin-top: 10px;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .8px;
  color: #090909;
}
/* ロゴ画像の行はテキスト行より詰まって見えるので、englishタイトルの行と高さを揃える */
.brand-logo-alagin + .brand-name,
.brand-logo-glab + .brand-name { margin-top: 12px; }

.brand-text {
  max-width: 438px;
  margin-top: 60px;
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  color: #000;
}


/* ---------- リード ---------- */
/* Figma: 左のテキスト列560px ＋ 右の写真385x577 を 56px 空けて横並び。
   文字はすべて #386ec3。写真より29px下からテキストが始まる。 */

.lead {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 56px;
  padding: 107px 20px 108px;
  color: #386ec3;
}

.lead-inner {
  width: 560px;
  padding-top: 29px;
  text-align: center;
}
.lead-logo {
  display: block;
  width: 462px;
  margin: 0 auto;
}
.lead-logo img { width: 100%; height: auto; }

.lead-tagline {
  margin-top: 8px;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.45;
}
.lead-since {
  margin-top: 26px;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.45;
}
.lead-text {
  margin-top: 24px;
  font-size: 18px;
  line-height: 30px;
}

.lead-photo {
  flex: none;
  width: 385px;
}
.lead-photo img { width: 100%; height: auto; }


/* ---------- セクション見出し（以降のセクション共通） ---------- */
/* Figma: Cormorant Garamond 36px ＋ Noto Sans JP 16px の2段。中央寄せ。 */

.sec-head { text-align: center; }
.sec-en {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 36px;
  line-height: 1.2;
  color: #000;
}
.sec-jp {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  color: #090909;
}


/* ---------- 店舗のご紹介 ---------- */
/* Figma: 全幅のベージュ帯(#f7ede1・高さ594)。左に写真597x371、右に店舗リスト596幅。
   リストの区切り線は白2px、行の高さは69px。 */

.shopinfo {
  background: #f7ede1;
  padding: 49px 0 76px;
}
.shopinfo-body {
  display: flex;
  justify-content: space-between;
  align-items: center;       /* 写真の方が高いのでリストは中央に合わせる */
  width: min(var(--inner), 100% - 40px);
  margin: 33px auto 0;
}
.shopinfo-photo { width: 48.15%; }   /* 597 / 1240 */
.shopinfo-photo img { width: 100%; height: auto; }

.shop-list { width: 48.06%; }        /* 596 / 1240 */
.shop-list li { border-top: 2px solid #fff; }
.shop-list li:last-child { border-bottom: 2px solid #fff; }
.shop-list a {
  display: flex;
  align-items: center;
  height: 67px;              /* 69px - 上下の線 */
  color: #090909;
  transition: opacity .3s ease;
}
.shop-list a:hover { opacity: .6; }

.shop-en {
  font-family: "Cormorant Garamond", serif;
  font-size: 24px;
}
.shop-jp {
  margin-left: 20px;
  font-weight: 300;
  font-size: 20px;
}
/* 白丸＋黒の «›»（Figmaの Group 85 をそのまま使用） */
.shop-arrow {
  flex: none;
  margin-left: auto;
  width: 28px;
  height: 29px;
  background: url("../img/arrow-circle.svg") no-repeat center / contain;
}


/* ---------- ご来店予約 ---------- */
/* Figma: 400x70のボタン2つを29px空けて中央に。左＝濃紺ベタ、右＝白地＋濃紺1px枠。
   ⚠ Figma付箋「ボタンの高さとフォントサイズ小さくしたい。実装後確認（ボタンカラーは仮）」
     → まずデザインどおりの寸法・色で実装している。調整指示が来たらここを変える。 */

.reserve {
  padding: 77px 0 118px;
  text-align: center;
}
.reserve-btns {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 29px;
  margin-top: 44px;
}
.reserve-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 70px;
  font-size: 18px;
  line-height: 22px;
  transition: opacity .3s ease;
}
.reserve-btn:hover { opacity: .8; }

.reserve-web {
  background: #08144b;
  color: #fff;
}
.reserve-tel {
  background: #fff;
  color: #000;
  border: 1px solid #08144b;
}
.reserve-tel-num {
  margin-top: 4px;
  font-size: 22px;
}
.reserve-hours {
  margin-top: 6px;
  font-size: 14px;
  color: #090909;
}


/* ---------- 口コミ ---------- */
/* Figma: 全幅のグレー帯(#e7e7e7・高さ275)。白いボタン320x66を39px空けて3つ中央に。
   ボタン内は左にテキスト、右に濃紺の丸矢印24px。 */

.review {
  background: #e7e7e7;
  padding: 36px 0 63px;
}
.review-list {
  display: flex;
  justify-content: center;
  gap: 39px;
  margin-top: 44px;
}
.review-btn {
  display: flex;
  align-items: center;
  width: 320px;
  height: 66px;
  padding: 0 25px 0 30px;
  background: #fff;
  font-size: 18px;
  color: #090909;
  transition: opacity .3s ease;
}
.review-btn:hover { opacity: .8; }
.review-arrow {
  flex: none;
  margin-left: auto;
  width: 24px;
  height: 24px;
  background: url("../img/arrow-circle-navy.svg") no-repeat center / contain;
}


/* ---------- SNS ---------- */
/* Figma: 62pxのアイコンを38px空けて3つ中央に */

.sns { padding: 68px 0 40px; }
.sns-list {
  display: flex;
  justify-content: center;
  gap: 72px;
  margin-top: 44px;
}
.sns-list a {
  display: block;
  transition: opacity .3s ease;
}
.sns-list a:hover { opacity: .8; }
.sns-list img { width: 62px; height: 62px; }


/* ---------- GALA MOVIES ---------- */
/* 566x320の動画を 2カラム×2段 で中央に（列間28px・段間40px）。下にタイトル。
   高さは .movie-frame に持たせ、タイトル分は .movie-item が自然に伸びる（段間が詰まらないように） */

.movies { padding: 47px 0 40px; }
.movies-list {
  display: grid;
  grid-template-columns: repeat(2, 566px);
  justify-content: center;
  gap: 40px 28px;
  margin-top: 16px;
}
.movie-item {
  text-align: center;
}
.movie-frame {
  width: 100%;
  height: 320px;
  background: #000;
}
.movie-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.movie-title {
  display: block;
  margin-top: 11px;
  font-size: 14px;
  color: #090909;
}


/* ---------- Instagram ---------- */
/* Figma: 251x335 の投稿を11px空けて4枚並べ、左右に24pxの丸矢印。
   4枚分の幅 251*4 + 11*3 = 1037px を表示枠にして、矢印で1枚ずつ送る。 */

.instagram { padding: 34px 0 50px; }

.insta-slider {
  position: relative;
  width: 1037px;
  margin: 14px auto 0;
}
/* ドラッグでも送れる（top.js）。横方向の操作はJSが受け取り、縦スクロールはブラウザに任せる */
.insta-viewport {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.insta-viewport.is-dragging { cursor: grabbing; }
.insta-viewport.is-dragging a { cursor: grabbing; }
.insta-item img { -webkit-user-drag: none; }
.insta-list {
  display: flex;
  gap: 11px;
  transition: transform .45s ease;
}
.insta-item { flex: none; width: 251px; }
.insta-item img {
  width: 251px;
  height: 335px;
  object-fit: cover;
  transition: opacity .3s ease;
}
.insta-item a:hover img { opacity: .8; }

/* 矢印。Figmaは左右とも同じ「右向き」SVGだったので、左は反転して使っている */
.insta-nav {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  background: url("../img/arrow-circle-navy.svg") no-repeat center / contain;
  transition: opacity .3s ease;
}
.insta-prev {
  left: -36px;
  transform: translateY(-50%) scaleX(-1);
}
.insta-next {
  right: -36px;
  transform: translateY(-50%);
}
.insta-nav:disabled {
  opacity: .25;
  cursor: default;
}


/* ---------- ニュース ---------- */
/* Figma: 幅553pxの一覧を中央に。1件は「日付15px」＋「本文16px/行間23px」 */

.news { padding: 44px 0 71px; }

.news-list {
  width: 553px;
  margin: 38px auto 0;
}
.news-item + .news-item { margin-top: 30px; }
.news-date {
  display: flex;               /* アイコン・日付・NEW の縦位置を中央で揃える */
  align-items: center;
  font-size: 15px;
  line-height: 22px;
  color: #090909;
}
.news-new {                  /* CSVの3列目（NEW）。現行サイトの .new 相当 */
  margin-left: 6px;
  font-size: 12px;
  color: #b3121d;
}
.news-icon {                 /* CSVの5列目（アイコン文言）。白地に枠線＋文字。色は6列目を style 属性で指定（未指定はグレー） */
  display: inline-block;
  min-width: 80px;             /* 文言の長さが違っても後ろの日付が縦に揃うよう幅を固定（長い文言はその分広がる） */
  box-sizing: border-box;
  margin-right: 12px;
  padding: 0 8px;
  border: 1px solid;
  background: #fff;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: .1em;
  text-align: center;
}
.news-body {
  font-size: 16px;
  line-height: 23px;
  color: #090909;
}
/* CSVの本文にリンクが含まれる。デザインに指定がないため通常は下線なし（SPと同じ）、
   ホバーでだけ下線を出して「押せる」ことが分かるようにしている */
.news-body a:hover { text-decoration: underline; }

.news-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 198px;
  height: 48px;
  margin: 25px auto 0;
  border: 1px solid #000;
  background: #fff;
  font-size: 16px;
  color: #090909;
  transition: opacity .3s ease;
}
.news-more:hover { opacity: .7; }


/* ---------- フッター ---------- */
/* Figma: node 364:2「Footer / PC 1440」。マークアップは共通の common_page/footer.html を
   readfile している（下層ページと同じ中身）。css/common.css の footer 系は読み込まないので、
   ここで #footer に限定して組み直している。
   列は「5列＋左右82px余白・列間33px」。1440px時にちょうど 1276px に収まる幅なので、
   その幅の中で space-between にして、狭い画面では列間だけが詰まるようにしている。 */

#footer {
  background: #e5e5e5;
  color: #4d4d4d;
}
#footer .inner {
  display: flex;
  justify-content: space-between;
  width: min(1276px, calc(100% - 40px));
  margin: 0 auto;
  padding: 70px 0 117px;     /* 下はFigmaの固定高さ669pxに合わせた値 */
}
/* footer.html 末尾の空の div は下層ページ（space-around）の余白調整用。トップでは不要なので消す */
#footer .inner > div:last-child { display: none; }

#footer li {
  font-size: 12px;
  font-weight: 500;
  line-height: 33px;
  white-space: nowrap;
}
#footer .title {
  font-size: 14px;
  font-weight: 700;
}
#footer .title ~ .title { margin-top: 16px; }
#footer .title span {        /* REVIEW の「ガラの口コミ」 */
  margin-left: 8px;
  font-size: 12px;
}
/* 10pxの補足（（ブライダル）等）が行の高さを押し広げて1pxずつ下にずれるのを防ぐ */
#footer li span { line-height: 1; }
#footer li a { transition: opacity .3s ease; }
#footer li a:hover { opacity: .6; }

/* 外部リンクのアイコン・電話アイコンは文字の横に並べる（top.css 冒頭の img{display:block} を戻す）。
   middle だと文字の x-height 基準で2pxほど下がるため、行(33px)の上端から Figma の値で置いている */
#footer img { display: inline-block; vertical-align: top; }
#footer .external {
  width: 16px;
  margin: 8.5px 0 0 6px;
}
#footer .tel {
  width: 18px;
  margin: 7px 2px 0 0;
}
#footer li:has(> .tel) { font-weight: 700; }   /* 電話番号は太字 */

#footer .reservation {
  width: fit-content;
  margin-bottom: 22px;
  padding: 5px 10px;
  background: #001030;
  line-height: 21px;
  color: #fff;
}

/* SNSセクション（section.sns）の padding が li.sns にも当たるので打ち消している。
   Figma上の間隔は「グループ間16px＋spacer 7px＋グループ間16px」＝39px。 */
#footer .title.sns {
  display: flex;
  gap: 20px;
  align-items: center;
  height: 28px;
  margin-top: 39px;
  padding: 0;
}
#footer .sns img { display: block; width: 28px; height: 28px; object-fit: contain; }
#footer .sns a:last-child img { width: 26px; }   /* Threads だけ 26×28 */

#footer .copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 67px;              /* 白の区切り10px＋濃紺帯57px */
  border-top: 10px solid #fff;
  background: #001030;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}


/* ---------- 出現アニメーション（下からふわっと） ---------- */
/* 対象は HTML で data-fade を付けた要素。:root.js-fade は index.html の head で付ける
   （JSが動かない／視差効果を減らす設定の環境では付かない＝最初から表示される）。
   画面に入ると top.js が is-inview を付けて表示し、終わったら data-fade ごと外す
   （残すと .brand:hover などの opacity 演出を上書きしてしまうため）。
   時間差は top.js が --fade-delay に入れる。 */
:root.js-fade [data-fade] {
  opacity: 0;
  transform: translateY(40px);
}
:root.js-fade [data-fade].is-inview {
  opacity: 1;
  transform: none;
  transition:
    opacity .9s ease var(--fade-delay, 0s),
    transform .9s cubic-bezier(.22, 1, .36, 1) var(--fade-delay, 0s);
}