@charset "UTF-8";

/* common */
.imgW {width: 100%; max-width: 100%; margin: 0 auto;}
.imgW img {width: 100%;}
.purple {color: #6c72ff;}
.violet {color: #4046dc;}
.green {color: #c5ff78;}
.gray {color: rgba(0, 0, 0, .55);}

/* mainVisual */
#mainVisual {width: 100%; height: 100%; max-height: fit-content; margin: 0 auto; background: #000; overflow: hidden; position: relative; z-index: 0;}
#mainVisual:before {content: ''; display: block; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(37, 40, 0) 0, rgba(36, 37, 40, .5) 50%, rgba(36, 37, 40, 1) 100%); opacity: .2; position: absolute; left: 0; top: 0; z-index: 1;}
#mainVisual .mainBanner {width: 100%; position: absolute; left: 50%; bottom: calc(50% - 35px); transform: translate(-50%, 50%); z-index: 2;}
#mainVisual .mainBanner .txtW {text-align: center;}
#mainVisual .mainBanner .txtW h2 {margin: .364em auto .304em; color: #fff; font-size: 4.125em; font-weight: 700; line-height: 1.25;}
#mainVisual .mainBanner .txtW p {color: #fff; line-height: 1;}
#mainVisual .mainBanner .txtW p.collaboration {font-size: 1.625em;}
#mainVisual .mainBanner .txtW p.category {}
#mainVisual .mainBanner .txtW .infoW {}
#mainVisual .mainBanner .txtW .infoW ul {display: flex; justify-content: center;}
#mainVisual .mainBanner .txtW .infoW ul li {padding: 0 1.5em; position: relative;}
#mainVisual .mainBanner .txtW .infoW ul li::after {content: ''; display: block; width: 1px; height: 1.875em; background: #fff; position: absolute; right: 0; top: .0625em;}
#mainVisual .mainBanner .txtW .infoW ul li:first-child {padding-left: 0;}
#mainVisual .mainBanner .txtW .infoW ul li:last-child {padding-right: 0;}
#mainVisual .mainBanner .txtW .infoW ul li:last-child::after {content: none;}
#mainVisual .mainBanner .txtW .infoW ul li p {font-size: 1.875em;}
#mainVisual .mainBanner .flexW {display: flex; justify-content: center; gap: 1em; margin: 3em auto 0;}
#mainVisual .mainBanner .flexW .moveBtn {width: 100%; max-width: 420px; padding: 2.125em;  border-radius: .75em; border: 1.5px solid transparent; transform: scale(1);}
#mainVisual .mainBanner .flexW .moveBtn.speech {background: rgba(0, 0, 0, .57);}
#mainVisual .mainBanner .flexW .moveBtn.booth {background: rgba(255, 255, 255, .21); border-color: rgba(255, 255, 255, .53);}
#mainVisual .mainBanner .flexW .moveBtn:hover,
#mainVisual .mainBanner .flexW .moveBtn:focus {transform: scale(.975);}
#mainVisual .mainBanner .flexW .moveBtn .txtW {}
#mainVisual .mainBanner .flexW .moveBtn .txtW .category {margin: 0 auto 3em;}
#mainVisual .mainBanner .flexW .moveBtn .txtW .ti {font-size: 1.875em; font-weight: 700; line-height: 1.5;}
#mainVisual .mainBg {width: 100%; height: 100%; min-height: 810px; background: url('../images/main_visual.jpg') no-repeat center top / cover;}

/* mainContents */
#mainContents {clear: both; width: 100%; margin: 0 auto; padding: 0; background: transparent; z-index: 1;}
#mainContents .area01,
#mainContents .area02,
#mainContents .area03,
#mainContents .area04,
#mainContents .area05 {clear: both; width: 100%; margin: 0 auto; padding: 4.5em 0; overflow: hidden;}

#mainContents .mentionW {text-align: center;}
#mainContents .mentionW strong {font-size: 3em; font-weight: 700; line-height: 1.5; word-break: keep-all;}
#mainContents .mentionW p {margin: .4em auto 0; font-size: 1.875em; font-weight: 500; line-height: 1.5; word-break: keep-all;}

#mainContents .txtW {margin: 4.5em auto 4.5em;}
#mainContents .txtW:first-child {margin-top: 0;}
#mainContents .txtW h3 {margin: .614em auto; line-height: 1.25; font-size: 3.25em; font-weight: 700; word-break: keep-all;}
#mainContents .txtW p {line-height: 1.5; word-break: keep-all;}
#mainContents .txtW p.category {font-size: 1.875em; font-weight: 600; line-height: 1;}
#mainContents .txtW p.info {font-size: 1.625em;}

#mainContents .flexW {display: flex; align-items: center; flex-wrap: wrap; gap: 4em;}
#mainContents .flexW .imgW {flex: 1 1 50%; max-width: calc(50% - 2em);}
#mainContents .flexW .imgW img {}
#mainContents .flexW .summaryW {flex: 1 1 50%; max-width: calc(50% - 2em);}
#mainContents .flexW .summaryW p {font-size: 2.125em; line-height: 2; word-break: keep-all;}

#mainContents .btnW {}
#mainContents .btnW .btn {display: block; width: fit-content; padding: .667em 1.6em; background: #202122; border-radius: 12px; color: #fff; font-size: 1.875em; line-height: 1; text-align: center;}
#mainContents .btnW .btn:hover, #mainContents .btnW .btn:focus {background: #4046dc;}
#mainContents .btnW .btn span {position: relative;}
#mainContents .btnW .btn span::after {content: ''; display: inline-block; width: .4em; height: .667em; background: url('../images/ico_arrow_right_big.png') no-repeat center center / 100%; margin-left: .75em;}

#mainContents .area01 .mentionW br {display: none;}

#mainContents .area02 {background: #4046dc;}
#mainContents .area02 .txtW {padding: 0 0 4.5em; color: #fff;}
#mainContents .area02 .txtW h3 br {display: none;}
#mainContents .area02 .flexW {justify-content: flex-start; flex-wrap: nowrap; position: relative;}
#mainContents .area02 .flexW .imgW {flex: auto; max-width: 420px; min-width: 300px; margin: 0; border-radius: 12px; overflow: hidden;}
#mainContents .area02 .flexW .summaryW {flex: auto; max-width: 100%; background: url('../images/coaching.png') no-repeat; background-position: right 0% bottom 50%; background-size: 16%; color: #fff;}
#mainContents .area02 .flexW .summaryW p {font-weight: 500;}

#mainContents .area03 {background: #f5ffda;}
#mainContents .area03 .txtW {color: #202122;}
#mainContents .area03 .txtW h3 br {display: none;}
#mainContents .area03 .flexW {justify-content: center;}
#mainContents .area03 .flexW .imgW {}
#mainContents .area03 .btnW {margin-top: 1.75em;}
#mainContents .area03 .tiW {margin: 5.625em auto 4em;}
#mainContents .area03 .tiW .ti {}
#mainContents .area03 .tiW .ti p {display: inline-block; padding: 0 .6em; line-height: 1.25; word-break: keep-all; position: relative;}
#mainContents .area03 .tiW .ti p::after {content: ''; display: block; width: 1px; height: 1em; background: #202122; position: absolute; right: 0; top: .134em;}
#mainContents .area03 .tiW .ti p:first-child {padding-left: 0;}
#mainContents .area03 .tiW .ti p:last-child {padding-right: 0;}
#mainContents .area03 .tiW .ti p:last-child::after {content: none;}
#mainContents .area03 .tiW .ti p.category,
#mainContents .area03 .tiW .ti p.subti {font-size: 1.875em; font-weight: 600;}
#mainContents .area03 .videoW {width: 100%; aspect-ratio: 16 / 9;}
#mainContents .area03 .videoW iframe {width: 100%; height: 100%;}

#mainContents .area04 {background: #fff;}
#mainContents .area04 .txtW {margin-bottom: 8.375em; text-align: center;}
#mainContents .area04 .txtW h3 {margin: .375em auto 1em; font-size: 4em;}
#mainContents .area04 .txtW p.category,
#mainContents .area04 .txtW p.info {font-size: 1.625em;}
#mainContents .area04 .txtW h3 br,
#mainContents .area04 .txtW p.info br {display: none;}
#mainContents .area04 .quizW {}
#mainContents .area04 .quizW .imgW {margin: 0 auto 3em; border-radius: 12px; overflow: hidden;}
#mainContents .area04 .quizW .imgW img {}
#mainContents .area04 .quizW .progressW {}
#mainContents .area04 .quizW .progressW p {font-size: 2.25em; font-weight: 500; line-height: 1.75; word-break: keep-all;}
#mainContents .area04 .quizW .progressW p span.purple {font-weight: 700;}
#mainContents .area04 .btnW .btn {width: 100%;}
#mainContents .area04 .btnW {margin-top: 3em;}

#mainContents .area05 {background: #fff;}
#mainContents .area05 .mentionW {margin: 0 auto 4.5em; padding: 0 0 4.5em;}
#mainContents .area05 .mentionW strong {font-size: 4em; line-height: 1.5;}
#mainContents .area05 .mentionW br {display: block;}
#mainContents .area05 .flexW {}
#mainContents .area05 .flexW .leftZone {flex: 1 1 50%; max-width: calc(50% - 2em);}
#mainContents .area05 .flexW .rightZone {flex: 1 1 50%; max-width: calc(50% - 2em);}
#mainContents .area05 .txtW {margin: 0 auto 2.5em;}
#mainContents .area05 .txtW h3 {margin: .625em auto .5em; font-size: 3em; line-height: 1.5;}
#mainContents .area05 .txtW p {}
#mainContents .area05 .txtW p.category {font-size: 1.625em;}
#mainContents .area05 .txtW p.info {line-height: 1.75;}
#mainContents .area05 .btnW {}
#mainContents .area05 .btnW .btn {margin: 0;}
#mainContents .area05 .btnW .btn span {}
#mainContents .area05 .imgW {max-width: 100%; border-radius: 2em; overflow: hidden;}
#mainContents .area05 .imgW img {}

/* around */
#around {display: flex; width: 100%; padding: 3em 0; overflow: hidden;}
#around ul {display: flex; gap: 6em; padding: 0 3em;}
#around ul li {min-width: 330px;}
#around ul li p {font-size: 1.625em;}

#around ul.origin {animation: origin 30s linear 0s infinite normal forwards running;}
#around ul.clone {animation: clone 30s linear 0s infinite normal none running;}

@keyframes origin {
    0%{transform:translateX(0);} 50%{transform:translateX(-100%);} 50.01%{transform:translateX(100%);} 100%{transform:translateX(0);}
}
@keyframes clone {
    0%{transform:translateX(0);} 100%{transform:translateX(-200%);}
}





@media all and (max-width:1740px){
    
}

@media all and (max-width:1599px){

    #mainContents .area02 .flexW .summaryW {background-position: right 10% bottom 50%;}

}

@media all and (max-width:1440px){
    
    #mainContents .flexW .summaryW p {font-size: 1.75em; line-height: 1.75;}
    #mainContents .btnW .btn {padding: .77em 1.846em; font-size: 1.625em;}

    #mainContents .area02 .flexW .summaryW {background-position: right 0 bottom 0; background-size: 18%;}

    #mainContents .area03 .btnW {margin-top: 1.25em;}

    #mainContents .area04 .quizW .progressW p {font-size: 1.625em;}

    #mainContents .area05 .mentionW strong {font-size: 3em;}
    #mainContents .area05 .btnW .btn {font-size: 1.375em;}
    #mainContents .area05 .imgW {border-radius: 1.5em;}
}

@media all and (max-width:1279px){
    
    #mainVisual .mainBanner .txtW h2 {margin: .462em 0 .385em; font-size: 3.25em;}
    #mainVisual .mainBanner .txtW p.collaboration {font-size: 1.375em;}
    #mainVisual .mainBanner .txtW .infoW ul li::after {height: 1.625em;}
    #mainVisual .mainBanner .txtW .infoW ul li p {font-size: 1.625em;}
    #mainVisual .mainBanner .flexW .moveBtn {max-width: 380px;}
    #mainVisual .mainBanner .flexW .moveBtn .txtW .ti {font-size: 1.625em;}

    #mainContents .txtW h3 {font-size: 2.375em;}
    #mainContents .txtW p.category {font-size: 1.625em;}
    #mainContents .txtW p.info {font-size: 1.375em;}
    
    #mainContents .mentionW strong {font-size: 2.375em;}
    #mainContents .mentionW p {margin: .462em auto 0; font-size: 1.625em;}
    
    #mainContents .flexW {gap: 3em;}

    #mainContents .area02 .flexW .imgW {max-width: 380px;}
    
    #mainContents .area03 .txtW {margin-bottom: 3.5em;}
    #mainContents .area04 .txtW h3 {font-size: 3.125em;}
    #mainContents .area03 .flexW {gap: 3em;}
    #mainContents .area03 .flexW .imgW,
    #mainContents .area03 .flexW .summaryW {flex: 1 1 100%; max-width: 100%;}
    #mainContents .area03 .flexW .summaryW .btnW {margin-top: 3em;}
    #mainContents .area03 .flexW .summaryW .btnW .btn {width: 100%;}
    #mainContents .area03 .tiW {margin: 4.875em auto 1.875em;}
    #mainContents .area03 .tiW .ti p {font-size: 1.625em;}
    
    #mainContents .area04 .quizW .imgW {margin: 0 auto 1.75em;}
    #mainContents .area04 .quizW .progressW .btnW {margin-top: 1.75em;}

    #mainContents .area05 .txtW h3 {font-size: 2.125em;}
    #mainContents .area05 .txtW p.info {font-size: 1.625em;}
    #mainContents .area05 .txtW p.info br {display: none;}

}

@media all and (max-width:1023px){

    #mainContents .flexW .summaryW p {font-size: 1.5em;}

    #mainContents .area02 .flexW .imgW {max-width: 300px;}
    #mainContents .area02 .flexW .summaryW p br {display: none;}
    
    #mainContents .area05 .flexW .leftZone {flex: 1 1 100%; max-width: 100%; order: 2;}
    #mainContents .area05 .flexW .rightZone {flex: 1 1 100%; max-width: 100%; order: 1;}
    #mainContents .area05 .txtW h3 {font-size: 3em;}
    #mainContents .area05 .txtW p br {display: none;}
    #mainContents .area05 .btnW .btn {width: 100%; font-size: 1.625em;}
    #mainContents .area05 .imgW {border-radius: 2em;}

}

@media all and (max-width:768px){

    #mainVisual .mainBanner {bottom: calc(50% - 26px);}
    #mainVisual .mainBanner .txtW h2 {margin: .75em auto; font-size: 2.5em;}
    #mainVisual .mainBanner .txtW .collaboration {font-size: 1.2em;}
    #mainVisual .mainBanner .txtW .infoW ul li {padding: 0 1.25em;}
    #mainVisual .mainBanner .txtW .infoW ul li::after {height: 1.5em;}
    #mainVisual .mainBanner .txtW .infoW ul li p {font-size: 1.5em;}
    #mainVisual .mainBanner .flexW .moveBtn {padding: 2em 1em;}
    #mainVisual .mainBanner .flexW .moveBtn .txtW .category {margin: 0 auto 2.25em;}
    #mainVisual .mainBanner .flexW .moveBtn .txtW .ti {font-size: 1.5em;}

    #mainContents .area01,
    #mainContents .area02,
    #mainContents .area03,
    #mainContents .area04,
    #mainContents .area05 {padding: 3.5em 0 3.5em;}

    #mainContents .mentionW strong {font-size: 2.267em; line-height: 1.25;}
    #mainContents .mentionW p {font-size: 1.5em;}

    #mainContents .txtW {margin: 3.5em auto 3.5em;}
    #mainContents .txtW h3 {font-size: 2.934em;}
    #mainContents .txtW p.category {font-size: 2em;}

    #mainContents .flexW {gap: 2.25em;}
    #mainContents .flexW .summaryW p {font-size: 1.734em;}

    #mainContents .btnW .btn {font-size: 1.375em;}
    
    #mainContents .area02 .txtW {padding: 0;}
    #mainContents .area02 .txtW h3 br {display: block;}
    #mainContents .area02 .flexW {flex-wrap: wrap; gap: 3em;}
    #mainContents .area02 .flexW .imgW {max-width: 530px; margin: 0 auto;}
    #mainContents .area02 .flexW .summaryW {flex: 1 1 100%; background-size: 12%;}
    #mainContents .area02 .flexW .summaryW p br {display: block;}

    #mainContents .area03 .tiW {margin: 3.5em auto 1.5em;}
    #mainContents .area03 .txtW h3 br {display: block;}
    
    #mainContents .area04 .txtW {margin-bottom: 3.6em;}
    #mainContents .area04 .txtW h3 {margin: .364em auto; font-size: 2.934em;}
    #mainContents .area04 .txtW p.category {font-size: 1.734em;}
    #mainContents .area04 .txtW p.info {font-size: 1.334em;}
    #mainContents .area04 .txtW h3 br,
    #mainContents .area04 .txtW p.info br {display: block;}

    #mainContents .area04 .quizW .imgW {margin: 0 auto 2.4em;}
    #mainContents .area04 .quizW .progressW p {font-size: 1.375em;}
    #mainContents .area04 .btnW {margin-top: 2.4em;}

    #mainContents .area05 .mentionW {margin: 0 auto 2.134em; padding: 0;}
    #mainContents .area05 .mentionW strong {font-size: 2.267em;}
    #mainContents .area05 .txtW h3 {font-size: 2.934em;}
    #mainContents .area05 .txtW p.category,
    #mainContents .area05 .txtW p.info {font-size: 1.734em;}
    #mainContents .area05 .txtW p br {display: block;}
    #mainContents .area05 .btnW .btn {font-size: 1.375em;}

    #around {padding: 2.5em 0;}
    #around ul {gap: 5em; padding: 0 2.5em;}
    #around ul li {min-width: 264px;}
    #around ul li p {font-size: 1.375em;}

}

@media all and (max-width:580px){

    #mainVisual .mainBanner .txtW p.collaboration {font-size: 1.734em;}
    #mainVisual .mainBanner .txtW h2 {font-size: 1.6em;}
    #mainVisual .mainBanner .txtW .infoW ul li {padding: 0 1em;}
    #mainVisual .mainBanner .txtW .infoW ul li p {font-size: 1em;}
    #mainVisual .mainBanner .txtW .infoW ul li::after {height: 1em;}
    #mainVisual .mainBanner .flexW {flex-wrap: wrap; margin: 1.334em auto 0;}
    #mainVisual .mainBanner .flexW .moveBtn {max-width: calc(100% - 104px + 1.75em); padding: 1.867em 1em;}
    #mainVisual .mainBanner .flexW .moveBtn .txtW .ti {font-size: 2em;}
    #mainVisual .mainBanner .flexW .moveBtn .txtW .category {font-size: 1.2em;}
    #mainVisual .mainBg {min-height: 712px;}
    
    #mainContents .area01 .mentionW span.moblie,
    #mainContents .area01 .mentionW br {display: block;}
    #mainContents .area01 .mentionW strong span.moblie:first-child {margin-bottom: -.25em;}
    #mainContents .area01 .mentionW strong span.moblie:last-child {margin-top: .25em;}
    
    #mainContents .area02 .txtW p.info {font-size: 1em;}
    #mainContents .area02 .flexW .imgW {max-width: 100%; min-width: 100%;}
    #mainContents .area02 .flexW .summaryW {background: none; text-align: left;}
    #mainContents .area02 .flexW .summaryW p br {display: none;}

    #mainContents .area05 .txtW h3 {font-size: 2.625em;}
    #mainContents .area05 .mentionW strong {font-size: 2.265em;}
    #mainContents .area05 .imgW {border-radius: 1.5em;}

    #around {padding: 1.5em 0;}
    #around ul {gap: 3em; padding: 0 1.5em;}
    #around ul li {min-width: 218px;}
    #around ul li p {font-size: 1.125em;}
}

@media all and (max-width:480px){

    #mainVisual .mainBanner {bottom: calc(50% - 52px);}
    #mainVisual .mainBanner .txtW p.collaboration {font-size: 5.417vw;}
    #mainVisual .mainBanner .txtW h2 {font-size: 5vw;}
    #mainVisual .mainBanner .txtW .infoW ul li {padding: 0 3.125vw;}
    #mainVisual .mainBanner .txtW .infoW ul li p {font-size: 3.125vw;}
    #mainVisual .mainBanner .txtW .infoW ul li::after {height: 3.125vw; top: .209vw;}
    #mainVisual .mainBanner .flexW {margin: 1.334em auto 0;}
    #mainVisual .mainBanner .flexW .moveBtn {max-width: 100%; padding: 1.867em 1em;}
    #mainVisual .mainBanner .flexW .moveBtn .txtW .ti {font-size: 6.25vw;}
    #mainVisual .mainBanner .flexW .moveBtn .txtW .category {font-size: 3.75vw;}

    #mainContents .area03 .tiW .ti p {display: inline;}

    #mainContents .area05 .mentionW {max-width: 298px;}
    #mainContents .area05 .mentionW br {display: none;}
    #mainContents .area05 .txtW p br {display: none;}
    #mainContents .area05 .imgW {border-radius: 1em;}
    
}

@media all and (max-width:319px){
    #mainContents .area05 .imgW {border-radius: .75em;}
}

/* ie hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){
}