@charset "utf-8";

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

@media(max-width:767px){

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

.wrap {
width:100%;
overflow-x:hidden;
}

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

p {
font-size:1em;
font-weight:400;
line-height:150%;
letter-spacing:1px;
}

.fone {
font-family: 'Oswald', sans-serif;
}

.fonj {
font-family: 'M PLUS 1p', sans-serif;
}

.cts {
width:90%;
margin:auto;
}

.titles {
margin:0 auto 30px;
text-align:center;
}

.titles h2 {
font-size:180%;
font-weight:400;
line-height:120%;
letter-spacing:0;
display:inline-block;
padding-bottom:7px;
font-family: 'M PLUS 1p', sans-serif;
position:relative;
}

.titles h2 .titleLine {
position:absolute;
bottom:0;
display:block;
margin:auto;
height:3px;
}

.titles h2 .title {
}

.titles .subtitle {
margin-bottom:7px;
}

.titles .subtitle img {
height:25px;
}

.ex {
}

.ex p {
font-size:100%;
line-height:160%;
padding-bottom:20px;
}

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



/*HEADER*/
header {
width:100%;
height:55px;
background:rgba(255,255,255,0.95);
position:fixed;
top:0;
left:0;
display:flex;
justify-content:space-between;
align-items:center;
z-index:999;
}

header h1 {
margin-left:12px;
display:flex;
align-items:center;
}

header h1 img {
width:70%;
}

header .fixed_cta {
display:none;
}

header .fixed_cta a {
width:150px;
height:60px;
padding:10px 15px;
background:#ff0000;
display:flex;
justify-content:center;
align-items:center;
}



/*GROBAL*/
#grobal {
}

#grobal .nav_btn {
position:fixed;
width:55px;
height:55px;
top:0;
right:0;
z-index:999;
display:flex;
justify-content:center;
align-items:center;
}

#grobal .nav_btn span {
width:60%;
height:1px;
background:#000;
position:absolute;
margin:auto;
}

#grobal .nav_btn span:first-child {
top:18px;
transition:0.5s;
}

#grobal .nav_btn span.show:first-child {
top:27px;
transform:rotate(45deg);
}

#grobal .nav_btn span:nth-child(2) {
transition:0.5s;
}

#grobal .nav_btn span.show:nth-child(2) {
opacity:0;
}

#grobal .nav_btn span:last-child {
bottom:18px;
transition:0.5s;
}

#grobal .nav_btn span.show:last-child {
bottom:27px;
transform:rotate(-45deg);
}

#grobal .nav_close {
display:none;
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background:#000;
opacity:0;
z-index:999;
cursor:pointer;
}

#grobal .grobal_navs {
width:70%;
height:100%;
background:rgba(255,100,0,0.9);
position:fixed;
top:0;
left:-100%;
display:flex;
justify-content:center;
align-items:center;
z-index:999;
transition:0.7s;
}

#grobal .grobal_navs.show {
left:0;
}

#grobal .grobal_navs .grobal_nav {
}

#grobal .grobal_nav nav {
}

#grobal .grobal_nav nav a {
text-decoration:none;
font-weight:normal;
color:#fff;
display:block;
padding:20px;
font-size:110%;
text-align:center;
}

#grobal .grobal_navs .grobal_nav nav:last-child a {
border:#fff 1px solid;
margin-top:15px;
}



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

#mv .cts {
width:100%;
margin:auto;
position:relative;
padding:30px 0 0;
}

#mv .copies {
width:70%;
margin:auto;
}

#mv .copies .title {
width:100%;
margin-bottom:15px;
}

#mv .copies .price {
width:100%;
margin-bottom:10px;
}

#mv .copies .cheapest {
width:100%;
}

#mv .mv {
width:70%;
margin:auto;
}

#mv .mv img {
}

#mv .postage {
width:80px;
position:absolute;
bottom:70px;
right:15px;
z-index:1;
}

#mv .summaries {
width:100%;
height:55px;
background:rgba(255,100,0,0.9);
display:flex;
justify-content:center;
align-items:center;
}

#mv .summaries .summary {
width:90%;
margin:auto;
display:flex;
justify-content:flex-start;
align-items:center;
padding:0 0;
}



/*PRICE*/
#price {
padding:50px 0 0;
background:url(../img/price_bg.jpg) center bottom;
background-size:cover;
}

#price .prices {
margin:auto;
display:flex;
justify-content:space-between;
text-align:center;
padding-bottom:20px;
}

#price .prices .price {
width:31%;
background:#fff;
padding:15px 10px 10px;
border:#0046b4 1px solid;
}

