/* ============================================================
   IYOSUI Theme - Top Page (front-page.php)
   ============================================================ */

/* ---- ① Hero ---------------------------------------------- */
.top-hero {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-pull)); /* 260703校正: 透過ヘッダーにMovieが透けて見えるように */
}

/* 動画はフロー配置：セクション下端＝動画下端が一致する */
.top-hero__video {
  display: block;
  width: 100%;
  max-width: none;   /* 両端を切らず、画面幅に応じて拡大（クライアント指示 260701） */
  height: auto;
  margin-inline: auto;
}

/* 動画が無い場合のフォールバック背景（実寸が無いのでアスペクト比で高さ確保） */
.top-hero__bg {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}

.top-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
}

.top-hero__copy {
  display: flex;
  flex-direction: column;
  gap: .6em;
  font-weight: 700;
  text-shadow: 0 2px 24px rgba(0,30,45,.45);
}

.top-hero__copy-ja {
  font-size: 54px;
  letter-spacing: .08em;
  line-height: 1.4;
}

.top-hero__copy-en {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .28em;
  text-transform: none;
  opacity: .92;
}

/* ---- ② Lead ---------------------------------------------- */
.top-lead {
  text-align: center;
  padding-block: 112px;   /* 内容254px+224 = 478px = カンプ lead帯(native342×1.397) に一致 */
}

.top-lead__heading-en {
  font-family: var(--font-en);
  font-size: 30px;           /* .ai 21pt × 1.42536 */
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  color: #796428;            /* Figma実測ゴールド */
  margin-bottom: 0;
}

.top-lead__heading {
  font-size: 20px;           /* 260703校正: リード文「少し小さく」(23→20) */
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--color-gold);
  margin-bottom: 56px;       /* 260703校正: 「生産から加工…」の前に一行アケル(25→56) */
}

.top-lead__body {
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--color-text-teal);
  margin: 0;
}

.top-lead__body + .top-lead__body {
  margin-top: 46px;
}

/* ---- ③ Brand Story --------------------------------------- */
.top-brand-story {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1685 / 592;  /* 260720ユーザー指定: 支給背景の比率で表示 */
  overflow: hidden;
  color: #fff;
  text-align: center;
}

.top-brand-story__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.2s ease;
}

.top-brand-story:hover .top-brand-story__bg { transform: scale(1.05); }

.top-brand-story__overlay {
  position: absolute;
  inset: 0;
  background: rgba(3,40,63,.38); /* 260703校正: 文字を見やすく(イラレ準拠で色のせ強め) */
}

.top-brand-story__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;                  /* 260703校正: 行間ツメル(16→8) */
}

/* 260704指示: ホバー時も文字色は白のまま（a:hoverのティール化を打ち消し） */
.top-brand-story:hover { color: #fff; }

.top-brand-story__ja {
  font-size: 26px;           /* 260708校正: 「私たちが大切にしている想い」やや小さく(31→26) */
  font-weight: 400;
  letter-spacing: .04em;     /* 260704指示: 字間さらにツメ(.1→.04) */
  margin-top: 51px;
  margin-bottom: 0;
}

.top-brand-story__en {
  font-family: var(--font-en);
  font-size: 29px;           /* .ai 20pt × 1.42536 */
  font-weight: 400;
  letter-spacing: .04em;     /* 260704指示: 字間さらにツメ(.1→.04) */
}

.top-brand-story__since {
  font-family: var(--font-en);
  font-size: 23px;           /* .ai 16pt × 1.42536 */
  font-weight: 400;
  letter-spacing: .04em;     /* 260704指示: 字間さらにツメ(.12→.04) */
  margin-top: -20px;         /* 260704ユーザー確定値 */
}

/* ---- Inline section heading (「日本語 - ENGLISH」カンプ形式) ---- */
.sec-head--inline .sec-head__ja {
  color: #007681;            /* カンプ: 見出しはティール */
  font-size: 22px;
  font-weight: 500;          /* JA部は標準ウェイト */
  letter-spacing: .08em;
  position: relative;
  left: -6px;
}

.sec-head__en-inline {
  font-family: var(--font-en);
  font-size: 25px;
  font-weight: 700;          /* EN部はボールド */
  letter-spacing: .06em;
  margin-left: .4em;
  position: relative;
  left: -4px;
}

/* ---- ④ IYOSUI Quality ------------------------------------ */
.top-quality {
  padding-block: 130px;
}

.quality-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* カンプ: 2×2 */
  gap: 36px 32px;
}

