@charset "utf-8";

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {

    font-family: 'Noto sans JP' ;
    font-weight: 600;
    color: #363636;
    line-height: 1.6;
}   

a {
    transition: all .5s;
}

a:hover {
    opacity: .7;
}

/* header area */
.header_area {
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid #F0F5F6;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;

}

.header_navi {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 0 16px;

    @media(600px < width){
        max-width: 1200px;
        height: 90px;
        margin: 0 auto;    
    }
}



.header_logoarea_img {
    width: 120px;

    @media(600px < width){
        width: 150px;
    }
}



.header_navi_area {
    display: flex;
    align-items: center;

    @media(600px > width){
        display: none;
    }
}

.header_navi_item {
    padding-right: 16px;
}

.header_navi_item:last-child{
    padding-right:0;
  }

.header_navi_textlink {
    color: #17322B;
    font-size: 1.4rem
}

.header_navi_textlink::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(../images/arrow_u.png);
    background-size: contain;
    vertical-align: middle;
    margin-left: 4px;
  }

.pc_loginbtn_area {
    display: none;

    @media(600px < width){
        display: block;
        margin-right: 8px;
    }
}
  


/* SP hamburger */
.hamburger {
    
    @media(600px < width){
        display: none;
    }
}

.hamburger_btn {
    display: flex;
    height: 70px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #fff;
    position: relative;
}

.hamburger_btn span,
.hamburger_btn span:before,
.hamburger_btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #50737E;
    position: absolute;
}
.hamburger_btn span:before {
    bottom: 8px;
}
.hamburger_btn span:after {
    top: 8px;
}

.menu {
    width: 80%;
    height: calc(100% - 70px);
    position: fixed;
    bottom: 0;
    left: 100%;
    z-index: 80;
    background-color: #F4F4F4;
    transition: all 0.5s;
}

.menu_back {
    display: none;
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0;
}

#hamburger_check {
    display: none;
}

#hamburger_check:checked ~ .menu {
    left: 20%;
}

#hamburger_check:checked ~ .menu_back {
    display: block;
    opacity: 1;
}

#hamburger_check:checked ~ .hamburger_btn span {
    background-color: transparent;
}
#hamburger_check:checked ~ .hamburger_btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#hamburger_check:checked ~ .hamburger_btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

.menu_loginbtn_area {
    padding: 32px 0 24px;
    margin: 0 24px;
    border-bottom: 2px solid #BAC9CE;
}

.login_btn {
    color: #23B18F;
    font-size: 1.6rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 3px solid #23B18F;
    background: #FFFFFF;
    padding: 6px 24px;
    box-shadow: 0px 2px 4px rgba(38, 58, 64, 0.2);
    border-radius: 24px;
    box-sizing: border-box;
 }


.menu_item_area {
    margin: 32px 24px;
}

.menu_item {
    margin-bottom: 48px;
}

.menu_item_link {
    color: #17322B;
    font-size: 16px;
}

.menu_item_link::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(../images/arrow_u.png);
    background-size: contain;
    vertical-align: middle;
    margin-left: 8px;
}

.menu_primarybtn_area {
    margin: 0 24px;
}

.menu_primary_btn {
    color: #fff;
    font-size: 1.6rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 0px;
    background: linear-gradient(92.3deg, #FF38A4 3.3%, #FFB23E 118.66%);
    box-shadow: 0px 2px 4px rgba(255, 99, 128, 0.2);
    border-radius: 100px;
    position: relative;
}


.menu_primary_btn::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(../images/arrow_r_WH.png);
    background-size: contain;
    vertical-align: middle;
    margin-left: 16px;
    position: absolute;
    top: 20px;
    right: 16px;
}


.header_contact_menu_area{
    display: flex;
    align-items: center;


}


.header_primary_btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    background: linear-gradient(92.3deg, #FF38A4 3.3%, #FFB23E 118.66%);
    box-shadow: 0px 2px 4px rgba(255, 99, 128, 0.2);
    border-radius: 50px;
    color: #fff;
    font-size: 1.2rem;
    margin-right: 4px;

    @media(600px < width){
        font-size: 1.6rem;
        padding: 8px 24px;
        margin-right: 0;
    }
}



/* main area */

.bg_area {
background: url(../images/bg_01_15.png);
background-size: 437px 246px;
    @media(600px < width){
        background-size: 874px 493px;
    }
}


.main_content {
    padding-top: 71px;

    @media(600px < width){
        padding-top: 45px;
     }
}



