@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(min-width:1000px){

/*STYLE*/
.sp {
    display:none;
}

.cts {
    width:1000px;
}

.titles {
    padding-bottom:30px;
    text-align:center;
}

.titles h2 {
    font-size:300%;
    font-weight:bold;
    line-height:135%;
}

.titles .subtitle {
    font-size:135%;
    font-weight:bold;
}

.titles .kana {
    font-size:100%;
}



/*HEADER*/
header {
    background:#0046b4;
    padding:20px;
    text-align:center;
}

header .start {
    font-size:135%;
    font-weight:bold;
    line-height:100%;
    color:#fff;
}



/*MV*/
#mv {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;
}

#mv .photos {
    width:100%;
    height:100%;
    position:relative;
    top:0;
    left:0;
    display:flex;
}

#mv .photos .photo {
    width:50%;
    height:650px;
}

#mv .photos .photo:first-child {
    background:url(../img/mv_kojima.jpg) center;
    background-size:cover;
    -webkit-animation:open_left  0.7s ease forwards;
    animation:open_left  0.7s ease forwards;
}

#mv .photos .photo:last-child {
    background:url(../img/mv_kato.jpg) center;
    background-size:cover;
    -webkit-animation:open_right  0.7s ease forwards;
    animation:open_right  0.7s ease forwards;
}

#mv .maincopy {
    position:absolute;
    top:50px;
}

#mv .maincopy .logo {
    width:200px;
    margin-bottom:35px;
}

#mv .maincopy .copies {
    display:flex;
    justify-content:center;
}

#mv .maincopy .copies .copy {
    width:60px;
}



/*INTRO*/
#intro {
    padding:100px 0;
    background:#0046b4 url(../img/intro_bg.jpg) no-repeat center bottom;
    position:relative;
}

#intro .deco {
    font-size:1300%;
    font-weight:500;
    letter-spacing:0;
    line-height:100%;
    color:rgba(255,255,255,0.1);
    white-space:nowrap;
    position:absolute;
    top:-30px;
    left:0;
    right:0;
    text-align:center;
    margin:auto;
}

#intro .titles {   
}

#intro .titles h2 {
    color:#fff;
}

#intro .movie {
    margin-bottom:30px;
}

#intro .program {
    background:#fff;
    padding:30px;
}

#intro .program .item {
    font-size:120%;
    font-weight:500;
    text-align:center;
    padding-bottom:15px;
}

#intro .program .times {
    display:flex;
    justify-content:space-between;
}

#intro .program .times ul {
    width:48.5%;
}

#intro .program .times ul li {
    display:flex;
    width:100%;
    margin-bottom:10px;
}

#intro .program .times ul li:last-child {
    margin-bottom:0;
}

#intro .program .times ul li .time {
    width:20%;
    background:#c8b432;
    font-size:85%;
    padding:5px 10px;
    text-align:center;
    color:#fff;
}

#intro .program .times ul li .detail {
    width:80%;
    background:#f7f4e0;
    font-size:85%;
    padding:5px 10px;
}



/*PROFILE*/
#profile {
    display:flex;
    background:#fff;
}

#profile .photo {
    width:calc(50% - 100px);
    background:url(../img/profile_kojima.jpg) center;
    background-size:cover;
}

#profile .profile {
    width:550px;
    margin-left:50px;
    padding:70px 0;
}

#profile .titles {
    text-align:left;
}

#profile .titles .position {
    border:#0046b4 1px solid;
    color:#0046b4;
    display:inline-block;
    font-size:100%;
    line-height:100%;
    padding:7px 12px;
    margin-bottom:5px;
}

#profile .titles h2 {
    font-weight:600;
}

#profile .copy {
    padding-bottom:30px;
}

#profile .histories {

}

#profile .histories .history {
    padding-bottom:30px;
}

#profile .histories .history:nth-child(3) {
    padding-bottom:0;
}

#profile .histories .history .item {
    background:#0046b4;
    color:#fff;
    padding:12px 18px;;
    margin-bottom:10px;
    line-height:100%;
}

#profile .histories .history .item .after {
    padding-left:10px;
    font-size:80%;
}

#profile .histories .history ul {
}

#profile .histories .history ul li {
    display:flex;
    align-items:center;
}

#profile .histories .history ul li .after {
    font-size:80%;
    color:#e6321e;
}

#profile .histories .history ul li:before {
    content:"●";
    margin-right:5px;
}

#profile .histories .etc {
    text-align:right;
}



/*ABOUT*/
#about {
   padding:100px 0;
   position:relative;
}

#about h2 {
    width:600px;
    margin:0 auto 30px;
}

