@import url("./top.css");

/*
  下層ページ共通 v3
  v1/v2は「.sub-hero」「.content-split」「.content-copy」など、
  TOPとは別系統のクラスを新規に定義していた。
  これがTOPの意匠をなぞっているようで実は別物になっていた一因と考え、v3では方針を変更する。

  → TOPで実際に使われているクラス（.section / .section--soft / .section--white-accent /
    .pattern-a / .split-grid / .section-media / .section-copy / .visual-block / .has-photo /
    .visual-chip / .section-heading / .section-label / .text-link / .contact-panel）を
    下層ページでもそのまま流用する。

  新規に追加するのは、TOPには存在しない3つの部品のみ:
    1. .page-hero   … TOPのヒーロー（斜めカットの濃色パネル）を縮小して流用する下層用ヒーロー
    2. .info-table  … 会社概要などのデータ表
    3. .timeline    … 沿革などの年表
    4. .map-placeholder … 地図の仮置き
*/

/* 1. 下層ヒーロー（TOPの .hero__shade と同じ斜めカット手法を流用） */
.page-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(320px, 36vw, 460px);
}

/*
  TOPの.hero::before（ボタン下の青っぽい細い装飾線）と同じ意匠を下層ヒーローにも追加。
  下層ヒーローはTOPよりだいぶ低いため、bottom/widthはTOPの値をそのまま使わず
  高さに合わせて控えめな値に調整している（left位置はcontainerの余白に合わせてTOPと同じ値）。
*/
.page-hero::before {
  content: "";
  position: absolute;
  left: clamp(22px, 4vw, 72px);
  bottom: clamp(26px, 5vw, 48px);
  z-index: 2;
  width: min(320px, 28vw);
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(72, 142, 223, 0.9), rgba(255, 255, 255, 0));
  opacity: 0.8;
}

@media (max-width: 860px) {
  .page-hero::before {
    width: 180px;
  }
}

.page-hero__media,
.page-hero__shade,
.page-hero__overlay {
  position: absolute;
  inset: 0;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 32%;
}

/*
  オーバーレイの濃さはTOP(top.css)の.hero__shadeと同じ値に揃える。
  文字の可読性はオーバーレイの濃さではなく、下記のtext-shadow側で担保する
  （写真ごとにオーバーレイの濃度を調整しなくて済むようにするため）。
*/
.page-hero__shade {
  background:
    linear-gradient(102deg, rgba(9, 31, 72, 0.4) 0%, rgba(9, 31, 72, 0.3) 34%, rgba(10, 41, 91, 0.12) 52%, rgba(255, 255, 255, 0.02) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 34%);
  clip-path: polygon(0 0, 58% 0, 70% 100%, 0% 100%);
}

.page-hero__overlay {
  display: flex;
  align-items: center;
}

.page-hero__body {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: 26px 0;
}

/*
  パンくずはヒーロー(写真)の中から独立させる。
  独立した帯(.breadcrumb-bar)を別途用意して背景色を後ろのセクションに合わせ込む方式は、
  後ろに続くセクションがsoft/white-accentのどちらかによって毎回パッチが必要になり、
  WordPressでheader/breadcrumbを共通テンプレートパーツ化する前提だと破綻する
  （ページごとに最初のセクションの背景が変わりうるため）。
  そのため、パンくずは各ページの最初のセクションの中に直接置く形に変更。
  背景は必ずそのセクション自身と同じになるため、色を合わせ込む必要がそもそもなくなる。
*/
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  color: rgba(20, 43, 79, 0.6);
  font-size: 0.78rem;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  color: rgba(20, 43, 79, 0.3);
}

.breadcrumb a {
  position: relative;
  display: inline-block;
  color: var(--color-navy);
  text-decoration: none;
}

/* TOPの.site-nav aと同じ「ホバー時に下線がビュッと伸びる」演出をパンくずにも展開 */
.breadcrumb a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--color-navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.breadcrumb a:hover::after {
  transform: scaleX(1);
}

