@charset "utf-8";

#main {
    position:relative;
    overflow:clip;
}

.titlewrap {
    position: relative;
    &::before {
        content:'';
        display:block;
        width:1000px;
        height:1000px;
        position:absolute;
        z-index:-1;
        background:url(../img/common/bg1.png) no-repeat center center/contain;
        top:-250px;
        left:-300px;
    }
    ::after{
        content:"";
        background-color: #fff;
        position: absolute;
        height: calc(100% - 10px);
        width: 100vw;
        left:0;
        top:0;
        z-index: -1;
        display: inline-block;
        border-end-start-radius:80px;
        box-shadow:0 0 10px rgba(0,0,0,.05);
    }
    h1 {
        text-align: center;
        width:calc(100% - 30px);
        max-width:1200px;
        margin:0 auto;
        font-size:min(2.6vw,3.2rem);
        display:grid;
        justify-items:center;
        grid-row-gap:.66em;
        padding:4em 0 2em;
        font-weight:500;
        position: relative;
        span {
            color: #f388a6;
            text-transform: uppercase;
            font-size:min(8.4vw,10rem);
            font-weight:600;
            position:relative;
        }
        .angel_01{
            width: 120px;
            position: absolute;
            bottom:0;
            left:0;
            transform:translate(-50%,0%);
        }
        .angel_02{
            width: 59px;
            position: absolute;
            top: 50%;
            transform: translateX(180%);
            right:0;
        }
    }
}

.bread{
    margin-bottom: 90px;
    .rank-math-breadcrumb {   
        width:calc(100% - 60px);
        max-width:1100px;
        margin:0 auto;
        padding:0.4em 0 0.3em;   
        text-align: right;
        p {        
            font-size:1.4rem;
            line-height: 1.2;
            a{
                &:hover{
                    color: #139ba0;
                }  
            }           
        }
    }
}

.pagenavi {
    padding-top:60px;
    .screen-reader-text {
        display:none;
    }
    .page-numbers {
        display:flex;
        align-items:start;
        justify-content:center;
        gap:.5em .33em;
        li {
            a,span {
                background-color:#f1f1f1;
                color:var(--color_main);
                font-size:1.2rem;
                min-height:2em;
                line-height:2;
                min-width:2em;
                padding:0 .5em;
            }
        }
        .current {
            font-weight:700;
        }
    }
}

section {
    .wrap {
        padding-bottom: 90px;
        .contents {
            h2 {
                display: grid;
                grid-template-columns: .7em auto  .7em;
                grid-column-gap: 1em;
                align-items: center;
                justify-content: center;
                font-size:3.2rem;
                text-align:center;
                font-weight:500;
                letter-spacing:.1em;
                line-height:1.5;
                margin-bottom:1.2em;
                position: relative;
                font-weight:600;
                span{
                    color: #eaf4e2;
                    font-size: 20rem;
                    position: absolute;
                    top:0%;
                    left:50%;
                    transform: translate(-50%, -50%);
                    z-index: -1;
                    font-weight:800;
                }
            }
            h3,h4 {
                font-weight:600;
            }
        }
    }
}


