@charset "utf-8";

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

@media(min-width:1000px){

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

.bg {
display:none;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:url(../img/story6_bg.jpg) center;
background-size:cover;
z-index:-1;
}

p {
font-size:120%;
font-weight:400;
}

.cts {
width:1000px;
margin:auto;
}

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

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

.ex {
}

.ex p {
padding-bottom:25px;
letter-spacing:1px;
line-height:180%;
}

.ex p:last-child {
padding-bottom:0;
}



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

#mv .cts {
position:relative;
display:flex;
justify-content:space-between;
align-items:center;
height:650px;
}

#mv .copies {
width:580px;
}

#mv .copies .caution {
margin-bottom:10px;
}

#mv .copies .subtitle {
margin-bottom:10px;
}

#mv .copies h1 {
margin-bottom:10px;
}

#mv .photos {
width:400px;
position:relative;
display:flex;
justify-content:space-between;
align-items:center;
}

#mv .photos .main {
width:300px;
margin:auto;
}

#mv .photos .sub {
position:absolute;
display:flex;
align-items:center;
height:150px;
margin-top:50px;
}

#mv .photos .sub .photo {
width:150px;
position:relative;
}

#mv .photos .sub .photo img {
border-radius:10vw;
border:#fff 3px solid;
}

#mv .photos .sub .photo:first-child {
top:50px;
-webkit-animation:ball1 3s ease infinite alternate;
animation:ball1 3s ease infinite alternate;
}

#mv .photos .sub .photo:nth-child(2) {
bottom:50px;
-webkit-animation:ball2 3s ease infinite alternate;
animation:ball2 3s ease infinite alternate;
}

#mv .photos .sub .photo:last-child {
top:50px;
-webkit-animation:ball1 3s ease infinite alternate;
animation:ball1 3s ease infinite alternate;
}



/*STORY1*/
#story1 {
background:url(../img/story1_bg.jpg) center no-repeat;
background-size:cover;
position:relative;
}

#story1 .cts {
padding:85px 0 0;
}

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

#story1 .titles h2 .point {
position:relative;
}

#story1 .titles h2 .point:before {
content:"";
width:8px;
height:8px;
background:#ff7800;
border-radius:10vw;
position:absolute;
top:-10px;
left:0;
right:0;
margin:auto;
}

#story1 .symptoms {
display:flex;
justify-content:center;
flex-wrap:wrap;
padding-bottom:30px;
}

#story1 .symptoms .symptom {
width:280px;
border:#fff 3px solid;
border-radius:15px;
margin:0 30px 30px 0;
padding:15px;
text-align:center;
}

#story1 .symptoms .symptom:nth-child(3),
#story1 .symptoms .symptom:nth-child(5) {
margin-right:0;
}

#story1 .symptoms .symptom:nth-child(n+4) {
margin-bottom:0;
}

#story1 .symptoms .symptom .icon {
width:40px;
margin:0 auto 10px;
}

#story1 .symptoms .symptom .tx {
font-size:110%;
font-weight:bold;
color:#fff;
}

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

#story1 .arrow {
}



/*STORY2*/
#story2 {
background:#f0f0f5;
}

#story2 .cts {
padding:70px 0 0;
}

#story2 .copy {
line-height:180%;
text-align:center;
padding-bottom:30px;
}

#story2 .details {
display:flex;
justify-content:space-between;
flex-direction:row-reverse;
margin-bottom:30px;
}

#story2 .details .photo {
width:480px;
}

#story2 .details .detail {
width:480px;
}

#story2 .summary {
font-size:180%;
font-weight:bold;
padding-top:50px;
text-align:center;
}



/*STORY3*/
#story3 {
background:#fff;
}

#story3 .cts {
padding:70px 0;
}

#story3 .profile {
display:flex;
justify-content:space-between;
flex-direction:row-reverse;
padding-bottom:40px;
}

#story3 .profile .photo {
width:420px;
}

#story3 .profile .detail {
width:520px;
}

#story3 .profile .detail .position {
background:#f5e100;
display:inline-block;
padding:5px 10px;
font-size:135%;
font-weight:bold;
margin-bottom:15px;
}

#story3 .profile .detail .name {
font-size:250%;
font-weight:bold;
line-height:100%;
padding-bottom:7px;
}

#story3 .profile .detail .kana {
font-size:90%;
color:#b4b4b4;
padding-bottom:30px;
}

#story3 .explain {
}

#story3 .explain h4 {
border:#000 1px solid;
display:inline-block;
font-size:90%;
padding:5px 7px;
line-height:100%;
margin-bottom:5px;
}

#story3 .explain p {
padding-bottom:30px;
line-height:180%;
}

