@charset 'utf-8';

/* common
------------------------------------------------ */
.title-page {}

@media screen and (max-width: 768px) {
	.title-page { background-image: url(../../img/qa/title.jpg); }
}

@media screen and (min-width: 769px) {
	.title-page { background-image: url(../../img/qa/title-pc.jpg); }
}

/* qa
------------------------------------------------ */
.qa {}
.qa-lead { margin-bottom: 32px; font-size: 1.4rem; }

@media screen and (max-width: 768px) {
	.qa { margin: 0 20px; }
}

@media screen and (min-width: 769px) {
	.qa-lead { margin-bottom: 72px; font-size: 1.6rem; }
}

/* lists
------------------------------------------------ */
.qa-lists {}
.qa-lists-nav {}
.qa-lists-nav--item { text-align: center; font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.qa-lists-nav--item > a { display: flex; justify-content: center; align-items: center; position: relative; padding: 2px 30px; min-height: 45px; background: #ccc; border-radius: 3px; text-decoration: none; color: #fff; }
.qa-lists-nav--item > a:after { content: ''; position: absolute; top: 50%; right: 10px; transform: rotate(90deg); margin-top: -8px; width: 16px; height: 16px; background: url(../../img/icon/arrow1.png) no-repeat center center; background-size: 100%; }
.qa-lists-content { margin-top: 20px; }
.qa-lists-box {}
.qa-lists-box--title { position: relative; padding: 8px 10px; background: #2e78cb; text-align: center; font-size: 1.5rem; font-weight: 400; line-height: 1.2; color: #fff; }
.qa-lists-box--content {}
.qa-lists-q {}
.qa-lists-q--item { position: relative; border-bottom: solid #ccc 1px; font-size: 1.6rem; line-height: 1.4; }
.qa-lists-q--item:last-child { border-bottom: none; }
.qa-lists-q--item > a { display: inline-block; position: relative; padding: 12px 30px; vertical-align: top; }
.qa-lists-q--item > a:before { content: ''; position: absolute; top: 13px; left: 0; width: 14px; height: 26px; background: url(../../img/qa/q.png) no-repeat center center; background-size: 100%; }

@media screen and (max-width: 768px) {
	.qa-lists-nav--item { margin-top: 5px; }
	.qa-lists-nav--item:first-child { margin-top: 0; }
}

@media screen and (min-width: 769px) {
	.qa-lists-nav { display: flex; flex-wrap: wrap; }
	.qa-lists-nav--item { margin: .4444444444% .4444444444% 0 0; width: 24.6666666667%; font-size: 1.8rem; line-height: 1.3; }
	.qa-lists-nav--item:nth-of-type(-n+4) { margin-top: 0; }
	.qa-lists-nav--item:nth-of-type(4n) { margin-right: 0; }
	.qa-lists-nav--item > a { padding: 4px 40px 4px 20px; min-height: 72px; border-radius: 5px; }
	.qa-lists-nav--item > a:after { right: 18px; margin-top: -11px; width: 22px; height: 22px; }
	.qa-lists-content { margin-top: 18px; }
	.qa-lists-box { margin-top: 20px; }
	.qa-lists-box:first-child { margin-top: 0; }
	.qa-lists-box--title { padding: 15px 10px; font-size: 1.8rem; }
	.qa-lists-q--item { font-size: 1.6rem; line-height: 1.4; }
	.qa-lists-q--item > a { padding: 18px 45px; }
	.qa-lists-q--item > a:before { top: 18px; left: 15px; width: 15px; height: 27px; }
}

/* detail
------------------------------------------------ */
.qa-detail { margin-bottom: 20px; padding-bottom: 20px; border-bottom: solid #ccc 1px; }
.qa-detail-q { position: relative; margin-bottom: 16px; padding-left: 22px; font-size: 1.9rem; font-weight: 400; line-height: 1.4; }
.qa-detail-q:before { content: ''; display: inline-block; margin: 2px 10px 0 -22px; width: 12px; height: 22px; background: url(../../img/qa/q.png) no-repeat center center; background-size: 100%; vertical-align: top; }
.qa-detail-a { background: #f3f3f3; padding: 15px; }
.qa-detail-a--text { position: relative; padding: 16px 26px 16px 36px; background: #fff; word-break: break-word; font-size: 1.4rem; }
.qa-detail-a--text:before { content: ''; position: absolute; top: 20px; left: 15px; width: 10px; height: 16px; background: url(../../img/qa/a.png) no-repeat center center; background-size: 100%; }
.qa-detail-a--text p + p { margin-top: 1.4em; }

@media screen and (min-width: 769px) {
	.qa-detail { margin-bottom: 40px; padding-bottom: 40px; }
	.qa-detail-q { margin-bottom: 40px; padding-left: 34px; text-align: center; font-size: 3.4rem; }
	.qa-detail-q:before { margin: 2px 12px 0 -34px; width: 22px; height: 42px; }
	.qa-detail-a { padding: 50px; }
	.qa-detail-a--text { padding: 76px 80px 76px 124px; font-size: 1.6rem; line-height: 1.8; }
	.qa-detail-a--text:before { top: 80px; left: 80px; width: 18px; height: 32px; }
	.qa-detail-a--text p + p { margin-top: 1.6em; }
}