:root {
  /* 色 */
  --bg: #ffffff;
  /* 背景色（ページ全体、コンテナなど） */
  --bg-accent: #EFF3F9;
  /* 背景色（アクセント） */
  --bg-accent-strong: #E0E9F6;
  /* 背景色（アクセント強め） */
  --bg-accent-light: #F5F5F5;
  /* 背景色（アクセント弱め） */
  --fg: #272727;
  /* 本文色 */
  --surface: #f9fafb;
  /* カード・パネル背景 */
  --border: #e5e7eb;
  /* 枠線・仕切り */
  --border-accent: #89C7CE;
  --border-accent-light: #BEBEBE;

  /* フォント */
  --font-family: 'Noto Sans JP', sans-serif;
  --font-family-serif: 'Noto Serif JP', serif;

  /* フォントサイズ */
  --fs-body-xxxlg: 32px;
  --fs-body-xxlg: 24px;
  --fs-body-xlg: 20px;
  --fs-body-lg: 16px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-body-xsm: 11px;

  --text-primary: #272727;
  --text-secondary: #4A4A4A;
  --text-anchor: #044979;

  /* ブランドカラー */
  --brand: #1F518E;
  --accent: #05657A;
  --muted: #E0E9F6;

  /* 状態色 */
  --success: #16a34a;
  --warning: #facc15;
  --danger: #ef4444;

  /* カテゴリー色 */
  --category-corporate: #245FA0;
  --category-inheritance: #4DBDC7;
  --category-other-services: #A5BDCE;
  --category-divorce: #87D0F4;
  --category-traffic-accident: #5F65AF;
  --category-real-estate: #A2D5CE;
  --category-news: #BFE7FF;
  --category-other: #A5BDCE;

  /* スペーシング・装飾 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --radius-accent: 12px;
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 10px 20px rgba(0, 0, 0, .08);

  /* 矢印用 */
  --arrow-stroke: 1px;
  /* 線の太さ */
  --arrow-len: 24px;
  /* 横線の長さ */
  --arrow-head: 10px;
  /* 斜め線の長さ */
}

/* body / 基本要素 */
body {
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-body);
  font-family: 'Noto Sans JP', sans-serif;
}

a {
  text-decoration: none;
  color: var(--text-anchor);
}

ul,
ol,
li {
  list-style: none;
}

address {
  font-style: normal;
}

/* 見出し・本文フォント */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Noto Serif JP', serif;
}

p,
span,
div,
a,
li {
  font-family: 'Noto Sans JP', sans-serif;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* ボタン */
.button {
  padding: var(--space-4);
  background: var(--accent);
  border-radius: var(--radius);
  font-size: var(--fs-body-lg);
  color: #fff;
}

figure.zoom {
  overflow: hidden;
  img {
    width: 100%;
    object-fit: cover;
  }

  /* ★重要：拡大してはみ出した部分を隠す */
  &:hover img {
    transition: transform 0.3s ease;
    transform: scale(1.1);
  }
}

/* ヘッダー */
header#site-header {
  padding: var(--space-6);
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;

  /* ロゴ部 */
  h1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 240px;

    img {
      width: 100%;
    }

    margin-left: 20px;

    span {
      display: block;
      color: var(--accent);
      font-size: var(--fs-body-xsm);
      margin: 0;
    }
  }

  /* 右側ブロック（電話・ボタン・ハンバーガー） */
  .contact {
    display: flex;
    gap: var(--space-4);

    @media (width <=500px) {
      .button {
        display: none;
      }
    }

    /* 電話番号 */
    .tel {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      a {
        font-size: var(--fs-body-xxlg);
        font-weight: bold;
        color: var(--accent);
      }

      p {
        font-size: var(--fs-body-lg);
        color: var(--fg);
      }

      /* 767px以下で非表示（nav最下部に出すため） */
      @media (width <=767px) {
        display: none;
      }
    }
  }

  /* ハンバーガー */
  .hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    margin-top: 15px;

    span {
      width: 100%;
      height: 3px;
      background: var(--fg);
      border-radius: 2px;
      transition: background 0.3s ease;
    }

    /* 1280px未満で表示 */
    @media (width < 1280px) {
      display: flex;
    }

    /* 1280px以上で非表示 */
    @media (width >=1280px) {
      display: none;
    }
  }

  /* グローバルナビ */
  nav#global-nav {

    /* PC（1280px以上）はインライン配置のまま、モバイルはスライドドロワー */
    ul {
      display: flex;
      gap: var(--space-6);
      font-size: var(--fs-body-lg);
    }

    .active {
      font-weight: bold;
    }

    .nav-contact {
      display: none;

      @media (width <=767px) {
        display: block;
        width: 100%;
        text-align: center;
        padding: var(--space-4);
        margin-top: 16px;
        border-radius: var(--radius);
      }
    }

    /* 1280px未満：ドロワー化 */
    @media (width < 1280px) {
      position: fixed;
      top: 0;
      right: -100%;
      width: min(80vw, 360px);
      height: 100vh;
      background: var(--bg);
      box-shadow: var(--shadow);
      padding: 80px 24px 24px;
      transition: right 0.3s ease;
      z-index: 1000;
      border-left: 1px solid var(--border);

      &.open {
        right: 0;
      }

      ul {
        display: flex;
        flex-direction: column;
        gap: 16px;
        font-size: var(--fs-body-xlg);
      }
    }

    /* 767px以下：縦スクロール可能にし、nav-telを最下部へ */
    @media (width <=767px) {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

    }
  }
}

