.inner{
  width: 1024px;
  /*background-color: #f6fafd;
  border-left:  1px solid #0092ff;
  border-right: 1px solid #0092ff;
  */
  @media screen and (max-width: 768px) {
    width: 100vw;
    padding: 0 20px;
    box-sizing: border-box;
  }
}
& h2, h3, h4, p{
  letter-spacing: .1em;
  line-height: 2;
  @media screen and (max-width: 768px) {
    line-height: 1.8;
  }
}

:root{
  --sp-max: 460px;   /* SP：図・画像・表の最大幅（画面幅500px − 左右余白20px×2） */
}


.key {
    width: 100%;
    height: 237px;
    background: url(../images/warranty/key.webp) center center /cover no-repeat;

    .inner {
        position: relative;
        width: 800px;
        margin: 0 auto;
    }

    .page_title {
        position: absolute;
        top: 70px;
        left: 0;
        height: 500px;
        font-size: 41px;
        font-weight: 500;
        writing-mode: vertical-rl;
        letter-spacing: 0.28em;
        text-shadow: #fff 1px 1px 1px, #fff -1px 0px 1px, #fff 0px -1px 1px, #fff 0px 1px 1px, #fff 1px 1px 1px, #fff -1px 1px 1px, #fff 1px -1px 1px, #fff -1px -1px 1px, #fff 1px 1px 1px, #fff -1px 1px 1px, #fff 1px -1px 1px, #fff -1px -1px 1px, #fff 1px 1px 1px, #fff -1px 1px 1px, #fff 1px -1px 1px, #fff -1px -1px 1px;
    }

    .small {
        display: block;
        font-size: 17px;
        font-weight: 500;
        letter-spacing: .1em;
    }

    .eng {
        padding-left: 15px;
        padding-bottom: 10px;
        writing-mode: horizontal-tb;
        line-height: 1;
    }

    @media screen and (max-width: 768px) {

        width: 100%;
        height: 237px;
        margin: 0;
        background: url(../images/limini/key.webp) center center /cover no-repeat;

        .inner {
            position: relative;
            width: 100%;
            margin: 0 auto;
        }

        .page_title {
            position: static;
            padding: 80px 0 0;
            font-size: 30px;
            writing-mode: horizontal-tb;
            letter-spacing: 0.1em;
            text-align: center;
            text-shadow: #fff 1px 1px 1px, #fff -1px 0px 1px, #fff 0px -1px 1px, #fff 0px 1px 1px, #fff 1px 1px 1px, #fff -1px 1px 1px, #fff 1px -1px 1px, #fff -1px -1px 1px, #fff 1px 1px 1px, #fff -1px 1px 1px, #fff 1px -1px 1px, #fff -1px -1px 1px, #fff 1px 1px 1px, #fff -1px 1px 1px, #fff 1px -1px 1px, #fff -1px -1px 1px;
        }

        .small {
            font-size: 16px;
        }

        .eng {
            padding-left: 0;
            padding-bottom: 0;
            writing-mode: horizontal-tb;
            line-height: 1;
        }
    }
}

