@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:250%;
font-weight:bold;
line-height:135%;
}

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

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



/*----- MV -----*/
#mv {
    width:100%;
    height:580px;
    background:url(../img/mv_bg.jpg) center;
    background-size:cover;
    position:relative;
}

#mv .obj {
    width:135%;
    position:absolute;
    top:0;
    left:0;
    mix-blend-mode:multiply;
}

#mv .cts {
    width:880px;
    height:100%;
    display:flex;
    align-items:center;
    position:relative;
}

#mv .copies {
    width:500px;
}

#mv .copies .subcopy1 {
    width:500px;
    margin-bottom:12px;
}

#mv .copies .subcopy2 {
    width:480px;
    margin-bottom:15px;
}

#mv .copies .maincopy {
    width:480px;
}

#mv .photos {
    width:400px;
    height:550px;
    overflow:hidden;
    position:absolute;
    right:0;
    bottom:0;
}

#mv .photos .photo {
}

#mv .photos .name {
    position:absolute;
    right:0;
    bottom:20px;
}

#mv .photos .name p {
    background:#000;
    color:#fff;
    display:inline-block;
    font-size:110%;
    font-weight:500;
    letter-spacing:2px;
    line-height:100%;
    padding:5px 5px 6px 6px;
}



/*----- CTA -----*/
.cta {
    width:100%;
    background:#dc3264;
    padding:35px 0;
}

.cta .target {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:5px;
}

.cta .target img {
    width:18px;
}

.cta .target p {
    font-size:180%;
    font-weight:bold;
    line-height:100%;
    color:#fff;
    margin:0 20px;
}

.cta .target p .point {
    position:relative;
}

.cta .target p .point:before {
    position:absolute;
    top:-3px;
    left:0;
    right:0;
    margin:auto;
    content:"";
    width:5px;
    height:5px;
    border-radius:2.5px;
    background:#fae164;
}

.cta .copy {
    font-size:200%;
    font-weight:bold;
    line-height:135%;
    color:#fff;
    text-align:center;
    margin-bottom:30px;
}

.cta .cta_btn {
    margin-top:20px;
    text-align:center;
    animation:cta 1s infinite alternate;
}

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

.cta .cta_btn .btn a {
    display:flex;
    justify-content:center;
    align-items:center;
    background:#00b900;
    padding:12px 60px 5px;
    border-radius:30vw;
    border:#fff 4px solid;
}

.cta .cta_btn .btn a img {
    width:90px;
    margin-right:10px;
}

.cta .cta_btn .btn a .copies {
    position:absolute;
    top:-18px;
    left:0;
    right:0;
    text-align:center;
}

.cta .cta_btn .btn a .copies .subcopy {
    display:inline-block;
}

.cta .cta_btn .btn a .copies .subcopy p {
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    height:36px;
    border-radius:10vw;
    padding:0 20px;
    color:#00b900;
    font-size:110%;
    font-weight:bold;
    padding-bottom:2px;
}

.cta .cta_btn .btn a .tx {
    text-align:left;
}

.cta .cta_btn .btn a .tx p {
    font-size:180%;
    font-weight:bold;
    line-height:125%;
    color:#fff;
}

.cta .audience {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:20px;
}

.cta .audience p:first-child {
    font-size:100%;
    font-weight:600;
    line-height:100%;
    background:#fff;
    color:#dc3264;
    padding:3px 5px;
    margin-right:10px;
}

.cta .audience p:last-child {
    font-size:100%;
    font-weight:600;
    line-height:100%;
    color:#fff;
}




/*MOVIE*/
#movie {
    padding:30px 0;
    background:linear-gradient(#000,#000);
}

#movie .cts {
    width:900px;
}

#movie .movie {
width:100%;
margin:auto;
padding-top: 56.25%;
position:relative;
}

#movie .movie iframe {
position: absolute;
top:0;
right:0;
width:100% !important;
height:100% !important;
}



/*KEYPOINT*/
#keypoint {
    padding:70px 0;
    background:#fef5f8;
}

#keypoint .titles {

}

#keypoint .titles .title {
    font-size:300%;
    font-weight:600;
}

#keypoint .titles .subtitle {
    display:flex;
    justify-content:center;
    align-items:center;
}

#keypoint .titles .subtitle p:first-child {
    font-size:300%;
    font-weight:600;
    line-height:100%;
    background:#dc3264;
    padding:5px 7px 8px;
    color:#fff;
    margin-right:6px;
}

#keypoint .titles .subtitle p:last-child {
    font-size:300%;
    font-weight:600;
    line-height:100%;
}

#keypoint .illust {
    width:400px;
    margin:0 auto 35px;
}

#keypoint .secrets {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:30px;
}

#keypoint .secrets .secret {
    width:32%;
    position:relative;
    border:#dc3264 2px solid;
    border-radius:10px;
    background:#fff;
    padding:25px 15px 15px;
    margin:0 2% 30px 0;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
}

#keypoint .secrets .secret:nth-child(3n) {
    margin-right:0;
}

#keypoint .secrets .secret:last-child {
    margin-right:0;
}

#keypoint .secrets .secret:nth-child(n+4) {
    margin-bottom:0;
}

#keypoint .secrets .secret img {
    width:30px;
    position:absolute;
    top:-15px;
    left:0;
    right:0;
    margin:auto;
}

#keypoint .secrets .secret .tx {
    font-size:150%;
    font-weight:500;
    line-height:135%;
}

#keypoint .summaries {
    text-align:center;
}