/* ヒーローエリア */
section#hero {
  /* 2枚目の背景だけをCSS変数に */
  --slide-bg: url(../img/top_banner1-min.webp);

  background-image:
    url(../img/top_banner0-min.webp),
    /* ← 上に重ねる（固定） */
    var(--slide-bg);
  /* ← 下の背景（ここだけ切替） */

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 90vh;

  @media (width <=767px) {
    height: 70vh;
  }

  @media (width <=400px) {
    height: 70vh;
    padding: 0 30px;
  }

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  align-items: center;

  h2 {
    font-size: var(--fs-body-xxxlg);

    @media (width <=767px) {
      font-size: var(--fs-body-xxlg);
    }

    @media (width <=400px) {
      font-size: var(--fs-body-lg);
    }

    color: #fff;
    font-weight: normal;
    text-align: center;
    line-height: 2;
  }

  h3 {
    font-size: var(--fs-body-xxlg);

    @media (width <=767px) {
      font-size: var(--fs-body-lg);
    }

    color: #fff;
    font-weight: normal;
    text-align: center;
    line-height: 1.5;
  }

  p.sub {
    font-size: var(--fs-body-xlg);
    text-align: center;
    color: #fff;
    font-weight: normal;
    line-height: 1.5;
    font-family: 'Noto Serif JP', serif;
    padding: 0 var(--space-4);

    @media (width <=767px) {
      font-size: var(--fs-body-sm);
    }
  }

  .strength {
    display: flex;
    gap: var(--space-4);

    p {
      font-size: var(--fs-body-lg);
      letter-spacing: 6px;
      color: #fff;
      border: 1px solid #fff;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      width: 146px;
      height: 146px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;

      @media (width <=767px) {
        width: 100px;
        height: 100px;
        font-size: var(--fs-body-xsm);
      }
    }

  }
}

/* パンくずリスト */
section#breadcrumbs {
  ul {
    padding: var(--space-8) 0 var(--space-8) var(--space-8);
    display: flex;

    li {
      &.active {
        font-weight: medium;
      }
    }

    li,
    a {
      color: var(--fg);
    }

    li:not(:last-child)::after {
      content: ">";
      margin: 0 var(--space-4);
    }
  }
}

/* ヒーローコンテンツ下の文章 */
section#hero-content {
  text-align: center;
  padding: var(--space-6);
  margin: var(--space-8);

  h2 {
    font-size: var(--fs-body-xlg);
    color: #044979;
    font-weight: normal;
    line-height: 60px;

    @media (width <=767px) {
      font-size: var(--fs-body);
    }
  }
}

