@charset "utf-8";

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

@media(min-width:1000px){

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

p {
font-size:100%;
font-weight:400;
line-height:150%;
}

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

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

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

.titles h2 {
font-size:250%;
font-weight:500;
border-bottom:#000 1px solid;
display:inline-block;
padding-bottom:10px;
margin-bottom:10px;
line-height:100%;
}

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



/*HEADER*/
header h1 {
width:180px;
position:fixed;
top:15px;
left:15px;
z-index:999;
}

header .cta_btn {
position:fixed;
top:0;
right:0;
z-index:999;
}

header .cta_btn a {
width:150px;
height:100px;
display:flex;
justify-content:center;
align-items:center;
background:#f0c81e;
text-decoration:none;
}

header .cta_btn a .btn {
}

header .cta_btn a .btn .icon {
width:40px;
margin:0 auto 5px;
}

header .cta_btn a .btn .item {
font-size:90%;
font-weight:bold;
}




/*MV*/
#mv {
width:100vw;
height:600px;
background-size:cover;
display:flex;
justify-content:center;
align-items:center;
}

#mv .mv_cts {
width:100%;
position:relative;
display:flex;
justify-content:center;
align-items:center;
}

#mv .mv_cts .main {
width:100%;
height:600px;
position:relative;
z-index:-1;
top:0;
left:0;
}

#mv .mv_cts .copies {
position:absolute;
left:0;
right:0;
margin:auto;
}

#mv .mv_cts .copies .title1 {
width:400px;
margin:0 auto 15px;
}

#mv .mv_cts .copies .title2 {
width:750px;
margin:0 auto 15px;
}

#mv .mv_cts .copies .subtitle {
width:450px;
margin:auto;
border:#000 1px solid;
padding:10px 15px;
background:#fff;
}

#video {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*縦横幅指定*/
width: 100%; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
min-height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
}



/*CTA*/
#cta {
padding:70px 0 100px;
background:url(../img/cta_bg.jpg) center no-repeat;
background-size:cover;
}

#cta .container {
width:1000px;
background:#fff;
box-shadow:0 0 10px rgba(0,0,0,0.05);
}

#cta .container .line {
width:100%;
height:5px;
background:linear-gradient(to right,#f6ed2e,#ebc830,#f5e15a,#f9fd9e,#c2a70e);
}

#cta .container .steps {
display:flex;
}

#cta .container .steps .step {
width:220px;
height:60px;
background:linear-gradient(to right,#323232,#000);
position:relative;
display:flex;
align-items:center;
}

#cta .container .steps .step.now {
background:#e6321e;
}

#cta .container .steps .step p {
font-size:90%;
}

#cta .container .steps .step:after {
content:"";
width:20px;
height:60px;
border-top:transparent 30px solid;
border-right:transparent 20px solid;
border-bottom:transparent 30px solid;
border-left:#000 20px solid;
position:absolute;
top:0;
right:-40px;
z-index:1;
}

#cta .container .steps .step.now:after {
content:"";
width:20px;
height:60px;
border-top:transparent 30px solid;
border-right:transparent 20px solid;
border-bottom:transparent 30px solid;
border-left:#e6321e 20px solid;
position:absolute;
top:0;
right:-40px;
z-index:1;
}

#cta .container .steps .step:last-child {
width:200px;
}

#cta .container .steps .step:last-child:after {
display:none;
}

#cta .container .steps .step .number {
width:24px;
height:24px;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
margin-left:20px;
font-family:'Outfit', sans-serif;
line-height:0;
}

#cta .container .steps .step.now .number {
color:#e6321e;
}

#cta .container .steps .step:nth-child(n+2) .number {
margin-left:35px;
}

#cta .container .steps .step .status {
color:#fff;
padding-left:10px;
}

#cta .container .cta_cts {
padding:35px 70px 45px;
position:relative;
}

#cta .container .cta_cts .questionnaires {
text-align:center;
padding-bottom:30px;
}

#cta .container .cta_cts .questionnaires .questionnaire {
font-size:400%;
font-weight:300;
font-family:'Outfit', sans-serif;
line-height:100%;
padding-bottom:10px;
color:#e6321e;
}

#cta .container .cta_cts .questionnaires h3 {
font-size:180%;
font-weight:500;
padding-bottom:10px;
}

