@charset "utf-8";
:root{
    --m10:10px;
    --m20:20px;
    --m30:30px;
    --m40:40px;
    --m50:50px;
    --m60:60px;
    --m80:80px;
    --m90:90px;
    --purple: #4f1967;
    --purple02: #9a76b3;
    --yellow: #fffc00;
}
*{box-sizing: border-box;}
.clearfix {display: block;}
.pc {display: block;}
.sp {display: none;}

html{font-size: 62.5%;}
body {
    font-size: 2.4rem;
    color: #2c2b2b;
    line-height: 1.6;
    font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',serif;
    font-feature-settings: "palt";
    letter-spacing: 1.8px;
}
.inner {
    max-width: 1200px;
    margin: 0 auto;
}
.inner02 {
    max-width: 1000px;
    margin: 0 auto;
}
.flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.j_c_c{
    justify-content: center;
}
.center{
    margin: 0 auto;
    text-align: center;
}
.shadow{
    filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.1));
}
a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    transition: all .3s;
}
img {
    vertical-align:top;
}
h2{
    font-size: 5.0rem;
    margin-bottom: var(--m40);
    text-align: center;
}
.yellow{color: var(--yellow);}
.purple{color: var(--purple02);}

header{
    text-align: center;
    background-color: #fff;
    margin: var(--m10) 0;
}
header img{
    width: 160px;
}

footer {
    width: 100%;
    font-size: 1.8rem;
    color: #fff;
    background-color: var(--purple);
}
footer a:hover {
    opacity: 0.8;
}
footer ul {
    padding: var(--m30) 0;
    display: flex;
    justify-content: center;
}
footer ul li {
    padding: 0 var(--m10);
    border-right: 1px solid #fff;
}
footer ul li:last-child{
    border-right: none;
}

/*fv*/
#fv{
    width: 100%;
    height: 700px;
    background: url(../images/fv.webp) no-repeat center;
    background-size: cover;
}

/*authoroty*/
#authoroty{
    background: url(../images/authoroty_bg.webp) no-repeat center;
    background-size: cover;
    text-align: center;
    padding: var(--m60) 0;
}
#authoroty ul{
    max-width: 1000px;
    margin: 0 auto;
    font-size: 12px;
    text-align: left;
}
/*cta*/
.cta_top{
    background: url(../images/bg_cta_top.webp) no-repeat center;
    background-size: cover;
    color: #4f1967;
    font-size: 4.0rem;
    font-weight: 700;
    text-align: center;
    padding: 2% 0;
}
.cta_top .top_catch{
    font-size: 6.0rem;
}
.cta{
    font-size: 4.0rem;
    color: #fff;
    background: url(../images/bg_cta.webp) no-repeat center;
    background-size: cover;
    text-align: center;
    padding: var(--m40) var(--m10) var(--m50);
}
.cta p{
    margin-bottom: var(--m20);
}
.cta_btn a{
    filter: drop-shadow(0 7px 0 #806e0e);
    position: relative;
}
.cta_btn a:hover{
    filter: drop-shadow(0 0 0 #806e0e);
    transform: translateY(7px);
}
.cta02{
    width: 100%;
    height: 733px;
    background: url(../images/cta02.webp) no-repeat center;
    background-size: cover;
    position: relative;
}
.cta02 .cta_btn{
    position: absolute;
    left: 50%;
    top: 72%;
    transform: translate(-50%,0);
}
/*sec01*/
#sec01,#sec10{
    background-color: #101010;
}
.sec01_top,.sec10_wrap{
    background: linear-gradient(-30deg,#a174b6 0,#a085b4 50%,#d4b8e9 100%);
    padding: var(--m80) 0 var(--m60);
}
.sec01_top_list li{
    width: 83.334%;
    margin: 0 auto var(--m40);
    position: relative;
}
.sec01_top_list li:last-child{
    margin-bottom: 0;
}
.sec01_top_list li figure{
    position: absolute;
    top: 50%;
    right: -5%;
    transform: translate(0,-50%);
}
.sec01_bottom{
    background-color: #fff;
}

/*sec02*/
#sec02{
    background-color: #c8c5c5;
    position: relative;
}
#sec02::before{
    content: "";
    position: absolute;
    left: 10%;
    bottom: 0;
    display: block;
    width: 501px;
    height: 557px;
    background: url(../images/sec02_img.webp) no-repeat;
    background-size: contain;
}
#sec02::after{
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%,0);
	width: 1px;
	height: 1px;
	border: 63px solid transparent;
	border-top: 40px solid #c8c5c5;
}

