#inheritance section#news {
  background: #fff;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;

  section {
    padding: 80px 0;
    width: 100%;
  }

  .with-bar {
    position: relative;
    padding-left: 1.3em;
    margin-bottom: var(--space-4);
    text-align: left;
    color: var(--accent);
    font-size: var(--fs-body-xlg);
    font-family: var(--font-family);
    font-weight: normal;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.66em;
      width: 18px;
      height: 3px;
      background-color: var(--brand);
    }

    &:nth-of-type(n+2) {
      margin-top: var(--space-8);
    }
  }

  /* news */
  section#news {
    padding: 0 0 var(--space-8) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);

    /* お問い合わせはこちらボタン */
    a#contact-button {
      border: none;
      padding: var(--space-4) var(--space-7);
      border-radius: 0;
      background: var(--brand);
      font-weight: 300;
      font-size: var(--fs-body-xlg);

      i {
        margin-left: 30px;
        font-weight: 100;
      }

      span {
        font-style: italic;
      }
    }

    .news-content {
      padding: var(--space-7);
      background-color: #fff;
      max-width: 930px;
      width: 80%;
      text-align: right;
      padding: var(--space-6) 70px;

      @media (width <=767px) {
        padding: var(--space-7) var(--space-4);
        width: 95%;
      }

      h2 {
        font-size: var(--fs-body-xlg);
        color: var(--text-secondary);
        font-family: var(--font-family);
        letter-spacing: 6px;
        font-weight: normal;
        text-align: center;
        margin-bottom: 20px;
      }

      dl {
        display: grid;
        grid-template-columns: 230px 1fr;
        gap: var(--space-5) 0;

        @media (width <=767px) {
          grid-template-columns: 1fr;
          gap: var(--space-3) 0;
          margin-bottom: 20px;
        }
      }


      dt {
        font-size: var(--fs-body-lg);
        color: var(--text-primary);
        font-weight: normal;
        text-align: left;

        @media (width <=1280px) {
          margin-top: 10px;
        }

        span {
          display: inline-block;
          font-size: var(--fs-body-sm);
          color: #fff;
          padding: 4px 0px;
          text-align: center;
          width: 100px;
          border-radius: 2px;
          margin-left: 40px;

          &.news-column {
            background-color: #51C6D3;
          }

          &.news-info {
            background-color: #1482B9;
          }
        }
      }

      dd {
        text-align: left;
        font-weight: normal;
      }
    }
  }

  /* しらとり法律事務所が選ばれる理由 */
  section#why-choose-us {
    --overlap: clamp(12px, 3vw, 40px);
    padding-top: 0;
    padding-bottom: 80px;
    background: var(--bg-accent);

    /* 見出しを前面に。余計な余白もリセット */
    h2 {
      position: relative;
      z-index: 2;
      /* h2 を手前に */
      margin: 0;
      /* ← デフォルト余白を消すと重なりやすい */
      font-size: var(--fs-body-xxxlg);
      width: 70%;
      padding: var(--space-7) 0 50px 12%;
      background: #fff;

      @media (width <=767px) {
        width: 95%;
        font-size: var(--fs-body-xlg);
        padding: var(--space-7) 0 20px 5%;
      }

      .line {
        width: 90px;
        height: 1px;
        border-bottom: 6px solid var(--accent);
        margin-bottom: var(--space-4);
      }

      span {
        font-family: var(--font-family-serif);
        color: var(--accent);
      }
    }

    /* ul を少し上に引き上げて重ねる */
    ul {
      position: relative;
      /* z-index を有効に */
      z-index: 3;
      /* h2 より奥に */
      width: 85%;
      margin-inline: auto;
      /* 中央寄せ */
      margin-top: calc(-1.8 * var(--overlap));
      /* ← 被せる量 */
      padding-top: var(--overlap);
      /* ← 中身がh2の下に潜らないための余白 */
      display: flex;
      justify-content: center;
      gap: var(--space-6);

      @media (width <=767px) {
        flex-direction: column;
      }

      li {
        flex: 1;
        background: #fff;
        padding: var(--space-4);
        padding-bottom: var(--space-8);

        h3 {
          margin: var(--space-4) 0;
          font-size: var(--fs-body-xlg);
          color: var(--accent);
          text-align: center;
          font-family: var(--font-family);
        }

        p {
          font-size: var(--fs-body);
          line-height: 2;
          text-align: center;
        }
      }
    }
  }

  /* 主な業務内容・法律相談分野 */
  section#legal-services {
    &>p {
      font-size: var(--fs-body);
      line-height: 3;
      margin: var(--space-7) auto 0;
      width: 90%;
    }

    ul.legal-services-list {
      margin-top: var(--space-8);
      display: flex;
      justify-content: center;
      gap: var(--space-6);

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

      &>li {
        flex: 1;
        background: #fff;
        padding-top: var(--space-7);
        padding-bottom: var(--space-8);
        max-width: 400px;

        @media (width <=767px) {
          max-width: 90%;
          width: 90%;
        }

        img {
          width: 75px;
        }

        h3 {
          margin: var(--space-4) 0;
          font-size: var(--fs-body-xlg);
          font-family: var(--font-family);
          color: var(--brand);
        }

        ul {
          display: inline-flex;
          flex-direction: column;
          gap: var(--space-4);
          inline-size: fit-content;
          max-inline-size: 100%;

          @media (width >=768px) {
            margin-top: var(--space-7);
            min-height: 320px;
          }

          li {
            list-style: disc;
            text-align: left;
          }
        }

        p {
          font-size: var(--fs-body-lg);
          line-height: 2;
          font-family: var(--font-family-serif);
          max-width: 330px;
          margin: auto;

          @media (width <=767px) {
            margin-top: var(--space-4);
          }
        }

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

  section#legal-services,
  section#case-studies,
  section#service-area,
  section#columns,
  section#contact,
  section#problems,
  section#why-choose-services,
  section.why-choose-services,
  section#services-support,
  section#flow,
  section#question,
  section#contact,
  section#fees,
  section#profile,
  section#office-view,
  section#office-overview,
  section#contact-header {
    &>p {
      margin: var(--space-7) auto 0;
      text-align: center;
      width: 90%;
      line-height: 2;
    }

    h2 {
      font-size: var(--fs-body-xxxlg);
      position: relative;
      text-align: center;
      width: 90%;
      margin: 0 auto;

      &::after {
        content: "";
        display: block;
        width: 100px;
        height: 6px;
        background: var(--brand);
        margin-top: var(--space-8);
        margin-inline: auto;
      }
    }
  }

  section#legal-services,
  section#columns,
  section#services-support>section {
    text-align: center;
    --split: 60%;
    /* 上側の割合 */
    background-image: linear-gradient(to bottom,
        var(--bg-accent-light) 0%,
        var(--bg-accent-light) var(--split),
        var(--bg-accent-strong) var(--split),
        var(--bg-accent-strong) 100%);
  }

  /* 解決事例 */
  section#case-studies {

    .case-card {
      display: grid;
      border: 1px solid var(--accent);
      width: 90%;
      max-width: 1000px;
      margin: var(--space-7) auto;
      padding: var(--space-7) 62px;

      @media (width <=767px) {
        padding: var(--space-7) 20px;
      }

      gap: var(--space-2) var(--space-7);
    }

    figure {
      grid-column: span 1;
      grid-row: span 3;
      width: 130px;

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

      place-self: center;

      img {
        width: 100%;
      }
    }

    header {
      grid-column: 2 / 3;
      grid-row: span 1;

      @media (width <=767px) {
        grid-column: span 1;
      }

      display: flex;

      @media (width <=500px) {
        flex-direction: column;
      }

      align-items: center;
      gap: var(--space-4);

      .case-category {
        display: inline-block;
        text-align: center;
        background: linear-gradient(90deg, #1955C4 0%, #48FFEC 100%);
        color: #fff;
        min-width: 160px;
        padding: var(--space-2) 0;
      }

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

    p {
      grid-column: span 1;
      grid-row: span 1;
      line-height: 2;
    }

    dl {
      grid-column: span 1;
      grid-row: span 1;
      display: flex;
      align-items: center;
      font-weight: bold;

      dt:nth-of-type(2)::before {
        content: "｜";
        margin: 0 0.5em;
      }
    }
  }

  /* 法律相談対応エリア */
  section#service-area {
    background-image: url(../img/area_background-min.webp);
    background-repeat: repeat-y;
    background-position: center center;
    background-size: 100% auto;

    p {
      margin: var(--space-8) auto 0;
      text-align: center;
      width: 90%;
    }

    div#service-area-map {
      background-color: #fff;
      max-width: 1200px;
      width: 90%;
      padding: var(--space-5);
      margin: var(--space-8) auto 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 70px;

      @media (width <=767px) {
        gap: var(--space-6);
      }

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

        @media (width <=767px) {
          gap: var(--space-2);
        }

        li {
          list-style: disc;
          font-size: var(--fs-body-xlg);

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

      img {
        width: auto;
        height: 470px;

        @media (width <=767px) {
          width: 40%;
          height: auto;
        }
      }

    }
  }

  /* 事務所概要・アクセス */
  section#access {
    background-color: #DBEFED;
    background-image: linear-gradient(white 0 0);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 75% 50%;
    text-align: center;

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

    .map-wrapper {
      max-width: 1200px;
      width: 90%;
      margin: 20px auto;
      padding: 5px;
      border: 1px solid #BEBEBE;
      box-sizing: border-box;
    }

    iframe {
      width: 100%;
      height: 450px;
      border: 0;
      display: block;
    }
  }

  /* このようなことでお悩みではありませんか？ */
  section#problems {
    background: linear-gradient(to bottom, #D8E5EB, #C7E7F6);

    div.problems-content {
      width: 90%;
      max-width: 1000px;
      margin: 50px auto;

      ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5) var(--space-6);

        @media (width <=767px) {
          grid-template-columns: 1fr;
          gap: var(--space-4);

        }

        li {
          padding: var(--space-3);
          background: #fff;
          display: grid;
          gap: 0 var(--space-5);
          grid-template-columns: 1fr 3fr;

          img {
            grid-row: span 2;
            width: 100%;
          }

          h3 {
            align-self: center;
            text-align: center;
            color: var(--accent);
            font-size: var(--fs-body-xlg);
          }

          p {
            line-height: 2;
            text-align: center;
          }
        }
      }

      &>p {
        background: var(--brand);
        margin-top: var(--space-5);
        border-radius: 30px;
        color: #fff;
        font-size: var(--fs-body-lg);
        text-align: center;
        padding: var(--space-3) var(--space-5);
      }
    }
  }

  /* このようなことでお悩みではありませんか？(離婚・男女問題・不動産トラブル・交通事故) */
  section.service-problems {
    h2 {
      text-align: center;
      font-size: var(--fs-body-xxxlg);
      font-weight: normal;
      color: #fff;
      margin-bottom: var(--space-6);
      font-family: var(--font-family);
    }

    p {
      width: 90%;
      margin: 0 auto;
      text-align: center;
      font-size: var(--fs-body-xlg);
      font-family: var(--font-family-serif);
      color: #fff;
      margin-bottom: var(--space-8);
    }

    div.problems-content {
      width: 90%;
      max-width: 1200px;
      background: #fff;
      margin: 0 auto;
      padding: 60px;

      @media (width <=767px) {
        padding: 40px 10px;
      }

      h3 {
        font-size: var(--fs-body-xxxlg);
        text-align: center;
        margin: 0 auto;
        margin-bottom: var(--space-8);

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

        &::after {
          content: "";
          display: block;
          width: 100px;
          height: 6px;
          background: var(--brand);
          margin-top: var(--space-8);
          margin-inline: auto;
        }

      }

      ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5) var(--space-6);

        @media (width <=767px) {
          grid-template-columns: 1fr;
          gap: var(--space-4);
        }

        li {
          border: 1px solid var(--border-accent);
          padding: var(--space-3);
          background: #fff;
          display: grid;
          align-content: center;
          gap: 0 var(--space-5);
          grid-template-columns: 1fr 3fr;

          img {
            width: 100%;
            align-self: center;
          }

          h4 {
            align-self: center;
            color: var(--accent);
            font-size: var(--fs-body-xlg);
            font-weight: normal;

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

    }

    div#reason-for-increase {
      margin-top: var(--space-8);

      div.comparison-flow {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);

        section {
          border: 1px solid var(--border-accent);
          padding: var(--space-7) 0;
          border-radius: var(--radius-sm);
          text-align: center;
          background-color: #DAECF6;

          h4 {
            font-family: var(--font-family);
            font-size: var(--fs-body-xxlg);
            font-weight: bold;
          }

          p {
            margin-top: var(--space-4);
            margin-bottom: 0;
            font-size: var(--fs-body);
            color: var(--fg);
            font-family: var(--font-family);
          }

          span.badge {
            background: var(--accent);
            color: #fff;
            font-size: var(--fs-body);
            font-weight: bold;
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-sm);
          }
        }

        p.intervention-process {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: var(--space-2);
          margin-bottom: 0;

          svg {
            width: 44px;
            color: var(--brand);
          }

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

      section.increase-cases {
        padding: var(--space-8) 0 0 0;

        dl.case-list {
          margin-left: 30px;
          display: grid;
          grid-template-columns: 1fr;
          align-items: center;
          /* gap: var(--space-4) 0; */

          @media (width <=500px) {
            grid-template-columns: 1fr;
            gap: 0;
          }
        }

        dt {
          font-weight: bold;
          font-size: var(--fs-body-lg);
        }


        dt::after {
          content: "：";
          margin-left: 0.2em;
        }

        dd {

          .price,
          .price-highlight {
            font-size: 1.4em;
            font-weight: bold;
          }

          .price {
            color: var(--text-primary);
          }

          .price-highlight {
            color: var(--accent);
          }

        }

        dd:last-of-type {
          font-weight: bold;
        }

        dd:last-of-type:before {
          content: "▶";
          margin-right: 0.5em;
        }

        dd:first-of-type {
          @media (width <=500px) {
            margin-bottom: var(--space-7);
          }
        }
      }
    }
  }

  /* 当事務所が相続問題で選ばれる理由 */
  section#why-choose-services,
  section.why-choose-services {
    background: var(--bg-accent);

    ul.grid-list {
      width: 90%;
      max-width: 850px;
      margin: var(--space-8) auto;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-8) var(--space-7);

      @media (width <=767px) {
        grid-template-columns: 1fr;
        gap: var(--space-4);
      }

      &>li {
        background: #fff;
        padding: var(--space-8);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
        border-radius: var(--radius-sm);
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

        img {
          width: 100%;
          max-width: 100px;
        }

        h3 {
          text-align: center;
          font-size: var(--fs-body-xlg);
          color: var(--accent);
        }

        p {
          line-height: 2;
        }
      }
    }
  }

  section.why-choose-services {
    background: var(--bg-accent-light);

    h3 {
      font-family: var(--font-family);
    }

    p {
      font-family: var(--font-family-serif);
    }

    ul.list-disc {
      margin-top: auto;

      &>li {
        list-style: disc;
        margin-bottom: var(--space-5);
      }
    }

  }

  /* 当事務所の離婚サポート */

  /* しらとり法律事務所のサポート */
  section#services-support {
    background: var(--bg-accent-light);

    section {
      width: 95%;
      max-width: 1500px;
      margin: 0 auto;

      div.services-support-content {
        width: 95%;
        max-width: 1200px;
        margin: 0 auto;
        background: #fff;

        header {
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
          height: 260px;
          display: flex;
          align-items: center;
          justify-content: center;

          .services-support-content-inner {
            color: #fff;
            display: grid;
            grid-template-columns: 66px 1fr;

            @media (width <=500px) {
              grid-template-columns: 1fr;
              justify-items: center;
              padding: 0 30px;
            }

            gap: var(--space-5) var(--space-6);

            figure {
              grid-row: span 2;
              width: 60px;
              height: 60px;

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

              background: #fff;
              padding: 0 var(--space-2);
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: var(--radius-sm);

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

            h3 {
              font-family: var(--font-family);
              font-size: var(--fs-body-xxlg);
              font-weight: normal;
            }

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

        article {
          max-width: 1000px;
          margin: 0 auto;
          width: 90%;
          display: flex;
          gap: 60px;
          align-items: flex-start;
          padding: var(--space-8) 0;

          @media (width <=767px) {
            flex-direction: column;
            align-items: center;
            gap: var(--space-8);
          }

          section {
            padding: 0;

            ul,
            ol,
            dl,
            p {
              padding: 0;
              margin-left: var(--space-6);
              text-align: left;

              @media (width <=767px) {
                margin-left: 0;
              }
            }

            ul,
            dl.check-list {
              list-style: none;

              &>li,
              dt {
                margin-bottom: var(--space-4);
                position: relative;
                padding-left: 1.2em;
                text-align: left;

                &::before {
                  content: "▶";
                  position: absolute;
                  left: 0;
                  /* top: 0.1em; */


                }
              }
            }

            ul.check-list {
              &>li {
                padding-left: 1.6em;

                &::before {
                  content: '✔\fe0e';
                  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
                  font-weight: bold;
                  display: block;
                  position: absolute;
                  left: 0;
                  top: 0.1em;

                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                  border: 1px solid var(--brand);
                  background-color: var(--brand);
                  color: #fff;
                  font-size: 12px;
                  text-align: center;
                  line-height: 20px;
                }
              }
            }

            ol {
              counter-reset: step;

              &>li {
                list-style: none;
                display: flex;
                /* 左右に整列 */
                align-items: stretch;
                margin-bottom: 8px;
                border: 1px solid var(--brand);
                /* 枠線の色を統一 */
                background-color: #ffffff;

                &::before {
                  counter-increment: step;
                  content: counter(step);
                  background-color: var(--brand);
                  /* 青背景 */
                  color: #fff;
                  width: 40px;
                  /* 左側番号ボックス幅 */
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  font-weight: bold;
                  font-size: 16px;
                }

                &>span {
                  padding: var(--space-2);
                }
              }
            }

            dl.box-list,
            dl.box-list-grid {

              dt,
              dd {
                padding: var(--space-2);
                border: 1px solid var(--brand);
              }

              dt {
                background: var(--brand);
                color: #fff;
              }
            }

            dl.box-list-grid {
              display: grid;
              grid-template-columns: auto 1fr;
              gap: var(--space-2) 0;
            }

            dl.check-list {
              display: grid;
              grid-template-columns: auto 1fr;
              gap: var(--space-4) var(--space-5);

              @media (width <=767px) {
                gap: var(--space-2) var(--space-3);
                grid-template-columns: 1fr;
                grid-template-rows: repeat(2, auto);
              }

              &>dt {
                font-weight: bold;
                margin-bottom: 0;
              }

              &>dd::before {
                content: "：";
              }
            }

            div.important {
              border: 3px solid var(--border-accent);
              padding: var(--space-6);
              border-radius: var(--radius-sm);

              h4 {
                padding-left: 1.8em;
              }

              h4::before {
                content: '';
                display: inline-block;
                width: 1.5em;
                height: 1.5em;
                flex-shrink: 0;
                background-color: currentColor;
                top: 0;
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cmask id='SVG5u6ebeaz'%3E%3Cg fill='none' stroke-width='4'%3E%3Cpath fill='%23fff' fill-rule='evenodd' stroke='%23fff' stroke-linejoin='round' d='M24 5L2 43h44z' clip-rule='evenodd'/%3E%3Cpath stroke='%23000' stroke-linecap='round' d='M24 35v1m0-17l.008 10'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cpath fill='currentColor' d='M0 0h48v48H0z' mask='url(%23SVG5u6ebeaz)'/%3E%3C/svg%3E");
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: contain;
              }

              p {
                margin-top: var(--space-2);

                strong {
                  font-size: var(--fs-body-xlg);
                  color: var(--accent);
                }
              }
            }

            div.list-inline {
              display: grid;
              grid-auto-flow: column;
              gap: var(--space-3) var(--space-8);
              grid-template-columns: 1fr 1fr;
              grid-template-rows: auto 1fr;

              @media (width <=767px) {
                grid-template-columns: 1fr;
                grid-template-rows: repeat(4, auto);
              }

              h5 {
                text-align: left;
                color: var(--brand);
                font-family: var(--font-family);
                font-weight: bold;
                background-color: var(--muted);
                padding: var(--space-1) var(--space-4);
                border-radius: var(--radius-sm);
              }

              ul.check-list {
                margin-left: 15px;
              }
            }

            div.figure-list {
              display: grid;
              grid-template-columns: repeat(2, 288px);
              gap: var(--space-4) var(--space-5);

              @media (width <=1000px) {
                grid-template-columns: 1fr;
              }

              figure {
                padding: var(--space-1) var(--space-1) var(--space-4) var(--space-1);
                border: 1px solid var(--border-accent-light);
              }

              img {
                width: 100%;
              }

              figcaption {

                h5,
                p {
                  font-size: var(--fs-body-lg);
                  font-family: var(--font-family);
                  text-align: center;
                }

                h5 {
                  color: var(--brand);
                  margin: 1em 0;
                }

                p {
                  margin-left: 0;
                }
              }
            }
          }

          aside {
            background: var(--muted);
            padding: var(--space-6);
            border-radius: var(--radius-sm);
            width: 450px;

            @media (width <=767px) {
              width: 90%;
            }

            h4 {
              font-weight: bold;
              font-family: var(--font-family);
              color: var(--brand);
              font-size: var(--fs-body-lg);
            }

            dl {
              display: grid;
              grid-template-columns: 1fr 1fr;
              margin-top: var(--space-7);

              dt,
              dd {
                border-bottom: 1px solid var(--border-accent-light);
                padding: var(--space-3) var(--space-2);
              }

              dt {
                text-align: left;
              }

              dd {
                color: var(--brand);
              }
            }

            ul {
              li {
                list-style: none;
                position: relative;
                padding-left: 3.3em;

                @media (width <=767px) {
                  padding-left: 2em;
                }

                line-height: 1.6;
                text-align: left;
                margin-top: var(--space-5);
              }

              li::before {
                content: "";
                position: absolute;
                left: 1em;

                @media (width <=767px) {
                  left: 0;
                }

                top: -0.1em;
                /* 上下の位置調整 */
                width: 2em;
                /* アイコンの幅 */
                height: 2em;
                /* アイコンの高さ */
                background-color: var(--brand);
                mask-repeat: no-repeat;
                mask-size: contain;
              }

            }

            ul.diamond>li::before {
              mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.027 8.558L11.562 3.5h.877l2.534 5.058zm2.53 11.119L3.03 9.442h8.529zm.885 0V9.442h8.53zm3.508-11.12L13.427 3.5h5.265l2.53 5.058zm-13.171 0L5.308 3.5h5.265L8.05 8.558z"/></svg>');

            }

            ul.security>li::before {
              mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 20.962q-3.014-.895-5.007-3.651T5 11.1V5.692l7-2.615l7 2.615V11.1q0 3.454-1.993 6.21T12 20.963m0-1.062q2.425-.75 4.05-2.962T17.95 12H12V4.144L6 6.375v5.156q0 .194.05.469H12z"/></svg>');
            }

            ul.cup>li::before {
              mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M22 8.162v.073c0 .86 0 1.291-.207 1.643s-.584.561-1.336.98l-.793.44c.546-1.848.729-3.834.796-5.532l.01-.221l.002-.052c.651.226 1.017.395 1.245.711c.283.393.283.915.283 1.958m-20 0v.073c0 .86 0 1.291.207 1.643s.584.561 1.336.98l.794.44c-.547-1.848-.73-3.834-.797-5.532l-.01-.221l-.001-.052c-.652.226-1.018.395-1.246.711C2 6.597 2 7.12 2 8.162"/><path fill="currentColor" fill-rule="evenodd" d="M16.377 2.347A26.4 26.4 0 0 0 12 2c-1.783 0-3.253.157-4.377.347c-1.139.192-1.708.288-2.184.874c-.475.586-.45 1.219-.4 2.485c.173 4.348 1.111 9.78 6.211 10.26V19.5H9.82a1 1 0 0 0-.98.804l-.19.946H6a.75.75 0 0 0 0 1.5h12a.75.75 0 0 0 0-1.5h-2.65l-.19-.946a1 1 0 0 0-.98-.804h-1.43v-3.534c5.1-.48 6.039-5.911 6.211-10.26c.05-1.266.076-1.9-.4-2.485c-.476-.586-1.045-.682-2.184-.874" clip-rule="evenodd"/></svg>');
            }

            ul.time>li::before {
              mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 48C141.13 48 48 141.13 48 256c0 114.69 93.32 208 208 208c114.86 0 208-93.14 208-208c0-114.69-93.31-208-208-208m108 240H244a4 4 0 0 1-4-4V116a4 4 0 0 1 4-4h24a4 4 0 0 1 4 4v140h92a4 4 0 0 1 4 4v24a4 4 0 0 1-4 4"/></svg>');
            }
          }

        }

      }
    }
  }

  section#fees {
    section.plan-content {
      width: 90%;
      max-width: 1200px;
      padding: var(--space-8) 0;
      margin: 0 auto;
      display: flex;
      align-items: stretch;

      @media (width <=767px) {
        flex-direction: column;
      }

      gap: var(--space-7);
      text-align: center;

      article {
        flex: 1;
        display: flex;
        flex-direction: column;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

        header {
          color: #fff;
          padding: var(--space-7) 0;

          h3 {
            font-family: var(--font-family);
            font-weight: normal;
            font-size: var(--fs-body-xlg);
            margin-bottom: var(--space-5);
          }

          p {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);

            span {
              font-size: 44px;
              font-weight: bolder;
            }
          }
        }

        &.plan-light {
          header {
            background-color: #369EDE;
          }
        }

        &.plan-standard {
          position: relative;
          border: 3px solid var(--border-accent);

          .badge {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #51C6D3;
            color: #fff;
            font-weight: bold;
            font-size: var(--fs-body-lg);
            padding: 8px 30px;
            border-radius: 100vh;
            z-index: 1;
          }

          header {
            background-color: #1173B0;
          }
        }

        &.plan-premium {
          header {
            background-color: #005488;
          }
        }

        h4 {
          font-size: var(--fs-body-lg);
          color: var(--brand);
          font-family: var(--font-family);
        }

        div.plan-body {
          padding: var(--space-6);
          display: flex;
          flex-direction: column;
          flex-grow: 1;
          background-color: var(--muted);

          ul {
            padding: var(--space-5) 0 var(--space-7);

            li {
              border-bottom: 1px solid var(--border-accent-light);
              padding: var(--space-5) 0;
              font-weight: bold;
            }
          }

          footer {
            margin-top: auto;
            background-color: #fff;
            border-radius: var(--radius-sm);
            padding: var(--space-5) var(--space-7);

            p {
              margin-top: var(--space-2);
              font-size: var(--fs-body);
              font-family: var(--font-family);
              color: var(--fg);
              line-height: 2.0;
            }
          }
        }
      }

    }


    section.merit,
    section.extra-fees {
      margin: 0 auto var(--space-5);
      width: 90%;
      max-width: 1000px;
      padding: var(--space-8) var(--space-8) 230px var(--space-8);

      @media (width <=767px) {
        padding: var(--space-8) var(--space-2) 230px var(--space-2);
      }

      border-radius: var(--radius-sm);

      h3 {
        color: var(--brand);
        font-family: var(--font-family);
      }
    }

    section.merit {
      margin: 0 auto var(--space-5);
      width: 90%;
      max-width: 1000px;
      padding: var(--space-8) var(--space-8) 230px var(--space-8);

      @media (width <=767px) {
        padding: var(--space-8) var(--space-2) 230px var(--space-2);
      }

      border-radius: var(--radius-sm);
      background-image: url(../img/corporate/plan-min.webp);
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: 300px;
      background-color: #DAECF6;

      h3 {
        font-weight: normal;
        font-size: var(--fs-body-xxlg);
        text-align: center;
        margin-bottom: var(--space-7);
      }

      div.merit-grid {
        display: flex;

        @media (width <=767px) {
          flex-direction: column;
        }

        gap: var(--space-8);

        section.case-card {
          flex: 1;
          background-color: #fff;
          border-radius: var(--radius-sm);
          padding: var(--space-7);

          @media (width <=767px) {
            padding: var(--space-7) var(--space-3);
          }

          dl {
            display: grid;
            grid-template-columns: 138px 1fr;
            gap: var(--space-5) 0;

            @media (width <=767px) {
              gap: var(--space-2) 0;
            }

            font-size: var(--fs-body-lg);
            padding-left: var(--space-6);

            @media (width <=767px) {
              padding-left: 0;
            }

            dt {
              position: relative;
              padding-left: 1.2em;
              font-weight: bold;

              &::before {
                content: "▶";
                position: absolute;
                color: var(--brand);
                left: 0;
              }
            }
          }

          p.total-price,
          p.plan-price {
            text-align: center;
            font-weight: bold;
          }

          p.total-price {
            font-size: var(--fs-body-xlg);
            margin-top: var(--space-6);
          }

          p.plan-price {
            font-size: var(--fs-body-lg);

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

          div.plan-detail {
            font-size: var(--fs-body-xlg);
            font-weight: bold;
            text-align: center;
            margin-top: var(--space-6);
          }
        }
      }
    }

    section.extra-fees {
      background-color: #EFF3F9;
      padding-bottom: var(--space-8);

      @media (width <=767px) {
        padding: var(--space-8) var(--space-6);
      }

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

      dl {
        display: grid;
        grid-template-columns: 1fr 4fr;
        gap: var(--space-5) 0;

        @media (width <=767px) {
          grid-template-columns: 1fr;
          gap: 0;
        }

        font-size: var(--fs-body-lg);
        margin-top: var(--space-5);

        dt {
          color: var(--brand);
          text-align: center;
          font-weight: bold;
          background-color: #C7E7F6;
          padding: var(--space-4) 0;
        }

        dd {
          background-color: #fff;
          text-align: left;
          padding: var(--space-4) 0 var(--space-4) var(--space-4);
        }
      }
    }
  }

  /* お問い合わせ */
  section#contact {
    background-color: #c7e5ff;
    background-image: url(../img/contact-background.webp);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto;
    padding-bottom: 600px;

    div.contact-wrapper {
      display: grid;
      max-width: 1000px;
      width: 90%;
      margin: var(--space-7) auto 0;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-8);

      @media (width <=767px) {
        grid-template-columns: 1fr;
        gap: var(--space-4);
      }

      aside,
      a {
        padding: var(--space-7) var(--space-2);
        background: #fff;
        border-radius: var(--radius-sm);

        svg {
          width: 40px;
          color: var(--brand);

        }

        h3 {
          font-size: var(--fs-body-xlg);
          color: var(--brand);
          font-family: var(--font-family);
          font-weight: bold;
        }

        p {
          font-size: var(--fs-body);
          line-height: 2;
        }

      }

      a {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        text-align: center;

        h3 {
          margin: var(--space-4) 0;
        }

        h4 {
          font-size: var(--fs-body-xxxlg);
          font-family: var(--font-family);
          color: var(--fg);
        }

      }

      aside {
        @media (width >=768px) {
          grid-column: span 2;

          p {
            margin-left: var(--space-7);
          }
        }

        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: wrap;
      }
    }
  }

  /* ご相談から解決までの流れ */
  section#flow {
    background: var(--muted);

    div.flow-content {
      display: flex;
      gap: var(--space-8);
      align-items: center;
      background: #fff;
      width: 90%;
      max-width: 1000px;
      margin: var(--space-8) auto 0;
      padding: var(--space-8);
      border-radius: var(--radius-sm);

      @media (width <=767px) {
        flex-direction: column;
        padding: var(--space-4) var(--space-2);
      }

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

        flex: 1;

        img {
          width: 100%;
        }
      }

      ol {
        flex: 2;
        counter-reset: flow-num;

        li {
          position: relative;
          padding-left: 60px;
          height: 120px;

          &:last-child {
            padding-bottom: 0;
          }

          &::before {
            counter-increment: flow-num;
            content: counter(flow-num);
            position: absolute;
            left: 0;
            top: 0;
            width: 40px;
            height: 40px;
            background-color: var(--brand);
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            font-weight: bold;
            font-size: 20px;
            z-index: 2;
          }

          &::after {
            content: '';
            position: absolute;
            left: 18px;
            top: 45px;
            height: 50%;
            width: 4px;
            background-color: var(--border-accent);
            z-index: 1;
          }

          &:last-child::after {
            display: none;
          }

          h3 {
            font-size: var(--fs-body-xxlg);
            font-family: var(--font-family);
            color: var(--brand);
            margin-bottom: 8px;
            font-weight: bold;

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

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

  }

  /* よくあるご質問 */
  section#question {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;

    /* 各Q&Aアイテム */
    details {
      border-bottom: 1px solid var(--border-accent-light);

      summary {
        display: flex;
        align-items: center;
        padding: var(--space-5) 0;
        cursor: pointer;
        position: relative;

        .q-mark {
          color: var(--brand);
          font-size: var(--fs-body-xxlg);
          font-weight: bold;
          margin-right: 15px;
          flex-shrink: 0;
        }

        .q-text {
          font-size: var(--fs-body-xlg);
          line-height: 1.2;
          margin-right: 40px;
        }

        .faq-icon {
          position: absolute;
          right: 0;
          width: 16px;
          height: 16px;

          &::before,
          &::after {
            content: '';
            position: absolute;
            background-color: var(--brand);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: transform 0.3s ease;
          }

          &::before {
            width: 16px;
            height: 2px;
          }

          &::after {
            width: 2px;
            height: 16px;
          }
        }
      }

      p {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease-out;
        overflow: hidden;
      }
    }

    /* 開いている状態（details[open]）のアイコン変化 */
    /* 縦棒を90度回転させて横棒と重ねる（＝マイナスに見せる） */
    details[open] {
      .faq-icon::after {
        transform: translate(-50%, -50%) rotate(90deg);
      }

      p {
        grid-template-rows: 1fr;
        min-height: 0;
        background-color: var(--bg-accent-light);
        padding: var(--space-5);
        margin-bottom: var(--space-5);
        border-radius: var(--radius-sm);
      }
    }
  }

  /* サービスリスト（離婚・交通事故・不動産） */
  section#service-list {
    ul {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      gap: var(--space-6);

      li {
        figure {
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            width: 100%;
          }

          figcaption {
            background-color: #fff;
            width: 85%;
            padding: 24px 0;
            text-align: center;
            margin-top: -40px;
            /* 上にずらして重ねる */
            position: relative;
            /* 重なり順を制御するため */
            z-index: 1;

            h3 {
              font-size: var(--fs-body-xlg);
              color: var(--brand);
              font-family: var(--font-family);
              margin-bottom: var(--space-2);
            }

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

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

  /* 私たちのミッション */
  section#mission {
    padding: 0;
    display: flex;
    gap: var(--space-6);
    align-items: center;
    justify-content: center;

    @media (width <=767px) {
      padding: 0;
      gap: var(--space-2);
    }

    img {
      flex: 1;
      max-width: 35%;

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

    h2 {
      padding: var(--space-6);

      @media (width <=767px) {
        padding: var(--space-2);
      }

      writing-mode: vertical-rl;
      color: var(--brand);
      font-size: var(--fs-body-xxxlg);

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

      font-weight: normal;
      letter-spacing: 0.2em;
    }

    div.mission-text {
      flex: 2;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      @media (width <=767px) {
        align-items: center;
      }

      p {
        width: 80%;
        font-family: var(--font-family-serif);
        line-height: 4;
      }

      h3 {
        width: 80%;
        margin: var(--space-6) 0 var(--space-2);
        font-family: var(--font-family);
      }
    }

  }

  /* 開業への想い */
  section#philosophy {
    background: url(../img/office/philosophy-background-min.webp) no-repeat center center;
    padding: 0;

    div.philosophy-inner {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 100px 5%;
      background-color: color-mix(in srgb, var(--brand), transparent 50%);
      color: #fff;

      h2 {
        text-align: center;
        font-size: var(--fs-body-xxxlg);
        margin-bottom: var(--space-8);
        letter-spacing: 0.2rem;
      }

      p {
        font-family: var(--font-family-serif);
        line-height: 4;
      }
    }
  }

  /* 代表弁護士紹介 */
  section#profile {
    h2 {
      letter-spacing: 0.2rem;
    }

    div.profile-inner {
      width: 90%;
      margin: var(--space-8) auto 0;
      display: grid;
      gap: var(--space-1) var(--space-7);
      grid-template-columns: 1fr 1fr;

      @media (width <=768px) {
        grid-template-columns: 1fr;
      }

      img {
        grid-row: span 4;
        width: 100%;

        @media (width <=768px) {
          margin-bottom: var(--space-7);
        }
      }

      h3 {
        @media (width >=768px) {
          margin-top: var(--space-2);
        }

        font-size: 40px;
        align-self: center;
      }

      p {
        font-size: var(--fs-body-lg);
        align-self: center;
      }

      p.profile-name {
        color: var(--accent);

      }

      dl {
        background-color: var(--bg-accent);
        padding: var(--space-7);
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: var(--space-4) 0;

        @media (width <=768px) {
          grid-template-columns: 1fr;
          padding: var(--space-4);
        }

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

  /* 詳細な経歴 */
  /* これまで就任したことのある委員等 */
  section#career,
  section#committee-history {
    h2 {
      text-align: center;
      font-size: var(--fs-body-xxxlg);
      font-family: var(--font-family);
      font-weight: normal;
    }
  }

  /* 詳細な経歴 */
  section#career {
    margin-top: 0;
    background: var(--bg-accent) url('../img/office/rogo-background-min.webp') no-repeat left bottom;
    background-size: 300px auto;

    @media (width <=768px) {
      background-size: 200px auto;
    }

    dl {
      padding: var(--space-8) var(--space-8) var(--space-8) 0;
      margin-left: 30%;
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: var(--space-4) 0;
      align-items: center;

      @media (width <=768px) {
        grid-template-columns: 1fr;
        margin-left: 0;
        padding: var(--space-4);
      }


      dt {
        color: var(--accent);
        font-size: var(--fs-body-lg);
      }

      dd {
        &>strong {
          color: var(--brand);
          font-size: var(--fs-body-lg);
          margin-right: var(--space-2);
        }
      }
    }
  }

  /* これまで就任したことのある委員等 */
  section#committee-history {
    /* background-color: var(--bg-accent-light); */
    background: var(--bg-accent) url('../img/office/rogo-background-min.webp') no-repeat left bottom;
    background-size: 300px auto;

    @media (width <=768px) {
      background-size: 200px auto;
    }

    ul.card-list {
      width: 80%;
      margin: var(--space-8) auto;
      display: flex;
      gap: var(--space-6);
      justify-content: center;

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

      li.card {
        background-color: #fff;
        padding: var(--space-6);
        padding-left: var(--space-8);

        h3 {
          font-size: var(--fs-body-xlg);
          color: var(--brand);
          text-align: center;
          font-family: var(--font-family);
          font-weight: normal;
          margin-bottom: var(--space-7);
        }

        h3:nth-of-type(2) {
          margin-top: var(--space-7);
        }

        ul.role-list {
          padding: var(--space-4);

          li {
            list-style: disc;
            margin-bottom: var(--space-4);
          }
        }
      }
    }

    p.summary-text {
      text-align: center;
      padding: var(--space-4);
      font-family: var(--font-family-serif);
      letter-spacing: 0.1rem;
    }
  }

  /* 事務所の様子 */
  section#office-view {
    div.office-view-inner {
      width: 90%;
      max-width: 1200px;
      margin: var(--space-8) auto 0;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(3, 1fr);

      @media (width <=767px) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr);
      }

      gap: 0 var(--space-4);

      figure {
        img {
          width: 100%;
        }
      }

      figure#main-office-figure {
        grid-column: 1 / 4;
        grid-row: 1 / 4;

        @media (width <=767px) {
          grid-column: span 2;
          grid-row: span 2;
          margin-bottom: var(--space-6);
        }

        h3 {
          margin-top: var(--space-4);
          margin-bottom: var(--space-2);
          font-size: var(--fs-body-xlg);
          font-family: var(--font-family);
          font-weight: normal;
          color: var(--brand);
        }
      }

      figure.sub-office-figure {
        grid-column: span 1;
        grid-row: span 1;
      }
    }
  }

  /* 事務所概要 */
  section#office-overview {
    background-color: var(--bg-accent);

    dl {
      width: 90%;
      max-width: 1200px;
      margin: var(--space-8) auto 0;
      display: grid;
      grid-template-columns: 15% 30% 15% 30%;

      @media (width <=767px) {
        grid-template-columns: 35% 65%;
      }

      gap: var(--space-7) 0;
      align-items: end;
      justify-content: center;

      dt,
      dd {
        padding: 0 0 var(--space-1) var(--space-2);
        border-bottom: 2px solid var(--brand);
      }

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

      dd {
        border-bottom: 2px solid #fff;
      }

      dd:nth-of-type(odd) {
        @media (width >=768px) {
          margin-right: 30px;
        }
      }

    }
  }

  /* お問い合わせの上部 */
  section#contact-header {
    background-color: var(--bg-accent-strong);
    padding-bottom: 0;

    ul {
      margin: var(--space-8) auto;
      width: 90%;
      max-width: 1000px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
      padding: var(--space-6);

      &>li {
        position: relative;
        padding-left: 2.2em;

        &::before {
          content: '✔';
          display: block;
          position: absolute;
          left: 0;
          top: -0.1em;

          width: 25px;
          height: 25px;
          border-radius: 10vh;
          border: 1px solid var(--brand);
          background-color: var(--brand);
          color: #fff;
          font-size: 16px;
          text-align: center;
          line-height: 20px;
        }
      }
    }

    aside.tel-contact {
      width: 90%;
      max-width: 400px;
      margin: var(--space-6) auto 0;
    }
  }

  /* お問い合わせ */
  section#contact-form {
    background-color: var(--bg-accent-strong);

    div.contact-form-inner {
      background-color: #fff;
      max-width: 1200px;
      width: 90%;
      margin: 0 auto;
      padding: var(--space-8);
      border-radius: var(--radius-accent);
      border: 1px solid var(--border-accent);
      text-align: center;

      @media (width <=767px) {
        padding: var(--space-4);
      }

      h3 {
        font-size: var(--fs-body-xlg);
        font-family: var(--font-family);
        text-align: center;
        margin-bottom: var(--space-8);
      }

      div#policy {
        margin-top: var(--space-6);
        text-align: left;
        font-size: var(--fs-body-sm);
        height: 300px;
        overflow-y: auto;
        padding: var(--space-4);
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-accent-light);
      }

      form {
        padding-bottom: var(--space-8);

        div.field+div.field {
          border-top: 1px solid var(--border-accent-light);
        }

        div.field {
          padding: var(--space-4) 0;

          p {
            display: flex;
            align-items: center;
            gap: var(--space-4);

            @media (width <=767px) {
              flex-direction: column;
              gap: var(--space-2);
              padding: var(--space-2);
            }

            label {
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 220px;

              @media (width <=767px) {
                width: 100%;
                justify-content: flex-start;
                gap: var(--space-2);
              }

              span.req {
                width: 40px;
                text-align: center;
                background-color: var(--danger);
                padding: var(--space-1) var(--space-2);
                color: #fff;
                font-size: var(--fs-body-xsm);
              }
            }

            &>span {
              width: 100%;

              input,
              select,
              textarea {
                padding: var(--space-2) var(--space-3);
                border: 1px solid var(--border-accent-light);
                border-radius: var(--radius-sm);
                width: 100%;
              }

              textarea {
                height: 200px;

                @media (width <=767px) {
                  flex: none;
                }
              }

              span{
                text-align:left;
                font-weight: bold;
              }
            }


          }

        }

        div.submit-wrap {
          text-align: center;

          input[type="submit"] {
            max-width: 400px;
            width: 90%;
            margin: var(--space-8) auto 0;
            padding: var(--space-3) 0;
            background: var(--category-inheritance);
            color: #fff;
          }

        }
      }
    }
  }


}

