@charset "utf-8";

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

@media(max-width:999px){

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

p {
font-size:1rem;
line-height:150%;
letter-spacing:0.5px;
}

img {
width:100%;
height:auto;
}

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




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

#mv .obj {
    width:300%;
    position:absolute;
    top:-1px;
    left:-1px;
    mix-blend-mode:multiply;
}

#mv .cts {
}

#mv .copies {
    width:90%;
    margin:0 auto;
    padding-top:25px;
}

#mv .copies .subcopy1 {
    width:100%;
    margin:0 auto 10px;
}

#mv .copies .subcopy2 {
    width:100%;
    margin:0 auto 20px;
}

#mv .copies .maincopy {
    width:75%;
}

#mv .photos {
    width:40%;
    height:55vw;
    overflow:hidden;
    margin:auto;
    position:absolute;
    bottom:0;
    right:-7%;
}

#mv .photos .photo {
}

#mv .photos .name {
    position:absolute;
    right:10vw;
    bottom:15px;
}

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



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

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

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

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

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

.cta .cta_btn {
    margin-top:15px;
    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:15px 40px 5px 30px;
    border-radius:30vw;
    border:#fff 3px solid;
    position:relative;
}

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

.cta .cta_btn .btn a .copies {
    position:absolute;
    top:-15px;
    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:30px;
    border-radius:10vw;
    padding:0 15px;
    color:#00b900;
    font-weight:bold;
    padding-bottom:2px;
}

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

.cta .cta_btn .btn a .tx p {
    font-size:135%;
    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:20px 0;
    background:linear-gradient(#000,#000);
}

#movie .cts {
}

#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:50px 0;
    background:#fef5f8;
}

#keypoint .titles {
}

#keypoint .titles .title {
    font-size:170%;
    font-weight:bold;
    margin-bottom:5px;
}

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

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

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

#keypoint .illust {
    width:60%;
    margin:0 auto 15px;
}

#keypoint .secrets {
    width:90%;
    margin:0 auto 20px;
}

#keypoint .secrets .secret {
    width:100%;
    position:relative;
    border:#dc3264 2px solid;
    border-radius:10px;
    background:#fff;
    padding:12px;
    margin-bottom:12px;
    text-align:center;
    display:flex;
    align-items:center;
}

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

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

#keypoint .secrets .secret img {
    width:22px;
    margin-right:10px;
}

#keypoint .secrets .secret .tx {
    font-size:100%;
    font-weight:500;
    line-height:135%;
    text-align:left;
}

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

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

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

#keypoint .summaries .summary p:first-child {
    font-size:150%;
    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:150%;
    font-weight:600;
    line-height:100%;
}



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

#seminar .cts {
}

#seminar .titles {
}

#seminar .titles .subtitle {
}

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

#seminar .titles h2 {
    font-size:180%;
    font-weight:bold;
    line-height:135%;
    color:#0046b4;
}

#seminar .copy {
    width:90%;
    margin:0 auto 30px;
}

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

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

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

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

#seminar .result_title p {
    font-size:120%;
    font-weight:bold;
    color:#dc3264;
    text-align:center;
    margin:0 10px;
}

#seminar .results {
    width:90%;
    margin:0 auto 30px;
}

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

#seminar .results .result:nth-child(even) {
    flex-direction:row-reverse;
}

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

#seminar .results .result .illust {
    width:80px;
}

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

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

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

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

#seminar .results .result:nth-child(even) .message {
}

#seminar .results .result .message .item {
    font-size:120%;
    font-weight:bold;
    line-height:135%;
    color:#dc3264;
    padding:2px 0;
}

#seminar .results .result .message .tx {
    font-size:90%;
    font-weight:500;
    line-height:150%;
    padding:2px 0;
}

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

#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:110%;
    margin-bottom:10px;
}

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

#seminar .summaries .summary {
    font-size:150%;
    font-weight:bold;
    line-height:135%;
    color:#dc3264;
}




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

#row .cts {
}

#row .rows {
}

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

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

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

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

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



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

#privacy .cts {
}

#privacy .privacies {
}

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

#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 {
}




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

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

footer .link a {
    font-size:90%;
    font-weight:600;
}

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




}