@charset "utf-8";
/*-----------------------------------------------
 * ブレイクポイント（サイト全体で統一）
 *   タブレット：max-width: 1024px
 *   スマホ    ：max-width: 767px
 * 各セクションの下に、そのセクション用のメディアクエリをまとめて記載
-------------------------------------------------*/

/*-----------------------------------------------
 * Reset
-------------------------------------------------*/
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;}

/*-----------------------------------------------
 * Base
-------------------------------------------------*/
:root {
	/* color */
	--txtColor: #240423;
	--mainColor: #FF0FA1;
	--subColor: #B600FF;
	--accentColor: #FFFF00;
	--bgColor: #FFFFFF; /* ローディングアニメちらつき防止用 */
	--contentColor: rgba(255,255,255,.3);

	/* font */
	--titleFont: "Rammetto One", sans-serif;
	--mainFont: "LINE Seed JP", sans-serif;

	/* 変化速度 */
	--speed: all .3s ease; /* ※書式が崩れていて実質効いていない。直すと全リンクにアニメが付くので要確認 */
	--popSpeed: transform 0.25s cubic-bezier(0.2, 3, 0.4, 1); /* 弾ける動き（transformで動かすもの専用） */
}
html {
	font-size: 62.5%; /* 基準を10pxに */
	/*scroll-behavior: smooth;*/ /* ScrollTriggerと一緒に使用できない */
	scrollbar-color: var(--mainColor) #fff;
	scrollbar-width: thin;
}
body {
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-family: var(--mainFont);
	font-feature-settings: "palt";
	font-weight: 700;
	font-size: 1.6em; /* 16px ここだけem指定 */
	color: var(--txtColor);
	line-height: 1.6;
	word-wrap: break-word;
	position: relative;
}
.pc {
	display: block;
}
.sp {
	display: none;
}
a {
	color: var(--subColor);
	transition: var(--speed);
}
a:hover {
	opacity: .7;
}
/* ScrollBar Setting */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
	border-radius: 4px;
	background: #fff;
}
::-webkit-scrollbar-thumb {
	background: var(--mainColor);
	border-radius: 4px;
	margin: 2px;
	box-shadow: none;
}

@media (max-width: 767px) {
	html {
		font-size: 52%;
	}
	.body-fix {
		overflow: hidden;
	}
	.sp { display: block; }
	.pc { display: none; }
	::-webkit-scrollbar {
		width: 3px;
		height: 3px;
	}
}

/*-----------------------------------------------
 * 共通パーツ
-------------------------------------------------*/
/* 見出し */
.h2-title-area {
	display: block;
	text-align: center;
	margin: 0 0 20px;
}
.cont-h2,
.cont-h2-wh,
.cont-h3,
.cont-h3-wh {
	font-size: 6.4rem;
	font-family: var(--titleFont);
	text-align: center;
	position: relative;
	isolation: isolate;
	padding: 0.5em 0;
	margin-bottom: .5em;
}
.cont-h2,
.cont-h3 {
	color: var(--mainColor);
	text-shadow: 3px 3px 0 var(--bgColor);
}
.cont-h2-wh,
.cont-h3-wh {
	color: #fff;
}
/* 見出しの後ろの×の装飾 */
.cont-h2::before,
.cont-h2-wh::before,
.cont-h3::before,
.cont-h3-wh::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 48%;
	translate: -50% -50%;
	width: clamp(158px, 18.75vw, 270px);
	aspect-ratio: 270 / 160;
	background: url("../img/deco-cross-mark.svg") center / contain no-repeat;
	filter: drop-shadow(0 4px 4px rgb(126 126 126 / 25%));
	opacity: .25;
	z-index: -1;
}
.cont-h2-wh::before,
.cont-h3-wh::before {
	background: url("../img/deco-cross-mark02.svg") center / contain no-repeat;
}
.cont-h3,
.cont-h3-wh {
	font-size: 3.6rem;
	font-weight: 900;
	padding: .8em 0;
	margin-bottom: 1em;
}
.cont-h3::before,
.cont-h3-wh::before {
	width: clamp(148px, 13.54vw, 210px);
}

/* MOREボタン（インク） */
#top-news .more-btn a,
#news-detail .more-btn a,
.disc-detail-inner .more-btn a,
.benefit-list .more-btn a,
#special-detail .more-btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: clamp(125px, 10.41vw, 150px);
	aspect-ratio: 140 / 90;
	text-align: center;
	color: #fff;
	background: url("../img/btn-ink-splash.svg") center / contain no-repeat;
	font-family: var(--titleFont);
	font-size: 2.4rem;
	text-decoration: none;
	margin: 2em auto 0;
}
#top-news .more-btn a:hover,
#news-detail .more-btn a:hover,
.disc-detail-inner .more-btn a:hover,
.benefit-list .more-btn a:hover,
#special-detail .more-btn a:hover {
	opacity: 1;
	transform: scale(1.06);
	transition: var(--popSpeed);
}
#special-detail .more-btn a {
	margin: 0 auto 20px;
}
@media (max-width: 767px) {
	.cont-h2,
	.cont-h2-wh {
		font-size: 4.4rem;
	}
}

/*-----------------------------------------------
 * HEADER（メニュー）
-------------------------------------------------*/
.js-menu {
	width: 80px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 6;
	cursor: pointer;
	transition: var(--speed);
}
.js-menu:hover {
	filter: brightness(1.07);
}
.js-menu img {
	transition: var(--speed);
}
.js-menu:hover img {
	transform: scale(1.08);
	transition: var(--popSpeed);
}
.js-menu.open img {
	opacity: 0;
}
/* メニューの背景インク */
.js-menu::before {
	content: "";
	width: 190px;
	height: 150px;
	background-image: url(../img/menu-bg.svg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	right: 0;
	z-index: -2;
	pointer-events: none;
}
/* 今回のみmenuに背景を付けたためmenu_on.pngは疑似要素で表示 */
.js-menu::after {
	content: "";
	width: 80px;
	height: 70px;
	background-image: url(../img/menu_on.png);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	right: 0;
	pointer-events: none;
	opacity: 0;
}
.js-menu.open::after {
	opacity: 1;
}
.js-menu.open:hover::after {
	transform: scale(1.08);
	transition: var(--popSpeed);
}
.header-inner {
	display: none;
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 5;
	background-image: url(../img/bg.jpg);
	background-color: #fff;
	background-size: 100vw;
	background-repeat: no-repeat;
	background-position: left bottom;
	overflow-y: scroll;
}
.menu-logo {
	max-width: 360px;
	margin: 40px auto;
}
.js-menu-list {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	margin: auto;
}
.js-menu-list:last-child {
	margin-bottom: 40px;
}
.js-menu-list li {
	width: calc(100% / 3);
	font-size: 3.2rem;
	font-weight: 600;
	letter-spacing: .2rem;
	text-align: center;
}
.js-menu-list a {
	display: inline-block;
	font-family: var(--titleFont);
	color: var(--mainColor);
	text-decoration: none;
	padding: .4em;
}
.js-menu-list a.cs,
.js-menu-list a.cs:hover {
	opacity: .5;
}
.x-link {
	text-align: center;
	margin-top: 1.5em;
}

@media (max-width: 1024px) {
	.js-menu-list li {
		width: 100%;
	}
}
@media (max-width: 767px) {
	.js-menu {
		max-width: 50px;
	}
	.js-menu::before {
		width: 130px;
		height: 105px;
	}
	.js-menu::after {
		width: 50px;
		height: 50px;
	}
	.header-inner {
		top: 0;
		padding-top: 50px;
	}
	.menu-logo {
		width: 60vw;
		margin: 10px auto;
	}
	.header-scroll-sp {
		height: 100svh;
		overflow-y: scroll;
	}
	.js-menu-list li {
		font-size: 2.5rem;
	}
	.x-link img {
		width: 26px;
		height: 26px;
	}
}

/*-----------------------------------------------
 * LOADING
-------------------------------------------------*/
#js-loading {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10;
	background-color: #fff; /* 画像が出るまでの背景色 */
	background-image: url(../img/bg.jpg);
	background-size: 100vw;
	background-repeat: no-repeat;
	background-position: left bottom;
}
.loading-logo {
	position: relative;
	top: calc((100vh - 200px) / 2); /* ロゴの高さ分を引く */
	text-align: center;
	animation: logoAnime 3.5s ease 0s;
}
.loading-logo picture {
	display: inline-block;
	width: 500px;
}
@keyframes logoAnime {
	from {
		opacity: 0;
		transform: scale(.9);
	}
	to {
		opacity: 1;
		transform: scale(1.0);
	}
}

