@charset "UTF-8";

.number-animation{
	position: absolute;
	width:6.5%;
	right:34.5%;
	top:20.7%;
}

.count-base{
	height:auto;
	width: 100%;
	display: block;
	position: relative;
	line-height: 0;
	opacity: 0;
}

.count{
	position: absolute;
	line-height: 0;
	top:0;
	left:0;
	opacity: 0;
}

@media screen and (max-width: 767px) {
	.number-animation{
		position: absolute;
		width:13%;
		right:19%;
		top:36%;
	}

	.modaal-inner-wrapper {
		display: table-cell;
		width: 100%;
		height: 100%;
		position: relative;
		vertical-align: middle;
		text-align: center;
		padding: 80px 0px !important;
	}
}

/*news*/
/* =========================================
   TOP NEWS LIST
   通常：画像なし
   .newsThumbList--grid：画像ありグリッド
========================================= */

#news {
  /* background-color: var(--background-color); */
}

.news-top {
  width: 90%;
  max-width: 1280px;
  margin: auto;
}

.container-news {
  margin-top: 5rem;
  min-height: 50vh;
}

/* -----------------------------------------
   共通
----------------------------------------- */

.newsThumbList {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.newsThumbCard {
  position: relative;
  display: block;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid hsla(0, 0%, 100%, 0.14);
  background: var(--color-06);
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.newsThumbCard:hover {
  border-color: hsla(0, 0%, 100%, 0.24);
  background: var(--color-05b);
}

.newsThumbCard__date {
  color:var(--color-07);
  font-size: clamp(1rem, 0.964rem + 0.18vw, 1.1rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  font-family: var(--base-font-family2);
}

.newsThumbCard__title {
  color: #ffffff;
  font-size: var(--font-size-large);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.02em;
  word-break: break-word;
}

.newsThumbCard__arrow {
  position: absolute;
  top: 50%;
  right: 28px;
  z-index: 3;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.72);
  font-size: 3.4rem;
  line-height: 1;
  transition:
    transform 0.25s ease,
    color 0.25s ease,
    opacity 0.25s ease;
}

.newsThumbCard:hover .newsThumbCard__arrow {
  transform: translateY(-50%) translateX(4px);
  color: rgba(255, 255, 255, 1);
  opacity: 1;
}

/* -----------------------------------------
   通常版（画像なし）
----------------------------------------- */

.newsThumbList:not(.newsThumbList--grid) .newsThumbCard {
  min-height: 148px;
}

.newsThumbList:not(.newsThumbList--grid) .newsThumbCard__thumb {
  display: none;
}

.newsThumbList:not(.newsThumbList--grid) .newsThumbCard::before {
  display: none;
}

.newsThumbList:not(.newsThumbList--grid) .newsThumbCard__label {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  min-width: 188px;
  padding: 10px 18px 9px;
  background: var(--color-04);
  color: #fff;
  font-family: var(--base-font-family2);
  font-size: clamp(0.9rem, 0.864rem + 0.18vw, 1rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
}

.newsThumbList:not(.newsThumbList--grid) .newsThumbCard__body {
  position: relative;
  z-index: 3;
  min-height: 148px;
  padding: 38px 96px 30px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.newsThumbList:not(.newsThumbList--grid) .newsThumbCard__date {
  margin-bottom: 16px;
}

/* -----------------------------------------
   グリッド版（画像あり）
----------------------------------------- */

.newsThumbList--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.newsThumbList--grid .newsThumbCard {
  min-height: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.newsThumbList--grid .newsThumbCard__thumb {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
  line-height: 0;
}

.newsThumbList--grid .newsThumbCard__thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.newsThumbList--grid .newsThumbCard:hover .newsThumbCard__thumb img {
  transform: scale(1.05);
  opacity: 0.95;
}

.newsThumbList--grid .newsThumbCard__body {
  position: relative;
  z-index: 3;
  padding: 20px 18px 22px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--color-06);
  flex: 1 1 auto;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

/* ラベルは本文ボックス右上に貼り付け */
.newsThumbList--grid .newsThumbCard__label {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  min-width: 132px;
  padding: 9px 14px 8px;
  background: var(--color-04);
  color: #fff;
  font-family: var(--base-font-family2);
  font-size: clamp(0.72rem, 0.684rem + 0.18vw, 0.82rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* 日付は左 */
.newsThumbList--grid .newsThumbCard__date {
  margin-bottom: 12px;
  font-size: clamp(0.8rem, 0.764rem + 0.18vw, 0.9rem);
  line-height: 1;
  padding-right: 148px;
}

.newsThumbList--grid .newsThumbCard__title {
  font-size: clamp(0.95rem, 0.877rem + 0.36vw, 1.15rem);
  line-height: 1.6;
}

/* 画像以外の部分の hover を画像なし版に寄せる */
.newsThumbList--grid .newsThumbCard:hover .newsThumbCard__body {
  background: var(--color-05b);
}

.newsThumbList--grid .newsThumbCard:hover .newsThumbCard__label {
  background: var(--color-04);
  color: #fff;
}

.newsThumbList--grid .newsThumbCard__arrow {
  top: auto;
  bottom: 14px;
  right: 16px;
  transform: none;
  font-size: 2rem;
}

.newsThumbList--grid .newsThumbCard:hover .newsThumbCard__arrow {
  transform: translateX(4px);
}

/* -----------------------------------------
   Tablet
----------------------------------------- */

@media screen and (max-width: 1024px) {
  .newsThumbList:not(.newsThumbList--grid) .newsThumbCard {
    min-height: 132px;
  }

  .newsThumbList:not(.newsThumbList--grid) .newsThumbCard__body {
    min-height: 132px;
    padding: 30px 74px 24px 28px;
  }

  .newsThumbList:not(.newsThumbList--grid) .newsThumbCard__label {
    min-width: 168px;
    padding: 9px 14px 8px;
  }

  .newsThumbList:not(.newsThumbList--grid) .newsThumbCard__title {
    font-size: clamp(1.25rem, 1.105rem + 0.73vw, 1.65rem);
  }

  .newsThumbList:not(.newsThumbList--grid) .newsThumbCard__arrow {
    right: 22px;
    font-size: 2.8rem;
  }

  .newsThumbList--grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .newsThumbList--grid .newsThumbCard__body {
    padding: 18px 16px 20px;
  }

  .newsThumbList--grid .newsThumbCard__label {
    min-width: 120px;
    padding: 8px 12px 7px;
    font-size: 0.74rem;
  }

  .newsThumbList--grid .newsThumbCard__date {
    padding-right: 132px;
  }
}

/* -----------------------------------------
   SP
----------------------------------------- */

@media screen and (max-width: 767px) {
  .news-top {
    width: 95%;
  }

  .container-news {
    margin-top: 3rem;
    min-height: 50vh;
  }

  .newsThumbList {
    gap: 10px;
    width:90%;
    margin: auto;
  }

  /* 画像なし */
  .newsThumbList:not(.newsThumbList--grid) .newsThumbCard {
    min-height: 104px;
  }

  .newsThumbList:not(.newsThumbList--grid) .newsThumbCard__label {
    min-width: 116px;
    padding: 8px 10px 7px;
    font-size: 0.72rem;
  }

  .newsThumbList:not(.newsThumbList--grid) .newsThumbCard__body {
    min-height: 104px;
    padding: 20px 42px 18px 16px;
  }

  .newsThumbList:not(.newsThumbList--grid) .newsThumbCard__date {
    margin-bottom: 10px;
    font-size: 0.8rem;
  }

  .newsThumbList:not(.newsThumbList--grid) .newsThumbCard__title {
    font-size: 1rem;
    line-height: 1.45;
  }

  .newsThumbList:not(.newsThumbList--grid) .newsThumbCard__arrow {
    right: 12px;
    font-size: 2rem;
  }

  /* 画像あり */
  .newsThumbList--grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .newsThumbList--grid .newsThumbCard__body {
    padding: 14px 14px 18px;
  }

  .newsThumbList--grid .newsThumbCard__label {
    min-width: 108px;
    padding: 7px 10px 6px;
    font-size: 0.68rem;
  }

  .newsThumbList--grid .newsThumbCard__date {
    margin-bottom: 10px;
    font-size: 0.8rem;
    padding-right: 118px;
  }

  .newsThumbList--grid .newsThumbCard__title {
    font-size: 1rem;
    line-height: 1.5;
  }

  .newsThumbList--grid .newsThumbCard__arrow {
    right: 10px;
    bottom: 10px;
    font-size: 1.6rem;
  }
}
/*----------------------------
*/

.container-news{
	margin-top: 5rem;
	min-height: 50vh;
}

.news-set{
	position: relative;
	border: 1px solid hsla(0,0%,100%,0.2);
	padding: 3rem 3rem;
	background: hsla(0, 0%, 0%, 0.32);
}

.news-set{
	position: relative;
	padding: 4.5rem 3rem 3rem;
}

.news-set .newsThumbCard__label{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	min-width: 188px;
	padding: 10px 18px 9px;
	background: var(--color-04);
	color: #fff;
	font-family: var(--base-font-family2);
	font-size: clamp(0.9rem, 0.864rem + 0.18vw, 1rem);
	line-height: 1;
	letter-spacing: 0.04em;
	text-align: center;
}

@media screen and (max-width: 767px) {
  .news-set{
    padding: 3.25rem 1rem 1rem;
  }

  .news-set .newsThumbCard__label{
    min-width: 116px;
    padding: 8px 10px 7px;
    font-size: 0.72rem;
  }
}

.news-set hr{
	border: none;
	height: 1px;
	background: hsla(0,0%,100%,0.20);
	margin: 1.5rem 0;
}

.news-text-item{
	position: relative;
	width: 100%;
	line-height: 1.9rem;
}

.news-text-item.about{
	position: relative;
	width: 100%;
	line-height: 1.8rem;
}

.news-name{
	margin-bottom: 1rem;
	position: relative;
	color:#525252;
	font-size:clamp(1.4rem, 1.327rem + 0.36vw, 1.6rem);
	line-height: 2rem;
}

.news-name.about{
	text-align: center;
}

.name2{
	font-size:70%;
	margin-left: 0rem;
}

.news__title{
	color: var(--title-font-color);
	font-weight: 700;
	margin-bottom: 1.5rem;
	font-size:clamp(1.3rem, 1.045rem + 1.27vw, 2rem);
	text-align: left;
	line-height: 2.5rem;
}

.news__bold,
strong{
	color: var(--color-02);
	font-weight:var(--font-weight-bold2);
}

.news__yellow{
	color: var(--color-02)!important;
}

.news__white{
	color: var(--color-02)!important;
}

.news__large{
	font-size:clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
	color: var(--link-font-color);
	font-weight:var(--font-weight-bold2);
}

.news__small{
	font-weight: 500;
	font-size:clamp(0.7rem, 0.664rem + 0.18vw, 0.8rem);
	line-height: 1.5;
}

.news-text-item p{
	margin-bottom: 1rem;
}

p.news__margin {
	margin-bottom: 1.25rem;
}

.news__img{
	position: relative;
	width:100%;
	margin:2rem auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.news__img_v{
	width:80%;
}

.news__img_v2{
	width:70%;
}

.news-footer__set{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
}

.news-footer_bt1{
}

.news-footer_bt2{
	margin:0 1rem;
	line-height:100px;
}

.news-footer_bt2 a{
}

.news__youtube{
	width: 82%;
	margin: 2rem auto;
}

#traileriframe{
}

.trailer_narrow{
	max-width: 800px;
}

.news__date {
	font-family: var(--base-font-family);
	margin-bottom: 0.5rem;
}

@media screen and (max-width: 767px) {
	.container-news{
		margin-top: 3rem;
		min-height: 50vh;
	}

	.news-set{
		padding: 1rem 1rem;
	}

	.news__title{
		margin-bottom: 1rem;
		line-height: 1.6rem;
	}
	
	.news-text-item{
		line-height: 1.7rem;
	}
	
	.news__img{
		position: relative;
		width:100%;
		margin:1.5rem auto;
	}
	
	.news__img_v{
		width:85%;
	}
	
	.news-footer__set{
		margin:2rem 0;
	}
	
	.news-footer_bt1{
		width:46px;
	}

	.news-footer_bt2{
		margin:0 0.5rem;
		height: 100%;
	}
	
	.news__youtube{
		width:100%;
		margin:1rem auto;
	}
}

/*about the movie*/

.bg-color_black{
	position: relative;
	background-color: hsla(0,0%,0%,0.4);
}

.bg-color_black2{
	position: relative;
	background-color: hsla(240,2%,11%,1.00);
}

#about{
	position: relative;
}

.bg-wrapper{
	position: fixed;
	width: 100%;
	top: 0;
	background-image: url("../img/common/base_01.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	height: 100vh;
	z-index: 0;
}

.scroll-contents {
	position:relative;
	margin: auto;
	left: 0;
	right: 0;
	overflow: hidden;
	width:100%;
	z-index: 10;
	height:auto;
}

.center-max{
	position:relative;
	margin:auto;
	width:95%;
	max-width: 1200px;
}

.contents__about{
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: auto;
}

#intro_01{
	margin-top:10vh;
}

#intro_02{
	margin-top:40vh;
	margin-bottom:10vh;
}

#story{
	position: relative;
	background-color:hsla(51,100%,50%,0.87);
	padding-top:10vh;
	padding-bottom:10vh;
}

@media screen and (max-width: 767px) {
	.bg-wrapper{
		position: fixed;
		width: 100%;
		top: 0;
		background-image : none;
	}
    
	.bg-wrapper::before {
		content: "";
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100vh;
		background-repeat: no-repeat;
		background-position: center bottom;
		background-image: url(../img/common/base_01_sp.webp);
		background-size: cover;
	}
    
	.scroll-contents {
		position:relative;
		margin: auto;
		left: 0;
		right: 0;
		overflow: hidden;
		max-width: 100%;
		width:100%;
		z-index: 10;
		height:auto;
	}
}

/*ムビチケ*/

.mvtk__area{
	position: relative;
	max-width: 840px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.mvtk__bnr{
	max-width: 480px;
}

#mvtk-widgets-container{
	width: 342px;
	margin:auto;
	left:0;
	right:0;
}

@media screen and (max-width: 767px) {
	.mvtk__area{
		position: relative;
		max-width:342px;
		width: 100%;
	}
}

/*tween24*/

#box{
}

.box{
	opacity: 0;
	position: relative;
	width:50px;
	height:50px;
	margin-bottom: 1rem;
	background-color: aqua;
}

/*gallery*/

/*thumb*/

.gallery-thumb{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.gallery-thumb__item{
	width:19.5%;
	border: 1px solid hsla(43,100%,66%,0.6);
	transition: all .3s;
	opacity: 0.8;
	margin-bottom: 5px;
}

.gallery-thumb__item:hover {
	border: 1px solid hsla(43,100%,66%,1.00);
	opacity: 1;
}

@media screen and (max-width: 767px) {
	.gallery-thumb__item{
		width:49%;
	}
}

/*slick*/

.top-gallery{
	position: absolute;
	right: 0.5%;
	top: 45%;
	width: 25%;
}

.top-gallery-inner{
	position: absolute;
	width:80%;
	top:20%;
	left:10%;
}

.slideWrapper2{
	position: relative;
	width:100%;
}

.modal-gallery{
	position: relative;
	width:100%;
	height: 100%;
	max-width: 1200px;
	margin: auto;
}

.modal-gallery-inner{
	position: relative;
	width: 100%;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.gallerytitle{
	text-align: center;
}

.modaal-fullscreen .modaal-container {
	max-width: none;
	height: 100vh;
	overflow: auto;
}

.modaal-fullscreen .next-arrow {
	right: 10px;
}

.modaal-fullscreen .prev-arrow{
	left: 10px;
}

.modaal-content,
.modaal-content-container{
	height: 100%;
	padding:0;
}

@media screen and (max-width: 767px) {
	.top-gallery{
		position: relative;
		right:auto;
		top:auto;
		width:100%;
	}

	.top-gallery-inner{
		position: absolute;
		width:100%;
		top:18%;
		left:0;
		right:0;
		margin: auto;
	}

	.slideWrapper2{
		position: relative;
		width:100%;
	}
	
	#gallery-item_sp .slick-slide img {
		border: 1px solid hsla(43,100%,66%,0.6);
	}
}

/*gallery-item*/

#gallery-item .slick-arrow {
	position: absolute;
	width: auto !important;
	max-width: auto !important;
	top: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	transition: 0.2s ease-in-out;
}

#gallery-item .next-arrow {
	right:-4%;
}

#gallery-item .prev-arrow {
	left:-4%;
}

/*dots*/

#gallery-item .slick-dots {
	position: absolute;
	bottom:auto;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
	z-index: 100;
	line-height: 0;
	margin-top:6px;
}

