/* TABLE OF CONTENTS:
 * 
 * 00 どのサイズでも共通で適用されるスタイル
 * Header H1
 * Header H2
 * Header H3
 * Button - p.more
 * Table
 * Event Box
 * 現在の募集部署
 * 目次 - Toc
 * PLAMOの求める人材
 * PLAMO事業内容・インターンシップのご案内・入社後の教育研修制度　イントロ
 * 新卒者に向けて・中途者に向けて
 * インターンシップのご案内
 * - 4種類のプログラムを用意
 * 入社後の教育研修制度
 * 募集要項
 *
 * 01 幅 768px 未満 ( スマホの時だけ適用されるスタイル )
 * section
 * Header H2
 * Button - p.more
 * Table
 * 現在の募集部署
 * PLAMO事業内容・インターンシップのご案内・入社後の教育研修制度　イントロ
 * 新卒者に向けて・中途者に向けて
 * インターンシップのご案内
 * - 4種類のプログラムを用意
 * 募集要項
 * - 雇用条件
 * 
 * 02 幅 768px 以上 ( PCの時だけ適用されるスタイル )
 * Header H2
 * Table
 * 現在の募集部署
 * PLAMO事業内容・インターンシップのご案内・入社後の教育研修制度　イントロ
 * 新卒者に向けて・中途者に向けて
 * インターンシップのご案内
 * - 4種類のプログラムを用意
 * - プログラム内容
 * 募集要項
 * 
 */


/* --------------------------------------------------------------------------------------------------------
   00
 *
 * どのサイズでも共通で適用されるスタイル
 */

/*Header H1*/
.mainImg.box {
	margin-bottom: 0 !important;
}

/*Header H2*/
h2[id$="-heading"]:not(.light-color) {
	color: #FFF !important;
	background: rgb(21, 94, 140) !important;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(21, 94, 140, 1)), color-stop(50%, rgba(1, 134, 198, 1)), to(rgba(21, 94, 140, 1))) !important;
	background: -o-linear-gradient(top, rgba(21, 94, 140, 1) 0%, rgba(1, 134, 198, 1) 50%, rgba(21, 94, 140, 1) 100%) !important;
	background: linear-gradient(180deg, rgba(21, 94, 140, 1) 0%, rgba(1, 134, 198, 1) 50%, rgba(21, 94, 140, 1) 100%) !important;
	padding: 1rem 0 0.25rem !important;
	margin-bottom: 2.5rem !important;
}

h2[id$="-heading"]:not(.light-color) span {
	display: block;
	border-bottom: 1px solid #fff;
	padding-left: 1rem;
}

@media (max-width: 729px) {
	h2[id$="-heading"].light-color {
		background: linear-gradient(to bottom, #fafeff, #e1f5fe) !important;
		color: #1b79b7 !important;
	}
}/* end max 729px */

/*Header H3*/
h3[class$="-head"] {
	color: #1c79b6;
	border-bottom: 1px solid #cccccc;
	padding-bottom: 0.5rem !important;
	margin-bottom: 2rem !important;
}

/* Button - p.more */
p.more a {
	background: #eebf00;
	border-color: #d2a900;
	color: #333;
	padding: 0.85em 1em;
	margin: 1rem 0;
}

/* Table */
#contents table {
	margin: 1em 0 1.5rem;
}

#contents table th {
	text-align: left;
	background: #e8f6ff;
	text-wrap: nowrap;
}

/* Event Box */
.company_orientation {
	background-color: #f2f2f2;
	padding: 30px;
}
.company_orientation table {
	background-color: #FFFFFF;
}
.agenda {
	font-weight: bold;
}

/* 現在の募集部署 */
section[id$="-department"] ul {
	counter-reset: department;
	list-style-type: none;
	padding-left: 0;
}

section[id$="-department"] ul li {
	counter-increment: department;
	border-bottom: 1px solid #cccccc;
	padding-bottom: 0.85rem;
	margin-bottom: 0.85rem;
}

section[id$="-department"] ul li::before {
	display: inline-block;
	content: counter(department, decimal-leading-zero);
	color: #fff;
	font-weight: 700;
	line-height: 2.5rem;
	background-color: #c00;
	border-radius: 0.5rem;
	margin-right: 1rem;
}

/* 目次 */
div#toc_container {
	padding: 0;
	border-radius: 0.25rem 0.25rem 0 0;
}

div#toc_container p.toc_title {
	padding: 1rem !important;
	background-color: #cccccc;
}

div#toc_container p.toc_title + ul.toc_list {
	margin: 2rem;
}

