@charset "UTF-8";
/*
 * alice.css — 特定LP固有のCSS
 *
 * 役割: このLP（今際の国のアリス）だけで必要なテーマ配色・
 *       CSS変数オーバーライド・LP固有のスタイル調整
 * スコープ: このLPのみ（他LPには影響しない）
 */


/* =============================================
   今際の国のアリステーマ変数
============================================= */

:root {

	--color-primary: #000;
	--color-secondary: #111;
	--color-accent: #e50914;
	--color-base: #000;
	--color-text: #fff;
	--color-text-muted: #aaa;

	--corner-radius: 1.6rem;
}


/* =============================================
   今際の国のアリステーマ全体
============================================= */

.htb-pagetop {
	opacity: 1;
	visibility: visible;
}

div#container {
  margin-top: 0 !important;
}
#h-header {
  opacity: 0;
    z-index: 0;
}
body.scroll #h-header {
  opacity: 1;
  z-index:1001;
}

figure.kari:before {
	content: "仮";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	font-size: 2rem;
	line-height: 1;
	background: #fff;
	color: red;
	padding: 2rem;
	border: 1px solid;
}



#alice {
	background: var(--color-primary);
	color: var(--color-text);
}

#alice h3,
#alice h4,
#alice h5,
#alice h6 {
	letter-spacing: 0;
}

#alice main {
	font-family: var(--font-family-Zen-Go);
	font-weight: 500;
}

#alice .c-nav {
	background-color: var(--color-secondary);
}

#alice .js-dialog-menu {
	width: 90%;
	max-width: 480px;
	background-color: var(--color-secondary);
}

/* =============================================
   ヘッダーCTA位置調整
============================================= */

@media screen and (max-width: 768px) {
	.h-header__cta.sp-side {
		transition: all 0.4s;
	}

	body.scroll .h-header__cta.sp-side {
		bottom: 40%;
		transition: all 0.4s;
	}

	body.upfixed .h-header__cta.sp-side {
		bottom: 35%;
	}
}

@media screen and (max-width: 1024px) {
	body.scroll .h-header__cta.sp-side {
		right: 0;
		background: transparent;
		padding: 0;
		width: 4rem;
		transform: scale(0.8);
		transform-origin: right;
		top: 25%;
	}

	body.scroll .h-header__cta.sp-side a:before {
		margin: 0 auto;
		width: 100%;
		height: 20px;
	}

	body.scroll .h-header__cta.sp-side a.cta__ticket span,
	body.scroll .h-header__cta.sp-side a.cta__hotel span {
		width: auto;
		writing-mode: vertical-rl;
		letter-spacing: 3px;
	}
}


.section{
  position: relative;
}
.section:before{
	content: "";
	background: #002d80;
	background: radial-gradient(circle,rgba(0, 45, 128, 1) 0%, rgba(0, 0, 0, 1) 70%);
	width: 50%;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: -10%;
	left:-20%;
}
.section.red:before{
	content: "";
	background: #9c0000;
	background: radial-gradient(circle,rgba(156, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%);
	width: 50%;
	aspect-ratio: 1 / 1;
	position: absolute;
	left:auto;
	right:-20%;
}

#term .section:before{
	top:0%;
	left:-15%;
}
#term .section:after{
	content: "";
	background: #9c0000;
	background: radial-gradient(circle,rgba(156, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%);
	width: 50%;
	aspect-ratio: 1 / 1;
	position: absolute;
	top:0%;
	left:auto;
	right:-15%;
	  z-index: 1;
}

#fv .section:before,
#about .section:before,
#copyright .section:before{
	display:none;
}

@media screen and (min-width: 1024px) {
	.section:before{
		background: radial-gradient(circle,rgba(0, 45, 128, 1) 0%, rgba(0, 0, 0, 1) 70%);
	}
	.section.red:before{
		background: radial-gradient(circle,rgba(156, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%);
	}

	#term .section:after{
		background: radial-gradient(circle,rgba(156, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%);
	}
}
/* =============================================
   #about
============================================= */

#about {
	background-color: var(--color-primary);
	background-image: url("/enjoy/alice/assets/img/index/about/bg.webp");
	color: #000;
    z-index: 1;
    position: relative;
}

#about .section {
	display: flex;
	flex-direction: column;
	gap: var(--space-y);
}

#about .page__body__inner {
  gap: calc(var(--space-y) * 1.5);
}