/*
  パンくずを含む「ページ最初のセクション」だけ、上パディングを控えめにする。
  通常の.section paddingを普通に使うと、ヒーローとパンくずの間に無駄な空白ができ、
  コーナーの装飾オブジェクト(.pattern-a::before等)も宙に浮いた位置になってしまう
  （装飾オブジェクトの位置自体はセクション基準の固定値なので、余白を詰めて中身を
  近づける方が自然に見える）。ページ最初のセクションのclassに追加する。
*/
.section--lead {
  padding-top: 56px;
}

@media (max-width: 860px) {
  .section--lead {
    padding-top: 40px;
  }
}

/*
  「COMPANY」の小ラベル。
  一度は写真キャプション(.has-photo .visual-chip)と同じ濃紺グラデーションの
  塗りつぶしバッジにしたが、TOP側で同じ検証をした結果、サイト内の他の全
  セクションラベルは実は「細い線+小さい文字」だけで、バッジは斜めカット+
  細い線+セリフ体というシャープで軽い世界観に対して浮いて見えることが分かった
  （TOPのヒーローも同じ理由でバッジをやめている）。
  下層ヒーローも同じ構造なので揃え、線+白文字+シャドウのみにする。
*/
.page-hero .section-label--light .section-label__line {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(157, 196, 248, 0.9), rgba(157, 196, 248, 0));
}

.page-hero .section-label--light .section-label__en {
  margin-top: 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-shadow: 0 2px 10px rgba(4, 14, 34, 0.55);
}

.page-hero__title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: clamp(2.8rem, 4.5vw, 4.5rem);
  line-height: 1.36;
  letter-spacing: 0.02em;
  color: var(--color-white);
  text-shadow: 0 4px 20px rgba(4, 14, 34, 0.55), 0 1px 4px rgba(4, 14, 34, 0.4);
}

/* H1の下に添える短いコピー(1行)。段落での説明文とは別役割 = TOPのhero__leadより短く、タグライン的に使う */
.page-hero__tagline {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(4, 14, 34, 0.5);
}

