@charset "UTF-8";

#page_header{background-image:url("../img/header_back_pc.webp");}

.w90per{width: 90%;margin: 0 auto;}
.a_blue{display: inline-block;}
.mt100{margin-top: 100px;}

/* section_01 */

.white_box{background-color: #ffffff;padding: 10% 5%;margin-top: 5%;background-image: url("../img/sec_01_ttl_back_pc.svg");background-size: contain;background-repeat: no-repeat;background-position: top center; }



/* section_02 */
.section_02{background-color: #f7f8f8;}
.mt-3per{margin-top: -3%;}
.about_work_box{border: solid 1px #0c68ab;background-color: #ffffff;}
.about_left{width: 50%;float: left;}
.about_right{width: 50%;float: right;}
.text_back{text-align: center;padding: 10% 5%;box-sizing: border-box;}
.text_back img.icon{width: 40%;}
.text_back h3{font-size: 1.4em;position: relative;margin-bottom: 1.6em;margin-top: 1em;line-height: 1.2em;}
.text_back h3::before {
  background-color: #0c68ab; /* 線の色 */
  bottom: -10px; /* 線の位置 */
  content: "";
  height: 5px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 50px; /* 線の長さ */
}
.text_back p{text-align: justify;line-height: 1.8em;}
.gradient {
  height: 550px;
  width: 50%;
}

.gradient01 {
  background: linear-gradient(-48deg, #f7f8f8 50%, #ffffff 0);
}



/*
===================================================
 tb タブレット解像度
===================================================
*/
@media screen and (max-width:1000px) {
#page_header{background-image:url("../img/header_back_pc.webp");height: 300px;padding-top:  10%;}
	}
/*
===================================================
 sp スマホ解像度
===================================================
*/
@media screen and (max-width:640px) {
#page_header{background-image:url("../img/header_back_pc.webp");height: 150px;padding-top:  5%;background-position: right;}


/* section_01 */	

.white_box{background-color: #ffffff;padding: 10% 10%;margin-top: 5%;background-image: url("../img/sec_01_ttl_back_sp.svg");background-size: contain;background-repeat: no-repeat;background-position: top center; }
	
.text_back img.icon{width: 30%;}
.about_left{width:100%;float: none;}
.about_right{width:100%;float: none;}
.gradient {
  height: auto;
  width: 100%;
}
}