@charset "utf-8";

body{
	font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-size:16px;
	line-height:160%;
	
	background: #f6f6f6;
}

body{
	font-size: 100%;
}

#loading{
	position: absolute;
	left:calc( 50% - 30px );
	top:calc( 50% - 30px );
}
#loader-bg {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #FFF;
	z-index: 1;
}

/*******/
a:link{color:#0081FF;}
a:visited { color: #000080; }
a:hover { color: #ff0000; }
a:active { color: #ff8000; }

img, object, embed, video {
	max-width: 100%;
	height:auto;
}

p{
	line-height:160%;
}

.pc{}
.sp{display:none;}

#main {
  margin-top: 160px; }
  @media all and (max-width: 768px) {
    #main {
      margin-top: 110px; } }

.blockContainer{
	width:100%;
	padding:50px 0;
}

#header .blockContainer{
	margin:0;
	padding:0;
}

#top.blockContainer{
	margin:0;
	padding-bottom:0;
}

.blockWrapper{
	max-width:960px;
	width:960px;
	margin:auto;
}

.btnbox{
	display:block;
	padding:15px;
	text-align:center;
	margin:20px auto 20px;
}

a.btnbox span{
	line-height:1em;
	color:#000;
	font-size:14px;
	text-align:center;
	text-decoration:none;
	
	position: relative;
	display: inline-block;
	padding-left: 22px;
}

a.btnbox span::before{
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 4px #000;
  border-right: solid 4px #000;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -7px;
}

.btnbox:hover{}

.btnbox:hover span::before{
	border-top: solid 4px #ccc;
	border-right: solid 4px #ccc;
}

a.btnbox.up span::before{
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	margin-top: -3px;
}

a.btnbox.down span::before{
	-ms-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	margin-top: -10px;
}

a.btnbox.back span{
	color:#fff;
}
a.btnbox.back span::before{
	border-top: solid 4px #fff;
	border-right: solid 4px #fff;
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(-135deg);
	margin-top: -8px;
}


/*ヘッダ*/
#header{
	/*
	position:fixed;
	top:0;*/
	width:100%;
	height:80px;
	
	background:#fff;
}

#header h1{
	float:left;
	margin:13px 0 0 10px;
}


/*フッタ*/
/*
#footer{
	margin:0px 0;
}

a.pagetop{
	display:block;
	padding:15px;
	margin:20px auto 20px;
	text-align:right;
}

a.pagetop span{
	color:#000;
	position: relative;
	display: inline-block;
	padding-left: 22px;
}

a.pagetop span::before{
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 4px #000;
  border-right: solid 4px #000;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  left: 0;
}

.pagetop:hover{
}

.pagetop:hover span::before{
	border-top: solid 4px #999;
	border-right: solid 4px #999;
}



ul#footlink{
	float:right;
}
ul#footlink li{
	display:inline-block;
	margin-left:10px;
}

ul#footlink li a{
	display:block;	
	background: url(../images/icon_circle_arrow.png) no-repeat 0 center;
	background-size:11px auto;
	padding:0 0 0 15px;
	font-size:12px;
}

p.copyright{
	float:left;
	margin:0 0 0 10px;
	font-size:12px;
}
*/

/*******/

.title{
	background: #005BAC;
	padding:20px 0;
}

#contents .title h1{
}

.title .blockWrapper{
}

.blockWrapper{}

.title h1{
	color:#fff;
	font-size:24px !important;
	line-height:1em;
	float:left;
}

#tags{
	color:#fff;
	width:calc(100% - 210px);
	float:right;
	text-align:right;
	font-size:14px;
}
#tags li{
	display:inline-block;
	margin:0 2px;
	cursor:pointer;
}
#tags li:hover{
	opacity:0.5;
}


/******/
#tag{
	margin-bottom: 50px;
}
.blockWrapper#tag h1{
	font-size: 18px;
	text-align: left;
	color: #005BAC;
	margin-bottom: 20px;
	
}
.blockWrapper#tag h1:before{
	content: none;
}

#tag li{
	display: inline-block;
	border: 1px #000 solid;
	padding: 6px 10px;
	margin: 3px;
	color: #000;
	line-height: 1;
	font-size: 13px;
	transition: .3s;
	cursor: pointer;
}
#tag li.on,#tag li:hover{
	color: #fff;
	background: #005BAC;
	border: 1px #005BAC solid;
}

#tag table{
	width: 100%;
	margin-top: -10px;
	margin-bottom: 20px;
}