@media (max-width: 860px) {
  .page-hero__shade {
    clip-path: none;
    background:
      linear-gradient(90deg, rgba(9, 31, 72, 0.68), rgba(9, 31, 72, 0.46) 56%, rgba(9, 31, 72, 0.18)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  }
}

/* ご挨拶の署名 */
.section-copy .greeting-sign {
  margin-top: 28px;
  color: var(--color-navy-dark);
  font-weight: 700;
  text-align: right;
}

/*
  経営理念＝会社の行動指針、という重みを出すため、4枚の均等カードではなく
  1枚のプレートに大きなセリフ体の連番を添えた「行動指針」風の見せ方にする。
*/
.principle-panel {
  max-width: 880px;
  margin: 8px auto 0;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.principle-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 20px;
  padding: 30px 40px;
  border-bottom: 1px solid var(--color-line);
}

.principle-row:last-child {
  border-bottom: 0;
}

.principle-row__num {
  color: var(--color-navy);
  opacity: 0.32;
  font-family: "Noto Serif JP", serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}

.principle-row p {
  margin: 0;
  color: var(--color-navy-dark);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.9;
}

@media (max-width: 640px) {
  .principle-row {
    grid-template-columns: 48px 1fr;
    gap: 14px;
    padding: 22px 24px;
  }

  .principle-row__num {
    font-size: 1.8rem;
  }
}

/*
  レスポンシブ時の並び順を統一する。
  「.split-grid--media-first」は画像→テキストの順でDOMに書かれているため、
  何もしないと1カラム化した時だけ画像が先に来てしまい、テキストが先に来る
  通常の.split-gridセクションと表示順がバラつく。
  ここでCSSの order だけでテキストを常に先に出す(HTML側の並びは変えない)。
*/
@media (max-width: 1100px) {
  .split-grid > .section-copy {
    order: 1;
  }

  .split-grid > .section-media {
    order: 2;
  }
}

/*
  spメニューをモーダル化する。
  TOP側の元実装は「ヘッダー直下にドロップダウンするパネル」で、
  背景コンテンツが透けて見えたままなので、開いている間は
  ナビが画面を専有し、背後は触れない(スクロールもしない)状態にする。
*/
@media (max-width: 860px) {
  body.nav-open {
    overflow: hidden;
  }

  /*
    .site-header に backdrop-filter があるため、position:fixed の子要素にとって
    ビューポートではなく .site-header 自身が containing block になってしまう
    （fixed要素の高さをbottom:0基準で決めると、ヘッダーの高さ=78px程度で
    潰れてしまう）。そのためbottomではなくheight:calc(100vh - 78px)で
    直接高さを指定して回避している。
  */
  .site-nav {
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    height: calc(100vh - 78px);
    width: auto;
    padding: 8px 28px 40px;
    background: linear-gradient(165deg, #0b2a5e, #143a7a 62%, #0f2d67);
    border-bottom: 0;
    overflow-y: auto;
    z-index: 15;
  }

  .site-nav ul {
    padding-top: 12px;
  }

  .site-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .site-nav a {
    color: rgba(255, 255, 255, 0.94);
    font-size: 1.05rem;
    padding: 18px 2px;
  }

  /* ベースCSSの .site-nav a:hover { color: var(--color-navy) } が紺背景だと同化して見えなくなるための上書き */
  .site-nav a:hover {
    color: #9dc4f8;
  }

  .menu-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* 企業情報セクション内、メッセージ(split-grid)の下に会社概要テーブルを続ける時の余白 */
.profile-block {
  margin-top: 88px;
}

/* 2. 会社概要などのデータ表 */
.info-table {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  border-collapse: separate;
  border-spacing: 0;
}

.info-table th,
.info-table td {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.94rem;
  line-height: 1.8;
  text-align: left;
  vertical-align: top;
}

.info-table th {
  width: 190px;
  color: var(--color-navy);
  background: var(--color-soft);
  font-weight: 700;
}

.info-table tr:last-child th,
.info-table tr:last-child td {
  border-bottom: 0;
}

/* 3. 沿革などの年表 */
.timeline {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.timeline-item {
  position: relative;
  padding: 16px 0 16px 24px;
  border-left: 2px solid var(--color-line);
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-navy);
}

.timeline-item__year {
  color: var(--color-navy-dark);
  font-family: "Noto Serif JP", serif;
  font-size: 1.15rem;
  font-weight: 700;
}

.timeline-item p {
  margin: 6px 0 0;
  color: var(--color-text-muted);
}

/*
  5. 店舗カード(.store-card)内のスペック表。
     .info-table(ページ全体幅のデータ表)をそのままカード内に置くと、
     th幅190px+padding20-24pxでカード内部に収まらないため、カード内専用の
     簡易版として別クラスにする(枠線・背景・box-shadowは持たず、
     カード自体の枠に間借りする形)。
*/
.store-card__table {
  width: 100%;
  margin: 14px 0 0;
  border-collapse: collapse;
}

.store-card__table th,
.store-card__table td {
  padding: 6px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.86rem;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}

.store-card__table th {
  width: 72px;
  color: var(--color-text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.store-card__table tr:last-child th,
.store-card__table tr:last-child td {
  border-bottom: 0;
}

.store-card .text-link {
  margin-top: 16px;
}

/*
  .store-grid はTOP側では split-grid の片側（テキスト列と同じ幅）に収まる前提で
  .visual-block--store-card の高さ(188px)が決まっている。
  下層の事業ページ(携帯ショップ/リユース)では.store-gridがcontainer全幅で
  2列表示になり、カード自体がTOPよりかなり横長になるため、同じ188pxだと
  写真が横長すぎて内容が分かりにくい。ここだけ高さを底上げする専用の修飾クラス。
*/
.store-grid--full .visual-block--store-card {
  min-height: 320px;
}

@media (max-width: 860px) {
  .store-grid--full .visual-block--store-card {
    min-height: 260px;
  }
}

@media (max-width: 640px) {
  .store-grid--full .visual-block--store-card {
    min-height: 220px;
  }
}

/*
  4. 地図（Googleマップ埋め込み）。
     高さはPCで横幅に対して縦が浅く見にくかったため、.page-heroと同じ
     clamp()方式に変更（280px〜440pxの間で画面幅の32vwに追従）。
*/
.map-placeholder {
  display: grid;
  min-height: clamp(280px, 32vw, 440px);
  place-items: center;
  color: rgba(20, 43, 79, 0.56);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(22, 82, 166, 0.08), rgba(255, 255, 255, 0.9)),
    repeating-linear-gradient(0deg, rgba(20, 72, 154, 0.08) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(20, 72, 154, 0.08) 0 1px, transparent 1px 42px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

.map-placeholder iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 860px) {
  .info-table th,
  .info-table td {
    display: block;
    width: auto;
  }

  .profile-block {
    margin-top: 56px;
  }
}

/*
  5. 店舗詳細ページ（投稿1件＝1店舗のレコードページ）用の部品。
     マーケティング的な.page-heroは持たず、H1=投稿タイトル(店舗名)を
     そのまま見出しにするが、装飾オブジェクト(.pattern-a/.section--white-accent
     の模様)は他の下層ページと統一感を出すため通常どおり使う
     （FVが無い分、装飾は控えめというより「最初のセクションに直接載る」形になる）。
*/
.record-title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  color: var(--color-navy-dark);
  letter-spacing: 0.02em;
}

/* 店舗詳細ページのラベル+H1をセンター寄せにする場合の修飾（グリッド系見出しのセンター統一に合わせる） */
.record-title--center {
  text-align: center;
}

/*
  6. 店舗写真（外観・内観の2枚)。左右均等グリッドだと横長で単調に見えるため、
     左(外観)を大きく・右(内観)を小さく配置するだけでメリハリを出す。
     間に斜めのアクセントラインを足す案も試したが、セクション自体の装飾
     (.section--white-accentの斜め線)と同じ角度・同じ場所で重なって見え、
     狙ったアクセントというより単に線が増えて煩雑になっただけだったため不採用。
     サイズの非対称差だけで十分に動きが出ている。
     レスポンシブで1カラムに崩れた際は、非対称にする意味がなくなるため
     両方とも同じ高さに揃える。
*/
.record-gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: 28px;
  margin: 32px 0 0;
}

.record-gallery__photo {
  position: relative;
  margin: 0;
}

.record-gallery__photo img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.record-gallery__photo--exterior img {
  height: 420px;
}

.record-gallery__photo--interior img {
  height: 300px;
}

@media (max-width: 860px) {
  .record-gallery {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 16px;
  }

  .record-gallery__photo--exterior img,
  .record-gallery__photo--interior img {
    height: 240px;
  }
}

/*
  7. 「お取り扱いサービス」「ご来店サポート」など、○/×形式の項目一覧の表示。
     店舗によって対応可否が変わる想定のため、対応可(.spec-item)と
     未対応(.spec-item--unavailable)の2状態を用意する。
*/
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-navy-dark);
  font-size: 0.92rem;
  font-weight: 500;
}

.spec-item__icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 0.72rem;
}

