@charset "utf-8";

/* ======================================================
	基本設定
====================================================== */

/*
#2c2928 gray
#ebe5ce white
#c4a72e gold
#b4aeb1 mist
#202f55 navy blue
*/

:root {
	--main-color: #1b1d1e;
	--base-color: #fcfffd;
	--accent-color: #c0ad4b;
	--accent-color-l: #dbd097;
	--accent-color-d: #a08f38;
	--em-color: #bf282d;
	--lg-color: #b4aeb1;
	--dg-color: #202f55;
}


body {
	background: var(--base-color);
	color: var(--main-color);
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
	pointer-events: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-touch-callout: none;
	-moz-user-select: none;
	touch-callout: none;
	user-select: none;
}
hr {
	box-sizing: content-box;
	margin-top: 1rem;
	margin-bottom: 0;
	height: 0;
	overflow: visible;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, .2);
}
a {
	color: var(--accent-color-d);
}
em {
	font-style: normal;
	font-weight: 700;
}
mark {
	background: var(--accent-color-l);
}
.marker {
	background: linear-gradient(transparent 50%, #9ff 0%);
}
.br {
	display: inline-block;
}
dt {
	font-weight: 700;
}
dt {
	margin-top: 1em;
}
dt:first-child {
	margin-top: 0;
}
dd {
	margin-left: 0;
}

/* Web Font - Noto Serif JP */
.serif {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}



/* ======================================================
	サイト内の共通設定
====================================================== */

/* sticky footer
------------------------------------------------------ */
#global-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
.global-footer {
	margin-top: auto;
}

/* パンくずリスト
------------------------------------------------------ */
.breadcrumb-list {
	width: 100%;
	background-color: #d1d1ff;
}
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 auto;
	padding: 0 20px;
	max-width: 1200px;
	height: 50px;
	color: #333;
	font-size: var(--12px);
}
.breadcrumb li + li {
	padding-left: .5rem;
}
.breadcrumb li + li::before {
	display: inline-block;
	padding-right: .5rem;
	color: #666;
	content: "/";
}
.breadcrumb li a {
	color: #333;
}
@media (min-width: 769px) {
	.breadcrumb {
		padding: 0 30px;
	}
}

/* グローバルメニューの修正
------------------------------------------------------ */
.mbc-globalnav .sub-menu ul li a {
	line-height: 1em;
}

/* bg
------------------------------------------------------ */
.gra-bg {
	background-attachment:fixed;
}



/* ======================================================
	ヘッダー
====================================================== */
.header {
	background: var(--main-color);
	background-image: radial-gradient(ellipse at bottom, #0f4b57 0%, var(--main-color) 50%, var(--main-color));
	text-align: center;
}
.site-title-wrap {
	display: inline-block;
	margin: clamp(3em, 5vw, 5em) auto;
	color: var(--base-color);
}
.site-title {
	color: var(--accent-color);
	font-size: 2rem;
	letter-spacing: .05em;
	font-weight: bold;
	text-shadow: 1px 1px 2px #000;
}
.site-logo {
	filter: drop-shadow(1px 1px #000);
}
.site-description {
	margin: .5em 0 0;
	font-size: clamp(.875rem, .83rem + .23vw, 1rem);
	text-shadow: 1px 1px 2px #000;
}


/* ======================================================
	メイン
====================================================== */

/* レイアウト枠
------------------------------------------------------ */
.container {
	display: flex;
	flex-direction: column-reverse;
	margin: 0 auto;
	padding: 0 24px;
}
.main {
	width: 100%;
}
@media (min-width: 769px) {
	.container {
		padding: 0 1em;
		width: 100%;
		max-width: 800px;
	}
}


/* article
------------------------------------------------------ */
.article {
	margin: clamp(4em, 6vw, 6em) auto;
}
.article + .article {
	position: relative;
	margin-bottom: 0;
	padding-bottom: clamp(4em, 6vw, 6em);
}
.article + .article::after {
	content: "◆◆◆";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	color: var(--accent-color);
	font-size: 1em;
	letter-spacing: .75em;
	opacity: .9;
}
/*
.article:not(:first-child) {
	border-bottom: 1px solid red;
}*/

.article-title {
	position: relative;
	padding: 2rem .5rem;
	margin-bottom: 2em;
	font-size: 1.25rem;
	font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
}
.article-title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: .1em;
	background-image: linear-gradient(to right, var(--dg-color) 0%, var(--lg-color) 100%);
	border-radius: .15em;
}
.article-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: .1em;
	background-image: linear-gradient(to right, var(--lg-color) 0%, var(--dg-color) 100%);
	border-radius: .15em;
}
.article-title-span {
	margin-left: -.3em;
	font-size: clamp(1.875rem, 1.739rem + 0.68vw, 2.25rem);
}
@media (max-width: 575px) {
	.article-title-span {
		display: inline-block;
	}
}
@media (min-width: 769px) {
	.article-title {
		text-align: left;
	}
}

