@charset "utf-8";

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

@media(min-width:960px){

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

p {
font-size:1rem;
line-height:150%;
letter-spacing:0.5px;
}

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

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

/*COMMON*/
.container {
width:100%;
padding:20px 0 0;
overflow:hidden;
}

.authorization {
font-size:70%;
padding-bottom:7px;
position:absolute;
top:10px;
right:10px;
}

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

.titles .copy {
font-size:100%;
padding-bottom:14px;
}

.titles .features {
width:700px;
margin:auto;
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.titles .features .feature {
padding-bottom:0;
margin-right:7px;
}

.titles .features .feature span {
font-size:90%;
background:#ff3264;
color:#fff;
padding:7px 15px;
border-radius:10vw;
}

section {
width:800px;
margin:0 auto 25px;
background:#fff;
box-shadow:0 0 10px #ccc;
padding:6px;
position:relative;
border-radius:10px;
}

section .frame {
border:#b4bec8 1px solid;
position:relative;
padding-bottom:40px;
border-radius:8px;
}

.steps {
display:flex;
justify-content:space-between;
padding-bottom:20px;
}

.steps .step {
width:20%;
display:flex;
justify-content:center;
align-items:center;
border-right:#b4bec8 1px dotted;
border-bottom:#b4bec8 1px dotted;
padding:7px;
}

.steps .step:last-child {
border-right:none;
}

.steps .step.now {
background:#e69632;
-webkit-animation:now 1s infinite alternate ease;
animation:now 1s infinite alternate ease;
}

.steps .step.now:first-child {
border-radius:7px 0 0 0;
}

.steps .step.now:last-child {
border-radius:0 7px 0 0;
}

@keyframes now {
0%{opacity:1;}
100%{opacity:0.7;}
}

.steps .step p {
color:#b4bec8;
}

.steps .step.now p {
color:#fff;
}

.steps .step .turn {
font-size:120%;
font-family: 'Inter', sans-serif;
padding-right:10px;
}

.steps .step .step_title {
font-size:80%;
}

.number {
font-size:280%;
text-align:center;
color:#e69632;
padding-bottom:5px;
}

.number span {
font-family: 'Inter', sans-serif;
font-weight:100;
line-height:100%;
}

h1 {
width:320px;
margin:0 auto 15px;
}

h2 {
font-size:170%;
font-weight:500;
text-align:center;
padding-bottom:20px;
}

.fg {
color:#aaa;
}

.connection {
}

.connection .point {
width:5px;
height:5px;
background:#e69632;
border-radius:2.5px;
margin:auto;
}

.guidance {
width:300px;
position:absolute;
right:-200px;
top:100px;
z-index:99;
}

.guidance .comment {
width:170px;
margin:0 auto 20px;
font-size:90%;
text-align:center;
position:relative;
background:#323232;
color:#fff;
padding:12px 12px;
border-radius:20px;
}

.guidance .comment span {
}

.guidance .comment:after {
content:"";
width:0;
height:0;
border-top:#323232 10px solid;
border-right:transparent 10px solid;
border-bottom:transparent 10px solid;
border-left:transparent 10px solid;
position:absolute;
left:0;
right:0;
bottom:-20px;
margin:auto;
}

.guidance .staff {
}

.assist {
width:40px;
position:absolute;
top:-20px;
right:-50px;
z-index:99;
}

.assist .hand {
-webkit-animation:hand 0.8s infinite alternate ease;
animation:hand 0.8s infinite alternate ease;
}

@keyframes hand {
0%{opacity:1; transform:scale(1);}
100%{opacity:0.7; transform:scale(1.1);}
}

.hand_on {
visibility:visible;
}

.hand_off {
visibility:hidden;
}

.free_dials {
position:absolute;
top:30px;
right:10px;
display:flex;
align-items:center;
justify-content:center;
}

.free_dials .free_dial {
width:20px;
margin-right:5px;
}

.free_dials .phone {
font-size:125%;
font-weight:bold;
line-height:100%;
color:#fa3232;
}

.line {
width:280px;
position:fixed;
left:0;
bottom:0;
}

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

.line a:hover {
opacity:0.7;
}


/*QUESTION 1*/
#question1 {
}

#question1 .forms {
display:flex;
justify-content:center;
padding-bottom:20px;
}

#question1 .forms .form {
width:30%;
position:relative;
}

#question1 .forms .form:first-child {
margin-right:20px;
}

#question1 .assist {
transform:translate(-145px,230px);
transition:1s;
}

#question1 .hand_on {
transform:translate(-295px,335px);
transition:1s;
}


/*QUESTION 2*/
#question2 {
}

#question2 .forms {
padding-bottom:35px;
}

#question2 .forms .form {
display:flex;
justify-content:center;
align-items:center;
position:relative;
}

#question2 .forms .form .detail {
margin:0 15px;
}

