/* -- 汎用 -- */
      :root{
        --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);
      }
      .section-contents > * {
          margin-bottom: var(--table-margin);
      }
      .text { background: #eaeaea; padding: 16px;}
      .text_contents { margin-bottom: 21px;}
        .constructioncostSingle img { max-width:640px; aspect-ratio: 1.414 / 1;}
        .constructioncostSingle table{ 
          white-space: nowrap;
          width: 100%;
          border-collapse: collapse;
        }
        .constructioncostSingle.value-ttl { font-weight: bold;}
        .constructioncostSingle.value-txt p,.constructioncostSingle .value-ttl{ font-size: clamp(16px, calc(16px + 2 * ((100vw - 771px) / 253)), 18px);}
        .constructioncostSingle .section-contents { margin-top: 56px;}
        .constructioncostSingle .section-Ttl { margin-bottom: 24px;}
        .constructioncostSingle .h3_contents { text-align: center;}
        .constructioncostSingle .page-title-area{ background: #f7f7f7;}   
        .constructioncostSingle .page-title-area > * { padding: 8px 0; margin-bottom: 8px; text-align:center;}
        .constructioncostSingle .text.value-wrap {
          background: #ececec;
          text-align: center;
          padding: 24px 12px;
        }
      p, a {
    font-size: clamp(14px, calc(14px + 2 * ((100vw - 771px) / 253)), 16px);
}
    /* -- 前提条件 --*/
        .conditions-deco { display: flex;}
        .conditions-deco > dt {
            min-width: 108px;
            padding: 8px;
            border: 1px solid;
            display: flex;
            align-items: center;
            background: aliceblue;
            justify-content: center;
        }
        .conditions-deco > dd {
            width: 61%;
            padding: 8px;
            border: 1px solid;
            border-left: none;
        }
        .conditions-deco:not(:last-child) > dd, .conditions-deco:not(:last-child) > dt{
          border-bottom:none;
        }
    /* -- このページを読むとわかること --*/
        .ul-contens.keypoint-wrap {
            background: #efefef;
            padding: 12px;
        }
        .ul-contens.keypoint-wrap li {
            list-style: square;
            margin-left: 16px;
        }
    /* -- プラン --*/
      .suggest_plan .text_contents {
          display: flex;
          justify-content: space-around;
          text-align: center;
      }
      .suggest_plan .text_contents .suggest_plan-wrap {
          flex: 0 0 31%;
          background: #d2e6fd;
          border: 1px solid #cfcfcf;
      }
      .suggest_plan .text_contents .suggest_plan-wrap > *{
        padding: 12px 0px;
      }
      .suggest_plan .text_contents .suggest_plan-wrap p{
          background: white;
      }
      .suggest_planlayout-wrap .suggest_plan-wrap p::before {
        content: "プランの特徴";
        display: inline-block;
        border-bottom: 1px solid;
        color: red;
        width: 90%;
        margin: 0 5% 5%;
        font-weight: bold;
    }
      .suggest_plan .link-plan_link a {
          border: 1px solid black;
      }
    /* -- 金額 -- */
      .card-toc {
        display: flex;
        flex-wrap: wrap;
        padding: 12px 0;
        justify-content: center;
      }
      .card-toc li {
        text-align: center;
        padding: 4px 4px;
        margin: 2px;
        border: 2px outset;
        background: #eff8ff;
        flex: 0 0 clamp(30%, calc(47% - 17% * ((100vw - 360px) / 411px)), 47%);
      }
      .card-toc .cardNumber.is-active {
        background: #add9ff;
      }
      .valuelayout-wrap .toc-title p{
          text-align: center;
          font-weight: bold;
          font-size: clamp(21px, calc(21px + 3 * ((100vw - 771px) / 253)), 24px);
      }
      .constructioncostSingle .valuelayout-wrap {
        padding: 12px 0;
        position: relative;
        overflow:hidden;
      }
      .constructioncostSingle .valuelayout-wrap .plan-title{
        text-align: center;
        font-family: serif;
      }
      .valuelayout-wrap .plan-title .value-date {
        font-size: clamp(21px, calc(21px + 3 * ((100vw - 771px) / 253)), 24px);
        font-style: italic;
        color: #ee2929;
      }
      .valuelayout-wrap .plan-title p{
        font-family: serif;
        font-size: clamp(16px, calc(16px + 2 * ((100vw - 771px) / 253)), 18px);
        font-weight: bold;
        border-bottom: 1px solid black;
      }
      .valuelayout-wrap .value-wrap dt {
        font-weight: bold;
        font-size: clamp(16px, calc(16px + 2 * ((100vw - 771px) / 253)), 18px);
      }
      .valuelayout-wrap .card_track{
        display: flex;
        transition: transform .4s ease;
        transform: translateX(calc(-100% * var(--active-index, 0)));
      }
      .constructioncostSingle .card_layout .card_inner{
        padding: 24px 12px;
        border-radius: 16px;
        box-shadow: 0 0 10px 4px rgb(215 211 211);
        border: 1px solid #9fcbf9;
        background: radial-gradient(circle, rgb(208 254 241) 0%, rgb(199 224 253) 70%);
      }
      .constructioncostSingle .card_layout {
        flex: 0 0 100%;
        padding-left: calc(var(--table-base-width) / 2);
        padding-right: calc(var(--table-base-width) / 2);
      }
      .constructioncostSingle .valuelayout-wrap::before,.constructioncostSingle .valuelayout-wrap::after{
        position: absolute;
        height: 100%;
        display: flex;
        align-items: center;
        transform:scale(2.5);
      }
      .constructioncostSingle .table caption {
        text-align:left;
        padding: 12px 0;
        font-weight: bold;
        font-size: clamp(18px, calc(18px + 3 * ((100vw - 771px) / 253)), 21px);
      }
      .constructioncostSingle .table{ 
        overflow-x:auto; 
        padding-bottom: 8px; 
        margin-bottom:12px;
      }
      .constructioncostSingle .table th,.constructioncostSingle .table td{
        border: 1px solid gray;
        min-width: 80px;
        padding: 8px 12px;
        background: #ededed;
      }
      .constructioncostSingle .table thead th { background: #7cb4ff; font-weight: bold;}
      .constructioncostSingle .table tbody th:first-child{ background: #d8e7fb; font-weight: bold;}
    /* -- 金額の変動 -- */
      .constructioncostSingle .fluctuation .h3_contents {
          padding: 6px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #cae9fa;
      }
      .constructioncostSingle .fluctuation .h3_contents::after {
          content: "+";
      }
      .constructioncostSingle .fluctuation-wrap h4 {
        font-weight: bold;
        padding: 4px 0;
      }
      .text_contents.fluctuation.active {
        padding: 21px;
        opacity: 1;
        visibility:visible;
        line-height: 1.8;
      }
      .text_contents.fluctuation {
        line-height: 0;
        opacity: 0;
        visibility: hidden;
        padding: 0;
        background: aliceblue;
        transition:all .7s ;
        margin-bottom: 16px;
      }
    /* -- 工事の流れ -- */
      .work-flow .li-item{
        display:flex;
        align-items: center;
      }
      .work-flow .li-item::before {
        content: "";
        float: left;
        width: clamp(1%,calc(5% - 4% * ((100vw - 360px) / 840px)),5%);
        height: 100%;
        padding: 20px 0px;
        clip-path: polygon(0 0, 50% 20%, 100% 0, 100% 85%, 50% 100%, 0 85%);
        background: #0088ff;
      }
      .work-flow .li-item p{ padding-left: 12px;}
    /* -- お見積もりの流れ -- */
      .flow-wrap {
          display: flex;
          margin-bottom: 120px;
          flex-wrap: wrap;
      }
      .flow-item {
          width: 33%;
          background: #F5F5F5;
          padding: 20px;
          position: relative;
      }
      .flow-item:not(:last-child):after {
          content: "";
          position: absolute;
          width: 0;
          height: 0;
          bottom: 160px;
          right: -147px;
          border-style: solid;
          border-color: #F5F5F5 transparent transparent transparent;
          border-width: 40px 127px 0 127px;
          z-index: 1;
          transform: rotate(270deg);
      }
      .flow-item span{
          color: #00d800;
          font-size: 2.4rem;
          margin-right: 10px;
          font-weight: 600;
      }
      .flow-wrap img{ aspect-ratio:1.5/1;}
    /* -- リンク -- */
      .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(330px - 32px);
      }
      .inner .link a:hover { transform: scale(1.1);}
      .inner .link-contact a{
        border-radius: 9999px;
        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:"↓";
      }
    /* -- works -- */
      .works .related-works-list {
          display: flex;
      }
      .works .related-works-item {
          margin: 16px;
      }
    /* -- faq -- */
      .section-contents.faq .faq-ttl {
        font-size: clamp(16px, calc(16px + 2 * ((100vw - 771px) / 253)), 18px);
        background: #b6dcfe;
        padding: 12px;
        font-weight: bold;
      }
      .section-contents.faq .faq-txt {
        padding: 12px;
        margin-bottom: 12px;
        border: 4px solid #b6dcfe;
      }
    @media screen and (min-width:771px){
      .constructioncostSingle .page-title-area{
        padding: 3%;
      }

      .constructioncostSingle .card_layout > *{ width: 90%; margin: 16px auto;}
      .constructioncostSingle .valuelayout-wrap::before {
        content: "<";
        left:12px;
      }
      .constructioncostSingle .valuelayout-wrap::after {
        content: ">";
        top: 0;
        right: 12px;
      }
    }
    @media screen and (max-width:770px){
        .inner{ width: 97%;}
        .value-txt { text-align: center;}
        .suggest_plan .text_contents{ flex-direction: column; }
        .suggest_plan .text_contents .suggest_plan-wrap{ flex:0 0 100%; margin-bottom: var(--table-margin);}
        .constructioncostSingle .page-title{ font-size: clamp(23px, calc(23px + 9 * ((100vw - 360px) / 410)), 32px);}
        .constructioncostSingle .valuelayout-wrap{ padding: 8px 0;}
        .constructioncostSingle .card_layout{
          max-width: 100%;
          padding-left: 2%;
          padding-right: 2%;
          margin: 0;
          box-sizing: border-box;
        }
        .constructioncostSingle .card_layout .card_inner > *{
          width: calc(100% - 24px);
          margin: 12px auto;
        }
        .constructioncostSingle .card_layout .card_inner{
          padding: 16px 0;
          border-radius: 14px;
        }
        .flow-wrap {
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        .flow-item { width: 100%;}
        .flow-item:not(:last-child):after {
            bottom: -40px;
            right: -147px;
            transform: rotate(0deg);
            margin: auto;
            right: 0;
            left: 0;
        }
       .works .related-works-list {
              flex-direction: column;
      }
    }