/*sec03*/
#sec03{
    margin-top: var(--m90);
    position: relative;
}
#sec03 .sec03_1{
    margin-bottom: var(--m60);
    position: relative;
}
#sec03 .sec03_1_img{
    position: absolute;
    top: 20%;
    right: 0;
    width: 21%;
}
#sec03 .sec03_1_list li{
    margin: 0 2.82%;
}
.sec03_2{
    background-color: #f2f2f2;
    padding: var(--m60) 0;
}

/*sec04*/
#sec04{
    width: 100%;
    height: 776px;
    background: url(../images/bg_sec04_body.webp) no-repeat center top;
    background-size: cover;
}
/*sec05*/
#sec05 >*{
    position: relative;
    z-index: 1;
}
#sec05_ttl{
    width: 100%;
    height: 286px;
    background: url(../images/bg_sec05.webp) no-repeat center;
    background-size: cover;
}
#sec05_01,#sec05_03{
    background-color: #876e98;
}
#sec05_02{
    background-color: #624773;
}
#sec05_01::after,#sec05_02::after,#sec05_03::after{
    content: "";
    position: absolute;
    bottom: -1px;
    display:block;
	width:100%;
	height:100px;
    z-index: -1;
}
#sec05_01::after{
    background: #624773;
    clip-path:polygon(0 0, 100% 90%, 100% 100%, 0 100%);
}
#sec05_02::after{
    background: #876e98;
    clip-path:polygon(0 90%, 100% 0, 100% 100%, 0 100%);
}
/*sec06*/
#sec06{
    background: url(../images/bg_sec06.webp) no-repeat center;
    background-size: cover;
    padding: var(--m80) 0;
}
#sec06 p{
    color: #fff;
    margin-bottom: var(--m50);
}
.sec06_list{
    text-align: center;
}
.sec06_list_top{
    width: 30%;
    padding: 0 2%;
    margin-bottom: var(--m60);
}
.sec06_list h3{
    font-size: 3.0rem;
    color: #fff;
    border-bottom: 2px solid #fff;
    display: inline-block;
    margin-top: var(--m20);
}
.sec06_list_bottom{
    width: 21%;
    padding: 0 2%;
    margin-bottom: 0;
}
/*sec07*/
#sec07{
    background: url(../images/bg_sec07.webp) no-repeat center;
    background-size: cover;
    padding: var(--m80) 0 var(--m60);
    position: relative;
}
#sec07 h2{
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translate(-50%,0);
}
/*sec08*/
#sec08{
    background: #876e98;
    padding: var(--m90) 0 var(--m60);
    position: relative;
    z-index: 1;
}
#sec08::before{
    content: "";
    position: absolute;
    top: 0;
    display:block;
	width:100%;
	height:40px;
    background: #4e2e5e;
    clip-path:polygon(0 0, 100% 0, 100% 10%, 0 100%);
    z-index: -1;
}
#sec08::after{
    content: "";
    position: absolute;
    bottom: 0;
    display:block;
	width:100%;
	height:100px;
    background: #4e2e5e;
    clip-path:polygon(0 90%, 100% 0, 100% 100%, 0 100%);
    z-index: -1;
}
#sec08 h2,#sec10 h2,#sec12 h2{
    font-size: 0;
}
.sec08_box{
    background-color: #fff;
    padding: 4.18%;
}
.sec08_box_txt{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.sec08_box_txt:first-child{
    flex-direction: row-reverse;
    margin-bottom: var(--m40);
}
.sec08_box_txt p{
    width: 55%;
    padding-right: 5%;
}
.sec08_box_txt:first-child p{
    padding: 0 0 0 5%;
}

/*sec09*/
#sec09{
    background-image: url(../images/bg_sec09_l.webp),url(../images/bg_sec09_r.webp);
    background-repeat: no-repeat,no-repeat;
    background-size: 30%,30%;
    background-position: top left,bottom right;
    padding: var(--m80) 0 var(--m60);
}
/*sec10*/
.sec10_list li{
    margin: 0 auto var(--m40);
    width: 83.4%;
}
.sec10_list li:last-child{
    margin-bottom: 0;
}
/*sec11*/
#sec11{
    padding: var(--m80) 0 var(--m60);
}
.sec11_list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.sec11_list:nth-of-type(even){
    flex-direction: row-reverse;
}
.sec11_list >*{
    width: 50%;
}
.sec11_list_txt{
    padding: 5%;
}
.sec11_list_txt h3{
    border-left: 5px solid #c6b372;
    color: #9a76b3;
    font-size: 3.0rem;
    padding-left: var(--m20);
    margin-bottom: var(--m30);
}
.sec11_list_txt h3 span{
    color: #2c2b2b;
    font-family: YuGothic,'Yu Gothic',sans-serif;
    font-size: 2.0rem;
    font-weight: 400;
}
/*sec12*/
#sec12{
    background-color: #f5f5f5;
    padding: var(--m80) 0 var(--m60);
}
/*secqa*/
#secqa {
    background: #fff;
    padding: var(--m80) var(--m30);
}

