@charset "utf-8";

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

@media(min-width:1000px){

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

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

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

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

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

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

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



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

header h1 {
width:350px;
}

header .contact {
display:flex;
justify-content:center;
}

header .contact .balloon {
width:120px;
}

header .contact  a {
background:#b4321e;
margin-left:10px;
border-radius:6px;
display:flex;
justify-content:center;
align-items:center;
padding:0 15px;
}

header .contact  a p {
font-size:90%;
color:#fff;
text-align:center;
}



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

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

#mv .copies {
}

#mv .copies .subcopy {
width:550px;
display:flex;
flex-direction:column;
margin-bottom:20px;
}

#mv .copies .subcopy img {
width:100%;
height:2px;
}

#mv .copies .subcopy .copy {
font-size:180%;
font-weight:bold;
line-height:145%;
padding:15px 0 12px 50px;
margin:0;
}

#mv .copies .maincopy {
margin-bottom:35px;
padding-left:15px;
}

#mv .copies .maincopy p {
font-size:320%;
font-weight:bold;
line-height:130%;
display:flex;
align-items:center;
}

#mv .copies .maincopy p:first-child {
font-size:370%;
font-weight:600;
}

#mv .copies .maincopy p .kana {
font-size:40%;
margin-left:10px;
}

#mv .copies .case {
width:550px;
position:relative;
z-index:1;
display:flex;
justify-content:flex-end;
align-items:center;
}

#mv .copies .case .no1 {
width:170px;
position:absolute;
left:-15px;
}

#mv .copies .case .explain {
width:480px;
background:rgba(255,255,255,0.8);
border-radius:15px;
padding:15px 15px 15px 100px;
}

#mv .copies .case .explain .item {
font-size:170%;
font-weight:600;
line-height:125%;
padding-bottom:5px;
}

#mv .copies .case .explain .attention {
font-size:50%;
color:#787878;
}

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

#mv .photos .photo {
width:540px;
}

#mv .photos .names {
position:absolute;
bottom:25px;
right:0;
text-align:right;
}

#mv .photos .names .position {
font-size:80%;
}

#mv .photos .names .name {
font-size:150%;
}



/*TARGET*/
#target {
padding:85px 0;
}

#target .titles {
}

#target .titles .icon {
}

#target .targets {
display:flex;
justify-content:space-between;
}

#target .targets .target {
width:20%;
}

#target .targets .target .photo {
width:130px;
margin:0 auto 20px;
position:relative;
}

#target .targets .target .photo .notation {
position:absolute;
right:-15px;
bottom:0;
width:50px;
}

#target .targets .target .detail {
text-align:center;
}

#target .targets .target .detail .sub {
font-weight:600;
}

#target .targets .target .detail .main {
font-size:135%;
font-weight:bold;
line-height:135%;
color:#b4321e;
padding:5px 0;
}



/*MERIT*/
#merit {
padding:85px 0;
background:url(../img/merit_bg.png);
background-size:20px;
}

#merit .titles .icon {
width:70px;
}

#merit .merits {
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}

#merit .merits .merit {
width:48%;
background:#fff;
padding:35px 50px 35px;
margin-bottom:4%;
border-radius:15px;
}

#merit .merits .merit:nth-child(n+3) {
margin-bottom:0;
}

#merit .merits .merit .items {
text-align:center;
}

#merit .merits .merit .items .subcopy {
background:#b4321e;
color:#fff;
display:inline-block;
padding:10px 25px;
border-radius:10vw;
margin-bottom:10px;
}

#merit .merits .merit .items h3 {
font-size:180%;
font-weight:bold;
line-height:135%;
margin-bottom:15px;
}

#merit .merits .merit .items h3 sup {
font-size:50%;
}

#merit .merits .merit .photo {
width:350px;
margin:0 auto 20px;
position:relative;
}

#merit .merits .merit .photo .notation {
position:absolute;
right:0;
bottom:0;
width:60px;
}