.quality-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.quality-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.quality-card__img {
  position: relative;
  height: 226px;             /* カンプの画像帯 (native324×0.6985) */
  background: var(--color-primary-dark);
  overflow: hidden;
}

.quality-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.quality-card:hover .quality-card__img img { transform: scale(1.06); }

.quality-card__img-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 16px;
  background: none;   /* 260719: 書き出し画像(top-card-*)に青の色のせが焼き込み済みのためCSS側の重ねを廃止 */
}

.quality-card__ja {
  color: #fff;
  font-size: 26px;           /* .ai 18pt × 1.42536 */
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1.3;
}

.quality-card__en {
  color: #fff;
  font-family: var(--font-en);
  font-size: 21px;           /* .ai 15pt × 1.42536 */
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.3;
}

.quality-card__body {
  padding: 30px 24px;
  text-align: center;
  background: var(--color-bg);
}

.quality-card__sub {
  font-size: 21px;           /* .ai 15pt × 1.42536 */
  font-weight: 300;          /* 260703校正: キャッチ文「細字に」 */
  color: var(--color-gold);  /* 260703校正: ゴールド統一(#796428) */
  letter-spacing: .04em;
  line-height: 1.6;
}

/* ---- ⑤ Fish Brand ---------------------------------------- */
.top-fish { padding-top: 130px; }

/* カンプ準拠: 1段目4種 + 2段目5種。
   gridだと列幅が段で変わり魚と魚の間隔が不揃いになるため、flex＋中央寄せ＋
   固定の列gapで両段とも等間隔にする。4個目の後の .fish-grid__break で改行。 */
.fish-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-lg) 44px;   /* row-gap / column-gap（両段共通の等間隔） */
  max-width: 980px;
  margin-inline: auto;
}

/* 強制改行（1段目4個 → 2段目5個）。狭幅では自然折り返しに任せる */
.fish-grid__break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}

/* 2段目（break以降）を 105px 上に詰める */
.fish-grid__break ~ .fish-item { margin-top: -105px; }

/* 各魚を円と同じ固定幅にして、英名の長短に依らず間隔を均一にする */
.fish-item {
  width: 150px;
  flex: 0 0 auto;
}

.fish-item__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .12rem;               /* 260703校正: 和名/英名の行間ツメ */
}

.fish-item__circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .35rem;
  transition: transform var(--transition), box-shadow var(--transition);
}

.fish-item__link:hover .fish-item__circle {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.fish-item__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fish-item__ja {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;          /* 260721: 和名↔英名の間を詰める */
  color: var(--color-text-teal); /* 260708校正: 文字色濃く(他と同じ#007c8f・半透明primary廃止) */
}

.fish-item__en {
  font-family: var(--font-en);
  font-size: 16px;           /* 260704ユーザー確定値(14→16) */
  letter-spacing: .04em;
  line-height: 1.2;
  margin-top: 0;             /* 260721web校正(01_1): 詰まりすぎ→もう少しアケル(-3px→0) */
  color: var(--color-text-teal); /* 260708校正: 文字色濃く(他と同じ) */
}

/* ---- ⑥ Banner Grid --------------------------------------- */
.top-banners { padding-top: 127px; background: var(--color-bg); } /* 260703校正: 白地+薄地カード(商品紹介と同デザイン) */

.top-banner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}