/* fv area */
.fv_area {
    
    @media(600px < width){
        background-image: url(../images/bg_pc_gd.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding-top: 30px;
     }
}

.fv_content_pcgroup {
    @media(600px < width){
        display: grid;
        grid-template-columns: 1fr 550px;
        gap: 40px;
        justify-content: center;
        align-items: start;
        padding: 35px 0;
        max-width: 1200px;
        margin: 0 auto;
      }
}

.fv_content_top {
    padding: 32px 24px 12px;
    text-align: center;
    
    @media(600px < width){
        padding: 0;
        text-align: center;
        grid-column: 1;
        grid-row: 1;
    }
}

.fv_checkboxarea {
    display: inline-block;
    text-align: left;
    
    @media(600px < width){
        display: inline-block;
        text-align: left;
    }
}

.fv_catchphrase {
    font-size: 2.2rem;
    margin-top: 12px;
    margin-bottom: 0px;
    text-align: center;

    @media(600px < width){
        font-size: 3.2rem;
        font-weight: 600;
        margin-top: 24px;
        margin-bottom: 0px;
        text-align: center;
      }
}

.fv_logoarea {
    margin-bottom: 16px;
    margin-top: 0px;

    @media(600px < width){
        margin-bottom: 16px;
        margin-top: 0px;
    }
}

.fv_logoarea_text {
    font-size: 1.2rem;
    color: #00988F;
    margin-bottom: 4px;
    text-align: center;

    @media(600px < width){
        font-size: 1.6rem;
    }
}

.fv_logoarea_logo{

    @media(600px < width){
        max-width: 570px;
    }
}

.fv_logoarea_img {
    width: 100%;
}

.fv_content_text {
    font-size: 1.2rem;
    margin-bottom: 4px;
    text-shadow: 
        2px 2px 0 white,
        -2px -2px 0 white,
        2px -2px 0 white,
        -2px 2px 0 white;

    @media(600px < width){
        font-size: 2.2rem;
        margin-bottom: 6px; 
    }
}



.fv_checkboxarea_text {
    font-size: 1.8rem;
    font-weight: 500;
    color: #00988F;
    margin-bottom: 4px;
    vertical-align: initial;
    display: block;
    text-shadow: 
        3px 3px 0 white,
        -3px -3px 0 white,
        3px -3px 0 white,
        -3px 3px 0 white;

    @media(600px < width){
        font-size: 2.6rem;
    }
}

.fv_checkboxarea_text::before  {
    content: "";
    display: inline-block;
    background: url(../images/checkbox.png) no-repeat;
    width: 29px;
    height: 29px;
    background-size: contain;
    vertical-align: middle;
    margin-right: 4px;
    filter: drop-shadow(2px 2px 0 white) 
            drop-shadow(-2px -2px 0 white) 
            drop-shadow(2px -2px 0 white) 
            drop-shadow(-2px 2px 0 white);

    @media(600px < width){
        width: 42px;
        height: 42px;
    }
}

.checkboxarea_text_s {
    font-size: 1.6rem;
    vertical-align: inherit;

    @media(600px < width){
        font-size: 2.2rem;
    }
}

.fv_content_middle {
    padding: 12px 0;
    background-image: url(../images/bg_sp_gd.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 16px 0;

    @media(600px < width){
        background-image: none;
        background-size: cover;
        padding: 0;
        margin: 16px 0;
        display: block;
    }
}


.fv_illust_area{
    margin: 0 auto;
    max-width: 327px;

    @media(600px < width){
        max-width: 570px;
        margin: 0;
        display: block;
    }
}

.fv_illust_area img {
    display: block;
    width: 100%;
    height: auto;
}

.fv_illust_img {
    width: 100%;
    display: block;
    max-width: 100%;
    height: auto;
}
.fv_content_bottom {
    padding: 32px 0 8px;
    background-color: #F1FFD2;
    position: relative;

    @media(600px < width){
        padding: 24px 0 70px 0;
        background-color: transparent;
    }
}

.fv_content_bottom::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.fv_primarybtn_area {
    margin: 0 auto;
    position: relative;
    max-width: 327px;

    @media(600px < width){  
        max-width: 730px;
    }
}

.fv_primary_btn {
    color: #fff;
    font-size: 1.6rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 0px 16px 10px;
    background: linear-gradient(92.3deg, #FF38A4 3.3%, #FFB23E 118.66%);
    box-shadow: 0px 2px 4px rgba(255, 99, 128, 0.2);
    border-radius: 100px;
    position: relative;

    @media(600px < width){
        font-size: 2.2rem;
        padding: 20px 0; 
        padding-left: 7%;
    }
}

.fv_primary_btn::after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(../images/arrow_r_WH.png);
    background-size: cover;
    vertical-align: middle;
    top: 50%;
    right: 16px;
    transform: translateY(-50%) translateX(-50%);

     @media(600px < width){
        width: 26px;
        height: 26px;
        right: 32px;
        top: 25px;
    }
}

.fv_btnfree_img {
    width: 62px;
    position: absolute;
    left: 16px;
    bottom: 19px;

    @media(600px < width){
        width: 86.09px;
        left: 171px;
        bottom: 22px;
    }
}

/* fv form area */
.fv_form_area {
    padding: 32px 24px;
    max-width: 570px;
    
    @media(600px < width){
        padding: 0;
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        max-width: 570px;
        margin-left: -20px;
    }
}


.fv_form_title {
    font-size: 2.4rem;
    color: #363636;
    margin: 0 0 16px 0;
    font-weight: 700;
    text-align: center;
    
    @media(600px < width){
        font-size: 2.4rem;
        margin: 0 0 20px 0;
    }
}

.fv_form_container {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 12px;
    
    @media(600px < width){
        padding: 24px 20px;
        border-radius: 12px;
        margin-top: 16px;
    }
}

.fv_form {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.fv_form_group {
    margin-bottom: 4px;
    
    @media(600px < width){
        margin-bottom: 12px;
    }
}

.fv_form_label {
    display: block;
    font-size: 1.6rem;
    color: #17322B;
    font-weight: 600;
    margin-bottom: 8px;
    
    @media(600px < width){
        font-size: 1.6rem;
        margin-bottom: 8px;
    }
}

.fv_form_input,
.fv_form_input {
    width: 100%;
    height: 48px;
    padding: 8px 16px;
    border: 1px solid #99B5BE;
    border-radius: 4px;
    font-size: 1.6rem;
    font-family: 'Noto Sans JP', sans-serif;
    color: #363636;
    background-color: #FFFFFF;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    font-weight: 400;
    
    @media(600px < width){
        height: 48px;
        padding: 8px 16px;
        font-size: 1.6rem;
    }
}

.fv_form_textarea {
    width: 100%;
    height: 70px;
    padding: 8px 16px;
    border: 1px solid #99B5BE;
    border-radius: 4px;
    font-size: 1.6rem;
    font-family: 'Noto Sans JP', sans-serif;
    color: #363636;
    background-color: #FFFFFF;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    font-weight: 400;
    resize: vertical;
    
    @media(600px < width){
        height: 70px;
        padding: 8px 16px;
        font-size: 1.6rem;
    }
}

.fv_form_input:focus,
.fv_form_textarea:focus {
    outline: none;
    border-color: #23B18F;
    border-width: 2px;
    padding: 7px 15px;
    
    @media(600px < width){
        padding: 7px 15px;
    }
}

.fv_form_input::placeholder,
.fv_form_textarea::placeholder {
    color: #BAC9CE;
    font-weight: 300;
}

.fv_form_radio_group {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    
    @media(600px < width){
        gap: 24px;
    }
}

.fv_form_radio {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.6rem;
    color: #363636;
    font-weight: 700;
    
    @media(600px < width){
        font-size: 1.6rem;
    }
}

.fv_form_radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0 8px 0 0;
    width: 24px;
    height: 24px;
    border: 1px solid #DDEAEE;
    border-radius: 50%;
    background-color: #FFFFFF;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: inset 2px 4px 4px rgba(38, 58, 64, 0.15);
    padding: 4px;
    
    @media(600px < width){
        width: 24px;
        height: 24px;
        margin: 0 8px 0 0;
    }
}

.fv_form_radio input[type="radio"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10.67px;
    height: 10.67px;
    border-radius: 50%;
    background-color: #DDEAEE;
    
    @media(600px < width){
        width: 10.67px;
        height: 10.67px;
    }
}

.fv_form_radio input[type="radio"]:checked {
    border-color: #23B18F;
    background-color: #fff;
}

.fv_form_radio input[type="radio"]:checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10.67px;
    height: 10.67px;
    border-radius: 50%;
    background-color: #23B18F;
    
    @media(600px < width){
        width: 10.67px;
        height: 10.67px;
    }
}

.fv_form_radio input[type="radio"]:hover {
    border-color: #23B18F;
}

.fv_form_radio input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(35, 177, 143, 0.2);
}