#price .prices .price .company {
font-size:135%;
font-weight:400;
color:#0046b4;
padding-bottom:10px;
}

#price .prices .price .illust {
width:50px;
margin:0 auto 10px;
}

#price .prices .price .name {
font-size:80%;
font-weight:400;
color:#0046b4;
padding-bottom:10px;
line-height:150%;
}

#price .prices .price .tax {
background:#0046b4;
color:#fff;
font-size:70%;
font-weight:400;
padding:3px 7px;
display:inline-block;
margin-bottom:7px;
}

#price .prices .price .cost {
color:#0046b4;
}

#price .prices .price .cost .number {
font-size:120%;
}

#price .prices .price .cost .yen {
font-size:80%;
font-weight:bold;
}

#price .prices .price:last-child {
background:#ffeded;
border:#ff0000 3px solid;
}

#price .prices .price:last-child .company {
color:#ff0000;
}

#price .prices .price:last-child .name {
color:#ff0000;
}

#price .prices .price:last-child .tax {
background:#ff0000;
}

#price .prices .price:last-child .cost {
color:#ff0000;
}

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

#price .summaries .woman {
width:30%;
}

#price .summaries .balloon {
width:65%;
}



/*SHORTCUT*/
#shortcut {
padding:50px 0 30px;
}

#shortcut .ex {
text-align:left;
padding-bottom:40px;
}

#shortcut .example {
}

#shortcut .example .forexample {
text-align:center;
padding-bottom:15px;
}

#shortcut .example .forexample span {
background:#000;
color:#fff;
padding:7px 12px;
display:inline-block;
font-size:100%;
font-weight:bold;
}

#shortcut .example .items {
display:flex;
justify-content:center;
align-items:center;
padding-bottom:20px;
}

#shortcut .example .items .line {
width:20px;
height:1px;
background:#000;
}

#shortcut .example .items .item {
font-size:110%;
font-weight:bold;
padding:0 10px;
}

#shortcut .example .cases {
}

#shortcut .example .cases .case {
width:100%;
border:#0046b4 1px solid;
padding:25px 20px 20px;
margin-bottom:20px;
}

#shortcut .example .cases .case.after {
border:#ff0000 3px solid;
background:#ffeded;
margin-bottom:0;
}

#shortcut .example .cases .case .item {
font-size:120%;
font-weight:bold;
text-align:center;
color:#0046b4;
padding-bottom:20px;
}

#shortcut .example .cases .case.after .item {
color:#ff0000;
}

#shortcut .example .cases .case .photo {
margin-bottom:20px;
}

#shortcut .example .cases .case .details {
}

#shortcut .example .cases .case .details .detail {
display:flex;
align-items:center;
padding:10px 15px;
margin-bottom:12px;
background:#edf2fa;
}

#shortcut .example .cases .case .details .detail:last-child {
margin-bottom:0;
}

#shortcut .example .cases .case.after .details .detail {
background:#fff;
}

#shortcut .example .cases .case .details .detail img {
width:20px;
}

#shortcut .example .cases .case .details .detail p {
padding-left:10px;
color:#0046b4;
}

#shortcut .example .cases .case.after .details .detail p {
color:#ff0000;
}



/*FEATURE*/
#feature {
padding:50px 0 30px;
background:url(../img/feature_bg.jpg);
}

#feature .feature_cts {
}

#feature .photo {
width:20%;
margin:0 auto 15px;
}

#feature .features {
width:100%;
}

#feature .features .feature {
background:#fff;
margin-bottom:20px;
padding:0 25px 25px;
border:#e1e1e1 1px solid;
}

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

#feature .features .feature .number {
text-align:center;
}

#feature .features .feature .number span {
background:#ff0000;
color:#fff;
padding:7px 15px;
margin-bottom:15px;
display:inline-block;
}

#feature .features .feature h3 {
font-size:135%;
font-weight:bold;
padding-bottom:10px;
text-align:center;
}

#feature .features .feature .line {
width:50px;
height:1px;
background:#c8c8c8;
margin:0 auto 15px;
}

#feature .features .feature .colors {
display:flex;
justify-content:space-between;
flex-wrap:wrap;
padding:15px 0;
}

#feature .features .feature .colors .color {
width:48%;
border:#000 1px solid;
display:flex;
margin:0 4% 12px 0;
font-size:90%;
}

#feature .features .feature .colors .color:nth-child(n+3) {
margin-bottom:0;
}

#feature .features .feature .colors .color:nth-child(2n) {
margin-right:0;
}

