:root {
    --color-orange: #FDAB2A;
    --color-white: #FFFFFF; 
    --color-red: #E42515;
    --color-black: #333333;
    --color-gray: #999999;
    --color-green: #26B568;
    --color-transparent-black: rgba(0, 0, 0, 0.1);
    --color-transparent-orange: rgba(253, 171, 42, .9);
    --color-light-orange: #FFEAD1;
    --color-white-orange: #FFF9F2;

    --font-size-midium: 1rem;
   --font-size-base: calc(1rem / 16);
    --font-size-small: calc(12 * var(--font-size-base));
    --font-size-large: calc(24 * var(--font-size-base));
    --font-size-xlarge: calc(36 * var(--font-size-base));
    --font-size-xxlarge: calc(54 * var(--font-size-base));  
    --font-size-xxxlarge: calc(81 * var(--font-size-base));   
    --font-size-xxxxlarge: calc(122 * var(--font-size-base));
    --font-weight-bold: 700;
    /* font-sizeを基準にして倍率を指定できる */
    --line-height-none: 1;
    --line--height-regular: 1.5;
}


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){
            /* 最小幅を1280pxにしている */
            max-width: 1280px;
            margin: 0 auto;
        }    
    }        
    
    .sp_only{
        @media (min-width: 1280px){
        display: none;
     }
    
    }


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

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


.lp_header{
    background-color: var(--color-orange);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px;
           @media(min-width: 1280px){
            /* 最小幅を1280pxにしている */   
            padding: 17px 40px;
            gap: 10px;
        }    

    .title{
        color: var(--color-white);
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-none);
        text-shadow: 0px 2px 4px var(--color-transparent-black);
        @media (min-width: 1280px){
            /* 最小幅を1280pxにしている */
            font-size: var(--font-size-xlarge);
        }    
    }    

    .icon{
        width: 18px;
        height: 18px;
             @media (min-width: 1280px){
            /* 最小幅を1280pxにしている */     
                width: 46px;
                height: 46px;
            }    
        }    
    }    

    .lp_main{
        padding-bottom: 236px;
        @media (min-width: 1280px){
            /* 最小幅を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){
            /* 最小幅を1280pxにしている */     
                padding: 80px;
                gap: 60px;

            }    
        .sub_title{
            color: var(--color-red);
            line-height: var(--line-height-none);
            font-family: "Chilanka", cursive;
            text-align: center;
               @media (min-width: 1280px){
            /* 最小幅を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){
            /* 最小幅を1280pxにしている */    
            margin-top: 10px;
            font-size: var(--font-size-xlarge);
                }
            }       
            
        }    

        .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%;
                background-image: url("../images/kv_background.jpg");
                background-size: cover;
                background-repeat: no-repeat;
                position: relative;
                aspect-ratio: 360 / 246;
                @media (min-width: 1280px){
                  aspect-ratio:1280 / 900;
                  background-image: url("../images/kv_background_pc.jpg");
                }
                .title{
                    position: absolute;
                    line-height: 32px;
                    font-size:  var(--font-size-large);
                    font-weight: var(--font-weight-bold);
                    color: var(--color-orange);
                    text-shadow: 1px 1px 0 var(--color-white);
                    top: 10px;
                    left: 20px;
                    @media (min-width: 1280px){
                      font-size:  var(--font-size-xxxlarge);
                      text-shadow: 4px 4px 0 var(--color-white);
                      top: 40px;
                      left: 40px;
                      line-height: 140px;
                    }
                }

                .features{
                    display: flex;
                    align-items: center;
                    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){
                      font-size:  var(--font-size-large);
                      line-height: 40px;
                      width: 200px;
                      height: 200px;
                    }
                }

                .btn{
                    color: var(--color-white);
                    font-weight: var(--font-weight-bold);
                    background-color: var(--color-red);
                    line-height: var(--line-height-none);
                    border-radius: 6px;
                    position: absolute;
                    left: 20px;
                    bottom: 10px;
                    width: calc(100% - 40px);
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    @media (min-width: 1280px){
                      font-size:  var(--font-size-xxlarge);
                      border-radius: 16px;
                      right: 40px;
                      bottom: 40px;
                      left: revert;
                      width: 520px;
                      height: 160px;
                    }
                }

                .fukidashi{
                    position: absolute;
                    width: 55px;
                    height: 60px;
                    top: -34px;
                    right: -10px;
                    @media (min-width: 1280px){
                    width: 142px;
                    height: 153px;
                    top: -98px;
                    right: revert;
                    left: -57px;
                    transition: .2s;
                    }
                    &:hover{
                        opacity: .8;
                        cursor: pointer;
                    }
                }
            }
        

        .btn-link{
            background-color: var(--color-red);
            color: var(--color-white);
            font-size:  var(--font-size-large);
            font-size: var(--font-weight-bold);
            line-height: var(--line-height-none);
            padding: 20px;
            max-width: 564px;
            width: 100%;
            text-align: center;
            border-radius: 40px;
            @media (min-width: 1280px){
            transition: .25s;
              &:hover{
                opacity: 0.8;
              }
            }
        }
        
        .lp_appeal{
            .desc_wrap .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: 748px;
            }

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

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

                .feature{
                    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{
                        color: var(--color-red);
                        font-size: var(--font-size-large);
                        line-height: var(--line-height-none);
                        font-family: "Chilanka", cursive;
                        text-align: center;

                        @media (min-width: 1280px){
                          font-size:  var(--font-size-xxlarge);
                          position: absolute;
                          top: -24px;
                          left: 10px;
                          
                        }
                    }
                .title{
                    font-size: var(--font-size-midium);
                    font-weight: var(--font-weight-bold);
                    margin-top: 8px;
                    text-align: left;
                    @media (min-width: 1280px){
                      font-size:  var(--font-size-large);
                      margin-top: 0;
                      
                    }
                }
                .desc{
                    font-size: var(--font-size-small);
                    margin-top: 18px;

                    @media (min-width: 1280px){
                      font-size: var(--font-size-midium);
                      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){
          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;
            }
            .label{
                font-size: var(--font-size-midium);
                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-xlarge);
        }
    }

    .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-xlarge);
        }

        .price_amount{
            color: var(--color-red);
            font-size: var(--font-size-xxlarge);
            padding: 0 10px;
            @media (min-width: 1280px){
              font-size: var(--font-size-xxxlarge);
              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 {
        display: flex;
        align-items: center;
        margin-top: 10px;
        &::before{
            content: '';
            background-image: url("../images/warning_icon.svg"); 
            background-size: cover;
            background-repeat: no-repeat; 
            width: 24px;
            height: 21px;
            margin-right: 6px;
        }
        
        @media (min-width: 1280px){
           &::before{
            width: 32px;
            height: 28px;
            margin-right: 14px;
           }
        }
        &:first-child{
            margin-top: 0;
        }
    }

.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-xlarge);
    }
}