.fv_form_submit {
    width: 100%;
    height: 75px;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background: linear-gradient(92.3deg, #FF38A4 3.3%, #FFB23E 118.66%);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0px 2px 4px rgba(255, 99, 128, 0.2);
    margin-top: 0px;
    position: relative;
    font-family: 'Noto Sans JP', sans-serif;
    
    @media(600px < width){
        font-size: 2.2rem;
        height: 75px;
        padding: 16px;
    }
}

.fv_form_submit::after {
    content: "";
    position: absolute;
    right: 16px;
    width: 26px;
    height: 26px;
    background-image: url(../images/arrow_r_WH.png);
    background-size: cover;
    
    @media(600px < width){
        width: 26px;
        height: 26px;
        right: 16px;
    }
}

.fv_form_submit:hover {
    box-shadow: 0px 6px 12px rgba(255, 99, 128, 0.4);
    transform: translateY(-2px);
}

.fv_form_submit:active {
    transform: translateY(0);
}

/* 必須マーク */
.fv_form_required {
    background-color: #FFFFFF;
    color: #FF5252;
    font-size: 1.2rem;
    padding: 0px 8px;
    border-radius: 12px;
    margin-right: 8px;
    font-weight: 400;
    border: 1px solid #FF5252;
    display: inline-block;
    line-height: 1.6;
    
    @media(600px < width){
        font-size: 1.2rem;
    }
}

/* プライバシーポリシー */
.fv_form_privacy {
    text-align: center;
    margin: 16px 0 16px 0;
}

.fv_form_privacy_text {
    font-size: 1.4rem;
    color: #363636;
    margin: 0;
    font-weight: 700;

    @media(600px < width){
        font-size: 1.4rem;
    }
}

.fv_form_privacy_link {
    color: #363636;
    text-decoration: underline;
    font-weight: 700;
    transition: color 0.3s ease;
}

.fv_form_privacy_link:hover {
    color: #23B18F;
    opacity: 1;
}

/* エラーメッセージ */
.fv_form_error {
    display: none;
    color: #FF5252;
    font-size: 1.2rem;
    margin-top: 4px;
    font-weight: 400;
    
    @media(600px < width){
        font-size: 1.2rem;
    }
}

.fv_form_error.show {
    display: block;
}

/* エラー時の赤枠線 */
.fv_form_input.error,
.fv_form_textarea.error {
    border-color: #FF5252;
    border-width: 1px;
}

.fv_form_input.error:focus,
.fv_form_textarea.error:focus {
    border-color: #FF5252;
    border-width: 2px;
    padding: 7px 15px;
    
    @media(600px < width){
        padding: 7px 15px;
    }
}



/* problem_area */
.problem_area {
    padding: 32px 24px 56px;
    background: linear-gradient(179deg, rgba(189, 255, 48, 0.25) 36.82%, rgba(40, 255, 177, 0.25) 109.1%);
    position: relative;
    text-align: center;

    @media(600px < width){
        padding: 24px 40px 96px;
       display: flex;
       justify-content: center;
    }
}

.problem_area_bg {
    background: linear-gradient(135deg, #23B18F 0%, #C2F19E 100%);
    border-radius: 13px;
    padding: 3px;
    box-sizing: border-box;
}

.problem_area_bginner {
    background-color: rgba(255, 255, 255, 0.99);
    padding: 32px 13px;
    border-radius: 10px;
    box-sizing: border-box;

    @media(600px < width){ 
        padding: 60px 40px 40px;
    }

}

.problem_heading {
    font-size: 2.4rem;
    color: #50737E;
    margin-bottom: 8px;

    @media(600px < width){
        font-size: 2.8rem;
    }
}

.problem_heading_img{
    width: 151px;
    margin-right: 8px;

    @media(600px < width){
        width: 200px;
    }

}

.problem_heading_span {
    margin-left: 8px;
}

.problem_text {
    font-size: 1.8rem;

    @media(600px < width){
        font-size: 2.6rem;
    }

}

.pc_br_none {
    
    @media(600px < width){
       display: none;
    }
}

.sp_br_none {

    @media(600px > width){
        display: none;
     }
}

.problem_group {

    @media(600px < width){
        display: flex;
        justify-content: space-between;
        margin-top: 70px;
     }
}

.problem_worries_area {
    margin-bottom: 84px;
    position: relative;

    @media(600px < width){
        max-width: 496px;
        margin-right: 140px;
        margin-bottom: 0;
     }
}

.problem_worries_area::after{
    position: absolute;
    content: "";
    border-top: 20px solid #7C99A1;
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
    bottom: -64px;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);

}


.problem_subheading {
    font-size: 2.4rem;    
    color: #50737E;
    margin: 32px 0px 16px;
    height: 52px;
    position: relative;

    @media(600px < width){
        font-size: 3.2rem;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 78px;
    }

}

.problem_subheading::before {
    position: absolute;
    content: "";
    display: inline-block;
    background: url(../images/corner_deco_l.png) no-repeat;
    width: 20px;
    height: 52px;
    background-size: contain;
    left: 0;
}

.problem_subheading::after {
    position: absolute;
    content: "";
    display: inline-block;
    background: url(../images/corner_deco_r.png) no-repeat;
    width: 20px;
    height: 52px;
    background-size: contain;
    right: 0;
}

.problem_subheading_span {
font-size: 1.8rem;

    @media(600px < width){
        font-size: 2.8rem;
    }
}

.problem_list {
    margin-top: 37px;

    @media(600px < width){
        margin-top: 56px;
    }
}

.problem_pinion_img {
    width: 63px;
    position: absolute;
    top: -22px;

    @media(600px < width){
        width: 100%;
        max-width: 104px;
        top: 0;
       
    }
}

.problem_pinion_left {
    left: -20px;

    @media(600px < width){
        left: -126px;
    }    
}

.problem_pinion_right {
    right: -20px;

    @media(600px < width){
        right: -126px;
    }
}

.problem_list_item {
    font-size: 1.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border: solid 3px #7C99A1;
    border-radius: 10px;
    position: relative;
    padding: 13px 8px;

    @media(600px < width){
        font-size: 1.8rem;
        padding: 0 8px;
        min-height: 104px;
    }
}




.problem_list_item:not(:last-child) {
        margin-bottom: 24px;

        @media(600px < width){
            margin-bottom: 32px;
        }
  }

.problem_list_item_left {
    margin-left: 17px;

    @media(600px < width){
        margin-left: 126px;
    }
}



.problem_list_item_right {
    margin-right: 17px;

    @media(600px < width){
        margin-right: 126px;
    }
}


.problem_solution_area {

  @media(600px < width){
    width: 100%;
    max-width: 484px;
    }
}


.problem_solution_img {
    width: 100%;
    margin-bottom: 8px;

    @media(600px < width){
        margin-top: 32px;
    }
}

.problem_solution_text {
    font-size: 1.8rem;

    @media(600px < width){
        font-size: 2.4rem; 
    }
}



/* feature area */
.feature_area {
    background-color: #3DB3BB;
    padding: 32px 0 56px;
    position: relative;

    @media(600px < width){
        padding: 72px 0 96px;
    }
}

.feature_area::after {
    position: absolute;
    content: "";
    width: 120px;
    height: 20px;
    background-image: url(../images/down_triangle_GR.png);
    background-size: contain;
    bottom: -29px;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);  
}

