@charset "utf-8";
/*
001: Page Title Block
002: Page Block
003: Page Sub Title Block
004: Page Tab Block
005: Recruit Left Block
006: Recruit Right Block
007: Contact Form Block
*/
/*---------------------------------------
	001: Page Block
---------------------------------------*/
#section1 {
	height						: 100vh;
	height						: 360px;
}
#section1:before {
	display						: block;
	position					: fixed;
	top							: 0;
	width						: 100%;
	height						: 100%;
	z-index						: -1;
	content						: "";
}


/*---------------------------------------
	002: Page Title Block
---------------------------------------*/
#page_title_block {
	display						: -ms-flexbox;
	display						: flex;
	-ms-flex-wrap				: wrap;
	flex-wrap					: wrap;
	position					: relative;
}
#page_title_box {
	position					: absolute;
	top							: 160px;
	left						: 10px;
	right						: 0;
}
h1#main_title {
	display						: inline-block;
	font-family					: 'Frank Ruhl Libre', serif;
	font-size					: 40px;
	font-size					: 4.0rem;
	font-weight					: 300;
	color						: #FFF;
	margin-bottom				: 20px;
}
h1#main_title::before {
	position					: absolute;
	top							: 55px;
	left						: 0;
	width						: 70px;
	height						: 2px;
	background					: #FFF;
	content						: "";
}
p#sub_title {
	font-size					: 12px;
	font-size					: 1.2rem;
	color						: #EEE;
}


/*---------------------------------------
	003: Page Content Block
---------------------------------------*/
#section2 {
	position						: relative;
	background-image				: url(../images/bg/bg_page_top.png), url(../images/bg/bg_page_bottom.png), url(../images/bg/section_one.jpg);
	background-position				: right top, left bottom, center top;
	background-repeat				: no-repeat, no-repeat, repeat;
	background-size					: 280px, 280px, auto;
	padding-top						: 30px;
	padding-bottom					: 30px;
}
article#content_block {
	display						: -ms-flexbox;
	display						: flex;
	-ms-flex-wrap				: wrap;
	flex-wrap					: wrap;
	padding-left				: 0;
	padding-right				: 0;
}


/*---------------------------------------
	004: Content Title Block
---------------------------------------*/
h2#content_title {
    font-size						: 13px;
    font-size						: 1.3rem;
    font-weight						: 400;
    letter-spacing					: 2px;
	color							: #727285;
    margin-top						: 0;
    margin-bottom					: 25px
}
h2#content_title::after {
    display							: block;
    font-family						: 'Frank Ruhl Libre', serif;
    font-size						: 22px;
    font-size						: 2.2rem;
	color							: #525263;
    text-transform					: uppercase;
    letter-spacing					: 3px;
    margin-top						: 7px;
    content							: attr(data-title)
}
h2#content_title:before {
    position						: absolute;
    left							: 10px;
    top								: 55px;
    width							: 70px;
    height							: 2px;
	background						: #525263;
    content							: ""
}


/*---------------------------------------
	005: Recruit Left Block
---------------------------------------*/
.recruit_img {
	margin-bottom						: 45px;
}
@font-face {
	font-family							: 'slick';
	font-weight							: normal;
	font-style							: normal;
	src									: url('../font/slick/slick.eot');
	src									: url('../font/slick/slick.eot?#iefix') format('embedded-opentype'), url('../font/slick/slick.woff') format('woff'), url('../font/slick/slick.ttf') format('truetype'), url('../font/slick/slick.svg#slick') format('svg');
}
.slick-loading .slick-list {
	background						: #fff url(../images/slider/ajax-loader.gif) center center no-repeat;
}
/*基本設定*/
.slick-slider{
position:relative;
display:block;
box-sizing:border-box;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-touch-callout:none;
-khtml-user-select:none;
-ms-touch-action:pan-y;
touch-action:pan-y;
-webkit-tap-highlight-color:transparent
}
.slick-list{
position:relative;
display:block;
overflow:hidden;
margin:0;
padding:0
}
.slick-list:focus{
outline:none
}
.slick-list.dragging{
cursor:pointer;
cursor:hand
}
.slick-slider .slick-track,.slick-slider .slick-list{
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
transform:translate3d(0,0,0)
}
.slick-track{
position:relative;
top:0;
left:0;
display:block;
margin-left:auto;
margin-right:auto
}
.slick-track:before,.slick-track:after{
display:table;
content:''
}
.slick-track:after{
clear:both
}
.slick-loading .slick-track{
visibility:hidden
}
.slick-slide{
display:none;
float:left;
height:100%;
min-height:1px
}
[dir='rtl'] .slick-slide{
float:right
}
.slick-slide img{
display:block
}
.slick-slide.slick-loading img{
display:none
}
.slick-slide.dragging img{
pointer-events:none
}
.slick-initialized .slick-slide{
display:block
}
.slick-loading .slick-slide{
visibility:hidden
}
.slick-vertical .slick-slide{
display:block;
height:auto;
border:1px solid transparent
}
.slick-arrow.slick-hidden{
display:none
}