#merit .merits .merit:nth-child(1) .photo .notation,
#merit .merits .merit:nth-child(4) .photo .notation {
right:30px;
}

#merit .merits .merit:nth-child(2) .photo .notation {
right:-15px;
}

#merit .merits .merit:nth-child(3) .photo .notation {
right:-15px;
}



/*FEATURE*/
#feature {
padding:85px 0;
}

#feature .titles .icon {
}

#feature .features {
}

#feature .features .feature {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:50px;
}

#feature .features .feature:nth-child(2n) {
flex-direction:row-reverse;
}

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

#feature .features .feature .photo {
width:480px;
position:relative;
}

#feature .features .feature .photo img {
border-radius:30px;
}

#feature .features .feature .photo .notation {
position:absolute;
right:20px;
bottom:15px;
width:60px;
border-radius:0;
}

#feature .features .feature .detail {
width:560px;
}

#feature .features .feature .detail .min {
font-size:500%;
font-style:italic;
line-height:100%;
color:#e8c1bb;
margin-bottom:30px;
}

#feature .features .feature .detail h3 {
font-size:180%;
font-weight:bold;
line-height:135%;
margin-bottom:15px;
}

#feature .features .feature .detail .ex {
}

#feature .features .feature .detail .ex p {
padding-bottom:0;
}



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

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

#media .titles h2 .sup {
font-weight:500;
}

#media .medias {
}

#media .medias .media {
background:#fdf9f8;
padding:35px 50px;
border:#e8c1bb 1px solid;
margin-bottom:25px;
border-radius:20px;
}

#media .medias .media:last-child {
margin-bottom:0;
}

#media .medias .media h3 {
font-size:160%;
font-weight:bold;
color:#b4321e;
padding-bottom:5px;
}

#media .medias .media .ex {
}

#media .medias .media .btns {
text-align:right;
margin-top:15px;
}

#media .medias .media .btns .btn {
display:inline-block;
}

#media .medias .media .btns .btn a {
display:flex;
justify-content:center;
align-items:center;
text-align:center;
background:#b4321e;
padding:7px 20px;
border-radius:10vw;
}

#media .medias .media .btns .btn p {
color:#fff;
}

#media .medias .media .btns .btn .arrow {
width:8px;
height:8px;
border-top:#fff 1px solid;
border-right:#fff 1px solid;
transform:rotate(45deg);
margin-left:10px;
}



/*MODEL*/
#model {
padding:100px 0;
background:#f5f0eb;
}

#model .titles .icon {
width:70px;
}

#model .models {
display:flex;
justify-content:space-between;
align-items:center;
}

#model .models .model {
width:31%;
}

#model .models .model .photo {
position:relative;
}

#model .models .model .photo .notation {
position:absolute;
right:20px;
bottom:15px;
width:60px;
border-radius:0;
}

#model .models .model .data {
background:#fff;
border-radius:30px;
padding:30px 20px 25px;
}

#model .models .model .data .items {
text-align:center;
margin-bottom:15px;
}

#model .models .model .data .items .item {
font-size:180%;
font-weight:bold;
line-height:135%;
}

#model .models .model:first-child .data .items .item {
color:#ff6464;
}

#model .models .model:nth-child(2) .data .items .item {
color:#0046b4;
}

#model .models .model:last-child .data .items .item {
color:#f09600;
}

#model .models .model .data .items .subitem {
font-size:120%;
font-weight:bold;
color:#505a64;
}

#model .models .model .data .cases {
display:flex;
justify-content:center;
align-items:center;
margin-bottom:15px;
}

#model .models .model .data .cases .case {
width:90px;
height:90px;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
background:#aaa;
border-radius:45px;
text-align:center;
margin:0 5px;
}

#model .models .model:first-child .data .cases .case {
background:#ff6464;
}

#model .models .model:nth-child(2) .data .cases .case {
background:#0046b4;
}

#model .models .model:last-child .data .cases .case {
background:#f09600;
}

