/*
Theme Name:moon-child
Template:moon
Version:1.0.0
*/

/** PCとスマホの表示切り替え **/
@media screen and (min-width: 601px) {
	.sp {
		display: none !important;
	}
}

@media screen and (max-width: 600px) {
	.pc {
		display: none !important;
	}
}

/* フリーフォントの読み込み */

@font-face {
	font-family: 'Avian';
	src: url( "fonts/avian/AVIAN.woff") format('woff');
}

@font-face {
	font-family: 'AvianBold';
	src: url( "fonts/avian/AvianBold.woff") format('woff'); /* bold */
}

@font-face {
	font-family: 'AvianItalic';
	src: url( "fonts/avian/AvianItalic.woff") format('woff');
}

@font-face {
	font-family: 'AvianBoldItalic';
	src: url( "fonts/avian/AvianBoldItalic.woff") format('woff');
}

/* 全体へのフォント指定 */
body {
  font-family: "AvianBold","游ゴシック";
}

/* ヘッダー */
.top-drawer-box {
    position: relative;
}

#drawer-entry-button {
	position: absolute;
	top: 0px;
	right: 0px;
	max-width: 15%;
	display: grid;
	grid-template-columns: repeat(2, auto);
	grid-gap: 0px;
}

@media screen and (max-width:600px) {
	#drawer-entry-button {
		max-width: 35%;
	}
}

#top-entry {
	display:block;
   font-size: 20px;
   text-align: center;
   font-weight: 700;
}

#nav-drawer{
	order: 1;
}

input#nav-input {
	display: none;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
	display:none;
}

#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(105%);
	transform: translateX(105%); /*中身を表示（右へスライド）*/
}

/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: .3s ease-in-out;
}

#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;
}

/*中身*/
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
	width: 90%;
	max-width: 33rem;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	transition: .3s ease-in-out;
	-webkit-transform: translateX(105%);
	transform: translateX(105%);
}

#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);/*中身を表示（右へスライド）*/
}

@media screen and (max-width:600px) {
	#nav-content {
		width: 60%;
	}
}

nav#header-nav ul {
	margin: 0;
	list-style: none;
	display: inline-block;
	width: 100%;
}

nav#header-nav li {
	padding-right: 24px;
}

nav#header-nav {
	display: inline-block;
	width: 100%;
}

nav#header-nav ul li {
	padding: 0.5rem;
	margin: 0.5rem;
}

nav#header-nav ul li a {
	color: #ffffff;
	text-decoration: none;
	font-size: 22px;
	font-weight: 600;
}

@media screen and (max-width:600px) {
	nav#header-nav ul li a {
		font-size: 0.8rem;
	}
	nav#header-nav ul {
		padding-left: 20px;
	}
	nav#header-nav ul li {
		padding: 0px;
	}
}

#menu-entry-button{
	margin-bottom: 2rem;
}

#menu-entry {
	display:block;
	margin:0 auto;
	margin-top: 3rem;
	margin-left: 2.5rem;
	background: #ffcc32;
   font-size: 1.5rem;
   text-align: left;
	padding-left: 2rem;
   letter-spacing: 1px;
   font-weight: 700;
	max-height: 5rem;
	max-width: 16rem;
	line-height: 4rem;
	position: relative;
}

@media screen and (max-width:600px) {
	#menu-entry {
		margin-left: 25px;
		max-height: 2rem;
		max-width: 7rem;
		font-size: 0.8rem;
		line-height: 2rem;
	}
	#menu-entry > .stickarrow {
		right: 10px;
		width: 15px;
		height: 5px;
		border-bottom: 2px solid #000;
		border-right: 2px solid #000;
	}
	#menu-entry-button {
		margin-bottom: 1rem;
	}
}

a#menu-entry:link,
a#menu-entry:visited,
a#menu-entry:hover,
a#menu-entry:active {
	color: black;
	text-decoration: none;
}

.stickarrow {
	position: absolute;
	top: 40%;
	right:25px;
	width: 40px;
	height: 8px;
	border-bottom: medium solid #000;
	border-right: medium solid #000;
	transform: skew(45deg);
}

.batsu{
	display: block;
	width: 50px;/*枠の大きさ*/
	height: 50px;/*枠の大きさ*/
	position: absolute;
	right: 50px;
	top: 30px;
}

