/*
Theme Name: Twenty Twenty-Five
Author: YAMI
*/
@charset "utf-8";

/* font
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* reset
================================================== */
*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert;}
*,*::before,*::after{box-sizing:border-box;}
html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
a,button{cursor:revert;}
ol,ul,menu,summary{list-style:none;}
ol{counter-reset:revert;}
img{max-inline-size:100%;max-block-size:100%;}
table{border-collapse:collapse;}
input,textarea{-webkit-user-select:auto;}
textarea{white-space:revert;}
meter{-webkit-appearance:revert;appearance:revert;}
:where(pre){all:revert;box-sizing:border-box;}
::placeholder{color:unset;}
:where([hidden]){display:none;}
:where([contenteditable]:not([contenteditable="false"])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto;}
:where([draggable="true"]){-webkit-user-drag:element;}
:where(dialog:modal){all:revert;box-sizing:border-box;}
::-webkit-details-marker{display:none;}

/* addition
-------------------------------------------------- */
body{position:relative;width:100%;font-size:15px;line-height:2;color:#FFF;font-family:'Roboto','Noto Sans JP',sans-serif;font-weight:400;background:#000;}
footer,header,main,picture{display:block;}
img{vertical-align:top;}
a{color:#1473E6;vertical-align:bottom;background:transparent;}
@media screen and (max-width:767px){
body{font-size:14px;}
}

/* YIFF
================================================== */
html,body{
	height:100%;
}
#wrapper{
	display:flex;
}
@media screen and (max-width:979px){
	#wrapper{
		display:block;
	}
}

/* header
-------------------------------------------------- */
header{
	max-width:60vw;
	height:100vh;
	aspect-ratio:1600/2262;
}
header .poster{
	position:fixed;
	max-width:60vw;
	height:100vh;
	aspect-ratio:1600/2262;
	background:url(../image/kv.jpg) no-repeat top right/auto 100%;
}
header .poster img{
	display:none;
}
@media screen and (max-width:979px){
	header{
		width:100%;
		max-width:initial;
		height:auto;
		aspect-ratio:initial;
	}
	header .poster{
		position:static;
		width:100%;
		max-width:initial;
		height:auto;
		aspect-ratio:initial;
		background:none;
	}
	header .poster img{
		display:block;
	}
}

/* footer
-------------------------------------------------- */
footer{
	position:sticky;
	top:100vh;
	padding-block:114px 16px;
}
footer .copyright{
	font-size:11px;
	line-height:1;
	color:#888;
	text-align:center;
}
@media screen and (max-width:767px){
	footer{
		padding-block:78px 10px;
	}
	footer .copyright{
		font-size:10px;
	}
}

/* main
-------------------------------------------------- */
main{
	width:100%;
}
.en{font-family:'Roboto';}
.ja{font-family:'Noto Sans JP';}

