/* =========================================================
   SOZO CMS default テーマ
   作成者：ソーゾーリンク
   作成日：2026-07-13 (JST)　／　全面改訂：2026-09-16 (JST)
   Copyright (c) Sozolink Inc. All Rights Reserved.
   Produced by Sozolink Inc.
   -----------------------------------------------------
   design-loop 学習規範（web v48）準拠：
   - 背景100%幅 × 中身1200pxセンター（文章主体は800px）
   - セクション上下 padding 110px（画面に大きな空白を必ず作る）
   - 1セクション＝1テーマ。テーマが違えば段を分ける
   - 隣り合う段で同じレイアウト型を続けない（縦の視覚リズムを作る）
   - 見出しは中央揃え、日本語＋下に小さく英語
   - 無彩色ベース＋アクセント1色（カスタムプロパティで一元管理）
   - フラット・直線基調・角丸控えめ・影は使わない（堅実コーポレート）

   全社レスポンシブ規約：1080 / 800 / 560px の3ブレークポイント。
   メディアクエリはファイル末尾にまとめて置く（途中に置くと後続に上書きされる）。
   確認は目視で済ませず 1440 / 1080 / 800 / 390px の4幅で機械的に測る
   （node scripts/responsive_check.mjs <出力ディレクトリ> / /contact/ …）。

   このテーマの前提：**クライアントに写真が1枚も無くても成立すること。**
   画像が無いときはプレースホルダを置かず、枠ごと消す（「写真が無い」を画面に書かない）。
   ========================================================= */

/* ---- Reset（最小） ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; }

/* ---- カラー・変数（カラーはここで一元管理） ---- */
:root {
  --color-base: #ffffff;
  --color-base-sub: #f3f4f6;
  --color-text: #1a1c1e;
  --color-text-sub: #61666b;
  --color-accent: #12507d;        /* アクセント1色（藍） */
  --color-accent-dark: #0d3d60;
  --color-line: #e0e3e7;
  --color-ink: #16191c;           /* フッター等の濃い地 */
  --width-content: 1200px;
  --width-narrow: 800px;
  --space-section: 110px;         /* セクション上下余白（規範：100〜120px以上） */
  --bar-h: 0px;                   /* スマホの下部固定CTAの高さ（560px 以下で 56px） */
}

html { scroll-behavior: smooth; }

/* キーボード操作のフォーカス。定義しないと UA 任せになり、濃い地の上でほぼ見えない */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
.infobar a:focus-visible, .cta a:focus-visible, .footer a:focus-visible, .mobilebar a:focus-visible {
  outline-color: #fff;
}

body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Yu Gothic Medium", "Meiryo", sans-serif;
  font-size: 17px;          /* 町内・高齢の読み手を想定して 16px から上げる */
  line-height: 1.85;
  color: var(--color-text);
  background: var(--color-base);
  padding-bottom: var(--bar-h);   /* 下部固定CTAでフッターを隠さない（下端を切らない） */
  -webkit-text-size-adjust: 100%;
}

/* ---- 共通パーツ ---- */
.inner { max-width: var(--width-content); margin: 0 auto; padding: 0 24px; }
.inner--narrow { max-width: var(--width-narrow); }

.section { padding: var(--space-section) 0; }
.section--tint { background: var(--color-base-sub); }

.section__head { text-align: center; margin-bottom: 56px; }   /* 規範：見出しはセンタリング */
.section__title { font-size: 34px; letter-spacing: .08em; line-height: 1.4; }
.section__title-en {
  display: block;                 /* 規範：日本語＋下に小さく英語 */
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--color-accent);
  margin-top: 10px;
  text-transform: uppercase;
}
.section__more { text-align: center; margin-top: 48px; }

