@charset "utf-8";

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

@media(max-width:999px){

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

.cts {
width:90%;
}

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

.titles .icon {
    width:50px;
    margin:0 auto 10px;
}

.titles .corner {
    font-size:90%;
    font-weight:600;
    margin-bottom:10px;
}

.titles .corner span {
    border:#000 1px solid;
    padding:5px 10px;
    display:inline-block;
}

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

.titles .subtitle {
font-size:120%;
font-weight:bold;
line-height:135%;
margin-bottom:5px;
}

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



/*HEADER*/
header {
    width:100%;
    height:50px;
    background:#e63264;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
}

header h1 {
    display:flex;
    align-items:center;
    padding-left:15px;
    color:#fff;
}

header h1 span:first-child {
    font-size:90%;
    font-weight:600;
    line-height:100%;
}

header h1 span:last-child {
    font-size:60%;
    line-height:160%;
    border-left:#fff 1px solid;
    padding-left:15px;
    margin-left:15px;
}

header .contact {
    width:50px;
    height:100%;
    background:#fff;
}

header .contact a {
    width:100%;
    height:100%;
    background:#967864;
    display:flex;
    justify-content:center;
    align-items:center;
}

header .contact a img {
    width:25px;
}

header .contact a p {
    font-size:90%;
    font-weight:600;
    color:#fff;
    display:none;
}




/*MV*/
#mv {
    width:100%;
    margin-top:50px;
    position:relative;
    padding:30px 0;
}

#mv .cts {
    width:100%;
}

#mv .photos {
}

#mv .photos .extra {
    width:60px;
    position:absolute;
    top:10px;
    left:10px;
    background:#fff;
    border:#000 1px solid;
    z-index:999;
}

#mv .photos .photo {
    position:absolute;
    bottom:0;
    left:-40px;
    display:none;
}

#mv .photos .photo img {
    width:auto;
    height:580px;
}

#mv .photos .limited {
    width:160px;
    position:absolute;
    left:20px;
    bottom:20px;
    z-index:999;
}

#mv .movie {
    width:90%;
    margin:auto;
    position:relative;
}

#mv video{
width:100%;
height:auto;
}

#mv .movie .sound {
    width:90px;
    position:absolute;
    right:15px;
    bottom:20px;
    cursor:pointer;
}

#mv .copies {
    width:90%;
    margin:0 auto 30px;
}

#mv .copies .anniversary {
    width:60%;
    margin:0 auto 15px;
}

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

#mv .copies .copy2 {
    width:90%;
    margin:0 auto 15px;
}





/*SUB MV*/
#submv {
    width:100%;
    height:50px;
    background:#e63264;
}



/*INTRO*/
#intro {
    padding:30px 0 50px;
}

#intro .titles {
    position:relative;
}

#intro .titles h2 {
    font-weight:bold;
    text-shadow:0 0 3px #fff;
}

#intro .titles .photo {
    position:absolute;
    left:-50px;
    bottom:0;
    width:150px;
    display:none;
}

#intro .titles .corner,
#intro .titles .subtitle,
#intro .titles h2 {
    position:relative;
    z-index:1;
}

#intro .intros {
    display:flex;
    overflow:hidden;
}

#intro .intros .intro {
    width:20%;
    height:100vw;
    display:flex;
    justify-content:center;
    position:relative;
}

#intro .intros .intro .bg {
    width:0.1%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}

#intro .intros .intro:nth-child(odd) .bg {
    background:#e63264;
}

#intro .intros .intro:nth-child(even) .bg {
    background:#000;
}

#intro .intros .intro .copy {
    width:28px;
    position:absolute;
    top:35px;
    z-index:1;
}

#intro .intros .intro .photo {
    width:100%;
    height:100%;
    position:relative;
}

#intro .intros .intro:nth-child(1) .photo {
    background:url(../img/intro_1_bg.png) center bottom no-repeat;
    background-size:150%;
}

#intro .intros .intro:nth-child(2) .photo {
    background:url(../img/intro_2_bg.png) center bottom no-repeat;
    background-size:150%;
}

#intro .intros .intro:nth-child(3) .photo {
    background:url(../img/intro_3_bg.png) center bottom no-repeat;
    background-size:150%;
}

#intro .intros .intro:nth-child(4) .photo {
    background:url(../img/intro_4_bg.png) center bottom no-repeat;
    background-size:150%;
}

#intro .intros .intro:nth-child(5) .photo {
    background:url(../img/intro_5_bg.png) center bottom no-repeat;
    background-size:150%;
}

#intro .explain {
    padding:35px 0 0;
    text-align:center;
}

