/*-----------------------------------------------------------------------------------------------------------

 1. BASE (Mobile VIEW) CSS
 2. Mobile VIEW CSS
 3. WIDE VIEW CSS
 4. EXTRA WIDE VIEW CSS
 
-----------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------------------------*/

/* 1. BASE (Mobile VIEW) start */

/*-------------------------------------------*/
.noPC, .noSP, .onlyPC, .onlySP {display:none;}
body{
	font-family: 'Zen Old Mincho', serif;
	padding:0;
	margin:0;
	background-color:#4B4D4F;
	}

header {
	background:#4B4D4F;padding:0px;position:fixed;
	width:100%;max-width: 1000px; margin:0 auto;
	left: 50%;
	top: 49px;
	transform: translateX(-50%)
	translateY(-50%);
	z-index:10;
	}
header section{display:flex;align-items:baseline;justify-content: space-between;}
header section h1{color:#fff;margin: 10px 20px;}
header section p{color:#fff;margin: 10px 20px;}
header section p a{color:#fff;}
nav{
	display:flex; 
 	flex-direction: row;
 	background:#CC3333;
 	width:100%;
 	}
nav a{
	display:block;
	text-align:center;
 	background:#CC3333;
	padding:10px;
	flex-grow: 1;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	}
nav a.long{flex-grow: 2;}
nav a.active{background:#EE6666;}
nav::before {
  border-bottom: 15px solid transparent;
  border-right: 20px solid #6d3c36;
  content: '';
  left: 0;
  position: absolute;
  top: 100%;
}
nav::after {
  border-bottom: 15px solid transparent;
  border-left: 20px solid #6d3c36;
  content: '';
  position: absolute;
  right: 0;
  top: 100%;
}

#wrap{
	max-width: 1000px; margin:0 auto;padding-top:98px;
    position:relative;
	}

#wrap::before{
	background-color:#AA2424;
	color:#f9f6f0;
	content:"";
	display:block;
	width:100vw;
	height:43px;
	position:fixed;
	left:50%;
	transform: translateX(-50%);
	top:70px;
}
#contents{
    box-sizing:border-box;
    position:relative;
    z-index:1;
    margin:0px 20px;
    background-color:#f9f6f0;
    }
#contents a {
	text-decoration:none;
	color:#CC3333;
	font-weight:bold;
	border-bottom:1px solid #CC3333;
	}
#contents a:hover {
	background-color:#CC3333;
	color:#f9f6f0;
	border-bottom:1px solid #f9f6f0;
	}
#contents section{
	margin:0 14px;padding: 0 14px;
	position:relative;
	z-index:1;
}
article{
	font-size: 20px;
	line-height:170%;
	width:100%;
	clear:both;
	overflow:hidden;
	}
.center{text-align:center;}
article > h2 {
	border-bottom: 2px solid #f0bdc4; /* 下線 */
	color: #333; /* 文字色 */
	padding: 10px 10px 10px 80px; /* 上・右・下・左の余白 */
	position: relative;
	font-size: 40px;
}
article > h2:before {
	background-color: #E9546B; /* 円1の色 */
	border-radius: 50%;
	content: '';
	display: block;
	position: absolute;
	top: 0px;
	left: 20px;
	width: 25px; /* 円1の幅 */
	height: 25px; /* 円1の高さ */
	box-shadow: 25px 10px 0px #E9546B, /* 円2の位置・色 */
			 3px 25px 0px #E9546B; /* 円3の位置・色 */
}
article > h2:after {
	border: 4px solid #fff; /* 白抜き円 */
	border-radius: 50%;
	content: '';
	display: block;
	position: absolute;
	top: 13px;
	left: 31px;
	width: 15px; /* 白抜き円の幅 */
	height: 15px; /* 白抜き円の高さ */
}
#intro div {margin:0; padding:0;}
#intro p.logo {float:left;shape-outside: circle(150px);}
#about {}
#about dl{border: #ccc 6px double; padding:20px;margin:10px;clear:both;overflow:hidden;font-size:16px}
#about dt{float:left;clear:both;}
#about dd{float:left;}
#tsukuyomi {text-align:center;padding-bottom:1.5rem;}
#tsukuyomi a{border:0;}
#tsukuyomi img{max-width:95%;}
#tsukuyomi div.pre {position:relative;}
#tsukuyomi div.pre span{position:absolute;left:50%;top:50%;color:#fff;font-weight:bold;transform: translateX(-50%) translateY(-50%);}
#tsukuyomi img.teaser {
  position: relative;
  display: inline-block;
  filter: brightness(60%);
  opacity: 0.85;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