#gallery-item .slick-dots li {
	position: relative;
	display: inline-block;
	width: 12px;
	height: auto;
	margin: 0 0px;
	padding: 0;
	cursor: pointer;
}

#gallery-item .slick-dots li button {
	font-size: 0;
	line-height: 0;
	display: block;
	width: 12px;
	height: auto;
	padding: 0px;
	cursor: pointer;
	color: transparent;
	border: 0;
	outline: none;
	background: transparent;
}

#gallery-item .slick-dots li button:before {
	font-family: 'slick';
	font-size:clamp(0.313rem, 0.196rem + 0.24vw, 0.5rem);
	line-height:0;
	position: absolute;
	top: 0;
	left: 0;
	content: '•';
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media screen and (max-width: 767px) {
	#gallery-item .slick-arrow {
		position: absolute;
		width: auto !important;
		max-width: auto !important;
		top: 0;
		bottom: 0;
		margin: auto;
		cursor: pointer;
		transition: 0.2s ease-in-out;
	}

	#gallery-item .next-arrow {
		right:-4%;
	}

	#gallery-item .prev-arrow {
		left:-4%;
	}

	#gallery-item .slick-dots {
		position: absolute;
		bottom:auto;
		display: block;
		width: 100%;
		padding: 0;
		margin: 0;
		list-style: none;
		text-align: center;
		z-index: 100;
		line-height: 0;
		margin-top:6px;
	}

	#gallery-item .slick-dots li {
		position: relative;
		display: inline-block;
		width: 12px;
		height: auto;
		margin: 0 0px;
		padding: 0;
		cursor: pointer;
	}

	#gallery-item .slick-dots li button {
		font-size: 0;
		line-height: 0;
		display: block;
		width: 12px;
		height: auto;
		padding: 0px;
		cursor: pointer;
		color: transparent;
		border: 0;
		outline: none;
		background: transparent;
	}

	#gallery-item .slick-dots li button:before {
		font-family: 'slick';
		font-size:clamp(0.313rem, 0.196rem + 0.24vw, 0.5rem);
		line-height:0;
		position: absolute;
		top: 0;
		left: 0;
		content: '•';
		text-align: center;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

