@charset "utf-8";

/*===========================
頻出
===========================*/
html{
	font-size:62.5%;
}
body{
	font-family: 'Noto Sans JP', sans-serif!important;
}
.yellow{
	color:#edd700;
}

.mt40{
	margin-top: 40px;
}



.main_logo a,
.footer_logo a{
	transition:.5s all;
}

.main_logo a:hover,
.footer_logo a:hover{
	opacity:.7;
}
.pc_none{
	display: none;
}
.sp_block{
	display:inline-block;
}

.pc-display{
display:block!important;	
}

.pc-display{
display:inline!important;	
}


.sp-display{
display:none!important;
}


@media screen and (max-width: 767px) {
.sp_none{
		display: none!important;
}
.pc_none{
	display: block;
}
.sp_block{
	display:block;
}
}


/*loading animation*/
body {
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}



/*===========================
.super-top
===========================*/
.super-top{
font-family: source-han-sans-japanese, sans-serif;
font-weight: 700;
font-style: normal;
background:#ffd500;
color:#000;
padding:4px 0 4px 0;
font-size:25px;

}

.super-top .inner{
width:1180px;
text-align: center;
margin: 0 auto;
padding:10px 0 10px 0;
}

/*===========================
.sample
===========================*/
section.sample{
width:960px;
margin:30px auto 30px;

}

section.sample img{
width:100%;
height:auto;
}

/*===========================
.apply-btn
===========================*/
section.apply-btn{
width:700px;
margin:60px auto 30px;

}

section.apply-btn img{
width:100%;
height:auto;
}

/*===========================
.work-volume-slider
===========================*/

.work-volume-slider-wrapper{
	
}

.work-volume-slider{
width:100%;	
}

.work-volume-slider li{
list-style-type:none;
}

ul.work-volume-img li{
list-style-type:none;
}

.work-volume-img{
width:100%;
height: auto;
}




/*===========================
.work-volume-slider
===========================*/

.work-volume-slider-wrapper{
	
}

.work-volume-slider2{
width:100%;	
}

.work-volume-slider2 li{
list-style-type:none;
}

ul.work-volume-img2 li{
list-style-type:none;
}

.work-volume-img{
width:100%;
height: auto;
}





/*===========================
.main-img-wrapper
===========================*/
#main-img-wrapper{
width:100%;
height: auto;
background:#ffd500 url(../images/main-img-bg.png) no-repeat left center;
background-size:590px 320px;
padding:30px 0 20px 0;
}


h1.main-img{
width:1050px;
margin:0 auto;
}

h1.main-img img{
width:100%;
height: auto;
}



/*===========================
h2,h3
===========================*/
h2,h3{
font-family: source-han-sans-japanese, sans-serif;
font-weight: 700;
font-style: normal;
}

h2 span.furigana{
font-size:20px;
text-align:left;
letter-spacing:-2px;
}

.caption{
font-family: futura-pt, sans-serif;
font-weight: 500;
font-style: normal;
font-size:17px;
margin:0 0 0 0;
padding:0 0px 5px 0px;
}

.caption-border {
width:100px;
margin:0 auto;
text-align:center;
background-color: #000; /* 線色 */
border-radius: 5px; /* 線幅の半分 */
content: "";
display: block;
height: 3px; /* 線幅 */
}

/*===========================
.title
===========================*/

.title{
background:#ffd500;
padding:30px 0 30px 0;
text-align:center;
}



/*===========================
#icon-now
===========================*/
#icon-now{
width:100%;
background:#ffd500;
padding:30px 0 30px 0;
}

#icon-now .inner img{
display:block;
position:absolute;
width:230px;
height:auto;
right:0;
top:-120px;
}

#icon-now .inner{
width:1000px;
margin:0 auto;
text-align:center;
position:relative;
}

#icon-now .inner .caption{
font-size:17px;
margin:0 0 0 0;
padding:0 0px 5px 0px;
}

#icon-now .inner .caption-border {
	width:100px;
	margin:0 auto;
	text-align:center;
    background-color: #000; /* 線色 */
    border-radius: 5px; /* 線幅の半分 */
    content: "";
    display: block;
    height: 3px; /* 線幅 */
}


#icon-now .inner h3{
font-size:25px;
margin:10px 0 20px 0;
}

#icon-now .inner h2{
font-size:40px;
margin:0 0 0 0;
}



/*===========================
#what
===========================*/
section#what .inner{
width:1100px;
margin:0 auto;
padding:40px 0 0 0;
}

section#what .inner:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

section#what img.what-img{
width:440px;
height: auto;
display: block;
margin:30px auto 20px;
float:left;
}

section#what p{
width:600px;
float:left;
margin:0 auto;
margin:0 0 0 60px;
padding:180px 0 10px 0px;
line-height:2.0;
font-size:16px;	
font-family: source-han-sans-japanese, sans-serif;
font-weight: 500;
font-style: normal;
color:#000;
}



/*===========================
#suitable
===========================*/


#suitable .title h2{
font-size:42px;
margin:20px 0 0 0;
line-height:1.35;
}


