:root {
   --color-orange: #FDAB2A;
   --color-light-orange: #FFEAD1;
   --color-white-orange: #FFF9F2;
   --color-white: #FFF;
   --color-gray: #999;
   --color-red: #E42515;
   --color-green: #26B568;
   --color-black: #333;
   --color-transparent-black: rgb(0 0 0 / .1);
   --color-transparent-orange: rgb(253 171 42 / .9);

   --font-size-base: calc(1rem / 16);

   --font-size-small: calc(12 * var(--font-size-base));
   --font-size-medium: 1rem;
   --font-size-large: calc(24 * var(--font-size-base));
   --font-size-x-large: calc(36 * var(--font-size-base));
   --font-size-xx-large: calc(54 * var(--font-size-base));
   --font-size-xxx-large: calc(81 * var(--font-size-base));
   --font-size-xxxx-large: calc(122 * var(--font-size-base));

   --font-weight-bold: 700;
   --line-height-none: 1;
   --line-height-regular: 1.5;

   /*font-size: 10px; */
}

/*
rem....一番上の階層に定義している大きさを基準として
　　　　サイズを設定することができる単位
*/

body {
    font-family: "Noto Sans JP",
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    color: var(--color-black);
    line-height: var(--line-height-regular);
  }
  .container {
   @media (min-width: 1280px) {
      max-width: 1280px;
      margin-inline: auto;
   }
}


.lp_header {
    background-color: var(--color-orange);
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 6px;

    @media (min-width: 1280px) {
      padding: 17px 40px;
      gap: 10px;
    }

 .title {
    color: var(--color-white);
    font-size: var(--font-size-small);
    /* 1rem = 10px */
    /* 2rem = 20px */
    /* 1.5rem = 15px */
    /* 一番上の階層の.rootで指定したから.
    しかし.rootにfont-sizeを指定するの
    は好ましくない*/
    /*font-size: 1rem; */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-none);
    text-shadow: 0px 2px 2px var(--color-transparent-black);
   /* 最小幅 1280px /1280px以上の場合に適用 */
    @media (min-width: 1280px) {
      font-size: var(--font-size-x-large);
    }
 }
 .icon {
    width: 18px;
    height: 18px;

    @media (min-width: 1280px) {
      width: 46px;
      height: 46px;
    }
 }
}

.lp_main {
   padding-bottom: 236px;

   @media (min-width: 1280px) {
     padding-bottom: 120px;
   }
}

.lp_section {
   padding: 40px 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 40px;
   position: relative;


   @media (min-width: 1280px) {
      padding: 80px;
      gap: 60px;
   }

   @media (min-width: 1280px) {
      padding: 80px;
    }


   .sub_title {
      font-family: "Chilanka", cursive;
      color: var(--color-red);
      line-height: var(--line-height-none);
      text-align: center;

      @media (min-width: 1280px) {
         font-size: var(--font-size-large);
       }
   }

   .title {
      margin-top: 4px;
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-bold);
      text-align: center;

      @media (min-width: 1280px) {
         color: var(--color-black);
         margin-top: 10px;
         font-size: var(--font-size-x-large);
       }
   }
}
.lp_section[data-lp-section~="bg_orange"] {
   background-color: var(--color-light-orange);
}
.lp_section[data-lp-section~="with_triangle"] {
   padding-top: 100px;
   &::after {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background-color: var(--color-light-orange);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
   }

   @media (min-width: 1280px) {
      padding-top: 220px;
      &::after {
         height: 160px;
   }
 }
}

.lp_section[data-lp-section~="bg_orange"].lp_section[data-lp-section~="with_triangle"]::after {
   background-color: var(--color-white);
}