/* ボタン（角丸は付けない＝堅実コーポレートは直角がむしろ正解） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;               /* スマホで押しやすい大きさ（36px 未満を作らない） */
  padding: 0 36px;
  background: var(--color-accent);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid var(--color-accent);
  cursor: pointer;
  transition: background .15s;
}
.btn:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.btn--ghost { background: transparent; color: var(--color-accent); }
.btn--ghost:hover { background: var(--color-accent); color: #fff; }
.btn--tel { font-size: 18px; letter-spacing: .04em; }
.btn--light { background: #fff; color: var(--color-accent); border-color: #fff; }
.btn--light:hover { background: var(--color-base-sub); color: var(--color-accent-dark); border-color: var(--color-base-sub); }

/* ---- ヘッダー ---- */
.header {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-base);
  position: sticky;               /* スクロール中もロゴと電話が消えない */
  top: 0;
  z-index: 50;
}
.header__inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.header__brand {
  font-size: 19px;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: .04em;
  line-height: 1.4;
}
.header__logo { height: 40px; width: auto; display: block; }
.header__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.header__nav { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; }
.header__nav a {
  white-space: nowrap;         /* 収まらないときに1文字ずつ縦に割れるのを防ぐ */
  display: inline-flex;
  align-items: center;
  min-height: 44px;               /* 押しやすさ：以前は 16px しかなかった */
  padding: 0 14px;
  font-size: 14px;
  text-decoration: none;
  color: var(--color-text-sub);
}
.header__nav a:hover { color: var(--color-accent); }
.header__tel {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-weight: bold;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.header__cta { display: inline-flex; flex-shrink: 0; }
.header__cta .btn { min-height: 44px; padding: 0 22px; font-size: 14px; white-space: nowrap; }

/* ドロワー（JS を書かずに details/summary で開閉する） */
.drawer { display: none; }
.drawer__btn {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-line);
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--color-text-sub);
}
.drawer__btn::-webkit-details-marker { display: none; }
.drawer__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--color-base);
  border-bottom: 1px solid var(--color-line);
  padding: 8px 24px 20px;
}
.drawer__panel a {
  display: block;
  min-height: 52px;
  line-height: 52px;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
  font-size: 16px;
}
.drawer__panel .btn { width: 100%; margin-top: 16px; }

