@charset 'utf-8';

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

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

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

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

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

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

/* lists
------------------------------------------------ */
.glossary-lists {}
.glossary-lists-box { margin-top: 14px; }
.glossary-lists-box:first-child { margin-top: 0; }
.glossary-lists-box--title { position: relative; margin-bottom: 8px; padding: 8px 10px; background: #2e78cb; text-align: center; font-size: 1.5rem; font-weight: 400; line-height: 1.2; color: #fff; }
.glossary-lists-box--content {}
.glossary-lists-links {}
.glossary-lists-links--item { position: relative; font-size: 1.6rem; line-height: 2; }
.glossary-lists-links--item:last-child { border-bottom: none; }
.glossary-lists-links--item > a { display: inline-block; vertical-align: top; }

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

@media screen and (min-width: 769px) {
	.glossary-lists-box { margin-top: 28px; }
	.glossary-lists-box--title { padding: 15px 10px; font-size: 1.8rem; }
	.glossary-lists-links { display: flex; flex-wrap: wrap; }
	.glossary-lists-links--item { width: 25%; font-size: 1.6rem; line-height: 2.625; }
	.glossary-lists-links--item > a { padding: 0 10px; }
}

/* detail
------------------------------------------------ */
.glossary-detail { margin-bottom: 20px; padding-bottom: 20px; border-bottom: solid #ccc 1px; }
.glossary-detail-word { position: relative; margin-bottom: 16px; text-align: center; font-size: 1.9rem; font-weight: 400; line-height: 1.4; }
.glossary-detail-explain { background: #f3f3f3; padding: 15px; }
.glossary-detail-explain--text { position: relative; padding: 16px 20px; background: #fff; word-break: break-word; font-size: 1.4rem; }
.glossary-detail-explain--text p + p { margin-top: 1.4em; }

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