.lp_kv {
   width: 100%;
   aspect-ratio: 360 / 246;
   background-image: url(../images/kv_background.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   position: relative;

   @media (min-width: 1280px) {
      aspect-ratio: 1280 / 900;
      background-image: url(../images/kv_background_pc.jpg);
   }

   .title {
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-bold);
      line-height: 32px;
      color: var(--color-orange);
      text-shadow: 1px 1px 0 var(--color-white);
      position: absolute;
      top: 10px;
      left: 20px;

      @media (min-width: 1280px) {
        font-size: var(--font-size-xxxx-large);
        text-shadow: 4px 4px 0 var(--color-white);
        top: 40px;
        left: 40px;
        line-height: 140px;
      }
   }
   .features {
      display: flex;
      justify-content: flex-start;
      gap: 6px;
      position: absolute;
      top: 86px;
      left: 20px;

      @media (min-width: 1280px) {
         top: 500px;
         left: 40px;
      }
   }

   .feature {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background-color: var(--color-white);
      color: var(--color-orange);
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-bold);
      line-height: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;

      @media (min-width: 1280px) {
         line-height: 40px;
         font-size: var(--font-size-x-large);
         width: 200px;
         height: 200px;
      }
    }

   .btn {
      color: var(--color-white);
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-none);
      background-color: var(--color-red);
      border-radius: 6px;
      position: absolute;
      left: 20px;
      bottom: 10px;
      width: calc(100% - 20px - 20px);
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;

      @media (min-width: 1280px) {
        font-size: var(--font-size-xx-large);
        border-radius: 16px;
        right: 40px;
        bottom: 40px;
        left: revert;
        width: 520px;
        height: 160px;
        transition: .25s;

        &:hover {
         opacity: .8;
         cursor: pointer;
        }
      }
    }
    .fukidashi {
      position: absolute;
      width: 55px;
      height: 60px;
      top: -34px;
      right: -10px;

      @media (min-width: 1280px) {
         width: 142px;
         height: 153px;
         top: -98px;
         left: -57px;
         right: revert;
      }
    }
   }
   


.link_btn {
   background-color: var(--color-red);
   color: var(--color-white);
   font-size: var(--font-size-large);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-none);
   padding: 20px;
   width: 100%;
   max-width: 564px;
   text-align: center;
   border-radius: 40px;

   @media (min-width: 1280px) {
      transition: .25s;
      &:hover {
         opacity: .8;
      }
   }
 }
.lp_appeal {
   .desc_wrapper .desc {
      margin-top: 20px;
      font-weight: var(--font-weight-bold);

      &:first-child {
         margin-top: 0;
      }

      @media (min-width: 1280px) {
        text-align: center;
      }
   }
   .video {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      max-width: 784px;
   }

   .feature_group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;

      @media (min-width: 1280px) {
        gap: 224px;
      }
   }
   .feature {
      display: flex;
      flex-direction: column;
      background-color: var(--color-light-orange);
      border-radius: 8px;
      margin-top: 60px;
      padding: 212px 30px 30px 30px;
      position: relative;

      @media (min-width: 1280px) {
        margin-top: 100px;
        padding: 50px 306px 30px 30px;
        width: 938px;

        &:last-child {
         margin-bottom: 168px;
        }

      }
      
      .image {
         position: absolute;
         top: -60px;
         left: calc(50% - 122px / 2);
         width: 122px;
         height: 254px;

         @media (min-width: 1280px) {
           width: 270px;
           height: 560px;
           top: -100px;
           right: 0;
           left: revert;
           max-block-size: revert;
         }
      }

      .sub_title {
         font-family: "Chilanka", cursive;
         font-size: var(--font-size-large);
         color: var(--color-red);
         line-height: var(--line-height-none);
         text-align: center;

         @media (min-width: 1280px) {
           font-size: var(--font-size-xx-large);
           position: absolute;
           top: -24px;
           left: 10px;
         }
      }
      .title {
         color: var(--color-black);
         font-size: var(--font-size-medium);
         font-weight: var(--font-weight-bold);
         margin-top: 8px;

         @media (min-width: 1280px) {
           font-size: var(--font-size-large);
           margin-top: 0;
           text-align: left;
         }
      }
      .desc {
         font-size: var(--font-size-small);
         margin-top: 18px;

         &:first-of-type {
            margin-top: 10px;
         }

         @media (min-width: 1280px) {
           font-size: var(--font-size-medium);
           margin-top: 24px;

           &:first-of-type {
            margin-top: 20px;
         }
       }
      }
    }
    .feature[data-feature~="reversed"] {
      @media (min-width: 1280px) {
        padding: 50px 30px 30px 290px;

        .image {
         right: revert;
         left: 0;
        }
        .sub_title {
         left: 280px;
        }
     }
   }
  }