/* .navigation
-------------------------------------------------- */
#navigation{
	position:sticky;
	top:0;
	left:0;
	z-index:1000;
}
#navigation .container{
	max-width:626px;
	margin-inline:auto;
	padding-block-end:98px;
	padding-inline:min(2.34375vw,30px);
}
#navigation .inner{
	display:flex;
	align-items:center;
	border-block-end:1px solid #383838;
	background:rgba(0,0,0,0.8);
}
#navigation .main{
	display:flex;
	margin-inline-start:auto;
}
#navigation .main a,
#navigation .button{
	display:block;
	font-size:14px;
	line-height:1;
	color:#FFF;
	font-family:'Roboto Condensed';
}
#navigation .main a{
	padding:17px min(0.8vw,15px) 15px;
	font-weight:400;
}
#navigation .button{
	position:relative;
	margin-inline-start:0.8vw;
	padding:7px 15px 5px 35px;
	font-weight:500;
	border-radius:3px;
	background:#333;
}
#navigation .button::before{
	position:absolute;
	top:4px;
	left:10px;
	width:18px;
	height:18px;
	background:url(../svg/ticket.svg);
	content:'';
}
#navigation .close{
	position:fixed;
	top:12px;
	right:14px;
	display:none;
	width:19px;
	height:19px;
	z-index:3000;
}
#navigation .close::before,
#navigation .close::after{
	position:absolute;
	top:50%;
	display:block;
	width:19px;
	height:1px;
	margin-block:-1px;
	background:#FFF;
	content:'';
}
#navigation .close::before{
	transform:rotate(45deg);
}
#navigation .close::after{
	transform:rotate(-45deg);
}
#panel{
	position:fixed;
	top:0;
	left:0;
	display:none;
	justify-content:end;
	align-items:center;
	width:100%;
	padding-block:10px;
	background:rgba(0,0,0,0.8);
	z-index:1000;
}
#panel .button{
	position:relative;
	margin-inline-start:0.8vw;
	padding:6px 10px 4px 30px;
	font-size:13px;
	font-weight:500;
	border-radius:3px;
	background:#333;
}
#panel .button::before{
	position:absolute;
	top:3px;
	left:8px;
	width:17px;
	height:17px;
	background:url(../svg/ticket.svg);
	content:'';
}
#panel #menu{
	position:relative;
	width:19px;
	height:19px;
	margin-inline:14px;
}
#panel #menu span{
	position:absolute;
	display:block;
	width:19px;
	height:1px;
	background:#FFF;
}
#panel #menu span:nth-last-of-type(1){
	top:50%;
	margin-top:-1px;
}
#panel #menu span:nth-last-of-type(2){
	top:3px;
}
#panel #menu span:nth-last-of-type(3){
	bottom:3px;
}
@media screen and (min-width:980px){
	#navigation{
		display:block !important;
	}
}
@media screen and (max-width:1099px){
	#navigation .main a,
	#navigation .button{
		font-size:13px;
	}
	#navigation .main a{
		padding-inline:0.7vw;
	}
	#navigation .button{
		margin-inline-start:0.7vw;
		padding:6px 10px 4px 30px;
	}
	#navigation .button::before{
		top:3px;
		left:8px;
		width:17px;
		height:17px;
	}
}
@media screen and (max-width:979px){
	#navigation{
		position:fixed;
		display:none;
		width:100%;
		height:100dvh;
		background:rgba(0,0,0,0.8);
		z-index:2000;
	}
	#navigation .container{
		padding-block:113px 0;
		padding-inline:3.2vw;
	}
	#navigation .inner{
		display:block;
		align-items:unset;
		border-block-end:none;
		width:fit-content;
		margin-inline:auto;
		background:transparent;
	}
	#navigation .main{
		display:grid;
		row-gap:21px;
		margin:0;
	}
	#navigation .main a{
		padding:11px 0 9px;
		font-size:15px;
		text-align:center;
	}
	#navigation .button{
		margin-block-start:33px;
		margin-inline:auto;
		padding:9px 20px 7px 39px;
		font-size:14px;
	}
	#navigation .button::before{
		position:absolute;
		top:6px;
		left:14px;
		width:18px;
		height:18px;
	}
	#navigation .close{
		display:block
	}
	#panel{
		display:flex;
	}
}

/* common
-------------------------------------------------- */
.contents{
	max-width:626px;
	margin-inline:auto;
	padding-inline:min(2.34375vw,30px);
}
.heading{
	font-size:23px;
	line-height:1;
	font-weight:200;
}
.subheading{
	font-size:18px;
	line-height:1;
	font-weight:700;
}
.subheading .ja{
	display:block;
	padding-block-start:7px;
	font-size:12px;
}
.text{
	color:#CCC;
}
.subheading+.text{
	padding-block-start:23px;
}
.text.en+.text.ja{
	margin-block-start:3px;
	font-size:11px;
}
.list{
	display:grid;
	grid-auto-flow:row;
}
.list li{
	position:relative;
	padding-inline-start:15px;
}
.list li::before{
	position:absolute;
	top:12px;
	left:3px;
	display:block;
	width:5px;
	border-radius:50%;
	background:#CCC;
	aspect-ratio:1;
	content:'';
}
.button{
	display:block;
	padding:7px 22px 5px;
	font-size:14px;
	line-height:1;
	color:#FFF;
	font-family:'Roboto Condensed';
	font-weight:500;
	text-align:center;
	border-radius:3px;
	background:#333;
}
@media screen and (max-width:979px){
	.contents{
		max-width:initial;
		padding-block-start:90px;
		padding-inline:6.25vw;
	}
}
@media screen and (max-width:767px){
	.contents{
		padding-block-start:clamp(54px,14.4vw,74px);
		padding-inline:0;
	}
	.heading{
		padding-inline:3.2vw;
		font-size:19px;
	}
	.subheading{
		font-size:15px;
	}
	.subheading .ja{
		padding-block-start:6px;
		font-size:10px;
	}
	.subheading+.text{
		padding-block-start:16px;
	}
	.text.en+.text.ja{
		font-size:10px;
	}
	.list li{
		padding-inline-start:12px;
	}
	.list li::before{
		top:11px;
		left:2px;
		width:4px;
	}
	.button{
		padding:6px 16px 5px;
		font-size:13px;
	}
}