/* =====sec01===== */
.sec01 {
  padding: 85px 0 0;

  .inner {
      margin: 0 auto 200px;
  }

  .sec_title {
      width: 800px;
      margin: 0 auto 40px;
      font-size: 24px;
      letter-spacing: .11em;
      text-align: center;
  }
  .sec_text {
      width: 800px;
      margin: 0 auto 110px;
      font-size: 15px;
      letter-spacing: .06em;
      line-height: 2;
  }

  .gridbox{
      width: 1000px;
      max-width: 100%;
      margin: 0 auto;

      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 44px;
      row-gap: 0;
      justify-self: center;


      .item{
        display: block;
        width: 310px;
        height: 307px;
        background-color: rgb(163, 163, 163);
        box-sizing: border-box;
        padding: 30px 0;
        position: relative;
      }
      .blue {background-color: #205280;}
      .green{background-color: #356A49;}
      .brown{background-color: #957845;}

      .subtitle{
        letter-spacing: .08em;
        line-height: 1;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        color: #fff;
        margin-bottom: 0px;
      }
      .title{
        letter-spacing: .12em;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        color: #fff;
        margin-bottom: -5px;
      }
      .year_text{
        line-height: 1;
        letter-spacing: .1em;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        color: #fff;
        margin-bottom: 14px;
      }
      .year_text .size_80{
        letter-spacing: .05em;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 80px;
        font-weight: bold;
        color: #fff;
      }
      .text{
        width: 270px;
        margin: 0 auto;
        line-height: 1.5;
        letter-spacing: .06em;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 16px;
        font-weight: bold;
        text-align: justify;
        color: #fff;
        margin-bottom: 10px;
      }

      .box{
        content: "";
        position: absolute;
        bottom:  0;
        left:    0;
        background-color: rgba(255, 255, 255, .4);
        width: 310px;
        height: 38px;

        display: flex;
        justify-content: center;
        align-items: center;

        .yajirushi{
          object-fit: cover;
        }
      }
  }

  @media screen and (max-width: 768px) {
    padding: 30px 20px 50px;
    box-sizing: border-box;

    .inner {
      width: 100%;
      margin: 0 auto;
    }

    .sec_title {
      box-sizing: border-box;
      width: 100%;
      position: relative;
      padding: 0 0 10px;
      margin: 0 0 30px;
      font-size: 20px;
      letter-spacing: .11em;
      text-align: left;
      padding-right: initial;
    }
    .sec_text {
      box-sizing: border-box;
      width: 100%;
      margin: 0 auto 30px;
      font-size: 15px;
      line-height: 2;
      padding-right: initial;
    }

    .gridbox{
      width: 100%;
      max-width: var(--sp-max);
      grid-template-columns: 1fr;
      row-gap: 12px;

      /* カード：左に年数、右に文字の2列 */
      .item{
        display: grid;
        grid-template-columns: 96px 1fr;
        column-gap: 10px;
        align-items: center;
        width: 100%;
        height: auto;
        padding: 16px 44px 16px 10px;   /* 右44px = 矢印帯30px + 余白 */
      }

      /* 年数（左列・3行分を縦に使う） */
      .year_text{
        grid-column: 1;
        grid-row: 1 / 4;
        margin: 0;
        padding-right: 8px;
        border-right: 1px solid rgba(255, 255, 255, .4);
        font-size: 16px;
        white-space: nowrap;   /* 「年」を数字の右に固定 */
      }
      .year_text .size_80{
        font-size: 42px;
      }

      /* 右列：小見出し・見出し・本文 */
      .subtitle{
        grid-column: 2;
        line-height: 1.4;
        letter-spacing: .02em;
        font-size: 11.5px;
        text-align: left;
      }
      .title{
        grid-column: 2;
        margin: 0;
        line-height: 1.4;
        letter-spacing: .08em;
        font-size: 20px;
        text-align: left;
      }
      .text{
        grid-column: 2;
        width: auto;
        margin: 2px 0 0;
        line-height: 1.5;
        letter-spacing: .02em;
        font-size: 11.5px;
      }

      /* 矢印の帯：下から右端へ */
      .box{
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 30px;
        height: auto;

        .yajirushi{
          width: 12px;
          height: auto;
        }
      }
    }
  }
}
/* =====sec01===== */

.sec02, .sec03, .sec04{
  .sec_header{
    width:   100%;
    height: 333px;

    display: flex;
    justify-content: center;
    align-items: center;

    .textbox{
      position: relative;
      z-index: 1;
      margin-left: 15px;
      margin-right: auto;
      max-width: 580px;
      .box_subtitle{
        line-height: 1.55;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 20px;
      }
      .box_title{
        line-height: 1.68;
        font-size: 32px;
        font-weight: bold;
      }
    }

    position: relative;
    .imagebox{
      position: absolute;
      z-index: 0;
      top:   0;
      right: 0;
      max-width: 500px;
    }
  }

  .sec_text{
    width: 1024px;
    max-width: 100%;
    margin: -67px auto 100px;
    padding: 86px 0 30px;

    line-height: 2.25;
    font-weight: 500;
    letter-spacing: .1em;
  }

  @media screen and (max-width: 768px) {
    .sec_header{
      width:  100%;
      height: auto;
      display: block;

      .textbox{
        margin-left: 10px;
        max-width: initial;
        .box_subtitle{
          font-size: 16px;
          margin-bottom: 5px;
        }
        .box_title{
          line-height: 1.68;
          font-size: 22px; /* 32px; */
          padding-bottom: 10px;
        }
      }
      position: initial;
      .imagebox{
        position:  initial;
        max-width: var(--sp-max);
        margin: 0 auto;

        & img{
          display: block;
          width: 100%;
          height: auto;
        }
      }
    }
    .sec_text{
      width: 100%;
      margin: -50px auto 45px;
      padding: 65px 0 30px;

      line-height: 2.25;
      text-align: justify;
    }



  }
}

/* =====sec02===== */
.sec02{
  .inner{
    margin: 0 auto 145px;
  }
  .sec_text{
    border-image: linear-gradient(#D6E8EB, transparent) fill 0 / / 0 100vw;
  }

  .box{
    .box_title{
      font-size: 24px;
      font-weight: bolder;
      text-align: center;
      color: #205280;
      padding-bottom: 20px;
      margin-bottom: 70px;

      position: relative;
      &::before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-bottom: 2px solid #205280;
        width: 100px;
      }
    }
    .setsumei{
      --d: 14px;            /* 矢印の深さ */
      width: 812px;
      max-width: 100%;
      margin: 0 auto 25px;
    }

    /* 帯 */
    .timeline{
      display: flex;
      width: 678px;
      max-width: 100%;
      margin: 0 auto;
      padding: 0;
      list-style: none;

      .item{
        position: relative;
        flex: none;
        width: calc(128px + var(--d));
        height: 76px;
        margin-left: calc(var(--d) * -1);   /* 前の矢印の下に潜り込ませる */
        padding: 0 var(--d);
        box-sizing: border-box;

        display: flex;
        justify-content: center;
        align-items: baseline;
        align-content: center;
        flex-wrap: wrap;

        background-color: #205280;      /* 枠線の色 */
        clip-path: polygon(0 0, calc(100% - var(--d)) 0, 100% 50%, calc(100% - var(--d)) 100%, 0 100%);

        line-height: 76px;
        letter-spacing: .1em;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 18px;
        font-weight: bold;
        color: #444;

        /* 1px内側に薄い色を重ねて、枠線に見せる */
        &::before{
          content: "";
          position: absolute;
          z-index: -1;
          top: 1px;
          bottom: 1px;
          left: 0;
          right: 1px;
          background-color: #D6E8EB;
          clip-path: polygon(0 0, calc(100% - var(--d)) 0, 100% 50%, calc(100% - var(--d)) 100%, 0 100%);
        }

        .num{
          font-size: 18px;
        }
        .unit{
          font-size: 13px;
        }
      }

      /* 左の矢印を上に重ねる */
      .item:nth-child(1){ z-index: 5; }
      .item:nth-child(2){ z-index: 4; }
      .item:nth-child(3){ z-index: 3; }
      .item:nth-child(4){ z-index: 2; }
      .item:nth-child(5){ z-index: 1; }

      /* 初期保証20年 */
      .item:first-child{
        width: calc(166px + var(--d));
        margin-left: 0;
        padding-left: 0;
        color: #fff;
        &::before{
          display: none;
        }
        .num{
          font-size: 20px;
        }
      }

      /* 最後は矢印なし・右に枠線 */
      .item:last-child{
        width: 128px;
        padding-right: 0;
        clip-path: none;
        &::before{
          clip-path: none;
        }
      }
    }

    /* 目盛り */
    .scale{
      display: flex;
      width: 678px;
      max-width: 100%;
      margin: 10px auto 0;
      padding: 0;
      list-style: none;

      & li{
        position: relative;
        flex: none;
        width: 128px;
        height: 1.6em;
      }
      & li:first-child{ width: 166px; }
      & li:last-child { width: 0; }

      & span{
        position: absolute;
        top: 0;
        left: 0;
        transform: translateX(-50%);   /* 区切り位置の真下に中央揃え */
        white-space: nowrap;
        letter-spacing: .05em;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: #205280;
      }
    }


    .text{
      font-family: 'Noto Sans JP';
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      color: #205280;
    }
  }


  @media screen and (max-width: 768px) {
    .inner{
      margin: 0 auto 108px;
    }

    .box{
      .box_title{
        font-size: 18px;
        padding-bottom: 15px;
        margin-bottom: 25px;

        &::before{
          width: 110px;
        }
      }

      .setsumei{
        --d: 12px;   /* 矢印の深さ */
        --h: 64px;   /* 帯1本の高さ（目盛りの間隔 = h - d） */
        display: flex;
        column-gap: 10px;
        width: 100%;
        max-width: var(--sp-max);
        margin: 0 auto 35px;
        padding: 0 15px;
        box-sizing: border-box;
      }

      /* 帯（縦並び） */
      .timeline{
        flex: 1;
        display: flex;
        flex-direction: column;
        width: auto;
        margin: 0;
        padding: 0;
        list-style: none;
        border: 1px solid #205280;

        .item{
          --w: 20px;   /* 矢印の横幅（中心から片側）※全帯共通 */
          --arrow: polygon(
            0 0, 100% 0,
            100% calc(100% - var(--d)),
            calc(50% + var(--w)) calc(100% - var(--d)),
            50% 100%,
            calc(50% - var(--w)) calc(100% - var(--d)),
            0 calc(100% - var(--d))
          );
          position: relative;
          flex: none;
          width: 100%;
          height: var(--h);
          margin-left: 0;
          margin-top: calc(var(--d) * -1);   /* 上の矢印の下に潜り込ませる */
          padding: 0;
          box-sizing: border-box;

          display: flex;
          justify-content: center;
          align-items: baseline;
          align-content: center;
          flex-wrap: wrap;

          background-color: #205280;      /* 線の色 */
          clip-path: var(--arrow);

          line-height: 1;
          letter-spacing: .1em;
          font-size: 16px;
          font-weight: bold;
          color: #444;

          /* 下に1px残して薄い色を重ね、区切り線に見せる */
          &::before{
            content: "";
            position: absolute;
            z-index: -1;
            top: 0;
            bottom: 1px;
            left: 0;
            right: 0;
            background-color: #D6E8EB;
            clip-path: var(--arrow);
          }

          .num{
            font-size: 18px;
          }
          .unit{
            font-size: 14px;
          }
        }

        /* 初期保証20年 */
        .item:first-child{
          width: 100%;
          margin-top: 0;
          padding-left: 0;
          padding-bottom: var(--d);
          color: #fff;
          &::before{
            display: none;
          }
          .num{
            font-size: 18px;
          }
        }

        /* 最後は矢印なし */
        .item:last-child{
          width: 100%;
          height: calc(var(--h) - var(--d));
          padding-top: var(--d);
          padding-right: 0;
          clip-path: none;
          &::before{
            bottom: 0;
            clip-path: none;
          }
        }
      }

      /* 目盛り（左側・縦並び） */
      .scale{
        order: -1;   /* 帯の左に置く */
        flex: none;
        display: flex;
        flex-direction: column;
        width: 36px;
        margin: 0;
        padding: 0;
        list-style: none;

        & li{
          position: relative;
          flex: none;
          width: 100%;
          height: calc(var(--h) - var(--d));
        }
        & li:first-child{ width: 100%; }
        & li:last-child { width: 100%; height: 0; }

        & span{
          position: absolute;
          top: 0;
          left: auto;
          right: 0;
          transform: translateY(-50%);   /* 区切り線の高さに中央揃え */
          white-space: nowrap;
          line-height: 1;
          letter-spacing: .05em;
          font-family: 'Noto Sans JP', sans-serif;
          font-size: 14px;
          font-weight: bold;
          color: #205280;
        }
      }

      .text{
        font-size: 16px;
      }
    }
  }
}
/* =====sec02===== */

/* =====sec03===== */
.sec03{
  .inner{
    margin: 0 auto 145px;
  }
  .sec_text{
    border-image: linear-gradient(#DFEFE3, transparent) fill 0 / / 0 100vw;
  }

  .listbox{
    .box_title{
      font-size: 24px;
      font-weight: bolder;
      text-align: center;
      color: #356A49;
      padding-bottom: 20px;
      margin-bottom: 80px;

      position: relative;
      &::before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-bottom: 2px solid #356A49;
        width: 100px;
      }
    }

    .list{
        width: 920px;
        max-width: 100%;
        margin: 0 auto 60px;

        display: grid;
        grid-template-columns: repeat(4, minmax(0, 210px));
        column-gap: 20px;
        row-gap: 34px;
        justify-self: center;
    }
    .item{
      padding-left: 45px;
      left: .1em;
      font-family: 'Noto Sans JP';
      font-size: 18px;
      font-weight: bold;

      position: relative;
      &::before{
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        background: url(/images/warranty/sec03_check_icon.webp) center center /cover no-repeat;
        width:  32px;
        height: 25px;
      }
    }
  }

  .box .list{
    width: 640px;
    max-width: 100%;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 42px;
    row-gap: 0;
    justify-self: center;

    .item{
      width:  184px;
      height: 184px;
      border-radius: 50%;
      background-color: #356A49;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    & img{
      padding-bottom: 5px;
    }
    .size_18,
    .size_21,
    .size_32,
    .size_62{
      line-height: 1.4;
      font-size: 60px;
      font-weight: bold;
      text-align: center;
      color: #fff;
    }
    .size_18{font-size: 18px;}
    .size_21{font-size: 21px;}
    .size_29{font-size: 29px;}
    .size_32{font-size: 32px;}
    .size_62{font-size: 60px;}
    .item:nth-of-type(1){
      position: relative;
      &::before{
        content: "";
        position: absolute;
        top:  69px;
        left: 44px;
        background: url(/images/warranty/sec03_icon01.webp) center center /cover no-repeat;
        width:  34px;
        height: 24px;
      }
    }
  }

  @media screen and (max-width: 768px) {
    .inner{
      margin: 0 auto 108px;
    }

    .listbox{
      .box_title{
        font-size: 18px;
        padding-bottom: 15px;
        margin-bottom: 25px;

        &::before{
          width: 110px;
        }
      }

      .list{
          width: 100%;
          margin: 0 auto 40px;

          justify-content: center;   /* 画面が広いときは中央寄せ */
          grid-template-columns: repeat(2, minmax(0, 210px));
          column-gap: 3px;
          row-gap: 25px;
      }
      .item{
        padding-left: 28px;
        left: 0;
        font-size: 15px;
        &::before{
          width:  24px; /* 32px; */
          height: 19px; /* 25px; */
        }
      }
    }

    .box .list{
      width: 100%;

      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      column-gap: 20px;
      row-gap: -5px;
      justify-self: center;

      .item{
        width:  138px; /* 184px; */
        height: 138px; /* 184px; */
      }
      & img{
        padding-bottom: 5px;
      }
      .size_18,
      .size_21,
      .size_32,
      .size_62{
        line-height: 1.5;
        font-size: 45px;
      }
      .size_18{font-size: 14px; /* 18px; */ }
      .size_21{font-size: 16px; /* 21px; */ }
      .size_29{font-size: 22px; /* 29px; */ }
      .size_32{font-size: 24px; /* 32px; */ }
      .size_62{font-size: 45px; /* 60px; */ }
      .item:nth-of-type(1){
        &::before{
          top: 52px;
          left: 29px;
          width: 26px;
          height: 18px;
        }
      }
      .item:nth-of-type(2){ & img { width: 41px; height: 41px;} }
      .item:nth-of-type(3){ & img { width: 45px; height: 45px;} }
    }
  }
}
/* =====sec03===== */

/* =====sec04===== */
.sec04{
  .inner{
    margin: 0 auto 145px;
  }
  .sec_text{
      border-image: linear-gradient(#EFEFDF, transparent) fill 0 / / 0 100vw;
  }

  .listbox{
    .box_title{
      font-size: 24px;
      font-weight: bolder;
      text-align: center;
      color: #8B7A4F;
      padding-bottom: 20px;
      margin-bottom: 60px;

      position: relative;
      &::before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-bottom: 2px solid #8B7A4F;
        width: 90px;
      }
    }

    .list{
      width: 824px;
      max-width: 100%;
      margin: 0 auto 35px;
      padding: 0;
      list-style: none;

      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 20px;
    }

    .item{
      height: 76px;
      display: flex;
      justify-content: center;
      align-items: center;

      line-height: 1.4;
      letter-spacing: .1em;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      color: #444;

      /* 右側を矢印型に */
      padding-right: 14px;
      box-sizing: border-box;
      clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
    }
    .item:nth-child(1){ background-color: #EEEEDF; }
    .item:nth-child(2){ background-color: #E5E3B5; }
    .item:nth-child(3){
      background-color: #EBEB9D;
      padding-right: 0;
      clip-path: none;   /* 最後は矢印なし */
    }
  }

  .setsumei{
    width: 635px;
    max-width: 100%;
    margin: 0 auto 40px;

    .scale{ display: none; }   /* SP用の目盛りはPCでは非表示 */
  }

  .box{
    box-sizing: border-box;
    width: 572px;
    margin: 0 auto 47px;
    background-color: #EEEEDF;
    padding: 15px 66px;

    line-height: 1.77;
    font-family: 'Noto Sans JP';
    font-size: 18px;
    font-weight: bold;
  }

  .flexbox{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 30px;

    .circle{
      width:  134px;
      height: 134px;
      min-width: 134px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      border: 2px solid #9E8B7B;

      font-size: 21px;
      font-weight: bold;
      text-align: center;
    }
    .text{
      font-size: 21px;
      font-weight: bolder;
    }

  }

  @media screen and (max-width: 768px) {
    .inner{
      margin: 0 auto 108px;
    }

    .listbox{
      .box_title{
        font-size: 18px;
        padding-bottom: 15px;
        margin-bottom: 25px;

        &::before{
          width: 110px;
        }
      }

      .list{
        order: 2;   /* 目盛りの右に置く */
        flex: 1;
        display: flex;
        flex-direction: column;
        row-gap: var(--g);
        width: auto;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .item{
        height: var(--h);
        padding: 0 0 var(--d);   /* 矢印の分だけ下を空けて文字を中央に */
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;

        line-height: 1.4;
        letter-spacing: .1em;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        color: #444;

        /* 下側中央を矢印型に */
        clip-path: polygon(
          0 0, 100% 0,
          100% calc(100% - var(--d)),
          calc(50% + var(--w)) calc(100% - var(--d)),
          50% 100%,
          calc(50% - var(--w)) calc(100% - var(--d)),
          0 calc(100% - var(--d))
        );
      }
      .item:nth-child(1){ background-color: #EEEEDF; }
      .item:nth-child(2){ background-color: #E5E3B5; }
      .item:nth-child(3){
        background-color: #EBEB9D;
        height: calc(var(--h) - var(--d));
        padding-bottom: 0;
        clip-path: none;   /* 最後は矢印なし */
      }
    }

    /* 帯＋目盛りの横並び */
    .flow{
      --h: 72px;   /* 帯の高さ（矢印込み） */
      --d: 12px;   /* 矢印の深さ */
      --w: 30px;   /* 矢印の横幅（中心から片側） */
      --g: 12px;   /* 帯どうしの間隔 */
      --top:  calc((var(--h) - var(--d)) / 2);   /* 「10年」の位置 = 1つ目の帯の中央 */
      --step: calc((var(--h) + var(--g)) / 2);   /* 目盛りの間隔 */

      display: flex;
      column-gap: 14px;
      max-width: var(--sp-max);
      padding-top: 20px;   /* アイコンがはみ出す分 */
      margin: 0 auto 30px;
    }

    .setsumei{
      order: 1;
      flex: none;
      position: relative;
      width: 50px;
      max-width: none;
      margin: 0;

      .setsumei_img{ display: none; }   /* PC用の横長画像は隠す */

      .scale{
        display: block;

        /* 縦線（アイコンの下〜30年の丸まで） */
        &::before{
          content: "";
          position: absolute;
          top: calc(var(--top) - 12px);
          right: 7px;
          width: 2px;
          height: calc(var(--step) * 4 + 12px);
          background-color: #9E8B7B;
        }

        .icon{
          position: absolute;
          top: calc(var(--top) - 12px - 36px);
          right: -10px;   /* 線の中心（右から8px）に合わせる */
          width:  36px;
          height: 36px;
        }

        & ol{
          margin: calc(var(--top) - var(--step) / 2) 0 0;
          padding: 0;
          list-style: none;
        }

        & li{
          position: relative;
          height: var(--step);
          display: flex;
          align-items: center;

          line-height: 1;
          letter-spacing: .05em;
          font-family: 'Noto Sans JP', sans-serif;
          font-size: 14px;
          font-weight: bold;
          color: #6b5d4d;

          /* 目盛りの丸 */
          &::after{
            content: "";
            position: absolute;
            top: 50%;
            right: 4px;
            transform: translateY(-50%);
            width:  8px;
            height: 8px;
            border-radius: 50%;
            background-color: #9E8B7B;
          }
        }
      }
    }

    .box{
      box-sizing: border-box;
      width: 338px;
      margin: 0 auto 30px;
      padding: 20px 20px;

      line-height: 1.5;
      font-size: 16px;
    }

    .flexbox{
      flex-direction: column;
      column-gap: 0;
      row-gap: 10px;

      .circle{
        width:  80px; /* 134px; */
        height: 80px; /* 134px; */
        min-width: initial;
        font-size: 18px;
      }
      .text{
        font-size: 16px;
        text-align: justify;
      }
    }
  }
}
/* =====sec04===== */

/* =====sec05===== */
.sec05{
  .inner{
    margin: 0 auto 75px;
  }

  .sec_title{
    padding-left: 44px;
    line-height: 1.875;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 48px;
    position: relative;
    &::before{
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      border-left: 15px solid #F5A518;
      width: 15px;
      height: 61px;
    }
  }
  .sec_text{
    width: 800px;
    padding-left: 30px;
    margin-bottom: 90px;
  }

  .comparison_sp{ display: none; }
  .comparison{
    width: 1024px;
    max-width: 100%;
    margin: 0 auto 190px;
    border-collapse: collapse;
    table-layout: fixed;
    border-top:    2px solid #6b5d4d;
    border-bottom: 2px solid #6b5d4d;

    & th,
    & td{
      padding: 18px 10px;
      border-bottom: 2px solid #6b5d4d;
      border-right:  1px solid #6b5d4d;
      text-align: center;
      vertical-align: middle;
      letter-spacing: .1em;
      line-height: 1.7;
    }
    & th:last-child,
    & td:last-child{
      border-right: none;
    }

    /* 列幅 */
    & th:nth-child(1){ width: 22%; }
    & th:nth-child(2){ width: 21%; }
    & th:nth-child(3){ width: 29%; }
    & th:nth-child(4){ width: 28%; }

    /* 見出し行 */
    & thead th{
      height: 70px;
      background-color: #f3efe5;
      font-family: 'Noto Serif JP', serif;
      font-size: 21px;
      font-weight: bold;
    }

    /* 左列（保証名） */
    & tbody th{
      height: 70px;
      font-family: 'Noto Serif JP', serif;
      font-size: 21px;
      font-weight: bold;
    }

    /* 本文セル */
    & tbody td{
      line-height: 1.5;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 16px;
      font-weight: bold;
    }

    /* 期間列：保証ごとの色 */
    & tbody td:nth-of-type(1){
      font-size: 16px;
      letter-spacing: .08em;
    }
    & tbody tr:nth-child(1) td:nth-of-type(1){ font-size: 21px; color: #205280; }
    & tbody tr:nth-child(2) td:nth-of-type(1){ font-size: 21px; color: #356A49; }
    & tbody tr:nth-child(3) td:nth-of-type(1){ font-size: 21px; color: #957845; }
  }

  .box{
    .box_title{
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 70px;
    }
    .flexbox{
      display: flex;
      justify-content: center;
      align-items: flex-start;
      column-gap: 70px;
    }

    .imagebox{
      min-width: 500px;
      max-width: 500px;
      position: relative;

      &::before{
        content: "";
        position: absolute;
        top:  50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: url(/images/warranty/sec05_circle_back.webp) center center /cover no-repeat;
        width:  393px;
        height: 205px;
      }

      &::after{
        content: "";
        position: absolute;
        top:  50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: url(/images/warranty/sec05_circle_batsu.webp) center center /cover no-repeat;
        width:  24px;
        height: 49px;
      }

      & img{
        display: block;
      }

      .circle_text01,
      .circle_text02{
        position: absolute;
        z-index: 1;
        top: 50%;
        transform: translateY(-50%);
        line-height: 1.6;
        letter-spacing: .1em;
        font-family: 'Noto Serif JP', serif;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        color: #553618;
      }
      .circle_text01{
        left: 90px;
      }
      .circle_text02{
        right: 60px;
      }

      .circle_text01 .size_24{
        font-size: 24px;
        font-weight: bold;
      }
      .circle_text02 .size_23{
        font-size: 23px;
        font-weight: bold;
      }
      .circle_text01 .size_21,
      .circle_text02 .size_21{
        font-size: 21px;
        font-weight: bold;
      }
    }

    .box_text{
      line-height: 2.25;
      margin-bottom: 44px;
    }
    .company_box{
      .box{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        column-gap: 15px;
        margin-bottom: 0;
      }
      & img{
        width: 52px;
        height: 45px;
        object-fit: cover;
      }
      .company{
        line-height: 1.3;
        letter-spacing: .1em;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 18px;
        font-weight: bold;
        color: #553618;
      }
      .company .address{
        letter-spacing: .1em;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 16px;
        font-weight: bold;
        color: #553618;
      }
      .tel_text{
        padding-left: 10px;
        box-sizing: border-box;
        letter-spacing: .1em;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 28px;
        font-weight: bold;
      }
    }
  }

  @media screen and (max-width: 768px) {
    .inner{
      margin: 0 auto 60px;
    }

    .sec_title{
      padding-left: 33px;
      line-height: 1.875;
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 24px;
      position: relative;
      &::before{
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        border-left: 12px solid #F5A518;
        width:  12px;
        height: 45px; /* 61px; */
      }
    }
    .sec_text{
      width: 100%;
      padding-left: 5px;
      margin-bottom: 60px;
      text-align: justify;
    }

    .comparison{ display: none;}
    .comparison_sp{
      display: table;
      width: 100%;
      max-width: var(--sp-max);
      margin: 0 auto 35px;
      border-collapse: collapse;
      table-layout: fixed;
      border-top:    2px solid #6b5d4d;
      border-bottom: 2px solid #6b5d4d;

      /* 表タイトル（建物保証など） */
      & caption{
        padding-bottom: 10px;
        letter-spacing: .1em;
        font-family: 'Noto Serif JP', serif;
        font-size: 21px;
        font-weight: bold;
        text-align: left;
      }

      & th,
      & td{
        padding: 15px 8px;
        border-bottom: 1px solid #6b5d4d;
        vertical-align: middle;
        text-align: center;
        line-height: 1.5;
        letter-spacing: .1em;
        font-feature-settings: "palt";
      }

      /* 左列（期間・主に守るもの…） */
      & th{
        width: 25%;
        background-color: #f3efe5;
        border-right: 1px solid #6b5d4d;
        font-family: 'Noto Serif JP', serif;
        font-size: 15px;
        font-weight: bold;
      }

      /* 右列 */
      & td{
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 15px;
        font-weight: bold;
        font-feature-settings: "palt";
      }

      /* 期間の行は少し大きく */
      & tr:first-child td{
        font-size: 15px;
      }
    }

    /* 期間：保証ごとの色（.comparison が1つ目の table なので 2〜4番目） */
    .comparison_sp:nth-of-type(2) tr:first-child td{ color: #205280; }
    .comparison_sp:nth-of-type(3) tr:first-child td{ color: #356A49; }
    .comparison_sp:nth-of-type(4) tr:first-child td{ color: #957845; }

    /* 最後の表の下だけ余白を広めに */
    .comparison_sp:nth-of-type(4){
      margin-bottom: 60px;
    }

    .box{
      .box_title{
        font-size: 18px;
        margin-bottom: 20px;
      }
      .flexbox{
        display: block;
      }

      .imagebox{
        container-type: inline-size;   /* 文字サイズを写真の幅に連動させる（cqw） */
        min-width: 0;
        width: 100%;
        max-width: 460px;   /* 画面幅500pxで止める */
        margin: 0 auto;

        position: relative;
        & img{
          width: 100%;
        }

        /* 丸の背景画像（375px表示時 294.75px ÷ 335px） */
        &::before{
          width: 88%;
          height: auto;
          aspect-ratio: 393 / 205;
        }
        /* 中央の×（18px ÷ 335px） */
        &::after{
          width: 5.37%;
          height: auto;
          aspect-ratio: 24 / 49;
        }

        .circle_text01,
        .circle_text02{
          font-size: 4.78cqw;   /* 16px ÷ 335px */
        }
        .circle_text01{
          left: 12.84%;   /* 43px ÷ 335px */
        }
        .circle_text02{
          right: 7.46%;   /* 25px ÷ 335px */
        }

        .circle_text01 .size_24{
          font-size: 5.37cqw;   /* 18px */
          font-weight: bold;
        }
        .circle_text02 .size_23{
          font-size: 5.07cqw;   /* 17px */
          font-weight: bold;
        }
        .circle_text01 .size_21,
        .circle_text02 .size_21{
          font-size: 4.78cqw;   /* 16px */
          font-weight: bold;
        }
      }

      .box_text{
        padding-top: 20px;
        font-size: 16px;
        text-align: justify;
        margin-bottom: 30px;
      }
      .company_box{
        .box{
          justify-content: center;
          margin-bottom: 0;
        }
        & img{
          width:  52px;
          height: 45px;
        }
        .company{
          font-family: 'Noto Sans JP', sans-serif;
          font-size: 18px;
        }
        .company .address{
          font-family: 'Noto Sans JP', sans-serif;
          font-size: 16px;
        }
        .tel_text{
          padding-left: 0;
          font-family: 'Noto Sans JP', sans-serif;
          font-size: 28px;
          text-align: center;
        }
      }
    }
  }
}
/* =====sec05===== */

/* =====sec06===== */
.sec06{
  .inner{
    width: 1320px;
    max-width: 100%;
    margin: 0 auto 180px;
  }
  .gridbox_sp{ display: none;}
  .gridbox{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 0;
    justify-self: center;
  }
  .item{
    width: 100%;
  }


  @media screen and (max-width: 768px) {
    .inner{
      width: 100%;
      margin: 0 auto 60px;
      padding: 0;
    }

    .gridbox{ display: none;}
    .gridbox_sp{
        display: block;
        text-align: center;   /* 画面が広いときは中央寄せ */
      }
    .item{
      width: 100%;
    }
  }
}
/* =====sec06===== */

/* =====sec07===== */
.sec07{
  .inner{
    margin: 0 auto 200px;
  }

  .sec_title{
    font-size: 24px;
    font-weight: bolder;
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 80px;

    position: relative;
    &::before{
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      border-bottom: 2px solid #F5A518;
      width: 182px;
    }
  }

  .qa_box{
    width: 100%;
    border-bottom: 1px solid #553618;
    padding: 45px 0;
    .q_title{
      position: relative;
      margin-bottom: 40px;
      height: 60px;
      line-height: 60px;
      padding-left: 70px;
      font-size: 21px;
      font-weight: bold;
      &::before{
        content: "";
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        left: 0;
        background: url(/images/warranty/q_bluie_icon.webp) center center /cover no-repeat;
        width:  52px;
        height: 53px;
      }
    }
    .blue{
      &::before{
        background: url(/images/warranty/q_bluie_icon.webp) center center /cover no-repeat;
      }
    }
    .green{
      &::before{
        background: url(/images/warranty/q_green_icon.webp) center center /cover no-repeat;
      }
    }
    .brown{
      &::before{
        background: url(/images/warranty/q_brown_icon.webp) center center /cover no-repeat;
      }
    }

    .a_text{
      position: relative;
      line-height: 2.25;
      padding-left: 70px;
      font-weight: 600;
      &::before{
        content: "";
        position: absolute;
        top: 25%;
        transform: translateY(-50%);
        left: 0;
        background: url(/images/warranty/a_icon.webp) center center /cover no-repeat;
        width:  52px;
        height: 53px;
      }
    }
  }
  .qa_box:nth-of-type(3),
  .qa_box:nth-of-type(5){
    margin-bottom: 94px;
  }

  @media screen and (max-width: 768px) {
    .inner{
      margin: 0 auto 80px;
    }

    .sec_title{
      font-size: 18px;
      padding-bottom: 15px;
      margin-bottom: 25px;

      &::before{
        width: 140px;
      }
    }


    .qa_box{
      padding: 20px 0;
      .q_title{
        margin-bottom: 30px;
        height: initial;
        line-height: 1.6;
        padding-left: 53px; /* 70px; */
        font-size: 18px;
        &::before{
          width:  39px; /* 52px;*/
          height: 40px; /* 53px; */
        }
      }

      .a_text{
        position: relative;
        line-height: 1.7;
        padding-left: 53px; /* 70px; */
        font-size: 16px;
        &::before{
          width:  39px; /* 52px;*/
          height: 40px; /* 53px; */
        }
      }
    }
    .qa_box:nth-of-type(3),
    .qa_box:nth-of-type(5){
      margin-bottom: 45px;
    }
  }
}
/* =====sec07===== */

/* =====sec08===== */
.sec08{
  .inner{
    margin: 0 auto;
  }

  .sec_header{
    width:   100%;
    height: 306px;

    display: flex;
    justify-content: center;
    align-items: center;

    .textbox{
      position: relative;
      z-index: 1;
      margin-left: 15px;
      margin-right: auto;
      max-width: 580px;
      .box_subtitle{
        font-size: 24px;
        font-weight: bolder;
        margin-bottom: 25px;
      }
      .box_title{
        line-height: 1.68;
        font-size: 32px;
        font-weight: bold;
      }
      .box_title .sixe_28{
        font-size: 28px;
        font-weight: bold;
      }
    }

    position: relative;
    .imagebox{
      position: absolute;
      z-index: 0;
      top:   0;
      right: 0;
      max-width: 512px;
    }
  }

  .sec_text{
    width: 950px;
    max-width: 100%;
    margin: 0 auto 56px;

    line-height: 2.25;
    letter-spacing: .1em;
  }

  .flex_btn{
    display: flex;
    margin-bottom: 85px;

    .btn_link{
      display: block;
      width:  327px;
      height: 104px;
      margin: 0 auto;
      background-color: #D09020;

      display: flex;
      justify-content: center;
      align-items: center;

      letter-spacing: .1em;
      line-height: 1.23;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 21px;
      font-weight: bold;
      text-align: center;
      color: #fff;

      position: relative;
      &::before{
        content: "";
        position: absolute;
        bottom: 9px;
        right: 9px;
        background: url(/images/warranty/btn_triangle.webp) center center /cover no-repeat;
        width:  14px;
        height: 14px;
      }
    }
  }

  .company_box{
    width: 510px;
    max-width: 100%;
    justify-self: center;

    .box{
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: 10px;
      justify-self: center;
      margin-bottom: 10px;
    }
    .company{
      letter-spacing: .1em;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 24px;
      font-weight: bold;
      color: #553618;
    }
    .address{
      letter-spacing: .1em;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 23px;
      font-weight: 500;
      text-align: center;
      color: #553618;
      margin-bottom: 5px;
    }
    .tel_text{
      display: block;
      box-sizing: border-box;
      width:  318px;
      height:  67px;
      margin: 0 auto 90px;
      padding: 15px 20px;
      border-radius: 10px;
      background-color: #553618;

      letter-spacing: .1em;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 24px;
      text-align: center;
      font-weight: bold;
      color: #fff;
    }

  }

  @media screen and (max-width: 768px) {
    .inner{
      margin: 0 auto;
      padding: 0 20px;
    }

    .sec_header{
      height: initial;
      display: block;

      .textbox{
        position: relative;
        z-index: 1;
        margin-left: initial;
        margin-right: initial;
        .box_subtitle{
          font-size: 18px;
          margin-bottom: 10px;
          font-feature-settings: "palt";
        }
        .box_title{
          font-size: 24px;
        }
        .box_title .sixe_28{
          font-size: 22px;
        }
      }

      position:initial;
      .imagebox{
        position: fixed;
        max-width: initial;
        margin-bottom: 30px;
      }
    }

    /* SP用の写真：最大幅で止めて中央寄せ */
    .imagebox.sp{
      max-width: var(--sp-max);
      margin: 0 auto;

      & img{
        display: block;
        width: 100%;
        height: auto;
        font-family: 'Noto Sans JP', sans-serif;
      }
    }

    .sec_text{
      width: 100%;
      max-width: 100%;
      margin: 20px auto 56px;

      line-height: 2.25;
      letter-spacing: .1em;
      font-size: 16px;
    }

    .flex_btn{
      display: flex;
      margin-bottom: 40px;

      .btn_link{
        display: block;
        width:  327px;
        height: 104px;
        margin: 0 auto;
        background-color: #D09020;

        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 18px;

        position: relative;
        &::before{
          content: "";
          position: absolute;
          bottom: 9px;
          right: 9px;
          background: url(/images/warranty/btn_triangle.webp) center center /cover no-repeat;
          width:  14px;
          height: 14px;
        }
      }
    }

    .company_box{
      width: 100%;

      .box{
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 10px;
        justify-self: center;
        margin-bottom: 0;
      }
      .company{
        line-height: 1.3;
        font-size: 21px;
      }
      .address{
        font-size: 18px;
      }
      .tel_text{
        width:  318px;
        height:  67px;
        margin: 0 auto 90px;
        padding: 15px 20px;
        border-radius: 10px;

        font-size: 24px;
        text-align: center;
      }

    }


  }
}
/* =====sec08===== */