/*countdown*/

.countdown{
	position: absolute;
	width:15%;
	top:40px;
	left:1%;
}

.countdown_base{
	position: absolute;
	top:0;
	left:0;
}

.countdown_text{
	position: absolute;
	top:35%;
	left:31%;
	font-size:clamp(0.8rem, 0.152rem + 3.24vw, 4.2rem);
	color: #fff;
	text-shadow: 0px 0px 10px #ff4800;
}

.countdown_text2{
	position: absolute;
	top:47%;
	left:61%;
	font-size:clamp(0.4rem, 2vw, 2.5rem);
	color: #fff;
	text-shadow: 0px 0px 10px #ff4800;
}

@media screen and (max-width: 767px) {
	.countdown{
		position: absolute;
		width:35%;
		top:22%;
		left:auto;
		right:3%;
	}
	
	.countdown_text{
		position: absolute;
		top:35%;
		left:32%;
		font-size:clamp(1.4rem, -0.142rem + 8.22vw, 3.8rem);
		color: #fff;
		text-shadow: 0px 0px 10px #ff4800;
	}

	.countdown_text2{
		position: absolute;
		top:47%;
		left:62%;
		font-size:clamp(0.8rem, -0.164rem + 5.14vw, 2.3rem);
		color: #fff;
		text-shadow: 0px 0px 10px #ff4800;
	}
}