/* end of main */

/* 相続ページ専用のスタイル */
body#inheritance {
  section#hero {
    --slide-bg: url(../img/inheritance/inheritance_top-min.webp);
    background-position: left;
    height: 70vh;
  }

  #services-support-content-header-1 {
    background-image: url(../img/inheritance/category01-min.webp);
  }

  #services-support-content-header-2 {
    background-image: url(../img/inheritance/category02-min.webp);
  }

  #services-support-content-header-3 {
    background-image: url(../img/inheritance/category03-min.webp);
  }

  #services-support-content-header-4 {
    background-image: url(../img/inheritance/category04-min.webp);
  }

  #services-support-content-header-5 {
    background-image: url(../img/inheritance/category05-min.webp);
  }
}

/* 企業法務ページ専用のスタイル */
body#corporate {
  section#hero {
    --slide-bg: url(../img/corporate/corporate-top-min.webp);
    height: 70vh;
  }

  section#problems {
    h2 {
      font-weight: normal;
      color: var(--text-primary);
      line-height: 1.8;
    }

    &>p {
      font-size: var(--fs-body-xlg);
      font-family: var(--font-family-serif);
      margin-top: var(--space-5);
    }

    ul {
      display: block;

      li {
        display: grid;
        margin-bottom: var(--space-4);
        grid-template-columns: 128px 1fr 70px 1fr;
        gap: var(--space-3) var(--space-5);

        @media (width <=767px) {
          grid-template-columns: 1fr;
        }

        img,
        h3,
        svg {
          grid-row: span 2;
          align-self: center;
        }

        h3,
        svg,
        h4,
        p {
          @media (width <=767px) {
            grid-row: span 1;
            justify-self: center;
          }
        }

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

        h3 {
          font-size: var(--fs-body-xlg);
          color: var(--accent);
          font-weight: normal;
        }

        svg {
          color: var(--accent);
          margin: 0 var(--space-4);

          @media (width <=767px) {
            transform: rotate(90deg);
            width: 20px;
          }
        }

        h4 {
          align-self: self-end;
          width: 150px;
          text-align: center;
          font-size: var(--fs-body-xlg);
          font-family: var(--font-family);
          font-weight: normal;
          color: var(--accent);
          background: var(--muted);
          padding: var(--space-1) var(--space-3);
          border-radius: var(--radius-sm);
        }
      }
    }

    aside {
      background-color: var(--brand);
      padding: var(--space-8);
      background-image: url(../img/corporate/trouble-min.webp);
      background-repeat: no-repeat;
      background-position: right 50px bottom 0;
      background-size: 130px;

      @media (width <=767px) {
        background-position: right bottom;
        background-size: 100px;
      }

      border-radius: var(--radius-sm);

      div {
        width: 80%;

        @media (width <=767px) {
          width: 100%;
        }

        text-align: center;
        color: #fff;

        h3 {
          font-weight: normal;
          font-family: var(--font-family);
          font-size: var(--fs-body-xlg);
        }

        p {
          font-weight: normal;
          font-size: var(--fs-body-lg);
          margin-top: var(--space-4);
        }
      }
    }
  }

  #services-support-content-header-1 {
    background-image: url(../img/corporate/category01-min.webp);
  }

  #services-support-content-header-2 {
    background-image: url(../img/corporate/category02-min.webp);
  }

  #services-support-content-header-3 {
    background-image: url(../img/corporate/category03-min.webp);
  }

  #services-support-content-header-4 {
    background-image: url(../img/corporate/category04-min.webp);
  }

  #services-support-content-header-5 {
    background-image: url(../img/corporate/category05-min.webp);
  }
}