#story3 .explain p:last-child {
padding-bottom:0;
}

#story3 .media {
display:flex;
justify-content:space-between;
flex-direction:row-reverse;
padding-top:40px;
}

#story3 .media .photo {
width:420px;
}

#story3 .media .photo img {
border:#e1e1e1 1px solid;
}

#story3 .media .detail {
width:520px;
}

#story3 .media .detail .books {
padding-top:30px;
display:flex;
justify-content:space-between;
}

#story3 .media .detail .books .book {
width:120px;
}



/*STORY4*/
#story4 {
background:url(../img/story4_bg.jpg) center;
background-attachment:fixed;
background-size:cover;
padding:100px 0 70px;
}

#story4 .copies {
text-align:center;
padding-bottom:50px;
}

#story4 .copies .copy {
display:inline-block;
padding:10px 15px;
background:#fff;
font-size:250%;
font-weight:bold;
line-height:100%;
margin-bottom:15px;
}

#story4 .copies .copy:last-child {
margin-bottom:0;
}

#story4 .ex {
text-align:center;
}

#story4 .ex p {
color:#fff;
}

#story4 .ex .whats {
font-size:200%;
font-weight:bold;
border:#fff 1px solid;
padding:15px 20px;
margin-bottom:25px;
line-height:100%;
display:inline-block;
}

#story4 .arrow {
width:100px;
margin:30px auto;
}

#story4 .cause {
border:#fff 1px solid;
position:relative;
display:flex;
justify-content:flex-end;
margin-bottom:30px;
}

#story4 .cause .illust {
width:150px;
position:absolute;
bottom:0;
left:50px;
}

#story4 .cause .ex {
width:750px;
text-align:left;
padding:30px 40px 30px 0;
}

#story4 .comparison {
width:700px;
margin:30px auto;
}

#story4 .comparison .graph {
margin-bottom:20px;
}

#story4 .comparison .graph:last-child {
margin-bottom:0;
}



/*STORY4*/
#story5 {
padding:70px 0;
background:url(../img/story5_bg.jpg) center;
background-attachment:fixed;
background-size:cover;
}

#story5 .titles .subtitle {
color:#fff;
background:#e6321e;
display:inline-block;
font-size:150%;
font-weight:bold;
line-height:100%;
padding:10px 15px;
margin-bottom:10px;
}

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

#story5 .cts {
background:#fff;
padding:50px;
}

#story5 .details {
display:flex;
justify-content:space-between;
flex-direction:row-reverse;
}

#story5 .details .illust {
width:200px;
}

#story5 .details .ex {
width:650px;
}

#story5 .comparison {
width:700px;
margin:30px auto;
}

#story5 .comparison .graph {
margin-bottom:20px;
}

#story5 .comparison .graph:last-child {
margin-bottom:0;
}



/*STORY6*/
#story6 {
padding:70px 0;
background:url(../img/story6_bg.jpg) center;
background-attachment:fixed;
background-size:cover;
}

#story6 .titles .icon {
width:60px;
margin:0 auto 10px;
}

#story6 .titles .subtitle {
font-size:150%;
font-weight:bold;
padding-bottom:10px;
}

#story6 .titles h2 {
font-size:300%;
}

#story6 .titles h2 span {
background:#e6321e;
color:#fff;
margin-left:5px;
padding:5px 15px;
line-height:100%;
}

#story6 .copy {
text-align:center;
padding-bottom:30px;
line-height:180%;
}

#story6 .methods {
}

#story6 .methods .method {
background:#fff;
padding-bottom:45px;
position:relative;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:30px;
border:#c8d2dc 5px solid;
}

#story6 .methods .method:last-child {
margin-bottom:0;
}

#story6 .methods .method .fire {
width:250px;
position:absolute;
}

#story6 .methods .method .method_cts {
}

#story6 .methods .method .method_cts .number {
text-align:center;
margin-bottom:20px;
}

#story6 .methods .method .method_cts .number span {
font-size:120%;
font-weight:bold;
background:#f5e100;
display:inline-block;
padding:10px 20px;
}

#story6 .methods .method .method_cts h3 {
font-size:350%;
font-weight:bold;
text-align:center;
padding-bottom:30px;
line-height:100%;
}

#story6 .methods .method:last-child .method_cts h3 {
font-size:270%;
font-weight:bold;
text-align:center;
padding-bottom:30px;
line-height:125%;
}

#story6 .methods .method .method_cts .intro {
text-align:center;
padding-bottom:30px;
}

#story6 .methods .method .method_cts .details {
width:900px;
display:flex;
justify-content:space-between;
}

