/* =========================================================
   HITSUJI GROUP トップページ固有セクション
   design_handoff_hitsuji_group_top のデザイントークンに準拠

   トークン・共通パーツ・ヘッダー・フッターは base.css を参照。
   ここはトップページでのみ読み込む。
   ========================================================= */

/* =========================================================
   HERO
   ========================================================= */
.hgt-hero {
  position: relative;
  height: 100vh;
  min-height: 660px;
  overflow: hidden;
  background: var(--ink-hero);
}
.hgt-hero__bg { position: absolute; inset: 0; }

/* ---- ヒーローのスライド（hero-1.jpg … を重ねてクロスフェード） ----
   常に1枚目を敷いておき、切り替え時だけ上の1枚をフェードさせるので、
   遷移中に背景が透けたり暗転したりしない。 */
.hgt-hero__slide { opacity: 0; transition: opacity 1.6s ease; }
.hgt-hero__slide.is-active { opacity: 1; }
/* JS無効時・1枚のみの場合は先頭を表示したままにする */
.hgt-hero__bg:not([data-hgt-slider]) .hgt-hero__slide:first-child { opacity: 1; }
/* スライドには明るい写真（夕景・屋外など）も入るため、文字が乗る三辺を個別に沈める。
   1枚絵だった頃より強めにしないと、ヘッダーのナビと縦書きキャッチが読めなくなる。 */
.hgt-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* 上：固定ヘッダーのナビ */
    linear-gradient(180deg, rgba(24, 12, 14, .62) 0%, rgba(24, 12, 14, .14) 22%, rgba(24, 12, 14, 0) 40%),
    /* 下：ワードマーク・ロックアップ・CTA */
    linear-gradient(0deg, rgba(24, 12, 14, .74) 0%, rgba(24, 12, 14, .22) 26%, rgba(24, 12, 14, 0) 50%),
    /* 全体：明るい写真でも白文字が浮くようわずかに沈める */
    rgba(18, 11, 12, .14);
}
.hgt-hero__cluster {
  position: absolute;
  left: 40px; bottom: 56px;
  z-index: 2;
  max-width: 620px;
}
.hgt-hero__wordmark { animation: hgt-rise .9s .2s both; }
.hgt-hero__wordmark span {
  display: block;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 72px);
  line-height: 1;
  letter-spacing: .1em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
}
.hgt-hero__wordmark .line1 { color: var(--cream); }
.hgt-hero__wordmark .line2 { color: var(--brick); margin-top: 2px; }
/* 店舗サイト（1枚ページ）のヒーロー見出し。英字ワードマークではなく店名を出す */
.hgt-hero__wordmark--shop {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: clamp(40px, 8vw, 96px);
  letter-spacing: .12em;
  line-height: 1.2;
  color: var(--cream);
}
.hgt-hero__lockup {
  font-size: 13px;
  letter-spacing: .32em;
  color: rgba(244, 238, 228, .85);
  margin-top: 20px;
  animation: hgt-rise .9s .5s both;
}
.hgt-hero__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  animation: hgt-rise .9s .6s both;
}
.hgt-hero__reserve {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .2em;
  color: #fff;
  background: var(--red);
  padding: 15px 30px;
  transition: transform .3s;
}
.hgt-hero__reserve:hover { transform: translateY(-3px); color: #fff; }
.hgt-hero__reserve-txt { font-size: 12px; letter-spacing: .2em; color: rgba(244, 238, 228, .78); }
.hgt-hero__scroll {
  position: absolute;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.hgt-hero__scroll span { font-family: var(--font-en); font-size: 10px; letter-spacing: .4em; color: rgba(242, 236, 226, .55); }
.hgt-hero__scroll i { width: 1px; height: 34px; background: linear-gradient(180deg, rgba(192, 86, 74, .7), transparent); }

/* =========================================================
   CONCEPT
   ========================================================= */
.hgt-concept { padding: var(--sec-pad) 40px; background: var(--paper); }
.hgt-concept__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: center;
}
.hgt-concept__title {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.5;
  letter-spacing: .08em;
  color: var(--ink);
  margin-bottom: 48px; /* 英字サブを外した分の余白を確保 */
}
.hgt-concept__body {
  font-size: 15px;
  line-height: var(--body-lh);
  letter-spacing: .05em;
  color: #4a3230;
  margin-bottom: var(--para-gap);
  text-wrap: pretty;
}
.hgt-concept__body:last-child { margin-bottom: 0; }
.hgt-concept__imgs { position: relative; }
.hgt-concept h2, .hgt-menu__head h2, .hgt-store__body h3, .hgt-recruit__inner h2 { text-wrap: balance; }
.hgt-dish__desc, .hgt-news__row .title { text-wrap: pretty; }
/* 同サイズの縦位置（2:3）2枚を、角が少し重なる程度にずらして配置 */
.hgt-concept__main {
  width: 52%;
  margin-left: auto;
  aspect-ratio: 2 / 3;
  box-shadow: 0 24px 50px rgba(61, 20, 32, .22);
}
.hgt-concept__subimg {
  position: absolute;
  bottom: -72px; left: 0;
  width: 52%;
  aspect-ratio: 2 / 3;
  box-shadow: 0 24px 50px rgba(61, 20, 32, .28);
}

/* =========================================================
   三つの主義
   ========================================================= */
.hgt-principles {
  position: relative;
  padding: var(--sec-pad) 40px;
  background: var(--ink);
  color: var(--cream2);
  overflow: hidden;
}
.hgt-principles__deco {
  position: absolute;
  top: -40px; right: -10px;
  font-family: var(--font-en);
  font-size: clamp(160px, 26vw, 380px);
  color: rgba(192, 86, 74, .05);
  line-height: .8;
  user-select: none;
  pointer-events: none;
}
.hgt-principles .hgt-sechead h2 { letter-spacing: .3em; }
.hgt-principles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(192, 86, 74, .2);
  position: relative;
}
.hgt-principle {
  background: var(--ink);
  padding: 54px 34px;
  text-align: center;
  transition: background .4s;
}
.hgt-principle:hover { background: var(--hover-dark); }
.hgt-principle__kanji { font-family: var(--font-ja); font-weight: 800; font-size: 64px; color: var(--brick); line-height: 1; }
.hgt-principle__en { font-family: var(--font-en); font-size: 18px; letter-spacing: .2em; color: var(--brick); margin: 14px 0 22px; }
.hgt-principle p { font-size: 14px; line-height: var(--body-lh); letter-spacing: .08em; color: rgba(242, 236, 226, .82); text-wrap: pretty; }

