@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,p,h1,h2,h3,h4,h5,h6,th,td,pre,code,blockquote,form,fieldset,legend,input,textarea,figcaption,figure{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}
li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{font-size:100%;}
legend{color:#FFF}
hr{display:none}
img{max-width: 100%;vertical-align: middle;}
select,input,button,textarea{font-size:99%}
table{font-size:inherit;font:100%;border-collapse:collapse;border-spacing:0}
pre,code,kbd,samp,tt{font-family:monospace;font-size:108%;line-height:100%}
article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section,main{display:block}*{margin:0;padding:0;box-sizing:border-box;max-height:999999px;outline:none;}*:focus{outline: none;}
button{background-color:transparent;border:none;cursor:pointer;outline:none;padding:0;}
* {box-sizing: border-box;}
/*-----------------------------
Bace
-------------------------------*/
:root {
	/* color */
	--txtColor: #84500d;
	--mainColor: #6d00fc;
	--subColor: #ffac12;
	--accentColor1: #ff0098;
	/*--accentColor2: #050a33;*/
	--contentColor: #fef7e4;

	/* font */
	--mainFont: 'Zen Kaku Gothic Antique',  sans-serif;
	--headFont: 'Dela Gothic One', sans-serif;
	--nameFont: 'Zen Antique', serif;

	/* 変化速度 */
	--speed: all, .3s, ease, .3s;
}
a {
	transition: .3s opacity;
}
@media (min-width: 891px) {
	a:hover {
		opacity: .6;
	}
}
@media (max-width: 890px) {
	a:active {
		opacity: .6;
	}
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* ScrollBar Setting */
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track{
  background: rgba(255,255,255, .3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb{
  background: var(--subColor);
  border-radius: 10px;
}
html {
	font-size: 62.5%; /* 基準を10pxに */
	scroll-behavior: smooth;
}
@media (max-width: 890px) {
	html {
		font-size: 55%;
	}
}
body {
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 1.6em; /* 16px ここだけem指定 */
	font-family: 'YakuHanJP',var(--mainFont);
	font-weight: 700;
	color: var(--txtColor);
	background-image: url(../img/bg.jpg);
	background-size: 100%;
	/*background-size: cover;*/

}
@media (max-width: 890px) {
	body {
		background-size: contain;
	}
}
h1,h2,h3,h4,h5,h6 {
	font-weight: 700;
}

a {
	text-decoration: none;
	color: var(--subColor);
	-webkit-tap-highlight-color: rgba(0,0,0,0);
  box-shadow: none;
  outline: none;
}
li {
	list-style: none;
}
img {
	width: 100%;
	height: auto;
	display: block;
	line-height: 1;
	pointer-events: none;
}
@media (max-width: 890px) {
	.pc {
		display: none
	}
}
@media (min-width: 891px) {
	.sp {
		display: none
	}
}
/*-----------------------------
  下層背景
-------------------------------*/
#lower {
	background-image: url(../img/grunge_l.webp), url(../img/grunge_r.webp);
	background-repeat: repeat-y;
	background-position: left -40px top -40px, right -110px top 290px;
}
@media (max-width: 890px) {
	#lower {
		background-image: url(../img/grunge_l_sp.webp), url(../img/grunge_r_sp.webp);
		background-size: 200px, 250px;
		background-position: left -70px top -70px, right -90px top 230px;
	}
	#lower:has(#chara) {
		background-repeat: repeat-y, no-repeat;
	}
}
/*-----------------------------
  ローディングアニメ
-------------------------------*/
#js-loading {
	width: 100vw;
	height: 100vh;
	background-image: url(../img/bg.jpg);
	background-size: cover;
	background-position: center;
	position: fixed;
	z-index: 1001;
}
.loading-logo {
	width: 475px;
	position: relative;
	top: calc((100vh - 210px) / 2);/* ロゴの高さ分を引く */
	left: 0;
	right: 0;
	margin: auto;
	animation: logoAnime 2.5s ease 0s;
}
@keyframes logoAnime {
	0% {
		opacity: 0;
		transform: scale(.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@media screen and (max-width:890px){ 
	.loading-logo {
		width: min(82vw, 500px);
		top: calc((100vh - 153px) / 2);
	}
}
/*-----------------------------
  オープニングシャッター
-------------------------------*/
#op-anime {
	position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #410097;
  z-index: 9999;
}
.op-bg {
	width: 90vw;
	height: 90vw;
	position: absolute;
	inset: 0;
	margin: auto;
	opacity: 0;
	animation: bgRotate 90s linear infinite, shadowColor 1.5s ease-in-out infinite alternate, circleOpacity 1s ease-in forwards;
}
.op-bg::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	/* 画像で型抜き */
	-webkit-mask-image: url('../img/movie_bg.svg');
	-webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url('../img/movie_bg.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;

  animation: circleColor 2s ease-in-out infinite alternate;
}
/* 魔法陣の色変更 */
@keyframes circleColor {
	0% {
		background-color: var(--mainColor);
	} 
	100% {
		background-color: #ae00ff;
	}
}
/* 不透明度変更 */
@keyframes circleOpacity {
	0% {
		opacity: 0;
	} 
	100% {
		opacity: 1;
	}
}
/* ドロップシャドウ */
@keyframes shadowColor {
	0% {
		filter: drop-shadow(0 0 20px rgba(109, 0, 252, .8));
	} 
	100% {
		filter: drop-shadow(0 0 30px rgba(174, 0, 255, 1.0));
	}
}

#op-anime .loading-logo {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
}
@media (max-width: 890px) {
	.op-bg {
		width: min(160vw, 1000px);
		height: min(160vw, 1000px);
		inset: auto;
		top: 50%;
		left: 50%;
		margin-top: max(-80vw, -500px);
		margin-left: max(-80vw, -495px);
	}
}
/*---------------------------
  固定バナー
-------------------------------*/
.js-fixed-banner {
	max-width: 160px;
	position: fixed;
	bottom: 30px;
	left: 20px;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
}
@media (min-width: 891px) {
	.js-fixed-banner {
		z-index: 1000;
	}
}
@media screen and (max-width:767px){ 
	.js-fixed-banner {
		max-width: 100px;
		bottom: 30px;
		right: 10px;
	}
}
.js-fixed-banner img {
	animation: yuragi 3s ease-in-out infinite;
	filter: drop-shadow(rgba(255,65,103) 0 0 5px);
}
@keyframes yuragi {
	0% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0); }
}
.js-fixed-banner a:hover img {
	animation-play-state: paused;
}
.js-fixed-banner a:hover {
	opacity: 1;
}
/*-----------------------------
  TOP
-------------------------------*/
.l_container {
	position: relative;
	overflow: hidden;
}

.l_contents {
	min-height: 680px;
	padding-top: 150px;
	position: relative;
}
@media (max-width: 890px) {
	@keyframes bgAnime {
  from {
	      background-position: top left
	  }

	  to {
	      background-position: 245px -355px
	  }
	}
	.l_contents {
		padding: clamp(90px, 23vw, 150px) 0 0;
		min-height: calc(100vh - 500px);
	}
	.container {
		padding: 0 15px;
	}
}
.contents {
	width: 80%;
	max-width: 1000px;
	margin: auto;
}
.contents_head_ttl {
	color: var(--mainColor); 
	text-align: center;
	font-family: var(--headFont);
	font-size: clamp(3.2rem, 3.8vw, 7rem);
	font-weight: 400;
	line-height: 1.3;
}

.contents_head_story {
	text-align: center;
	margin: 2em auto 0;
}
@media (max-width: 890px) {
	.contents {
		width: 100%;
	}
	.contents_head_ttl {
		font-size: clamp(3.4rem, 8.2vw, 5rem);
		line-height: 1;
	}
}
.contents_head_story_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5em;
	height: 2.5em;
	text-align: center;
	font-family: var(--headFont);
	font-weight: 400;
	color: var(--mainColor);
	background-color: #fff;
	border: solid 1px var(--mainColor);
	transition: var(--speed);
	margin: 0 .2em;
	position: relative;
}
.contents_head_story_btn:first-of-type {
	width: 9.5em;
}
.contents_head_story_btn.is_current::after {
	content: '';
	display: inline-block;
	width: calc(100% - 5px);
	height: calc(100% - 5px);
	border: solid 1px #fff;
	position: absolute;
	inset: 0;
	margin: auto;
}

