/* CSS Document */

#hero{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin-top: clamp(32px, calc(56 / 1200 * 100vw), 56px);
}
#hero>*{
	grid-column: 2;
}
#hero h1{
	display: grid;
	grid-row-gap: 8px;
	font: 600 clamp(20px, calc(28 / 768 * 100vw), 28px) var(--font-min);
	letter-spacing: 0.1em;
}
#hero h1:after{
	content: attr(data-ruby);
	font-size: clamp(10px, calc(12 / 768 * 100vw), 12px);
}

#detail{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
	overflow: hidden;
}
body:not(:has(#free)) #detail{
	margin-bottom: clamp(96px, calc(120 / 1200 * 100vw), 120px);
}
#detail>*{
	grid-column: 2;
}
#detail h2{
	order: -1;
	margin-bottom: clamp(24px, calc(48 / 1200 * 100vw), 48px);
	color: var(--color-theme);
	font-weight: 600;
	font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
	letter-spacing: 0.1em;
}
#detail h2+div{
	grid-column: 1 / 4;
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	background: #d3e6e8;
	margin-top: clamp(24px, calc(48 / 1200 * 100vw), 48px);
}
#detail h2+div .fr-view{
	margin-top: clamp(24px, calc(48 / 1200 * 100vw), 48px);
}
@media (min-width: 992px) {
	#detail h2+div{
		grid-template-columns: calc(var(--wrap) - 360px) 360px;
	}
}
#detail #detailPhoto{
	order: -1;
	margin-bottom: clamp(24px, calc(48 / 1200 * 100vw), 48px);
}
#detail #detailLink{
	order: -1;
	margin-top: clamp(24px, calc(48 / 1200 * 100vw), 48px);
}
@media (min-width: 992px) {
	#detail #detailLink{
		order: 1;
		justify-self: end;
		width: 320px;
	}
}

#detailPhoto{
}
#detailPhoto dl{
	display: grid;
}
#detailPhoto dl>*{
	grid-column: 1;
	grid-row: 1;
}
#detailPhoto dt{
	align-self: end;
	display: grid;
	align-items: center;
	min-height: clamp(32px, calc(48 / 768 * 100vw), 48px);
	padding: 4px 16px;
	background: rgba(255, 255, 255, 0.5);
	text-align: center;
	letter-spacing: 0.05em;
	z-index: 1;
	pointer-events: none;
}
#detailPhoto dt:empty{
	visibility: hidden;
}
#detailPhoto dd{
}
#detailPhoto dd a{
	display: block;
}
#detailPhoto dd img{
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
#detailPhoto .slick-arrow{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	display: grid;
	aspect-ratio: 1;
	width: clamp(48px, calc(64 / 1200 * 100vw), 64px);
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid var(--color-border);
	border-radius: 100%;
	font-size: 0;
	z-index: 1;
}
#detailPhoto .slick-arrow:before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1;
	width: 8px;
	background: currentColor;
	transform: translate(-50%, -50%);
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon points="0 7 8 4 0 1 0 7"/></svg>') no-repeat center / contain;
}
#detailPhoto .slick-arrow.slick-prev:before{
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon points="8 7 0 4 8 1 8 7"/></svg>');
}

#detailPhotoTile{
	display: grid;
	grid-gap: 8px;
}
@media (max-width: 575.98px) {
	#detailPhotoTile{
		grid-template-columns: 1r 1fr;
	}
	#detailPhotoTile dl:nth-child(1),
	#detailPhotoTile dl:nth-child(6){
		grid-column: 1 / 3;
	}
}
@media (min-width: 576px) {
	#detailPhotoTile{
		grid-template-columns: calc(50% - 2px) 1fr 1fr;
	}
	#detailPhotoTile dl:nth-child(1){
		grid-row: 1 / 3;
	}
	#detailPhotoTile dl:nth-child(6){
		grid-row: 3 / 5;
	}
}