.about-netflix,
.about-comics {
	display: flex;
	flex-wrap: wrap;
	gap:calc(var(--card-gap) * 1);
}

#about h2 {
	text-align: center;
	font-weight: 500;
	font-size:calc(var(--card-font-size) * 1.8);
	line-height: 1.4;
}

.separator-line {
	display: block;
	width: 100%;
	max-width: 36.4%;
	height: 4px;
	margin:0 auto;
	background-image: url("/enjoy/alice/assets/img/line.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#about .text {
	font-size: var(--font-size-sm);
	line-height: var(--font-lineheight-200);
}

/* --- c-card調整 --- */

#about .c-card {
	--card-bg: transparent;
	--card-radius: 0;
	gap:calc(var(--card-gap) * 2);
}

#about .c-card__img {
	max-width: 40%;
	margin: 0 auto;
}

#about .c-card__txt {
  padding: 0;
}

#about .c-card__body {
	gap: calc(var(--card-gap) * 1);
}

/* Netflix: ロゴは黒背景 */
.about-netflix .c-card__img {
	background-color: #000;
	padding: calc(var(--card-padding) * .5);
}

/* コミックス: 表紙は背景なし */
.about-comics .c-card__img {
	background-color: transparent;
	padding: 0;
	max-width: 36.4%;
}

@media screen and (min-width: 1024px) {
	.about-netflix, .about-comics {
	  padding: 0 calc(var(--space-x-sm) * 1.5);
	  gap: calc(var(--card-gap) * 2);
	}
	#about .c-card {
	  align-items: flex-start;
	}
	#about .c-card-group > .c-card > .c-card__img {
		width: 20%;
		max-width: none;
	}

	#about .c-card-group > .c-card > .c-card__txt {
		width: 80%;
		padding: 0;
	}
}


/* =============================================
   #information
============================================= */

#information {
	background-color: var(--color-primary);
	color: var(--color-text);
}


#information .c-card {
	--card-bg: transparent;
	--card-radius: 0;
}

#information .section-title-img {
  max-height: 40px;
	margin: 0 auto;
}

/* 基本情報 */
.info-basic {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.info-basic .text{
	text-align: center;
}

/* 整理券ボックス */
.info-ticket {
	border: 1px solid #666;
	padding: calc(var(--card-padding) * 1.5);
	text-align: center;
	width: 100%;
	max-width: 640px;
}

.info-ticket .c-card__body {
	align-items: center;
}

.info-ticket .btn {
	border-radius: 0;
}

.info-ticket .c-card__title {
	color: var(--color-accent);
	width: 100%;
}



/* ボタン */
#information .btn {
	background-color: var(--color-accent);
	color: #fff;
	max-width: 320px;
}

/* 注意事項・利用制限 */
.info-notice {
	display: flex;
	flex-direction: column;
	gap: var(--space-x-sm);
	width: 100%;
	max-width: 640px;
	align-items: stretch;
}
.info-notice .c-card__body {
  width: 100%;
}

.info-notice__title {
	background-color: #333;
	color: var(--color-accent);
	font-weight: 700;
	font-size: var(--font-size-base);
	text-align: center;
	padding:1.5rem 3rem;
	width: 100%;
}

/* アコーディオン */
.info-notice details {
	width: 100%;
}

.info-notice summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.info-notice summary::-webkit-details-marker {
	display: none;
}

.info-notice summary::after {
	content: "";
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015.5%2015.5%22%3E%3Cpath%20d%3D%22M7.75.75v14M.75%207.75h14%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E');
	background-size: 16px;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.3s;
	position: absolute;
	right: 10px;
}

.info-notice details[open] summary::after {
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2015.5%201.5%22%3E%3Cpath%20d%3D%22M.75.75h14%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E');
}

/* スムーズ開閉アニメーション */
.info-notice details .c-card__body {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
	padding-top: 0;
}

.info-notice details[open] .c-card__body {
	grid-template-rows: 1fr;
	padding-top: var(--space-x-sm);
}

.info-notice details .c-card__body > * {
	overflow: hidden;
}


/* =============================================
   #expresspass
============================================= */

#expresspass {
	background-color: var(--color-primary);
	color: var(--color-text);
}

#expresspass .c-card {
	--card-bg: transparent;
	--card-radius: 0;
}

.expresspass-box {
	position: relative;
	border: 1px solid #666;
	padding: calc(var(--card-padding) * 1.2);
	text-align: center;
	max-width: 640px;
}

