@charset "utf-8";

/* 
-----------------------------------------------------

	manic.css
	=Additional Stylesheet for "mchs-recruit" theme

-----------------------------------------------------
*/

/* 開発中のみ */
/*#progress { display: none !important; }*/

/* 
-----------------------------------------------------

	common layout

-----------------------------------------------------
*/

@media screen and (min-width: 769px) {
	.sp { display: none !important;}
	.pc { display: inherit !important;}
}

@media screen and (min-width: 0px) and (max-width: 768px) {
	.pc { display: none !important;}
	.sp { display: inherit !important;}
}

img {}
a img {
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}
a:hover img {
	opacity: 0.6;
}

.inner {}
.inner_min { max-width: 880px; }

.hidden { display: none !important; }

/* Flexbox
----------------------------------------------------- */
.flex_box {}
.flex_box {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	flex-shrink: 0;
}
.flex_box > .flex_item {}
.flex_box.reverse { flex-direction: row-reverse; }

.flex_box.col_2 > .flex_item { width: 47%;}
.flex_box.col_3 > .flex_item { width: 30.33%;}
.flex_box.col_4 > .flex_item { width: 22%;}
.flex_box.col_5 > .flex_item { width: 17%;}
.flex_box.col_6 > .flex_item { width: 13.66%;}
.flex_box.col_8 > .flex_item { width: 9.5%;}


.flex_box.justify_content_flex_start {
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	margin-right: -3%;
	margin-bottom: -20px;
}
.flex_box.justify_content_flex_start > .flex_item {
	margin-right: 3%;
	margin-bottom: 20px;
}

/* Alignment
----------------------------------------------------- */
.alignleft { display: block; float: left; margin: 0 2em 2em 0;}
.alignright { display: block; float: right; margin: 0 0 2em 2em;}
.aligncenter { clear: both; display: block; margin: 0 auto 2em;}