.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(--olor-white-orange);

        @media (min-width: 1280px){
          width: 280px;
          height: 90px;
          padding-left: 18px;
          font-size: var(--font-size-midium);
        }
    }
    
    .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: 56;
        }
    }

        .data_cell.batsu{
        background-image: url("../images/table_symbol_batsu.svg");
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
        @media (min-width: 1280px){
          background-size: 44px;
        }
    }
        .data_cell.sankaku{
        background-image: url("../images/table_symbol_sankaku.svg");
        background-size: 32px 28px;
        background-repeat: no-repeat;
        background-position: center;
        @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-large);
        font-weight: var(--font-weight-bold);
        color: var(--color-white);
        font-size: var(--font-size-midium);

        @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: 4px solid var(--color-orange);
    border-radius: 16px;
    box-shadow: 0 2px 5px var(--color-transparent-black);
    padding: 16px;
    display: flex;
    gap: 20px;
    position: relative;
    height: 240px;
    width: 100%;

    @media (min-width: 1280px){
      width: 550px;
      height: 267px;
    }
}
    .image{
        width: 112px;
        height: 122px;
        max-inline-size: none;
    }

    .desc span{
        color:  var(--color-red);
        font-weight: var(--font-weight-bold);
    }

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

    .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--prev{
        left: 0;
        @media (min-width: 1280px){
          left:-58px
        }
    }

    .splide__arrow--next{
        right: 0;
        @media (min-width: 1280px){
          right:-58px
        }
    }

    .splide__pagination{
        gap: 10px;
        bottom: -36px;
        @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;
    }

    .splide__arrow{
        width: 32px;
        height: 32px;
        opacity: 1;
        @media (min-width: 1280px){
          width: 48px;
          height: 48px;
        }
    }

}
}



