@charset "utf-8";

/* トップページ（/）。<main class="l-main p-top"> の中だけに効く。Figma: file MZTIeKqn8jFYQbO61SpZb5 / frame 2222:423「トップページ ｜ 淀川の空撮＋左の縦長すりガラス」
 * 経緯・決定事項: _claude/top-page-brainstorm.md（2026-09-29 まで）
 * 下層ページ（本文幅 940）と違い、トップは Figma どおり本文幅 1200（.p-top-container）
 * タイルの中の英字（小見出し・ラベル・タグ）は Figma では JetBrains Mono 10px。サイトの最小 13px にすると等幅では 183px のタイルに入らないので Noto Sans JP にした（2026-09-29）
 * SP は Figma に無いので実装で決めた（2026-09-29）：FV は写真の下にすりガラスの帯／タイルは2列／お知らせ・Contact は縦に積む */

.p-top {
  --top-width-container: 1200px;
  --top-color-navy: #0b2a4a;      /* FV のキャッチ（Figma catch） */
  --top-color-rule: #c7ccd4;      /* お知らせの行の上の線 */
  --top-color-kenko: #1f8f7e;     /* 健康経営優良法人の緑（旧バナー04 の CERTIFIED の色） */
  --top-font-serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --top-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --top-inset: max(var(--padding-inline), calc((100% - var(--top-width-container)) / 2)); /* 画面の端から本文の左端まで */
}

.p-top-container {
  width: 100%;
  max-width: calc(var(--top-width-container) + var(--padding-inline) * 2);
  margin-inline: auto;
  padding-inline: var(--padding-inline);
}

/* ============================================================
 * FV — 写真を全面に、左に縦長のすりガラス（Figma 2220:1842）
 * ============================================================ */
.p-top-hero {
  position: relative;
  height: 520px;
  overflow: hidden;
}

.p-top-hero__photo,
.p-top-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
}

.p-top-hero__photo img {
  object-fit: cover;
}

/* すりガラス：左端から、本文の左端＋440px まで（1440px 幅で 560px） */
.p-top-hero__glass {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(var(--top-inset) + 440px);
  padding: 0 var(--space-24) var(--space-56) var(--top-inset);
  background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .34));
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  border-right: 1px solid rgba(255, 255, 255, .85);
}

.p-top-hero__catch {
  font-family: var(--top-font-serif);
  font-size: var(--font-size-hero);
  font-weight: 600;
  line-height: var(--line-height-heading);
  letter-spacing: .04em;
  color: var(--top-color-navy);
}

.p-top-hero__rule {
  display: block;
  width: 40px;
  height: 1px;
  margin-top: var(--space-28);
  background: var(--color-brand);
}

.p-top-hero__sub {
  margin-top: var(--space-16);
  font-family: var(--top-font-serif);
  font-size: var(--font-size-body); /* 15px は明朝だと細く小さく見える（2026-09-29 ユーザー）→ 読ませる文の大きさ PC18／SP16 */
  font-weight: 500;
  line-height: var(--line-height-label);
  letter-spacing: .08em;
  color: var(--color-brand);
}

/* スクロール誘導：縦書きの SCROLL と、上から下へ流れる線（Figma 2255:94） */
.p-top-hero__scroll {
  position: absolute;
  left: max(var(--space-16), calc(var(--top-inset) - 68px));
  bottom: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  color: var(--top-color-navy);
}

.p-top-hero__scroll-label {
  writing-mode: vertical-rl;
  font-family: var(--top-font-mono);
  font-size: var(--font-size-label-small);
  font-weight: 500;
  letter-spacing: .24em;
  opacity: .8;
}

.p-top-hero__scroll-line {
  position: relative;
  width: 1px;
  height: 88px;
  overflow: hidden;
  background: rgba(11, 42, 74, .25);
}

.p-top-hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--top-color-navy);
  transform: translateY(-100%);
  animation: p-top-scroll-line 2.4s var(--ease-base) infinite;
}

@keyframes p-top-scroll-line {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .p-top-hero__scroll-line::after {
    animation: none;
    transform: none;
    height: 50%;
  }
}

/* ノートPC（高さの低い画面）ではFVを縮めて、下のナビが最初の画面に見えるように */
@media (min-width: 768px) and (max-height: 820px) {
  .p-top-hero {
    height: clamp(420px, calc(100svh - 300px), 520px);
  }
}

/* 本文の左に余白が無い幅では、スクロール誘導を置く場所が無いので出さない */
@media (max-width: 1279px) {
  .p-top-hero__scroll {
    display: none;
  }
}