/* heading
----------------------------------------------------- */
.heading {}
.heading_vline {
	position: relative;
	padding-bottom: 150px;
	font-family: "brother-1816",sans-serif;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	color: #ccc6a8;
	letter-spacing: 3px;
}
.heading_vline::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 1px;
	height: 120px;
	background-color: #ccc6a8;
}
.heading_vline.white { color: #fff; }
.heading_vline.white::before{ background-color: #fff; }

.heading_message {
	font-family: "Noto Serif JP",serif;
	font-size: 32px;
	letter-spacing: 0.05em;
	line-height: 1.8;
}
.heading_message em {
	display: block;
	font-style: normal;
	font-family: "brother-1816",sans-serif;
	color: #ccc6a8;
	font-size: 21px;
	font-weight: bold;
	letter-spacing: 0.08em;
}
.heading_main {
	margin-bottom: 0.5em;
	font-family: "brother-1816",sans-serif;
	font-size: 20px;
	letter-spacing: 0.05em;
	font-weight: bold;
	line-height: 1.8;
	color: #000;
}
.heading_main em {
	display: inline-block;
	margin-left: 2em;
	font-style: normal;
	color: #ccc6a8;
}
.heading_sub {
	margin-bottom: 1.25em;
	font-size: 20px;
	letter-spacing: 0.05em;
	font-weight: bold;
	line-height: 1.8;
	color: #000;
	text-transform: uppercase;
}
.heading_sub em {
	display: block;
	font-style: normal;
	font-family: "brother-1816",sans-serif;
	font-size: 14px;
	color: #ccc6a8;
}

/* heading (Subpage Only)
----------------------------------------------------- */
.heading_english {
	margin-bottom: 1.5em;
	display: block;
	font-style: normal;
	font-family: "brother-1816",sans-serif;
	color: #ccc6a8;
	font-size: 40px;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-align: center;
}

.heading_box {
	display: inline-block;
	margin-bottom: 1.5em;
	padding: 0.5em 0.5em;
	background-color: #000;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 0.08em;
}

.heading_centering {
	margin-bottom: 2.0em;
	font-size: 20px;
	letter-spacing: 0.05em;
	font-weight: bold;
	line-height: 1.8;
	color: #ccc6a8;
	text-transform: uppercase;
	text-align: center;
}
.heading_centering em {
	display: block;
	font-style: normal;
	font-family: "brother-1816",sans-serif;
	font-size: 40px;
	color: #000;
}

.heading_mincho {
	margin-bottom: 1.0em;
	font-family: "Noto Serif JP",serif;
	font-size: 32px;
	letter-spacing: 0.05em;
	line-height: 1.8;
}
.heading_mincho em {
	font-size: 60%;
	display: block;
	font-style: normal;
}


/* Background
----------------------------------------------------- */
.bg_mchs {
	background: url(images/top-about-us-pic01.png) no-repeat center;
	background-size: cover;
}
.bg_gold { background-color: #ccc6a8; }
.bg_gray { background-color: #f0f0ef; }
.bg_ccc { background-color: #ccc; }
.bg_black { background-color: #000; }
.bg_dark { background-color: #171713; }

/* Button
----------------------------------------------------- */
.key_btn .btn_content a {}
.key_btn .btn_content a:link,
.key_btn .btn_content a:visited {
	display: block;
	text-decoration: none;
}
.key_btn.ta_l .btn_content { margin-left: 0; }
.key_btn.ta_r .btn_content { margin-right: 0; }

	.key_btn.gray {}
	.key_btn.gray .btn_content {
		background-color: #666;
		border-color: #666;
	}
	.key_btn.gray .btn_content a:link,
	.key_btn.gray .btn_content a:visited { color: #fff;}
	.key_btn.gray .btn_content:before { background-color: #000;}

	.key_btn.gold {}
	.key_btn.gold .btn_content {}
	.key_btn.gold .btn_content a:link,
	.key_btn.gold .btn_content a:visited { color: #fff;}
	.key_btn.gold .btn_content:before { background-color: #666;}

	.key_btn.black {}
	.key_btn.black .btn_content {
		background-color: #000;
		border-color: #000;
	}
	.key_btn.black .btn_content a:link,
	.key_btn.black .btn_content a:visited { color: #fff;}
	.key_btn.black .btn_content:hover a { color: #000;}
	.key_btn.black .btn_content:before { background-color: #fff;}

	.key_btn.line {}
	.key_btn.line .btn_content {
		background-color: #00b900;
		border-color: #00b900;
	}
	.key_btn.line .btn_content a:link,
	.key_btn.line .btn_content a:visited { color: #fff;}
	.key_btn.line .btn_content:hover a { color: #000;}
	.key_btn.line .btn_content:before { background-color: #fff;}


/* text
----------------------------------------------------- */
.fc_red { color: #f00; }
.fc_gray { color: #666; }

.ta_c { text-align: center; }
.ta_l { text-align: left; }
.ta_r { text-align: right; }

.text_note { font-size: 9px; }
.text_lead {
	font-family: "Noto Serif JP",serif;
	font-size: 1.9em;
	letter-spacing: 0.05em;
	line-height: 1.8;
}

.text_numbering {
	color: #ccc6a8;
	font-size: 20px;
	font-family: "brother-1816",sans-serif;
	font-weight: bold;
	letter-spacing: 0.08em;
}
.text_numbering span { font-size: 2em;}


/* Table
----------------------------------------------------- */
table {
	width: 100%;
}
table:not( :last-child ) {
	margin-bottom: 80px;
}
table tr {}
table tr th, 
table tr td {
	padding: 1.0em 2.0em;
	text-align: left;
	line-height: 2.4;
}
table tr th {
	text-align: right;
}
table tr th span {
	color: #fff;
	background-color: #ccc6a8;
	font-size: 10px;
	font-weight: 400;
	padding: 4px 6px;
	margin-left: 12px;
	display: inline-block;
	vertical-align: middle;
}


table.table_block tr {
  margin-bottom: 3em;
  display: block;
}
table.table_block tr th {
  margin-bottom: 1.5em;
	font-size: 1.25em;
}
table.table_block tr th, 
table.table_block tr td {
	font-size: 1.25em;
	width: 100%;
	display: block;
	text-align: left;
}

/* Horizontal Rule */
hr.sep {
	border: none;
	height: 80px;
}

/* List */
ul.list_circle li {
	margin: 0 0 1.5em;
	position: relative;
	padding-left: 1.8em;
	font-size: 14px;
}
ul.list_circle li::before {
	content: "● ";
	position: absolute;
	left: 0;
	top: 0.0em;
	display: inline-block;
	vertical-align: middle;
	margin: 0 1.25em 0 0;
	color: rgba(0,0,0,0.25);
	font-size: 0.9rem;
}


/* 
-----------------------------------------------------

	header.php

-----------------------------------------------------
*/

/* 2段ナビゲーションパターンの場合 */
/*
header #entry_btn {
	right: 20px;
	top: 20px;
	transform: translate(0, -0%);
	-webkit-transform: translate(0, -0%);
	-moz-transform: translate(0, -0%);
	-ms-transform: translate(0, -0%);
	-o-transform: translate(0, -0%);
}

header #pc_menu {
	position: absolute;
	top: 86px;
	right: 20px;
	transform: translate(0, -0%);
	-webkit-transform: translate(0, -0%);
	-moz-transform: translate(0, -0%);
	-ms-transform: translate(0, -0%);
	-o-transform: translate(0, -0%);

	text-align: right;
}
*/
header #pc_menu {
	right: 400px;
}
header #pc_menu li {
	padding: 0 0 0 24px;
}

header #entry_btn .btn_content {
	display: inline-block;
	vertical-align: middle;
	margin-left: 12px;
	width: 152px;
	height: 40px;
	line-height: 40px;
	letter-spacing: 0;
}


/* 
-----------------------------------------------------

	index.php
	https://www.mchs.co.jp/recruit/

-----------------------------------------------------
*/

/* about-us
----------------------------------------------------- */
#about-us {}
#about-us .inner {}

/* voice
----------------------------------------------------- */
#about-us .members_voice {}
.members_voice {
	margin: 80px auto 0;
}
.members_voice .arrow {
	display: block;
	background: url(images/icon-arrow-down-black.png) no-repeat center bottom;
	background-size: 19px auto;
	padding-bottom: 30px;
	margin: 0 auto 1.25em;

	font-style: normal;
	font-family: "brother-1816",sans-serif;
	color: #000;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}
.members_voice .members_voice_lineup {}
.members_voice_lineup .row {}
.members_voice_lineup .row .col {
}
.members_voice_lineup .row .col a {
	text-decoration: none;
	color: #171713;
}
.members_voice_lineup .in {
	position: relative;
	padding: 20px;
	background-color: #fff;
	box-shadow: 0 0 24px rgba(0,0,0,0.15);
	min-height: 200px;
	vertical-align: middle;
	text-align: center;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	     -o-transition: all 0.3s;
	        transition: all 0.3s;
}
.members_voice_lineup .row .col:hover .in {
	background-color: #ccc6a8;
	color: #fff;
}
.members_voice_lineup .in::before,
.members_voice_lineup .in::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 18px;
	background: no-repeat;
	background-size: contain;
	margin: 20px;
}
.members_voice_lineup .in::before {
	background-image: url(images/icon-quote-start.png);
	top: 0;
	left: 0;
}
.members_voice_lineup .in::after {
	background-image: url(images/icon-quote-end.png);
	right: 0;
	bottom: 0;
}
.members_voice_lineup .in .text {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	-webkit-transform: translate(0, -50%);
	   -moz-transform: translate(0, -50%);
	    -ms-transform: translate(0, -50%);
	     -o-transform: translate(0, -50%);
	        transform: translate(0, -50%);
	font-family: "Noto Serif JP",serif;
	font-size: 20px;
	letter-spacing: 0.05em;
	line-height: 2;
}


/* introduction
----------------------------------------------------- */
#introduction {
	padding-bottom: 0;
}
#introduction .text_lead {
	/*font-size: 1.32em;*/
}
.introduction_section {
	position: relative;
}
.introduction_section .content {
	position: relative;
	z-index: 2;
}
.introduction_section .picture {
	position: relative;
	z-index: 1;
}

.introduction01 {}
	.introduction01 .content {
		margin: 0 auto 80px;
	}
	.introduction01 .picture {
		position: absolute;
		right: 0;
		top: 0;
	}
	.introduction01 .picture .picture01 {
	  max-width: 720px;
	  margin-top: -40px;
	  margin-right: -100px;
	}

.introduction02 {
	min-height: 800px;
}
	.introduction02 .content {}
	.introduction02 .picture {
	  position: absolute;
		z-index: 3;
	  right: 0;
	  top: 0;
	}
	.introduction02 .picture .picture01 {
		max-width: 600px;
		width: 100%;
		margin: 180px 90px 0 0;
	}
	.introduction02 .picture .picture01::before {
		content: "";
		position: absolute;
		z-index: -1;
		left: -64vw;
		top: 80px;
		background-color: #000;
		opacity: 0.2;
		width: 520px;
		height: 520px;
	}

.introduction03 {
	margin-bottom: 80px;
}
	.introduction03 .content {
		text-align: right;
	}
	.introduction03 .picture {
	  position: absolute;
		z-index: 2;
	  left: 0;
	  top: 0;
	}
	.introduction03 .picture .picture01 {
		position: relative;
		z-index: 2;
	  max-width: 720px;
	  margin-top: -132px;
	  margin-left: -80px;
	}
	.introduction03 .picture .picture01::before {
		content: "";
		position: absolute;
		right: -80px;
		top: 80px;
		z-index: -1;
		background-color: #000;
		opacity: 0.2;
		width: 520px;
		height: 520px;
	}

.heading_lead {
	margin-bottom: 1em;
	font-family: "Noto Serif JP",serif;
	font-size: 32px;
	letter-spacing: 0.05em;
	line-height: 2;
}
/*.heading_lead span {
	display: inline;
	padding: 0.05em 0.05em;
	background-color: #000;
	color: #fff;
}*/

.section p {
	line-height: 1.8;
}
.section p:not( :last-child ) {
	padding-bottom: 24px;
}

/* company
----------------------------------------------------- */

/* 理念・使命 */
.company01 {
	position: relative;
	padding: 40px 0 80px;
	background-color: #fff;
	border-top: 1px solid #ccc6a8;
}
.company01::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 1px;
	height: 100%;
	margin: auto;
	background-color: #ccc6a8;
}
.company_lineup {}

/* 代表メッセージ */
.company02 {
	background-color: #262626;
	color: #fff;
}
.company02 .picture,
.company02 .content { width: 50%; }
.company02 .picture .picture01 {
	margin-left: -80px;
}
.company02 .content {}
.company02 .content,
.company02 .content .heading_main {
	color: #fff;
}
.company02 .content .in {
	padding: 80px;
	padding-right: 0;
}
.company02 .content .heading_main {
	margin-bottom: 2em;
}
.company02 .content .text_lead {
	font-size: 28px;
}
.company02 .btn .btn_content { margin-left: 0; }

/* 企業情報 */
.company03 {
	padding: 80px 0;
	background-color: #fff;
}
.company_data {}
/*.company_data .row .company_data_heading {
	width: 40%;
}
.company_data .row .company_data_meta {
	width: 54%;
	padding-left: 60px;
	border-left: solid 1px #ccc6a8;
}*/
.company_data .row .company_data_meta 
.company_data .company_data_meta .row {
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.company_data .company_data_meta .meta {
	/*width: inherit;*/
	margin-bottom: 40px;
}
.company_data .company_data_meta .establishment {}
.company_data .company_data_meta .member {}
.company_data .company_data_meta .service {}


/* rss
----------------------------------------------------- */
#rss {
	padding: 64px 32px;
}

/* 記事ループ */
.loop {}
.loop .row {}
.loop .row .col {}
.more-link { display: none; }

.loop .image {
	position: relative;
	overflow: hidden;
	background-color: #121212;
}
.loop .image img {
	/* objectFitImages for ie11 */
	object-position: center center;
	font-family: 'object-fit: cover; object-position: center center;'
	-webkit-transition: all ease-out 0.8s;
	   -moz-transition: all ease-out 0.8s;
	    -ms-transition: all ease-out 0.8s;
	        transition: all ease-out 0.8s;
}

.loop .image img:hover {
	-webkit-transform: scale(1.05);
	   -moz-transform: scale(1.05);
	    -ms-transform: scale(1.05);
	        transform: scale(1.05);
}
.loop .meta {
	font-size: 12px;
	color: #aaa;
}
.loop .date {
	font-family: "brother-1816", sans-serif;
	font-weight: bold;
	letter-spacing: 0.05em;
}
.loop .date.published { color: #ccc6a8; }
.loop .date.modified {}
/*.loop .category {}
.loop .category span {
	display: inline-block;
	padding: 0.25em 1.25em;
	border-radius: 0;
	background: #ccc6a8;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
}
.loop .category a {
	color: #fff;
	text-decoration: none;
}
.loop .category a:hover {}

.loop .tag {}*/

.loop .title {
	font-size: 15px;
	font-weight: bold;
}
.loop .title,
.loop .title p {
	line-height: 1.5;
}
.loop .title a {
	color: #555;
	text-decoration: none;
}
.loop .title a:hover { text-decoration: underline; }

.loop .content {
}
.loop .content .text {
	color: #aaa;
	font-size: 12px;
	max-height: 5em;
	overflow: hidden;
}
.loop .content .text p {
	line-height: 1.8;
}
.loop .content .text p:not( :last-child ) {
	margin-bottom: 0.75em;
}

.loop .more {
	display: none;

	position: absolute;
	z-index: 9;
	right: 20px;
	bottom: 20px;
	width: 60px;
	height: 30px;
}


/* ※縦配置パターン　*/
.loop .type-main {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 0 -3% -6% 0;
}
.loop .type-main .col {
	width: 30.33%;
	margin: 0 3% 6% 0;
}

.loop .type-main .col > *:not( :last-child ) { margin-bottom: 20px; }

.loop .type-main .image {
	height: 0;
	padding-bottom: 66.66%;
	position: relative;
	overflow: hidden;
}
.loop .type-main .image img {
	position: absolute;
	object-fit: cover;
	width: 100%;
	height: 100%;
	-webkit-transition: all ease-out 0.8s;
	   -moz-transition: all ease-out 0.8s;
	    -ms-transition: all ease-out 0.8s;
	        transition: all ease-out 0.8s;
}
.loop .type-main .image img:hover {
	-webkit-transform: scale(1.05);
	   -moz-transform: scale(1.05);
	    -ms-transform: scale(1.05);
	        transform: scale(1.05);
}

.loop .type-main .image .category {
	position: absolute;
	right: 0;
	top: 0;
} 

.loop .type-main .content {
	padding: 0;
	margin-top: 20px;
}
.loop .type-main .content > *:not( :last-child ) { margin-bottom: 15px; }

.loop .type-main .title {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.8;
}
.loop .type-main .title a { color: inherit; text-decoration: none;}
.loop .type-main .title a:hover {
	text-decoration: underline;
}
.loop .type-main .meta {}
.loop .type-main .meta > * {
	display: block;
	display: inline-block;
}
.loop .type-main .meta > .tag { display: block; }
.loop .type-main .meta > *:not( :last-child ) {
	margin-right: 1.0rem;
	margin-bottom: 1.0rem;
} 

.loop .type-main .meta .date { font-size: 12px;}

/*.loop .type-main .category {}
.loop .type-main .category span {}

.loop .type-main .tag {}
.loop .type-main .tag .list-tag {}
*/
.loop .type-main .content {}
.loop .type-main .content .text {}


/* links
----------------------------------------------------- */
#links {
	padding: 64px 32px;
	background-color: #21211d;
}
#links .section {}
#links a p {
	color: #a6a6a5;
	font-weight: 600;
	padding-top: 8px;
	letter-spacing: 1px;
}

/* culture
----------------------------------------------------- */
#culture { padding: 0;}
#culture .section {
	padding: 80px 0;
}

/* クレド */
.culture01 {}
.culture01 .credo {}
.credo {}
/*.credo .row .col { width: 100%; }
.credo .row .picture { max-width: 340px; text-align: right; }
.credo .row .content { max-width: 500px; }

.credo .row .picture img { max-width: 240px; }*/

.credo .row .col {
	margin-bottom: 20px;
}
.credo .picture {
	margin: auto;
	max-width: 900px;
	text-align: center; 
}
.credo .picture img { max-width: 100%; }

.credo .content {
	margin: auto;
	/*max-width: 960px;*/
}
.credo .credo_text {
	font-family: "Noto Serif JP",serif;
	font-size: 12px;
	color: #fff;
}
.credo .credo_text strong {
	font-size: 20px;
}
.credo .credo_text em {
	display: block;
	color: #ccc6a8;
	font-style: italic;
	letter-spacing: 0;
}

/* 社内制度 */
.culture02 {
	padding: 40px 0;
	background-color: #fff;
}
#culture .culture_lists ul.culture_list {
	margin-top: 80px;
}
#culture .culture_lists ul.culture_list li {
	width: 25%; /* override */
}
#culture .culture_list li .culture_text { text-align: left; }
#culture .culture_list li .culture_text.ta_c { text-align: center; }


/* vision
----------------------------------------------------- */
#vision {
	padding: 80px 0;
	padding-bottom: 0;
}
.vision01 {}
.vision01 .future {}

/* 未知を切り開く。 */
.future {}
.future .future_section01 {}

.future .future_section {
	position: relative;
}
.future .future_section .content {
	position: relative;
	z-index: 2;
}
.future .future_section .picture {
	position: relative;
	z-index: 1;
}

.future .future_section01 {}
	.future .future_section01 .picture {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}
	.future .future_section01 .picture .picture01 {
	  max-width: 600px;
	  margin-top: -80px;
	  margin-left: -80px;
	}
	.future .future_section01 .picture .picture02 {
		max-width: 720px;
		position: absolute;
		top: 0;
		right: 0;
	}
	.future .future_section01 .content {
		padding: 180px 0 0; 
		max-width: 580px;
		margin-left: auto;
	}
	.future .future_section01 .picture .picture01::before {
		content: "";
		position: absolute;
		z-index: -1;
		right: -14vw;
		top: 400px;
		background-color: #000;
		opacity: 0.2;
		width: 520px;
		height: 520px;
	}

.future .future_section02 {
	min-height: 800px;
}
	.future .future_section02 .content {
		max-width: 580px;
	}
	.future .future_section02 .picture {
	  position: absolute;
		z-index: 3;
	  right: 0;
	  top: 0;
	}
	.future .future_section02 .picture .picture01 {
		max-width: 600px;
		width: 100%;
		margin: 120px -0px 0 auto;
	}

.heading_vision {
	margin-bottom: 1.25em;
	font-family: "Noto Serif JP",serif;
	color: inherit;
	font-size: 21px;
	line-height: 2;
	text-transform: uppercase;
}
.heading_vision em {
	display: block;
	font-style: normal;
	font-family: "brother-1816",sans-serif;
	color: #ccc6a8;
	font-size: 40px;
	font-weight: bold;
	letter-spacing: 0.08em;
}

/* interview
----------------------------------------------------- */
#interview {
	background-color: #181713;
	color: #fff;
}
#interview .inner {
	max-width: 1120px;
}
#interview .heading { color: #fff; }
#interview .interview_list li {
	margin: 0 26px 52px;
}

/* interview_wrap → style.css */


/* gallery
----------------------------------------------------- */
#gallery {
	background-color: #000;
	color: #fff;
}
#gallery ul {}
#gallery ul li {
	width: 20%;
}
#gallery .gallery_content li img {}
#gallery .gallery_content li img:hover {}


/* 
-----------------------------------------------------

	content-cta.php

-----------------------------------------------------
*/
#cta .key_btn .btn_content {
	display: inline-block;
	vertical-align: middle;
	margin-left: 12px;
}


/* 
-----------------------------------------------------

	footer.php

-----------------------------------------------------
*/
footer .btn .btn_content {
	display: inline-block;
	vertical-align: middle;
	margin-left: 12px;
}

/* 
-----------------------------------------------------

	page.php

-----------------------------------------------------
*/

.under_first_view { background-image: url(images/entry.jpg);}

#newgraduates .under_first_view { background-image: url(images/sub-newgraduates-firstview.jpg);}
#career .under_first_view { background-image: url(images/sub-career-firstview.jpg);}

.under_page {}
.under_page .inside_inner {}
.under_header {
	background-color: #171713;
}
.under_header .heading {
	margin: 0;
	padding: 0.25em 1em;
	text-align: center;
	color: #fff;
	font-size: 2.0em;
	font-weight: bold;
	line-height: 2.4;
}
.under_article {}
.under_article .under_content {}


/* article
----------------------------------------------------- */
.article {}
.article_content {}

/* Link */
.article a {
	display: inline;
	color: #ccc6a8;
	text-decoration: underline;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}
.article a:hover {
	text-decoration: none;
}

.article_cta {
	margin: 0 -180px 80px;
	padding: 40px 0;
	background-color: #ccc6a8;
	color: #fff;
	text-align: center;
}
.article_cta .heading { color: #fff;}
.article_cta .btn .btn_content { margin: 0 auto; }
.article_cta p {
    font-size: 14px;
    line-height: 2.4;
    padding-bottom: 24px;
}

	.article_cta.black { background-color: #000; }

/* 
-----------------------------------------------------
	
	固定ページテンプレート
	新卒採用 & 中途・アルバイト

	Templates -
	page-newgraduates.php
	page-career.php
	
	URL -
	https://www.mchs.co.jp/recruit/newgraduates/
	https://www.mchs.co.jp/recruit/career/

-----------------------------------------------------
*/

.block {
	margin-bottom: 48px;
}
ul.loop_list li {
    font-size: 12px;
    width: 33.33%;
    padding: 0 12px;
    margin: 0;
}
ul.loop_list li a {
	color: #000;
	text-decoration: none;
}
ul.loop_list li .loop_img {
    color: #fff;
    position: relative;
    margin-bottom: 24px;
    text-align: center;
    overflow: hidden;
    max-height: 140px;
}
ul.loop_list li .loop_img:before {
    content: '';
    background-color: rgba(23,23,19,0.4);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
}
ul.loop_list li .loop_img img {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}
ul.loop_list li .loop_content .loop_title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1px;
    margin-bottom: 20px;
}
ul.loop_list li .loop_content .loop_text {
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: .5px;
    margin-bottom: 20px;
}
ul.loop_list li .loop_content .loop_link {
    color: #ccc6a8;
    font-family: "brother-1816",sans-serif;
    font-size: 14px;
    font-weight: 600;
    position: relative;
    letter-spacing: 1px;
    display: inline-block;
}
ul.loop_list li .loop_content .loop_link:before {
    content: '';
    background-color: #ccc6a8;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transform-origin: right top;
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
}

@media screen and (max-width: 768px) {

ul.loop_list li {
    width: 50%;
    padding: 0;
    margin-bottom: 40px;
}
ul.loop_list li:nth-child(odd) {
    padding-right: 8px;
}


}


/* Accordion
----------------------------------------------------- */
.accordion_list {}
.accordion_list:not( :last-child ) {
	margin-bottom: 80px;
}
.accordion_list .list_wrap {
	/*border: solid 1px #dcdcdc;*/
	box-shadow: 0 0 6px rgba(0,0,0,0.25);
}
.accordion_list .list_wrap:not( :first-child ) { margin-top: 20px;}

.accordion_list .list_wrap .date {
	font-weight: bold;
	font-size: 1.25em;
}

.accordion_list .list_wrap .list_heading {}
.accordion_list .list_wrap .list_content {}

.accordion_list .list_wrap .list_heading {
	position: relative;
	background-color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}

.event_list.accordion_list .list_wrap .list_heading {
	display: none !important;
}

.accordion_list .list_wrap .list_heading.js-acc-head::before {
	content: "＋";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: 0;
	width: 60px;
	height: 100%;
  line-height: 3.6;
	background-color: #000;
	color: #fff;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}
.accordion_list .list_wrap .list_heading:hover,
.accordion_list .list_wrap .list_heading.js-acc-head-on { background-color: #f6f6f6;}
.accordion_list .list_wrap .list_heading.js-acc-head-on::before { content: "ー" }
.accordion_list .list_wrap .list_heading .in {
	padding: 1em 20px;
	padding-right: 80px;
}
.accordion_list .list_wrap .list_heading .title {
	font-weight: bold;
	font-size: 1.25em;
}

.accordion_list .list_wrap .list_content { background-color: #fff;}
.accordion_list .list_wrap .list_content .in {
	padding: 40px;
}
.accordion_list .list_wrap .list_content a {
	display: inline;
	color: #ccc6a8;
	text-decoration: underline;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
}
.accordion_list .list_wrap .list_content a:hover {
	text-decoration: none;
}

/* message
----------------------------------------------------- */
.entry_message {}

/* withyou
----------------------------------------------------- */
.entry_withyou {
	position: relative;
	overflow: inherit;
	padding-top: 280px;
	padding-bottom: 188px;
}
.entry_withyou .heading {
	position: absolute;
	z-index: 1;
	right: 0;
	top: -0.25em;
	margin: 0;
	font-family: "brother-1816",sans-serif;
	color: #fff;
	font-size: 160px;
	font-weight: bold;
	text-align: right;
}
.entry_withyou .heading_mincho {
	font-size: 54px;
	color: #000;
}

#newgraduates .entry_withyou ul.list_circle li {
	font-family: "Noto Serif JP",serif;
	font-size: 20px;
}

.withyou_content {}
.withyou_content .withyou_section {
	position: relative;
}
.withyou_content .withyou_section .content {
	position: relative;
	z-index: 2;
}
.withyou_content .withyou_section .picture {
	position: relative;
	z-index: 1;
}

.withyou_content .withyou_section01 {
	min-height: 0;
}
	.withyou_content .withyou_section01 .content {
		max-width: 580px;
		padding: 80px 0 0;
		margin-left: auto;
	}
	.withyou_content .withyou_section01 .picture {
	  position: absolute;
		z-index: 3;
	  left: 0;
	  top: 0;
	}
	.withyou_content .withyou_section01 .picture .picture01 {
		max-width: 600px;
		width: 100%;
		margin: -80px 0 0 -80px;
	}

	.withyou_content .withyou_section01 .picture .picture01::before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 180px;
		top: -120px;
		background-color: #000;
		opacity: 0.2;
		width: 520px;
		height: 520px;
	}
	.withyou_content .withyou_section01 .picture .picture02 {
		max-width: 540px;
		width: 100%;
		margin: -160px 0 0 40px;
	}


/* event
----------------------------------------------------- */
.entry_event {
	position: relative;
	overflow: inherit;
	padding-top: 180px;
	padding-bottom: 188px;
}
.entry_event .heading {
	position: absolute;
	z-index: 1;
	left: 0;
	top: -0.25em;
	margin: 0;
	font-family: "brother-1816",sans-serif;
	color: #fff;
	font-size: 160px;
	font-weight: bold;
}
.event_content {
	position: relative;
}
.event_content .row .col {}
.event_content .row .col.content01 { width: 60%; }
.event_content .row .col.content02 { width: 34%; }

/* 自社イベント */
.event_content .content01 {}
.event_content .accordion_list .list_wrap { border: none; }



/* flow
----------------------------------------------------- */

ul.list_flow {
	border-left: solid 1px #ccc6a8;
}
ul.list_flow li {
	position: relative;
	margin-bottom: 40px;
	padding-left: 40px;
	font-size: 14px;
	line-height: 2.4;
	font-weight: bold;
}
ul.list_flow li::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -16px;
	margin: auto;
	width: 32px;
	height: 32px;
	background: url(images/icon-list-flow.png) no-repeat center;
	background-size: contain;
}

/* 
-----------------------------------------------------

	archive.php

-----------------------------------------------------
*/

/* 
-----------------------------------------------------

	search.php

-----------------------------------------------------
*/
/* 
-----------------------------------------------------

	single.php

-----------------------------------------------------
*/

/*
-----------------------------------------------------

	=Media Queries Responsive Structure

-----------------------------------------------------
*/

/* Desktop
----------------------------------------------------- */
@media screen and (min-width: 769px) {

	/* end */
}


/* Smartphone
----------------------------------------------------- */
@media screen and (min-width: 0px) and (max-width: 768px) {

	/* common layout
	----------------------------------------------------- */
	/* Flex Box */
	.flex_box.flex_responsive_column {
		flex-direction: column;
		margin-right: 0;
	}

	.flex_box.flex_responsive_column > .flex_item {
		width: 100%;
		margin-right: 0;
		margin-bottom: 32px;
	}
	.flex_box.flex_responsive_column > .flex_item:last-child { margin-bottom: 0; }
	.flex_box.flex_responsive_column:not( :last-child ) { margin-bottom: 32px; }

	/* Heading */
	.heading_vline {
		font-size: 18px;
		padding-bottom: 100px;
	}
	.heading_vline::before { height: 80px; }
	.heading_message {
		font-size: 21px;
	}
	.heading_message em {
		font-size: 14px;
	}
	.heading_main {
		font-size: 18px;
	}
	.heading_main em {
		font-size: 14px;
		display: block;
		margin-left: 0;
	}

	/* Heading (Subpage Only) */
	.heading_box {
		font-size: 16px;
	}
	.heading_english {
		font-size: 20px;
	}
	.heading_lead {
		font-size: 26px;
	}
	.heading_mincho {
		font-size: 20px;
	}
	.heading_centering {
		font-size: 14px;
	}
	.heading_centering em {
		font-size: 20px;
	}

	/* Button */
	.btn .btn_content {
		margin: 18px auto 0;
	}

	/* Other */
	table tr {
		display: block;
		padding: 0 0 0.5em;
	}
	table tr th, 
	table tr td {
		padding: 0 0 0.5em;
		text-align: left;
		display: block;
	}
	table tr td {
		font-size: 12px;
	}


	/* index.php
	----------------------------------------------------- */
	#about-us .members_voice {
		margin: 40px auto 0;
	}
	.members_voice .members_voice_lineup {}
	.members_voice_lineup .in .text {
		font-size: 14px;
	}
	.members_voice_lineup .in {
		min-height: 100px;
	}

	.introduction_section:not( :last-child ) { margin-bottom: 32px; }
	.introduction_section .picture {
		position: static;
		margin: 0 -32px;
	}
	.introduction_section .picture .picture01::before,
	.introduction_section .picture .picture02::before { display: none; }
	.introduction_section .picture .picture01,
	.introduction_section .picture .picture02 {
		max-width: 100%;
		margin: 0;
	}
	/*.introduction01 .picture {
		margin-top: -64px;
	}*/
	.text_lead { font-size: 1em; }
	.introduction_section .content {
		margin-bottom: 48px;
	}

	/* company */
	.company01 {
		margin: 0 -32px; 
		padding: 32px;
		text-align: center;
	}
	.company01::before { display: none; }

	.company02 {
		margin: 0 -32px; 
	}
	.company02 .picture .picture01 { margin-left: 0; }
	.company02 .content .in {
		padding: 32px;
	}
	.company02 .content .text_lead { font-size: 20px; }
	.company02 .company_lineup .row .picture {
		margin-bottom: 0;
	}

	.company03 {
		margin: 0 -32px; 
		padding: 32px;
	}
	.company_data .row .company_data_meta {
		padding: 0;
		width: 100%;
	}
	.company_data .row .company_data_meta > .in {
		padding: 0 32px;
	}
	.text_numbering span { font-size: 1.5em; }
	.company_data .flex_box.flex_responsive_column > .flex_item {
		margin-bottom: 48px;
	}

	.company_data .heading_sub { margin-bottom: 0.5em; }

	/* rss */
	.loop .type-main {}
	.loop .type-main .col {
		width: 100%;
	}
	.loop .type-main .col:not( :last-child ) { margin-bottom: 20px;}

	.loop .type-main:after,
	.loop .type-main .col:after  {
		content:".";
		display: block;
		height: 0px;
		font-size: 0;
		clear: both;
		visibility: hidden;
	}
	.loop .type-main .image {
		position: relative;
		width: 100px;
		height: 100%;
		min-height: 50px;
		float: left;
		margin-right: 15px;
		padding-bottom: 0;
	}
	.loop .type-main .image img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.loop .type-main .image img:hover {}
	.loop .type-main .content {
		margin-top: 0;
	}
	.loop .type-main .content > *:not( :last-child ) {
		margin-bottom: 10px;
	}
	.loop .type-main .meta {
		margin-bottom: 5px; 
		line-height: 1.5;
		font-size: 10px;
	}
	.loop .type-main .meta > * {
		display: block;
		font-size: 10px;
	}
	.loop .type-main .meta > *:not( :first-child ) {
		margin-bottom: 5px; 
	}

	/*.loop .type-main .category {}
	.loop .type-main .category span {
		padding: 0;
		margin: 0;
		border: none;
		background-color: transparent;
		color: #ccc6a8;
		font-size: 12px;
	}
	.loop .type-main .category a {
		color: #ccc6a8;
		text-decoration: none;
	}*/

	.loop .type-main .title {
		font-size: 14px;
		font-weight: bold;
		line-height: 1.6;
	}
	.loop .type-main .title a { color: #000; }

	/* culture */
	#culture .section {
	  padding: 64px 32px;
	}
	.credo .row .picture {
		max-width: 100%;
		text-align: center;
	}
	.credo .row .picture img { max-width: 175px; }
	.credo .row .content {
		padding: 0 0;
	}
	.credo .credo_text strong {
		font-size: 16px;
	}
	.credo .credo_text em {
		font-size: 12px;
	}
	#culture .culture_lists ul.culture_list li {
		width: 100%;
	}

	/* vision */
	.future .future_section:not( :last-child ) { margin-bottom: 32px; }
	.future .future_section .picture {
		position: static;
		width: 100%;
		margin: 0 0;
	}
	.future .future_section .picture .picture01::before,
	.future .future_section .picture .picture02::before { display: none; }
	.future .future_section .picture .picture01,
	.future .future_section .picture .picture02 {
		position: static;
		max-width: 100%;
		margin: 0;
	}
	.future .future_section .picture .picture02 {
		padding: 64px 32px 0;
	}
	.future .future_section .content {
		padding: 32px;
	}

	/* interview */
	#interview .interview_list li {
		width: 44%;
		margin: 0 3% 32px;
	}
	.interview_list li .interview_content .interview_name span {
		display: block;
		padding-left: 0;
	}

	/* gallery */
	#gallery {
		padding: 64px 0;
	}
	#gallery ul {
		-webkit-justify-content: flex-start;
    justify-content: flex-start;
	}
	#gallery ul li {
		width: 20%;
		width: 33.33%;
	}
	#gallery .gallery_content li img {
		border: none;
	}

	/* footer.php
	----------------------------------------------------- */
	#cta .cta_title {
		font-size: 20px;
	}


	/* page.php
	----------------------------------------------------- */
	.under_page.article {
		padding: 64px 16px;
		margin-top: 0;
	}
	.under_page.article .inside_inner.article_content {
		margin-top: -48px;
	}
	.under_page.article .inside_inner .under_article .under_content {
		padding: 0 32px;
	}
	.under_header .heading {
		padding: 1em 1em;
		font-size: 1.2em;
	}

	/* page-newgraduates.php, page-career.php
	----------------------------------------------------- */

	/*  withyou */
	.entry_withyou {
		padding-top: 128px;
		padding-bottom: 64px;
	}
	.entry_withyou .heading,
	.entry_event .heading {
		font-size: 72px;
	}
	.withyou_content .withyou_section .picture .picture01::before,
	.withyou_content .withyou_section .picture .picture02::before { display: none; }
	.withyou_content .withyou_section01 .picture {
		position: static;
		margin: 0 -32px;
	}
	.withyou_content .withyou_section01 .picture .picture01 {
		margin: -80px 0 0 0;
		max-width: 80%;
	}
	.withyou_content .withyou_section01 .picture .picture02 {
    max-width: 48%;
    width: 100%;
    margin: -140px 0 0 auto;
	}

	.withyou_content .withyou_section01 .content {
		padding-top: 32px;
	}
	#newgraduates .entry_withyou ul.list_circle li {
		font-family: inherit;
		font-size: 14px;
	}
	.entry_withyou .heading_mincho {
		font-size: 24px;
	}

	/* event */
	.entry_event {
		padding-top: 128px;
		padding-bottom: 64px;
	}
	.event_content .row .col.content01,
	.event_content .row .col.content02 { width: 100%; }

	.accordion_list .list_wrap .list_heading .date {
		font-size: 1em;
	}

	/* cta */
	.article_cta {
		margin: 0 -48px 64px;
	}
	.article_cta:last-child {
		margin-bottom: 0;
	}

	/* end */
}