.spec-item--unavailable {
  color: rgba(20, 43, 79, 0.4);
  background: var(--color-soft);
  border-color: transparent;
}

.spec-item--unavailable .spec-item__icon {
  background: rgba(20, 43, 79, 0.18);
  color: rgba(20, 43, 79, 0.5);
}

/* 8. 公式サイトへのリンクなど、.buttonより控えめに扱いたい二次的なCTA */
.button--outline {
  background: none;
  box-shadow: none;
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
}

.button--outline:hover {
  background: var(--color-soft);
  opacity: 1;
}

.record-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}

/* .info-table等の直後に.record-actionsを続ける場合の上マージン（採用ページの応募導線など） */
.record-actions--after-table {
  margin-top: 40px;
}

/*
  9. お問い合わせフォーム。実装時はWordPressのフォームプラグイン（Contact Form 7等）に
     置き換わる想定で、ここではマークアップと見た目だけを用意する。
     送信ボタンは実送信を持たないモックのため type="button" のまま
     （旧v1の「送信内容を確認する」という2段階確認の文言を踏襲）。
*/
.contact-form {
  max-width: 720px;
  margin: 8px auto 0;
  display: grid;
  gap: 28px;
}

.form-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--color-navy-dark);
  font-weight: 700;
  font-size: 0.94rem;
}

