@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
 * Modal
 * Header
 * Parts
-------------------------------------------------*/
/*-----------------------------------------------
 * Bace
-------------------------------------------------*/
:root{
	/* color */
	--txtColor: #FFFFFF;
	--mainColor: #FFFFFF; /* 見出しカラー */
	--btnTxtColor: #fff; /* ボタンテキストカラー */
	--bgColor: #0D0F23; /* ローディングアニメちらつき防止用 com_bg.jpgに近い色を設定 */
  --gradient: linear-gradient(45deg,rgba(12, 152, 216, 1) 0%, rgba(228, 0, 127, 1) 100%);

	/* font */
	--mainFont: "Noto Sans JP", sans-serif;

	/* 変化速度 */
	--speed: all, .3s, ease, .3s;

}
html {
	font-size: 62.5%; /* 基準を10pxに */
	scroll-behavior: smooth;
}
body {
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-family: var(--mainFont);
	font-feature-settings: "palt";
	font-weight: 500;
	font-size: 1.6em; /* 16px ここだけem指定 */
  color: #FFFFFF !important;
  background-color: #0D0F23 !important;
  background: #0D0F23 !important;
  line-height: 1.6;
	word-wrap: break-word;
	overflow-x: hidden;
	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: #0D0F23;
}
::-webkit-scrollbar-thumb {
	background: var(--mainColor);
	border-radius: 4px;
	margin: 2px;
	box-shadow: none;
}
html{
	scrollbar-color: var(--mainColor) #0D0F23;
	scrollbar-width: thin;
}
/*loading時のちらつき sliderの計算に不具合が出るので保留*/
/*#top,#top-en,#top-fr,footer {
	display: none;
}*/
li {
  list-style: none;
}

/*-----------------------------------------------
 * 共通
-------------------------------------------------*/
.cont-h2 {
	font-size: 6.6rem;
	font-family: var(--mainFont);
  line-height: 1.0;
	color: var(--mainColor);
	text-align: center;
  font-weight: 900;
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-style: oblique;
}

.cont-h2 span {
  background: linear-gradient(to right, #89CAEA 0%, #EE82C0 100%);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 28%;
}


/*-----------------------------------------------
 * header
-------------------------------------------------*/
header {
  width: 100%;
}
.header-inner {
  padding: 5px 50px;
  box-sizing: border-box;
  position: fixed;
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  z-index: 1;
  height: 50px;
}
.h-wh {
 background-image: linear-gradient(0deg, transparent 2%, #71f9fb);
 border-bottom: 1px solid #fff;
}
.h-bk {
  background-color: #00d0d3;
}
/* 暗いヘッダーの時のアイコン表示 */
.h-bk .icon-w { display: block; }
.h-bk .icon-b { display: none; }

/* 明るいヘッダーの時のアイコン表示 */
.h-wh .icon-w { display: none; }
.h-wh .icon-b { display: block; }
.menu-logo {
  max-width: 300px;
}
ul.menu-list{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
ul.menu-list li {
  width: 60px;
  margin: 0 0 0 20px;
}
ul.menu-list li:first-child {
  width: 32px;
}


/*-----------------------------------------------
 * footer
-------------------------------------------------*/
footer {
	padding: 60px 50px 35px;
	text-align: center;
	position: relative;
  background-image: linear-gradient(#39386c, #06232d);
  color: #FFF;
}
footer a {
  text-decoration: none;
}
.fooetr-innr {
  display: flex;
  justify-content: space-between;
}
.footer-right ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 15px;
}
.footer-right ul li {
  width: 42px;
  margin: 0 5px;
}
.footer-right ul li:first-child {
  width: 24px;
}
.footer-link {
  margin-bottom: 12px;
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.first-link::after {
  content: "｜";
  padding: 0 5px;
}
.footer-link span {
  margin: 0 0 5px 5px;
}
.copyright {
	font-size: 1.2rem;
  text-align: right;
}

#works-detail {
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
}
.event-fv-area {
  width: 100%;
}
.event-fv-area img {
  width: 100%;
}
.streaming-list {
  margin: 20px 10px;
}
.h2hidden {
  font-size: 0% !important;
  padding: 0 !important;
  height: 0 !important;
}
h2 {
  font-size: 28px;
  font-weight: 900;
  background-color: #595979;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
}

h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

ul.ondemand-list {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(4, 1fr); /* PC:4列 */
}

ul.ondemand-list li {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 画像コンテナを3:4比率に固定 */
ul.ondemand-list li img {
  width: 100%;                /* 横幅100% */
  aspect-ratio: 3 / 4;        /* 3:4 の比率に固定 */
  object-fit: cover;           /* はみ出す部分は切り取る */
  border-radius: 5px;
  display: block;
}

/* タイトルを中央揃え */
ul.ondemand-list li p {
  text-align: center;
  margin-top: 5px;
  font-size: 1.4rem;
}

/* SP対応：タブレット〜スマホ */
@media (max-width: 768px) {
  ul.ondemand-list {
    grid-template-columns: repeat(3, 1fr); /* 3列 */
  }
}

@media (max-width: 480px) {
  ul.ondemand-list {
    grid-template-columns: repeat(2, 1fr); /* 2列 */
  }
}

ul.ondemand-list li img {
  border-radius: 5px;
}

.copyright-area {
  font-size: 10px;
  font-weight: normal;
  margin: 20px 0;
}

.comics-list-img img {
  border-radius: 5px;

}