@charset "utf-8";
#gHeader {
	position: fixed;
}

/* --------------------
   mv
   -------------------- */
.pageMv {
	background-image: url("../img/topics/mv-pc.png");
}

@media screen and (max-width: 768px) {
	.pageMv {
		background-image: url("../img/topics/mv-sp.png");
	}
}

/* --------------------
   contents
   -------------------- */
#main{
	background:#0A0000;
}


.inner{
	padding: 5vw 0 10vw 0;
	width: calc(680/1400 * 100%);
	margin: 0 auto;
}


@media screen and (max-width: 768px) {
	#main{
	 margin: 0 0 10vw 0;
  }
	
	.inner{
		width: 90%;
		padding: 3vh 0;
	}
}

/* --------------------
   index
   -------------------- */
.inner .news{
	margin: 0 auto 0 0;
	padding: 4vw 0 0 0;
	font-size:1.3rem;
	line-height: 1.8;
}

.inner .news li{
	display: flex;
	flex-flow: row wrap;
	border-bottom:1px solid #4d3b2e;
	padding: 2vw 1vw;
}

.inner .news li:first-of-type{
	border-top:1px solid #4d3b2e;
}

.inner .news .date{
  color: #D8BFA4;
  width: 20%;
}

.inner .news .category{
  color: #D8BFA4;
  width: 80%;
	margin: 0;
}

.inner .news .text{
	width: 80%;
	margin: 0 0 0 auto;
}

.inner .news a:hover{
	text-decoration: underline;
}

@media screen and (max-width: 768px) {
	.inner .news{
		margin: 0 auto 0 0;
		padding: 4vw 0 0 0;
		font-size:1.3rem;
		line-height: 1.8;
		justify-content: flex-start;
	}

	.inner .news li{
		padding: 4vw 1vw;
	}
	
	.inner .news .date{
		width: auto;
	}

	.inner .news .category{
		width: auto;
		margin: 0 0 0 5vw;
	}		

	.inner .news .text{
		width: 100%;
	}
}

/* --------------------
   news_contents
   -------------------- */
.titleArea{
	display: flex;
	flex-flow: row wrap;
	border-bottom:1px solid #4d3b2e;
	margin: 0 0 3vw 0;
	
}

.titleArea .date{
	width: 20%;
	font-size:1.3rem;
	line-height: 1.8;
	color: #D8BFA4;
}

.titleArea .category{
	width: 80%;
	font-size:1.3rem;
	line-height: 1.8;
	color: #D8BFA4;
}

.titleArea .title{
	width: 100%;
	font-size: 2.4rem;
	line-height: 2;
	color: #fff;
}

.lead {
    font-size: 2rem;
    line-height: 1.8;
	  text-align: center;
		margin:0 0 2vw 0;
}

.copy {
    font-size: 1.6rem;
    line-height: 1.8;
	   text-align: center;
}

.news_contents figure.w100{
	margin: 3vw auto;
	width:100%;
}

.news_contents figure.w80{
	margin: 3vw auto;
	width:80%;
}

.news_contents figure.w50{
	margin: 3vw auto;
	width:50%;
}

.news_contents .text{
	margin: 0 0 2vw 0;
}

.news_contents .pageing{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	margin: 5vw 0;
	color: #D8BFA4;
	font-size: 1.3rem;
	line-height: 1.6;
}

.news_contents .pageing .nolink{
	color: #666666;
	pointer-events: none;
}

.news_contents .pageing a:hover{
	text-decoration: underline;
}

.news_contents .btnarea {
    width: calc(370/679 * 100%);
    margin: 6vw auto 0 auto;
}

.contentsarea a{
	text-decoration: underline;
	transition: all .3s ease;
}

.contentsarea a:hover{
	opacity: .6;
}

@media screen and (max-width: 768px) {
	.titleArea{
		margin: 0 0 8vw 0;
	}
	
	.titleArea .date{
		width: auto;
	}

	.titleArea .category{
		width: auto;
		margin: 0 0 0 5vw;
	}

	.titleArea .title{
		font-size: 1.8rem;
		line-height: 1.6;
		margin: 0 0 4vw 0;
	}

	.lead {
    font-size: 1.6rem;
		margin:0 0 4vw 0;
	}

	.copy {
		font-size: 1.4rem;
	}

	.news_contents figure.w100{
		margin: 10vw auto 8vw auto;
		width:100%;
	}

	.news_contents figure.w80{
		margin: 10vw auto;
		width:80%;
	}

	.news_contents figure.w50{
		margin: 10vw auto 8vw auto;
		width:70%;
	}
	
	.news_contents figure{
		margin: 0 0 6vw 0;
	}

	.news_contents .text{
		margin: 0 0 2vw 0;
		line-height: 2.2;
	}

	.news_contents .pageing{
		margin: 10vw 0;
	}

	.news_contents .btnarea {
			width: 85%;
			margin: 6vw auto 20vw auto;
	}
}


/* youtube */
.news_contents .iframeBox {
 display:block;
 width:80%;
 margin:0 auto;
 padding-bottom:56.25%;
 height:0;
 position:relative
}

.news_contents .iframeBox iframe {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%
}