@charset "utf-8";
/*共通設定*/
*,
::before,
::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.2s;
}

a:hover {
    opacity: 0.8;
}

body {
    font-size: 18px;
    line-height: 1.7;
    font-weight: 600;
    color: #2A2A2A;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;
    background-color: var(--bg-color);
    /* 細い線の方眼 */
    background-image: linear-gradient(to right, var(--grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size); 
}

:root {
    --grid-size: 40px;
    /* マスの大きさ */
    --grid-color: rgba(255,255,255,0.5);
    /* 細い線の色 */
    --grid-bold-color: rgba(255,255,255,0.5);
    /* 太い線の色（5マスごと等） */
    --bg-color: #F6EFF9;
    /* 背景色 */
}

main {
    position: relative;
}

img {
    max-width: 100%;
}

.wrap {
    position: relative;
    overflow: hidden;
}

.tb-br,
.sp-br {
    display: none;
}

.pc-br {
    display: block;
}

.parent {
    padding: 80px 40px;
}

.child {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.maru {
    font-family: "Zen Maru Gothic", sans-serif;    
}

.wdxl {
    font-family: "WDXL Lubrifont JP N", sans-serif;
}

.cta-btn {
    display: inline-block;
}

.cta-btn-img {
    display: block;
    width: 100%;
}

    /*吹き出しタイトル*/
.fukidashi-title-wrap {
    max-width: 320px;
    width: 100%;
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.fukidashi-txt-wrap {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 4px;
}

.fukidashi-en-title {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
}

.fukidashi-h2 {
    font-weight: 800;
    white-space: nowrap;
}

.fukidashi-title {
    width: 100%;
}

    /*<div class="h2-wrap">*/
.h2-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 8px;
    margin-bottom: 64px;
}

.en-title {
    width: 100%;
}

.h2-wrap h2 {
    font-size: 18px;
}
/*終わり*/


/*<section class="bg">*/
.bg {
    padding: 0 40px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: url(../img/bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}

.bg-in {
    width: 100%;
    height: 100%;
}

.bg-l {
    width: calc(50% - 300px);
    height: 100%;
    padding-right: 40px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 32px;
}

.bg-ul {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}

.bg-logo {
    max-width: 320px;
    width: 100%;
}

.bg-line-btn {
    max-width: 320px;
}

/*終わり*/


/*<div class="lp-wrap">*/
.lp-wrap {
    position: relative;
    background-color: #fff;
    z-index: 2;
}
/*終わり*/


/*<section class="fv">*/
.fv {
    padding: 100px 40px 60px 40px; 
    position: relative;
}

.fv-txt-wrap {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}

.fv-h1 {
    width: 100%;
    text-align: center;
}

.fv-txt-01 {
    max-width: 440px;
    width: 100%;
}

.fv-logo-wrap {
    text-align: center;
}

.fv-logo {
    max-width: 400px;
    width: 100%;
}

.fv-txt-02 {
    text-align: center;
}

.fv-txt-03 {
    display: inline-block;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    font-size: 20px;
    padding: 4px;
    border: solid 2px #2A2A2A;
    background-color: #fff;
}

.fv-txt-04-wrap {
    text-align: center;
}

.fv-txt-04 {
    max-width: 400px;
    width: 100%;
}

.fv-txt-05 {
    text-align: center;
    font-size: 24px;
    line-height: 1;
}

.fv-line-btn-wrap {
    text-align: center;
    margin-top: 40px;
}

.fv-line-btn {
    max-width: 480px;
    width: 100%;
}

.fv-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
/*終わり*/


/*<section class="about">*/
.about {
    padding: 100px 40px 64px 40px;
    background-image: url(../img/about_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.about-in {
    position: relative;
}

.about-title {
    max-width: 160px;
}

.about-h2 {
    font-size: 12px;
}

.about-txt-wrap {
    border: solid 2px #2A2A2A;
    border-radius: 8px;
    background-color: #fff;
    padding: 100px 40px 40px 40px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}

.about-photo-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.about-photo {
    max-width: 580px;
    width: 100%;
}

.about-logo {
    max-width: 360px;
    width: 100%;
}
/*終わり*/


/*<section class="grandprix">*/
.grandprix {
    padding: 80px 40px 40px 40px;
    background-image: url(../img/grandprix_bg_02.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.grandprix-title {
    max-width: 280px;
}

.grandprix-con {
    position: relative;
    padding: 56px 24px 40px 24px;
    margin-bottom: 64px;
}

.grandprix-con-in {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    z-index: 2;
}

.grandprix-h3 {
    text-align: center;
    font-weight: 800;
    color: #E788B1;
    font-size: 32px;
    line-height: 1.3;
}

.grandprix-h3 small {
    font-size: 22px;
}

.grandprix-img-wrap {
    width: 100%;
    height: 100%;
    text-align: center;
}

.grandprix-img {
    width: 80%;
    border-radius: 8px;
}

.grandprix-txt-wrap {
    text-align: center;
    font-size: 16px;
}

.grandprix-title-img {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    max-width: 160px;
    width: 100%;
    z-index: 3;
}

.grandprix-bg-01 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.grandprix-line-btn-wrap {
    text-align: center;
}

.grandprix-line-btn {
    max-width: 440px;
    width: 100%;
}
/*終わり*/


/*<div class="graph-bg">*/
.graph-bg {
    padding-top: 0;
    background-color: #f1ebff;
    /* 細い線の方眼 */
    background-image:
        linear-gradient(to right, rgba(202,180,255,0.4) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(202,180,255,0.4) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
}
/*終わり*/


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

.flow-title {
    max-width: 140px;
}

.flow-wrap {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.flow-con {
    position: relative;
}

.fukidashi {
    position: relative;
    width: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    border: 2px solid #2A2A2A;
}

/* 吹き出しのしっぽ */
.fukidashi::after {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 50px; /* 位置は自由に調整可能 */
    width: 0;
    height: 0;
    border-width: 18px 12px 0 12px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    filter: drop-shadow(0 0 0 #2A2A2A);
}

/* 外枠の黒い縁取りを再現 */
.fukidashi::before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 48px;
    width: 0;
    height: 0;
    border-width: 20px 14px 0 14px;
    border-style: solid;
    border-color: #2A2A2A transparent transparent transparent;
}

.fukidashi-in {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 100%;
    height: 100%;
    padding: 20px;
    background: linear-gradient(90deg, #E17FFF, #6F86FF);
    border-radius: 8px;
    border: 2px solid #2A2A2A;
}

/* 吹き出しのしっぽ */
.fukidashi-in::after {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 46px; /* 位置は自由に調整可能 */
    width: 0;
    height: 0;
    border-width: 18px 12px 0 12px;
    border-style: solid;
    border-color: #E17FFF transparent transparent transparent;
    filter: drop-shadow(0 0 0 #2A2A2A);
}

.flow-con-in {
    width: 100%;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 24px;
    z-index: 2;
}

.flow-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-weight: 400;
    line-height: 1;
    background: linear-gradient(90deg, #E17FFF 4%, #6F86FF 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.flow-num span {
    font-size: 40px;
}

.flow-txt-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.flow-txt-02 {
    font-size: 14px;
}

.flow-fukidashi {
    width: 100%;
}
/*終わり*/


/*<section class="qualification">*/
.qualification {
    padding-top: 80px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
    gap: 40px;
}

.qualification-in {
    background-color: #fff;
    border-radius: 8px;
    padding: 56px 40px;
}

.qualification .h2-wrap {
    margin-bottom: 32px;
}

.qualification-title {
    max-width: 350px;
}

.qualification-ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qualification-ul li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qualification-line-btn-wrap {
    text-align: center;
}

.qualification-line-btn {
    max-width: 440px;
    width: 100%;
}
/*終わり*/


/*<section class="incubation">*/
.incubation {
    padding: 100px 40px 64px 40px;
    background-image: url(../img/incubation_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.incubation-in {
    position: relative;
}

.incubation-title {
    max-width: 200px;
}

.incubation-h2 {
    font-size: 14px;
}

.incubation-con {
    border: solid 2px #2A2A2A;
    border-radius: 8px;
    background-color: #fff;
    padding: 80px 0 40px 0;
}

.incubation-txt-wrap {
    text-align: center;
    padding: 0 40px;
}

.incubation-swiper {
    padding: 40px 0;
    transition-timing-function: linear;
}

.incubation-swiper .swiper-wrapper {
    transition-timing-function: linear;
}

.incubation-swiper .swiper-slide {
    height: auto;
}

.incubation-swiper .swiper-box {
    height: 100%;
}

.incu-model {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border: solid 2px #2A2A2A;
    border-radius: 8px;
}
/*終わり*/


/*<section class="talent">*/
.talent {
    background-color: #F6EFF9;
    /* 細い線の方眼 */
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.5) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.5) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
}

.talent-title {
    max-width: 180px;
}

.talent-swiper {
    padding-bottom: 40px;
}

.talent-swiper .swiper-box {
    border: solid 2px #2A2A2A;
    border-radius: 8px;
    padding: 16px;
    background-color: #fff;
}

.talent-swiper .swiper-slide {
    height: auto;
}

.talent-swiper .swiper-box {
    height: 100%;
}

.talent-img-wrap {
    position: relative;
}

.incubation-logo {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    max-width: 160px;
    width: 100%;
}

.talent-name-wrap {
    text-align: center;
    color: #E788B1;
    margin-top: 16px;
    line-height: 1.5;
    border-bottom: solid 2px #E788B1;
    padding-bottom: 8px;
}

.talent-h3 {
    font-size: 32px;
    font-weight: 800;
}

.talent-name-txt {
    font-size: 16px;
}

.talent-txt-wrap {
    padding-top: 16px;
    text-align: center;
    font-size: 16px;
}

.swiper-button-next,
.swiper-button-prev {
    color: #2A2A2A;
    top: 55%;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 24px;
}

.swiper-pagination-bullet {
  background: #E788B1;
}
/*終わり*/


/*<section class="faq">*/
.faq {
    padding: 100px 40px 64px 40px;
    background-image: url(../img/faq_bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.faq-in {
    position: relative;
}

.faq-title {
    max-width: 100px;
}

.faq-h2 {
    font-size: 14px;
}

.faq-wrap {
    padding-top: 100px;
}

.faq-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-con {
    border: solid 1px #2A2A2A;
    border-radius: 8px;
    background-color: #fff;
}

.nav-open {
    position: relative;
    padding: 4px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-open:hover {
    cursor: pointer;
}

.q-txt {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.5;
}

.q-txt span {
    font-size: 32px;
    background: linear-gradient(90deg, #E17FFF 4%, #6F86FF 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;   
    font-weight: 400; 
}

.faq-arrow {
    transition: 0.3s;
}

.nav-open.active .faq-arrow {
    transform: rotate(180deg);
}

.faq-txt {
    position: relative;
    display: none;
    padding: 4px 16px;
    font-size: 16px;
    border-top: solid 1px #999;
    background-color: #fff;
    border-radius: 0 0 8px 8px;
}
/*終わり*/


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

.notes-in {
    background-color: #fff;
    border-radius: 8px;
    padding: 40px;
}

.notes .h2-wrap {
    margin-bottom: 32px;
}

.notes-title {
    max-width: 140px;
}

.notes-ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notes-ul li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notes-line-btn-wrap {
    text-align: center;
    margin-top: 32px;
}

.notes-line-btn {
    max-width: 320px;
    width: 100%;
}
/*終わり*/


/*<section class="privacy">*/
.privacy {
    padding-top: 40px;
}

.privacy-in {
    background-color: #fff;
    border-radius: 8px;
    padding: 40px;
}

.privacy .h2-wrap {
    margin-bottom: 32px;
}

.privacy-title {
    max-width: 380px;
}

.privacy-line-btn-wrap {
    text-align: center;
    margin-top: 32px;
}

.privacy-line-btn {
    max-width: 400px;
    width: 100%;
}
/*終わり*/


/*<footer class="footer">*/
.footer {
    padding: 40px 40px 8px 40px;
    color: #fff;
    position: relative;
    background: linear-gradient(90deg, #E17FFF 4%, #6F86FF 80%);
    z-index: 2;
}

.footer-in {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
}

.footer-logo {
    max-width: 320px;
}

.copyright {
    text-align: center;
    font-size: 12px;
    margin-top: 40px;
}
/*終わり*/


/*1320px ~ 1025px*/
@media (max-width: 1520px) {  
/*<section class="bg">*/
    .bg-l {
        display: none;
    }
/*終わり*/
}
/*終わり*/


/*タブレット*/
@media (max-width: 1024px) {  
/*共通設定*/
    .pc-br,
    .sp-br {
        display: none;
    }

    .tb-br {
        display: block;
    }
/*終わり*/  
  

/*<section class="fv">*/
/*終わり*/


/*<section class="grandprix">*/
/*終わり*/


/*<section class="flow">*/
/*終わり*/


/*<section class="qualification">*/
/*終わり*/


/*<section class="incubation">*/
/*終わり*/


/*<section class="talent">*/
/*終わり*/


/*<section class="faq">*/
/*終わり*/


/*<section class="notes">*/
/*終わり*/


/*<section class="privacy">*/
/*終わり*/


/*<footer class="footer">*/
/*終わり*/
}
  
  
/*スマホ*/
@media (max-width: 599px) {
/*共通設定*/
    body {
        font-size: clamp(16px, 18vw / 5.99, 18px);
    }

    .pc-br,
    .tb-br {
        display: none;
    }

    .sp-br {
        display: block;
    }

    .parent {
        padding: 80px 5vw;
    }

    /*吹き出しタイトル*/
    .fukidashi-title-wrap {
        max-width: clamp(240px, 320vw / 5.99, 320px);
        top: clamp(-40px, -60vw / 5.99, -60px);
    }

    /*<div class="h2-wrap">*/
    .h2-wrap {
        margin-bottom: clamp(48px, 64vw / 5.99, 64px);
    }
/*終わり*/ 


/*<section class="fv">*/
    .fv {
        padding: 80px 3vw 40px 3vw; 
    }

    .fv-txt-01 {
        max-width: clamp(280px, 440vw / 5.99, 440px);
    }

    .fv-logo {
        max-width: clamp(240px, 400vw / 5.99, 400px);
    }

    .fv-txt-02 {
        font-size: clamp(14px, 18vw / 5.99, 18px);
    }

    .fv-txt-03 {
        width: 100%;
        font-size: clamp(18px, 20vw / 5.99, 20px);
    }

    .fv-txt-04 {
        max-width: clamp(280px, 400vw / 5.99, 400px);
    }

    .fv-txt-05 {
        font-size: clamp(18px, 24vw / 5.99, 24px);
    }

    .fv-bg {
        height: auto;
    }

/*終わり*/


/*<section class="about">*/
    .about {
        padding: 80px 3vw 40px 3vw; 
    }

    .about-title {
        max-width: clamp(100px, 160vw / 5.99, 160px);
    }

    .about-h2 {
        font-size: clamp(10px, 12vw / 5.99, 12px);
    }

    .about-txt-wrap {
        padding: clamp(80px, 100vw / 5.99, 100px) 16px 16px;
        font-size: clamp(14px, 18vw / 5.99, 18px);
    }

    .about-logo {
        max-width: clamp(240px, 360vw / 5.99, 360px);
    }
/*終わり*/


/*<section class="grandprix">*/
    .grandprix {
        padding: 80px 3vw 40px 3vw;
    }

    .grandprix-title {
        max-width: clamp(240px, 280vw / 5.99, 280px);
    }

    .grandprix-con {
        padding: 40px 24px 32px 24px;
    }

    .grandprix-con-02 {
        margin-bottom: 40px;
    }

    .grandprix-con-in {
        gap:  clamp(16px, 24vw / 5.99, 24px);
    }

    .grandprix-h3 {
        font-size: clamp(20px, 32vw / 5.99, 32px);
    }

    .grandprix-h3 small {
        font-size: clamp(16px, 22vw / 5.99, 22px);
    }

    .grandprix-img {
        width: 90%;
    }

    .grandprix-txt-wrap {
        text-align: left;
        font-size: clamp(14px, 16vw / 5.99, 16px);
    }
/*終わり*/


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

    .flow-title {
        max-width: clamp(100px, 140vw / 5.99, 140px);
    }

    .flow-fukidashi {
        height: 160px;
    }
/*終わり*/


/*<section class="qualification">*/
    .qualification-in {
        padding: clamp(40px, 56vw / 5.99, 56px) clamp(16px, 32vw / 5.99, 32px);
    }

    .qualification-title {
        max-width: clamp(240px, 350vw / 5.99, 350px);
    }
/*終わり*/


/*<section class="incubation">*/
    .incubation {
        padding: 100px 3vw 40px 3vw; 
    }

    .incubation-title {
        max-width: clamp(160px, 200vw / 5.99, 200px);
    }

    .incubation-con {
        padding: clamp(80px, 100vw / 5.99, 100px) 0 40px 0;
    }

    .incubation-txt-wrap {
        padding: 0 clamp(24px, 40vw / 5.99, 40px);
        font-size: 14px;
        text-align: left;
    }

    .incu-model {
        height: clamp(200px, 240vw / 5.99, 240px);
    }
/*終わり*/


/*<section class="talent">*/
    .talent-title {
        max-width: clamp(160px, 180vw / 5.99, 180px);
    }

    .incubation-logo {
        max-width: clamp(120px, 160vw / 5.99, 160px);
    }

    .talent-h3 {
        font-size: clamp(24px, 32vw / 5.99, 32px);
    }

    .talent-name-txt {
        font-size: 14px;
    }

    .talent-txt-wrap {
        text-align: left;
        font-size: 14px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        top: 42%;
    }

/*終わり*/


/*<section class="faq">*/
    .faq-title {
        max-width: clamp(64px, 100vw / 5.99, 100px);
    }

    .faq-wrap {
        padding-top: clamp(80px, 100vw / 5.99, 100px);
    }

    .q-txt,
    .faq-txt {
        font-size: clamp(14px, 16vw / 5.99, 16px);
    }
/*終わり*/


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

    .notes-in {
        padding: clamp(40px, 56vw / 5.99, 56px) clamp(16px, 32vw / 5.99, 32px);
    }

    .notes-title {
        max-width: clamp(120px, 140vw / 5.99, 140px);
    }
/*終わり*/


/*<section class="privacy">*/
    .privacy-in {
        padding: clamp(40px, 56vw / 5.99, 56px) clamp(16px, 32vw / 5.99, 32px);
    }

    .privacy-title {
        max-width: clamp(240px, 380vw / 5.99, 380px);
    }
/*終わり*/


/*<footer class="footer">*/
    .footer {
        padding: 40px 5vw 8px 5vw;
    }
/*終わり*/

}