/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: '';
  content: none;
}

q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
}
@charset "UTF-8";
/* font */
/* color*/
.cf, header #header, .category_wrapp .layout1 .img02, .category_wrapp .layout1 .tx, .company_wrapp .inner .philosophy dl, .company_wrapp .inner .message, .group_wrapp article {
	zoom: 1;
}
.cf:after, header #header:after, .category_wrapp .layout1 .img02:after, .category_wrapp .layout1 .tx:after, .company_wrapp .inner .philosophy dl:after, .company_wrapp .inner .message:after, .group_wrapp article:after {
	display: block;
	content: "";
	clear: both;
}

.outer, .kv_mv.band > div {
	width: 1400px;
	margin: 0 auto;
}

.inner {
	width: 1000px;
	margin: 0 auto;
}

.hover, header #header h1 a:hover, header #header ul#nav ul li a:hover, .category_wrapp .follow ul li a:hover, .group_wrapp article .ex ul li a:hover {
	opacity: .6;
	transition: .7s;
}

/* body*/
body {
	font-family: '\30D2\30E9\30AE\30CE\89D2\30B4\30B7\30C3\30AF   Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, '\FF2D\FF33   \FF30\30B4\30B7\30C3\30AF', 'MS PGothic', sans-serif;
	word-break: break-all;
	overflow-x: hidden;
	overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	width: 100%;
	height: auto;
	vertical-align: top;
}

/* animation */
@keyframes fadeInDown {
  from {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
  }
  to {
		opacity: 1;
		transform: none;
  }
}
@keyframes fadeInUp {
  from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
  }
  to {
		opacity: 1;
		transform: none;
  }
}
.animated, #top .kv ul h5 {
	animation-duration: 1s;
	animation-fill-mode: both;
}

/* header*/
header {
	background: #666;
}
header #header {
	max-width: 1600px;
	margin: 0 auto;
	background: #666;
}
@media screen and (max-width: 1280px) {
  header #header {
		min-width: 1000px;
  }
}
header #header h1 {
	float: left;
	vertical-align: middle;
	padding: 37px 0 37px 100px;
}
@media screen and (max-width: 1280px) {
  header #header h1 {
		padding: 37px 0 37px 20px;
  }
}
header #header h1 img {
	width: 145px;
}
header #header h1 a {
	display: block;
}
header #header ul#nav {
	float: right;
	vertical-align: middle;
}
header #header ul#nav > li {
	font-family: "Asap", sans-serif;
	font-size: 18px;
	display: inline-block;
	vertical-align: top;
	margin-right: 50px;
	color: #fff;
	position: relative;
	white-space: nowrap;
	text-align: center;
}
@media screen and (max-width: 1280px) {
  header #header ul#nav > li {
		font-size: 14px;
  }
}
header #header ul#nav > li a {
	display: block;
	color: #fff;
	text-align: left;
	position: relative;
	text-align: center;
	z-index: 2;
	padding: 42px 0;
}
header #header ul#nav > li a.pnone {
	pointer-events: none;
}
header #header ul#nav > li:last-child {
	margin-right: 100px;
}
@media screen and (max-width: 1280px) {
  header #header ul#nav > li:last-child {
		margin-right: 20px;
  }
}
header #header ul#nav > li:after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 30%;
	width: 0;
	height: 100%;
	border-bottom: 3px solid #fff;
	transition-delay: .1s;
	transition: all .5s ease;
}
header #header ul#nav > li:hover:after {
	left: 0;
	bottom: 30%;
	width: 100%;
}
header #header ul#nav > li.active span {
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
	font-weight: bold;
	font-size: 16px;
}
@media screen and (max-width: 1280px) {
  header #header ul#nav > li.active span {
		font-size: 14px;
  }
}
header #header ul#nav ul {
	display: none;
	position: absolute;
	top: 102px;
	left: -11px;
	z-index: 100;
}
header #header ul#nav ul li {
	background: #7F8080;
	width: 160px;
}
header #header ul#nav ul li a {
	display: block;
	text-align: left;
	padding: 14px;
}
header #header ul#nav ul li a:hover {
	background: #C6C6C6;
}