#tag table tr{
	border-bottom: 1px rgba(0,0,0,0.2) solid;
}
#tag table th{
	width: 80px;
	color: #000;
	padding: 5px 15px;
	font-weight: 500;
	font-size: 14px;
	white-space: nowrap;
	border-bottom: 1px rgba(0,0,0,0.2) solid;
}
#tag table td{
	padding: 5px;
	border-bottom: 1px rgba(0,0,0,0.2) solid;
}


#tag #all{
	display: inline-block;
	border: 1px rgba(89,89,89,1) solid;
	padding: 6px 20px;
	margin: 3px;
	line-height: 1;
	font-size: 14px;
	transition: .3s;
	background:rgba(89,89,89,1);
	
	color: #fff;
	cursor: pointer;
}
#tag #all:hover{
	opacity: 0.5;
}


@media screen and (max-width: 768px) {
	#tag{
		padding: 0 20px 20px;
	}
	.blockWrapper#tag h1{
		font-size: 14px;
		margin: 20px 0 0;
	}
	#tag table{
		margin: 0px 0px 10px;
	}
	#tag table th{
		width: 50px;
	padding: 5px 8px;
	font-size: 12px;
	}
	#tag li{
	margin: 3px 2px;
	font-size: 10px;
	}
	
	#tag #all{
		font-size: 13px;
	}
}
/*****/


#top{
	min-height:500px;
}

ul#index{
	display:flex;
	flex-wrap:wrap;
	margin-bottom: 80px;
}

ul#index li{
	width:25%;
	/*width:33.33%;*/
	border-right:1px rgba(255,255,255,0.00) solid;
	border-bottom:1px rgba(255,255,255,0.00) solid;
	box-sizing:border-box;
	position:relative;
	
	top:0;
	transform:scale(0.95);
	opacity:0.2;
	transition: all 0.5s linear;
}
ul#index li.in{
	position:relative;
	transform:scale(1);
	opacity:1;
}

ul#index li {
	overflow: hidden;
	
	position:relative;
}


ul#index li div{
	background:rgba(0,0,0,.3);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:10px;
	box-sizing:border-box;	
	transition: all 0.5s linear;
	
}

ul#index li:hover div{
	background:rgba(0,0,0,.1);
}

ul#index li img {
	width:100%;
	height:auto;
	display:block;
	-moz-transition: -moz-transform 0.5s linear;
	-webkit-transition: -webkit-transform 0.5s linear;
	-o-transition: -o-transform 0.5s linear;
	-ms-transition: -ms-transform 0.5s linear;
/*	transition: transform 0.5s linear;*/
	transition: all 0.5s linear;

}
ul#index li:hover img {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

ul#index li a {
	color:#fff;
}

ul#index li a .pr{
	font-size:16px;/*JP font-size:12px;*/
}

ul#index li a .name{
	font-size:18px;
	line-height:1em;
	position:absolute;
	bottom:8px;
}

ul#index li a .jtype{
	font-size:14px;
	font-weight: 600;
	line-height:1em;
	position:absolute;
	bottom:0;
	right: 0;
	background: #005BAC;
	padding: 8px 10px;
	
}


/**************コンテンツ*/

#top .blockWrapper{
	position:relative;
}

#persontop .blockWrapper{
	margin:0 auto;
}

#contents .blockContainer:nth-child(2n){
	background:#fff;
}

#contents h1{
	text-align:center;
	font-size:36px;
	margin-bottom:65px;
	position:relative;
}

#contents h1:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -20px;/*線の上下位置*/
  display: inline-block;
  width: 110px;/*線の長さ*/
  height: 1px;/*線の太さ*/
  
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: black;/*線の色*/
}


/*中ページ*/
.blockContainer#persontop{
	padding:0;
	background:rgba(89,89,89,1.00);/*k80*/
}
#persontop .blockWrapper{
	color:#fff;
	position:relative;
}
#topphoto{
	float:right;
	width:55%;
}

#topphoto {
  animation-duration: 2s;
  animation-name: topphoto;
}

@keyframes topphoto {
  from {
	opacity:0;
  }

  to {
	opacity:1;
  }
}


#copy{
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho",  serif;
	/*font-size:48px;*/
	font-size:30px;
	line-height:130%;
	padding:20px 0 0 0;
	
	animation-duration: 2s;
	animation-name: profile;
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	text-shadow:0px 1px 1px rgba(0,0,0,0.4),0px 0px 1px rgba(0,0,0,0.4),1px 0px 1px rgba(0,0,0,0.4),0px -1px 1px rgba(0,0,0,0.4),-1px -1px 1px rgba(0,0,0,0.4),-1px 0px 1px rgba(0,0,0,0.4);
}


#profile{
	position:absolute;
	bottom:0;
	width:45%;
	padding:0 20px 15px 0;
	box-sizing:border-box;
	font-size:16px;
	
	animation-duration: 2s;
	animation-name: profile;
}