#cta .container .cta_cts .questionnaires .attention {
font-size:80%;
}


/*CONFIRMATION*/
#cta .container.conf {
}

#cta .container.conf .cta_cts {
padding:50px 70px 45px;
}

#cta .container.conf .cta_cts .questionnaires .copy {
}

#cta .container.conf .confirmations {
}

#cta .container.conf .confirmations .confirmation {
border-top:#e1e1e1 1px solid;
padding-top:15px;
margin-top:15px;
}

#cta .container.conf .confirmations .confirmation:last-child {
border-bottom:#e1e1e1 1px solid;
padding-bottom:15px;
margin-bottom:15px;
}

#cta .container.conf .confirmations .confirmation .item {
font-size:110%;
font-weight:bold;
padding-bottom:3px;
display:flex;
}

#cta .container.conf .confirmations .confirmation .details {
}

#cta .container.conf .confirmations .confirmation .details .detail {
display:flex;
}

#cta .container.conf .confirmations .confirmation .details .detail span:first-child {
color:#999;
}


/*THANKS*/
#cta .container.thanks {
}

#cta .container.thanks .cta_cts {
padding:120px 70px;
}

#cta .container.thanks .cta_cts .questionnaires h3 {
font-size:250%;
font-weight:bold;
line-height:100%;
padding-bottom:10px;
color:#e6321e;
}

#cta .container.thanks .cta_cts .copy {
text-align:center;
padding-bottom:30px;
}

#cta .container.thanks .cta_cts .attention {
font-size:80%;
display:flex;
justify-content:center;
}

#cta .container.thanks .cta_cts .backbtn {
text-align:center;
margin-top:70px;
}

#cta .container.thanks .cta_cts .backbtn a {
border:#ccc 1px solid;
padding:15px 25px;
display:inline-block;
text-decoration:none;
border-radius:10vw;
}

#cta .container.thanks .cta_cts .backbtn a p {
font-size:90%;
color:#ccc;
}


/*CTA FORM*/
#cta form {
}

#cta .selects {
width:100%;
margin:auto;
display:flex;
justify-content:center;
flex-wrap:wrap;
}

#cta input[type="checkbox"] {
visibility:hidden;
position:absolute;
left:0;
z-index:-1;
}

#cta .label {
background:#fafafa;
border:#e1e1e1 1px solid;
padding:18px 10px;
text-align:center;
border-radius:10px;
cursor:pointer;
font-weight:400;
}

#cta .question1 .fields {

}

#cta .question1 .fields .field {
padding-bottom:30px;
}

#cta .question1 .fields .field:last-child {
padding-bottom:0;
}

#cta .question1 .category {
background:#f0c81e;
padding:7px 0;
text-align:center;
font-weight:bold;
margin-bottom:18px;
}

#cta .question1 .selects .label {
width:18.4%;
margin:0 2% 15px 0;
}

#cta .question1 .selects .label:nth-child(10n) {
margin-right:0;
}

#cta .question1 .selects .label:last-child {
margin-right:0;
}

#cta .question2 .selects .label {
width:32%;
margin:0 2% 15px 0;
}

#cta .question2 .selects .label:nth-child(6n) {
margin-right:0;
}

#cta .question3 .selects .label {
width:15%;
margin:0 2% 15px 0;
}

#cta .question3 .selects .label:nth-child(12n) {
margin-right:0;
}

#cta .forms {
width:100%;
margin:auto;
}

#cta .forms .form {
display:flex;
justify-content:center;
align-items:center;
margin-bottom:15px;
}

#cta .forms .form .item {
width:150px;
font-size:110%;
}

#cta .forms .form .detail {
width:60%;
}

#cta .forms .form .detail .detail_cts {
display:flex;
align-items:center;
}

#cta .forms .form .detail .detail_cts p {
margin-right:15px;
}

#cta input[type="checkbox"]:checked + .label {
background:linear-gradient(#323232,#000);
color:#fff;
}

#cta input[type="text"],
#cta input[type="number"],
#cta input[type="email"],
#cta input[type="tel"] {
padding:15px 18px;
font-size:110%;
}

#cta .forms .form .style_name {
width:100%;
}

#cta .forms .form .style_kana {
width:100%;
}

#cta .forms .form .style_year {
width:120px;
}