@media (max-width: 767px) {
	.loading-logo picture {
		width: 90vw;
	}
}

/*-----------------------------------------------
 * TOP：キービジュアル
-------------------------------------------------*/
.kvArea {
	position: relative;
	background-color: #fff;
	width: 100%;
	overflow: hidden;
	padding-bottom: 50px;
}
.title-logo {
	width: 34.7vw;
	position: absolute;
	top: 5px;
	left: 30px;
	z-index: 1;
}

/* 言語切り替え */
.langSwitch {
	padding: .1em 1em;
	background-color: rgb(255 255 255 / 80%);
	border-radius: 1em;
	position: absolute;
	top: 130px;
	right: 20px;
	z-index: 1;
	color: var(--txtColor);
	box-shadow: rgb(126 126 126 / 20%) 0 2px 2px;
}
.langSwitch a {
	color: var(--txtColor);
	text-decoration: none;
}
.langSwitch a.select {
	color: var(--mainColor);
}
.langSwitch span {
	padding: 0 .7em;
}

/* スライダー */
.slick-dotted.slick-slider {
	margin-bottom: 0;
}
.hero_slide {
	z-index: -1;
}
.hero_slide .slick-dotted {
	position: relative;
	width: 100%;
}
#js_hero .slick-list .slick-track {
	display: flex;
}
.kv-single .slick-dots {
	display: none;
}

/* ハートのサムネイル */
.hero_slide .slick-dots {
	position: absolute;
	top: 190px;
	right: -35px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.hero_slide .slick-dots li {
	width: 100px;
	height: 88px;
	margin: 0 10px 20px;
	cursor: pointer;
	overflow: hidden;
	z-index: 1;
}
.hero_slide .slick-dots li.slick-active {
	cursor: default;
}
.hero_slide .heart-border {
	vector-effect: non-scaling-stroke;
	stroke-width: 2px;
	stroke: var(--txtColor);
}
.hero_slide .slick-active .heart-border {
	stroke: var(--mainColor);
}
.slick-dots .slick-active .nav-overlay {
	fill: var(--mainColor);
}
.slick-dots .slick-active image {
	opacity: .7;
}

/* 左側：放送情報・SNS・バナー */
.official-x {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: min(1.45vw, 2.3rem);
	margin-bottom: 1.5em;
}
.official-x p {
	position: relative;
	padding-right: 9.72vw;
}
.official-x p::after {
	content: '';
	display: inline-block;
	width: 5.8vw;
	height: 2px;
	background-color: var(--txtColor);
	position: absolute;
	top: .8em;
	right: 2.18vw;
}
.official-x a {
	display: flex;
	width: 3.12vw;
	height: 3.12vw;
	padding: .5em;
	background-color: #000;
	border-radius: 50%;
}
.top-onair {
	margin-bottom: 2em;
}
.banner-list {
	width: 25vw;
	margin: 0 auto 30px;
}

/* 追従バナー */
.js-fixed-banner {
	display: none;
	max-width: 250px;
	position: fixed;
	bottom: 40px;
	left: 20px;
	z-index: 1;
	filter: drop-shadow(0px 4px 4px rgb(126 126 126 / 15%));
}
.js-fixed-banner a:hover {
	opacity: 1;
}
.js-fixed-banner img {
	transition: transform 0.3s ease-out; /* 戻るとき */
}
.js-fixed-banner a:hover img {
	transform: scale(1.06);
	transition: var(--popSpeed); /* 拡大するとき */
}

@media (min-width: 768px) {
	.hero_slide {
		margin: 3.47vw 3.47vw 0 33.3vw;
		position: relative;
		z-index: 0;
	}
	.hero_slide img {
		border-radius: 30px;
	}
	.left-content {
		width: 33.3vw;
		position: absolute;
		top: 21.5vw;
	}
	#top-en .left-content {
		top: 16.5vw;
	}
}
@media (max-width: 767px) {
	.kvArea {
		display: flex;
    flex-direction: column;
    z-index: 0;
	}
	.hero_slide {
    order: 1;
  }
	.title-logo {
		width: 76vw;
		position: static;
		order: 2;
		z-index: 1;
		margin: -10% auto 5%;
	}
	.left-content {
    order: 3;
  }
	.langSwitch {
		display: flex;
		flex-direction: column;
		padding: .8em .5em;
		border-radius: 5em;
		top: 80px;
	}
	.langSwitch a:first-of-type {
		padding-bottom: .8em;
	}
	.langSwitch span {
		transform: rotate(90deg);
		padding: 0 .2em;
		line-height: 0;
	}
	#js_hero .slick-list,
	.kv-single #js_hero {
	   -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
	           mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
	}
	.hero_slide .slick-dots {
		z-index: 1;
		text-align: right;
		top: 175px;
		left: auto;
		right: 13px;
		width: auto;
	}
	.hero_slide .slick-dots li {
		width: max(12.8vw, 50px);
		height: auto;
		margin: 0 auto 5px;
	}
	.official-x {
		font-size: 4.1vw;
	}
	.official-x p {
		padding-right: 18vw;
	}
	.official-x p::after {
		width: 10.25vw;
		height: 1px;
		right: 3.8vw;
	}
	.official-x a {
		width: 8.97vw;
		height: 8.97vw;
	}
	.banner-lists {
		position: relative;
	}
	.banner-lists .slick-list {
		z-index: 1;
    pointer-events: none;  /* 透明な部分はクリックを素通りさせる */
  }
  .banner-lists .slick-slide a {
  	display: block;
    pointer-events: auto;  /* バナー自体はクリックできるように戻す */
  }
	.banner-arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: 20.5vw;
    aspect-ratio: 1;
    background: center / contain no-repeat;
    z-index: 0;
    cursor: pointer;
  }
  .banner-prev {
    left: -6%;
    background-image: url("../img/arrow-l.svg");
  }
  .banner-next {
    right: -4%;
    background-image: url("../img/arrow-r.svg");
  }
	.banner-list {
		padding: 0 10.25vw;
		margin-bottom: 0;
	}
	.kvArea .bannerArea .slick-slider .slick-list .slick-track .slick-slide img {
		margin: 0 auto !important;
	}
	.banner-lists .slick-dots li,
	.banner-lists .slick-dots li button {
		width: 25px;
	}

	.banner-lists .slick-dots li button:before {
		content: "";
		height: 6px;
		width: 25px;
		background-color: rgb(36 4 35 / 30%);
		opacity: 1;
		border-radius: 10em;
		margin-top: 5px;
	}
	.banner-lists .slick-dots li.slick-active button:before {
		background-color: var(--mainColor);
	}
	.banner-lists .slick-dots:has(li:only-child) {
	  display: none;
	}
	.js-fixed-banner {
		max-width: 180px;
		bottom: 30px;
		left: 10px;
	}
}

