@charset "UTF-8";
/* CSS Document */
/*@import url("html5reset-1.6.1.css");*/
*{
	margin:0;
	box-sizing: border-box;
}
html, body{
	height:100%;
	font-family: 'Jost', sans-serif;
	font-size: 16px;
	text-align: center;
	color: #000;
}
body {
    animation: fadeIn 0.5s ease-out 0s 1 normal;
    -webkit-animation: fadeIn 0.5s ease-out 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

section{
	line-height:1.6em;
	margin-bottom:80px;
	position: relative;
}
p{
	/*margin-bottom:1.6em;*/
}

table{
	border-collapse: collapse;
	border-spacing: 0px;
	margin-bottom: 40px;
}
th{
	text-align: left;
	vertical-align: middle;
	line-height: 1.6;
	font-weight: normal;
	width: 24%;
}
td, th{
	border: solid 1px #FFF;
	padding: 20px 0;
}
table caption{
	text-align: right;
	font-size: 90%;
}

sention ul li{
	margin-left: 1em;
}

dl dt{
	
}

dl dd{
	margin-top: -1.6em;
	margin-left: 6.5em;
}

/*グローバルナビゲーション*/
#navigation{
	display: block;
	width: 100%;
	height: 84px;
	text-align: right;
	/**/
	position: absolute;
	z-index: 99;
}
#navigation::after{
	content: "";
	display: block;
	width: 100%;
	height: 84px;
	position: absolute;
	top: 0;
	z-index: -1;
	/*background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0));*/
	background: rgba(0,0,0,0.2);
	opacity: 1;
	transition: all 0.3s linear;
}
#navigation.ready::after{
	opacity: 0;
}
#navigation ul{
	display: inline-block;
	padding-right: 36px;
}
#navigation li{
	display: block;
	float: left;
}
#navigation li a{
	position: relative;
	display: block;
	color: #FFF;
	text-decoration: none;
	line-height: 20px;
	opacity: 0.6;
	padding: 30px 0px 15px;
	margin-right: 35px; 
}
#navigation li a:hover{
	opacity: 1;
}
#navigation li a::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #FFF;
	bottom: -1px;
	transform: scale(0, 1);
	transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
	transition: transform 0.3s;   /*変形の時間*/
}
#navigation li a:hover::after {
	transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}
#navigation li:last-child a span,
#navigation li:nth-child(6) a span{
	display: none;
}
#navigation li:last-child a,
#navigation li:nth-child(6) a{
	margin-top: -7px;
	margin-right: 0;
}
#navigation li:nth-child(6) a{
	margin-right: 30px;
}

a{
	transition: all 0.2s linear;
}
a:hover{
	
}

#logo{
	position: absolute;
	display: block;
	width: 62px;
	height: 56px;
	background: url("../images/logo.svg") no-repeat left center;
	margin-left: 30px;
	margin-top: 15px;
	opacity: 0.7;
	z-index: 100;
	mix-blend-mode: luminosity;
}
#logo span{
	display: none;
}

.sp{
	display: none;
}

/*〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜*/

section{
	position: relative;
}
section div.wapper{
	padding-left: 5%;
	padding-right: 5%;
}

section p,
section table{
	width: 100%;
	max-width: 840px;
	margin: auto;
	text-align: justify;
}

#bodywrap{
	overflow: hidden;
}

#headnav{
	height:90%;
	margin-bottom: 340px;
}

