@charset "utf-8";
/*共通設定*/
/*終わり*/  

/*<section class="fv">*/
.fv {
    width: 100%;
    height: 100vh;
    background-image: url(../img/tiktok/fv.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
    padding-top: 80px;
}

.fv-in {
    max-width: 920px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: relative;
}

.fv-txt-area {
    max-width: 720px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    background-color: #111;
    color: #fff;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.fv-txt {
    width: 48%;
}

.fv-flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    gap: 1%;
}

.fv-flex p {
    padding: 8px 0;
    width: 24%;
    background-color: #F6254C;
    position: relative;
    line-height: 1.4;
}

.fv-flex p::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border: 8px solid transparent;
    border-top: 8px solid #F6254C;
}

.fv-flex p span {
    font-size: 24px;
}

.fv-woman {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28%;
}

.fv-woman-sp {
    display: none;
}
/*終わり*/  

/*<section class="sns">*/
.sns-in {
    box-shadow: 0 0 40px rgba(0,0,0,0.25);
    padding: 40px;
    text-align: center;
}

.sns-h2 {
    font-size: 32px;
    margin-bottom: 24px;
}

.sns-h2 .l-txt {
    font-size: 40px;
}

.sns-h2 .dot {
    color: #F6254C;
    font-size: 40px;
    padding-top: .2em;
    background-position: top left -10px;
    background-repeat: repeat-x;
    background-size: 1.3em .3em;
    background-image: radial-gradient(.10em .10em at center center,#F6254C,#F6254C 100%,transparent);
}

.table-sp {
    display: none;
}

.sns-flex {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.ad,
.ope {
    position: relative;
}

.ad-txt,
.ope-txt {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: #fff;
    padding: 24px;
}

.ad-txt h3,
.ope-txt h3 {
    font-size: 40px;
    margin-bottom: 16px;
}
/*終わり*/  

/*<section class="worry">*/
.worry {
    margin-top: 80px;
}

.worry-in {
    padding: 40px;
    background-color: #5B5B5B;
    box-shadow: 0 0 40px rgba(0,0,0,0.25);
    text-align: center;
}

.worry-h2 {
    color: #fff;
    font-size: 32px;
    margin-bottom: 16px;
}

.worry-wrap {
    width: 80%;
    margin: 0 auto;
}

.case-txt-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}

.case-txt {
    padding: 4px 8px;
    background-color: #fff;
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 16px;
    text-align: left;
}

.case-txt .check {
    width: 16px;
}

.three-triangle {
    width: 10%;
    margin: 16px auto;
}

.worry-con {
    background-color: #fff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.plan-img {
    width: 56%;
}

.plan-title {
    width: 48%;
}

.plan-txt {
    margin-top: 32px;
}

.plan-txt p {
    display: inline-block;
    position: relative;
    padding: 0 32px;
}
 
.plan-txt p:before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    width: 1px;
    height: 80%;
    background: #111;
    border-radius: 3px;
    transform: rotate(-25deg);
}
 
.plan-txt p:after {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    width: 1px;
    height: 80%;
    background: #111;
    border-radius: 3px;
    transform: rotate(25deg);
}
/*終わり*/  

/*<section class="reason">*/
.reason {
    margin-top: 80px;
}

.reason-in {
    padding: 40px;
    background-color: #5B5B5B;
    box-shadow: 0 0 40px rgba(0,0,0,0.25);
    text-align: center;
}

.reason-h2 {
    color: #fff;
    line-height: 1.8;
}