.batsu::before, .batsu::after{
    content: "";
    display: block;
    width: 100%;/*バツ線の長さ*/
    height: 2px;/*バツ線の太さ*/
    background: #ffffff;
    transform: rotate(45deg);
    transform-origin:0% 50%;
    position: absolute;
    top: calc(14% - 5px);
    left: 14%;
}

.batsu::after{
    transform: rotate(-45deg);
    transform-origin:100% 50%;
    left: auto;
    right: 14%;
}

@media screen and (max-width:600px) {
	.batsu {
		width: 20px;
		height: 20px;
		right: 15px;
		top: 50px;
	}
}

a#entry:link,
a#entry:visited,
a#entry:hover,
a#entry:active {
  color: black;
}

.entry-title {
	display:none;
}

.post-edit-link {
	display:none;
}

#main-visual img {
	display:block;
	margin:0 auto;
}

#header-logo {
	position: absolute;
	top: 1rem;
	left: 1rem;
	max-width: 25%;
}

#header-logo > a > img {
	max-width: 80%;
}

@media screen and (max-width:600px) {
	#header-logo {
		top: 1rem;
		left: 1rem;
		max-width: 50%;
	}
}


/* フッター */
#about-moon-entry-list {
	margin: 0 auto;
	margin-top: 100px;
	display: grid;
	grid-template-columns: repeat(2, auto);
	grid-gap: 50px;
	max-width: 70%;
}

#about-moon-button {
	width: 40%;
}

#about-moon-button > a {
	text-decoration: none;
	background: black;
	font-weight: 500;
}

#about-moon {
	display:block;
	margin:0 auto;
	background: #fff;
	border-radius: 0;
	border: #000 solid 4px;
   font-size: 30px;
   text-align: center;
   letter-spacing: 1px;
   font-weight: 400;
	height: 100px;
	width: 450px;
	line-height: 90px;
	position: relative;
}

a#about-moon:link,
a#about-moon:visited,
a#about-moon:hover,
a#about-moon:active{
  color: white;
}

.about-moon-stickarrow {
	border-bottom: medium solid #fff;
	border-right: medium solid #fff;
}

/** タブレット用 **/
@media screen and (min-width: 600px) and (max-width: 1024px) {
	#about-moon-entry-list {
		margin: 0 auto;
		margin-top: 100px;
		max-width: 90%;
		grid-gap: 0px;
		grid-template-columns: repeat(2, 50%);
	}
	#about-moon-button {
		margin: 0 auto;
		width: 90%;
	}
	#about-moon {
		width: 100%;
		font-size: 1.2rem;
	}
}

#sp-about-moon-entry-list {
	margin: 0 auto;
	margin-top: 2rem;
	margin-bottom: 2rem;
	max-width: 80%;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1rem;
}

#sp-about-moon-button > a{
	text-decoration: none;
	background: black;
	font-weight: 500;
}

#sp-about-moon {
	display: block;
	margin: 0 auto;
   border-radius: 0;
   border: #000 solid 4px;
   font-size: 1rem;
   text-align: center;
   letter-spacing: 1px;
   height: 3rem;
   width: 15rem;
   line-height: 2.5rem;
   position: relative;}

a#sp-about-moon:link,
a#sp-about-moon:visited,
a#sp-about-moon:hover,
a#sp-about-moon:active{
  color: white;
}

#sp-about-moon > .stickarrow {
	right: 0.8rem;
	width: 1.7rem;
	height: 0.5rem;
}

#entry-button{
	margin-bottom: 80px;
}

#footer-entry {
	display:block;
	margin:0 auto;
	background: #fff;
	border-radius: 0;
	border: #ffcc32 solid 4px;
   font-size: 30px;
   text-align: center;
   letter-spacing: 1px;
   font-weight: 400;
	height: 100px;
	width: 450px;
	line-height: 90px;
	position: relative;
}

/** タブレット用 **/
@media screen and (min-width: 600px) and (max-width: 1024px) {
	#entry-button{
		width: 90%;
		margin: 0 auto;
		margin-bottom: 80px;
	}
	#footer-entry {
		width: 100%;
	}
}

a#footer-entry:link,
a#footer-entry:visited,
a#footer-entry:hover,
a#footer-entry:active {
  color: #ffcc32;
}

#footer-entry .stickarrow {
	border-bottom: medium solid #ffcc32;
	border-right: medium solid #ffcc32;
}

#entry-button a {
	text-decoration: none;
}