/*bannerエリア*/

.section__dark{
	background-color:#652133;
}

.tab-content {
	max-width: 1200px;
	margin: auto;
	width:90%;
	padding:3rem 0 1rem;
}

.tab-content2 {
	max-width: 1400px;
}

.category__list {
	max-width: 1000px;
	margin: auto;
	width:90%;
	display: flex;
}

.category__link,
.category__link2{
	display: block;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	color: hsla(0,0%,82%,1.00);
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	padding: 20px 5px 15px;
	border-radius: 6px 6px 0 0;
	transition-duration: 0.3s;
	cursor: pointer;
}

.category__link:hover,
.category__link2:hover{
	color: hsla(0,0%,100%,1);
}

.category__link[aria-current],
.category__link.current{
	background-color:#652133;
	color:var(--link-font-color);
}

.category__link2[aria-current],
.category__link2.current{
	background-color:#652133;
	color:var(--link-font-color);
}

.category__item {
	width: calc((100% - 0px) / 3);
}

@media screen and (max-width: 767px) {
	.category__list {
		max-width: 1000px;
		margin: auto;
		width:100%;
		flex-wrap: nowrap;
	}	
	
	.category__link,
	.category__link2{
		padding: 10px 5px;
	}

	.category__item {
		width: 100%;
	}
}

