/* ===== Base (共通の最低限) ===== */
    :root {
      --container: 1200px;
      --pad-pc: 24px;
      --pad-sp: 16px;
      --bp: 768px;

      --text: #ffffff;
      --btn: #6c5a27;
      /* 右上ボタン */
      --btnHover: #8c7b4d;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      font-family: "Noto Sans JP", "Noto Sans", sans-serif;
      font-weight: 400;
    }

    .sp-only {
      display: none;
    }

    @media (max-width: 767px) {
      .sp-only {
        display: inline;
      }
    }

    /* PCでは改行させない */
    .sp-break {
      display: inline;
    }

    /* SPのみ改行 */
    @media screen and (max-width: 767px) {
      .sp-break {
        display: block;
      }
    }

    .container {
      max-width: var(--container);
      margin: 0 auto;
      padding-left: var(--pad-pc);
      padding-right: var(--pad-pc);
    }

    @media (max-width: 768px) {
      .container {
        padding-left: var(--pad-sp);
        padding-right: var(--pad-sp);
      }
    }

    /* ===== FV ===== */
    .fv {
      position: relative;
      overflow: hidden;
      color: var(--text);
    }

    /* fv-image（背景） */
    .fv__image {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .fv__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* btn（右上） */
    .fv__btn {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
    }

    .fv__btnLink {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 14px 20px;
      background: var(--btn);
      color: #ffffff;
      text-decoration: none;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }

    .fv__btnLink:hover {
      background: var(--btnHover);
    }

    /* text（背景の上に重ねる） */
    .fv__content {
      position: relative;
      z-index: 1;
      min-height: 420px;
      display: flex;
      align-items: center;
    }

    /* FV テキスト（2行でサイズ変更） */
    .fv__text {
      margin: 0;
      max-width: 720px;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .fv__text-main {
      display: block;
      font-size: 42px;
      font-weight: 800;
      line-height: 1.25;
      letter-spacing: 0.03em;
    }

    .fv__text-sub {
      display: block;
      margin-top: 12px;
      font-size: 28px;
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: 0.02em;
    }

    /* ===== Responsive ===== */
    @media (max-width: 768px) {

      .fv {
        position: relative;
        /* これが無いと absolute の基準がずれる */
      }

      .fv__text {
        position: absolute;
        top: 50%;
        left: 16px;
        /* 既存の左右余白に合わせて調整 */
        right: 16px;
        transform: translateY(-50%);
        z-index: 5;
        margin: 0;
      }

      .fv__content {
        min-height: 320px;
        align-items: flex-start;
        padding-top: 56px;
        /* ボタンと被らないように */
      }

      .fv__btnLink {
        padding: 12px 16px;
        font-size: 14px;
      }

      .fv__text-main {
        font-size: 28px;
        line-height: 1.3;
      }

      .fv__text-sub {
        margin-top: 8px;
        font-size: 18px;
        line-height: 1.4;
      }
    }





    /* ===== Navi ===== */

    .navi {
      width: 100%;
      position: -webkit-sticky;
      /* 追加 */
      position: sticky;
      top: 0;
      z-index: 999;
      background-color: #5f7f3a;
      /* 背景はsticky本体へ */
    }

    /* ulのデフォルト余白を消す */
    .navi ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .navi_inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .navi_text {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
      /* ナビ高さ */
    }

    .navi_text li {
      margin: 0;
    }

    /* クリック領域を帯いっぱいに */
    .navi_text a {
      display: flex;
      align-items: center;
      height: 64px;
      padding: 0 18px;
      font-size: 16px;
      color: #ffffff;
      text-decoration: none;
      white-space: nowrap;
    }

    .navi_text a:hover {
      opacity: 0.8;
    }


    /* トグルはPCでは非表示 */
    .navi_toggle {
      display: none;
      width: 100%;
      height: 64px;
      /* ナビ高さに合わせる */
      padding: 0 18px;
      border: none;
      background: transparent;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;

      align-items: center;
      justify-content: space-between;
    }

    /* ===== Hamburger Icon ===== */

    .navi_toggle__icon {
      position: relative;
      width: 22px;
      height: 14px;
      display: inline-block;
    }

    /* 三本線 */
    .navi_toggle__icon::before,
    .navi_toggle__icon::after,
    .navi_toggle__icon span {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #ffffff;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* 上 */
    .navi_toggle__icon::before {
      top: 0;
    }

    /* 中 */
    .navi_toggle__icon span {
      top: 6px;
    }

    /* 下 */
    .navi_toggle__icon::after {
      bottom: 0;
    }


    /* SP用 */
    @media (max-width: 768px) {
      .navi_inner {
        padding: 0;
        /* SPは左右余白を別で入れたいなら調整 */
      }

      /* トグル表示 */
      .navi_toggle {
        display: flex;
      }

      /* SPは縦並びに */
      .navi_text {
        flex-direction: column;
        justify-content: flex-start;
        height: auto;
        /* 固定解除 */
        overflow: hidden;

        /* アコーディオン（閉） */
        max-height: 0;
        transition: max-height 0.3s ease;
      }

      /* 開いた状態 */
      .navi.is-open .navi_text {
        max-height: 500px;
        /* 項目数に合わせて充分大きく（雑でOK） */
      }

      /* リンクの帯クリック領域 */
      .navi_text li {
        height: auto;
      }

      .navi_text a {
        height: auto;
        padding: 16px 18px;
      }

      /* 開いた時、矢印を上向きに
  .navi.is-open .navi_toggle__icon {
    transform: rotate(-135deg);
  } */
    }

    /* ===== Open State ===== */

    .navi.is-open .navi_toggle__icon::before {
      transform: translateY(6px) rotate(45deg);
    }

    .navi.is-open .navi_toggle__icon::after {
      transform: translateY(-6px) rotate(-45deg);
    }

    .navi.is-open .navi_toggle__icon span {
      opacity: 0;
    }

    /* ===== Navi Overlay ===== */

    .navi-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      z-index: 998;
      /* navi(999)の一つ下 */
    }

    /* ナビが開いたときだけ表示 */
    .navi.is-open+.navi-overlay,
    .navi.is-open~.navi-overlay {
      opacity: 1;
      visibility: visible;
    }

    /* PCでは使わない */
    @media (min-width: 769px) {
      .navi-overlay {
        display: none;
      }
    }






    /* ===== section-intro ===== */

    .section-intro {
      position: relative;
      background-image: url("../images/intro_bg.jpg");
      background-size: cover;
      background-position: center;
      padding: 60px 24px;
      text-align: center;
    }

    /* オーバーレイ（背景を少し暗く） */
    .section-intro::before {
      content: "";
      position: absolute;
      inset: 0;
      background-color: rgba(255, 255, 255, 0.7);
      /* 明るめ */
    }

    .section-intro__inner {
      position: relative;
      max-width: 1000px;
      margin: 0 auto;
    }

    .section-intro__inner p {
      font-size: 22px;
      line-height: 1.8;
      font-weight: 600;
      color: #53773D;
      /* グリーン系 */
    }

    .section-intro__inner p+p {
      margin-top: 12px;
    }







    /* ===== section-reason ===== */

    .section-reason {
      padding: 120px 0;
      background-color: #FFFAEF;
    }

    .section-reason .inner {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .section-reason .heading {
      text-align: center;
      font-size: 34px;
      font-weight: 700;
      color: #4f6f3a;
      margin-bottom: 80px;
    }

    .reason-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .reason-item {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      margin-bottom: 120px;
    }

    /* テレコ配置（偶数だけ左右反転） */
    .reason-item:nth-child(even) {
      direction: rtl;
    }

    .reason-item:nth-child(even)>* {
      direction: ltr;
    }

    .reason-media img {
      width: 100%;
      height: auto;
      display: block;
    }

    .reason-text .title {
      font-size: 22px;
      font-weight: 700;
      color: #4f6f3a;
      margin-bottom: 16px;
    }

    .reason-text p {
      font-size: 15px;
      line-height: 1.8;
      color: #333;
    }

    .reason-note {
      display: block;
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.6;
      color: #666;
      text-align: right;
    }

    /* SP */
    @media screen and (max-width: 768px) {
      .section-reason {
        padding: 80px 0;
      }

      .section-reason .heading {
        font-size: 22px;
        margin-bottom: 48px;
      }

      .reason-item {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 64px;
      }

      .reason-item:nth-child(even) {
        direction: ltr;
      }
    }




    /* ===== section-point ===== */

    .section-point {
      position: relative;
      padding: 120px 0;
      background-color: #ffffff;
    }

    .section-point__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .section-point__head {
      text-align: center;
    }

    .section-point__heading {
      font-size: 34px;
      font-weight: 700;
      color: #53773D;
      letter-spacing: 0.04em;
    }

    .section-point__title {
      margin-top: 24px;
      font-size: 22px;
      font-weight: 700;
      color: #5f7f3a;
      line-height: 1.8;
    }

    .section-point__description {
      margin-top: 18px;
      font-size: 14px;
      line-height: 2;
      color: #333333;
    }

    /* list */
    .point-list {
      margin-top: 72px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 56px;
    }

    /* item */
    .point-item__title {
      font-size: 22px;
      font-weight: 700;
      color: #5f7f3a;
    }

    .point-item__border {
      margin-top: 12px;
      height: 2px;
      background-color: #5f7f3a;
      width: 100%;
    }

    .point-item__description {
      margin-top: 18px;
      font-size: 14px;
      line-height: 2;
      color: #333333;
    }

    /* section-bg（必要なら装飾用に使う） */
    .section-point__bg {
      background-color: #ffffff;
    }

    /* ===== Responsive ===== */
    @media (max-width: 768px) {
      .section-point {
        padding: 80px 0;
      }

      .section-point__inner {
        padding: 0 16px;
      }

      .section-point__heading {
        font-size: 26px;
      }

      .section-point__title {
        font-size: 18px;
      }

      .point-list {
        margin-top: 48px;
        grid-template-columns: 1fr;
        gap: 32px;
      }
    }



    /* ===== section-case ===== */

    .section-case {
      position: relative;
      padding: 120px 0;
      background-color: #f7f2e9;
    }

    .section-case::before {
      content: "";
      position: absolute;
      left: -5px;
      top: -5px;
      width: 520px;
      height: 140px;
      background: url("../images/case-solution.png") no-repeat left top / contain;
      z-index: 0;
      pointer-events: none;
    }

    .section-case__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .section-case__head {
      position: relative;
    }

    .section-case__heading {
      position: relative;
      font-size: 34px;
      font-weight: 700;
      color: #53773D;
      letter-spacing: 0.04em;
      text-align: center;
      z-index: 2;
    }


    .section-case__title {
      margin-top: 18px;
      font-size: 22px;
      font-weight: 700;
      color: #5f7f3a;
      line-height: 1.8;
    }

    .section-case__description {
      margin-top: 14px;
      font-size: 14px;
      line-height: 2;
      color: #333333;
      max-width: 720px;
    }

    /* list */
    .case-list {
      margin-top: 56px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 56px 56px;
      /* row / column */
    }

    /* card */
    .case-item {
      background-color: transparent;
    }

    .case-media {
      border: 1px solid #d9d0c3;
      background-color: #ffffff;
    }

    .case-media img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* text */
    .case-text {
      margin-top: 18px;
    }

    .case-title {
      font-size: 20px;
      font-weight: 700;
      color: #5f7f3a;
    }

    .case-desc {
      margin-top: 10px;
      font-size: 14px;
      line-height: 2;
      color: #333333;
    }

    .case-meta {
      margin-top: 10px;
      font-size: 12px;
      line-height: 0.9;
      color: #333333;
    }

    /* section-bg（必要なら装飾用） */
    .section-case__bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    /* ===== Responsive ===== */
    @media (max-width: 768px) {
      .section-case {
        padding: 80px 0;
      }

      .section-case__inner {
        padding: 0 16px;
      }

      .section-case__heading {
        font-size: 26px;
      }

      .section-case__title {
        font-size: 18px;
      }

      .case-list {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .section-case::before {
        width: 320px;
      }

    }




    /* ===== section-flow ===== */

    .section-flow {
      position: relative;
      padding: 120px 0;
      background-color: #ffffff;
    }

    .section-flow__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .section-flow__head {
      position: relative;
      text-align: center;
    }

    .section-flow__heading {
      font-size: 34px;
      font-weight: 700;
      color: #53773D;
    }

    .section-flow__title {
      margin-top: 18px;
      font-size: 22px;
      font-weight: 700;
      color: #5f7f3a;
    }

    .section-flow__description {
      margin-top: 10px;
      font-size: 14px;
      line-height: 2;
      color: #333333;
    }

    .section-flow:before {
      content: "";
      position: absolute;
      left: 5px;
      top: 5px;
      width: 520px;
      height: 140px;
      background: url("../images/flow-process.png") no-repeat left top / contain;
      z-index: 0;
      pointer-events: none;
    }

    /* list */
    .flow-list {
      margin-top: 56px;
      list-style: none;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 24px;
    }

    /* card */
    .flow-item {
      background-color: #eaf3dc;
      border-radius: 6px;
      padding: 24px 18px 28px;
    }

    /* Step帯（矢印） */
    .flow-step {
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      color: #53773D;
      background-color: #cfe6b9;
      border-radius: 4px;
      margin-bottom: 18px;

      clip-path: polygon(0 0,
          calc(100% - 18px) 0,
          100% 50%,
          calc(100% - 18px) 100%,
          0 100%,
          18px 50%);
    }

    /* 先頭 */
    .flow-item--01 .flow-step {
      clip-path: polygon(0 0,
          calc(100% - 18px) 0,
          100% 50%,
          calc(100% - 18px) 100%,
          0 100%);
    }

    /* 最後 */
    .flow-item--05 .flow-step {
      clip-path: polygon(0 0,
          100% 0,
          100% 100%,
          0 100%,
          18px 50%);
    }

    .flow-title {
      font-size: 18px;
      font-weight: 700;
      color: #53773D;
    }

    .flow-desc {
      margin-top: 10px;
      font-size: 13px;
      line-height: 1.9;
      color: #333333;
    }

    /* ===== Responsive ===== */
    @media (max-width: 768px) {
      .section-flow {
        padding: 80px 0;
      }

      .section-flow__inner {
        padding: 0 16px;
      }

      .section-flow__heading {
        font-size: 26px;
      }

      .section-flow__title {
        font-size: 18px;
      }

      .flow-list {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .flow-step {
        clip-path: none;
      }

      .section-flow:before {
        width: 320px;
      }

    }





    /* ===== section-faq ===== */

    .section-faq {
      position: relative;
      padding: 120px 0;
      background-color: #f7f2e9;
    }

    .section-faq__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .section-faq__head {
      position: relative;
      text-align: center;
      margin-bottom: 40px;
    }

    .section-faq__heading {
      font-size: 34px;
      font-weight: 700;
      color: #53773D;
    }

    .section-faq:before {
      content: "";
      position: absolute;
      left: 5px;
      top: 5px;
      width: 520px;
      height: 140px;
      background: url("../images/faq-bg-decoration.png") no-repeat left top / contain;
      z-index: 0;
      pointer-events: none;
    }

    /* list */
    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    /* details */
    .faq-item {
      border: none;
    }

    /* summary（クリック領域） */
    .faq-summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;

      background-color: #5f7f3a;
      color: #ffffff;
      padding: 14px 14px 14px 22px;
    }

    .faq-summary::-webkit-details-marker {
      display: none;
    }

    .faq-question {
      font-size: 16px;
      font-weight: 700;
      line-height: 1.6;
      padding-right: 16px;
    }

    /* 右端トグル */
    .faq-toggle {
      position: relative;
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      display: grid;
      place-items: center;
    }

    .faq-toggle-bk {
      position: absolute;
      inset: 0;
      background-color: #ffffff;
    }

    /* + アイコン（CSSで描画） */
    .icon-toggle {
      position: relative;
      width: 18px;
      height: 18px;
      z-index: 1;
    }

    .icon-toggle::before,
    .icon-toggle::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      background-color: #5f7f3a;
      transform: translate(-50%, -50%);
    }

    .icon-toggle::before {
      width: 18px;
      height: 2px;
    }

    .icon-toggle::after {
      width: 2px;
      height: 18px;
    }

    /* 開いたら + を - に（縦線を消す） */
    .faq-item[open] .icon-toggle::after {
      opacity: 0;
    }

    /* 回答 */
    .faq-answer {
      background-color: #ffffff;
      padding: 18px 22px;
      border: 1px solid #e2d8c9;
      border-top: none;
    }

    .faq-answer p {
      font-size: 14px;
      line-height: 2;
      color: #333333;
      margin: 0;
    }

    /* section-bg（必要なら装飾） */
    .section-faq__bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    /* ===== Responsive ===== */
    @media (max-width: 768px) {
      .section-faq {
        padding: 80px 0;
      }

      .section-faq__inner {
        padding: 0 16px;
      }

      .section-faq__heading {
        font-size: 26px;
      }

      .faq-summary {
        padding: 16px;
      }

      .faq-toggle {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
      }

      .section-faq:before {
        width: 320px;
      }

    }




    /* ===== section-contact ===== */

    .section-contact {
      padding: 120px 0;
      background-color: #f7f2e9;
    }

    .section-contact__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .section-contact__head {
      text-align: center;
    }

    .section-contact__heading {
      font-size: 34px;
      font-weight: 700;
      color: #53773D;
    }

    .section-contact__title {
      margin-top: 18px;
      font-size: 18px;
      font-weight: 700;
      color: #5f7f3a;
      line-height: 2.1;
    }

    /* フォーム埋め込みスペース（高さ指定なし） */
    .form-space {
      margin-top: 28px;
      background-color: #fbfaf7;
      /* デザインのグレー */
      padding: 24px;
    }

    /* 埋め込み要素が幅いっぱいになるように */
    .form-space iframe,
    .form-space form,
    .form-space .embed,
    .form-space>* {
      max-width: 100%;
    }

    /* event block */
    .event {
      margin-top: 56px;
      text-align: center;
    }

    .event__title {
      font-size: 18px;
      font-weight: 700;
      color: #111111;
      line-height: 1.9;
    }

    .event__bnr {
      margin-top: 20px;
      display: inline-block;
      max-width: 760px;
      /* 仮：デザインに合わせて */
      width: 100%;
    }

    .event__bnr img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* section-bg（必要なら装飾用） */
    .section-contact__bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    /* ===== Responsive ===== */
    @media (max-width: 768px) {
      .section-contact {
        padding: 80px 0;
      }

      .section-contact__inner {
        padding: 0 16px;
      }

      .section-contact__heading {
        font-size: 26px;
      }

      .section-contact__title {
        font-size: 16px;
      }

      .form-space {
        padding: 16px;
      }

      .event {
        margin-top: 40px;
      }

      .event__title {
        font-size: 16px;
      }
    }




    /* ===== footer ===== */

    .footer {
      position: relative;
      padding: 90px 0 40px;
      background-color: #ffffff;
    }

    .footer__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .footer__heading {
      text-align: center;
      font-size: 34px;
      font-weight: 700;
      color: #53773D;
      margin-bottom: 48px;
    }

    /* list */
    .footer-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 56px;
      align-items: start;
    }

    /* card（flame） */
    .footer-card {
      text-align: center;
    }

    .footer-card__logo img {
      max-width: 260px;
      /* ロゴに応じて調整 */
      width: 100%;
      height: auto;
      display: inline-block;
    }

    .footer-card__title {
      margin-top: 18px;
      font-size: 16px;
      font-weight: 700;
      color: #111111;
    }

    .footer-card__desc {
      margin-top: 10px;
      font-size: 13px;
      line-height: 1.9;
      color: #333333;
    }

    /* 公式サイトボタン（枠線） */
    .footer-card__btn {
      margin-top: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 220px;
      height: 44px;
      padding: 0 18px;

      border: 2px solid #5f7f3a;
      border-radius: 4px;
      color: #5f7f3a;
      font-weight: 700;
      font-size: 14px;
      text-decoration: none;
      background-color: transparent;
    }

    .footer-card__btn:hover {
      opacity: 0.85;
    }

    /* copyright */
    .footer__copyright {
      margin-top: 56px;
      text-align: center;
      font-size: 12px;
      color: #333333;
    }

    /* pagetop（初期は完全に消す） */
    .pagetop-btn {
      display: none;
      /* ★ここが重要：非表示時はDOM上の当たり判定も消す */

      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 64px;
      height: 64px;
      border: none;
      border-radius: 50%;
      background-color: #5f7f3a;
      cursor: pointer;

      place-items: center;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
      z-index: 1000;
    }

    /* 表示状態 */
    .pagetop-btn.is-visible {
      display: grid;
      /* ★元がgridなので表示時はgridに戻す */
    }

    /* アイコン */
    .pagetop-btn__icon {
      width: 18px;
      height: 18px;
      border-top: 3px solid #ffffff;
      border-left: 3px solid #ffffff;
      transform: rotate(45deg);
      margin-top: 6px;
    }


    /* footer-bg（装飾用） */
    .footer__bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    /* ===== Responsive ===== */
    @media (max-width: 768px) {
      .footer {
        padding: 70px 0 34px;
      }

      .footer__inner {
        padding: 0 16px;
      }

      .footer__heading {
        font-size: 26px;
        margin-bottom: 32px;
      }

      .footer-list {
        grid-template-columns: 1fr;
        gap: 38px;
      }

      .pagetop-btn {
        right: 16px;
        bottom: 16px;
        width: 56px;
        height: 56px;
      }
    }


    /* ===== Scroll Fade In ===== */
    .js-fade {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.8s ease, transform 0.8s ease;
      will-change: opacity, transform;
    }

    .js-fade.is-inview {
      opacity: 1;
      transform: translateY(0);
    }

    /* 動きを減らす設定の人向け */
    @media (prefers-reduced-motion: reduce) {
      .js-fade {
        transition: none;
        transform: none;
        opacity: 1;
      }
    }