#chara {}
#chara p img {max-width:100%;}
#chara h3{font-size:36px;color:#B5495B;}
#chara h3:before{
  content: "\0020";
  display:inline-block;
  width:50px;
  height:50px;
  background-image: radial-gradient(#E7556A 25%, transparent 0),
    radial-gradient(#E7556A 25%, transparent 0),
    radial-gradient(#E7556A 25%, transparent 0),
    radial-gradient(#E7556A 25%, transparent 0),
    radial-gradient(#E7556A 25%, transparent 0);
  background-position: 50% 0, 5% 40%, 95% 40%, 23% 95%, 78% 95%;
  background-size: 30px 30px;
  background-repeat:no-repeat;
	}
#novel {}
#novel dl dd {font-size:15px;background:#f0f0f0;padding:5px 20px;border-radius:10px;}
#novel p.about {font-size:15px;background:#f0f0f0;margin:0 20px 2rem;padding:5px;border-radius:10px;}
#novel p.nav {text-align:center;}
#novel hr {max-width:720px;margin:1rem auto;border-top:#666 1px solid;}
#novel section.novel{max-width:720px;padding: 0 14px 0 0;margin:0 auto 2rem;line-height:200%;font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Verdana, sans-serif;}
#novel section.novel div.hr{text-align:center;color:#DBBCC1;}
#novel section.novel div.hr.chapter{margin-top:1rem;border-top:1px #BE959C dashed;border-bottom:1px #BE959C dashed;padding:0px;color:#BE959C;}
#opmovie {}
#info {}
#info section{font-size:0.8em; line-height: 120%;}
#link {}
#link section{font-size:0.8em;padding-bottom:10px;}
footer{clear:both;padding:5px;margin:0 20px;background-color:#f9f6f0;}
footer p {margin:0;font-size:12px;text-align:center;}
#novel section.novel{padding:20px;font-size:18px;}
.movie-credit,
.movie-credit p {
	text-align:center !important;
}
.movie-credit div{
	display:flex;
	justify-content: space-around;
	margin-bottom:3rem;
}
span.new{
	display:inline-bock;
	background-color:#CC3333;
	color:#f9f6f0;
	font-size:75%;
	padding:3px;
}
/*-------------------------------------------*/
/* 2. ONLY Mobile VIEW start */ @media ( max-width : 767px ) {
/*-------------------------------------------*/
.onlySP, .noPC{display:block !important;}
span.onlySP, span.noPC{display:inline !important;}
img.onlySP, img.noPC{display:inline-block !important;}
.noSP, .onlyPC,
img.noSP, img.onlyPC,
span.noSP, span.onlyPC{display:none !important;}

header {position:relative;top:0;left:0;transform:none;}
header section {display:block;}
nav{display:none;}
aside{display:none;}

nav::before,
nav::after,
#wrap::before{display:none;}
#contents {border:0;margin:0;}
#contents:before {display:none;}
#contents:after {display:none;}

#wrap {margin-top:0;padding-top:0;}
#intro {}
#intro p {font-size:80%;line-height:1.7;}
#intro p.logo {width:150px;float:none;margin:0 auto;padding:0;width:100%;text-align:center;}

#contents section {margin:0;}

#tsukuyomi p{font-size:14px;line-height:1.5;}

.tab_item {
    width: 40vw !important;}

h2 {font-size:24px !important;}
article#about h2 {color:#B5495B;}

#about dl {line-height:1;font-size:75%;}
#about dt,#about dd {float:none;display:block;line-height:1;}
#about dt {margin-bottom:0;}
#about dd {margin-left:2rem;margin-top:0;margin-bottom:1.3rem;}

article#chara section {position:relative;min-height:180vw;}
article#chara h3 {margin-top:0;margin-bottom:15px;}
article#chara p.img{position:absolute;margin:0;top:0px;right:0;}
article#chara div{position:absolute; top:120vw;width:95vw;font-size:90%;}
article#chara section:nth-child(3) h3{text-align:center;}
article#chara section:nth-child(4) h3{margin-top:22px;}
article#chara section:nth-child(4) p.img img{max-width:120%;}
article#chara section:nth-child(5) h3{text-align:center;margin-top:20px;}
article#chara section:nth-child(5) p.img img{max-width:130%;}

footer{margin:0;}
#novel section.novel{padding:20px;font-size:18px;}
.movie-credit div{
	display:block;
}
/*-------------------------------------------*/
} /* Mobile VIEW end */
/*-----------------------------------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------------------------------*/

/* 3. WIDE VIEW start */ @media ( min-width : 768px ) and ( max-width : 1023px ) {

/*-------------------------------------------*/
.onlySP, .onlyPC,
img.onlySP, img.onlyPC,
span.onlySP, span.onlyPC{display:none !important;}
.noSP, .noPC{display:block !important;}
img.noSP, img.noPC{display:inline-block !important;}
span.noSP, span.noPC{display:inline !important;}

#wrap::before{
	background-color:#AA2424;
	color:#f9f6f0;
	content:"";
	display:block;
	width:100vw;
	height:43px;
	position:fixed;
	left:50%;
	transform: translateX(-50%);
	top:70px;
}
article#about h2 {
	border-bottom: 2px solid #f0bdc4; /* 下線 */
	color: #333; /* 文字色 */
	margin: 30px -28px 0;
	padding: 10px 10px 10px 80px; /* 上・右・下・左の余白 */
	position: relative;
	font-size: 40px;
}
article#about h2:before {
	background-color: #E9546B; /* 円1の色 */
	border-radius: 50%;
	content: '';
	display: block;
	position: absolute;
	top: 0px;
	left: 20px;
	width: 25px; /* 円1の幅 */
	height: 25px; /* 円1の高さ */
	box-shadow: 25px 10px 0px #E9546B, /* 円2の位置・色 */
			 3px 25px 0px #E9546B; /* 円3の位置・色 */
}
article#about h2:after {
	border: 4px solid #fff; /* 白抜き円 */
	border-radius: 50%;
	content: '';
	display: block;
	position: absolute;
	top: 13px;
	left: 31px;
	width: 15px; /* 白抜き円の幅 */
	height: 15px; /* 白抜き円の高さ */
}


#chara section{
	margin:0 20px;
	display:flex;
	justify-content:space-around;
	clear:both;
	}
#chara .blank {flex-grow: 0.1;}
article#chara .rl {
	writing-mode: vertical-rl;
	float:right;
	clear:both;
	height:480px;
	margin:2em 0;
	}
