@charset "UTF-8";
/* =========================================================
   株式会社HAO 新卒採用サイト  共通スタイル
   - ターゲット: 高校生・大学生 / 親しみやすいが洗練された上品さ
   - スマホファースト（まずスマホ表示を基準に書き、PCは @media で上書き）
   - 色やフォントは下の「カラー設定」をいじれば全体に反映されます
   - 見出し＝Noto Serif JP（明朝）／本文＝Noto Sans JP（ゴシック）の対比で品を出す
   ========================================================= */

/* ---------- カラー設定（ここをいじると全体の色が変わります） ---------- */
:root {
  /* アクセントは1色に集約（彩度を抑えた上品なテラコッタ系コーラル）*/
  --color-accent:      #c0644a;   /* メインのアクセント（落ち着いたテラコッタ）*/
  --color-accent-dark: #a5503a;   /* ホバー・押下時の濃いめ */
  --color-accent-soft: #f3e7e1;   /* アクセントのごく淡いトーン（背景用）*/
  /* サブ色は廃止し、すべて中立トーンへ寄せて多色使いを避ける */
  --color-sub:         #8a8f86;   /* 旧サブカラー（ほぼ未使用・中立グレージュ）*/
  --color-sales:       #a5503a;   /* 旧テーマ色は単一アクセント系へ統一 */
  --color-kuranju:     #a5503a;   /* 同上 */
  --color-text:        #33312e;   /* 基本の文字色（温かみのある濃灰）*/
  --color-text-soft:   #7c776e;   /* 補足テキストの色 */
  --color-bg:          #fbf9f4;   /* ページの背景（やわらかな生成り）*/
  --color-line:        #e8e3da;   /* 罫線の色 */

  --radius:   8px;                /* 角丸（控えめにして端正に）*/
  --shadow:   0 8px 28px rgba(51,49,46,.06);   /* 影は淡く繊細に */
  --maxw:     1080px;             /* コンテンツの最大幅 */

  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans:  "Noto Sans JP", system-ui, -apple-system,
                "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* ---------- リセット ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }   /* ページ内リンクをなめらかにスクロール */

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.9;               /* 行間を広めにとり読みやすく */
  letter-spacing: .02em;          /* 字間を少し広げて品を出す */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;             /* 横スクロールのはみ出し防止 */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* 中央寄せの共通ラッパー */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}

/* セクション共通の上下余白（広めにとって情報密度を下げる）*/
.section { padding: 88px 0; }

/* ---------- 共通：見出し ---------- */
.section-label {                 /* 小さな英字ラベル */
  display: inline-block;
  font-size: 12px;
  letter-spacing: .28em;         /* 字間を大きく広げて端正に */
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 14px;
}
.section-title {
  font-family: var(--font-serif);  /* 見出しは明朝で上品に */
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .04em;
  margin-bottom: 30px;
}
.section-title .marker {         /* タイトル内のハイライト（控えめな下線風）*/
  background: linear-gradient(transparent 65%, var(--color-accent-soft) 65%);
}

/* ---------- 共通：ボタン（影・角丸・装飾は控えめ／ホバーは繊細に） ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .06em;
  padding: 15px 32px;
  border-radius: 999px;          /* ピル型は維持しつつ装飾は最小限 */
  border: none;
  cursor: pointer;
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
  box-shadow: none;              /* 影は使わず端正に */
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-dark); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

