@charset "utf-8";

/************************************************************
 * 初期化
 ************************************************************/
body, form, img, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3 ,h4, h5, h6, table, th ,td ,select {
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: none;
}
a {
	color: #4C4C80;
}
img {
	border: none;
	vertical-align: bottom;
}
ol, ul {
	list-style: none;
}
table {
	border-spacing: 0;
}
th {
	font-weight: normal;
	text-align: left;
}
body, input, select, textarea, table {
	color: #333333;
	font-size: 12px;
	line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 12px;
}

/************************************************************
 * Contents
 ************************************************************/

/* contents */
.pageBody {
	margin: 0 auto;
}
.pcColumnImg > img {
	max-width: 100%;
}
.annotationTxt {
	color: #CC0000;
}
.annotationTtl {
	color: #665555;
	font-weight: bold;
}

/* header */
.headerBody {
	box-sizing: border-box;
	margin: 0 auto;
}
.logo {
	display: block;
	text-indent: -9999px;
}

/* title */
.guidePageTtl {
	box-sizing: border-box;
	font-weight: bold;
}
.leadTtl {
	background-color: #F5F3F1;
	color: #CC4466;
	font-size: 16px;
	padding: 5px 12px;
	position: relative;
}
.leadTtl::before {
	background-color: #CC4466;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 4px;
}
.packTtl {
	align-items: center;
	border-bottom: 3px solid #EBE7E0;
	color: #CC4466;
	display: flex;
	font-size: 14px;
	padding-bottom: 4px;
}
.packTtl::before {
	background-color: #CC4466;
	content: "";
	height: 12px;
	margin-right: 2px;
	width: 12px;
}
.packSubTtl {
	color: #665555;
	font-size: 14px;
}
.txtContentTtl {
	font-weight: bold;
}

/* navi */
.pageNavList {
	font-size: 0;
	line-height: 0;
}
.pageNavList > li {
	display: inline;
	font-size: 12px;
	position: relative;
}
.pageNavList > li:not(:last-child)::after {
	content: "｜";
}
.leadNavList {
	font-size: 14px;
	margin-top: 16px;
}
.leadNavList > li > a {
	background: url(/doc/guide/img/arrow_right_pink.svg) left center / 7px no-repeat;
	display: inline-block;
	padding-left: 11px;
	position: relative;
	text-decoration: none;
}
.leadNavList > li > a:hover {
	text-decoration: underline;
}

/* ul */
.dotStyleList > li,
.dotStyleNoindentList > li {
	position: relative;
}
.dotStyleList > li::before,
.dotStyleNoindentList > li::before {
	content: "・";
}
.dotStyleList > li {
	padding-left: 1em;
}
.dotStyleList > li::before {
	left: 0;
	position: absolute;
}

/* ol */
.normalNumList,
.boldNumList,
.circleNumList {
	counter-reset: item;
}
.normalNumList > li::before,
.boldNumList > li::before {
	content: counter(item)".";
	counter-increment: item;
	font-family: Helvetica, sans-serif;
}
.normalNumList > li,
.circleNumList > li {
	position: relative;
}
.normalNumList {
	text-indent: 1em;
}
.normalNumList > li::before {
	left: -1em;
	position: absolute;
}
.boldNumList > li::before {
	font-size: 14px;
	font-weight: bold;
	position: absolute;
}
.boldNumList > li + li {
	margin-top: 32px;
}
.boldNumListTxt {
	padding-left: 20px;
}
.circleNumList {
	padding-left: 5px;
}
.circleNumList > li {
	margin-top: 16px;
	padding-left: 16px;
}
.circleNumList > li::before {
	background-color: #FECE18;
	border-radius: 50%;
	content: counter(item);
	counter-increment: item;
	font-family: Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	height: 16px;
	left: -3px;
	line-height: 16px;
	position: absolute;
	text-align: center;
	top: 1px;
	width: 16px;
}
.articleList > li {
	margin-top: 32px;
}