.lp_course {
   .case_group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;

      @media (min-width: 1280px) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 60px 30px;
      }
   }
   .case {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;

      @media (min-width: 1280px) {
        width: 340px;
      }

      .image {
         width: 120px;
         height: 120px;
         border-radius: 50%;
      }
      .label {
         font-size: var(--font-size-medium);
         font-weight: var(--font-weight-bold);
         color: var(--color-red);
         text-align: center;
      }
   }
   .sensei_title {
      text-align: center;
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-bold);

      @media (min-width: 1280px) {
        font-size: var(--font-size-x-large);
      }
   }

   .sensei_wrapper {
      position: relative;
      height: 199px;
      width: 100%;

      @media (min-width: 1280px) {
        height: 310px;
      }
   }

   .sensei_slider {
      position: absolute;
      top: 0;
      left: -20px;
      width: 100vw;

      @media (min-width: 1280px) {
        left: -80px;
        width: 1280px;
      }
   }
}

.lp_pricing {
   .price {
      text-align: center;
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-bold);

      @media (min-width: 1280px) {
        font-size: var(--font-size-x-large);
      }
   }

   .price_amount {
      font-size: var(--font-size-xx-large);
      color: var(--color-red);
      padding: 0 10px;

      @media (min-width: 1280px) {
        font-size: var(--font-size-xxx-large);
        padding: 0 20px;
      }
   }

   .conditions li {
      display: flex;
      align-items: center;
      margin-top: 10px;

      &::before {
         content: '';
         background-image: url("../images/check_icon.svg");
         background-size: cover;
         background-repeat: no-repeat;
         width: 24px;
         height: 24px;
         margin-right: 6px;
      }

      @media (min-width: 1280px) {
         font-size: var(--font-size-large);

         &::before {
            width: 32px;
            height: 32px;
            margin-right: 14px;
         }
      }

      &:first-child {
         margin-top: 0;
      }
   }

   .conditions .warning {
      &::before {
         background-image: url("../images/warning_icon.svg");
         width: 24px;
         height: 21px;
      }

         @media (min-width: 1280px) {
            &::before {
            width: 32px;
            height: 28px;
         }
      }
   }

   .service_table_title {
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-bold);
      text-align: center;

      @media (min-width: 1280px) {
        font-size: var(--font-size-x-large);
      }
   }
   .service_table_wrapper{
      position: relative;
      width: 100%;
      height: 426px;

      @media (min-width: 1280px) {
        height: revert;
      }

   }

   .service_table_scroll {
      position: absolute;
      left: 0;
      top: 0;
      width: calc(100vw - 20px);
      overflow-x: scroll;



      &::-webkit-scrollbar {
         width: 0;
      }

      @media (min-width: 1280px) {
         position: revert;
         width: revert;
         overflow-x: revert;
      }
   }

   .service_table {
      border-collapse: separate;
      border-spacing: 1px;
      table-layout: fixed;
      width: 100%;


      .header_cell,.data_cell{
         width: 200px;
         height: 60px;
         padding-left: 12px;
         font-size: var(--font-size-small);
         vertical-align: middle;
         background-color: var(--color-white-orange);

         @media (min-width: 1280px) {
            width: 280px;
            height: 90px;
            padding-left: 18px;
            font-size: var(--font-size-medium);
         }
      }

      .data_cell {
         background-image: url('../images/table_symbol_maru.svg');
         background-size: 32px;
         background-repeat: no-repeat;
         background-position: center;

         @media (min-width: 1280px) {
           background-size: 56px;
         }
      }

      .data_cell.batsu {
         background-image: url('../images/table_symbol_batsu.svg');
         background-size: 24px;

         @media (min-width: 1280px) {
           background-size: 44px;
         }
      }

      .data_cell.sankaku {
         background-image: url('../images/Polygon 1.png');
         background-size: 32px 28px;

         @media (min-width: 1280px) {
           background-size: 56px 49px;
         }
      }

      .row {
         &:nth-child(even) {
            .header_cell, .data_cell {
               background-color: var(--color-light-orange);
            }
         }

         .header_cell:first-child {
            font-weight: var(--font-weight-bold);
            position: sticky;
            left: 0;
            width: 140px;

            @media (min-width: 1280px) {
              width: revert;
            }
         }
      }

      .header_row {
         .header_cell, .data_cell {
            background-color: var(--color-orange);
            font-size: var(--font-size-medium);
            font-weight: var(--font-weight-bold);
            color: var(--color-white);

            @media (min-width: 1280px) {
               font-size: var(--font-size-large);
            }
      }
   }
 }
}