#about .cts {
    background:#fff;
    padding:70px 70px 60px;
}

#about .features {
    margin-bottom:50px;
}

#about .features .feature {
    display:flex;
    background:#e6f0fa;
    padding:15px 20px;
    margin-bottom:12px;
}

#about .features .feature:last-child {
    margin-bottom:0;
}

#about .features .feature img {
    width:20px;
    margin-right:10px;
}

#about .features .feature p {
    font-size:110%;
    font-weight:600;
}

#about h3 {
    font-size:180%;
    font-weight:bold;
    text-align:center;
    padding-bottom:50px;
}

#about h3 .point {
    position:relative;
}

#about h3 .point:before {
    content:"";
    width:6px;
    height:6px;
    background:#e6321e;
    border-radius:10vw;
    position:absolute;
    top:-8px;
    left:0;
    right:0;
    margin:auto;
}

#about .another {
    border:#0046b4 2px solid;
    padding:30px 35px 25px;
    position:relative;
    margin-bottom:60px;
}

#about .another h4 {
    position:absolute;
    top:-20px;
    left:0;
    right:0;
    margin:auto;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
}

#about .another h4 span {
    font-size:120%;
    font-weight:bold;
    color:#0046b4;
    background:#fff;
    padding:15px;
}

#about .another .item {
    font-weight:bold;
    padding-bottom:5px;
}

#about .another .detail {
}

#about .ex {
    width:600px;
    position:relative;
}

#about .ex p {
    font-size:110%;
    line-height:180%;
}

#about .ex .summary {
    font-size:135%;
    font-weight:bold;
}

#about .photo {
    width:360px;
    position:absolute;
    bottom:0;
    right:calc(50% - 530px);
}

.underline .line {
    width:100%;
    height:8px;
    background:#fae600;
    position:absolute;
    bottom:0;
    left:0;
    z-index:0;
}

.underline .word {
    position:relative;
}



/*REASON*/
#reason {
    background:linear-gradient(45deg,#f0e6f0,#f0f0f0);
}

#reason .titles {
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0.5),rgba(255,255,255,0));
    padding:100px 0 0;
}

#reason .titles .cts {
    position:relative;
    padding-bottom:50px;
}

#reason .titles .subtitle {
    text-align:center;
    line-height:100%;
    margin-bottom:15px;
}

#reason .titles .subtitle span {
    background:#ff0078;
    color:#fff;
    padding:12px 30px;
    border-radius:20vw;
    display:inline-block;
}

#reason .titles h2 {
    font-size:350%;
    line-height:125%;
}

#reason .titles .photo {
    width:180px;
    position:absolute;
    bottom:0;
    right:100px;
}

#reason .reasons {
}

#reason .reasons .reason {
    padding:70px 0;
}

#reason .reasons .reason:nth-child(even) {
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0.5),rgba(255,255,255,0));
}

#reason .reasons .reason .number {
    text-align:center;
    line-height:100%;
    margin-bottom:15px;
}

#reason .reasons .reason .number span {
    background:#ff0078;
    color:#fff;
    padding:12px 30px;
    border-radius:20vw;
    display:inline-block;
}

#reason .reasons .reason h3 {
    font-size:300%;
    font-weight:bold;
    line-height:100%;
    text-align:center;
    margin-bottom:30px;
}

#reason .reasons .reason .messages {
    display:flex;
    justify-content:space-between;
    flex-direction:row-reverse;
}

#reason .reasons .reason:nth-child(even) .messages {
    flex-direction:row;
}

#reason .reasons .reason .messages .message {
    width:870px;
    background:#fff;
    padding:25px 50px 40px;
    border-radius:20px;
    position:relative;
}

#reason .reasons .reason:nth-child(odd) .messages .message:before {
    content:"";
    width:15px;
    height:20px;
    border-top:transparent 15px solid;
    border-right:#fff 20px solid;
    border-bottom:transparent 15px solid;
    border-left:transparent 20px solid;
    position:absolute;
    top:35px;
    left:-40px;
}

#reason .reasons .reason:nth-child(even) .messages .message:before {
    content:"";
    width:15px;
    height:20px;
    border-top:transparent 15px solid;
    border-right:transparent 20px solid;
    border-bottom:transparent 15px solid;
    border-left:#fff 20px solid;
    position:absolute;
    top:35px;
    right:-40px;
}

#reason .reasons .reason .messages .message .letter {
    background:url(../img/reason_line.svg) top;
    background-size:10px 48px;
}

#reason .reasons .reason .messages .message .letter p {
    line-height:48px;
    padding-bottom:48px;
    font-size:110%;
}

