@charset "utf-8";
/* CSS Document */
a{color:#fff;}
#mainimage{
position:relative;
color:#fff;
width:100%;
height:100vh;
overflow:hidden;
top:0;
z-index:-1;
background-size:cover;
background-position:center center;
display:flex;
justify-content:center;
align-items: center;
text-align:center;
}
#mainimage h1{
font-weight:900;
font-size:330%;
line-height:1.3;
margin-bottom:0.5rem;
}
#mainimage h1 span{
position:relative;
display:inline-block;
margin-right:0.25rem;
}
#mainimage h1 span::after{
position:absolute;
top:-0.8rem;
left:1.5rem;
content: '●';
color:#ff5900;
font-size:25%;
}
#mainimage p{
font-size:130%;
position:absolute;
bottom:1.5em;
}
#mainimage p span{
display:block;
font-weight:900;
font-size:165%;
line-height:1.25;
}
#int{
text-align:center;
margin:3rem 0;
padding:0 1rem;
}
#int h2{
font-size:180%;
font-weight:900;
margin-bottom:1rem;
}
#int p{
line-height:2;
margin-bottom:1rem;
}
.bias{
text-align:center;
background:url(../../img/u32.jpg) repeat-x;
background-size:auto 100% ;
font-family: 'Abel', sans-serif;
font-size:90%;
font-weight:400;
padding:1rem 0;
line-height:1;
-webkit-animation: bg 120s linear infinite;animation: bg 120s linear infinite;
}
.bias2{margin-bottom:2rem;}
@-webkit-keyframes bg {from {background-position: 0  0;}to {background-position: -1600px 0;}}
@keyframes bg {from {background-position: 0 0;}to {background-position: -1600px 0;}}
.step > div p:nth-of-type(2) img{width:100%;height:auto;}
.step > section{
width:80%;
max-width:1000px;
margin:3rem auto;
}
.step h2{
font-size:180%;
font-weight:900;
margin-bottom:1rem;
text-align:center;
}
.step h2+p{text-align:justify;line-height:2;}
#step1_photo{
display:flex;
flex-wrap:wrap;
margin-top:2rem;
}
#step1_photo li{width:50%;border-bottom:1px solid #fff;}
#step1_photo img{width:100%;height:auto;}
#step1_photo li:nth-child(odd){border-right:1px solid #fff;}
#step1_photo2{
display:flex;
flex-wrap:wrap;
margin:2rem 0 0;
}
#step1_photo2 li{width:50%;}
#step1_photo2 li:nth-of-type(1){border-right:1px solid #fff;}
#step1_photo2 img{width:100%;height:auto;}
#step1_photo2 span{
display:block;
margin:0.5rem auto;
text-align:center;
font-size:80%;
font-weight:400;
}
#step1 .bias2+h2+p{text-align:center;}
#process{
margin:3rem auto;
width:90%;
max-width:1000px;
}
#process section{
width:400px;
text-align:center;
margin:0 auto 0;
position:relative;
-webkit-transition:.2s;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s;
}
#process section:nth-of-type(n+2){margin:-200px auto 0;-webkit-transition:.2s;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s;}
#process section:nth-last-of-type(1){margin:-200px auto 3rem;}
.p1{transform:translateX(-70%);-webkit-transition:.2s;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s;}
.p2{transform:translateX(70%);-webkit-transition:.2s;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s;}
#process div{position:relative;}
.number{margin-bottom:0.5rem;}
.number img{
width:250px;
height:auto;
-webkit-transition:.2s;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s;
}
.pr_photo1{
position:absolute;
top:0;
left:0;
z-index:2;
width:400px;
-webkit-transition:.2s;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s;
}
.pr_photo1 img{
width:400px;
height:auto;
-webkit-transition:.2s;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s;
}
.slide5{
width:400px;
heigth:400px;
overflow:hidden;
position:relative;
z-index:1;
-webkit-transition:.2s;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s;
}
.slide5 img{
width:400px;
height:auto;
-webkit-transition:.2s;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s;
}
#process dl{margin-top:1rem;}
#process dt{
font-size:130%;
font-weight:900;
margin-bottom:0.25rem;
}
#process dd{font-size:90%;}
#process p.arrow{position:absolute;z-index:99;}
#process p.arrow img{width:40px;height:auto;}
#process p.arrow1{
position:absolute;
right:-80px;
bottom:80px;
transform: rotate(-45deg);
}
#process p.arrow2{
position:absolute;
left:-80px;
bottom:80px;
transform: rotate(45deg);
}
#works{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
text-align:center;
margin-top:2rem;
}
#works li{
width:31%;
font-weight:400;
font-size:80%;
margin-bottom:1rem;
}
#works li img{
width:100%;
height:auto;
margin-bottom:0.5rem;
}
.point{
margin:2rem auto;
display:flex;
justify-content:center;
}
.point > p{
text-align:right;
width:22%;
margin-right:3%;
font-size:80%;
}
.point > p img{width:80px;height:auto;}
.point > p span{display:inline-block;margin:0 0.5rem 0.25rem 0;}
.point > section{margin-top:0.3rem;width:75%;}
.point dt{
font-weight:900;
font-size:200%;
margin-bottom:1.5rem;
line-height:2;
}
.under_line{position:relative;}
.under_line::after{
position:absolute;
bottom:-0.7rem;
left:0;
content:'';
display:inline-block;
background:#ff5900;
height:7px;
width:0;
margin-bottom:3px;
}
.under_line2::after{width:100%;-webkit-transition:1s;-moz-transition:1s;-ms-transition:1s;-o-transition:1s;transition:1s;}
.under_line::after{content:attr(data-item);}
.point dd{line-height:2;}
.point_p{margin:2rem auto;}
.point_p img{display:inline-block;width:210px;height:auto;}
.point_p img:nth-of-type(1){margin-right:15px;}
.point dd dt{font-size:150%;margin-bottom:0;}
.point dd dd ul{display:flex;flex-wrap:wrap;}
.point dd dd li{margin-right:1rem;}
#sikaku{display:flex;margin-top:1rem;}
#sikaku span{
text-align:center;
width:50%;
background:#ff5900;
color:#fff;
line-height:1.85;
font-weight:900;
padding:1.75rem;
}
#sikaku span:nth-of-type(2){background:url(../../img/u67.jpg);background-size:cover;background-position:center center;}
#step3 h2+p{text-align:center;}
.interview{
display:flex;
justify-content:space-between;
margin:4rem auto;
}
.interview:nth-of-type(2){flex-direction:row-reverse;}
.interview > p{width:45%;}
.interview > div{width:51%;}
.interview > p img{width:100%;height:auto;}
.interview > div p:last-of-type{margin-bottom:2rem;}
.interview > div dt{margin-bottom:1.5rem;}
.interview > div dd{
line-height:2.5;
text-align:justify;
font-size:90%;
}
.interview > div p{line-height:1.7;}
.interview > div p span{font-size:130%;margin-right:1rem;}
.interview > div p small{font-family: 'Abel', sans-serif;font-size:90%;}
.interviw_line{text-align:center;font-family: 'Abel', sans-serif;font-size:80%;color:#aaa;}
#program{
display:flex;
flex-wrap:wrap;
border-bottom:1px solid #777;
line-height:2;
margin-bottom:5rem;
}
#program dt{
width:20%;
padding:2rem 1rem;
border-top:1px solid #777;
}
#program dd{
width:80%;
padding:2rem 1rem;
border-top:1px solid #777;
}
#re_form{margin:4rem auto;}
#re_form dt{
font-size:180%;
text-align:center;
font-weight:900;
margin-bottom:0.5rem;
}
#re_form dd:nth-of-type(1){text-align:center;line-height:1.7;}
#re_form dd:nth-of-type(1) span{
display:block;
margin:1rem auto;
font-size:80%;
font-weight:400;
line-height:2;
}
#re_form dd:nth-of-type(1) a{color:#000;}
#re_form a{border-bottom:1px dotted #777;}
form{text-align:center;}
table{
text-align:left;
border-collapse: collapse;
box-sizing: border-box;
margin-top:2rem;
}
form .red{font-size:70%;}
input[type="submit"]{
padding:0.5rem 2rem;
font-size:100%;
font-weight:900;
margin-top:1rem;
}
input[type="submit"]:hover{cursor:pointer;}
input[type="text"],select,textarea,button{-moz-appearance: none;-webkit-appearance: none;-webkit-box-shadow: none;box-shadow: none;outline: none;border: none;}
input[type="text"],textarea {
background:#f8f8f8;
display: block;
font-size: 16px;
padding: 12px 15px;
transition: 0.8s;
border-radius: 0;
line-height:1.7;
width:100%;
-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;
}
input[type="text"]:focus,
textarea:focus {background: #fef6f2;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);}
textarea[name="content"] {display: inline-block;width: 100%;height: 150px;}
input::placeholder,textarea::placeholder {color: #ccc;}
::-webkit-input-placeholder {color: #ccc;opacity: 1;}
::-moz-placeholder {color: #ccc;opacity: 1;}
:-ms-input-placeholder{color: #ccc;opacity: 1;}
.form-table {width: 100%;}
.form-table th,.form-table td {padding:2rem 1rem;border-top:1px solid #777;}
.form-table th{position: relative;text-align: left;width:20%;vertical-align:middle;}
.form-table td{width:80%;}
input[type="radio"] {display: none;}
label{position: relative;display: inline-block;padding: 3px 3px 3px 30px;cursor: pointer;}
label::before,label::after {position: absolute;content: '';top: 50%;border-radius: 100%;-webkit-transition: all .2s;transition: all .2s;}
label::before {left: 0;width:20px;height:20px;margin-top: -8px;background: #f3f3f3;border: 2px solid #ccc;}
label:hover::before {background: #fff;}
label::after {opacity: 0;left: 5px;width: 10px;height: 10px;margin-top: -3px;background: #333;-webkit-transform: scale(2);transform: scale(2);}
input[type="radio"]:checked + label::before {background: #fff;border: 2px solid #333;}
input[type="radio"]:checked + label::after {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
@media screen and (max-width:1000px) { 
#process section{width:300px;}
#process section:nth-of-type(n+2){margin:-150px auto 0;}
#process section:nth-last-of-type(1){margin:-150px auto 3rem;}
.p1{transform:translateX(-60%);}
.p2{transform:translateX(60%);}
.number img{width:200px;}
.pr_photo1{width:300px;}
.pr_photo1 img{width:300px;}
.slide5{width:300px;heigth:300px;}
.slide5 img{width:300px;}
#process p.arrow img{width:30px;}
#process p.arrow1{right:-30px;bottom:60px;}
#process p.arrow2{left:-30px;bottom:60px;}
.interview > p{width:38%;}
.interview > div{width:58%;}
.interview > div p{line-height:1.5;}
.interview > div p:last-of-type{margin-bottom:1rem;}
.interview > div dt{margin-bottom:1rem;}
.interview > div dd{line-height:2;}
}
@media screen and (max-width:768px) { 
#int{margin:2rem 0;}
#group > div{margin:2rem auto;width:85%;}
.step > section{width:85%;margin:2rem auto;}
#process section{width:250px;}
#process section:nth-of-type(n+2){margin:-120px auto 0;}
#process section:nth-last-of-type(1){margin:-120px auto 3rem;}
.p1{transform:translateX(-50%);}
.p2{transform:translateX(50%);}
.number img{width:170px;}
.pr_photo1{width:250px;}
.pr_photo1 img{width:250px;}
.slide5{width:250px;heigth:250px;}
.slide5 img{width:250px;}
#process p.arrow img{width:25px;}
#process p.arrow1{right:-5px;bottom:80px;}
#process p.arrow2{left:-5px;bottom:80px;}
#works li{width:48%;}
.point dt{font-size:175%;margin-bottom:1rem;}
.under_line::after{height:5px;}
.point > p{width:13%;margin-right:3%;font-size:80%;}
.point > p img{width:50px;}
.point > p span{margin:0 0 0.25rem 0;font-size:80%;}
.point > section{margin-top:0.3rem;width:84%;}
.point_p{margin:1rem auto;}
.point_p img{width:160px;}
.point_p img:nth-of-type(1){margin-right:10px;}
#program dt{width:27%;}
#program dd{width:73%;}
.form-table th{width:27%;}
.form-table td{width:73%;}
}
@media screen and (max-width:480px) {
#mainimage h1{font-size:280%;line-height:1.5;}
#mainimage h1 span::after{top:-0.8rem;left:1rem;font-size:45%;}
#mainimage p{font-size:100%;bottom:6.5em;}
#int{margin:1rem 0;}
#int h2{margin-bottom:0.5rem;font-size:160%;}
#int p{text-align:justify;margin-bottom:1rem;}
#int p br{display:none;}
.step > section{width:90%;margin:1rem auto;}
.step h2{font-size:160%;margin-bottom:0.5rem;}
#step1 h2+p br{display:none;}
#step1_photo{margin-top:1rem;}
#step1_photo .slider{display:none;}
#step1_photo li,
#step1_photo2 li{width:100%;}
#step1_photo2{margin:1rem 0 0;}
#step1_photo2 li:nth-of-type(1){margin-bottom:1rem;}
.bias2{margin-bottom:1rem;}
#step1 .bias2+h2+p{text-align:justify;	}
#process dt{font-size:140%;}
.under_line::after{height:3px;}
#process dd{font-size:100%;}
#process section:nth-of-type(n+2){margin:20px auto 0;}
#process section:nth-last-of-type(1){margin:20px auto 2rem;}
.p1{transform:translateX(0);}
.p2{transform:translateX(0);}
#process p.arrow{position:relative;margin-top:1rem;}
#process p.arrow1{right:0x;bottom:0;transform: rotate(0);}
#process p.arrow2{left:0;bottom:0;transform: rotate(0);}
#works{margin-top:1rem;}
#works li{margin-bottom:0.5rem;}
.point{display:block;}
.point dt{font-size:150%;margin-bottom:1rem;text-align:center;}
.point dd{text-align:justify;}
.point dd br{display:none;}
.point dd dt{font-size:130%;}
.point dd dd{font-size:95%;}
.point > p{width:100%;text-align:center;font-size:120%;}
.point > p img{width:50px;transform: rotate(90deg);margin-top:1rem;margin-bottom:1rem;}
.point > p span{margin:0;}
.point > section{margin-top:0.3rem;width:100%;}
.point_p{width:100%;overflow:hidden;}
.point_p img{width:58%;}
.point_p img:nth-of-type(1){margin-left:-9%;margin-right:0;}
.point_p img:nth-of-type(2){margin-right:-9%;margin-left:0;}
#sikaku{display:block;margin-top:1rem;font-size:120%;}
#sikaku span{display:block;text-align:center;width:100%;background:#ff5900;color:#fff;line-height:1.85;font-weight:900;padding:1.75rem;}
#sikaku span br:nth-of-type(2){display:inline;}
#sikaku span:nth-of-type(2){padding:5rem;}
.interview{display:block;margin:1rem auto;}
.interview > p{width:100%;margin-bottom:1rem;}
.interview > div{width:100%;}
#program dt{width:20%;padding:1rem 0;line-height:1.7;}
#program dd{width:80%;padding:1rem 0;line-height:1.7;}
.form-table th{width:100%;display:block;}
.form-table td{width:100%;display:block;}
.form-table th{padding:1rem 0 0.5rem;}
.form-table td {padding:0 0 1rem;border:none;}
#re_form dd:nth-of-type(1){text-align:justify;}
#re_form dd:nth-of-type(1) br{display:none;}
#re_form dd:nth-of-type(1) br.sp{display:inline;}
}
@media screen and (min-width:1000px) {#step1 .bias2+h2+p br{display:none;}}
/* タブレット縦t */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
#mainimage h1{font-size:400%;line-height:1.5;}
#mainimage h1 span{position:relative;display:inline-block;margin-right:0.25rem;}
#mainimage h1 span::after{top:-1.5rem;left:2rem;font-size:40%;}
#mainimage p{bottom:6em;font-size:170%;}
.pr_photo1 img{width:401px;border-right:1px solid #fff;}
}