/* =================================
	topics CSS
================================= */
@media all and (min-width: 768px) {
.topics .contents{
	padding: 40px 50px 40px;
}
}
@media all and (max-width: 767px) {
.topics .contents{
	padding: 15px 0px 30px;
}
}


/*	Layout
============================== */
@media all and (min-width: 768px) {
.left_area{
	width: 635px;
	float: left;
	margin-bottom: 6px;
}
.left_area_in{
	padding: 0px 35px 0px 0px;
}
.right_area{
	width: 220px;
	float: right;
	margin-bottom: 50px;
}
}
@media all and (max-width: 767px) {
}

/*	title
============================== */

.title{
	position: relative;
	line-height: 1.5;
	border-bottom: 2px solid #cccccc;
	font-weight: 800;
	text-shadow:rgba(204,204,204,0.7) 1px 1px 0;
}
.tit_date{
	font-weight: normal;
	background-color: #fafb37;
	color: #000;
	font-family: -apple-system, system-ui, "Hiragino kaku Gothic ProN", MyYuGothicM, Meiryo, sans-serif;
}

@media all and (min-width: 768px) {
.title{
    margin: 0px auto 30px;
    font-size: 150%;
		padding: 10px 0px 10px;
}
.tit_date{
    padding: 8px 15px;
		font-size: 80%;
}
}
@media all and (max-width: 767px) {
.title{
    margin: 0px auto 10px;
		padding: 6px 0px 10px;
		font-size: 115%;
}
.tit_date{
    padding: 4px;
}
}


/*	repoBox_in
=================================== */
@media all and (min-width: 768px) {

.topics .repoBox_in{
	margin: 0 0 80px;
}
.topics .repoBox_in p {
	padding: 0px 0px 1.5em;
	text-align: left;
	line-height: 2;
}
.topics .repoBox1 p {
	text-align: left;
	font-size: 120%;
}
.topics .picBox {
	text-align: center;
	margin: 10px auto 30px;
}
.topics .picBox .topics_pic_w {
	width: 492px;
	height: 332px;
	background: #fff;
	border: 1px solid #cccccc;
	margin: 0 auto 5px;
	position: relative;
}
.topics .picBox .topics_pic_w .ph {
	width: 480px;
	height: 320px;
	position: absolute;
	left: 6px;
	top: 6px;
	background-color: #cccccc;
}
.topics .picBox .topics_pic_w img {
	width: 480px;
	height: 320px;
	display: block;
}
.topics .picBox .topics_pic_h {
	width: 332px;
	height: 492px;
	background: #fff;
	border: 1px solid #cccccc;
	margin: 0 auto 5px;
	position: relative;
}
.topics .picBox .topics_pic_h .ph {
	width: 320px;
	height: 480px;
	position: absolute;
	left: 6px;
	top: 6px;
	background-color: #cccccc;
}
.topics .picBox .topics_pic_h img {
	width: 320px;
	height: 480px;
	display: block;
}
.topics .picBox .p_caption {
	font-size: 80%;
	text-align: center;
}
.topics .picBox .p_caption span{
	background-color: #52aa2c;
	padding: 0.25em 1em;
	line-height: 1.2 !important;
	color: #fff;
}
.topics .picBox .topics_pic_ll {
	width: 492px;
	height: 694px;
	background: #fff;
	border: 1px solid #cccccc;
	margin: 0 auto 5px;
	position: relative;
}
.topics .picBox .topics_pic_ll .ph {
	width: 480px;
	height: 682px;
	position: absolute;
	left: 6px;
	top: 6px;
	background-color: #cccccc;
}
.topics .picBox .topics_pic_ll img {
	width: 480px;
	height: 682px;
	display: block;
}
}

@media all and (max-width: 767px) {
.topics .repoBox_in p {
	padding: 0em 0px 1em;
	text-align: left;
    line-height: 1.75;
    font-size: 90%;
}
.picBox {
	margin: 0 auto;
	text-align: center;
	margin: 10px 0 20px 0;
}
.picBox .topics_pic_w{
    width: 270px;
    box-sizing: border-box;
    padding: 3px;
    /* box-shadow: 0 6px #faebdc; */
    margin: 0 auto;
}
.picBox .topics_pic_w span{
    width: 270px;
    height: 180px;
    background-size:270px 180px;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #cccccc;
    border: 1px solid #cccccc;;
}
.picBox .topics_pic_w img{
    width: 270px;
    height: 180px;
	background-size:270px 180px;
}

.picBox .topics_pic_h{
    width: 180px;
    box-sizing: border-box;
    padding: 3px;
    /* box-shadow: 0 6px #faebdc; */
    margin: 0 auto;
}
.picBox .topics_pic_h span{
    width: 180px;
    height: 270px;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #cccccc;
    border: 1px solid #cccccc;
}
.picBox .topics_pic_h img{
    width: 180px;
    height: 270px;
}
.picBox .topics_pic_ll{
    width: 270px;
    box-sizing: border-box;
    padding: 3px;
    /* box-shadow: 0 6px #faebdc; */
    margin: 0 auto;
}
.picBox .topics_pic_ll span{
    width: 270px;
    height: 384px;
    background-size:270px 384px;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #cccccc;
    border: 1px solid #cccccc;;
}
.picBox .topics_pic_ll img{
    width: 270px;
    height: 384px;
	background-size:270px 384px;
}

.topics .picBox .p_caption span{
	font-size: 80%;
	text-align: center;
	line-height: 1.2;
	background-color: #52aa2c;
	padding: 0.25em 1em;
	color: #fff;
}
}