/* 映画の画像 */
.movie-img {
	margin: 0 auto;
	text-align: center;
}
.movie-img img {
	display: inline;
	width: 240px;
	height: auto;
	border: 1px solid rgba(0, 0, 0, .1);
	pointer-events: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-touch-callout: none;
	-moz-user-select: none;
	touch-callout: none;
	user-select: none;
}
.movie-img figcaption {
	margin: .5rem auto 1rem;
	font-size: .75rem;
	line-height: 1.3;
	text-align: center;
}

/* 試写会情報 */
.article h2 {
	margin: 3rem 0 1.5rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--dg-color);
	font-family: "Noto Serif JP", serif;
	font-size: clamp(1.5rem, 1.409rem + .45vw, 1.75rem);
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
}
.article h3 {
	margin: 2rem 0 .5rem;
	font-size: clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
	font-weight: 600;
}
.article p {
	margin-top: 0;
	line-height: 1.75;
}

.movie-info {
	margin-bottom: 1.5rem;
}
.movie-info-dt {
	letter-spacing: .1em;
}
.movie-info-dd {
	font-size: 1.125rem;
}
.text-date {
	font-size: 1.25rem;
	font-weight: 500;
}
.text-closing {
	font-size: 1.25rem;
	color: var(--em-color);
	font-weight: 500;
}
.text-closing-span {
	font-size: 1rem;
}
.movie-sponsor-logo {
	width: 100%;
	height: auto;
	max-width: 280px;
}

@media (min-width: 769px) {
	.flexbox-row {
		display: flex;
		margin-bottom: 1em;
	}
	.movie-img {
		order: 2;
		margin-top: 1rem;
		margin-right: 0;
	}
	.flexbox-col h2 {
		margin-top: 1rem;
	}
}

/* お知らせ */
.movie-comment {
	margin-bottom: 1.5rem;
	padding: 1em;
	border: 1px solid var(--em-color);
	/*border-radius: .25em;*/
	color: var(--em-color);
}
.movie-comment strong {
	font-size: 1.25em;
}
@media (min-width: 769px) {
	.movie-comment {
		text-align: center;
	}
}
.alert-y {
	background: #fff3cd;
	border-color: #ffecb5;
}
.alert-gr {
	background: #d1e7dd;
	border-color: #badbcc;
	color: #0f5132;
}

/* コロナ対策 */
.movie-notice_covid-19 {
	border: 2px solid #bf282d;
}
.notice_covid-19_title {
	margin: 0;
	padding: 1em;
	background: #bf282d;
	color: #fff;
	font-size: 1.125rem;
}
.notice_covid-19_list {
	margin: 1em;
}
.notice_covid-19_list li {
	margin-bottom: .5em;
	line-height: 1.3;
}

/* 会場の注意書き */
.movie-notice_theater {
	margin-top: 1.5em;
	padding: 1em 1em .5em 40px;
	background: #eee;
}
.movie-notice_theater li {
	margin-bottom: .5em;
	line-height: 1.3;
}

/* 会場の注意書き 2022～ */
.movie-notice {
	margin-top: 1.5em;
	padding: 1em 1em .5em 2.5em;
	border: 2px solid var(--lg-color);
}
.movie-notice li {
	margin-bottom: .5em;
}
.movie-notice li ul li {
	margin-bottom: 0;
}

@media (min-width: 769px) {
	.movie-notice {
		padding: 2em 2em 1.5em 3.5em;
	}
	.movie-contents p {
		margin-left: 2em;
		margin-right: 2em;
	}
}

/* ストーリー */
.movie-story {
	font-size: clamp(1rem, .955rem + .23vw, 1.125rem);
}

