/*-----------------------------------------------
 keyvisual
-----------------------------------------------*/
#keyvisual{
	overflow: hidden;
	position: relative;
	opacity: 0;
	height: 720px;
	margin: 0 auto 2px;
	background: url(../img/top/keyvisual-bg.jpg) top center no-repeat #fff;
}
#keyvisual .inner{
	position: relative;
	width: 1200px;
	margin: 0 auto;
}
#keyvisual .logo {
    position: absolute;
    opacity: 0;
    top: 446px;
    left: -2px;
}
#keyvisual .title {
    position: absolute;
    z-index: 3;
    opacity: 0;
    top: 234px;
    left: 230px;
}
#keyvisual .catch {
    position: absolute;
    z-index: 3;
    opacity: 0;
    top: 406px;
    left: 327px;
}
#keyvisual .character{
	position: absolute;
	z-index: 2;
	opacity: 0;
    top: 30px;
    left: 292px;
}
#keyvisual .light{
	width: 0;
	height: 640px;
	margin: 0 auto;
	background-image: url(../img/top/keyvisual-light.png);
	background-position: center top;
}
#keyvisual .update {
    position: absolute;
    top: 303px;
    left: 883px;
}
/*#keyvisual .bnr-pc {
	position: absolute;
    top: 420px;
    left: 332px;
	width: 0;
	height: 143px;
	display: block !important;
    z-index: 3;
	background: #fff;
}*/
#keyvisual .bnr-pc {
	position: absolute;
    top: 585px;
    left: 50%;
		transform: translateX(-50%);
	width: 1100px;
	height: 116px;
    z-index: 3;
		display: flex !important;
}

#header .bnr-pc li {
	position: relative;
	width: 0;
	background-color: #fff;
}
#header .bnr-pc li + li {
	margin-left: 10px;
}

#keyvisual .bnr-pc li .cover {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: #fff;
}


#keyvisual .bnr-pc img {
	width: 100%;
}
#keyvisual .keyvisual-sp{
	display: none;
}
@media only screen and (max-width: 640px) {
	#keyvisual{
		width: auto;
		height: auto;
		background: none;
	}
	#keyvisual .inner{
		width: auto;
	}
	#keyvisual .keyvisual-sp{
		display: block;
	}
	#keyvisual .keyvisual-sp img{
		width: 100%;
	}
	#keyvisual .logo,
	#keyvisual .title,
    #keyvisual .catch,
	#keyvisual .character{
		display: none;
	}
	#keyvisual .light{
		display: none;
	}
	#keyvisual .update{
		position: absolute;
		top: auto;
		bottom: 0;
		left: auto;
	}
	#keyvisual .update img{
		width: 100%;
	}
	#keyvisual .bnr-pc {
		display: none;
	}
}
/*-----------------------------------------------
 header
-----------------------------------------------*/
#header {
	height: auto;
	margin-bottom: 30px;
}
#header nav {
	padding: 20px 0;
	background: #000;
	background-size: cover;
}
#header nav ul {
	position: static;
	width: 1200px;
	margin: 0 auto;
	font-size: 0;
	text-align: center;
}
#header nav ul li {
	width: 237px;
}
#header .bnr-sp {
	display: none;
}
@media only screen and (max-width: 640px) {
	#header{
		margin-bottom: 0;
		background: transparent;
	}

	#header .bnr-sp {
		position: relative;
		width: 94.5%;
		display: block !important;
		margin: 6% auto 0;
	}
	#header .bnr-sp .bnr {
		display: flex;
	}
	#header .bnr-sp .bnr li {
		width: calc((100% - 16px) / 3);
	}
	#header .bnr-sp .bnr li + li {
		margin-left: 8px;
	}
	#header .bnr-sp .cover {
		position: absolute;
		top: 0;
		left: 0;
		width: 0%;
		height: 100%;
	}
	#header .bnr-sp .cover span {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		z-index: 5;
	}
	#header .bnr-sp img {
		position: relative;
		z-index: 2;
		width: 100%;
		opacity: 0;
	}
}

#modal {
	cursor: pointer;
}
body.fixed {
  position: fixed;
  width: 100%;
  left: 0;
}
.modal-area {
  display: none;
  z-index: 10; /* サイトによってここの数値は調整 */
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: .4s;
}

.modal-bg {
	position: fixed;
	top: 0;
	left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.8);
}

.modal-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 800px;
  padding: 0;
  background-color: #fff;
}

.modal-wrapper .box-youtube {
	position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.modal-wrapper .box-youtube iframe {
	position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.modal-contents {
	position: relative;
}
.modal-close {
  position: absolute;
  top: -25px;
  right: 0;
	width: 19px;
  cursor: pointer;
}
.modal-close img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

@media only screen and (max-width: 640px) {
	.modal-wrapper {
		width: calc(600 / 640 * 100%);
	}
	/*.modal-close {
	  top: -25px;
	  right: 0;
		width: calc(25 / 640 * 100%);
	  cursor: pointer;
	}*/
}

.container {
  display: flex;
  justify-content: center;
}

.bnr-news {
	text-align: center;
	margin: 20px 0 30px;
}
@media only screen and (max-width: 640px) {
	.bnr-news {
	width: 95%;
	margin: 4% auto;
	}
	.bnr-news img {
		width: 100%;
	}
}

#content {
	width: 100%;
}

/*-----------------------------------------------
 news
-----------------------------------------------*/
#news {
	background: url(../img/top/news-bg.png) center top no-repeat;
	height: 179px;
	margin-bottom: 40px;
}
#news .inner {
	position: relative;
	width: 1200px;
	margin: 0 auto;
	padding: 20px 0;
}
#news h2{
	position: absolute;
	top: 20px;
	left: 24px;
}
#news ul {
	margin-left: 160px;
	overflow-y: scroll;
	height: 118px;
	width: 959px;
}
#news ul li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 120px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
}
#news ul li time {
	position: absolute;
	left: 0;
	color: #2356a6;
}
#news ul li time::after{
	content: "\f0da";
	display: inline-block;
	padding-left: 10px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #d30000;
}
#news ul li a:hover{
	text-decoration: none;
	opacity: 0.8;
	animation: btn 0.5s;
	-webkit-animation: btn 0.5s;
	-moz-animation: btn 0.5s;
}
#news ::-webkit-scrollbar {
    width: 10px;
}
#news ::-webkit-scrollbar-thumb {
  background-color: #000;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}