/* PLAMOの求める人材 */
section[id$="-clause"] .four-points {
	border: 2px solid #ccc;
	border-radius: 0.85rem;
	padding: 2rem;
	font-family: 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', sans-serif;
}

section[id$="-clause"] .four-points h3 {
	text-align: center;
	border-bottom: none;
	margin-bottom: 2rem !important;
}

section[id$="-clause"] .four-points ol li {
	font-weight: 700;
	border-bottom: 1px solid #cccccc;
	padding-bottom: 0.85rem;
	margin-bottom: 0.85rem;
}

/* PLAMO事業内容・インターンシップのご案内・入社後の教育研修制度　イントロ */
div[class$="-contents"] {
	margin-top: 2rem;
}

section[id$="-business"] div[class$="-contents"] div[class$="-txt"] div ul {
	list-style-type: none;
	display: -ms-grid;
	display: grid;
	padding-left: 0;
	text-align: center;
}

section[id$="-business"] div[class$="-contents"] div[class$="-txt"] div ul li a:hover {
	opacity: .8;
	color: #fff;
}

section[id$="-business"] div[class$="-contents"] div[class$="-txt"] div ul li span {
	display: block;
	background-color: #0072b5;
	-webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .1);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .1);
	color: #fff;
	font-size: 1.5rem;
	border-radius: 0.5rem;
	padding: 1.25rem 0;
}

/* 新卒者に向けて・中途者に向けて */
ul.recruitment-flow {
	list-style-type: none;
	padding-left: 0;
	counter-reset: flow;
}

ul.recruitment-flow li {
	text-align: center;
}

ul.recruitment-flow li div:first-of-type {
	border: 4px solid #1c79b6;
	border-radius: 0.5rem;
	padding: 1rem 1.5rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 60%;
}

ul.recruitment-flow li div:first-of-type img {
	margin-top: auto;
	margin-bottom: auto;
	display: inline-block;
}

ul.recruitment-flow li div:nth-of-type(2) {
	counter-increment: flow;
}

ul.recruitment-flow li div:nth-of-type(2)::before {
	content: counter(flow, decimal-leading-zero);
	color: #fff;
	font-size: 1.65rem;
	font-weight: 700;
	background-color: #1c79b6;
	border-radius: 0.5rem;
	padding: 0.35rem 0.5rem 0.05rem;
	width: 3.85rem;
}

ul.recruitment-flow li div:nth-of-type(2) p {
	text-align: left;
	width: 80%;
	margin-bottom: 0;
}

/* インターンシップのご案内
　　- 4種類のプログラムを用意 */
section[id$="-intern"] div.intern-program {
	margin: 3rem 0;
}

section[id$="-intern"] div.intern-program ul {
	list-style-type: none;
	padding: 0 0 1rem 0;
	color: #cc3333;
	font-weight: 700;
	display: -ms-grid;
	display: grid;
	grid-gap: 1rem;
	place-items: center;
	text-align: center;
}

section[id$="-intern"] div.intern-program ul li {
	width: 100%;
	border: 2px solid #cc3333;
	border-radius: 0.5rem;
	padding: 1rem;
}

section[id$="-intern"] div.intern-program ul li span {
	font-size: 3.5rem;
	display: block;
	line-height: 4rem;
}

/* 入社後の教育研修制度 */
section[id$="-ojt"] div.ojt-program ol {
	counter-reset: ojt-count;
	list-style-type: none;
	padding-left: 0;
	margin-bottom: 2rem;
	display: -ms-grid;
	display: grid;
	grid-gap: 1rem;
}

section[id$="-ojt"] div.ojt-program ol li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

section[id$="-ojt"] div.ojt-program ol li::before {
	content: counter(ojt-count);
	counter-increment: ojt-count;
	color: #333;
	background-color: #fff;
	border: 1px solid #333;
	border-radius: 50%;
	height: 2rem;
	width: 2rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-right: 1rem;
}

/* 募集要項 */
section[id$="-requirements"] div.contact-address table th,
section[id$="-requirements"] div.contact-address table td {
	background: none !important;
	border: none !important;
	padding: 0 1rem;
}


/* --------------------------------------------------------------------------------------------------------
   01
 *
 * 幅 768px 未満 ( スマホの時だけ適用されるスタイル )
 */
