@charset "utf-8";
/*ANALYTICS*/
#ANALYTICS{
  position:relative;
  .fvArea{
    .fvImage{
      display:none;
    }
    @media (width > 768px){
      background-image:url('../web_analytics/img/analytics_bg_img001.jpg');
      aspect-ratio:1920 / 900;
      .fvImage{
        position:absolute;
        width:34.74%;
        aspect-ratio:667 / 726;
        display:block;
        margin:0;
        right:10.9375%;
        top:13.78%;
      }
    }
    .catchCopy{
      width:40.1%;
      height:auto;
      top:14.78%;
      left:13.54%;
    }
  }
  .firstArea{
    background-color:#fff;
    background-image:url('../web_analytics/img/analytics_bg_img002.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:bottom center;
    padding-bottom:120px;
    @media (width > 768px){
      padding-bottom:240px;
    }
    .firstBlueArea{
      background-color:#0F75B7;
      width:calc(100% - 32px);
      max-width:1400px;
      padding:16px;
      border-radius:32px;
      position:relative;
      z-index:10;
      margin:-2.5% auto auto;
      @media (width > 768px){
        margin:-10.71% auto auto;
      }
      &::after{
        content:'';
        background-image:url('../web_analytics/img/analytics_img005.png');
        background-size:contain;
        background-position:center;
        background-repeat:no-repeat;
        width:20px;
        aspect-ratio:20 / 143;
        display:block;
        margin:auto;
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        transform:translate(0, 75%);
      }
      .blueInner{
        border:1px solid #fff;
        width:100%;
        border-radius:16px;
        padding:40px 16px;
        h2{
          text-align:center;
          font-weight:bold;
          width:fit-content;
          padding:8px 32px;
          margin:auto auto 32px;
          border-radius:48px;
          background-color:#fff;
          span{
            color:#FE5A4D;
          }
        }
        .firstGrid{
          margin:auto;
          grid-template-columns:1fr;
          align-items:stretch;
          gap:24px;
          @media (width > 768px){
            grid-template-columns:1fr 1fr;
          }
          @media (width > 1000px){
            grid-template-columns:1fr 1fr 1fr 1fr;
          }
          .gridItem{
            width:100%;
            max-width:286px;
            border-radius:20px;
            margin:auto;
            position:relative;
            display:flex;
            flex-direction:column;
            align-items:stretch;
            justify-content:space-between;
            background-color:#fff;
            padding:24px 16px;
            @media (width > 768px){
              padding:24px;
            }
            .circleRed{
              width:22.38%;
              aspect-ratio:1 / 1;
              border-radius:50%;
              display:flex;
              align-items:center;
              justify-content:center;
              background-color:#FE5A4D;
              color:#fff;
              font-weight:500;
              font-family:"Prompt",sans-serif;
              position:absolute;
              left:-8px;
              top:-8px;
            }
            img{
              display:block;
              margin:auto auto 16px;
              max-width:120px;
              height:auto;
            }
          }
        }
      }
    }
    .backRed{
      text-align:center;
      width:fit-content;
      color:#fff;
      font-weight:bold;
      padding:8px 32px;
      margin: 150px auto auto;
      border-radius:56px;
      background-color:#FE5A4D;
      @media (width > 768px){
        margin-top:233px;
      }
    }
    .seoAnswerArea{
      width:calc(100% - 32px);
      max-width:1162px;
      margin:-32px auto auto;
      padding:40px 16px;
      position:relative;
      border:1px solid #2BC0A7;
      border-radius:40px;
      background-color:#fff;
      @media (width > 768px){
        padding:0 16px 80px;
      }
      legend{
        text-align:center;
        display:block;
        font-weight:bold;
        width:fit-content;
        margin:0 auto 40px;
        line-height:1.6;
        background-color:transparent;
        padding:0 32px;
        transform:translateY(24px);
        span:not([class]){
          font-size:0.83em;
        }
      }
      .answerGrid{
        width:100%;
        max-width:980px;
        margin:auto;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:space-between;
        gap:16px;
        padding:48px 0;
        border-bottom:1px solid #CFCFCF;
        img{
          margin:0 auto;
          display:block;
        }
        &:first-of-type{
          img:last-of-type{
            margin-bottom:-48px;
            @media (width > 1017px){
              margin-bottom:-60px;
            }
          }
        }
        &:not(:nth-of-type(2)){
          img:first-of-type{
            width:100%;
            max-width:588px;
          }
          img:last-of-type{
            width:100%;
            max-width:150px;
            @media (width > 768px){
              max-width:333px;
            }
          }
        }
        &:nth-of-type(2){
          img:first-of-type{
            width:65.95%;
            @media (width >652px){
              width:100%;
              max-width:368px;
            }
            @media (width > 707px){
              margin:0 calc((100% - 270.83px) / 2);
            }
            @media (width > 958px){
              margin:0 auto;
              order:2;
            }
          }
          img:not(:first-of-type){
            width:45%;
          }
          img:nth-of-type(2){
            max-width:275px;
            @media (width > 958px){
              order:1;
            }
          }
          img:last-of-type{
            max-width:193px;
            @media (width > 958px){
              order:3;
            }
          }
        }
        &:last-of-type{
          border-bottom:0;
          img:first-of-type{
            @media (width > 958px){
              order:2;
            }
            img:last-of-type{
              @media (width > 958px){
                order:1;
              }
            }
          }
        }
      }
    }
  }
  .secondArea{
    width:100%;
    padding:0 16px 64px;
    position:relative;
    background-color:#E1EDF5;
    @media (width > 768px){
      padding:0 16px 128px;
    }
    &::before{
      content:'';
      background-image:url('../web_analytics/img/analytics_bg_img003.png');
      background-size:contain;
      background-position:bottom center;
      background-repeat:no-repeat;
      width:100%;
      aspect-ratio:192 / 16;
      display:block;
      position:absolute;
      margin:auto;
      top:0;
      left:0;
      right:0;
      transform:translate(0, -100%);
    }
    h2{
      color:#FE5A4D;
      font-weight:bold;
      text-align:center;
      margin-bottom:28px;
      @media (width > 768px){
        margin-bottom:56px;
      }
    }
    .pcCenter{
      @media (width > 768px){
        text-align:center;
      }
    }
    .planGrid{
      display:grid;
      grid-template-columns:1fr;
      row-gap:48px;
      column-gap:24px;
      margin-top:40px;
      align-items:stretch;
      @media (width > 1000px){
        grid-template-columns:1fr 1fr;
      }
    }
    .planWhiteArea{
      width:100%;
      max-width:1400px;
      background-color:#fff;
      border-radius:24px;
      padding:0 16px 48px;
      margin:0 auto;
      display:flex;
      flex-direction:column;
      &:not(:first-of-type){
        max-width:686px;
      }
      @media (width > 1000px){
        &:first-of-type{
          grid-column:span 2;
        }
      }
      h3{
        width:fit-content;
        border-bottom-left-radius:16px;
        border-bottom-right-radius:16px;
        color:#fff;
        background-color:#FE5A4D;
        margin:0 auto 40px;
        padding:16px 32px;
        font-weight:bold;
      }
      .flexArea{
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
        gap:35px;
        flex-grow:1;
        @media (width > 768px){
          gap:70px;
        }
        .planFlexLeft{
          display:grid;
          grid-template-columns:1fr;
          align-items:center;
          width:100%;
          max-width:408px;
          @media (width > 1000px){
            width:29.21%;
          }
          img{
            max-width:303px;
            margin-bottom:36px;
          }
          &>p{
            width:100%;
            line-height:1.8;
            margin-bottom:48px;
          }
          .planDetailList{
            position:relative;
            background-color:#0F75B71A;
            border-radius:24px;
            font-weight:bold;
            padding:48px 16px 24px;
            @media (width > 768px){
              padding:48px 24px 24px;
            }
            p{
              position:absolute;
              margin:auto;
              top:0;
              right:0;
              left:0;
              transform:translate(0,-50%);
              color:#fff;
              text-align:center;
              width:fit-content;
              padding:8px 24px;
              border-radius:100px;
              background-color:#FE5A4D;
            }
            ul{
              color:#064066;
              padding-left:1em;
              line-height:1.8;
              li{
                &::marker{
                  content:'・';
                }
              }
            }
          }
        }
        .planFlexRight{
          display:grid;
          grid-template-columns:1fr;
          align-items:center;
          width:100%;
          max-width:739px;
          @media (width > 1000px){
            width:52.786%;
          }
          dl{
            display:grid;
            grid-template-columns:1fr;
            padding:24px;
            text-align:center;
            background-color:#064066;
            border-radius:24px;
            margin-bottom:24px;
            @media (width > 1370px){
              grid-template-columns:1fr 1.422fr;
            }
            dt{
              margin-bottom:16px;
              color:#fff;
              font-weight:bold;
              display:flex;
              align-items:center;
              justify-content:center;
            }
            dd{
              color:#FE5A4D;
              font-weight:500;
              position:relative;
              background-color:#fff;
              border-radius:16px;
              padding:24px 16px;
              margin-bottom:auto;
              width:100%;
              .planCost{
                font-family:"Prompt",sans-serif;
                font-size:1.5em;
              }
              .planCaution{
                font-size:clamp(1.2rem, 0.914rem + 0.76vw, 1.6rem);
                color:#064066;
                font-weight:400;
                position:absolute;
                bottom:0;
                left:0;
                right:0;
                margin:auto;
              }
            }
          }
          .planPriceCautionList{
            font-size:16px;
            padding-left:1em;
            line-height:1.8;
            li{
              &::marker{
                content:'※';
              }
            }
          }
        }
      }
      &:not(:first-of-type){
        .flexArea{
          gap:40px;
          align-items:stretch;
          img{
            width:100%;
            max-width:188px;
          }
          .planFlexRight{
            width:100%;
            max-width:360px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            p{
              color:#253550;
              line-height:1.8;
              padding-bottom:24px;
            }
            .planPrice{
              text-align:center;
              width:100%;
              background-color:#064066;
              color:#fff;
              border-radius:24px;
              font-weight:500;
              span{
                font-size:1.5em;
              }
              .planPriceNum{
                font-family:"Prompt",sans-serif;
              }
            }
          }
        }
      }
    }
    .gridArea{
      align-items:stretch;
      gap:2%;
      margin-top:64px;
      margin-bottom:64px;
      grid-template-columns:1fr;
      counter-reset:seoSuccess;
      @media (width > 1000px){
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto auto auto auto;
        margin-top:128px;
        margin-bottom:16px;
        row-gap:32px;
      }
      .successDetail{
        width:100%;
        max-width:686px;
        border-radius:32px;
        background-color:#fff;
        display:grid;
        grid-row:span 4;
        grid-template-rows:subgrid;
        justify-content:space-between;
        row-gap:0;
        gap:32px;
        padding:0 0 28px;
        margin:0 auto;
        @media (width > 768px){
          padding:0 0 56px;
        }
        h3{
          color:#fff;
          background-color:#0F75B7;
          border-top-left-radius:32px;
          border-top-right-radius:32px;
          text-align:center;
          font-size:clamp(1.6rem, 0.457rem + 3.05vw, 3.2rem);
          width:100%;
          font-weight:bold;
          padding:8px;
          position:relative;
          &::before{
            content:'CASE'counter(seoSuccess,decimal-leading-zero);
            counter-increment:seoSuccess;
            color:#FFFFFF29;
            font-family:"Pormpt",sans-serif;
            font-size:1.5em;
            font-weight:500;
            position:absolute;
            margin:auto;
            top:50%;
            left:5px;
            transform:translate(0,-50%);
          }
        }
        dl{
          width:calc(100% - 56px);
          margin:auto;
          background-color:#D6E6F1;
          border-radius:16px;
          position:relative;
          z-index:10;
          display: flex;
          flex-direction: column;
          @media (width > 768px){
            width:calc(100% - 112px);
          }
          dt,dd{
            padding:16px;
          }
          dt{
            color:#0F75B7;
            font-weight:bold;
            background-color:#D6E6F1;
            border-top-left-radius:16px;
            border-top-right-radius:16px;
            border-bottom:1px solid #0F75B7;
            font-size:clamp(1.6rem, 1.029rem + 1.52vw, 2.4rem);
            display:flex;
            align-items:center;
            justify-content:flex-start;
            gap:8px;
          }
          dd{
            font-size:clamp(1.6rem, 1.457rem + 0.38vw, 1.8rem);
            background-color:#D6E6F1;
            border-bottom-left-radius:16px;
            border-bottom-right-radius:16px;
            line-height:1.8;
            flex-grow:1;
            span:not([class]){
              font-weight:bold;
            }
          }
        }
        dl:first-of-type{
          &::before{
            content:'';
            width:17.06%;
            max-width:117px;
            height:100%;
            display:block;
            background-color:#0F75B7;
            position:absolute;
            margin:auto;
            z-index:-2;
            left:0;
            right:0;
            bottom:-50px;
          }
          dt::before{
            content:'';
            width:1em;
            aspect-ratio:1 /1;
            background-image:url('../web_analytics/img/analytics_img016.png');
            background-repeat:no-repeat;
            background-size:contain;
            background-position:center;
            display:block;
          }
        }
        dl:nth-of-type(2){
          &::before{
            content:'';
            width:17.06%;
            max-width:117px;
            height:100%;
            display:block;
            background-color:#0F75B7;
            position:absolute;
            margin:auto;
            z-index:-2;
            left:0;
            right:0;
            bottom:-9px;
          }
          &::after{
            content:'';
            display: block;
            width: 100%;
            max-width: 192px;
            height: 24px;
            background-color: #0F75B7;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom: -32px;
            z-index: -2;
            clip-path: polygon(0 0, 100% 0, 50% 100%);
          }
          dt::before{
            content:'';
            width:1em;
            aspect-ratio:1 /1;
            background-image:url('../web_analytics/img/analytics_img017.png');
            background-repeat:no-repeat;
            background-size:contain;
            background-position:center;
            display:block;
          }
        }
        .successData{
          background-color:#FE5A4D;
          @media (width > 768px){
            display:flex;
            flex-direction:row;
            align-items:center;
            justify-content:center;
          }
          dt{
            color:#FFFE82;
            background-color:#FE5A4D;
            border-top-left-radius:16px;
            border-top-right-radius:16px;
            border-bottom-color:#fff;
            @media (width > 768px){
              border-bottom:none;
              border-radius:16px;
              width:400px;
              padding:24px 0 24px 48px;
            }
            &::before{
              content:'';
              width:1em;
              aspect-ratio:1 /1;
              background-image:url('../web_analytics/img/analytics_img018.png');
              background-repeat:no-repeat;
              background-size:contain;
              background-position:center;
              display:block;
            }
          }
          dd{
            color:#fff;
            background-color:#FE5A4D;
            border-bottom-left-radius:16px;
            border-bottom-right-radius:16px;
            font-weight:bold;
            @media (width > 768px){
              border-bottom:none;
              border-radius:16px;
              padding:24px 48px 24px 0;
            }
          }
        }
      }
    }
    p:not([class]){
      font-size:clamp(1.6rem, 1.457rem + 0.38vw, 1.8rem);
    }
  }
  .thirdArea{
    padding:0 16px;
    background: linear-gradient(180deg, #E1EDF5 0%, rgba(225, 237, 245, 0) 100%);
    h2{
      color:#FE5A4D;
      font-weight:bold;
      text-align:center;
      margin-bottom:24px;
      @media (width > 768px){
        margin-bottom:48px;
      }
    }
    .width1400{
      counter-reset:supportNumber;
    }
    .supportDl{
      display:grid;
      grid-template-columns:1fr;
      padding:24px 16px;
      background-color:#fff;
      border:2px solid #FE5A4D;
      border-radius:16px;
      position:relative;
      margin-bottom:64px;
      &:not(:last-of-type){
        &::after{
          content:'';
          width: 80px;
          height: 30px;
          background-color: #FE5A4D;
          clip-path: polygon(0 0, 100% 0, 50% 100%);
          position:absolute;
          bottom:-52px;
          left:0;
          right:0;
          margin:auto;
        }
      }
      @media (width > 768px){
        grid-template-columns:1fr 1.38fr;
        padding:48px 16px; 
      }
      dt{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        column-gap:32px;
        border-bottom:1px solid #FE5A4D;
        font-weight:bold;
        @media (width > 768px){
          border-bottom:none;
          border-right:1px solid #FE5A4D;
        }
        .supportNum{
          font-size:0.75em;
          display:flex;
          flex-direction:column;
          align-items:center;
          justify-content:center;
          line-height:1;
          font-family:"Prompt",sans-serif;
          font-weight:500;
          color:#FE5A4D;
          &::after{
            content:counter(supportNumber,decimal-leading-zero);
            counter-increment:supportNumber;
            font-size:2.67em;
          }
        }
      }
      dd{
        display:flex;
        align-items:center;
        @media (width > 768px){
          padding-left:48px;
        }
      }
    }
  }
  .lastArea{
    background: linear-gradient(360deg, #E1EDF5 0%, rgba(225, 237, 245, 0) 50%);
  }
  .lastArea2{
    background-color:#E1EDF5;
    padding:0 16px 128px;
    h2{
      color:#0F75B7;
      font-weight:bold;
      text-align:center;
      margin-bottom:36px;
      @media (width > 768px){
        margin-bottom:72px;
      }
    }
    .templateSample{
      text-align:center;
      width:320px;
      margin:auto;
      line-height:3;
      font-size:clamp(1.8rem, 1.32rem + 1.2vw, 2.4rem);
      color:#fff;
      font-weight:bold;
      border-radius:100px;
      background-color:#FE5A4D;
      position:relative;
      transition:0.3s;
      &::after{
        content:'';
        border-top:2px solid #fff;
        border-right:2px solid #fff;
        width:0.5em;
        height:0.5em;
        display:block;
        position:absolute;
        margin:auto;
        top:0;
        bottom:0;
        right:16px;
        transform:rotate(45deg);
      transition:0.3s;
      }
      &:hover{
        &::after{
          right:8px;
        }
      }
      a{
        display:block;
      }
    }
/* --- スライダー全体 --- */
.carousel-section {
  width: 100%;
  margin: 0 auto;
  padding: 40px 16px;
}

.carousel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px; 
  margin-bottom: 24px;

  /* ボタンとのマージン指定（47px） */
  @media (width > 768px) {
    gap: 47px; 
  }
}

/* --- スライドの見える範囲 --- */
.carousel-viewport {
  width: 100%;
  max-width: 1162px; /* 指定のスライド部分の横幅最大値 */
  overflow: hidden;
}

/* --- 動くトラック --- */
.carousel-track {
  display: flex;
  gap: 24px; /* 画像同士の隙間 */
  transition: transform 0.4s ease-in-out;
}

/* --- スライド画像本体 --- */
.slide-item {
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  appearance: none;
  outline: none;

  /* ⭕【追加】1枚表示時など、幅に余裕がある場合に確実に中央に寄せる */
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 100%;
    max-width: 800px; /* 既存の指定 */
    height: auto;
    display: block;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    
    /* ⭕【追加】念のためのセンタリング */
    margin: 0 auto; 
  }
}

/* --- 矢印のデザイン（画像を使用・SP時のサイズ縮小） --- */
.arrow {
  flex-shrink: 0;
  
  /* ⭕【修正】スマホ時のボタンサイズを小さく（例：48px → 36px） */
  width: 36px;
  height: 36px;

  /* ▼ もし用意した画像に「青い丸」も含まれている場合は transparent に変更してください */
  background-color: #0F75B7;
  border-radius: 50%;
  
  border: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  
  /* ⭕【追加】画像がはみ出さないように調整（必要に応じて数値をいじってください） */
  background-size: 50%; 
  transition: opacity 0.3s;

  &:hover { opacity: 0.8; }

  @media (width > 768px) {
    /* PC時のサイズ */
    width: 64px;
    height: 64px;
  }

  /* ⭕【修正】SVGを削除し、用意した画像のパスを指定 */
  &.prev-arrow {
    background-image: url("../web_analytics/img/analytics_img20260424_1.png"); /* 👈 左矢印画像のパス */
  }
  &.next-arrow {
    background-image: url("../web_analytics/img/analytics_img20260424_2.png"); /* 👈 右矢印画像のパス */
  }
}

/* --- ドット・モーダル部分 --- */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  .dot {
    width: 12px; height: 12px; border-radius: 50%;
    background-color: #fff; border: none; cursor: pointer;
    transition: 0.3s;
    &.active { background-color: #0F75B7; }
  }
}
/* =========================================
   モーダル（拡大画像）の完璧なスタイル
   ========================================= */
.image-modal {
  border: none; 
  border-radius: 8px; 
  padding: 0;
  background: transparent; 
  max-width: 95vw; 
  max-height: 95vh;
  
  &::backdrop { 
    background: rgba(0, 0, 0, 0.85); /* 背景を少し濃く */
  }

  .modal-inner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    img { 
      max-width: 100%; 
      max-height: 90vh; 
      display: block; 
      border-radius: 8px;
    }

    /* ⭕ 絶対に見失わない・はみ出さない「×」ボタン */
    .close-button {
      position: absolute;
      /* 画像の内側（右上）に配置してはみ出しを防止 */
      top: 16px; 
      right: 16px;
      width: 48px;
      height: 48px;
      background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
      border: 2px solid #fff; /* 白いフチ */
      border-radius: 50%;
      color: #fff;
      font-size: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.3s;
      z-index: 10;
      line-height: 1;
      padding-bottom: 4px; /* ×の縦位置をド真ん中に微調整 */

      &:hover {
        background-color: rgba(255, 50, 50, 0.9); /* ホバーで赤くする */
      }
    }
  }
}
  }
}

