/* =================================
	TOPICS CSS
================================= */

/*	reset
============================== */
div.wrap > div.contents {
	background-color:transparent;
}
div.wrap > div#blog {
	background-color:hsla(0,0%,100%,0.9);
}
div.wrap > p.btn {
	width:240px;
	margin:0 auto;
}

div.unit {
	background-color:hsla(0,0%,100%,0.9);
}
div.unit > article > header, div.contents > article > header {
	color:#000;
	line-height:1.5;
	background-image:url(../img/idx_topics_bg.png);
	background-position:left bottom;
	background-repeat:repeat-x;
	background-size:184px 80px;
	background-color:#36fff9;
}
div.unit > article > header h2 span, div.contents > article > header h2 span {
	text-shadow:1px 1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff;
	background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, hsla(56,100%,50%,0.9)), to(hsla(56,100%,50%,0.9)));
	background-image: linear-gradient(transparent 50%, hsla(56,100%,50%,0.9) 50%);
}
div.unit > article > header p, div.contents > article > header p {
	font-size:83%;
	text-align:right;
}
div.unit > article > header p span, div.contents > article > header p span {
	background-color:hsla(56,100%,50%,0.8);
}
@media all and (min-width: 768px) {
div.unit:not(:last-child), div#blog {
	margin-bottom:30px;
}
div.unit-inner {
	padding:30px 32px 0;
}
div#blog article div.inner {
	padding:30px 32px;
}
div.unit > article > header, div.contents > article > header {
	padding:20px 32px;
}
div.unit > article > header h2, div.contents > article > header h2 {
	font-size:150%;
	margin-left:-32px;
}
div.unit > article > header h2 span, div.contents > article > header h2 span {
	padding-left:32px;
}
div.unit > article > header p, div.contents > article > header p {
	margin-right:-32px;
}
div.unit > article > header p span, div.contents > article > header p span {
	padding:6px 32px;
}
}
@media all and (max-width: 767px) {
div.unit:not(:last-child), div#blog {
	margin-bottom:20px;
}
div.unit-inner {
	padding:20px 12px 0;
}
div#blog article div.inner {
	padding:20px 12px;
}
div.unit > article > header, div.contents > article > header {
	padding:12px 12px;
}
div.unit > article > header h2, div.contents > article > header h2 {
	font-size:112.5%;
	margin-left:-12px;
}
div.unit > article > header h2 span, div.contents > article > header h2 span {
	padding-left:12px;
}
div.unit > article > header p, div.contents > article > header p {
	margin-right:-12px;
}
div.unit > article > header p span, div.contents > article > header p span {
	padding:3px 12px;
}
}


/*	copy
============================== */
div.copy p {
	text-align:center;
	line-height:1.75;
	font-weight:bold;
}
@media all and (min-width: 768px) {
div.copy {
	margin-bottom:30px;
}
div.copy p {
	font-size:112.5%;
}
}
@media all and (max-width: 767px) {
div.copy {
	margin-bottom:15px;
}
}


/*	bansen
============================== */

dl.dl-onair dt, dl.dl-onair dd {
	line-height:1.75;
}
dl.dl-onair dt {
	color:#900;
	margin-bottom:0.25em;
}
dl.dl-onair dd {
	padding-bottom:0.5em;
	margin-bottom:0.75em;
}
dl.dl-onair dd cite {
	font-size:112.5%;
}
@media all and (min-width: 768px) {
dl.dl-onair {
	margin-bottom:1.75em;
}
dl.dl-onair dt, dl.dl-onair dd {
	font-size:100%;
}
}
@media all and (max-width: 767px) {
dl.dl-onair {
	margin-bottom:1.75em;
}
dl.dl-onair dt, dl.dl-onair dd {
	font-size:87.5%;
}
}



/*	LINE .news0627
============================== */
div.line-qr {
	margin:0 auto;
}
div.line-qr span, div.line-qr span img {
	display:block;
}
@media all and (min-width: 768px) {
div.line-qr, div.line-qr span, div.line-qr span img {
	width:400px;
	height:400px;
}
}
@media all and (max-width: 767px) {
div.line-qr span {
	background-size:cover;
}
div.line-qr, div.line-qr span, div.line-qr span img {
	width:260px;
	height:260px;
}
}