.lp_voice {
   .card_wrapper {
      padding: 0 18px;
      margin-bottom: 36px;

      @media (min-width: 1280px) {
        padding: 0;
        margin-bottom: 60px;
      }
   }
   .card {
      background-color: var(--color-white);
      border: solid 4px var(--color-orange);
      border-radius: 16px;
      box-shadow: 0 2px 5px var(--color-transparent-black);
      padding: 16px;
      display: flex;
      gap: 20px;
      width: 100%;
      height: 240px;
      position: relative;

      @media (min-width: 1280px) {
        width: 550px;
        height: 267px;
      }

   }
   .image {
      width: 112px;
      height: 122px;
      max-inline-size: none;
   }
   .desc {
      @media (min-width: 1280px) {
        font-size: var(--font-size-large);
      }
   }
   .desc span {
      color: var(--color-red);
      font-weight: var(--font-weight-bold);
   }
   .name {
      position: absolute;
      right: 20px;
      bottom: 20px;

      @media (min-width: 1280px) {
         font-size: var(--font-size-large);
       }
   }

   .rating_label {
      font-size: var(--font-size-small);
      margin-top: 10px;
   }

   .stars {
     display: flex;
     gap: 2px;
   }

   .star {
      width: 18px;
      height: 18px;
      background-image: url('../images/star_gray.svg');
      background-size: cover;

      .active_star {
         display: block;
         width: 100%;
         height: 18px;
         object-fit: cover;
         object-position: top 0 left 0;
      }
   }

   .star[data-star-rate="0%"] {
      .active_star {
         width: 0%;
      }
   }

   .star[data-star-rate="50%"] {
      .active_star {
         width: 50%;
      }
   }

   .star[data-star-rate="100%"] {
      .active_star {
         width: 100%;
      }
   }

   .splide__arrow {
      width: 32px;
      height: 32px;
      opacity: 1;

      @media (min-width: 1280px) {
        width: 48px;
        height: 48px;
      }
   }
   .splide__arrow--prev {
      left: 0;
      @media (min-width: 1280px) {
        left: -58px;
      }
   }
   .splide__arrow--next {
      right: 0;
      @media (min-width: 1280px) {
        right: -58px;
      }
   }
   .splide__pagination {
      bottom: -36px;
      gap: 10px;

      @media (min-width: 1280px) {
        bottom: -60px;
      }
   }
   .splide__pagination__page {
      width: 16px;
      height: 16px;
      background-color: var(--color-white);
      border: 2px solid var(--color-orange);

      @media (min-width: 1280px) {
         width: 20px;
         height: 20px;
      }
   }
   .splide__pagination__page.is-active {
      background-color: var(--color-orange);
      transform: none;
   }
}