/* 離婚・交通事故・不動産ページ専用のスタイル */
body#legal-services {
  section#hero {
    --slide-bg: url(../img/legal-services/legal-services-top-min.webp);
    height: 70vh;
  }

  section#divorce-problems {
    background: #EFF3F9 url('../img/legal-services/category01-min.webp') no-repeat top center;
  }

  section#traffic-problems {
    background: #EFF3F9 url('../img/legal-services/category03-min.webp') no-repeat top center;
  }

  section#real-estate-problems {
    background: #EFF3F9 url('../img/legal-services/category02-min.webp') no-repeat top center;
  }

  section#divorce-problems,
  section#traffic-problems,
  section#real-estate-problems {
    background-size: auto 50vh;
  }
}

body#top {
  section#news {
    background: var(--bg-accent);
    padding-top: var(--space-6);
  }
}


/* 事務所案内専用のスタイル */
body#office {
  section#hero {
    --slide-bg: url(../img/office/office-top-min.webp);
    height: 40vh;
  }

  section#breadcrumbs {
    background: var(--bg-accent);
  }

  section#why-choose-us {
    p {
      font-family: var(--font-family-serif);
    }
  }

  section#service-fields {
    background-color: var(--muted);
  }

  .btn-arrow {
    --arrow-width: 200px;
    text-align: center;
  }

  section#access {
    h2 {
      font-family: var(--font-family);
    }

    background: var(--bg-accent);

    dl {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;

      dt {
        font-weight: bold;
        color: var(--accent);
      }
    }

    dl#landmarks {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--space-5);
      margin-bottom: var(--space-8);

      @media (width <=767px) {
        flex-direction: column;
        gap: var(--space-2);
      }

      &::before {
        content: "";
        display: inline-block;
        width: 2em;
        height: 2em;
        background-color: var(--accent);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.447 9.559a1.8 1.8 0 0 1-.25.82a2 2 0 0 1-.56.63a.7.7 0 0 1-.34.13l-1.76.23a1 1 0 0 0-.52.26c-.53.51-1.07 1-1.81 1.78l-.85.84a.93.93 0 0 0-.23.41l-.94 3.78a.6.6 0 0 1 0 .12a2 2 0 0 1-1.44 1.15h-.36a2.3 2.3 0 0 1-.58-.08a1.94 1.94 0 0 1-.81-.49l-2.54-2.53l-4.67 4.67a.75.75 0 0 1-1.06-1.06l4.67-4.67l-2.5-2.5a2 2 0 0 1-.48-.82a1.8 1.8 0 0 1-.05-.95a1.94 1.94 0 0 1 .39-.85a2 2 0 0 1 .75-.58h.12l3.74-1a1 1 0 0 0 .44-.25c1.39-1.37 1.87-1.85 2.63-2.67a.86.86 0 0 0 .23-.5l.24-1.77a.7.7 0 0 1 .13-.35a2 2 0 0 1 2.28-.69a2 2 0 0 1 .72.46l4.88 4.9a2 2 0 0 1 .57 1.55z'/%3E%3C/svg%3E");
      }
    }

    dl#directions {
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: repeat(3, 30%);
      grid-template-rows: repeat(2, 1fr);
      gap: 0 var(--space-5);
      justify-content: center;

      @media (width <=767px) {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 1fr);
      }

      dt,
      dd {
        text-align: left;

        @media (width <=767px) {
          justify-self: center;
        }
      }

      dt {
        display: flex;
        align-items: center;

        &::before {
          content: "";
          display: inline-block;
          width: 2em;
          height: 2em;
          margin-right: var(--space-2);
          background-color: var(--accent);
        }

        /* 1番目：電車 */
        &:nth-of-type(1)::before {
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2.23l2-2H14l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-3.58-4-8-4M7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17m3.5-7H6V6h5zm2 0V6h5v4zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5s1.5.67 1.5 1.5s-.67 1.5-1.5 1.5'/%3E%3C/svg%3E");
        }

        /* 2番目：車 */
        &:nth-of-type(2)::before {
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m5 11l1.5-4.5h11L19 11m-1.5 5a1.5 1.5 0 0 1-1.5-1.5a1.5 1.5 0 0 1 1.5-1.5a1.5 1.5 0 0 1 1.5 1.5a1.5 1.5 0 0 1-1.5 1.5m-11 0A1.5 1.5 0 0 1 5 14.5A1.5 1.5 0 0 1 6.5 13A1.5 1.5 0 0 1 8 14.5A1.5 1.5 0 0 1 6.5 16M18.92 6c-.2-.58-.76-1-1.42-1h-11c-.66 0-1.22.42-1.42 1L3 12v8a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h12v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-8z'/%3E%3C/svg%3E");
        }

        /* 3番目：バス */
        &:nth-of-type(3)::before {
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cmask id='SVGVdMQldMA'%3E%3Cg fill='none'%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-linejoin='round' stroke-width='4' d='M9 23h30v11a2 2 0 0 1-2 2H11a2 2 0 0 1-2-2z'/%3E%3Cpath stroke='%23fff' stroke-linejoin='round' stroke-width='4' d='M9 8a2 2 0 0 1 2-2h26a2 2 0 0 1 2 2v15H9z'/%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M15 42a3 3 0 0 1-3-3v-3h6v3a3 3 0 0 1-3 3m18 0a3 3 0 0 1-3-3v-3h6v3a3 3 0 0 1-3 3'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='4' d='M6 12v4m36-4v4'/%3E%3Ccircle cx='15' cy='30' r='2' fill='%23000'/%3E%3Ccircle cx='33' cy='30' r='2' fill='%23000'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='4' d='m31 6l-9 10m16-9l-5 6'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cpath fill='currentColor' d='M0 0h48v48H0z' mask='url(%23SVGVdMQldMA)'/%3E%3C/svg%3E");
        }
      }

      dd {
        line-height: 2;

        @media (width <=767px) {
          margin-bottom: var(--space-4);
        }
      }
    }
  }


}

/* 問い合わせ専用のスタイル */
body#contact {
  section#hero {
    --slide-bg: url(../img/contact-top-min.webp);
    height: 40vh;
  }
}