#cta .forms .form .style_month {
width:100px;
}

#cta .forms .form .style_day {
width:100px;
}

#cta .forms .form .style_tel {
width:50%;
}

#cta .forms .form .style_mail {
width:100%;
}

#cta .cta_cts .btns .btn .style_fix {
background:#ccc;
color:#fff;
border:none;
padding:10px 30px;
border-radius:10vw;
cursor:pointer;
font-size:80%;
position:absolute;
left:15px;
bottom:15px;
}

#cta .cta_cts .btns .btn .style_submit {
background:#e6321e;
color:#fff;
border:none;
padding:15px 40px;
border-radius:10vw;
cursor:pointer;
}

#cta .cta_cts .btns {
display:flex;
justify-content:center;
padding-top:15px;
}

#cta .cta_cts .btns .btn {
}

#cta .cta_cts .btns .btn input[type="submit"] {
}

#cta .cta_cts .warning {
font-size:90%;
padding-top:7px;
color:#e6321e;
}



/*WORRY*/
#worry {
padding-bottom:50px;
background:linear-gradient(#000,#323232);
position:relative;
}

#worry:after {
content:"";
width:100%;
height:200px;
border-top:#323232 100px solid;
border-right:transparent 50vw solid;
border-bottom:transparent 100px solid;
border-left:transparent 50vw solid;
position:absolute;
left:0;
right:0;
bottom:-200px;
}

#worry .deco {
width:100%;
height:150px;
background:url(../img/worry_deco.png) repeat-x;
background-size:70px;
}

#worry .titles h2 {
color:#fff;
border-bottom:#e6321e 4px solid;
}

#worry .titles .copy {
color:#fff;
}

#worry .worries {
display:flex;
justify-content:space-between;
}

#worry .worries .worry {
width:220px;
}

#worry .worries .worry .thought {
background:#fff;
border-radius:20px;
padding:15px;
text-align:center;
font-weight:400;
margin-bottom:10px;
}

#worry .worries .worry .illust {
}



/*SOLUTION*/
#solution {
padding:170px 0 0;
}

#solution .titles .icon {
width:90px;
margin-bottom:15px;
}

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

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

#solution .details {
display:flex;
justify-content:center;
align-items:center;
padding-bottom:50px;
}

#solution .details .illust {
width:300px;
margin-right:50px;
}

#solution .details .detail {
font-size:110%;
line-height:230%;
}

#solution .photos {
display:flex;
}

#solution .photos .photo {
width:25%;
}



/*CONDUCTOR*/
.conductor {
padding:40px 0;
background:linear-gradient(45deg,#f6ed2e,#ebc830,#f5e15a,#f9fd9e,#c2a70e);
}

.conductor .conductor_title {
display:flex;
justify-content:center;
align-items:flex-end;
padding-bottom:15px;
}

.conductor .conductor_title .balloon {
width:25px;
}

.conductor .conductor_title h3 {
font-size:180%;
font-weight:400;
line-height:100%;
padding:0 20px;
}

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

.conductor .conductor_btn {
text-align:center;
}

.conductor .conductor_btn a {
display:inline-block;
text-decoration:none;
background:#e6321e;
padding:20px 50px;
border-radius:10vw;
}

.conductor .conductor_btn a .btn {
display:flex;
justify-content:center;
align-items:center;
}

.conductor .conductor_btn a .btn p {
font-size:120%;
font-weight:700;
color:#fff;
margin-right:20px;
}

.conductor .conductor_btn a .btn .arrow {
width:12px;
height:12px;
border-top:#fff 2px solid;
border-right:#fff 2px solid;
transform:rotate(45deg);
}



/*FEATURE*/
#feature {
padding:70px 0;
background:url(../img/feature_bg.jpg) no-repeat center bottom;
background-size:100%;
}

#feature .titles .icon {
width:70px;
margin-bottom:15px;
}

#feature .titles .line {
width:70px;
}

#feature .features {
display:flex;
justify-content:space-between;
padding:20px 0 50px;
}

#feature .features .feature {
width:30%;
}

#feature .features .feature .photos {
position:relative;
padding-bottom:15px;
}

#feature .features .feature .photos .photo {
}