/* ---- S1 ヒーロー（要素を絞る：主見出し＋価値提案＋CTA のみ） ---- */
.hero { background: var(--color-base-sub); position: relative; }
.hero--photo { background: var(--color-ink); }
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
}
.hero__inner {
  position: relative;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 150px 24px;
  text-align: center;
}
.hero--photo .hero__inner { color: #fff; }
.hero__eyebrow {
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--color-accent);
  margin-bottom: 22px;
}
.hero--photo .hero__eyebrow { color: #fff; }
.hero__title { font-size: 46px; letter-spacing: .06em; line-height: 1.5; font-weight: bold; }
.hero__lead { margin: 26px auto 0; max-width: 680px; font-size: 17px; color: var(--color-text-sub); }
.hero--photo .hero__lead { color: #e8eaec; }
.hero__actions { margin-top: 44px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- S2 営業情報バー（細帯・FV と地続き） ---- */
.infobar { background: var(--color-ink); color: #fff; }
.infobar__inner {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.infobar__item {
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid rgba(255,255,255,.14);
}
.infobar__item:first-child { border-left: 0; }
.infobar__label { font-size: 11px; letter-spacing: .16em; color: #9fa7af; }
.infobar__value { font-size: 15px; line-height: 1.6; }
.infobar__value a {
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* 指で押せる大きさ（電話はこのサイトの一番の目的） */
}
.infobar__tel { font-size: 21px; letter-spacing: .04em; }

/* ---- S3 私たちについて（画像＋テキストの2分割） ---- */
.about__grid { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
.about__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about__body p { margin-bottom: 26px; }
.about--noimg { max-width: var(--width-narrow); margin: 0 auto; text-align: center; }
.about--noimg .about__body p { text-align: left; }

/* ---- S4 事業内容（3カラムグリッド：ピクト上・テキスト下） ---- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--color-base);
  border: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card__body { padding: 28px 24px; }
.card__num {
  display: block;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.card__title { font-size: 19px; line-height: 1.6; margin-bottom: 12px; }
.card__text { font-size: 14px; color: var(--color-text-sub); line-height: 1.85; }

/* ---- S5 選ばれる理由（横長ブロックの縦積み・左に大きな番号） ---- */
.reasons { max-width: 980px; margin: 0 auto; }
.reason {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  align-items: start;
  padding: 36px 0;
  border-top: 1px solid var(--color-line);
}
.reason:last-child { border-bottom: 1px solid var(--color-line); }
.reason__num {
  font-size: 46px;
  line-height: 1;
  font-weight: bold;
  color: var(--color-accent);
  letter-spacing: .02em;
}
.reason__title { font-size: 21px; margin-bottom: 10px; line-height: 1.6; }
.reason__text { font-size: 15px; color: var(--color-text-sub); }

/* ---- S6 実績（2カラムの画像カード） ---- */
.works { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.work { text-decoration: none; display: block; }
.work__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.work__meta { margin-top: 16px; font-size: 13px; color: var(--color-text-sub); display: flex; gap: 12px; align-items: baseline; }
.work__title { font-size: 19px; line-height: 1.6; margin-top: 6px; }
.work:hover .work__title { color: var(--color-accent); }

/* ---- S7 お知らせ（日付＋カテゴリ＋見出しのリスト：日本のコーポレート慣習） ---- */
.news__item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--color-line);
}
.news__item:first-child { border-top: 1px solid var(--color-line); }
.news__date { font-size: 14px; color: var(--color-text-sub); white-space: nowrap; }
.news__cat {
  font-size: 12px;
  font-weight: bold;
  color: #24567f;
  background: #eaf1f8;            /* 枠線ではなくベタ塗り（対背景 6.9:1） */
  padding: 3px 10px;
  white-space: nowrap;
}
.news__link { text-decoration: none; display: inline-block; padding: 7px 0; }
.news__link:hover { color: var(--color-accent); text-decoration: underline; }
.news__empty { text-align: center; color: var(--color-text-sub); }

/* ---- S8 アクセス（左＝表／右＝地図ボタン） ---- */
.access__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.access__table { width: 100%; border-collapse: collapse; }
.access__table th, .access__table td {
  text-align: left;
  padding: 16px 8px;
  border-bottom: 1px solid var(--color-line);
  font-size: 15px;
  vertical-align: top;
}
.access__table th { width: 8em; font-weight: bold; color: var(--color-text-sub); font-size: 14px; }
.access__map {
  background: var(--color-base-sub);
  padding: 48px 32px;
  text-align: center;
}
.access__map p { font-size: 14px; color: var(--color-text-sub); margin-bottom: 24px; }

/* ---- S9 お問い合わせ CTA（アクセント地のセンター帯） ---- */
.cta { background: var(--color-accent); color: #fff; padding: 84px 0; text-align: center; }
.cta__title { font-size: 28px; letter-spacing: .06em; line-height: 1.6; }
.cta__lead { margin-top: 16px; font-size: 15px; color: #dce6ee; }
.cta__actions { margin-top: 38px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- S10 スマホの下部固定CTA（800px 以下で出す） ---- */
.mobilebar { display: none; }

/* ---- 記事・固定ページ ---- */
.article { padding: 80px 0 var(--space-section); }
.article__meta { display: flex; gap: 12px; align-items: baseline; color: var(--color-text-sub); font-size: 14px; }
.article__title { font-size: 32px; line-height: 1.55; margin: 14px 0 40px; }
.article__hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 40px; }
.article__body h2 { font-size: 24px; margin: 48px 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--color-accent); line-height: 1.5; }
.article__body h3 { font-size: 19px; margin: 36px 0 14px; line-height: 1.6; }
.article__body h4 { font-size: 17px; margin: 28px 0 12px; }
.article__body p { margin: 0 0 22px; }
.article__body ul, .article__body ol { margin: 0 0 22px 1.4em; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body a { color: var(--color-accent); }
.article__body img { margin: 0 0 22px; }
.article__body table { width: 100%; border-collapse: collapse; margin: 0 0 22px; }
.article__body th, .article__body td { border: 1px solid var(--color-line); padding: 10px 12px; text-align: left; }
.article__body blockquote {
  margin: 0 0 26px;
  padding: 22px 26px;
  background: var(--color-base-sub);
  color: #4a5158;
}
.article__body pre {
  background: var(--color-base-sub);
  padding: 18px;
  overflow-x: auto;
  font-size: 14px;
  margin: 0 0 22px;
}
.article__back { margin-top: 56px; }
.article__back a { color: var(--color-accent); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }

/* ---- 一覧ページ ---- */
.archive { padding: 80px 0 var(--space-section); }

/* ---- お問い合わせ ---- */
.contact-form__label { display: block; margin: 26px 0 8px; font-weight: bold; font-size: 14px; }
.contact-form__req { font-size: 11px; color: #fff; background: var(--color-accent); padding: 2px 8px; margin-left: 8px; }
.contact-form__input, .contact-form__textarea {
  width: 100%;
  padding: 14px;
  /* 入力欄の枠は「操作できる部品」なので、飾りの罫線と違いコントラストが要る。
     従来の --color-line（#e0e3e7・対白 1.2:1）では、どこに書くのか分からなかった。 */
  border: 1px solid #767d85;      /* 対白 4.2:1 */
  font-size: 16px;                /* 16px 未満だと iOS が勝手に拡大する */
  font-family: inherit;
  background: #fff;
}
.contact-form__input:focus, .contact-form__textarea:focus {
  border-color: var(--color-accent);
}
.contact-form__textarea { min-height: 200px; line-height: 1.8; }
.contact-form__submit { text-align: center; margin-top: 40px; }
.contact-form__hp { position: absolute; left: -9999px; }  /* ハニーポット */
.thanks__text { text-align: center; }

/* ---- フッター ---- */
.footer { background: var(--color-ink); color: #fff; }
.footer__inner { max-width: var(--width-content); margin: 0 auto; padding: 64px 24px 40px; text-align: center; }
.footer__brand { font-weight: bold; letter-spacing: .06em; font-size: 18px; }
.footer__company {
  display: flex; gap: 8px 24px; flex-wrap: wrap; justify-content: center;
  font-size: 14px; color: #c3c9cf; margin-top: 18px;
}
.footer__company a {
  color: #c3c9cf;                /* 既定のリンク色（青/紫）を出さない */
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.footer__text { font-size: 14px; color: #c3c9cf; margin-top: 18px; }
.footer__nav { display: flex; gap: 8px 24px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
.footer__nav a { font-size: 14px; color: #c3c9cf; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.footer__nav a:hover { color: #fff; }
.footer__copy { font-size: 12px; color: #8b9298; margin-top: 30px; }

/* =========================================================
   レスポンシブ（全社規約：1080 / 800 / 560px）
   規約どおり、メディアクエリは CSS の最後にまとめて置く。
   ========================================================= */
@media (max-width: 1080px) {
  :root { --space-section: 88px; }
  .hero__inner { padding: 120px 24px; }
  .hero__title { font-size: 38px; }
  .section__title { font-size: 30px; }
  .about__grid { gap: 40px; }
  .cards { gap: 24px; }
  .works { gap: 28px; }
  .access__grid { gap: 36px; }
}

@media (max-width: 800px) {
  /* 下部固定バーは 56px ＋ 上境界 1px。body の余白はそれより少し広く取り、
     フッターの最終行がバーにぴったり張り付かないようにする（下端を切らない）。 */
  :root { --space-section: 72px; --bar-h: 68px; }

  /* ヘッダー：横並びをやめてドロワーへ逃がす（規約） */
  .header__inner { padding: 12px 16px; }
  .header__nav, .header__cta { display: none; }
  .drawer { display: block; position: static; }
  .header { position: sticky; }

  .hero__inner { padding: 88px 20px; }
  .hero__title { font-size: 30px; }
  .hero__lead { font-size: 16px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .infobar__inner { grid-template-columns: 1fr; padding: 0 16px; }
  .infobar__item { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding: 16px 0; }
  .infobar__item:first-child { border-top: 0; }

  .inner { padding: 0 16px; }
  .section__head { margin-bottom: 40px; }
  .section__title { font-size: 25px; }

  .about__grid { grid-template-columns: 1fr; gap: 28px; }
  .cards, .cards--2 { grid-template-columns: repeat(2, 1fr); }
  .works { grid-template-columns: 1fr; }
  .reason { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .reason__num { font-size: 32px; }
  .access__grid { grid-template-columns: 1fr; }

  .article__title { font-size: 26px; }
  .article__body h2 { font-size: 21px; }

  .cta { padding: 64px 0; }
  .cta__title { font-size: 23px; }
  .cta__actions { flex-direction: column; align-items: stretch; }
  .cta__actions .btn { width: 100%; }

  /* 下部固定CTA：スクロール途中で決めた人をその場で受ける */
  .mobilebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    border-top: 1px solid rgba(255,255,255,.2);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobilebar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background: var(--color-accent);
  }
  .mobilebar a + a { background: var(--color-ink); border-left: 1px solid rgba(255,255,255,.2); }
}

@media (max-width: 560px) {
  :root { --space-section: 60px; }
  .header__brand { font-size: 16px; }
  .header__logo { height: 34px; }
  .header__tel { padding: 0 12px; font-size: 14px; }

  .hero__inner { padding: 64px 16px; }
  .hero__title { font-size: 26px; letter-spacing: .04em; }
  .hero__eyebrow { font-size: 12px; margin-bottom: 16px; }

  .section__title { font-size: 22px; }
  .cards, .cards--2 { grid-template-columns: 1fr; }   /* 1カラムへ */
  .card__body { padding: 22px 18px; }

  /* お知らせは1行に収まらないので2行に折る（文字を縦に割らせない） */
  .news__item { flex-wrap: wrap; gap: 6px 12px; padding: 16px 2px; }
  .news__link { flex-basis: 100%; }

  .access__map { padding: 32px 20px; }
  .article__title { font-size: 22px; }
  .footer__inner { padding: 48px 16px 32px; }
  .footer__company { flex-direction: column; gap: 6px; }
}