.expresspass-box .c-card__body {
	align-items: center;
	text-align: center;
}


/* 右上アクセントライン */
.expresspass-box::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 12px;
	background-color: var(--color-accent);
}

.expresspass-box .c-card__title {
  font-size: 140%;
  font-weight: 500;
}

.expresspass-box .c-card__catch {
  font-size: 240%;
  line-height: 100%;
}
.expresspass-box .c-card__catch small{
  font-size: 60%;
}
.expresspass-box .c-card__catch:after {
  display:none;
}
.expresspass-box .c-card__body .notice {
  font-size: 80%;
    text-align: left;
}

.expresspass-box.c-card dl{
  padding-top:calc(var(--card-gap) * 0.8);
}

.expresspass-box.c-card dt {
  background: #fff;
  color: #000;
  border-radius:0px;
}
.expresspass-box.c-card dd {
	font-size: var(--font-size-2xl);
	font-weight: 700;
	line-height: 1;
}

#expresspass .btn {
	background-color: var(--color-accent);
	color: #fff;
	border-radius: 0;
	max-width: 320px;
}

/* =============================================
   #highlights
============================================= */

#highlights .c-card-group {
  gap: calc(var(--card-gap) * .5);
}

#highlights .c-card{
position: relative;
padding: calc(var(--card-padding) * 1.5) 0;
  width: 100%;
}


#highlights .c-card.no01:before,
#highlights .c-card.no02:before{
  content: "";
  background-image: url(../img/index/highlights/no01.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  transition: transform 0.3s;
  width: 100%;
  height: 100%;
    max-height: 200px;
  display: block;
  position: absolute;
  right: 0;
  opacity: 0.3;
}
#highlights .c-card.no02:before{
	background-image: url(../img/index/highlights/no02.svg);
	background-position: left;
	opacity: 0.3;
}

#highlights .c-card .c-card__body{
	position: relative;
	align-items: flex-start;
	width: 100%;
}
#highlights .c-card.no02 .c-card__body {
  align-items: flex-end;
}

#highlights .c-card__txt{
	padding:0;
	  width: 100%;
}

#highlights .c-card__catch{
  text-align: left;
  color: var(--color-accent);
  font-weight: 500;
  width: 60%;
  font-size: 150%;
  line-height: 140%;
}
#highlights .c-card__catch:after{
	display:none;
}


@media screen and (min-width: 1024px) {
	#highlights .c-card {
	  padding: calc(var(--card-padding) * 2.5) 0;
	  max-width: 640px;
	}
	#highlights .c-card__txt {
	  width: 100%;
	}
	#highlights .c-card__catch {
	  font-size: 180%;
	}
	#highlights .c-card.no01:before,
	#highlights .c-card.no02:before{
	    max-height:300px;
	}
}
/* =============================================
   #term
============================================= */
#term .section {
  padding-top:0;
}

#term .page__body {
  z-index: 2;
}

#term .c-card__catch{
  font-size: 200%;
  line-height: 140%;
	font-family: var(--font-family-Zen-Mi);
  font-weight: 300;
}
#term .c-card__date{
	font-family: var(--font-family-Zen-Mi);
  font-weight: 300;
    font-size: 180%;
}

#term .c-card__catch:after{
	display:none;
}


#term .page__body__inner {
  padding: 0;
}
#term .c-card {
  border-radius: 0;
}
#term .c-card__txt {
  padding: 0 calc(var(--card-padding) * 2);
}

#term .c-card p.text {
  font-size: calc(var(--card-font-size) * 0.8);
  line-height:250%;
}

#term .movie {
  width: 100%;
  z-index: 1;
  position: relative;
  overflow: hidden;
    max-width: 640px;
}

#term .movie video {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

@media screen and (min-width: 1024px) {
	#term .section {
	  padding-top:calc(var(--space-section) * 0.5);
	}


	#term  .c-card-group {
	  gap: calc(var(--card-gap) * 2.2);
	}
	#term .c-card__txt {
	  width: 100%;
	}
	#term .c-card__catch {
	  font-size: 220%;
	}
	#term .c-card p.text {
	  font-size: calc(var(--card-font-size) * 1);
	}
}


/* =============================================
   #copyright
============================================= */

#copyright {
	font-size: var(--font-size-sm);
	text-align: center;
}

#copyright .copyright {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}