#feature .features .feature .photos .number {
width:40px;
height:40px;
background:linear-gradient(#323232,#000);
display:flex;
justify-content:center;
align-items:center;
color:#fff;
position:absolute;
left:0;
right:0;
top:-20px;
margin:auto;
font-family:'Outfit', sans-serif;
}

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

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

#feature .features .feature .ex {
}

#feature .visual {
width:800px;
margin:auto;
}



/*INTERVIEW*/
#interview {
padding:70px 0 120px;
background:url(../img/interview_bg.jpg) no-repeat center bottom;
background-size:100%;
}

#interview .titles .icon {
width:50px;
margin-bottom:15px;
}

#interview .tabs {
display:flex;
justify-content:space-between;
}

#interview .tabs .tab {
width:244px;
background:linear-gradient(#323232,#000);
border-radius:10px 10px 0 0;
padding:12px;
text-align:center;
cursor:pointer;
}

#interview .tabs .tab.on {
background:#e6321e;
}

#interview .tabs .tab:hover {
-webkit-animation:hover 0.5s ease forwards;
animation:hover 0.5s ease forwards;
}

#interview .tabs .tab .occupation {
color:#fff;
}

#interview .tabs .tab .age {
font-size:80%;
color:#fff;
}

#interview .interviews {
}

#interview .interviews .interview {
background:rgba(255,255,255,0.95);
padding:50px 50px;
box-shadow:0 0 10px rgba(0,0,0,0.05);
}

#interview .interviews .interview.interview1 {
}

#interview .interviews .interview.interview2 {
display:none;
}

#interview .interviews .interview.interview3 {
display:none;
}

#interview .interviews .interview.interview4 {
display:none;
}

#interview .interviews .interview .interview_cts {
display:flex;
justify-content:space-between;
}

#interview .interviews .interview .photo {
width:430px;
}

#interview .interviews .interview .detail {
width:430px;
}

#interview .interviews .interview .detail .names {
border-left:#0064b4 5px solid;
padding:3px 0 3px 12px;
margin-bottom:15px;
}

#interview .interviews .interview .detail .names .name {
font-size:120%;
font-weight:bold;
}

#interview .interviews .interview .detail .names .age {
font-size:80%;
}

#interview .interviews .interview .detail h3 {
font-size:120%;
font-weight:bold;
padding-bottom:5px;
}

#interview .interviews .interview .detail .ex {
}



/*CASE*/
#case {
padding:70px 0;
background:url(../img/case_bg.jpg) no-repeat center;
background-size:cover;
position:relative;
}

#case .mask {
width:100%;
height:100%;
background:url(../img/case_mask.png);
position:absolute;
top:0;
left:0;
}

#case .titles .icon {
width:70px;
margin-bottom:15px;
}

#case .cases {
width:1120px;
margin:auto;
position:relative;
display:flex;
}

#case .cases .case {
background:#fff;
box-shadow:0 0 10px rgba(0,0,0,0.05);
}

#case .cases .case .photo {
}

#case .cases .case .details {
padding:20px;
}

#case .cases .case .details h3 {
font-size:120%;
font-weight:bold;
text-align:center;
padding-bottom:5px;
}

#case .cases .case .details .detail {
}

#case .cases .case .details .detail span:first-child {
font-size:70%;
background:#e1e1e1;
padding:3px 7px;
margin-right:10px;
}

#case .cases .case .details .detail span:last-child {
font-size:90%;
}

#case .cases .case .details .work {
font-size:90%;
padding-top:5px;
}



/*SWIPER*/
.swiper-container {
width:1000px;
}

.swiper-wrapper {
}

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

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



/*FLOW*/
#flow {
padding:70px 0;
background:url(../img/flow_bg.jpg) no-repeat center;
background-size:cover;
}

#flow .titles .icon {
width:60px;
margin-bottom:15px;
}

#flow .flows {
padding-top:28px;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}

#flow .flows .flow {
width:184px;
background:#fff;
position:relative;
padding:35px 20px 20px;
margin-bottom:48px;
}

#flow .flows .flow:nth-child(n+6) {
margin-bottom:0;
}

#flow .flows .flow:after {
content:"";
width:15px;
height:30px;
border-top:transparent 15px solid;
border-right:transparent 15px solid;
border-bottom:transparent 15px solid;
border-left:#fff 15px solid;
position:absolute;
top:calc(50% - 15px);
right:-30px;
}

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