/*-----------------------------------------------
 * TOP：PV
-------------------------------------------------*/
/* エリア全体：デザインの比率で高さを決める */
#pv .pv-innr .pv-movie-innr {
	--pv-shape: polygon(0 18%, 100% 1.1%, 100% 80%, 0 92%); /* マスク範囲を変数で管理 */
	position: relative;
	width: 100%;
	aspect-ratio: 1440 / 680;
	isolation: isolate; /* z-indexをこのエリア内で完結させる */
}
/* クリック範囲：斜めの形の内側だけ */
#pv .pv-movie-innr a {
	position: absolute;
	inset: 0;
	display: block;
	transition: var(--speed);
	clip-path: var(--pv-shape);
}
#pv a:hover {
	opacity: 1;
}
/* 動画の枠：斜めに切り抜く */
#pv .pv-movie-innr .iframe-box {
	position: absolute;
	inset: 0;
	overflow: hidden;
	clip-path: var(--pv-shape);
}
/* YouTube：16:9のまま枠いっぱいに広げて中央に配置 */
#pv .pv-movie-innr .iframe-box iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	transform: translate(-50%, -50%);
	pointer-events: none; /* クリックをaタグに通す */
}
/* サムネイル画像の場合 */
.pv-box-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* ピンクの色かぶせ */
#pv .pv-movie-innr .iframe-box::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mainColor);
	opacity: 0.5;
}
/* インク：上下に重ねる */
#pv .pv-movie-innr::before,
#pv .pv-movie-innr::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 2;
	pointer-events: none;
	background: center / 100% 100% no-repeat;
}
#pv .pv-movie-innr::before {
	top: 0;
	aspect-ratio: 1440 / 165;
	background-image: url("../img/pv-separator-top.svg");
}
#pv .pv-movie-innr::after {
	bottom: 0;
	aspect-ratio: 1440 / 185;
	background-image: url("../img/pv-separator-bottom.svg");
}
/* 再生ボタン */
.play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	pointer-events: none;
}
.play img {
	transition: transform 0.3s ease-out;
}
.pv-movie-innr a:hover .play img {
	transform: scale(1.18);
	transition: var(--popSpeed);
}

/* PVモーダル */
#js-pv-modal {
	display: none;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	z-index: 10;
	background-image: url(../img/bg.jpg);
	background-size: cover;
}
.youtube {
	width: min(90vw, 1000px);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: auto;
}
.youtube-inner {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.youtube-inner iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
#js-close {
	position: absolute;
	background-image: url(../img/close.svg);
	background-repeat: no-repeat;
	background-size: 70px;
	width: 70px;
	height: 70px;
	top: 0;
	right: -90px;
	cursor: pointer;
	transition: transform 0.3s ease-out;
}
#js-close:hover {
	transform: scale(1.12);
	transition: var(--popSpeed);
}
@media (max-width: 1024px) {
	#js-close {
		position: static;
		margin: 1.5em auto 0;
	}
	.play {
		width: 20vw;
	}
}
@media (max-width: 767px) {
	#pv .pv-innr .pv-movie-innr {
    aspect-ratio: 390 / 200;
    --pv-shape: polygon(0 20%, 100% 3%, 100% 78%, 0 90%);
  }
  #pv .pv-movie-innr::before {
    aspect-ratio: auto;
    height: 26%;    /* 上インク 50px ÷ 200px */
  }
  #pv .pv-movie-innr::after {
    aspect-ratio: auto;
    height: 27.5%;  /* 下インク 55px ÷ 200px */
  }
}

/*-----------------------------------------------
 * TOP：NEWS
-------------------------------------------------*/
section.news-only {
	padding: 50px 0;
}
.news-inner {
	margin: 0 auto;
	max-width: 930px;
	padding: 0 15px;
}
.news-list {
	border-top: solid 1px var(--txtColor);
}
.news-list:last-child {
	border-bottom: solid 1px var(--txtColor);
}
.news-list a {
	display: flex;
	gap: 20px;
	padding: 30px 20px;
	color: var(--txtColor);
	text-decoration: none;
	font-size: 1.8rem;
}
.news-list a:hover {
	background-color: var(--contentColor);
}
.news-date {
	display: inline-block;
	color: var(--mainColor);
	font-size: 1.6rem;
	font-weight: 900;
}

@media (max-width: 767px) {
	section.news-only {
		padding: 20px 15px;
	}
	.news-inner {
		z-index: 1;
		position: relative;
		padding: 0;
	}
	.news-list a {
		flex-direction: column;
		gap: .3em;
		padding: 15px 10px;
	}
	.news-date {
		font-size: 1.4rem;
	}
}

/*-----------------------------------------------
 * TOP：INTRODUCTION / STAFF＆CAST 共通（上下のインクの縁）
-------------------------------------------------*/
#introduction,
#staffcast {
	padding-top: calc(166 / 1440 * 100vw);
	padding-bottom: calc(186 / 1440 * 100vw);
}
.introduction-innr,
.staffcast-inner,
#onair .deregula {
	position: relative;
	background-color: var(--mainColor);
}
.introduction-innr::before,
.introduction-innr::after,
.staffcast-inner::before,
.staffcast-inner::after,
#onair .deregula::before,
#onair .deregula::after {
	content: "";
	width: 100%;
	background: center / 100% 100% no-repeat;
	position: absolute;
	left: 0;
}
.introduction-innr::before,
.staffcast-inner::before,
#onair .deregula::before {
	bottom: calc(100% - 15px);
	aspect-ratio: 1440 / 166;
	background-image: url("../img/separator-top.svg");
}
#onair .deregula::before {
	bottom: calc(100% - 6vw);
	z-index: -1;
}
.introduction-innr::after,
.staffcast-inner::after,
#onair .deregula::after {
	top: calc(100% - 1px);
	aspect-ratio: 1440 / 186;
	background-image: url("../img/separator-bottom.svg");
}
#onair .deregula::after {
	top: calc(100% - 5vw);
	z-index: -1;
}

/*-----------------------------------------------
 * TOP：INTRODUCTION
-------------------------------------------------*/
#introduction .cont-h2 {
	margin-bottom: .2em;
}
.intro-parallax {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1440 / 250;
	display: grid;
	place-items: center;
	margin-bottom: 2.5em;
}
.intro-parallax img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 160%; /* パララックスで動かす分だけ大きくしておく */
	object-fit: cover;
}
.intro-txt-em,
.intro-txt-ex {
	text-align: center;
	font-weight: 900;
	color: #fff;
}
.intro-txt-em {
	font-size: 4.8rem;
	text-shadow: 1px 1px 0 var(--txtColor),
		-1px -1px 0 var(--txtColor),
		1px -1px 0 var(--txtColor),
		-1px 1px 0 var(--txtColor),
		1px 0 0 var(--txtColor),
		-1px 0 0 var(--txtColor),
		0 1px 0 var(--txtColor),
		0 -1px 0 var(--txtColor),
		0 5px 0 var(--subColor);
	position: relative;
}
.intro-txt-ex {
	font-size: 2.4rem;
	text-shadow: 1px 1px 0 var(--txtColor),
		-1px -1px 0 var(--txtColor),
		1px -1px 0 var(--txtColor),
		-1px 1px 0 var(--txtColor),
		1px 0 0 var(--txtColor),
		-1px 0 0 var(--txtColor),
		0 1px 0 var(--txtColor),
		0 -1px 0 var(--txtColor),
		0 3px 0 var(--subColor);
}