/* #index
-------------------------------------------------- */
#index{
	padding-block-end:5px;
}

/* .schedule */
#index .schedule .table{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	margin-block-start:32px;
	line-height:1;
}
#index .schedule .date{
	padding:6px 10px 5px;
	font-size:13px;
	font-weight:500;
	border-radius:5px 5px 0 0;
	border:1px solid #383838;
	background:#383838;
}
#index .schedule .date:not(:first-of-type){
	margin-block-start:12px;
}
#index .schedule .day01,
#index .schedule .day02,
#index .schedule .day03,
#index .schedule .day04{
	grid-column:1/4;
}
#index .schedule .day05,
#index .schedule .day06,
#index .schedule .day07{
	grid-column:1/3;
}
#index .schedule .cell{
	padding:11px 10px 13px;
	border:1px solid #383838;
	border-block-start:0;
}
#index .schedule .left{
	border-inline-end:0;
	border-radius:0 0 0 5px;
}
#index .schedule .center{
	border-inline-end:0;
}
#index .schedule .right{
	border-radius:0 0 5px 0;
}
#index .schedule .time{
	font-size:12px;
	color:#CCC;
	font-weight:500;
}
#index .schedule .movie{
	display:grid;
	grid-auto-flow:row;
	row-gap:11px;
	margin-block-start:12px;
}
#index .schedule .film{
	font-size:13px;
	font-weight:500;
}
#index .schedule .film .notes{
	font-size:10px;
	font-weight:400;
}
#index .schedule .film span{
	display:inline-block;
}
#index .schedule .rating{
	width:fit-content;
	margin-block:6px 2px;
	padding:2px 5px 1px;
	font-size:10px;
	line-height:1;
	color:#000;
	font-family:'Roboto Condensed';
	font-weight:700;
	text-align:center;
	border-radius:7px;
	background:#FFF;
}
#index .schedule .guest{
	width:fit-content;
	margin-block:13px 2px;
	padding:4px 10px 3px;
	font-size:10px;
	color:#CCC;
	border:1px solid #A6A6A6;
	border-radius:10px;
}
#index .schedule .shortfilm{
	grid-column:3/4;
	grid-row:9/16;
	padding:12px 0 0 12px;
}
#index .schedule .shortfilm .group{
	display:grid;
	row-gap:12px;
	height:100%;
}
#index .schedule .shortfilm .cell{
	padding-block-start:31px;
	border-radius:5px;
	border:1px solid #383838;
}
#index .schedule .shortfilm .program{
	font-size:15px;
	font-weight:500;
}
#index .schedule .shortfilm .program span{
	display:block;
	padding-block-end:5px;
	font-size:11px;
	color:#CCC;
	font-weight:500;
}
#index .schedule .shortfilm .list{
	row-gap:11px;
	margin-block-start:17px;
}
#index .schedule .shortfilm .list li{
	padding-inline-start:13px;
	font-size:13px;
	font-weight:500;
}
#index .schedule .shortfilm .list li::before{
	top:4px;
	width:4px;
	height:4px;
	background:#FFF;
}

/* .tickets */
#index .tickets{
	margin-block-start:62px;
}
#index .information .table{
	margin-block-start:32px;
	border-radius:5px;
	border:1px solid #383838;
}
#index .information .table dt{
	padding:6px 10px 7px;
	background:#383838;
}
#index .information .table dd{
	padding:8px 10px 9px;
}
#index .information .table .text{
	line-height:1.5;
	color:#FFF;
}
#index .information .table .text.en{
	font-size:13px;
}
#index .information .table .text.ja{
	margin-block-start:2px;
	font-size:10px;
}
#index .information .list{
	row-gap:18px;
	margin-block-start:23px;
}

/* news */
#index .news{
	margin-block-start:57px;
}
#index .news .article{
	margin-block-start:32px;
	border-block-start:1px solid #383838;
}
#index .news .article li{
	border-block-end:1px solid #383838;
}
#index .news .article a{
	display:block;
	padding:17px 11px 13px;
}
#index .news .article dt{
	margin-block-end:7px;
	font-size:12px;
	color:#CCC;
	line-height:1;
	font-weight:700;
}
#index .news .article dd{
	font-size:13px;
	color:#FFF;
	line-height:1.5;
}
#index .news .button{
	width:fit-content;
	margin-block-start:18px;
	margin-inline-start:auto;
}