.feature_heading_area {
    padding: 0 24px;
    margin: auto;
    margin-bottom: 24px;
    max-width: 1200px;
}

.feature_heading_deco {
    color: #FFFEDE;
    font-family: Outfit;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 4px;

    @media(600px < width){
        font-size: 2.0rem;
        margin-bottom: 20px;
    }
}

.feature_heading_deco::before {
    display: inline-block;
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background:#FFFEDE;
    margin-right: 8px;
}

.feature_heading {
    font-size: 2.4rem;
    color: #fff;

    @media(600px < width){
        font-size: 3.8rem;
    }
}

.feature_heading_img {
    width: 150px;

    @media(600px < width){
        width: 200px;
        vertical-align: middle;
    }
}

.feature_heading_span {
    font-size: 1.8rem;
    margin-left: 8px;

    @media(600px < width){
        font-size: 2.4rem;
        margin: 0 16px;
        vertical-align: middle;
    }
}

.feature_content  {
    margin: 0 24px;

    @media(600px < width){
        margin: 0;
    }
}

.feature_content_inner {
    background-color: rgba(255, 255, 255, 0.9);
    padding-top: 24px;
    padding-bottom: 32px;
    margin-bottom: 24px;

    @media(600px < width){
        padding-top: 48px;
        padding-bottom: 48px;
        margin-bottom: 56px;
    }
}