@media (max-width: 1024px) {
	.intro-parallax {
		aspect-ratio: 1440 / 380; /* タブレットでは少し縦長に */
	}
}
@media (max-width: 767px) {
	.introduction-innr,
	.staffcast-inner,
	#onair .deregula {
		padding: 30px 0;
	}
	.intro-parallax {
		aspect-ratio: 390 / 150;
	}
	.intro-txt-em {
		font-size: 3.2rem;
	}
}
@media (max-width: 400px) {
	.introduction-innr .cont-h2-wh {
		font-size: 4.2rem;
	}
}

/*-----------------------------------------------
 * TOP：CHARACTER
-------------------------------------------------*/
#character {
	padding: 40px 0 80px;
}
.chara-inner .coming-soon {
	font-size: 4.8rem;
	font-weight: 900;
	color: #fff;
	text-align: center;
	text-shadow: 1px 1px 0 var(--txtColor),
		-1px -1px 0 var(--txtColor),
		1px -1px 0 var(--txtColor),
		-1px 1px 0 var(--txtColor),
		1px 0 0 var(--txtColor),
		-1px 0 0 var(--txtColor),
		0 1px 0 var(--txtColor),
		0 -1px 0 var(--txtColor),
		0 5px 0 var(--subColor);
	margin-top: 2em;
}

/* 全体：インクの装飾はここに付ける（切り替えでフェードしない） */
.chara-area {
	position: relative;
	isolation: isolate;
	max-width: 1060px;
	margin: auto;
	padding: 0 20px;
	overflow-x: clip;
}
.chara-area::before,
.chara-area::after {
	content: "";
	position: absolute;
	background: center / contain no-repeat;
	pointer-events: none;
	z-index: -1;
}
.chara-area::before { /* 立ち絵の後ろのピンクのインク */
	top: 4%;
	left: 18%;
	width: 23.5%;
	aspect-ratio: 250 / 234;
	background-image: url("../img/chara-ink-splash.svg");
}
.chara-area::after { /* 表情差分の後ろの黄色・紫のインク */
	bottom: 0;
	right: 5%;
	width: 44%;
	aspect-ratio: 464 / 470;
	background-image: url("../img/chara-ink-splash02.svg");
}

/* スライダー：サムネイルを左、本体を右に並べる */
#js-chara-slider {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}
#character .slick-list {
	flex: 1;
	min-width: 0;
	overflow: visible; /* はみ出した名前を切らずに表示する */
}

/* サムネイル */
#character .slick-dots {
	position: static;
	order: -1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 140px;
	margin-top: 20px;
}
/* サムネイルの枠：平行四辺形に傾ける */
#character .slick-dots li {
	--thumb-w: 140px; /* サムネイル幅 */
	--skew: 6deg;     /* 傾き */
	position: relative;
	width: var(--thumb-w);
	height: 50px;
	margin: 0;
	border: solid 1px var(--mainColor);
	background-color: #fff;
	overflow: hidden;
	cursor: pointer;
	transform: skewY(calc(var(--skew) * -1));
}
/* サムネ画像を逆に傾けて直す */
#character .slick-dots li img {
	--gap: calc(var(--thumb-w) * tan(var(--skew)) + 2px); /* 傾けてできる隙間を埋める量 */
	display: block;
	width: 100%;
	height: calc(100% + var(--gap));
	margin-top: calc(var(--gap) / -2);
	object-fit: cover;
	transform: skewY(var(--skew));
	transition: scale 0.25s cubic-bezier(0.2, 3, 0.4, 1);
}
#character .slick-dots li.slick-active {
	background-color: var(--mainColor);
}
#character .slick-dots li:not(.slick-active):hover img {
	scale: 1.03;
}

/* スライド本体：立ち絵とテキストを2列に */
#character .chara-cont {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	align-items: start;
}

/* 立ち絵と英語の名前 */
.full-body {
	position: relative;
}
.chara-stand {
	display: block;
	margin: 0 auto;
}
.chara-name-img {
	position: absolute;
	left: -15%;
	bottom: 8%;
	width: 88%;
	pointer-events: none;
}

/* テキスト */
.chara-info {
	padding-top: 60px;
}
.chara-name {
	font-size: 5.4rem;
	font-weight: 900;
	line-height: 1.4;
	color: var(--mainColor);
}
.chara-cv {
	font-size: 2.1rem;
	font-weight: 900;
	color: var(--subColor);
	margin-bottom: 1.5em;
}
.chara-txt {
	max-width: 395px;
	margin-bottom: .5em;
	min-height: 7em; /* テキストの短いキャラ対応 */
}
.chara-face {
	width: 76.5%;
	margin: 0 4%;
}
.chara-face img {
	display: block;
	width: 100%;
}

@media (max-width: 767px) {
	#character {
		padding: 50px 0;
	}
	.chara-inner .coming-soon {
		font-size: 4rem;
		margin-top: 1em;
	}
	.chara-area {
		padding: 0;
		margin-top: 30px;
	}
	.chara-area::before {
		top: 3%;
		left: 37%;
		width: 64vw;
	}
	.chara-area::after {
		bottom: 2%;
		right: 14%;
		width: 73vw;
	}
	#js-chara-slider {
		flex-direction: column;
		gap: 20px;
	}
	#character .slick-list {
		width: 100%;
	}
	#character .slick-dots {
		gap: 15px;
		width: 110px;
		position: absolute;
		top: 0;
		left: -1px;
	}
	#character .slick-dots li {
		--thumb-w: 110px;
		--skew: atan(15 / 110);     /* 縦のずれ15px ÷ 幅110px */
    height: 40px;               /* 変形前の四角の高さ */
	}
	.full-body {
		left: 12vw;
	}
	#character .chara-cont {
		grid-template-columns: 1fr;
	}
	.chara-info {
		padding: 20px 15px 0;
	}
	.chara-cv {
		margin-bottom: 1em;
	}
	.chara-name-img {
		left: -9%;
		bottom: 15%;
		width: 77%;
	}
	.chara-face {
		width: 70%;
		margin: 25px auto;
	}
}

/*-----------------------------------------------
 * TOP：STAFF＆CAST
-------------------------------------------------*/
#staff {
	margin-bottom: 80px;
}
.staff-list {
	display: flex;
	flex-wrap: wrap;
	max-width: 930px;
	padding: 0 15px;
	margin: auto;
	gap: 2em 0;
}
#staff .staff-list .name-list {
	width: calc(100% / 3);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: left;
}
#staff .staff-list div.name-list:first-of-type {
	width: 100%;
	display: block;
	text-align: center;
}
#cast {
	margin-bottom: 30px;
}
#cast .cast-box {
	max-width: 700px;
	margin: 0 auto 40px;
}
#cast h3 {
	display: inline-block;
	width: 100%;
	font-size: 2rem;
	color: #fff;
	font-weight: 800;
	padding: .4em 0;
	margin: 0 0 20px;
}
.cast-list {
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	gap: 2em 0;
}
#cast .cast-list .name-list {
	width: calc(100% / 2);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.cast_chara {
	color: var(--accentColor);
	font-family: var(--mainFont);
	font-weight: 900;
}
.cast_name {
	font-size: 2.1rem;
	font-weight: 900;
	color: #fff;
}
.cast_name_txt,
.cast_name_btn {
	display: inline-block;
	vertical-align: middle;
}
.cast_name_txt {
	font-size: 2.1rem;
}
.cast_name_txt br,
.comment_head_name br {
	display: none;
}
/* コメントの吹き出しボタン */
.cast_name_btn {
	width: 30px;
	height: 27px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('../img/bubble.svg');
	transition: transform 0.3s ease-out;
}
.cast_name_btn:hover {
	opacity: 1;
	transform: scale(1.1);
	transition: var(--popSpeed);
}
.cast-description {
	font-size: .7em;
	font-weight: 700;
}