/* organized */
#index .organized{
	margin-block-start:64px;
	padding:36px 32px 43px;
	border:1px solid #383838;
}
#index .partner{
	display:grid;
	grid-auto-flow:row;
	row-gap:25px;
	margin-block-start:25px;
	line-height:1.5;
}
#index .partner .text.ja{
	margin-block-start:5px;
}
@media screen and (max-width:767px){
	#index .schedule{
		padding-inline:3.2vw;
	}
	#index .schedule .table{
		display:block;
		grid-template-columns:unset;
		margin-block-start:24px;
	}
	#index .schedule .date{
		padding:7px 9px 5px;
		font-size:12px;
		border-radius:0;
		border:none;
	}
	#index .schedule .date:not(:first-of-type){
		margin-block-start:0;
	}
	#index .schedule .day01,
	#index .schedule .day02,
	#index .schedule .day03,
	#index .schedule .day04,
	#index .schedule .day05,
	#index .schedule .day06,
	#index .schedule .day07{
		grid-column:unset;
	}
	#index .schedule .cell{
		padding:11px 9px 15px;
		border:none;
		border-block-start:0;
	}
	#index .schedule .cell+.cell{
		border-block-start:1px solid #383838;
	}
	#index .schedule .left,
	#index .schedule .center,
	#index .schedule .right{
		border-radius:0;
	}
	#index .schedule .time{
		font-size:11px;
	}
	#index .schedule .movie{
		row-gap:9px;
		margin-block-start:9px;
	}
	#index .schedule .movie li{
		display:flex;
		align-items:center;
		column-gap:6px;
	}
	#index .schedule .film{
		font-size:12px;
	}
	#index .schedule .rating{
		margin-block:0;
		padding:1px 6px 0;
	}
	#index .schedule .guest{
		margin-block:10px 0;
	}
	#index .schedule .shortfilm{
		grid-column:unset;
		grid-row:unset;
		padding:17px 15px 16px;
		border:1px solid #383838;
	}
	#index .schedule .shortfilm .group{
		display:block;
		row-gap:0;
		height:auto;
	}
	#index .schedule .shortfilm .cell{
		padding:0;
		border-radius:0;
		border:none;
	}
	#index .schedule .shortfilm .cell+.cell{
		margin-block-start:16px;
		padding-block-start:17px;
		border-block-start:1px solid #383838;
	}
	#index .schedule .shortfilm .program{
		font-size:13px;
	}
	#index .schedule .shortfilm .program span{
		padding-block-end:3px;
		font-size:10px;
	}
	#index .schedule .shortfilm .list{
		grid-auto-flow:column;
		width:fit-content;
		margin-block-start:12px;
	}
	#index .schedule .shortfilm .list li{
		padding-inline-start:0;
		font-size:12px;
	}
	#index .schedule .shortfilm .list li::before{
		content:none;
	}
	#index .schedule .shortfilm .list li:not(:last-of-type)::after{
		display:inline-block;
		padding-inline:5px;
		content:'/';
	}
	#index .tickets{
		margin-block-start:59px;
		padding-inline:3.2vw;
	}
	#index .information .table{
		margin-block-start:24px;
		border-radius:0;
		border:none;
		border-block-end:1px solid #383838;
	}
	#index .information .table dt{
		padding:4px 9px 5px;
	}
	#index .information .table dd{
		padding:8px 9px 13px;
	}
	#index .information .table .text.en{
		font-size:12px;
	}
	#index .information .table .text.ja{
		margin-block-start:1px;
	}
	#index .information .list{
		row-gap:11px;
		margin-block-start:16px;
	}
	#index .news{
		margin-block-start:54px;
		padding-inline:3.2vw;
	}
	#index .news .article{
		margin-block-start:24px;
	}
	#index .news .article a{
		padding:11px 9px 8px;
	}
	#index .news .article dt{
		font-size:11px;
	}
	#index .news .article dd{
		font-size:12px;
	}
	#index .news .button{
		margin-block-start:12px;
	}
	#index .organized{
		margin-block-start:60px;
		margin-inline:3.2vw;
		padding:23px 15px 22px;
	}
	#index .partner{
		row-gap:17px;
		margin-block-start:19px;
	}
	#index .partner .text.ja{
		margin-block-start:2px;
	}
}

/* #about
-------------------------------------------------- */
/* .about */
#about .about{
	margin-block-start:58px;
}