@keyframes profile {
  from {
	 opacity:0;
	 padding-left:10px;
  }

  to {
	opacity:1;
	padding-left:0px;
  }
}

#jobtypeTXT{
	margin-bottom: 5px;
	letter-spacing: 0!important;
}

#prtitle{
	border-bottom:1px #fff solid;
	padding:0 0 5px;
	margin-bottom:10px;
	font-size:18px;	
/*	position: relative;*/
}
#profile #prtitle span{
	display:inline-block;
	width: calc( 100% - 2em );
}
#profile #prtitle span.name{
	float:right;
	text-align: right;
	width: 2em;
/*	position: absolute;
	bottom: 0;
	right: 0;
	*/
}

#profile span{
	display:block;
	letter-spacing: 0;
	line-height: 1.3;
}

#profile span.year{display:inline-block;line-height: 2.2;
	margin-right: 10px;}
#profile span.type{
	display:inline-block;
	border: 1px #fff solid;
	padding: 3px 10px 1px;/*JP padding: 2px 10px;*/
	line-height: 1;
	letter-spacing: 1px;
	font-size: 14px;/*JP font-size: 14px;*/
	
}
/*
#profile span.field{
	line-height: 2.2;
}
*/

#summury img,#mywork img,#history img,#qa img,#timetable img{
	margin:5px;
}
#summury .blockWrapper{
	text-align:center;
}
	
ul#summuryList{
	display:inline-block;
	
}
ul#summuryList li{
	text-align:left;
	background:url(../images/icon_check.png) no-repeat left 3px top 3px;
	padding-left:35px;
	background-size:26px auto;
	margin:20px auto;
	font-size:18px;
}

ul#historyList{
/*	display:flex;
	flex-wrap:wrap;
*/	
	display: block;
}
ul#historyList li{
	margin:0 auto 30px;
	/*	width:calc( ( 100% - 40px ) / 4 );*/
	text-align: left;
}

.hsititle{
	/*display:block;*/
	border:1px #d2d2d2 solid;
	padding:10px 5px;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	margin-bottom:10px;
	
	min-width: 300px;
	display:inline-block;
}
ul#historyList li p{
	margin:5px;
	font-size:16px;
}

#qa h2{
	font-size:30px;
	line-height:140%;
	margin-bottom:35px;
}

#qa .subsection{
	margin:0 auto 60px;
}

#timetableTab{}

#timetableTab tr {
	border-bottom:1px #eceae1 solid;
}
#timetableTab th ,#timetableTab td{
	padding:10px;
}

#timetableTab th {
	font-size: 18px;/*EN*/
}

#timetableTab td .timetitle{
	font-weight:bold;
}
#timetableTab td p{
	font-size:16px;
}

/***********************/


#jobtype-single #navlink{
	background: none;
}
#jobtype-single #navlink section .blockWrapper{
	background: none;
	
}
#jobtype-single #navlink h1{
	color: #000;
	margin-top: 50px;
 }
#jobtype-single #navlink h1:before {
	background-color: #000;
}
@media screen and (max-width: 768px) {
	#jobtype-single{
		margin: 0 10px;
	}
	#jobtype-single #navlink h1{
		font-size:22px;
 	}
}
/***********************/
#navlink{
	background:rgba(89,89,89,1.00);/*k80*/
	padding-bottom:0;
}

#navlink h1{
	text-align:center;
	font-size:24px;
	color:#fff;
	margin-bottom:50px;
	position:relative;
}

#navlink h1:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -20px;/*線の上下位置*/
  display: inline-block;
  width: 110px;/*線の長さ*/
  height: 1px;/*線の太さ*/
  
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #fff;/*線の色*/
}

#navlink ul{
	display:flex;
	flex-wrap:wrap;
}
#navlink ul li{
	width:calc((100% - 40px) / 5);
	margin:0 10px 10px 0;
	overflow: hidden;
}
#navlink ul li:nth-child(5n){
	margin:0 0 10px 0;
}
#navlink ul li div{
	display:none;
}

#navlink ul li a{
	display:block;
	border:5px #fff solid;
}
#navlink ul li a img {
	display:block;
	-moz-transition: -moz-transform 0.5s linear;
	-webkit-transition: -webkit-transform 0.5s linear;
	-o-transition: -o-transform 0.5s linear;
	-ms-transition: -ms-transform 0.5s linear;
	transition: all 0.5s linear;
	filter:brightness(0.8);
}
#navlink ul li:hover img {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	filter:brightness(1);
}

#navlink ul.navbacklink{
	display: block;
	width: 100%;
	text-align: center;
	margin: 20px auto 20px;
}

