.common-width{
    width: 960px;
    margin: 0 auto 6em;
}
.hero-space{

}
.min-text{
    font-size: var(--d-font-size-min-1);
    margin-left: .15em;
}
.site-header{
    background-size: 100%;
    background-image: url("../../assets/img/pc-main.png");
    min-height: 1300px;
    background-repeat: no-repeat;
}

.hero-inner{
    width: 85%;
    margin: 0 auto;
}

.hero-f-size{
    font-size: var(--d-font-size-9);
    line-height: 1.2;
    margin: 1em 0 .5em;
}

.hero-catch{
    font-size: var(--d-font-size-5);
    font-weight: 600;
    margin-bottom: .5em;
}

.title-box{
    width: 100%;
    margin: 0 auto 3em;
    text-align: center;
}
.title-box .en{
    font-family: var(--font-f-en);
    font-size: var(--d-font-size-8);
    line-height: 1.05;
    margin-bottom: .25em;
}
.title-box .en.min{
    font-size: var(--d-font-size-4);
}
.title-box h3{
    font-size: var(--d-font-size-1);
    font-weight: 500;
    margin: 0;
}
.purple{
    color: #9100FF;
}

.text-center{
    text-align: center;
}

.text-box{
    line-height: 2.5;
}

.purple-box{
    width: 100%;
    border: solid 16px #F2CFFF;
    border-radius: 100px;
    background-color: #F9E9FF;
    padding: 3.5em 3em;
    text-align: center;
}
section{
    margin: 0 0 6em;
}
.strong{
    font-weight: 600;
}
.margin-point{
    margin: 2em 0;
    display: block;
    font-size: var(--d-font-size);
}

.benefit-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.benefit-wrap .box{
    width: 31%;
    box-shadow:var(--shadow);
    border-radius: 50px;
}

.benefit-wrap .box .title{
    font-weight: 600;
}
.benefit-wrap .box .text{
    font-size: var(--d-font-size-min-0);
    color:var(--d-color);
}

