@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : dictionary.css
Description :
===================================================================== */

/* =====================================================================
*    dictionary
* =================================================================== */

.dictionary {
	padding: calc(120 / 750 * 100%) 0 calc(230 / 750 * 100%);
}

.dictionary h2 {
	margin-bottom: calc(40 / 650 * 100%);
}

.dictionary_subttl {
	font-family: 'Noto Serif JP', serif;
	font-size: 4.4rem;
	text-align: center;
	letter-spacing: -.3rem;
	margin-bottom: calc(55 / 650 * 100%);
}

.dictionary_caption dt {
	width: calc(440 / 650 * 100%);
	margin: 0 auto calc(30 / 650 * 100%);
}

.dictionary_caption dd {
	text-align: center;
	font-size: 3.2rem;
	margin-bottom: calc(60 / 650 * 100%);
}

.dictionary_wrap {
	width: calc(750 / 650 * 100%);
	margin-left: calc(-50 / 650 * 100%);
}

.tab {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.tab li {
	background: url(../images/dictionary/bg_alphabetical.jpg) no-repeat center/contain;
	text-align: center;
	color: #fff;
	font-size: 3.6rem;
	width: calc(146 / 750 * 100%);
	padding: calc(5 / 750 * 100%) 0;
	margin-bottom: .1em;
}

.tab .nolink {
    background: url(../images/dictionary/bg_alphabetical_nolink.jpg) no-repeat center/contain!important;
    pointer-events: none;
}


.tab li:last-child {
	padding: calc(13 / 750 * 100%) 0;
	font-size: 2.8rem;
}

.tab li small {
	font-size: 2rem;
}

.tab li.active {
	background: url(../images/dictionary/bg_alphabetical_active.jpg) no-repeat center/contain;
	color: #000;
}

.words_wrap {
	background: url(../images/dictionary/bg_dictionary.jpg) repeat center/calc(250 / 750 * 100%) auto;
	padding: calc(20 / 750 * 100%);
}

.words_wrap::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	background: url(../images/dictionary/img_cat1.png) no-repeat center/contain;
	width: calc(146 / 750 * 100%);
	padding-top: calc(215 / 750 * 100%);
	z-index: 2;
	margin: calc(80 / 750 * 100%) calc(-25 / 750 * 100%) 0 0;
}

.words_wrap::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../images/dictionary/img_cat2.png) no-repeat center/contain;
	width: calc(196 / 750 * 100%);
	padding-top: calc(263 / 750 * 100%);
	z-index: 2;
	margin: 0 0 calc(30 / 750 * 100%) calc(-32 / 750 * 100%);
}

.tab_sub {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	width: calc(630 / 750 * 100%);
	margin: calc(10 / 750 * 100%) auto;
}

.tab_sub li {
	color: #fff;
	font-size: 2.8rem;
	margin: 0 .6em .3em 0;
}

.tab_sub li::before {
	content: '●';
	top: 0;
	bottom: 0;
	left: 0;
	font-size: 2.6rem;
	margin-right: .2em;
}

.tab_sub li.active {
	color: #fff000;
}

.words_wrap,
.words_box {
	display: none;
}

.words_wrap.active {
	display: block;
}

.words_box {
	background-color: #fff;
	padding: calc(40 / 710 * 100%);
	margin: calc(15 / 710 * 100%) auto 0;
}

.words_box.active {
	display: block;
}

.words_box h4 {
	text-align: center;
	margin: calc(45 / 630 * 100%) 0;
}

.words_box h4 strong {
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	color: #982411;
	letter-spacing: .3rem;
	font-size: 6rem;
	display: block;
	line-height: 1.3;
}

.words_box h4 small {
	display: block;
	font-size: 2rem;
	letter-spacing: .6rem;
}

.words_box .meaning {
	text-align: center;
	margin-bottom: calc(45 / 630 * 100%);
}

.words_box .meaning dt {
	background-color: #982411;
	color: #fff;
	display: inline-block;
	border-radius: 2em;
	padding: 0 1.3em;
	margin-bottom: .5em;
}