@media (max-width: 767px) {

	/* section */
	section.box {
		margin-bottom: 3rem !important;
	}

	/*Header H2*/
	h2[id$="-heading"]:not(.light-color) {
		padding: 2rem 0 0.85rem !important;
	}

	h2[id$=-heading]:not(.light-color) span {
		padding-bottom: 0.5rem;
	}

	/* Button - p.more */
	p.more a {
		display: block;
	}

	/* Table */

	section:not(#recruit-intern) #contents table th {}

	/* 現在の募集部署 */
	section[id$="-department"] ul li::before {
		font-size: 1.5rem;
		padding: 0.5rem;
	}

	/* PLAMO事業内容・インターンシップのご案内・入社後の教育研修制度　イントロ */
	div[class$="-contents"] div[class$="-img"] {
		text-align: center;
	}

	div[class$="-contents"] div[class$="-txt"] {
		margin-top: 2rem;
	}

	section[id$="-business"] div[class$="-contents"] div[class$="-txt"] div ul {
		grid-gap: 1.5rem;
	}

	/* 新卒者に向けて・中途者に向けて */
	ul.recruitment-flow {
		margin: 3rem 0;
	}

	ul.recruitment-flow li {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		margin-top: 2rem;
	}

	ul.recruitment-flow li div:first-of-type {
		width: 35%;
	}

	ul.recruitment-flow li div:nth-of-type(2) {
		width: 60%;
	}

	ul.recruitment-flow li div:nth-of-type(2)::before {
		display: block;
		margin-bottom: 1rem;
	}

	/* インターンシップのご案内
　　- 4種類のプログラムを用意 */
	section[id$="-intern"] div.intern-program ul {
		grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
	}

	/* 募集要項 */
	section[id$="-requirements"] div.contact-address table th {
		width: 8em;
		padding: 0;
	}

	/* 募集要項
　　- 雇用条件 */
	section[id$="-requirements"] div.status table tbody,
	section[id$="-requirements"] div.status table tr,
	section[id$="-requirements"] div.status table th,
	section[id$="-requirements"] div.status table td {
		display: block;
		border: none;
	}

	section[id$="-requirements"] div.status table th {
		border-bottom: 1px solid #cccccc;
	}

	section[id$="-requirements"] div.status table td {
		margin-bottom: 0.5rem;
	}
}

/* --------------------------------------------------------------------------------------------------------
   02
 *
 * 幅 768px 以上 ( PCの時だけ適用されるスタイル )
 */
@media (min-width: 48em) {

	/*Header H2*/
	h2[id$="-heading"]:not(.light-color) span {
		padding-bottom: 0.25rem;
	}

	/* Table */
	#contents table th {
		width: 10em;
	}

	/* 現在の募集部署 */
	section[id$="-department"] ul li::before {
		font-size: 1.65rem;
		padding: 0.85rem;
	}

	/* PLAMO事業内容・インターンシップのご案内・入社後の教育研修制度　イントロ */
	div[class$="-contents"] {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
	}

	div[class$="-contents"] div[class$="-img"] {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: 33.33333333%;
	}

	div[class$="-contents"] div[class$="-txt"] {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: 66.66666667%;
	}
	
	div.intern-contents div.intern-img {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: 50%;
	}

	div.intern-contents div.intern-txt {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: 50%;
	}

	section[id$="-business"] div[class$="-contents"] div[class$="-txt"] div,
	div[class$="-contents"] div[class$="-txt"] p {
		margin-left: 2rem;
	}

	section[id$="-business"] div[class$="-contents"] div[class$="-txt"] div ul {
		grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
		grid-gap: 1rem;
	}

	/* 新卒者に向けて・中途者に向けて */
	ul.recruitment-flow {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
	}

	ul.recruitment-flow li {
		width: calc(100% - 100% / 4);
	}

	ul.recruitment-flow li:not(:last-of-type) {
		margin-right: 2rem;
	}

	ul.recruitment-flow li div:first-of-type {
		width: 100%;
		height: 60%;
	}

	ul.recruitment-flow li div:nth-of-type(2) {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: distribute;
		justify-content: space-around;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		margin-top: 1rem;
	}

	ul.recruitment-flow li div:nth-of-type(2)::before {
		display: inline-block;
		margin-right: 1rem;
	}

	/* インターンシップのご案内
　　- 4種類のプログラムを用意 */
	section[id$="-intern"] div.intern-program ul {
		grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
	}

	/* インターンシップのご案内
　　- プログラム内容 */
	section[id$="-intern"] div.program-details ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	section[id$="-intern"] div.program-details ul li:first-of-type {
		width: calc(100% / 5);
	}

	section[id$="-intern"] div.program-details ul li:not(:first-of-type) {
		width: calc(100% / 3);
	}

	/* 入社後の教育研修制度 */
	section[id$="-ojt"] div.ojt-program ol {
		grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
	}

	/* 募集要項 */
	section[id$="-requirements"] div.status .form-link {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
		grid-gap: 1rem;
	}

}