.benefit-wrap .box .illust img{
    width: 100%;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

.benefit-wrap .box .text-box{
    padding: 1em;
    line-height: 1.75;
}
.benefit-wrap .box .title{
    margin-bottom: 1em;
}


.purple-section{
    background-size: 100%;
    background-image: url("../../assets/img/bg-circle-purple.svg");
    background-color: #F5EBFF ;
    background-position: top;
    background-repeat: no-repeat;
    padding: 280px 0 0;
    border-radius: 0 0 100px 100px;
}

.course-wrap .box{
    background: white;
    box-shadow: var(--shadow);
    margin-bottom: 2em;
    display: flex;
    flex-wrap: wrap;
    padding: 3em;
}

.course-wrap .box .photo img{
    width: 100px;
    border-radius: 100px;
}
.course-wrap .box .right{
    width: 70%;
}

.course-wrap .box .right .title{
    font-weight: 500;
    font-size: var(--d-font-size-1);
    margin: 0 0 .5em;
}

.course-wrap .box .text-box p{
    line-height: 2;
    color: var(--d-color);
}
.course-wrap .box .name{
    font-size: var(--d-font-size-min-2);
    color: var(--d-color);
    text-align: center;
}
.course-wrap{
    padding-bottom: 6em;
}

.course-detail-wrap{
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 12em;
}

.course-detail-wrap .box{
    width: 46%;
    background: #DA90F4;
    background: linear-gradient(90deg,rgba(218, 144, 244, 1) 0%, rgba(201, 147, 253, 1) 100%);
}
.course-detail-wrap .box{
    position: relative;
    background: #fff;       /* 下は必ず白 */
    /* overflow: hidden; ← これがあると top:-60px の吹き出しが切れるので入れない */
}

/* 背景（上だけ） */
.course-detail-wrap .box::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height: 110px;          /* 紫帯の高さ（調整） */
    z-index: 0;

    /* 紫帯（グラデ） */
    background: linear-gradient(90deg,#da90f4 0%, #c993fd 100%);
}

/* boxの中身を前面に */
.course-detail-wrap .box > *{
    position: relative;
    z-index: 1;
}

/* 吹き出しはさらに前面＆切られないように */
.course-detail-wrap .box .head{
    position: relative;
    z-index: 2;
    overflow: visible;
}
.course-detail-wrap .box .head::before{
    z-index: 3;             /* ここはあなたの既存のままでOK */
}

.course-detail-wrap .box:last-of-type{
    margin-left: auto;
}


.course-detail-wrap .box:last-of-type{
    position: relative;
}
.course-detail-wrap .box:last-of-type .head:before{
    position: absolute;
    top: -60px;
    left: 0;
    content: url("../../assets/img/hukidashi.svg");
}
.course-detail-wrap .box .body ul{
    display: inline-flex;
    padding: .5em 2em;
    background: rgba(255, 255, 255, 0.8); /* ←ここを変更 */
    border-radius: 100px;
    border: solid 1px #000;
}
.course-detail-wrap .box .body li{
    font-size: var(--d-font-size-1);
    padding: 0 .5em;
    display: flex;
    align-items: baseline;
}

.course-detail-wrap .box .icon-doc{
    position: relative;
    display: flex;
    align-items: center;
    color:white;
    font-size: var(--d-font-size-0);
    padding: 1em;
    font-weight: 600;
}
.course-detail-wrap .box .icon-doc:before{
    content: url("../../assets/img/icon-doc.svg");
    margin: 0 .75em 0 0;
    line-height: 1;
}
.course-detail-wrap .box:first-of-type .icon-doc:after{
    position: absolute;
    top: 0;
    right: 0;
    line-height: .8;
    padding: 0;
    border-radius: 100px;
    font-size: var(--d-font-size-9);
    content: "BASIC";
    opacity: .15;
    font-family: var(--font-f-en);
}
.course-detail-wrap .box:last-of-type .icon-doc:after{
    position: absolute;
    top: 0;
    right: 0;
    line-height: .8;
    padding: 0;
    border-radius: 100px;
    font-size: var(--d-font-size-9);
    content: "PRACTICE";
    opacity: .15;
    font-family: var(--font-f-en);
}


.course-detail-wrap .box .body li.icon-clock:before {
    content: url("../../assets/img/icon-clock.svg");
    margin: 0 .25em 0 0;
}
.course-detail-wrap .box .body li.icon-yen:before {
    content: url("../../assets/img/icon-yen.svg");
    margin: 0 .25em 0 0;
}




.course-detail-wrap .box .body.base-course-bg{
    width: 100%;
    height: 314px;
    background-image: url("../../assets/img/base-course-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    padding: 1em;
    display: flex;
    align-items: end;
}
.course-detail-wrap .box:first-of-type .body.base-course-bg{
    position: relative;
}
.course-detail-wrap .box:first-of-type .body.base-course-bg:after{
    position: absolute;
    content: url("../../assets/img/icon-arrow-purple.svg");
    top: 55%;
    right: -62px;
}


.course-detail-wrap .box .body.practice-course-bg{
    width: 100%;
    height: 314px;
    background-image: url("../../assets/img/practice-course-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    padding: 1em;
    display: flex;
    align-items: end;
}

.course-detail-wrap .box .foot{
    padding:1em;
    background: white;
}

.faq-section{
    border-radius: 100px;
    background-color: #F9E9FF;
    padding: 3.5em 3em;
}

/* ========== QA ========== */
/* 質問行（dt） */
.qa-q{
    margin: 0 0 1em;
    display: grid;
    grid-template-columns: 64px 1fr 104px; /* Q / 質問文 / ＋ */
    align-items: center;

    background: #fff;
    color: #111;
    font-weight: 700;
    line-height: 1.3;
         /* 横paddingは各カラムで付ける */
}
/* 開いたときは下マージンを消す */
.qa-q.is-open {
    margin-bottom: 0;
}
/* 左の Q（疑似要素） */
.qa-q::before{
    content: "Q";
    display: block;
    padding-left: 28px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

/* 質問文（dt内のテキスト領域）を左寄せにする */
.qa-q{
    text-align: left;
}

/* 右端のアイコンボックス（＋/−） */
.qa-icon{
    width: 60px;
    height: 60px;
    background: #c7a0ff;
    justify-self: end;
    position: relative;
}

/* ＋の横棒 */
.qa-icon::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:20px;
    height:2px;
    background:#111;
    transform:translate(-50%,-50%);
}

/* ＋の縦棒 */
.qa-icon::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:2px;
    height:20px;
    background:#111;
    transform:translate(-50%,-50%);
    transition: opacity .2s ease;
}

/* 開いたら「−」（縦棒を消す） */
.qa-q.is-open .qa-icon::after{
    opacity: 0;
}

/* 回答 */
.qa-a{
    margin: 0 0 1em;
    display: none;
    background: #D2A2F7;
    color: white;
    padding: 18px 28px 22px;
    line-height: 1.9;
}

/* is-open のときだけ表示 */
.qa-q.is-open + .qa-a{
    display: block;
}

.access-section{
    background: #303030;
    padding: 8em 0 6em;
}
.access-section .title-box p,
.access-section .title-box h3{
    color: #D8D8D8;
}
.access-section .flex-box{
    display: flex;
    flex-wrap: wrap;
}
.access-section .flex-box .title{
    color: white;
    font-size: var(--d-font-size-3);
    text-align: center;
}
.access-section .flex-box .left{
    width: 49%;
    border-right: solid 1px white;
}
.access-section .flex-box .right{
    width: 49%;
    margin: 0 auto 0 auto;
    text-align: center;
}
.access-section .flex-box .right iframe{
    width: 80%;
    height: 330px;
}

.access-section dt,
.access-section dd,
.access-section p{
    color:white;
}
.access-section .address{
    text-align: center;
    margin-bottom: 3em;
}
.access-section dl{
    display: flex;
}

.access-section dt{
    width: 30%;
}
.access-section dd{
    width: 70%;
}
.access-section .common-width{
    width: 88%;
    margin: 0 auto;
}



.access-section .flex-box .left .title-box .en.min{
    font-size: var(--d-font-size-min-1);
    color:var(--d-color-thin-0);
}

.instructor-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.instructor-wrap .box{
    width: 32%;
    background: #49474D;
    color: white;
    border-radius: 68px;
}
.instructor-wrap .box .photo img{
    width: 100%;
    border-radius: 68px 68px 0 0;
    min-height: 240px;
    object-fit: cover;
}

.instructor-wrap .box .body{
    padding: 1em;
}

.instructor-wrap .box .course-name,
.instructor-wrap .box .name
{
    text-align: center;
}
.course-info-space{
    width: 100%;
    margin: 0 auto 3em;
}
.white-circle{
    text-align: center;
    display: table;
    font-weight: 600;
    background: white;
    border-radius: 68px;
    padding: 1.5em 3em;
    color: #9100FF;
    font-size: var(--d-font-size-1);
    margin: 0 auto 2em;
}
.course-info-space .text {
    text-align: center;
    display: table;
    margin: 0 auto 8em;
}

.instructor-wrap .box .text-box p{
    line-height: 2;
    margin-bottom: 1em;
}
.instructor-wrap .box .name{
    font-weight: 600;
    letter-spacing: 1.5px;
}

.course-wrap .name{
    font-weight: 600;
    letter-spacing: 1.5px;
}
.course-wrap .name .min-text{
    font-size: var(--d-font-size-min-4);
}
.instructor-wrap .box .name .min-text{
    font-size: var(--d-font-size-min-4);
}
.instructor-wrap .box .course-name{
    font-size: var(--d-font-size-min-2);
    padding: .25em 1em;
    background: #7F7F7F;
    border-radius: 68px;
    display: table;
    text-align: center;
    margin: 0 auto 1.75em;
}

.schedule-section{
    background-image: url("../../assets/img/schedule-bg.png");
    background-repeat: repeat;
    padding: 8em 0 6em;
}
.schedule-section iframe{
    width: 100%;
    height: 600px;
}

#benefit,
#instructor,
#voice,
#price,
#faq,
#contact {
    scroll-margin-top: 100px;
}
#course{
    scroll-margin-top: -150px;
}