@media (max-width: 1024px) {
	.cast_name_btn {
		width: 25px;
		height: 25px;
	}
}
@media (max-width: 767px) {
	.staff-list,
	.cast-box {
		display: block;
		text-align: left;
		padding: 0 15px;
	}
	#staff .staff-list .name-list {
		width: 100%;
		margin: 0 0 20px;
		text-align: left;
		justify-content: flex-start;
	}
	#cast .cast-list .name-list {
		text-align: left;
	}
	.cast-list {
		flex-direction: column;
		align-items: center;
	}
}

/*-----------------------------------------------
 * TOP：STAFF＆CASTのコメント（モーダル）
-------------------------------------------------*/
.cast_comment {
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed !important;
	top: 0;
	left: 0;
	z-index: 3;
	background-image: url(../img/bg02.jpg);
	background-size: 50%;
}
.cast_comment.is-active {
	opacity: 1;
	visibility: visible;
	display: block;
	vertical-align: middle;
}
.cast-comment-box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0 auto;
}
.cast-modal {
	display: none;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	z-index: 10;
	background-image: url(../img/bg.jpg);
	background-size: cover;
}
.l_comment {
	position: relative;
	width: 800px;
	display: flex;
	align-items: flex-start;
	vertical-align: middle;
	margin: auto;
	padding: 2.5em;
	background-color: #fff;
	border-top: 1px solid var(--txtColor);
	border-bottom: 1px solid var(--txtColor);
}
.comment_head_name.pc-staff-br br {
	display: block;
}
.comment_head {
	margin-bottom: 2em;
	font-weight: 900;
	text-align: left;
}
.comment_head_chara {
	font-size: 2.1rem;
	color: var(--mainColor);
}
.comment_head .cast_name_txt {
	font-size: clamp(32px, 7vw, 40px);
}
.comment_body_txt {
	max-height: 350px;
	line-height: 1.8;
	font-weight: 700;
	text-align: left;
	overflow: hidden;
}
/* 閉じるボタン */
.js_close_modal_btn {
	position: absolute;
	background-image: url(../img/close.svg);
	background-repeat: no-repeat;
	background-size: 70px;
	width: 70px;
	height: 70px;
	top: 0;
	right: -90px;
	cursor: pointer;
	z-index: 5;
	transition: transform 0.3s ease-out;
}
.js_close_modal_btn:hover {
	transform: scale(1.12);
	transition: var(--popSpeed);
}

@media (min-width: 1025px) {
	.comment {
		display: flex;
		justify-content: space-between;
	}
	.comment-img {
		width: calc(50% - 2.5em);
	}
	.comment-img + .comment-r-content {
		width: 50%;
	}
}
@media (max-width: 1024px) {
	.l_comment {
		width: min(92vw, 600px);
		padding: 2em 1.1em;
		margin: 40px 0 0;
	}
	.comment_head_name br {
		display: block;
	}
	.modal:has(.cast_comment) {
		height: 100vh;
		overflow: scroll;
	}
	.modal_inner:has(.cast_comment) + .modal_close {
		position: static;
	}
	.cast_comment {
		padding: 2em 0 1.5em;
	}
	.comment-img {
		padding: 0 1.8em;
		margin-bottom: 1.5em;
	}
	.comment_head {
		padding: 0 1.8em;
		margin-bottom: 1.5em;
	}
	.comment_body_txt {
		max-height: 100%;
		padding: 0 1.8em;
	}
	.js_close_modal_btn {
		bottom: calc(-70px - 1.5em);
		top: auto;
		left: 0;
		right: 0;
		margin: auto;
	}
}
@media (max-width: 767px) {
	#js-pv-modal,
	.cast-modal {
		background-color: #fff;
		background-size: 100vw;
		background-repeat: no-repeat;
		background-position: left bottom;
	}
	.l_comment {
		margin-top: 10px;
	}
	.cast-modal {
		overflow-y: scroll;
	}
	.cast-comment-box {
		margin: 0 auto 100px;
		display: flex;
		align-items: flex-start;
		max-height: 80vh;
	}
}

/*-----------------------------------------------
 * TOP：COMICS
-------------------------------------------------*/
.comics-inner {
	max-width: 900px;
	margin: 0 auto;
}
.comic-info {
	display: flex;
	justify-content: center;
	gap: 100px;
	margin: 4em auto;
}
.comic-img {
	width: 400px;
	flex-shrink: 0;
}
.comic-img img {
	display: block;
	width: 100%;
	border: 1px solid var(--txtColor);
	box-shadow: 10px 10px 0 var(--mainColor);
}
.comic-detail {
	text-align: center;
}
.comic-txt {
	font-size: 4.8rem;
	font-weight: 900;
	margin-bottom: 1.4em;
	text-align: center;
}
.comic-txt span {
	color: var(--mainColor);
}
.comic-btns {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.comic-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5em;
	width: 350px;
	padding: .7em 1em;
	font-size: 2.8rem;
	font-weight: 900;
	color: #fff;
	text-decoration: none;
	background: var(--mainColor);
	transition: transform 0.3s ease-out;
}
.comic-btns li:nth-child(even) .comic-btn {
	background: var(--subColor);
}
.comic-btn:hover {
	opacity: 1;
	transform: scale(1.05);
	transition: var(--popSpeed);
}
/* 別窓アイコン */
.comic-btn::after {
	content: "";
	width: 14px;
	aspect-ratio: 1;
	background: url("../img/icon-outside.svg") center / contain no-repeat;
}

@media (max-width: 1024px) {
	.comic-info {
		gap: 50px;
		padding: 0 20px;
	}
	.comic-img {
		width: 320px;
	}
}
@media (max-width: 767px) {
	#comics {
		padding: 30px 0;
	}
	.comic-info {
		flex-direction: column;
		align-items: center;
		gap: 40px;
		margin: 2.5em auto;
	}
	.comic-txt {
		margin-bottom: 1em;
	}
	.comic-img {
		width: min(70vw, 300px);
	}
	.comic-btn {
		width: min(80vw, 290px);
	}
}