#question2 .forms .form .year {
font-size:120%;
font-weight:bold;
}

#question2 .assist {
transform:translate(-270px,225px);
transition:1s;
}

#question2 .hand_on {
transform:translate(-290px,350px);
transition:1s;
}

#question2 .warning {
position:absolute;
bottom:-30px;
left:0;
right:0;
margin:auto;
}


/*QUESTION 3*/
#question3 {
}

#question3 .forms {
display:flex;
flex-wrap:wrap;
padding:0 70px 35px;
}

#question3 .forms .form {
width:120px;
margin:0 10px 10px 0;
position:relative;
}

#question3 .forms .form:nth-child(5n) {
margin-right:0;
}

#question3 .forms .form:nth-child(n+11) {
margin-bottom:0;
}

#question3 .assist {
transform:translate(0,0);
transform:translate(-80px,200px);
transition:1s;
}

#question3 .hand_on {
transform:translate(-290px,460px);
transition:1s;
}


/*QUESTION 4*/
#question4 {
}

#question4 .forms {
padding:0 140px 35px 100px;
}

#question4 .forms .form {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
position:relative;
}

#question4 .forms .form:last-child {
margin-bottom:0;
}

#question4 .forms .form .item {
width:80px;
}

#question4 .forms .form .detail {
display:flex;
}

#question4 .forms .form .detail input:first-child {
margin-right:15px;
}

#question4 .assist {
transform:translate(0,0);
transform:translate(-165px,250px);
transition:1s;
}

#question4 .hand_on1 {
transform:translate(-165px,330px);
transition:1s;
}

#question4 .hand_on2 {
transform:translate(-290px,420px);
transition:1s;
}

#question4 .warning {
position:absolute;
bottom:-30px;
left:90px;
right:0;
margin:auto;
}


/*QUESTION 5*/
#question5 {
}

#question5 .forms {
padding:0 110px 35px 90px;
}

#question5 .forms .form {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
position:relative;
}

#question5 .forms .form:last-child {
margin-bottom:0;
}

#question5 .form .item {
width:150px;
}

#question5 .form .detail {
width:500px;
}

#question5 .assist {
transform:translate(0,0);
transform:translate(-280px,290px);
transition:1s;
}

#question5 .hand_on1 {
transform:translate(-160px,370px);
transition:1s;
}

#question5 .hand_on2 {
transform:translate(-315px,460px);
transition:1s;
}

#question5 .warning {
position:absolute;
bottom:-30px;
left:90px;
right:0;
margin:auto;
}



/*CONFIRMATION*/
#confirmation .guidance {
width:300px;
position:absolute;
right:-200px;
top:380px;
z-index:99;
}

#confirmation {
}

#confirmation h2 {

}

#confirmation .number {
font-size:250%;
text-align:center;
color:#e69632;
padding-bottom:15px;
}

#confirmation .form_area {
padding:50px 50px 0;
}

#confirmation div {
font-size:1rem;
line-height:150%;
letter-spacing:0.5px;
}

#confirmation .forms {
padding-bottom:30px;
}

#confirmation .forms .form {
border-bottom:#e1e1e1 1px solid;
padding-bottom:15px;
margin-bottom:15px;
}

#confirmation .forms .form:first-child {
border-top:#e1e1e1 1px solid;
padding-top:15px;
}

#confirmation .forms .form:last-child {
margin-bottom:0;
}

#confirmation .forms .form .item {
font-weight:bold;
}

#confirmation .forms .form .item:before {
content:"Q. ";
}

#confirmation .forms .form .detail {
}


/*THANKS*/
#thanks {
}

#thanks .thanks_area {
padding:50px 50px 0;
text-align:center;
}

#thanks .copy {
padding-bottom:30px;
}

#thanks .attention {
font-size:80%;
color:#ff3264;
padding-bottom:70px;
}

#thanks .btn_home {
width:150px;
margin:auto;
}

#thanks .btn_home a {
background:#323232;
padding:10px 20px;
border-radius:30vw;
color:#fff;
font-size:90%;
text-align:center;
}

#thanks .btn_home a:hover {
opacity:0.7;
}


/*privacy*/
.privacy_titles {
display:flex;
justify-content:center;
align-items:center;
padding-top:10px;
}

.privacy_titles .item_line {
width:50px;
height:1px;
background:#323232;
}

.privacy_titles .privacy_title {
font-size:135%;
font-weight:bold;
padding:0 15px;
}

#privacy {
}

#privacy .frame {
padding:40px 50px;
}

#privacy .privacies {
}

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

#privacy .privacies .privacy:last-child {
border-bottom:none;
padding-bottom:0;
margin-bottom:0;
}

#privacy .privacies .privacy p {
font-size:90%;
}

#privacy .privacies .privacy .begin {

}

#privacy .privacies .privacy .begin:first-child {
padding-bottom:20px;
}

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