#secqa li {
    margin-bottom: var(--m40);
}

/*accodion*/
.js_acc{
    position: relative;
    padding: 25px 60px 25px 30px;
    background: linear-gradient(90deg,#ae86c1,#967ca2);
    color: #fff;
}

.js_acc:hover {
    cursor: pointer;
}

.js_acc::before,
.js_acc::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 26px;
    height: 2px;
    background: #fff;
    transition: all 0.5s;
}

.js_acc::before {
    transform: rotate(90deg);
}
.js_acc.open::before,
.js_acc.stay::before {
    transform: translateY(-50%) rotateZ(180deg);
    transform-origin: center center;
}

.js_acc.stay.open::before {
    transform: rotate(90deg);
}

.js_acc_inner {
    display: none;
    padding: 25px 30px;
    border: 1px solid #967ca2;
}

.js_acc_inner.stay {
    display: block;
}
/*accodion*/
/*contact*/
#contact{
    background: #f2f2f2;
    padding: var(--m60) var(--m30) var(--m30);
}
#contact p {
    text-align: center;
    margin: 0 0 40px;
}

.custom-checkbox {
    display: inline-block;
    padding-right: 25px;
    padding-bottom: 10px;
}

.custom-checkbox input[type="checkbox"] {
    transform: scale(1.5);
    /* チェックボックスの大きさを調整 */
    margin-right: 5px;
    /* チェックボックスとテキストの間隔を調整 */
    background: #fff;
}

.custom-radio {
    position: relative;
    padding-left: 30px;
    padding-right: 25px;
    padding-bottom: 10px;
    /* マークの左側に余白を設定 */
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
}

.custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 9px;
    left: 0;
    height: 18px;
    /* マークの大きさを指定 */
    width: 18px;
    /* マークの大きさを指定 */
    border: 1px solid #ccc;
    /* マークの境界線のスタイルを指定 */
    border-radius: 50%;
    /* マークを円形にする */
    background: #fff;
    /* マークの背景色を指定 */
    padding: 2px;
}

.custom-radio input:checked~.checkmark {
    background-color: #69a2d3;
    /* マークの塗りつぶし色を指定 */
}

#contact p:last-of-type {
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
    font-size: 18px;
    padding: 20px;
    box-sizing: border-box;
}

#contact p a {
    color: #ec3350;
    text-decoration: underline;
}
#contact #form_submit {
    text-align: center;
}