#detailPhotoSlide{
	display: grid;
	grid-template-columns: auto 1fr auto;
}
#detailPhotoSlide dl{
	grid-column: 2;
	grid-row: 1;
}
#detailPhotoSlide dl:nth-child(n+2){
	display: none;
}
#detailPhotoSlide .slick-list{
	grid-column: 2;
	overflow: visible;
}
#detailPhotoSlide .slick-slide{
	margin: 0 16px;
}
#detailPhotoSlide .slick-arrow{
	align-self: center;
}
@media (max-width: 767.98px) {
	#detailPhotoSlide .slick-list{
		grid-column: 1 / 4;
		grid-row: 1;
		margin: 0 -40px;
	}
	#detailPhotoSlide .slick-arrow{
		grid-row: 1;
	}
	#detailPhotoSlide .slick-prev{
		grid-column: 1;
	}
	#detailPhotoSlide .slick-next{
		grid-column: 3;
	}
}

#detailPhotoSlideNav{
	display: grid;
	grid-template-columns: auto 1fr auto;
	margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
}
#detailPhotoSlideNav dt{
	display: none;
}
#detailPhotoSlideNav dd{
}
#detailPhotoSlideNav dd a{
	pointer-events: none;
}
#detailPhotoSlideNav .slick-list{
	grid-column: 2;
	margin: 0 8px;
}
#detailPhotoSlideNav .slick-slide{
	margin: 0 8px;
}
#detailPhotoSlideNav .slick-arrow{
	align-self: center;
	width: clamp(32px, calc(48 / 1200 * 100vw), 48px);
}

#detailLink{
}
#detailLink ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	grid-gap: 16px 24px;
}
#detailLink li{
	display: contents;
}
#detailLink a{
	display: grid;
	align-items: center;
	width: min(100%, 320px);
	min-height:48px;
	padding: 4px 16px;
	background: var(--color);
	color: #fff;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.05em;
}
#detailLink a[data-fav-id]{
	grid-template-columns: auto 1fr;
	background: var(--color-theme);
}
#detailLink a[data-fav-id]:before{
	content: "";
	aspect-ratio: 1;
	width: 16px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><polygon points="13.65 0 10.82 0 8 2.82 5.18 0 2.35 0 0 2.35 0 6.59 8 16 16 6.59 16 2.35 13.65 0"/></svg>') no-repeat center / contain;
}
#detailLink a[data-fav-id].favOn{
	background: #ccc;
}

#detailTag{
	grid-column: 1 / 4;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	background: #d3e6e8;
	padding-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
}
#detailTag:not(:has(li)){
	display: none;
}
#detailTag>*{
	grid-column: 2;
}
#detailTag h3{
	display: none;
}
#detailTag h3+div{
	display: grid;
	grid-gap: 16px 24px;
	padding: clamp(16px, calc(24 / 1200 * 100vw), 24px) 0;
	border: 1px solid var(--color-border);
	border-width: 1px 0;
}
@media (min-width: 576px) {
	#detailTag h3+div{
		grid-template-columns: auto 1fr;
	}
}
#detailTag div{
	display: grid;
	grid-row-gap: 8px;
}
@media (min-width: 576px) {
	#detailTag div{
		display: contents;
	}
}
#detailTag h4{
	align-self: center;
	display: grid;
	grid-template-columns: 4px 1fr;
	column-gap: 16px;
	font-weight: 700;
}
#detailTag h4:before{
	content: "";
	height: 1em;
	align-self: start;
	background: var(--color-theme);
	transform: translateY(0.325em);
}
#detailTag ul{
	display: flex;
	flex-wrap: wrap;
	grid-gap: 8px;
}
#detailTag a{
	display: grid;
	align-items: center;
	padding: 4px 8px;
	background: #fff;
	border: 1px solid var(--color-border);
	color: inherit;
	font: 600 clamp(10px, calc(12 / 768 * 100vw), 12px) var(--font-min);
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.025em;
}

#detailMovie{
	grid-column: 1 / 4;
	display: grid;
	grid-template-columns: 1fr min(var(--wrap-fit), 960px) 1fr;
	background: #d3e6e8;
	padding-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
}
#detailMovie>*{
	grid-column: 2;
}
#detailMovie h3{
	display: none;
}
#detailMovie iframe{
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}
#detailMovie iframe.short{
	aspect-ratio: 9 / 16;
}