@media (max-width: 890px) {
	.contents_head_story {
		width: 80vw;
		display: flex;
		flex-wrap: wrap;
		margin-top: 2.2em;
	}
	.contents_head_story_btn:not(:first-of-type) {
		width: calc((80vw - (.8em * 6)) / 6);
		height: calc((80vw - (.8em * 6)) / 6);
		margin: 1.3em .4em 0;
	}
	.contents_head_story_btn:first-of-type {
		width: 100%;
		height: auto;
		padding: .8em 0;
	}
}
@media (min-width: 767px) and (max-width: 890px) {
	.contents_head_story {
		width: 80vw;
	}
}
.contents_head_story_btn.is_current {
	color: #fff;
	background-color: var(--mainColor);
}
.contents_head_story_btn:first-of-type.is_current {
	background-color: var(--mainColor);
}
.contents_head_story_btn.is_current .bg-fire {
	opacity: 1;
}
.contents_head_story_btn:not(.is_current) .bg-fire {
	opacity: 0;
}
.contents .contents_body {
	margin: 2em 0 0;
}
@media (max-width: 890px) {
.contents .contents_body {
		margin-top: 2.2em;
	}
}
/*-----------------------------------------------
 *  COMICSバナー / ページネーション
-------------------------------------------------*/
.contents_foot_bnr {
	width: 80%;
	max-width: 400px;
	margin: 2.5em auto 0;
	display: block;
}
.contents_foot_page {
		margin: 2.5em 0 0;
	}
@media (max-width: 890px) {
	.contents_foot_bnr {
		width: 85%;
		margin: 2.2em auto 0;
	}
	.contents_foot_page {
		margin-top: 40px
	}
}
/*-----------------------------------------------
 *  MORE・BACKボタン
-------------------------------------------------*/
.l_morebtn {
	text-align: center;
	margin-top: 2em;
}
.contents_foot .l_morebtn {
	margin-top: 2.5em;
}
.morebtn {
	display: inline-block;
	color: #fff;
	transition: var(--speed);
	font-family: var(--headFont);
	font-weight: 400;
	font-size: 2.1rem;
	letter-spacing: .05em;
	background-color: var(--mainColor);
	padding: .5em 2.9em;
	position: relative;
}
.morebtn::after {
	content: '';
	display: inline-block;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	border: solid 1px #fff;
	position: absolute;
	inset: 0;
	margin: auto;
}
@media (min-width: 891px) {
	/*.hover-anime {
		background-image: linear-gradient(90deg, var(--accentColor1) 50%, var(--contentColor) 50%);
		background-position: 100%;
		background-size: 250%;
		transition: all .5s;
	}
	.hover-anime:hover {
		background-position: 0;
		opacity: 1;
	}*/
}
@media (max-width: 890px) {
	.morebtn {
		padding: .6em 3.5em;
	}
	.morebtn:active {
		opacity: .8;
	}
}
/* news記事内youtubeレスポンシブ */
.wp-block-embed-youtube .wp-block-embed__wrapper {
	width: 100%;
	padding: 56% 0 0;
	position: relative;
}
.wp-block-embed-youtube .wp-block-embed__wrapper >iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
/* ページネーション */
.l_pagination {
	text-align: center;
}
.pagination {
	display: inline-block;
	width: 2.5em;
	height: 2.5em;
	margin: 0 .5em;
}
.pagination >span, 
.pagination >a {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 400;
	font-family: var(--headFont);
	line-height: 1;
	color: var(--mainColor);
}
.pagination >span {
	color: #fff;
	background-color: var(--mainColor);
	position: relative;
}
.pagination >span::after {
	content: '';
	display: inline-block;
	width: 2em;
	height: 2em;
	border: solid 1px #fff;
	position: absolute;
	inset: 0;
	margin: auto;
}
.pagination > a {
	background-color: #fff;
	border: solid 2px var(--mainColor);
	transition: .3s opacity;
}
.pagination >a:hover {
	opacity: .6;
}
@media (min-width: 891px) {
	
}
@media (max-width: 890px) {
	
}

/*-----------------------------------------------
 *  MENU
-------------------------------------------------*/
.l_header {
	position: absolute;
	top: 15px;
	left: 0;
	right: 0;
	z-index: 998;
}
@media (min-width: 891px) {
	.l_header {
		width: clamp(200px,27.7vw, 450px);
		margin: auto;
	}
	.pin-spacer {
		pointer-events: none;
	}
	.pin-spacer a {
		pointer-events: auto;
	}
}
#top .l_header {
	display: none;
} 
.header .header_logo {
		width: 80px;
		margin: 10px 0 0 10px;
		display: block;
	}
.l_nav {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	transition: .3s opacity;
}
@media (min-width: 891px) {
	#top .l_nav {
		background-color: var(--contentColor);
		max-width: 440px;
		margin: 20px;
	}
	#top .l_nav::after {
		content: "";
		position: absolute;
		inset: 10px;
		border: 3px solid var(--subColor);
		pointer-events: none;
	}
	#lower .l_nav {
		width: 100%;
		height: 100%;
		position: fixed;
		background-image: url(../img/grunge_r.webp),url(../img/menu_imp.webp),url(../img/bg.jpg);
		background-size: 730px, 680px, cover;
		background-repeat: no-repeat;
		background-position: left -39% top 56%, bottom right, top;
	}
	#lower .l_nav:not(.is_show) {
		opacity: 0;
		pointer-events: none;
	}
	#lower .l_nav .separator-anime.is-bottom {
		position: relative;
	}
	#lower .l_nav .nav {
		max-width: 850px;
		padding: 100px 0;
		margin: auto;
	}
	#lower .nav_logo {
		max-width: 550px;
		margin: 0 auto 5em;
	}
	#lower .nav .nav_links {
		margin-bottom: 0;
	}
}
@media (max-width: 890px) {
	.l_header .header {
		text-align: center;
	}
	.logo {
		display: inline-block;
		width: max(51.3vw, 190px);
	}
	.l_nav {
		width: 100vw;
		height: 100vh;
		position: fixed;
		overflow-y: scroll;
		overflow-x: hidden;
		background-image: url(../img/grunge_r.webp),url(../img/menu_imp.webp),url(../img/bg.jpg);
		background-size: 82vw, 310px, cover;
    background-repeat: no-repeat;
    background-position: left -200% top -57%, bottom right, top;
	}
	/* スクロールバー分のpadding消したい */
	.l_nav::-webkit-scrollbar {
		display: none;
	}


	.l_nav:not(.is_show) {
		opacity: 0;
		pointer-events: none;
	}
	.l_nav .separator-anime.is-bottom {
		position: relative;
	}
}
.nav {
	margin: 30px 0 0;
}
#top .nav .nav_logo > a {
	display: block;
	width: 400px;
	margin: 0 auto .8em;
}
@media (min-width: 891px) {
	.nav .nav_logo >a:hover {
		opacity: .6;
	}
}
@media (max-width: 890px) {
	.nav { 
		min-height: calc(100vh - 130px);
		margin-top: 80px;
	}
	.nav_logo {
		text-align: center;
	}
	.nav .nav_logo >a,
	#top .nav .nav_logo >a {
		display: inline-block;
		width: min(77vw, 300px);
	}

	.nav .nav_logo >a:active {
		opacity: .6;
	}
}
@media (min-width: 891px) {
	.nav .nav_links {
		margin-bottom: 2.5em;
	}
}
@media (max-width: 890px) {
.nav .nav_links {
		margin: 1em 0 2.5em;
	}
}
.l_gnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
}
.l_gnav > li {
	width: 9em;
}
@media (min-width: 891px) {
	#top .l_gnav {
		font-size: 1.8rem;
		gap: 10px 15px;
	}
	#lower .l_gnav {
		gap: 1em 7em;
	}
	/* 奇数の時に空の箱を出力 */
	.l_gnav:has(> li:nth-of-type(odd):last-child)::after {
		content: "";
		display: block;
		width: 9em;
		height: 0;
	}
	#lower .l_gnav:has(> li:nth-of-type(odd):last-child)::after {
		font-size: 3.2rem;
	}
}
@media (max-width: 890px) {
	.l_gnav {
		display: block;
		text-align: center;
	}
	.l_gnav >li {
		width: 100%;
	}
}
.l_gnav >li.is_disable {
			opacity: .6;
			pointer-events: none;
		}
.l_gnav >li.is_none {
			display: none;
		}
.l_gnav >li.is_current {
			pointer-events: none;
		}
.l_gnav >li.is_current >a::before {
					opacity: 1;
				}