#keypoint .summaries .tx {
    font-size:180%;
    font-weight:600;
    margin-bottom:8px;
}

#keypoint .summaries .summary {
    display:flex;
    justify-content:center;
    align-items:center;
}

#keypoint .summaries .summary p:first-child {
    font-size:200%;
    font-weight:600;
    line-height:100%;
    border:#dc3264 2px solid;
    color:#dc3264;
    padding:5px 7px 8px;
    margin-right:6px;
}

#keypoint .summaries .summary p:last-child {
    font-size:200%;
    font-weight:600;
    line-height:100%;
}



/*SEMINAR*/
#seminar {
    padding:70px 0;
    background:#fafafa;
}

#seminar .cts {
    width:900px;
}

#seminar .titles {
}

#seminar .titles .subtitle {
}

#seminar .titles .subtitle p {
    font-size:150%;
    font-weight:bold;
    line-height:100%;
    padding:8px 10px 10px;
    background:#0046b4;
    color:#fff;
    display:inline-block;
    margin-bottom:5px;
}

#seminar .titles h2 {
    font-size:300%;
    font-weight:bold;
    color:#0046b4;
}

#seminar .copy {
    text-align:center;
    margin-bottom:45px;
}

#seminar .copy p {
    font-size:120%;
    font-weight:500;
}

#seminar .copy p:first-child {
    font-size:150%;
    font-weight:700;
    margin-bottom:15px;
}

#seminar .result_title {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:30px;
}

#seminar .result_title img {
    width:30px;
}

#seminar .result_title p {
    font-size:200%;
    font-weight:bold;
    color:#dc3264;
    text-align:center;
    padding:0 15px;
}

#seminar .results {
    margin-bottom:50px;
}

#seminar .results .result {
    width:740px;
    height:130px;
    border:#dc3264 2px solid;
    background:#fff;
    margin-bottom:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
    padding:0 20px;
    border-radius:15px;
}

#seminar .results .result:nth-child(even) {
    margin:0 0 25px auto;
    flex-direction:row-reverse;
}

#seminar .results .result:last-child {
    margin-bottom:0;
}

#seminar .results .result .illust {
    width:150px;
    position:absolute;
    bottom:15px;
}

#seminar .results .result:nth-child(odd) .illust {

}

#seminar .results .result:nth-child(even) .illust {
    margin-right:0;
}

#seminar .results .result .message {
    width:calc(100% - 180px);
}

#seminar .results .result:nth-child(odd) .message {
    margin-left:180px;
}

#seminar .results .result:nth-child(even) .message {
    margin-right:150px;
}

#seminar .results .result .message .item {
    font-size:180%;
    font-weight:bold;
    color:#dc3264;
}

#seminar .results .result .message .tx {
    font-size:120%;
    font-weight:500;
}

#seminar .movie {
width:100%;
margin:auto;
padding-top: 56.25%;
position:relative;
margin-bottom:50px;
}

#seminar .movie iframe {
position: absolute;
top:0;
right:0;
width:100% !important;
height:100% !important;
}

#seminar .summaries {
    text-align:center;
}

#seminar .summaries .tx {
    font-size:150%;
    margin-bottom:10px;
}

#seminar .summaries .tx .underline {
    border-bottom:#000 1px solid;
}

#seminar .summaries .summary {
    font-size:200%;
    font-weight:bold;
    color:#dc3264;
}




/*ROW*/
#row {
    padding:70px 0 100px;
}

#row .cts {
    width:850px;
}

#row .rows {
}

#row .rows .row {
    display:flex;
    border-bottom:#e1e1e1 1px solid;
    padding:20px 15px;
}

#row .rows .row:first-child {
    border-top:#e1e1e1 1px solid;
}

#row .rows .row:last-child {
    margin-bottom:0;
}

#row .rows .row .item {
    width:25%;
    font-weight:600;
}

#row .rows .row .tx {
    width:75%;
}



/*PRIVACY*/
#privacy {
    padding:70px 0 100px;
}

#privacy .cts {
    width:850px;
}

#privacy .privacies {
}

#privacy .privacies .privacy {
    border-bottom:#e1e1e1 1px solid;
    padding:20px 15px;
}

#privacy .privacies .privacy:first-child {
    border-top:#e1e1e1 1px solid;
}

#privacy .privacies .privacy:last-child {
    margin-bottom:0;
}

#privacy .privacies .privacy .item {
    font-weight:bold;
    padding-bottom:5px;
}

#privacy .privacies .privacy .tx {
}









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



/*FOOTER*/
footer {
padding:30px 0;
}

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

footer .link a {
    font-size:100%;
    font-weight:600;
    margin:0 15px;
}

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





/*----- INVIEW -----*/
.fadeIn {
    opacity:0;
    transition:1s;
}

.fadeIn.show {
    opacity:1;
}

.fadeInUp {
    opacity:0;
    transform:translate(0,30%);
    transition:1s;
}

.fadeInUp.show {
    opacity:1;
    transform:translate(0,0);
}




/*----- SWIPER -----*/
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev::after,
.swiper-button-next::after {
    content: "";
    height: 0;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
}
/* 前への矢印カスタマイズ */
.swiper-button-prev::after {
    width:30px;
    height:30px;
    border-left:2px #000 solid;
    border-bottom:2px #000 solid;
    transform:rotate(45deg);
    left:30px;
}
/* 次への矢印カスタマイズ */
.swiper-button-next::after {
    width:30px;
    height:30px;
    border-top:2px #000 solid;
    border-right:2px #000 solid;
    transform:rotate(45deg);
    right:30px;
}





}