/* =========================================================
   MENU
   ========================================================= */
.hgt-menu { padding: var(--sec-pad) 40px; background: var(--paper); }
/* 見出しは他セクションと同じく中央、VIEW ALL MENU は右端のまま。
   左右を同じ 1fr にした3カラムにして、リンクの幅に影響されず見出しが中央に来るようにする。 */
.hgt-menu__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  margin-bottom: var(--sechead-mb);
  gap: 20px;
  text-align: center;
}
.hgt-menu__head > div { grid-column: 2; }
.hgt-menu__head .hgt-textlink { grid-column: 3; justify-self: end; }
.hgt-menu__head h2 {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: .1em;
  color: var(--ink);
}
.hgt-dishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.hgt-dish__img { aspect-ratio: 4 / 3; }
.hgt-dish__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 18px;
  gap: 12px;
}
.hgt-dish__row h3 { font-family: var(--font-ja); font-weight: 700; font-size: 19px; letter-spacing: .06em; color: var(--ink); }
.hgt-dish__price { font-family: var(--font-en); font-size: 16px; color: var(--red); white-space: nowrap; }
.hgt-dish__price small { font-size: .7em; margin-left: .2em; }
.hgt-dish__en { font-family: var(--font-en); font-size: 12px; letter-spacing: .14em; color: var(--red); margin: 6px 0 8px; }
.hgt-dish__desc { font-size: 12.5px; line-height: 2; letter-spacing: .04em; color: var(--body-gray); }

/* =========================================================
   STORES
   ========================================================= */
.hgt-stores { padding: var(--sec-pad) 40px; background: var(--ink-2); color: var(--cream2); }
.hgt-stores__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.hgt-store { background: var(--card-dark); border: 1px solid rgba(192, 86, 74, .18); }
.hgt-store__img { aspect-ratio: 16 / 10; }
.hgt-store__area {
  position: absolute;
  top: 20px; left: 20px;
  background: var(--red);
  color: var(--cream2);
  font-family: var(--font-ja);
  font-size: 12px;
  letter-spacing: .2em;
  padding: 7px 14px;
}
.hgt-store__body { padding: 38px 36px 40px; }
.hgt-store__en { font-family: var(--font-en); font-size: 15px; letter-spacing: .18em; color: var(--brick); margin-bottom: 6px; }
.hgt-store__body h3 { font-family: var(--font-ja); font-weight: 700; font-size: 28px; letter-spacing: .12em; margin-bottom: 10px; }
.hgt-store__tagline { font-size: 13.5px; line-height: var(--body-lh); letter-spacing: .06em; color: rgba(242, 236, 226, .72); margin-bottom: 26px; text-wrap: pretty; }
.hgt-store__info {
  margin-bottom: 30px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
  font-size: 12.5px;
  letter-spacing: .06em;
}
.hgt-store__info dt { color: var(--brick); }
.hgt-store__info dd { margin: 0; color: rgba(242, 236, 226, .85); line-height: 1.7; }
.hgt-store__info dd a:hover { color: var(--brick); }
.hgt-store__btns { display: flex; gap: 12px; }
.hgt-store__btns a { flex: 1; padding: 14px; }

/* =========================================================
   NEWS
   ========================================================= */