.feature_content_inner_left {
    margin-left: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: 24px;
    border-radius: 0px 50px 50px 0px;

    @media(600px < width){
        padding-left: calc(50vw - 50% + 220px);
        margin-right: 220px;
        padding-right: 80px;
    }
}

.feature_content_inner_right {
    margin-right: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: 24px;
    border-radius: 50px 0px 0px  50px;

    @media(600px < width){
        padding-right: calc(50vw - 50%);
        margin-left: 220px;
        padding-left: 80px;
    }
}


.feature_content_deco {
    color: #1CA5AE;
    position: relative;
    display: inline-block;
    margin-bottom: 28px;
    font-family: Outfit;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 2px;

    @media(600px < width){
        font-size: 2.0rem;
    }
}

.feature_content_deco::before {
    position: absolute;
    content: "";
    background-color: #1CA5AE;
    border-radius: 5px;
    width: 15px;
    height: 2px;
    bottom: -12px;
}

.feature_content_text {
    font-size: 2.0rem;
    margin-bottom: 16px;

    @media(600px < width){
        font-size: 2.8rem;
        margin-bottom: 40px;
    }
}

.feature_content_imgframe {
    text-align: center;
}

.feature_img {
    width: 80%;
    height: 80%;

    @media(600px < width){
        max-width: 600px;
    }
}