#navlink ul.navbacklink li{
	display: inline-block;
	width: auto;
}
#navlink ul.navbacklink li a{
	border-radius: 20px;
	border: 1px #fff solid;
	text-align: center;
	background: #FFF;
	width: 200px;
	padding: 4px;
	color:#004684;
	transition: all 0.5s linear;
}
#navlink ul.navbacklink li a:hover{
	color:#004684;
}

#summury section,
#mywork section,
#history section,
#qa section,
#timetable section{
  position:relative;
}

#youtube section{
	text-align: center;
}

.youtube {
  position: relative;
  width: 100%;
	max-width: 800px;
	margin: auto;
	padding-top: 56.25%;
	overflow:hidden;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%; 
}
@media screen and (max-width: 768px) {
	.youtube iframe {
		height: 100%;
/*
	top:50%;
   left:50%;
   margin:auto;
   transform: translate(-50%,-50%);*/
 
	}
}
/**********************************************************************************************************************************************************************************/
@media screen and (max-width: 768px) {
	body{
		font-size:16px;
	}
	
	.pc{display:none;}
	.sp{display:block;}

	#sp{}
	
	#top.blockContainer{
		padding:1px 0 0 ;
	}

	#contents h1{
		font-size:32px;
	}
	
	.blockContainer#persontop{
		background:rgba(89,89,89,1.00);/*k80*/
	}
	
	ul#historyList li{
		width:calc( ( 100% - 20px ) / 2 );
		width: 100%;
	}
	.hsititle{
		min-width: none;
		display:block;
		font-size:16px;
	}

	#qa h2{
		font-size:18px;
	}
/*
	#footer{
		margin:0;
	}
	
	a.pagetop{
		text-align:center;
	}
	
	ul#footlink{
		float:none;
		text-align:center;
	}
	
	p.copyright{
		float:none;
		text-align:center;
		margin:15px auto 0;
		clear:right;
	}*/
	
	.btnbox{
		text-align:center;
	}
	
	
	/*****************/
	/*トップページ*/
	/***************/
	#contensheader .blockWrapper,
	.blockContainer .blockWrapper{
		width:auto;
		margin:0 10px;
	}
	
	#top.blockContainer .blockWrapper{
		margin:0;
	}
	
	ul#index li{
		width:33.33%;
	}
	
	ul#index li a .pr{
		font-size:14px;/*JP*/
	}
	
	
	.title{
		padding-bottom:10px;
	}
	.title .blockWrapper{
		margin:0 !important;
	}
		
	
	.title h1{
		float:none;
		margin:0 10px 15px;
	}

	#tags{
		width:auto;
		float:none;
		
		padding:10px 10px 0;
		border-top:1px #666 dotted;
	}

	#persontop .blockWrapper{
		color:#fff;
		position:relative;
	}
	#persontop img{
		float:none;
		width:100%;
	}

	#copy{
		position:static;
		font-size:28px;
		padding:10px 20px 20px;

		animation-duration: 2s;
		animation-name:copy_sp;
	}
	
	@keyframes copy_sp {
	  from {
		 opacity:0;
		 margin-top:10px;
	  }

	  to {
		opacity:1;
		margin-top:0px;
	  }
	}

	#profile{
		padding:0 20px 20px;
		position:static;
		width:auto;
		animation-duration: 2s;
		animation-name:profile_sp;
	}


	@keyframes profile_sp {
  	from {
		 opacity:0;
		 padding-top:10px;
	  }

 	to {
		opacity:1;
		padding-top:0px;
	  }
	}

	#summury .blockWrapper{
		text-align:center;
	}

	#navlink{
		/*background:#626262 !important;*/
	}
	
	
}

/**********************************************************************************************************************************************************************************/
@media only screen and (max-width: 480px) {

	body{
	}

	#header{
		height:70px;
	}
	
	#header h1{
		text-align:center;
		width:auto;
		float:none;
		margin:0;
		padding-top:10px;
	}
	
	.title h1{
		float:none;
		width:auto;
		text-align:center;
	}

	ul#index li{
		width:50%;
	}
	
	
	#navlink ul li{
		width:calc((100% - 30px) / 4);
	}
	#navlink ul li:nth-child(5n){
		margin:0 10px 10px 0px;

	}
	#navlink ul li:nth-child(4n){
		margin:0 00px 10px 0 ;

	}
	#navlink ul li a{
		display:block;
		border:2px #fff solid;
	}
	
	#profile span.field{
		margin-top: 5px;
	}

}

/**********************************************************************************************************************************************************************************/
@media only screen and (max-width: 320px) {
	ul#index li a .pr{
		font-size:10px;
		line-height:140%;
	}

	ul#index li a .name{
		font-size:14px;
	}

}