#footer{
	position: relative;
	width: 100%;
	height: 120px;
	background-color: #403f3f;
	color: #DDD;
	padding: 12px calc(50% - 400px) 0;
	margin: auto;
}
#footernavi{
	width: 100%;
	/*height: 84px;*/
	text-align: right;
	line-height: 33px;
}
#footernavi:before{
	content: "株式会社ウィルワークス";
	display: inline-block;
	float: left;
}
#footernavi ul{
	display: inline-block;
	padding-right: 30px;
}
#footernavi li{
	display: block;
	float: left;
	margin-right: 30px;
}
#footernavi li a{
	font-size: 15px;
	color: #FFF;
	text-decoration: none;
	opacity: 0.7;
}
#footernavi li a:hover{
	opacity: 1.0;
}
#footernavi li a span{
	display: none;
}
#copyright{
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 15px;
	color: #BBB;
	letter-spacing: 0.03em;
}
#go2top{
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: block;
	width: 60px;
	height: 60px;
	background: url("../images/go2top.svg") center center no-repeat;
	background-size: 60px; 
	opacity: 0;
}
/*〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜*/


/* ビデオ部 */
#video-area{
    position: absolute;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    overflow: hidden;
	
	height: 100vh;
	background: url("../images/topbg2025.jpg") no-repeat center bottom 2vh;
	background-size: cover;
	clip-path: ellipse(140% 98% at 50% 0px);
	
	transition: all 1.2s ease-out;
}
#video-area.ready{
	clip-path: ellipse(10% 0% at 50% 0px);
}

#video-area:before{
	content: "";
	position: fixed;
	display: block;
	width: 100%;
	height: 100%;
	/*background: url("../images/dot.png");*/
	top: 0;
	left: 0;
}

#video {
    /*天地中央配置*/
    position: relative;
    z-index: -1;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    /*縦横幅指定*/
    /*width: 177.77777778vh;  16:9 の幅→16 ÷ 9＝ 177.77% */
    /*height: 56.25vw;  16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}

/* スライダー部*/
#topslide{
	width: 90vw;/* いいねこれ */
	max-width: 1000px;
	height: auto;
	margin: auto;
	position: absolute;
	top: 100vh;
	left: 50%;
	transform: translate(-50%, -50%);
	border: solid 8px #FFF;
	opacity: 1;
	
	transition: all 0.4s 0s ease-out;
}
#topslide.ready{
	opacity: 0;
	/*transform: translate(-50%, 100%);*/
}

#topslide:after{
	content: url("../images/slide_bottom.svg");
	display: block;
}
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

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

/* キャッチ部*/
#catchcopy{
	position: absolute;
	display: inline-block;
	width: 90vw;
	max-width: 950px;
	top: calc(50vh - 60px);
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 18px;
	color: #FFF;
	
	filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.5));
	
	clip-path: inset(0);
	
	opacity: 1.0;
	transition: all 1s 0s ease-out;
}
#catchcopy.ready{
	/*top: calc(45vh - 30px);*/
	/*opacity: 0;*/
	
	clip-path: inset(0 100% 0 0);
}
#catchcopy span{
	display: none;
}
#catchcopy img{
	margin-bottom: 20px;
}
#subcatch{
	width: 100%;
	/*max-width: 600px;*/
	margin: auto;
	padding: 0;
	font-size: 20px;
	opacity: 1;
	transition: all 0.4s 0s ease-out;
}
#subcatch.ready{
	opacity: 0;
}

/* リクルートボタン */
#recruit_nav{
	position: absolute;
	top: calc(75vh - 60px);
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	
	display: inline-table;
	
	opacity: 1.0;
	transition: all 0.5s 0s ease-out;
}
#recruit_nav.ready{
	opacity: 0;
	top: calc(75vh - 0px);
}
#recruit_nav p{
	position: relative;
	display: block;
	border: solid 1px #FFF;
	border-bottom: none;
	color: #FFF;
	padding: 16px 16px 14px;
	margin-bottom: 0;
	line-height: 1.6;
}

#recruit_nav:after{
	content: "";
	display: block;
	width: 100%;
	height: 13px;
	overflow: hidden;
	margin-top: 0px;
	padding: 0;
	background-image: url("../images/recruit_nav_bottomline.svg");
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
}