/* top*/
#top {
  /* end top_layout */
}
#top .kv {
	height: 100vh !important;
	pointer-events: none;
	position: relative;
}
#top .kv:before {
	content: '';
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	position: absolute;
	z-index: 999;
	transition-delay: .2s;
	transition: all 4s ease;
}
#top .kv ul {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-align: start;
	align-items: flex-start;
	-ms-flex-pack: justify;
	justify-content: space-between;
	position: relative;
	font-size: 0;
	height: 20vh;
}
#top .kv ul a {
	position: relative;
}
#top .kv ul h4 {
	position: absolute;
	color: #fff;
	font-family: "Asap", sans-serif;
	font-weight: bold;
	font-size: 8vw;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	z-index: 999;
	white-space: nowrap;
	transition: .8s;
}
#top .kv ul h4.realestate {
	left: 15%;
	letter-spacing: .27em;
}
#top .kv ul h4.stay {
	left: 15%;
	letter-spacing: 2.1em;
}
#top .kv ul h4.food {
	left: 15%;
	letter-spacing: 1.9em;
}
#top .kv ul h4.sports {
	left: 15%;
	letter-spacing: 1em;
}
#top .kv ul h4.event {
	left: 15%;
	letter-spacing: 1.4em;
}
#top .kv ul h5 {
	position: absolute;
	color: #fff;
	font-weight: bold;
	z-index: 999;
	opacity: 0;
	transform: translateY(-50%);
  /* transition: all 3s ease;*/
}
#top .kv ul h5.tx1 {
	left: 22%;
	top: 0;
	font-family: "Asap", sans-serif;
	letter-spacing: .02em;
	font-size: 6vw;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-name: fadeInDown;
}
#top .kv ul h5.tx2 {
	bottom: 0;
	left: 15%;
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
	letter-spacing: .02em;
	font-size: 4vw;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-name: fadeInUp;
}
#top .kv ul h5.active {
	opacity: 1;
}
#top .kv ul li {
	width: 25%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
#top .kv ul li video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	line-height: 0;
	font-size: 0;
	margin-left: -320px;
	margin-top: -180px;
}
#top .kv ul.active h4 {
	opacity: 1;
}
#top .kv ul.active:after {
	content: '';
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.41);
	position: absolute;
}
#top .kv.hoge {
	pointer-events: auto;
}
#top .kv.hoge:before {
	background: transparent;
}
#top .top_lead {
	margin-top: 150px;
	/*background: url(../img/top/top_lead_bg.jpg) no-repeat;*/
	background-size: cover;
	margin-bottom: 300px;
}
#top .top_lead p {
	width: 690px;
	margin: 0 auto;
	padding: 230px 0;
}
#top .top_layout {
  /*end article */
  /*
  @media ( max-width : 860px ){
    // set to 2 column
    article{
  	width:calc(50vw - 3.9vw);
  	height:38vw;
    }
  }
  @media ( max-width : 667px ){
    // set to 1 column
    article{
  	width:calc(100vw - 3.9vw);
  	height:60vw;
    }
  }
  */
}
#top .top_layout a {
	display: block;
	width: 1200px;
	margin: 0 auto;
}
#top .top_layout h3 {
	text-align: center;
	font-family: "Asap", sans-serif;
	font-weight: bold;
	font-size: 70px;
	margin: 150px 0 0;
	letter-spacing: .01em;
}
#top .top_layout h3 span {
	display: block;
	font-size: 30px;
	margin: 15px 0 50px;
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
	font-weight: bold;
}
#top .top_layout .wok_panel-body {
	overflow: hidden;
}
#top .top_layout article figure::after, #top .top_layout article figure .image, #top .top_layout article figure .lighting, #top .top_layout article .item-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#top .top_layout article .item-btm-content, #top .top_layout .to_recruit {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
#top .top_layout article .item-wrapper, #top .top_layout article .item-content, #top .top_layout article .item-btm-content, #top .top_layout .to_recruit {
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}
#top .top_layout article .item-wrapper, #top .top_layout article figure, #top .top_layout article .item-content, #top .top_layout article .item-btm-content, #top .top_layout .to_recruit {
	transform-style: preserve-3d;
}
#top .top_layout article {
	position: relative;
  /* display:inline-block;*/
  /* vertical-align:top;*/
	width: 1200px;
	height: 475px;
	margin: 0 auto;
	perspective: 1200px;
	cursor: pointer;
}
#top .top_layout article .image {
	/*background: url(../img/top/top_what_img.jpg) no-repeat;*/
	background-size: cover;
}
#top .top_layout article .item-wrapper {
	width: 100%;
	height: 100%;
}
#top .top_layout article .item-wrapper.enter.ease, #top .top_layout article .item-wrapper.leave {
	transition: all .1s ease-in;
}
#top .top_layout article figure {
	width: 100%;
	height: 100%;
}
#top .top_layout article figure::after {
	content: '';
	background-color: rgba(0, 0, 0, 0.06);
}
#top .top_layout article figure .image {
	background-position: center;
	background-size: cover;
}
#top .top_layout article figure .lighting {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
}
#top .top_layout article .item-content {
	pointer-events: none;
	color: #fff;
	z-index: 999;
  /*text-shadow:0 3px 10px rgba(#000, .76); */
}
#top .top_layout article .item-content h4 {
	font-family: "Asap", sans-serif;
	font-size: 41px;
	padding: 50px 0 0 50px;
	letter-spacing: .06em;
	line-height: 1.3;
  /* transform: translateZ(100px);*/
}
#top .top_layout article .item-btm-content {
	pointer-events: none;
	color: #fff;
	z-index: 999;
  /*text-shadow:0 3px 10px rgba(#000, .76); */
}
#top .top_layout article .item-btm-content p {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 32px;
	padding: 0 50px 50px 0;
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
  /* transform: translateZ(100px);*/
}
#top .top_layout article .item-btm-content p span {
	margin-left: 20px;
}
#top .top_layout article .item-btm-content p span img {
	width: 40px;
	height: 40px;
}
#top .to_recruit {
	margin: 250px 0 300px;
	position: relative;
}
#top .to_recruit h4 {
	pointer-events: none;
	position: absolute;
	color: #fff;
	z-index: 999;
	text-align: center;
	font-family: "Asap", sans-serif;
	font-size: 70px;
	font-weight: bold;
	line-height: 1.6;
	top: 30%;
	left: 30%;
	transform: translateZ(100px);
}
#top .to_recruit h4 span {
	display: block;
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
	font-size: 30px;
}
#top .to_recruit h4 icon {
	display: block;
	margin-top: 50px;
}
#top .to_recruit h4 icon img {
	width: 40px;
}