article#chara .rl:after{content:"";display:inline-block;clear:both;}

footer{margin:0 20px;}
#novel section.novel{padding:20px;}
/*-------------------------------------------*/
} /* WIDE VIEW end */
/*-----------------------------------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------------------------------*/

/* 4. EXTRA WIDE VIEW start */ @media ( min-width : 1024px ) {

/*-------------------------------------------*/
.noSP, .onlyPC{display:block !important;}
span.noSP, span.onlyPC{display:inline !important;}
img.noSP, img.onlyPC{display:inline-block !important;}
.onlySP, .noPC,
img.onlySP, img.noPC,
span.onlySP, span.noPC{display:none !important;}
#wrap{
	}
header {
	width: 1000px; margin:0 auto;
	left: 50%;
	top: 49px;
	transform: translateX(-50%)
	translateY(-50%);
	z-index:10;
	}

.rl {
	writing-mode: vertical-rl;
	float:right;
	clear:both;
	height:480px;
	margin:2em 0;
	}
.rl:after{content:"";display:inline-block;clear:both;}
.youtube{
        width: 960px !important;
        max-width: calc(100%);
	margin:0 auto;
}
#intro {
	width:960px;
	max-width: calc(100%);
	background:url(title.jpg);
	background-size:cover;
	color:#fff;
	margin:0 auto;
	overflow:hidden;
	}

#intro section{
	margin:0px;padding: 25px 10px;
}
#intro p.logo {text-align:center;float:none !important;}
#about section{
	margin:0px;padding: 30px 10px;
}
#about dl{border: #ccc 6px double; padding:30px 20px 30px 0;margin:10px;font-size:20px;}
#about dt{float:none;margin:0 0 0 -35px !important;line-height: 100%;}
#about dd{float:none;margin:100px 0 0 15px !important;line-height: 200%;}
#chara section{
	margin:0 20px;
	display:flex;
	justify-content:space-around;
	clear:both;
	}
#chara .blank {flex-grow: 0.1;}

/*-------------------------------------------*/
} /* EXTRA WIDE VIEW end */
/*-----------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------------------------*/
/* Youtube埋め込みのレスポンシブ対応 */
/*-------------------------------------------*/
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/*-----------------------------------------------------------------------------------------------------------*/
/* CSSでタブ切り替えする機能 */
/*-------------------------------------------*/

/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 50px;
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item,
.tab_item2 {
  width: calc(900px / 3);
  height: 50px;
  border-bottom: 3px solid #464646;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  border-radius:10px 10px 0 0;
  text-align: center;
  font-weight: bold;
  transition: first 0.2s ease;
  cursor:pointer;
  z-index:5;
}
.tab_item:hover,
.tab_item2:hover {
  opacity: 0.75;
}
span.hidden {
	display:block;
	    width: calc(calc(100% - 600px) / 3);
  float: left;
  height: 50px;
  border-bottom: 3px solid #464646;
}
span.space {
	display:block;
	width: 3px;
  float: left;
  height: 50px;
  border-bottom: 3px solid #464646;
}
/*ラジオボタンを全て消す*/
input[name*="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content_group {
 display:block;
 position:relative;
 width:100%;
 height:500px;
 clear:both;
}
.tab_content {
  box-sizing:border-box;
  display: block;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
  position: absolute;
  width:100%;
  left:0;
  top:0;
  left:-600px;z-index:-1;
  opacity:0;
}

/*選択されているタブのコンテンツのみを表示*/
#first2:checked ~ .tab_content_group #first2_content,
#second2:checked ~ .tab_content_group #second2_content,
#first:checked ~ .tab_content_group #first_content,
#second:checked ~ .tab_content_group #second_content {
  left:0px !important;
  z-index:5;
  opacity:1;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #464646;
  color: #fff;
}
/*-----------------------------------------------------------------------------------------------------------*/