@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
html {
	font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
}

body {
	font-size: 1.6rem;/* 14px */
	font-family: -apple-system, Roboto, blinkMacSystemFont, YuGothic-M, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
    letter-spacing: .1rem;
    position: relative;
	color: #666;
	line-height: 2rem;
	overflow-x: hidden;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	line-height: 2rem;
}
.english {
	font-family: 'Roboto Condensed', sans-serif;
}

.text-lighter
.font-weight-100 {
    font-weight: 100;
}

.font-weight-200 {
    font-weight: 200;
}

.font-weight-300 {
    font-weight: 300;
}

.font-weight-400 {
    font-weight: 400;
}

.font-weight-500 {
    font-weight: 500;
}

.font-weight-600 {
    font-weight: 600;
}

.font-weight-700 {
    font-weight: 700;
}

.font-weight-800 {
    font-weight: 800;
}

.font-weight-900 {
    font-weight: 900;
}
.ls-0 {
    letter-spacing: 0;
}
.ls-w {
    letter-spacing: 3px;
}
.lh-1-3 {
    line-height: 1.3em;
}

.lh-1-5 {
    line-height: 1.5em;
}

.lh-1-7-5 {
    line-height: 1.75em;
}

.lh-2 {
    line-height: 2em;
}

.just-row.row {
     margin: -7px;
}


.just-row.row > [class^="col-"],
.just-row.row > [class*=" col-"] {
    padding: 8px;
    display: inline-block;
}

@font-face {
  font-family: 'icomoon';
  src:  url('2019recruit-common/fonts/icomoon.eot?xkpa8c');
  src:  url('2019recruit-common/fonts/icomoon.eot?xkpa8c#iefix') format('embedded-opentype'),
    url('2019recruit-common/fonts/icomoon.ttf?xkpa8c') format('truetype'),
    url('2019recruit-common/fonts/icomoon.woff?xkpa8c') format('woff'),
    url('2019recruit-common/fonts/icomoon.svg?xkpa8c#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  letter-spacing: 0;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrowdown:before {
  content: "\e900";
}
.icon-arrowright:before {
  content: "\e901";
}
.icon-mlogo:before {
  content: "\e902";
}
.icon-doright:before {
  content: "\e903";
}
.icon-doleft:before {
  content: "\e904";
}

#headerMain {
    background-image: url(2019recruit-common/img/headerMain.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom 30% center;
    background-color: #b3b3b3;
    height: 100vh;
	position: relative;
}
#headerMain:before {
    content: "";
    background-color: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.header-inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 35%;
}
.display-0 {
    font-size: 12rem;
}
.text-blue {
	color: #9dccd4;
}

.hvr-fade {
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
  background-color: #2c0044;
  color: white;
    text-decoration: none;
}

ul.recruit-tab .nav-link.active,
.bg-blue {
	background-color: #9dccd4;
	color: #fff;
}
ul.recruit-tab .nav-link,
.bg-grey {
	background-color: #b3b3b3;
	border: none;
	color: #fff;
}
a,
.text-brand {
	color: #2c0044;
}
.more {
	position: relative;
}
.more:after {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: 0px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e901";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
}
.navbar-custom {
	background-color: #fff;
    padding-top: 25px;
    padding-bottom: 25px;
    -webkit-transition: padding-top .3s,padding-bottom .3s;
    -moz-transition: padding-top .3s,padding-bottom .3s;
    transition: padding-top .3s,padding-bottom .3s;	
}
.navbar-custom .nav-link {
    padding: .75em 0;
}
.fixed-top {
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
	    padding-top: 1rem;
    padding-bottom: 1rem;
}
#mainNav .navbar-toggler {
    font-size: 12px;
    padding: 8px 10px;
    color: #fff;
	background-color: #2c0044;
}
#concept {
	background-color: #e1edeb;
	position: relative;
}
#process {
	background-color: #fff7e8;
	position: relative;
}
#careerup,
#voice{
	background-color: #fafcfc;
	position: relative;
}
.step-year,
.bg-brand {
	background-color: #2c0044;
	color: #fff;
	font-weight: 100;
}
.step-word {
	border-left: 5px solid #fafcfc;
}
.step-word, .step-detail {
	background-color: #e6e6e6;
}

.careerup-table.table td,
.careerup-table.table th {
	border-top: 5px solid #fafcfc;
}
@media (min-width: 1140px) {
#concept .image {
	position: absolute;
	left: 16px;
	bottom: 0;
	z-index: 0;
}
	#process .image {
	position: absolute;
	right: 16px;
	bottom: 0;
	z-index: 0;
}
}


.occupation-table {
    table-layout: fixed;
    width: 100%;
}

.occupation-table th {
    text-align: center;
    vertical-align: middle;
}


.occupation-table td, .occupation-table th {
    padding: 0.5em;
    border-top: none;
}

.occupation-table thead th {
    border-top: none;
    border-bottom: 3px dashed #e6e6e6;
    color: #808080;
	font-weight: 100;
    vertical-align: middle;
    border-right: 3px dashed #e6e6e6;
}

.occupation-table thead th:last-child,
.occupation-table tbody td:last-child {
    border-right: none;
}
.step-title {
    position: relative;
}