#flow .flows .flow .steps {
width:56px;
height:56px;
border-radius:28px;
background:#f0c81e;
display:flex;
justify-content:center;
align-items:center;
position:absolute;
top:-30px;
left:0;
right:0;
margin:auto;
}

#flow .flows .flow .steps .step {
text-align:center;
padding-top:5px
}

#flow .flows .flow .steps .step .item {
font-size:60%;
font-family:'Outfit', sans-serif;
line-height:100%;
}

#flow .flows .flow .steps .step .number {
font-size:150%;
font-family:'Outfit', sans-serif;
line-height:100%;
}

#flow .flows .flow .step_cts {
}

#flow .flows .flow .illust {
width:100px;
margin:0 auto 10px;
}

#flow .flows .flow h3 {
font-size:95%;
font-weight:bold;
text-align:center;
padding-bottom:7px;
}

#flow .flows .flow h3 .sm {
font-size:70%;
}

#flow .flows .flow .ex {
font-size:80%;
}

#flow .flows .flow .ex a {
text-decoration:none;
font-weight:bold;
color:#0064b4;
}



/*FAQ*/
#faq {
background:#f5f5f5;
padding:70px 0;
}

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

#faq .faqs {
}

#faq .faqs .faq {
}

#faq .faqs .faq .questions {
display:flex;
position:relative;
cursor:pointer;
margin-bottom:15px;
}

#faq .faqs .faq .questions .item {
width:60px;
background:#f0c81e;
display:flex;
justify-content:center;
align-items:center;
font-size:120%;
font-family:'Outfit', sans-serif;
}

#faq .faqs .faq .questions .question {
width:calc(100% - 60px);
background:#fff;
padding:18px 38px 18px 18px;
font-weight:bold;
}

#faq .faqs .faq .questions .arrow {
width:20px;
height:20px;
background:url(../img/faq_close.svg) center;
background-size:20px 20px;
position:absolute;
top:calc(50% - 10px);
right:18px;
}

#faq .faqs .faq .questions .arrow.on {
width:20px;
height:20px;
background:url(../img/faq_open.svg) center;
background-size:20px 20px;
position:absolute;
top:calc(50% - 10px);
right:18px;
}

#faq .faqs .faq .answers {
position:relative;
cursor:pointer;
padding-bottom:50px;
display:none;
}

#faq .faqs .faq .answers .answers_cts {
display:flex;
}

#faq .faqs .faq .answers .item {
width:60px;
height:60px;
background:#000;
display:flex;
justify-content:center;
align-items:center;
font-size:120%;
font-family:'Outfit', sans-serif;
color:#f0c81e;
}

#faq .faqs .faq .answers .answer {
width:calc(100% - 60px);
padding-left:18px;
}



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



/*SNS*/
.sns_line {
position:fixed;
width:210px;
left:0;
bottom:0;
z-index:100;
}

.sns_line img {
border-radius:0 10px 0 0;
}



/*FOOTER*/
footer {
background:linear-gradient(#323232,#000);
padding:40px 0;
}

footer .cts {
display:flex;
justify-content:space-between;
position:relative;
}

footer .company {
color:#fff;
padding-bottom:50px;
}

footer .company .copy {
border:#fff 1px solid;
padding:7px 12px;
color:#fff;
font-size:80%;
display:inline-block;
margin-bottom:15px;
}

footer .company .footer_logo {
width:130px;
margin-bottom:10px;
}

footer .company .name {
font-size:80%;
font-weight:bold;
color:#fff;
margin-bottom:5px;
}

footer .company .address {
font-size:80%;
color:#fff;
}

footer .company .tel {
font-size:80%;
color:#fff;
}

footer .contact {
}

footer .contact .btns {
display:flex;
}

footer .contact .btns a {
width:90px;
height:90px;
border:#fff 1px solid;
text-decoration:none;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
}

footer .contact .btns a:first-child {
margin-right:12px;
}

footer .contact .btns a .btn {
}

footer .contact .btns a .btn img {
width:36px;
}

footer .contact .btns a .btn p {
font-size:60%;
color:#fff;
padding-top:7px;
}

footer .contact .copyright {
font-size:80%;
font-weight:300;
color:#646464;
font-family:'Outfit', sans-serif;
position:absolute;
bottom:0;
right:0;
}



}