/* SP：写真を上に、すりガラスは写真の下端に重なる横帯 */
@media (max-width: 767px) {
  .p-top-hero {
    height: auto;
  }

  .p-top-hero__photo {
    height: 420px;
  }

  .p-top-hero__glass {
    inset: auto 0 0 0;
    width: auto;
    padding: var(--space-24) var(--padding-inline) var(--space-28);
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, .85);
  }


  .p-top-hero__rule {
    margin-top: var(--space-16);
  }

  .p-top-hero__sub {
    margin-top: var(--space-10);
  }

  .p-top-hero__scroll {
    display: none;
  }
}

/* ============================================================
 * 知りたいことからさがす — 大きいボタンのナビ（Figma 2222:437）
 * ============================================================ */
.p-top-explore {
  padding-block: 76px 84px;
}

.p-top-explore__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-14);
  margin-bottom: var(--space-32);
  text-align: center;
}

/* ロゴの「連結」の3本線（Figma connector-motif） */
.p-top-explore__motif {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 26px;
}

.p-top-explore__motif span {
  width: 5px;
  height: 18px;
  background: var(--color-brand);
}

.p-top-explore__motif span:nth-child(2) {
  height: 26px;
}

.p-top-explore__title {
  font-size: var(--font-size-heading-1);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

.p-top-explore__lead {
  font-size: var(--font-size-label-small);
  line-height: var(--line-height-label);
  color: var(--color-text-mute);
}

/* 上段：50周年（左・2段ぶち抜き）＋外壁（右上）＋建築・健康（右下） */
.p-top-explore__feature {
  display: grid;
  grid-template-columns: 500fr 326fr 326fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-24);
  aspect-ratio: 1200 / 380;
}

.p-top-explore__feature > :nth-child(1) { grid-row: 1 / 3; }
.p-top-explore__feature > :nth-child(2) { grid-column: 2 / 4; }

/* 下段：小さいボタン6枚 */
.p-top-explore__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-20);
  margin-top: var(--space-28);
}

.p-top-explore__list > * {
  aspect-ratio: 183 / 150;
}

/* 1200px を切る幅：上段は少し縦長に（見出しがロゴの面にぶつからないよう）、下段は3列×2段 */
@media (min-width: 768px) and (max-width: 1279px) {
  .p-top-explore__feature {
    aspect-ratio: 1200 / 460;
  }

  .p-top-explore__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .p-top-explore__list > * {
    aspect-ratio: 2 / 1;
  }
}

@media (max-width: 767px) {
  .p-top-explore {
    padding-block: var(--space-56) var(--space-64);
  }

  .p-top-explore__head {
    gap: var(--space-10);
    margin-bottom: var(--space-24);
  }


  .p-top-explore__feature {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: var(--space-12);
    aspect-ratio: auto;
  }

  .p-top-explore__feature > :nth-child(1) { grid-row: auto; grid-column: 1 / 3; aspect-ratio: 500 / 380; }
  .p-top-explore__feature > :nth-child(2) { grid-column: 1 / 3; aspect-ratio: 343 / 150; }
  .p-top-explore__feature > :nth-child(n+3) { aspect-ratio: 1 / 1; }

  .p-top-explore__list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    margin-top: var(--space-12);
  }

  .p-top-explore__list > * {
    aspect-ratio: 1 / 1;
  }
}

/* ---------- タイル（写真＋青いグラデ＋白い文字） ---------- */
.p-top-tile {
  --tile-scrim: linear-gradient(to bottom, rgba(var(--color-scrim-rgb), .28), rgba(var(--color-scrim-rgb), .5) 50%, rgba(var(--color-scrim-rgb), .86));
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  min-width: 0;
  padding: var(--space-20) var(--space-20) var(--space-18);
  overflow: hidden;
  border-radius: var(--radius-8);
  color: var(--color-white);
  background: var(--color-brand);
}

/* 大きいタイルはグラデを薄く（写真を見せる） */
.p-top-tile--large {
  --tile-scrim: linear-gradient(to bottom, rgba(var(--color-scrim-rgb), .1), rgba(var(--color-scrim-rgb), .24) 50%, rgba(var(--color-scrim-rgb), .8));
  padding-bottom: var(--space-20);
}

.p-top-tile__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-base);
}

.p-top-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tile-scrim);
}

.p-top-tile__title {
  font-size: var(--font-size-title-small);
  font-weight: 700;
  line-height: var(--line-height-heading);
  word-break: auto-phrase; /* 狭いタイルで「創／エネ」のように語の途中で折り返さない */
}

.p-top-tile--large .p-top-tile__title {
  font-size: var(--font-size-title);
}

.p-top-tile__en {
  padding-right: var(--space-24); /* 右下の矢印（同じ行）とくっつかないように */
  font-size: var(--font-size-label-small);
  font-weight: 500;
  line-height: var(--line-height-label);
  color: rgba(255, 255, 255, .8);
}

.p-top-tile__arrow {
  position: absolute;
  right: var(--space-20);
  bottom: var(--space-18);
  font-size: var(--font-size-label);
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-base);
}