/* category*/
.slug {
	padding: 150px 0;
}

.kv_mv {
	position: relative;
	width: 100%;
}
.kv_mv h2 {
	position: absolute;
	font-family: "Asap", sans-serif;
	font-size: 100px;
	font-weight: bold;
	margin-right: -1.8em;
	color: #fff;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	white-space: nowrap;
}
.kv_mv h2 span {
	letter-spacing: 1.8em;
}
.kv_mv #video {
	width: 100%;
	left: 0;
}
.kv_mv.company {
	/*background: url(../img/company/company_kv_bg.jpg) no-repeat;*/
	background-size: cover;
}
.kv_mv.group {
	/*background: url(../img/group/group_kv_bg.jpg) no-repeat;*/
	background-size: cover;
}
.kv_mv.recruit {
	/*background: url(../img/recruit/recruit_kv_bg.jpg) no-repeat;*/
	background-size: cover;
}

.category_wrapp {
	position: relative;
}
.category_wrapp .follow {
	position: absolute;
	top: 100px;
	background: #ADADAD;
	color: #fff;
	padding: 50px 50px 50px 40px;
	box-sizing: border-box;
	width: 380px;
	transition: .7s;
	z-index: 0;
}
@media screen and (max-width: 1280px) {
  .category_wrapp .follow {
		display: none;
  }
}
.category_wrapp .follow.right {
	right: -340px;
}
.category_wrapp .follow.right h7 {
	left: 4%;
	-webkit-writing-mode: vertical-rl;
	    -ms-writing-mode: tb-rl;
	        writing-mode: vertical-rl;
}
.category_wrapp .follow.right:hover {
	right: 0;
	transition: .7s;
}
.category_wrapp .follow.left {
	left: -340px;
}
.category_wrapp .follow.left h7 {
	right: 4%;
	-webkit-writing-mode: vertical-rl;
	    -ms-writing-mode: tb-rl;
	        writing-mode: vertical-rl;
	transform: rotate(180deg);
}
.category_wrapp .follow.left:hover {
	left: 0;
	transition: .7s;
}
.category_wrapp .follow figure {
	width: 400px;
	height: 225px;
}
.category_wrapp .follow h6 {
	font-size: 60px;
	font-family: "Asap", sans-serif;
	letter-spacing: .14em;
	border-bottom: 1px solid #fff;
	padding-bottom: 30px;
	margin-bottom: 20px;
}
.category_wrapp .follow h6 span {
	display: block;
	font-size: 15px;
	margin-bottom: 10px;
	letter-spacing: .2em;
}
.category_wrapp .follow h7 {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	letter-spacing: .2em;
}
.category_wrapp .follow ul {
	line-height: 1.6;
	margin-bottom: 50px;
}
.category_wrapp .follow ul li {
	font-size: 35px;
	font-family: "Asap", sans-serif;
	margin-bottom: 20px;
}
.category_wrapp .follow ul li a {
	color: #fff;
	display: block;
	cursor: pointer;
}
.category_wrapp .follow ul li span {
	font-size: 18px;
	display: block;
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
}
.category_wrapp .follow .direction {
	width: 40px;
	height: 40px;
}
.category_wrapp .follow.fixed {
	position: fixed;
	top: 150px;
}
.category_wrapp .follow.right.active h7 {
	right: 1%;
}
.category_wrapp .follow.left.active h7 {
	right: initial;
	left: 2%;
}
.category_wrapp .layout1 {
	margin: 0 auto 150px;
}
.category_wrapp .layout1 h3 {
	font-size: 50px;
	font-family: "Asap", sans-serif;
	font-weight: bold;
	border-bottom: 2px solid #000;
	padding-bottom: 45px;
	margin-bottom: 50px;
}
.category_wrapp .layout1 h4 {
	margin: 100px 0 80px;
}
.category_wrapp .layout1 h5 {
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
	font-size: 25px;
	font-weight: bold;
	margin-bottom: 40px;
}
.category_wrapp .layout1 .img01 {
	margin: 50px auto;
}
.category_wrapp .layout1 .img01 img.img1 {
	width: 735px;
	float: left;
}
.category_wrapp .layout1 .img01 img.img2 {
	width: 240px;
	margin-left: 25px;
}
.category_wrapp .layout1 .img02 img.img1 {
	width: 485px;
	float: left;
}
.category_wrapp .layout1 .img02 p {
	text-align: right;
	float: right;
	font-family: "Asap", sans-serif;
	font-weight: bold;
	font-size: 62.36px;
	color: #939393;
	line-height: 1.3;
	letter-spacing: .056em;
}
.category_wrapp .layout1 .img02 img.img2 {
	width: 485px;
	float: right;
	margin-top: 53px;
}
.category_wrapp .layout1 .tx {
	line-height: 2;
	color: #7F8080;
}
.category_wrapp .layout1 .tx p:first-child {
	width: 60%;
	padding-right: 3%;
	float: left;
	border-right: 1px solid #000;
}
.category_wrapp .layout1 .tx p:last-child {
	width: 33%;
	font-family: "Asap", sans-serif;
	font-size: 16px;
	padding-left: 3%;
	float: left;
}