@media only screen and (max-width: 640px) {
	#news{
		height: auto;
		margin-bottom: 0;
		background: none;
	}
	#news .inner{
		width: auto;
		padding: 20px 0;
	}
	#news h2{
		position: relative;
		top: auto;
		left: auto;
		margin-bottom: -2px;
	}
	#news h2 img{
		width: 100%;
	}
	#news ul{
		width: auto;
		margin: 0;
		padding: 20px;
		height: 80px;
		background: #dfe0e1;
	}
	#news ul li {
		padding-left: 0;
	}
	#news ul li time {
		position: unset;
		display: block;
	}
	#news ul li time::after {
		display: none;
	}
	#news .inner::after{
		content: "";
		display: block;
		height: 23px;
		background: url(../img/top/news-foot-bg.png) right top no-repeat;
	}
}
/*-----------------------------------------------
contentNav
-----------------------------------------------*/
#contentNav {
	margin-bottom: 34px;
}
#contentNav ul.sp {
	display: none;
}
#contentNav ul li {
	text-align: center;
	height: 386px;
	margin-bottom: 10px;
}
#contentNav ul li a {
	height: 100%;
	display: block;
}
#contentNav ul li:nth-child(1) a{
	background: url(../img/top/nav-comment-new.png) top center no-repeat;
}
#contentNav ul li:nth-child(2) a{
	background: url(../img/top/nav-about.png) top center no-repeat;
}
#contentNav ul li:nth-child(3) a{
	background: url(../img/top/nav-chronology.png) top center no-repeat;
}
#contentNav ul li:nth-child(4) a{
	background: url(../img/top/nav-novel.png) top center no-repeat;
}
#contentNav ul li:nth-child(5) a{
	background: url(../img/top/nav-book-new.png) top center no-repeat;
}
#contentNav ul li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 640px) {
	#contentNav {
		margin-bottom: 10%;
	}
	#contentNav ul.pc {
		display: none;
	}
	#contentNav ul.sp {
		display: block;
	}
	#contentNav ul li {
		background-size: cover;
		margin-bottom: 1%;
		height: auto;
	}
	#contentNav ul li:nth-child(1) a,
	#contentNav ul li:nth-child(2) a,
	#contentNav ul li:nth-child(3) a,
	#contentNav ul li:nth-child(4) a,
	#contentNav ul li:nth-child(5) a{
		background: unset;
	}
	#contentNav ul li img{
		width: 100%;
	}

}


/*-----------------------------------------------
contBottom
-----------------------------------------------*/
#contBottom {
	margin-bottom: 50px;
}
#contBottom .inner {
	width: 1200px;
	margin: 0 auto;
}

#contBottom #twitter {
	background: url(../img/top/twitter-bg.png) top center no-repeat;
	width: 658px;
	float:left;
	margin-right: 28px;
}
#contBottom #twitter .tweetBox {
	text-align: center;
	padding: 68px 0 30px;
}
#contBottom #twitter .tweetBox.sp {
	display: none;
}
#contBottom .bnr {
	float: right;
}
#contBottom .bnr ul li:first-child {
	padding-top: 25px;
}
#contBottom .bnr ul li{
	margin-bottom: 20px;
	width: 514px;
}
#contBottom .bnr ul li img {
	width: 100%;
}
#contBottom .sns {
	float: right;
	width: 514px;
	text-align: center;
}
#contBottom .sns ul li {
	display: inline-block;
	margin: 0 10px;
	width: 64px;
}
#contBottom .sns ul li img{
	width: 100%;
}
#contBottom .bnr ul li.pc{
	display: block;
}
#contBottom .bnr ul li.sp{
	display: none;
}
@media only screen and (max-width: 640px) {
	#contBottom {
		margin-bottom: 8%;
	}
	#contBottom .inner {
		width: 100%;
	}
	#contBottom #twitter,
	#contBottom .bnr,
	#contBottom .sns {
		float: unset;
	}
	#contBottom #twitter {
		width: 95%;
		margin: 0 auto;
		margin-bottom: 3%;
		background-size: cover;
	}

	#contBottom #twitter .tweetBox.pc {
		display: none;
	}
	#contBottom #twitter .tweetBox.sp {
		display: block;
		margin: 0 4%;
	}
	#contBottom #twitter .tweetBox.sp iframe {
		width: 580px !important;
	}
	#contBottom .bnr {
		width: 94%;
		margin: 0 auto;
		margin-bottom: 8%;
	}
	#contBottom .bnr ul li {
		width: 100%;
	}
	#contBottom .bnr ul li:first-child {
		margin-bottom: 4%;
	}
	#contBottom .sns {
		width: 100%;
		text-align: center;
	}
	#contBottom .sns ul li {
		width: 12%;
		margin: 0 1.5%;
	}
	#contBottom .bnr ul li.pc{
	display: none;
}
#contBottom .bnr ul li.sp{
	display: block;
}
}
/*-----------------------------------------------
footer
-----------------------------------------------*/
fotter {
	clear: both;
}