@media (min-width: 891px) {
	.l_gnav >li.is_current >a {
		color: #FFF100
	}
	#lower .l_gnav >li {
		font-size: 3.2rem;
	}
}
@media (max-width: 890px) {
	.l_gnav >li.is_current >a {
		color: #F03CA0
	}
}
.l_gnav >li >a {
	position: relative;
	font-family: var(--headFont);
	font-weight: 400;
	line-height: 1;
	color: var(--txtColor);
	transition: .3s color;
}
/*.l_gnav >li.outside >a {
	padding-right: 1em;
	display: inline-flex;
  flex-direction: column;
}
.l_gnav >li.outside >a::after {
	content: "";
	display: inline-block;
	width: .8em;
	height: .6em;
	background-image: url(../img/icon_outside.svg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
  right: 0;
  top: .15em;
}*/
.l_gnav >li >a:hover {
	background-position: 0;
}
.l_gnav > li:has(a[href*="#"]) {
	display: none;
}
.l_gnav >li >a[href*="#"] {
	background: none;
	pointer-events: none;
	opacity: .5;
} 

@media (min-width: 891px) {
	.l_gnav >li >a {
	  transition: all .5s;
	}
}
@media (max-width: 890px) {
	.l_gnav >li >a {
		display: block;
		font-size: min(6.1vw, 24px);
		padding: .5em 0;
	}
	.l_gnav >li >a:active {
		opacity: .7;
	}
}
.l_nabbtn {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 1000;
}
@media (min-width: 891px) {
	.l_nabbtn {
		top: 20px;
		right: 20px;
	}
}
.nabbtn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: max(14.3vw, 56px);
	height: max(14.3vw, 56px);
	position: relative;
}
@media (min-width: 767px) and (max-width: 890px) {
	.nabbtn {
		width: 90px;
		height: 90px;
	}
}
.nabbtn img {
	filter: drop-shadow(0 0 5px var(--mainColor));
	position: absolute;
	top: 0;
	z-index: -1;
}
.nabbtn .cross {
	
}
.nabbtn span {
	display: block;
	width: 20px;
	height: 3px;
	background-color: var(--mainColor);
	border-radius: 90px;
	margin: 1.5vw auto;
	transition: var(--speed);
}
@media (min-width: 891px) {
	#top .l_nabbtn {
		display: none
	}
	.nabbtn {
		width: 90px;
		height: 90px;
	}
	.nabbtn span {
		width: 26px;
		height: 5px;
		margin: 5px auto;
	}
	/*.nabbtn .cross {
		margin-top: 2.5em;
	}*/
}
.nabbtn.is_close .cross {
	margin-top: .5em;
}
.nabbtn.is_close span:nth-of-type(1),
.nabbtn.is_close span:nth-of-type(2) {
	position: absolute;
	inset: 0;
	margin: auto;
}
.nabbtn.is_close span:nth-of-type(1) {
	transform: rotate(45deg);
}
.nabbtn.is_close span:nth-of-type(2) {
	transform: rotate(-45deg);
}
/*-----------------------------------------------
 *  FOOTER
-------------------------------------------------*/
.l_footer {
	margin-top: 5em;
	position: relative;
}
@media (max-width: 890px) {
	.l_footer {
		margin-top: 7em;
	}
}
.footer {
	background-color: var(--subColor);
	padding: 3em 0 2em;
	margin: auto;
	position: relative;
	z-index: 1;
}
.footer_totop {
	width: 250px;
	position: absolute;
	right: 0;
	/*transition: var(--speed);*/
}
.footer_totop img {
	transition: var(--speed);
}
.footer_totop img:last-of-type {
	opacity: 0;
	position: absolute;
	top: 0;
}
.footer_totop:hover {
	opacity: 1;
}
.footer_totop:hover img:first-of-type {
	opacity: 0;
}
.footer_totop:hover img:last-of-type {
	opacity: 1;
}
@media (max-width: 890px) {
	.footer_totop {
		width: 170px;
		right: -30px;
	}
}
@media (min-width: 891px) {
	.footer_main_bnr {
		display: flex;
		justify-content: center;
		gap: 3em;
		margin-bottom: 2em;
	}
}
.footer_main_bnr li {
	max-width: 260px;
}
@media (max-width: 890px) {
	.footer_main_bnr {
		margin-bottom: 3em;
	}
	.footer_main_bnr li {
		margin: 0 auto 20px;
	}
	.footer_main_bnr li:last-of-type {
		margin-bottom: 0;
	}
}
.footer_main_sns ul {
	display: flex;
	justify-content: center;
	/*align-items: center; */
	gap: 20px;
}
.footer_main_sns li {
	max-width: 30px;
}
.footer_main_sns img {
	width: 30px;
}
.footer_main_sns p {
	font-size: 2.1rem;
	font-family: var(--headFont);
	font-weight: 400;
	text-align: center;
	color: #3a2700;
	margin-bottom: .5em;
}
.footer_main_sns li >a[href*="x.com"] {
	display: inline-block;
	width: 26px;
}

@media (max-width: 890px) {
	.footer_main_sns {
		display: flex;
		justify-content: center;
		margin: 30px 0 0;
		gap: 1.5em;
	}
	.footer_main_sns p {
		font-size: 1.9rem;
	}
}
.footer_copy {
	font-size: .9em;
	margin: 1.2em 0 0;
	text-align: center;
	color: #3a2700;
}
@media (max-width: 890px) {
	.footer_copy {
		margin: 30px 0 0;
	}
}
/*-----------------------------------------------
 *  MODAL
-------------------------------------------------*/
.l_modal {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
  background: #410097;
	z-index: 9998;
	transition: var(--speed);
	overflow: hidden;
}
.l_modal:not(.is_show) {
		opacity: 0;
		pointer-events: none;
	}
.modal {
	width: 100%;
	max-width: 800px;
	position: relative;
}
.modal .modal_inner {
	position: relative;
}
.modal .modal_close {
	position: absolute;
}
@media (min-width: 891px) {
	.modal .modal_close {
		top: 0;
		right: -80px;
	}
}
@media (max-width: 890px) {
	.l_modal {
		background-size: 50%;
	}
	.modal .modal_close {
		bottom: max(-20.5vw, -80px);/* マイナス値の場合はmin,maxが逆転 */
		right: 0;
		left: 0;
		display: flex;
		justify-content: center;
	}
}
.closebtn {
	width: 50px;
	transition: var(--speed);
}
@media (max-width: 890px) {
	.closebtn {
		width: min(12.8vw, 50px);
	}
}
@media (min-width: 737px) {
	.closebtn:hover {
		opacity: .4;
	}
	.closebtn:active {
		opacity: .4;
	}
}
.modal:has(.js-youtube-inner) {
	width: calc(100vw - 250px);
	max-width: 900px;
}
@media (max-width: 890px) {
	.modal:has(.js-youtube-inner) {
		width: min(90vw, 600px);
	}
}
.js-youtube-inner {
	padding-top: 56.25%;
	position: relative;
	width: 100%;
}
.youtube-iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

/*-----------------------------------------------
 *  TOP 
-------------------------------------------------*/
/* キービジュアル */
@media (min-width: 891px) {
	.l_hero {
		background-color: var(--subColor);
		padding: 0 0 0 480px;
	}
}
@media (max-width: 890px) {
	.l_hero {
		margin-bottom: min(7.7vw, 30px);
	}
	.hero_slide {
		margin-right: -15px;
		margin-left: -15px;
		margin-bottom: min(3.8vw, 20px);
	}
	.kv-logo {
		width: 90%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 25px;
		margin: auto;
		z-index: 1;
	}
}
.hero_slide {
	position: relative;
}

.hero_slide .slick-dotted {
	position: relative;
}
.hero_slide .slick-dots {
	position: absolute;
	top: 30px;
	right: 30px;
}
.hero_slide .slick-dots li {
	width: 80px;
	border: solid 2px var(--txtColor);
	background-color: var(--accentColor1);
	margin-bottom: 20px;
	cursor: pointer;
	transition: var(--speed);
	overflow: hidden;
}
.hero_slide .slick-dots .slick-active {
	border-color: var(--accentColor1);
	position: relative;
}
.hero_slide .slick-dots .slick-active::after {
	position: absolute;
	content: '';
	display: inline-block;
	width: 72px;
	height: 72px;
	border: solid 1px var(--accentColor1);
	inset: 0;
	margin: auto;
}