/* 各カテゴリーの色 */
span.inheritance {
  background: var(--category-inheritance);
}

span.other-services {
  background: var(--category-other-services);
}

span.corporate {
  background: var(--category-corporate);
}

span.divorce {
  background: var(--category-divorce);
}

span.traffic-accident {
  background: var(--category-traffic-accident);
}

span.real-estate {
  background: var(--category-real-estate);
}

span.news {
  background: var(--category-news);
}

span.other {
  background: var(--category-other);
}

aside.tag {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);

  a {
    font-size: var(--fs-body-sm);
    border: 1px solid var(--text-anchor);
    color: var(--text-anchor);
    padding: var(--space-1) var(--space-4);
    border-radius: 10vh;
  }
}

aside.tel-contact {
  min-width: 280px;
  background-color: white;
  color: var(--fg);
  padding: var(--space-7);
  text-align: center;
  border-radius: var(--radius-sm);

  h3 {
    font-weight: bold;
    font-size: var(--fs-body);
    font-family: var(--font-family);
    margin-bottom: var(--space-3);
  }

  p.phone {
    font-size: var(--fs-body-xxlg);

    a {
      color: var(--accent);
    }
  }

  p.hours {
    font-size: var(--fs-body-sm);
    margin-bottom: var(--space-4);
  }

  a.btn {
    display: block;
    width: 148px;
    background-color: var(--category-inheritance);
    color: #fff;
    padding: var(--space-2) 0;
    border-radius: var(--radius-sm);
    text-align: center;
    margin: 0 auto;
  }
}

/* 弁護士コラム */
section#columns {
  &>p {
    margin: var(--space-7) auto 0;
    text-align: center;
    width: 90%;
    line-height: 2;
  }

  a.btn-arrow {
    margin: var(--space-4) auto 0;
    width: 200px;
    padding: var(--space-3) 0;
  }

  section#columns-list {
    max-width: 1200px;
    width: 90%;
    margin: var(--space-8) auto 0;
    padding: 0;
    display: grid;
    /* PCは3列 */
    grid-template-columns: repeat(3, 1fr);
    /* justify-content: start; は削除（均等配置のため不要） */
    text-align: left;
    gap: var(--space-6);

    /* ▼ タブレット（1024px以下）は2列にする設定を追加 */
    @media (width <=1024px) {
      grid-template-columns: repeat(2, 1fr);
    }

    /* ▼ スマホ（767px以下）は1列 */
    @media (width <=767px) {
      grid-template-columns: 1fr;
    }

    article {
      display: flex;
      flex-direction: column;
      /* flex: 1; を削除し、高さを100%にしてグリッド行一杯に広げる */
      height: 100%;
      background: #fff;
      padding: var(--space-6) var(--space-5);
      /* パディングを含めたサイズ計算にする */
      box-sizing: border-box;

      span.category {
        display: inline-flex;
        align-self: flex-start;
        font-size: var(--fs-body-sm);
        color: #fff;
        padding: var(--space-1) var(--space-3);
        margin-bottom: var(--space-3);
      }

      /* ▼ 画像の比率維持設定 */
      figure {
        margin: 0 0 var(--space-3) 0;

        img {
          width: 100%;
          /* 横幅はいっぱいにする */
          height: auto;
          /* 高さは自動（比率に合わせる） */
          aspect-ratio: 400 / 261;
          /* ★重要：400:261の比率を固定する */
          object-fit: cover;
          /* 万が一画像自体の比率が違う場合も枠に合わせる */
          vertical-align: bottom;
        }
      }

      /* figureタグがない場合は img { ... } に直接指定してください */

      h3 {
        font-size: var(--fs-body);
        margin: var(--space-3) 0;
      }

      p {
        font-size: var(--fs-body-xsm);
        margin-bottom: var(--space-2);
      }

      time {
        display: block;
        font-size: var(--fs-body-xsm);
        color: var(--text-secondary);
        text-align: right;
        margin-bottom: var(--space-3);
        /* タグとの余白 */
      }

      /* ▼ タグ（ボタン）を最下部に固定する設定 */
      aside.tag {
        margin-top: auto;
        /* ここが重要：上部の余白を自動で埋めて下に押し下げる */
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        a {
          /* タグの装飾（必要に応じて調整） */
          border: 1px solid var(--brand);
          /* 仮の色 */
          border-radius: 50px;
          padding: 4px 12px;
          font-size: 12px;
          color: var(--brand);
          text-decoration: none;
        }
      }
    }
  }
}