#intro .explain .limited {
    font-size:120%;
    font-weight:600;
    line-height:100%;
    background:#e63264;
    color:#fff;
    padding:10px 15px 12px;
    display:inline-block;
    position:relative;
    margin-bottom:10px;
}

#intro .explain .limited:after {
    content:"";
    width:10px;
    height:10px;
    border-top:#e63264 10px solid;
    border-right:transparent 10px solid;
    border-bottom:transparent 10px solid;
    border-left:transparent 10px solid;
    position:absolute;
    left:0;
    right:0;
    bottom:-20px;
    margin:auto;
}

#intro .explain .explain_title {
    margin-bottom:20px;
}

#intro .explain .explain_title h3 {
    font-size:180%;
    font-weight:bold;
    line-height:135%;
}

#intro .explain .account {
    font-size:120%;
    font-weight:bold;
    line-height:135%;
    color:#e63264;
    padding:8px 15px 12px;
    background:#fff;
    display:inline-block;
    margin-bottom:15px;
}

#intro .explain .tx {
    font-size:100%;
    font-weight:600;
    margin-bottom:15px;
}

#intro .explain .attention {
    font-size:70%;
    color:#787878;
}



/*ABOUT*/
#about {
    padding:50px 0 35px;
}

#about .cts {
    width:100%;
}

#about .details {
    margin-bottom:30px;
}

#about .details .detail {
    width:100%;
    margin-bottom:25px;
}

#about .details .detail .action {
    display:flex;
    justify-content:center;
    margin-bottom:10px;
}

#about .details .detail .action p {
    font-size:110%;
    font-weight:bold;
    line-height:100%;
    background:#967864;
    color:#fff;
    padding:5px 10px 8px;
    margin-right:10px;
}

#about .details .detail h2 {
    font-size:200%;
    font-weight:bold;
    line-height:120%;
    text-align:center;
    margin-bottom:20px;
}

#about .details .detail .tx {
    width:90%;
    margin:auto;
    font-size:100%;
    font-weight:500;
    line-height:180%;
}

#about .details .photo {
    width:100%;
    overflow:hidden;
    padding:30px 0;
    background:#fff;
}

#about .features {
}

#about .features .feature {
    width:90%;
    margin:0 auto 20px;
    background:#fff;
    padding:25px;
}

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

#about .features .feature h3 {
    font-size:150%;
    font-weight:bold;
    line-height:135%;
    color:#e63264;
    text-align:center;
    margin-bottom:15px;
}

#about .features .feature .photo {
    margin-bottom:20px;
}

#about .features .feature .tx {
}




/*CASE*/
#case {
    padding:50px 0;
    background:#fff;
}

#case .copy {
    font-size:100%;
    font-weight:bold;
    text-align:center;
    padding-bottom:25px;
}

#case .cases {
    margin:auto;
}

#case .cases .case {
    width:100%;
    border-bottom:#f0f0f0 1px solid;
    padding-bottom:30px;
    margin-bottom:30px;
}

#case .cases .case:last-child {
    border-bottom:none;
    padding-bottom:0;
    margin-bottom:0;
}

#case .cases .case .medals {
    width:100%;
    margin:0 auto 20px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}

#case .cases .case .medals .medal {
    width:30%;
    height:30%;
    margin:0 3% 3% 0;
    display:flex;
    justify-content:center;
    align-items:flex-end;
}

#case .cases .case .medals .medal:nth-child(3) {
    margin-right:0;
}

#case .cases .case .medals .medal:nth-child(n+4) {
    margin-bottom:0;
}

#case .cases .case:nth-child(2) .medals .medal img {
    width:90%;
}

#case .cases .case .tx {
    padding-bottom:10px;
}

#case .cases .case .attention {
    font-size:60%;
    color:#b4b4b4;
}




/*MEDIA*/
#media {
    padding:50px 0;
}

#media .titles .icon {
    width:40px;
}

#media .copy {
    font-size:110%;
    font-weight:bold;
    text-align:center;
    padding-bottom:20px;
}

#media .medias {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    padding-bottom:10px;
}

#media .medias .media {
    width:100%;
    background:#fff;
    padding:12px 15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}

#media .medias .media img {
    width:20px;
}

#media .medias .media .detail {
    width:calc(100% - 30px);
}

#media .medias .media .detail .name {
    font-weight:600;
}

#media .medias .media .detail .date {
    font-size:70%;
    color:#787878;
}

#media .etc {
    font-size:90%;
    text-align:center;
}




