body{font-family: 'Noto Sans JP', sans-serif;font-size:clamp(0.938rem, 0.882rem + 0.28vw, 1.125rem); font-weight:400; line-height:1.7; color:#1A1A1A;  letter-spacing:1px;font-feature-settings: "palt";}
@media screen and (max-width: 768px) {
body{font-size:15px;line-height:1.6; letter-spacing:1px; }
}
.site_logo img{position:fixed; top:14px; left:20px; z-index:3}
.global_inner{max-width:1000px; margin:0 auto; position:relative;padding: 0 20px;}
.global_inner_wide{ margin:0 auto; position:relative; width:90%;}
h1,h2,h3,h4,h5,h6{line-height:1;}
h1{font-size:24px; font-weight:500; margin-bottom:40px; letter-spacing:5px;position: relative;}
h1 span{display:block; font-size:60px; font-weight:bold;font-family: "Barlow", sans-serif;}

h2{font-size:clamp(1.125rem, 1.014rem + 0.56vw, 1.5rem); font-weight:500; margin-bottom:40px;font-family: "Barlow", sans-serif; letter-spacing:5px;}
h2 span{display:block; font-size:clamp(1.25rem, 0.88rem + 1.85vw, 2.5rem); font-weight:bold;margin-bottom:30px;}



h3{font-size:24px; margin-bottom:20px;}
.copy{letter-spacing:5px;}
.text{text-align: justify;}
img{width:100%; height:auto;}
a img{transition:0.4s all;}
a img:hover{transform: scale(1.10);transition:0.4s all; letter-spacing:2px;}
a img.no-zoom:hover{transform: scale(1.0);}
.box{display:flex;justify-content: space-between; }
.copy_jp{ font-size:clamp(1.063rem, 0.933rem + 0.65vw, 1.5rem);font-weight:500;letter-spacing:2px; }
.copy_en{margin-top:10px;font-size:clamp(1.063rem, 0.933rem + 0.65vw, 1.5rem);font-weight:500; letter-spacing:0; }

@media screen and (max-width: 768px) {
.global_inner{width:94%;padding: 0 3%; }
.global_inner_wide{width:94%;padding: 0 3%; }
h1{font-size:20px; }
h1 span{font-size:36px;margin-bottom: 15px;}
h2{font-size:20px; margin-bottom:40px; line-height:1.4; }
h2 span{margin-bottom:20px;font-size:36px; line-height:1.1;}
h2.top{font-size:20px; margin-bottom:40px; }
h2.top span{font-size:36px; margin-bottom:20px;}
h2.border_top{padding-top:40px; margin-top:40px;}
h3{font-size:20px;}
.box{flex-direction: column; }
}

/*====================
ハンバーガーメニュー
=====================*/
header{height:auto; position:fixed;width:200px; z-index:3; top:40px;left:0;}
header .logo{ background:#FFF; padding:10px 15px 10px 0; text-align:right;}
header .logo img{height:auto; width:140px;transition:0.4s all;}
header .logo img:hover{transform: scale(1.0); opacity:0.8;transition:0.4s all;}
header .logo h1{margin-bottom:0;}
header .btn_entry{position:fixed; right:2.5vw; top:5vh; width:12vw; min-width:180px;}

nav {display: block;  position: fixed;  top: 82px;  left: -300px;  bottom: 0;  width: 300px;	background-color:#FFF;  	-webkit-overflow-scrolling: touch;  transition: all 0.5s;  z-index: 102;  opacity: 0;}
.open nav {left: 0;  opacity: 1;  top:82px;  width:25%;box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.08);}
nav .inner {	height: 100vh;		width: 100%;overflow: auto; padding-top:80px;}
nav .inner .box{width: 100%;}
nav .inner .box .item{padding-left: 0px;width: 100%;}
nav .inner .box .item ul{margin-bottom:20px;width: 95%; }
nav .inner .box .item ul li{line-height: 1.3; font-size:16px; display: block;  overflow: hidden;   z-index:0;position: relative;    text-align: left;}
nav .inner .box .item ul li:last-child{border:none;}

nav .inner .box .item ul li:before{content:'';width: 12px;height: 0.5px;background-color: #000;display:  block;position: absolute;top: 50%;left: 5px;transform: translateY(-50%);-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);}
nav .inner .box .item ul li a{ display:block;padding-left:40px; padding-top:15px; padding-bottom:15px; color:#4a4a4a; 
position: relative;	overflow: hidden;    transition: ease .2s; border-bottom:solid 1px #4a4a4a; line-height:1.2;}
nav .inner .box .item ul li a span{position: relative;	z-index: 3;	}


nav .inner .box .item ul li a:hover{ transition: all 0.3s;color:#FFF;}
nav .inner .box .item ul li a:before { 	content: '';position: absolute;top: 0;left: 0;z-index: 2;background:#80808b;width: 100%;height: 100%;transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s;transform: scale(0, 1);	transform-origin: right top; }

nav .inner .box .item ul li a:hover:before{	transform-origin:left top;	transform:scale(1, 1); z-index:-1;}

nav .inner .box .item ul li.title{font-size:15px;  }
nav .inner .box .item ul li.title span{display:block; margin-top:5px;font-family: "Barlow", sans-serif;letter-spacing:0px; font-size:22px; font-weight:bold; margin-bottom:5px; }
nav .inner .box .item ul li.title:before{content:none;}
nav .inner .box .item ul li.title a:after{font-size:14px; display:block; font-weight:normal;z-index: 3; padding-left:3px; position:relative;}
nav .inner .box .item ul li:last-child{margin-bottom:0px;}






@media screen and (max-width: 768px) {
header{top:0px;}
header .logo{left:85px;}
nav{ top:82px;}
.open nav{width:70%; top:82px;}
nav {right: -220px;width: 220px;  }
nav .inner {margin: 0px;height:auto;padding-top: 30px;} 
nav .inner .box{width:90%; margin:0 auto;}
nav .inner .box .item ul{padding-bottom:10px; margin-bottom:0px; padding-top:0px;}
nav .inner .box .item ul li.title{font-size:16px;}
nav .inner .box .item ul li.title span{font-size:12px;}
nav .inner .box .item ul li a{padding-top:10px; padding-bottom:10px; padding-left:20px;}
nav br.pc{display:none;} 
}


/*============
ハンバーガーメニューのトグル
=============*/
.toggle_btn {  display: block;   height: 40px;  transition: all .5s;  cursor: pointer;  z-index: 103; background:#000; position:relative;}
.toggle_btn:before{content:"MENU"; position:absolute; top:13px; right:55px; font-size:13px; color:#FFF;font-family: "Barlow", sans-serif;letter-spacing:1px; line-height:1;}
.toggle_btn p{font-size:12px;}
.toggle_btn span {  display: block;  position: absolute;  left: 80px;  width: 20px;  height: 1.5px;  background-color: #FFF;  border-radius: 4px;  transition: all .5s;}
.toggle_btn span:nth-child(1) {  top: 15px;}
.toggle_btn span:nth-child(2) {  top: 19px;}
.toggle_btn span:nth-child(3) {  top: 23px;}
.open .toggle_btn span {  background-color: #FFF;}
.open .toggle_btn span:nth-child(1) {  transform: translateY(10px) rotate(-315deg);top: 9px;}
.open .toggle_btn span:nth-child(2) {  opacity: 0;}
.open .toggle_btn span:nth-child(3) {  transform: translateY(-10px) rotate(315deg);top: 29px;}

@media screen and (max-width: 768px) {

}
/*============
ハンバーガーメニューのマスク
=============*/
#mask {display: none;  transition: all .5s;}
.open #mask {  display: block;  position: fixed;  top: 0;  right: 0;  width: 100%;  height: 100%;  /*background: #000;*/  opacity: .8;  z-index: 101; }



/*====================
メインビジュアル
=====================*/
.kv{ position:relative;width: 100%;height: 100vh; overflow: hidden; color:#FFF;}
.kv video {position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);width: 100vw;height: 100vh;object-fit: cover; }
.kv .copy{position:absolute; text-align:center;  bottom:0;left: 50%; transform: translateX(-50%);  z-index:1; width:95%; }

@media screen and (max-width: 768px) {
.kv{ }
.kv .text1{ font-size: 30px; bottom:28vh; left: 50%; transform: translateX(-50%); right:unset; text-align:center;  letter-spacing:5px; }
.kv .text2{ text-align:center;letter-spacing:5px;  font-size: 18px; bottom:18vh; left: 50%; transform: translateX(-50%); right:unset; z-index:1; width:100%;}
}



/*====================
イントロダクション
=====================*/
.main_copy{padding:100px 0; text-align:center;}

/*====================
トップ：ニュース
=====================*/
.top_news_list{background:#000000; color:#FFF; padding:40px 0;}
.top_news_list h2{ margin-bottom:0;}
.top_news_list h2.top span{margin-bottom:20px;}
.top_news_list .box{justify-content: flex-start;align-items: center;}
.top_news_list .box .item{border-left:solid 1px #FFF; padding-left:20px; margin-left:100px;}
.top_news_list .box .item dl dt{font-family: "Barlow", sans-serif; font-size:28px;}
.top_news_list .box .viewmore{display:flex;align-items: center; line-height:1; margin-top:0; margin-left:auto; margin-right:0;}
.top_news_list .box .viewmore img{height:16px; width:auto; margin-left:20px;}


/*====================
トップ：仕事を知る
=====================*/
.top_jobs{background:url(/wp-content/themes/sekiyuyusou-recruit/assets/image/top_jobs.jpg) no-repeat;width: 100%;height: 100vh; overflow: hidden;    background-size: cover; margin-top:100px;    background-position-x: right; min-height:820px;}
.top_jobs .inner{max-width:1100px; margin:0 auto; position:relative;padding: 0 20px;}
.top_jobs .item{background:rgba(255,255,255,0.7); padding:40px; width:55%;}
.top_jobs .item .text{margin-top:20px;}


/*====================
トップ：人を知る
=====================*/
.top_interview{ margin-top:100px;}
.top_interview .heading{display:flex;justify-content: center; margin-bottom:100px;}
.top_interview .heading .text{margin-left:100px;}
.top_interview .inner{max-width:1200px; margin:0 auto; position:relative;padding: 0 20px;}

.top_interview .item{width:25%; text-align:center;}
.top_interview .item .photo{ position:relative;}
.top_interview .item .photo img{width:70%;}
.top_interview .item .photo img.ic{position:absolute; right:-8%; top:0; width:40%;}
.top_interview .item .text{border-top:solid 1px #1D6AAE; padding-top:20px; text-align:center; font-size:15px; font-weight:bold;}


/*====================
トップ：会社を知る
=====================*/
.top_aboutus{background:url(/wp-content/themes/sekiyuyusou-recruit/assets/image/top_aboutus.jpg) no-repeat;width: 100%;height: 100vh; overflow: hidden;    background-size: cover; margin-top:100px;    background-position-x: right; min-height:650px;}
.top_aboutus .inner{max-width:1100px; margin:0 auto; position:relative;padding: 0 20px;}
.top_aboutus .item{background:rgba(255,255,255,0.7); padding:40px; width:55%;}
.top_aboutus .item .text{margin-top:20px;}

/*====================
トップ：フット
=====================*/
.top_foot{background:url(/wp-content/themes/sekiyuyusou-recruit/assets/image/top_foot.jpg) no-repeat;width: 100%;height: 100vh; overflow: hidden;    background-size: cover; margin-top:10px;    background-position: center; min-height:650px;display:flex;flex-direction: column;}
.top_foot .box{height:40vh; margin-top:auto; color:#FFF;justify-content: center;align-items: center;}
.top_foot .box .item h2{text-align: center;}
.top_foot .box .item:first-child{border-right:solid 1px #FFF; padding-right:80px; margin-right:60px;}








/*==========================
お問い合わせ
=========================*/
.contact{padding-top:100px;}
.contact h1{display:flex;align-items: center;}
.contact h1 span{display:inline-block;margin-right:60px;}
.contact .title{display:flex;align-items: center;margin-top:40px;}
.contact .title .must{border-radius:5px; text-align:center; padding:5px; margin-right:20px; font-size:14px; color:#FFF;}
.contact .title .must.on{background:#f0645a;}
.contact .title .must.off{background:#787878;}
.contact input,.contact textarea{border:solid 1px #DDD; border-radius:10px;  margin-top:10px; padding:7px 10px; width:100%; font-size:16px;}
.contact form{ background:#FFF; padding:0 40px 40px 40px; margin-top:80px; border-radius:25px;}
.contact .formbtn{width:94px; height:94px; border-radius:50%; background:#000; text-align:center; line-height:94px; color:#FFF; padding:0; margin-left:auto; margin-right:auto;display: block; margin-top:60px;}
.contact img.bg1{position:absolute; left:0; bottom:100px; width:300px;}
.contact img.bg2{position:absolute; right:0; top:100px; width:300px;}

@media screen and (max-width: 768px) {
.contact{padding-top:120px;}
.contact h1{flex-direction: column;align-items: flex-start;}
.contact h1 span{display:block;margin-right:0px; }
.contact form{  padding:0; margin-top:40px; }
.contact img.bg1{display:none;}
.contact img.bg2{display:none;}
.contact .formbtn{margin-top:40px;}
}

/*==============================
もっと見る
==============================*/
.viewmore{
	min-width: 129px;
	width:fit-content;
	margin-top: 60px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.viewmore img{width:129px; height:auto; position:relative;}
.viewmore a{transition-duration: .3s;  }
.viewmore a:hover{transition-duration: .3s;}	
a .viewmore{display:block;color: #fff;background: #AB9A86;transition-duration: .3s; text-align:center; padding:15px; }
a:hover .viewmore{color: #fff;background: #a4c1d7;transition-duration: .3s;}	



@media screen and (max-width: 768px) {
.viewmore{	width: 80%;	margin-top: 20px;	margin-right: auto;	margin-bottom: 0;	margin-left: auto;text-align: center;}
.viewmore img{width:100px;}
}



/*=======  ニュース  =======*/
.news{font-family: 'Noto Sans JP', sans-serif;  font-weight:300;text-align:left; padding-top:120px; min-height:800px;}
.news h1{display:flex;align-items: center;}
.news h1 span{display:inline-block;margin-right:60px;}
.news .box{display:block;padding:60px 40px 40px 40px; border-radius:25px; background:#FFF;}

.news.list{padding-bottom:100px; font-weight:300; }
.news.list .box .item{}
.news.list .box .item dl{display:flex;    align-items: center; border-bottom:solid 1px #000; padding-bottom:20px;margin-bottom:20px;}
.news.list .box .item dl dt{min-width: 180px; font-size:24px; font-weight:bold;font-family: "Barlow", sans-serif; }
.news.list .box .item a:hover dl dt{text-decoration:underline;}
.news.list .box .item a:hover dl dd{text-decoration:underline;}


.news.detail{} .box{}
.news.detail dl{margin-bottom:20px; margin-top:20px; border-bottom:solid 1px #000; padding-bottom:20px;}
.news.detail dt{width:130px;}
.news.detail h3{font-size:20px; margin-bottom:10px; margin-top:40px; font-weight:bold;}

.news img.bg1{position:absolute; left:0; bottom:100px; width:300px;}
.news img.bg2{position:absolute; right:0; top:100px; width:300px;}

.news .ic_btn{width:150px; margin-left:auto; margin-right:auto; margin-top:100px;}

@media screen and (max-width: 768px) {
.news{padding-bottom:40px;min-height:auto;}
.news h1{flex-direction: column;align-items: flex-start;}
.news h1 span{display:block;margin-right:0px; }
.news .box{padding:0;}
.news.list .box{flex-direction: column;}
.news.list .box .item{width:100%; margin-bottom:20px; padding-left:10px;}
.news.list .box .item h3{justify-content: space-between;font-size:30px; white-space:normal; letter-spacing:0.5px; }
.news.list .box .item h3 span{margin-right: auto; font-size:20px; margin-left:10px;}
.news img.bg1{display:none;}
.news img.bg2{display:none;}
.news .ic_btn{width:100px; margin-top:40px;}
.news .box .item dl{flex-direction: column;align-items: flex-start !important;}
}


/*=======  ページャー  =======*/
.pagenation{display:flex;justify-content: center;margin-bottom:100px; margin-top:100px;}
.pagenation .item{width:10%; margin:20px 0px; text-align:center;}
.pagenation .item a{color:#000;}
.pagenation .item:last-child{text-align:right;}
.pagenation .item > div{display:flex; font-size:13px; margin-bottom:20px;}
.pagenation .item:last-child > div{flex-direction: row-reverse;}
.pagenation .item .date{ margin-bottom:0px;}
.pagenation .item .title{border-bottom:none; padding-bottom:0px;}
.pagenation .item .title a{color:#000; font-size:17px;}

.arrow-left,.arrow-right {position: relative;display: inline-block;padding: 10px;}
.arrow-left::before, .arrow-right::before {  content: '';  width: 20px;  height: 20px;  border-top: solid 2px #000;  border-right: solid 2px #000;  position: absolute;  left: 0px;  top: 1px;}

.arrow-left::before{ transform: rotate(-135deg);}
.arrow-right::before {  transform: rotate(45deg);}

@media screen and (max-width: 768px) {
.page-detail .title{margin-bottom:40px;}
.pagenation{margin-bottom:40px;}
}





table {width:100%; margin-top:40px;}
table th, table td{padding:10px;border-top:solid 1px #CCC; line-height:1.8;}
table tr:first-child th, table tr:first-child td{border-top:none;}
table th{width:25%;  font-weight:normal;}
.img100{width:100%; height:auto;}


@media screen and (max-width: 768px) {
table td,table th{width:100%; display:block;}
table th{background:#f0f0f0;}
table tr:first-child th, table tr:first-child td{border-top:solid 1px #CCC;}
}

/*==============================
部品
==============================*/
.mt40{margin-top:40px;}
.mt60{margin-top:60px;}
.text_center{text-align:center;}

@media screen and (max-width: 768px) {
.mt60{margin-top:40px;}
}
/*==============================
ページトップ
==============================*/

#page_top {position: fixed;bottom: 30px;left: calc(100vw - 100px); display:none; z-index:1;}
#page_top a {background-color: #999;color: #fff;text-align: center;	text-decoration: none;font-size: 24px;padding-top: 6px;	padding-right: 15px;padding-bottom: 10px;padding-left: 15px;}
#page_top a:hover {background-color: #666;text-decoration: none;}

@media screen and (max-width: 768px) {
#page_top {bottom: calc(100vh - 95vh);left:auto; right:20px; }
#page_top a{}
}



/*=======  サイトマップ  =======*/


/*=======  フッター  ====*/
footer{padding-top:100px;   letter-spacing:1px; }
footer .box{width:80%; margin:0 auto;}
footer .box .address{width:300px; font-size:12px; letter-spacing:0; padding-right:20px;}
footer .box .address .name{font-size:20px; margin-bottom:20px;font-weight:500;}
footer .box .address .tel{font-family: "Barlow", sans-serif; font-weight:500; font-style:italic; font-size:46px;letter-spacing:2px; line-height:1.2;}
footer .box .navi{text-align:left;display:flex;}
footer .box .navi ul{ margin-bottom:10px; border-left:solid 1px #000; padding-left:20px; margin-right:40px; }
footer .box .navi ul:first-child{margin-right:80px;}
footer .box .navi ul li a:hover{text-decoration:underline;}
footer .box .banner{width:400px;text-align:right;font-family: "Barlow", sans-serif; font-size:30px; font-weight:bold;}
.copyright{text-align:center;font-family: "Barlow", sans-serif; font-size:11px;letter-spacing:1px; margin-top:40px; margin-bottom:40px;letter-spacing:0px;}

@media screen and (max-width: 1360px) {
footer .box{width:95%;} 
}

@media screen and (max-width: 1150px) {
footer{ font-size:15px;} 
footer .box .copy{width:250px; font-size:20px; }
footer .box .address{width:235px; font-size:10px; }
footer .box .address .tel{ font-size:34px;letter-spacing:1px;}
footer .box .banner{width:300px;}


@media screen and (max-width: 768px) {
footer{margin-bottom:0px; text-align:center;}
footer .box{width:100%;flex-direction: column;flex-wrap: wrap;}
footer .box .address{width:100%; }
footer .box .navi{width:80%; margin-left:auto; margin-right:auto; margin-top:40px;}
footer .box .navi ul{width:50%; padding-left:0; margin-right:0; text-align:center;}
footer .box .navi ul:first-child{border-left:none;}
footer .box .navi ul li{margin-bottom:20px;}
footer .box .copy{width:100%; text-align:center; margin-top:20px;}
}



/*=======  下からフェードアップ  =======*/
.fadeup {opacity: 0;}
.fadeup.isShow {  opacity: 1;animation: fadeUp 1.0s ease 0.5s 1 normal backwards;}
.delay01{animation-delay: 0.1s !important;}
@keyframes fadeUp {
from {
    opacity: 0;
    transform: translateY(50px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


/*=======  左からからフェードイン  =======*/
.fadein_from_left{opacity: 0;}
.fadein_from_left.isShow {  opacity: 1;animation:  fadein_from_left 1.0s ease 0.5s 1 normal backwards;}

@keyframes fadein_from_left {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*=======  右からからフェードイン  =======*/
.fadein_from_right{opacity: 0;}
.fadein_from_right.isShow {   opacity: 1;animation:  fadein_from_right 1.0s ease 0.5s 1 normal backwards;}

@keyframes fadein_from_right {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*=======  上からからフェードイン  =======*/
.fadein_from_top{opacity: 0;}
.fadein_from_top.isShow {   opacity: 1;animation:  fadein_from_top 1.0s ease 0.5s 1 normal backwards;}

@keyframes fadein_from_top {
  0% {
    opacity: 0;
    transform: translateY(-500px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


@media screen and (max-width: 768px) {
.pc{display:none !important;}
}

@media screen and (min-width: 769px) {
.sp{display:none !important;} 
}