.words_box .meaning dd {
	font-size: 3.4rem;
}

.words_box .example {
	background-color: #f7f5f2;
	text-align: center;
	padding: calc(50 / 630 * 100%) calc(90 / 630 * 100%);
}

.words_box .example dt {
	font-weight: 700;
	width: calc(160 / 450 * 100%);
	margin: 0 auto calc(25 / 450 * 100%);
}

.words_box .example dt::before,
.words_box .example dt::after {
	content: '';
	position: absolute;
	background-color: #000;
	width: .8em;
	height: 2px;
	top: 0;
	bottom: 0;
	margin: auto;
}

.words_box .example dt::before {
	left: 0;
}

.words_box .example dt::after {
	right: 0;
}


@media screen and (min-width: 768px) {
	.dictionary {
		padding: calc(120 / 1200 * 100%) 0 calc(160 / 1200 * 100%);
	}

	.dictionary h2 {
		margin-bottom: calc(50 / 1000 * 100%);
	}

	.dictionary_subttl {
		font-size: 3.3rem;
		margin-bottom: calc(25 / 1000 * 100%);
	}

	.dictionary_caption dt {
		width: calc(440 / 1000 * 100%);
		margin: 0 auto calc(30 / 1000 * 100%);
	}

	.dictionary_caption dd {
		font-size: 2.4rem;
		margin-bottom: calc(60 / 1000 * 100%);
	}

	.dictionary_wrap {
		width: calc(750 / 1000 * 100%);
		margin: auto;
	}

	.tab li {
		cursor: pointer;
		font-size: 2.7rem;
		width: calc(146 / 750 * 100%);
		padding: calc(13 / 750 * 100%) 0;
		-webkit-transition: .2s;
		transition: .2s;
	}

	.tab li:last-child {
		padding: calc(20 / 750 * 100%) 0;
		font-size: 2.1rem;
	}

	.tab li small {
		font-size: 1.5rem;
	}

	.tab li:hover {
		-webkit-transition: .2s;
		transition: .2s;
		background: url(../images/dictionary/bg_alphabetical_active.jpg) no-repeat center/contain;
		color: #000;
	}

	.tab_sub {
		width: calc(710 / 750 * 100%);
	}

	.tab_sub li {
		cursor: pointer;
		-webkit-transition: .2s;
		transition: .2s;
		font-size: 1.8rem;
		margin: 0 1em .3em 0;
	}

	.tab_sub li::before {
		font-size: 1.6rem;
	}

	.tab_sub li:hover {
		color: #fff000;
		-webkit-transition: .2s;
		transition: .2s;
	}

	.words_wrap {
		padding: calc(10 / 750 * 100%);
	}

	.words_wrap::before {
		width: calc(110 / 750 * 100%);
		padding-top: calc(160 / 750 * 100%);
		margin: calc(94 / 750 * 100%) calc(-53 / 750 * 100%) 0 0;
	}

	.words_wrap::after {
		width: calc(147 / 750 * 100%);
		padding-top: calc(196 / 750 * 100%);
		margin: 0 0 calc(37 / 750 * 100%) calc(-55 / 750 * 100%);
	}

	.words_box {
		padding: calc(50 / 750 * 100%) calc(100 / 750 * 100%);
	}

	.words_box h4 {
		margin: calc(25 / 530 * 100%) 0;
	}

	.words_box h4 strong {
		font-size: 4.5rem;
	}

	.words_box h4 small {
		font-size: 1.5rem;
	}

	.words_box .meaning {
		margin-bottom: calc(40 / 530 * 100%);
	}

	.words_box .meaning dt {
		font-size: 1.8rem;
	}

	.words_box .meaning dd {
		font-size: 2.5rem;
	}

	.words_box .example {
		padding: calc(37 / 530 * 100%);
	}

	.words_box .example dt {
		width: calc(115 / 456 * 100%);
	}

}

@media screen and (min-width: 1200px) {

	.dictionary {
		padding: 120px 0 160px;
	}

}