.lp_question {
   .box_wrapper {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%;

      @media (min-width: 1280px) {
        width: 946px;
      }
   }
   .box {
      background-color: var(--color-light-orange);
      border-radius: 8px;
      border: 2px solid var(--color-light-orange);
      padding: 13px 8px;
      position: relative;

      &::after {
         position: absolute;
         content: "";
         width: 14px;
         height: 14px;
         top: 20px;
         right: 10px;
         background-image: url(../images/question_plus_mark.svg);
         background-size: cover;
         background-repeat: no-repeat;
      }

      @media (min-width: 1280px) {
        border-radius: 16px;
        padding: 18px 38px;

        &:hover {
         cursor: pointer;
        }

        &::after {
         width: 20px;
         height: 20px;
         top: 28px;
         right: 40px;
         background-image: url(../images/question_plus_mark.svg);
        }
      }
   }
   .box.is-opened {
      background-color: var(--color-white-orange);
      border: 2px solid var(--color-orange);

      &::after {
         width: 14px;
         height: 4px;
         top: 27px;
         background-image: url(../images/question_minus_mark.svg);
      }

      @media (min-width: 1280px) {
          &::after {
          width: 20px;
          height: 4px;
          top: 36px;
          right: 40px;
          background-image: url(../images/question_minus_mark.svg);
         }
       }
   }
   .question {
      width: 94%;
      font-weight: var(--font-weight-bold);

      @media (min-width: 1280px) {
        font-size: var(--font-size-large);
      }
   }
   .answer {
      display: none;
      font-size: var(--font-size-small);
      margin-top: 10px;

      @media (min-width: 1280px) {
        font-size: var(--font-size-medium);
      }
   }
   .is-opened .answer {
      display: revert;

   }
}

.lp_form {
   display: flex;
   flex-direction: column;
   gap: 30px;
   width: 100%;

   @media (min-width: 1280px) {
     width: 600px;
   }

   .field {
      width: 100%;
   }
   .field_name {
      display: flex;
      align-items: center;
      gap: 8px;
      line-height: var(--line-height-none);
      font-weight: var(--font-weight-bold);

      &::after {
         content: "必須";
         background-color: var(--color-red);
         color: var(--color-white);
         padding: 4px;
         border-radius: 8px;
         font-size: var(--font-size-small);
         width: 50px;
         height: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
         letter-spacing: 1px;
      }

      @media (min-width: 1280px) {
        font-size: var(--font-size-large);

        &::after {
         font-size: var(--font-size-medium);
        }
      }
   }

   .field_name[data-field-name="option"]::after {
      display: none;
   }
   .field_input {
      margin-top: 10px;
      width: 100%;

      @media (min-width: 1280px) {
         margin-top: 20px;
         font-size: var(--font-size-large);
       }
   }
   .input_text {
      line-height: var(--line-height-none);
      padding: 17px 10px;
      border: none;
      background-color: var(--color-white);
      border-radius: 8px;

      &::placeholder {
         color: var(--color-gray);
      }

      @media (min-width: 1280px) {
        padding: 28px 30px;
        border-radius: 16px;
      }
   }

   .input_textarea {
      line-height: var(--line-height-none);
      padding: 14px 10px;
      height: 140px;
      border: none;
      background-color: var(--color-white);
      border-radius: 8px;

      &::placeholder {
         color: var(--color-gray);
      }

      @media (min-width: 1280px) {
        padding: 20px;
        height: 180px;
        border-radius: 16px;
      }

      @media (min-width: 1280px) {
        padding: 28px 30px;
        border-radius: 16px;
      }
   }

   .radio_group {
      display: flex;
      justify-content: flex-start;
      gap: 8px;

      label {
         display: flex;
         align-items: center;
         gap: 4px;
      }

      @media (min-width: 1280px) {
        label:hover {
         cursor: pointer;
        }
      }
   }
   .radio {
      background-color: var(--color-white);
      width: 16px;
      height: 16px;
      border: 2px solid var(--color-gray);
      border-radius: 50%;

      &:checked {
         border: 4px solid var(--color-red);
      }
   }

   .select {
      padding: 17px 10px;
      border: none;
      background-color: var(--color-white);
      border-radius: 8px;
      background-image: url(../images/selectbox_icon.svg);
      background-repeat: no-repeat;
      background-size: 20px 10px;
      background-position: right 10px top 50%;

      @media (min-width: 1280px) {
        width: 300px;
        padding: 28px 30px;
        border-radius: 16px;
        background-size: 28px 13px;
        background-position: right 18px top 50%;
      }
   }

   .checkbox_group {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 8px;

      label {
         display: flex;
         align-items: center;
         gap: 4px;
      }

      @media (min-width: 1280px) {
        label:hover {
         cursor: pointer;
        }
      }
   }
   .checkbox {
      background-color: var(--color-white);
      width: 16px;
      height: 16px;
      border: 2px solid var(--color-gray);
      border-radius: 4px;

      &:checked {
         border: 4px solid var(--color-red);
      }
   }

   .submit p {
      font-size: var(--font-size-small);

      @media (min-width: 1280px) {
        text-align: center;
        font-size: var(--font-size-medium);
      }
   }
   .submit p a {
      color: var(--color-red);
      font-weight: var(--font-weight-bold);
      text-decoration: underline;
   }

   .submit_btn {
      color: var(--color-white);
      background-color: var(--color-green);
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-none);
      letter-spacing: 2px;
      border-radius: 36px;
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;

      &:disabled {
         background-color: var(--color-gray);
      }

      @media (min-width: 1280px) {
        height: 80px;
        font-size: var(--font-size-x-large);
        letter-spacing: 4px;
        border-radius: 40px;
        margin-top: 20px;
        transition: .25s;

        &:hover {
          opacity: .8;
          cursor: pointer;
        }
      }
   }

   .error:not(.checkbox_group) {
      border: 2px solid var(--color-red);
   }
   .error_msg {
      color: var(--color-red);
      margin-top: 10px;
      display: none;
   }
   .error + .error_msg {
      display: revert;
   }
}