.course-wrap.course-wrap-pc .box .photo{
    width: 12%;
}
.course-wrap.course-wrap-pc .box .right{
    width: 82%;
    margin-left: auto;
}
.header-logo{
    display: flex;
    align-items: center;
}
.header-logo:before{
    content: '';
    background-image: url(../../assets/img/favicon.png);
    background-size: 100%;
    background-repeat: no-repeat;
    margin-right: 1em;
    width: 30px;
    height: 30px;
    display: inline-block;
}
/* ボタン */
.btn-list {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 6em;
}

.btn-list li {
    cursor: pointer;
    padding: 10px 20px;
    border: 1px solid #7c3aed;
    border-radius: 30px;
    transition: 0.3s;
}

.btn-list li.active {
    background: #7c3aed;
    color: #fff;
}


.flow-section{
    border-radius: 100px;
    background-color: #F9E9FF;
    padding: 3.5em 0;
}
.flow-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.flow-wrap .box{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 1.5em 0 2em;
}
.flow-wrap .box::after{
    content: url("../../assets/img/flow-bottom.svg");
    width: 100%;
}

.flow-wrap .box:last-of-type::after{
    content: none;
}

.flow-wrap .box .left{
    width: 20%;
}
.flow-wrap .box .left img{
    margin-left: 2em;
}
.flow-wrap .box .right{
    width: 80%;
}
.flow-wrap .box .right > *{
    margin-right: 2em;
}
.flow-wrap .box .right .title{
    font-size: var(--d-font-size-0);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1em;
}
.flow-wrap .box .right .text-box p{
    font-size: var(--d-font-size-min-0);
    line-height: 2;
}

