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

html{
  font-size:20px;
}
.header_box{
    margin: 0;
    min-width: 100%;
	height:4000px;
	background-image:url("../img/background.png");
	background-size:cover;	
}


h1{
	padding:40px;
	
	}

#name_top{
	font-size:60px;
	text-align:center;
	color:#fff;
	line-height:80px;
	letter-spacing:20px;
	
	}
h2{
	color:#fff;
	font-size:20px;
	}	

	.content_title h2:after {
		display: block;
		width: 30px;
		height: 2px;
		margin-top: 10px;
		content: '';
		background-image:url("../img/ryuutai1-2.png");
	}

h3{
	background-color: transparent;
	text-align:center;
	color:#fff;
	}
h4{
	font-size:30px;
	text-align:center;
	margin:70px 0 0 0;
	}

h5{
	line-height:40px;
	text-align:center;
	padding-bottom:20px;
	
	}
	
p{
	text-align:left;
	font-size:15px;
	margin-left:30px;

	}

.header_top{
    display: flex;
    justify-content: space-between;
	 text-decoration: none;
	 
   
}
	
.header_box,.main_box,.footer_box{
    width: auto;
    margin: 0 auto;	
}

.header_icon{
    list-style-type: none;
    padding: 60px;
    display: flex;
    width: 800px;
    justify-content: space-between;
	
}

.header_icon a{
    color: #fff;
}

.header_icon a:link{
    color: #fff;
    text-decoration: none;
    padding: 5px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.ja_area{
	font-size:16px;
	text-align:center;
	margin:3px;
	}

.arrows {
width: 60px;
height: 72px;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 20px;
}

.arrows path {
stroke: #6F3;
fill: transparent;
stroke-width: 1px;
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 */
}

.arrows path.a3 {
animation-delay:0s;
-webkit-animation-delay:0s; /* Safari 和 Chrome */
}
.contents_area{
	display: flex;
	width: 100%;
	margin: 50px 0 ; 
}



#about_area{
	width: 100%;
	height: 400px;
	padding: 500px; 
	background-color: transparent;
	color: #000;
}

.comment_area{
	line-height: 40px;
	letter-spacing: 5px;
	text-align: center;
	font-size: 30px;
	
}
.com_iocon{
	background-color: transparent;
	width:150px;
	height:30px;
	margin:50px auto;
	text-align:center;
	border-radius:8px;
	text-decoration:none;
	padding:10px;
		}

		/* service */
.service_box{
  display:flex;
  width:90%;
  height:00px;
  margin: 5px auto;
  justify-content: space-between;	
}
	
.service_item{
  width: 326px;
}
	
.service_item p{
  width: 326px;
  text-align: left;
  padding: 0;
}




/*========= フッター ===============*/

/*モニター全体に広げるフッター*/

.fwrapper{
	width: 100%;
	background-color: #FDE9FB;
 }
 /*コピーライト等を書く領域*/
 .footer{
   margin: auto;
   max-width: 800px;
   padding: 10px;
 /*これを書かないとフッターの下に余白ができてしまう*/
 }

/*==================================================
　5-3-1 中心から外に線が伸びる（下部）
===================================*/

.gnavi li a{
    /*線の基点とするためrelativeを指定*/
	position: relative;
	
}

.gnavi li.current a,
.gnavi li a:hover{
	color:#0F0;
}

.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background:#0481A2;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}	

/** staff **/
#staff_area{
	width: 100%;
	padding: 10 10 50px;
	margin: 10px 10 10px;
	color: #008080;
  }
  
  .content_title{
	width: 84%;
	margin: 30 auto;
	padding: 50px 30;
  }
  .content_title h2{
	font-size: 18px;
	width: 100px;
	color: #414a52;
  }
  
  .content_title h2:after {
	  display: block;
	  width: 30px;
	  height: 2px;
	  margin-top: 10px;
	  content: '';
	  background-color: #008080;
  }
  
  #staff{
	display: flex;
	justify-content: space-between;
	width: 84%;
	margin: 0 auto;
  }
  
  .staff_item{
	position: relative;
	width: 264px;
	height: 300px;
  }
  
  .staff_img img{
	width: 100%;
	height: 300px;
  }
  
  .staff_txt{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;

	background-color:	rgba(0, 247, 255, 0.65);
	/*透明にして表示させない*/
	opacity: 0;
	/*ホバーの動き方*/
	transition: .3s ease-in-out;
  }
  
  .staff_txt h3{
	font-size: 22px;
	padding: 10px 20px;
  }
  .staff_txt p{
	font-size: 16px;
	padding: 0 20px;
  }
  /*ホバーエフェクト*/
  .staff_item:hover .staff_txt {
	/*不透明にして表示*/
	opacity: 1;
  }
  
  /** sub-visual **/
  #sub-visual_area{
	width: 10%;
  }
  #sub-visual_area img{
	width: 10%;
	height: auto;
  }

  /*==================================================
スライダーのためのcss
===================================*/
.slider img {
	background-color: transparent;
    width: 10%;
    height: 10vw;
    object-fit: scale-down;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
	background-color: transparent;
}