.cardList .card {
	display: block;
	border: 1px solid var(--link-border-color);
	text-decoration: none;
	transition: color .3s;
	background-color:var(--background-color2);
	height: 100%;
	transition: all .3s;
}

.cardList .card:hover {
	border: 1px solid var(--link-border-color2);
}

.cardList.tab_list{
	grid-template-columns: repeat(4,1fr);
	grid-auto-rows: minmax(100px, auto);
}

.tab_list .card__text__base{
	position: relative;
	padding: 15px 15px;
	height: auto;
	min-height: auto;
}

.tab_list .card__text__base .card__text__base2{
	min-height: 3rem;
}

.tab_list .card__txt {
	font-size: clamp(0.85rem, 0.795rem + 0.27vw, 1rem);
	line-height: 1.5rem;
	text-align: center;
}

@media screen and (max-width: 767px) {
	.cardList.tab_list{
		grid-template-columns: repeat(2,1fr);
		grid-auto-rows: minmax(100px, auto);
	}
}

.home_logo{
	position: fixed;
	left:25px;
	top:13px;
	width:46px;
	z-index: 990;
}

@media screen and (max-width: 767px) {
	.home_logo{
		position: fixed;
		left:10px;
		top:10px;
		width:40px;
	}
}

/* =========================================
   NAV OVERLAY
   安定版
========================================= */