/* parts */
.markStyle,
.numStyleB,
.circleStyle {
	font-family: Helvetica, sans-serif;
}
.numStyleB {
	font-weight: bold;
}
.circleStyle {
	background-color: #FECE18;
	border-radius: 50%;
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	height: 16px;
	left: 0;
	line-height: 16px;
	margin: 0 3px;
	position: relative;
	text-align: center;
	top: -1px;
	width: 16px;
}

/* table */
.ruledLineTbl {
	border: 1px solid #CCCCCC;
	border-collapse: collapse;
	width: 100%;
}
.ruledLineTbl td {
	border: 1px solid #CCCCCC;
	padding: 3px;
}

/* link */
.menu {
	text-align: right;
}
.menu > a {
	background: url(/doc/guide/img/arrow_right_pink.svg) left center / 7px no-repeat;
	display: inline-block;
	padding-left: 11px;
	position: relative;
	text-decoration: none;
}
.pageTop {
	margin-top: 20px;
	text-align: right;
}
.pageTop > a {
	background: url(/doc/guide/img/arrow_top_pink.svg) left center / 7px no-repeat;
	display: inline-block;
	padding-left: 11px;
	position: relative;
	text-decoration: none;
}
.menu > a:hover,
.pageTop > a:hover {
	text-decoration: underline;
}

/* faq */
.faq > div {
	border-bottom: 1px dashed #E0E1E2;
	margin-bottom: 16px;
	padding-bottom: 16px;
}
.faq > div > dt,
.faq > div > dd {
	padding-left: 21px;
}
.faq > div > dt {
	font-weight: bold;
	position: relative;
}
.faq > div > dt::before {
	content: "Q.";
	left: 0;
	position: absolute;
	top: 0;
}
.faq > div > dd {
	margin-top: 8px;
}

/* footer */
.footer {
	border-top: 1px solid #E0E1E2;
}
.breadcrumb {
	border-bottom: 1px solid #E0E1E2;
}
.breadcrumbList {
	padding: 8px 0;
}
.footerBody {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}
.siteFooterRecruitBrandLink {
	display: inline-block;
	height: 27px;
}
.siteFooterRecruitBrandLink > img {
	height: 100%;
}
.close {
	align-items: center;
	border: 1px solid #E0E1E2;
	border-radius: 8px;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: bold;
	justify-content: center;
	position: relative;
}
.close::before {
	background: url(/doc/guide/img/icon_close_pink.svg) center / contain no-repeat;
	content: "";
	height: 18px;
	position: relative;
	top: -0.5px;
	width: 18px;
}
.close > a {
	color: #333333;
	margin-left: 4px;
	text-decoration: none;
}

@media (min-width: 768px) {
	/* PC用 */
	a:hover,
	a:active {
		color: #7878CC;
		text-decoration: none;
	}
	a:visited {
		color: #896958;
	}
	body, input, select, textarea, table, th, td, li ,a {
		font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS P Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', arial, sans-serif, verdana, Helvetica;
	}
	.pcDn {
		display: none;
	}
	.header {
		border-bottom: 3px solid #E0E1E2;
	}
	.headerBody {
		max-width: 560px;
		padding: 10px 0;
	}
	.pageBody {
		width: 560px;
	}
	.logo {
		background: url(/doc/COMMON/IMG/logo.png) center / contain no-repeat;
		height: 52px;
		width: 120px;
	}
	.guidePageTtl {
		border-bottom: 3px solid #EBE7E0;
		font-size: 16px;
		line-height: 1;
		margin: 16px auto 0;
		padding: 0 8px 8px;
		width: 560px;
	}
	.pageNavList {
		margin-top: 4px;
	}
	.pageNavList > li {
		line-height: 26px;
	}
	.menu {
		margin-top: 12px;
		padding-right: 9px;
	}
	.pack {
		padding: 24px 9px 0;
	}
	.lead {
		margin-top: 24px;
		padding: 0 9px;
	}
	.leadNavList > li + li {
		margin-top: 8px;
	}
	.pcColumn {
		display: flex;
		flex-wrap: wrap;
	}
	.pcColumn .pcColumnTxt {
		flex: 1;
		padding-right: 18px;
	}
	.boldNumList .pcColumnTxt {
		padding: 0 18px 0 20px;
	}
	.pcColumnTxt a:hover {
		text-decoration: none;
	}
	.pcColumnImg {
		width: 262px;
	}
	.footer {
		width: 560px;
		margin: 32px auto 0;
	}
	.breadcrumbList {
		font-size: 0;
	}
	.breadcrumbList > li {
		display: inline;
		font-size: 10px;
	}
	.breadcrumbList > li:not(:last-child)::after {
		content: ">";
		margin: 0 10px;
	}
	.breadcrumbList > li > a {
		text-decoration: none;
	}
	.breadcrumbList > li > a:hover {
		text-decoration: underline;
	}
	.footerBody {
		padding: 16px 20px 32px;
	}
	.close {
		height: 44px;
		width: 98px;
	}
	.imgVariableWidth {
		width: 434px;
	}
}