#model .models .model .data .cases .case p:first-child {
font-size:90%;
line-height:100%;
color:#fff;
padding-bottom:10px;
}

#model .models .model .data .cases .case p:last-child {
color:#fff;
font-size:100%;
font-weight:600;
line-height:100%;
}

#model .models .model .data .cases .case p .number {
font-size:160%;
}

#model .models .model table {
width:100%;
border-spacing:5px;
}

#model .models .model table th {
width:50%;
background:#b4b4b4;
color:#fff;
padding:10px;
font-size:90%;
font-weight:bold;
}

#model .models .model table td {
width:50%;
background:#f5f5f5;
color:#fff;
text-align:center;
padding:10px;
font-size:90%;
}

#model .models .model table td .price {
font-weight:500;
color:#505a64;
}

#model .models .model table td .price .number {
font-size:180%;
margin-right:5px;
}

#model .models .model table td .breakdown {
font-size:90%;
color:#505a64;
}

#model .models .model table tr:last-child th {
padding:20px 10px;
font-size:100%;
}

#model .models .model table tr:last-child td {
padding:20px 10px;
}

#model .models .model table tr:last-child td .price {
font-size:120%;
}

#model .models .model:first-child table tr:last-child th {
background:#ff6464;
}

#model .models .model:nth-child(2) table tr:last-child th {
background:#0046b4;
}

#model .models .model:last-child table tr:last-child th {
background:#f09600;
}

#model .models .model:first-child table tr:last-child td {
background:rgba(255,100,100,0.1);
}

#model .models .model:first-child table tr:last-child td .price {
color:#ff6464;
}

#model .models .model:nth-child(2) table tr:last-child td {
background:rgba(0,70,180,0.1);
}

#model .models .model:nth-child(2) table tr:last-child td .price {
color:#0046b4;
}

#model .models .model:last-child table tr:last-child td {
background:rgba(240,150,0,0.1);
}

#model .models .model:last-child table tr:last-child td .price {
color:#f09600;
}



/*VOICE*/
#voice {
padding:100px 0;
}

#voice .titles .icon {
width:55px;
}

#voice .voices {
}

#voice .voices .voice {
display:flex;
justify-content:space-between;
margin-bottom:50px;
flex-direction:row-reverse;
}

#voice .voices .voice:nth-child(odd) {
flex-direction:row;
}

#voice .voices .voice:last-child {
margin-bottom:0;
}

#voice .voices .voice .photos {
width:250px;
}

#voice .voices .voice .photos .photo {
}

#voice .voices .voice .photos .name {
font-size:90%;
text-align:center;
}

#voice .voices .voice .photos .age {
font-size:70%;
text-align:center;
}

#voice .voices .voice .detail {
width:820px;
}

#voice .voices .voice .detail h3 {
font-size:150%;
font-weight:bold;
border-top:#b4321e 1px solid;
border-bottom:#b4321e 1px solid;
color:#b4321e;
padding:10px 10px 6px 10px;
margin-bottom:15px;
}

#voice .voices .voice .detail .ex {
}



/*CONTACT*/
#contact {
padding:100px 0;
background:#f5f5f5;
}

#contact.under {
margin-top:70px;
}

#contact .cts {
width:900px;
}

#contact .copy {
text-align:center;
padding-bottom:30px;
}

#contact .form_cts {
background:#fff;
border-radius:30px;
position:relative;
padding:50px 70px;
}

#contact .form_cts .photo {
width:180px;
position:absolute;
top:0;
right:-158px;
}

#contact .form_cts .photo .notation {
position:absolute;
left:40px;
bottom:-35px;
width:60px;
}

#contact .form_cts .form_titles {
}

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

#contact .form_cts .form_titles .form_title {
font-size:180%;
font-weight:bold;
color:#b4321e;
text-align:center;
padding-bottom:10px;
}

#contact .form_cts .form_titles .ex {
padding-bottom:5px;
}