#sp-entry-button > a {
	text-decoration: none;
}

#sp-footer-entry {
	display: block;
	margin: 0 auto;
   background: #fff;
   border-radius: 0;
   border: #ffcc32 solid 4px;
   font-size: 1rem;
   text-align: center;
   letter-spacing: 1px;
   font-weight: 400;
   height: 3rem;
   width: 15rem;
   line-height: 2.5rem;
   position: relative;
}

a#sp-footer-entry:link,
a#sp-footer-entry:visited,
a#sp-footer-entry:hover,
a#sp-footer-entry:active {
  color: #ffcc32;
}

#sp-footer-entry .stickarrow {
	border-bottom: medium solid #ffcc32;
	border-right: medium solid #ffcc32;
	right: 0.8rem;
	width: 1.7rem;
	height: 0.5rem;
}

#footer-nav {
   position: relative;
   margin-top: 1rem;
	background-color: black;
	padding: 20px 0px 40px 0px;
}

#footer-logo {
	max-width: 30%;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

nav#footer-nav ul {
   display: flex;
   grid-template-columns: repeat(7, 100px);
   max-width: 70%;
   margin: 0 auto;
   align-items: center;
   justify-content: center;
   font-size: 21px;
   font-weight: 600;
   letter-spacing: 1px;
}

nav#footer-nav ul li {
   list-style: none;
	padding: 0px 30px 30px 30px;
	max-height: 10px;
}

nav#footer-nav ul li + li {
	border-left: 1px solid #ffffff;
	display: inline-block;
}

nav#footer-nav a {
   position: relative;
   z-index: 1;
   color: #ffffff;
	text-decoration: none;
}

#sp-footer-nav {
	position: relative;
	background-color: black;
	padding: 20px 0px 40px 0px;
}

#sp-footer-logo {
	max-width: 40%;
	margin: 0 auto;
}

#sp-footer-menu {
	margin: 0 auto;
	margin-top: 1rem;
	width: 90%;
}

#sp-footer-menu-1st-row {
	display: grid;
	grid-template-columns: repeat(3, auto);
	padding: 0px 35px 10px 35px;
	text-align: center;
}

#sp-footer-menu-2nd-row {
	display: grid;
	grid-template-columns: repeat(2, auto);
	padding: 0px 30px 5px 30px;
	text-align: center;
}

.sp-footer-menu-link {
	border-right: 1px solid #ffffff;
	max-height: 0.8rem;
	line-height: 0.8rem;
}

.last-link {
	border-right: none;
}

.sp-footer-menu-link > a {
	color: #ffffff;
	text-decoration: none;
	font-size: 0.8rem;
}

/* ----------------------------- */
/* ----- ModalSection ----- */
/* ---------------------------- */
.vision-modal-layer,
.modal-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transition: opacity 0.65s;
  pointer-events: none;
  opacity: 0;
  z-index: 10000;
}
.vision-modal-layer.isShow,
.modal-layer.isShow {
  transition: opacity 0.65s;
  pointer-events: auto;
  opacity: 1;
}
.vision-modal-layer-mask,
.modal-layer-mask {
  position: absolute;
  background: rgba(123,123,123,0.5);
  width: 100%;
  height: 100vh;
}
.modal-layer-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 960px;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .modal-layer-inner {
	  top: 45%;
	  padding-left: 24px;
	  padding-right: 24px;
  }
}
.modal-inner {
  margin-left: auto;
  margin-right: auto;
	text-align: center;
  padding-top: 20px;
  max-width: 960px;
}

/* TOPページ */
#vision {
	margin: 0 auto;
	margin-top: 140px;
	max-width: 90%;
	padding-bottom: 100px;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-gap: 0px 40px;
	background: url("https://recruit.moon-se.co.jp/wp-content/uploads/2020/12/bg_town.png") no-repeat;
	background-position: center bottom 30px;
	background-size:contain;
}

@media screen and (max-width:600px) {
	#vision {
		grid-template-columns: 100%;
		margin-top: 30px;
		grid-gap: 5px;
	}
}

#vision h2{
	color: #ffcc32;
}

#vision h1{
	text-align: left;
	margin-bottom: 30px;
	margin-top: 30px;
}

#vision p{
	line-height:3;
	text-align: left;
	font-size: 20px;
}

@media screen and (max-width:600px) {
	#vision h1{
		margin-bottom: 20px;
		margin-top: 0px;
	}
	#vision p {
		font-size: 0.7rem;
	}
}