/*ACCOUNT*/
#account {
    padding:50px 0;
    background:#000 url(../img/account_bg.jpg) center;
    background-size:cover;
}

#account .titles .icons {
    display:flex;
    justify-content:center;
    margin-bottom:15px;
}

#account .titles .icons .icon {
    margin:0;
}

#account .titles .icons .icon:first-child {
    margin-right:15px;
}

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

#account .copy {
    font-size:100%;
    font-weight:bold;
    text-align:center;
    padding-bottom:20px;
    color:#fff;
}

#account .accounts {
    margin-bottom:30px;
}

#account .accounts .account {
    width:100%;
    position:relative;
    margin-bottom:15px;
}

#account .accounts .account:last-child {
    margin-bottom:0;
}

#account .accounts .account a {
    background:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px;
}

#account .accounts .account .photo {
    width:60px;
}

#account .accounts .account .photo img {
    border-radius:10vw;
}

#account .accounts .account .detail {
    width:calc(100% - 70px);
}

#account .accounts .account .detail .id {
    font-size:100%;
    font-weight:600;
    line-height:135%;
    padding-bottom:3px;
}

#account .accounts .account .detail .name {
    font-size:70%;
}

#account .accounts .account .sns {
    width:18px;
    position:absolute;
    top:7px;
    right:7px;
}


#account .summary {
    font-size:110%;
    font-weight:bold;
    text-align:center;
    color:#fff;
}




/*FAQ*/
#faq {
    padding:50px 0;
}

#faq .titles .icon {
    width:45px;
}

#faq .copy {
    font-size:100%;
    font-weight:bold;
    text-align:center;
    padding-bottom:20px;
}

#faq .faqs {
}

#faq .faqs .faq {
    margin-bottom:50px;
}

#faq .faqs .faq:last-child {
    margin-bottom:0;
}

#faq .faqs .faq .question {
    display:flex;
    justify-content:flex-start;
    margin-bottom:15px;
}

#faq .faqs .faq .question .item {
    width:45px;
    height:45px;
    background:#e63264;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#fff;
    border-radius:10vw;
    font-size:110%;
    font-weight:600;
    margin-right:20px;
}

#faq .faqs .faq .question h3 {
    max-width:calc(100% - 67px);
    background:#fff;
    padding:12px 18px;
    border-radius:10px;
    position:relative;
    font-weight:600;
    color:#e63264;
}

#faq .faqs .faq .question h3:after {
    content:"";
    width:12px;
    height:8px;
    border-top:transparent 8px solid;
    border-right:#fff 12px solid;
    border-bottom:transparent 8px solid;
    border-left:transparent 12px solid;
    position:absolute;
    top:18px;
    left:-24px;
}

#faq .faqs .faq .answer {
    display:flex;
    justify-content:flex-end;
}

#faq .faqs .faq .answer .item {
    width:45px;
    height:45px;
    background:#967864;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#fff;
    border-radius:10vw;
    font-size:110%;
    font-weight:600;
    margin-left:20px;
}

#faq .faqs .faq .answer .tx {
    max-width:calc(100% - 67px);
    background:#fff;
    padding:12px 18px;
    border-radius:10px;
    position:relative;
}

#faq .faqs .faq .answer .tx:after {
    content:"";
    width:12px;
    height:8px;
    border-top:transparent 8px solid;
    border-right:transparent 12px solid;
    border-bottom:transparent 8px solid;
    border-left:#fff 12px solid;
    position:absolute;
    top:15px;
    right:-24px;
}



/*CTA MAIN*/
#cta {
    padding:50px 0 0;
    background:#fff;
    position:relative;
}

#cta .bg {
    width:200%;
    position:absolute;
    bottom:0;
    left:-50%;
}

#cta .cts {
    position:relative;
}

#cta .anniversary {
    width:70%;
    margin:0 auto 15px;
    position:relative;
}

#cta .details {
}

#cta .details .detail {
    width:100%;
    margin:0 auto 25px;
}

#cta .details .detail .copy1 {
    margin-bottom:10px;
}

#cta .details .detail .copy2 {
    width:100%;
    margin:0 auto 15px;
}

#cta .details .detail .maincopy {
}

#cta .details .photo {
    width:80%;
    margin:auto;
}


/*END CTA*/
#end_cta {
    background:#e63264;
    padding:35px 0;
}

#end_cta .cts {
}

#end_cta .cts .detail {
    width:100%;
    margin-bottom:20px;
}

#end_cta .cts .detail .copies {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:10px;
}

#end_cta .cts .detail .copies img {
    width:15px;
}