/* .jury */
#about .jury{
	margin-block-start:57px;
}
#about .profile{
	display:grid;
	grid-template-columns:144px 1fr;
	gap:14px 20px;
}
#about .profile:not(:first-of-type){
	margin-block-start:27px;
	padding-block-start:32px;
	border-block-start:1px solid #383838;
}
#about .profile:first-of-type{
	margin-block-start:32px;
}
#about .name{
	margin-block-end:10px;
	padding-block-start:4px;
	font-size:16px;
	line-height:1;
	font-weight:700;
}
@media screen and (max-width:767px){
	#about .about{
		margin-block-start:44px;
		padding-inline:3.2vw;
	}
	#about .jury{
		margin-block-start:54px;
		padding-inline:3.2vw;
	}
	#about .profile{
		grid-template-columns:auto;
	}
	#about .profile:not(:first-of-type){
		padding-block-start:24px;
	}
	#about .profile:first-of-type{
		margin-block-start:24px;
	}
	#about img{
		display:block;
		width:188px;
		margin-inline:auto;
	}
	#about .name{
		margin-block-end:13px;
		padding-block-start:0;
		font-size:15px;
		text-align:center;
	}
}

/* #news
-------------------------------------------------- */
/* .news */
#news .article{
	margin-block-start:60px;
	border-block-start:1px solid #383838;
}
#news .article li{
	border-block-end:1px solid #383838;
}
#news .article a{
	display:block;
	padding:17px 11px 13px;
}
#news .article dt{
	margin-block-end:7px;
	font-size:12px;
	color:#CCC;
	line-height:1;
	font-weight:700;
}
#news .article dd{
	font-size:13px;
	color:#FFF;
	line-height:1.5;
}

/* .wp-pagenavi */
#news .wp-pagenavi{
	display:grid;
	grid-auto-flow:column;
	column-gap:3px;
	width:fit-content;
	margin-block-start:18px;
	margin-inline:auto;
	padding-block-end:5px;
}
#news .wp-pagenavi a,
#news .wp-pagenavi span{
	display:block;
	padding-block:7px 5px;
	font-size:14px;
	line-height:1;
	font-family:'Roboto Condensed';
	font-weight:500;
	text-align:center;
	border-radius:3px;
}
#news .wp-pagenavi a{
	color:#FFF;
	background:#333;
}
#news .wp-pagenavi span{
	color:#000;
	background:#FFF;
}
#news .wp-pagenavi .page,
#news .wp-pagenavi .current{
	aspect-ratio:1;
}
#news .wp-pagenavi .previouspostslink,
#news .wp-pagenavi .nextpostslink{
	width:70px;
}

/* .post */
#news .post{
	margin-block-start:1px;
}
#news .date{
	font-size:14px;
	line-height:1;
	color:#CCC;
	font-weight:700;
}
#news .headline{
	margin-block-start:6px;
	font-size:15px;
	line-height:1.5;
	font-weight:600;
}
#news .headline.en{
	margin-block-start:0;
	font-size:13px;
}
#news .text{
	margin-block-start:20px;
	font-size:12px;
}
#news .text.en{
	margin-block-start:1px;
	font-size:11px;
}
#news .picture{
	display:grid;
	grid-auto-flow:row;
	row-gap:16px;
	margin-block-start:24px;
	padding-block-end:8px;
}
#news .picture:empty{
	display:none;
}
#news .picture img{
	width:100%;
}

/* .pagination */
#news .pagination{
	display:flex;
	column-gap:3px;
	margin-block-start:24px;
	padding-block-end:5px;
}
#news .pagination li:first-of-type{
	margin-inline-end:auto;
}
#news .pagination a{
	min-width:70px;
}
@media screen and (max-width:767px){
	#news .article{
		margin-block-start:45px;
		margin-inline:3.2vw;
	}
	#news .article a{
		padding:11px 9px 8px;
	}
	#news .article dt{
		font-size:11px;
	}
	#news .article dd{
		font-size:12px;
	}
	#news .wp-pagenavi{
		margin-block-start:24px;
		padding-inline:3.2vw;
	}
	#news .wp-pagenavi a,
	#news .wp-pagenavi span{;
		padding-block-start:6px;
		font-size:13px;
	}
	#news .wp-pagenavi .previouspostslink,
	#news .wp-pagenavi .nextpostslink{
		width:56px;
	}
	#news .post>*:not(.picture){
		padding-inline:3.2vw;
	}
	#news .date{
		font-size:11px;
	}
	#news .headline{
		margin-block-start:8px;
		font-size:12px;
	}
	#news .headline.en{
		margin-block-start:3px;
		font-size:11px;
	}
	#news .text{
		margin-block-start:12px;
		font-size:11px;
	}
	#news .text.en{
		font-size:10px;
	}
	#news .picture{
		row-gap:12px;
		margin-block-start:17px;
		padding-block-end:7px;
	}
	#news .pagination{
		margin-block-start:17px;
		padding-inline:3.2vw;
	}
	#news .pagination a{
		min-width:56px;
	}
}

