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

#header h1 {width:50%;position:absolute;left:5%;top:10%;z-index:10;}

.slide {padding-top: 50%;}

.page .inner {padding:5% 0 0;}
.page .inner p {font-size:1.4em;line-height:1.8;}
.page .area h2 {padding:0 5%;max-width:400px;margin:0 auto;}

.concept_box {position:relative;}
.concept_box:before {content:"";background:url(../images/concept/concept_bg01.png) no-repeat 0 0;background-size:cover;width:200px;height:200px;position:absolute;top:0;left:-40px;z-index:0;}
.concept_box:after {content:"";background:url(../images/concept/concept_bg02.png) no-repeat 0 0;background-size:cover;width:180px;height:180px;position:absolute;bottom:0;right:-20px;z-index:0;}
.concept_box .photo {position:relative;z-index:1;}
.concept_box_in {padding:0 5% 5%;}
.concept_box_in .left {width:75%;float:left;}
.concept_box_in .left img {max-width:300px;width:90%;margin:5% auto;}
.concept_box_in .right {width:20%;float:right;max-width:80px;}
.corporate {padding-top: 10%;}
.corporate h3 {border-bottom:1px solid #4f8b00;}
.corporate h3 span {background:#4f8b00;width:60%;max-width:250px;padding:10px 5%;display:block;}
.corporate p {padding:5%;}
.corporate .box:nth-child(even) h3 span {float:right;}
.corporate h3:after {content: "";display: block;clear: both;}
.network {background:#ebebeb;padding:10% 0;}
.network .inner {padding:10% 5% 0;}


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

@media screen and (min-width:768px) {
#header h1 {width: 30%;max-width: 400px;}
.page .area:first-child {padding-top:2%;}
.page .inner p {font-size: 1.5em;line-height: 2;}

.slide {padding-top: 22%;}

.concept_box:before {width:300px;height:300px;}
.concept_box:after {width:280px;height:280px;}
.concept_box_in .left {width:85%;}
.concept_box_in .left img {max-width: 450px;width: 60%;float: right;margin: 3% 0 8%;}
.concept_box_in .left p {width:80%;}

.corporate h3 span {padding-left:10%;}
.corporate .box:nth-child(even) h3 span {padding-right:10%;padding-left:5%;}
.corporate p {padding:3% 5% 3% 10%;}
.corporate .box:nth-child(even) p {text-align:right;padding:3% 10% 3% 5%;}
}

@media screen and (min-width:900px) {
.concept_box:before {width:400px;height:400px;}
.concept_box:after {width:350px;height:350px;}
}

@media screen and (min-width:1025px) {
.page .area:first-child {padding-top: 0;}
.page .inner {padding: 30px 0 80px;max-width: 1024px;margin: 0 auto;}

.concept_box_in {padding: 0 30px 60px;}
.network {padding: 80px 0 20px;}

}