#reason .reasons .reason .messages .message .letter p:last-child {
    padding-bottom:0;
}

#reason .reasons .reason .messages .avatar {
    width:100px;
}

#reason .reasons .reason .messages .avatar img {
    border-radius:50px;
}

#reason .type {
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0.5),rgba(255,255,255,0));
}

#reason .type .cts {
    padding:70px 0;
}

#reason .type h3 {
    font-size:150%;
    font-weight:bold;
    line-height:100%;
    color:#fff;
    padding:20px;
    background:#ff0078;
    text-align:center;
    margin-bottom:20px;
}

#reason .type .copy {
    font-size:110%;
    line-height:180%;
    padding-bottom:30px;
}

#reason table {
    width:100%;
    border-collapse:collapse;
    margin-bottom:50px;
}

#reason table th {
    font-size:110%;
    border:#aaa 1px solid;
    background:#fff;
    color:#fff;
    padding:15px;
}

#reason table th:first-child {
    background:#464646;
}

#reason table th:nth-child(2) {
    background:#0046b4;
}

#reason table th:last-child {
    background:#e6321e;
}

#reason table td {
    border:#aaa 1px solid;
    background:#fff;
    padding:15px 20px;
    text-align:center;
}

#reason table td:first-child {
    font-size:110%;
    font-weight:bold;
    text-align:left;
}

#reason table td:nth-child(n+2) {
    width:180px;
    font-size:120%;
}

#reason table tr:nth-child(n+6) td:first-child {
    color:#e6321e;
}

#reason table tr:nth-child(n+6) td:last-child {
    color:#e6321e;
}

#reason .column {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:70px;
}

#reason .column .message {
    width:750px;
    background:#fff;
    border-radius:20px;
    padding:25px 40px;
    position:relative;
}

#reason .column .message p {
    font-size:110%;
    line-height:180%;
}

#reason .column .message:after {
    content:"";
    width:15px;
    height:20px;
    border-top:transparent 15px solid;
    border-right:transparent 20px solid;
    border-bottom:transparent 15px solid;
    border-left:#fff 20px solid;
    position:absolute;
    top:35px;
    right:-40px;
}

#reason .column .avatar {
    width:100px;
    margin-left:35px;
}

#reason .column .avatar img {
    border-radius:50px;
}

#reason .study_meeting {
    
}

#reason .study_meeting .item {
    text-align:center;
    margin-bottom:20px;
}

#reason .study_meeting .item p {
    font-size:150%;
    font-weight:bold;
    display:inline-block;
}

#reason .study_meeting .item .underline {
    border-bottom:#ff0078 5px solid;
}

#reason .study_meeting .meeting {
    width:800px;
    margin:auto;
}

#reason .study_meeting .meeting p {
    font-size:110%;
    padding:15px 20px;
    background:#fff;
    margin-bottom:12px;
}

#reason .study_meeting .meeting p:last-child {
    margin-bottom:0;
}

#reason .study_meeting .meeting p .subject {
    font-weight:bold;
}

#reason .study_meeting .meeting p .subject:first-child:before {
    content:"◆";
    color:#ff0078;
    padding-right:5px;
}

#reason .study_meeting .meeting p .times .course {
    font-size:90%;
}



/*PRICE*/
#price {
    padding:100px 0;
    background:#fff url(../img/price_bg.png);
}

#price .titles {

}

#price .titles .icon {
    width:25px;
    margin:0 auto 10px;
}

#price .titles h2 {
    padding-bottom:30px;
}

#price .titles .copy {
    font-size:120%;
    font-weight:500;
}

#price table {
    width:100%;
    border-collapse:collapse;
    margin-bottom:30px;
}

#price table th {
    font-size:110%;
    border:#aaa 1px solid;
    background:#fff;
    color:#fff;
    padding:15px;
}

#price table th:first-child {
    background:#464646;
}

#price table th:nth-child(2) {
    background:#0046b4;
}

#price table th:last-child {
    background:#e6321e;
}

#price table td {
    border:#aaa 1px solid;
    background:#fff;
    padding:15px 20px;
    text-align:center;
}

#price table td:first-child {
    font-size:110%;
    font-weight:bold;
    text-align:left;
}

#price table td:nth-child(n+2) {
    width:180px;
    font-size:120%;
}

#price table tr:nth-child(n+2) td:nth-child(n+2) {
    color:#e6321e;
    font-size:130%;
    font-weight:600;
}

#price table tr:nth-child(2) td {
    text-decoration:line-through;
}



