@charset "utf-8";

html { scroll-behavior: smooth; }

body{
  margin: 0 auto;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  color: #7B390B;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: normal;
  opacity: 0;
  transition: opacity .45s;
  &.is-loaded {
    opacity: 1;
  }
}
/* アクセシビリティ配慮：アニメ減らす設定の人には動かさない */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none !important; }
}

/* font set */
.font-roboto{
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  &.roboto-regular {
    font-weight: 400;
  }
  &.roboto-700 {
    font-weight: 700;
  }
  &.roboto-900 {
    font-weight: 900;
  }
}
.font-sedgwick-ave{
    font-family: "Sedgwick Ave", cursive;
    font-style: normal;
  &.sedgwick-ave-regular {
    font-weight: 400;
  }
}


/* 共通 */
.jf_inner{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 100;
  @media screen and (max-width: 767px) {
    padding: 0 16px;    
  }
}
.jf_inner_large{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  @media screen and (max-width: 767px) {
    padding: 0 16px;    
  }
}
.jf_inner_max{
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  @media screen and (max-width: 767px) {
    padding: 0 16px;    
  }
}
.first_line,
.second_line,
.third_line{ display: block; }

.jf_section{
  position: relative;
  @media screen and (max-width: 767px) {
    padding-top: 32px;
    &#preparation{
      margin-top: 100px;
    }
  }
  .jf_index{
    text-align: center;
    color: #7B390B;
    font-weight: 700;
    margin: 0 auto 140px;
    position: relative;
    @media screen and (max-width: 767px) {
      margin: 0 auto 90px;
    }
    &.jf_index_grid{
      display: grid;
      grid-template-rows: auto auto;
      row-gap: 0;
      justify-items: center;
      align-items: center;
      .first_line{
        font-size: clamp(1.25rem, 1.111rem + 0.57vw, 1.625rem);
      }
      .second_line{
        color: #2EC58E;
        font-size: clamp(1.75rem, 1.657rem + 0.38vw, 2rem);
      }
    }
    &.jf_index_nogrid{
      display: block;
      &.jf_index_large{
        &::after{
          content: "";
          display: block;
          width: 400px;
          height: 65px;
          background: url(../images/speech_bubble_400.svg);
          background-repeat: no-repeat;
          background-size: contain;
          position: absolute;
          left: calc(50% - 200px);
          top: 25px;
        }
      }
      .first_line{
        font-size: clamp(1.75rem, 1.657rem + 0.38vw, 2rem);
        color: #7B390B;
      }
      &.jf_index_large{
        &::after{
          content: "";
          display: block;
          width: 400px;
          height: 65px;
          background: url(../images/speech_bubble_400.svg);
          background-repeat: no-repeat;
          background-size: contain;
          position: absolute;
          left: calc(50% - 200px);
          top: /*75px*/50px;
          @media screen and (max-width: 767px) {
            width: 320px;
            height: 65px;
            left: calc(50% - 165px);
            top: 90px;
          }
        }
      }
    }
    &.jf_index_small{
      &::after{
        content: "";
        display: block;
        width: 260px;
        height: 65px;
        background: url(../images/speech_bubble_260.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        left: calc(50% - 130px);
        top: /*75px*/78px;
        @media screen and (max-width: 767px) {
          top: 60px;
        }
      }
    }
    &.jf_index_middle{
      &::after{
        content: "";
        display: block;
        width: 320px;
        height: 65px;
        background: url(../images/speech_bubble_320.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        left: calc(50% - 160px);
        top: /*75px*/78px;
        @media screen and (max-width: 767px) {
          top: 60px;
        }
      }
    }
    &.jf_index_large{
      &::after{
        content: "";
        display: block;
        width: 400px;
        height: 65px;
        background: url(../images/speech_bubble_400.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        left: calc(50% - 200px);
        top: 75px;
        @media screen and (max-width: 767px) {
          width: 320px;
          height: 65px;
          left: calc(50% - 165px);
          top: 75px;
        }
      }
      &.lines{
        &::after{
          top: 90px;
          @media screen and (max-width: 767px) {
            top: 90px;
          }
        }        
      }
    }
  }
}

.for_pc{
  display: block;
  @media screen and (max-width: 1080px) {
    display: none;
  }
}
.for_tab,
.for_sp{
  display: none;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .for_tab{
    display: block;
  }
}
@media screen and (max-width: 767px) {
.for_sp{
    display: block;    
  }
}

/* tel link */
@media screen and (min-width: 1023px) {
  a[href^="tel:"] {
      pointer-events: none;
      cursor: default;
  }
}

/* text decoration */
em{font-style: normal;}
.line_block{display: block;}
.text_small{font-size: 0.875rem;}
.text_large{font-size: 1.5rem;}
.text_emphasis{
  background-image: radial-gradient(circle at center, #7B390B 20%, transparent 20%);
  background-position: top left;
  background-repeat: repeat-x;
  background-size: 1.1em 0.5em;
  padding-top: .5em;
}

.marker{
  display: inline-block;
  line-height: 1;
}
.marker_yellow{
  background: linear-gradient(transparent 50%, #FFE032 50%);;
}
.marker_yellow_short{
  background: url(../images/preparation-support_line_122.svg) 0 0 / contain no-repeat;
}
.marker_yellow_long{
  background: url(../images/preparation_line_187.svg) 0 0 / contain no-repeat;
}
.marker_yellow_short_uv{
  height: 26px;
  background: url(../images/uservoice_1_line_137.svg) top center / contain no-repeat;
}
.marker_yellow_middle_uv{
  height: 30px;
  background: url(../images/uservoice_1_line_243.svg) top center / contain no-repeat;
}
.marker_yellow_long_uv{
  height: 30px;
  background: url(../images/uservoice_2_line_270.svg) top center / contain no-repeat;
}
.marker_yellow_long_chance{
  background: url(../images/chance_line_324.svg) top center / contain no-repeat;
}
.marker_yellow_short_chance_sp{
  background: url(../images/chance_line_sp_113.svg) top center / contain no-repeat;
}
.marker_yellow_long_chance_sp{
  background: url(../images/chance_line_sp_208.svg) top center / contain no-repeat;
}


/* button */
.jf_button_list{
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 16px;
  justify-items: center;
  align-items: center;
  margin-top: 40px;
  li{
    width: 260px;
    background: #FFE032;
    border: 2px solid #7B390B;
    border-radius: 100px;
    font-weight: 700;
    box-shadow: 2.5px 2.5px 0px 0px rgba(123, 57, 11, 0.1);
    a,
    a:link{
      color: #7B390B;
      &:hover{
        text-decoration: none;
      }
    }
    &:nth-child(1):hover{
      transform: translateY(4px);
      box-shadow: none;
      @media screen and (max-width: 1080px) {
        transform: translateY(0);
        box-shadow: 3px 3px 0px 0px rgba(123, 57, 11, 0.1);
      }
    }
    .jf_btn{
      display: grid;
      grid-template-columns: auto auto auto;
      column-gap: 2px;
      justify-content: space-between;
      justify-items: center;
      align-items: center;
      align-content: center;
      letter-spacing: normal;
      width: 240px;
      height: 56px;
      margin: 0 auto;
      &.btn_webform::before{
        content: "";
        display: inline-block;
        width: 40px;
        height: 40px;
        background: url(../images/button_icon_mail.webp);
        background-repeat: no-repeat;
        background-size: contain;
      }
      &.btn_tell p{
        display: grid;
        grid-template-rows: auto auto;
        row-gap: 4px;
        justify-content: center;
        align-items: start;
        text-align: center;
      }
      &.btn_tell::before{
        content: "";
        display: inline-block;
        width: 40px;
        height: 40px;
        background: url(../images/button_icon_tell.webp);
        background-repeat: no-repeat;
        background-size: contain;
      }
      &::after{
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(../images/button_arrow.svg);
        background-repeat: no-repeat;
        background-size: contain;
      }
      @media screen and (min-width: 1023px) {
        &.btn_tell::after{
          background: none;
        }
      }
      .text_small{
        font-size: 0.8rem;
        line-height: 1;
      }
      .text_large{
        font-size: 1rem;
        line-height: 1;
      }
      &.btn_tell .text_large{
        font-size: 1.4rem;
        line-height: 1;
      }
      .btn_tell_caution{
        font-size: .8rem;
        line-height: 1;
      }
      .text_emphasis{
        background-image: radial-gradient(circle at center, #7B390B 20%, transparent 25%);
        background-position: top right;
        background-repeat: repeat-x;
        background-size: 1em 0.3em;
        padding-top: .4em;
      }
    }
  }
}

/* header */
.bl_header{
  width: 100%;
  height: 100px;
  padding: 16px 0;
  box-shadow: 0px 5px 10px 0px rgba(199, 199, 199, 0.5);
    @media screen and (max-width: 767px) {
      height: 80px;
      padding: 8px 0;
    }
  .bl_grid_rows{
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    align-items: center;
    row-gap: 2px;
  }
  .bl_grid_columns{
    display: grid;
    grid-template-columns: auto auto;
    justify-items: center;
    align-items: center;
    @media screen and (min-width: 768px) and (max-width: 1080px) {
      justify-content: space-between;
    }
    @media screen and (max-width: 767px) {
      justify-content: space-between;
    }
  }
  .jf_logo{
    .jf_logo_inner{
      display: grid;
      grid-template-columns: auto auto;
      justify-items: center;
      align-items: center;
    }
    @media screen and (max-width: 767px) {
      width: 100%;
      max-width: 140px;
    }
  }
  h1{
    font-size: clamp(0.625rem, 0.532rem + 0.38vw, 0.875rem);
    letter-spacing: 1px;
    color: #2EC58E;
    @media screen and (max-width: 767px) {
      font-size: clamp(0.625rem, 0.532rem + 0.38vw, 0.875rem);
      letter-spacing: 1px;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1080px) {
    .hamburger {
      width: 64px;
      height: 64px;
      border: none;
      padding: 0;
      background: transparent;
      cursor: pointer;
      display: grid;
      grid-template-rows: auto auto;
      row-gap: 0px;
      align-items: center;
      align-content: space-evenly;
      justify-content: center;
      justify-items: center;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      position: relative;
        &:focus-visible {
          outline: 2px solid #2EC58E;
          outline-offset: 3px;
          border-radius: 6px;
        }
        .menu--icon {
          position: relative;
          width: 40px;
          height: 4px;
          background: #2EC58E;
          border-radius: 4px;
          transition: transform 0.3s ease, background-color 0.3s ease !important;
            &::before,
            &::after {
              content: "";
              position: absolute;
              left: 0;
              width: 40px;
              height: 4px;
              background: #2EC58E;
              border-radius: 4px;
              transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease, background-color 0.3s ease !important;
            }
            &::before{
              top: 9px;
            }
            &::after{
              bottom: 9px;
            }
        }
        .menu--name {
          font-size: 1rem;
          color: #2EC58E;
          line-height: 1;
          text-align: center;
          position: absolute;
          bottom: 8px;
          .menu--open{
            display: inline;
          }
          .menu--close{
            display: none;
          }
        }
        &.active{
          width: 64px;
          height: 64px;
          background: #2EC58E;
          border-radius: 100%;
          z-index: 1100;
          .menu--icon {
            background: transparent;
            transition: transform 0.3s ease, background-color 0.3s ease !important;
            &::before,
            &::after{
              transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease, background-color 0.3s ease !important;
            }
            &::before {
              top: 0;
              transform: rotate(45deg);
              background: #fff;
            }
            &::after {
              bottom: 0;
              transform: rotate(-45deg);
              background: #fff;
            }
          }
          .menu--name {
            color: #fff;
            margin-top: 16px;
            .menu--open{
              display: none;
            }
            .menu--close{
              display: inline;
            }
          }
        }
    }
  }
  @media screen and (max-width: 767px) {
    .hamburger {
      width: 64px;
      height: 64px;
      border: none;
      padding: 0;
      background: transparent;
      cursor: pointer;
      display: grid;
      grid-template-rows: auto auto;
      row-gap: 0px;
      align-items: center;
      align-content: space-evenly;
      justify-content: center;
      justify-items: center;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      position: relative;
        &:focus-visible {
          outline: 2px solid #2EC58E;
          outline-offset: 3px;
          border-radius: 6px;
        }
        .menu--icon {
          position: relative;
          width: 40px;
          height: 4px;
          background: #2EC58E;
          border-radius: 4px;
          transition: transform 0.3s ease, background-color 0.3s ease !important;
            &::before,
            &::after {
              content: "";
              position: absolute;
              left: 0;
              width: 40px;
              height: 4px;
              background: #2EC58E;
              border-radius: 4px;
              transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease, background-color 0.3s ease !important;
            }
            &::before{
              top: 9px;
            }
            &::after{
              bottom: 9px;
            }
        }
        .menu--name {
          font-size: 1rem;
          color: #2EC58E;
          line-height: 1;
          text-align: center;
          position: absolute;
          bottom: 8px;
          .menu--open{
            display: inline;
          }
          .menu--close{
            display: none;
          }
        }
        &.active{
          width: 64px;
          height: 64px;
          background: #2EC58E;
          border-radius: 100%;
          z-index: 1100;
          .menu--icon {
            background: transparent;
            transition: transform 0.3s ease, background-color 0.3s ease !important;
            &::before,
            &::after{
              transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease, background-color 0.3s ease !important;
            }
            &::before {
              top: 0;
              transform: rotate(45deg);
              background: #fff;
            }
            &::after {
              bottom: 0;
              transform: rotate(-45deg);
              background: #fff;
            }
          }
          .menu--name {
            color: #fff;
            margin-top: 16px;
            .menu--open{
              display: none;
            }
            .menu--close{
              display: inline;
            }
          }
        }
    }
  }

  /* nav */
  nav{
    @media screen and (min-width: 768px) and (max-width: 1080px) {
      &#navArea{
        transform: translateX(100%) !important;
        visibility: hidden;
        will-change: transform;
        pointer-events: none;
        transition: transform 0.7s ease !important;
        background: #fff;
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        z-index: 1000;
        .jf_nemu{
          margin-top: 100px;
        }
        &.active {
          transform: translateX(0) !important;
          visibility: visible !important;
          pointer-events: auto;
          transition: transform 1.0s ease !important;
        }
        &::before,
        &::after{
            pointer-events: none !important;
        }
      }
    }
    @media screen and (max-width: 767px) {
      &#navArea{
        transform: translateX(100%);
        visibility: hidden;
        will-change: transform;
        pointer-events: none;
        transition: transform 0.7s ease !important;
        background: #fff;
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        z-index: 1000;
        .jf_nemu{
          margin-top: 100px;
        }
        &.active {
          transform: translateX(0);
          visibility: visible;
          pointer-events: auto;
          transition: transform 1.0s ease !important;
        }
        &::before,
        &::after{
            pointer-events: none !important;
        }
      }
    }
  .jf_nemu{
    display: grid;
    grid-template-columns: repeat(5, auto);
    column-gap: 24px;
    justify-items: center;
    align-items: center;
    font-size: 1rem;
    font-weight: bold;
    @media screen and (min-width: 768px) and (max-width: 1080px) {
      grid-template-columns: none;
      grid-template-rows: repeat(5, auto);
      row-gap: 24px;
      justify-content: center;
      justify-items: start;
    }
    @media screen and (max-width: 767px) {
      grid-template-columns: none;
      grid-template-rows: repeat(5, auto);
      row-gap: 24px;
      justify-content: center;
      justify-items: start;
    }
  }
  .jf_button_list{
    display: none;
    @media screen and (max-width: 1080px) {
      display: grid;
    }
  }
  }

  @media screen and (min-width: 768px) and (max-width: 1080px) {
    #navOverlay{
      position: fixed;
      inset: 0;
      background: rgba(123,57,11,.1);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .2s ease !important;
      z-index: 999;
    }
    #navOverlay.show{
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }
    #navArea{
      position: relative;
      z-index: 10000;
    }
  }
  @media screen and (max-width: 767px) {
    #navOverlay{
      position: fixed;
      inset: 0;
      background: rgba(123,57,11,.1);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .2s ease !important;
      z-index: 999;
    }
    #navOverlay.show{
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    #navArea{
      position: relative;
      z-index: 10000;
    }
  }
  a,
  a:link{
    color: #2EC58E;
    text-decoration: none;
    &:hover{
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 6px;
    }
  }
}