/* company */
.kv_mv.band {
	height: 500px;
	overflow: hidden;
}
.kv_mv.band video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	line-height: 0;
	font-size: 0;
	margin-left: 0px;
	margin-top: -370px;
}
.kv_mv.band > div {
	transition: all .8s ease;
}
@media screen and (max-width: 1280px) {
  .kv_mv.band > div {
		width: 1100px;
  }
}
.kv_mv.band > div h3 {
	position: absolute;
	color: #fff;
	top: 100px;
	font-size: 50px;
	font-family: "Asap", sans-serif;
	font-weight: bold;
	letter-spacing: .1em;
	line-height: 1.2;
	z-index: 9;
}
.kv_mv.band > div h3 span {
	margin-top: 40px;
	display: block;
	font-size: 41px;
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
}

.company_wrapp .inner {
  /*end message */
}
.company_wrapp .inner .philosophy {
	border-bottom: 2px dotted #000;
}
.company_wrapp .inner .philosophy h3 {
	font-family: "Asap", sans-serif;
	font-size: 63px;
	font-weight: bold;
	letter-spacing: .08em;
}
.company_wrapp .inner .philosophy dl {
	margin: 50px 0 250px;
}
.company_wrapp .inner .philosophy dl dt {
	margin-right: 5%;
	float: left;
	font-size: 30px;
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
	font-weight: bold;
}
.company_wrapp .inner .philosophy dl dd {
	width: 75%;
	float: left;
	color: #7F8080;
	text-align: justify;
	padding-left: 5%;
	border-left: 1px solid #000;
	font-size: 19px;
	line-height: 2;
}
.company_wrapp .inner .message {
	margin: 200px 0 0;
	padding-bottom: 200px;
	border-bottom: 2px dotted #000;
}
.company_wrapp .inner .message .tx {
	width: 50%;
	float: left;
}
.company_wrapp .inner .message .tx h3 {
	display: inline-block;
	font-family: "Asap", sans-serif;
	font-size: 63px;
	font-weight: bold;
	letter-spacing: .08em;
	line-height: 1.36;
	margin-bottom: 50px;
	position: relative;
}
.company_wrapp .inner .message .tx h3:after {
	content: '';
	position: absolute;
	bottom: -50px;
	left: 0;
	height: 1px;
	width: 80%;
	background: #000;
}
.company_wrapp .inner .message .tx h4 {
	font-family: "Asap", sans-serif;
	font-size: 36px;
	font-weight: bold;
	line-height: 1.4;
	margin: 50px 0;
}
.company_wrapp .inner .message .tx h4 span {
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
	font-size: 28px;
}
.company_wrapp .inner .message .tx p {
	font-size: 19px;
	color: #7F8080;
	text-align: justify;
	line-height: 2;
}
.company_wrapp .inner .message figure {
	width: 43%;
	float: left;
	margin-left: 7%;
}
.company_wrapp .inner .message figure img {
	width: 440px;
}
.company_wrapp .inner .message figure p {
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	font-family: "Asap", sans-serif;
	margin-top: 20px;
}
.company_wrapp .inner .message figure p span {
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
	margin-left: 10px;
}
.company_wrapp .inner .profile {
	margin: 200px 0;
}
.company_wrapp .inner .profile h3 {
	text-align: center;
	font-family: "Asap", sans-serif;
	font-weight: bold;
	font-size: 63px;
	font-weight: bold;
	letter-spacing: .08em;
	margin-bottom: 100px;
}
.company_wrapp .inner .profile h3 span {
	display: block;
	font-size: 40px;
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
	margin-top: 30px;
}
.company_wrapp .inner table {
	color: #7F8080;
	text-align: left;
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
	font-size: 20px;
}
.company_wrapp .inner table tr th {
	width: 25%;
	padding: 15px 0;
}
.company_wrapp .inner table tr td {
	width: 65%;
}