#recruit_nav a{
	position: absolute;
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
	border: solid 1px #FFF;
}
#recruit_nav a:hover{
	color: #FFF;
	background-image: url("../images/arrow_white.svg");
	background-color: rgba(255, 255, 255, 0.2);
}
a.btn{
	display: inline-block;
	width: 250px;
	height: 60px;
	padding: 20px;
	background-color: #FFF;
	font-size: 16px;
	font-weight: 500;
	color: #333;
	line-height: 20px;
	text-decoration: none;
	margin: auto;
	border: solid 1px #000;
	/*background-color: #403f3f;*/
	background-image: url("../images/arrow_black.svg");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 7px 14px;
}
a.btn:hover{
	background-position: right 8px center;
}


/* 各セクション 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜*/

/* 共通設定 */
section h1:before{
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
}
section h1{
	line-height: 2.8;
	font-weight: normal;
}



/* INTRODUCTION */
#INTRODUCTION #lead{
text-align: center;
	width: 100%;
	max-width: 1150px!important;
	font-size: 24px;
	line-height: 1.8;
	margin-bottom: 50px;
	font-weight: 500;
}

#INTRODUCTION h1{
	width: 100%;
	max-width: 700px;
	text-align: left;
	font-size: 21px;
	line-height: 2;
	margin: 0 auto 24px;
	padding: 0;
}
#INTRODUCTION h1 span{
	display: inline-block;
	border-bottom: solid 3px #496f67;
	padding-bottom: 0px;
}
#INTRODUCTION ul{
	width: 100%;
	max-width: 700px;
	text-align: left;
	font-size: 18px;
	margin: auto;
	line-height: 30px;
}
#INTRODUCTION li{
	list-style: none;
	padding-left: 32px;
	background: url("../images/checkmark.svg") no-repeat;
	background-position: left center;
	background-size: 20px;
}

/* コンテンツボタン */
#CONTENTSBTN{
	display: flex;
	margin: 0 auto 120px;
	
}
#CONTENTSBTN a{
	position: relative;
	display: inline-block;
	width: 25%;
	/*min-width: 250px;*/
	height: 295px;
	margin: 0;
	text-decoration: none;
	
	overflow: hidden;
		
}
#CONTENTSBTN a span.en{
	line-height: 225px;
	font-size: max(20px, calc(5vw / 2));
	font-weight: normal;
	letter-spacing: 0.05em;
	color: #FFF;
	opacity: 1;
	transition: all 0.3s linear;
}
#CONTENTSBTN a.ready span.en{
	opacity: 0;
}
#CONTENTSBTN a::before{
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 225px;
	mix-blend-mode: multiply;
	z-index: -1;
	transition: all 0.2s ease-out;
	background-color: rgba(128, 128, 128, 0.6)!important;
	
}
#CONTENTSBTN a.ready::before{
	background-color: rgba(128, 128, 128, 0)!important;
}
#CONTENTSBTN a::after{
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 225px;
	
	background-size: cover;
	background-position: center center;
	
	
	mix-blend-mode: multiply;
	z-index: -1;
	
	/*filter: grayscale(0%);*/
	transition: all 0.2s linear;
}
#CONTENTSBTN a.ready::after{
	/*filter: grayscale(100%);*/
}
#CONTENTSBTN a:hover::after{
	transform: scale(105%);
}
#CONTENTSBTN a span.ja{
	content: "";
	position: absolute;
	top: 225px;
	left: 0px;
	display: inline-block;
	width: 100%;
	height: 70px;
	line-height: 70px;
	color: #FFF;
	font-size: 16px;
	background-color: #403f3f;
	background-image: url("../images/arrow_white.svg");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 7px 14px;
	letter-spacing: 0em;
	border: solid 1px #403f3f;
	
	transition: all 0.2s linear;
}
#CONTENTSBTN a:hover span.ja{
	background-color: #111;
	background-position: right 10px center;
	border: solid 1px #111;
}
#CONTENTSBTN a:nth-child(1)::after{
	background-image: url("../images/ctbtn1.png");
}
#CONTENTSBTN a:nth-child(1)::before{
	/*background-color: rgba(73, 111, 103, 0.5);*/
}
#CONTENTSBTN a:nth-child(2)::after{
	background-image: url("../images/ctbtn2.png");
}
#CONTENTSBTN a:nth-child(2)::before{
	/*background-color: rgba(177, 158, 75, 0.6);*/
}
#CONTENTSBTN a:nth-child(3)::after{
	background-image: url("../images/ctbtn3.png");
}
#CONTENTSBTN a:nth-child(3)::before{
	/*background-color: rgba(41, 145, 200, 0.4);*/
}
#CONTENTSBTN a:nth-child(4)::after{
	background-image: url("../images/ctbtn4.png");
}
#CONTENTSBTN a:nth-child(4)::before{
	/*background-color: rgba(125, 39, 45, 0.3);*/
}
#CONTENTSBTN a:hover::before{
	background-color: rgba(128, 128, 128, 0.8);
}