/* FV */
.jf_fv{
  margin: 0 auto 40px;
  padding: 100px 0 0;
  position: relative;
  overflow: hidden;
  .jf_inner{
    position: relative;
    z-index: 100;
    .jf_fv_main{
      margin-bottom: 20px;
      img{
        width: 100%;
        max-width: 634px;
        margin: 0 auto;
        @media screen and (max-width: 768px) {
          width: 80%;
        }
      }
    }
    .jf_fv_catch{
      margin-bottom: 30px;
      @media screen and (max-width: 768px) {
        margin-bottom: 16px;
      }
      &.bl_grid_columns{
        display: grid;
        grid-template-columns: repeat(3, auto);
        column-gap: 10px;
        justify-content: center;
        justify-items: center;
        align-items: center;
        @media screen and (max-width: 768px) {
          column-gap: 4px;
        }
        &::before,
        &::after{
          content: "";
          display: inline-block;
          width: 3px;
          height: 60px;
          background: #7B390B;
          border-radius: 100%;
          @media screen and (max-width: 768px) {
            width: 2px;
            height: 28px;
          }
        }
        &::before{
          transform: rotate(-25deg);
        }
        &::after{
          transform: rotate(25deg);
        }
        img{
          width: 95%;
          max-width: 520px;
        }
      }
    }
    .jf_fv_point_wrap{
      text-align: center;
      .jf_fv_point{
        margin-bottom: 18px;
        font-size: clamp(1rem, 0.768rem + 0.95vw, 1.625rem);
      }
      .jf_fv_point_box{
        display: inline-block;
        padding: 0 16px;
        background: #7B390B;
        color: #fff;
        font-size: clamp(1.25rem, 0.879rem + 1.52vw, 2.25rem);
      }
    }
  }
  .jf_fv_bg {
    position: relative;
    z-index: 90;
    perspective: 1000px;
    transform-style: preserve-3d;
    .fv_bg_top_center {
      position: absolute;
      bottom: 380px;
      left: calc(50% - 295px);
      animation: slideInFromTop 900ms cubic-bezier(.22,.61,.36,1) both;
      backface-visibility: hidden;
      will-change: transform, opacity;
      @media screen and (min-width: 768px) and (max-width: 1080px) {
        width: 60%;
        bottom: 350px;
        left: calc(50% - 30%);
      }
      @media screen and (max-width: 767px) {
        width: 60%;
        bottom: 240px;
        left: calc(50% - 30%);
      }
    }
    .fv_bg_top_left {
      position: absolute;
      left: -220px;
      bottom: 300px;
      animation: slideInFromLeft 900ms cubic-bezier(.22,.61,.36,1) 80ms both;
      backface-visibility: hidden;
      will-change: transform, opacity;
      @media screen and (min-width: 768px) and (max-width: 1080px) {
        width: 60%;
        left: 80%;
        bottom: 250px;
      }
      @media screen and (max-width: 767px) {
        width: 60%;
        left: 80%;
        bottom: 250px;
      }
    }
    .fv_bg_top_right {
      position: absolute;
      right: -220px;
      bottom: 300px;
      animation: slideInFromRight 900ms cubic-bezier(.22,.61,.36,1) 160ms both;
      backface-visibility: visible;
      will-change: transform, opacity;
      @media screen and (min-width: 768px) and (max-width: 1080px) {
        width: 60%;
        right: 80%;
        bottom: 250px;
      }
      @media screen and (max-width: 767px) {
        width: 60%;
        right: 80%;
        bottom: 250px;
      }
    }
    .fv_bg_btm_left {
      position: absolute;
      left: -280px;
      bottom: 0;
      animation: slideInFromLeftBtm 900ms cubic-bezier(.22,.61,.36,1) 80ms both;
      backface-visibility: hidden;
      will-change: transform, opacity;
      @media screen and (min-width: 768px) and (max-width: 1080px) {
        display: none;
      }
      @media screen and (max-width: 767px) {
        display: none;
      }
    }
    .fv_bg_btm_right {
      position: absolute;
      right: -280px;
      bottom: 0;
      animation: slideInFromRightBtm 900ms cubic-bezier(.22,.61,.36,1) 160ms both;
      backface-visibility: visible;
      will-change: transform, opacity;
      @media screen and (min-width: 768px) and (max-width: 1080px) {
        display: none;
      }
      @media screen and (max-width: 767px) {
        display: none;
      }
    }
  }
}
/* FV bg animation set */
@keyframes slideInFromTop {
  0%   { opacity: 0; transform: rotate(-180deg) translateY(60px) scale(.98); }
  100% { opacity: 1; transform: rotate(-180deg) translateY(0)     scale(1); }
}
@keyframes slideInFromLeft {
  0%   { opacity: 0; transform: rotate(-15deg) translateX(-60px) scale(.98); }
  100% { opacity: 1; transform: rotate(-15deg) translateX(0)     scale(1); }
}
@keyframes slideInFromRight {
  0%   { opacity: 0; transform: rotate(15deg) translateX(60px)  scale(.98); }
  100% { opacity: 1; transform: rotate(15deg) translateX(0)     scale(1); }
}
@keyframes slideInFromLeftBtm {
  0%   { opacity: 0; transform: rotate(15deg) translateX(-60px) scale(.98); }
  100% { opacity: 1; transform: rotate(15deg) translateX(0)     scale(1); }
}
@keyframes slideInFromRightBtm {
  0%   { opacity: 0; transform: rotate(-15deg) translateX(60px)  scale(.98); }
  100% { opacity: 1; transform: rotate(-15deg) translateX(0)     scale(1); }
}

