@charset "utf-8";
/*-----------------------------------------------
 * THEATER
-------------------------------------------------*/
.subSec__tit::before {
  content: "";
  width: min(calc(87 / var(--vw-min) * 100vw),87px);
  height: min(calc(104 / var(--vw-min) * 100vw),104px);
  display: block;
  position: absolute;
  top: max(calc(-10 / var(--vw-min) * 100vw),-10px);
  left: min(calc(140 / var(--vw-min) * 100vw),140px);
  -webkit-mask: url(../img/common/deco/deco_titRapier.svg)no-repeat center/contain;
  mask: url(../img/common/deco/deco_titRapier.svg)no-repeat center/contain;
  background-color: var(--color-redD43);
  transform: scale(-1,-1);
}
@media screen and (max-width:768px){
.subSec__tit::before {
  width: calc(75 / var(--vw-min) * 100vw);
  height: calc(90 / var(--vw-min) * 100vw);
  top: calc(-5 / var(--vw-min) * 100vw);
  left: calc(160 / var(--vw-min) * 100vw);
}
}
.subSec .subSec__tit::before {
  opacity: 0;
  transform: scale(-1,-1) translate3d(30%, -40%, 0);
}
.subSec.is-ani .subSec__tit::before {
  animation: titRtoTR var(--scrani-rapier-dur) var(--easing-outquart)
      var(--scrani-rapier-delay) forwards;
}
.subSec__bg-clip-in {
	background: url(../img/common/bg/bg_theater.jpg)no-repeat top/100%;
}
@media screen and (max-width:768px){
	.subSec__bg-clip-in {
		background-position: top;
		background-size: calc(1200 / var(--vw-min) * 100vw) calc(594 / var(--vw-min) * 100vw);
	}
}
.subSecCont {
	width: min(calc(1040 / var(--vw-min) * 100vw),1040px);
  margin-bottom: min(calc(120 / var(--vw-min) * 100vw),120px);
}
@media screen and (max-width:768px){
	.subSecCont {
		width: 100%;
	}
}
.theater__soon {
	font-size: min(calc(32 / var(--vw-min) * 100vw),32px);
	text-align: center;
	color: var(--color-redD43);
}
@media screen and (max-width:768px){
	.theater__soon {
		font-size: calc(32 / var(--vw-min) * 100vw);
	}
}
#js-theaterListsWrap:has(.theater__tabs:empty) {
	display: none;
}
.subSec__title {
	font-size: min(calc(34 / var(--vw-min) * 100vw),34px);
	color: var(--color-redD43);
	font-weight: 700;
	line-height: 1.6;
	display: block;
	margin-top: min(calc(40 / var(--vw-min) * 100vw),40px);
	margin-bottom: min(calc(40 / var(--vw-min) * 100vw),40px);
  text-align: center;
}
@media screen and (max-width:768px){
	.subSec__title {
		font-size: calc(46 / var(--vw-min) * 100vw);
		margin-top: calc(48 / var(--vw-min) * 100vw);
		margin-bottom: calc(48 / var(--vw-min) * 100vw);
	}
}
/*-----------------------------------------------
 * 来場者特典
-------------------------------------------------*/
.theaterBonus + .theaterBonus {
	margin-top: min(calc(80 / var(--vw-min) * 100vw),80px);
}
@media screen and (max-width:768px){
	.theaterBonus + .theaterBonus {
		margin-top: calc(96 / var(--vw-min) * 100vw);
	}
}
.theaterBonus__title {
	font-size: min(calc(24 / var(--vw-min) * 100vw),24px);
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}
@media screen and (max-width:768px){
	.theaterBonus__title {
		font-size: calc(28 / var(--vw-min) * 100vw);
	}
}
.theaterBonus__img {
	width: min(calc(560 / var(--vw-min) * 100vw),560px);
	margin: min(calc(32 / var(--vw-min) * 100vw),32px) auto 0;
}
@media screen and (max-width:768px){
	.theaterBonus__img {
		width: 100%;
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
}
.theaterBonus__img img {
	width: 100%;
	height: auto;
	display: block;
}
.theaterBonus__text {
	font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
	line-height: 1.8;
	margin-top: min(calc(32 / var(--vw-min) * 100vw),32px);
}
@media screen and (max-width:768px){
	.theaterBonus__text {
		font-size: calc(26 / var(--vw-min) * 100vw);
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
}
.theaterBonus__notice {
	font-size: min(calc(14 / var(--vw-min) * 100vw),14px);
	line-height: 1.8;
	margin-top: min(calc(20 / var(--vw-min) * 100vw),20px);
}
@media screen and (max-width:768px){
	.theaterBonus__notice {
		font-size: calc(22 / var(--vw-min) * 100vw);
		margin-top: calc(24 / var(--vw-min) * 100vw);
	}
}
/* ACF 側の <p><span class="theaterBonus__mark">※</span>本文</p> を前提。
   記号を縮めず、折り返し本文が記号の下に潜らないようにする。
   1段落=1注釈が前提なので、複数注釈を <br> で1段落にまとめると横一列になる */
.theaterBonus__notice p {
	display: flex;
	align-items: flex-start;
	gap: 0.25em;
}
.theaterBonus__notice p + p {
	margin-top: 0.25em;
}
.theaterBonus__mark {
	flex-shrink: 0;
}
/*-----------------------------------------------
 * 地域タブ
-------------------------------------------------*/
.theater__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: min(calc(16 / var(--vw-min) * 100vw),16px) min(calc(40 / var(--vw-min) * 100vw),40px);
	margin-bottom: min(calc(64 / var(--vw-min) * 100vw),64px);
}
/* SPは3列固定。折り返し任せだと地方名の文字数差で1行目に5個・2行目に1個などになる */
@media screen and (max-width:768px){
	.theater__tabs {
		display: grid;
		grid-template-columns: repeat(3,1fr);
		/* 縦は横線を挟むぶん広めに取る */
		gap: calc(40 / var(--vw-min) * 100vw) calc(20 / var(--vw-min) * 100vw);
		margin-bottom: calc(64 / var(--vw-min) * 100vw);
	}
	.theater__tab {
		display: flex;
	}
}
.theater__tabs a {
	font-size: min(calc(18 / var(--vw-min) * 100vw),18px);
	color: #000;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	white-space: nowrap;
	transition: color .6s var(--easing-outquart);
}
@media screen and (max-width:768px){
	.theater__tabs a {
		width: 100%;
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
}
@media (hover: hover) and (pointer: fine){
	.theater__tabs a:hover {
		color: var(--color-redD43);
	}
}
.theater__tabs.--starFrame {
	--sf-star-w: min(calc(54 / var(--vw-min) * 100vw),54px);
	--sf-star-h: min(calc(56 / var(--vw-min) * 100vw),56px);
	--sf-gap: min(calc(14 / var(--vw-min) * 100vw),14px);
	--sf-line: min(calc(1 / var(--vw-min) * 100vw),1px);
	width: fit-content;
	max-width: calc(100% - (var(--sf-star-w) + var(--sf-gap)) * 2);
	margin-inline: auto;
	position: relative;
	padding-block: min(calc(44 / var(--vw-min) * 100vw),44px);
	padding-inline: calc(var(--sf-star-w) + var(--sf-gap));
	background-image:
		linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)),
		linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2));
	background-size: calc(100% - var(--sf-star-w) - var(--sf-gap)) var(--sf-line);
	background-repeat: no-repeat;
	background-position: right top, left bottom;
}
@media screen and (max-width:768px){
	.theater__tabs.--starFrame {
		--sf-star-w: calc(66 / var(--vw-min) * 100vw);
		--sf-star-h: calc(68 / var(--vw-min) * 100vw);
		--sf-gap: calc(24 / var(--vw-min) * 100vw);
		--sf-line: calc(1 / var(--vw-min) * 100vw);
		padding-block: calc(56 / var(--vw-min) * 100vw);
    max-width: initial;
		background-image:
			linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)),
			linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)),
			linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.12));
		background-size:
			calc(100% - var(--sf-star-w) - var(--sf-gap)) var(--sf-line),
			calc(100% - var(--sf-star-w) - var(--sf-gap)) var(--sf-line),
			calc(100% - (var(--sf-star-w) + var(--sf-gap)) * 2 + 128px) var(--sf-line);
		background-position: right top, left bottom, center center;
	}
}
/* この ul は SP で grid・PC で flex なので、absolute にしないと
   擬似要素がアイテム化して列が崩れる */