#vison-message {
	grid-row: 1; grid-column: 1;
	margin-left: 80px;
	margin-top: 20px;
}

#vision-image-1st {
	grid-row: 1; grid-column: 2;
}

#vision-movie {
	display: none;
	grid-row: 2; grid-column: 1;
	margin-top: 80px;
	position: relative;
}

#vision-movie-cover {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 2;
	width: 100%;
	height: 100%;
}

#yt-play-icon,
#sp-yt-play-icon {
	position: absolute;
	top: 38%;
	left: 35%;
	z-index: 3;
	max-width: 100px;
	cursor: pointer;
}

#vision-image-2nd {
	grid-row: 2; grid-column: 2;
	margin-top: -20px;
}

@media screen and (max-width:600px) {
	#vison-message {
		grid-row: 1; grid-column: 1;
		margin: 0 auto;
		margin-bottom: 20px;
	}
	#vision-image-1st {
		grid-row: 3; grid-column: 1;
	}
	#vision-movie {
		grid-row: 2; grid-column: 1;
		margin-top: 0px;
	}
	#vision-image-2nd {
		grid-row: 4; grid-column: 1;
		margin-top: 0px;
	}
	.vision-movie-contents {
		width: 100%;
		height: auto;
	}
	#sp-yt-play-icon {
		top: 35%;
		left: 41%;
		max-width: 20%;
	}
}

#training-system {
	padding-top: 50px;
	padding-bottom: 5px;
	margin-top: 50px;
	margin-bottom: 100px;
}

#training-system-title {
	margin-left: 80px;
}

@media screen and (max-width:600px) {
	#training-system {
		margin-top: 30px;
	}
	#training-system-title {
		margin: 0 auto;
		max-width: 90%;
	}
}

#training-system-title > h2{
	color: #ffcc32;
}

#training-system-title > h1{
	margin: 0 auto;
	margin-bottom: 40px;
}

#training-system-title > p{
	margin: 0 auto;
	margin-bottom: 80px;
	text-align: left;
	font-family: "Avian","游ゴシック";
}

@media screen and (max-width:600px) {
	#training-system-title > p {
		font-size: 0.8rem;
	}
}

#training-system-title > img {
	display:block;
	margin:0 auto;
}

#training-system-image-link {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

#training-system-image-link-kotouri {
	background: url("https://recruit.moon-se.co.jp/wp-content/uploads/2020/12/img_03_on.jpg") no-repeat;
	background-size:contain;
}

#training-system-image-link-kotouri  > a {
	display: inline-block;
}

#training-system-image-link-kotouri  > a:hover {
	background-color: transparent; /* IE6対応 */
}

#training-system-image-link-kotouri > a:hover img {
	visibility: hidden;
}

#training-system-image-link-kodawari {
	background: url("https://recruit.moon-se.co.jp/wp-content/uploads/2020/12/img_04_on.jpg") no-repeat;
	background-size:contain;
}

#training-system-image-link-kodawari  > a {
	display: inline-block;
}

#training-system-image-link-kodawari  > a:hover {
	background-color: transparent; /* IE6対応 */
}

#training-system-image-link-kodawari > a:hover img {
	visibility: hidden;
}

#training-system-image-link-mind-compass {
	background: url("https://recruit.moon-se.co.jp/wp-content/uploads/2020/12/img_05_on.jpg") no-repeat;
	background-size:contain;
}

#training-system-image-link-mind-compass  > a {
	display: inline-block;
}

#training-system-image-link-mind-compass  > a:hover {
	background-color: transparent; /* IE6対応 */
}

#training-system-image-link-mind-compass > a:hover img {
	visibility: hidden;
}

#recruit-special-movie-bg {
	display: none;
	position: relative;
	max-height: 500px;
}

.recruit-special-movie {
	margin: 0 auto;
	max-width: 28%;
	position: absolute;
	top: 20%;
	left: 36%;
}

.recruit-special-movie > img {
	margin: 0 auto;
	cursor: pointer;
}

@media screen and (max-width:600px) {
	.recruit-special-movie-contens {
		width: 100%;
		height: auto;
	}
	.recruit-special-movie {
		max-width: 50%;
		left: 25%;
		top: 10%;
	}
}

#career-step {
	margin-top: 120px;
}

#career-step-title {
	max-width: 1020px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 40px;
}