@media screen and (max-width: 1080px) {
  @keyframes slideInFromTop {
    0%   { opacity: 0; transform: rotate(-180deg) translateY(60px) scale(.98); }
    100% { opacity: 1; transform: rotate(-180deg) translateY(0)     scale(1); }
  }
  @keyframes slideInFromLeft {
    0%   { opacity: 0; transform: rotate(-180deg) translateX(-60px) scale(.98); }
    100% { opacity: 1; transform: rotate(-180deg) translateX(0)     scale(1); }
  }
  @keyframes slideInFromRight {
    0%   { opacity: 0; transform: rotate(-180deg) translateX(60px)  scale(.98); }
    100% { opacity: 1; transform: rotate(-180deg) translateX(0)     scale(1); }
  }
}

/* campaign */
.jf_campaign{
  margin: 0 auto 60px;
  .campaign_banner{
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 40px;
    justify-content: center;
    justify-items: center;
    align-items: center;
    padding: 0 16px;
    @media screen and (max-width: 767px) {
      grid-template-columns: none;
      grid-template-rows: auto auto;
      column-gap: 0;
      row-gap: 30px;
      width: 90%;
      margin: 0 auto;
      padding: 0;
    }
  }
}

/* cta button */
.jf_cta_button{
  margin: 0 auto 60px;
  @media screen and (max-width: 767px) {
    margin: 0 auto;
  }
  h2{
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 10px;
    justify-content: center;
    justify-items: center;
    align-items: center;
    margin: 0 auto 16px;
    font-size: clamp(1.625rem, 1.579rem + 0.19vw, 1.75rem);
    &::before,
    &::after{
      content: "";
      display: inline-block;
      width: 2px;
      height: 30px;
      border-radius: 100%;
      background: #7B390B;
    }
    &::before{
      transform: rotate(-35deg);
    }
    &::after{
      transform: rotate(35deg);
    }
    strong{
      color: #2EC58E;
      font-size: clamp(1.75rem, 1.657rem + 0.38vw, 2rem);
    }
  }
  .jf_cta_button_list{
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 24px;
    justify-content: center;
    justify-items: center;
    align-items: center;
      @media screen and (max-width: 767px) {
        grid-template-columns: none;
        grid-template-rows: auto auto;
        row-gap: 24px;
      }
    li{
      width: 100%;
      max-width: 400px;
      background: #FFE032;
      border: 2px solid #7B390B;
      border-radius: 100px;
      font-weight: 700;
      box-shadow: 3px 3px 0px 0px rgba(123, 57, 11, 0.1);
      a,
      a:link{
        color: #7B390B;
        &:hover{
          text-decoration: none;
        }
      }
      &:hover{
        transform: translateY(4px);
        box-shadow: none;
        @media screen and (max-width: 1080px) {
          transform: translateY(0);
          box-shadow: 3px 3px 0px 0px rgba(123, 57, 11, 0.1);
        }
      }
      &.jf_cta_button_list_tell:hover{
        transform: translateY(0);
        box-shadow: 3px 3px 0px 0px rgba(123, 57, 11, 0.1);
      }
      .jf_btn{
        display: grid;
        grid-template-columns: auto auto auto;
        column-gap: 2px;
        justify-content: space-between;
        justify-items: center;
        align-items: center;
        align-content: center;
        letter-spacing: normal;
        padding: 8px 16px;
        margin: 0 auto;
        p{
          font-size: clamp(1.5rem, 1.407rem + 0.38vw, 1.75rem);
          line-height: 1;
        }
        &.btn_webform p{
          margin-top: .5rem;
        }
        &.btn_webform::before{
          content: "";
          display: inline-block;
          width: 60px;
          height: 60px;
          background: url(../images/button_icon_mail.webp);
          background-repeat: no-repeat;
          background-size: contain;
        }
        &.btn_tell p{
          display: grid;
          grid-template-rows: auto auto;
          row-gap: 4px;
          justify-content: center;
          align-items: start;
          text-align: center;
          font-size: 2rem;
        }
        &.btn_tell::before{
          content: "";
          display: inline-block;
          width: 60px;
          height: 60px;
          background: url(../images/button_icon_tell.webp);
          background-repeat: no-repeat;
          background-size: contain;
        }
        &::after{
          content: "";
          display: inline-block;
          width: 30px;
          height: 30px;
          background: url(../images/button_arrow.svg);
          background-repeat: no-repeat;
          background-size: contain;
        }
        @media screen and (min-width: 1023px) {
          &.btn_tell::after{
            background: none;
          }        
        }
        .text_small{
          font-size: clamp(1.125rem, 1.032rem + 0.38vw, 1.375rem);
          line-height: 1;
        }
        .btn_tell_caution{
          font-size: clamp(.9rem, 0.704rem + 0.19vw, 0.813rem);
          line-height: 1;
        }
        .text_emphasis{
          background-image: radial-gradient(circle at center, #7B390B 20%, transparent 25%);
          background-position: top right;
          background-repeat: repeat-x;
          background-size: 1em 0.3em;
          padding-top: .4em;
        }
      }
    }
  }
}

/* preparation */
#preparation{
  position: relative;
  .jf_preparation{
    h2{
      margin: 0 auto 100px;
    }
    .preparation_catch{
      display: grid;
      grid-template-columns: auto auto;
      column-gap: 10px;
      justify-content: center;
      justify-items: center;
      align-items: center;
      text-align: center;
      margin: 0 auto 60px;
      @media screen and (max-width: 767px) {
        grid-template-columns: none;
        grid-template-rows: auto auto;
        gap: 10px 0;
      }
      .preparation_catch_cmnt{
        position: relative;
        h3{        
          margin-bottom: 8px;
        }
        .text_small{
          font-size: clamp(1.25rem, 1.204rem + 0.19vw, 1.375rem);
        }
        .text_large{
          font-size: clamp(1.375rem, 1.329rem + 0.19vw, 1.5rem);
        }
        p{
          font-size: clamp(1rem, 0.954rem + 0.19vw, 1.125rem);
        }
        &::before{
          content: "";
          display: block;
          width: 430px;
          height: 160px;
          background: #FFFCEB;
          border-radius: 100%;
          filter: drop-shadow(2px 2px 20px #FFFCEB);
          position: absolute;
          bottom: -20px;
          left: calc(50% - 215px);
          z-index: -10;
          @media screen and (max-width: 767px) {
            width: 340px;
            height: 160px;
            bottom: -5px;
            left: calc(50% - 170px);
          }
        }
      }
    }
    .preparation_anxiety_catch{
      text-align: center;
      margin: 0 auto 40px;
      padding: 0 0 60px;
      position: relative;
      .preparation_anxiety_catch_cmnt{
        display: grid;
        grid-template-columns: auto auto auto;
        column-gap: 10px;
        justify-content: center;
        align-items: start;
        margin: 0 auto 24px;
        @media screen and (max-width: 767px) {
          column-gap: 5px;
        }
        p{
          font-size: clamp(1.375rem, 1.329rem + 0.19vw, 1.5rem);
          font-weight: bold;
          @media screen and (max-width: 767px) {
            font-size: 1.25rem;
          }
        }
        &::before{
          content: "";
          display: inline-block;
          width: 40px;
          height: 66px;
          background: url(../images/preparation_text_decoration.webp) 0 0 / contain no-repeat;
        }
        &::after{
          content: "";
          display: inline-block;
          width: 40px;
          height: 66px;
          background: url(../images/preparation_text_decoration_right.webp) 0 0 / contain no-repeat;
        }
      }
      img{
        margin: 0 auto;
      }
      &::after{
        content: "";
        display: block;
        width: 70px;
        height: 20px;
        background: url(../images/preparation_arrow.svg);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        left: calc(50% - 35px);
        bottom: 0;
      }
    }
  }
  .jf_preparation_support{
    .preparation_support_catch{
      display: grid;
      grid-template-columns: auto auto;
      column-gap: 10px;
      justify-content: center;
      justify-items: center;
      align-items: center;
      text-align: center;
      margin: 0 auto 60px;
      @media screen and (max-width: 767px) {
        grid-template-columns: none;
        grid-template-rows: auto auto;
        gap: 10px 0;
      }
      .preparation_support_catch_cmnt{
        position: relative;
        h3{
          font-size: clamp(1.375rem, 1.329rem + 0.19vw, 1.5rem);
        }
        .text_small{
          font-size: clamp(1.125rem, 1.079rem + 0.19vw, 1.25rem);
        }
        &::before{
          content: "";
          display: block;
          width: 430px;
          height: 160px;
          background: #FFFCEB;
          border-radius: 100%;
          filter: drop-shadow(2px 2px 20px #FFFCEB);
          position: absolute;
          bottom: -20px;
          left: calc(50% - 215px);
          z-index: -10; 
          @media screen and (max-width: 767px) {
            width: 340px;
            height: 140px;
            bottom: -5px;
            left: calc(50% - 170px);
          }
        }
      }
    }
  }
  .jf_features{
    h2{
      margin: 0 auto;
      font-size: 1.75rem;
      letter-spacing: 3px;
      color: #2EC58E;
      &::before,
      &::after{
        content: "";
        display: inline-block;
        width: 40px;
        height: 20px;
      }
      &::before{
        background: url(../images/preparation_features_head_decoration.svg) 0 0 / contain no-repeat;
        transform: scale(-1,1);
      }
      &::after{
        background: url(../images/preparation_features_head_decoration.svg) 0 0 / contain no-repeat;
      }
      &.jf_index_grid{
        display: grid;
        grid-template-columns: auto auto auto;
        column-gap: 24px;
        justify-content: center;
        justify-items: center;
        align-items: center;
        margin: 0 auto 20px;
        @media screen and (max-width: 767px) {
          column-gap: 4px;
        }
      }
      .text_large{
        font-size: 3.75rem;
      }
    }
    .preparation_features_list{
      /* max-width: 800px; */
      max-width: 900px;
      margin: 0 auto;
      position: relative;
      z-index: 100;
      @media screen and (max-width: 1080px) {
        overflow: hidden;
      }
      li{
        margin: 0 auto 40px;
        padding: 40px 24px;
        background: #fff;
        border: 2px solid #2EC58E;
        border-radius: 30px;
        position: relative;        
        @media screen and (max-width: 767px) {
          padding: 24px 16px;
          margin: 32px auto;
        }
        .preparation_features_wrap{
          .bl_grid_columns{
            display: grid;
            grid-template-columns: auto 500px;
            column-gap: 20px;
            justify-items: start;
            align-items: center;
            grid-template-areas:
              "areaA areaB"
              "areaA areaC"
              "areaA areaD"
              "areaA areaE";
            margin: 0 auto;
            .preparation_features_img{
              grid-area: areaA;
            }
            .preparation_features_heading{
              grid-area: areaB;
            }
            .preparation_features_catch{
              grid-area: areaC;
              margin-bottom: 8px;
              font-size: clamp(1.25rem, 1.204rem + 0.19vw, 1.375rem);
              font-weight: bold;
            }
            .preparation_features_cmnt{
              grid-area: areaD;
            }
            .preparation_features_lifeline_list{
              grid-area: areaE;
            }
            @media screen and (max-width: 1080px) {
              grid-template-columns: none;
              grid-template-rows: repeat(5, auto);
              gap: 0;
              grid-template-areas:
                "areaA"
                "areaB"
                "areaC"
                "areaD"
                "areaE";
              justify-content: center;
              justify-items: center;
              align-items: center;
              .preparation_features_img{
                grid-area: areaC;
              }
              .preparation_features_heading{
                grid-area: areaA;
              }
              .preparation_features_catch{
                grid-area: areaB;
                text-align: center;
              }
              .preparation_features_cmnt{
                grid-area: areaD;
              }
              .preparation_features_lifeline_list{
                grid-area: areaE;
              }
            }
            h3{
              display: grid;
              grid-template-columns: auto auto;
              column-gap: 20px;
              justify-content: start;
              justify-items: center;
              align-items: center;
              width: 100%;
              margin: 0 auto 16px;
              text-align: left;
              color: #2EC58E;
              font-size: clamp(1.625rem, 1.579rem + 0.19vw, 1.75rem);
              .preparation_features_num{
                display: inline-block;
                width: 50px;
                height: 50px;
                background: #2EC58E;
                border-radius: 100%;
                color: #fff;
                font-size: clamp(1.75rem, 1.657rem + 0.38vw, 2rem);
                line-height: 50px;
                text-align: center;
              }
            @media screen and (max-width: 1080px) {
              grid-template-columns: none;
              grid-template-rows: auto auto;
              row-gap: 8px;
              justify-content: space-around;
              text-align: center;
              margin: 0 auto 16px;
            }
            }
            .preparation_features_lifeline_list{
              display: flex;
              gap: 16px 10px;
              margin-top: 16px;
              li{
                display: inline-block;
                padding: 0 12px;
                margin: 0 auto;
                border: 1.5px solid #7B390B;
                border-radius: 100px;
                &::before{
                  display: none;
                }
              }
              @media screen and (max-width: 767px) {
                display: inline-block;
                li{
                  margin-bottom: 8px;
                }
              }
            }
            &.preparation_features_point_vendor,
            &.preparation_features_point_lifeline{
              display: grid;
              grid-template-columns: repeat(3, auto);
              column-gap: 0;
              justify-content: space-around !important;
              justify-items: center;
              align-items: center;
              justify-content: center;
              grid-template-areas: none;
              margin: 60px auto 20px;
              @media screen and (min-width: 768px) and (max-width: 890px) {
                grid-template-columns: none;
                grid-template-rows: repeat(3, auto);
                gap: 80px 0;
              }
              @media screen and (max-width: 767px) {
                grid-template-columns: none;
                grid-template-rows: repeat(3, auto);
                gap: 80px 0;
              }
              .preparation_features_point_vendor_content,
              .preparation_features_point_lifeline_content{
                padding: 10px;
                border: 2px solid #7B390B;
                border-radius: 20px;
                position: relative;
                .preparation_features_point_vendor_catch{
                  width: 90px;
                  height: 90px;
                  background: #FFE032;
                  border-radius: 100px;
                  font-size: 1.375rem;
                  font-weight: bold;
                  text-align: center;
                  line-height: 90px;
                  position: absolute;
                  inset: -45px 0 0 calc(50% - 45px);
                  &::after{
                    content: "";
                    display: block;
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-right: 15px solid transparent;
                    border-left: 15px solid transparent;
                    border-top: 10px solid #FFE032;
                    border-bottom: 0;
                    position: absolute;
                    inset: 95px 0 0 calc(50% - 15px);
                  }
                }
                .jf_index_wrap_grid{
                  display: grid;
                  grid-template-columns: auto auto;
                  column-gap: 5px;
                  justify-items: center;
                  align-items: center;
                  justify-content: center;
                  width: 220px;
                  margin: 0 auto;
                  @media screen and (min-width: 768px) and (max-width: 890px) {
                    width: 300px;
                  }
                  @media screen and (max-width: 767px) {
                    width: 90%;                    
                  }
                  .jf_index{
                    margin: 0 auto;
                    text-align: left;
                    font-size: 1.125rem;
                  }
                }
                .preparation_features_point_vendor_cmnt,
                .preparation_features_point_lifeline_cmnt{
                  width: 220px;
                  margin: 0 auto;
                  &::before{
                    content: "";
                    display: block;
                    width: 100%;
                    height: 2px;
                    margin: 24px auto;
                    background: url(../images/preparation_features_line.svg) 0 0 / contain no-repeat;
                    @media screen and (max-width: 890px) {
                      background: url(../images/preparation_features_line.svg) center 0 / cover no-repeat;
                    }
                  }
                  .quotation_comparison{
                    display: grid;
                    grid-template-columns: auto auto;
                    column-gap: 25px;
                    justify-items: center;
                    align-items: center;
                    position: relative;
                    &::after{
                      content: "";
                      display: block;
                      width: 0;
                      height: 0;
                      border-style: solid;
                      border-top: 10px solid transparent;
                      border-bottom: 10px solid transparent;
                      border-left: 15px solid #7B390B;
                      border-right: 0;
                      position: absolute;
                      inset: 50% 0 0 calc(50% - 25px);
                      @media screen and (min-width: 767px) and (max-width: 890px) {
                        inset: 35% 0 0 calc(50% - 40px);
                      }
                      @media screen and (max-width: 767px) {
                        inset: 35% 0 0 calc(50% - 40px);
                      }
                    }
                    span{
                      display: block;
                    }
                  }
                }                
                .preparation_features_point_vendor_cmnt{
                  @media screen and (min-width: 768px) and (max-width: 890px) {
                    width: 300px;
                  }
                  @media screen and (max-width: 767px) {
                    width: 90%;
                  }
                }
                .preparation_features_point_lifeline_cmnt{
                  @media screen and (min-width: 768px) and (max-width: 890px) {
                    width: 300px;
                  }
                  @media screen and (max-width: 767px) {
                    width: 90%;
                  }
                  p{
                    height: 70px;
                  }
                }
              }
              .preparation_features_point_vendor_content{
                .jf_index_wrap_grid{
                  height: 90px;
                }
              }
            }
            &.preparation_features_point_vendor{
              .preparation_features_point_vendor_content{
                width: 260px;
                height: 360px;
                padding: 60px 0 0 0;
                  @media screen and (min-width: 768px) and (max-width: 890px) {
                    width: 360px;
                    height: auto !important;
                    padding: 60px 0 40px 0;
                  }
                  @media screen and (max-width: 767px) {
                    width: 90%;
                    height: auto !important;
                    padding: 60px 0 40px 0;
                  }
                }
              }
            &.preparation_features_point_lifeline{
              @media screen and (max-width: 767px) {
                margin: 20px auto;
                gap: 40px 0;
              }
              .preparation_features_point_lifeline_content{
                display: grid;
                grid-template-rows: auto auto;
                align-content: center;
                width: 260px;
                height: 260px !important;
                  @media screen and (min-width: 768px) and (max-width: 890px) {
                    width: 360px;
                    height: auto;
                  }
                  @media screen and (max-width: 767px) {
                    width: 90%;
                    height: auto;
                  }
                }
              }
              strong{
                background: linear-gradient(#FFFCEB 50%);
              }
          }
          .bl_border_brown{
            padding: 24px 24px 30px;
            margin: 40px auto 24px;
            background: #fff;
            border: 2px solid #7B390B;            
            @media screen and (max-width: 767px) {
              padding: 24px 16px 60px;
            }
          }
          .superior_campaign {
            text-align: center;
            position: relative;
            @media screen and (max-width: 1024px) {
              max-width: 360px;
            }
            &::before,
            &::after {
              content: "";
              display: block;
              width: 200px;
              height: 55px;
              background: url(../images/preparation_features-1_campaign_bg_decoration.webp) 0 0 / contain no-repeat;
              position: absolute;
              top: 15px;
            }
            &::before {
              transform: rotate(10deg);
              right: 0;
              @media screen and (max-width: 1024px) {
                transform: rotate(0);
                top: 0;
                right: calc(50% - 100px);
              }
            }
            &::after {
              transform: rotate(-10deg);
              left: 0;
              @media screen and (max-width: 1024px) {
                display: none;
              }
            }
            h4.ribon {
              margin: 20px auto 40px;
              color: #fff;
              font-size: 1.625rem;
              line-height: 50px;
              text-align: center;
              transform: rotate(-2deg);
              position: relative;
              z-index: 20;
              @media screen and (max-width: 1024px) {
                margin: 20px auto;
                font-size: 1rem;
                line-height: 40px;
              }
              &::after{
                content: "";
                display: inline-block;
                width: 450px;
                height: 50px;
                background: url(../images/preparation_features-1_campaign_head_bg.webp) 0 0 / contain no-repeat;
                position: absolute;
                left: calc(50% - 208px);
                z-index: -10;
                @media screen and (max-width: 1024px) {
                  width: 300px;
                  height: 40px;
                  left: calc(50% - 150px);
                }
              }
            }
            @media screen and (max-width: 1024px) {
              .for_sp {
                display: block;
              }
            }
            .superior_campaign_catch {
              margin: 0 auto 24px;
              font-size: 1.5rem;
              font-weight: 900;
            }
            .superior_campaign_catch strong {
              font-size: 1.875rem;
              @media screen and (max-width: 1024px) {
                display: block;
              }
            }
            .font_color_red {
              color: #FF4000;
            }
            .superior_campaign_offer_wrap {
              position: relative;
            }
            .superior_campaign_offer {
              display: grid;
              grid-template-columns: auto auto;
              gap: 8px;
              justify-content: center;
              justify-items: center;
              align-items: center;
              position: relative;
              margin: 0 auto 40px;
              z-index: 10;
              @media screen and (max-width: 1024px) {
                grid-template-columns: none;
                grid-template-rows: auto auto;
              }
              .superior_campaign_offer_label {
                display: inline-block;
                padding: 0 20px;
                background: #7B390B;
                clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
                color: #fff;
                font-size: 1.5rem;
                font-weight: 900;
              }
              &::before{
                content: "";
                display: block;
                width: 100%;
                max-width: 500px;
                height: 100px;
                background: #FFFCEB;
                border-radius: 100%;
                filter: drop-shadow(2px 2px 20px #FFFCEB);
                position: absolute;
                top: 0;
                left: calc(50% - 250px);
                z-index: -10;
                @media screen and (max-width: 1024px) {
                  width: 260px;
                  height: 130px;
                  bottom: calc(50% - 110px);
                  left: calc(50% - 130px);
                }
            }
            }
            .superior_campaign_offer_point_text {
              margin: 0 auto 24px;
              font-size: 1.25rem;
              font-weight: bold;
              strong {
                display: block;
              }
              .marker {
                display: inline;
              }
            }
            .superior_campaign_offer_caution {
              font-size: .875rem;
            }
          }
        }
        &::before{
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background: #F2F2F2;
          border-radius: 30px;
          transform: rotate(3deg);
          position: absolute;
          left: 0;
          bottom: 0;
          z-index: -10;
          @media screen and (max-width: 767px) {
            transform: rotate(6deg);
          }
        }
        &:last-child{
          margin: 0 auto;
        }
      }
    }
  }
}

/* flow */
#flow{
  background: #EBFAF4;
  position: relative;
  .flow_list{
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    z-index: 100;
    .flow_list_grid{
      display: grid;
      grid-template-columns: minmax(30%,300px) minmax(50%,auto);
      column-gap: 32px;
      justify-items: center;
      align-items: center;
      height: 240px;
      padding: 16px 24px;
      margin-bottom: 35px;
      background: #fff;
      border: 3px solid #7B390B;
      border-radius: 30px;
      position: relative;
      @media screen and (max-width: 767px) {
        grid-template-columns: none;
        grid-template-rows: auto auto;
        gap: 32px 0;
        justify-content: center !important;
        height: auto;
        padding: 24px;
      }
      &:nth-child(1){
        height: auto;
      }
        .flow_num{
          display: grid;
          grid-template-columns: 70px 170px;
          column-gap: 20px;
          justify-items: stretch;
          align-items: center;
          @media screen and (max-width: 767px) {
            grid-template-columns: none;
            grid-template-rows: auto auto;
            gap: 16px 0;
          }
          span{
            &.flow_num_underbar{
              display: grid;
              grid-template-rows: auto auto;
              row-gap: 10px;
              justify-items: center;
              align-items: center;
              font-size: 7.5rem;
              line-height: 1;
              @media screen and (min-width: 768px) and (max-width: 1024px) {
                font-size: 4.375rem;
              }
              @media screen and (max-width: 767px) {
                font-size: 4.375rem;
              }
            }
            &.flow_num_underbar::after{
              content: "";
              display: block;
              width: 60px;
              height: 5px;
              background: #7B390B;
              @media screen and (min-width: 768px) and (max-width: 1024px) {
                width: 50px;
              }
              @media screen and (max-width: 767px) {
                width: 45px;
              }
            }
          }
          h3{
            font-size: clamp(1.375rem, 1.329rem + 0.19vw, 1.5rem);
            font-weight: 700;
            text-align: left;
            @media screen and (min-width: 768px) and (max-width: 1024px) {
              font-size: 1.375rem;
            }
            @media screen and (max-width: 767px) {
              text-align: center;
            }
          }
          .text_small{
            font-size: clamp(1.125rem, 1.079rem + 0.19vw, 1.25rem);
          }
        }
        .flow_content{
          width: 100%;
          text-align: left;
          font-weight: bold;
        }
      &::after{
        content: "";
        display: block;
        width: 10px;
        height: 40px;
        background: #7B390B;
        position: absolute;
        bottom: -40px;
        left: calc(50% - 5px);
      }
      &:last-child::after{
        display: none;
      }
    }
    .jf_button_list{
      justify-content: start;
      margin: 16px auto 0;
      li{
        width: 100%;
        max-width: 380px;
        padding: 0 16px;
        .jf_btn{
          justify-content: center;
          width: 100%;
          max-width: 360px;
          height: 70px;
          &.btn_webform{  
            column-gap: 4px;
            @media screen and (max-width:375px){
              column-gap: 2px;
            }       
            .text_large{
              font-size: clamp(1.25rem, 1.204rem + 0.19vw, 1.375rem);
              @media screen and (min-width:415px) and (max-width:1023px){
                font-size: clamp(1.125rem, 1.079rem + 0.19vw, 1.25rem);
              }
              @media screen and (max-width:414px){
                font-size: clamp(1rem, 0.954rem + 0.19vw, 1.125rem);
              }
            }
          }
          &.btn_tell{
            .text_large{
              font-size: 1.8rem;
              @media screen and (max-width:414px){
                font-size: 1.62rem;
              }
            }
            .btn_tell_caution{
              font-size: clamp(0.64rem, 0.641rem + 0.19vw, 0.813rem);
            }
          }
          &::before{
            width: 52px;
            height: 52px;
            @media screen and (min-width: 415px) and (max-width: 1023px){
              width: 42px;
              height: 42px;
            }
            @media screen and (max-width: 414px){
              width: 42px;
              height: 42px;
            }
          }
          &::after{
            width: 28px;
            height: 28px;
            @media screen and (min-width: 415px) and (max-width: 1023px){
              width: 24px;
              height: 24px;
            }
            @media screen and (max-width: 414px){
              width: 20px;
              height: 20px;
            }
          }
        }
      }
    }
  }
}

/* user voice */
#uservoice{
  background: #FFFDF4;
  position: relative;
  @media screen and (min-width: 768px) and (max-width: 890px) {
    padding-top: 60px;
  }
  @media screen and (max-width: 767px) {
    padding-top: 40px;
  }
  .uservoice_wrap{
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 32px;
    grid-template-areas: "areaA areaB";
    justify-content: center;
    justify-items: center;
    align-items: center;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    @media screen and (max-width: 767px) {
      grid-auto-columns: none;
      grid-template-rows: auto auto;
      gap: 32px 0;
      grid-template-areas: "areaA" "areaB";
    }
    &.first{
      margin: 0 auto 30px;
      .uservoice_contents{
        grid-area: areaA;
        @media screen and (max-width: 767px) {
          grid-area: areaB;
        }
        .uservoice_title,
        .uservoice_cmnt{
          max-width: 430px;
          position: relative;
        }
        .uservoice_bubble{
          position: absolute;
          bottom: -8px;
          right: -24px;
          transform: rotateY(180deg);
          @media screen and (max-width: 767px) {
            top: -30px;
            left: inherit;
            right: 30px;
            transform: none;
          }
        }
      }
      .uservoice_imagedata{
        grid-area: areaB;
        @media screen and (max-width: 767px) {
          grid-area: areaA;
        }
      }
    }
    &.second{
      .uservoice_contents{
        grid-area: areaB;
        .uservoice_title,
        .uservoice_cmnt{
          max-width: 470px;
          position: relative;
        }
        .uservoice_bubble{
          position: absolute;
          bottom: -10px;
          left: -24px;
          @media screen and (max-width: 767px) {
            top: -30px;
            left: inherit;
            right: 30px;
          }
        }
      }
      .uservoice_imagedata{
        grid-area: areaA;
      }
    }
    .uservoice_contents{
      .uservoice_title{
        margin: 0 auto;
        text-align: center;
        h3{
          margin: 0 auto 20px;
          padding: 16px 24px;
          background: #fff;
          border: 2px solid #7B390B;
          border-radius: 100px;
          .first_line,
          .second_line{
            font-size: clamp(1.125rem, 1.079rem + 0.19vw, 1.25rem);
            color: #7B390B;
          }
        }
      }
      .uservoice_cmnt{
        text-align: left;
        p{
          display: inline-block;
          box-shadow: 2px 2px 10px #FFFDF460;
          background: #FFFDF460;
        }
      }
    }
    .uservoice_imagedata{
      img{
        margin: 0 auto 12px;
        @media screen and (max-width: 767px) {
          width: 129px;
        }
      }
      .uservoice_parsonaldata{
        font-size: 1rem;
        font-weight: bold;
      }
    }
  }
}

/* chance*/
#chance{
  .chance_wrap{
    display: grid;
    grid-template-rows: repeat(7, auto);
    row-gap: 40px;
    justify-content: center;
    justify-items: center;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    font-size: 1rem;
    strong{
      font-size: 1.125rem;
    }
    .chance_cmnt_emphasis{
      display: grid;
      grid-template-columns: auto auto auto;
      column-gap: 10px;
      justify-items: center;
      align-items: center;
      font-size: clamp(1.25rem, 1.157rem + 0.38vw, 1.5rem);
      strong{
        font-size: clamp(1.375rem, 1.282rem + 0.38vw, 1.625rem);
      }
      &::before,
      &::after{
        content: "";
        display: inline-block;
        width: 39px;
        height: 44px;
        background: url(../images/chance_kirakira.webp) 0 0 / contain no-repeat;
      }
      &::after{
        transform: rotateY(180deg);
      }
    }
    img{
      @media screen and (max-width: 767px) {
        &.chance_image_human{
          width: 90%;
          max-width: 260px;
        }
        &.chance_image_lifeline{
          width: 90%;
          max-width: 260px;
        }
      }
    }
  }
}

/* faq */
#faq{
  background: #ebf9f5;
  position: relative;
  .jf_faq_list{
    position: relative;
    z-index: 100;
    details{
      width: 100%;
      max-width: 780px;
      padding: 16px 24px;
      margin: 0 auto 24px;
      background: #fff;
      border: 2px solid #7B390B;
      border-radius: 100px;
      transition: transform 1s;
      @media screen and (min-width: 768px) and (max-width: 1024px) {
        width: 80%;
      }
      @media screen and (max-width: 767px) {
        border-radius: 30px;
      }
      &:nth-last-child{
        margin: 0 auto;
      }
      &[open]{
        border-radius: 30px;
        summary{
          margin: 0 auto 24px;
        }
        .icon{
          transform: rotate(180deg);
        }
      }
      .icon{
        width: 20px;
        height: 9px;
        background: url(../images/faq_arrow.svg) 0 0 / contain no-repeat;
        transition: transform 0.4s;
        position: absolute;
        top: 30%;
        right: 16px;
      }
      summary{
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 20px;
        justify-content: start;
        justify-items: center;
        align-items: center;
        padding-right: 48px;
        font-size: 1.125rem;
        font-weight: bold;
        position: relative;
        &::before{
          content: "Q";
          display: inline-block;
          width: 30px;
          height: 30px;
          background: #7B390B;
          border-radius: 100%;
          color: #fff;
          text-align: center;
        }
        &::-webkit-details-marker {
          display: none;
        }
      }
      .jf_answer{
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 20px;
        justify-content: start;
        justify-items: center;
        align-items: center;
        font-size: 1rem;
        &::before{
          content: "A";
          display: inline-block;
          width: 30px;
          height: 30px;
          border: 2px solid #7B390B;
          border-radius: 100%;
          color: #7B390B;
          text-align: center;
          font-weight: bold;
        }
        p{
          margin-bottom: 6px;
          &:last-child{
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

/* webform */
#webform{
  margin: 0 auto;
  padding: 0;
  background: #FFFDF4;
  position: relative;
  @media screen and (max-width: 767px) {
    padding: 32px 24px 0;
  }
  .el_lead{
    margin: 0 auto 24px;
  }
  .jf_form{
    max-width: 632px;
    margin: 0 auto;
    position: relative;
    z-index: 100;
    .h-adr{
      display: grid;
      grid-template-rows: repeat(6, auto);
      row-gap: 24px;
    }
    .bl_formList{
      display: grid;
      grid-template-rows: auto auto;
      row-gap: 6px;
      justify-content: center;
      justify-items: center;
      align-items: center;
      width: 100%;
      margin: 0 auto;
      @media screen and (min-width: 414px) and (max-width: 767px) {
        justify-content: center;
      }
      @media screen and (max-width: 413px) {
        justify-content: start;
        justify-items: start;
      }
      &:last-child{
        margin: 0 auto 40px;
      }
    }
    .bl_form_ttl{
      display: block;
      width: 632px;     
      @media screen and (max-width: 767px) {
        max-width: 320px;
      }
      label{
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 8px;
        justify-content: start;
        justify-items: center;
        align-items: center;
        width: 100%;
        font-weight: bold;
        .required{
          padding: 2px 8px;
          background: #FF1C00;
          border-radius: 100px;
          color: #fff;
          font-size: 1rem;
          font-weight: normal;
          text-align: center;
        }
        .any{
          padding: 2px 8px;
          background: #7B390B;
          border-radius: 100px;
          color: #fff;
          font-size: 1rem;
          font-weight: normal;
          text-align: center;
        }
      }
    }
    .bl_form_cont{
      display: grid;
      grid-template-columns: auto auto;
      column-gap: 24px;
      justify-content: start;
      justify-items: center;
      align-items: center;
      width: 100%;
      @media screen and (min-width: 414px) and (max-width: 767px) {
        grid-template-columns: none;
        grid-template-rows: auto auto;
        gap: 16px 0;
      }
      @media screen and (max-width: 413px) {
        grid-template-columns: none;
        grid-template-rows: auto auto;
        gap: 16px 0;
      }
      .bl_form_cont_left,
      .bl_form_cont_right{
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 0;
        justify-items: center;
        align-items: center;
      }
      &.email,
      &.tel,
      &.toi{
        grid-template-columns: none;
        grid-template-rows: auto auto;
        row-gap: 8px;
        justify-items: start;
        width: 100%;
      }
      span{
        display: inline-block;
        width: 40px;
      }
      input{
        width: 260px;
        height: 50px;
        padding: 0 8px;
        line-height: 50px;
        background: #fff;
        border: 2px solid #7B390B;
        border-radius: 8px;
        @media screen and (max-width: 767px) {
          width: 280px;
        }
        &::placeholder{
          color: #927555;
        }
      }
      .name,
      .kana{
        width: 260px;
        height: 50px;
        padding: 0 8px;
        line-height: 50px;
        background: #fff;
        /*border: 2px solid #7B390B;*/
        border-radius: 8px;
        @media screen and (max-width: 767px) {
          width: 280px;
        }
        &::placeholder{
          color: #927555;
        }
      }
      #tel,
      #email{
        width: 632px;
        @media screen and (max-width: 767px) {
          width: 320px;
        }
      }
      textarea{
        background: #fff;
        border: 2px solid #7B390B;
        border-radius: 8px;
        &::placeholder{
          color: #927555;
        }
        &#question{
          width: 632px;
          padding: 8px;
          @media screen and (max-width: 767px) {
            width: 320px;
          }
        }
      }
      .tel,
      .email{
        height: 50px;
        padding: 0 8px;
        line-height: 50px;
        background: #fff;
        border-radius: 8px;
      }
      .question{
        width: 632px;
        height: 200px;
        padding: 8px;
        background: #fff;
        border-radius: 8px;
        overflow-y: scroll;
          @media screen and (min-width: 414px) and (max-width: 767px) {
            width: 320px;
          }
          @media screen and (max-width: 413px) {
            width: 320px;
          }
      }
      &.yotei{
        display: grid;
        grid-template-columns: auto auto auto;
        column-gap: 30px;
        justify-items: center;
        align-items: center;
        @media screen and (max-width: 767px) {
          column-gap: 16px;
        }
        select{
          -webkit-appearance: none;
          appearance: none;
          background: #fff;
          &::-ms-expand {
            display: none; /* for IE */
          }
        }
        .bl_year,
        .bl_month,
        .bl_day{
          width: 160px;
          height: 50px;
          padding: 0 8px;
          background-image: url("../images/faq_arrow.svg");
          background-position: right 10px center;
          background-repeat: no-repeat;
          background-size: 20px 9px;
          border: 2px solid #7B390B;
          border-radius: 8px;
          position: relative;
          @media screen and (min-width: 414px) and (max-width: 767px) {
            width: 100px;
          }          
          @media screen and (max-width: 413px) {
            width: 80px;
          }
          option{
            display: block;
            color: #7B390B;
          }
        }
        .year span,
        .month span,
        .day span{
          width: 80px;
          height: 50px;
          background: #fff;
          margin-right: 8px;
          line-height: 50px;
          padding: 0 8px;
          border-radius: 8px;
          position: relative;
          @media screen and (min-width: 415px) and (max-width: 767px) {
            width: 100px;
          }
          @media screen and (max-width: 414px) {
            width: 70px;
            margin: 0;
          }
        }
        .year,
        .month,
        .day{
          display: grid;
          grid-template-columns: auto auto;
          column-gap: 2px;
          justify-items: center;
          align-items: center;
        }
      }
      .please_note{
        width: 100%;
        padding-left: 1rem;
        font-size: 0.875rem;
        &::before{
          content: "※";
          margin-left: -1rem;
        }
      }
    }
    .jf_submit,
    .jf_backtop{
      .bl_submit{
        width: 400px;
        margin: 0 auto 24px;
        cursor: pointer;
        position: relative;
        @media screen and (max-width: 767px) {
          width: 320px;
        }
        &.bl_submit__back,
        &.jf_btnTop{
          width: 200px;
          height: 50px;
          background: #fff;
          border: 2px solid #7B390B;
          border-radius: 100px;
          color: #7B390B;
          font-size: clamp(1rem, 0.954rem + 0.19vw, 1.125rem);
          font-weight: bold;
          text-align: center;
          line-height: 50px;
          a,
          a:link{
            display: block;
            color: #7B390B;
          }
        }
        input{
          &.el_submit{
            width: 400px;
            height: 80px;
            margin: 0 auto;
            background: #FFE032;
            border: 2px solid #7B390B;
            border-radius: 100px;
            color: #7B390B;
            font-size: clamp(1.125rem, 1.032rem + 0.38vw, 1.375rem);
            font-weight: bold;
            filter: drop-shadow(3px 3px 0px #E2CDB6);
            @media screen and (max-width: 767px) {
              width: 320px;
            }
            &:hover{
              transform: translateY(4px);
              filter: none;
              cursor: pointer;
              @media screen and (min-width: 768px) and (max-width: 1024px) {
                transform: translateY(0);
                filter: drop-shadow(3px 3px 0px #E2CDB6);
              }
              @media screen and (max-width: 767px) {
                transform: translateY(0);
                filter: drop-shadow(3px 3px 0px #E2CDB6);
              }
            }
            &::after{
              content: "";
              display: inline-block;
              width: 30px;
              height: 30px;
              background: url(../images/button_arrow.svg) 0 0 / contain no-repeat;
              position: absolute;
              top: calc(50% - 15px);
              right: 24px;
            }
          }
        }
      }
      .submit_caution{
        margin: 0 auto 24px;
        padding: 0 16px;
        font-weight: bold;
        a,
        a:link{
          color: #7B390B;
          text-decoration: underline;
          text-decoration-thickness: 2px;
          text-underline-offset: 6px;
        }
        a:hover{
          text-decoration: none;
        }
      }
    }
    .el_thankslead_txt{
      margin-bottom: 8px;
      &:last-child{
        margin-bottom: 0;
      }
    }
    .bl_errorLead{
      margin: 0 auto 24px;
    }
    .bl_cautionLeadBox{
      margin: 24px auto;
      padding: 24px 32px;
      background: #fff;
      border: 2px solid #7B390B;
      font-size: clamp(0.875rem, 0.829rem + 0.19vw, 1rem);
      @media screen and (max-width: 767px) {
        padding: 24px 16px;
      }
      .hp_txt_caution{
        padding: 0 0 0 1rem;
        margin-bottom: 8px;
        &::before{
          content: "※";
          display: inline-block;
          margin-left: -1rem;
        }
        &:last-child{
          margin-bottom: 0;
        }
      }
    }
  }
}

/* footer */
footer{
  margin: 0 auto;
  .jf_inner.bl_grid_columns{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 16px;
    grid-template-areas: 
      "areaA areaB"
      "areaC areaC";
    justify-content: center;
    justify-items: center;
    align-items: center;
    @media screen and (max-width: 767px) {
      grid-template-columns: none;
      grid-template-rows: auto auto auto;
      grid-template-areas: 
        "areaA"
        "areaB"
        "areaC";
    }
    .p_mark{
      @media screen and (max-width: 767px) {
        grid-area: areaA;
      }
    }
    .footer_list{
      display: flex;
      justify-content: space-between;
      @media screen and (max-width: 767px) {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 16px;
      }
      li{
        padding: 0 24px;
        border-right: 2px solid #7B390B;
        font-weight: bold;
        &:last-child{
          border-right: none;
        }
        a,
        a:link{
          color: #7B390B;
        }
        a:hover{
          text-decoration: underline;
          text-decoration-thickness: 2px;
          text-underline-offset: 6px;
        }
      }
    }
    .footer_copyright{
      grid-area: areaC;
      text-align: center;
    }
  }
}

/* page top link */  
.back_to_top {
opacity: 0;
pointer-events: none;
transition: opacity .3s;
&.is_visible{
display: block;
position: fixed;
bottom: 80px;
right: 20px;
width: 50px;
height: 50px;
background: #2EC58E;
text-align: center;
line-height: 50px;
font-size: 24px;
border-radius: 50%;
opacity: 1;
pointer-events: auto;
transition: opacity 0.3s;
z-index: 800;
@media screen and (min-width:768px) and (max-width:1023px){
bottom: 240px;
}
.arrow {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
top: 25%;
&::before,
&::after {
content: "";
position: absolute;
top: 0;
left: calc(50% - 2px);
width: 4px;
height: 24px;
border-radius: 9999px;
background: #fff;
transform-origin: 50% 2px;
}
&::before {
transform: rotate(45deg);
}
&::after {
transform: rotate(-45deg);
}
}
&:hover{
opacity: 1;
}
}
}

/* fixed button forSP and tab */
.buttonBox{
  display: none;
  @media screen and (max-width: 767px) {
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    &.is_visible{
      display: block;
      opacity: 1;
      pointer-events: auto;
      transition: opacity 0.3s;
      z-index: 100;
      position: relative;
      .contactArea{
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 2%;
        justify-content: center;
        justify-items: center;
        align-items: center;
        width: 100%;
        margin: 0 auto;
        position: fixed;
        bottom: 0;
        /* left: calc(50% - 165px); */
        z-index: 900;
        li{
          width: 100%;
          img{
            filter: drop-shadow(2px 2px 0px rgba(123, 57, 11, .3));
          }
        }
      }
    }
  }
}

/* page bg decoration */
.jf_section_bg{
  overflow: hidden;
  .jf_section_bg_position_nopadding.js_scroll_slide.is-animated,
  .jf_section_bg_position.js_scroll_slide.is-animated{
    padding-bottom: 120px;
    position: relative;
    z-index: 0;
    @media screen and (max-width: 768px) {
      padding-bottom: 100px;
    }
    .bg_nami{
      width: 100%;
      position: absolute;
      bottom: -50px;
      right: 0;
      @media screen and (max-width: 767px) {
        bottom: 0;
      }
    }
    .bg_cl_top_left{
      width: 45%;
      position: absolute;
      top: 0;
      left: -260px;
      animation: slideInFromLeftSide 900ms cubic-bezier(.22,.61,.36,1) 160ms both;
      @media screen and (min-width: 768px) and (max-width: 1024px) {
        width: 60%;
        right: -200px;
        bottom: 20px;
        z-index: 1000;
      }
      @media screen and (min-width: 718px) and (max-width: 767px) {
        width: 60%;
        right: -200px;
        bottom: 20px;
        z-index: 1000;
      }
      @media screen and (min-width: 641px) and (max-width: 717px) {
        width: 60%;
        left: -200px;
        bottom: 20px;
        z-index: 1000;
      }
      @media screen and (max-width: 640px) {
        width: 80%;
        left: -200px;
        bottom: 20px;
        z-index: 1000;
      }
    }
    .bg_cl_btm_right{
      width: 45%;
      position: absolute;
      bottom: 0;
      right: -260px;
      animation: slideInFromRightSide 900ms cubic-bezier(.22,.61,.36,1) 160ms both;
      @media screen and (min-width: 768px) and (max-width: 1024px) {
        width: 60%;
        right: -200px;
        bottom: 20px;
        z-index: 1000;
      }
      @media screen and (min-width: 718px) and (max-width: 767px) {
        width: 60%;
        right: -200px;
        bottom: 20px;
        z-index: 1000;
      }
      @media screen and (min-width: 641px) and (max-width: 717px) {
        width: 60%;
        right: -150px;
        bottom: 20px;
        z-index: 1000;
      }
      @media screen and (max-width: 640px) {
        width: 80%;
        right: -150px;
        bottom: 20px;
        z-index: 1000;
      }
    }
  }
  .jf_section_bg_position_nopadding.js_scroll_slide.is-animated{
    padding-bottom: 0;
  }
}

@keyframes slideInFromLeftSide {
  0%   { opacity: 0; transform: rotate(0deg) translateX(0px)  scale(.98); }
  100% { opacity: 1; transform: rotate(0deg) translateX(60px)     scale(1); }
}
@keyframes slideInFromRightSide {
  0%   { opacity: 0; transform: rotate(0deg) translateX(60px)  scale(.98); }
  100% { opacity: 1; transform: rotate(0deg) translateX(0px)     scale(1); }
}

/* page bg decoration2 */
.jf_section_bg_position{
  position: relative;
  z-index: 10;
  .bg_cl_top_left{
    width: 45%;
    position: absolute;
    top: 0;
    left: -260px;
    animation: slideInFromLeftSide 900ms cubic-bezier(.22,.61,.36,1) 160ms both;
    @media screen and (min-width: 768px) and (max-width: 1024px) {
      width: 60%;
      right: -200px;
      bottom: 20px;
      z-index: 1000;
    }
    @media screen and (min-width: 718px) and (max-width: 767px) {
      width: 60%;
      right: -200px;
      bottom: 20px;
      z-index: 1000;
    }
    @media screen and (min-width: 641px) and (max-width: 717px) {
      width: 60%;
      left: -200px;
      bottom: 20px;
      z-index: 1000;
    }
    @media screen and (max-width: 640px) {
      width: 80%;
      left: -200px;
      bottom: 20px;
      z-index: 1000;
    }
  }
  .bg_cl_btm_right{
    width: 45%;
    position: absolute;
    bottom: 0;
    right: -260px;
    animation: slideInFromRightSide 900ms cubic-bezier(.22,.61,.36,1) 160ms both;
    @media screen and (min-width: 768px) and (max-width: 1024px) {
      width: 60%;
      right: -200px;
      bottom: 20px;
      z-index: 1000;
    }
    @media screen and (min-width: 718px) and (max-width: 767px) {
      width: 60%;
      right: -200px;
      bottom: 20px;
      z-index: 1000;
    }
    @media screen and (min-width: 641px) and (max-width: 717px) {
      width: 60%;
      right: -150px;
      bottom: 20px;
      z-index: 1000;
    }
    @media screen and (max-width: 640px) {
      width: 80%;
      right: -150px;
      bottom: 20px;
      z-index: 1000;
    }
  }
}

/* whyfree */
#whyfree{
  padding: 60px 0 0;
  background: #FFFDF4;
  .whyfree_contents{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 0;
    justify-content: center;
    justify-items: center;
    align-items: start;
    grid-template-areas:
      "areaA areaB"
      "areaC areaB";
    @media screen and (max-width: 767px) {
      grid-template-columns: none;
      grid-template-rows: auto auto auto;
      row-gap: 24px;
      grid-template-areas:
        "areaA"
        "areaB"
        "areaC";
    }
    .whyfree_title{
      grid-area: areaA;
      width: 450px;
      @media screen and (max-width: 767px) {
        width: 280px;
      }
      .jf_index{
        margin: 0 auto 90px;
        font-size: 1.25rem;
        text-align: center;
        @media screen and (max-width: 767px) {
          margin: 0 auto 20px;
        }
        &::after{
          content: "";
          display: block;
          width: 400px;
          height: 65px;
          background: url(../images/speech_bubble_400.svg);
          background-repeat: no-repeat;
          background-size: contain;
          position: absolute;
          left: calc(50% - 200px);
          top: 75px;
          @media screen and (max-width: 767px) {
            width: 320px;
            height: 65px;
            left: calc(50% - 165px);
          }
        }
        span{
          display: inline-block;
          width: 377px;
          margin: 0 auto;
          text-align: left;
          @media screen and (max-width: 767px) {
            width: 100%;
            max-width: 360px;
          }
        }
        .marker{
          display: inline;
          &.marker_yellow_shortshort_wf{
            width: 104px;
            height: 26px;
            background: url(../images/whyfree_line_104.svg) 0 0 / contain no-repeat;
          }
          &.marker_yellow_short_wf{
            width: 209px;
            height: 26px;
            background: url(../images/whyfree_line_209.svg) 0 0 / contain no-repeat;
          }
          &.marker_yellow_long_wf{
            width: 377px;
            height: 26px;
            background: url(../images/whyfree_line_377.svg) 0 0 / contain no-repeat;
          }
        }
      }
    }
    .whyfree_cmnt{
      grid-area: areaC;
      width: 450px;
      @media screen and (max-width: 767px) {
        width: 80%;
      }
    }
    .whyfree_imagedata{
      grid-area: areaB;
      @media screen and (max-width: 767px) {
        img{
          width: 160px;
          margin: 0 auto;
        }
      }
    }
  }
}