#privacy .privacies .privacy .detail {
display:flex;
}



/*FORM*/
input {
font-size:120%;
border:#ccc 3px solid;
}

input[type="text"] {
width:260px;
padding:15px 20px;
border-radius:10px;
}

#question2 input[type="text"] {
width:150px;
padding:15px 20px;
border-radius:10px;
}

#question4 input[type="text"] {
width:220px;
padding:15px 20px;
border-radius:10px;
}

#question4 .name2:disabled {
opacity:0.5;
pointer-events:none;
}

input[type="tel"] {
width:300px;
padding:15px 20px;
border-radius:10px;
}

input[type="email"] {
width:430px;
padding:15px 20px;
border-radius:10px;
}

input[type="email"]:disabled {
opacity:0.5;
pointer-events:none;
}

input[type="radio"] {
display:none;
}

input[type="radio"] + label {
background:#b4bec8;
color:#fff;
padding:18px;
border-radius:14px;
display:block;
cursor:pointer;
font-size:110%;
text-align:center;
}

input[type="radio"]:checked + label {
background:#0087b4;
color:#fff;
}

input[type="checkbox"] {
display:none;
}

input[type="checkbox"] + label {
background:#b4bec8;
color:#fff;
padding:12px 18px;
border-radius:14px;
display:block;
cursor:pointer;
font-size:110%;
text-align:center;
}

input[type="checkbox"]:checked + label {
background:#0087b4;
color:#fff;
}

.btns {
display:flex;
justify-content:center;
align-content:center;
position:relative;
}

.btns .submit_btn {
background:#e69632;
color:#fff;
padding:15px 40px;
border:none;
border-radius:30vw;
font-size:100%;
font-weight:bold;
cursor:pointer;
}

.btns .submit_btn:hover {
opacity:0.7;
}

.btns .submit_btn:disabled {
opacity:0.5;
pointer-events:none;
}

.required {
}

.back {
position:absolute;
left:15px;
bottom:15px;
}

.back .back_btn {
font-size:80%;
border:#b4bec8 1px solid;
color:#b4bec8;
padding:5px 15px;
border-radius:10vw;
cursor:pointer;
}

.back .back_btn:hover {
opacity:0.7;
}

.warning {
position:absolute;
text-align:center;
max-width:100%;
color:#ff3264;
font-size:80%;
}

.warning label {
background:#ff3264;
color:#fff;
padding:7px 10px;
border-radius:6px;
position:relative;
z-index:99;
}

.warning label:before {
content:"";
width:0;
height:0;
border-top:transparent 10px solid;
border-right:transparent 10px solid;
border-bottom:#ff3264 10px solid;
border-left:transparent 10px solid;
position:absolute;
left:0;
right:0;
top:-20px;
margin:auto;
}



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


/*ANIMATION*/
.marker_line {
position:relative;
font-size:110%;
font-weight:bold;
}

.inviewTitleLine {
width:0%;
height:4px;
background:#f5e100;
position:absolute;
bottom:0;
left:0;
transition:0.5s;
}

.TitleLine {
width:100%;
}

.scrollLine{
width:1px;
height:30px;
margin:auto;
overflow:hidden;
position:relative;
display:block;
}

.scrollLine:after,
.scrollLine:before {
display:block;
width:1px;
height:100%;
content:'';
position:absolute;
top:0;
left:0;
}

.scrollLine:before{
-webkit-animation:scroll 3s infinite normal;
animation:scroll 3s infinite normal;
background:#e69632;
}

.scrollLine:after{
background:transparent;
}

.scrollLine.w:before{
background:#fff;
}

@keyframes scroll{
0%{transform:translate3d(0,-100%,0)}
15%{transform:translate3d(0,-98%,0)}
85%{transform:translate3d(0,98%,0)}
100%{transform:translate3d(0,100%,0)}
}

.inviewfadeInLeft {
opacity:0;
transform:translate(10%,0);
transition:0.5s ease;
}

.fadeInLeft {
opacity:1;
transform:translate(0, 0);
}



/*ページ遷移*/
body::after {
content:'';
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#fff;
z-index:9999;
pointer-events:none;
opacity:0;
-webkit-transition:opacity 0.5s ease;
-ms- transition:opacity 0.5s ease;
-moz- transition:opacity 0.5s ease;
transition:opacity 0.5s ease;
}
 
body.fadeout::after {
opacity: 1;
}

.fadeout {
margin:0;
padding:0;
}



/*FOOTER*/
footer {
margin:auto;
text-align:center;
}

footer a:hover {
opacity:0.7;
}

footer .company {
font-size:85%;
}

footer .company a {
font-weight:bold;
color:#323232;
}

footer .privacy {
}

footer .privacy a {
font-size:80%;
color:#323232;
}

footer .copyright {
font-size:80%;
}




}