/* #films
-------------------------------------------------- */
#films{
	padding-block-start:2px;
}

/* .anchor */
#films .anchor{
	margin-block-start:58px;
}
#films .genre{
	display:grid;
	grid-template-columns:repeat(3,auto);
	column-gap:3px;
	width:fit-content;
}
#films .link{
	display:grid;
	grid-template-columns:repeat(2,auto);
	column-gap:10px;
	align-items:end;
	width:fit-content;
	margin-block-start:14px;
	padding-block-end:2px;
	color:#CCC;
	border-block-end:1px solid #CCC;
}
#films .link .en{
	font-size:14px;
	line-height:1;
}
#films .link .ja{
	padding-block-end:2px;
	font-size:10px;
	line-height:1.2;
}

/* .category */
#films .category:not(:first-of-type){
	margin-block-start:62px;
}
#films .category:first-of-type{
	margin-block-start:42px;
}
#films .category .subheading{
	margin-block-start:-72px;
	padding-block:72px 19px;
}
#films .catalog{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:44px 5px;
}
#films .catalog a{
	display:block;
}

/* .details */
#films .details{
	line-height:1;
}
#films .details .title,
#films .details .director{
	color:#FFF;
}
#films .details .information,
#films .details .date,
#films .details .premiere{
	color:#CCC;
}
#films .details.small .title br{
	display:none;
}
#films .details.small .title span.ja{
	display:block;
}
#films .details.small .title span.ja::before{
	content:'\90A6\984C\FF1A';
}
#films .details .director{
	margin-block-start:7px;
	font-size:13px;
	line-height:1;
}
#films .details .director::before{
	padding-inline-end:1.375ex;
	font-size:10px;
	content:'Director';
}
#films .details .information{
	display:flex;
}
#films .details .time{
	position:relative;
	margin-inline-start:1.375ex;
	padding-inline-start:1.375ex;
	border-inline-start:1px solid #808080;
}
#films .details .time::after{
	padding-inline-start:2px;
	content:'min';
}
#films .details .screen{
	display:flex;
	flex-wrap:wrap;
}
#films .details .date{
	position:relative;
	display:flex;
	align-items:end;
}
#films .details .date::before{
	position:absolute;
	left:0;
	display:block;
	background:url(../svg/clock.svg) no-repeat;
	aspect-ratio:1;
	content:'';
}
#films .details .date .week{
	padding-inline:0.6ex;
}
#films .details .premiere{
	width:fit-content;
	padding:6px 22px 5px;
	font-size:11px;
	border:1px solid #A6A6A6;
	border-radius:12px;
}
#films .details .rating{
	width:fit-content;
	color:#000;
	font-family:'Roboto Condensed';
	font-weight:700;
	border-radius:9px;
	background:#FFF;
}
#films .details .rating:empty{
	display:none;
}

/* .large */
#films .details.large dl{
	display:grid;
	grid-template-columns:188px 1fr;
	gap:23px 20px;
	align-items:end;
}
#films .details.large dd{
	padding-block-end:11px;
}
#films .details.large .title{
	font-size:24px;
	font-weight:700;
}
#films .details.large .title span.ja{
	padding-block:7px 5px;
	font-size:13px;
}
#films .details.large .information{
	margin-block:30px 13px;
}
#films .details.large .country,
#films .details.large .time{
	font-size:13px;
}
#films .details.large .time::after{
	font-size:11px;
}
#films .details.large .screen{
	gap:6px 18px;
	margin-block-start:18px;
	padding-block-start:17px;
	border-block-start:1px solid #383838;
}
#films .details.large .date{
	padding-block-start:2px;
	padding-inline-start:19px;
}
#films .details.large .date::before{
	top:1px;
	width:14px;
}
#films .details.large .date .day,
#films .details.large .date .start{
	font-size:14px;
}
#films .details.large .date .week{
	font-size:11px;
}
#films .details.large .rating{
	margin-block-start:8px;
	padding:3px 12px 1px;
	font-size:14px;
}