#detailBasic{
	grid-column: 1 / 4;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	background: #d3e6e8;
	padding-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
}
#detailBasic>*{
	grid-column: 2;
}
@media (min-width: 992px) {
	#detailBasic:has(#detaiApplication){
	}
	#detailBasic:has(#detaiApplication) h3+div,
	#detailBasic:has(#detaiApplication) h3+div+div{
		grid-column: 1 / 3;
		justify-self: right;
		width: min(var(--wrap), calc(100% - 216px));
	}
}
#detailBasic h3{
	font: 600 clamp(20px, calc(24 / 768 * 100vw), 24px) var(--font-min);
	text-align: center;
	letter-spacing: 0.1em;
}
#detailBasic h3+div{
	margin-top: 16px;
}
#detailBasic h3+div+div{
	margin-top: 8px;
}
#detailBasic dl{
	display: grid;
	column-gap: 24px;
	border-top: 1px solid var(--color-border);
	overflow: hidden;
}
@media (min-width: 576px) {
	#detailBasic dl{
		grid-template-columns: auto 1fr;
	}
}
#detailBasic dt,
#detailBasic dd{
	padding: 16px 0;
}
#detailBasic dt{
	color: var(--color-theme);
	font-weight: 700;
}
@media (max-width: 575.98px) {
	#detailBasic dt{
		padding-bottom: 0;
	}
}
@media (min-width: 576px) {
	#detailBasic dt{
		min-width: 120px;
		max-width: 320px;
	}
}
#detailBasic dd{
	position: relative;
}
#detailBasic dd:before{
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100vw;
	border-bottom: 1px solid var(--color-border);
}
#detailBasic dd ul{
	display: grid;
	grid-row-gap: 8px;
}
#detailBasic dd li{
}
#detailBasic dd li a{
	display: grid;
	grid-template-columns: 17px auto;
	grid-column-gap: 8px;
}
#detailBasic dd li a:before{
	content: "";
	aspect-ratio: 1;
	background: currentColor;
	transform: translateY(0.4em);
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><rect x="6" y="1" width="10" height="10"/><polyline points="1 4 1 16 13 16"/></svg>') no-repeat center / contain;
}

#detaiApplication{
	position: fixed;
	left: 50%;
	bottom: 0;
	width: min(100%, 1600px);
	padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	transform: translateX(-50%);
	z-index: 1000;
	pointer-events: none;
}
#detaiApplication a{
	display: grid;
	align-items: center;
	width: min(100%, 320px);
	min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
	padding: 4px 16px;
	background: var(--color-theme);
	color: #fff;
	font: 600 clamp(16px, calc(18 / 1200 * 100vw), 18px) var(--font-min);
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.05em;
	pointer-events: all;
}
#detaiApplication a:hover{
	background: #808080;
}
@media (max-width: 991.98px) {
	#detaiApplication{
		display: flex;
		justify-content: center;
		background: rgba(255, 255, 255, 0.7);
	}
}
@media (min-width: 992px) {
	#detaiApplication a{
		aspect-ratio: 1;
		width: 9em;
		border: 1px solid #fff;
		border-radius: 100%;
		overflow: hidden;
	}
}