/*	backnumber
============================== */
.bknm{
	font-size: 85%;
}
.bknm h3{
	color: #fff;
	text-align: center;
	padding:5px 8px 5px;
	margin: 0 0 15px;
	background-color: #000;
	border-top: 2px solid #52a92c;
}
.bk_vol_area{
	display: block;
	margin-bottom: 0.3em;
	font-weight: 400;
	font-family: -apple-system, system-ui, "Hiragino kaku Gothic ProN", MyYuGothicM, Meiryo, sans-serif;
}
.bk_vol{
	background-color: #fafb37;
	color: #000;
	padding: 5px;
	margin: 0 10px 0 0;
	font-size: 90%;
	text-align: center;
}
.bknm ul li{
	margin: 0 0 10px;
}
.bknm ul li a{
	text-decoration: none;
	display: block;
	line-height: 1.7;
	color: #000;
	background-color: #d4f2c6;
	padding: 10px;
	font-weight: 800;
	position: relative;
}
.bknm ul li a:hover{
	text-decoration: none;
}
.bknm ul li a::after {
	content: "";
	bottom: 0;
	right: 0;
	border-top: 10px solid transparent;
	border-right: 10px solid #000;
	position: absolute;
	z-index: 100;
	transition: all 0.2s;
}
@media all and (min-width: 768px) {
.bknm h3{
	font-size: 125%;
}
}
@media all and (max-width: 767px) {
.bknm{
	margin:2em 0 0;
}
}

/* button */
.button,.button2{display:block;text-align:center;}
.button a{display:block;margin:0 auto;}
.button2 a{display:block;margin:0 auto;}
.button a {display: block;cursor: pointer;margin: 0 auto;padding: 30px; color: #000;font-size:160%;text-align: center;text-decoration: none;font-weight: 800;border-radius: 50px;
                       background-color: #fafb37;box-shadow: 0 6px 0 #d4d4d4, 0 12px 0 rgba(0,0,0,0.1);-webkit-transition: color 0.3s,
                       background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;}
.button a:hover {background-color: #fafb37; box-shadow: 0 3px 0 #d4d4d4, 0 6px 0px rgba(0,0,0,0.1); -webkit-transform: translateY(3px);transform: translateY(3px);}
.button a:active {color: #1e1e1e;background-color: #fafb37;box-shadow: 0 0 0 #d4d4d4, 0 0 0px rgba(0,0,0,0.1);-webkit-transform: translateY(6px);transform: translateY(6px);transition-duration: 0.1s;}

.button2 a {display: block;cursor: pointer;margin: 0 auto;padding: 30px; color: #000;font-size:160%;text-align: center;text-decoration: none;font-weight: 800;border-radius: 50px;
                       background-color: #fafb37;box-shadow: 0 6px 0 #d4d4d4, 0 12px 0 rgba(0,0,0,0.1);-webkit-transition: color 0.3s,
                       background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;}
.button2 a:hover {background-color: #fafb37; box-shadow: 0 3px 0 #d4d4d4, 0 6px 0px rgba(0,0,0,0.1); -webkit-transform: translateY(3px);transform: translateY(3px);}
.button2 a:active {color: #1e1e1e;background-color: #fafb37;box-shadow: 0 0 0 #d4d4d4, 0 0 0px rgba(0,0,0,0.1);-webkit-transform: translateY(6px);transform: translateY(6px);transition-duration: 0.1s;}


@media all and (min-width: 768px) {
.button a{display:block;width:380px; padding:20px 0;font-size:140%; line-height:100%;margin:20px auto 40px;}
.button2 a{display:block;width:600px; padding:20px 0;font-size:140%; line-height:100%;margin:30px auto 0;}
}
@media all and (max-width: 767px) {
.button a{display:block;width:70%; padding:1em 0;font-size:100%; line-height:100%;margin:1.5em auto 2em;font-weight:bold;}
.button2 a{display:block;width:90%; padding:1em;font-size:100%; line-height:100%;margin:1.5em auto 0;font-weight:bold;}
}

/*	player
============================== */
.player-deco {
/*
	border:4px solid #ebd3c0;
	background-color:#ebd3c0;
*/
}
.player-outer {
	position:relative;
	height:0;
	padding-top:56.25%;
}
.player-outer > iframe {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
@media all and (min-width: 768px) {
.trailer {
	margin:20px 0px 40px;
	clear: both;
}
/*.trailer h3 {
	width: 200px; height: 35px; background-size: 200px 35px;
	margin: 4px auto 10px;
}*/
}
@media all and (max-width: 767px) {
.trailer {
	margin:15px 0px 25px;
	/*margin:20px 0px 15px;*/
}
/*.trailer h3 {
	width: 150px; height: 26px; background-size: 150px 26px;
	margin:0px auto 5px;
}*/
}

@media all and (min-width: 768px) {
main article.oa {
	padding-bottom:30px;
}
}
@media all and (max-width: 767px) {
main article.oa {
	padding-bottom:20px;
}
}