#suitable .inner{
width:1100px;
margin:0 auto;
padding:40px 0 0 0;
}


#suitable ul{
margin:0;
padding:0;
}

#suitable ul.target:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

#suitable ul.target li{
width:535px;
list-style-type:none;
background:url(../images/icon-target.png) no-repeat 20px 25px;
background-size:35px 35px;
font-family: source-han-sans-japanese, sans-serif;
font-weight: 500;
font-style: normal;
font-size:23px;
line-height:1.35;
padding:27px 20px 27px 60px;
margin:30px 30px 0 0;
float:left;
border:solid 2px #000;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
	 -o-box-sizing: border-box;
	-ms-box-sizing: border-box;
		box-sizing: border-box;
box-shadow:5px 5px 0px 0px #ffd500;
}

#suitable ul.target li:nth-child(2n){
margin:30px 0px 0 0;
}

#suitable ul.target li:nth-child(5){
width:1100px;
}

#suitable .inner img{
width:850px;
height:auto;
display:block;
margin:30px auto 0;
line-height:0;
}

/*===========================
#reason
===========================*/
#reason .title h3{
font-size:25px;
margin:10px 0 0 0;
line-height:1.35;
}



#reason .title h2{
font-size:42px;
margin:20px 0 0 0;
line-height:1.35;
}


#reason .inner{
width:1100px;
margin:0 auto;
padding:0px 0 0 0;
}


#reason ul.strong{
margin:0;
padding:0;
}


.strong:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}


#reason ul.strong li{
width:535px;
border:solid 2px #ffd200;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
	 -o-box-sizing: border-box;
	-ms-box-sizing: border-box;
		box-sizing: border-box;
list-style-type:none;
padding:20px 20px 20px 20px;
margin:30px 30px 0 0;
float:left;
min-height:650px;
}

#reason ul.strong li:nth-child(2n){
margin:30px 0px 0 0;
}


#reason ul.strong li img{
display:block;
width:98%;
height:auto;
margin:20px auto 30px;
}

#reason ul.strong li .number{
font-size:27px;
margin:0 0 0 0;
padding:10px 0px 5px 0px;
font-family: source-han-sans-japanese, sans-serif;
font-weight: 700;
font-style: normal;
text-align:center;

}

#reason ul.strong li .number-border {
width:100px;
margin:0 auto;
text-align:center;
background-color: #ffd200; /* 線色 */
border-radius: 5px; /* 線幅の半分 */
content: "";
display: block;
height: 8px; /* 線幅 */
}


#reason ul.strong li h4{
font-size:28px;
margin:0 0 0 0;
padding:15px 0px 15px 0px;
font-family: source-han-sans-japanese, sans-serif;
font-weight: 700;
font-style: normal;
text-align:center;
}



#reason ul.strong li p.sentence{
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 700;
font-style: normal;
font-size:16px;
line-height:1.8;
}


#reason ul.strong li p.explain{
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 700;
font-style: normal;
font-size:11px;
line-height:1.3;
}




/*===========================
#backup
===========================*/

#backup{
margin:100px auto 0;
}

#backup .title h3{
font-size:25px;
margin:10px 0 0 0;
line-height:1.35;
}



#backup .title h2{
font-size:42px;
margin:20px 0 0 0;
line-height:1.35;
}


#backup .inner{
width:1100px;
margin:0 auto;
padding:60px 0 0 0;
}

#backup .inner img{
display:block;
width:98%;
height:auto;
margin:0 auto;
}

#backup .inner .sentence{
width:800px;
margin:0px auto 0;
padding:30px 0 0 0;
}

#backup .inner .sentence p{
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 700;
font-style: normal;
font-size:20px;
padding:10px 0 10px 0;
line-height:1.8;
}


#backup　.inner img{
width:500px;
height:auto;
display: block;
float:right;
}




/*===========================
#works
===========================*/

#works{
margin:60px auto 0;
}

#works .title h3{
font-size:25px;
margin:10px 0 0 0;
line-height:1.35;
}

#works .title h2{
font-size:42px;
margin:20px 0 0 0;
line-height:1.35;
}


.works-slider-wrapper{
width:1100px;
margin:60px auto 0;
}


.works-slider li{
margin:0 20px 0 20px;	
}

.works-slider li img{
width:100%;
height:auto;
display:block;
}

.works-slider li p.name{
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 700;
font-style: normal;
padding:5px 0 5px 0;
font-size:20px;
color:#000;
}




.works-slider-wrapper .slick-next {
right: -20px!important;
z-index: 99;
top:150px!important;	
}

.works-slider-wrapper .slick-prev {
left: -20px!important;
z-index: 100;
top:150px!important;	
}

.works-slider-wrapper .slick-prev,
.works-slider-wrapper .slick-next{
width:60px!important;
height: 60px!important;
border:solid 4px #ffd500!important;
border-radius:60px!important;
opacity: 0.8;
color:#ffd500!important;
font-size: 30px!important;
font-weight:bold!important;
line-height: 62px!important;    
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: transparent;
text-align: center;
text-decoration:none;	
}