@media (max-width: 890px) {
	.hero_slide .slick-dots {
		top: 10px;
		right: auto;
		left: 10px;
	}
	.hero_slide .slick-dots li {
		width: max(11.5vw, 45px);
		margin-bottom: 10px;
	}
	.hero_slide .slick-dots .slick-active::after {
		width: 90%;
		height: 90%;
	}
}
.hero_slide .slick-dots li.slick-active {
	cursor: default;
}
.hero_slide .slick-dots img {
	transition: var(--speed);
}
.slick-dots li.slick-active img {
	opacity: .7;
}
.slick-dots li:not(.slick-active):hover img {
	transform: scale(1.1);
}
@media (min-width: 891px) {
	.hero {
		display: flex;
	}
	.hero_slide {
		/* 親要素からonair分を引く */
		/*width: calc(100% - 200px);*/
		width: 100%;
	}
	/* キービジュが1枚の場合、横幅を変更 */
	/*.kv-single {
		width: calc(100% - 170px);
	}
	/* キービジュが1枚の場合、スライダーの横幅が足りないためwidthを設定 */
	/*.kv-single .slick-slider {
		width: calc(100% - 170px);
	}*/
}
/* キービジュが1枚の場合はpc spともにスライダードットを非表示 */
.kv-single .slick-dots {
	display: none;
}

@media (min-width: 891px) {
	.hero_line {
		
	}
}
.onair-txt {
	font-weight: 400;
	font-family: var(--headFont);
	line-height: 1.2;
	color: var(--mainColor);
	text-align: center;
}
.onair-txt .small {
	font-size: .75em;
}
.onair-txt span:last-of-type {
	position: relative;
}
.onair-txt span:last-of-type::before,
.onair-txt span:last-of-type::after,
#top h2 span::before,
#top h2 span::after,
.contents_head_ttl span::before,
.contents_head_ttl span::after,
.head-deco span::before,
.head-deco span::after {
  content: '';
  display: inline-block;
  width: .9em;
  height: .75em;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: .4em;
}
.onair-txt span:last-of-type::before,
#top h2 span::before,
.contents_head_ttl span::before,
.head-deco span::before {
	background-image: url(../img/head_deco_l.svg);
	left: -1.1em;
}
.onair-txt span:last-of-type::after,
#top h2 span::after,
.contents_head_ttl span::after,
.head-deco span::after {
	background-image: url(../img/head_deco_r.svg);
	right: -1.1em;
}

@media (min-width: 891px) {
	.onair-txt {
		font-size: 5rem;
		margin-bottom: .8em;
	}
	.onair-txt .em {
		display: inline-block;
		line-height: 1.2;
		padding: .2em 0;
	}

}
@media (max-width: 890px) {
	.onair-txt {
		font-size: 10.2vw;
		text-align: center;
	}
}
.x-banner,
.fv-banner {
	max-width: 380px;
	margin: 0 auto .8em;
}
.fv-banner {
	margin-bottom: 2.2em;
}
@media (min-width: 891px) {
	#top .l_nav div:last-of-type {
		margin-bottom: 2.2em;
	}
}
@media (max-width: 890px) {
	.x-banner {
		width: 90%;
		margin-top: min(3.8vw, 20px);
	}
}
/* MOVIE */
.l_topmov {
	position: relative;
	z-index: 1;
	background-color: #410097;
}
@media (max-width: 890px) {
	.l_topmov {
		margin: 0 -15px;
	}
}
.topmov {
	padding: 3.5em 0 4.5em;
	position: relative;
	overflow: hidden;
}
.topmov::after,
.l_modal::after {
	content: '';
	display: inline-block;
	width: 100vw;
	height: 100vw;
	background-size: 90%;
	background-image: url(../img/movie_bg.svg);
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	z-index: -1;
	inset: 0;
	margin: auto;
	animation: bgRotate 180s linear infinite;
}
@keyframes bgRotate {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(-360deg);
	}
}

@media (max-width: 890px) {
	.topmov {
		padding: min(8vw, 30px) 0;
	}
}

#top h2 {
	color: var(--mainColor); 
	font-family: var(--headFont);
	font-size: clamp(3.2rem, 3.8vw, 7rem);
	font-weight: 400;
	text-align: center;
	line-height: 1.3;
}
@media (max-width: 890px) {
#top h2 {
		font-size: clamp(3.4rem, 8.2vw, 5rem);
		line-height: 1;
	}
}
#top h2 span,
.contents_head_ttl span,
.head-deco span {
	position: relative;
}
#top .topmov_head_ttl {
	color: #fff;
}
#top .topmov_head_ttl span::before {
	background-image: url(../img/mv_deco_l.svg);
}
#top .topmov_head_ttl span::after {
	background-image: url(../img/mv_deco_r.svg);
}
.topmov_body {
	width: 80%;
	max-width: 720px;
	margin: 2.5em auto 0;
}
.mov-flex {
	max-width: 1000px;
	display: flex;
	gap: 1.2em;
}
.topmov_body_mov {
	display: block;
	position: relative;
	overflow: hidden;
}
@media (max-width: 890px) {
	.topmov_body {
		width: 100vw;
		margin-top: 1.3em;
	}
	.topmov_body a {
		width: 86%;
		margin: auto;
	}
}
.topmov_body_mov:hover {
	opacity: 1;
}
.topmov_body_mov::after {
	content: '';
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border: solid 2px #fff;
	position: absolute;
	inset: 0;
	margin: auto;
	z-index: 1;
}
.topmov_body_mov:not(.is_play)::before {
	width: 100%;
	height: 100%;
	position: absolute;
	right: 50%;
	bottom: 50%;
	transform: translate(50%, 50%);
	content: '';
	background-color: var(--accentColor1);
	opacity: .3;
	z-index: 1;
}
.play-btn {
	width: 150px;
  height: 150px;
	position: absolute;
	inset: 0;
	margin: auto;
	display: flex;
	justify-content: center;
	transition: var(--speed);
	z-index: 1;
}
.js_movmodal > img {
	transition: var(--speed);
}
.js_movmodal:hover > img {
	transform: scale(1.1);
}
#js_topmov {
  position: relative;
  filter: drop-shadow(var(--accentColor1) 0 0 10px);
}
#js_topmov .btn-inner {
	width: 81px;
	position: absolute;
	inset: 0 0 0 25px;
	margin: auto;
}
@media (max-width: 890px) {
	.topmov_body_mov::after {
		width: 95%;
		height: 92%;
	}
	.play-btn {
		width: 80px;
		height: 80px;
	}
	#js_topmov .btn-inner {
		width: 43px;
		inset: 0 0 0 12px;
	}
	.mov-flex {
		width: auto;
		overflow-x: scroll;
		display: inline-flex;
		gap: 10px;
		padding-left: 15px;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x pan-y;
	}
	.mov-flex::-webkit-scrollbar{
		display: none;
	}
	.mov-flex .topmov_body_mov {
		flex-shrink: 0; /* flexで縮むの防止 */
	}
	.mov-flex .topmov_body_mov:nth-of-type(2) {
		margin-right: 15px;
	}
	.topmov::after {
		background-size: 105%;
	}
	.l_modal::after {
		width: 180vw;
		height: 180vw;
		inset: auto;
	}
}

