@charset "UTF-8";

@import "../../../n_common/css/_variable.css";
/* =========================================================
  近居のススメ　特設ページ
  掲載先: /special/kinkyo/css/local.css
  スコープ: .area_kinkyo 配下のみに適用(既存スタイルと衝突しないよう
  すべて .area_kinkyo を起点に記述)

  元データ: Asm久米_近居_子世帯_edit.ai (2026-07-30解析)
  親世帯セクションは別途デザイン支給後に追加予定。
  タブ切り替えJS: js/local.js
========================================================== */

.area_kinkyo {
  /* ---- design tokens (元AIデータより抽出) ---- */
  --child_c: var(--main_c); /* #84c5b1 子世帯テーマカラー(タブ・数字・帯すべて共通) */
  --parent_c: #007b6d; /* 親世帯テーマカラー(暫定。親世帯デザイン支給後に確定) */
  --kkg-bg: #ebf5f1; /* 子世帯コンテナ背景(薄ミント) */
  --kkg-gold: #d5b573; /* 住宅購入制度ボックス */
  --kkg-gold-dark: #a77316;
  --kinkyo_pink: #e998a5;

  font-feature-settings: "palt";
  color: var(--font_c);
  overflow-wrap: break-word;

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .kinkyo_pink {
    color:var(--kinkyo_pink);
  }

  /* ---------------------------------------------------------
    導入(ヒーロー)
  --------------------------------------------------------- */
  .kinkyo-intro {
    font-family: var(--font_gothic);
    .kinkyo-intro__img {
      img {
        width: 100%;
        height: auto;
      }
    }
    .kinkyo-intro__container {
      padding: 40px 0 56px;
      @media (width < 896px) {
        padding: 28px 0 36px;
      }
    }
    .kinkyo-intro__inner {
      width: calc(100% - 80px);
      max-width: 1000px;
      margin-inline: auto;
      text-align: center;
      @media (width < 896px) {
        width: calc(100% - 40px);
      }
    }
    .kinkyo-intro__catch {
      word-break: keep-all;
      font-size: clamp(1.25rem, -0.3077rem + 3.0769vw, 2rem);
      font-weight: 700;
      line-height: 1.4;
    }
    .kinkyo-intro__txt {
      word-break: keep-all;
      font-size: clamp(1rem, -0.0385rem + 2.0513vw, 1.5rem);
      font-weight: 500;
      line-height: 1.6;
      margin-top: 28px;
      @media (width < 896px) {
        margin-top: 20px;
      }
    }
  }

  /* ---------------------------------------------------------
    メリット(タブ+子世帯/親世帯コンテナ)
  --------------------------------------------------------- */
  .kinkyo-merit {
    margin-bottom: 64px;

    .kinkyo-merit__wrap {
      width: calc(100% - 40px);
      max-width: 1600px;
      margin-inline: auto;
    }

    /* タブ */
    .kinkyo-merit__tab {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 3%;
      &.--bottom {
        margin-top: 0;
        .kinkyo-merit__tab__item {
          border-radius: 0 0 12px 12px;
          @media (width < 896px) {
            border-radius: 0 0 8px 8px;
          }
        }
      }
      .kinkyo-merit__tab__item {
        cursor: pointer;
        transition: opacity 0.2s;
        padding: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        color: #fff;
        background: var(--child_c);
        border-radius: 12px 12px 0 0;
        @media (width < 896px) {
          padding: 10px;
          gap: 8px;
          border-radius: 8px 8px 0 0;
        }
        &:hover {
          opacity: 0.85;
        }
        &.--child {
          .kinkyo-merit__tab__txt .txt_bg {
            color: #84c5b1;
          }
        }
        &.--parent {
          background: var(--parent_c);
          .kinkyo-merit__tab__txt .txt_bg {
            color: #007b6d;
          }
        }
      }
      .kinkyo-merit__tab__img {
        flex-shrink: 0;
        width: 90px;
        img {
          width: 100%;
          border-radius: 50%;
          aspect-ratio: 1;
          object-fit: cover;
        }
        @media (width < 896px) {
          width: 56px;
        }
        @media (width < 480px) {
          width: 40px;
        }
      }
      .kinkyo-merit__tab__txt {
        word-break: keep-all;
        text-align: left;
        font-size: clamp(0.75rem, -1.3269rem + 4.1026vw, 1.5rem);
        font-weight: 500;
        line-height: 1.5;
        @media (width < 480px) {
          font-size: 0.7rem;
        }
        .txt_bg {
          padding: 0 0.2em;
          background: #fff89e;
          font-size: 1.15em;
          box-decoration-break: clone;
          -webkit-box-decoration-break: clone;
          font-weight: 700;
        }
      }
    }

    /* コンテナ(子世帯/親世帯共通の入れ物) */
    .kinkyo-merit__container {
      border-top: 10px solid var(--child_c);
      border-bottom: 10px solid var(--child_c);
      display: none;
      @media (width < 896px) {
        border-top-width: 6px;
        border-bottom-width: 6px;
      }
      &.--active {
        display: block;
      }
      &.--parent {
        border-top-color: var(--parent_c);
        border-bottom-color: var(--parent_c);
      }
    }

    .kinkyo-merit__placeholder {
      padding: 100px 20px;
      text-align: center;
      font-size: clamp(1rem, 0.7vw + 0.8rem, 1.25rem);
      font-weight: 500;
      color: var(--font_c);
    }

    /* メインビジュアル(タイトル帯は画像に焼き込み済み) */
    .kinkyo-merit__main {
      img {
        width: 100%;
        max-width: none;
      }
    }

    /* メリット一覧 */
    .kinkyo-merit__about {
      background: var(--kkg-bg);
      padding: 56px 0 72px;
      @media (width < 896px) {
        padding: 36px 0 40px;
      }
    }
    .kinkyo-merit__about__wrap {
      width: calc(100% - 80px);
      max-width: 1200px;
      margin-inline: auto;
      @media (width < 896px) {
        width: calc(100% - 40px);
      }
    }
    .kinkyo-merit__about__list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 40px 0;
      @media (width < 896px) {
        gap: 28px 0;
      }
    }
    .kinkyo-merit__about__item {
      width: 45%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 10px;
      @media (width < 896px) {
        width: 47%;
      }
      @media (width < 480px) {
        width: 100%;
      }
      &.--row {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 4vw;
        @media (width < 480px) {
          flex-direction: column;
          align-items: stretch;
        }
        .kinkyo-merit__about__img {
          width: 45%;
          @media (width < 896px) {
            width: 47%;
          }
          @media (width < 480px) {
            width: 100%;
          }
        }
        .kinkyo-merit__about__contents {
          width: 48%;
          @media (width < 480px) {
            width: 100%;
          }
        }
      }
      .kinkyo-merit__about__img {
        img {
          width: 100%;
          aspect-ratio: 4 / 3;
          object-fit: cover;
        }
      }
    }
    .kinkyo-merit__about__contents {
      text-align: left;
    }
    .kinkyo-merit__about__number {
      width: 100%;
      display: flex;
      gap: 10px;
      align-items: center;
      font-size: clamp(1.125rem, -0.6923rem + 3.5897vw, 1.75rem);
      dt {
        width: 4.4vw;
        min-width: 40px;
        img {
          width: 100%;
          height: auto;
        }
      }
      dd {
        min-width: 0;
        word-break: keep-all;
        font-weight: 600;
        line-height: 1.4;
      }
    }
    .kinkyo-merit__about__txt {
      font-size: clamp(0.9375rem, 0.3849rem + 0.9868vw, 1.0625rem);
      font-weight: 500;
      line-height: 1.6;
      margin-top: 8px;
    }

    /* その他 */
    .kinkyo-merit__about__other {
      margin-top: 56px;
      @media (width < 896px) {
        margin-top: 36px;
      }
    }
    .kinkyo-merit__about__other__ttl {
      font-family: var(--font_gothic);
      font-size: clamp(1.375rem, -0.4423rem + 3.5897vw, 2rem);
      font-weight: 700;
    }
    .kinkyo-merit__about__other__list {
      padding: 24px 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, auto);
      background: #fff;
      border: 2px solid var(--child_c);
      border-radius: 12px;
      margin-top: 16px;
      @media (width < 480px) {
        padding: 0 20px;
        grid-template-columns: 1fr;
      }
    }
    .kinkyo-merit__about__other__item {
      padding: 0 12px;
      grid-row: span 2;
      position: relative;
      display: grid;
      grid-template-rows: subgrid;
      justify-items: center;
      gap: 8px;
      text-align: center;
      @media (width < 480px) {
        padding: 12px 0;
      }
      &:first-of-type::after {
        content: none;
      }
      &::after {
        content: "";
        display: block;
        width: 2px;
        height: 100%;
        background-image: repeating-linear-gradient(180deg, var(--child_c), var(--child_c) 8px, transparent 8px, transparent 14px);
        position: absolute;
        top: 0;
        left: 0;
        @media (width < 480px) {
          width: 100%;
          height: 2px;
          background-image: repeating-linear-gradient(90deg, var(--child_c), var(--child_c) 8px, transparent 8px, transparent 14px);
        }
      }
    }
    .kinkyo-merit__about__other__img {
      align-content: center;
    }
    .kinkyo-merit__about__other__txt {
      word-break: keep-all;
      font-size: clamp(0.9375rem, 0.4808rem + 1.0256vw, 1.125rem);
      font-weight: 500;
      line-height: 1.5;
    }

    /* 子育て/老後サポート図 */
    .kinkyo-merit__about__support {
      margin-top: 56px;
      @media (width < 896px) {
        margin-top: 32px;
      }
      img {
        display: block;
        width: 100%;
        max-width: 900px;
        margin-inline: auto;
      }
    }

    /* 住宅購入制度 */
    .kinkyo-merit__system {
      margin-top: 80px;
      border: 4px solid var(--kkg-gold);
      @media (width < 896px) {
        margin-top: 44px;
        border-width: 2px;
      }
    }
    .kinkyo-merit__system__block {
      padding: 16px;
      background: var(--kkg-gold);
    }
    .kinkyo-merit__system__ttl {
      font-family: var(--font_gothic);
      color: #fff;
      font-size: clamp(1.25rem, -0.3077rem + 3.0769vw, 1.75rem);
      font-weight: 700;
      line-height: 1.4;
    }
    .kinkyo-merit__system__inner {
      padding: 20px 16px;
      background: #fff;
      @media (width < 896px) {
        padding: 16px 12px;
      }
    }
    .kinkyo-merit__system__detail {
      text-align: left;
    }
    .kinkyo-merit__system__detail__item {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      line-height: 1.4;
      margin-top: 8px;
      font-size: clamp(1.25rem, -1.3462rem + 5.1282vw, 2rem);
      padding-left: 0.8em;
      position: relative;
      &:first-of-type {
        margin-top: 0;
      }
      &::before {
        content: "・";
        color: var(--kkg-gold-dark);
        position: absolute;
        top: 0;
        left: 0;
      }
      dt {
        color: var(--kkg-gold-dark);
        font-weight: 700;
        &.--afnone::after {
          content: none;
        }
        &::after {
          content: "／";
          color: var(--font_c);
        }
      }
      dd {
        font-size: clamp(0.875rem, -0.4231rem + 2.5641vw, 1.375rem);
        font-weight: 500;
        .txt_large {
          font-size: 1.5em;
        }
      }
    }
    .kinkyo-merit__system__note {
      text-align: left;
      font-size: clamp(0.875rem, 0.5481rem + 0.7692vw, 1rem);
      margin-top: 10px;
      padding-left: 0.5em;
    }
    .kinkyo-merit__system__btn__wrap {
      text-align: center;
      margin-block: 20px;
      @media (width <= 480px) {
        margin-block: 16px 10px;
      }
    }
    .kinkyo-merit__system__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.8em;
      width: 100%;
      max-width: 460px;
      padding: 0.9em 1.8em;
      background: var(--kkg-gold-dark);
      color: #fff;
      font-weight: 700;
      font-size: clamp(1rem, 0.4vw + 0.9rem, 1.25rem);
      text-align: center;
      text-decoration: none;
      border-radius: 999px;
      box-shadow: 4px 4px 8px rgba(4, 0, 0, 0.2);
      transition: opacity 0.2s;
      &:hover {
        opacity: 0.85;
        text-decoration: none;
      }
    }
    .kinkyo-merit__system__btn__arrow {
      flex-shrink: 0;
      width: 8px;
      height: auto;
    }

    /* 立地紹介バナー(タイトル・キャッチは画像に焼き込み済み) */
    .kinkyo-merit__location {
      background: var(--kkg-bg);
      img {
        width: 100%;
        max-width: none;
      }
    }

    /* 立地・環境詳細 */
    .kinkyo-merit__access {
      padding: 32px 0 64px;
      background: var(--kkg-bg);
      @media (width < 896px) {
        padding: 24px 0 36px;
      }
    }
    .kinkyo-merit__access__wrap {
      width: calc(100% - 80px);
      max-width: 1200px;
      margin-inline: auto;
      @media (width < 896px) {
        width: calc(100% - 40px);
      }
    }
    .kinkyo-merit__access__intro {
      word-break: keep-all;
      font-size: clamp(1.0625rem, 0.1538rem + 1.7949vw, 1.375rem);
      font-weight: 500;
      line-height: 1.6;
      @media (width < 480px) {
        text-align: left;
        word-break: normal;
      }
    }
    .kinkyo-merit__access__inner {
      padding: 48px 24px;
      background: #fff;
      margin-top: 36px;
      @media (width < 896px) {
        padding: 28px 16px;
        margin-top: 28px;
      }
      + .kinkyo-merit__access__inner {
        margin-top: 56px;
        @media (width < 896px) {
          margin-top: 36px;
        }
      }
    }
    .kinkyo-merit__access__block {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 1em;
      @media (width < 480px) {
        flex-direction: column;
      }
    }
    .kinkyo-merit__access__flag {
      flex-shrink: 0;
      max-width: 260px;
      width: 100%;
      img {
        width: 100%;
        height: auto;
        @media (width <= 480px) {
          max-width: 160px;
        }
      }
    }
    .kinkyo-merit__access__catch {
      font-family: var(--font_gothic);
      font-size: clamp(1.25rem, -0.3rem + 3vw, 2rem);
      font-weight: 700;
      line-height: 1.4;
    }
    .kinkyo-merit__access__txt {
      font-size: clamp(1rem, 0.4808rem + 1.0256vw, 1.125rem);
      font-weight: 500;
      line-height: 1.6;
      margin-top: 32px;
      margin-inline: auto;
      @media (width < 896px) {
        word-break: normal;
        text-align: justify;
        margin-top: 20px;
      }
    }

    /* 施設カード */
    .kinkyo-merit__place {
      max-width: 800px;
      margin-inline: auto;
      text-align: left;
      margin-top: 48px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 32px 10%;
      color: var(--font_c);
      @media (width < 896px) {
        gap: 24px 20px;
        margin-top: 32px;
      }
      @media (width < 480px) {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px 16px;
      }
      > li {
        font-size: clamp(1.125rem, -0.3077rem + 2.5vw, 1.5rem);
      }
    }
    .kinkyo-merit__place__img {
      img {
        width: 100%;
        aspect-ratio: 400 / 226;
        object-fit: cover;
      }
    }
    .kinkyo-merit__place__box {
      margin-top: 8px;
    }
    .kinkyo-merit__place__ttl {
      word-break: keep-all;
      font-weight: 700;
      line-height: 1.3;
    }
    .kinkyo-merit__place__route {
      font-weight: 500;
      line-height: 1.2;
      margin-top: 2px;
    }

    /* 利便：MrMax featured card */
    .kinkyo-merit__feature {
      text-align: left;
      max-width: 800px;
      margin-inline: auto;
      margin-top: 48px;
      @media (width < 896px) {
        margin-top: 32px;
      }
    }
    .kinkyo-merit__feature__img {
      img {
        width: 100%;
        aspect-ratio: 400 / 226;
        object-fit: cover;
      }
    }
    .kinkyo-merit__feature__outer {
      display: grid;
      grid-template-columns: 1fr 34%;
      gap: 10px;
      padding-block: 8px 0;
      @media (width <= 480px) {
        grid-template-columns: 1fr;
        gap: 0px;
      }
    }
    .kinkyo-merit__feature__block {
      font-size: clamp(1.125rem, -0.3077rem + 2.5vw, 1.5rem);
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      gap: 6px 1em;
      margin-top: 8px;
    }
    .kinkyo-merit__feature__ttl {
      word-break: keep-all;
      font-weight: 700;
      line-height: 1.3;
    }
    .kinkyo-merit__feature__route {
      font-weight: 500;
    }
    .kinkyo-merit__feature__pict {
      padding-top: 8px;
    }

    /* おすすめのプランバナー(画像に焼き込み済み) */
    .kinkyo-merit__plan {
      img {
        width: 100%;
        max-width: none;
      }
    }

    /* 間取り */
    .kinkyo-merit__room {
      padding: 56px 0 72px;
      background: var(--kkg-bg);
      @media (width < 896px) {
        padding: 32px 0 40px;
      }
    }
    .kinkyo-merit__room__wrap {
      width: calc(100% - 80px);
      max-width: 1200px;
      margin-inline: auto;
      @media (width < 896px) {
        width: calc(100% - 40px);
      }
    }
    .kinkyo-merit__room__inner {
      width: 100%;
    }
    .kinkyo-merit__room__contents {
      img {
        width: 100%;
        height: auto;
      }
    }

    /* モデルルーム誘導CTA */
    .kinkyo-merit__cta {
      margin-top: 40px;
      text-align: center;
      @media (width < 896px) {
        margin-top: 28px;
      }
    }
    .kinkyo-merit__cta__txt {
      word-break: keep-all;
      font-size: clamp(1rem, 0.3vw + 0.9rem, 1.25rem);
      font-weight: 500;
      margin-bottom: 20px;
    }
    .kinkyo-merit__cta__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.8em;
      width: 100%;
      max-width: 460px;
      padding: 0.9em 1.8em;
      background: var(--kinkyo_pink);
      color: #fff;
      font-weight: 700;
      font-size: clamp(1rem, 0.4vw + 0.9rem, 1.25rem);
      text-align: center;
      text-decoration: none;
      border-radius: 999px;
      box-shadow: 4px 4px 8px rgba(4, 0, 0, 0.2);
      transition: opacity 0.2s;
      &:hover {
        opacity: 0.85;
        text-decoration: none;
      }
    }
    .kinkyo-merit__cta__btn__arrow {
      flex-shrink: 0;
      width: 8px;
      height: auto;
    }
  }
}

.newline {
  display: inline-block;
}

.txt_number {
  font-size: 1.5em;
  color: var(--point02);
  color: var(--main_c);
}
.txt_small {
  display: inline-block;
  font-size: 0.7em;
}

.pconly {
  @media (width <= 896px) {
    display: none;
  }
}