@charset "UTF-8";
body{
	background-color : #f5f5f5;
}

/* --------------------------------------------
ARTICLE
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#article{
		padding-top : calc( 48 var( --remBase ) );
		padding-bottom : calc( 210 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#article{
		grid-column : 1/3;
		padding-inline : 0;
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : 0;
	}
	#article :where( #articleHeader , #articleHeader , #video , #overview , #info , #sup , #images ){
		margin-left : auto;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1439.98px ){
	:where( #articleHeader , #articleHeader , #video , #overview , #info , #sup , #images ){
		width : calc( 900 * 100% / 1132 );
		margin-right : calc( 37 * 100% / 1132 );
	}
}
@media print , screen and ( min-width : 1440px ){
	:where( #articleHeader , #articleHeader , #video , #overview , #info , #sup , #images ){
		width : 900px;
		margin-right : 37px;
	}
}
#articleHeader > p{
	font-family : "Noto Serif Japanese";
	font-weight : 700;
	text-align : center;
}
@media screen and ( max-width : 750px ){
	#articleHeader > p{
		margin-top : calc( 27 var( --remBase ) );
		font-size : 4rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#articleHeader > p{
		margin-top : calc( 20 var( --remBase ) );
		font-size : 1.6rem;
	}
}
#links{
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : center;
}
#links a{
	display : grid;
	place-items : center;
	font-weight : 700;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	background-color : white;
}
@media screen and ( max-width : 750px ){
	#links{
		grid-auto-columns : calc( 148 var( --viewportBase ) );
		column-gap : calc( 26 var( --viewportBase ) );
		margin-top : calc( 51 var( --remBase ) );
	}
	#links a{
		height : calc( 60 var( --remBase ) );
		font-size : 2.4rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#links{
		grid-auto-columns : calc( 74 var( --mainBase ) );
		column-gap : calc( 8 var( --mainBase ) );
		margin-top : calc( 40 var( --remBase ) );
	}
	#links a{
		height : calc( 28 var( --remBase ) );
		font-size : 1.2rem;
	}
}
.title02{
	font-family : "Noto Serif Japanese";
	font-weight : 700;
}
@media screen and ( max-width : 750px ){
	.title02{
		font-size : 4.8rem;
		text-align : center;
	}
}
@media print , screen and ( min-width : 750.02px ){
	.title02{
		font-size : 2.4rem;
	}
}
.hgroup01 p{
	line-height : 1.56;
	letter-spacing : .05em;
}
@media screen and ( max-width : 750px ){
	.hgroup01 p{
		margin-top : calc( 36 var( --remBase ) );
		font-size : 2rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	.hgroup01{
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 25 var( --mainBase ) );
		align-items : start;
		justify-content : start;
	}
	.hgroup01 p{
		font-size : 1rem;
	}
}
#video{
	border-top-color : black;
	border-top-style : solid;
}
#video picture img{
	width : 100%;
	height : auto;
}
#video dl{
	display : grid;
	grid-template-columns : auto auto;
	align-items : start;
	justify-content : start;
}
#video dt , #video dd{
	letter-spacing : .05em;
}
#video dt{
	display : grid;
	align-items : center;
	justify-content : start;
	font-weight : 400;
	letter-spacing : .05em;
}
#video dt::before{
	display : block;
	font-size : 0;
	content : "";
	background-color : black;
}
#video .sub{
	background-color : white;
}
#video .sub p{
	display : grid;
	grid-template-rows : auto auto 1fr;
	align-items : start;
	justify-content : start;
	line-height : 1.56;
	letter-spacing : .05em;
}
#video .sub p::before{
	display : block;
	grid-row : 1/4;
	grid-column : 1;
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/earphone.svg" ) center / contain no-repeat;
}
#video .sub p span{
	grid-row : 2/4;
	grid-column : 2;
	line-height : 1.56;
	letter-spacing : .05em;
}
#video .sub a{
	display : grid;
	place-items : center;
	letter-spacing : .05em;
	background-color : #e7e7e7;
	border-color : black;
	border-style : solid;
}
@media screen and ( max-width : 750px ){
	#video{
		padding-top : calc( 60 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
		border-top-width : calc( 2 var( --remBase ) );
	}
	#video .box{
		margin-top : calc( 24 var( --remBase ) );
	}
	#video picture{
		width : 100%;
	}
	#video dl{
		grid-template-columns : calc( 315 var( --percentBase ) ) 1fr;
		row-gap : calc( 24 var( --remBase ) );
		margin-top : calc( 42 var( --remBase ) );
	}
	#video dt{
		grid-template-columns : calc( 40 * 100% / 315 ) auto;
		column-gap : calc( 28 * 100% / 315 );
		font-size : 2.4rem;
		line-height : calc( 32 / 24 );
	}
	#video dt::before{
		height : calc( 40 var( --remBase ) );
	}
	#video dd{
		font-size : 3rem;
		line-height : calc( 32 / 30 );
	}
	#video .sub{
		padding-inline : calc( 50 var( --percentBase ) );
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 44 var( --remBase ) );
		margin-top : calc( 48 var( --remBase ) );
	}
	#video .sub p{
		grid-template-columns : calc( 110 * 100% / 570 ) auto;
		column-gap : calc( 58 * 100% / 570 );
		font-size : 3.2rem;
	}
	#video .sub p::before{
		align-self : center;
		height : calc( 85 var( --remBase ) );
	}
	#video .sub p span{
		font-size : 2.4rem;
	}
	#video .sub a{
		width : 100%;
		height : calc( 92 var( --remBase ) );
		margin-top : calc( 36 var( --remBase ) );
		font-size : 3.2rem;
		font-weight : 700;
		border-width : calc( 3 var( --remBase ) );
		border-radius : 100vmax;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#video{
		padding-top : calc( 32 var( --remBase ) );
		padding-bottom : calc( 47 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
		border-top-width : calc( 2 var( --remBase ) );
	}
	#video .box{
		display : grid;
		grid-template-rows : auto calc( 17 var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 340 var( --mainBase ) ) 1fr;
		column-gap : calc( 24 var( --mainBase ) );
		align-items : start;
		margin-top : calc( 16 var( --remBase ) );
	}
	#video picture{
		grid-row : 1/5;
		grid-column : 1;
	}
	#video dl{
		grid-template-columns : calc( 168 * 100% / 536 ) 1fr;
		grid-row : 1;
		grid-column : 2;
	}
	#video dt{
		grid-template-columns : calc( 16 * 100% / 168 ) auto;
		column-gap : calc( 8 * 100% / 168 );
		font-size : 1.4rem;
		line-height : 2;
	}
	#video dt::before{
		height : calc( 16 var( --remBase ) );
	}
	#video dd{
		font-size : 1.6rem;
		line-height : 1.75;
	}
	#video .sub{
		grid-row : 3/5;
		grid-column : 2;
		width : calc( 396 * 100% / 536 );
		padding-inline : calc( 16 * 100% / 396 );
		padding-top : calc( 9 var( --remBase ) );
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#video .sub p{
		grid-template-columns : calc( 51 * 100% / 364 ) auto;
		column-gap : calc( 10 * 100% / 364 );
		font-size : 1.6rem;
	}
	#video .sub p::before{
		height : calc( 42 var( --remBase ) );
	}
	#video .sub p span{
		font-size : 1.4rem;
	}
	#video .sub a{
		width : calc( 264 * 100% / 364 );
		height : calc( 40 var( --remBase ) );
		margin-top : calc( 15 var( --remBase ) );
		font-size : 1.6rem;
		border-width : calc( 2 var( --remBase ) );
		border-radius : calc( 5 var( --remBase ) );
	}
}
#overview p{
	line-height : 1.75;
	letter-spacing : .05em;
}
@media screen and ( max-width : 750px ){
	#overview{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#overview::before{
		display : block;
		width : 100%;
		height : calc( 2 var( --remBase ) );
		margin-inline : auto;
		margin-bottom : calc( 60 var( --remBase ) );
		content : "";
		background-color : black;
	}
	#overview p{
		margin-top : calc( 40 var( --remBase ) );
		font-size : 3rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#overview{
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 36 var( --remBase ) );
		border-top : solid calc( 2 var( --remBase ) ) black;
	}
	#overview p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.6rem;
	}
}
#info dl{
	display : grid;
	align-items : start;
	justify-content : start;
}
#info dt , #info dd{
	letter-spacing : .05em;
}
#info dt{
	display : grid;
	align-items : center;
	justify-content : start;
}
#info dt::before{
	display : block;
	font-size : 0;
	content : "";
	background-color : black;
}
@media screen and ( max-width : 750px ){
	#info{
		padding-bottom : calc( 95 var( --remBase ) );
	}
	#info::before{
		display : block;
		width : 100%;
		height : calc( 2 var( --remBase ) );
		margin-inline : auto;
		margin-bottom : calc( 60 var( --remBase ) );
		content : "";
		background-color : black;
	}
	#info dl{
		grid-template-columns : calc( 257 var( --percentBase ) ) auto;
		margin-top : calc( 60 var( --remBase ) );
	}
	#info dt{
		grid-template-columns : calc( 40 * 100% / 257 ) auto;
		column-gap : calc( 13 * 100% / 257 );
		padding-top : calc( 2.5 var( --remBase ) );
		font-size : 2.4rem;
		font-weight : 500;
		line-height : calc( 32 / 24 );
	}
	#info dt::before{
		height : calc( 40 var( --remBase ) );
	}
	#info dd{
		font-size : 3rem;
		line-height : 1.5;
	}
	#info :where( dt,dd ):not( :first-of-type ){
		margin-top : calc( 26 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#info{
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 50 var( --remBase ) );
		border-top : solid calc( 2 var( --remBase ) ) black;
	}
	#info dl{
		grid-template-columns : calc( 158 var( --mainBase ) ) auto;
		margin-top : calc( 24 var( --remBase ) );
	}
	#info dt{
		grid-template-columns : calc( 16 * 100% / 158 ) auto;
		column-gap : calc( 8 * 100% / 158 );
		padding-top : calc( 3.5 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#info dt::before{
		height : calc( 16 var( --remBase ) );
	}
	#info dd{
		font-size : 1.6rem;
		line-height : 1.75;
	}
	#info :where( dt,dd ):not( :first-of-type ){
		margin-top : calc( 3 var( --remBase ) );
	}
}
#sup a{
	display : block;
	background-color : white;
}
#sup .watch{
	display : grid;
	align-items : center;
	justify-content : center;
	line-height : 1.56;
	letter-spacing : .05em;
}
#sup .watch::before{
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/earphone.svg" ) center / contain no-repeat;
}
#sup picture{
	width : 100%;
}
#sup picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#sup h3{
	font-weight : 700;
	line-height : 1.75;
	letter-spacing : .05em;
}
#sup .comment{
	letter-spacing : .05em;
}
#sup dl{
	display : grid;
	align-items : start;
	justify-content : start;
}
#sup dt{
	display : grid;
	align-items : center;
	justify-content : start;
	letter-spacing : .05em;
}
#sup dt::before{
	display : block;
	font-size : 0;
	content : "";
	background-color : black;
}
#sup dd{
	letter-spacing : .05em;
}
@media screen and ( max-width : 750px ){
	#sup{
		padding-bottom : calc( 103 var( --remBase ) );
	}
	#sup::before{
		display : block;
		width : 100%;
		height : calc( 2 var( --remBase ) );
		margin-inline : auto;
		margin-bottom : calc( 60 var( --remBase ) );
		content : "";
		background-color : black;
	}
	#sup ul{
		margin-top : calc( 59 var( --remBase ) );
	}
	#sup li{
		width : calc( 544 var( --percentBase ) );
		margin-inline : auto;
	}
	#sup li + li{
		margin-top : calc( 58 var( --remBase ) );
	}
	#sup a{
		padding-inline : calc( 64 * 100% / 544 );
		padding-top : calc( 48 var( --remBase ) );
		padding-bottom : calc( 51 var( --remBase ) );
	}
	#sup .watch{
		grid-template-columns : calc( 42 * 100% / 416 ) auto;
		column-gap : calc( 19 * 100% / 416 );
		width : calc( 361 * 100% / 416 );
		height : calc( 92 var( --remBase ) );
		margin-inline : auto;
		font-size : 3.2rem;
		background-color : #e0e0e0;
		border : solid calc( 3 var( --remBase ) ) currentColor;
		border-radius : 100vmax;
	}
	#sup .watch::before{
		height : calc( 33 var( --remBase ) );
	}
	#sup picture{
		height : calc( 270 var( --remBase ) );
		margin-top : calc( 35 var( --remBase ) );
	}
	#sup h3{
		margin-top : calc( 14 var( --remBase ) );
		font-size : 3.2rem;
	}
	#sup .comment{
		margin-top : calc( 7 var( --remBase ) );
		font-size : 3rem;
		line-height : 1.75;
	}
	#sup dl{
		grid-template-columns : calc( 178 * 100% / 416 ) auto;
		row-gap : calc( 24 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#sup dt{
		grid-template-columns : calc( 40 * 100% / 178 ) auto;
		column-gap : calc( 19 * 100% / 178 );
		font-size : 2.4rem;
		line-height : calc( 32 / 24 );
	}
	#sup dt::before{
		height : calc( 40 var( --remBase ) );
	}
	#sup dd{
		padding-top : calc( 4 var( --remBase ) );
		font-size : 3.2rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	#sup{
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 50 var( --remBase ) );
		border-top : solid calc( 2 var( --remBase ) ) black;
	}
	#sup ul{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 280 var( --mainBase ) ) );
		row-gap : calc( 27 var( --remBase ) );
		column-gap : calc( 27 var( --mainBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#sup a{
		padding-inline : calc( 16 * 100% / 280 );
		padding-top : calc( 16 var( --remBase ) );
		padding-bottom : calc( 15 var( --remBase ) );
	}
	#sup .watch{
		grid-template-columns : calc( 28 * 100% / 248 ) auto;
		column-gap : calc( 16 * 100% / 248 );
		font-size : 1.6rem;
	}
	#sup .watch::before{
		height : calc( 22 var( --remBase ) );
	}
	#sup picture{
		height : calc( 161 var( --remBase ) );
		margin-top : calc( 15 var( --remBase ) );
	}
	#sup h3{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
	}
	#sup .comment{
		margin-top : calc( 3 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 2;
	}
	#sup dl{
		grid-template-columns : calc( 128 * 100% / 248 ) auto;
		margin-top : calc( 12 var( --remBase ) );
	}
	#sup dt{
		grid-template-columns : calc( 16 * 100% / 128 ) auto;
		column-gap : calc( 8 * 100% / 128 );
		font-size : 1.4rem;
		line-height : 2;
	}
	#sup dt::before{
		height : calc( 16 var( --remBase ) );
	}
	#sup dd{
		font-size : 1.6rem;
		line-height : 1.75;
	}
}
#images ul{
	display : grid;
}
#images li > a , #images li > div{
	display : block;
}
#images picture img{
	object-fit : contain;
	width : 100%;
	height : 100%;
}
#images a picture{
	position : relative;
}
#images a picture::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/zoom.svg" ) center / contain no-repeat;
}
#images a picture.is-vertical::after{
	bottom : 0;
	translate : -50% 0;
}
#images a picture.is-horizontal::after{
	right : 0;
	translate : 50% -100%;
}
#images h4 , #images p{
	font-weight : 400;
	line-height : 1.5;
	text-indent : .05em;
	letter-spacing : .05em;
	text-align: left;
	padding: 0 1em;
}
#images h4{
	font-weight: 600;
	margin-bottom: .3em;
}
@media screen and ( max-width : 750px ){
	#images{
		padding-bottom : calc( 120 var( --remBase ) );
	}
	#images::before{
		display : block;
		width : 100%;
		height : calc( 2 var( --remBase ) );
		margin-inline : auto;
		margin-bottom : calc( 60 var( --remBase ) );
		content : "";
		background-color : black;
	}
	#images ul{
		grid-template-columns : repeat( 2 , 1fr );
		row-gap : calc( 64 var( --remBase ) );
		margin-top : calc( 60 var( --remBase ) );
	}
	#images a picture::after{
		width : calc( 64 * 100% / 294 );
		height : calc( 64 var( --remBase ) );
	}
	#images a picture.is-vertical::after{
		left : calc( 50% + ( ( ( var( --width ) * 291 / var( --height ) ) / 2 ) * 100% / 294 ) );
	}
	#images a picture.is-horizontal::after{
		top : calc( 50% + ( ( ( var( --height ) * 294 / var( --width ) ) / 2 ) var( --remBase ) ) );
	}
	#images picture{
		width : calc( 294 * 100% / 335 );
		height : calc( 291 var( --remBase ) );
		margin-inline : auto;
	}
	#images h4 , #images p{
		font-size : 2.4rem;
	}
	#images h4{
		margin-top : calc( 11 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#images{
		padding-top : calc( 24 var( --remBase ) );
		padding-bottom : calc( 36 var( --remBase ) );
		border-top : solid calc( 2 var( --remBase ) ) black;
	}
	#images ul{
		grid-template-columns : repeat( 4 , 1fr );
		row-gap : calc( 24 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#images a picture::after{
		width : calc( 40 * 100% / 225 );
		height : calc( 40 var( --remBase ) );
	}
	#images a picture.is-vertical::after{
		left : calc( 50% + ( ( ( var( --width ) * 198 / var( --height ) ) / 2 ) * 100% / 200 ) );
	}
	#images a picture.is-horizontal::after{
		top : calc( 50% + ( ( ( var( --height ) * 200 / var( --width ) ) / 2 ) var( --remBase ) ) );
	}
	#images picture{
		width : calc( 200 * 100% / 225 );
		height : calc( 198 var( --remBase ) );
		margin-inline : auto;
	}
	#images h4 , #images p{
		font-size : 1.4rem;
	}
	#images h4{
		margin-top : calc( 8 var( --remBase ) );
	}
}
#document picture{
	width : 100%;
}
#document picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#document h4 , #document p{
	line-height : 1.5;
	letter-spacing : .05em;
}
@media screen and ( max-width : 750px ){
	#document{
		padding-top : calc( 61 var( --remBase ) );
		padding-bottom : calc( 60 var( --remBase ) );
		background-color : #e7e7e7;
		border-top : solid calc( 2 var( --remBase ) ) black;
	}
	#document #splide{
		margin-top : calc( 60 var( --remBase ) );
	}
	#document #splide .splide__slide{
		width : calc( 364 var( --viewportBase ) );
		margin-left : calc( 40 var( --viewportBase ) );
	}
	#document picture{
		height : calc( 235 var( --remBase ) );
	}
	#document h4 , #document p{
		font-size : 2.4rem;
	}
	#document h4{
		margin-top : calc( 14 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#document{
		position : relative;
		z-index : 0;
		padding-top : calc( 25 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
		background-color : #e7e7e7;
		border-top : solid calc( 2 var( --remBase ) ) black;
	}
	#document #splide{
		padding-inline : calc( 26 var( --mainBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#document #splide .splide__slide{
		width : calc( 200 * 100% / 848 );
		margin-inline : calc( 8 * 100% / 848 );
	}
	#document picture{
		height : calc( 129 var( --remBase ) );
	}
	#document h4 , #document p{
		font-size : 1.4rem;
	}
	#document h4{
		margin-top : calc( 5 var( --remBase ) );
	}
	#document .splide__arrow{
		position : absolute;
		top : calc( 58.75 var( --remBase ) );
		font-size : 0;
	}
	#document .splide__arrow--prev{
		left : 0;
	}
	#document .splide__arrow--next{
		right : 0;
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1439.98px ){
	#document{
		padding-left : calc( 195 * 100% / 1132 );
		padding-right : calc( 37 * 100% / 1132 );
	}
}
@media print , screen and ( min-width : 1440px ){
	#document{
		padding-left : calc( ( 100% - 900px - 37px ) );
		padding-right : 37px;
	}
}

/* --------------------------------------------
MODAAL
--------------------------------------------- */
.modaal-gallery-item img{
	max-width : calc( 100dvw - 280px );
}
@media ( max-width : 1139.98px ){
	.modaal-gallery-item img{
		max-width : calc( 100dvw - 50px );
	}
}
@media ( max-height : 999.98px ){
	.modaal-gallery-item img{
		max-height : calc( 100dvh - 120px );
	}
}


@media print , screen and ( min-width : 750.02px ){
	.btn-back{
		position: relative;
	}
		.btn-back a{
			position: absolute;
			top: -40px;
			left:calc(50vw  - 520px);
				
		}
}