#g-nav.nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 998;
	width: 100% !important;
	height: 100vh !important;
	right: auto !important;
	background-color: rgba(0, 0, 0, 0.92) !important;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

#g-nav.nav-overlay.panelactive {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.nav-overlay__bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(circle at 50% 18%, rgba(255,255,255,0.06), rgba(255,255,255,0) 32%),
		linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.22) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	clip-path: none;
	filter: none;
	transform: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

#g-nav.nav-overlay.panelactive .nav-overlay__bg {
	opacity: 1;
}

.nav-overlay__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	padding: 24px 56px 36px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.nav-overlay__top {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

#g-nav.nav-overlay .g-nav_logo {
	position: relative;
	top: auto;
	left: auto;
	width: var(--g-nav-logo-width, 300px);
	max-width: var(--g-nav-logo-max-width, 45vw);
	display: block;
	opacity: 1;
	z-index: auto;
}

#g-nav.nav-overlay .g-nav-menu {
	list-style: none;
	width: min(560px, 100%);
	margin: 0 auto;
	padding: 0;
	position: static;
	display: block;
	text-align: center;
}

/* =========================================
   NAV ITEM
========================================= */

#g-nav.nav-overlay .nav-item {
	position: relative;
	list-style: none;
	text-align: center;
	opacity: 1;
	transform: none;
}

#g-nav.nav-overlay .nav-item::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 100%;
	height:var(--nav-item-border-height);
	background: linear-gradient(
		90deg,
		rgba(255,255,255,0) 0%,
		hsla(0,0%,100%,0.22) 20%,
		hsla(0,0%,100%,0.28) 50%,
		hsla(0,0%,100%,0.22) 80%,
		rgba(255,255,255,0) 100%
	);
	transform: translateX(-50%) translateY(0);
	transition:
		transform 0.28s ease,
		filter 0.28s ease,
		background 0.28s ease;
}