/*CTA*/
.cta {
    display:flex;
    justify-content:space-between;
}

.cta a {
    width:48%;
    display:block;
}

.cta a .cta_btn {
    padding:6px;
    -webkit-animation:cta 1s ease infinite alternate;
    animation:cta 1s ease infinite alternate;
}

.cta a:first-child .cta_btn {
    background:#0046b4;
}

.cta a:last-child .cta_btn {
    background:#e6321e;
}

.cta a .cta_btn .btn {
    height:100px;
    border:#fff 1px solid;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px;
    position:relative;
}

.cta a .cta_btn .btn .bomb {
    width:80px;
    height:80px;
    background:url(../img/price_bomb.svg) no-repeat center;
    background-size:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:absolute;
    left:20px;
}

.cta a .cta_btn .btn .bomb p {
    font-size:80%;
    font-weight:bold;
    letter-spacing:0;
    line-height:135%;
}

.cta a:first-child .cta_btn .btn .bomb p {
    color:#0046b4;
}

.cta a:last-child .cta_btn .btn .bomb p {
    color:#e6321e;
}

.cta a .cta_btn .btn .details {
    text-align:center;
}

.cta a .cta_btn .btn .details .item {
    font-size:180%;
    font-weight:bold;
    line-height:100%;
    padding-bottom:10px;
    color:#fff;
}

.cta a .cta_btn .btn .details .detail {
    font-size:110%;
    line-height:100%;
    color:#fff;
}

.cta a .cta_btn .btn img {
    width:30px;
    position:absolute;
    right:20px;
}



/*AMBASSADOR*/
#ambassador {
    padding:100px 0;
    background:#fff url(../img/ambassador_bg.jpg) center;
    background-size:cover;
    position:relative;
    overflow:hidden;
}

#ambassador .deco {
    font-size:1300%;
    font-weight:500;
    letter-spacing:-5px;
    line-height:100%;
    color:rgba(200,200,200,0.2);
    white-space:nowrap;
    position:absolute;
    top:-30px;
    margin-left:50%;
    transform:translate(-50%,0);
}

#ambassador .titles {
}

#ambassador .titles .icon {
    width:25px;
    margin:0 auto 10px;
}

#ambassador .titles .subtitle {
}

#ambassador .titles h2 {
}

#ambassador .biography {
    display:flex;
    background:#fff;
}

#ambassador .biography .photo {
    width:350px;
    height:450px;
    background:url(../img/ambassador.jpg) top center;
    background-size:cover;
}

#ambassador .biography .profile {
    padding:50px;
}

#ambassador .biography .profile .ambassador {
    background:#ff0078;
    color:#fff;
    display:inline-block;
    border-radius:10vw;
    font-size:90%;
    line-height:100%;
    padding:10px 20px;
    margin-bottom:15px;
}

#ambassador .biography .profile .name {
    font-size:220%;
    font-weight:600;
    line-height:100%;
    padding-bottom:5px;
}

#ambassador .biography .profile .position {
    font-size:90%;
    color:#969696;
    padding-bottom:30px;
}

#ambassador .biography .profile .ex {

}

#ambassador .biography .profile .ex p {
    font-size:110%;
    line-height:180%;
}



/*LINK*/
#link {
    padding:70px 0;
    background:#d8dee2;
}

#link .links {
    display:flex;
    justify-content:space-between;
}

#link .links .link {
    width:48.5%;
    padding:35px 35px 30px;
    background:#fff;
}

#link .links .link .logo {
    width:70%;
    margin:0 auto 20px;
}

#link .links .link .qr {
    width:110px;
    margin:0 auto 20px;
}

#link .links .link a {
    width:50%;
    margin:auto;
    background:#c8b432;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    padding:7px;
}

#link .links .link a p {
    color:#fff;
}

#link .links .link a .arrow {
    width:8px;
    height:8px;
    border-top:#fff 1px solid;
    border-right:#fff 1px solid;
    transform:rotate(45deg);
    position:absolute;
    right:25px;
}



/*BACK TO TOP*/
.BackToTop {
position:fixed;
width:40px;
height:40px;
right:20px;
bottom:20px;
z-index:100;
display:none;
}



/*FOOTER*/
footer {
padding:35px 0;
background:#0046b4;
}

footer .copyright {
font-size:70%;
text-align:center;
color:#fff;
}



/*SWIPER*/
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
z-index: 10;
cursor: pointer;
background-size: 50px 50px;
background-position: center;
background-repeat: no-repeat;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url(../img/slide_prev.svg);
left: 50px;
right: auto;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url(../img/slide_next.svg);
right: 50px;
left: auto;
}



}