/*ふてほど昭和用語集*/

.ph_cut {margin: 0;}
.glossary .glossaryArea #read {
	font-family: m-plus-1p, sans-serif;
	font-style: normal;
	text-align: center;
}

.glossary .contentsBlock h2 {
	font-size: 1.6em;
	font-weight: 900;
	line-height: 1.3em;
	position: relative;
	padding: 0 5px 10px;
	margin-bottom: 0.2em;
	border-bottom: solid 3px #000;
}
.glossary .contentsBlock .glossaryBox h3 {color: #009a93;}

.reference {color: #666; font-size: 0.9em;}
.referenceBox {}
.referenceBox h3 {padding-bottom: 0.5em; color: #666;}
.referenceBox p {color: #666; font-size: 0.9em; line-height: 1.4em; padding-bottom: 0.3em;}

.referenceBox table th, table td {
 vertical-align: baseline;
	line-height: 1.5em;
}

.glossary #bknm ul {
    text-align: center; letter-spacing: -.4em;
}
.glossary #bknm li {
    display: inline-block;
    position: relative; vertical-align: top; letter-spacing: 0em;
}

.glossary #bknm li a {
    display: block;
    transition:0.5s;
	background-color: #000;
	padding: 6px 0; margin: 5px;
	border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
}
.glossary #bknm li a:hover {background-color: #414141;}

.glossary span.epn {
    font-size: 100%;
    color: #fff;
	background-position: center; background-repeat: no-repeat; text-indent: -9999px;
}
#bknm span.epn {display: block;}
article span.epn { display: inline-block;}
#bknm li.bk1 span.epn, #ep1 .epn {background-image: url(../img/story/bkn01.png);}
#bknm li.bk2 span.epn, #ep2 .epn {background-image: url(../img/story/bkn02.png);}
#bknm li.bk3 span.epn, #ep3 .epn {background-image: url(../img/story/bkn03.png);}
#bknm li.bk4 span.epn, #ep4 .epn {background-image: url(../img/story/bkn04.png);}
#bknm li.bk5 span.epn, #ep5 .epn {background-image: url(../img/story/bkn05.png);}
#bknm li.bk6 span.epn, #ep6 .epn {background-image: url(../img/story/bkn06.png);}
#bknm li.bk7 span.epn, #ep7 .epn {background-image: url(../img/story/bkn07.png);}
#bknm li.bk8 span.epn, #ep8 .epn {background-image: url(../img/story/bkn08.png);}
#bknm li.bk9 span.epn, #ep9 .epn {background-image: url(../img/story/bkn09.png);}
#bknm li.bk10 span.epn, #ep10 .epn {background-image: url(../img/story/bkn10.png);}
#bknm li.bksp span.epn, #special .epn {background-image: url(../img/story/bknsp.png?1);}

.bonus {border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
	background-color: #FFE7F1;
	margin: 15px 0;}
.bonus h3 {text-indent: -9999px; background-repeat: no-repeat; background-size: contain; background-position: 0 0; background-image: url(../img/glossary/h3_bonus.png);}
.bonus .txt { line-height: 1.4em; padding: 0.5em 0;}
.bonus ul { padding: 0.5em;}
.bonus ul li { padding: 0 0 0.8em 22px; color: #217BC8; font-weight: 700; background-repeat: no-repeat; background-size: 19px 19px; background-position: 0 0; background-image: url(../img/glossary/icon_music.png); }

.tsume {letter-spacing: -0.05em;}
.phArea {}


@media all and (min-width: 768px) {
	.glossaryArea { padding: 25px 0 0;}
	.glossaryArea article { padding-top: 40px;}

	.glossary #read { font-size: 1.1em; line-height: 2.0em; padding-bottom: 1em;}
	
	#bknm span.epn { width:70px; height: 28px; background-size: auto 28px;}
	article span.epn { width:50px; height: 30px; background-size: auto 30px;}
	article#ep10 span.epn { width:60px;}
	
	.glossary .contentsBlock .glossaryBox, .referenceBox { padding: 15px 0;}
	.glossary .contentsBlock .glossaryBox h3 {font-size: 1.2em; line-height: 1.8em; }
	
	.txtArea { display: inline-block; width: 630px; padding-right: 20px; vertical-align: top;}
	.txtArea.nophoto { width: 100%; padding-right: 0px;}
	.photoArea { display: inline-block; vertical-align: top; padding-top: 10px;}
	.photoArea p.ph_cut {
		margin: 0 auto 0; position: relative; display: inline-block;
		width: 240px;
		height: 160px;
		background-position: center top;
		border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
		border: solid 2px #009a93;
	}
	.photoArea p.ph_cut span, .photoArea p.ph_cut span img {
		width: 240px;
		height: 160px;
		background-position: center top;
		border-radius: 13px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
	}
	
	.referenceBox p {font-size: 0.9em;}
	
	.bonus {padding: 10px 25px 15px;}
	.bonusTxt { display: inline-block; width: 590px; padding-right: 20px; vertical-align: top;}
	.bonus h3 { height: 45px;}
	.bonus ul li { font-size: 1.1em;}
	.txtSm { font-size: 0.9em;}
	
	
}
@media all and (max-width: 767px) {

	.glossaryArea { padding: 0;}
	.glossary .glossaryArea #read { font-size: 0.9em; line-height: 1.5em; padding-bottom: 1em;}
	.glossary .contentsBlock h2 { font-size: 1.2em; padding: 0 3px 6px;}
	
	.glossary #bknm li a {
	padding: 6px 0; margin: 5px;
	border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
}
	#bknm span.epn { width:55px; height: 22px; display: block; background-size: auto 22px;}
	article span.epn { display: inline-block; width:40px; height: 23px; background-size: auto 23px;}
	article#ep10 span.epn { width:50px;}
	
	.glossary .contentsBlock .glossaryBox, .referenceBox { padding: 10px 0;}
	
	.glossaryArea article { padding-top: 25px;}
	.glossary .contentsBlock .glossaryBox h3 {font-size: 1.1em; line-height: 1.6em; }
	
	

.notes {font-size: 0.5em; line-height: 1.5em; }
.spacing {letter-spacing: -.2em;}
	
	.photoArea { padding: 0.5em 0 0; margin: 0 auto; width: 60%; max-width: 240px;}
	.photoArea p.ph_cut {
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border: solid 3px #009a93;
	}
	.photoArea p.ph_cut span { padding-top: 66.0%; height: 0;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;}
	
	.referenceBox h3 { font-size: 0.8em;}
	.referenceBox p {font-size: 0.8em;}
	
	.bonus {padding: 10px 15px 15px;}
	.bonus h3 { height: 42px; background-position: center 0; margin-bottom: 0.5em;}
	.bonus .photoArea { padding: 0 0 0;}
	
	.txtSm { font-size: 0.8em;}
	.notes { line-height: 1.5em;}

}