/* ======= 汎用 ======= */
      :root{
        --margin-big-contents: clamp(64px, calc(64px + 16 * ((100vw - 771px) / 253)), 88px);
        --margin-lead-space: clamp(12px, calc(12px + 4 * ((100vw - 771px) / 253)), 16px);
        --margin-section-title-space: clamp(21px, calc(21px + 11 * ((100vw - 771px) / 253)), 32px);
        --margin-contents-space: clamp(16px, calc(16px + 8 * ((100vw - 771px) / 253)), 24px);

        --table-margin: 32px;
        --table-base-width: clamp(0%, calc(0% + 5 * ((100% - 360px) / 41)), 5%);
        
        --template-8-size: 8px;
        --template-12-size: 12px;

        --font-template-18-size: clamp(16px, calc(16px + 2 * ((100vw - 771px) / 253)), 18px);
        --font-template-21-size: clamp(16px, calc(16px + 5 * ((100vw - 771px) / 253)), 21px);
        --font-template-24-size: clamp(21px, calc(21px + 3 * ((100vw - 771px) / 253)), 24px);
        --font-template-28-size: clamp(24px, calc(24px + 8 * ((100vw - 771px) / 253)), 28px);
        --font-template-32-size: clamp(28px, calc(28px + 4 * ((100vw - 771px) / 253)), 32px);

        --plan-themacolor-radical: #59636b;
        --plan-themacolor-fluorine: #bf8a27;
        --plan-themacolor-inorganic: #440557;
        --plan-themacolor-colorful: #085c30;
        --plan-themacolor-cool: #c3daf2;

        --background-color-base: lightskyblue;
        --background-color-cta: linear-gradient(135deg, #ff9800, #f44336);
        --background-color-line: linear-gradient(137deg, rgb(67 224 2) 40%, rgb(0 171 6) 100%);
      }

    /* == 引き継ぎリセット == */
        main#cnt{ margin: 0;}
        .inner { max-width: 100%; }
        .bred{ margin-bottom: 0;}
        h1, .page-title { font-size: clamp(32px, calc(32px + 10 * ((100vw - 771px) / 253)), 42px);}

    /* === 汎用 === */ 
      .section-contents > *{
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
      }
      /* フォント */
      p, a, h4,th,td{
        font-size: 16px;
      }
      summary{
        font-size: 18px;
      }
      .page-title,
      .section-contents h2{
        font-family: 'NotoSansJP-bold';
      }
      .table caption{
        font-size: clamp(18px, calc(18px + 3 * ((100vw - 771px) / 253)), 21px);
      }

      /* 余白 margin,padding */
      .page-title-area{
        padding: 3%;
      }
      .section-contents{
        margin-bottom: var(--margin-big-contents);
      }
      .section-contents .section-title{
        margin-bottom: var(--margin-section-title-space);
      }
      .section-contents .section-title h2{
        margin-bottom: var(--margin-lead-space);
      }
      .section-title:not(.last-cta-ttl) > p {
          padding: 16px 12px;
      }
      .plan-card > *, .h3_contents_inner{
        margin-bottom: var(--margin-contents-space);
      }
      .text { 
        padding: 16px;
      }
      .text_contents { 
        margin-bottom: 21px;
      }

      /* 背景 */
      .page-title-area{
        background: var(--background-color-base);
      }
      .section-title:not(.last-cta-ttl) > p {
          background: #f4f4f4;
      }

      .section-contents .li-item{
        margin: var(--margin-contents-space) 0;
        padding: 8px ;
        position: relative;
      }

      .plan-subsection h3 {
          font-size: var(--font-template-24-size);
          margin-bottom: var(--margin-section-title-space);
          font-weight: 600;
          position: relative;
          padding-left: 8px;
      }

      .plan-subsection h3::after {
          content: "";
          position: absolute;
          width: 3px;
          height: 100%;
          background: #1d7acc;
          top: 0;
          left: 0;
      }
      
      /* プランハイライト設定 */
      .plan-contents .is-plan-card-highlighted{
        border: 1.6px solid forestgreen !important;
        position: relative;
        padding: 16px;
      }
      .plan-contents .plan-card__badge {
          position: absolute;
          top: -14px;
          right: 18px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 5px 14px;
          border-radius: 999px;
          background: forestgreen;
          color: #fff;
          font-size: 13px;
          font-weight: 700;
          line-height: 1.4;
          z-index: 2;
      }

    /* == default : 【 detailsタグ 】 == */
      .details-box{ 
        margin-bottom: var(--margin-lead-space);
        border-bottom: 1px solid #acacac;
      }
      .details-box summary{
        position: relative;
        padding: 12px;
      }
      summary.details-summary::after{
        content: "";
        position: absolute;
        height: 100%;
        max-width: 27px;
        aspect-ratio: 1 / 1;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        background: #5f5f5f;
      }
      .details-item--icon-type1 summary::after{
          right: 4px;
          top: 0;
          display: block;
          -webkit-mask-image: var(--icon-plus);
          mask-image: var(--icon-plus);
      }
      .details-item--icon-type1[open] summary::after {
        -webkit-mask-image: var(--icon-minus);
        mask-image: var(--icon-minus);
      }
      .details-summary--icon-type2{
        margin-left: 24px;
      }
      .details-item--icon-type2 summary::after{
          left: -18px;
          top: 0;
          display: block;
          -webkit-mask-image: var(--icon-down-chevron);
          mask-image: var(--icon-down-chevron);
      }
      .details-item--icon-type2[open] summary::after {
        -webkit-mask-image: var(--icon-up-chevron);
        mask-image: var(--icon-up-chevron);
      }
      .details-box .details-body p{
        padding: 12px 8px;
      }

    /* == table : 【 tableタグ 】 == */
      .table,
      table{
        width: 100%;
        white-space: nowrap;
        border-collapse: collapse;
      }
      .table caption{ 
        text-align: left;
        font-weight: 700;
      }
      .section-contents .table tbody th{
        text-align: left;
      }
      .section-contents .table thead{
        text-align: center;
        border-bottom: 1px solid #00000085;
        background: #a7a7a7;
      }
      .section-contents .table th,
      .section-contents .table td{
        min-width: 80px;
        padding: 8px 12px;
      }
      .section-contents .table thead th { 
        font-weight: bold;
        color: white;
      }
      .section-contents .table tbody th:first-child{ 
        font-weight: bold;
      }
      .table.tp-table-scroll {
        position: relative;
        padding-bottom: 36px;
      }
      /* スマホ：4列以上の候補テーブルだけ横スクロールを成立させる */
        @media (max-width: 770px) {
        .table.tp-table-scroll.tp-table-scroll--sp-guide {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
          }
          .table.tp-table-scroll.tp-table-scroll--sp-guide > table {
            min-width: 680px;
          }
        }
      /* PC：6列以上の候補テーブルだけ横スクロールを成立させる */
        @media (min-width: 771px) {
          .table.tp-table-scroll.tp-table-scroll--pc-guide {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
          }
          .table.tp-table-scroll.tp-table-scroll--pc-guide > table {
            min-width: 960px;
          }
        }

          /* ヒント本体：追加DOMを増やさず、擬似要素で表示する */
            .table.tp-table-scroll::before {
              content: attr(data-scroll-hint);
              display: none;
              position: absolute;
              bottom: 8px;
              z-index: 5;
              padding: 7px 11px;
              border-radius: 999px;
              background: rgba(31, 41, 55, 0.88);
              color: #fff;
              font-size: 12px;
              font-weight: 700;
              line-height: 1.3;
              white-space: nowrap;
              pointer-events: none;
              box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
              animation: tp-table-scroll-nudge 1.3s ease-in-out infinite;
            }

          @keyframes tp-table-scroll-nudge {
            0% {
              transform: translateX(0);
            }

            45% {
              transform: translateX(5px);
            }

            100% {
              transform: translateX(0);
            }
          }

          /* JS有効時：実測でスクロール可能な場合のみ表示 */
          html.tp-js .table.tp-table-scroll.is-scrollable::before {
            display: inline-flex;
          }

          /* JS無効時：スマホは4列以上で表示 */
          html:not(.tp-js) .table.tp-table-scroll.tp-table-scroll--sp-guide::before {
            display: inline-flex;
          }

          /* JS無効時：PCは6列以上で表示。4〜5列では表示しない */
          @media (min-width: 771px) {
            html:not(.tp-js) .table.tp-table-scroll.tp-table-scroll--sp-guide::before {
              display: none;
            }

            html:not(.tp-js) .table.tp-table-scroll.tp-table-scroll--pc-guide::before {
              display: inline-flex;
            }
          }

          @media (max-width: 770px) {
            .table.tp-table-scroll::before {
              left: 50%;
              right: auto;
            }
          }

          @media (min-width: 771px) {
            .table.tp-table-scroll::before {
              left: auto;
              right: 12px;
            }
          }

          /* ユーザーが横スクロールしたら案内を消す */
          .table.tp-table-scroll.has-scrolled::before {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.25s ease, visibility 0.25s ease;
          }

          @media print {
            .table.tp-table-scroll {
              overflow: visible;
            }

            .table.tp-table-scroll::before {
              display: none !important;
            }

            .table.tp-table-scroll.tp-table-scroll--sp-guide > table,
            .table.tp-table-scroll.tp-table-scroll--pc-guide > table {
              min-width: 0;
            }
          }

    /* == リンク == */
      .link-wrap,.link{ text-align:center;}
      .inner .link a p{ font-size: clamp(18px, calc(18px + 3 * ((100vw - 771px) / 253)), 21px);}
      .inner .link a{
        display: inline-block;
        margin-bottom:16px;
        padding: 12px 16px;
        font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
        font-weight: 600;
        transition:.5s;
        min-width: calc(300px - 32px);
        border-radius: 21px;
        box-shadow: 0 0 12px 0 rgb(196 196 196 / 85%);
        width: 100%;
        max-width: 440px;
      }
      .inner .link a:hover { 
        transform: scale(1.05);
        opacity: .4;
      }
      .inner .link-contact a{
        background: linear-gradient(135deg, #ff9800, #f44336);
        box-shadow: 0 0 5px 1px rgb(135 135 135 / 88%);
        color: white !important;
      }
      .inner .link-inner a {
        background: #297fff00;
        color: black;
        border: 1px solid;
      }
      .inner .link-inner a::after{
        content:"↓";
      }

      .inner .link-line a{
        color: white;
        background: linear-gradient(137deg, rgb(67 224 2) 40%, rgb(0 171 6) 100%);
      }

      .inner .link-tel a{
        color: white;
        background: linear-gradient(137deg, rgb(22, 56, 244) 40%, rgb(104, 126, 255) 100%);
      }

  /* === ファーストビュー === */
        .constructioncostSingle .page-tag-label {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .constructioncostSingle .page-tag-label .tag-label{
          padding: 6px 8px;
          border: 1px solid;
          background: #fffffff2;
        }
        
        .fv-feature-list {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin: 21px 0;
        }

        .fv-feature-item {
            padding: 12px;
            border-radius: 24px;
            background: #2f2f2fde;
            color: #ffffff;
            font-weight: 600;
            box-shadow: 0px 2px 4px 0px rgb(102 102 102);
        }

        .fv-link-contents {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            margin-top: 22px;
        }

        .fv-link-item {
            display: inline-flex;
        }

        .fv-link-item a,
        .fv-link-item span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 52px;
            padding: 10px 22px;
            border-radius: 999px;
            line-height: 1.5;
            text-decoration: none;
            color: white;
            font-weight: 700;
            box-shadow: 0px 4px 8px #918f8f;
            transition: all .6s;
        }
        .fv-link-item a:hover {
            transform: translateY(8px);
            opacity: 0.6;
        }

        .fv-link-item--lineLINE a{
          background: var(--background-color-line);
        }

        .fv-link-item--primaryCTA a{
          background: var(--background-color-cta);
        }

        .fv-link-item--secondary a,
        .fv-link-item--secondary span {
            border: 1px solid currentColor;
        }


        .appeal-contents-wrapper{
          margin: 8px;
          border-radius: 18px;
          background: ghostwhite;
        }

        .fv-appeal-contents{
          padding: 12px;
          height: 100%;
        }

        .fv-appeal-item {
          display: grid;
          height: 100%;
          grid-template-rows: 0.3fr 1fr 0.3fr;
          align-items: center;
        }

        .fv-appeal-label {
          display: inline-block;
          padding: 8px 12px;
          border-radius: 16px;
          background: #0db106;
          font-weight: 700;
          color: ghostwhite;
        }

        .fv-appeal-value{
          text-align: right;
        }
        .fv-appeal-value span {
          font-size: var(--font-template-32-size);
        }
        
        .fv-appeal-note{
          font-size: 14px;
          color: #6d6d6d;
        }

  /* == 外壁塗装費用の目安 == */
      .text.estimate-wrap{
        background: #e3e3e3;
      }

      .estimate_v1 .estimate_v1-wrap .plan-title-inner{
        padding-bottom: 8px;
        margin-bottom: 16px;
        border-bottom: 1px solid #cacaca;
      }

      .estimate .estimate_v2-wrap .plan-title {
          margin: 0;
          background: #2b6aa0;
          padding: 22px 20px;
          background: linear-gradient(135deg, rgba(15, 76, 129, .96), rgba(23, 105, 166, .92));
          color: #fff;
          border-radius: 12px 12px 0px 0px;
      }

      .estimate .estimate_v2-wrap .dl-contents{
        margin: 0;
      }

      .estimate_v2-wrap .plan-title .acf-inline--accent-large{
        color:white;
      }

      .estimate_v1.estimate-plans .text-template-item h4{
          font-weight: bold;
          display: flex;
          gap: 8px;
          align-items: center;
          margin-bottom: 16px;
      }
      .estimate_v1.estimate-plans .text-template-item h4::before {
          content: "";
          display: block;
          width: 32px;
          height: 32px;
          -webkit-mask-image: var(--icon-circle-exclamation);
          mask-image: var(--icon-circle-exclamation);
          -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
          -webkit-mask-position: center;
          mask-position: center;
          -webkit-mask-size: contain;
          mask-size: contain;
          background: rgb(255 135 0);
      }

      .estimate .plan-card.estimate-wrap.estimate_v2-wrap {
          display: grid;
          background: aliceblue;
          margin-bottom: 32px;
      }

      .estimate_v2-wrap .text{
        grid-row: 2 / 3;
        display: flex;
        justify-content: space-between;
        margin: 0;
      }

      .estimate_v2-wrap .text::after{
        content: "";
        display: block;
        width: 24px;
        aspect-ratio: 1 / 1;
        background-color: rgb(0, 0, 0);

        -webkit-mask-image: var(--icon-down-chevron);
        mask-image: var(--icon-down-chevron);

        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;

        -webkit-mask-position: center;
        mask-position: center;

        -webkit-mask-size: contain;
        mask-size: contain;
      }

      .estimate_v2-wrap .text.is-open::after{
        -webkit-mask-image: var(--icon-up-chevron);
        mask-image: var(--icon-up-chevron);
      }

      .estimate .estimate-wrap .plan-title-label {
          font-size: var(--font-template-18-size);
      }

      .estimate .estimate_v2-wrap .dl-row {
          display: flex;
          justify-content: space-between;
          padding: 12px;
          background: #d1e9ff;
      }
      .estimate .estimate_v2 .value-wrap dt{
        font-weight: 600;
      }
      .estimate .estimate_v2 .value-wrap dd{
        text-align: end;
      }

      /* JSがaccordion-panelを付与したものだけ初期非表示 */
      .accordion-card .accordion-panel {
        display: none;
      }

      .accordion-card.is-open .accordion-panel {
        display: block;
      }

      /* クリック部分 */
      .accordion-toggle {
        cursor: pointer;
        margin-top: 16px;
        user-select: none;
      }

      /* 開いたテーブルの余白 */
      .accordion-card .table {
        margin-top: 14px;
      }

  /* == 含まれる工事内容 include == */
      .include .include-wrap figure img{
        max-width: 60px;
        aspect-ratio: 1 / 1;
      }

      .include .list-output-heading{
        display: grid;
        gap: 12px;
      }

      .include .list-output-heading li {
          padding: 12px 16px;
          margin-bottom: 12px;
          border-radius: 16px;
          background: #f1fff0;
          min-height: 64px;
          display: grid;
          gap: 8px;
      }

      .include .list-output-heading .li-item h3{
        grid-row: 1 / 2;
        font-family: 'NotoSansJP-bold';
      }

      .include .list-output-heading .li-support-image {
          line-height: 0;
          grid-row: 1 / 2;
      }

      .include .includelayout-wrap {
          padding: 18px;
          background: #2e2e2e;
          color: white;
          border-radius: 18px;
      }

      .include .includelayout-wrap h3{
        font-weight: 800;
      }

      .include .includelayout-wrap .h3_contents_inner {
        row-gap: 20px;
      }
      .include .includelayout-wrap .h3_contents_inner > *{
        margin-bottom: 24px;
      }

      .include .includelayout-wrap .h3_contents{
        grid-column: 1 / 3;
      }

      .include .list-design-check{
        grid-column: 1 / 2;
      }
            
      .include .list-design-check li{
          padding: 8px;
          margin-bottom: 8px;
          border-radius: 18px;
          background: #e6e6e64f;
      }
      .include .list-design-check li::before{
        content: "";
        position: absolute;
        top: 10px;
        left: 12px;
        display: block;
        height: 21px;
        aspect-ratio: 1 / 1;

        background-color: rgb(30 176 0);

        -webkit-mask-image: var(--icon-check);
        mask-image: var(--icon-check);

        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;

        -webkit-mask-position: center;
        mask-position: center;

        -webkit-mask-size: contain;
        mask-size: contain;
      }

      .include .list-design-check p{
        padding-left: 28px;
      }

      .include .includelayout-wrap .link-line{
        grid-column: 1 / 2;
      }
      .include .includelayout-wrap .link-contact{
        grid-column: 2 / 3;
      }

  /* == reasonセクション == */
      .reason .h3_contents_inner{
          border: 1px solid #e3e3e3;
          border-radius: 12px;
          background: #fff;
          overflow: hidden;
      }
      .reason .h3_contents_inner h3 {
          padding: 12px 0 12px 38px;
          position: relative;
          display: flex;
          align-items: center;
          background: #eaeaea;
          cursor: pointer;
      }

      .reason .h3_contents {
        cursor: pointer;
        user-select: none;
      }

      .reason .text.reason-wrap {
          line-height: 0;
          padding: 0;
          visibility: hidden;
          overflow: hidden;
          transition: padding .4s, line-height .4s;
      }
      .reason .text.reason-wrap.active{
          padding: 16px;
          line-height: normal;
          visibility: visible;
      }

        .reason .h3_contents h3 {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          margin: 0;
          padding: 16px 18px;
          font-size: 18px;
          line-height: 1.5;
          border-radius: 12px 12px 0 0;
        }

        .reason .h3_contents h3::after {
          content: "＋";
          flex: 0 0 auto;
          font-size: 20px;
          font-weight: 700;
        }

        .reason .h3_contents.is-open h3::after {
          content: "−";
        }

        .reason .reason-text-wrapper {
          display: none;
          padding: 0 18px 18px;
        }

        .reason .h3_contents_inner.is-open .reason-text-wrapper {
          display: block;
        }

        .reason .reason-text-wrapper p {
          margin: 0;
          line-height: 1.8;
        }

        @media screen and (max-width: 767px) {
          .reason .h3_contents h3 {
            padding: 14px 15px;
            font-size: 16px;
          }

          .reason .reason-text-wrapper {
            padding: 0 15px 16px;
          }
        }

  /* == 同時施工のすすめ == */
        .both-case .li-item{
          list-style: square;
          margin-left: 16px;
        }
  /* == 外壁塗装費用のプラン別比較 == */
        .plan-camparison{
          display: grid;
        }

        .plan-camparison > .table{
          grid-row: 4 / 5;
        }

        .plan-camparison-plans .plan-camparison-wrap{
          border: 1px solid #cacaca;
          border-radius: 18px;
          margin-bottom: 32px;
        }

        .plan-camparison-plans .plan-title-inner > *:not(h3),
        .plan-camparison-plans .plan-camparison-wrap > *:not(.plan-title){
          margin-left: 8px;
          margin-right: 8px;
        }

        .plan-camparison-wrap .plan-title-label {
            padding: 12px;
            font-weight: 700;
            border-radius: 12px 12px 0px 0px;
            color: white;
            margin-bottom: 8px;
        }
        .plan-camparison-wrap-1 .plan-title-label{
          background: var(--plan-themacolor-radical);
        }
        .plan-camparison-wrap-2 .plan-title-label{
          background: var(--plan-themacolor-fluorine);
        }
        .plan-camparison-wrap-3 .plan-title-label{
          background: var(--plan-themacolor-inorganic);
        }
        .plan-camparison-wrap-4 .plan-title-label{
          background: var(--plan-themacolor-colorful);
        }
        .plan-camparison-wrap-5 .plan-title-label{
          background: var(--plan-themacolor-cool);
          color: black;
        }

        .plan-camparison-plans .plan-camparison-wrap .dl-row {
            display: flex;
            justify-content: space-between;
            padding: 8px;
            margin-bottom: 8px;
            border-radius: 16px;
            background: #f4faff;
        }

        .plan-camparison-plans .plan-camparison-wrap .dl-row dt{
          color: #242222;
        }

        .plan-camparison-plans .plan-camparison-wrap .dl-row dd{
          font-weight: 700;
        }

        .plan-camparison-wrap > .text{
            border: 2px solid #51c751;
            border-radius: 16px;
            background: #f0fff0;
            margin-bottom: 12px;
        }

        .plan-camparison-plans .plan-camparison-wrap .text-template-item h4{
          padding: 8px 12px;
          background: #51c751;
          display: inline-block;
          font-weight: 900;
          color: white;
        }

        .plan-camparison-plans .plan-camparison-wrap .text-template-item p{
          padding: 8px;
        }

  /* == last-cta == */
      .last-cta.section-contents{
        padding: 64px 4px;
        color: #fff;
        background: linear-gradient(135deg, rgba(15, 42, 66, .96), rgba(21, 52, 80, .92)), radial-gradient(circle at 82% 20%, rgba(245, 158, 11, .32), transparent 20rem),#153450;
      }

      .last-cta h2:after{
        content: none;
      }

  /* == faq == */
    .faq-area .faq-area-wrapper{
      margin-bottom: var(--margin-contents-space);
      border: 1.2px solid #cacaca;
    }
    .faq-area dt{
      padding: 12px 8px;
      padding-left: 32px;
      font-size: 16px;
      font-weight: 700;
      background: rgb(187, 187, 187);
      position: relative;
      cursor: pointer;
    }
    .faq-area dt::before{
      content: "";
      position: absolute;
      top: 0;
      left: 6px;
      height: 100%;
      width: 21px;
      -webkit-mask-image: var(--icon-down-chevron);
      mask-image: var(--icon-down-chevron);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: contain;
      mask-size: contain;
      background: rgb(0, 0, 0);
      transition: transform 0.2s ease;
    }
    /* 開いている時は矢印を反転 */
    .faq-area .faq-area-wrapper.is-open dt::before {
      transform: rotate(180deg);
    }
    .faq-area dd {
      display: none;
      font-size: 16px;
      padding: 12px;
    }
    /* 開いているFAQだけ表示 */
    .faq-area .faq-area-wrapper.is-open dd {
      display: block;
    }

  /* ===== page-outerwall,roof ====== */
    /* -- 【 費用が変わるポイント 】: fluctuation -- */
      .fluctuation h3 {
        padding: 4px 8px;
        border-left: 3px solid;
        border-bottom: 1px solid;
        margin-bottom: 8px;
      }

  /* ===== page-all ====== */
    /* == 【 費用比較 】: comparison == */
      .page-all section.comparison .plan-output-groups{
        gap: 24px;
      }

      .page-all .comparison .plan-output-groups-wrapper .link a {
          background: #0088ff;
          color: white;
      }

      .page-all .comparison .plan-output-groups-wrapper .dl-row dt{
        font-size: 16px;
        color: #828282;
      }
      .page-all .comparison .plan-output-groups-wrapper .dl-row dd{
        text-align: right;
      }


    .page-all .tandem details {
        margin: 0 8px;
        margin-bottom: var(--margin-lead-space);
        border-radius: 16px;
        box-shadow: 3px 2px 0px 0px rgb(177 177 177);
        border: 1px solid #ececec;
    }

    .page-all .tandem details summary{
      font-size: 18px;
      font-weight: 600;
    }

    .page-all .tandem .tandem-text-wrapper {
        background: linear-gradient(90deg,rgba(9, 9, 121, 1) 0%, rgb(0, 0, 255) 100%);
        border-radius: 21px;
        color: white;
        margin-top: var(--margin-lead-space);
    }

    .page-all .tandem .tandem-text-wrapper h3{
      font-weight: 600;
    }
    .page-all .tandem .tandem-text-wrapper p {
        padding: 4px 16px;
    }
    
    /* == 【 塗料グレード比較 】: grade == */
      .grade.section-contents {
        padding-top: 64px;
        padding-bottom: 64px;
        background: #f5faff;
      }
      
      .page-all .grade .grade-plan-output-group {
          padding: 16px;
          margin-bottom: 18px;
          border-radius: 18px;
          border: 1px solid #acacac;
          box-shadow: 0 0 4px 0 rgb(187 187 187);
          flex: 0 0 30%;
          background: white;
      }

      .page-all .grade .grade-plan-output-group .dl-row {
          display: flex;
          flex-direction: column;
          gap: 4px;
          margin-bottom: 12px;
          padding: 12px;
          background: #f7fbff;
          border-radius: 16px;
      }
      .page-all .grade .grade-plan-output-group .dl-row dt{
        font-size: 16px;
        color: #828282;
      }
      .page-all .grade .grade-plan-output-group .dl-row dd{
        text-align: left;
      }

  @media screen and (min-width:771px){
    .page-outerwall01 .page-title-area,
    .page-outerwall02 .page-title-area,
    .page-outerwall03 .page-title-area,
    .page-all01 .page-title-area,
    .page-all02 .page-title-area,
    .page-all03 .page-title-area,
    .page-roof01 .page-title-area,
    .page-roof02 .page-title-area,
    .page-roof03 .page-title-area{
      grid-template-columns: 1fr;
    }
    /* ==== 汎用 ==== */
      .estimate_v2 .card_track,
      .include .list-output-heading,
      .page-all .comparison .plan-output-groups-wrapper,
      .include .includelayout-wrap .h3_contents_inner,
      .interest .interestlayout-wrap .card_track{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 4px;
      }
      .page-all .grade .plan-output-groups-wrapper{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 0 4px;
      }

      .plan-camparison-plans .card_track{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 21px;
      }

    /* === ファーストビュー === */
     .page-title-area{
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 12px;
      }
      .appeal-contents-wrapper{
        grid-row: 1 / 2;
        grid-column: 2 / 3;
      }
  }


  @media screen and (min-width:1024px){
    .estimate_v2 .card_track,
    .include .list-output-heading,
    .page-all .comparison .plan-output-groups-wrapper{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 0 4px;
    }
  }

  @media screen and (max-width:770px){
    /* === 引き継ぎリセット === */
      .inner{ width: 100%;}
      .inner > *{ padding-left: 1.5%; padding-right: 1.5%;}
  }