#contact .form_cts .form_titles .attention {
font-size:80%;
color:#969696;
}

#contact .forms {
}

#contact .forms .form {
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:#c8c8c8 1px solid;
padding-bottom:15px;
margin-bottom:15px;
}

#contact .forms .form:first-child {
border-top:#c8c8c8 1px solid;
padding-top:15px;
margin-top:15px;
}

#contact .forms .form .item {
width:25%;
}

#contact .forms .form .item .required {
font-size:80%;
padding:3px 5px;
background:#b4321e;
color:#fff;
margin-right:10px;
}

#contact .forms .form .item .any {
}

#contact .forms .form .detail {
width:70%;
}

#contact .forms .form .detail.birthday {
display:flex;
align-items:center;
}

#contact .forms .form .detail.birthday p {
margin-right:10px;
}

#contact .btns {
display:flex;
justify-content:center;
align-items:center;
}

#contact .btns .btn {
margin:0 10px;
}

#contact .warning {
color:#e6321e;
font-size:90%;
}

#contact .warning.block {
padding-top:5px;
display:block;
}

#contact .backbtn {
margin:20px auto 0;
text-align:center;
}

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

#contact .backbtn .btn a {
border:#b4321e 1px solid;
display:flex;
justify-content:center;
align-items:center;
padding:10px 15px;
border-radius:15px;
background:#fff;
}

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

#contact .backbtn .btn .arrow {
width:10px;
height:10px;
border-top:#b4321e 1px solid;
border-left:#b4321e 1px solid;
transform:rotate(-45deg);
margin-right:10px;
}


/*FORM*/
#contact input,
#contact textarea {
padding:15px 20px;
}

#contact select {
font-size:100%;
}

#contact .style_name {
width:50%;
}

#contact .style_kana {
width:50%;
}

#contact .style_mail {
width:80%;
}

#contact .style_tel {
width:50%;
}

#contact .style_area {
width:200px;
}

#contact .style_year {
width:120px;
}

#contact .style_month {
width:80px;
}

#contact .style_day {
width:80px;
}

#contact .style_genre {
width:60%;
}

#contact .style_detail {
width:100%;
height:300px;
}

#contact .style_submit {
font-size:110%;
font-weight:bold;
background:#b4321e;
border:#b4321e 1px solid;
padding:20px 35px;
color:#fff;
border-radius:20vw;
cursor:pointer;
}

#contact .style_fix {
font-size:110%;
font-weight:bold;
background:#c8c8c8;
border:#c8c8c8 1px solid;
padding:20px 35px;
color:#fff;
border-radius:20vw;
cursor:pointer;
}



/*GROBAL*/
#grobal {
}

#grobal .nav_btn {
width:50px;
height:30px;
position:fixed;
top:20px;
right:20px;
display:flex;
justify-content:center;
align-items:center;
z-index:998;
cursor:pointer;
}

#grobal .nav_btn span {
width:100%;
height:2px;
background:#000;
position:absolute;
}

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

#grobal .nav_btn span.show:first-child {
top:14px;
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:0;
transition:0.5s;
}

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

#grobal .nav_close {
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
position:fixed;
top:0;
left:0;
display:none;
cursor:pointer;
z-index:999;
}

#grobal .grobal_nav {
width:300px;
height:100%;
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.5);
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
transform:translate(-100%,0);
transition:0.5s;
z-index:1000;
}

#grobal .grobal_nav.show {
transform:translate(0,0);
}

#grobal .grobal_nav nav {
padding:10px 0;
}

#grobal .grobal_nav nav a {
color:#fff;
}



/*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 .copyright {
font-size:70%;
text-align:center;
}



/*SWIPER*/
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
z-index: 10;
cursor: pointer;
background-size: 50px 50px;
background-position: center;
background-repeat: no-repeat;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url(../img/slide_prev.svg);
left: 50px;
right: auto;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url(../img/slide_next.svg);
right: 50px;
left: auto;
}





}