@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;
}
em {
	font-style: normal;
}
/* margin */
.mT16 { margin-top: 16px; }
.mT32 { margin-top: 32px; }

/************************************************************
 * Contents
 ************************************************************/
.pageBody {
	margin: 0 auto;
}
/* header */
.headerBody {
	margin: 0 auto;
}
.logo {
	display: block;
	text-indent: -9999px;
}
/* footer */
.footer {
	border-top: 1px solid #EBE7E0;
}
.siteFooterRecruitBrandLink {
	display: inline-block;
	height: 27px;
}
.siteFooterRecruitBrandLink > img {
	height: 100%;
}
/* contents */
.packTtl {
	border-bottom: 3px solid #EBE7E0;
	color: #CC4466;
	font-size: 14px;
	padding-bottom: 4px;
	padding-left: 14px;
	text-indent: -14px;
}
.packTtl::before {
	background-color: #CC4466;
	content: "";
	display: inline-block;
	height: 12px;
	margin-right: 2px;
	width: 12px;
}
.imgContent {
	margin-top: 16px;
	text-align: center;
}
.imgContent > img {
	max-width: 100%;
}
.informationArea {
	background: #F0FAFF url(../images/info.svg) 16px 16px / 20px no-repeat;
	border-radius: 4px;
	color: #1565C0;
	padding: 16px 16px 16px 40px;
}
.dotStyleList > li {
	padding-left: 1em;
	position: relative;
}
.dotStyleList > li::before {
	content: "・";
	left: 0;
	position: absolute;
}
.emphasisTxt,
li.emphasisColor::before {
	color: #CC0000;
}
/* FAQ */
.faqArea .faqList {
	display: grid;
	gap: 8px;
}
.faqArea .faq {
	border: 1px solid #E0E1E2;
	border-radius: 8px;
}
.faqArea .faq::details-content {
	content-visibility: unset;
}
.faqArea .faq .detailsContent {
	display: block grid;
	grid-template-rows: 0fr;
	transition: 0.3s grid-template-rows;
}
.faqArea .faq .detailsContentInner {
	overflow: hidden;
}
.faqArea .faq[open] .faqTitle .icon:after {
	transform: rotate(0);
}
.faqArea .faq[open] .detailsContent {
	grid-template-rows: 1fr;
}
.faqArea .faqTitle,
.faqArea .faqContent {
	display: block;
	font-size: 12px;
	padding: 16px 44px 16px 48px;
	position: relative;
}
.faqArea .faqTitle:before,
.faqArea .faqContent:before {
	content: "";
	left: 12px;
	position: absolute;
	width: 28px;
}
.faqArea .faqTitle:before {
	background: url(../images/q.svg) no-repeat center / contain;
	height: 100%;
	top: 0;
}
.faqArea .faqContent:before {
	background: url(../images/a.svg) no-repeat top center / contain;
	height: 28px;
	top: 16px;
}
.faqArea .faqTitle {
	cursor: pointer;
	outline: none;
	position: relative;
}
.faqArea .faqTitle .icon {
	border: 2px solid #CC4466;
	border-radius: 50%;
	height: 20px;
	inset: 0 14px 0 auto;
	margin: auto;
	position: absolute;
	width: 20px;
}
.faqArea .faqTitle .icon:before,
.faqArea .faqTitle .icon:after {
	background: #CC4466;
	bottom: 0;
	content: "";
	display: block;
	height: 2px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 10px;
}
.faqArea .faqTitle .icon:after {
	transform: rotate(90deg);
	transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.faqArea .faqContent {
	font-weight: 700;
	padding-bottom: 32px;
	padding-right: 12px;
}

@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: 640px;
		padding: 10px 0;
	}
	.pageBody {
		width: 640px;
	}
	.logo {
		background: url(/doc/COMMON/IMG/logo.png) center / contain no-repeat;
		height: 52px;
		width: 120px;
	}
	.pageTtl {
		background-color: #F5F3F1;
		box-sizing: border-box;
		color: #CC4466;
		font-size: 16px;
		margin: 16px auto 0;
		padding: 5px 9px;
		position: relative;
		width: 622px;
	}
	.pageTtl::before {
		background-color: #CC4466;
		content: "";
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 4px;
	}
	.pack {
		padding: 24px 9px 0;
	}
	.emphasisTxt {
		display: block;
	}
	.footer {
		margin: 32px auto 0;
		width: 640px;
	}
	.footerBody {
		padding: 16px 20px 32px;
	}
	.faqArea .faqTitle,
	.faqArea .faqContent {
		font-size: 12px;
		padding: 16px 56px 16px 48px;
	}
	.faqArea .faqTitle {
		transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
	}
	.faqArea .faqTitle:hover {
		opacity: 0.5;
	}
	.faqArea .faqTitle:before {
		bottom: 0;
		top: 0;
	}
	.faqArea .faqTitle .icon {
		right: 18px;
	}
	.faqArea .faqContent {
		padding-bottom: 32px;
		padding-right: 20px;
	}
}

@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;
	}
	.pageTtl {
		background-color: #BE3C5F;
		color: #FFFFFF;
		font-size: 14px;
		line-height: 1;
		padding: 9px 16px;
	}
	.pack {
		padding-top: 24px;
	}
	.footer {
		margin-top: 40px;
	}
	.footerBody {
		padding: 16px;
	}
}