.occupation-table td {
    vertical-align: middle;
    font-weight: 100;
    border-right: 3px dashed #e6e6e6;
}

tr.oc-section.oc-section-2 td {
    height: 2em;
}

.border-bottom-dashed td {
    border-bottom: 3px dashed #e6e6e6;
}

.white-space-nowrap {
  white-space: nowrap;
}

tr.oc-section.oc-section-two td {
    border-bottom: 3px dashed #e6e6e6;
    height: 16em;
}

tr.oc-section.oc-section-three td {
    height: 8em;
}

.position-relative {
    position: relative;
}

.bar-link-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 3em;
}

.bar {
    width: 100%;
}
.bar a {
	text-decoration: underline;
	    line-height: 1.5em;
}
.bar a.lh-3 {
    line-height: 3em;
}
.bar-eigyou {
    background: #b68db1;
}
.bar-sekkei {
    background: #9dccd4;
}
.bar-sekisan {
    background: #79ccd4;
}
.bar-sekou {
    background: #29abd7;
}
.bar-shindan {
    background: #86cdac;
}
.bar-keiei {
    background: #fcd262;
}
.bar-gyoumu {
    background: #e8b872;
}
.bar-brown {
    background: rgba(199,156,109,1);
}
.modal-header {
    padding: 0;
    border-bottom: none;
    margin-top: 1em;
}

.modal-header .close {
    margin-top: 0;
    background: #2C0044;
    color: #fff;
    font-weight: 100;
    font-size: 2em;
    position: absolute;
    right: 0;
    top: 0;
    width: 36px;
    height: 36px;
    vertical-align: middle;
    display: table;
    text-shadow: none;
    line-height: 1em;
    z-index: 9999;
    border: none;
    opacity: 1;
    float: none;
}

.modal-content {
    background-color: #f1f1f1;
    border: 3px solid #2C0044;
    border-radius: 0;
    padding: 1.5em 3em;
}

.filter {
    background: linear-gradient(transparent,#fff);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.pa-tl {
    position: absolute;
    top: -45px;
    left: -20px;
}

.pa-lc {
    position: absolute;
    bottom: 10%;
    padding-left: 3em;
}

.text-lighter, .number {
    font-weight: 100;
}

.modal-body {
    padding: 15px 0;
}
.voice-wrap {
	background-color: #fff;
	box-shadow: 6px 6px #9dccd4;
}

.day-wrap {
	background-color: #fff;
	box-shadow: 6px 6px #b68db1;
}
.bg-purple {
	background-color: #b68db1;
	color: #fff;
}
#news,
#recruit {
	background-color: #f2f2f2;
	position: relative;
}

.nav-tabs,
ul.recruit-tab .nav-item.show .nav-link, ul.recruit-tab .nav-link.active {
	border: none;
}

.day-image-box {
    position: relative;
    padding-top: 200%;
}
.day-image-box img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

#qa {
	background-color: #edebff;
	position: relative;
}
.qa-color {
	color: #a774ca;
}
.news-list-item,
.card-header {
	background-color: #fff;
}
.news-link,
.question-text {
	position: relative;
}
.question-text:after {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: 0px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e900";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
}

.news-link:after {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: 0px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e901";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
}
.careerentry {
	width: 195px;
	height: 60px;
  background-color: #2c0044;
		display: flex;
	align-items: center;
}
.border {
	border: 1px solid #333;
}
.item-wrap .table th,
.item-wrap .table td{
	text-align: center;
}

/* For Tablet */
@media (max-width: 1024px) {
  body {
	font-size: 1.4rem;/* 14px */
  }
  .display-4 {
    font-size: 2.5rem;
  }
  .display-3 {
    font-size: 3rem;
  }
  .display-2 {
    font-size: 2.5rem;
  }

}
@media (min-width: 768px){
		.page-nav {
		width: 100%;
	}
	.navbar-brand {
		display: none;
	}
	.nav-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    text-align: center;
  }

}
@media (max-width: 767px){
	.navbar-toggleable-sm>.container {
		width: 100%;
	}
		.navbar-brand {
		display: visible;
	}
	#sidenav {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
    width: 100%;
    padding-top: 0.2em;
    margin-bottom: 0;
}
	#sidenav .entry-bar {
		background-color: #2c0044;
		color: #fff;
		display: block;
		text-align: center;
		padding: 12px;
		font-size: 18px;
		z-index: 9999;
}
}
/* For SmartPhone */
@media (max-width: 600px) {

  body {
	font-size: 1.4rem;/* 12px */
  }

  .display-4 {
    font-size: 2rem;
  }
  .display-3 {
    font-size: 2.5rem;
  }
  .display-2 {
    font-size: 3rem;
  }
  .display-1 {
    font-size: 4rem;
  }
  .h1, h1 {
    font-size: 2rem;
  }
  .h2, h2 {
    font-size: 1.75rem;
  }
  .h3, h3, .btn-lg.h3 {
    font-size: 1.5rem;
  }
  .h4, h4 {
    font-size: 1.25rem;
  }
}
/* For SmartPhone */
@media (max-width: 320px) {
  body {
	font-size: 1.1rem;/* 12px */
  }
}