#g-nav.nav-overlay .nav-item a {
	position: relative;
	display: block;
	width: 100%;
	padding: 18px 0 16px;
	margin: 0;
	color: hsla(0,0%,100%,0.5);
	text-decoration: none;
	font-family: var(--base-font-family2);
	font-size: clamp(1.15rem, 1.032rem + 0.59vw, 1.5rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.15;
	transition:
		color 0.45s ease,
		text-shadow 0.45s ease,
		transform 0.25s ease;
}

#g-nav.nav-overlay .nav-label {
	display: inline-block;
	font-size: inherit;
}

#g-nav.nav-overlay .underline {
	display: none !important;
}

#g-nav.nav-overlay .nav-item:hover a {
	color: #ffffff;
	text-shadow:
		0 0 10px rgba(255,255,255,0.45),
		0 0 18px rgba(255,255,255,0.28),
		0 0 26px rgba(255,255,255,0.14);
}

#g-nav.nav-overlay .nav-item:hover::after {
	transform: translateX(-50%) translateY(-4px);
	filter: brightness(1.5);
	background: linear-gradient(
		90deg,
		rgba(255,255,255,0) 0%,
		hsla(0,0%,100%,0.34) 20%,
		hsla(0,0%,100%,0.48) 50%,
		hsla(0,0%,100%,0.34) 80%,
		rgba(255,255,255,0) 100%
	);
}

/* =========================================
   SUB MENU
========================================= */

.nav-overlay__sub {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px 22px;
	flex-wrap: wrap;
	opacity: 1;
	transform: none;
}

.nav-overlay__sub a {
	position: relative;
	color: hsla(0,0%,100%,0.58);
	text-decoration: none;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	line-height: 1.2;
}

.nav-overlay__sub a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 1px;
	background: hsla(0,0%,100%,0.7);
	transition: width 0.22s ease;
}

.nav-overlay__sub a:hover {
	color: #fff;
}

.nav-overlay__sub a:hover::after {
	width: 100%;
}

/* body lock */
body.is-nav-open {
	overflow: hidden;
}

/* =========================================
   OPEN BUTTON
========================================= */

.openbtn {
	position: fixed;
	top: 3px;
	right: 0;
	z-index: 999;
	width: 100px;
	height: 76px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.openbtn span {
	position: absolute;
	left: 50%;
	height: 3px;
	background: #fff;
	transform: translateX(-50%);
	transition:
		transform 0.28s ease,
		opacity 0.22s ease,
		top 0.28s ease,
		width 0.28s ease,
		background-color 0.2s ease;
}

/* 1本目 */
.openbtn span:nth-child(1) {
	top: 23px;
	width: 44px;
}

/* 2本目 */
.openbtn span:nth-child(2) {
	top: 35px;
	width: 44px;
}

/* 3本目 */
.openbtn span:nth-child(3) {
	top: 47px;
	width: 14px;
	left: calc(50% - 15px);
}

/* hover */
.openbtn:hover span {
	background: hsla(0,0%,100%,0.85);
}

/* active時にX */
.openbtn.active span:nth-child(1) {
	top: 35px;
	width: 44px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
}

.openbtn.active span:nth-child(2) {
	opacity: 0;
}

.openbtn.active span:nth-child(3) {
	top: 35px;
	width: 44px;
	left: 50%;
	transform: translateX(-50%) rotate(-45deg);
}

/* =========================================
   RESPONSIVE
========================================= */

@media screen and (max-width: 767px) {
	.nav-overlay__inner {
		padding: 18px 22px 26px;
	}

	#g-nav.nav-overlay .g-nav_logo {
		width: var(--g-nav-logo-width-sp, 50%);
		max-width: var(--g-nav-logo-max-width, 45vw);
	}

	#g-nav.nav-overlay .g-nav-menu {
		width: 100%;
		max-width: 420px;
	}

	#g-nav.nav-overlay .nav-item a {
		padding: 16px 0 14px;
		font-size: clamp(1rem, 0.891rem + 0.55vw, 1.25rem);
		letter-spacing: 0.12em;
	}

	.nav-overlay__sub {
		gap: 12px 16px;
	}

	.nav-overlay__sub a {
		font-size: 0.72rem;
		letter-spacing: 0.10em;
	}

	.openbtn {
		top: 0px;
		width: 64px;
		height: 64px;
	}

	.openbtn span {
		height: 3px;
	}

	.openbtn span:nth-child(1) {
		top: 19px;
		width: 36px;
	}

	.openbtn span:nth-child(2) {
		top: 29px;
		width: 36px;
	}

	.openbtn span:nth-child(3) {
		top: 39px;
		width: 12px;
		left: calc(50% - 12px);
	}

	.openbtn.active span:nth-child(1) {
		top: 29px;
		width: 36px;
		left: 50%;
	}

	.openbtn.active span:nth-child(3) {
		top: 29px;
		width: 36px;
		left: 50%;
	}
}