.works-slider-wrapper .slick-prev a,
.works-slider-wrapper .slick-next a{
display: block;
width:60px;
height: 60px;
text-decoration:none;	
}

.works-slider-wrapper .slick-prev:before,
.works-slider-wrapper .slick-next:before{
display:none!important;
}



.works-slider-wrapper .slick-dots li{
 width: 20px;
 height: 20px;
margin:0 5px 0 5px;	
}

.works-slider-wrapper .slick-dots li button:before{
 font-size: 20px;
 line-height: 20px;
 width: 0px;
 height: 20px; 
}

.works-slider-wrapper .slick-dots li button{
width:20px;
height:20px;
}
.works-slider-wrapper .slick-dots li.slick-active button:before{
 opacity: .75;
 color:#ffd500;
}

#works .inner {
width:1100px;
margin:30px auto 0;
}


#works .inner p.sentence{
font-family: source-han-sans-japanese, sans-serif;
font-weight: 400;
font-style: normal;
font-size:16px;
line-height:1.75;
padding:15px 0 15px 0;
}



/*===========================
#support
===========================*/

#support{
margin:100px auto 0;
}

#support .title h3{
font-size:25px;
margin:10px 0 0 0;
line-height:1.35;
}



#support .title h2{
font-size:42px;
margin:20px 0 0 0;
line-height:1.35;
}


#support .inner{
width:1100px;
margin:0 auto;
padding:60px 0 0 0;
}

#support .inner:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

#support .inner .sentence{
width:550px;
float:left;
margin:0 40px 0 0;
padding:100px 0 0 0;
}

#support .inner .sentence p{
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 700;
font-style: normal;
font-size:20px;
padding:10px 0 10px 0;
line-height:1.8;
}


#support .inner img{
width:500px;
height:auto;
display: block;
float:right;
}




/*===========================
#for-future
===========================*/

#for-future{
margin:60px auto 0;
}

#for-future .title h2{
font-size:42px;
margin:20px 0 0 0;
line-height:1.35;
}

.future-slider-wrapper{
margin:80px auto 0;
width:100%;
}


.future-slider{

}

.future-slider li{
margin:0 0px 0 0px;
padding:0 10px 0 10px;

}


.future-slider li img{
width:100%;
height:auto;
display:block;
}



#for-future .inner .because{
width:700px;
margin:80px auto 0;
}



#for-future .inner .because:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

#for-future .inner .because img{
display: block;
width:220px;
height: auto;
float:left;
}



#for-future .inner .because p{
width:450px;
height: auto;
float:left;
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 700;
font-style: normal;
font-size:42px;
line-height:1.7;
padding:0px 0 0 0;
text-align:center;
}



/*===========================
#offer
===========================*/

#offer{
margin:60px auto 0;
}

#offer .title h2{
font-size:42px;
margin:20px 0 0 0;
line-height:1.35;
}

#offer .inner{
width:800px;
margin:80px auto 0;
}

#offer .inner p.sentence{
line-height:2.0;
font-size:16px;	
font-family: source-han-sans-japanese, sans-serif;
font-weight: 500;
font-style: normal;
color:#000;
}


#offer .message{
background:#ffd500;
padding:30px 0 30px 0;
text-align:center;
margin:70px 0 0px 0;
}





#offer .message h3{
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 700;
font-style: normal;
font-size:24px;
line-height:1.8;
}

/*===========================
#mail_form
===========================*/

#form-wrapper{

padding:30px 0 60px 0;
}

form#mail_form{
font-size:18px;
font-family: source-han-sans-japanese, sans-serif;
font-weight: 500;
font-style: normal;
background:none;
}

form#mail_form dl dt span{
color:#ffd500;
}
form#mail_form input[type="button"]{
width:90%;
margin:0 auto;
padding: 25px 10px;
font-size:28px;
}

form#mail_form input#form_submit_button{
margin-left:0;
margin:0 auto;
}

form#mail_form dl dt{
border-top:solid 2px #ffd500;
font-family: source-han-sans-japanese, sans-serif;
font-weight: 700;
font-style: normal;
padding:20px 0;
}

form#mail_form dl dd{
border-top:solid 2px #000;
padding: 20px 0 20px 5%
}




/*===========================
#for-future
===========================*/

footer{
margin:60px auto 0;
background:#ffd500;
padding:5px 2%;
color:#000;
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 700;
font-style: normal;
font-size:16px;
line-height:1.8;
text-align:center;
}


/*===========================
ボタン：公式ホームページへ
===========================*/

.home-button{
width:700px;
margin:30px auto 100px;	
}

.home-button a{
display: block;
width:100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;	
text-align: center;
color:#fff;
font-family: source-han-sans-cjk-ja, sans-serif;
font-weight: 700;
font-style: normal;
padding:15px 2% 22px;	
background: linear-gradient(to bottom, #8fc800 0%,#8fc800 100%);
text-decoration:none;
box-shadow:0px 0px 0px 2px #ffffff inset;
font-size:23px;
line-height:1.6;
text-shadow:0px 0px 3px #3e8c29;	
}

.home-button a:before{
    content: "\226B";
    font-size: 0.9em;
}