/* パネル切り替え */
.js-panel {
    display: none;
}

.js-panel.active {
    display: block;
}
/* コースタイプのラジオ全体 */
.wpcf7-form-control-wrap[data-name="course_type"] .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    justify-content: center;
}

/* 各ラジオ項目 */
.wpcf7-form-control-wrap[data-name="course_type"] .wpcf7-list-item {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

/* label の並びを横に */
.wpcf7-form-control-wrap[data-name="course_type"] .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    writing-mode: horizontal-tb;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .flow-wrap .box .left,
    .flow-wrap .box .right,
    .flow-wrap .box .right > *{
        width: 100%;
        margin: 0;
    }
    .flow-wrap .box .left{
        text-align: center;
    }
    .flow-wrap .box .left img{
        margin-left: 0;
        margin-bottom: 1em;
        width: 30%;
    }
    .flow-wrap .box{
        padding: 1em 1em;
        margin: 0 ;
    }

    .flow-wrap .box::after{
        display: none;
        /*
        content: "";
        display: block;
        width: 100%;
        height: 40px;
        background-image: url("../../assets/img/flow-bottom.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        margin: 2.5em 0 1.5em;

         */
    }

    .flow-section.common-width{
        margin-bottom: 3em;
    }
    .qa-icon{
        width: 46px;
        height: 70px;
    }
    .course-wrap.course-wrap-sp .box .header{
        display: flex;
        width: 100%;
        align-items: center;
        margin-bottom: 1.25em;
    }
    .course-wrap.course-wrap-sp .box .header .photo{
        width: 28%;
        margin-right: 1em;
    }
    .course-wrap.course-wrap-sp .box .header .photo img{
        width: 100%;
    }
    .course-wrap.course-wrap-sp .box .header .title{
        width: 70%;
        font-size: var(--d-font-size-1);
        font-weight: 600;
        line-height: 1.65;
    }
    .qa-a{
        padding: 1em;
    }
    .qa-q::before{
        padding-left: 12px;
    }
    .qa-q{
        grid-template-columns: 44px 1fr 67px;
        line-height: 1.5;
    }
    #course{
        scroll-margin-top: 80px;
    }
    .site-header{
        min-height: 800px;
    }
    .common-width{
        width: 90%;
        margin: 0 auto;
    }
    .benefit-wrap .box{
        width: 100%;
        margin-bottom: 1.8em;
    }
    .course-detail-wrap .box{
        width: 100%;
    }
    .faq-section{
        padding: 3.5em 1em;
        margin-bottom: 6em;
    }
    .instructor-wrap .box{
        width: 100%;
        margin-bottom: 1em;
    }
    .purple-box{
        padding: 3.5em 1em;
        margin-bottom: 3em;
    }
    .white-circle{
        padding: 1.5em 1em;
    }
    .course-info-space .text{
        margin-bottom: 2em;
    }
    .course-wrap{
        padding-bottom: 2em;
    }
    .purple-section{
        padding: 120px 0 0;
    }
    .access-section .flex-box .left{
        width: 100%;
        border: none;
    }
    .access-section .flex-box .right{
        width: 100%;
    }
    .course-detail-wrap{
        padding-bottom: 6em;
    }
    .access-section .flex-box .left{
        margin-bottom: 2em;
    }
    .access-section .flex-box .right iframe{
        width: 100%;
    }
    .first-section .text-box{
        margin-bottom: 3em;
    }
    .hero-catch{
        font-size: var(--d-font-size-4);
    }
    .course-wrap .box .right{
        width: 100%;
    }
    .course-wrap .box{
        padding: 2em;
    }
    .course-detail-wrap .box:first-of-type{
        margin-bottom: 10em;
    }
    .hero-f-size{
        font-size: calc( var(--d-font-size) * 3 );
        line-height: 1.3;
    }
    .hero-inner{
        margin-top: 15em;
    }
    .access-section dl{
        flex-wrap: wrap;
    }
    .access-section dt,
    .access-section dd{
        width: 100%;
    }
    .access-section dt{
        text-align: center;
    }
    .site-header{
        min-height:770px;
    }
    .instructor-wrap{
        margin-bottom: 3em;
    }
    .fixed-side-btn{
        display: none;
    }
    .course-detail-wrap .box:first-of-type .body.base-course-bg:after{
        content: url("../../assets/img/icon-arrow-purple-sp.svg");
        right:43%;
        top:160%;
    }
    .site-header{
        background-image: url("../../assets/img/sp-main@2x.png.webp");
    }
    .header-logo:before{
        margin-right: .5em;
    }
}