.form-tag {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.form-tag--required {
  color: var(--color-white);
  background: var(--color-navy);
}

.form-tag--optional {
  color: var(--color-text-muted);
  background: var(--color-soft);
  border: 1px solid var(--color-line);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-navy-dark);
}

.form-row textarea {
  min-height: 168px;
  resize: vertical;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 2px solid rgba(26, 70, 150, 0.35);
  outline-offset: 1px;
}

.form-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.form-agree input {
  margin-top: 4px;
}

.form-agree a {
  color: var(--color-navy);
}

.form-actions {
  text-align: center;
}

@media (max-width: 640px) {
  .contact-form {
    gap: 22px;
  }
}

/*
  電話番号のtel:リンク（.tel-link）。スマホ幅ではタップで発信できるようリンクとして
  機能させ、PC幅（861px以上）では通常のテキストと同じ見た目・クリック無効にする。
*/
.tel-link {
  color: inherit;
  text-decoration: none;
}

@media (min-width: 861px) {
  .tel-link {
    pointer-events: none;
    cursor: text;
  }
}

/* 店舗詳細ページの所在地横にある、同ページ内の地図へのアンカーリンク */
.info-table__anchor {
  display: inline-block;
  margin-left: 0.8em;
  font-size: 0.86em;
  font-weight: 700;
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* 固定ヘッダー分の余白を確保して、アンカー遷移時に見出しが隠れないようにする */
#map {
  scroll-margin-top: 96px;
}

@media (max-width: 860px) {
  /* 住所が折り返すため、地図リンクは次の行に頭揃えで置く */
  .info-table__anchor {
    display: table;
    margin-left: 0;
    margin-top: 0.5em;
  }

  /* スマホではタップで発信できることが分かるよう、下線で示す */
  .tel-link {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/*
  会社案内の沿革の写真だけ縦長（3:4）。右の年表が縦に長いため、縦長の写真だと高さが揃って収まりが良い。
  素材（京染会館_portrait.jpg 1088×1445）と同じ比率なので切れない。他ページの写真は従来どおり横長。
*/
#history .visual-block {
  min-height: 0;
  aspect-ratio: 3 / 4;
}

#history .visual-block img {
  object-position: center;
}

