@charset "UTF-8";
/*================
service.css
================*/

.icon{}
.icon span{display: block; position: absolute; top: -2px; left: -2px; transform-origin: center;}
.icon span img{}

.all_cap{ background: none; color: #333; position: relative; text-align: right;}

@media screen and (max-width: 767px){
    .icon{text-align: center;}
    .icon span{left: 0; right: 3px; top: 7px;}
}

/* mainvisual ================*/
#mainvisual{position: relative;}
#mainvisual .page_title{font-family: var(--font_serif); color: #3a4b7f;margin-bottom:0;}
#mainvisual .mainvisual_inner {background-image: url("../../img/pages/design/bg-01.jpg"); background-repeat: no-repeat; background-position: center center;
	background-size: cover; padding-bottom: 100px;}
#mainvisual h2 {font-family: var(--font_serif); color: #3a4b7f; font-size: 4.2rem; padding-top: 50px; margin-bottom: 30px;}
#mainvisual p{margin-bottom: 50px;}


@media screen and (max-width: 767px){
    #mainvisual h2{font-size: 30px; letter-spacing: 0; padding: 5px 0;}
}
@media screen and (max-width: 768px){
	#mainvisual .mainvisual_inner {background-image: url("../../img/pages/design/bg-01_sp.jpg"); background-repeat: no-repeat; background-position: center center;
	background-size: cover; padding-bottom: 100px;}
	
    #mainvisual h2{font-size: 25px;}
    p.sub-text-style {font-size: 16px;}
}
@media screen and (max-width: 640px){
    #mainvisual .mainvisual_inner{padding-bottom: 30px;}
    #mainvisual h2{font-size: 2.1rem; margin-bottom: 10px;}
    #mainvisual p{font-size: 1.4rem; text-align: left; margin-bottom: 20px;}
}


/* design_space ================*/
#design_space {position: relative;}
#design_space .design_space_inner {background-image: url("../../img/pages/design/bg-02.jpg"); background-repeat: no-repeat; background-position: center center;
	background-size: cover; padding-bottom: 100px;}

#design_space h2 {text-align: center; font-size: 2.8rem; letter-spacing: 1px; color: #006748; font-family: var(--font_serif);
    padding-top: 100px; margin-bottom: 30px;}
#design_space p {padding-top: 30px}

@media screen and (max-width: 640px){
    #design_space .design_space_inner{padding-bottom: 30px;}
    #design_space h2{font-size: 2.1rem; padding-top: 40px;}
    #design_space p{font-size: 1.4rem;}
}

/* design_facility ================*/
#design_facility {position: relative; padding: 100px 0;}
#design_facility .inner {display: flex; flex-flow: wrap; justify-content: space-between;}
#design_facility h3 {font-family: var(--font_serif); color: #006a4a; font-size: 2.5rem; padding: 15px 0;}
#design_facility .design_facility_box {width: calc(100% / 2 - 30px); margin-bottom: 30px;}
#design_facility .design_facility_box p span.bg {display: inline-block; background: #def1f3; padding: 5px; margin: 5px 0;}
#design_facility .design_facility_box p span.green {color: #006a4a;}

@media screen and (max-width: 640px){
    #design_facility{padding: 40px 0;}
    #design_facility .design_facility_box{width: 100%;}
}