#end_cta .cts .detail .copies .copy {
    text-align:center;
    margin:0 10px;
}

#end_cta .cts .detail .copies .copy p {
    font-size:100%;
    font-weight:bold;
    line-height:135%;
    color:#fff;
}

#end_cta .cts .detail .logo {
    width:90%;
    margin:0 auto 15px;
}

#end_cta .cts .cta_btn {
    width:100%;
    margin:auto;
    animation:cta 1s infinite alternate;
    -webkit-animation:cta 1s infinite alternate;
}




/*COMPANY*/
#company {
    padding:50px 0;
}

#company .titles .icon {
    width:30px;
}

#company .companies {

}

#company .companies .company {
    display:flex;
    background:#fff;
    padding:15px 20px;
    margin-bottom:15px;
}

#company .companies .company:last-child {
    display:block;
    margin-bottom:0;
}

#company .companies .company .item {
    width:120px;
    font-weight:600;
}

#company .companies .company:last-child .item {
    width:100%;
}

#company .companies .company .tx {
    width:calc(100% - 120px);
}

#company .companies .company:last-child .tx {
    width:100%;
}





/*CTA*/
.cta {
    background:#e63264;
    overflow:hidden;
    padding-top:30px;
}

.cta .cts {
}

.cta .detail {
}

.cta .detail .copies {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:10px;
}

.cta .detail .copies img {
    width:25px;
}

.cta .detail .copies .copy {
    text-align:center;
    margin:0 15px;
}

.cta .detail .copies .copy p {
    font-size:110%;
    font-weight:bold;
    line-height:135%;
    color:#fff;
}

.cta .detail .logo {
    width:90%;
    margin:0 auto 15px;
}

.cta .detail .cta_btn {
    width:100%;
    margin:0 auto 15px;
    animation:cta 1s infinite alternate;
    -webkit-animation:cta 1s infinite alternate;
}

.cta .photo {
    width:70%;
    margin:auto;
}




/*CONTACT*/
#contact {
    padding:50px 0;
    margin-top:50px;
}

#contact .titles .icon {
    width:45px;
    margin:0 auto 15px;
}

#contact .copies {
    margin-bottom:25px;
}

#contact .copies .copy {
    font-weight:500;
    padding-bottom:15px;
}

#contact .copies .caution {
    display:inline-block;
    background:#e63264;
    color:#fff;
    padding:10px 15px;
    font-size:90%;
    font-weight:500;
}

#contact .temp {
    background:#fff;
    padding:25px 25px;
}

#contact .temp .step_ex {
    margin-bottom:20px;
    text-align:center;
}

#contact .temp .step_ex .tx {
    font-size:110%;
    font-weight:600;
    padding-bottom:5px;
}

#contact .temp .step_ex .attention {
    font-size:80%;
    color:#969696;
}



/*FINISH*/
#contact.finish {
    text-align:center;
}

#contact.finish .titles {
    margin-bottom:10px;
}

#contact.finish .step_ex {
    margin-bottom:15px;
}

#contact.finish .schedule {
    background:#fceaef;
    padding:25px 50px;
    text-align:center;
    display:inline-block;
    margin-bottom:20px;
}

#contact.finish .schedule .schedule_item {
    font-weight:600;
    color:#e63264;
    padding-bottom:15px;
}

#contact.finish .schedule .schedule_btn {
    animation:cta 1s infinite alternate;
    -webkit-animation:cta 1s infinite alternate;
}

#contact.finish .schedule .schedule_btn .btn {
    display:inline-block;
}

#contact.finish .schedule .schedule_btn .btn a {
    background:#e63264;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:15px 50px;
    border-radius:10vw;
}

#contact.finish .schedule .schedule_btn .btn a img {
    width:30px;
    margin-right:15px;
}

#contact.finish .schedule .schedule_btn .btn a p {
    font-size:100%;
    font-weight:bold;
    color:#fff;
}

#contact.finish .attention {
    font-size:90%;
    padding-bottom:50px;
}

#contact.finish .backbtn {
    text-align:center;
}

#contact.finish .backbtn .btn {
    display:inline-block;
}

#contact.finish .backbtn .btn a {
    display:flex;
    justify-content:center;
    align-items:center;
    border:#967864 1px solid;
    padding:8px 15px;
}

#contact.finish .backbtn .btn a .arrow {
    width:8px;
    height:8px;
    border-bottom:#967864 1px solid;
    border-left:#967864 1px solid;
    transform:rotate(45deg);
    margin-right:10px;
}

#contact.finish .backbtn .btn a p {
    font-size:90%;
    color:#967864;
}






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



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

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



















}