/* .small */
#films .details.small{
	display:grid;
	grid-auto-flow:row;
	row-gap:21px;
}
#films .details.small .thumbnail{
	display:grid;
	place-items:center;
	aspect-ratio:4/3;
	background:#0D0D0D;
}
#films .details.small .title{
	font-size:16px;
	font-weight:500;
}
#films .details.small .title span.ja{
	padding-block-start:7px;
	font-size:11px;
}
#films .details.small .title:has(span.ceremony){
	display:flex;
	align-items:end;
}
#films .details.small .title span.ceremony{
	position:relative;
	display:block;
	padding-block-end:1px;
	padding-inline-start:19px;
	font-size:11px;
	font-weight:400;
}
#films .details.small .title span.ceremony::before{
	position:absolute;
	bottom:2px;
	left:9px;
	width:1px;
	height:14px;
	background:#BFBFBF;
	content:'';
}
#films .details.small .information{
	margin-block-start:20px;
}
#films .details.small .country,
#films .details.small .time{
	padding-block-start:1px;
	font-size:11px;
}
#films .details.small .time::after{
	font-size:10px;
}
#films .details.small .screen{
	gap:5px 15px;
	margin-block:12px 13px;
}
#films .details.small .date{
	padding-inline-start:15px;
}
#films .details.small .date::before{
	top:0;
	width:11px;
}
#films .details.small .date .day,
#films .details.small .date .start{
	font-size:12px;
}
#films .details.small .date .week{
	font-size:10px;
}
#films .details.small .rating{
	margin-block-start:7px;
	padding:2px 10px 1px;
	font-size:12px;
}

/* .notice */
#films .notice{
	margin-block-start:64px;
	padding:36px 32px 43px;
	border:1px solid #383838;
}
#films .restriction{
	margin-block-start:23px;
}
#films .notice .list{
	row-gap:18px;
	margin-block:18px;
}
#films .notice .list br{
	display:none;
}
#films .notice .rating{
	display:block;
	margin-block-end:-7px;
	font-weight:700;
}

/* .synopsis */
#films .synopsis{
	margin-block-start:62px;
}

/* .statement */
#films .statement{
	margin-block-start:57px;
}
#films .statement .director{
	display:grid;
	grid-template-columns:144px 1fr;
	gap:14px 24px;
	margin-block-start:32px;
}
#films .statement .name{
	margin-block-end:10px;
	padding-block-start:4px;
	font-size:16px;
	line-height:1;
	font-weight:700;
}

/* .cast */
#films .cast{
	margin-block-start:57px;
}
#films .list{
	row-gap:1px;
	margin-block-start:23px;
}

/* .trailer */
#films .trailer{
	margin-block-start:52px;
}
#films .trailer .youtube{
	width:100%;
	aspect-ratio:16/9;
	margin-block-start:32px;
}
#films .trailer .youtube iframe{
	width:100%;
	height:100%;
	vertical-align:bottom;
}

/* .copy */
#films .copy{
	font-size:12px;
	line-height:1.5;
	text-align:right;
}
#films .cast+.copy{
	margin-block-start:50px;
}
#films .trailer+.copy{
	margin-block-start:60px;
}