@media (max-width: 1100px) {
  #history .visual-block {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* TOP下部の関連企業バナー（画像800×220px）。カード内の余白を無くし、画像をカード幅いっぱいに表示する */
.partner-card--banner {
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

.partner-card--banner img {
  display: block;
  width: 100%;
  height: auto;
}

/*
  沿革（.timeline）は縦棒に沿って左から読み進めるリストのため、1カラムに崩れた幅で
  セクション全体が中央寄せになっても、年月・本文とも左揃いに保つ。
*/
@media (max-width: 1100px) {
  .timeline,
  .timeline-item__year {
    text-align: left;
  }

  /* 内容幅に縮めて中央に置く（右側に大きな空白が出ないように） */
  .timeline {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
}

/* 採用情報「働きやすさ」: 数値で魅力を伝えるハイライトカード */
.work-highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 8px auto 0;
}

.work-card {
  padding: 28px 22px;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.work-card p {
  margin: 0;
}

.work-card__label {
  color: var(--color-navy);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.work-card__value {
  margin-top: 12px !important;
  color: var(--color-navy-dark);
  font-family: "Noto Serif JP", serif;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.4;
}

.work-card__value small {
  font-size: 0.75em;
  font-weight: 500;
}

.work-card__note {
  margin-top: 14px !important;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.7;
}

@media (max-width: 1100px) {
  .work-highlights {
    grid-template-columns: repeat(2, 1fr);
    max-width: 640px;
  }
}

@media (max-width: 560px) {
  .work-highlights {
    grid-template-columns: 1fr;
  }
}

/* 募集要項の勤務地: 部門ごとにグループ化して余白で区切る */
.job-group + .job-group {
  margin-top: 16px;
}

.job-group__title {
  margin: 0 0 2px;
  color: var(--color-navy);
  font-weight: 700;
}

/* 採用情報ヒーロー: 明るい店内写真でもタイトル・キャッチが読めるよう、左側の濃色シェードを強める */
.page-hero--recruit .page-hero__shade {
  background:
    linear-gradient(102deg, rgba(9, 31, 72, 0.62) 0%, rgba(9, 31, 72, 0.5) 40%, rgba(10, 41, 91, 0.26) 60%, rgba(255, 255, 255, 0.02) 78%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 34%);
}

@media (max-width: 860px) {
  .page-hero--recruit .page-hero__shade {
    background:
      linear-gradient(90deg, rgba(9, 31, 72, 0.72), rgba(9, 31, 72, 0.56) 56%, rgba(9, 31, 72, 0.3)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  }
}

/*
  見出し(h2)の改行位置。ブラウザ差（Safari は「文節で折る」word-break: auto-phrase 未対応）を避けるため、
  折ってよい位置は HTML 側の <wbr> で明示し、CSS は keep-all（<wbr>と<br>以外では折らない）にする。
  - text-wrap: balance … 折り返した各行の長さをそろえる（未対応ブラウザでは無視されるだけ）
  - overflow-wrap: anywhere … 万一1つの塊が枠より長くても、最後の手段で折る＝枠からはみ出さない
    （これが無いと、長い塊の分だけグリッドの列が広がって右マージンが消える）
  ★見出しを新しく作る/直すときは、文節の切れ目に <wbr> を入れること。
*/
h2,
.hero-title,
.page-hero__title {
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 「お問い合わせ」など、途中で切れると読みにくい語句のまとまり */
.nb {
  display: inline-block;
}

/* お問い合わせパネルの見出し: 狭いスマホ幅でも「お問い合わせください。」が1行に収まる大きさに */
@media (max-width: 560px) {
  .contact-panel h2 {
    font-size: min(1.5rem, calc((100vw - 112px) / 11.4));
  }
}

/* （360px以下も上の式で自動的に小さくなる。旧: 固定1.25rem） */

/*
  Contact Form 7 用の見た目（既定CSSは読み込まないため、ここで用意する）。
  フォームは <form class="wpcf7-form contact-form"> になり、上の .contact-form / .form-row をそのまま使う。
*/
.wpcf7-form-control-wrap {
  display: block;
}

.contact-form input[type="submit"].button {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
}

.contact-form input[type="submit"].button:disabled {
  opacity: 0.6;
  cursor: default;
}

.wpcf7-spinner {
  display: none;
}

.wpcf7-not-valid {
  border-color: #c0392b !important;
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #c0392b;
  font-size: 0.85rem;
}

.contact-form .wpcf7-response-output {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-navy-dark);
  font-size: 0.92rem;
  line-height: 1.7;
  text-align: center;
}

.contact-form.sent .wpcf7-response-output {
  border-color: var(--color-navy);
  background: var(--color-soft);
}

.contact-form.invalid .wpcf7-response-output,
.contact-form.failed .wpcf7-response-output,
.contact-form.spam .wpcf7-response-output,
.contact-form.unaccepted .wpcf7-response-output {
  border-color: #c0392b;
  color: #c0392b;
}

.wpcf7 .screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
}

.contact-form .hidden-fields-container {
  display: none;
}

/*
  「お取り扱いサービス」「店舗設備」などのカード一覧(.spec-grid)。
  カード幅を固定した列（210px）に並べ、余った列は詰めて、列の塊ごと中央に置く。
  → 項目が少ないときは中央に寄り（右に空白ができない）、最後の行が余っても
  左端は上の行と揃う。スマホ幅（640px以下）は従来の1列グリッドのまま。
*/
@media (min-width: 641px) {
  .spec-grid {
    grid-template-columns: repeat(auto-fit, 210px);
    justify-content: center;
  }
}

/* 送信前（メッセージが空の間）は、結果表示の枠を出さない */
.contact-form .wpcf7-response-output:empty {
  display: none;
}


/*
  装飾オブジェクト（.pattern-a::before の面状の模様、.section--white-accent の斜め線）は
  位置指定つきの要素のため、何もしないと通常のコンテンツ（表・カード・見出し等）より前面に描画され、
  半透明の模様がコンテンツにかぶって見える。装飾を最背面、セクション内の.containerを前面にする。
*/
.pattern-a::before,
.pattern-b::before,
.section--white-accent::before,
.section--white-accent::after {
  z-index: 0;
}

.section > .container {
  position: relative;
  z-index: 1;
}

/*
  店舗詳細の外観・内観写真。641〜860px（iPad縦など）は1カラムだと横幅が720px超で、
  高さ240px固定のため3:1の細長い帯になり潰れて見えた。この幅では2枚を横に並べて4:3にする。
  写真が1枚だけの店舗は幅いっぱいに16:9。640px以下（スマホ）は従来どおり1カラム。
*/
@media (min-width: 641px) and (max-width: 860px) {
  .record-gallery {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .record-gallery__photo--exterior img,
  .record-gallery__photo--interior img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .record-gallery:has(> :only-child) {
    grid-template-columns: 1fr;
  }

  .record-gallery:has(> :only-child) .record-gallery__photo img {
    aspect-ratio: 16 / 9;
  }
}

/*
  スマホ幅で、最長の文節（h2は10文字、TOPのヒーローは「つながる毎日を、」8文字）が
  枠に必ず収まるよう、画面幅に応じて文字サイズを下げる（上限は従来のサイズ）。
  収まらないと overflow-wrap: anywhere により「。」「、」だけが次の行に落ちる。
  h2・ヒーロー: 枠幅=画面幅-63px（.section-heading等の左右余白込み） / お問い合わせパネルのh2: 画面幅-112px。
*/
@media (max-width: 560px) {
  .section-copy h2,
  .section-heading h2 {
    font-size: min(2rem, calc((100vw - 63px) / 10.3));
  }

  .hero .hero-title {
    font-size: min(2.4rem, calc((100vw - 63px) / 8.3));
  }
}

/*
  ヒーロー本文（TOPのFV）の縦位置。実機確認より、スマホ縦は写真の枠(560px)に対し
  文章がかなり短く、真ん中ぞろえだと上側の余白（天井・照明で単調な部分）が
  空きすぎに見えた。下側はそのまま写真が続くだけで余白が増えても目立たないため、
  真ん中ぞろえをやめて上寄せ＋固定の上余白にする。数値は実機で微調整する前提の仮値。
*/
@media (max-width: 640px) {
  .hero__overlay {
    align-items: flex-start;
  }

  .hero__body {
    padding-top: 40px;
  }
}

/*
  ナビに「TOP」を追加(7項目)したことで、実は元々ギリギリだったデスクトップ幅の
  ナビが、2箇所の帯（861〜1099px、1181〜1247px）で折り返して文字が縦に割れる
  ようになった（原因はロゴ幅とnavのgapが広めの設計だったため。860px以下はハンバーガー
  メニューになるので影響なし。実機で気づきにくいがノートPCの窓幅ではよく起こりうる帯）。
  ロゴ幅・gap・文字サイズを、この2帯だけ追加で詰めて1行に収める。
*/
@media (min-width: 861px) and (max-width: 1099px) {
  .site-logo__image {
    width: 200px;
  }

  .site-nav ul {
    gap: 14px;
  }

  .site-nav a {
    font-size: 0.82rem;
  }
}

@media (min-width: 1181px) and (max-width: 1247px) {
  .site-logo__image {
    width: 320px;
  }

  .site-nav ul {
    gap: 24px;
  }
}