@charset "utf-8";

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

@media(max-width:999px){

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

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

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

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

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

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

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



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

header h1 {
width:55%;
}

header .contact {
width:40%;
height:60px;
display:flex;
flex-direction:column;
position:relative;
}

header .contact .balloon {
position:absolute;
width:70%;
margin:auto;
top:10px;
left:0;
right:0;
}

header .contact .balloon img {
vertical-align:top;
}

header .contact  a {
position:absolute;
bottom:10px;
width:100%;
height:23px;
background:#b4321e;
border-radius:6px;
display:flex;
justify-content:center;
align-items:center;
}

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



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

#mv .cts {
position:relative;
width:100%;
height:100vh;
padding:25px 0;
}

#mv .copies {
width:100%;
margin:auto;
text-align:center;
}

#mv .copies .subcopy {
width:80%;
margin:0 auto 10px;
display:flex;
flex-direction:column;
}

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

#mv .copies .subcopy .copy {
font-size:110%;
font-weight:bold;
line-height:145%;
padding:10px 0 8px 0;
margin:0;
}

#mv .copies .maincopy {
position:relative;
z-index:1;
}

#mv .copies .maincopy p {
font-size:180%;
font-weight:bold;
line-height:130%;
display:flex;
justify-content:center;
align-items:center;
text-shadow:0 0 5px #fff;
}

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

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

#mv .copies .case {
width:95%;
position:absolute;
left:0;
right:0;
bottom:20px;
z-index:1;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(255,255,255,0.9);
border-radius:15px;
padding:15px 15px 15px 20px;
height:135px;
}

#mv .copies .case .no1 {
width:100px;
}

#mv .copies .case .explain {
width:calc(100% - 115px);
text-align:left;
}

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

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

#mv .photos {
width:100%;
position:absolute;
left:0;
right:0;
bottom:20px;
margin:auto;
text-align:center;
}

#mv .photos .photo {
width:100%;
margin:auto;
position:relative;
}

#mv .photos .photo img {
width:auto;
height:64vh;
position:relative;
margin-left:-50%;
left:27%;
}

#mv .photos .names {
position:absolute;
right:5%;
bottom:145px;
text-align:right;
}

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

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



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

#target .titles {
}

#target .titles .icon {
}

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

#target .targets .target {
width:48%;
margin-bottom:25px;
}

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

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

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

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

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

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



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

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

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

#merit .merits .merit {
width:100%;
background:#fff;
padding:25px 25px 25px;
margin-bottom:20px;
border-radius:15px;
}

#merit .merits .merit:last-child {
margin-bottom:0;
}

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

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

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

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

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

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

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

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

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



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

#feature .titles .icon {
}

#feature .features {
}

#feature .features .feature {
margin-bottom:50px;
}

#feature .features .feature:nth-child(2n) {
}

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

#feature .features .feature .photo {
width:100%;
position:relative;
margin-bottom:20px;
}

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

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

#feature .features .feature .detail {
width:100%;
}

#feature .features .feature .detail .min {
font-size:250%;
font-style:italic;
line-height:100%;
color:#e8c1bb;
margin-bottom:15px;
text-align:center;
}

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

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

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



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

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

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

#media .medias {
}

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

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

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

#media .medias .media .ex {
}

#media .medias .media .btns {
text-align:center;
margin-top:20px;
}

#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:40px 0;
background:#f5f0eb;
}

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

#model .models {
}

#model .models .model {
width:100%;
margin-bottom:30px;
}

#model .models .model:last-child {
margin-bottom:0;
}

#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:20px;
padding:25px 20px 25px;
}

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

#model .models .model .data .items .item {
font-size:150%;
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:100%;
font-weight:bold;
color:#505a64;
}

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

#model .models .model .data .cases .case {
width:80px;
height:80px;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
background:#aaa;
border-radius:40px;
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:80%;
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:145%;
}

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

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

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

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

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

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

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

#model .models .model table tr:last-child td {
padding:15px 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:50px 0;
}

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

#voice .voices {
}

#voice .voices .voice {
margin-bottom:50px;
}

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

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

#voice .voices .voice .photos {
width:60%;
margin:auto;
}

#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:100%;
}

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

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



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

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

#contact .cts {
}

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

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

#contact .form_cts .photo {
width:90px;
position:absolute;
top:15px;
left:-12px;
}

#contact .form_cts .photo .notation {
position:absolute;
left:55px;
bottom:0;
width:40px;
}

#contact .form_cts .form_titles {
padding:0 0 30px 85px;
}

#contact.finish .form_cts .form_titles {
padding:0 0 20px;
}

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

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

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

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

#contact .forms {
}

#contact .forms .form {
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:100%;
margin-bottom:10px;
line-height:100%;
}

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

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

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

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

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

#contact .forms .form .detail.birthday p:first-child {
padding-bottom:10px;
}

#contact .forms .form .detail.birthday p:nth-child(2) {
width:50%;
padding-bottom:10px;
}

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

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

#contact .warning {
color:#b4321e;
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,
#contact select {
padding:12px 15px;
}

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

#contact .style_name {
width:100%;
}

#contact .style_kana {
width:100%;
}

#contact .style_mail {
width:100%;
}

#contact .style_tel {
width:100%;
}

#contact .style_area {
width:100%;
}

#contact .style_year {
width:120px;
}

#contact .style_month {
width:80px;
}

#contact .style_day {
width:80px;
}

#contact .style_genre {
width:100%;
}

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

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

#contact .style_fix {
font-size:100%;
font-weight:bold;
background:#c8c8c8;
border:#c8c8c8 1px solid;
padding:18px 30px;
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;
}




}