/* メッセージ */
#MESSAGE h1:before{
	content:"MESSAGE";
	color: #000!important;
}
#MESSAGE h1{
	width: 100%;
	max-width: 840px;
	margin: auto!important;
	font-size: 32px;
	padding: 0!important;
	color: #000!important;
	transform: translateY(0);
	transition: all 0.4s ease-out;
}
#MESSAGE.ready h1{
	transform: translateY(10%);
	opacity: 0;
}
#MESSAGE h1:after{
	content:"";
	display: block;
	width: 120px;
	height: 2px;
	background-color: #000!important;
	margin: auto;
	margin-bottom: 80px;
	transition: all 0.4s 0.4s ease;
}
#MESSAGE.ready h1::after{
	width: 0px;
}
#MESSAGE p{
	font-size: 18px;
	line-height: 2.5;
	width: 100%;
	max-width: 650px;
}
#MESSAGE p:last-of-type{
	font-size: 16px;
	text-align: right;
	margin: 3em auto 0;
	line-height: 2;
}


/* 以下のコンテンツ部の共通設定 */
section.common .section_inner {
	position: relative;
	width: 100%;
	height: 600px;
	clip-path: inset(0px);
}
section.common .section_image{
	position:fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100vw;
	height: 100vh;
	background-size: cover;
	background-position: center bottom;
	
	z-index: -1;
	filter: brightness(0.7);
	
	transition: all 0.2s linear;
}
section.common.ready .section_image{
	filter: brightness(1);
}
section.common h1:before{
	color: #FFF;
}
section.common h1{
	width: 100%;
	height: 600px;
	padding: 5.5em 0 0;
	margin: auto;
	font-size: 40px;
	font-weight: normal;
	color: #FFF;
	margin-bottom: 80px;
	opacity: 1;
	transform: translateY(0%);
	transition: all 0.4s 0.4s ease-out;
}
section.common.ready h1{
	opacity: 0;
	transform: translateY(5%);
}
section.common h1::after{
	content:"";
	display: block;
	width: 100px;
	height: 2px;
	background-color: #FFF;
	margin: auto;
	margin-bottom: 50px;
	transition: all 0.6s 0.6s ease;
}
section.common.ready h1::after{
	width: 0px;
}
section.common h2{
	position: relative;
	width: 100%;
	height: 36px;
	max-width: 840px;
	text-align: left;
	font-size: 32px;
	font-weight: normal;
	line-height: 36px;
	margin: 60px auto 40px;
	padding-left: 3px;
	transform: translateX(0);
	opacity: 1;
	
	transition: all 0.5s ease-out;
}
section.common h2.ready{
	padding-left: 3em;
	opacity: 0;
}
section.common h2 span{
	
	display: block;
	width: 100%;
	height: 100%;
	padding-left: 24px;
	
	z-index: -1;
	
	transform: translateX(0%);
	
	transition: all 0.5s ease-out;
}
section.common h2.ready span{
	/*transform: translateX(-10%);*/
}
section.common h2::after{
	position: absolute;
	top: 0;
	left: 0px;
	display: block;
	width: 3px;
	height: 100%;
	content: "";
	background-color: #000;
	z-index: -2;
	
	transition: all 0.4s 0.8s ease-out;
}
section.common h2.ready::after{
	top: calc(50% - 1px);
	height: 0px;
}
.anim{
	opacity: 1.0;
	transform: translateX(0);
	transition: all 1s ease;	
}
.anim.ready{
	opacity: 0;
	transform: translateX(5em);
	/*max-width: 700px;*/
}


