@charset "UTF-8";

a {
  text-decoration: none;
}

/* --------------------------------
 * header
 * -------------------------------- */
.header{
  padding: 200px 0 0;
}

.header_logo {
	margin: 50px 10% 0;
}
.header_logo img{
	width: 100px;
}

/* --------------------------------
 * nav
 * -------------------------------- */
.navTel{
	margin-top: 12px;
}
.icon{
	top:-3px;
}
/*
#nav_toggle{
	top: -27px;
}
*/
/* --------------------------------
 * TOP施工事例
 * -------------------------------- */
.performance h1{
	margin: 0 0 80px;
}
.performanceBox h2{
	font-size: 2.3rem;
}

.top_box_s{
	display: flex;
	flex-wrap: wrap; /* 折返し指定 */
	justify-content: center;
	margin: 0 10%;
	padding: 0 5px 0;
}
.top_box_s h3{
	margin: 0 auto;
	font-size: 3rem;
}
.top_box_3{
	width: 20%;
	padding: 0 10px 0;
}

.top_box_3 a{
	font-size: 2rem;
	color: #000;
	font-weight: bold;
}
.top_box_3 img{
	width: 100%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/*ホバー*/ 
.c-bnr.radius {
  border-radius: 50% 50% 0 0 / 50% 50% 0 0;
  transition-duration: .5s;
  opacity: 1; /* デフォルトの不透明度 */
}
.c-bnr.radius:hover {
  border-radius:0 0 50% 50%  /  0 0 50% 50%;
  box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);
  opacity: 0.5; /* ホバー時の半透明度 */
}

/* --------------------------------
 * アフターケアー
 * -------------------------------- */

.aftercare{
   margin: 5%;
   padding: 80px 5% 0;
   border: 3px solid #000;
   box-shadow: 10px 10px 0 rgba(0, 100, 178, 1);
   border-radius: 10px;
}
.aftercare h2{
	box-shadow: 0 10px 0 rgba(0, 100, 178, 1);
}
.aftercare h3{
   font-size: 3rem;
	margin: 0;
}
.aftercare p{
   font-size: 2rem;
	margin: 0 0 50px;
	box-shadow: 0 10px 0 rgba(0, 100, 178, 1);
}
.aftercare img{
	width: 50px;
	margin: 0 auto;
}
/*#3b82ac*/

/* --------------------------------
 * 実績（performance）
 * -------------------------------- */
#performance{
	padding: 80px 0;
	width: 100%;
	background: #fff;
	box-shadow: 0 10px 0 rgba(0, 100, 178, 1);
}


.performance_text{
	margin: 0;
	text-align: center;
	letter-spacing:0.5rem;
	font-size: 3rem;
	font-weight:500;
}


.performance_text span{
	font-weight: 100;
}



/* --------------------------------
 * content
 * -------------------------------- */

.content_box{
	margin: 100px 0;
}

h2{
	margin: 0 0 50px;
	text-align: center;
	letter-spacing:0.3rem;
	font-size: 3rem;
	font-weight:bold;
	font-family:"Yu Mincho", "Hiragino Mincho ProN", "serif";
}

.box{
	width: 90%;
	display: flex;
	margin: 0 auto;
	box-shadow: 10px 10px 0 rgba(0, 100, 178, 1);
	/*box-shadow: 10px 10px 0 rgba(224, 255, 165, 1);*/
	background-color: #fff;
	border:1px solid #000000;
}

.flex_b{
	position: relative;
	margin: 0 auto;
	padding: 20px;
	width: 50%;
	letter-spacing:0.3rem;
	font-size: 1.8rem;
	font-weight:100;
}

.flex_b h2{
box-shadow: 0 10px 0 rgba(0, 100, 178, 1);
}

.flex_box{
	margin: 20px 0;
	width: 100%;
	display: flex;
	border-bottom: 1px #CFCECE solid;
	text-align: left;
}

.flex_m{
	margin: 0 0 20px;
}

.flex_box_l{
	width: 35%;
	font-weight: bold;
}

.flex_box_2{
	width: 65%;
}

.flex_box_3{
	display: flex;
	width: 40%;
	padding: 20px;
}

.flex_box_3 img{
	width: 100%;
	margin: 0 0 10% 10%;
}

/*背景斜め*/

.diagonal {
  position: relative;
  overflow: hidden;
}

.diagonal:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 45%;
  margin: 0 -10% 0;
  background-color: #6fbaf5;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
  z-index: 0;
}
/*背景斜め*/

/*画像丸くする
.flex_box_img img{
  border-radius: 5px;
}
.flex_box_img_2 img{
  border-radius: 5px;
}
.flex_box_img_3 img{
  border-radius: 5px;
}
.flex_box_img_4 img{
  border-radius: 5px;
}
*/
/*企業様向け*/
.business{
	margin-bottom: 80px;
	padding: 80px 5%;
	width: 100%;
	color: #fff;
	background: #0064b2;
}

.business_text{
	margin: 0;
	text-align: center;
	letter-spacing:0.5rem;
	font-size: 3rem;
	font-weight:500;
}

.business_text p{
	font-size: 2rem;
}
.business p{
	font-size: 2rem;
}

/* --------------------------------
 * footer
 * -------------------------------- */
.footer a{
	color: #000;
}


/* --------------------------------
 * メディアクエリー
 * -------------------------------- */
@media screen and (max-width: 768px) {
	
	/* --------------------------------
 * header_sub
 * -------------------------------- */
main{
		margin-top: 30px;
	}
	
/*nav*/
.drawer-navbar--fixed{
	position:fixed
	}
.navTel{
	font-size: 2rem;
	}
.navTel span{
	font-size: 1.7rem;
	}
/*TOPのｈ1*/
.performance h1{
	margin: 0 0 50px;
}
/*ページ内リンク飛ばし先の位置を直す方法*/
.anchor{
  padding-top:70px;
  margin-top:-70px;
}
	
.header_sub_h1 img{
	width: 130px;
}

.rainbow{
		font-size: 1.5rem;
	}
	
.top_slider_man_button{
	bottom: 0;
}
	
/* --------------------------------
 * アフターケアー
 * -------------------------------- */
.aftercare{
   margin: 5%;
   padding: 80px 5% 0;
   border: 3px solid #000000;
}
.aftercare h2{
	font-size: 2.2rem;
	font-weight: bold;
}
.aftercare h3{
   font-size: 2rem;
   font-weight: bold;
}
.aftercare p{
   font-size: 1.8rem;
   line-height: 2.4rem;
   font-weight: bold;
}	
/* 施工事例TOP */
#performance{
	padding: 80px 0 80px;
}
.performance_text{
	margin: 0;
}
.top_box_s{
		margin: 0 ;
	}
.top_box_3{
	width: 50%;
	padding: 0 10px 0;
}
.top_box_3 a{
	font-size: 1.5rem;
}	
.margin90{
	margin-top: 90px;
}

/* footer*/

	.diagonal:before{
		width: 200%;
		height: 30%;
		margin: 0 -40% 0;
	}

/* --------------------------------
 * content
 * -------------------------------- */
.content{
	margin: 0;
}

.content_box{
	margin: 80px 0;
}

.box{
	display: block;
}	
	
.flex_b{
	padding: 20px;
	width: 100%;
	letter-spacing:0.3rem;
	font-size: 1.8rem;
}

.flex_box_l{
	width: 100%;
}

.flex_box_2{
	width: 100%;
	line-height: 2rem;
}

.flex_box_3{
	width: 100%;
}

/* flex解除 */

.flex_box{
	display: block;
}
/*footer*/


/*メディアクエリーのケツ*/	
}