.recruit_wrapp .inner .hero {
	margin-bottom: 130px;
}
.recruit_wrapp .inner .layout {
	position: relative;
}
.recruit_wrapp .inner .layout h4 {
	position: absolute;
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
	font-size: 42px;
	font-weight: bold;
	text-align: left;
	line-height: 1.6;
	opacity: 0;
	transition: all 2000ms ease-out;
}
.recruit_wrapp .inner .layout h4.active {
	opacity: 1;
}
.recruit_wrapp .inner .img1 {
	position: relative;
	text-align: right;
	margin-bottom: 100px;
}
.recruit_wrapp .inner .img1 h4 {
	top: 0;
}
.recruit_wrapp .inner .img1 h4.active {
	top: 50px;
}
.recruit_wrapp .inner .img1 img {
	width: 830px;
	text-align: right;
}
.recruit_wrapp .inner .img2 {
	text-align: left;
	margin-bottom: 200px;
}
.recruit_wrapp .inner .img2 h4 {
	right: 0;
	bottom: -100px;
}
.recruit_wrapp .inner .img2 h4.active {
	bottom: -145px;
}
.recruit_wrapp .inner .img2 img {
	width: 700px;
}
.recruit_wrapp .inner .img3 p {
	width: 700px;
	text-align: justify;
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
	color: #7F8080;
	font-size: 20px;
	line-height: 1.6;
	position: relative;
	top: -100px;
	opacity: 0;
	transition: all 2000ms ease-out;
}
.recruit_wrapp .inner .img3 p.active {
	top: 0;
	opacity: 1;
}
.recruit_wrapp .inner .goto {
	margin: 300px 0 150px;
}
.recruit_wrapp .inner .goto h3 {
	text-align: center;
	font-family: "Asap", sans-serif;
	font-size: 70px;
	font-weight: bold;
	letter-spacing: .08em;
	position: relative;
}
.recruit_wrapp .inner .goto h3 span {
	display: block;
	font-size: 40px;
	margin-top: 30px;
}
.recruit_wrapp .inner .goto h3:before {
	content: '';
	height: 1px;
	width: 240px;
	background: #000;
	position: absolute;
	top: 40px;
	left: 0;
}
.recruit_wrapp .inner .goto h3:after {
	content: '';
	height: 1px;
	width: 240px;
	background: #000;
	position: absolute;
	top: 40px;
	right: 0;
}
.recruit_wrapp .inner .goto p {
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
	text-align: center;
	color: #7F8080;
	font-size: 20px;
	line-height: 2;
	margin-top: 50px;
}