.l_topinfo {
	width: 80%;
	max-width: 1000px;
	margin: 3.5em auto 0;
}
@media (max-width: 890px) {
	.l_topinfo {
		width: min(100%, 600px);
		margin: 0 auto 1.5em;
	}
	.topinfo {
		padding: min(8vw, 30px) 0 0;
	}
}
.topinfo_body {
	margin-top: 2em;
}
.news-lists {
	display: flex;
	gap: 1.5rem;
}
#lower .news-lists {
	flex-wrap: wrap;
	gap: 1.5rem;
}
.news-item {
	width: calc((100% - 3rem) / 3);
}
.news-item > a {
	display: block;
	color: var(--txtColor);
}
.news-thumb {
	overflow: hidden;
	border: solid 3px var(--txtColor);
	position: relative;
}
.news-thumb::after {
	content: '';
	display: inline-block;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	border: solid 1px var(--txtColor);
	position: absolute;
	inset: 0;
	margin: auto;
}
.news-thumb img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: var(--speed);
}
.news-item > a:hover img {
	transform: scale(1.1);
}
.news-inner {
	padding: .5em .7em;
}
.news_inner_date {
	display: inline-block;
	font-size: .9em;
}
@media (min-width: 891px) {
	.topnews:hover {
		opacity: .6;
	}
}
@media (max-width: 890px) {
	.topinfo_body {
		overflow-x: scroll;
		margin-right: -15px;
		margin-left: -15px;
		-webkit-overflow-scrolling: touch; /* iosでスムーズに横スクロールさせる */
		touch-action: pan-x pan-y;
	}
	.topinfo_body::-webkit-scrollbar {
		display: none;
	}
	.topinfo_body .news-lists {
		padding: 0 15px;
		-webkit-overflow-scrolling: touch; /* iosでスムーズに横スクロールさせる */
		touch-action: pan-x pan-y;
	}
	.topinfo_body .news-item {
		width: 250px;
	}
	.news-lists {
		display: inline-flex;
		gap: 10px;
	}
	#lower .news-lists {
		gap: 1.2rem;
	}
	.news-item {
		width: calc((100% - 1.2rem) / 2);
	}
	.news-inner {
		padding: .5em;
	}
}
@media (min-width: 769px) and (max-width: 890px) {
	.l_topinfo {
		width: 100%;
	}
	.topinfo_body {
		margin-right: auto;
		margin-left: auto;
	}
}
/*-----------------------------------------------
 *  NEWS詳細
-------------------------------------------------*/
/* 共通設定 */
.common-bg {
	background-color: #fff;
	padding: 2.5em 3em;
	border: solid 5px var(--txtColor);
	position: relative;
}
.common-bg::after {
	content: '';
	display: inline-block;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	border: solid 3px var(--txtColor);
	position: absolute;
	inset: 0;
	margin: auto;
	pointer-events: none;
}
.common_body {
	line-height: 1.6;
}
.common_body .wp-block-image,
.common_body .wp-block-embed-youtube,
.common_body .wp-block-embed-twitter {
	margin-bottom: 2em;
}
.common_body a {
	text-decoration: underline;
}
@media (max-width: 890px) {
	.common-bg {
		padding: 1.4em 1.1em;
		border-width: 4px;
	}
	.common-bg::after {
		border-width: 2px;
	}
}
/*-----------------------------------------------
 *  COMICS 
-------------------------------------------------*/
.comics_body h3 {
	font-size: 3.6rem;
	text-align: center;
	letter-spacing: .05em;
	margin-bottom: 1.3em;
}
.comics_body h3 mark {
	padding: 0 1em .1em;
}
.comic-img {
	width: 50%;
}
.comics_body h4 {
	font-size: 3.6rem;
	margin-bottom: .2em;
}
.comics_body h4 + p {
	font-size: 2.1rem;
	margin-bottom: 1.5em;
}
.comics_body h4 + p + p {
	line-height: 1.7;
}
.comics_body .comic-bnr {
	margin-top: 3.8em;
}
@media (min-width: 891px) {
	.comics_body .is-layout-flex {
		gap: 3em;
	}
}
@media (max-width: 890px) {
	.comics_body h3,
	.comics_body h4 {
		font-size: min(6.6vw, 3.2rem);
		letter-spacing: 0;
	}
	.comics_body h3 mark {
		padding: 0 .6em .05em;
	}
	.comics_body .comic-img {
		max-width: 500px;
		margin: auto;
	}
	.comics_body .comic-bnr {
		margin-top: 1.5em;
		margin-bottom: 1.5em;
	}
}
/*-----------------------------------------------
 *  ON AIR 
-------------------------------------------------*/
#lower .onair-txt {
	color: var(--accentColor1);
}
#lower .onair-txt span:last-of-type {
	position: static;	
}
#lower .onair-txt span:last-of-type::before,
#lower .onair-txt span:last-of-type::after {
	display: none;
}
@media (min-width: 891px) {
}
@media (max-width: 890px) {
	#lower .onair-txt {
		margin-bottom: .8em;
	}
	#lower .onair-txt span:last-of-type {
		display: block;
	}
}
.deregula {
	max-width: 720px;
	text-align: center;
	background-color: var(--subColor);
	padding: 1.2em;
	margin: 0 auto 4em;
	position: relative;
}
.deregula::after {
	content: '';
	display: inline-block;
	width: calc(100% - 15px);
	height: calc(100% - 15px);
	border: solid 3px #fff;
	position: absolute;
	inset: 0;
	margin: auto;
}
.deregula h3,
.deregula-lists,
.deregula-caution {
	position: relative;
	z-index: 1;
}
.deregula h3 {
	color: #fff;
}
.deregula-lists {
	display: flex;
	max-width: 510px;
	margin: .7em auto;
}
.deregula-item {
	width: 100%;
	font-size: 1.8rem;
	background-color: #fff;
	overflow: hidden;
}
@media (min-width: 891px) {
	.deregula-item {
		margin-right: 10px;
	}
	.deregula-item:last-of-type {
		margin-right: 0;
	}
}
.deregula-item dt {
	color: #fff;
	background-color: var(--mainColor);
	padding: 0.4em .1em;
}
.deregula-item dd {
	padding: .7em .1em;
}
.deregula-item dd p:first-of-type {
	margin-bottom: .3em;
}
.deregula-item dd span:not(.deregula-em):not(.deregula-width) {
	display: inline-block;
	font-size: .9em;
	opacity: .6;
	margin-right: .5em;
}
.deregula-em {
	color: var(--mainColor);
}
.deregula-caution {
	max-width: 620px;
	font-size: .8em;
	font-weight: 400;
	color: #fff;
	text-align: left;
	margin: 0 auto .5em;
}
.three-version .deregula-lists {
	max-width: 620px;
}
.three-version .deregula-width {
	display: inline-block;
	width: 6em;
	text-align: left;
}
@media (max-width: 890px) {
	.deregula {
		margin: 0 auto 2.9em;
	}
	.deregula-lists {
		flex-wrap: wrap;
		margin-top: .8em;
	}
	.deregula-item {
		display: flex;
		font-size: 1.5rem;
		margin-bottom: .6em;
	}
	.deregula-item:last-of-type {
		margin-bottom: 0;
	}
	.deregula-item dt {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 9em;
	}
	.deregula-item dd {
		padding: .5em 1.1em;
	}
}
.onair h3 {
	font-weight: 400;
  font-family: var(--headFont);
  line-height: 1.5;
  text-align: center;
	font-size: 3.6rem;
} 
.onair_body {
	max-width: 900px;
	margin: 0 auto 4.5em;
}

.onair_body_broadcast {
	margin: 5em 0 0;
}
.l_tv,
.l_broadcast {
	background-color: #fff;
	padding: 1.5em 3em;
}
.l_broadcast {
	padding: .5em 3em;
}
@media (max-width: 890px) {
	.onair_body_broadcast {
		margin: 2.9em 0 0;
	}
	.l_tv,
	.l_broadcast {
		padding: 0.5em 1.1em;
	}
}
.tv_head,
.broadcast_head {
	color: var(--mainColor);
	margin-bottom: .5em;
}
.broadcast_body {
	padding: 1.8em 0;
	border-bottom: solid 2px var(--subColor);
}
.tv_body div {
	padding: .9em 0;
	border-bottom: solid 2px var(--subColor);
}
.tv_body div:last-of-type,
.broadcast_body:last-of-type {
	border-bottom: none;
}
.tv_body dt {
	font-weight: 900;
}
.broadcast_body_ttl {
	display: inline-block;
	font-size: 2.1rem;
	font-weight: 700;
	color: #fff;
	background-color: var(--mainColor);
	padding: .1em .8em;
	margin-bottom: .6em;
}
.broadcast_body_ttl.em {
	background-image: linear-gradient(to right, var(--mainColor), var(--accentColor1));
}
.broadcast_body p {
	margin-bottom: 1em;
}
.broadcast-head {
	font-size: 1.8rem;
	color: var(--mainColor);
	font-weight: 700;
}
.broadcast_body .broadcast-head {
	margin-bottom: .4em;
}
.broadcast_body p.em {
	font-size: 2.1rem;
	color: var(--accentColor1);
	font-weight: 900;
	margin-bottom: .4em;
}
.broadcast-lists {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .7em;
} 
.broadcast-btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	color: var(--txtColor);
	text-align: center;
	padding: .6em .5em;
	border: solid 2px var(--txtColor);
	transition: var(--speed);
}
.broadcast-lists + p {
	margin-top: 1.3em;
}
.karaoke-inner {
	background-color: rgba(253, 55, 177, .05);
	padding: 0 2em;
	border: solid 2px var(--mainColor);
	border-radius: 20px;
}
.karaoke-lists div {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 1em 0;
}
.karaoke-lists div:first-of-type {
	border-bottom: dotted 2px var(--mainColor);
}
.karaoke-lists dt {
	width: 30%;
}
.karaoke-lists dd {
	font-family: var(--mainFont);
}
.karaoke-lists a {
	color: var(--mainColor);
	padding-right: .9em;
	position: relative;
}
@media (min-width: 891px) {
	.tv_body div {
		display: flex;
	}
	.tv_body dt {
		width: 30%;
	}
	.broadcast-btn a:hover {
		opacity: 1;
		background-color: var(--subColor);
	}
}
@media (max-width: 890px) {
	.broadcast_body {
		padding: 1.4em 0;
	}
	.broadcast-lists {
		grid-template-columns: repeat(2, 1fr);
	}
	.broadcast-btn a:active {
		opacity: 1;
		background-color: var(--subColor);
	}
	.karaoke-lists {
		grid-template-columns: repeat(1, 1fr);
	}
	.karaoke-lists dt {
		width: 40%;
	}
	.musicdata_youtube .head-deco {
		display: flex;
	  align-items: flex-start;
	  justify-content: center;
	  line-height: 1;
	}
	.musicdata_youtube .head-deco span {
		padding: 0 .2em;
	}
}