/*-----------------------------------------------
 * FOOTER
-------------------------------------------------*/
footer {
	padding-top: calc(166 / 1440 * 100vw - 35px);
	text-align: center;
	position: relative;
}
.footer-inner {
	position: relative;
	background-color: var(--subColor);
	padding-bottom: 2em;
}
.footer-inner::before {
	content: "";
	width: 100%;
	background: center / 100% 100% no-repeat;
	position: absolute;
	left: 0;
	bottom: calc(100% - 35px);
	aspect-ratio: 1440 / 166;
	background-image: url(../img/footer-separator.svg);
	z-index: -1;
}
/* TOPに戻るボタン */
#page-top {
	position: absolute;
	top: -30px;
	right: 30px;
}
#page-top a {
	display: inline-block;
	transition: transform 0.3s ease-out;
}
#page-top a:hover {
	opacity: 1;
	transform: scale(1.06);
	transition: var(--popSpeed);
}
.footer-banner ul {
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}
.footer-banner li {
	width: 260px;
	margin: 0 10px;
}
.footer-banner li img {
	border: 1px solid #fff;
}
.sns p {
	font-family: var(--titleFont);
	font-weight: 500;
	font-size: 2.4rem;
	color: #fff;
	margin-bottom: 5px;
}
.sns ul {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}
.sns li {
	margin: 0 10px;
}
.copyright {
	color: #fff;
	font-size: 1.2rem;
}

@media (min-width: 768px) {
	.sns.jp img {
		max-width: 26px;
		max-height: 26px;
	}
	.jp .icon-x img {
		max-width: 21px;
		max-height: 21px;
	}
}
@media (max-width: 767px) {
	footer {
    padding-top: calc(45 / 390 * 100vw - 10px);
  }
  .footer-inner {
  	padding: 2em 15px;
  }
  .footer-inner::before {
    bottom: calc(100% - 10px);
    aspect-ratio: 390 / 45;
  }
	.footer-banner {
		width: 70vw;
		margin: 0 auto;
		text-align: center;
		display: block;
	}
	.footer-banner ul {
		padding: 0 20px;
		display: inline-block;
		margin-bottom: 15px;
	}
	.footer-banner li {
		width: 100%;
		margin: 0 0 15px;
	}
	.jp ul {
		align-items: center;
		margin-bottom: 40px;
	}
	#page-top {
		right: 15px;
	}
	#page-top a {
		width: 70px;
		height: 70px;
	}
	.sns p {
		margin-bottom: 10px;
	}
	.copyright {
		font-size: 1.4rem;
	}
}

/*-----------------------------------------------
 * 下層共通
-------------------------------------------------*/
.lower-logo {
	position: absolute;
	width: clamp(130px, 20%, 250px);
	top: 20px;
	left: 30px;
	z-index: 2;
}
.lower {
	padding: 80px 0;
	min-height: calc(100vh - 320px);
}
.lower .cont-h2 {
	margin-bottom: .2em;
}
.content {
	width: min(calc(100% - 30px), 900px);
	margin: auto;
}

@media (max-width: 767px) {
	.lower {
		min-height: calc(100vh - 285px);
		padding: 70px 0 50px;
	}
	.lower-logo {
		top: 10px;
		left: 15px;
	}
}

/*-----------------------------------------------
 * NEWS（一覧）
-------------------------------------------------*/
#news ul {
	margin-bottom: 40px;
}
#news .news-list {
	border-top: solid 1px var(--txtColor);
	padding: 0;
}
#news .news-list:last-child {
	border-bottom: solid 1px var(--txtColor);
}
.wp-pagenavi {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.wp-pagenavi .current,
.wp-pagenavi .page {
  display: grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  font-family: var(--titleFont);
  text-decoration: none;
}
.wp-pagenavi .page {
  color: var(--txtColor);
  background-color: #fff;
  border: 1px solid var(--txtColor);
  border-radius: 50%;
  transition: transform 0.3s ease-out;
}
.wp-pagenavi .page:hover {
  opacity: 1;
  transform: scale(1.1);
  transition: var(--popSpeed);
}
.wp-pagenavi .current {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: none;
  border: none;
}
.wp-pagenavi .current::before {
  content: "";
  position: absolute;
  inset: -18%;            /* インクを箱より18%ずつ大きく表示 */
  background: url("../img/num-active-bg.svg") center / contain no-repeat;
  translate: -8% 0;       /* インクを左にずらして、本体の中心を数字に合わせる */
  z-index: -1;            /* 数字の後ろに表示 */
  pointer-events: none;
}

@media (max-width: 767px) {
	#news ul {
		margin-bottom: 50px;
	}
}

/*-----------------------------------------------
 * NEWS DETAIL（記事の共通枠）
-------------------------------------------------*/
#news-detail article,
#story .content,
#goods-detail article .goods-detail-cont,
#music .content,
#special-detail article {
	background-color: var(--contentColor);
	border-radius: 5px;
	padding: 2em 0;
}
.article-title {
	border-bottom: solid 1px var(--txtColor);
	padding: 0 10px 1em;
	margin-bottom: 1.5em;
}
.article-title h3 {
	font-size: 2.4rem;
}
.article-title .news-date {
	padding: 0 0 5px;
}
.article-content {
	padding: 0 10px;
}
.article-content figure {
	margin-bottom: 1.5em;
}
.article-content p {
	margin-bottom: 1em;
	font-weight: 600;
}
.wp-block-embed-youtube .wp-block-embed__wrapper {
	position: relative;
	padding-top: 56.25%;
}
.wp-block-embed-youtube iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
/* youtube非公開用 */
#news-detail .youtube {
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	margin: 1.5em auto;
	transform: none;
	top: 0;
	left: 0;
}
#news-detail iframe[src*="youtu"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

@media (max-width: 767px) {
	.article-title {
		margin-bottom: 0;
	}
	.article-title h3 {
		font-size: 1.8rem;
	}
	.article-content {
		padding-top: 15px;
	}
}

/*-----------------------------------------------
 * STORY
-------------------------------------------------*/
.js-story-cont {
	display: none;
	text-align: center;
}
.js-story-cont.active {
	display: block;
	animation-name: fadeIn;
	animation-fill-mode: forwards;
	animation-duration: 1s;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.story-nav {
	display: flex;
	justify-content: center;
	margin-bottom: 0.5em;
}
.js-nav-list {
	display: inline-block;
	color: var(--subColor);
	background-color: var(--contentColor);
	border: solid 2px var(--subColor);
	text-decoration: none;
	padding: .4em 1em .6em;
	margin: 0 7px 10px;
	font-weight: 600;
}
.js-nav-list.active {
	background-color: var(--subColor);
	color: #fff;
}
.story-title {
	font-family: var(--titleFont);
	display: inline-block;
	font-size: 3.4rem;
	padding: 0 3em;
	margin-bottom: 1em;
}
.title-num {
	margin-right: .5em;
}
.js-story-slider.slick-slider {
	margin-bottom: 2.5em;
}
.js-story-slider .slick-list {
	margin-bottom: 1em;
}
.js-story-slider .slick-dots {
	position: static;
}
.js-story-slider .slick-dots li {
	width: 210px;
	height: 110px;
	margin: 0 7px;
	transition: var(--speed);
	filter: brightness(.7);
}
.js-story-slider .slick-dots li:hover,
.js-story-slider .slick-dots li.slick-active {
	filter: brightness(1);
}
#story .slick-slide img {
	display: block;
}
.story-txt-area {
	text-align: left;
	padding: 2em;
	margin-bottom: 2em;
	font-weight: 700;
}
.story-txt {
	margin-bottom: 1.5em;
}
.story-staffList {
	display: flex;
	flex-wrap: wrap;
}
.story-staffList div {
	display: flex;
	margin-right: 1.5em;
}