.p-top-tile--large .p-top-tile__arrow {
  bottom: var(--space-20);
}

@media (hover: hover) {
  /* 1.05 は「もう少し大きく」（2026-09-29 ユーザー）→ 1.08 */
  .p-top-tile:hover .p-top-tile__image {
    transform: scale(1.08);
  }

  .p-top-tile:hover .p-top-tile__arrow {
    transform: translateX(4px);
  }
}

.p-top-tile:focus-visible {
  outline: 3px solid rgba(var(--color-shadow-card-rgb), .35);
  outline-offset: 2px;
}

/* 50周年：絵は明るいので、下だけ青く（Figma scrim 10→24→80%） */
.p-top-tile--anniversary {
  background: #fcfbf7;
  box-shadow: inset 0 0 0 1px #e3e1dc;
}

/* 見出しの上のラベル（健康経営の「CERTIFIED 2026」）。SDGs の「≫ Next KYODO GROUP」は 10.2 修正依頼で削除 */
.p-top-tile__tag {
  align-self: flex-start;
  margin-bottom: var(--space-10);
  padding: 3px var(--space-8);
  border-radius: var(--radius-3);
  font-size: var(--font-size-label-small);
  font-weight: 500;
  line-height: var(--line-height-label);
  letter-spacing: .08em;
  background: var(--top-color-kenko);
}

/* 上端の帯（SDGs＝17色／健康経営＝緑） */
.p-top-tile__bar {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  height: 4px;
}

.p-top-tile__bar span {
  flex: 1;
}

.p-top-tile__bar--kenko {
  background: var(--top-color-kenko);
}

/* 右上の角にくっつけた白い面（ロゴを入れる。ロゴは加工しない） */
.p-top-tile__logo {
  position: absolute;
  top: 4px;
  right: 0;
  display: grid;
  place-items: center;
  width: 64px;
  height: 60px;
  border-bottom-left-radius: var(--radius-8);
  background: var(--color-white);
}

.p-top-tile__logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.p-top-tile__logo--kenko {
  width: 112px;
  height: 100px;
}

.p-top-tile__logo--kenko img {
  width: 100px;
  height: 88px;
}

@media (max-width: 1279px) {
  .p-top-tile__logo--kenko {
    width: 84px;
    height: 75px;
  }

  .p-top-tile__logo--kenko img {
    width: 76px;
    height: 67px;
  }
}

.p-top-tile__handshake {
  position: absolute;
  top: 26px;
  left: 70px;
  z-index: -1;
  width: 84px;
  height: 84px;
  color: var(--color-white);
  opacity: .22;
}

@media (max-width: 767px) {
  /* 2列の小さいタイルでは英字の小見出しを出さない（幅が狭く、右下の矢印ともぶつかるため。2026-09-29） */
  .p-top-explore__feature > :nth-child(n+3) .p-top-tile__en,
  .p-top-explore__list .p-top-tile__en {
    display: none;
  }

  /* 健康経営の「CERTIFIED 2026」も、2列の狭いタイルでは入らず2行に割れるので出さない（上端の帯とロゴは残す） */
  .p-top-tile__tag {
    display: none;
  }

  /* 英字を出さない2列のタイルは右下の矢印も出さない（見出しとぶつかるため。タイル全体がリンク） */
  .p-top-explore__feature > :nth-child(n+3) .p-top-tile__arrow,
  .p-top-explore__list .p-top-tile__arrow {
    display: none;
  }

  .p-top-tile {
    padding: var(--space-16) var(--space-16) var(--space-14);
  }

  .p-top-tile__arrow {
    right: var(--space-14);
    bottom: var(--space-14);
  }

  .p-top-tile__logo--kenko {
    width: 76px;
    height: 68px;
  }

  .p-top-tile__logo--kenko img {
    width: 68px;
    height: 60px;
  }

  .p-top-tile__logo {
    width: 52px;
    height: 48px;
  }

  .p-top-tile__logo img {
    width: 32px;
    height: 32px;
  }
}

/* ============================================================
 * お知らせ — 左に大きな見出し、右に一覧（g1-g.jp の Information 欄にならう。Figma 2370:423）
 * ============================================================ */
.p-top-news {
  padding-top: var(--space-24);
}

.p-top-news__inner {
  display: grid;
  grid-template-columns: 1fr 760px;
  align-items: center;
  column-gap: var(--space-40);
}

.p-top-news__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-28);
}

.p-top-news__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p-top-news__title-en {
  font-size: var(--font-size-display); /* 9.29追加依頼「下の Contact と同じ大きさでいい」 */
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-ink);
}

.p-top-news__title-ja {
  font-size: var(--font-size-label-small);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-brand);
}