#faq{
    .wrap{
        padding-top: 90px;
        padding-bottom: 150px;
        .contents{
            position:relative;
            &::before {
                content:'';
                display:block;
                width:1200px;
                height:1200px;
                position:absolute;
                z-index:-1;
                background:url(../img/common/bg2.png) no-repeat center center/contain;
                bottom:-300px;
                left:-600px;
            }
            .contents_inner{
                dl{
                    background-color: #fff;
                    border-radius: 30px;
                    padding: 2em;
                    display: grid;
                    transition:.3s;
                    &:not(:last-child) {
                        margin-bottom: 30px;
                    }
                    &:has(.open) {
                        background-color: #7abb3f;
                        dt {
                            color:#FFFFFF;
                            .q {
                                background-color:#FFFFFF;
                                color: #7abb3f;
                            }
                            .plus {
                                &::before,&::after {
                                    background-color:#FFFFFF;
                                }
                            }
                        }
                        dd {
                            color:#FFFFFF;
                            .a {
                                background-color:#FFFFFF;
                                color: #f388a6;
                            }
                        }
                    }
                    dt{
                        display:grid;
                        grid-template-columns:auto 1fr auto;
                        align-items:center;
                        cursor: pointer;
                        line-height:1.7;
                        .q{
                            background-color: #7abb3f;
                            display:grid;
                            align-items:center;
                            justify-content:center;
                            width:1.75em;
                            aspect-ratio:1;
                            border-radius: 50%;
                            font-size: 2em;
                            color: #fff;
                            font-family: "Oswald", sans-serif;
                            margin-right: 1em;
                        }
                        .plus {
                            width:1em;
                            height:1em;
                            position:relative;
                            &::before,&::after {
                                content:'';
                                display:block;
                                width:100%;
                                height:1px;
                                background-color:#000000;
                                position:absolute;
                                left:50%;
                                top:50%;
                                transform:translate(-50%,-50%) rotate(0deg);
                                transition:.3s;
                            }
                            &::after {
                                transform:translate(-50%,-50%) rotate(90deg);
                            }
                        }
                        &.open {
                            .plus {
                                &::before {
                                    transform:translate(-50%,-50%) rotate(90deg);
                                    opacity:0;
                                }
                            &::after {
                                transform:translate(-50%,-50%) rotate(180deg);
                            }
                            }
                        }
                    }
                    dd {
                        display: none;
                        padding-top:20px;
                        .a{
                            background-color: #f388a6;
                            display:grid;
                            align-items:center;
                            justify-content:center;
                            width:1.75em;
                            aspect-ratio:1;
                            border-radius: 50%;
                            font-size: 2em;
                            color: #fff;
                            font-family: "Oswald", sans-serif;
                            margin-right: 1em;
                        }
                        .answer {
                            display:grid;
                            grid-template-columns:auto 1fr;
                            border-top:3px dotted #FFFFFF;
                            padding-top:10px;
                            .answer_inner {
                                padding-top:20px;
                                line-height:1.7;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media ( hover:hover ){
    
}


/* =================================================================
    section
================================================================= */


@media screen and (max-width:1200px){

}

@media screen and (max-width:1024px){

    section {
        .wrap {
            padding-bottom:90px;
        }
    }
    
    .bread{
        margin-bottom: 60px;
        .rank-math-breadcrumb {   
            width:calc(100% - 50px);
            p {        
                font-size:1.2rem;         
            }
        }
    }

    section {
        .wrap {
            padding-bottom: 60px;
            .contents {
                h2 {
                    font-size:2.6rem;
                    span{
                        font-size: 17rem;
                    }
                }
            }
        }
    }
    
}

@media screen and (max-width:768px){
    
    .titlewrap {
        &::before {
            width:500px;
            height:500px;
        }
        ::after{
            content:"";
            background-color: #fff;
            position: absolute;
            height: calc(100% - 10px);
            width: 100vw;
            left:-20px;
            top:0;
            z-index: -1;
            display: inline-block;
            border-end-start-radius:0;
            box-shadow:0 0 10px rgba(0,0,0,.05);
        }
        h1 {
            width:calc(100% - 40px);
            font-size:1.3rem;
            display:grid;
            padding:80px 0 40px;
            span {
                font-size:3.0rem;
            }
            .angel_01{
                width: 60px;
            }
            .angel_02{
                width: 40px;
                transform: translateX(140%);
                right:0;
            }
        }
    }
    
    .bread{
        margin-bottom: 30px;
        .rank-math-breadcrumb {   
            width:calc(100% - 40px);
            p {        
                font-size:1.1rem;         
            }
        }
    }

    section {
        .wrap {
            padding-bottom: 60px;
            .contents {
                h2 {
                    font-size:2.0rem;
                    margin-bottom:1em;
                    span{
                        font-size: 9rem;
                        top:.1em;
                    }
                }
            }
        }
    }
    
    .pagenavi {
        padding-top:45px;
        .page-numbers {
            font-size:1.4rem;
        }
    }

    #faq{
        .wrap{
            padding-top: 75px;
            padding-bottom: 90px;
            .contents{
                &::before {
                    width:600px;
                    height:600px;
                    bottom:-200px;
                    left:-300px;
                }
                .contents_inner{
                    dl{
                        border-radius: 20px;
                        padding: 1em;
                        &:not(:last-child) {
                            margin-bottom: 15px;
                        }
                        dt{
                            font-size:1.5rem;
                            line-height:1.5;
                            .q{
                                font-size: 1.5em;
                                margin-right: .5em;
                            }
                        }
                        dd {
                            padding-top:15px;
                            .a{
                                font-size: 1.5em;
                                margin-right: .5em;
                            }
                            .answer {
                                .answer_inner {
                                    font-size:1.4rem;
                                    padding-top:10px;
                                    line-height:1.5;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
}