@media (max-width: 767px) {
	.story-nav {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.story-title {
		font-size: 2.4rem;
	}
	.js-story-slider .slick-dots {
		display: flex;
	}
	.js-story-slider .slick-dots li {
		width: auto;
		height: auto;
	}
	.js-story-slider .slick-dots li:first-of-type {
		margin-left: 0;
	}
	.js-story-slider .slick-dots li:last-of-type {
		margin-right: 0;
	}
	.story-staffList div {
		width: 100%;
		margin-right: 0;
	}
	.story-staffList dt {
		flex-shrink: 0;
	}
}

/*-----------------------------------------------
 * ON AIR
-------------------------------------------------*/
#onair section,
#special section,
.disc-detail-cont {
	background-color: var(--contentColor);
	margin-bottom: 80px;
}
#onair section.deregula {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-top: calc(166 / 1440 * 100vw - 4vw);             /* 上のインクの縁のスペース */
	margin-bottom: calc(186 / 1440 * 100vw - 3vw);   /* 下のインクの縁のスペース＋次の見出しとの間隔 */
}
.deregula-lists {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	font-family: var(--mainFont);
	margin-bottom: 1.5em;
}
.deregula-item {
	background-color: #fff;
	width: 20.8vw;
}
.deregula-item dt {
	display: block;
	background-color: var(--subColor);
	color: #fff;
	padding: 10px 0;
	text-align: center;
	font-size: 2.1rem;
}
.deregula-item dd {
	color: var(--txtColor);
	padding: 1.1em 0;
	text-align: center;
	font-size: 1.8rem;
}
.deregula-em {
	color: var(--mainColor);
	font-size: 1.8rem;
}
.deregula-caution-area {
	text-align: center;
	width: 43.75vw;
	margin: 0 auto;
}
.deregula-caution {
	color: #fff;
	text-align: left;
}
.onair-detail,
.streaming-detail {
	font-size: 2.1rem;
	border-top: solid 1px var(--txtColor);
	border-bottom: solid 1px var(--txtColor);
	padding: 30px 20px;
	margin-bottom: 1.5em;
}
.cont-h3-music {
	font-size: 4rem;
	font-family: var(--titleFont);
	color: var(--txtColor);
	margin-bottom: .3em;
}
.streaming-list:not(:last-of-type) {
	margin-bottom: 2em;
}
.streaming-title {
	font-size: 1.2em;
	font-weight: 600;
	color: var(--mainColor);
	padding-bottom: .3em;
}
.streaming-list p {
	font-weight: 700;
}
.onair-list div {
	display: flex;
	margin-bottom: 1em;
}
.onair-list div:last-of-type {
	margin-bottom: 0;
}
.onair-list dt {
	width: 23%;
	color: var(--mainColor);
}
.streaming-deregula {
	margin-bottom: 2em;
}
.onair-point {
	display: inline-block;
	background-color: var(--subColor);
	color: #fff;
	padding: .05em .8em 0;
	margin: 0 0 15px;
}
.broadcast-head {
	color: var(--mainColor);
	margin-bottom: .4em;
}
.ondemand-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .8em;
	flex-wrap: wrap;
	margin-top: 1em;
}
.ondemand-list a,
.nolink {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.8rem;
	color: var(--mainColor);
	text-decoration: none;
	text-align: center;
	line-height: 1.4;
	background-color: var(--contentColor);
	border: solid 1px var(--mainColor);
	padding: .7em;
	position: relative;
}
.ondemand-list a:hover {
	background-color: var(--mainColor);
	color: #fff !important;
	opacity: inherit !important;
}
.nolink {
	border-color: var(--txtColor);
}

@media (max-width: 767px) {
	#onair section,
	#special section {
		padding: 1.5em 0;
		margin-bottom: 0;
	}
	#onair section.deregula {
		padding: 20px 30px;
	}
	.deregula-lists {
		display: block;
	}
	.deregula-itemFirst {
		margin-bottom: 1.5em;
	}
	.deregula-item {
		width: 100%;
	}
	.deregula-caution-area {
		width: 100%;
	}
	.cont-h3,
	.cont-h3-wh {
		padding: 0.7em 0;
	}
	.onair-detail,
	.streaming-detail {
		font-size: 1.8rem;
		padding: 15px 10px;
	}
	.onair-point {
		padding: .2em .8em 0;
	}
	.onair-list div {
		flex-wrap: wrap;
	}
	.onair-list dt {
		width: 100%;
	}
	.ondemand-list {
		grid-template-columns: repeat(2, 1fr);
		gap: .6em;
	}
	.icon-only::before {
		width: 35px;
		height: 35px;
		font-size: 1.6rem;
	}
}

/*-----------------------------------------------
 * MUSIC
-------------------------------------------------*/
.music-detail {
	padding: 2em 3em 0;
}
.music-detail .music-inner {
	display: flex;
	flex-wrap: wrap;
}
.music-jacket {
	width: 40%;
}
.music-info {
	font-size: 1.6rem;
	width: 50%;
	padding-left: 3em;
}
.music-title {
	font-family: var(--mainFont);
	font-weight: 700;
	font-size: 3.2rem;
	color: var(--mainColor);
	margin-bottom: 1em;
}
.music-staffList div {
	display: flex;
	align-items: flex-start;
	margin-bottom: 1em;
}
.music-staffList dt,
.disc-info-inner dt,
.goods-info-inner dt {
	width: 6.5em;
	color: #fff;
	text-align: center;
	padding: 3px 0;
	font-size: 1.4rem;
}
.music-staffList dt {
	background: var(--gradationColor, var(--mainColor));
}
.music-staffList dd {
	width: calc(100% - 6.5em);
	padding-left: 1em;
	font-weight: 600;
}
.music-inner {
	font-size: 2.1rem;
	margin-bottom: 1.5em;
}
.music-streaming {
	padding: 0 3em 2em;
}

@media (max-width: 767px) {
	#music section {
		padding: 0;
		margin-bottom: 50px;
	}
	.music-inner {
		font-size: 1.8rem;
	}
	.music-jacket {
		width: 100%;
		margin-bottom: 1.5em;
	}
	.music-info {
		width: 100%;
		padding-left: 0;
	}
	.music-title {
		font-size: 2.4rem;
	}
	.music-staffList div:last-of-type {
		margin-bottom: 0;
	}
	.music-karaoke .ondemand-list div {
		width: 100%;
	}
}

/*-----------------------------------------------
 * GOODS、Blu-ray&DVD、SPECIAL（一覧）
-------------------------------------------------*/
.goods-list,
.disc-list {
	margin-bottom: 80px;
}
.goods-list,
.disc-list,
.special-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.goods-list-item,
.disc-list-item,
.special-list-item {
	width: calc(100% / 3.1);
	border: solid 2px var(--txtColor);
	background-color: var(--contentColor);
	margin: 0 2px 10px;
}
.goods-list-item a,
.disc-list-item a,
.special-list-item a {
	display: block;
	height: calc(100% - 1em); /* margin分を引く */
	text-decoration: none;
	margin: .5em;
}
.goods-list-img,
.disc-list-img {
	height: calc((950px / 3) - 1em); /* PC以上ではcontent内はwidth:1000px */
	margin: 10px 0;
}
.special-list-img {
	height: calc((850px / 3) - 1em);
	margin: 10px 0;
}
.goods-list-img img,
.disc-list-img img,
.special-list-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.goods-list-title,
.disc-list-title,
.special-list-title {
	height: calc(100% - (1000px / 3 - 1em)); /* 画像の高さ分を引く */
	color: var(--txtColor);
	font-weight: 800;
	padding: .5em .7em;
	border-top: none;
}