/* :empty */
#films:has(.text:empty) .statement,
#films:has(.youtube:empty) .trailer,
#films:has(.copy:empty) .copy{
	display:none;
}
@media screen and (max-width:767px){
	#films{
		padding-block-start:clamp(56px,14.93333vw,76px);
	}
	#films .anchor{
		margin-block-start:45px;
		padding-inline:3.2vw;
	}
	#films .link{
		column-gap:8px;
		margin-block-start:13px;
		padding-block-end:3px;
	}
	#films .link .en{
		font-size:13px;
	}
	#films .link .ja{
		padding-block-end:1px;
	}
	#films .category:not(:first-of-type){
		margin-block-start:60px;
	}
	#films .category:first-of-type{
		margin-block-start:59px;
	}
	#films .category .subheading{
		margin-block-start:0;
		padding-block:0 21px;
		padding-inline:3.2vw;
	}
	#films .catalog{
		grid-template-columns:auto;
		row-gap:32px;
	}
	#films .details .premiere{
		padding-inline:18px;
	}
	#films .details .rating{
		padding-block-start:2px;
		padding-inline:8px;
	}
	#films .details.large .title span.ja{
		padding-block:8px 3px;
		font-size:11px;
	}
	#films .details.large dl{
		grid-template-columns:auto;
		align-items:unset;
		padding-inline:3.2vw;
	}
	#films .details.large dd{
		padding-block-end:0;
	}
	#films .details.large .poster img{
		display:block;
		width:188px;
		margin-inline:auto;
	}
	#films .details.large .title{
		font-size:22px;
		text-align:center;
	}
	#films .details.large .information{
		width:fit-content;
		margin-block-start:26px;
		margin-inline:auto;
	}
	#films .details.large .screen{
		justify-content:center;
		gap:5px 15px;
		margin-block-start:15px;
		padding-block-start:14px;
	}
	#films .details.large .date{
		padding-block-start:0;
		padding-inline-start:15px;
	}
	#films .details.large .date::before{
		top:0;
		width:11px;
	}
	#films .details.large .date .day,
	#films .details.large .date .start{
		font-size:12px;
	}
	#films .details.large .date .week{
		font-size:10px;
	}
	#films .details.large .premiere{
		margin-inline:auto;
		padding-inline:25px;
	}
	#films .details.large .rating{
		margin-block-start:9px;
		margin-inline:auto;
		font-size:10px;
	}
	#films .details.small{
		row-gap:14px;
	}
	#films .details.small dd{
		padding-inline:3.2vw;
	}
	#films .details.small .title{
		font-size:15px;
	}
	#films .details.small .title span.ja{
		font-size:10px;
	}
	#films .details.small .title span.ceremony{
		padding-inline-start:17px;
		font-size:10px;
	}
	#films .details.small .title span.ceremony::before{
		left:8px;
		height:13px;
	}
	#films .details.small .rating{
		margin-block-start:7px;
		font-size:11px;
	}
	#films .notice{
		margin-block-start:60px;
		margin-inline:3.2vw;
		padding:23px 15px 22px;
	}
	#films .restriction{
		margin-block-start:16px;
	}
	#films .notice .list{
		row-gap:11px;
		margin-block:11px;
	}
	#films .notice .rating{
		margin-block-end:-6px;
	}
	#films .synopsis{
		margin-block-start:58px;
		padding-inline:3.2vw;
	}
	#films .statement{
		margin-block-start:54px;
		padding-inline:3.2vw;
	}
	#films .statement .director{
		grid-template-columns:auto;
		margin-block-start:24px;
	}
	#films .statement .thumbnail img{
		display:block;
		width:188px;
		margin-inline:auto;
	}
	#films .statement .name{
		margin-block-end:13px;
		padding-block-start:0;
		font-size:15px;
		text-align:center;
	}
	#films .cast{
		margin-block-start:54px;
		padding-inline:3.2vw;
	}
	#films .list{
		row-gap:0;
		margin-block-start:16px;
	}
	#films .trailer{
		margin-block-start:49px;
	}
	#films .trailer .subheading{
		padding-inline:3.2vw;
	}
	#films .trailer .youtube{
		margin-block-start:24px;
	}
	#films .copy{
		font-size:11px;
	}
	#films .cast+.copy{
		margin-block-start:46px;
	}
	#films .trailer+.copy{
		margin-block-start:56px;
	}
}

/* #access
-------------------------------------------------- */
/* .access */
#access .access{
	margin-block-start:58px;
}

/* .map */
#access .map{
	margin-block-start:26px;
	padding-block-end:5px;
}
#access .map iframe{
	width:100%;
	height:auto;
	aspect-ratio:16/9;
	vertical-align:bottom;
}
@media screen and (max-width:767px){
	#access .access{
		margin-block-start:44px;
		padding-inline:3.2vw;
	}
	#access .map{
		margin-block-start:18px;
		padding-block-end:5px;
	}
	#access .map iframe{
		aspect-ratio:1;
	}
}

/* slick
-------------------------------------------------- */
/* dots */
.slick-slider{
	margin-block-end:61px;
}
.slick-dotted.slick-slider{
	margin-block-end:77px;
}
.slick-dots{
	position:absolute;
	bottom:-17px;
	display:flex;
	justify-content:center;
	column-gap:2px;
	width:100%;
}
.slick-dots li{
	position:relative;
	display:block;
	width:14px;
	height:14px;
	cursor:pointer;
}
.slick-dots li button{
	display:block;
	width:14px;
	height:14px;
	font-size:0;
	line-height:0;
	color:transparent;
	border:0;
	outline:none;
	background:transparent;
	cursor:pointer;
}
.slick-dots li button:before{
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:14px;
	height:14px;
	border:4px solid #000;
	border-radius:50%;
	background:#383838;
	content:'';
}
.slick-dots li button:hover,
.slick-dots li button:focus{
	outline:none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before{
	opacity:1;
}
.slick-dots li.slick-active button:before{
	background:#FFF;
}
@media screen and (max-width:767px){
	.slick-slider{
		margin-block-end:57px;
	}
	.slick-dotted.slick-slider{
		margin-block-end:73px;
	}
}