/* 会社概要 */
#COMPANY .section_image{
	background-image: url("../images/titlebg_company.jpg");
}
#COMPANY h1:before{
	content:"COMPANY";
}


/* 業務実績 */
#WORKS .section_image{
	background-image: url("../images/titlebg_works.jpg");
}
#WORKS h1:before{
	content:"WORKS";
}


/* リクルート */
#RECRUIT .section_image{
	background-image: url("../images/titlebg_recruit.jpg");
}
#RECRUIT h1:before{
	content:"RECRUIT";
}
#RECRUIT table{
	margin-bottom: 60px;
}


/* お問い合わせ */
#CONTACT .section_image{
	background-image: url("../images/titlebg_contact.jpg");
}
#CONTACT h1:before{
	content:"CONTACT";
}
#CONTACT iframe{
	width: 100%;
	max-width: 840px;
	border: solid 1px #CCC;
	height: 162px;
}
#formbox{
	position: relative;
	width: 100%;
	max-width: 840px;
	text-align: left;
	margin: 30px auto ;
	line-height: 2;
}
select{
	appearance: none;
	/*background: #F00;*/
	position: relative;
	background: none;
}
select::-ms-expand {
  display: none; /* デフォルトの矢印を非表示(IE用) */
}
/* セレクトボックスの矢印デザイン変更 */
.selectwrap::before {
  border-bottom: 4.5px solid #666;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  content: "";
  position: absolute;
  right: 9px;
  top: 43px;
  width: 0;
  z-index: 8;
}
.selectwrap::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4.5px solid #666;
  content: "";
  position: absolute;
  right: 9px;
  top: 52px;
  width: 0;
  z-index: 9;
}
select option:first-child{
	/*color: #CCC;
	opacity: 0.5;*/
}
select,
input{
	border: solid 1px #CCC;
	border-radius: 0px;
	width: 100%!important;
	height: 36px;
	margin-bottom: 24px;
	display: block;
	font-size: 18px;
	padding-left: 4px;
	font-weight: normal;
}
input.btn{
	width: 48%!important;
	height: 60px;
	
	font-size: 16px;
	text-align: center;
	color: #FFF;
	display: inline-block;
	
	appearance: none;
	border: none;
	border-radius: 0;
	
	background-color: #403F3F;
	background-image: url("../images/arrow_white.svg");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 7px 14px;
	
	transition: all 0.3s ease;
}
input.btn:hover{
	background-color: #111;
	background-position: right 10px center;
}
input[type="submit"]{
	margin-right: 4%;
}
textarea{
	border: solid 1px #CCC;
	border-radius: 0px;
	width: 100%!important;
	height: 180px!important;
	margin-bottom: 30px;
	display: block;
	font-size: 18px;
	padding: 4px;
}


/**/
#SNS{
	position: relative;
	height: 700px;
	padding: 100px 0;
	margin-bottom: 0;
	clip-path: inset(0);
}
#SNS::before,
#SNS::after{
	position: fixed;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
}
#SNS::before{
	mix-blend-mode: multiply;
	/*background-image: url("../images/dot.png");*/
	background-position: left top;
	z-index: -1;
}
#SNS::after{
	background-image: url("../images/titlebg_facebook.jpg");
	background-size: cover;
	background-position: center bottom;
	z-index: -2;
}