.reason-h2 .dot {
    color: #F6254C;
    font-size: 40px;
    padding-top: .15em;
    background-position: top left -10px;
    background-repeat: repeat-x;
    background-size: 1.3em .3em;
    background-image: radial-gradient(.10em .10em at center center,#F6254C,#F6254C 100%,transparent);
}

.reason-flex {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    margin-top: 40px;
}

.reason-con {
    position: relative;
    width: 33%;
    background-color: #fff;
    padding: 24px 16px;
    font-size: 14px;
    text-align: left;
}

.reason-title {
    font-size: 18px;
    color: #F6254C;
    font-weight: 600;
    text-align: center;
    padding: 8px 0;
}

.point-img {
    position: absolute;
    top: -16px;
    left: 24px;
    width: 10%;
}
/*終わり*/  


/*1401px以上*/
@media (min-width: 1401px) {
/*<section class="fv">*/
    .fv {
        height: 80vh;
    } 
/*終わり*/  
}
/*終わり*/  


/*タブレット*/
@media (max-width: 1024px) {  
/*<section class="fv">*/
    .fv {
        height: 60vh;
        padding-top: 90px;
    }

    .fv-woman {
        display: none;
    }
    
    .fv-woman-sp {
        display: block;
        width: 32%;
    }
    
/*終わり*/  

/*<section class="sns">*/
    .sns-h2 .dot {
        background: none;
    }

    .sns-flex {
        display: flex;
        gap: 8px;
    }

    .ad-txt p,
    .ope-txt p {
        font-size: 12px;
    }
/*終わり*/  

/*<section class="worry">*/
    .worry-flex {
        display: block;
        width: 85%;
        margin: 0 auto;
    }

    .worry-r {
        margin-top: 40px;
    }

    .plan-txt p {
        padding: 0 24px;
    }

/*終わり*/  

/*<section class="reason">*/
    .reason-h2 .dot {
        background: none;
    }

    .reason-flex {
        display: block;
    }

    .reason-con {
        width: 70%;
        margin: 0 auto 40px auto;
    }
/*終わり*/  
}
/*終わり*/  


/*スマホ*/
@media (max-width: 599px) {
/*共通設定*/
    .table-sp {
        display: block;
    }

    .table-pc {
        display: none;
    }
/*終わり*/  

/*<section class="fv">*/
    .fv {
        height: 100vh;
        padding: 90px 3vw 0 3vw;
    }

    .fv-txt-area {
        padding: 40px 10px;
    }

    .fv-txt {
        width: 72%;
    }
    
    .fv-h1 {
        font-size: 22px;
    }

    .fv-woman-sp {
        width: 64%;
    }

    .fv-flex {
        justify-content: space-between;
        gap: 0;
    }
    
    .fv-flex p {
        width: 32%;
        font-size: 12px;
    }    

    .fv-flex p span {
        font-size: 18px;
    }    
/*終わり*/  

/*<section class="sns">*/
    .sns {
        padding: 0;
    }

    .sns-in {
        padding: 40px 5vw;
    }

    .sns-h2 {
        font-size: 18px;
    }

    .sns-h2 .l-txt {
        font-size: 22px;
    }  
    
    .sns-h2 .dot {
        font-size: 22px;
    }    

    .x-scroll {
        overflow-x: auto;
        white-space: nowrap;
    }

    .table-sp-area {
        width: 160%;
    }

    .sns-flex {
        flex-direction: column;
    }  

    .ad-img,
    .ope-img {
        height: 220px;
    }
    
    .ad-txt h3,
    .ope-txt h3 {
        font-size: 24px;
    }
/*終わり*/  

/*<section class="worry">*/
    .worry {
        padding: 0;
        margin-top: 0;
    }

    .worry-in {
        padding: 40px 5vw;
    }

    .worry-h2 {
        font-size: 20px;
    }

    .worry-wrap {
        width: 100%;
    }    

    .three-triangle {
        width: 24%;
    }    

    .plan-img {
        width: 80%;
    }
    
    .plan-title {
        width: 72%;
    }    
    
    .plan-txt p {
        font-size: 12px;
    }
/*終わり*/  

/*<section class="reason">*/
    .reason {
        padding: 0;
        margin-top: 0;
    }

    .reason-in {
        padding: 40px 5vw;
    }

    .reason-h2 {
        font-size: 20px;
    }

    .reason-h2 .dot {
        font-size: 32px;
    }
    
    .reason-con {
        width: 100%;
        margin: 0 auto 40px auto;
    }

    .point-img {
        width: 14%;
    }    
/*終わり*/  
}
/*終わり*/