.lp_question{
    .box_wrapper{
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        @media (min-width: 1280px){
            width: 946px;
        }
    }
    
    .question{
        width: 94%;
        font-size: 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-midium);
        }
    }

    .is-opened .answer{
        display: revert;
    }
    
    
    .box{
        background-color: var(--color-light-orange);
        border-radius: 8px;
        padding: 13px 8px;
        border: 2px xolid var(--color-light-orange);
        position: relative;
        &:hover{
            cursor: pointer;
        }
        &::after{
            position: absolute;
            content: "";
            background-image: url('../images/question_plus_mark.svg');
            background-size: cover;
            background-repeat: no-repeat;
            width: 14px;
            height: 14px;
            top: 20px;
            right: 10px;
        }
        @media (min-width: 1280px){
            border-radius: 16px;
            padding: 18px 38px;
          &::after{
            background-image: url('../images/question_plus_mark_pc.svg');
            width: 20px;
            height: 20px;
            top: 28px;
            right: 40px;
          }
        }
    }





    .box.is-opened{
        background-color: var(--color-white-orange);
        border: 2px solid var(--color-orange);
               &::after{
            position: absolute;
            content: "";
            background-image: url('../images/question_minus_mark.svg');
            background-size: cover;
            background-repeat: no-repeat;
            width: 14px;
            height: 4px;
            top: 27px;
            
        }
        @media (min-width: 1280px){
            &::after{
            background-image: url('../images/question_minus_mark_pc.svg');
            width: 20px;
            height: 4px;
            top: 36px;
            right: 40px;
            }
        }
    }
}


.lp_form{
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    @media (min-width: 1280px){
      width: 600px;
    }
    .field{
        width: 100%;
    }

     .field_input{
        margin-top: 10px;
        width: 100%;
    }
    
    .field_name{
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: var(--font-size-small);
        line-height: var(--line-height-none);
        font-weight: var(--font-weight-bold);
        @media (min-width: 1280px){
            margin-top: 20px;
            font-size: var(--font-size-large);
        }
        
        &::after{
            content: '必須';
            background-color: var(--color-red);
            color: var(--color-white);
            padding: 4px;
            border-radius: 8px;
            width: 50px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 1px;
            font-size: var(--font-size-small);
        }
        @media (min-width: 1280px){
            font-size: var(--font-size-midium);
        }
    }
    .field_name[data-field-name="option"]::after {
        display: none;
    }
    
    .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;
 }
 }

 .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: top 50% right 10px;

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

 .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);
    }
 }

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

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

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

 .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;
    transition: .2s ease;

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

    @media (min-width: 1280px){
      height: 80px;
      font-size:  var(--font-size-xlarge);
      letter-spacing: 4px;
      border-radius: 40px;
      margin-top: 20px;
      &:hover{
        cursor: pointer;
        opacity: 0.8;
      }
    }
}

.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);
    z-index: calc(infinity);
    opacity: 0;
    color: var(--color-white);


.inner{
    padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
@media (min-width: 1280px){
    margin-inline: auto;
    padding: 20px 40px;
    max-width: 1280px;
    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-xlarge);
          font-weight: var(--font-weight-bold);
          line-height: var(--line-height-none);
          width: 592px;
        }

        .icon {
            @media (min-width: 1280px){
              width: 40px;
              margin-right: 10px;
            }
        }
        .notice {
            @media (min-width: 1280px){
              margin-left: 40px;
              font-weight: var(--font-weight-bold);
              font-size: var(--font-size-midium);
              line-height: var(--line-height-none);
              display: flex;
              flex-direction: column;
              gap: 8px;
            }
        }
    }

    .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-xlarge);
          width: 558px;
        }
     }

     .btn[data-btn~="bg_white"]{
        background-color: var(--color-white);
        color: var(--color-orange);
     }

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

     .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{
        font-weight: var(--font-weight-bold);
        text-align: center;
     }

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

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


    }