/* =========================================
   MODAAL FRONT
========================================= */

.modaal-wrapper,
.modaal-outer-wrapper,
.modaal-inner-wrapper,
.modaal-container {
	z-index: 99990 !important;
}

.modaal-close {
	z-index: 100000 !important;
	opacity: 1 !important;
}

.modaal-close:focus,
.modaal-close:hover {
	opacity: 1 !important;
}

/*YTPlayer*/

.ytplayer-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 1;
	background-color: hsla(0,0%,0%,0.3);
}

.ytplayer-overlay {
	background-color: #000;
	opacity: 0.2;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
}

/* top-bt scroll control */
#top-bt{
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(12px);
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease,
		transform 0.3s ease;
}

#top-bt.is-show{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* ===============================
   YouTube background
   #pc_top_00 の透過PNGを基準にする版
=============================== */

.mainVisual{
	position: relative;
	overflow: hidden;
}

#pc_top_00{
	position: relative;
	z-index: 1;
	line-height: 0;
}

#pc_top_00 picture,
#pc_top_00 img{
	display: block;
	width: 100%;
	height: auto;
}

.ytplayer-wrapper{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 2;
	pointer-events: none;
	background-color: transparent;
}

.video-fallback{
	position: absolute;
	inset: 0;
	z-index: 0;
	line-height: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s ease;
	pointer-events: none;
}

.video-fallback picture,
.video-fallback img{
	display: block;
	width: 100%;
	height: 100%;
}

.video-fallback img{
	object-fit: cover;
	object-position: center center;
}

#videoPlay{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.35s ease;
}

#videoPlay iframe{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	max-width: none;
	pointer-events: none;
}

#videoPlay.is-ready{
	opacity: 1;
}

.ytplayer-wrapper.is-fallback-visible .video-fallback{
	opacity: 1;
	visibility: visible;
}

.ytplayer-overlay{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.2);
	z-index: 2;
	pointer-events: none;
}

.top_logo,
.mainVisual__layer{
	position: absolute;
	z-index: 3;
}

@media screen and (max-width: 767px){
	.mainVisual{
		position: relative;
		overflow: hidden;
		margin-top:0px;
	}

	#pc_top_00{
		position: relative;
		z-index: 1;
	}

	.ytplayer-wrapper{
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 2;
	}

	#videoPlay{
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
}

.header-base{
	overflow: hidden;
}

.header-base_black{
	height: 80px;
	opacity: 1;
}

.header-base_shadow picture,
.header-base_shadow img{
	display: block;
}

/* =========================================
   TRAILER
   1件時は中央寄せ・最大幅1000px
========================================= */

#trailer-item.is-single {
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#trailer-item.is-single .slick-list {
	margin: 0 !important;
	overflow: hidden;
}

#trailer-item.is-single .slick-track {
	display: flex;
	justify-content: center;
}

#trailer-item.is-single .slick-slide {
	float: none;
	height: auto;
}

#trailer-item.is-single .sliderwaku {
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#trailer-item.is-single .slick-arrow,
#trailer-item.is-single .slick-dots {
	display: none !important;
}

@media screen and (max-width: 1024px) {
	#trailer-item.is-single {
		width: 90%;
		max-width: 900px;
	}

	#trailer-item.is-single .sliderwaku {
		max-width: 900px;
	}
}

@media screen and (max-width: 767px) {
	#trailer-item.is-single {
		width: 90%;
		max-width: none;
	}

	#trailer-item.is-single .sliderwaku {
		max-width: none;
	}
}