.mainfeature_content_headding {
    font-size: 2.4rem;
    color: #fff;
    text-align: center;
    margin: 24px 0 36px ;
    position: relative;

    @media(600px < width){
        font-size: 3.8rem;
        margin: 56px 0 80px ;
    }
}

.mainfeature_content_headding::after {
    position: absolute;
    content: "";
    background-color: #fff;
    border-radius: 5px;
    width: 25px;
    height: 3px;
    bottom: -12px;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.carousel_area {
    padding-bottom: 40px;
}

.carousel_item {
    background: #fff;
    border: 2px solid #DDEAEE;
    border-radius: 8px;
    margin-bottom: 40px;
    box-sizing: border-box;
}

.carousel_item_img {
    width: 100%;
}

.carousel_item_area {
    padding: 12px 16px 16px;
    border-top: 2px solid #DDEAEE;
    
    @media(600px < width){
        padding: 24px 32px 32px;
    }
}

.carousel_item_heading {
    width: fit-content;
    color: #fff;
    font-size: 1.6rem;
    background-color: #3DB3BB;
    padding: 2px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;

    @media(600px < width){
        font-size: 1.8rem;
    }
}

.carousel_item_text {
    color: #50737E;
    font-size: 1.4rem;
    font-weight: normal;

    @media(600px < width){
        font-size: 1.6rem;
    }
}



/* documents area */
.documents_area {
    padding: 32px 24px 56px;

    @media(600px < width){
        padding: 72px 0 96px;
        max-width: 1200px;
        margin: 0 auto;
    }
}



.detail_heading_deco {
    color: #23B18F;
    margin-bottom: 8px;
    font-family: Outfit;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 1px;

    @media(600px < width){
        font-size: 2.0rem; 
        margin-bottom: 32px;
    }
}

.detail_heading_deco::before {
    display: inline-block;
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background:#23B18F;
    margin-right: 8px;
}


.detail_heading {
    font-size: 2.4rem;
    margin-bottom: 24px;

    @media(600px < width){
        font-size: 3.8rem;
        margin-bottom: 56px;
    }
}

.detail_content_area {

    @media(600px < width){
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
    }
}

.detail_content_pcarea {

    @media(600px < width){
        max-width: 524px;
    }
}

.detail_text {
    font-size: 1.6rem;
    font-weight: normal;
    margin-bottom: 24px;

    @media(600px < width){
        font-size: 1.8rem;
    }
}

.detail_content_imgframe {
    text-align: center;
}

.documents_area_img {
    width: 100%;
    margin-bottom: -16px;

    @media(600px < width){
        max-width: 424px;
        margin-right: 50px;
    }
}

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

    @media(600px < width){
        width: 464px;
    }
}

.detail_primary_btn {
    color: #fff;
    font-size: 1.6rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 0px;
    background: linear-gradient(92.3deg, #FF38A4 3.3%, #FFB23E 118.66%);
    box-shadow: 0px 2px 4px rgba(255, 99, 128, 0.2);
    border-radius: 100px;
    margin-top: 40px;

    @media(600px < width){
        margin-top: 73px;
        font-size: 2.2rem;
    }
}

.detail_primary_btn::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-image: url(../images/arrow_r_WH.png);
    background-size: contain;
    margin: 0;
    position: absolute;
    right: 16px;

    @media(600px < width){
        right: 32px;
        width: 26px;
        height: 26px;
    }
}

.detail_btnfree_img {
    width: 62px;
    position: absolute;
    left: 16px;
    bottom: 16px;

    @media(600px < width){
        left: 32px;
    }
}


.pc_disply_none {

    @media(600px < width){
        display: none;
    }
}

.sp_disply_none {

    @media(600px > width){
        display: none;
    }

}

/* fee area */
.fee_area { 
    background-color: #F4F4F4;

   
}

.fee_contet {
    padding: 32px 24px 56px;

    @media(600px < width){
        padding: 72px 0px 96px;
        max-width: 1200px;
        margin: 0 auto;
    }
}

.detail_text_mb {
    margin-bottom: 16px;
}



/* flow area */
.flow_area {
    padding: 32px 24px 56px;

    @media(600px < width){
        padding: 72px 0 96px;
        max-width: 1200px;
        margin: 0 auto;
    }
}

.flow_content {

    @media(600px < width){
        display: flex;
        justify-content: center;
        max-width: 1200px;
        align-items: stretch;
        margin: 0 auto;
        margin-top: 56px;   
    }
}

.flow_frame {
    margin-bottom: 26px;
    position: relative;

    @media(600px < width){
        width:100%;
        margin-right: 26px;
        margin-bottom: 0;
    }
}

.flow_frame:last-of-type {
    @media(600px < width){
        margin-right: 0;
    }
}