.lp_footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: var(--color-transparent-orange);
   color: var(--color-white);
   z-index: calc(infinity);
   opacity: 0;

   .inner {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;

      @media (min-width: 1280px) {
        max-width: 1280px;
        margin-inline: auto;
        padding: 20px 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 50px;
      }
   }

   .telephone {
      @media (min-width: 1280px) {
        border-top: 4px solid var(--color-white);
        border-bottom: 4px solid var(--color-white);
        padding: 16px 0;
        display: flex;
        align-items: center;
        font-size: var(--font-size-x-large);
        font-weight: var(--font-weight-bold);
        ine-height: var(--line-height-none);
        width: 592px;
      }
      .icon {
         @media (min-width: 1280px) {
           width: 40px;
           margin-right: 10px;
         }
      }
      .notice {
         @media (min-width: 1280px) {
            display: flex;
            flex-direction: column;
            gap: 8px;
           margin-left: 40px;
           font-weight: var(--font-weight-bold);
           font-size: var(--font-size-medium);
           line-height: var(--line-height-none);
         }
      }
   }

   .btn {
      background-color: var(--color-red);
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-bold);
      letter-spacing: 4px;
      border-radius: 16px;
      box-shadow: 0 4px 8px var(--color-transparent-black);
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      @media (min-width: 1280px) {
        font-size: var(--font-size-x-large);
        width: 558px;
      }
   }
    
   .btn.sp_only {
      @media (min-width: 1280px) {
      display: none;
   }
   }
 
   .btn[data-btn~="bg_white"] {
      background-color: var(--color-white);
      color: var(--color-orange);
   }
   .fukidashi {
      position: absolute;
      width: 60px;
      height: 69px;
      top: -43px;
      left: -13px;

      @media (min-width: 1280px) {
        width: 111px;
        height: 111px;
        top: -70px;
      left: -30px;
      }
   }
   .icon {
      margin-right: 4px;
   }
   .available_hours {
      text-align: center;
      font-weight: var(--font-weight-bold);
   }
}

.fade_in {
   animation: fadeIn .3s;
   animation-fill-mode: forwards;
}

@keyframes fadeIn {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

.sp_only {
   @media (min-width: 1280px) {
   display: none;
}
}
.pc_only {
   display: none;

   @media (min-width: 1280px) {
   display: revert;
   }
}