.btn-line {                      /* LINE相談ボタン（緑は機能色として最小限に残す）*/
  background: #06c755; color: #fff;
}
.btn-line:hover { background: #05b34c; transform: translateY(-2px); }

.btn-ghost {                     /* 白フチのシンプルボタン */
  background: #fff; color: var(--color-text);
  border: 1px solid var(--color-line);
  box-shadow: none;
}
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

.btn .arrow { transition: transform .35s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* =========================================================
   ヘッダー（上部に固定）
   ========================================================= */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255,253,248,.85);
  backdrop-filter: blur(10px);    /* すりガラス風 */
  border-bottom: 1px solid var(--color-line);
}
.header-inner {
  height: 76px;                  /* ロゴ拡大に合わせて高さを確保 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: inline-flex;          /* 画像とラベルを横並びで中央そろえ */
  align-items: center;
  gap: 9px;
  font-size: 22px;               /* ※フッターのテキストロゴ「HAO.」用に残す */
  font-weight: 800;
  letter-spacing: .02em;
}
.logo-img {                      /* ヘッダーの画像ロゴ */
  height: 50px;                  /* 高さ基準。width:auto で比率を維持し、Retinaでも鮮明 */
  width: auto;
  display: block;
}
.logo span { color: var(--color-accent); }   /* フッターの「.」の色 */
.logo small {                    /* ロゴ脇の小さな注記（RECRUIT 2026）*/
  font-size: 11px; font-weight: 700;
  color: var(--color-text-soft); letter-spacing: .12em; line-height: 1.2;
  white-space: nowrap;           /* 折り返さない */
  padding-left: 10px; border-left: 1px solid var(--color-line);  /* 区切り線 */
}
/* タブレット以下：ロゴを少し抑える */
@media (max-width: 600px) {
  .header-inner { height: 66px; }
  .logo-img { height: 42px; }
  .logo small { font-size: 10px; padding-left: 8px; }
}
/* 小さめスマホ：横幅が厳しいので「RECRUIT 2026」を隠してロゴ優先 */
@media (max-width: 360px) {
  .logo-img { height: 36px; }
  .logo small { display: none; }
}
.header .btn { padding: 10px 20px; font-size: 14px; box-shadow: none; }

/* =========================================================
   ヒーロー（画面いっぱいの写真 + キャッチコピー）
   ========================================================= */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;   /* スマホ基準：テキストを下寄せ（SCROLLの少し上に乗せる）*/
  overflow: hidden;
}
/* 背景画像（PC／スマホで出し分け。パスは css/ 基準なので ../images/）
   ・スマホ用：images/hero-sp.jpg（縦長・人物が中央に来る構図）
   ・PC用    ：images/hero-pc.jpg（横長） */