/* 作品情報 */
h3.movie-summary-title {
	position: relative;
	font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
}
.movie-summary-title::before {
	content: "";
	position: absolute;
	left: 100px;
	top: 50%;
	width: calc(100% - 100px);
	height: 1px;
	background-color: var(--dg-color);
}
@media (min-width: 769px) {
	.movie-summary-title {
		padding-left: 1.5em;
	}
	.movie-summary-title::before {
		left: 140px;
		width: calc(100% - 140px);
	}
}

.movie-summary-data {
	margin-top: 1em;
	margin-left: .3em;
}
.movie-summary-data div + div {
	margin-top: .5em;
}
.movie-summary-data dt {
	width: 4em;
	letter-spacing: .1em;
}
@media (min-width: 769px) {
	.movie-summary-data div {
		display: flex;
	}
	.movie-summary-data {
		margin-left: 2.5em;
		margin-right: 2em;
	}
	.movie-summary-data dd {
		width: calc(100% -  4em);
	}
}

/* その他 */
.big {
	font-size: 120%;
}

/* アプリバナー */
.app-bnr-wrap {
	margin: 3.5rem auto 3rem;
	text-align: center;
}
.app-bnr-wrap img {
	margin: auto;
}

/* リンクボタン */
.btn-wrap {
	margin-top: 3rem;
	text-align: center;
}
.btn {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 1em;
	width: 60%;
	/*border: 1px solid var(--accent-color-d);*/
	/*border-radius: .4em;
	box-shadow: 0 5px 0 #ddd;*/
	background: var(--accent-color);
	color: #fff;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	text-shadow:
		1px 1px 0 var(--accent-color-d), -1px 1px 0 var(--accent-color-d),
		1px -1px 0 var(--accent-color-d), -1px -1px 0 var(--accent-color-d);
	/*text-shadow: 1px 1px 0 var(--accent-color-d);*/
	transition: all .3s;
}
.btn::before {
	content: "";
	position: absolute;
	top: -5px;
	left: -5px;
	width: 100%;
	height: 100%;
	border: 1px solid var(--accent-color-d);
	transition: .2s;
}
.btn:hover {
	/*box-shadow: 0 2px 0 #ddd;*/
	transform: translate(0, 3px);
	background: var(--accent-color-d);
}
.btn:hover::before {
	top: 0;
	left: 0;
}
@media (min-width: 769px) {
	.btn {
		width: 100%;
		max-width: 250px;
	}
}

/* ストアバッジ */
.store-badge-wrap {
	text-align: center;
}
.store-badge {
	width: auto;
	max-height: 60px;
}

/* 個人情報の取り扱い */
.personal-data {
	border: 1px solid var(--lg-color);
}
.personal-data h3 {
	margin: 0 auto;
	padding: 1em 1em .5em;
	font-size: 1.125rem;
}
.personal-data ul {
	margin: .5em 1em 1em;
}
.personal-data li {
	margin-bottom: .5em;
	line-height: 1.3;
}

/* 情報なしの場合 */
.empty-wrap {
	margin: clamp(3em, 5vw, 5em) 0;
	padding: clamp(1.5em, 3vw, 2em);
	border: 1px solid var(--lg-color);
	order: 1;
}
.empty-date {
	display: inline-block;
	padding: .3em .5em;
	background: var(--main-color);
	color: #fff;
	text-align: left;
}
.empty-txt {
	margin: 1em 0 0;
	font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
}
.empty-bnr {
	margin: clamp(3em, 5vw, 5em) 0;
	text-align: center;
}
.empty-bnr img {
	display: block;
	margin: auto;
	width: clamp(300px, 80%, 400px);
}
.empty-bnr-txt {
	position: relative;
	display: inline-block;
	padding: 0 2em;
	font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
}
.empty-bnr-txt::before,
.empty-bnr-txt::after {
	content: "";
	position: absolute;
	top: .7em;
	height: 2em;
}
.empty-bnr-txt::before {
	border-left: solid 1px;
	left: 0;
	transform: rotate(-30deg);
}
.empty-bnr-txt::after {
	border-right: solid 1px;
	right: 0;
	transform: rotate(30deg);
}

.empty-wrap ~ .empty-bnr {
	margin-top: 0;
}