@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Tera&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500,700&display=swap');


/*=========================
基本のスタイル
=========================*/
body {
	color: #231815;
	background-color: #fff;
/*	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;*/
	/*font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", sans-serif;*/
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
}

a {
	transition: .2s linear;
	-webkit-transform: translateZ(0);
}

a:link { color:#06c; }
a:visited { color:#551A8B; }
a:hover { color:#6cf; }
a:active { color:#abe3ff; }
a:focus { outline:none;}

a:hover,
a:hover img {
	filter: alpha(opacity=70);
	-moz-opacity:0.70;
	opacity:0.70;
}






/*=== ヘッダ ===*/

/*ブロック全体*/
header#eventTitle {
	padding: 0 0 30px 0;
	background: url(../img/ph_main.jpg) 50% 100% no-repeat;
	background-size: cover;
	color: #fff;
	text-align: center;
	line-height: 1;
}
/*シネマテーク*/
header#eventTitle p:nth-of-type(1) {
	padding-top: 20px;
	font-size: .8em;
}
/*回数*/
header#eventTitle p:nth-of-type(2) {
	padding-top: 5px;
	font-family: 'Lexend Tera', sans-serif;
}
header#eventTitle p:nth-of-type(2) span {
	font-size: 1.4em;
}
/*タイトル*/
header#eventTitle h1 {
	padding-top: 20px;
	font-size: 2.3em;
	line-height: 1.4;
	font-weight: 700;
}
/*サブタイトル*/
header#eventTitle h2 {
	padding-top: 5px;
	font-size: 1.2em;
	font-weight: 700;
	color: #e4007f;
	font-family: 'Noto Serif JP', serif;
}
/*開催日付*/
header#eventTitle p:nth-of-type(3) {
	padding-top: 20px;
	font-weight: 700;
}
/*会場*/
header#eventTitle p:nth-of-type(4) {
	padding-top: 5px;
	font-size: .7em;
	font-weight: 700;
}
/*金額*/
header#eventTitle p:nth-of-type(5) {
	padding-top: 20px;
	font-size: .9em;
	font-weight: 700;
}
/*特別料金など補足*/
header#eventTitle p.hosoku {
	padding-top: 10px;
	font-size: .7em;
	font-weight: 700;
}
@media screen and (min-width:800px) {
	header#eventTitle {
		padding: 0 0 160px 0;
	}
	header#eventTitle p:nth-of-type(1) {
		padding-top: 80px;
		font-size: 1.2em;
	}
	header#eventTitle p:nth-of-type(2) {
		padding-top: 10px;
		font-size: .9em;
	}
	header#eventTitle p:nth-of-type(2) span {
		font-size: 2.4em;
		}
	header#eventTitle h1 {
		padding-top: 120px;
		font-size: 4.5em;
	}
	header#eventTitle h2 {
		padding-top: 30px;
		font-size: 2.5em;
	}
	header#eventTitle p:nth-of-type(3) {
		padding-top: 100px;
		font-size: 2.2em;
	}
	header#eventTitle p:nth-of-type(4) {
		padding-top: 20px;
		font-size: 1.3em;
	}
	header#eventTitle p:nth-of-type(5) {
		padding-top: 40px;
		font-size: 1.8em;
	}
	header#eventTitle p.hosoku {
		padding-top: 20px;
		font-size: 1.4em;
	}
}


/*メッセージ*/
section#msgBlock {
	padding: 60px 12vw;
	border-bottom: 1px solid #999;
}
section#msgBlock h2 {
	padding: 0 0 15px 0;
	font-size: 1.2em;
	text-align: center;
	font-family: 'Lexend Tera', sans-serif;
}
section#msgBlock p:not(:first-of-type) {
	padding-top: .6em;
}
section#msgBlock p.name {
	padding-top: 1em;
	text-align: right;
	font-weight: 700;
}
@media screen and (min-width:800px) {
	section#msgBlock {
		padding: 120px calc(50% - 400px);
		font-size: 1.1em;
	}
	section#msgBlock h2 {
		padding: 0 0 35px 0;
	}
}