/*	submenu
============================== */
div.submenu nav ul li:before {
	content:"";
	display:block;
	background-image:url(../img/arrow16.svg);
	background-repeat:no-repeat;
	background-size:16px 100px;
	background-position:0 -39px;
	width:16px;
	height:18px;
	float:left;
	margin-right:6px;
}
div.submenu nav ul li {
	display:none;
	position:relative;
	margin-bottom:2px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background-color:#6270fa;
	-webkit-background-clip:content-box;
	background-clip:content-box;
}
div.submenu nav ul li:before {
	position:absolute;
	left:4px;
	top:50%;
	margin-top:-9px;
}
div.submenu nav ul li a {
	display:block;
	color:#283cc8;
	background-color:#00ff78;
	background-image:-webkit-linear-gradient(top,#b1fd18,#00ff78 80%,#06bbf2);
	background-image:linear-gradient(to bottom,#b1fd18,#00ff78 80%,#06bbf2);
	line-height:18px;
	height:18px;
	padding:0.5em;
	margin-left:24px;
}
div.submenu nav ul li a, div.submenu nav ul li a span {
	display:block;
}
div.submenu nav ul li a {
	text-decoration:none;
}
@media all and (min-width: 768px) {
div.submenu {
	margin-bottom:30px;
}
div.submenu nav ul li {
	width:50%;
	float:left;
}
div.submenu nav ul li:nth-child(1), div.submenu nav ul li:nth-child(2), div.submenu nav ul li:nth-child(3),
 div.submenu nav ul li:nth-child(4), div.submenu nav ul li:nth-child(5), div.submenu nav ul li:nth-child(6) {
	display:block;
}
div.submenu nav ul li:nth-child(odd) {
	padding-right:12px;
}
div.submenu nav ul li a:hover {
	text-decoration:underline;
}
div.submenu nav ul li a > span {
	font-size:87.5%;
}
}
@media all and (max-width: 767px) {
div.submenu {
	margin-bottom:20px;
}
div.submenu nav ul li:nth-child(1), div.submenu nav ul li:nth-child(2), div.submenu nav ul li:nth-child(3), div.submenu nav ul li:nth-child(4) {
	display:block;
}
div.submenu nav ul li a > span {
	font-size:83%;
}
}



/*	backtoSubMenu button
============================== */

div.unit article p.bktosub a,
div.unit article p.bktosub a span {
	display:block;
}
div.unit article p.bktosub a {
	text-decoration:none;
	background-color:#00ff78;
}
div.unit article p.bktosub a span {
	text-indent:110%;white-space:nowrap;overflow:hidden;
	background-image:url(../img/arrow16.svg);
	background-position:16px 4px;
	background-repeat:no-repeat;
	background-size:16px 100px;
	height:24px;
}
@media all and (min-width: 768px) {
div.unit article p.bktosub a:hover {
	background-color:#6270fa;
}
div.unit article p.bktosub {
	padding-left:876px;
}
}
@media all and (max-width: 767px) {
div.unit article p.bktosub a,
div.unit article p.bktosub a span {
	display:block;
	width:48px;
}
div.unit article p.bktosub a {
	margin:0 auto;
}
}



/*	div#blog
============================== */
div#blog figure > span, div#blog figure span span,
div#blog figure span img {
	display:block;
}
div#blog figure > span {
	overflow:hidden;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	margin:0 auto 6px;
	border-style:solid;
}
div#blog figure span span {
	background-position:center center;
	background-repeat:no-repeat;
}
div#blog figure span span.lazy-done {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
div#blog figure figcaption {
	text-align:center;
	line-height:1.5;
}
div#blog figure figcaption span {
	padding:0.2em 0.5em;
}
div#blog figure > span {
	background-color:#36fff9;
	border-color:#36fff9;
}
div#blog figure figcaption span {
	background-color:hsla(56,100%,50%,0.9);
}
@media all and (min-width: 768px) {
div#blog figure:not(:last-child) {
	margin-bottom:30px;
}
div#blog figure span.yoko {
	width:430px;
}
div#blog figure span.yoko span,
div#blog figure span.yoko span img {
	width:420px;
	height:280px;
}
div#blog figure span.tate {
	width:290px;
}
div#blog figure span.tate span,
div#blog figure span.tate span img {
	width:280px;
	height:420px;
}
div#blog figure figcaption {
	font-size:83%;
}
}
@media all and (max-width: 767px) {
div#blog figure:not(:last-child) {
	margin-bottom:20px;
}
div#blog figure span.tate {
	width:180px;
}
div#blog figure span.tate span,
div#blog figure span.tate span img {
	width:172px;
	height:258px;
}
div#blog figure span span {
	background-size:cover;
}
div#blog figure figcaption {
	font-size:75%;
}
}
@media all and (min-width: 375px) {
div#blog figure > span {
	border-width:5px;
}
}
@media all and (min-width: 375px) and (max-width: 767px) {
div#blog figure span.yoko {
	width:292px;
}
div#blog figure span.yoko span,
div#blog figure span.yoko span img {
	width:282px;
	height:188px;
}
}
@media all and (max-width: 374px) {
div#blog figure > span {
	border-width:4px;
}
div#blog figure span.yoko {
	width:234px;
}
div#blog figure span.yoko span,
div#blog figure span.yoko span img {
	width:226px;
	height:151px;
}
}




/*	table
============================== */

div.tbl table tr {
	border-bottom:2px solid #fff;
}
div.tbl table th, main div.tbl table td {
	line-height:1.5;
}
div.tbl table th {
	text-align:center;
	color:#404ee0;
	background-color:#19ffff;
	vertical-align:middle;
	white-space:nowrap;
}
div.tbl table tr:nth-child(odd) td {
	background-color:hsla(0,0%,0%,0.05);
}
div.tbl table tr:nth-child(even) td {
	background-color:hsla(0,0%,100%,0.5);
}
@media all and (min-width: 768px) {
div.tbl table {
	font-size:100%;
	margin-bottom:30px;
}
div.tbl table th, main div.tbl table td {
	padding:0.75em 1.5em;
}
}
@media all and (max-width: 767px) {
div.tbl table {
	font-size:87.5%;
	margin-bottom:15px;
}
div.tbl table th, main div.tbl table td {
	padding:0.75em 0.5em;
}
}

#release0920 div.tbl table th {
	width:20%;
}