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

#no_color:before {
	background:none !important;
}


#main {padding-top: 85px;}
#main .inner {padding:8% 3%;}

.concept h2.ttl {background:url(../images/concept/concept_ttl_bg.png) no-repeat 20% bottom;background-size: cover;}
.concept h2.ttl img {width: 35%;max-width: 180px;padding: 14% 5% 8%;}
.concept_in {padding:5% 0;}
.concept_in .inner {z-index:1;position:relative;padding-bottom:0 !important;}
.concept_in .inner h3 {max-width:300px;margin:0 0 20px 0;}
.concept_in .inner h4 {font-size:17px;line-height:1.5;}
.concept_in .inner p {font-size:14px;margin-top:1em;line-height:1.8;}
.concept .inner .linkbtn {display:block;width:50%;margin-bottom:2em;max-width: 160px;}

.concept_in .inner_wrap .box {padding:0 3% 8%;z-index: 1;position: relative;}
.concept_in .inner_wrap {position:relative;border-bottom:1px dotted #aaa;}
.concept_in .inner_wrap:before {content:"";background:#ffebd8;position:absolute;left:0;top:2%;width:60%;height:120px;display:block;}
.concept_in .inner_wrap:nth-child(even):before {background:#f7d9d5;left:auto;right:0;}
.concept_in .inner_wrap:last-child {border-bottom:none;}


.concept .around {background:url(../images/concept/around_bg.jpg) no-repeat center;padding:8% 0;}
.concept .around h3 {max-width:170px;margin:0 auto;}
.concept .around ul {padding:5% 5% 0;text-align:center;}
.concept .around li {color:#fff;font-size:15px;margin:.5em 0;}
.concept .around li:before {content:"●";}
.concept .around .img {padding:5% 0 10%;}
.concept .around .linkbtn {margin:0 auto;}


@media screen and (min-width:568px) {
.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;}
.concept_in .inner_wrap:nth-child(even) .inner {float:left;}
.concept_in .inner_wrap:nth-child(even) .box {float:right;}
.concept_in .inner_wrap {padding: 5% 3%;border:none;}
.concept .around {padding: 0;background-size:cover;}
.concept .around .inner {position:relative;}
.concept .around ul {padding: 0;text-align: left;position: absolute;right: 5%;top: 15%;}
.concept .around .img {padding: 10% 0;}
.concept .around .linkbtn {margin: 0;float: right;}
}

@media screen and (min-width:768px) {
#header {width: 100%;height:80px;background:url(../images/page_header_bg.png) no-repeat center;}
#main {padding-top: 0;}

.concept_in {padding: 3% 0 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) {
#header .logo {width: 220px;padding: 10px 5%;}
.concept_in .inner_wrap .area {max-width:1024px;margin:0 auto;}
.concept_in .inner_wrap {padding: 40px 0;}

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

#main.concept .inner {padding: 0; max-width:inherit;}
#main.concept .around .inner {padding: 50px 3%; max-width:1024px;}
.concept .around li {color: #fff;font-size: 17px;margin: 1em 0;}
.concept .around h3 {max-width: 200px;margin: 0 auto;}
.concept .around .img {padding: 0;}
.concept .around .linkbtn {margin: 2em 0 0;}

}