/* ドロワーオープン時のスクロール固定（1280px未満のみ） */
html {
  @media (width < 1280px) {

    &.menu-open,
    &.menu-open body {
      overflow: hidden;
      height: 100%;
    }
  }
}

/* nav内の電話（デフォ非表示→767px以下で表示） */
.nav-tel {
  display: none;

  @media (width <=767px) {
    display: block;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: var(--fs-body-lg);

    a {
      font-size: var(--fs-body-xxlg);
      font-weight: bold;
      color: var(--accent);
      display: block;
      margin-bottom: 4px;
    }

    p {
      font-size: var(--fs-body);
      margin: 0;
      color: var(--fg);
    }
  }
}

/* 矢印 */
.arrow {
  /* ここを消せば親の文字色を継承して使える */
  color: var(--fg, currentColor);
  position: relative;
  display: inline-block;
  width: var(--arrow-len);
  height: var(--arrow-stroke);
  margin-left: 5px;
  background: currentColor;

  /* 横線 */
  &::after {
    content: "";
    position: absolute;
    right: 3px;
    top: calc(50% + 3px);
    width: var(--arrow-head);
    height: var(--arrow-head);
    border-top: var(--arrow-stroke) solid currentColor;
    /* 斜め線 */
    transform: translateY(-50%) rotate(45deg);
    transform-origin: right center;
  }
}

/* 矢印付きボタン */
.btn-arrow {
  --arrow-color: var(--fg, #1F518E);
  --arrow-padding: 6px;
  --arrow-width: 300px;

  display: inline-block;
  position: relative;
  padding: var(--arrow-padding);
  width: var(--arrow-width);
  color: var(--arrow-color);
  border: 1px solid var(--arrow-color);
  text-decoration: none;

  .arrow {
    position: absolute;
    left: calc(100% - 10px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--arrow-color);
    /* currentColor が矢印色に */
  }
}

.pc-none {
  display: none;

  @media (width <=767px) {
    display: block;
  }
}

/* PCなど（501px以上）では非表示にする＝改行されない */
.sp-only {
  display: none;
}

/* 500px以下の場合のみ表示する＝改行される */
@media screen and (max-width: 500px) {
  .sp-only {
    display: block;
    /* brタグを有効化 */
  }
}

footer {
  background-color: var(--brand);
  color: #fff;
  /* padding-bottom: var(--space-8); */
  padding-bottom: 60px;

  a {
    color: #fff;
  }

  div.footer-inner {
    display: flex;

    @media (width <=767px) {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    padding: 80px 0 50px 0;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-8);

    &>* {
      flex: 1;

      @media (width <=767px) {
        margin: 0 auto;
        padding: 20px 0;
      }
    }

    section.footer-about {
      h2 {
        font-size: var(--fs-body-xxlg);
        margin-bottom: var(--space-5);
        font-weight: normal;
      }

      p {
        font-size: var(--fs-body-sm);
        line-height: 2;
        margin-bottom: var(--space-5);

        @media (width >=1200px) {
          width: 80%;
        }
      }

      address {
        font-size: var(--fs-body-sm);
      }
    }

    .footer-services-wrapper {
      display: flex;
      gap: var(--space-8);
    }

    nav.footer-services,
    section.footer-areas {
      font-size: var(--fs-body-sm);

      h3 {
        font-weight: bold;
        font-family: var(--font-family);
        margin-bottom: var(--space-5);
      }

      ul {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
      }
    }

  }

  small {
    display: block;
    width: 100%;
    font-size: var(--fs-body-xsm);
    text-align: center;
  }
}