.flow_frame:not(:last-child):after{
    position: absolute;
    content: "";
    border-top: 10px solid #6CB8C4;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    bottom: -24px;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}


.flow_heading_area {
    text-align: center;
    color: #fff;
    background-color: #3DB3BB;
    border-radius: 8px 8px 0 0;
    padding: 8px 0;
}

.flow_heading_deco {
    color: #FFFEDE;
    margin-bottom: 4px;
    font-family: Outfit;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 2px;

    @media(600px < width){
        font-size: 1.8rem;
    }
}

.flow_heading {
    font-size: 1.4rem;

    @media(600px < width){
        font-size: 1.8rem;
    }
}

.flow_text_area {
    font-size: 1.4rem;
    font-weight: normal;
    border: solid 1px #3DB3BB;
    border-radius: 0 0 8px 8px;
    padding: 8px 16px;

    @media(600px < width){
        font-size: 1.6rem;
        padding: 16px 24px 24px 24px;
        height: 172px;
    }
}

.flow_text {
    margin-bottom: 8px;
}



/* contact form area */
.contact_form_area {
    background: 
        linear-gradient(135deg, #F1FFD2 0%, #D2FFEF 100%);
    padding: 28px 0 48px;
    position: relative;
    
    @media(600px < width){
        padding: 56px 0 96px;
    }
}

.contact_form_area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../images/bg_01.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.15;
    z-index: 0;
}

.contact_form_content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.contact_form_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    
    @media(600px < width){
        padding: 0;
    }
}

/* コンタクトセクション内のフォームエリア */
.contact_form_area .fv_form_area {
    max-width: 570px;
    width: 100%;
    padding: 0;
    margin: 0;
    
    @media(600px < width){
        max-width: 570px;
        margin: 0;
        grid-column: unset;
        grid-row: unset;
        align-self: unset;
    }
}



/* thanks page styles */
.thanks_content_area {
    background: 
        linear-gradient(135deg, #F1FFD2 0%, #D2FFEF 100%);
    position: relative;
    display: flex;
    justify-content: center;
    padding: 80px 24px;
    
    @media(600px < width){
        padding: 250px 16px 250px;
    }
}

.thanks_content_area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../images/bg_01.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.15;
    z-index: 0;
}

.thanks_content_wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.thanks_card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 32px 16px;
    box-shadow: 0px 2px 10px rgba(38, 58, 64, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    width: 326px;
    
    @media(600px < width){
        padding: 40px;
        gap: 40px;
        width: 900px;
    }
}

.thanks_message_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 16px;
    width: 100%;
    
    @media(600px < width){
        gap: 24px;
    }
}

.thanks_title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 2.0rem;
    line-height: 1.6000000635782878em;
    color: #363636;
    text-align: center;
    margin: 0;
    
    @media(600px < width){
        font-size: 2.4rem;
    }
}

.thanks_message {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: 0;
    width: 100%;
}

.thanks_text {
    font-family: 'Hiragino Sans', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.5em;
    color: #363636;
    text-align: center;
    margin: 0;
    width: 100%;
    
    @media(600px < width){
        font-size: 1.6rem;
    }
}