.theater__tabs.--starFrame::before,
.theater__tabs.--starFrame::after {
	content: "";
	width: var(--sf-star-w);
	height: var(--sf-star-h);
	position: absolute;
	-webkit-mask: url(../img/common/deco/deco_star3.png)no-repeat center/contain;
	mask: url(../img/common/deco/deco_star3.png)no-repeat center/contain;
	background-color: #000;
	pointer-events: none;
}
/* 罫線の上に中心を乗せる。左右は画面外へ出ないよう端に揃える */
.theater__tabs.--starFrame::before {
	top: 0;
	left: 0;
	translate: 0 -50%;
}
.theater__tabs.--starFrame::after {
	right: 0;
	bottom: 0;
	translate: 0 50%;
}
/* 項目間の仕切り。PCのみ。SPは段間の横線だけにするので出さない。
   1段なので先頭以外の左側に立てる。
   gap の中央へ置きたいので border-left ではなく擬似要素にしている。
   border-left だと項目の内側に食い込んで文字の中心がずれる。
   星の罫（.2）より薄くして、主役を取らないようにしている */
@media screen and (min-width:769px){
	.theater__tabs.--starFrame .theater__tab {
		position: relative;
	}
	.theater__tabs.--starFrame .theater__tab:not(:first-child)::before {
		content: "";
		width: var(--sf-line);
		position: absolute;
		/* 横 gap 40 の半分。項目と項目のちょうど真ん中に来る */
		left: max(calc(-20 / var(--vw-min) * 100vw),-20px);
		top: max(calc(-4 / var(--vw-min) * 100vw),-4px);
		bottom: max(calc(-4 / var(--vw-min) * 100vw),-4px);
		background-color: rgba(0,0,0,.12);
		pointer-events: none;
	}
}
/*-----------------------------------------------
 * 劇場リスト
-------------------------------------------------*/
.theaterListBlock {
	scroll-margin-top: min(calc(40 / var(--vw-min) * 100vw),40px);
  width: min(calc(830 / var(--vw-min) * 100vw),830px);
  margin: 0 auto;
  @media screen and (max-width:768px){
    width: 100%;
  }
}
.theaterListBlock + .theaterListBlock {
	margin-top: min(calc(80 / var(--vw-min) * 100vw),80px);
}
@media screen and (max-width:768px){
	.theaterListBlock + .theaterListBlock {
		margin-top: calc(96 / var(--vw-min) * 100vw);
	}
}
.theater__region {
	font-size: min(calc(24 / var(--vw-min) * 100vw),24px);
	color: black;
  font-weight: 700;
	line-height: 1;
	padding-bottom: min(calc(16 / var(--vw-min) * 100vw),16px);
	border-bottom: min(calc(2 / var(--vw-min) * 100vw),2px) solid var(--color-redD43);
}
@media screen and (max-width:768px){
	.theater__region {
		font-size: calc(28 / var(--vw-min) * 100vw);
		padding-bottom: calc(20 / var(--vw-min) * 100vw);
	}
}
.theater__listsHeader {
	font-size: min(calc(14 / var(--vw-min) * 100vw),14px);
	line-height: 1.4;
	display: flex;
	align-items: stretch;
	background-color: rgba(0,0,0,.05);
}
@media screen and (max-width:768px){
	.theater__listsHeader {
		font-size: calc(19 / var(--vw-min) * 100vw);
		line-height: 1.3;
	}
}
.theater__listsWrap {
	display: flex;
	align-items: flex-start;
	border-bottom: min(calc(1 / var(--vw-min) * 100vw),1px) solid rgba(0,0,0,.2);
}
.theater__lists {
	flex: 1;
	min-width: 0;
}
.theater_item {
	display: flex;
	align-items: stretch;
	font-size: min(calc(15 / var(--vw-min) * 100vw),15px);
	line-height: 1.6;
}
.theater_item:not(:last-child) {
	border-bottom: min(calc(1 / var(--vw-min) * 100vw),1px) solid rgba(0,0,0,.15);
}
@media screen and (max-width:768px){
	.theater_item {
		font-size: calc(16 / var(--vw-min) * 100vw);
		line-height: 1.8;
	}
}
/* セル共通の余白：ヘッダー行・都道府県セル・本文行で必ず同じ値にする */
.theater__listsHeader p,
.theater__listsWrap > .theater__area,
.theater_item p {
	padding: min(calc(14 / var(--vw-min) * 100vw),14px) min(calc(16 / var(--vw-min) * 100vw),16px);
}
@media screen and (max-width:768px){
	.theater__listsHeader p,
	.theater__listsWrap > .theater__area,
	.theater_item p {
		padding: calc(16 / var(--vw-min) * 100vw) calc(8 / var(--vw-min) * 100vw);
	}
}
/* 列幅：ヘッダー行と本文行で同じセレクタを共有して必ず揃える
   PC 1040 = 140 + 400(可変) + 180 + 180 + 140 */
.theater__area {
	width: min(calc(175 / var(--vw-min) * 100vw),175px);
	flex-shrink: 0;
}
.theater__name {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
  & a {
    text-decoration: underline var(--color-redD43);
    &:hover {
      text-decoration: none;
    }
  }
}
.theater__date {
	width: min(calc(195 / var(--vw-min) * 100vw),195px);
	flex-shrink: 0;
  text-align: left;
}
.theater__ticket {
	width: min(calc(140 / var(--vw-min) * 100vw),140px);
	flex-shrink: 0;
}
.theater__listsWrap > .theater__area {
	font-size: min(calc(16 / var(--vw-min) * 100vw),16px);
	line-height: 1.6;
	font-weight: 500;
}
/* SP 654 = 96 + 236(可変) + 72 + 150 + 100 */
@media screen and (max-width:768px){
	.theater__area {
		width: calc(120 / var(--vw-min) * 100vw);
	}
	.theater__date {
		width: calc(200 / var(--vw-min) * 100vw);
	}
	.theater__listsWrap > .theater__area {
		font-size: calc(16 / var(--vw-min) * 100vw);
		line-height: 1.8;
	}
}
.theater__lists a {
	color: var(--color-redD43);
	transition: .6s var(--easing-outquart);
}