/* 行そのもののスタイルは base.css（お知らせ一覧ページと共有） */
.hgt-news { padding: var(--sec-pad) 40px; background: var(--paper); }
.hgt-news .hgt-sechead { margin-bottom: 24px; }
.hgt-news .hgt-sechead h2 { font-size: clamp(28px, 3.6vw, 44px); }
.hgt-news__more { text-align: right; margin-bottom: 18px; }

/* =========================================================
   RECRUIT
   ========================================================= */
.hgt-recruit {
  position: relative;
  padding: var(--sec-pad) 40px;
  background: var(--ink-2);
  color: var(--cream2);
  overflow: hidden;
}
/* 背景はスタッフのコラージュ（4:3）。
   全幅に敷くと高さが幅の3/4になり、帯としては大きすぎる。
   横長の帯に収めるため cover で切り抜くが、顔が切れないよう
   object-position を上寄り（顔の帯）に固定する。 */
.hgt-recruit {
  padding: 0;
  height: clamp(340px, 32vw, 520px);
}
.hgt-recruit__bg { position: absolute; inset: 0; opacity: .72; }
.hgt-recruit__bg .hgt-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}
.hgt-recruit__bg > span { position: absolute; top: 20px; left: 20px; } /* 中央のコピーと重ならないよう退避 */
.hgt-recruit__scrim {
  position: absolute;
  inset: 0;
  /* 中央（文字が乗る帯）を最も濃くする。
     写真を活かすため上下は薄く。中央は白文字のコントラストを確保できる濃さに留める。 */
  background: linear-gradient(180deg, rgba(18, 14, 13, .34) 0%, rgba(18, 14, 13, .58) 50%, rgba(18, 14, 13, .34) 100%);
  pointer-events: none;
}
.hgt-recruit__inner { position: relative; max-width: 760px; margin-inline: auto; text-align: center; }
.hgt-recruit__inner .hgt-label { margin-bottom: 16px; }
.hgt-recruit__inner h2 {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 50px);
  letter-spacing: .16em;
  margin-bottom: 14px;
}
.hgt-recruit__sub { font-family: var(--font-ja); font-size: 14px; letter-spacing: .2em; color: var(--brick); margin-bottom: 26px; }
.hgt-recruit__body { font-size: 14px; line-height: var(--body-lh); letter-spacing: .08em; color: rgba(242, 236, 226, .82); margin-bottom: 38px; text-wrap: pretty; }
.hgt-recruit__btn { font-size: 14px; letter-spacing: .18em; padding: 16px 40px; }
.hgt-recruit__btn:hover { transform: translateY(-3px); }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 960px) {
  .hgt-concept,
  .hgt-principles,
  .hgt-menu,
  .hgt-stores,
  .hgt-news,
  .hgt-recruit { padding-inline: 24px; }

  .hgt-concept__grid { grid-template-columns: 1fr; gap: 72px; }
  /* width: 100% は必須。auto マージンを付けたグリッドアイテムは stretch されず、
     中身が % 幅／絶対配置のこのブロックは幅0に潰れて写真が消えてしまう。 */
  .hgt-concept__imgs { width: 100%; max-width: 480px; margin-inline: auto; margin-bottom: 72px; } /* 左下画像のはみ出し分を確保 */
  .hgt-principles__grid { grid-template-columns: 1fr; }
  /* 幅が足りない画面では、見出し（中央）とリンク（右）を上下に分ける */
  .hgt-menu__head { grid-template-columns: 1fr; gap: 14px; }
  .hgt-menu__head > div,
  .hgt-menu__head .hgt-textlink { grid-column: 1; }
  .hgt-dishes { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .hgt-stores__grid { grid-template-columns: 1fr; }

  .hgt-hero__cluster { left: 24px; bottom: 48px; right: 24px; }
}

@media (max-width: 560px) {
  /* ロックアップが2行に折れて1文字だけ落ちるのを防ぐ */
  .hgt-hero__lockup { font-size: 11px; letter-spacing: .18em; white-space: nowrap; }

  /* CTA行とSCROLLインジケータが重なるため非表示 */
  .hgt-hero__scroll { display: none; }

  .hgt-dishes { grid-template-columns: 1fr; }
  .hgt-store__body { padding: 28px 24px 30px; }
  .hgt-store__btns { flex-direction: column; }
  .hgt-hero__cta { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* 採用セクション（広い画面）: 画像を全幅で敷き、文字はその上に重ねる。
   ここは元の .hgt-recruit__inner より後に置くこと（そうしないと position が上書きされる）。 */
@media (min-width: 901px) {
  .hgt-recruit__inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-inline: auto;
    padding: 40px;
  }
}

/* 採用セクション: 狭い画面は文字量に対して帯が足りないので、高さを自動にする。 */
@media (max-width: 900px) {
  .hgt-recruit { height: auto; padding-block: 56px; }
  .hgt-recruit__inner { position: static; inset: auto; padding: 0 24px; }
}