@charset "UTF-8";

html{
	font-size:62.5%;
	scroll-behavior: smooth;
	}

*,*::before, *::after{
	box-sizing:border-box;
	}


body{
	width: 100%;
	font-weight: 100;
	font-style: normal;
	}

ul {
  list-style: none;
	padding: 0;
}

i{  
font-family:"FontAwesome";
font-style:normal; 
} 

a {
text-decoration: none;
display:block;
}

.displayNone{
	display: none;
}

.margin23{
	margin: 0 23%;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}


/*ページ内リンク飛ばし先の位置を直す方法*/
.anchor{
  padding-top:90px;
  margin-top:-90px;
}

/*日本語*/
.font{
	font-weight: 100;
}



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

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

.navTel{
	margin: 13px 0 0;
}
.icon{
	top:-3px;
}
/*
#nav_toggle{
	top:-27px;
}
*/

/* --------------------------------
 * TOP施工事例
 * -------------------------------- */
.performanceBox h2{
	font-size: 2.3rem;
}

.top_box_s{
	display: flex;
	justify-content: center;
	flex-wrap: wrap; /* 折返し指定 */
	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; /* ホバー時の半透明度 */
}



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

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

.swiper-container_2{
	width: 80%;
	height: 300px;
	margin: 0 auto;
	box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.1);
}

.performance_text span{
	font-weight: 100;
}


/*-------------------------------------------
矢印
-------------------------------------------*/
.arrows {
  width: 60px;
  height: 120px;
  position: relative;
  right: 3%;
  top: 450px;
  transform: rotate(-90deg);
  z-index: 10;
}

.arrows path {
  stroke:#4e4e4e;
  fill: transparent;
  stroke-width: 5px;  
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
  animation-delay:-1s;
  -webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
  animation-delay:-0.5s;
  -webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}


/* --------------------------------
 * content
 * -------------------------------- */
.content{
	padding: 50px 0;
}

.content_box{
	margin: 100px 0;
}

h2{
	margin: 0 50px;
	padding: 70px 0 30px;
	text-align: center;
	letter-spacing:0.3rem;
	font-size: 3rem;
	font-weight:bold;
}

.box{
	width: 80%;
	margin: 0 auto;
	box-shadow: 10px 10px 0 rgba(0, 100, 178, 1);
	background: #fff;
	border: 1px solid #000;
}
.box_2{
	width: 80%;
	margin: 0 auto;
	box-shadow: 10px 10px 0 rgba(0, 100, 178, 1);
	background: #fff;
	border: 1px solid #000;
}

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

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

.flex_box_l{
	width: 35%;
}

.flex_box_2{
	width: 65%;
}

.flex_box_3{
	width: 55%;
	padding: 20px;
	display: flex;
	z-index: 1;
}

.flex_box_3 img{
	width: 100%;
	border: 1px solid #000;
}


.flex_box_4{
	width: 45%;
	padding: 20px;
	display: flex;
	z-index: 1;
}

.flex_box_4 img{
	width: 95%;
	border: 1px solid #000;
}

.flex_box_s{
	display: flex;
	z-index: 1;
}
.flex_box_s h3{
	margin: 0 auto;
	font-size: 3rem;
}
.top_slider_man{
	width: 100%;
}

 /* 横アイコンアフター有り */
.yokoicn{
	margin: 0 auto;
	width: 40px;
	position: relative;
	left: 22%;
	bottom: 50px;
	z-index: 1;
}
.yokoicn img{
	width:100% ;
}

.yokoicn{
  animation: 2.5s yokoicn linear infinite;
}
@keyframes yokoicn{
    0% {transform: translateX(50px);}
	50% {transform: translateX(-40px);}
  100% {transform: translateX(50px);}
}
 /* 横アイコンアフターなし */
.yokoicnB{
	margin: 0 auto;
	width: 40px;
	position: relative;
	bottom: 50px;
	z-index: 1;
}
.yokoicnB img{
	width:100% ;
}

.yokoicnB{
  animation: 2.5s yokoicnB linear infinite;
}
@keyframes yokoicnB{
    0% {transform: translateX(50px);}
	50% {transform: translateX(-40px);}
  100% {transform: translateX(50px);}
}
/* --------------------------------
 * スライダー写真複数
 * -------------------------------- */
.swiper-wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
  
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 4rem;
}

.swiper-h{
	overflow: hidden;
}

/* --------------------------------
 * TOPのｈ2
 * -------------------------------- */
.performanceBoxH2{
	padding: 0 0 30px;
}

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

/* --------------------------------
 * メディアクエリー820(アイパッドエアー)
 * -------------------------------- */
@media screen and (max-width: 820px) {
.arrows {
  left: 0;
}
}
/* --------------------------------
 * メディアクエリー
 * -------------------------------- */
@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.5rem;
	}
/*ページ内リンク飛ばし先の位置を直す方法*/
.anchor{
  padding-top:70px;
  margin-top:-70px;
}
	
.header_sub_h1 img{
	width: 130px;
}

.rainbow{
		font-size: 1.5rem;
	}
	
.top_slider_man_button{
	bottom: 0;
}

/* 施工事例TOP */
#performance{
	padding: 80px 0 80px;
}
.performance_text{
	margin: 0 0 50px;
}
.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;
}
/* スライダー */

.top_slider_man{
	padding:0;
	width: 100%;
}

.top_slider_woman{
	padding: 0;
	width: 100%;
}
	
.top_slider_man h2,
.top_slider_woman h2{
		margin: 0 0 20px;
	}

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

.content_box{
	margin: 0;
}

.box{
	display: block;
	width: 93%;
}	
.box_2{
	display: block;
	width: 93%;
	margin-top: 50px;
}
.box h2{
		font-size: 2.3rem;
	}
.flex_box{
	margin: 20px 0;
	width: 100%;
	display: block;
}
.flex_box_icn{
	width: 100%;
	display: block;
}
.flex_box_s{
	display: block;
}	

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

.flex_box_l{
	width: 100%;
	text-align: left;
	font-weight: bold;
}

.flex_box_2{
	width: 100%;
	text-align: left;
}

.flex_box_3{
	width: 100%;
	padding: 0 20px 0;
	margin: 0;
}
.flex_box_4{
	width: 100%;
}

.flex_box_4 img{
	width: 85%;
}
.arrows {
  width: 60px;
  height: 80px;
  position: relative;
  left: 20%;
  top: 500px;
  transform: rotate(360deg);
  z-index: 10;
}
	
/*横スクロールアイコン*/	
.yokoicn{
		left: 0;
	    bottom: 10px;
	}
.yokoicnB{
	    bottom: 10px;
	}

.footer{
   margin-top: 100px;
	}

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