.hero-bg {
  position: absolute; inset: 0;
  background-color: #333;                       /* 画像が出ない時のフォールバック */
  /* スマホ用（まずスマホ表示が基準）*/
  background-image: url('../images/hero-sp.jpg');
  background-size: cover;                        /* 枠いっぱい（比率維持でトリミング）*/
  background-position: center;
  background-repeat: no-repeat;
}
/* PC用（769px以上）*/
@media (min-width: 769px) {
  .hero-bg {
    background-image: url('../images/hero-pc.jpg');
  }
}
/* 文字を読みやすくする暗幕（透過グラデ＝画像は透けて見える）*/
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(0,0,0,.45), rgba(0,0,0,.15));
}
.hero-bg::after {                /* さらに下側だけ濃くして見出しを読みやすく */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 40%, rgba(0,0,0,.40));
}
/* スマホは縦構図で文字とかぶりやすいので、暗幕を少し強めて白文字を読みやすく */
@media (max-width: 768px) {
  .hero-bg::before {
    background: linear-gradient(120deg, rgba(0,0,0,.55), rgba(0,0,0,.30));
  }
  .hero-bg::after {
    background: linear-gradient(transparent 30%, rgba(0,0,0,.50));
  }
}
.hero .placeholder-note {        /* 「ここにヒーロー写真」の案内（写真差替え後は不要）*/
  position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.55); color: #fff; font-size: 12px;
  padding: 6px 14px; border-radius: 999px; z-index: 3;
}
.hero-content {
  position: relative; z-index: 4; color: #fff;
  width: 100%;
  /* スマホ：ボタン下〜SCROLL の間に余白を確保し、人物の顔にかけない */
  padding-bottom: 116px;
}
.hero-copy {
  font-family: var(--font-serif);      /* 見出しは明朝で上品に */
  font-size: clamp(32px, 8vw, 64px);   /* 画面幅に応じて文字サイズが伸縮 */
  font-weight: 600;
  line-height: 1.45;
  text-shadow: 0 2px 18px rgba(0,0,0,.28);
  letter-spacing: .06em;               /* 字間を広げて余裕を持たせる */
}
.hero-copy .accent { color: #e9c08a; }  /* 金は彩度を抑えた上品なトーンに */
.hero-sub {
  font-size: clamp(14px, 3.6vw, 18px);
  font-weight: 400;
  line-height: 2;
  margin: 24px 0 38px;
  letter-spacing: .04em;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
/* 下に「スクロールしてね」の合図 */
.scroll-hint {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 4; color: #fff; font-size: 11px; letter-spacing: .2em; text-align: center;
}
.scroll-hint::after {
  content: ""; display: block; width: 1px; height: 36px; margin: 8px auto 0;
  background: #fff; animation: scrollLine 1.6s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); }
  50%  { transform: scaleY(1); }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* PC（769px以上）：テキストを「左上」のまとまったブロックに寄せる */
@media (min-width: 769px) {
  .hero { align-items: flex-start; }      /* 上寄せ */
  .hero-content {
    padding-top: 138px;                   /* 固定ヘッダー下から始める */
    padding-bottom: 0;
  }
  /* テキスト列が右側の人物まで広がらないよう幅を抑える（左寄せは container の左端基準）*/
  .hero-copy,
  .hero-sub { max-width: 560px; }

  /* テキストが乗る上側を少し暗くして白文字の可読性を確保 */
  .hero-bg::after {
    background: linear-gradient(rgba(0,0,0,.38) 0%, rgba(0,0,0,.10) 42%,
                                transparent 68%, rgba(0,0,0,.28));
  }
}

/* =========================================================
   会社紹介（about）
   ========================================================= */
.about-grid {
  display: grid;
  gap: 36px;
}
/* SP全体左揃えデザイン：スマホ・PCとも左揃え（PCは写真｜文章の2カラムなので左が正）*/
.about-text { text-align: left; }
/* 本文は他セクションの intro（.jobs-lead p / .gallery-head p）と同じトーンに統一 */
.about-text p { margin-bottom: 18px; font-size: 15px; color: var(--color-text-soft); font-weight: 400; }
.about-text .big {
  font-family: var(--font-serif);
  font-size: 19px; font-weight: 500; line-height: 1.8; letter-spacing: .04em;
  margin-bottom: 22px;
}
/* 会社紹介の写真枠（コンテナで比率を固定し、中のimgをcoverで敷き詰める）*/
.about-photo {
  width: 100%;
  aspect-ratio: 4 / 3;          /* 枠の比率を固定（CLS防止）*/
  overflow: hidden;             /* はみ出しをトリミング */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.about-photo img {
  width: 100%; height: 100%;    /* 枠いっぱい */
  object-fit: cover;            /* 引き伸ばさずトリミング */
  display: block;
}

/* =========================================================
   総合職（3つの現場）jobs カード
   ========================================================= */
.jobs-lead { text-align: left; margin-bottom: 48px; max-width: 720px; margin-left: auto; margin-right: auto; }
.jobs-lead .section-title { margin-bottom: 16px; }
.jobs-lead p { color: var(--color-text-soft); font-weight: 400; font-size: 15px; }

/* 総合職である前提を打ち出す小さなラベル */
.jobs-sogo-tag {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  padding: 6px 18px;
  margin-bottom: 24px;
}

.job-cards {
  display: grid;
  gap: 28px;
}
.job-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: none;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.job-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
/* 順番を示す番号（総合職として経験する現場の番号）*/
.job-num {
  font-family: var(--font-serif);
  font-size: 13px; font-weight: 600; letter-spacing: .1em;
  color: var(--color-accent);
  margin-bottom: 6px;
}
/* カード写真の枠（比率を固定し、はみ出しをトリミング）*/
.job-card .job-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
/* 枠いっぱいにcover表示（カードで高さが揃う）*/
.job-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.job-card:hover .job-photo img { transform: scale(1.03); }   /* ホバーで繊細にズーム */
.job-card-body { padding: 26px 24px 30px; }
.job-tag {                       /* 勤務地ラベル（多色を避け、淡いアクセント背景に統一）*/
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
}
.job-card h3 {
  font-family: var(--font-serif);
  font-size: 21px; font-weight: 600; letter-spacing: .03em; margin-bottom: 6px;
}
/* 蔵樹ロゴ（カード内に控えめに添える）*/
.kuranju-logo { height: 34px; width: auto; display: block; margin: 4px 0 8px; opacity: .9; }
.job-card .job-place { font-size: 13px; color: var(--color-text-soft); font-weight: 500; margin-bottom: 14px; }
.job-card p { font-size: 14.5px; margin-bottom: 20px; }
/* カード上部の細い色帯（単一アクセントで統一）*/
.job-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: var(--color-accent);
  opacity: 0; transition: opacity .35s ease;
}
.job-card:hover::before { opacity: 1; }

/* =========================================================
   問い合わせCTA（大きなバナー）
   ========================================================= */
.cta {
  text-align: center;
  background: var(--color-accent);   /* 単一アクセントで端正に */
  color: #fff;
  border-radius: 0;
  padding: 84px 0;
}
.cta h2 {
  font-family: var(--font-serif);
  font-size: clamp(23px, 5.5vw, 34px); font-weight: 600; letter-spacing: .05em;
  line-height: 1.6; margin-bottom: 14px;
}
.cta p { font-weight: 400; font-size: 15px; margin-bottom: 32px; }
.cta .btn-primary { background: #fff; color: var(--color-accent); }
.cta .btn-primary:hover { background: #fff; color: var(--color-accent-dark); }

/* =========================================================
   フッター
   ========================================================= */
.footer {
  background: #2b2b33; color: #d6d6dd;
  padding: 44px 0 28px; font-size: 14px;
}
.footer .logo { color: #fff; margin-bottom: 14px; }
/* フッターの画像ロゴ（角丸）*/
.footer-logo-img {
  height: 36px;                   /* フッターに馴染む高さ。必要なら調整 */
  width: auto;
  border-radius: var(--radius);   /* 角丸 */
  display: block;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 20px; }
.footer-links a:hover { color: var(--color-accent); }
.footer-copy { font-size: 12px; color: #9a9aa6; }

/* =========================================================
   写真プレースホルダー（写真が入る場所のグレー枠）
   ※ 写真を <img> に差し替えたら、この .placeholder は不要になります
   ========================================================= */
.placeholder {
  width: 100%; height: 100%;
  min-height: 200px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  background:
    repeating-linear-gradient(45deg, #e9e9e9 0 12px, #e2e2e2 12px 24px);
  color: #8a8a8a; text-align: center; padding: 16px;
}
.placeholder .ph-icon { font-size: 30px; }
.placeholder .ph-label { font-size: 13px; font-weight: 700; }
.placeholder .ph-file { font-size: 11px; color: #a5a5a5; }

/* =========================================================
   問い合わせページ（フォーム）
   ========================================================= */
.page-hero {                     /* 下層ページの上部見出し帯 */
  padding: 140px 0 56px;
  text-align: center;
  background: var(--color-accent-soft);   /* 淡いアクセント1色で端正に */
}
.page-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 6vw, 38px); font-weight: 600; letter-spacing: .05em;
}
.page-hero p { color: var(--color-text-soft); font-weight: 400; font-size: 14px; margin-top: 12px; line-height: 1.9; }

.contact-wrap {
  max-width: 640px; margin: 0 auto; padding: 48px 22px 72px;
}
/* LINE相談の大きめ案内 */
.line-box {
  background: #f4fff8; border: 2px solid #cdeede;
  border-radius: var(--radius); padding: 24px; text-align: center; margin-bottom: 40px;
}
.line-box h2 { font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: .03em; margin-bottom: 6px; }
.line-box p { font-size: 14px; color: var(--color-text-soft); margin-bottom: 16px; }

/* =========================================================
   送信完了ページ（thanks.html）
   - TOPと地続きの上品さ。淡いアクセント1色＋中立罫線で端正に
   ========================================================= */
.thanks-wrap { text-align: center; }            /* 完了ページの中央寄せ（インラインstyleの置き換え）*/
.thanks-box {
  background: var(--color-accent-soft);          /* 淡いアクセント1色 */
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 36px 26px;
  text-align: center;
  margin-bottom: 36px;
}
.thanks-box h2 {
  font-family: var(--font-serif);
  font-size: 21px; font-weight: 600; letter-spacing: .04em; margin-bottom: 14px;
}
.thanks-box p { font-size: 15px; line-height: 1.9; margin-bottom: 8px; }
.thanks-box p:last-child { margin-bottom: 0; }
.thanks-box .thanks-small { font-size: 13px; color: var(--color-text-soft); margin-top: 14px; }
.thanks-box strong { color: var(--color-accent); }

.or-divider {                    /* 「または」の区切り線 */
  display: flex; align-items: center; gap: 14px;
  color: var(--color-text-soft); font-size: 13px; font-weight: 700; margin: 0 0 32px;
}
.or-divider::before, .or-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--color-line);
}

/* ハニーポット（スパム対策の隠し項目）。画面外に飛ばして人間からは完全に見えなくする */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* フォーム本体 */
.form-group { margin-bottom: 24px; }
.form-group label {
  display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px;
}
.form-group label .req {          /* 必須マーク */
  color: #fff; background: var(--color-accent);
  font-size: 10px; padding: 2px 7px; border-radius: 4px; margin-left: 6px; vertical-align: middle;
}
.form-group label .any {          /* 任意マーク */
  color: var(--color-text-soft); background: #eee;
  font-size: 10px; padding: 2px 7px; border-radius: 4px; margin-left: 6px; vertical-align: middle;
}
.form-control {
  width: 100%;
  font-family: inherit; font-size: 16px;   /* 16px未満だとスマホで自動ズームするため16pxに */
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(192,100,74,.12);   /* アクセント色のやわらかいフォーカスリング */
}
textarea.form-control { min-height: 140px; resize: vertical; }

/* 希望職種の選択（ラジオをカード風に）*/
.radio-cards { display: grid; gap: 10px; }
.radio-card {
  position: relative; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--color-line); border-radius: 10px;
  padding: 14px 16px; cursor: pointer; font-weight: 500; font-size: 15px;
  transition: border-color .25s ease, background .25s ease;
}
.radio-card input { accent-color: var(--color-accent); width: 18px; height: 18px; }
.radio-card:has(input:checked) {
  border-color: var(--color-accent); background: var(--color-accent-soft);
}

.privacy-note {
  font-size: 12px; color: var(--color-text-soft);
  background: #f7f7f5; border-radius: 12px; padding: 14px 16px; margin: 6px 0 26px;
}
.privacy-note a { color: var(--color-accent); text-decoration: underline; }

.form-submit { text-align: center; }
.form-submit .btn { width: 100%; max-width: 360px; justify-content: center; }

/* =========================================================
   スクロールでふわっと表示（JSで .is-visible を付与）
   ========================================================= */
.fade-in {
  opacity: 0;
  transform: translateY(16px);            /* 動きはさりげなく小さめに */
  transition: opacity .9s ease, transform .9s ease;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* 連続要素を少しずつ遅らせて表示（カードなどに使用）*/
.fade-in.delay-1 { transition-delay: .12s; }
.fade-in.delay-2 { transition-delay: .24s; }
.fade-in.delay-3 { transition-delay: .36s; }

/* アニメーションを控えたい設定のユーザーには動きを無効化（アクセシビリティ）*/
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  .scroll-hint::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   レスポンシブ（タブレット以上で横並びに）
   ========================================================= */
@media (min-width: 768px) {
  .section { padding: 116px 0; }
  .section-title { font-size: 34px; }

  /* 会社紹介を 写真｜文章 の2カラムに */
  .about-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
  }
  /* 2カラムでは文章側を左揃えに戻す（写真横なので左が正）*/
  .about-text { text-align: left; }
  /* 仕事カードを3枚横並びに（総合職として経験する3つの現場）*/
  .job-cards { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

@media (min-width: 1024px) {
  .hero-copy { letter-spacing: .08em; }
}

/* =========================================================
   ▼▼ ここから追記（2026修正：高卒/大卒の出し分け・SNS・会社概要）▼▼
   ========================================================= */

/* ---------- SNSセクション（落ち着いた濃色の一枚帯）---------- */
.sns {
  background: #33312e;          /* 単色の濃いトーンで上品に */
  color: #fff;
  text-align: center;
}
.sns-inner { max-width: 640px; margin: 0 auto; text-align: left; }
.sns-lead { font-weight: 400; font-size: 15px; margin-bottom: 34px; color: rgba(255,255,255,.85); }
.sns-badges {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px;
}
.sns-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff; font-weight: 600; font-size: 14px; letter-spacing: .04em;
  padding: 11px 24px; border-radius: 999px;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.sns-badge:hover { background: #fff; color: #33312e; border-color: #fff; }

/* ---------- 会社概要（定義リスト）---------- */
.company-info {
  max-width: 760px; margin: 0 auto;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.company-info .ci-row {
  display: grid; grid-template-columns: 1fr;   /* スマホは縦積み */
  border-bottom: 1px solid var(--color-line);
  padding: 16px 22px;
}
.company-info .ci-row:last-child { border-bottom: none; }
.company-info dt {
  font-weight: 800; font-size: 13px; color: var(--color-accent);
  margin-bottom: 4px;
}
.company-info dd { font-size: 15px; line-height: 1.7; }
.company-info .ci-access {
  display: inline-block; font-size: 12px; color: var(--color-text-soft); margin-top: 2px;
}

/* =========================================================
   問い合わせページ：対象者の出し分け
   ========================================================= */

/* 入口の2択ナビ（高校生／大学生）*/
.audience-nav {
  display: grid; gap: 14px;
  max-width: 640px; margin: 0 auto; padding: 28px 22px 8px;
}
.aud-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 32px 20px; border-radius: var(--radius);
  border: 1px solid var(--color-line); background: #fff;
  text-align: center; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.aud-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--color-accent); }
.aud-card .aud-title {
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 600; letter-spacing: .05em;
}
.aud-card .aud-note  { font-size: 12.5px; color: var(--color-text-soft); font-weight: 400; }

/* 対象者ブロック共通 */
.audience-block { padding: 64px 0; scroll-margin-top: 70px; }
.audience-block.hs  { background: #f4f2ec; }   /* 高校生＝落ち着いた生成りグレージュ */
.audience-block.uni { background: var(--color-accent-soft); }   /* 大学生＝淡いアクセント */
.audience-block .container { max-width: 680px; }

.block-head { text-align: center; margin-bottom: 32px; }
.block-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(21px, 5.5vw, 28px); font-weight: 600; letter-spacing: .04em; margin-top: 14px;
}

/* 対象者バッジ（多色を避け、アクセント系＋中立トーンで端正に）*/
.aud-badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  padding: 7px 18px; border-radius: 999px;
}
.aud-badge.hs  { color: var(--color-text-soft); background: #ece8e1; }       /* 中立トーン */
.aud-badge.uni { color: var(--color-accent);    background: var(--color-accent-soft); }  /* 淡いアクセント */

/* 高校生への案内（注意ボックス）*/
.notice {
  background: #fff; border-left: 3px solid var(--color-accent);
  border-radius: 10px; box-shadow: var(--shadow);
  padding: 24px 24px; margin-bottom: 32px;
}
.notice p { font-size: 15px; margin-bottom: 10px; }
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--color-accent); }
.notice .notice-small { font-size: 12px; color: var(--color-text-soft); }
.notice .notice-small { /* 小さい注記は強調色を戻す */ }
.notice .notice-small strong { color: var(--color-text-soft); }

/* 職場見学ボックス */
.tour-box {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; margin-bottom: 32px;
}
.tour-photo { padding: 16px 16px 0; }
/* 職場見学の写真枠（4:3・角丸・はみ出しトリミング）*/
.tour-frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
}
.tour-frame img {
  width: 100%; height: 100%;
  object-fit: cover;            /* 引き伸ばさずトリミング */
  display: block;
}
.tour-text { padding: 18px 22px 24px; }
.tour-text h3 {
  font-family: var(--font-serif);
  font-size: 19px; font-weight: 600; letter-spacing: .03em; margin-bottom: 12px;
  text-wrap: balance;            /* 日本語の不格好な折り返しを抑える */
  line-break: strict;
}
.tour-text p { font-size: 15px; margin-bottom: 10px; }
.tour-text .tour-small { font-size: 13px; color: var(--color-text-soft); }
.tour-text .tour-small strong { color: var(--color-accent); }

/* 各フォーム共通の見た目 */
.aud-form {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 28px 22px;
}
.form-heading { font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: .03em; margin-bottom: 4px; }
.form-subnote { font-size: 13px; color: var(--color-text-soft); margin-bottom: 20px; }

/* 総合職採用の説明ボックス（大学生フォーム上部）*/
.sogo-note {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 24px;
}
.sogo-note strong { color: var(--color-accent); }

/* ラベル脇の小さな補足（例：参考としてお聞きします）*/
.label-note { font-size: 12px; font-weight: 400; color: var(--color-text-soft); }

/* hidden属性の安全策（.form-group等にdisplayが効いていても確実に隠す）*/
[hidden] { display: none !important; }

/* ---------- レスポンシブ（追記分）---------- */
@media (min-width: 768px) {
  /* 会社概要：項目名｜内容 の2カラムに */
  .company-info .ci-row {
    grid-template-columns: 160px 1fr; gap: 20px; align-items: start;
  }
  .company-info dt { margin-bottom: 0; padding-top: 2px; }

  /* 入口ナビを横2枚に */
  .audience-nav { grid-template-columns: 1fr 1fr; }

  /* 職場見学を 写真｜文章 の横並びに（写真側をやや狭め、文章側を広く）*/
  .tour-box { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: center; }
  .tour-photo { padding: 16px; }
  .aud-form { padding: 32px 30px; }
}

/* =========================================================
   ギャラリー（HAOのフィールド）
   - 大きなメイン画像 ＋ 下にサムネイル7枚（本社4→蔵樹3）
   - サムネイルをクリックでメイン画像を差し替え（js/main.js）
   - 修正1の方針（広い余白・控えめな装飾・アクセント1色）に統一
   ========================================================= */
.gallery-head { text-align: left; margin-bottom: 40px; }
.gallery-head .section-title { margin-bottom: 14px; }
.gallery-head p { color: var(--color-text-soft); font-weight: 400; font-size: 15px; }

/* メイン画像エリア（16:9・角丸・はみ出しトリミング）*/
.gallery-main {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-accent-soft);   /* 読み込み中のフォールバック */
  box-shadow: var(--shadow);
  margin-bottom: 28px;
}
.gallery-main img {
  width: 100%; height: 100%;
  object-fit: cover;            /* 引き伸ばし崩れ防止 */
  display: block;
  transition: opacity .5s ease; /* 切り替えはフェードでさりげなく */
}
.gallery-main img.is-fading { opacity: 0; }

/* サムネイル群（本社グループ／蔵樹グループを横並び。スマホは横スクロール）*/
.gallery-thumbs {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.gallery-group { flex: 0 0 auto; }
.gallery-group-label {        /* グループの小見出し（本社／蔵樹）*/
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--color-text-soft);
  margin-bottom: 10px;
  padding-left: 2px;
}
.gallery-thumb-row { display: flex; gap: 12px; }
/* 本社と蔵樹の間に細い区切り線 */
.gallery-group + .gallery-group { position: relative; }
.gallery-group + .gallery-group::before {
  content: ""; position: absolute; left: -14px; top: 22px; bottom: 6px;
  width: 1px; background: var(--color-line);
}

/* 1枚のサムネイル（ボタン）*/
.gallery-thumb {
  flex: 0 0 auto;
  width: 92px;
  aspect-ratio: 4 / 3;
  padding: 0; border: none; cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-accent-soft);
  opacity: .55;                /* 非アクティブは少し沈ませる */
  outline: 1px solid transparent;
  outline-offset: 2px;
  transition: opacity .35s ease, outline-color .35s ease;
}
.gallery-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;           /* 引き伸ばし崩れ防止 */
  display: block;
}
.gallery-thumb:hover { opacity: .85; }
.gallery-thumb.is-active {     /* 選択中＝はっきり見せて枠線でアクティブ表示 */
  opacity: 1;
  outline-color: var(--color-accent);
}