/* Arrows */
.slick-prev,.slick-next{
font-size:0;
line-height:0;
position:absolute;
top:50%;
display:block;
width:20px;
height:20px;
padding:0;
-webkit-transform:translate(0,-50%);
-ms-transform:translate(0,-50%);
transform:translate(0,-50%);
cursor:pointer;
color:transparent;
border:none;
outline:none;
background:transparent
}
.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{
color:transparent;
outline:none;
background:transparent
}
.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{
opacity:1
}
.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{
opacity:.25
}
.slick-prev:before,
.slick-next:before{
font-family:'slick';
font-size:20px;
line-height:1;
opacity:.75;
color:#FFF;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
.slick-prev{
left:25px;
z-index:1;
}
[dir='rtl'] .slick-prev{
right:-25px;
left:auto
}
.slick-prev:before{
content:'←'
}
[dir='rtl'] .slick-prev:before{
content:'→'
}
.slick-next{
right:25px;
z-index:1;
}
[dir='rtl'] .slick-next{
right:auto;
left:-25px
}
.slick-next:before{
content:'→'
}
[dir='rtl'] .slick-next:before{
content:'←'
}
.slick-dotted.slick-slider{
/*
margin-bottom:30px	
*/
}
.slick-dots{
position:absolute;
bottom:-30px;
display:block;
width:100%;
padding:0;
margin:0;
list-style:none;
text-align:center
}
.slick-dots li{
position:relative;
display:inline-block;
width:20px;
height:20px;
margin:0 5px;
padding:0;
cursor:pointer
}
.slick-dots li button{
font-size:0;
line-height:0;
display:block;
width:20px;
height:20px;
padding:5px;
cursor:pointer;
color:transparent;
border:0;
outline:none;
background:transparent
}
.slick-dots li button:hover,.slick-dots li button:focus{
outline:none
}
.slick-dots li button:hover:before,.slick-dots li button:focus:before{
opacity:1
}
.slick-dots li button:before{
font-family:'slick';
font-size:13px;
font-size:1.3rem;
line-height:20px;
position:absolute;
top:0;
left:0;
width:20px;
height:20px;
content:'•';
text-align:center;
opacity:.25;
color:#525263;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
.slick-dots li.slick-active button:before{
opacity:.75;
color:#525263
}
.slick-slide {
	text-align						: center;
}
.slick-slide img {
	display							: inline-block;
}
.slides img {
	width							: 100%;
	height							: auto;
}


/*---------------------------------------
	006: Recruit Right Block
---------------------------------------*/
table#recruit_table {
    width						: 100%;
    border-collapse				: collapse;
    text-align					: left;
    border-spacing				: 0;
    margin-bottom				: 30px;
    line-height					: 180%
}
table#recruit_table th,
table#recruit_table td {
    font-size					: 16px;
    font-size					: 1.6rem;
    font-weight					: 300;
    vertical-align				: middle;
    margin						: 0;
    padding						: 15px
}
table#recruit_table th {
    color						: #FFF;
    letter-spacing				: 2px
}
table#recruit_table td,
table#recruit_table td a,
table#recruit_table a:hover {
    color						: #525263
}


/*---------------------------------------
	007: View More Block
---------------------------------------*/
.view_more {
	display						: inline-block;
	position					: relative;
	font-size					: 16px;
	font-size					: 1.6rem;
	text-align					: center;
	text-decoration				: none;
	color						: #FFF;
    background					: #525263;
	width						: 100%;
	height						: 60px;
	line-height					: 60px;
	-moz-transition				: all 0.6s;
	-o-transition				: all 0.6s;
	-webkit-transition			: all 0.6s;
	transition					: all 0.6s;
	overflow					: hidden;
	z-index						: 0;
}
.view_more:hover {
	color						: #fff;
}
.view_more::after {
	position					: absolute;
	top							: 24px;
	right						: 10px;
	background					: url("../images/svg/view/arrow.svg") no-repeat right center / 12px 12px;
	width						: 12px;
	height						: 12px;
	content						: '';
	z-index						: 2;
}
.view_more::before {
	position					: absolute;
	top							: 0;
	left						: 0;
	width						: 120%;
	height						: 100%;
	background					: #727288;
	transform-origin			: left top;
	transform					: skewX(-30deg) scale(0, 1);
	transition					: transform .3s;
	content						: '';
	z-index						: -1;
}
.view_more:hover::before {
	transform-origin			: left top;
	transform					: skewX(-30deg) scale(1, 1);
}