.group_wrapp article {
	margin-bottom: 150px;
}
.group_wrapp article figure {
	width: 30%;
	float: left;
}
.group_wrapp article .ex {
	width: 60%;
	float: left;
	margin-left: 100px;
}
.group_wrapp article .ex div.company_logo {
	margin-bottom: 70px;
}
.group_wrapp article .ex h4 {
	font-size: 32px;
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
	font-weight: bold;
	letter-spacing: .08em;
	margin-bottom: 30px;
}
.group_wrapp article .ex p {
	font-size: 19px;
	color: #7F8080;
	text-align: justify;
	line-height: 2;
}
.group_wrapp article .ex ul {
	border-top: 1px solid #E1E1E0;
	border-bottom: 1px solid #E1E1E0;
	margin-top: 50px;
	padding: 40px 0 50px;
}
.group_wrapp article .ex ul li {
	width: 190px;
	display: inline-block;
	margin-right: 1.5%;
}
.group_wrapp article .ex ul li:nth-child(3n) {
	margin-right: 0;
}

/* pagetop */
#pageTop {
	cursor: pointer;
	position: absolute;
	top: -50px;
	right: 0px;
	z-index: 2;
}

/* footer*/
footer {
	background: #7F8080;
	color: #fff;
}
footer #footer {
	max-width: 1600px;
	margin: 0 auto;
	background: #7F8080;
	font-family: "Asap", sans-serif;
	padding: 6% 0;
	line-height: 1.5;
	position: relative;
}
@media screen and (max-width: 1280px) {
  footer #footer {
		min-width: 1300px;
  }
}
footer #footer > div {
	width: 27%;
	padding-left: 4%;
	display: inline-block;
	vertical-align: top;
}
footer #footer > div:nth-child(2) {
	border-right: 1px solid #fff;
}
footer #footer > div:first-child {
  /* padding-left: 0;*/
}
footer #footer > div h4 {
	font-size: 20px;
	position: relative;
	padding-bottom: 9%;
	margin-bottom: 7%;
}
footer #footer > div h4:after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	background: #fff;
	bottom: 0;
	left: 0;
	transition: .7s;
}
footer #footer > div ul li {
	font-size: 16px;
	margin-bottom: 4%;
}
footer #footer > div ul li a:hover {
	color: #C6C6C6;
	transition: .3s;
}
footer #footer > div ul li a span {
	font-family: "\6E38\30B4\30B7\30C3\30AF   Medium", "Yu Gothic Medium", "\6E38\30B4\30B7\30C3\30AF\4F53", YuGothic, sans-serif;
}
footer #footer > div ul p.copy {
	margin-top: 5%;
	color: #C6C6C6;
}
footer #footer > div:hover h4:after {
	width: 25%;
}
footer #footer > div:last-child {
	margin-left: 4%;
}
footer a {
	color: #fff;
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

/* some utils */
.u--idx {
  position: fixed;
  padding: 10px;
  opacity: 0.3;
  font-size: 40px;
  color: cyan;
}

.u--stop-scrolling {
  height: 100%;
  overflow: hidden;
}

.u--closed-cotten {
  z-index: 9999;
  position: fixed;
  background: rgba(0,0,0,1);
  width: 100vw;
  height: 100vh;
  animation-duration: 4s;
  animation-name: open-cotton;
  animation-fill-mode: forwards;
}
@keyframes open-cotton {
  0% { background: rgba(0,0,0,1); }
  100% { background: rgba(0,0,0,0); }
}
.u--fallout-z-index {
  width: 0;
  height: 0;
  z-index: -1;
}
.fullvideo__video-container {}

/* start with blackscreen */
.fullvideo__video-cover {
  top:0;
  left:0;
  position: fixed;
  height: 100vh;
  width: 100vw;
  background: rgba(0,0,0,1);
  z-index: 1;
  animation-duration: 3.8s;
  animation-name: cotton-screen;
  animation-fill-mode: forwards;
}

@keyframes cotton-screen {
  0% { background: rgba(0,0,0,1); }
  100% { background: rgba(0,0,0,0); }
}

.fullvideo__video {
  /*display: none;*/
  position: fixed;
  background: transparent;
  /*top: 50%; left: 50%;*/
  /*z-index: -3;*/
  /*min-width: 100%;*/
  /*min-height: 100%;*/
  width: auto;
  height: auto;
  /*transform: translateX(-50%) translateY(-50%);*/
  background-size: cover;
}

.fullvideo__video video {
  position: fixed;
  top: 50%; left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%) translateY(-50%);
  background-size: 100% 100%;
}