/* 「お知らせ一覧」：白地に青い線の丸いボタン。ホバーで青地に反転 */
.p-top-news__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-10) var(--space-16) var(--space-10) var(--space-18);
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1.5px var(--color-brand);
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-brand);
  background: var(--color-white);
  transition: background-color var(--duration-base) var(--ease-base), color var(--duration-base) var(--ease-base);
}

.p-top-news__more-arrow {
  font-size: var(--font-size-label);
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-base);
}

@media (hover: hover) {
  .p-top-news__more:hover {
    background: var(--color-brand);
    color: var(--color-white);
  }

  .p-top-news__more:hover .p-top-news__more-arrow {
    transform: translateX(3px);
  }
}

.p-top-news__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-top-news__item {
  position: relative;
  border-top: 1px solid var(--top-color-rule);
}

/* 線の左端だけ青く */
.p-top-news__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 140px;
  height: 2px;
  background: var(--color-brand);
}

.p-top-news__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: 22px var(--space-20);
  color: var(--color-ink);
}

.p-top-news__meta {
  display: flex;
  align-items: center;
  gap: var(--space-14);
}

.p-top-news__date {
  font-family: var(--top-font-mono);
  font-size: var(--font-size-label-small);
  font-weight: 500;
  line-height: var(--line-height-label);
  color: var(--color-ink-soft);
}

.p-top-news__category {
  font-size: var(--font-size-label-small); /* Figma は 12px。サイトの最小（13px）に合わせた */
  font-weight: 500;
  line-height: var(--line-height-label);
  color: var(--color-brand);
}

.p-top-news__subject {
  font-size: var(--font-size-body);
  line-height: var(--line-height-heading);
}

@media (hover: hover) {
  a.p-top-news__link .p-top-news__subject {
    transition: color var(--duration-base) var(--ease-base);
  }

  a.p-top-news__link:hover .p-top-news__subject {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: .2em;
  }
}

@media (max-width: 1023px) {
  .p-top-news__inner {
    grid-template-columns: 1fr;
    row-gap: var(--space-28);
  }

  .p-top-news__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

@media (max-width: 767px) {

  .p-top-news__link {
    padding: var(--space-18) var(--space-4);
  }

}

/* ============================================================
 * Contact／FAQ — 見出し｜説明文｜丸いボタン の行（Delight Ventures 型。Figma contact-rows）
 * ============================================================ */
.p-top-contact {
  padding-block: 104px 96px;
}

.p-top-contact__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-border-soft);
}

.p-top-contact__row {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  align-items: center;
  column-gap: var(--space-48);
  padding-block: var(--space-40);
  border-top: 1px solid var(--color-border-soft);
}

.p-top-contact__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.p-top-contact__heading-en {
  font-size: var(--font-size-display);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-ink);
}

.p-top-contact__heading-ja {
  font-size: var(--font-size-label-small);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-brand);
}

.p-top-contact__text {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body);
  color: var(--color-ink-soft);
}

/* 丸いボタン（塗り＝お問い合わせ／線＝よくあるご質問）。ホバーで反転 */
.p-top-contact__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 var(--space-24) 0 var(--space-28);
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1.5px var(--color-brand);
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-brand);
  background: var(--color-white);
  transition: background-color var(--duration-base) var(--ease-base), color var(--duration-base) var(--ease-base);
}

.p-top-contact__button--filled {
  color: var(--color-white);
  background: var(--color-brand);
}

.p-top-contact__button-arrow {
  font-family: var(--top-font-mono);
  font-size: var(--font-size-label);
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-base);
}

@media (hover: hover) {
  .p-top-contact__button:hover {
    color: var(--color-white);
    background: var(--color-brand);
  }

  .p-top-contact__button--filled:hover {
    color: var(--color-brand);
    background: var(--color-white);
  }

  .p-top-contact__button:hover .p-top-contact__button-arrow {
    transform: translateX(4px);
  }
}

.p-top-contact__button:focus-visible,
.p-top-news__more:focus-visible {
  outline: 3px solid rgba(var(--color-shadow-card-rgb), .35);
  outline-offset: 2px;
}

/* 説明文は PC で1行（9.29 依頼「折り返しはなしで」） */
@media (min-width: 1240px) {
  .p-top-contact__text {
    white-space: nowrap;
  }
}

@media (max-width: 1023px) {
  .p-top-contact__row {
    grid-template-columns: 1fr 280px;
    row-gap: var(--space-12);
  }

  .p-top-contact__heading {
    grid-column: 1 / 3;
  }
}

@media (max-width: 767px) {
  .p-top-contact {
    padding-block: var(--space-64) var(--space-56);
  }

  .p-top-contact__row {
    grid-template-columns: 1fr;
    row-gap: var(--space-14);
    padding-block: var(--space-28);
  }

  .p-top-contact__heading {
    grid-column: auto;
  }


  .p-top-contact__button {
    height: 56px;
  }
}