/*-----------------------------------------------
 *  STAFF&CAST
-------------------------------------------------*/
.l_staffcast {
	max-width: 900px;
	margin: 0 auto;
}
/*.staffcast_inner:nth-of-type(2) {
	margin-top: 5em;
}*/
.staffcast_inner + .staffcast_inner {
	margin-top: 5em;
}
.staffcast_inner_ttl {
  color: var(--mainColor);
  font-family: var(--headFont);
  font-size: 3.6rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-align: center;
  margin-bottom: .5em;
}
.deregula-premium {
	margin-top: 3em;
}
.cast-ttl {
	display: inline-block;
	font-size: 2.1rem;
	color: #fff;
	background-color: var(--subColor);
	padding: 0 .5em;
	margin-bottom: 1em;
}
.l_cast {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5em .6em;
}
.cast {
	text-align: center;
}
.cast_chara {
	color: var(--mainColor);
	line-height: 1.4;
}
.cast_name_txt, 
.cast_name_btn {
	display: inline-block;
	vertical-align: middle;
}
.cast_name_txt {
	font-size: min(5vw, 2.1rem);
}
.cast_name_txt:has(+ .cast_name_btn) {
	padding: 0 .2em 0 calc(25px + .2em);
}
.cast_name_txt br,
.comment_head_name br {
	display: none;
}
.cast_name_btn {
	width: 1.6em;
	height: 1.6em;
}
.cast-description {
	font-size: .8em;
}
@media (max-width: 890px) {
	.staffcast_inner + .staffcast_inner {
		margin-top: 2.9em;
	}
	.l_cast {
		grid-template-columns: repeat(1, 1fr);
		padding: .5em 0;
	}
	.cast_name_btn::after {
		top: 1.5em;
		left: .4em;
	}
}
.cast .cast_comment {
	display: none;
}