@media screen and (max-width:600px) {
	#career-step-title {
		margin: 0 auto;
		max-width: 90%;
	}
}

#career-step-title > h2 {
	color: #ffcc32;
	margin-bottom: 40px;
}

#career-step-title > h1 {
	margin-bottom: 40px;
}

#career-step-title > p {
	font-size: 20px;
}

@media screen and (max-width:600px) {
	#career-step-title > h2 {
		margin-bottom: 20px;
	}
	#career-step-title > h1 {
		margin-bottom: 20px;
	}
	#career-step-title > p {
		font-size: 0.8rem;
	}
}

#career-step-image {
	margin: 0 auto;
	margin-top: 80px;
	max-width: 90%;
	display: grid;
	grid-template-columns: repeat(7, auto);
}

.larger {
	position: relative;
	top: 42%;
}

@media screen and (max-width:600px) {
	#career-step-image {
		margin-top: 40px;
	}
	.larger {
		max-width: 1.1rem;
		top: 44%;
	}
}

#read-more-button{
	margin-top: 40px;
	margin-bottom: 80px;
}

#read-more-button a {
	text-decoration: none;
}

#read-more {
	display:block;
	margin:0 auto;
	background: #fff;
	border-radius: 0;
	border: black solid 4px;
   font-size: 30px;
   text-align: center;
   letter-spacing: 1px;
   font-weight: 400;
	height: 80px;
	width: 380px;
	line-height: 70px;
	position: relative;
}

@media screen and (max-width:600px) {
	#read-more {
		height: 3rem;
		width: 15rem;
		line-height: 2.5rem;
		font-size: 1rem;
	}
	#read-more > .stickarrow {
		right: 0.8rem;
		width: 1.7rem;
		height: 0.5rem;
	}
}

a#read-more:link,
a#read-more:visited,
a#read-more:hover,
a#read-more:active {
  color: black;
}

#read-more .stickarrow {
	border-bottom: medium solid black;
	border-right: medium solid black;
}

#requirement {
	margin-top: 200px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
}

@media screen and (max-width:600px) {
	#requirement {
		grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
		margin-top: 120px;
	}
}

#requirement-title-link-bg {
	background: #ffcc32;
}

#requirement-title-link {
	margin-top: 80px;
	margin-left: 80px;
}

@media screen and (max-width:600px) {
	#requirement-title-link {
		margin-left: 4rem;
		margin-top: 40px;
	}
}

#requirement-title {
	max-width: 85%;
}

#requirement-title > h2 {
	color: white;
	font-size: 1.8rem;
}

#requirement-title > h1 {
	font-size: 40px;
}

#requirement-title > p {
	line-height: 50px;
	font-size: 20px;
}

@media screen and (max-width:600px) {
	#requirement-title > p {
		font-size: 0.8rem;
		line-height: 2rem;
	}
}

#requirement-link {
	margin-top: 80px;
	max-width: 85%;
}

#requirement-link > a {
	text-decoration: none;
}

#requirement-link > a > p {
	color: white;
	font-size: 27px;
}

#requirement-link > a > .long-stickarrow {
	position: absolute;
	margin-top: -40px;
	margin-left: -5px;
	width: 300px;
	height: 15px;
	border-bottom: 5px solid white;
	border-right: 5px solid white;
	transform: skew(45deg);
}

@media screen and (max-width:600px) {
	#requirement-link {
		margin-top: 2rem;
		margin-bottom: 5rem;
	}
	#requirement-link > a > .long-stickarrow {
		width: 12rem;
	}
}

/* MOONについて */

#about-message {
	margin-top: 100px;
	max-width: 100%;
	text-align: center;
}

#about-message h1 {
	font-size: 40px;
}

#about-message p {
	font-size: 20px;
	line-height: 50px;
}

#moon-about-image {
	max-width: 95%;
	margin: 0 auto;
	margin-bottom: 100px;
}

#philosophy-bg {
	background: #ffe7a0;
	margin-top: -200px;
	padding: 140px 0px 100px 0px;
}

#philosophy-title h1{
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 40px;
	font-size: 45px;
}

#philosophy {
	max-width: 50%;
	margin: 0 auto;
}