/*映画紹介部分*/
section.movie {
	padding: 60px 6vw;
	border-bottom: 1px solid #999;
}
section.movie h2 {
	padding: 0 0 30px;
	text-align: center;
	font-size: 1.8em;
	font-weight: 700;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
section.movie h2 span {/*一言注意書き*/
	display: block;
	padding: .1em 1.3em;
	font-size: .5em;
	font-weight: normal;
	border: 1px solid #ccc;
	border-radius: 5em;
	background-color: #fff;
}
section.movie h2 span.firstScreening_fukuoka {/*福岡初上映*/
	color: #ffa500;
}
section.movie h2 span.firstScreening_kyushu {/*九州初上映*/
	color: #1a5cd8;
}
section.movie h2 span.marginChosei {/*注意書きの前の文字が約物以外 マージン調整*/
	margin-left: 1em;
}
@media screen and (min-width:800px) {
	section.movie {
		padding: 120px calc(50% - 550px);
	}
	section.movie h2 {
		padding: 0 0 70px;
		font-size: 3em;
	}
	section.movie h2 span {
		font-size: .4em;
	}
}

/*写真リスト*/
section.movie ul.ph {
	display: flex;
	flex-wrap: wrap;
/*	align-items: flex-start;*/
	align-items: center;
}
section.movie ul.ph li {
	width: 50%;
	margin: auto;
	line-height: 0;
}
section.movie ul.ph li img {
	width: 100%;
}
/*写真のコピーライト*/
section.movie p.ph_copyright {
	text-align: right;
	font-size: .6em;
	color: #999;
}
@media screen and (min-width:800px) {
	section.movie ul.ph {
		width: 1100px;
		display: flex;
		flex-wrap: nowrap;
	}
	section.movie ul.ph li {
		width: 25%;
	}
}

/*紹介ブロック*/
section.movie dl {
	padding: 20px 0 0 0;
}
section.movie dl dt h3 {
	font-size: 1.2em;
	font-weight: 700;
}
section.movie dl dt h3 span {
	display: block;
	font-size: .8em;
	font-weight: 400;
}
section.movie dl dd {
	padding: 20px 0 0 0;
}
section.movie dl dd p:not(:first-of-type) {
	margin-top: .7em;
}
/*監督コメント（通常テキストではないもの）*/
section.movie dl dd div {
	margin: 1em 0 0 0;
	padding: 1em;
	font-size: .9em;
	border: 1px solid #ccc;
	background-color: #fff;
}
section.movie dl dd div p:first-of-type {
	font-weight: 700;
}
@media screen and (min-width:800px) {
	section.movie dl {
		padding: 50px 0 0 0;
		display: flex;
		justify-content: space-between;
	}
	section.movie dl dt {
		width: 340px;
		width: 31%;
	}
	section.movie dl dt h3 {
		font-size: 1.3em;
	}
	section.movie dl dd {
		width: 720px;
		width: 65%;
		padding: 0;
	}
}

/*映画スペック*/
section.movie dl dd ul {
	margin: 20px 0 0 0;
	padding: 10px;
	font-size: .8em;
	line-height: 1.2;
	background-color: #f4f3f3;
}
.featureBlock section.movie dl dd ul {
	background-color: #fdfdfd;/*特集の内側にある場合*/
}
section.movie dl dd ul li:not(:first-of-type) {
	margin-top: .4em;
}
section.movie dl dd ul li strong {
	font-weight: 700;
}
@media screen and (min-width:800px) {
	section.movie dl dd ul {
		margin: 40px 0 0 0;
		padding: 20px;
	}
}
/*受賞歴など*/
section.movie dl dd ul + ul {
	margin: 0 0 0 0;
	border-top: 1px dashed #ccc;
}

/*小特集*/
section.featureBlock {
	background-color: #ecf9fa;
}
section.featureBlock .featureBlockIntro {
	padding: 60px 6vw 0;
}
@media screen and (min-width:800px) {
	section.featureBlock .featureBlockIntro {
		padding: 120px calc(50% - 550px) 0;
	}
}
section.featureBlock .featureBlockIntro p:first-of-type {
	margin-bottom: 20px;
	text-align: center;
	font-size: 1.2em;
	font-weight: 700;
	color: #fff;
	background-color: #d3bc3e;
	border-radius: 5em;
}
section.featureBlock .featureBlockIntro h2 {
	margin-bottom: .3em;
	font-size: 1.6em;
	font-weight: 700;
	text-align: center;
}
section.featureBlock .featureBlockIntro h2 span {
	font-size: .75em;
	font-weight: 400;
}
@media screen and (min-width:800px) {
	section.featureBlock .featureBlockIntro p:first-of-type {
	margin-bottom: 40px;
		font-size: 1.4em;
	}
	section.featureBlock .featureBlockIntro h2 {
		font-size: 2em;
	}
	section.featureBlock .featureBlockIntro p:last-of-type {
		padding: 0 calc(50% - 400px);
	}
}


/*コメント　2020/11/26追加*/
#commentBlock {
	padding: 60px 4vw;
	background-color: #F9F9F9;
	border-bottom: 1px solid #999;
}
#commentBlock h3 {
	margin-bottom: 6vw;
	text-align: center;
	font-weight: bold;
}
@media screen and (min-width:800px) {
	#commentBlock {
		padding: 120px 0;
		background-color: #F9F9F9;
		border-bottom: 1px solid #999;
	}
	#commentBlock h3 {
		margin-bottom: 60px;
		font-size: 1.31em;
	}
}
#commentBlock > div {
	font-size: .94em;
}
#commentBlock > div div {
	margin-top: 4vw;
	padding: 4vw;
	font-size: 1em;
	display: flex;
	flex-direction: column-reverse;
	background-color: #fff;
	position: relative;
	text-align:justify;
}
#commentBlock > div div::before {
	content: "";
	display: block;
	width: 20vw;
	height: 15vw;
	border: 1px solid #ccc;
	border-right: none;
	border-bottom: none;
	position: absolute;
	top: 0;
	left: 0;
}
#commentBlock > div div::after {
	content: "";
	display: block;
	width: 20vw;
	height: 15vw;
	border: 1px solid #ccc;
	border-left: none;
	border-top: none;
	position: absolute;
	bottom: 0;
	right: 0;
}
#commentBlock > div div h4 {
	margin-top: 2.5vw;
	font-size: .9em;
	font-weight: bold;
	line-height: 1.4;
}
#commentBlock > div div h4 span {
	display: block;
	font-size: .8em;
	font-weight: normal;
}
#commentBlock > div div p {
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
}
@media screen and (min-width:800px) {
	#commentBlock > div {
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
	}
	#commentBlock > div div {
		box-sizing: border-box;
		width: 29%;
		margin-top: 0;
		padding: 30px;
	}
	#commentBlock > div div::before {
		width: 100px;
		height: 60px;
	}
	#commentBlock > div div::after {
		width: 100px;
		height: 60px;
	}
	#commentBlock > div div h4 {
		margin-top: 20px;
	}
}