.l_comment {
	margin: auto;
	padding: 3.1em 3.8em;
	background-color: #fff;
}
.comment_head_name.pc-staff-br br {
	display: block;
}
.comment-img {
	position: relative;
	z-index: 0;
	padding: 2px;
	border-radius: 20px;
}
.comment-img::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(135deg, var(--subColor), var(--mainColor));
	border-radius: inherit;
}
.comment-img img {
	border-radius: 18px;
}
.comment_head {
	border-bottom: solid 2px var(--subColor);
	padding-bottom: 1em;
	margin-bottom: 1.5em;
}
.comment_head .cast-description {
	font-size: 1em;
	margin-top: .4em;
}
@media (min-width: 891px) {
	.comment {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.comment-img {
		width: calc(45% - 3.1em);
	}
	.comment-r-content {
		width: 100%; /* 画像がない場合は横いっぱいに表示 */
	}
	.comment-img + .comment-r-content {
		width: 55%;
	}
}
.comment_head_chara {
	font-size: 2.1rem;
	color: var(--mainColor);
}
.comment_head_name {
	font-size: clamp(32px, 7vw, 40px);
}
.comment_body_txt {
	max-height: 350px;
	overflow-y: scroll;
	line-height: 1.8;
}
@media (max-width: 890px) {
	.modal:has(.cast_comment) {
		height: 100vh;
		overflow: scroll;
	}
	.cast_comment {
		padding: 4.5em 0 2em;
	}
	.modal_inner:has(.cast_comment) + .modal_close {
		position: static;
	}
	.l_comment {
		width: min(92vw, 600px);
		padding: 2em 1.1em 3em;
	}
	.comment_head_name br {
		display: block;
	}
	.comment-img {
		border-radius: 15px;
		margin: 0 1.8em 1.5em;
	}
	.comment-img img {
		border-radius: 13px;
	}
	.comment_body_txt {
		max-height: 100%;
		overflow-y: auto;
	}
	.comment_head {
		padding: 0 1.8em 1.5em;
		margin-bottom: 1.5em;
	}
}
.l_modal:has(.cast_comment) {
	background: url(../img/grunge_r.webp), url(../img/grunge_r.webp), url(../img/bg.jpg);
	background-size: 730px, 730px, cover;
	background-repeat: no-repeat;
	background-position: left -39% top 56%, bottom 210% right -40%, top;
}
@media (max-width: 890px) {
	.l_modal:has(.cast_comment) {
		background-size: 82vw, 85vw, cover;
		background-position: left -90% top -30%, bottom -210% right -180%, top;
	}
}
.l_modal:has(.cast_comment)::after {
	display: none;
}
.modal:has(.cast_comment) {
	max-width: 900px;
	z-index: 1;
}
/*-----------------------------------------------
 *  Blu-ray&DVD
-------------------------------------------------*/
/* タブ切り替え */
.disc-tab {
	display: flex;
	justify-content: center;
	margin-top: 2.5em;
}
.disc-tab a {
	display: inline-block;
	width: 120px;
	color: var(--mainColor);
	text-align: center;
	background-color: #fff;
	padding: .5em;
	border: solid 1px var(--mainColor);
	transition: var(--speed);
}
.disc-tab .active {
	color: #fff;
	background-color: var(--mainColor);
	position: relative;
}
.disc-tab li + li {
	margin-left: .6em;
}
@media (min-width: 891px) {
	
}
.box {
	display: none;
}
.box.active {
	display: block;
	animation: show .9s ease-in-out forwards;
}
@keyframes show {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.disc + .disc {
	margin-top: 2.5em;
}
.disc .inner_type {
	letter-spacing: .05em;
	min-width: 5em;
	text-align: center;
}
.disc .common-detail {
	margin-bottom: 0;
}
.l-buybtn,
.disc-inner-img {
	margin-bottom: 1.3em;
}
.buybtn {
	display: inline-block;
	color: #fff;
	font-size: 1.8rem;
	background-color: var(--mainColor);
	padding: .7em 2em;
	position: relative;
}
.buybtn::after,
.disc-tab .active::after {
	content: '';
	display: inline-block;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	border: solid 1px #fff;
	position: absolute;
	inset: 0;
	margin: auto;
}
.disc-tab .active::after {
	width: calc(100% - 4px);
	height: calc(100% - 4px);
}
/* 店舗特典 */
.bddvd_body_bonus {
	text-align: center;
}
.bddvd_body_bonus + .bddvd_body_bonus {
	margin-top: 4.5em;
}
.bonus-cat-ttl {
 	/* 上下巻の特典があるときのみ */
 	font-weight: 400;
  font-family: var(--headFont);
  color: var(--mainColor);
  line-height: 1.5;
  text-align: center;
  font-size: 3.6rem;
 	margin-bottom: .5em;
}
.l_bonus {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em 1em;
}
.buytxt .bonus_head_ttl {
	padding-right: .9em;
	position: relative;
}
.buytxt .bonus_head_ttl::after,
.karaoke-lists a::after {
  content: "";
  display: inline-block;
  width: .7em;
  height: .6em;
  background-image: url(../img/icon_outside.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: .3em;
}
.bonus_head_ttl {
	max-width: 100%;
	display: inline-block;
	font-size: 2.1rem;
	color: var(--mainColor);
	font-weight: 900;
	margin-bottom: .5em;
}
.bonus-img {
	padding: 1em;
	border-width: 4px;
}
.bonus-img::after {
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	border-width: 2px;
}
.bonus-img,
.bonus_body {
	margin-bottom: 1.3em;
}
.bonus-img img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
.l_bonus .l-buybtn {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	margin-bottom: 1.9em;
}
@media (max-width: 890px) {
	.disc-tab a {
		width: 100px;
	}
	.bddvd_body_bonus + .bddvd_body_bonus {
		margin-top: 3.5em;
	}
	.disc_inner .l-buybtn {
		text-align: center;
	}
	.buybtn {
		padding: .6em 2em;
	}
	.l_bonus {
		grid-template-columns: repeat(2, 1fr);
		gap: .7em;
	}
	.bonus_head_ttl {
		margin: 0 -.7em 1.7em;
	}
	.bonus_head_ttl,
	.l_bonus .l-buybtn {
		margin-bottom: .7em;
	}
	.bonus-img,
	.bonus_body {
		margin-bottom: .7em;
	}
	.bonus-img {
		padding: .7em;
	}
	.bonus_body {
		text-align: left;
	}
}

/*-----------------------------------------------
 *  MUSIC
-------------------------------------------------*/
/* 共通見出し */
.common-head {
	border-bottom: solid 3px var(--subColor);
	padding-bottom: .6em;
	margin-bottom: 2em;
}
.inner_type {
	display: inline-block;
	font-size: .9em;
	line-height: 1;
	color: #fff;
	background-color: var(--mainColor);
	/*border-radius: 3px; */
	padding: .4em .6em;
	margin-bottom: .7em;
}
.inner_ttl {
	font-size: 2.4rem;
}

.musicdata + .musicdata {
	margin-top: 2.5em;
}
.common-detail,
.musicdata_broadcast {
	margin-bottom: 3em;
}
.music_ttl {
	color: var(--mainColor);
	font-size: 2.8rem;
	font-weight: 900;
	margin-bottom: .3em;
}
.music-artist {
	font-size: 2.1rem;
	margin-bottom: 1.3em;
}

.musicdata_inner_artist,
.disc_inner_date {
	display: flex;
	font-size: 1.8rem;
	color: var(--mainColor);
	margin-bottom: .6em;
}
.common-info dl div,
.musicdata_inner_txt {
	margin-bottom: 1.3em;
}
.common-info dt {
	color: var(--mainColor);
	margin-bottom: .2em;
}
.musicdata_inner_detail {
	margin-top: 1em;
}
.musicdata_inner_info {
	display: flex;
	margin-bottom: .6em!important;
}
.musicdata h4 {
	font-size: 3.6rem;
	font-weight: 400;
	font-family: var(--headFont);
	color: var(--mainColor);
	text-align: center;
	margin-bottom: 0.8em;
}
.musicdata h4.jp {
	font-family: var(--headFontJa);
}
.musicdata .head-deco .bg-fire {
	width: 2.2rem;
}
.musicdata_youtube .topmov_body_mov {
	max-width: 720px;
	margin: auto;
}

@media (min-width: 891px) {
	.common-detail {
		display: flex;
		align-items: flex-start;
	}	
	.common-img {
		width: 40%;
		min-width: 200px;
		margin-right: 2em;
	}
	.common-info {
		width: calc(60% - 2em);
	}
	.music-img {
		width: 50%;
		margin-right: 2.5em;
	}
}
@media (max-width: 890px) {
	.common-head {
		margin-bottom: 1.4em;
	}
	.inner_ttl {
		font-size: max(2.1rem, 3vw);
	}
	.common-img {
		margin-bottom: 1.4em;
	}
	.musicdata_inner_artist,
	.disc_inner_date {
		margin-bottom: 2.1rem;
	}
	.musicdata h4 {
		font-size: 2.8rem;
		margin-bottom: 1.1em;
	}
}
/*-----------------------------------------------
 *  CHARACTER
-------------------------------------------------*/
/*.l_charawrap {
  max-width: 950px;
  margin: auto;
}*/
#lower .l_contents .separator-anime.character{
	background: linear-gradient(to right, var(--mainColor), var(--accentColor1));
}
.charawrap_head {
	max-width: 700px;
	margin: 0 auto 2em;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}
.charawrap_head_btn {
	width: calc((100% - 60px) / 7);
	display: block;
	background-color: #fff;
	border: solid 2px var(--txtColor);
	position: relative;
	overflow: hidden;
	margin: 0 10px;
}
.charawrap_head_btn::after {
	content: '';
	display: inline-block;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	border: solid 1px var(--txtColor);
	position: absolute;
	inset: 0;
	margin: auto;
	pointer-events: none;
}
.charawrap_head_btn img {
	transition: var(--speed);
}
.charawrap_head_btn:hover,
.charawrap_head_btn.is_current {
	background-color: #ffb2e0;
	opacity: 1;
}
.charawrap_head_btn:hover,
.charawrap_head_btn:hover::after,
.charawrap_head_btn.is_current,
.charawrap_head_btn.is_current::after {
	border-color: var(--accentColor1);
}

.charawrap_head_btn:hover img {
	transform: scale(1.1);
}
@media (max-width: 890px) {
	.charawrap_head {
		max-width: 500px;
		gap: 10px;
	}
	.charawrap_head_btn {
		width: calc((100% - 40px) / 5);
		margin: 0;
	}
}
.l_chara .slick-list {
	overflow: visible;
}
.chara-content {
	position: relative;
}
.chara_inner:nth-child(1) {
	position: relative;
}
.chara-name-en {
	font-family: var(--nameFont);
	font-size: 10rem;
	font-weight: 400;
	writing-mode: vertical-rl;
	opacity: .4;
	text-shadow: 0 0 8px rgba(255, 172, 18, .5);
	position: absolute;
	top: .2em;
	left: -.3em;
}
.chara_inner_namebox {
	margin-bottom: 2.5em;
}
.chara_inner:nth-child(2) {
	padding-top: 30px; /* svg切れるの防止 */ 
}
@media (min-width: 891px) {
	.character + .contents .contents_body {
		margin-top: 0;
	}
	.chara-content {
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 30px 0 0; 
	}
	.character + .contents {
		max-width: 1100px;
	}
	.charawrap {
		position: relative;
	}
	.charawrap_head_btn {
		width: 80px;
	}
	.chara_inner:nth-child(1) {
		width: 550px;
	}

	.chara_inner:nth-child(2) {
		width: calc(100% - 550px); 
	}
}
/* 衣装差分表示ボタン */
.chara_inner_costume {
	font-weight: 500;
	font-family: var(--nameFont);
	font-size: 1.8rem;
	border-left: solid 1px var(--txtColor);
	padding-left: .6em;
	padding-bottom: .2em;
	position: absolute;
	top: 30em;
	left: 0;
	z-index: 1;
}
.chara_inner_costume >a {
	display: block;
	color: var(--txtColor);
	transition: var(--speed);
	padding-left: 1.6em;
	position: relative;
	text-shadow: 0 0 8px rgba(255, 172, 18, .5);
}
.chara_inner_costume >a::before {
	font-size: .7em;
	content: '\25B6';
	position: absolute;
	top: .3em;
	left: .6em;
}
.chara_inner_costume >a:nth-child(n+2) {
	margin: .4em 0 0;
}
.chara_inner_costume >a.is_show {
	color: var(--accentColor1);
	text-shadow: 0 0 8px rgba(255, 0, 152, .5);
}
@media (min-width: 891px) {
					.chara_inner_costume >a:hover {
						opacity: .6;
					}
				}
@media (max-width: 890px) {
					.chara_inner_costume >a:active {
						opacity: .6;
					}
				}
.chara_inner_img {
			pointer-events: none;
		}

.chara-content .chara_inner .chara_inner_img .chara_inner_img_detail {
				width: 100%;
				transition: .3s opacity;
			}
.chara-content .chara_inner .chara_inner_img .chara_inner_img_detail:not(.is_show) {
					position: absolute;
					right: 50%;
					bottom: 50%;
					transform: translate(50%, 50%);
					opacity: 0;
				}
.chara_inner_name {
  display: inline-block;
  font-family: var(--nameFont);
  font-weight: 500;
  line-height: 1.4;
  font-size: 5.5rem;
  text-shadow: 0 0 6px var(--subColor);
}
.chara_inner_cv {
	font-family: var(--nameFont);
}
.chara_inner_cv span {
	display: inline-block;
	font-weight: 500;
}
.chara_inner_cv span:nth-of-type(1) {
	color: #fff;
	line-height: 1.2;
	text-align: center;
	background-color: var(--subColor);
	padding: 0 .15em;
	border-radius: 2px;
	margin-right: .5em;
}
.chara_inner_cv span:nth-of-type(2) {
	font-size: 2.1rem;
	line-height: 1.3;
	text-shadow: 0 0 6px var(--subColor);
}
.chara_inner_txt {
	width: 450px;
	line-height: 1.9;
	text-shadow: 0 0 6px var(--subColor);
}
/* 表情差分 */
.chara_inner_face {
	max-width: 570px;
	position: absolute;
	bottom: 3em;
	right: -3em;
	z-index: -1;
}

@media (max-width: 890px) {
	.charawrap_body {
		margin: 0 -15px;
	}
	.chara-content {
		position: relative;
	}
  .chara_inner:first-of-type {
		
  }
  .chara_inner:nth-of-type(2) {
		padding: 1.5em 1em 15em;
	}
	.chara-name-en {
		left: -.29em;
	}
	.chara_inner_costume {
		top: 28em;
		left: .5em;
	}
	.chara_inner_namebox {
		
	}
	.chara_inner_nametxt {
		text-align: center;
	}
	.chara_inner_name {
		font-size: min(10.2vw, 4.6rem);
	}
	.chara_inner_cv {
		margin-top: .2em;
	}
	.chara_inner_cv span:nth-of-type(1) {
		font-size: min(3.6vw, 1.6rem);
	}
	.chara_inner_cv span:nth-of-type(2) {
		font-size: min(4.6vw, 2.1rem);
	}
	.chara_inner_txt {
		width: 100%;
		text-align: center;
	}
	.chara_inner_face {
		width: min(102vw, 400px);
		bottom: -1em;
		right: 0;
	}

}
/*-----------------------------------------------
 *  STORY
-------------------------------------------------*/		
/* スライダーのはみ出しを許可する */
#js_story,
#js_story .slick-list {
	overflow: visible !important;
}
#js_story .slick-track {
	display: flow-root;
}
#js_story:not(.slick-initialized) > li:not(:last-of-type) {
	display: none;
}
.intro {
	margin-top: .5em;
	position: relative;
}
.intro .intro_body {
	font-family: var(--mainFont); /* ここだけ全角括弧にしたい */
	text-align: center;
	background-image: url(../img/intro_bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding: 3em 2em;
	margin: auto;
}
.intro_body p {
	font-size: 2.1rem;
	text-align: center;
	line-height: 1.5;
	letter-spacing: -0.4px;
	margin-bottom: 1.5em;
}
.intro_body .intro-txt-em {
	font-weight: 700;
	font-size: 3.6rem;
	line-height: 1.5;
	margin-bottom: .5em;
}
.intro_body .intro-txt-em:last-of-type {
	display: inline-block;
	color: #fff;
	background-image: linear-gradient(to right, var(--accentColor1), var(--mainColor));
	line-height: 1.1;
	padding: 0 .1em .05em;
}
.intro_body .catch {
	font-size: 2.8rem;
	margin-bottom: .5em;
}
.intro_body mark {
	display: inline-block;
	line-height: 1.1;
	padding: 0 .1em .05em;
	margin: 0 .1em;
	/* 改行対応 */
	-webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (max-width: 890px) {
	.intro .intro_body {
		border-width: 4px;
		padding: 2.5em 1.1em;
	}
	.intro_body .intro-txt-em {
    font-size: min(6.1vw, 3rem);
	}
	.intro_body .intro-txt-em:first-of-type {
		display: block;
	}
	.intro_body .intro-txt-em:last-of-type {
		display: inline;
		-webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 1.8;
	}
	.intro_body p {
		font-size: 1.8rem;
		line-height: 1.6;
	}
	.intro_body .catch {
		font-size: 2.1rem;
	}
}

.story {
	margin: -1em auto 0;
}
.story_body {
	margin-bottom: 2em;
}
.story_head {
	text-align: center;
	margin-top: .5em;
	margin-bottom: 2em;
}
.story_num {
	display: inline-block;
	font-family: var(--headFont);
	font-size: 2.4rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	color: var(--mainColor);
	margin-bottom: .2em;
}
.story_num span {
	font-size: 1.2em;
}
.story_head_ttl {
	font-size: clamp(2.4rem,3vw, 2.8rem);
	font-weight: 900;
}
.story_body_img {
	width: 100%;
	aspect-ratio: 16 / 9;
	transition: .3s opacity;
	overflow: hidden;
	background-color: #fff;
	padding: 0;
}
@media (max-width: 890px) {
	.story_body_img {
    border-width: 4px;
	}
}
.story_body_img.is_hide {
	opacity: 0;
}
.story_body_thumb {
	margin: 1.9em 0 0;
	display: flex;
	flex-flow: row wrap;
}
.story_body_thumb >a {
	width: calc((100% - (.6em * 5)) / 6);
	display: block;
	transition: .3s opacity;
	background-color: var(--accentColor1);
	border: solid 1px var(--txtColor);
	overflow: hidden;
}
.story_body_thumb > a img {
	transition: var(--speed);
}
.story_body_thumb > a.active {
	border-color: var(--accentColor1);
}
.story_body_thumb > a.active img {
	opacity: .7;
}
@media (min-width: 891px) {
	.story_body_thumb >a:nth-child(n+2) {
		margin: 0 0 0 .6em;
	}

	.story_body_thumb >a:hover {
		opacity: .6;
	}
}
@media (max-width: 890px) {
	.story_body_thumb >a {
		width: calc((100% - 10px) / 3)
	}
	.story_body_thumb >a:not(:nth-child(3n)) {
		margin: 0 5px 0 0;
	}
	.story_body_thumb >a:nth-child(n+4) {
		margin-top: 10px;
	}
	.story_body_thumb >a:active {
		opacity: .6;
	}
}
.story_foot {
	background-color: #fff;
	padding: 2em 1.5em;
}
.story_foot + .story_foot {
	margin-top: 1.5em;
}
.story_foot_title {
	font-size: 1.8rem;
	color: var(--mainColor);
	font-weight: 900;
	margin-bottom: .5em;
}
.story_foot_txt {
	line-height: 1.8;
	padding-bottom: 1em;
	border-bottom: solid 2px var(--subColor);
	margin-bottom: 1em;
}
@media (max-width: 890px) {
	.story_foot {
		padding: 1.4em 1.1em;
	}
}
.story_foot_staff {
	font-size: .9em;
	line-height: 1.6;
}
.story_foot_staff_txt {
	display: flex;
}
@media (min-width: 891px) {
	.story_foot_staff dl {
		display: flex;
		flex-wrap: wrap;
	}
	.story_foot_staff_txt:not(:last-of-type) {
		margin-right: 1em;
	}
}

/*-----------------------------------------------
 *  GOODS一覧
-------------------------------------------------*/		
.common-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em 1em;
}
.common-list-item {
	color: var(--txtColor);
}
.common-list-img {
	padding: 1em;
  border-width: 3px;
	margin-bottom: .6em;
}
.common-list-img img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
.common-list-ttl {
	text-align: center;
}
@media (max-width: 890px) {
	.common-list {
		grid-template-columns: repeat(2, 1fr);
		gap: .7em;
	}
	.common-list-img {
		padding: .7em;
	}
}
/*-----------------------------------------------
 *  GOODS詳細
-------------------------------------------------*/		
.goods-img {
	max-width: 500px;
	margin: 0 auto 2em;
}
.goods-img img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
.goods-img-thumb {
	display: flex;
	justify-content: center;
	margin-bottom: 2em;
}
.goods-img-thumb a {
	width: calc((100% - 3.5em) / 6);
	max-width: 100px;
	background-color: #fff;
	overflow: hidden;
}
.goods-img-thumb a:not(.active) {
	border: solid 1px var(--txtColor);
}
.goods-img-thumb a + a {
	margin-left: .7em;
}
.goods-img-thumb img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
.goods-img-thumb .active img {
	opacity: .4;
}
.goods-img-thumb .active {
	position: relative;
	border: solid 1px var(--accentColor1);
}
.goods-img-thumb .active::after {
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: var(--accentColor1);
	opacity: .3;
	position: absolute;
	top: 0;
}
.goods_foot {
	max-width: 700px;
	margin: auto;
}
.common_body .goods-release-date {
	font-size: 1.15em;
	/* アクセントカラーが黄色のためメインカラーに変更
	color: var(--accentColor1);*/
	color: var(--mainColor);
}
.common_body .goods-head {
	/*color: var(--accentColor1);*/
	color: var(--mainColor);
}
.common_body p {
	margin-bottom: 1.3em;
}
.l_goods .l-buybtn {
	text-align: center;
	margin-top: 2em;
}
@media(max-width: 890px) {
	.goods-img,
	.goods-img-thumb {
		margin-bottom: 1.4em;
	}
	.goods-img-thumb a {
		width: calc((100% - 2.5em) / 6);
	}
	.goods-img-thumb a + a {
		margin-left: .5em;
	}
}

/* news＆スペシャル記事内 非公開youtube */
.youtube {
width: 100%;
	padding-top: 56.25%;
	position: relative;
	margin: 1.5em auto;
	transform: none;
	-webkit-transform: none;
	top: 0;
	left: 0;
}
.youtube iframe[src*="youtu"] {
 	position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
}
/*-----------------------------------------------
 *  言語切り替え
-------------------------------------------------*/	
.langSwitch {
	position: absolute;
	top: 20px;
	right: 30px;
	z-index: 1;
	background-color: rgba(255, 255, 255, .8);
  border-radius: 2em;
}
.langSwitch a {
	color: var(--txtColor);
	padding: .5em .65em;
}
.langSwitch a.select {
	color: var(--mainColor);
	pointer-events: none;
}
@media (max-width: 890px) {
	.langSwitch {
		display: flex;
		flex-direction: column;
		align-items: center;
		top: 85px;
		right: 15px;
	}
	.langSwitch span {
		writing-mode: vertical-rl;
	}
}