@media screen and (max-width:600px) {
	#about-message {
		margin: 0 auto;
		max-width: 90%;
		margin-top: 30px;
	}
	#about-message h1 {
		font-size: 2em;
	}
	#about-message p {
		font-size: 0.7rem;
		line-height: 30px;
	}
	#philosophy-bg {
		margin-top: -125px;
		padding: 40px 0px 20px 0px;
	}
	#philosophy-title {
		margin: 0 auto;
		max-width: 90%;
	}
	#philosophy-title h1 {
		font-size: 2em;
	}
	#philosophy {
		max-width: 80%;
	}
}

/* 募集要項 */

#recruit-guideline-title {
	max-width: 1080px;
	margin: 0 auto;
	margin-top: 100px;
	text-align: center;
}

#recruit-guideline-title > p {
	margin-top: 40px;
	font-size: 17px;
	line-height: 40px;
}

@media screen and (max-width:600px) {
	#recruit-guideline-title {
		margin: 0 auto;
		margin-top: 30px;
		max-width: 90%;
	}
	#recruit-guideline-title > p {
		font-size: 0.8rem;
		line-height: 30px;
	}
}

#recruit-guideline h1{
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 40px;
	font-size: 45px;
}

#recruit-guideline {
	margin-top: 80px;
	margin-bottom: 100px;
}

#recruit-guideline > table {
	max-width: 90%;
	margin-left: 70px;
	border-collapse:collapse;
}

#recruit-guideline > table > tbody > tr > th {
	border-bottom: solid 2px gray;
	padding: 40px 40px 40px 180px;
	vertical-align: top;
	text-align: left;
	width: 35%;
	font-size: 22px;
}

#recruit-guideline > table > tbody > tr > td {
	border-bottom: solid 2px gray;
	padding: 40px;
	vertical-align: top;
	text-align: left;
	width: 65%;
	font-size: 22px;
	line-height: 40px;
}

#recruit-guideline > table > tbody > tr > td > a {
	color: blue;
}

.no-border {
	border-top : none !important;
}

#time-zone-salary-table > tbody > tr > th {
	background: #ffe7a0;
	padding: 20px;
}

#time-zone-salary-table > tbody > tr > td {
	background: #fff8e4;
	padding: 20px;
}
.map-link {
	text-decoration: none;
}

@media screen and (max-width:600px) {
	#recruit-guideline {
		margin: 0 auto;
		margin-top: 80px;
		max-width: 90%;
	}
	#recruit-guideline h1{
		font-size: 2em;
	}
	#recruit-guideline > table {
		max-width: 100%;
		margin-left: 0px;
	}
	#recruit-guideline > table > tbody > tr > th {
		padding: 0px;
		font-size: 0.5rem;
		margin: 0 auto;
		text-align: left;
		padding-top: 10px;
		padding-left: 10px;
		width: 20%;
		border-bottom: solid 1px gray;
	}
	#recruit-guideline > table > tbody > tr > td {
		padding: 10px 0px 10px 0px;
		font-size: 0.5rem;
		line-height: 20px;
		border-bottom: solid 1px gray;
	}
	#time-zone-salary-table > tbody > tr > th {
		padding: 10px 5px 10px 5px;
		font-size: 0.5rem;
	}
	#time-zone-salary-table > tbody > tr > td {
		padding: 10px 1px 10px 1px;
		font-size: 0.5rem;
	}
}

/* 自社独自の取り組み */

#in-house-training-title {
	text-align: center;
	margin-top: 80px;
	margin-bottom: 180px;
}

#in-house-training-title > p {
	margin-top: 40px;
	font-size: 20px;
	line-height: 45px;
}

@media screen and (max-width:600px) {
	#in-house-training-title {
		margin: 0 auto;
		margin-top: 30px;
		margin-bottom: 80px;
		max-width: 90%;
	}
	#in-house-training-title > p {
		font-size: 0.8rem;
		line-height: 30px;
	}
}

#training-system-contents {
	margin: 0 auto;
}

#kotouri-title > h1 {
	color: #ffcc32;
	font-size: 80px;
	margin: -30px 0px 0px 0px;
}

#kotouri-title > h2 {
	font-size: 40px;
	margin-top: 10px;
}

#kotouri-title > p {
	font-size: 20px;
	line-height: 50px;
}

#kotouri {
	width: 85%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 50% 50%;
}

#kotouri-image-list {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-gap: 5px 10px;
}

#kotouri-image-1st {
	grid-row: 1; grid-column: 1;
}

#kotouri-image-2nd {
	grid-row: 1; grid-column: 2;
}