/*SNS*/
#SNS{
  .fvArea{
    @media (width > 768px){
      background-image:url('../web_sns/img/image1.jpg');
    }
    .catchCopy{
      width:29.17%;
      height:auto;
      top:55%;
      bottom:45%;
      transform:translate(0,-50%);
      left:13.38%;
    }
  }
  .firstArea{
    background-color:#E3F2EA;
    background-image:url('../web_sns/img/sns_bg_img001.png');
    background-repeat:no-repeat;
    background-size:25.36%;
    background-position:right top;
    h2{
      text-align:center;
      font-weight:bold;
      margin-bottom:40px;
      span{
        color:#0F75B7;
      }
    }
    .snsGridFirst{
      counter-reset:snsNum;
      display:grid;
      grid-template-columns:1fr;
      gap:2.29%;
      @media (width > 768px){
        grid-template-columns:1fr 1fr;
      }
      @media (width > 1440px){
        grid-template-columns:1fr 1fr 1fr 1fr;
      }
      .snsGrid{
        text-align:center;
        background-color:#fff;
        border-radius:24px;
        box-shadow: 0px 0px 8px 0px #2BC0A733;
        grid-row:span 3;
        display:grid;
        grid-template-rows:subgrid;
        row-gap:16px;
        padding:32px 16px;
        position:relative;
        &::after{
          content:counter(snsNum,decimal-leading-zero);
          counter-increment:snsNum;
          color:#00000008;
          font-size:clamp(4.8rem, 1.371rem + 9.14vw, 9.6rem);
          font-weight:500;
          line-height:1;
          font-family:"Prompt",sans-serif;
          position:absolute;
          bottom:-5px;
          right:3px;
        }
        @media (width > 768px){
          padding:32px;
        }
        h3{
          white-space:nowrap;
          color:#2BC0A7;
          font-weight:bold;
          &::before{
            content:'【';
          }
          &::after{
            content:'】';
          }
        }
        p{
          text-align:left;
        }
        img{
          margin:auto;
        }
      }
    }
  }
  .secondArea{
    background-color:#2BC0A7;
    background-image:url('../web_sns/img/pat_dot.png');
    .snsWhiteArea{
      background-color:#fff;
      border-radius:32px;
      padding:56px 16px 36px;
      &:first-of-type{
        margin-bottom:48px;
        position:relative;
        &::before{
          content:'';
          width: 134px;
          height: 80px;
          background-color: #0F75B7;
          clip-path: polygon(0 0, 100% 0, 50% 100%);
          position:absolute;
          margin:auto;
          left:0;
          right:0;
          bottom:0;
          transform:translate(0,80%);
        }
      }
      .snsWhiteAreaInner{
        background-color:#fff;
        border-bottom-left-radius:32px;
        border-bottom-right-radius:32px;
        display:grid;
        grid-template-columns:1fr;
        margin-top:72px;
        padding-top:56px;
        position:relative;
        &::before{
          content:'';
          width:calc(100% - 128px);
          padding:0 64px;
          margin:auto;
          left:0;
          right:0;
          top:0;
          border-bottom:3px dotted #2bc0a7;
          position:absolute;
        }
        @media (width > 768px){
          grid-template-columns:1fr 1.83fr;
        }
        img{
          width:calc(100% - 40px);
          max-width:378px;
          display:block;
          margin:20px auto;
          @media (width > 768px){
            margin-left:auto;
            margin-right:0;
          }
        }
        .dataText{
          padding:20px 16px;
          @media (width > 768px){
            padding:40px;
          }
          h2{
            font-weight:bold;
            margin-bottom:32px;
            text-align:center;
            @media (width > 768px){
              text-align:left;
            }
            span:not([class]){
              color:#0F75B7;
              background-image:linear-gradient(transparent 80%,#FEED99 80%);
            }
          }
          .dataDetail{
            color:#fff;
            font-weight:bold;
            text-align:center;
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            align-items:center;
            justify-content:space-around;
            @media (width > 768px){
              justify-content:space-between;
            }
            li{
              padding:8px 16px;
              width:80%;
              background-color:#0F75B7;
              border-radius:16px;
              margin:0 auto 24px;
              @media (width > 768px){
                width:fit-content;
              }
            }
          }
        }
      }
      &>h2{
        font-weight:bold;
        margin-bottom:32px;
        .headGreen{
          color:#2BC0A7;
        }
        .headBlue{
          color:#0F75B7;
        }
      }
      .snsWhiteInner{
        width:100%;
        max-width:1100px;
        margin:auto;
        position:relative;
        overflow:hidden;
        &::before{
          content:'';
          background-image:url('../web_sns/img/sns_img005.png');
          background-size:contain;
          background-repeat:no-repeat;
          background-position:center;
          width:75%;
          aspect-ratio:491 / 399;
          position:absolute;
          right:0;
          margin:auto;
          display:block;
          opacity:0.3;
          @media (width > 1000px){
            opacity:1;
            width:44.64%;
            top:0;
          }
        }
        &>h2,p,div{
          position:relative;
          z-index:10;
        }
        &>h2,p{
          width:100%;
          max-width:525px;
        }
        p{
          line-height:1.8;
        }
        .snsFlowArea{
          display:grid;
          grid-template-columns:1fr;
          grid-template-rows:auto auto auto auto auto;
          gap:0;
          position:relative;
          margin-top:32px;
          padding-bottom:20px;
          @media (width > 768px){
            grid-template-columns:1fr 0.08fr 1fr;
            grid-template-rows:auto auto;
            margin-top:56px;
          }
          .cross{
            grid-row:span 2;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            position:relative;
            width:40px;
            height:40px;
            margin:auto;
            @media (width > 768px){
              width:80px;
              height:80px;
            }
            &::before,&::after{
              content:'';
              height:4px;
              width:100%;
              display:block;
              background-color:#2BC0A7;
              position:absolute;
              margin:auto;
              top:0;
              bottom:0;
              left:0;
              right:0;
            }
            &::before{
              transform:rotate(45deg);
            }
            &::after{
              transform:rotate(-45deg);
            }
          }
          .snsOnOff{
            text-align:center;
            padding:24px 16px;
            width:100%;
            max-width:486px;
            display:grid;
            grid-template-columns:1fr;
            grid-template-rows:subgrid;
            border-radius:16px;
            grid-row:span 2;
            row-gap:0;
            margin:auto;
            dt,dd{
              width:100%;
              max-width:335px;
              margin:auto;
            }
            dt{
              padding-bottom:8px;
              border-bottom:1px solid;
              font-weight:bold;
            }
            dd{
              padding-top:8px;
            }
            &:first-of-type{
              background-color:#E3F2EA;
              dt{
                color:#2BC0A7;
                border-color:#2BC0A7;
              }
            }
            &:last-of-type{
              background-color:#D8E9F3;
              dt{
                color:#0F75B7;
                border-color:#0F75B7;
              }
            }
          }
        }
      }
      &:last-of-type{
        &>h2{
          text-align:center;
          font-weight:normal;
          display:flex;
          align-items:center;
          justify-content:center;
          &::before, &::after {
              content: '';
              display: block;
              width: 100px;   /* 図形全体の幅 */
              height: 150px;  /* 図形全体の高さ */
              background-repeat: no-repeat;
              background-position: center;
              background-size: contain;
            }

            /* 左側の線（非平行・長さ違い） */
            &::before {
              /* SVGコードを直接埋め込み（丸み: stroke-linecap='round'） */
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40' stroke='%230F75B7' stroke-width='1' stroke-linecap='round'%3E%3C!-- 外側の短い線 --%3E%3Cline x1='6' y1='16' x2='15' y2='34'/%3E%3C!-- 内側の長い線 --%3E%3Cline x1='16' y1='6' x2='22' y2='34'/%3E%3C/svg%3E");
            }

            /* 右側の線（左側の完全な反転） */
            &::after {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40' stroke='%230F75B7' stroke-width='1' stroke-linecap='round'%3E%3C!-- 外側の短い線 --%3E%3Cline x1='24' y1='16' x2='15' y2='34'/%3E%3C!-- 内側の長い線 --%3E%3Cline x1='14' y1='6' x2='8' y2='34'/%3E%3C/svg%3E");
            }
          span{
            span{
              font-weight:bold;
              .headGreen{
                font-size:1.25em;
              }
            }
          }
        }
        img{
          margin:auto;
          display:block;
        }
      }
    }
  }
  .thirdArea{
    background-color:#E3F2EA;
    .snsWhiteAreaInner{
      background-color:#fff;
      border-radius:32px;
      display:grid;
      grid-template-columns:1fr;
      @media (width > 768px){
        grid-template-columns:1fr 1.83fr;
      }
      img{
        width:calc(100% - 40px);
        max-width:378px;
        display:block;
        margin:20px auto;
        @media (width > 768px){
          margin-left:auto;
          margin-right:0;
        }
      }
      .dataText{
        padding:20px 16px;
        @media (width > 768px){
          padding:40px;
        }
        h2{
          font-weight:bold;
          margin-bottom:32px;
          text-align:center;
          @media (width > 768px){
            text-align:left;
          }
          span:not([class]){
            color:#0F75B7;
            background-image:linear-gradient(transparent 80%,#FEED99 80%);
          }
        }
        .dataDetail{
          color:#fff;
          font-weight:bold;
          text-align:center;
          display:flex;
          flex-direction:row;
          flex-wrap:wrap;
          align-items:center;
          justify-content:space-around;
          @media (width > 768px){
            justify-content:space-between;
          }
          li{
            padding:8px 16px;
            width:80%;
            background-color:#0F75B7;
            border-radius:16px;
            margin:0 auto 24px;
            @media (width > 768px){
              width:fit-content;
            }
          }
        }
      }
    }
  }
  .fourthArea{
    position:relative;
    overflow:hidden;
    &::before{
      content:'';
      background-image:url('../web_sns/img/sns_bg_img002.png');
      background-size:cover;
      background-position:right bottom;
      background-repeat:no-repeat;
      width:17.29%;
      aspect-ratio:1 / 1;
      display:block;
      margin:auto;
      position:absolute;
      left:0;
      top:0;
    }
    .snsMeasure{
      position:relative;
      .measureDetail{
        width:100%;
        max-width:535px;
        margin:auto;
        position:relative;
        z-index:10;
        @media (width > 768px){
          margin-left:0;
        }
        h2{
          font-weight:bold;
          margin-bottom:40px;
          text-align:center;
          @media (width > 768px){
            text-align:left;
          }
          .inline{
            background-image:linear-gradient(transparent 60%,#FEED99 60%);
          }
          span:not([class]){
            color:#0F75B7;
          }
        }
      }
      .measureImage{
        width:100%;
        @media (width > 768px){
          max-width:58%;
          position:absolute;
          top:-64px;
          right:0;
        }
      }
    }
    .measureGrid{
      width:100%;
      display:flex;
      flex-wrap:wrap;
      align-items:stretch;
      justify-content:center;
      gap: 48px 1.71%;
      counter-reset:measureMerit;
      @media (width > 768px){
        margin-top:146px;
      }
      .measureMerit{
        width:100%;
        max-width:448px;
        background-color:#fff;
        border-radius:24px;
        padding:48px 16px 32px;
        box-shadow: 0px 0px 8px 0px #2BC0A733;
        position:relative;
        @media (width > 768px){
          width:45%;
        }
        .merit{
          font-family:"Prompt",sans-serif;
          width:8.84em;
          text-align:center;
          padding:8px 16px;
          border-radius:100px;
          background-color:#2BC0A7;
          color:#fff;
          position:absolute;
          margin:auto;
          top:0;
          right:0;
          left:0;
          transform:translate(0,-50%);
          &::after{
            content:counter(measureMerit);
            counter-increment:measureMerit;
          }
        }
        img{
          display:block;
          width:auto;
          max-height:240px;
          margin:auto;
        }
        h3{
          color:#0F75B7;
          font-weight:bold;
          margin:24px auto;
          @media (width > 768px){
            text-align:center;
          }
        }
        p{
          line-height:1.8;
          @media (width > 768px){
            max-width:384px;
            margin:auto;
          }
          span{
            font-weight:bold;
          }
        }
      }
    }
  }
  .fifthArea{
    background-color:#D8E9F3;
    background-image:url('../web_sns/img/sns_bg_img003.png'),url('../web_sns/img/sns_bg_img004.png');
    background-repeat:no-repeat;
    background-size:19.69%,17.97%;
    background-position:right 10%,left 80%;
    counter-reset:successNum;
    h2{
      color:#0F75B7;
      font-weight:bold;
      text-align:center;
      margin-bottom:56px;
    }
    h3{
      width:100%;
      margin:auto;
      background-color:#2BC0A7;
      color:#fff;
      font-weight:bold;
      text-align:center;
      padding:8px 16px;
      position:relative;
      border-radius:100px;
      margin-bottom:24px;
      &::before{
        content:'CASE'counter(successNum,decimal-leading-zero);
        counter-increment:successNum;
        font-family:"Prompt",sans-serif;
        font-size:1.5em;
        color:#FFFFFF29;
        position:absolute;
        margin:auto;
        top:0;
        bottom:0;
        left:16px;
        font-weight:500;
      }
    }
    .snsSuccessDetail{
      display:flex;
      flex-direction:column;
      flex-wrap:nowrap;
      align-items:stretch;
      justify-content:center;
      gap:80px;
      position:relative;
      margin-bottom:56px;
      @media (width > 1240px){
        flex-direction:row;
      }
      div{
        position:relative;
          &::after{
            content:'';
            width: 96px;
            height: 34px;
            background-color: #2BC0A7;
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            position:absolute;
            margin:auto;
            top:auto;
            bottom:0;
            right:0;
            left:0;
            transform:translate(0,190%);
            @media (width > 1240px){
              width: 34px;
              height: 96px;
              clip-path: polygon(0 0, 0 100%, 100% 50%);
              top:0;
              left:auto;
              right:0;
              transform:translate(190%,0);
            }
          }
        dl:not([class]){
          width:100%;
          max-width:587px;
          background-color:#fff;
          border-radius:16px;
          position:relative;
          z-index:10;
          margin:auto;
          @media (width > 1240px){
            margin:0;
          }
          dt,dd{
            padding:16px;
          }
          dt{
            color:#2BC0A7;
            font-weight:bold;
            background-color:#fff;
            border-top-left-radius:16px;
            border-top-right-radius:16px;
            border-bottom:1px solid #2BC0A7;
            font-size:clamp(1.6rem, 1.029rem + 1.52vw, 2.4rem);
            display:flex;
            align-items:center;
            justify-content:flex-start;
            gap:8px;
          }
          dd{
            font-size:clamp(1.6rem, 1.457rem + 0.38vw, 1.8rem);
            background-color:#fff;
            border-bottom-left-radius:16px;
            border-bottom-right-radius:16px;
            line-height:1.8;
            span{
              font-weight:bold;
            }
            ul{
              padding-left:1em;
              li{
                list-style:disc;
                &::marker{
                  content:'・';
                }
              }
            }
          }
        }
        dl:first-of-type{
          margin-bottom:24px;
          dt::before{
            content:'';
            width:1em;
            aspect-ratio:1 /1;
            background-image:url('../web_sns/img/sns_icon01.png');
            background-repeat:no-repeat;
            background-size:contain;
            background-position:center;
            display:block;
          }
        }
        dl:nth-of-type(2){
          dt::before{
            content:'';
            width:1em;
            aspect-ratio:1 /1;
            background-image:url('../web_sns/img/sns_icon02.png');
            background-repeat:no-repeat;
            background-size:contain;
            background-position:center;
            display:block;
          }
        }
      }
      .successResult{
        width:100%;
        max-width:587px;
        background-color:#FEED99;
        border-radius:16px;
        position:relative;
        z-index:10;
        margin:auto;
        @media (width > 1240px){
          max-width:529px;
          margin:0;
        }
        dt{
          color:#0F75B7;
          font-weight:bold;
          background-color:#FEED99;
          border-top-left-radius:16px;
          border-top-right-radius:16px;
          border-bottom:1px solid #0F75B7;
          display:flex;
          align-items:center;
          justify-content:flex-start;
          gap:8px;
          padding:16px 32px;
          &::before{
            content:'';
            width:0.8125em;
            margin-top:0.19em;
            aspect-ratio:1 /1;
            background-image:url('../web_sns/img/sns_icon03.png')!important;
            background-repeat:no-repeat;
            background-size:contain;
            background-position:center;
            display:block;
          }
        }
        dd{
          padding:32px;
          background-color:#FEED99;
          border-bottom-left-radius:16px;
          border-bottom-right-radius:16px;
          line-height:1.8;
          background-image:url('../web_sns/img/allow01.png');
          background-repeat:no-repeat;
          background-size:contain;
          background-position:bottom center;
          ul{
            padding-left:1em;
            li{
              list-style:disc;
              &::marker{
                content:'・';
              }
            }
          }
        }
        @media (width <= 768px){
          dt,dd{
            padding:16px;
          }
        }
      }
    }
    p:not([class]){
      font-size:clamp(1.6rem, 1.457rem + 0.38vw, 1.8rem);
    }
  }
  .sixthArea{
    background-color:#0F75B7;
    background-image:url('../web_sns/img/pat_dot.png');
    .innerWhiteArea{
      background-color:#fff;
      border-radius:24px;
      display:grid;
      grid-template-columns:1fr;
      padding:16px;
      @media (width > 1240px){
        padding:5.33%;
        grid-template-columns:1fr 1.656fr;
        align-items:center;
        justify-content:space-between;
        grid-template-areas:
        "a b"
        "a c"
        "d d";
        img{
          grid-area:a;
          grid-row:span 2;
          margin-left:0;
          width:100%;
          max-width:378px;
        }
        h2,p{
          margin-right:0;
          margin-left:auto;
          margin-bottom:0!important;
          margin-top:0!important;
          width:100%;
          max-width:626px;
        }
        h2{
          grid-area:b;
        }
        p{
          grid-area:c;
        }
        .snsSupport{
          grid-area:d;
        }
      }
      h2{
        font-weight:bold;
        margin-bottom:32px;
        span{
          color:#0F75B7;
        }
      }
      p{
        margin-top:32px;
        margin-bottom:32px;
        border-radius:24px;
        background-color:#feed99;
        padding:24px;
      }
      .snsSupport{
        h3{
          position:relative;
          color:#fff;
          font-weight:bold;
          text-align:center;
          width:100%;
          margin-bottom:32px;
          margin-top:24px;
          span{
            width:fit-content;
            padding:8px 24px;
            border-radius:100px;
            background-color:#0F75B7;
            position:relative;
            z-index:10;
          }
          &::before{
            content:'';
            height:4px;
            width:100%;
            max-width:996px;
            display:block;
            background-color:#0F75B7;
            position:absolute;
            margin:auto;
            left:0;
            right:0;
            bottom:0;
            top:0;
          }
        }
        .snsFlex{
          display:flex;
          flex-direction:row;
          flex-wrap:wrap;
          align-items:stretch;
          justify-content:center;
          gap:24px;
          span{
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:space-between;
            width:45%;
            max-width:180px;
            aspect-ratio:180 / 175;
            border:2px solid #0F75B7;
            border-radius:8px;
            color:#0F75B7;
            font-weight:bold;
            text-align:center;
            padding:32px 0;
            img{
              height:60px;
              width:auto;
              margin-bottom:8px;
            }
          }
        }
      }
    }
  }
}

/*DISPLAY*/
#DISPLAY{
  .fvArea{
    @media (width > 768px){
      background-image:url('../web_display/img/image1.jpg');
    }
    .catchCopy{
      width:33.75%;
      height:auto;
      top:50%;
      bottom:50%;
      transform:translate(0,-50%);
      left:12.86%;
    }
  }
  .firstArea{
    .firstBackIMG{
      background-image:url('../web_display/img/web_display_bg_img001.jpg');
      background-repeat:no-repeat;
      background-size:cover;
      background-position:bottom;}
    .firstTitle{
      text-align:center;
      font-weight:bold;
      margin-bottom:56px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      span:not([class]){
        font-size:1.2em;
        color:#0F75B7;
      }
      &::before, &::after {
          content: '';
          display: block;
          width: 40px;   /* 図形全体の幅 */
          height: 64px;  /* 図形全体の高さ */
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }

        /* 左側の線（非平行・長さ違い） */
        &::before {
          /* SVGコードを直接埋め込み（丸み: stroke-linecap='round'） */
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40' stroke='%23F78934' stroke-width='2.5' stroke-linecap='round'%3E%3C!-- 外側の短い線 --%3E%3Cline x1='6' y1='16' x2='15' y2='34'/%3E%3C!-- 内側の長い線 --%3E%3Cline x1='16' y1='6' x2='22' y2='34'/%3E%3C/svg%3E");
        }

        /* 右側の線（左側の完全な反転） */
        &::after {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40' stroke='%23F78934' stroke-width='2.5' stroke-linecap='round'%3E%3C!-- 外側の短い線 --%3E%3Cline x1='24' y1='16' x2='15' y2='34'/%3E%3C!-- 内側の長い線 --%3E%3Cline x1='14' y1='6' x2='8' y2='34'/%3E%3C/svg%3E");
        }
    }
    .firstFlex{
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      align-items:stretch;
      justify-content:center;
      gap:40px 28px;
      .assignDetail{
        border-radius:16px;
        width:100%;
        max-width:448px;
        background-color:#fff;
        position:relative;
        padding:16px;
        box-shadow: 0px 0px 10px 0px #0000001A;
        text-align:center;
        font-weight:bold;
        @media (width > 768px){
          padding:32px;
        }
        .circleNum{
          width:2em;
          height:2em;
          display:flex;
          flex-direction:row;
          flex-wrap:nowrap;
          align-items:center;
          justify-content:center;
          color:#fff;
          font-weight:500;
          border-radius:1em;
          background-color:#0F75B7;
          position:absolute;
          margin:0;
          left:5%;
          top:5%;
        }
        img{
          max-width:200px;
        }
        p{
          line-height:1.6;
          margin-top:16px;
        }
      }
    }
    .arrowArea{
      text-align:center;
      font-weight:bold;
      padding:28px 16px;
      color:#fff;
      position:relative;
      background-color:#F78934;
      @media (width > 768px){
        padding:56px 16px;
      }
      &::after {
        content: '';
        display: block;
        width: 100px;
        height: 40px;
        background-color: #F78934;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: -1px; 
      }
    }
    .firstBG{
      background-image:url('../web_display/img/web_display_bg_img002.png'),url('../web_display/img/web_display_bg_img003.png'),url('../web_display/img/web_display_bg_img004.png');
      background-size:27.66%,38.44%,27.66%;
      background-repeat:no-repeat;
      background-position:left 35%,right 70%,left 105%;
    }
    .methodFlex{
      width:100%;
      max-width:1400px;
      margin:auto;
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      align-items:stretch;
      justify-content:center;
      margin:142px auto 100px;
      padding:0 16px;
      gap:2.28%;
      .methodDetail{
        width:100%;
        max-width:666px;
        border-radius:24px;
        padding:16px;
        text-align:center;
        display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:center;
        justify-content:space-between;
        margin-bottom:24px;
        @media (width > 768px){
          padding:64px;
        }
        h3{
          font-weight:bold;
          background-color:#0F75B7;
          border-radius:24px;
          padding:16px;
          line-height:1;
          color:#fff;
          margin-bottom:28px;
          width:100%;
        }
        img{
          max-width:200px;
          margin-bottom:40px;
        }
        .catch{
          font-weight:bold;
          margin-bottom:32px;
        }
        .detail{
          text-align:left;
          line-height:1.8;
          span{
            font-weight:bold;
          }
        }
        &:first-of-type{
          background-color:#E7F2F8;
          .detail{
            span{
              color:#0F75B7;
              }
            }
        }
        &:last-of-type{
          background-color:#FDE7D6;
          .detail{
            span{
              color:#F78934;
            }
          }
        }
        &:last-of-type{
          h3{
            background-color:#F78934;
          }
        }
      }
    }
    .imageArea{
      position:relative;
      padding:100px 16px 128px;
      background-color:#fff;
      width:calc(100% - 32px);
      max-width:1400px;
      border-top-left-radius:24px;
      border-top-right-radius:24px;
      margin:auto;
      h2{
        position:absolute;
        margin:auto;
        top:0;
        left:0;
        right:0;
        transform:translate(0,-50%);
        padding:16px 56px;
        width:fit-content;
        color:#fff;
        font-weight:bold;
        background-color:#064066;
        border-radius:100px;
      }
    }
    .table-scroll{
      .scrollWhiteArea{
        width:100%;
        min-width:768px;
        display:grid;
        grid-template-columns:1fr 1fr 1fr 1fr;
        margin:auto;
        gap:2.26%;
        counter-reset:imageStep;
        padding-bottom:24px;
        @media (width > 768px){
          min-width:1120px;
        }
        @media (width > 1120px){
          max-width:1240px;
        }
        .imageGrid{
          grid-column:span 2;
          width:100%;
          max-width:606px;
          h3{
            grid-column:span 2;
            color:#fff;
            font-weight:bold;
            text-align:center;
            width:100%;
            border-radius:24px;
            padding:16px;
          }
          &:first-of-type{
            h3{
              background-color:#0F75B7;
            }
          }
          &:last-of-type{
            h3{
              background-color:#F78934;
            }
          }
          .imageGridInner{
            display:flex;
            flex-direction:row;
            flex-wrap:nowrap;
            align-items:stretch;
            justify-content:space-between;
            margin-top:32px;
            gap:4.52%;
            .imageStep{
              border-radius:20px;
              box-shadow: 0px 0px 16px 0px #09182A0F;
              padding:32px 0;
              width:50%;
              max-width:289px;
              .stepFlex{
                font-family:"Prompt",sans-serif;
                width:8.1em;
                margin:auto;
                line-height:1;
                font-weight:500;
                display:flex;
                flex-direction:row;
                flex-wrap:nowrap;
                align-items:center;
                justify-content:center;
                padding:8px;
                background-color:#fff;
                border-radius:100px;
                &::after{
                  content:counter(imageStep,decimal-leading-zero);
                  counter-increment:imageStep;
                  font-size:2.67em;
                }
              }
              h4{
                text-align:center;
                font-weight:bold;
                margin:8px;
                width:calc(100% - 16px);
              }
              p{
                line-height:1.8;
                margin:0 16px;
              }
            }
          }
          &:first-of-type{
            .imageStep{
              background-color:#E7F2F8;
              .stepFlex{
                color:#0F75B7;
              }
            }
          }
          &:last-of-type{
            .imageStep{
              background-color:#FDE7D6;
              .stepFlex{
                color:#F78934;
              }
            }
          }
        }
        .imageGridImage{
          display:block;
          grid-column:span 4;
          width:100%;
          height:auto;
          max-width:1240px;
          margin:56px auto 0;
          text-align:center;
        }
      }
    }
  }
  .secondArea{
    background-image:url('../web_display/img/web_display_bg_img007.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    h2{
      font-weight:bold;
      color:#fff;
      margin-bottom:56px;
      text-align:center;
    }
    .gridArea{
      align-items:stretch;
      gap:2%;
      margin-bottom:64px;
      grid-template-columns:1fr;
      @media (width > 1200px){
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto auto auto auto;
        margin-bottom:16px;
        row-gap:32px;
      }
      .successDetail{
        margin:0 auto;
        width:100%;
        max-width:686px;
        border-radius:32px;
        background-color:#fff;
        display:grid;
        grid-row:span 4;
        grid-template-rows:subgrid;
        justify-content:space-between;
        row-gap:0;
        gap:32px;
        padding:28px;
        @media (width > 768px){
          padding:56px;
        }
        h3{
          color:#fff;
          background-color:#0F75B7;
          border-radius:100px;
          text-align:center;
          font-size:clamp(1.6rem, 0.457rem + 3.05vw, 3.2rem);
          width:100%;
          font-weight:bold;
          padding:8px;
        }
        dl{
          width:100%;
          background-color:#D6E6F1;
          border-radius:16px;
          position:relative;
          z-index:10;
          display: flex;
          flex-direction: column;
          dt,dd{
            padding:16px;
          }
          dt{
            color:#0F75B7;
            font-weight:bold;
            background-color:#D6E6F1;
            border-top-left-radius:16px;
            border-top-right-radius:16px;
            border-bottom:1px solid #0F75B7;
            font-size:clamp(1.6rem, 1.029rem + 1.52vw, 2.4rem);
            display:flex;
            align-items:center;
            justify-content:flex-start;
            gap:8px;
          }
          dd{
            font-size:clamp(1.6rem, 1.457rem + 0.38vw, 1.8rem);
            background-color:#D6E6F1;
            border-bottom-left-radius:16px;
            border-bottom-right-radius:16px;
            line-height:1.8;
            flex-grow:1;
          }
        }
        dl:first-of-type{
          &::before{
            content:'';
            width:17.06%;
            max-width:117px;
            height:100%;
            display:block;
            background-color:#0F75B7;
            position:absolute;
            margin:auto;
            z-index:-2;
            left:0;
            right:0;
            bottom:-50px;
          }
          dt::before{
            content:'';
            width:1em;
            aspect-ratio:1 /1;
            background-image:url('../web_listing/img/listing_icon001.png');
            background-repeat:no-repeat;
            background-size:contain;
            background-position:center;
            display:block;
          }
        }
        dl:nth-of-type(2){
          &::before{
            content:'';
            width:17.06%;
            max-width:117px;
            height:100%;
            display:block;
            background-color:#0F75B7;
            position:absolute;
            margin:auto;
            z-index:-2;
            left:0;
            right:0;
            bottom:-9px;
          }
          &::after{
            content:'';
            display: block;
            width: 100%;
            max-width: 192px;
            height: 24px;
            background-color: #0F75B7;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom: -32px;
            z-index: -2;
            clip-path: polygon(0 0, 100% 0, 50% 100%);
          }
          dt::before{
            content:'';
            width:1em;
            aspect-ratio:1 /1;
            background-image:url('../web_listing/img/listing_icon002.png');
            background-repeat:no-repeat;
            background-size:contain;
            background-position:center;
            display:block;
          }
        }
        .successData{
          background-color:#F78934;
          dt,dd{
            color:#fff;
          }
          dt{
            background-color:#F78934;
            border-top-left-radius:16px;
            border-top-right-radius:16px;
            border-bottom-color:#fff;
            &::before{
              content:'';
              width:1em;
              aspect-ratio:1 /1;
              background-image:url('../web_listing/img/listing_icon003.png');
              background-repeat:no-repeat;
              background-size:contain;
              background-position:center;
              display:block;
            }
          }
          dd{
            background-color:#F78934;
            border-bottom-left-radius:16px;
            border-bottom-right-radius:16px;
            font-weight:bold;
            ul{
              list-style:disc inside;
              li{
                list-style-type:disc!important;
                &::marker{
                  content:'・';
                }
              }
            }
          }
        }
      }
    }
    p:not([class]){
      font-size:clamp(1.6rem, 1.457rem + 0.38vw, 1.8rem);
      color:#fff;
    }
  }
  .sixthArea{
    background-image:url('../web_display/img/web_display_bg_img002.png'),url('../web_listing/img/listing_bg_img005.png'),linear-gradient(#F7893400,#F7893480);
    background-repeat:no-repeat;
    background-size:27.55;
    background-position:left 30%;
    h2{
      color:#0F75B7;
      font-size:clamp(2.4rem, 0.686rem + 4.57vw, 4.8rem);
      font-weight:bold;
      text-align:center;
      line-height:1.6;
      margin-bottom:40px;
      span:not([class]){
        color:#F78934;
      }
    }
    .costArea{
      width:100%;
      max-width:1000px;
      margin:auto;
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-around;
      border:1px solid #0F75B7;
      color:#0F75B7;
      background-color:#fff;
      border-radius:24px;
      padding:16px;
      margin-bottom:110px;
      @media (width > 768px){
        padding:0;
      }
      p:not([class]){
        font-size:clamp(1.6rem, 1.029rem + 1.52vw, 2.4rem);
        width:100%;
        max-width:300px;
        margin:auto;
        font-weight:bold;
        text-align:center;
        color:#0F75B7;
      }
      .flexArea{
        width:100%;
        max-width:calc(1000px / 3 * 2);
        margin:auto;
        flex-wrap:wrap;
        align-items:center;
        justify-content:space-between;
      }
      .costText{
        width:100%;
        max-width:300px;
        margin:auto;
        font-family:"Prompt",sans-serif;
        font-size:clamp(5rem, 1.429rem + 9.52vw, 10rem);
        font-weight:500;
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        align-items:baseline;
        justify-content:center;
        .flexArea{
          align-items:center;
          justify-content:center;
        }
        .circleArea{
          margin-right:8px;
          font-family:"Noto Sans JP",sans-serif;
          height:3.5em;
          width:3.5em;
          border-radius:50%;
          color:#fff;
          font-weight:bold;
          font-size:0.24em;
          background-color:#0F75B7;
          text-align:center;
          display:flex;
          align-items:center;
          justify-content:center;
          align-self:center;
        }
        .textSmall{
          font-family:"Noto Sans JP",sans-serif;
          font-size:0.24em;
          vertical-align:bottom;
        }
      }
    }
    .whiteArea{
      width:100%;
      position:relative;
      background-color:#fff;
      padding:67px 16px 40px;
      margin-bottom:16px;
      h2{
        width:100%;
        max-width:676px;
        position:absolute;
        margin:auto;
        left:0;
        right:0;
        top:0;
        transform:translate(0,-50%);
        img{
          width:100%;
        }
      }
      img{
        width:100%;
        max-width:977px;
        margin:auto;
        display:block;
      }
    }
    p:not([class]){
      width:100%;
      max-width:1200px;
      margin:auto;
      font-size:clamp(1.6rem, 1.457rem + 0.38vw, 1.8rem);
    }
  }
}

/*LP*/
#LP{
  .fvArea{
    @media (width > 768px){
      background-image:url('../web_lp/img/image1.jpg');
    }
    .catchCopy{
      width:29.79%;
      height:auto;
      top:50%;
      bottom:50%;
      transform:translate(0,-40%);
      left:13.90%;
    }
    .fv-scroll{
      bottom:265px;
      @media (width > 768px){
        bottom:10px;
      }
    }
  }
  .firstArea{
    padding:104px 16px 64px;
    background-color:#3D9E9E;
    background-image:url('../web_lp/img/lp_bg_img001.png');
    background-repeat:no-repeat;
    background-position:left top;
    .width1400{
      background-color:#fff;
      border-radius:32px;
      position:relative;
      padding:30px 16px 33px;
      background-image:url('../web_lp/img/lp_img001.png');
      background-repeat:no-repeat;
      background-size:20%;
      background-position:bottom right;
      @media (width > 768px){
        padding:60px 64px 66px;
        background-size:18.43%;
        background-position:95.43% center;
      }
      h2{
        width:fit-content;
        background-color:#F4F47F;
        border-radius:100px;
        padding:8px 40px;
        text-align:center;
        font-weight:bold;
        line-height:1.6;
        position:absolute;
        margin:auto;
        left:0;
        right:0;
        top:0;
        transform:translate(0,-50%);
        span{
          color:#3D9E9E;
        }
        &::after {
          content: '';
          display: block;
          width: 40px;
          height: 20px;
          background-color: #F4F47F;
          clip-path: polygon(0 0, 100% 0, 50% 100%);
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          margin-top: -1px; 
        }
      }
      ul{
        li{
          display:flex;
          flex-direction:row;
          flex-wrap:nowrap;
          align-items:start;
          justify-content:flex-start;
          line-height:1.8;
          border-bottom: 1px dashed #C6C6C6;
          width:fit-content;
          padding:8px 0;
          &::before{
            content:'';
            background-image:url('../web_lp/img/check.png');
            background-size:contain;
            background-repeat:no-repeat;
            background-position:center;
            width:24px;
            height:1.8em;
            display:block;
          }
          span{
            margin-left:8px;
            width:calc(100% - 24px);
          }
        }
      }
    }
  }
  .lpComment{
    background-color:#F78934;
    padding:40px 16px;
    position:relative;
    &::after {
      content: '';
      display: block;
      width: 107px;
      height: 40px;
      background-color: #F78934;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      margin-top: -1px; 
    }
    h3{
      width:fit-content;
      margin:auto;
      padding:8px 24px;
      color:#3D9E9E;
      font-weight:bold;
      background-color:#fff;
      margin-bottom:16px;
      border-radius:56px;
    }
    p{
      text-align:center;
      color:#fff;
      font-weight:bold;
    }
  }
  .commentDetail{
    width:100%;
    padding:64px 16px;
    @media (width > 768px){
      padding:64px 16px 148px;
    }
    .detailArea{
      counter-reset:lpDetailNum;
      @media (width > 768px){
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:32px 24px;
      }
      .detailText{
        width:100%;
        max-width:686px;
        border-radius:32px;
        background-color:#fff;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
        position:relative;
        gap:24px;
        box-shadow: 0px 0px 10px 0px #0098DB33;
        padding:16px;
        margin-bottom:32px;
        &::after{
          content:counter(lpDetailNum,decimal-leading-zero);
          counter-increment:lpDetailNum;
          color:#00000008;
          font-size:clamp(4.8rem, 1.371rem + 9.14vw, 9.6rem);
          font-weight:500;
          line-height:1;
          font-family:"Prompt",sans-serif;
          position:absolute;
          bottom:-5px;
          right:3px;
        }
        @media(width > 768px){
          margin-bottom:0;
          padding:32px 40px;
        }
        img{
          width:100%;
          max-width:256px;
          @media (width > 768px){
            width:37.32%;
          }
        }
        p{
          width:100%;
          max-width:326px;
          color:#3D9E9E;
          font-weight:bold;
        }
      }
    }
  }
  .secondArea{
    padding:0 16px 64px;
    background-color:#E3EDED;
    background-image:url('../web_lp/img/lp_bg_img002.png');
    background-repeat:no-repeat;
    background-position:bottom;
    position:relative;
    &::before, &::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      transform:translate(0,-100%);
      background-color: #E3EDED;
      z-index: 1;
      width: calc((818.5 / 1920) * 100%);
      aspect-ratio: 818.5 / 193;
    }
    &::before {
      left: 0;
      clip-path: polygon(0 0, 0 100%, 100% 100%);
    }
    &::after {
      right: 0;
      clip-path: polygon(0 100%, 100% 100%, 100% 0); 
    }
    .width1400{
      background-color:#fff;
      position:relative;
      border-radius:40px;
      padding:85px 16px 64px;
      .weCall{
        width:fit-content;
        font-weight:bold;
        color:#fff;
        background-color:#3D9E9E;
        border-radius:100px;
        text-align:center;
        padding:16px 70px;
        position:absolute;
        margin:auto;
        top:0;
        left:0;
        right:0;
        transform:translate(0,-50%);
        z-index:10;
      }
      img{
        margin:auto;
        width:100%;
        max-width:802px;
        display:block;
      }
      h2{
        font-weight:bold;
        width:fit-content;
        margin:16px auto 40px;
        text-align:center;
        border-bottom:4px solid #6ECAEB;
        span:not([class]){
          color:#3D9E9E;
        }
      }
    }
    .lpFeature{
      width:100%;
      max-width:1218px;
      margin:auto auto 72px;
      background-color:#E3EDED;
      border-radius:32px;
      text-align:center;
      font-weight:bold;
      padding:16px;
      @media (width > 768px){
        padding:32px 16px;
      }
      .featurePick{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
        gap:21px;
        span{
          display:block;
          width:50%;
          border-radius:64px;
          padding:0 16px;
          color:#3D9E9E;
          background-color:#F4F47F;
          @media (width > 768px){
            width:fit-content;
            padding:0 24px;
          }
        }
      }
      p{
        margin-bottom:16px;
        &:last-of-type{
          margin-bottom:0;
        }
        .yellowLine{
          color:#3D9E9E;
          background-image:linear-gradient(transparent 80%,#F4F47F 80%);
        }
      }
    }
    .featureDetail{
      width:100%;
      max-width:1218px;
      margin:auto;
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      align-items:stretch;
      justify-content:center;
      gap:64px 32px;
      .detail{
        width:100%;
        max-width:591.6px;
        position:relative;
        border-radius:32px;
        border:2px solid #f78934;
        padding:56px 16px;
        @media (width > 768px){
          padding:56px 40px 32px;
        }
        h3{
          width:fit-content;
          text-align:center;
          white-space:nowrap;
          color:#fff;
          font-weight:bold;
          border-radius:100px;
          background-color:#F78934;
          padding:16px 0.75em;
          position:absolute;
          margin:auto;
          left:0;
          right:0;
          top:0;
          transform:translate(0,-50%);
          @media (width > 768px){
            padding:16px 72px;
          }
        }
      }
    }
  }
  .thirdArea{
    padding:56px 16px;
    background-image:url('../web_lp/img/lp_bg_img003.png');
    background-position:center;
    background-repeat:no-repeat;
    .processTitle{
      font-weight:bold;
      margin:auto;
      text-align:center;
      margin-bottom:90px;
      span{
        color:#3D9E9E;
      }
      &::before{
        content:'\\';
      }
      &::after{
        content:'/';
      }
    }
    .width1400{
      counter-reset:processStep;
      display:flex;
      flex-direction:column;
      flex-wrap:wrap;
      align-items:center;
      justify-content:center;
      @media (width > 1280px){
        flex-direction:row;
        align-items:stretch;
        gap:3.71%;
      }
      .processDetail{
        width:100%;
        max-width:432px;
        border-radius:24px;
        background-color:#fff;
        padding:64px 16px;
        margin:0 0 72px;
        position:relative;
        @media (width > 1280px){
          width:30.86%;
          padding:64px 32px;&:first-of-type,
          &:nth-of-type(2),&:nth-of-type(4) {
            &::after {
              content: '';
              display: block;
              width: 24px;
              height: 48px;
              background-color: #3D9E9E;
              clip-path: polygon(0 0, 0 100%, 100% 50%); 
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: -38px; 
            }
          }
        }
        .stepCircle{
          width:100px;
          height:100px;
          border-radius:50%;
          background-color:#3D9E9E;
          color:#fff;
          font-family:"Prompt",sans-serif;
          font-weight:500;
          display:flex;
          flex-direction:column;
          align-items:center;
          justify-content:center;
          position:absolute;
          margin:auto;
          left:0;
          right:0;
          top:0;
          transform:translate(0,-50%);
          line-height:1;
          &::after{
            content:counter(processStep,decimal-leading-zero);
            counter-increment:processStep;
            font-size:2em;
          }
        }
        h3{
          color:#fff;
          font-weight:bold;
          border-radius:8px;
          background-color:#f78934;
          text-align:center;
          height:3em;
          display:flex;
          flex-direction:column;
          align-items:center;
          justify-content:center;
          margin-bottom:32px;
        }
        p{
          line-height:1.6;
        }
      }
    }
    .nextProcess{
      h3{
        background-color:#F75B34!important;
        position:relative;
        &::after{
          content:'';
          background-image:url('../web_lp/img/lp_img007.png');
          background-size:contain;
          background-position:center;
          background-repeat:no-repeat;
          width:64px;
          height:64px;
          display:block;
          position:absolute;
          margin:0;
          right:0;
          left:auto;
          top:0;
          transform:translate(0,-80%);
          z-index:10;
        }
      }
    }
    .nextHead{
      position:relative;
      width:100%;
      text-align:center;
      z-index:2;
      margin:auto auto 48px;
      span{
        padding:16px 32px;
        border-radius:200px;
        background-color:#3D9E9E;
        color:#fff;
      }
      &::before{
        content:'';
        width:100%;
        height:4px;
        display:block;
        background-color:#3D9E9E;
        position:absolute;
        margin:auto;
        top:0;
        bottom:0;
        left:0;
        right:0;
        z-index:-1;
      }
    }
    .table-scroll{
      margin:32px auto 24px;
      .comparisonTable{
        min-width:1280px;
        border-collapse:separate;
        border-spacing:0;
        border-radius:24px;
        overflow:hidden;
        thead{
          background-color:#fff;
          th:nth-of-type(2){
            background-color:#3D9E9E;
            padding:24px 0 8px;
            span{
              background-color:#fff;
              border-radius:100px;
              color:#3D9E9E;
              padding:8px 24px;
              display:block;
              margin:auto;
              width:fit-content;
            }
          }
          th:not(:nth-of-type(2)){
            font-size:clamp(1.6rem, 1.314rem + 0.76vw, 2rem);
            span{
              background-color:#BDECFF;
              border-radius:100px;
              padding:8px 24px;
              display:block;
              margin:auto;
              width:fit-content;
            }
          }
        }
        tbody{
          tr{
            &:not(:last-of-type){
              th,td{
                border-bottom:1px solid #C0D6E4;
              }
            }
            th,td{
              vertical-align:middle;
            }
            th{
              color:#064066;
              padding:16px 40px;
              width:15em;
            }
            td{
              text-align:center;
              padding:16px 40px;
            }
            td:first-of-type{
              background-color:#3D9E9E;
            }
            &:nth-of-type(2n){
              background-color:#F1FBFF;
            }
            &:nth-of-type(2n+1){
              background-color:#fff;
            }
          }
        }
      }
    }
  }
  .fifthArea{
    background-color:#3D9E9E;
    background-image:url('../web_lp/img/lp_bg_img004.png');
    background-repeat:no-repeat;
    background-position:bottom;
    padding:64px 16px;
    h2{
      margin-bottom:32px;
      text-align:center;
      color:#fff;
      font-weight:bold;
    }
    .introArea{
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      align-items:stretch;
      justify-content:center;
      gap:28px;
      @media (width > 768px){
        justify-content:space-between;
      }
      .introDetail{
        width:100%;
        max-width:686px;
        border-radius:24px;
        padding:48px 16px;
        margin:0 auto;
        background-color:#fff;
        @media (width > 768px){
          padding:48px;
        }
        h3{
          font-family:"Prompt",sans-serif;
          font-weight:500;
          margin-bottom:32px;
          color:#fff;
          background-color:#3D9E9E;
          border-radius:32px;
          padding:8px 16px;
          width:100%;
          text-align:center;
        }
        dl:not([class]){
          margin-bottom:24px;
          dt{
            color:#3D9E9E;
            border-bottom:1px solid #3D9E9E;
            padding:8px 0;
            font-weight:bold;
          }
          dd{
            padding:8px 0;
          }
        }
        .resultDl{
          border-radius:16px;
          background-color:#f78934;
          color:#fff;
          font-weight:bold;
          padding:24px 16px;
          @media (width > 768px){
            padding:24px;
          }
          dt{
            display:flex;
            flex-direction:row;
            flex-wrap:nowrap;
            align-items:center;
            justify-content:flex-start;
            padding-bottom:16px;
            border-bottom:1px solid #fff;
            &::before{
              content:'';
              width:32px;
              height:32px;
              background-image:url('../web_lp/img/lp_img008.png');
              background-size:contain;
              background-position:center;
              background-repeat:no-repeat;
              margin-right:16px;
            }
          }
          dd{
            padding-top:16px;
            ul{
              li{
                &::before{
                  content:'・';
                }
              }
            }
          }
        }
      }
    }
  }
  .sixthArea{
    padding:64px 16px;
    .planArea{
      width:100%;
      max-width:1528px;
      background-color:#E3EDED;
      padding:40px 16px 64px;
      margin:auto;
      border-radius:32px;
      h2{
        color:#3D9E9E;
        font-weight:bold;
        margin-bottom:32px;
        text-align:center;
      }
      .planWhiteArea{
        background-color:#fff;
        padding:0 16px 40px;
        border-radius:24px;
        @media (width > 768px){
          display:grid;
          grid-template-columns:1fr 1fr;
          align-items:stretch;
          justify-content:center;
        }
        h3{
          grid-column:span 2;
          width:68.21%;
          border-bottom-left-radius:24px;
          border-bottom-right-radius:24px;
          background-color:#3D9E9E;
          color:#fff;
          font-weight:bold;
          text-align:center;
          margin:auto;
          padding:16px;
          margin-bottom:24px;
        }
        .planWhiteLeft{
          width:100%;
          @media (width > 768px){
            padding-right:56px;
            padding-left:40px;
            border-right:2px solid #C6C6C6;
          }
          h4{
            color:#3D9E9E;
            font-weight:bold;
          }
          .planPrice{
            text-align:center;
            color:#F38429;
            @media (width > 768px){
              text-align:right;
            }
            .priceTitle{
              font-weight:800;
            }
            .priceNum{
              font-weight:500;
              font-family:"Prompt",sans-serif;
            }
            .Yen{
              color:#444;
              font-weight:800;
            }
          }
          dl{
            display:flex;
            flex-direction:column;
            border-radius:7px;
            background-color:#3D9E9E4D;
            line-height:1.8;
            padding:8px 16px;
            margin-bottom:8px;
            &:last-of-type{
              margin-bottom:16px;
            }
            dt{
              width:100%;
              font-weight:bold;
              color:#3D9E9E;
            }
            dd{
              width:100%;
            }
            @media (width > 768px){
              flex-direction:row;
              align-items:center;
              justify-content:center;
            }
          }
        }
        .planWhiteRight{
          width:100%;
          @media (width > 768px){
            margin-top:24px;
            padding-left:56px;
            padding-right:40px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
          }
          .planQA{
            border:1px solid #3D9E9E;
            position:relative;
            max-width:calc(100% - 17px);
            padding:24px;
            margin-top:64px;
            margin-bottom:32px;
            margin-right:0;
            margin-left:auto;
            @media (width > 768px){
              margin-top:0;
              margin-bottom:0;
            }
            .planQ{
              width:133px;
              text-align:center;
              color:#fff;
              font-weight:bold;
              line-height:1.8;
              padding:0 24px;
              background-color:#3D9E9E;
              position:absolute;
              left:-17px;
              top:0;
              margin:auto;
              transform:translate(0,-50%);
            }
          }
          .planMerit{
            width:100%;
            line-height:1.8;
            counter-reset:meritNum;
            margin-top:24px;
            height:100%;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            dt{
              font-weight:bold;
              color:#3D9E9E;
              border-bottom:1px solid #3D9E9E;
              &::before{
                content:counter(meritNum,decimal-leading-zero)'.';
                counter-increment:meritNum;
              }
              dd{
                margin-bottom:16px;
              }
            }
          }
        }
      }
    }
  }
}
/*HP*/
#HP{
  .catchCopy{
    width:34.27%;
    height:auto;
    top:50%;
    bottom:50%;
    transform:translate(0,-50%);
    left:10.73%;
  }
  h2:not(.section-ttl){
    font-weight:bold;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    margin-bottom:40px;
    &::after{
      content:'';
      width:60px;
      height:4px;
      display:block;
      background-color:#3D9E9E;
    }
  }
  .fvArea{
    @media (width > 768px){
      aspect-ratio:192 / 85;
      background-image:url('../web_cre/img/image1.jpg');
    }
  }
  .firstArea{
    width:100%;
    padding:32px 16px;
    background-color:#E3EDED;
    @media (width > 768px){
      padding:64px 16px;
    }
    .gridArea{
      gap:32px;
      counter-reset:result;
      @media (width > 1320px){
        grid-template-columns:1fr 1fr 1fr;
        grid-template-rows:1fr 1fr;
        align-items:stretch;
        gap:1.25% 1.667%;
      }
      .resultDetail{
        width:100%;
        max-width:448px;
        margin:auto;
        border-radius:24px;
        background-color:#fff;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:space-between;
        padding:16px;
        @media (width > 768px){
          padding:16px 32px;
        }
        @media (width > 1320px){
          margin:0;
        }
        div{
          &::before{
            content:counter(result);
            counter-increment:result;
            font-size:clamp(2.8rem, 0.8rem + 5.33vw, 5.6rem);
            font-family:"Prompt",sans-serif;
            font-weight:500;
            color:#3D9E9E;
            width:100%;
            display:block;
            text-align:center;
          }
        }
        h3{
          color:#fff;
          background-color:#3D9E9E;
          text-align:center;
          border-radius:100px;
          margin-bottom:16px;
          padding:8px 16px;
          font-weight:bold;
        }
        p{
          line-height:1.8;
          margin-bottom:16px;
        }
      }
    }
  }
  .secondArea{
    padding:64px 16px;
    .planArea{
      width:100%;
      max-width:1528px;
      margin:auto;
      background-color:#E3EDED;
      border-radius:32px;
      padding:40px 16px 64px;
    }
    .planDetail{
      background-color:#fff;
      width:100%;
      max-width:1400px;
      margin:auto;
      border-radius:24px;
      padding-bottom:24px;
      margin-bottom:40px;
      @media (width > 768px){
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        align-items:stretch;
        justify-content:space-around;
        padding-bottom:48px;
      }
      &:last-of-type{
        margin-bottom:0;
      }
      .planLeft{
        width:100%;
        display:flex;
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:stretch;
        justify-content:space-between;
        @media (width > 768px){
          width:43.86%;
          max-width:614px;
        }
        h3{
          background-color:#3D9E9E;
          color:#fff;
          border-top-left-radius:24px;
          border-top-right-radius:24px;
          padding:24px 16px;
          text-align:center;
          font-weight:bold;
          margin-bottom:40px;
          @media (width > 768px){
            border-top-right-radius:0;
            border-bottom-right-radius:24px;
            padding:48px 16px;
          }
        }
        div{
          height:100%;
          display:flex;
          flex-direction:column;
          flex-wrap:nowrap;
          align-items:center;
          justify-content:space-between;
          padding:0 16px;
          @media (width > 768px){
            padding: 0 48px;
            border-right:2px solid #C6C6C6;
          }
          p:not([class]){
            font-size:clamp(1.6rem, 1.171rem + 1.14vw, 2.2rem);
            color:#3D9E9E;
            line-height:1.8;
            margin-bottom:24px;
            font-weight:bold;
            @media (width > 768px){
              margin-bottom:48px;
            }
          }
          .planPrice{
            text-align:center;
            color:#F38429;
            .priceTitle{
              font-weight:800;
            }
            .priceNum{
              font-weight:500;
              font-family:"Prompt",sans-serif;
            }
            .Yen{
              color:#444;
              font-weight:800;
            }
          }
          .quotation{
            font-family:"Noto Sans JP",sans-serif!important;
            @media(width > 768px){
              width:100%;
            }
          }
          .priceMethod{
            border:1px solid #3D9E9E;
            width:100%;
            margin-top:32px;
            border-spacing:0;
            @media (width > 768px){
              margin-top:64px;
            }
            thead{
              tr{
                th{
                  padding:8px;
                  text-align:center;
                  background-color:#E3EDED;
                  color:#3D9E9E;
                  border-bottom:1px solid #3D9E9E;
                }
              }
            }
            tbody{
              tr{
                td{
                  padding:8px;
                  text-align:center;
                  font-weight:bold;
                }
              }
            }
          }
          a.btn {
            display: block;
            width: 100%;
            max-width: 320px;
            margin: 32px auto 0;
            background: #3d9e9e;
            color: #fff;
            font-size: 20px;
            font-weight: 700;
            text-align: center;
            padding: 16px 24px;
            border-radius: 12px;
            text-decoration: none;
            position: relative;

            &::after {
              content: "";
              position: absolute;
              top: 50%;
              right: 18px;
              width: 10px;
              height: 10px;
              border-top: 2px solid #fff;
              border-right: 2px solid #fff;
              transform: translateY(-50%) rotate(45deg);
            }
          }
        }
      }
      .planRight{
        width:100%;
        max-width:786px;
        padding:24px 16px 0;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        @media (width > 768px){
          width:56.14%;
          padding:48px 48px 0;
        }
        h4{
          font-size:clamp(1.6rem, 1.314rem + 0.76vw, 2rem);
          font-weight:bold;
          text-align:center;
          padding:8px;
          width:100%;
          border-radius:50px;
          background-color:#F38429;
          color:#fff;
          margin-bottom:24px;
        }
        ol{
          counter-reset:plan;
          font-weight:bold;
          li{
            display:flex;
            flex-wrap:nowrap;
            padding-bottom:8px;
            color:#3D9E9E;
            &::before{
              content:counter(plan)'.';
              counter-increment:plan;
              color:#3D9E9E;
            }
            span{
              display:block;
              span{
                color:#333;
                font-weight:normal;
              }
            }
          }
        }
        p:not([class]){
          font-size:16px;
        }
      }
    }
  }
  .thirdArea{
    padding:0 16px 32px;
    @media (width > 768px){
      padding:64px 16px;
    }
    .supportArea{
      @media (width > 1300px){
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows:1fr 1fr 1fr;
        gap:0 28px;
      }
      .supportDetail{
        background-color:#fff;
        width:100%;
        max-width:686px;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:space-around;
        gap:34px;
        padding:5.83% 16px;
        border-radius:17.47px;
        border:3px solid #3D9E9E;
        margin:auto auto 32px;
        @media (width > 768px){
          padding:5.83%;
        }
        @media (width > 1300px){
          margin:0 0 32px;
        }
        div:not([class]){
          width:100%;
          max-width:336px;
          @media (width > 768px){
            width:48.98%;
          }
          h3{
            color:#3D9E9E;
            font-weight:600;
            margin-bottom:24px;
          }
          p{
            color:#666;
            line-height:1.8;
          }
        }
      }
      .table-scroll{
        width:100%;
        grid-column:span 2;
        .supportTable{
          border-collapse:separate;
          border-spacing:0;
          border-radius:24px;
          border:3px solid #3D9E9E;
          overflow:hidden;
          thead{
            tr{
              th{
                border-bottom:2px solid #C0D6E4;
                span{
                  border-radius:100px;
                  display:block;
                  padding:8px 24px;
                  margin-bottom:16px;
                }
                &:first-of-type{
                  span{
                    background-color:#fff;
                    color:#3D9E9E;
                  }
                }
                &:not(:first-of-type){
                  background-color:#fff;
                  span{
                    background-color:#F1FBFF;
                    font-weight:normal;
                  }
                }
                &:not(:last-of-type){
                  border-right:1px solid #D9D9D9;
                }
              }
            }
          }
          tbody{
            tr{
              td{
                background-color:#fff;
                text-align:center;
                color:#444;
              }
              th,td:not(:last-of-type){
                border-right:1px solid #D9D9D9;
              }
            }
            tr:not(:last-of-type){
              th,td{
                border-bottom:2px solid #C0D6E4;
              }
            }
          }
          tr{
            th{
              color:#fff;
              text-align:center;
              padding:16px;
              &:first-of-type{
                background-color:#3D9E9E;
              }
              &:not(:first-of-type){
                color:#444;
              }
            }
          }
        }
      }
      .supportCaution{
        grid-column:span 2;
        padding-top:8px;
      }
    }
  }
  .fourthArea{
    padding:64px 16px;
    background-color:#E3EDED;
    .flowArea{
      width:100%;
      max-width:1386px;
      margin:auto;
      dl{
        counter-reset:flowStep;
        @media (width > 1120px){
          display:grid;
          grid-template-columns:1fr 1fr;
        }
        dt{
          background-color:#fff;
          display:flex;
          align-items:center;
          justify-content:flex-start;
          color:#3D9E9E;
          font-weight:bold;
          height:60px;
          @media (width > 768px){
            height:120px;
          }
          @media (width > 1120px){
            margin-bottom:24px;
          }
          .flowStep{
            color:#fff;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            line-height:1;
            font-weight:500;
            width:60px;
            height:100%;
            margin-right:32px;
            background-color:#3D9E9E;
            @media (width > 768px){
              width:120px;
            }
            &::after{
              content:counter(flowStep,decimal-leading-zero);
              counter-increment:flowStep;
              font-family:"Prompt",sans-serif;
              font-size:clamp(2.2rem, 0.629rem + 4.19vw, 4.4rem);
            }
          }
          .font32{
            width:calc(100% - 120px);
          }
        }
        dd{
          background-color:#fff;
          margin-bottom:24px;
          display:flex;
          flex-direction:column;
          flex-wrap:nowrap;
          align-items:start;
          justify-content:center;
          padding:16px 16px 24px;
          font-weight:500;
          position:relative;
          @media (width > 1120px){
            padding: 0 16px;
          }
          &:not(:last-of-type)::after{
            content: '';
            display: block;
            width: 50px;
            height: 50px;
            background-color: #F78934;
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            position: absolute;
            bottom: -37px;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 10;
            @media (width > 1120px) {
              left: -100%; 
            }
          }
        }
      }
    }
  }
}