.thanks_message .thanks_text {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.thanks_message .thanks_text_first {
    margin-bottom: 24px !important;
}

.thanks_message .thanks_text_multi {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.thanks_link_area {
    display: flex;
    justify-content: center;
    width: 100%;
}

.thanks_top_link {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.5999999727521623em;
    color: #3DB3BB;
    text-decoration: underline;
    transition: opacity 0.3s ease;
    
    @media(600px < width){
        font-size: 1.4rem;
    }
}

.thanks_top_link:hover {
    opacity: 0.7;
}

/* thanks page header centering for thanks page */
.thanks-page .header_navi {
    justify-content: center;
}


/* q&a area */
.qa_area {
    background-color: #F4F4F4;

}

.qa_area_content {
    padding: 32px 24px 56px;

    @media(600px < width){
        padding: 72px 0 96px;
        max-width: 1200px;
        margin: 0 auto;
    }
}

.qa_content {

    @media(600px < width){
        max-width: 1000px;
        margin: 0 auto;
    }
    
}

.qa_frame {
    background-color: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;

}


.qa_frame:not(:last-child) {
    margin-bottom: 24px;
}


.qa_heading_area {
    padding: 16px 44px;
    position: relative;
    cursor: pointer;

    @media(600px < width){
        padding: 22px 44px;
    }
}

.qa_heading {
    font-size: 1.4rem;
    font-weight: 500;

    @media(600px < width){
        font-size: 1.6rem;
    }
}

.qa_heading::before {
    content: "Q.";
	color: #6CB8C4;
    position: absolute;
    top: 10px;
    left: 16px;
    font-family: Outfit;
    font-weight: 300;
    font-size: 2.0rem;
}

.qa_heading::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../images/arrow_d_GR.png);
    background-size: contain;
    vertical-align: middle;
    margin-left: 8px;
    right: 0px;
	top: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.qa_frame.is-active .qa_heading::after {
    background-image: url(../images/arrow_u_GR.png);
}

.qa_panel {
    overflow: hidden;
}

.qa_text_area {
    font-size: 1.4rem;
    font-weight: normal;
    border-top: solid 1px #BAC9CE;
    padding: 8px 0 16px 30px;
    margin: 0 16px;
    position: relative;

    @media(600px < width){
        font-size: 1.6rem;
    }
}

.qa_text_area::before {
    content: "A.";
	color: #6CB8C4;
    position: absolute;
    top: 4px;
    left: 0px;
    font-family: Outfit;
    font-weight: 300;
    font-size: 2.0rem;
}


.qa_text {
    color: #595E5E;
}

.postscript_area {
    color: #595E5E;
    font-size: 1.2rem;
    font-weight: normal;
    background-color: #E6E6E6;
    padding: 16px;

    @media(600px < width){
        font-size: 1.4rem;
        text-align: center;
    }
}



/* footer area*/
.footer_area {
    background-color: #50737E;
    padding: 32px 16px 56px;
    color: #FFFFFF;

    @media(600px < width){
        padding: 48px 120px;
    }
}

.footer_inner {
    max-width: 1200px;
    margin: 0 auto;

    @media(600px < width){
        display: flex;
        flex-direction: column;
        gap: 48px;
    }
}

/* Group services section */
.footer_group_services {
    margin-bottom: 56px;

    @media(600px < width){
        margin-bottom: 0;
    }
}

.footer_group_title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #FFFFFF;

    @media(600px < width){
        font-size: 1.4rem;
    }
}

.footer_service_list {
    font-weight: normal;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.footer_service_link {
    font-size: 1.2rem;
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-position: from-font;

    @media(600px < width){
        font-size: 1.4rem;
    }
}

/* Footer bottom section */
.footer_bottom {
    display: flex;
    flex-direction: column;
    gap: 24px;

    @media(600px < width){
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }
}

.footer_copyright {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.footer_logo {
    display: flex;
    align-items: center;
}

.footer_logo_img {
    height: 26px;
}

.copyright_text {
    font-size: 1.0rem;
    color: #FFFFFF;
}

.footer_navi {
    display: flex;
    flex-direction: column;
    gap: 16px;

    @media(600px < width){
        flex-direction: row;
        gap: 32px;
        align-items: center;
    }
}

.footer_navi_item {
    list-style: none;
}

.footernavi_item_textlink {
    font-size: 1.2rem;
    color: #FFFFFF;
    font-weight: normal;

    @media(600px < width){
        font-size: 1.4rem;
    }
}

.swiper {
    width: 100%;
    height: 400px;

    @media(600px < width){
        max-width: 1200px;
    }
}


@media screen and (min-width:600px){

    .fv_content_bottom::before {
        content: none;
    }

    .problem_worries_area::after{
        border-left: 40px solid #7C99A1;
        border-top: 33px solid transparent;
        border-bottom: 33px solid transparent;
     left: 120%;
     bottom: 30%;
    }

    .problem_subheading::before {
        width: 33px;
        height: 78px;
        left: 10%;
    }

    .problem_subheading::after {
        width: 33px;  
        height: 78px;
        right: 10%;
    }

    .problem_list_item_left::before {
        position: absolute;
        content: "";
        border-right: 22px solid #7C99A1;
        border-bottom: 11px solid transparent;
        border-top: 11px solid transparent;
        border-radius: 3px;
        bottom: 5px;
        left: -24px;
    }
    
    .problem_list_item_right::before {
        position: absolute;
        content: "";
        border-left: 22px solid #7C99A1;
        border-bottom: 11px solid transparent;
        border-top: 11px solid transparent;
        border-radius: 3px;
        bottom: 5px;
        right: -24px;
    }


    .feature_content_deco::before {
        width: 30px;
    }

    .mainfeature_content_headding::after {
        width: 50px;
        bottom: -24px;
    }

    .feature_area::after {
        width: 400px;
        height: 66px;
        bottom: -98px

    }

    .detail_heading_deco::before {
        width: 20px;
        height: 20px;
        margin-right: 12px;
        vertical-align: sub;
    }

    .flow_frame:not(:last-child):after {
        border-left: 10px solid #6CB8C4;
        border-bottom: 8px solid transparent;
        border-top: 8px solid transparent;
        bottom: 50%;
        top: 60%;
        left: 105%;
    }

    .qa_heading::before {
        top: 14px;
        font-size: 2.6rem;

    }

    .qa_text_area::before {
        top: 0;
        font-size: 2.6rem;
    }

    

    }