#kotouri-image-3rd {
	grid-row: 2; grid-column: 1;
}

#kotouri-image-4th {
	grid-row: 2; grid-column: 2;
}

@media screen and (max-width:600px) {
	#kotouri {
		grid-template-columns: 100%;
		width: 90%;
	}
	#kotouri-title > h1 {
		font-size: 2em;
	}
	#kotouri-title > h2 {
		font-size: 1.5em;
	}
	#kotouri-title > p {
		font-size: 0.8rem;
		line-height: 30px;
	}
	#kotouri-image-list {
		grid-template-columns: 48% 48%;
		grid-gap: 5px 4%;
	}
}

#kodawari-bg {
	background: #ffe7a0;
	padding: 100px 0px 10px 0px;
}

#kodawari {
	width: 85%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-gap: 60px;
}

#kodawari-title {
	grid-row: 1; grid-column: 2;
}

#kodawari-title > h1 {
	color: white;
	font-size: 80px;
	margin: -30px 0px 0px 0px;
}

#kodawari-title > h2 {
	font-size: 40px;
	margin-top: 10px;
}

#kodawari-title > p {
	font-size: 20px;
	line-height: 50px;
}

#kodawari-image-list {
	grid-row: 1; grid-column: 1;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-gap: 5px 10px;
}

#kodawari-image-5th {
	grid-row: 1; grid-column: 1;
}

#kodawari-image-6th {
	grid-row: 1; grid-column: 2;
}

#kodawari-image-7th {
	grid-row: 2; grid-column: 1;
}

#kodawari-image-8th {
	grid-row: 2; grid-column: 2;
}

@media screen and (max-width:600px) {
	#kodawari-bg {
		padding: 100px 0px 0px 0px;
	}
	#kodawari {
		margin: 0 auto;
		width: 90%;
		grid-template-columns: 100%;
		grid-gap: 10px;
	}
	#kodawari-image-list {
		grid-row: 2;
		grid-column: 1;
		grid-template-columns: 48% 48%;
		grid-gap: 5px 4%;
	}
	#kodawari-title {
		grid-row: 1;
		grid-column: 1;
	}
	#kodawari-title > h1 {
		font-size: 2em;
	}
	#kodawari-title > h2 {
		font-size: 1.5em;
	}
	#kodawari-title > p {
		font-size: 0.8rem;
		line-height: 30px;
	}
}

#mind-compass {
	width: 85%;
	margin: 0 auto;
	margin-top: 150px;
	display: grid;
	grid-template-columns: 50% 50%;
	max-height: 700px;
}

#mind-compass-title > h1{
	color: #ffcc32;
	font-size: 80px;
	margin: -30px 0px 0px 0px;
}

#mind-compass-title > h2 {
	font-size: 40px;
	margin-top: 10px;
}

#mind-compass-title > p {
	font-size: 20px;
	line-height: 50px;
}

#mind-compass-image-list {
	display: grid;
	grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 5px 10px;
	max-height: 800px;
}

#mind-compass-image-9th {
	grid-row: 1; grid-column: 1;
}

#mind-compass-image-9th > img{
	max-height: 100%;
	max-width: auto;
}

#mind-compass-image-10th {
	grid-row: 2; grid-column: 1;
}

#mind-compass-image-10th > img{
	max-height: 100%;
	max-width: auto;
}

@media screen and (max-width:600px) {
	#mind-compass {
		margin: 0 auto;
		width: 90%;
		grid-template-columns: 100%;
	}
	#mind-compass-title > h1 {
		font-size: 2em;
		margin-top: 30px;
	}
	#mind-compass-title > h2 {
		font-size: 1.5em;
	}
	#mind-compass-title > p {
		font-size: 0.8rem;
		line-height: 30px;
	}
	#mind-compass-image-list {
		grid-template-rows: auto;
		grid-gap: 5px;
	}
}

#training-system-contents table {
	width: 100%;
}

#training-system-contents table tr .first-row {
	width: 30%;
	vertical-align: center;
	text-align: center;
	background-color: #AAAAAA;
	font-weight: bold;
	font-size: 26px;
	color: #555555;
}

#training-system-contents table tr .second-row {
	width: 70%;
	vertical-align: center;
	text-align: left;
	font-size: 26px;
	padding: 1em;
	line-height: 47px;
}

#training-system-contents table tr .photo-row {
	padding: 1em;
}