#detailShare{
	grid-column: 1 / 4;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	background: #d3e6e8;
	padding: 24px 0 clamp(48px, calc(64 / 1200 * 100vw), 64px) 0;
}
#detailShare>*{
	grid-column: 2;
}
#detailShare h3{
	display: none;
}
#detailShare ul{
	display: flex;
	justify-content: center;
	column-gap: 8px;
}
#detailShare li{
	display: contents;
}
#detailShare a{
	display: grid;
	grid-template-columns: 14px auto;
	align-items: center;
	column-gap: 4px;
	min-height: 24px;
	padding: 0 8px;
	background: var(--color);
	border-radius: 12px;
	color: #fff;
	font-size: 10px;
	text-decoration: none;
}
#detailShare a:before{
	content: "";
	aspect-ratio: 1;
	background: currentColor;
}
#detailShare a[href*="x.com"]{
	background: var(--color);
}
#detailShare a[href*="x.com"]:before{
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11.74,8.57L18.54.67h-1.61l-5.9,6.86L6.31.67H.87l7.13,10.38L.87,19.33h1.61l6.23-7.25,4.98,7.25h5.44l-7.4-10.76h0ZM9.53,11.14l-.72-1.03L3.06,1.88h2.48l4.64,6.64.72,1.03,6.03,8.63h-2.48l-4.92-7.04h0Z"/></svg>') no-repeat center / contain;
}
#detailShare a[href*="facebook.com"]{
	background: #0866ff;
	border-radius: 4px;
}
#detailShare a[href*="facebook.com"]:before{
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path d="M250,0C111.93,0,0,111.93,0,250c0,117.24,80.72,215.62,189.61,242.64v-166.24h-51.55v-76.4h51.55v-32.92c0-85.09,38.51-124.53,122.05-124.53h0c15.84,0,43.17,3.11,54.35,6.21v69.25h0c-5.9-.62-16.15-.93-28.88-.93-40.99,0-56.83,15.53-56.83,55.9v27.02h81.66l-14.03,76.4h-67.63v171.77c123.79-14.95,219.71-120.35,219.71-248.17C500,111.93,388.07,0,250,0Z"/></svg>') no-repeat center / contain;
}
#detailShare a[href*="line.me"]{
	background: #06c755;
	border-radius: 4px;
}
#detailShare a[href*="line.me"]:before{
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"><path d="M240,103.04c0-53.7-53.83-97.38-120-97.38S0,49.35,0,103.04c0,48.14,42.69,88.45,100.36,96.08,3.91.84,9.23,2.58,10.57,5.92,1.21,3.03.79,7.79.39,10.85,0,0-1.41,8.47-1.71,10.27-.52,3.03-2.41,11.87,10.39,6.47,12.81-5.4,69.11-40.69,94.28-69.67h0c17.39-19.07,25.72-38.43,25.72-59.92ZM77.66,131.76c0,1.27-1.03,2.29-2.29,2.29h-33.71c-1.27,0-2.29-1.03-2.29-2.29v-.04h0v-52.33c0-1.27,1.03-2.29,2.29-2.29h8.51c1.26,0,2.29,1.03,2.29,2.29v41.57h22.91c1.26,0,2.29,1.03,2.29,2.29v8.51ZM97.96,131.76c0,1.27-1.03,2.29-2.29,2.29h-8.51c-1.27,0-2.29-1.03-2.29-2.29v-52.37c0-1.27,1.03-2.29,2.29-2.29h8.51c1.27,0,2.29,1.03,2.29,2.29v52.37ZM155.89,131.76c0,1.27-1.03,2.29-2.29,2.29h-8.46c-.21,0-.41-.03-.6-.08-.01,0-.02,0-.03,0-.05-.01-.11-.03-.16-.05-.02,0-.05-.02-.07-.03-.04-.02-.07-.03-.11-.05-.04-.02-.07-.03-.11-.05-.02-.01-.04-.02-.07-.04-.05-.03-.1-.06-.14-.09,0,0-.02-.01-.03-.02-.22-.15-.43-.34-.59-.58l-23.99-32.4v31.1c0,1.27-1.03,2.29-2.29,2.29h-8.51c-1.27,0-2.29-1.03-2.29-2.29v-52.37c0-1.27,1.03-2.29,2.29-2.29h8.46s.05,0,.08,0c.04,0,.08,0,.12,0,.04,0,.08,0,.12.02.03,0,.07,0,.1.01.05,0,.09.02.14.03.03,0,.05.01.08.02.05.01.09.03.14.04.02,0,.05.02.07.03.05.02.09.04.13.06.02.01.05.02.07.04.04.02.08.05.13.07.02.01.05.03.07.04.04.03.08.05.12.08.02.02.04.03.06.05.04.03.08.07.12.11.01.01.03.03.04.04.05.05.09.09.14.14,0,0,.01.01.01.02.07.08.13.15.18.24l23.96,32.36v-31.11c0-1.27,1.03-2.29,2.29-2.29h8.51c1.27,0,2.29,1.03,2.29,2.29v52.37ZM202.37,87.9c0,1.27-1.03,2.29-2.29,2.29h-22.91v8.84h22.91c1.26,0,2.29,1.03,2.29,2.29v8.51c0,1.27-1.03,2.29-2.29,2.29h-22.91v8.84h22.91c1.26,0,2.29,1.03,2.29,2.29v8.51c0,1.27-1.03,2.29-2.29,2.29h-33.71c-1.27,0-2.29-1.03-2.29-2.29v-.04h0v-52.28h0v-.05c0-1.27,1.03-2.29,2.29-2.29h33.71c1.26,0,2.29,1.03,2.29,2.29v8.51Z"/></svg>') no-repeat center / contain;
}