.top-banner-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  min-height: 190px;
  padding: 24px;
  background: var(--color-bg-light); /* 260703校正: 商品紹介の関連カードと同デザイン(薄地フラット) */
  border-radius: 0;
  transition: opacity var(--transition);
}

.top-banner-item:hover { opacity: .8; }

.top-banner-item__ja {
  font-size: 20px;           /* .ai 14pt × 1.42536 */
  font-weight: 400;
  color: #796428;            /* Figma実測ゴールド */
  letter-spacing: .04em;
}

.top-banner-item__en {
  font-family: var(--font-en);
  font-size: 20px;
  letter-spacing: 0;
  color: #796428;            /* Figma実測ゴールド */
}

/* ---- ⑦ News ---------------------------------------------- */
.top-news { padding-top: 120px; }

/* カンプ: 日付 / カテゴリー / 短文(タイトル) を罫線なしテーブルで表記 */
.news-table {
  width: 100%;
  border-collapse: collapse;
}

.news-table td {
  border: none;
  background: none;
  padding: 2px 0;
  vertical-align: top;
  line-height: 1.6;
  color: var(--color-text-teal); /* 260703校正: 一覧の文字色すべて同じ色に */
}

.news-table td a { color: var(--color-text-teal); }

.news-table__date {
  width: 7em;
  white-space: nowrap;
  font-family: var(--font-en);
  font-size: 15px;               /* 260703校正: タイトル(15px)とサイズを揃えヨコを揃える */
  color: var(--color-text-teal);
}

.news-table__cat {
  width: 9em;
  white-space: nowrap;
  padding-right: 1.4em;
  color: var(--color-text-sub);
  letter-spacing: .04em;
}

.news-table__title {
  font-size: 15px;
}

.news-table__title a { transition: color var(--transition); }

/* 行のどこにマウスが乗っても、タイトルが下線＋ティールに変わる */
.news-table__title a:hover,
.news-table__row:hover .news-table__title a {
  color: var(--color-primary);
  text-decoration: underline;
}

.news-table__row { cursor: pointer; }

/* コンテナ幅・余白の微調整（目視合わせ） */
.section--bg-seafoam .container {
  max-width: 1046px;
}

.top-news .container.container--narrow {
  max-width: 1046px;
  padding-left: 33px;
  padding-right: 33px;
}

/* 狭幅: 日付＋カテゴリーを1行目、タイトルを2行目に積む */
@media (max-width: 600px) {
  .news-table,
  .news-table tbody,
  .news-table__row { display: block; }
  .news-table__date,
  .news-table__cat {
    display: inline-block;
    width: auto;
    padding: 10px 1em 0 0;
  }
  .news-table__title {
    display: block;
    padding: 2px 0 10px;
  }
}

.top-news__read-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  margin-top: var(--sp-lg);
  color: var(--color-primary);
  font-family: var(--font-en);
  font-size: .75rem;
  letter-spacing: 0.1em;  /* 260720ユーザー指定: Read moreの字間(.15→.1em) */
  transition: opacity var(--transition);
}

.top-news__read-more:hover { opacity: .65; color: var(--color-primary); }

.top-news__read-more svg {
  width: 28px;   /* 260720ユーザー指定: Read moreのシェブロンを少し大きく(20→28) */
  height: 28px;
  animation: top-hero-bounce 2s ease-in-out infinite;
}

/* ---- Responsive ------------------------------------------ */
@media (max-width: 960px) {
  .quality-grid { grid-template-columns: repeat(2, 1fr); }

  /* 魚グリッド: 強制改行を解除し、固定幅150pxのまま自然折り返し（中央寄せ・等間隔） */
  .fish-grid { gap: var(--sp-md) var(--sp-sm); }
  .fish-grid__break { display: none; }
  .fish-grid__break ~ .fish-item { margin-top: 0; }   /* 折り返し時は詰めを解除 */

  .top-banner-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .quality-grid    { grid-template-columns: 1fr; }
  .fish-grid       { gap: var(--sp-md) 16px; }
  .top-banner-grid { grid-template-columns: 1fr; }
}