#story6 .methods .method:nth-child(2n) .method_cts .details {
flex-direction:row-reverse;
}

#story6 .methods .method .method_cts .details .photo {
width:430px;
}

#story6 .methods .method .method_cts .details .ex {
width:430px;
}

#story6 .photos {
width:900px;
margin:auto;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin-bottom:30px;
}

#story6 .photos .photo {
width:440px;
margin-bottom:20px;
}

#story6 .photos .photo:nth-child(n+3) {
margin-bottom:0;
}

#story6 .methods .method:last-child .ex {
width:900px;
}



/*STORY7*/
#story7 {
padding:70px 0;
}

#story7 .titles .icon {
width:60px;
margin:0 auto 10px;
}

#story7 .copy {
font-size:180%;
font-weight:bold;
text-align:center;
padding:30px 0;
}

#story7 .limited_price {
width:800px;
margin:0 auto 30px;
}



/*STORY8*/
#story8 {
background:#f5f5f5;
padding:70px 0;
}

#story8 .titles .icon {
width:60px;
margin:0 auto 10px;
}

#story8 .faqs {
}

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

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

#story8 .faqs .faq .question {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}

#story8 .faqs .faq .question .item {
width:50px;
height:50px;
background:#0046b4;
border-radius:10vw;
display:flex;
justify-content:center;
align-items:center;
font-size:135%;
font-weight:bold;
color:#fff;
}

#story8 .faqs .faq .question .detail {
width:935px;
font-size:150%;
font-weight:bold;
color:#0046b4;
}

#story8 .faqs .faq .answer {
display:flex;
justify-content:space-between;
}

#story8 .faqs .faq .answer .item {
width:50px;
height:50px;
background:#fff;
border-radius:10vw;
border:#0046b4 3px solid;
display:flex;
justify-content:center;
align-items:center;
font-size:135%;
font-weight:bold;
color:#0046b4;
}

#story8 .faqs .faq .answer .detail {
width:935px;
}



/*STORY9*/
#story9 {
padding:70px 0;
}



/*CTA*/
.cta {
border:#00961e 5px solid;
background:#f2faf4;
padding-bottom:40px;
}

.cta h3 {
background:#00961e;
color:#fff;
font-size:200%;
font-weight:bold;
padding:10px 0 15px;
text-align:center;
}

.cta .details {
display:flex;
justify-content:flex-end;
position:relative;
padding:50px 50px 25px;
}

.cta .details .coach {
width:360px;
position:absolute;
left:50px;
bottom:0;
}

.cta .details .detail {
width:600px;
position:relative;
}

.cta .btn {
width:900px;
margin:auto;
-webkit-animation:cta 1s ease infinite alternate;
animation:cta 1s ease infinite alternate;
}



/*TERMS*/
#terms {
padding:70px 0;
}

#terms h2 {
font-size:250%;
font-weight:bold;
text-align:center;
padding-bottom:50px;
}

#terms .privacies {
}

#terms .privacies .privacy {
border-bottom:#c8c8c8 1px dotted;
padding-bottom:15px;
margin-bottom:15px;
}

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

#terms .privacies .privacy p {
font-size:110%;
line-height:160%;
}

#terms .privacies .privacy .details {
}

#terms .privacies .privacy .details p {
padding-bottom:30px;
}

#terms .privacies .privacy .details p:last-child {
padding-bottom:0;
}

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

#terms .privacies .privacy .detail {
}

#terms .rows {
}

#terms .rows .row {
display:flex;
justify-content:space-between;
border-bottom:#c8c8c8 1px dotted;
padding-bottom:20px;
margin-bottom:20px;
}

#terms .rows .row:first-child {
border-top:#c8c8c8 1px dotted;
padding-top:20px;
}

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

#terms .rows .row p {
font-size:110%;
}

#terms .rows .row .item {
width:25%;
padding-left:10px;
}

#terms .rows .row .detail {
width:70%;
}

#terms .rows .row .detail p {
}

#terms .rows .row .detail .attentions {
padding-top:10px;
}

#terms .rows .row .detail .attentions .attention {
font-size:80%;
display:flex;
}



/*LINKS*/
#links {
display:flex;
justify-content:center;
}

#links a {
border-right:#e1e1e1 1px solid;
padding-right:20px;
margin-right:20px;
}

#links a:last-child {
border-right:none;
padding-right:0;
margin-right:0;
}

#links a p {
font-size:100%;
}



/*FIXED CTA*/
.fixed_cta {
position:fixed;
width:270px;
right:-2px;
bottom:0;
z-index:100;
}



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

footer .copyright {
font-size:90%;
font-weight:300;
text-align:center;
}



}