/* video remote controller (only use before top page) */
.video-next__container {
  z-index: 2;
  bottom: 50px;
  left: calc(50% - (50px/2));
  position: absolute;
  width: 60px;
}

.video-next__btn {
  position: relative;
  width: 100%;
  text-transform: uppercase;
  font-family: 'Asap', sans-serif;
  letter-spacing: .03em;
  font-size: 14px;
  color:#fff;
  cursor: pointer;
}

.video-next__scroll--arrow {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -12px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.video-next__btn:hover .video-next__scroll--arrow {
  transform: rotate(-45deg);
  animation-duration: 1s;
  animation-name: move-arrow;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

@keyframes move-arrow {
  0% {
    transform: translateY(0px) rotate(-45deg);
  }
  50% {
    transform: translateY(6px) rotate(-45deg);
  }
  100% {
    transform: translateY(0px) rotate(-45deg);
  }
}

.video-next__btn a {
  /*text-align: center;*/
  display: block;
  width: 100%;
  height: 100%;
}


/* side remote */
.video-page__side {
  max-width: 30px;
  position: fixed;
  top: 40%;
  /*right: 2%;*/
  right: 57px;
  z-index: 2;
}

.video-page__side ul {
  max-width: 100%;
}

.video-page__side ul li {
  width: 30px;
  height: 3px;
}
.video-page__side ul li:nth-child(6) {
  display: none;
}

.video-page__side ul li:not(:last-child) {
  margin-bottom: 45px;
}

.video-page__side ul li a {
  background: #fff;
  display: block;
  width: 100%;
  height: 100%;
  animation-duration: .4s;
  animation-name: one-width;
}

.video-page__side ul > li:has( > a.active) { /* not working */}

/* working */
.video-page__side ul li > a:hover {
  /*margin-left: 5px;
  max-width: 20px;
  max-height: 2.5px;
  animation-duration: .4s;
  animation-name: half-width;
  animation-fill-mode: forwards;*/
  /*animation-fill-mode: forwards;*/
}

.video-page__side ul li > a.active {
  margin-left: 5px;
  max-width: 20px;
  max-height: 2.5px;
  animation-duration: .4s;
  animation-name: show-width;
  animation-fill-mode: forwards;
}

@keyframes one-width {
  0% { transform: scaleX(.5); }
  100% {transform: scaleX(1); }
}

@keyframes half-width {
  /*0% { transform: scaleX(1); }*/
  0% {transform: scaleX(.5); }
  100% {transform: scaleX(1.2); }
}

@keyframes show-width {
  0% { transform: scaleX(0); }
  100% {transform: scaleX(1); }
}

/* text contents */
.fullvideo__content {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  animation-duration: .8s;
  animation-name: darker-cotten;
  animation-fill-mode: forwards;
}

@keyframes darker-cotten {
  100% { background: rgba(0,0,0,0.0); }
}

.content__container {
  display: -ms-flexbox;
  display: flex;
  display: -ms-flexbox;
  /*width: 100vw;*/
  height: 100vh;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  animation-delay: .2s;
  will-change: opacity;
  opacity: 0;
  animation-duration: .4s;
  animation-name: show-text;
  animation-fill-mode: forwards;
  /* 66% */
  /*width: 80%;*/
  /*max-width: 80%;*/
	margin: 0 auto;
  /*margin-left: 58px;*/
  margin-left: 61px;
  /*margin-left: 68px;*/
}

@keyframes show-text {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.content__title {
  display: block;
  /*margin-top: -4px;*/
  margin-top: 16px;
  font-family: 'Roboto', serif;
  font-weight: 500;
  text-transform: uppercase;
  color: rgb(228, 228, 228);
  color: #fff;
  font-size: 86px;
  letter-spacing: .1em;
  font-weight: 500;
}
.content__line {
	margin-top: 8px;
  width: 2px;
  height: 63px;
  display: block;
  background: rgb(228, 228, 228);
  background: #fff;
  margin-left: 20px;
  margin-right: 45px;
}

.openning-eng-text br {
  content: "";
  margin: -0.9em;
  display: block;
  font-size: 24%;
  font-size: 48%;
}

.content__text {
  font-family: 'EB Garamond', serif;
  color: #fff;
  font-size: 18px;
  line-height: 1.9;
  /*margin-top: -8px;*/
  margin-top: 3px;
  /*max-width: 310px;*/
  /*max-width: 338px;*/
}

/* video header */
.video-page__header {
  z-index: 10;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 80px;
  background: #666;
  color: #fff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  padding-left: 58px;
  padding-right: 53px;
}

.video-page__header-logo {
  display: block;
  width: 160px;
  height: auto;
}

.video-page__header-skip-btn {
  font-family: 'Asap', sans-serif;
  /*font-family: 'EB Garamond', serif;*/
  text-transform: uppercase;
}
.video-page__header-skip-icon--container {
  display: inline-block;
  /*position: relative;*/
}
.video-page__header-skip-icon {
  /*position: absolute;*/
  display: inline-block;
  width: 16px;
  height: 16px;
}
.video-page__header-skip-icon:last-child {
  margin-left: -16px;
}

.video-page__header-skip-icon img {
  display: inline-block;
  vertical-align: bottom;
  max-width: 100%;
  max-height: 100%;
}


.video-page__header a {
  color: #fff;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.video-page__header-skip-btn {
  font-size: 18px;
  position: relative;
}

.video-page__header-skip-btn:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  /*height: 100%;*/
  border-bottom: 1.5px solid #fff;
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
.video-page__header-skip-btn:hover:after {
  left: 0;
  bottom: -5px;
  width: 100%;
}

@keyframes show-border {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}


.openning-eng-text {
	font-family: 'EB Garamond', serif;
  font-family: 'Roboto', Helvetica Neue, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 500;
}

.openning-jp-text {
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-size: 11px;
	font-weight: 900;
  margin-top: 4px;
  display: block;
}


.stark-last-scene {
	width: 100vw !important;
	height: 100vh !important;
	display: flex !important;
	flex-direction: column;
	justify-content: center !important;
	align-items: center !important;
	-ms-flex-align: center !important;
      align-items: center !important;
      -ms-flex-pack: justify !important;
      justify-content: space-between !important;
      margin: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
}

.stark-last-scene {
	width: 100vw !important;
	height: 100vh !important;
	display: flex !important;
	flex-direction: column;
	justify-content: center !important;
	align-items: center !important;
	margin-left: 0px !important;
	text-align: center !important;
}

.stark-last-scene .stark_msg,
.stark-last-scene p {
	animation-delay: 2s;
	animation-duration: 3s;
	animation-fill-mode: both;
	animation-name: last-text-hide;
}

.stark-last-scene p {
  position: relative;
	text-align: center;
}

.stark-last-scene p img {
  position: absolute;
  top: 25px;
  left: 0;
	filter: invert(100%);
}
.stark-last-scene .stark_msg {
	font-size: 24px;
	font-weight: 100;
	font-family: "A1明朝", serif !important;
}

.stark-last-scene p {
	width: 230px;
}
.stark-last-scene p img {
	margin-top: -10px !important;
}
.stark-last-scene .tark_logo {
  margin-top: 8px;
  width: 150px;
	animation-delay: 6s;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	animation-name: last-text-show;
}

@keyframes last-text-hide {
  from {
		opacity: 1;
  }
  to {
		opacity: 0;
		display: none;
  }
}

@keyframes last-text-show {
  from {
		opacity: 0;
		display: none;
  }
  to {
		opacity: 1;
  }
}