@media (max-width: 767px) {
	.goods-list,
	.disc-list {
		margin-bottom: 50px;
	}
	.goods-list-item,
	.disc-list-item,
	.special-list-item {
		width: 48%;
	}
	.goods-list-img,
	.disc-list-img {
		height: calc((950px / 5) - 1em);
	}
	.special-list-img {
		height: calc((900px / 5) - 4em);
	}
	.disc-list-title {
		height: calc(100% - (((100vw - 30px) / 2) - 1em));
	}
}

/*-----------------------------------------------
 * GOODS DETAIL
-------------------------------------------------*/
.goods-detail-cont .more-btn a {
	display: block;
	width: 300px;
	padding: 10px 0;
	text-align: center;
	color: #fff;
	background: var(--btnColor, var(--mainColor)); /* --btnColorは削除済みのため予備の色を指定 */
	font-size: 18px;
	font-weight: 800;
	border-radius: 100px;
	text-decoration: none;
	margin: 60px auto 0;
}
.goods-info-inner dt {
	background-color: var(--txtColor);
}
.goods-release {
	font-size: 2.1rem;
	font-family: var(--titleFont);
	color: var(--subColor);
	margin-bottom: 1em;
}
.goods-info-list div {
	margin-bottom: 1em;
	font-weight: 700;
}
.goods-info-list .horizontal {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.goods-info-list dt {
	width: 6em;
	margin-bottom: .5em;
}
.js-goods-slider.slick-slider {
	margin-bottom: 2.5em;
}
.js-goods-slider .slick-list {
	margin-bottom: 1em;
}
.js-goods-slider .slick-dots {
	position: static;
}
.js-goods-slider .slick-dots li {
	width: 210px;
	height: 110px;
	margin: 0 7px;
	transition: var(--speed);
}
.js-goods-slider .slick-dots li:hover,
.js-goods-slider .slick-dots li.slick-active {
	filter: brightness(1);
}
.js-goods-slider .slick-dots li img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: brightness(.7);
}
#goods-detail .slick-slide img {
	margin: 0 auto;
	max-height: 600px;
}
#goods-detail .js-goods-slider .slick-dots li {
	width: 200px;
	height: calc((670px / 3) - 1em);
	border: 2px solid var(--txtColor);
}

@media (max-width: 767px) {
	.goods-detail-cont .more-btn a {
		margin: 10px auto;
	}
	.goods-info-inner .more-btn a {
		width: 100%;
	}
	.goods-release {
		margin-top: 15px;
	}
	.js-goods-slider.slick-slider {
		margin-bottom: 0.5em;
	}
	.js-goods-slider .slick-dots {
		display: flex;
	}
	.js-goods-slider .slick-dots li {
		width: auto;
		height: auto;
	}
	.js-goods-slider .slick-dots li:first-of-type {
		margin-left: 0;
	}
	.js-goods-slider .slick-dots li:last-of-type {
		margin-right: 0;
	}
	#goods-detail .js-goods-slider .slick-dots li {
		height: calc((340px / 3) - 1em);
	}
}

/*-----------------------------------------------
 * Blu-ray&DVD DETAIL
-------------------------------------------------*/
.disc-detail-cont {
	border: none;
	margin-bottom: 40px;
	padding: 2em 2em 4em;
}
.disc-detail-inner {
	margin-bottom: 0;
}
.disc-detail-inner + .benefit {
	margin-top: 3em;
}
.disc-title {
	font-size: 2.1rem;
	font-weight: 900;
	border-bottom: solid 2px var(--txtColor);
	padding-bottom: .8em;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}
.disc-info {
	display: flex;
	flex-wrap: wrap;
}
.disc-img {
	width: 45%;
}
.disc-info-inner {
	width: 55%;
	padding-left: 2em;
}
.disc-info-inner dt {
	background-color: var(--txtColor);
}
.disc-release {
	font-size: 2.1rem;
	font-family: var(--titleFont);
	color: var(--subColor);
	margin-bottom: 1em;
}
.disc-info-list div {
	margin-bottom: 1em;
	font-weight: 700;
}
.disc-info-list .horizontal {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.disc-info-list dt {
	width: 6em;
	margin-bottom: .5em;
}
.horizontal dt {
	margin-bottom: 0;
}
.horizontal dd {
	width: calc(100% - 6em);
	padding-left: 1em;
	font-weight: 600;
}
.has-btn .more-btn {
	margin-top: 3em;
}
/* 特典 */
.benefit-title {
	font-size: 3.1rem;
	font-family: var(--titleFont);
	background: var(--gradationColor, var(--mainColor)); /* --gradationColorは削除済みのため予備の色を指定 */
	text-align: center;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
	margin-bottom: 1em;
}
.shop {
	border-bottom: solid 1px var(--txtColor);
	padding-bottom: 1em;
	margin-bottom: 3em;
}
.shop:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 1em;
}
.shop-name {
	display: inline-block;
	font-size: 1.8rem;
	font-weight: 900;
	background-color: var(--txtColor);
	color: #fff;
	padding: 5px 10px;
	margin-bottom: 1em;
}
.shop .more-btn {
	margin: 0 auto;
	text-align: center;
}
.benefit-list {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 2em;
	position: relative;
}
.benefit-img {
	width: 45%;
}
.benefit-info {
	width: 55%;
	padding-left: 2em;
}
.benefit-item-title {
	font-size: 1.8rem;
	font-weight: 700;
	margin: .5em 0 1em;
}
.benefit-info.no-img {
	width: 100%;
	padding-left: 0;
}

@media (max-width: 1024px) {
	.shop .more-btn {
		right: 7%;
	}
}
@media (max-width: 767px) {
	.disc-title {
		font-size: 1.8rem;
	}
	.disc-img,
	.disc-info-inner,
	.benefit-img,
	.benefit-info {
		width: 100%;
	}
	.disc-info-inner,
	.benefit-info {
		padding-left: 0;
	}
	.disc-img,
	.benefit-img {
		margin-bottom: 1.5em;
	}
	.disc-detail-inner + .benefit {
		margin-top: 2em;
	}
	.shop-name {
		margin-bottom: .2em;
	}
	.benefit-title {
		margin-bottom: 10px;
	}
	.benefit-info {
		order: -1;
	}
	.benefit-info p {
		padding-bottom: 10px;
	}
	.shop .more-btn {
		margin: 0 auto;
		position: initial;
		display: contents;
	}
	#disc-detail .more-btn a {
		margin: 10px auto 0;
		width: 100%;
	}
}

/*-----------------------------------------------
 * COMICS（下層）
-------------------------------------------------*/
#comics .content {
	text-align: center;
}
.comics-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.comics-list-item {
	width: calc(100% / 4);
	margin: 0 0 20px;
}
.comics-list-img {
	width: 94%;
	margin: 0 auto;
}
.comics-list-img img {
	width: 100%;
	border: solid 1px var(--txtColor);
}

@media (max-width: 767px) {
	.comics-list-item {
		width: calc(100% / 3);
		margin: 0 0 10px;
	}
	.comics-txt-title {
		padding: 5px;
	}
	.comics-txt-detile {
		font-size: 24px;
		padding: 5px;
	}
}

/*-----------------------------------------------
 * SPECIAL（詳細）
-------------------------------------------------*/
.special-txt-area {
	padding: 0 15px 20px;
}
.special-img-area {
	padding: 0 15px 40px;
	text-align: center;
}

@media (max-width: 767px) {
	.special-txt-area {
		padding: 0 0 20px;
	}
	.special-img-area {
		padding: 0 0 40px;
	}
}