/*次回予告　2020/11/26追加*/
section.nexttime_prev {
	padding: 60px 4vw;
	background-color: #f0efef;
}
section.nexttime_prev > div {
	padding: 4vw;
	font-size: .9em;
	background-color: #fff;
	border-radius: 4vw;
}
section.nexttime_prev > div h3 {
	font-size: .9em;
	font-weight: bold;
	color: #f66;
	text-align: left;
}
section.nexttime_prev > div h4 {
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
}
section.nexttime_prev > div * + * {
	margin-top: 2vw;
}
section.nexttime_prev > div p:last-of-type {
	font-size: .8em;
}
@media screen and (min-width:800px) {
	section.nexttime_prev {
		padding: 60px calc(50vw - 450px);
	}
	section.nexttime_prev > div {
		padding: 40px;
		display: flex;
		border-radius: 40px;
	}
	section.nexttime_prev > div h3 {
		width: 20%;
		font-size: 1.1em;
	}
	section.nexttime_prev > div div {
		width: 80%;
	}
	section.nexttime_prev > div h4 {
		margin-bottom: 20px;
		padding-bottom: 10px;
		font-size: 1.3em;
		text-align: left;
		border-bottom: 1px dashed #ccc;
	}
	section.nexttime_prev > div * + * {
		margin-top: 0;
	}
	section.nexttime_prev > div p:last-of-type {
		margin-top: 15px !important;
	}
	
}