/*Listing*/
#LISTING{
  .catchCopy{
    width:35.14%;
    height:auto;
    top:50%;
    bottom:50%;
    transform:translate(0,-50%);
    left:9.84%;
  }
  .fvArea{
    @media (width > 768px){
      background-image:url('../web_listing/img/image1.jpg');
    }
  }
  .firstContainer{
    background-color:#EFEFEF;
    background-image:url('../web_listing/img/listing_bg_img001.png'),url('../web_listing/img/listing_bg_img002.png');
    background-repeat:no-repeat;
    background-size:15%,13.54%;
    background-position:98% 20%,left bottom;
    position:relative;
    padding:64px 16px 48px;
    @media (width > 768px){
      padding:128px 16px 96px;
    }
    &::before,&::after{
      content:'';
      background-color:#D5F4FB;
      width:48.125%;
      max-width:924px;
      display:block;
      position:absolute;
      margin:auto;
      left:0;
      right:0;
    }
    &::before{
      height:100%;
      top:0;
      bottom:0;
    }
    &::after{
      aspect-ratio:924 / 80;
      top:100%;
      clip-path:polygon(0 0,100% 0,50% 100%);
    }
    .contentArea{
      margin:auto;
      text-align:center;
      position:relative;
      z-index:2;
      h2{
        font-size:clamp(1.8rem, 0.514rem + 3.43vw, 3.6rem);
        font-weight:bold;
        line-height:1.6;
        margin-bottom:36px;
        @media (width > 768px){
          margin-bottom:72px;
        }
        span{
          color:#0F75B7;
          font-size:1.33em;
        }
      }
      .gridArea{
        margin:auto;
        width:100%;
        max-width:1400px;
        align-items:center;
        gap:24px;
        .worries{
          width:100%;
          max-width:446px;
          min-height:4.46em;
          border-radius:108px;
          margin:auto;
          background-color:#fff;
          font-weight:bold;
          font-size:clamp(1.6rem, 1.029rem + 1.52vw, 2.4rem);
          display:flex;
          align-items:center;
          justify-content:flex-start;
          gap:16px;
          padding:16px 40px;
          line-height:1.6;
          text-align:left;
          @media (widht > 768px){
            margin:0;
          }
          .circle{
            width:2em;
            height:2em;
            display:block;
            border-radius:50%;
            background-color:#0F75B7;
            position:relative;
            &::before{
              content:'';
              position:absolute;
              top:45%;
              left:50%;
              transform:translate(-50%, -50%) rotate(45deg);
              width: 0.5em;
              height: 1em;
              border-right: 4px solid #fff;
              border-bottom: 4px solid #fff;
            }
          }
          .worriesText{
            width:calc(100% - 16px - 2em);
          }
        }
        img{
          width:70%;
          max-width:367px;
          margin:auto;
        }
        @media (width > 1440px){
          grid-template-columns:1.3fr 1fr 1.3fr;
          grid-template-rows:1fr 1fr 1fr;
          gap:24px 32px;
          .worries:first-of-type{
            order:1;
            margin-left:6.7%;
          }
          .worries:nth-of-type(2){
            order:3;
          }
          .worries:nth-of-type(3){
            order:4;
            margin-right:6.7%;
          }
          .worries:nth-of-type(4){
            order:5;
            margin-left:6.7%;
          }
          .worries:nth-of-type(5){
            order:6;
            margin-left:6.7%;
          }
          .worries:last-of-type{
            order:7;
          }
          img{
            order:2;
            grid-row:span 3;
          }
        }
      }
    }
    p:not([class]){
      text-align:center;
      font-size:clamp(1.6rem, 1.457rem + 0.38vw, 1.8rem);
      margin:auto;
      position:relative;
      z-index:2;
      margin-top:56px;
    }
  }
  .secondArea{
    background-image:url('../web_listing/img/listing_bg_img004.png'),url('../web_listing/img/listing_bg_img005.png'),linear-gradient(#85E0C0,#0F75B7);
    background-repeat:no-repeat;
    background-size:16.76%,11.98%,100%;
    background-position:left 50%,98% 85%;
    padding:48px 16px 64px;
    @media (width > 768px){
      padding:96px 16px 128px;
    }
    h2{
      width:100%;
      max-width:1400px;
      margin:auto auto 42px;
      font-size:clamp(2.4rem, 0.686rem + 4.57vw, 4.8rem);
      text-align:center;
      color:#0F75B7;
      line-height:1.6;
      font-weight:bold;
      background-color:#fff;
      border-radius:100px;
    }
    .gridArea{
      width:100%;
      max-width:1400px;
      margin:auto auto 50px;
      @media (width > 768px){
        grid-template-columns:1.333fr 1fr;
        align-items:end;
        gap:8.86%;
        margin-bottom:50px;
        @media (width > 768px){
          margin-bottom:100px;
        }
      }
      .issueList{
        counter-reset:issue;
        font-size:clamp(1.6rem, 0.457rem + 3.05vw, 3.2rem);
        color:#fff;
        width:100%;
        max-width:729px;
        li{
          background-color:#0F75B7;
          display:flex;
          flex-direction:row;
          flex-wrap:nowrap;
          align-items:center;
          justify-content:flex-start;
          border-radius:100px;
          margin-bottom:24px;
          padding-right:3.29%;
          gap:3.29%;
          font-weight:bold;
          line-height:1;
          .issue{
            color:#0F75B7;
            font-family:"Prompt",sans-serif;
            font-size:0.75em;
            background-color:#fff;
            border-radius:100px;
            padding:16px 24px;
            font-weight:400;
            display:flex;
            align-items:center;
            justify-content:space-between;
            &::after{
              content:counter(issue,decimal-leading-zero);
              counter-increment:issue;
              font-weight:500;
              font-size:1.67em;
            }
          }
          &:last-of-type{
            margin-bottom:0;
          }
        }
      }
      img{
        width:70%;
        max-width:547px;
        margin:32px auto auto;
        @media (width > 768px){
          width:100%;
          margin:0;
        }
      }
    }
    .whiteArea{
      width:100%;
      max-width:1162px;
      margin:auto;
      background-color:#fff;
      border-radius:32px;
      box-shadow: 4px 4px 6px 0px #44444440 inset;
      position:relative;
      padding:32px 16px;
      @media (width > 768px){
        background-image:url('../web_listing/img/listing_img001.png');
        background-repeat:no-repeat;
        background-size:23.06%;
        background-position:89.33% bottom;
        padding:72px 10.24%;
      }
      h3{
        text-align:center;
        font-size:clamp(1.6rem, 0.457rem + 3.05vw, 3.2rem);
        font-weight:bold;
        color:#fff;
        background-color:#0F75B7;
        border-radius:200px;
        padding:16px 40px;
        width:fit-content;
        line-height:1;
        position:absolute;
        left:0;
        right:0;
        top:-1em;
        margin:auto;
      }
      .essenceText{
        font-size:clamp(1.8rem, 0.514rem + 3.43vw, 3.6rem);
        font-weight:bold;
        margin-bottom:32px;
        letter-spacing:10%;
        .yellowUnder{
          background-image:linear-gradient(transparent 92%,#FFBE00 92%);
        }
        span:not([class]){
          font-size:1.33em;
        }
      }
      p:not([class]){
        font-size:clamp(1.6rem, 1.029rem + 1.52vw, 2.4rem);
        color:#0F75B7;
        font-weight:bold;
        width:100%;
        max-width:621px;
      }
    }
  }
  .thirdArea{
    background-color:#fff;
    background-image:url('../web_listing/img/listing_bg_img007.png'),url('../web_listing/img/listing_bg_img008.png');
    background-repeat:no-repeat;
    background-size:10.21%,14.06%;
    background-position:left 40%,right 85%;
    h2{
      font-size:clamp(1.8rem, 0.514rem + 3.43vw, 3.6rem);
      font-weight:bold;
      text-align:center;
      line-height:1.4;
      margin-bottom:45px;
      @media (width > 768px){
        margin-bottom:90px;
      }
      span:not([class]){
        color:#0F75B7;
      }
      .fontLarge{
        font-size:2em;
        font-family:"Prompt",sans-serif;
      }
    }
    .gridArea{
      align-items:stretch;
      counter-reset:step;
      gap:56px;
      @media (width > 768px){
        grid-template-columns:1fr 1fr 1fr;
      gap:2%;
      }
      .stepArea{
        margin:auto;
        width:100%;
        max-width:448px;
        border-radius:40px;
        position:relative;
        padding:45px 16px 16px;
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:center;
        justify-content:space-between;
        @media (width > 768px){
          padding:90px 32px 32px;
        }
        .stepNum{
          background-color:#FAF8F3;
          padding:16px;
          display:flex;
          flex-direction:row;
          flex-wrap:nowrap;
          align-items:center;
          justify-content:space-between;
          color:#0F75B7;
          font-size:clamp(1.6rem, 1.029rem + 1.52vw, 2.4rem);
          line-height:1;
          border-radius:16px;
          margin:auto;
          position:absolute;
          left:0;
          right:0;
          top:0;
          width:fit-content;
          transform:translate(0,-50%);
          font-weight:500;
          &::before{
            content:'';
            width:0;
            height:0;
            border-width:12px 13px 0 13px;
            border-color:#FAF8F3 transparent transparent transparent;
            border-style:solid;
            position:absolute;
            margin:auto;
            display:block;
            bottom:-12px;
            left:0;
            right:0;
          }
          &::after{
            content:counter(step,decimal-leading-zero);
            counter-increment:step;
            font-size:2.67em;
            font-family:"Prompt",sans-serif;
            margin-left:8px;
          }
        }
        img{
          height:180px;
          width:auto;
          margin-bottom:32px;
        }
        h3{
          font-size:clamp(1.6rem, 1.029rem + 1.52vw, 2.4rem);
          font-weight:bold;
          text-align:center;
          line-height:1.6;
          margin-bottom:24px;
        }
        p:not([class]){
          font-size:clamp(1.6rem, 1.457rem + 0.38vw, 1.8rem);
          line-height:1.8;
        }
        &:not(:nth-of-type(2)){
          background-image:linear-gradient(270deg, rgba(151, 237, 160, 0.5) 0%, rgba(151, 237, 160, 0.1) 100%);
        }
        &:nth-of-type(2){
          background-image:linear-gradient(90deg, rgba(76, 188, 255, 0.1) 0%, rgba(76, 188, 255, 0.5) 100%);
        }
      }
    }
  }
  .fourthArea{
    background-color:#FAF8F3;
    background-image:url('../web_listing/img/listing_bg_img009.png');
    background-size:15%;
    background-repeat:no-repeat;
    background-position:98% 98%;
    h2{
      text-align:center;
      font-size:clamp(1.8rem, 0.514rem + 3.43vw, 3.6rem);
      font-weight:bold;
      margin-bottom:32px;
      @media (width > 768px){
        margin-bottom:64px;
      }
      span{
        color:#0F75B7;
        font-size:1.33em;
      }
    }
    .comparisonTable{
      text-align:center;
      line-height:1.6;
      border-collapse:separate;
      border-spacing:2px;
      gap:2px;
      overflow:hidden;
      thead{
        tr{
          th{
            font-size:clamp(1.6rem, 0.457rem + 3.05vw, 3.2rem);
            font-weight:bold;
            text-align:center;
            color:#fff;
            padding:16px;
            &:nth-of-type(2){
              background-color:#0F75B7;
            }
            &:last-of-type{
              background-color:#AAAAAA;
            }
          }
        }
      }
      tbody{
        font-size:clamp(1.6rem, 1.029rem + 1.52vw, 2.4rem);
        tr{
          th,td{
            vertical-align:middle;
          }
          th{
            background-color:#EFEFEF;
            width:28.71%;
            max-width:402px;
            font-weight:normal;
            text-align:center;
          }
          td{
            background-color:#fff;
            width:auto;
            padding:16px;
            &:first-of-type{
              background-color:#EFF5F6;
              color:#0F75B7;
              border-left:4px solid #0F75B7;
              border-right:4px solid #0F75B7;
            }
          }
          &:last-of-type{
            td:first-of-type{
              border-bottom:4px solid #0F75B7;
            }
          }
        }
      }
    }
  }
  .fifthArea{
    background-color:#EFF5F6;
    background-image:url('../web_listing/img/listing_bg_img010.png');
    background-repeat:no-repeat;
    background-size:13.54%;
    background-position:left 20%;
    h2{
      text-align:center;
      font-size:clamp(1.8rem, 0.514rem + 3.43vw, 3.6rem);
      font-weight:bold;
      margin-bottom:32px;
      @media (width > 768px){
        margin-bottom:64px;
      }
    }
    .gridArea{
      align-items:stretch;
      gap:2%;
      margin-bottom:64px;
      @media (width > 768px){
        grid-template-columns:1fr 1fr;
        margin-bottom:16px;
      }
      .successDetail{
        width:100%;
        max-width:686px;
        border-radius:32px;
        background-color:#0F75B7;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:space-between;
        gap:32px;
        padding:28px;
        @media (width > 768px){
          padding:56px;
        }
        h3{
          color:#0F75B7;
          background-color:#F4F48D;
          border-radius:100px;
          text-align:center;
          font-size:clamp(1.6rem, 0.457rem + 3.05vw, 3.2rem);
          width:100%;
          font-weight:bold;
          padding:8px;
        }
        dl{
          width:100%;
          background-color:#fff;
          border-radius:16px;
          position:relative;
          z-index:10;
          dt,dd{
            padding:16px;
          }
          dt{
            color:#0F75B7;
            font-weight:bold;
            background-color:#fff;
            border-top-left-radius:16px;
            border-top-right-radius:16px;
            border-bottom:1px solid #0F75B7;
            font-size:clamp(1.6rem, 1.029rem + 1.52vw, 2.4rem);
            display:flex;
            align-items:center;
            justify-content:flex-start;
            gap:8px;
          }
          dd{
            font-size:clamp(1.6rem, 1.457rem + 0.38vw, 1.8rem);
            background-color:#fff;
            border-bottom-left-radius:16px;
            border-bottom-right-radius:16px;
            line-height:1.8;
          }
        }
        dl:first-of-type{
          &::before{
            content:'';
            width:17.06%;
            max-width:117px;
            height:100%;
            display:block;
            background-color:#2BC0A7;
            position:absolute;
            margin:auto;
            z-index:-2;
            left:0;
            right:0;
            bottom:-50px;
          }
          dt::before{
            content:'';
            width:1em;
            aspect-ratio:1 /1;
            background-image:url('../web_listing/img/listing_icon001.png');
            background-repeat:no-repeat;
            background-size:contain;
            background-position:center;
            display:block;
          }
        }
        dl:nth-of-type(2){
          &::before{
            content:'';
            width:17.06%;
            max-width:117px;
            height:100%;
            display:block;
            background-color:#2BC0A7;
            position:absolute;
            margin:auto;
            z-index:-2;
            left:0;
            right:0;
            bottom:-9px;
          }
          &::after{
            content:'';
            display: block;
            width: 100%;
            max-width: 192px;
            height: 24px;
            background-color: #2BC0A7;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom: -32px;
            z-index: -2;
            clip-path: polygon(0 0, 100% 0, 50% 100%);
          }
          dt::before{
            content:'';
            width:1em;
            aspect-ratio:1 /1;
            background-image:url('../web_listing/img/listing_icon002.png');
            background-repeat:no-repeat;
            background-size:contain;
            background-position:center;
            display:block;
          }
        }
        .successData{
          background-color:#F78934;
          dt,dd{
            color:#fff;
          }
          dt{
            background-color:#F78934;
            border-top-left-radius:16px;
            border-top-right-radius:16px;
            border-bottom-color:#fff;
            &::before{
              content:'';
              width:1em;
              aspect-ratio:1 /1;
              background-image:url('../web_listing/img/listing_icon003.png');
              background-repeat:no-repeat;
              background-size:contain;
              background-position:center;
              display:block;
            }
          }
          dd{
            background-color:#F78934;
            border-bottom-left-radius:16px;
            border-bottom-right-radius:16px;
            font-weight:bold;
            ul{
              list-style:disc inside;
              li{
                list-style-type:disc!important;
                &::marker{
                  content:'・';
                }
              }
            }
          }
        }
      }
    }
    p:not([class]){
      font-size:clamp(1.6rem, 1.457rem + 0.38vw, 1.8rem);
    }
  }
  .sixthArea{
    background-image:url('../web_listing/img/listing_bg_img004.png'),url('../web_listing/img/listing_bg_img005.png'),linear-gradient(#0C80CC,#064066);
    background-repeat:no-repeat;
    background-size:16.76%,11.98%,100%;
    background-position:left 30%,98% 85%;
    h2{
      color:#fff;
      font-size:clamp(2.4rem, 0.686rem + 4.57vw, 4.8rem);
      font-weight:bold;
      text-align:center;
      line-height:1.6;
      margin-bottom:40px;
      span:not([class]){
        color:#FFFF00;
      }
    }
    .costArea{
      width:100%;
      max-width:1000px;
      margin:auto;
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-around;
      border:1px solid #fff;
      color:#fff;
      border-radius:24px;
      padding:16px;
      margin-bottom:110px;
      @media (width > 768px){
        padding:0;
      }
      p:not([class]){
        font-size:clamp(1.6rem, 1.029rem + 1.52vw, 2.4rem);
        width:100%;
        max-width:300px;
        margin:auto;
        font-weight:bold;
        text-align:center;
      }
      .flexArea{
        width:100%;
        max-width:calc(1000px / 3 * 2);
        margin:auto;
        flex-wrap:wrap;
        align-items:center;
        justify-content:space-between;
      }
      .costText{
        width:100%;
        max-width:300px;
        margin:auto;
        font-family:"Prompt",sans-serif;
        font-size:clamp(5rem, 1.429rem + 9.52vw, 10rem);
        font-weight:500;
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        align-items:baseline;
        justify-content:center;
        .flexArea{
          align-items:center;
          justify-content:center;
        }
        .circleArea{
          margin-right:8px;
          font-family:"Noto Sans JP",sans-serif;
          height:3.5em;
          width:3.5em;
          border-radius:50%;
          color:#0F75B7;
          font-weight:bold;
          font-size:0.24em;
          background-color:#fff;
          text-align:center;
          display:flex;
          align-items:center;
          justify-content:center;
          align-self:center;
        }
        .textSmall{
          font-family:"Noto Sans JP",sans-serif;
          font-size:0.24em;
          vertical-align:bottom;
        }
      }
    }
    .whiteArea{
      width:100%;
      position:relative;
      background-color:#fff;
      padding:67px 16px 40px;
      margin-bottom:16px;
      h2{
        width:100%;
        max-width:676px;
        position:absolute;
        margin:auto;
        left:0;
        right:0;
        top:0;
        transform:translate(0,-50%);
        img{
          width:100%;
        }
      }
      img{
        width:100%;
        max-width:977px;
        margin:auto;
        display:block;
      }
    }
    p:not([class]){
      color:#fff;
      width:100%;
      max-width:1200px;
      margin:auto;
      font-size:clamp(1.6rem, 1.457rem + 0.38vw, 1.8rem);
    }
  }
}