@media only screen and (max-width: 767px) {
/*---------------------------------------
	006: Recruit Right Block
---------------------------------------*/
table.recruit_list th {
	display							: block;
	width							: 100%;
}
table.recruit_list td {
	display							: list-item;
	list-style-type					: none;
	width							: 100%;
}
}






@media only screen and (min-width: 768px) {
/*---------------------------------------
	001: Page Block
---------------------------------------*/
#section1 {
	height						: 100vh;
	height						: 500px;
}
#section1:before {
	content						: "";
	position					: fixed;
	top							: 0;
	display						: block;
	z-index						: -1;
	width						: 100%;
	height						: 100%;
}


/*---------------------------------------
	002: Page Title Block
---------------------------------------*/
#page_title_block {
	display						: -ms-flexbox;
	display						: flex;
	-ms-flex-wrap				: wrap;
	flex-wrap					: wrap;
	position					: relative;
}
#page_title_box {
	position					: absolute;
	top							: 220px;
	left						: 10px;
	right						: 0;
}
h1#main_title {
	display						: block;
	font-family					: 'Frank Ruhl Libre', serif;
	font-size					: 58px;
	font-size					: 5.8rem;
	color						: #FFF;
	font-weight					: 300;
    letter-spacing				: 2px;
	margin-bottom				: 20px;
}
h1#main_title::before {
	position					: absolute;
	top							: 73px;
	left						: 0;
	width						: 70px;
	height						: 2px;
    background					: #FFF;
	content						: "";
}
p#sub_title {
	font-size					: 13px;
	font-size					: 1.3rem;
	color						: #EEE;
}


/*---------------------------------------
	002: Page Block
---------------------------------------*/
#section2 {
	position						: relative;
	background-image				: url(../images/bg/bg_page_top.png), url(../images/bg/bg_page_bottom.png), url(../images/bg/section_one.jpg);
	background-position				: right top, left bottom, center top;
	background-repeat				: no-repeat, no-repeat, repeat;
	background-size					: 600px, 600px, auto;
	padding-top						: 60px;
	padding-bottom					: 60px;
}
#content_block {
	padding-left					: 0;
	padding-right					: 0;
}
}




@media only screen and (max-width: 991px) {
/*---------------------------------------
	006: Recruit Right Block
---------------------------------------*/
table#recruit_table th {
	display						: block;
	width						: 100%;
	background					: #525263
}

table#recruit_table td {
	display						: list-item;
	list-style-type				: none;
	width						: 100%
}
}




@media only screen and (min-width: 992px) {
/*---------------------------------------
	005: Recruit Left Block
---------------------------------------*/
slick-dots::after {
	content							: "";
	display							: table;
	clear							: both;
}
.slick-dots {
	position						: static;
	bottom							: 0px;
	display							: block;
	width							: 100%;
	padding							: 0;
	list-style						: none;
	font-size						: 0;
	text-align						: center;
}
.slick-dots li {
	float							: left;
	position						: relative;
	display							: inline-block;
	left							: 0;
	width							: 20%;
	height							: auto;
	margin							: 0;
}
.slick-dots li button.thumbnail {
	width							: 100%;
	height							: auto;
	padding							: 0;
}
.slick-dots li button.thumbnail img {
	width							: 100%;
	height							: auto;
	opacity							: 1;
}
.slick-dots li button.thumbnail:hover img,
.slick-dots li.slick-active button.thumbnail img {
	opacity							: 0.6;
}
.slick-dots li button.thumbnail::before {
	display							: none;
}


/*---------------------------------------
	006: Recruit Right Block
---------------------------------------*/
table#recruit_table {
	width						: 100%;
	border-collapse				: collapse;
	border						: solid 1px #EEE
}
table#recruit_table tr {
	border-bottom				: solid 1px #EEE
}
table#recruit_table tr:last-child {
	border-bottom				: none
}
table#recruit_table th,
table#recruit_table td {
	font-size					: 15px;
	font-size					: 1.5rem;
	font-weight					: 400;
	vertical-align				: middle
}
table#recruit_table th {
	position					: relative;
	width						: 30%;
	background					: #525263;
	color						: #FFF;
	padding						: 15px 10px
}
table#recruit_table th:after {
	display						: block;
	width						: 0;
	height						: 0;
	position					: absolute;
	top							: calc(50% - 10px);
	right						: -9px;
	border-left					: 10px solid #525263;
	border-top					: 10px solid transparent;
	border-bottom				: 10px solid transparent;
	content						: ""
}
table#recruit_table td {
	text-align					: left;
	width						: 70%;
	padding						: 15px 10px 15px 15px;
	background					: rgba(255, 255, 255, 0.4)
}
}