/*ご来場に際しての注意*/
section.note {
	margin: 0;
	padding: 60px 6vw;
	position: relative;
	border-bottom: 1px solid #999;
}
section.note h3 {
	margin: 0 0 0 0;
	padding: .3rem 0;
	text-align: center;
	font-size: .95rem;
	line-height: 1;
	color: #fff;
	background-color: #999;
	border-radius: 4px;
}
section.note ul {
	margin: .5rem 0 0 0;
	font-size: .8rem;
	line-height: 1.4;
}
section.note ul li:not(:first-of-type) {
	margin-top: .4rem;
	padding-top: .4rem;
	border-top:1px dashed #ccc;
}
@media screen and (min-width:800px) {
	section.note {
		margin: 0;
		padding: 120px calc(50vw - 450px);
	}
	section.note h3 {
		font-size: 1.1em;
	}
	section.note ul {
	font-size: .88em;
	}
}

/*上映スケジュール*/
section.schedule {
	margin: 0;
	padding: 60px 6vw;
	border-bottom: 1px solid #999;
}
@media screen and (min-width:800px) {
	section.schedule {
		margin: 0;
		padding: 120px calc(50vw - 450px);
	}
}
section.schedule h3 {
	font-size: 1.4rem;
	text-align: center;
	font-weight: 700;
}
section.schedule h4 {
	margin: 1.5rem 0 .5rem;
	font-size: 1.2rem;
	text-align: center;
	font-weight: 700;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

section.schedule table {
	line-height: 1.2;
}
section.schedule table th {
	padding: 0 .5rem 0 0;
	font-size: 1.3rem;
	font-weight: 700;
}
section.schedule table tr {
/*	clear: both;*/
}
section.schedule table tr * {
/*	float: left;*/
	vertical-align: middle;
}
section.schedule table td {
	padding: 0 .5rem 0 0;
}
section.schedule table th + td {
	white-space: nowrap;
}
section.schedule table td:last-of-type {
	font-weight: 700;
	margin-left: 1.1rem;
}
section.schedule table td:last-of-type span {
	font-weight: 400;
	font-size: .9rem;
}
section.schedule table tr:last-of-type th:first-of-type,
section.schedule table tr:last-of-type td:first-of-type {
/*	padding-top: .5rem;*/
}
/*会場*/
section.schedule h3:nth-of-type(2) {
	margin-top: 1.5em;
}
section.schedule h3:nth-of-type(2) span {
	display: block;
	padding-bottom: .2em;
	font-size: .7em;
	font-weight: 400;
}
@media screen and (min-width:800px) {
	section.schedule h4 {
		margin: 50px 0 20px;
	}
	section.schedule table {
		width: 100%;
	}
	section.schedule table tr * {
		float: none;
	}
	section.schedule table th {
		padding: .5rem;
		border-right: 1px dashed #ccc;
		border-bottom: 1px dashed #ccc;
	}
	section.schedule table td:first-of-type {
		padding: .5rem;
		width: 20%;
		border-right: 1px dashed #ccc;
		border-bottom: 1px dashed #ccc;
	}
	section.schedule table td:last-of-type {
		padding: .5rem;
		border-bottom: 1px dashed #ccc;
	}
	section.schedule table td br {
		display: none;
	}
	section.schedule table td span {
		margin: 0 0 0 1rem;
	}
	section.schedule table tr:last-of-type * {
		border-bottom: none;
	}
	section.schedule h3:nth-of-type(2) {
		margin-top: 70px;
	}
}

section.schedule p.openingTime {
	margin: 2rem 0 0 0;
	padding: .6em;
	text-align: center;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.2;
	border: 1px solid #666;
}
/*予告編の上映など補足*/
section.schedule p.note {
	margin: 5px 0 0 0;
	text-align: center;
	font-size: .9rem;
}
section.schedule h3 + p {
	margin: 40px 0 0 0;
	padding: .3rem;
	font-size: .8rem;
	line-height: 1.2;
	color: #fff;
	background-color: rgba(0,0,0,.5);
	border-radius: .2rem;
}


/*フッター*/
footer.footer {
	margin: 0;
	padding: 60px 10vw 5vw;
	text-align: center;
	position: relative;
}
footer.footer h3 {
	font-weight: 700;
	font-size: 1.1rem;
}
footer.footer img {
	margin: .3rem 0 0 0;
	width: 70%;
}
footer.footer dl {
	margin: 2rem 0 0 0;
	font-size: .8rem;
}
footer.footer dl dt {
	font-weight: 700;
}
footer.footer dl dt:not(:first-of-type) {
	padding-top: 1em;
}
/*会社のロゴある場合*/
footer.footer dl dd.nameLogo {
	display: flex;
	justify-content: center;
	align-items: center;
}
footer.footer dl dd.nameLogo img {
	width: 6vw;
	margin: 0 .3em 0 0;
}
footer.footer p {
	font-size: .8rem;
}
footer.footer p:nth-of-type(2){
	font-weight: 700;
}
footer.footer p.sound {
	margin-top: 2em;
	padding-bottom: .8em;
	line-height: 1.2;
}
footer.footer p.sound img {
	display: block;
	width: 6vw;
	margin: 1em auto .2em;
}
footer.footer p.sound strong {
	display: block;
/*	font-size: 1.2em;*/
	font-weight: 700;
}
footer.footer p.lastnote {
	margin: 1em 0;
}
footer.footer a.archive {
	display: table;
	margin: 7vw auto 10vw;
	padding: .1em 3em;
	text-decoration: none;
	font-size: 1.1em;
	color: #fff;
	background-color: #777;
	border-radius: 6em;
}
@media screen and (min-width:800px) {
	footer.footer a.archive {
		margin: 60px auto;
	}
}
@media screen and (min-width:800px) {
	footer.footer {
		margin: 0;
		padding: 120px calc(50vw - 450px) 40px;
	}
	footer.footer dl {
		font-size: 1rem;
	}
	footer.footer img {
		margin: .6rem 0 0 0;
		width: 350px;
	}
	footer.footer dl dd.nameLogo img {
		width: 60px;
		margin: 0 10px 0 0;
	}
	footer.footer p.sound {
/*		display: flex;*/
		width: 200px;
		text-align: left;
		margin: 50px auto;
		font-size: .9rem;
	}
	footer.footer p.sound img {
		width: 40px;
		margin: 0 10px 0 0;
		float: left;
	}
}



/*トップへ戻る*/
a.totop {
	position: fixed;
	z-index: 20;
	bottom: 4vw;
/*	right: calc(50% - 40px);*/
	right: 25px;
	width: 77px;
	height: 77px;
	margin-bottom: 0px;
	white-space: nowrap;
	text-indent: 110%;
	background: url(../img/arrow_totop.svg) 50% no-repeat;
	overflow: hidden;
	background-size: 80%;
}
@media screen and (min-width:800px) {
	a.totop {
		right: calc(50% - 600px);
		height: 110px;
		background-size: contain;
	}
}


/*時間差読み込み用*/
.fadeitem {
  opacity: 0;
  transition: all .5s ease;
}
.fadeitem.show {
  opacity: 1;
  transform: none;
}