@media (max-width: 767px) {
	/* SP用 */
	body, input, select, textarea, table, th, td, li ,a {
		font-family: Helvetica;
	}
	.spDn {
		display: none;
	}
	.headerBody {
		padding: 10px 16px;
	}
	.pageBody {
		padding: 0 16px;
	}
	.logo {
		background: url(/doc/COMMON/IMG/logo_s.png) center / contain no-repeat;
		height: 35px;
		width: 88px;
	}
	.guidePageTtl {
		background-color: #BE3C5F;
		color: #FFFFFF;
		font-size: 14px;
		line-height: 1;
		padding: 9px 16px;
	}
	.pageNavList {
		margin-top: 12px;
	}
	.pageNavList > li {
		line-height: 32px;
	}
	.pageNavList > li > a {
		padding: 9px 0;
	}
	.menu {
		margin-top: 12px;
	}
	.pack {
		padding-top: 24px;
	}
	.lead {
		margin-top: 24px;
	}
	.leadNavList > li {
		position: relative;
	}
	.leadNavList > li + li {
		margin-top: 24px;
	}
	.menu > a::after,
	.pageTop > a::after,
	.leadNavList > li > a::after {
		content: "";
		height: 32px;
		left: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
	}
	.boldNumList .pcColumnTxt {
		padding-left: 20px;
	}
	.pcColumnImg {
		margin: 20px auto 0;
		text-align: center;
		width: 80%;
	}
	.footer {
		margin-top: 40px;
	}
	.breadcrumb {
		font-size: 10px;
	}
	.breadcrumbList {
		display: flex;
		overflow-x: auto;
		padding-left: 10px;
		padding-right: 10px;
		white-space: nowrap;
	}
	.breadcrumbList::-webkit-scrollbar {
		display: none;
	}
	.breadcrumbList > li {
		align-items: center;
		display: flex;
	}
	.breadcrumbList > li:not(:last-child)::after {
		background: url(/doc/guide/img/icon_arrow_right_gray.svg) center / cover;
		content: "";
		height: 14px;
		margin: 0 4px;
		width: 14px;
	}
	.breadcrumbList > li > a {
		position: relative;
	}
	.breadcrumbList > li > a::after {
		content: "";
		height: 32px;
		left: 0;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.footerBody {
		padding: 16px;
	}
	.close {
		height: 36px;
		width: 94px;
	}
	.imgVariableWidth {
		width: 100%;
	}
}

@media (max-width: 320px) {
	.footerBody {
		display: block;
	}
	.close {
		margin: 16px 0 0 auto;
	}
}

/* margin */
.mT8 { margin-top: 8px; }
.mT12 { margin-top: 12px; }
.mT16 { margin-top: 16px; }
.mT20 { margin-top: 20px; }
.mT24 { margin-top: 24px; }
.mT28 { margin-top: 28px; }
.mT30 { margin-top: 30px; }
.mT32 { margin-top: 32px; }
.mT1p5em { margin-top: 1.5em; }
.pL15 { padding-left: 15px; }

.taC { text-align: center; }
.taR { text-align: right; }
.w80 { width: 80px; }
.w120 { width: 120px; }
.w205 { width: 205px; }

.fs14 { font-size: 14px; }
.b { font-weight: bold; }

/* ガイドページ */
.guideTxt {
	margin-top: 12px;
}

@media (min-width: 768px) {
	.guideTxt {
		padding-left: 9px;
	}
}