@media screen and (min-width: 2001px) {
    #fv{
    padding-top: 33%;
    }
    .cta02{
    padding-top: 36%;
    }
}
    /*タブレット
------------------------------*/
@media screen and (max-width: 1230px) {
#fv{
    height: auto;
    padding-top: 55%;
}
.sec01_top_list li figure{
    width: 40%;
}
#sec02::before{
    width: 42%;
    height: 100%;
    left: 2%;
}
#sec03 .sec03_1_list li{
    width :27%;
}
#sec04{
    height: 645px;
}
.sec08_box_txt p,.sec08_box_txt figure{
    width: 50%;
}
.sec06_list h3,.sec11_list_txt h3{
    font-size: 2.6rem;
}
}

    /*スマホ
------------------------------*/
@media screen and (max-width: 750px) {
    :root{
        --m10:1.538vw;
        --m20:3.077vw;
        --m30:4.615vw;
        --m40:6.154vw;
        --m50:7.692vw;
        --m60:9.231vw;
        --m80:12.308vw;
        --m90:13.846vw;
    }
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    .shadow{filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.1));}
    h2{font-size: 7.692vw;}
    #wrapper {
        width: 100%;
        margin: 0 auto;
    }
    body{
        font-size: 1.6rem;
    }
    .inner,.inner02{
        padding: 0 15px;
    }
    #fv{
        background: none;
        height: auto;
        padding-top: 0;
    }
    .cta_top{
        font-size: 5.33vw;
    }
    .cta_top .top_catch{
    font-size: 8vw;
    }
    .cta{
        background-image: url(../images/bg_cta_sp.webp);
        font-size: 5.33vw;
    }
    .cta02{
        background-image: url(../images/cta02_sp.webp);
        height: auto;
        padding-top: 100%;
    }
    .cta_btn{
        width: 80%;
        margin: 0 auto;
    }
    .sec01_top_list li,.sec10_list li{
        width: 95%;
    }
    .sec01_top_list li figure{
        top: -10px;
        right: 5%;
        transform: translate(0,0);
    }
    #sec02::before{
        content: none;
    }
    #sec02::after{
        border: 40px solid transparent;
        border-top: 30px solid #c8c5c5;
    }
    #sec03 .sec03_1_list li{
        width: 30%;
        margin: 0 1.3%;
    }
    #sec04{
        background-image: url(../images/bg_sec04_body_sp.webp);
        height: auto;
    }
    #sec04 .inner{
        padding: 0;
    }
    .sec06_list{
        align-items: flex-start;
    }
    .sec06_list_top,.sec06_list_bottom{
        width: 50%;
        margin-bottom: var(--m50);
    }
    .sec06_list_bottom:last-child{
        margin-bottom: 0;
    }
    .sec06_list h3{
        font-size: 4.5vw;
    }
    #sec07{
        background-image: url(../images/bg_sec07_sp.webp);
    }
    #sec07 h2{
        top: -10px;
        width: 75%;
    }
    .sec08_box{
        padding: 8%;
    }
    .sec08_box_txt:first-child{
        flex-direction: row;
        margin-bottom: var(--m60);
    }
    .sec08_box_txt p{
        width: 100%;
    }
    .sec08_box_txt p,.sec08_box_txt:first-child p{
        padding: 0 0 var(--m30);
    }
    .sec08_box_txt figure{
        width: 80%;
        margin: 0 auto;
    }
    .sec11_list_txt h3{
        font-size: 2.4rem;
    }
    .sec11_list_txt h3 span{
        font-size: 1.4rem;
    }
        .sec11_list:nth-of-type(even){
            flex-direction: row;
        }
    .sec11_list .sec11_list_txt{
        width: 100%;
        margin-bottom: var(--m30);
    }
    .sec11_list figure{
        width: 90%;
        margin: 0 auto;
    }
    .js_acc{
        padding: 5% 50px 5% 8%;
    }
    .js_acc::before, .js_acc::after{
        right: 15px;
        width: 18px;
    }
    .js_acc_inner{
        padding: 5% 8%;
    }
    #contact{
        padding: var(--m60) 0 var(--m30);
    }
    #contact p:last-of-type{
        font-size: 1.6rem;
    }
    form#mail_form ul li label{
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 5px;
    }
    .checkmark{
        position: absolute;
        top: 5px;
        left: 0;
        height: 9px;
        width: 9px;
        border: 1px solid #ccc;
        border-radius: 50%;
        background: #fff;
        padding: 1px;
    }
}