#feature .features .feature .colors .color .item {
width:40%;
background:#000;
color:#fff;
padding:7px 10px;
text-align:center;
}

#feature .features .feature .colors .color .name {
width:60%;
color:#000;
padding:7px 10px;
text-align:center;
}

#feature .features .feature .colors .color.purple {
border:#b487c8 1px solid;
}

#feature .features .feature .colors .color.purple .item {
background:#b487c8;
}

#feature .features .feature .colors .color.purple .name {
color:#b487c8;
}

#feature .features .feature .colors .color.blue {
border:#55b4e6 1px solid;
}

#feature .features .feature .colors .color.blue .item {
background:#55b4e6;
}

#feature .features .feature .colors .color.blue .name {
color:#55b4e6;
}

#feature .features .feature .colors .color.green {
border:#8cc83c 1px solid;
}

#feature .features .feature .colors .color.green .item {
background:#8cc83c;
}

#feature .features .feature .colors .color.green .name {
color:#8cc83c;
}

#feature .features .feature .colors .color.orange {
border:#f0a046 1px solid;
}

#feature .features .feature .colors .color.orange .item {
background:#f0a046;
}

#feature .features .feature .colors .color.orange .name {
color:#f0a046;
}



/*GALLERY*/
#gallery {
padding:50px 0 30px;
background:url(../img/gallery_bg.jpg);
}

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

#gallery .copy {
font-size:100%;
color:#fff;
text-align:center;
padding-bottom:30px;
}

#gallery .gallery_title {
display:flex;
justify-content:center;
align-items:center;
padding-bottom:20px;
}

#gallery .gallery_title .line {
width:30px;
height:1px;
background:#fff;
}

#gallery .gallery_title h3 {
padding:0 15px;
font-size:135%;
font-weight:bold;
color:#fff;
}

#gallery .photos {
display:flex;
justify-content:space-between;
flex-wrap:wrap;
padding-bottom:50px;
}

#gallery .photos .photo {
width:48%;
margin-bottom:20px;
}

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

#gallery .movies {
}

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

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




/*FLOW*/
#flow {
padding:50px 0;
}

#flow .copy {
font-size:100%;
text-align:left;
padding-bottom:50px;
}

#flow .flows {
width:100%;
margin:auto;
display:flex;
justify-content:space-between;
}

#flow .flows .flow {
width:30%;
}

#flow .flows .flow .icons {
position:relative;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:10px;
}

#flow .flows .flow .icons:after {
content:"";
width:10px;
height:10px;
border-top:#ff6400 1px solid;
border-right:#ff6400 1px solid;
transform:rotate(45deg);
position:absolute;
right:-11px;
}

#flow .flows .flow:last-child .icons:after {
display:none;
}

#flow .flows .flow .icons .circle {
width:25vw;
height:25vw;
background:#fff4ed;
border-radius:12.5vw;
}

#flow .flows .flow .icons .number {
position:absolute;
width:25px;
height:25px;
top:-12.5px;
left:0;
right:0;
margin:auto;
border:#000 1px solid;
display:flex;
justify-content:center;
align-items:center;
background:#fff;
}

#flow .flows .flow .icons .icon {
position:absolute;
width:15vw;
}

#flow .flows .flow .item {
font-size:110%;
font-weight:bold;
color:#ff6400;
text-align:center;
padding-bottom:5px;
}

#flow .flows .flow .detail {
font-size:90%;
text-align:left;
}




/*COST*/
#cost {
padding:50px 0;
background:#ebf0f5;
}

#cost .titles h2 {
border-bottom:none;
line-height:150%;
}

#cost .titles h2 span {
border-bottom:#000 1px solid;
}

#cost .copy {
font-size:100%;
text-align:left;
padding-bottom:20px;
}

#cost .illust {
width:80%;
margin:0 auto 30px;
}

#cost .summaries {
}

#cost .summaries .summary1 {
width:90%;
margin:0 auto 15px;
display:block;
}

#cost .summaries .summary1 img {
border-top:#000 2px solid;
border-bottom:#000 2px solid;
padding:10px 10px;
}

#cost .summaries .summary2 {
width:90%;
margin:auto;
}



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

#contact .copy {
font-size:100%;
text-align:left;
padding-bottom:30px;
}

#contact .cta {
width:80%;
margin:auto;
-webkit-animation:cta 2s ease infinite alternate;
animation:cta 2s ease infinite alternate;
}



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



/*FOOTER*/
footer {
padding-bottom:20px;
}

footer .copyright {
width:90%;
margin:auto;
text-align:center;
color:#b4bec8;
font-size:70%;
}








}