@media (min-width: 768px) {
  .gallery-main { max-width: 880px; margin-left: auto; margin-right: auto; margin-bottom: 32px; }
  .gallery-thumbs { justify-content: center; overflow-x: visible; flex-wrap: wrap; }
  .gallery-thumb { width: 104px; }
}

/* =========================================================
   募集要項（requirements）
   - 職種タブ × 学歴セレクタで表の内容を切り替える
   - 表は会社概要（.company-info）と同じトーン：白カード・淡い影・角丸
   - 中身は js/main.js の DATA から動的生成
   ========================================================= */
/* ヒーローのCTA群（主CTA＋募集要項サブ導線）
   スマホ：縦積みで崩れないように。狭い画面以上で横並び（主CTA左／募集要項右）*/
.hero-actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
@media (min-width: 600px) {
  .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* 複数職種カードのボタンを縦積みで揃える（カード内の行動導線）*/
.job-actions { display: flex; flex-direction: column; gap: 10px; }
.job-actions .btn { width: 100%; justify-content: center; }

#requirements { scroll-margin-top: 80px; }   /* 固定ヘッダー分だけ上に余白 */
.req-lead {
  color: var(--color-text-soft); font-weight: 400; font-size: 15px;
  max-width: 640px; margin: 0 auto;
}

/* コントロール群（タブ＋セレクタ）*/
.req-controls { max-width: 760px; margin: 0 auto 24px; }
.req-tablabel {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--color-text-soft); margin-bottom: 10px;
}