#free{
	order: 1;
	grid-column: 1 / 4;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin: clamp(32px, calc(56 / 1200 * 100vw), 56px) 0 clamp(96px, calc(120 / 1200 * 100vw), 120px) 0;
	&>*{
		grid-column: 2;
	}
	& h2{
		display: none;
	}
}

#recommend{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin: clamp(32px, calc(56 / 1200 * 100vw), 56px) 0 clamp(96px, calc(120 / 1200 * 100vw), 120px) 0;
	overflow: hidden;
}
#recommend>*{
	grid-column: 2;
}
#recommend h2{
	align-self: center;
	display: grid;
	grid-template-columns: 4px 1fr;
	column-gap: 16px;
	font: 600 clamp(20px, calc(24 / 768 * 100vw), 24px) var(--font-min);
	letter-spacing: 0.1em;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
#recommend h2:before{
	content: "";
	height: 1em;
	align-self: start;
	background: var(--color-theme);
	transform: translateY(0.325em);
}
#recommend #recommendList{
	margin-top: 24px;
	justify-self: center;
	grid-column: 1 / 4;
	width: min(var(--wrap-fit), 1300px);
}

#recommendList{
}
#recommendList section{
	position: relative;
	display: grid;
	grid-row-gap: 16px;
}
#recommendList section:not(:has(img)):before{
	content: "";
	grid-column: 1;
	grid-row: 1;
	aspect-ratio: 3 / 2;
	background: var(--dummy);
}
#recommendList h3{
	color: var(--color-theme);
	font: 600 clamp(14px, calc(16 / 768 * 100vw), 16px) var(--font-min);
}
#recommendList h3+div{
	display: contents;
}
#recommendList h3+div a{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
}
#recommendList figure{
	grid-column: 1;
	grid-row: 1;
	& img{
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}
}
#recommendList .slick-slider{
	display: grid;
	grid-template-columns: auto 1fr auto;
}
#recommendList .slick-slider:before{
	content: "";
	grid-column: 2;
	grid-row: 1;
	aspect-ratio: 3 / 2;
	width: calc(100% - 32px);
}
@media (min-width: 576px) {
	#recommendList .slick-slider:before{
		width: calc(50% - 32px);
	}
}
@media (min-width: 992px) {
	#recommendList .slick-slider:before{
		width: calc(33.33% - 32px);
	}
}
@media (min-width: 1400px) {
	#recommendList .slick-slider:before{
		width: calc((100% - 128px) / 4);
		width: calc(25% - 32px);
	}
}
#recommendList .slick-slider .slick-list{
	grid-column: 2;
	grid-row: 1 / 3;
}
#recommendList .slick-slider .slick-arrow{
	align-self: center;
}
#recommendList .slick-list{
	overflow: visible;
}
#recommendList .slick-slide{
	margin: 0 16px;
}
#recommendList .slick-arrow{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	display: grid;
	aspect-ratio: 1;
	width: clamp(48px, calc(64 / 1200 * 100vw), 64px);
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid var(--color-border);
	border-radius: 100%;
	font-size: 0;
	z-index: 1;
}
#recommendList .slick-arrow:before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1;
	width: 8px;
	background: currentColor;
	transform: translate(-50%, -50%);
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon points="0 7 8 4 0 1 0 7"/></svg>') no-repeat center / contain;
}
#recommendList .slick-arrow.slick-prev:before{
	-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon points="8 7 0 4 8 1 8 7"/></svg>');
}