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

@import url('common.css');

h1,h2,h3{margin:0;padding:0;font-style: normal;}

#home{overflow: hidden;}

/* fade in */
.intro_content {position:fixed;top:0;animation:6.8s ease-in 1.0s 1 intor01 forwards;}
@keyframes intor01{
   0% {opacity:1; }
   80% {opacity:1;}
   100% {opacity:0;}
}
.slider_content{opacity:0;animation:1.0s ease-in 1.0s 1 fadein01;animation-fill-mode:forwards;text-align:center;box-shadow:3px 3px 10px #999;}
@keyframes fadein01{
   0% { opacity:0; }
   100% {opacity:1;}
}

/* slick */
/* arrows */
.slick-prev:before,.slick-next:before{opacity: 0.25;}
.slick-prev,.slick-next{width: 22px;height: 43px;padding: 0;position: absolute;z-index:10;border:1px solid red;}
.slick-prev{left: /*-25px*/0;}
[dir='rtl'] .slick-prev{right: /*-25px*/0;left: auto;}
.slick-prev:before{content: url(../../img/home/arrow_left.png);}
[dir='rtl'] .slick-prev:before{content: url(../../img/home/arrow_left.png);}
.slick-next{right: /*-25px*/0;}
[dir='rtl'] .slick-next{right: auto;left: /*-25px*/0;}
.slick-next:before{content: url(../../img/home/arrow_right.png);}
[dir='rtl'] .slick-next:before{content: url(../../img/home/arrow_right.png);}
/* dots */
.slick-dotted.slick-slider{margin-bottom: 0;}
.slick-dots{bottom:-40px;}
.slick-dots li button:before{width: 20px;height: 20px;content: '●';font-size:12px;color:#C9CACA;opacity: .65;/**/}
.slick-dots li{height: 40px;}
.slick-dots li.slick-active button:before{opacity: .85;color:#333;}


/* slider */
.home_slider .cap{font-size:0.7rem;text-align:right;position:absolute;bottom:0.5rem;color:#FFF;padding-right:1rem;}
.intro_content{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);zoom:1.004;/* スライダーの画像がはみ出ない様に */}
.home_slider_logo{position:absolute;left:50%;top:50%; transform: scale(0.65) translate(-77%,-77%);}
.home_scroll{position: absolute;width:47px;height:44px;left:50%;bottom:120px; transform:translate(-50%,-50%);z-index:999;}
.home_slider{width:100%;height:100vh;padding:98px 0;	/* フィルムの穴の画像の高さ分の余白 */
	background-image: url(../../img/home/slider_bk.jpg),url(../../img/home/slider_bk.jpg);
	background-repeat:repeat-x,repeat-x;background-position:left top, left bottom;background-size:81px 98px,81px 98px;
	border-top:1px solid #FFF;border-bottom:1px solid #FFF;animation: filmAnime 16s linear infinite;}
@keyframes filmAnime {
	100% {background-position: -100% 0, -100% 100%;}
}
.home_slider > div{background-color:#000;}
.home_slider > div img ,.intro_content {
  height:100vh;
  width: 100%;
  margin: auto;
  max-height:calc(100vh - 196px);	/* フィルムの穴の画像の大きさを引く */
  max-width: 100%;
  object-fit: contain;
}

/*** ▼noise effect http://kachibito.net/css/old-film-effect ***/
.slider_content:after,.film:after, .effect:after,.grain:after {
  position: absolute;
}
.slider_content {background-color:#676666;
  width:100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease 0s;
}
.slider_content:after {
  content: "";
  width: 100%;
  height: 100%;
  /*box-shadow: 0 0 20vmin 0vmin #000 inset, 0 0 3vmin 0.5vmin #000 inset, 0 0 1vmin 1vmin #000;*/
}
.film, .effect {
  width: 100%;
  height: 100%;
  filter: blur(0.45px) drop-shadow(0px 0px 0px #fff1);
}
.film:after, .effect:after {
  content: '';
  width: 120%;
  height: 100%;
  top: 0;
  left: 0;
  padding-left: 100px;
  opacity: 0.5;
  animation: film-scratch 0.45s steps(1) infinite;
  background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37vmin);
}
.effect:after {
  left: 30%;
  animation: effect-scratch 2s infinite;
}
.grain {
  width: 100%;
  height: 100%;
}
.grain:after {
  content: '';
  width: 110%;
  height: 110%;
  top: -5%;
  left: -5%;
  opacity: .25;
  background-image: 
    repeating-conic-gradient(#000 0%, transparent .00003%, transparent .0005%, transparent .00095%),
    repeating-conic-gradient(#000 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
  animation: grain 0.5s steps(1) infinite;
  filter: drop-shadow(0px 0px 1px black);
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-1%, -1%); }
  20% { transform: translate(1%, 1%); }
  30% { transform: translate(-2%, -2%); }
  40% { transform: translate(3%, 3%); }
  50% { transform: translate(-3%, -3%); }
  60% { transform: translate(4%, 4%); }
  70% { transform: translate(-4%, -4%); }
  80% { transform: translate(2%, 2%); }
  90% { transform: translate(-3%, -3%); }
}
@keyframes film-scratch {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  10% { transform: translateX(-1%); }
  20% { transform: translateX(1%); }
  30% { transform: translateX(-2%); opacity: 0.75; }
  40% { transform: translateX(3%); }
  50% { transform: translateX(-3%); opacity: 0.5; }
  60% { transform: translateX(8%); }
  70% { transform: translateX(-3%); }
  80% { transform: translateX(10%); opacity: 0.25; }
  90% { transform: translateX(-2%); }
}
@keyframes effect-scratch {
  0% { transform: translateX(0); opacity: 0.75; }
  10% { transform: translateX(-1%); }
  20% { transform: translateX(1%); }
  30% { transform: translateX(-2%); }
  40% { transform: translateX(3%); }
  50% { transform: translateX(-3%); opacity: 0.5; }
  60% { transform: translateX(8%); }
  70% { transform: translateX(-3%); }
  80% { transform: translateX(10%); opacity: 0.25; }
  90% { transform: translateX(20%); }
  100% { transform: translateX(30%); }
}
/*** ▲noise effect end ***/

/*** pkobo news ***/
/* clearfix */
.clearfix:after { content:"."; display:block; clear:both; height:0; visibility:hidden; }
.clearfix { display:inline-block; }
/* for macIE \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
ul#newsList{
	margin:0 0 15px;
	padding:0;
}
ul#newsList li{
	margin:0;
	padding:5px 0;
	margin-bottom:3px;
	border-bottom:1px dotted #ccc;
	list-style-type:none;
}
ul#newsList li a{color:#595757;}
.catName{
	display:inline-block;
	padding:3px 8px;
	border:1px solid #ccc;
	border-radius:6px;
	font-size:11px;
	line-height:1;
	margin:0 2px;
}
.newMark{
	display:inline-block;
	border:1px solid #E71F19;
	padding:1px 4px;
	font-size:11px;
	line-height:100%;
	background:#E71F19;
	color:#fff;
	box-shadow:1px 1px 1px #999;
	border-radius:8px;
}
.comment{
	display:block;
	padding:3px 0;
	float:left;
	overflow:hidden;
	width:500px;/* 本文部分の幅。ここは特に設置ページ合わせて変更下さい */
}
.thumbNailWrap{
	display:block;
	width:110px;
	float:left;
	height:80px;
	overflow:hidden;
}
/*** pkobo news end ***/

/* header スクロールすると固定表示 */
#header {
  position: fixed;z-index:30;
  top: -100%;  
  width: 100%;
  transition: .5s;
}
#header.is-show {	/* home_head.js */
  top: 0;
}

/* content */
#home_content{text-align:center;padding-top:40px;}
#home_content hr{border-color:#604C3F;}
.info_r a{display:block;margin:0 auto 5px auto;}
.info_l h2{text-align:center;color:#604C3F;font-size:1.14rem;padding:0.5rem 0;font-weight:700;border-top:1px dotted #604C3F;border-bottom:1px dotted #604C3F;}

#banner {text-align:center;}

/* footer nav */
#home_footernav{background-color:#EDEDED;margin:40px 0 15px;}
#home_footernav ul{list-style:none;padding:0;margin:0 auto;display:flex;flex-wrap:wrap;}
#home_footernav ul li{padding:35px 0;border:1px solid #FFF;position:relative;}
#home_footernav ul li a{display:block;text-align:center;}
#home_footernav ul li:hover{background-color:#FFF;}

/* footer */
#footer .footer_in{display:none;}

@media(min-width:1101px){
}
@media(max-width:1100px){
	/* slider */
	.home_slider > div img ,.intro_content {
	  object-fit:cover;
	}
}
@media(min-width:769px){
	.home_slider .cap{left:50%;transform:translateX(-50%);width:calc( (100vh - 196px) * 1.49 );}

	#home_content > .outline{padding:30px 76px;}
	#info{display:flex;}
	.info_r{width:210px;}
	.info_l{flex:1;padding-right:38px;}
	#home_footernav ul li{flex:1;}
	.home_en-michi{display:flex;align-items: start;width:100%;}
	.home_en-michi >*{flex:1;}
	
	/*** circle effect ***/
	.ov_effect01{position:relative; display: block;width:100%;min-height:170px;overflow:hidden;}
	.ov_effect01::after {
	  background: rgba(35,24,21,0.4);
	  border-radius: 50%;
	  content: "";
	  display: block;
	  margin: auto;
	  opacity: 0;
	  pointer-events: none;
	  position: absolute;
	  top: 50%;
	  left: 0;
	  right: 0;
	  width: 100%;
	  padding-top: 100%;
	  height: 0;
	  z-index: -1;
	  transform: translateY(-50%) scale(0.1);
	  transition: opacity .5s, transform 0s;
	  transition-delay: 0s, .4s;
	}
	.ov_effect01:hover::after {
	  opacity: 1;
	  transform: translateY(-50%) scale(0.9);
	  transition-delay: 0s;
	  transition: opacity .8s, transform .6s ease-in-out;
	}
	/*** btn_liner effect ***/
	.btn_liner{display: inline-block;
		overflow: hidden;
		position: relative;
		outline: none;
		transition: ease .2s;}
	.bgskew::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: -130%;
	  background:rgba(35,24,21,0.4);
	  width:120%;
	  height: 100%;
	  transform: skewX(-25deg);
	}
	.bgskew:hover::before {
	  animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
	}
	@keyframes skewanime {
	  100% {
		left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
	  }
	}
	/*** rotate effect ***/
	#home_footernav ul li{padding:0 0;}
	.btn02 {/*margin:-35px 0;*/
		position: relative;
		display: inline-block;
		width:100%;
		height: calc(94px + (35px * 2));
		line-height: 94px;
		outline: none;
	}
	.btn02 span {padding-top:35px;
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		/*border: 1px solid rgba(35,24,21,0.4);*/
		transform-style: preserve-3d;
		transition: 0.5s;
	}
	.rotatefront span:nth-child(1) {
		transform: rotateX(0deg);/*はじめは回転なし*/
		transform-origin: 0 50% -82px;/* 回転する起点 */
	}
	.rotatefront:hover span:nth-child(1) {
		transform: rotateX(-90deg);/* X軸に-90度回転 */
	}
	.rotatefront span:nth-child(2) {font-family: "新ゴ B","Shin Go Bold", sans-serif;font-size:1.14rem;
		background: rgba(35,24,21,0.4);
		color: #fff;
		transform: rotateX(90deg);/*はじめはX軸に90度回転*/
		transform-origin: 0 50% -82px;/* 回転する起点 */
	}
	.rotatefront:hover span:nth-child(2) {
		transform: rotateX(0deg);/* X軸に0度回転 */
	}
	.rotate_recruit:first-letter {letter-spacing:1rem;}

	#banner {display:flex;justify-content: space-between;flex-wrap: wrap;max-width:856px;margin:auto;}
	#banner a{flex-basis:32%;}
}
@media(max-width:768px){
	.home_slider .cap{right:0;}
	.info_l{padding-bottom:2rem;}
	/* home_content */
	#home_content{text-align:center;}
	#home_content > .outline img:first-child{display:block;}
	#home_content > .outline{display: inline-block !important;max-width:472px;padding:20px 10px;}
	.btn_liner{display:block;margin-bottom:1rem;}
	
	#home_footernav ul li{flex-basis:50%;}
	#banner a{display:block;margin:10px auto;max-width:274px;}

}