/* 職種タブ（狭い画面は横スクロール／広い画面は折り返し）*/
/* スマホ：2列グリッドで各ボタンの横幅を均一に揃える
   （不動産営業／開業準備室が上段、旅館スタッフが下段。3つとも同じ幅）*/
.req-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px;
}
.req-tab {
  flex: 0 0 auto;
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: .04em;
  padding: 12px 24px; border-radius: 999px;
  border: 1px solid var(--color-line); background: #fff; color: var(--color-text);
  cursor: pointer; white-space: nowrap;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.req-tab:hover { border-color: var(--color-accent); color: var(--color-accent); }
.req-tab.is-active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.req-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* 学歴セレクタ（セグメント風。ピル型の枠内に3ボタン）*/
.req-edu {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  background: #fff; border: 1px solid var(--color-line);
  border-radius: 999px; padding: 4px;
}
.req-edu-btn {
  font-family: var(--font-sans); font-weight: 700; font-size: 14px; letter-spacing: .04em;
  padding: 9px 20px; border-radius: 999px;
  border: none; background: transparent; color: var(--color-text-soft);
  cursor: pointer; white-space: nowrap;
  transition: background .3s ease, color .3s ease;
}
.req-edu-btn:hover { color: var(--color-accent); }
.req-edu-btn.is-active { background: var(--color-accent-soft); color: var(--color-accent); }
.req-edu-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* 表本体（会社概要と同じ白カード）*/
.req-table {
  max-width: 760px; margin: 0 auto;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.req-row {
  display: grid; grid-template-columns: 1fr;   /* スマホは縦積み（項目名→内容）*/
  border-bottom: 1px solid var(--color-line);
  padding: 16px 22px;
}
.req-row:last-child { border-bottom: none; }
.req-row dt {
  font-weight: 800; font-size: 13px; color: var(--color-accent); margin-bottom: 4px;
}
.req-row dd { font-size: 15px; line-height: 1.8; }
.req-note { display: inline-block; font-size: 12.5px; color: var(--color-text-soft); margin-top: 2px; }

/* 初任給（基本給＋手当明細＋モデル月給）*/
.req-pay { display: grid; gap: 6px; max-width: 360px; }
.req-pay-line { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.req-pay-line span:last-child { font-variant-numeric: tabular-nums; }
.req-pay-model {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-top: 1px dashed var(--color-line); padding-top: 9px; margin-top: 3px;
}
.req-pay-model .req-pay-model-label { font-weight: 700; font-size: 14px; }
.req-pay-model strong {                 /* モデル月給：親御さん・先生が最初に見る箇所。大きく強調 */
  font-family: var(--font-serif);
  color: var(--color-accent); font-size: 26px; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* 年間休日など、数値を少し強調 */
.req-row dd strong { color: var(--color-text); font-weight: 700; }

.req-foot {
  max-width: 760px; margin: 18px auto 0;
  font-size: 12px; color: var(--color-text-soft); text-align: left;
}

@media (min-width: 768px) {
  /* 表：項目名｜内容 の2カラムに（会社概要と同じ寸法）*/
  .req-row { grid-template-columns: 160px 1fr; gap: 20px; align-items: start; }
  .req-row dt { margin-bottom: 0; padding-top: 2px; }
  .req-pay-model strong { font-size: 28px; }
  /* PCは横幅に余裕があるので自然幅で横一列に戻す */
  .req-tabs { display: flex; flex-wrap: wrap; }
}

/* =========================================================
   SP全体左揃えデザイン（2026-07-05）
   - ベース（スマホ）は左揃え、PC（769px〜）で従来の中央寄せに戻す
   - .about-text は上のベースで左揃え済み（PCも左のまま＝変更なし）
   ========================================================= */
/* 募集要項・会社概要の見出しラッパー（旧インライン text-align:center を置換）*/
.section-head { text-align: left; }
/* CTA：SPは左揃え（.cta 自体の text-align:center はバッジ等のフォールバックとして残す）*/
.cta .container { text-align: left; }

@media (min-width: 769px) {
  .jobs-lead,
  .sns-inner,
  .gallery-head,
  .cta .container,
  .section-head,
  .req-foot { text-align: center; }
  .sns-badges { justify-content: center; }
}