@charset "UTF-8";
/* CSS Document */

#main {padding-top: 0;}
#main .inner {padding:2% 3%;}



.concept_in {padding:5% 2%;}
.concept_in .inner {z-index:1;position:relative;padding-bottom:0 !important;}
.concept_in .inner h4 {font-size:18px; font-weight:bold; color:#ffb800;line-height:1.5;margin:2% 0;}
.concept_in .inner ol {font-size:14px;margin-top:1em;line-height:1.2;padding-left: 1em;  text-indent: -1em; }
.concept .inner .linkbtn {display:block;width:50%;margin-bottom:2em;max-width: 160px;}
.area .box img {padding:10px 0;}

.concept_in .inner_wrap .area {max-width:1024px;margin:0 2%;}

@media screen and (min-width:568px) {
.concept_in .inner h4 {margin:1% 0;}
.concept h2.ttl {padding-bottom:5%}
.concept_in .inner_wrap .inner {width:56%;float:right;padding:0 !important;}
.concept_in .inner_wrap .box {padding:0;width:40%;float:left;}
.area .box img {padding:0;}
}

@media screen and (min-width:768px) {

.concept_in .inner h4 {font-size:20px;margin:0;}

.concept_in {padding: 3% 2% 0;}
.concept h2.ttl img {    padding: 15% 5% 6%;}
.concept_in .inner_wrap:before {height: 150px;}

}

@media screen and (min-width:1024px) {
.concept_in .inner h3 {max-width: 340px;}
.concept h2.ttl {background-position:center bottom;background-size: 100%;height: 250px;}
.concept h2.ttl span {max-width: 1034px;margin: 0 auto !important;display: block;}
.concept h2.ttl img {padding: 160px 5% 0;max-width: 220px;}

}

@media screen and (min-width:1025px) {

.concept_in .inner_wrap .area {max-width:1024px;margin:0 auto;}
.concept_in .inner_wrap {padding: 20px 0;}

.concept h2.ttl img {padding: 180px 0 0;max-width: inherit;width:22%;}

#main.concept .inner {padding: 0; max-width:inherit;}

}