/* CSS Document */

:root{
	--corner: min(2vw, 16px);
	}

:where(#pickup, #modelcourse, #ranking, #access, #information, #movie){
	margin: var(--space) auto calc(var(--space) * 2) auto;
	}
:where(#pickup header, #modelcourse header, #ranking header, #access h2, #information h2, #movie h2, #useful h2){
	position: relative;
	background: #fff;
	border-radius: var(--corner);
	}
	:where(#pickup header, #modelcourse header, #ranking header, #access h2, #information h2, #movie h2, #useful h2):after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
		border-radius: var(--corner);
		filter: blur(3px);
		z-index: -1;
		}
:where(#pickup, #modelcourse, #ranking) header{
	display: flex;
	align-items: center;
	justify-content: center;
	}
:where(#modelcourse, #ranking) header{
	padding: 1.5em 0;
	min-height: min(16vw, 10em);
	}
:where(#access, #information, #movie, #useful) h2{
	padding: 0.55em 1em 0.7em 1em;
	grid-gap: 0.75em;
	}
:where(#information, #movie, #useful) h2{
	display: flex;
	align-items: center;
	justify-content: center;
	}
	:where(#information, #movie, #useful) h2:before{
		content: "";
		width: 1em;
		height: 1em;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: contain;
		background: currentColor;
		transform: scale(1.5) translateY(7%);
		}

#pagePath{
	display: none;
	}

#main{}
	#main h2{
		font-family: fot-tsukuardgothic-std, sans-serif;
		font-size: min(6vw, 2em);
		line-height: 1em;
		}
		#main :where(#modelcourse, #ranking) h2{
			font-size: min(6vw, 2.4em);
			}
	#main h2[data-ruby]{
		display: flex;
		flex-direction: column;
		grid-gap: 0.25em;
		padding: 0;
		text-align: center;
		}
		#main h2[data-ruby] span{
			font-size: 0.6em;
			line-height: 1em;
			letter-spacing: 0.05em;
			}

#hero{
	display: grid;
	}
	#hero dl{
		display: grid;
		}
		#hero dl:before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			background: var(--dummy) center center;
			background-size: cover;
			z-index: -1;
			}
		#hero dl :where(dt, dd){
			grid-column: 1;
			grid-row: 1;
			}
	#hero dl+dl{
		display: none;
		}
	#hero dt{
		align-self: end;
		justify-self: start;
		padding: 0.5em 1.5em 0.5em 1em;
		background: #fff;
		border-radius: 0 1.3em 1.3em 0;
		color: var(--point-color);
		line-height: 1.6em;
		letter-spacing: 0.05em;
		}
		#hero dt:empty{
			display: none;
			}
	#hero dd{
		position: relative;
		}
		#hero dd :where(img, a){
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			}
		#hero dd img{
			object-fit: cover;
			z-index: -1;
			}
		#hero dd a{
			opacity: 0;
			}
	#hero .slick-list{
		grid-column: 1;
		grid-row: 1;
		}
	#hero .slick-slide{
		position: relative;
		}
	#hero .slick-arrow{
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		width: 2.4em;
		height: 2.4em;
		padding: 0;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.03 54.41"><polygon points="2.83 54.41 0 51.58 24.37 27.2 0 2.83 2.83 0 30.03 27.2 2.83 54.41"/></svg>') center no-repeat;
		-webkit-mask-size: contain;
		background: #fff;
		white-space: nowrap;
		text-indent: 100vw;
		overflow: hidden;
		z-index: 1;
		}
	#hero .slick-prev{
		transform: scale(-1, 1);
		}
	#hero .slick-next{
		justify-self: end;
		}

#search{
	display: flex;
	justify-content: center;
	margin-top: 1.5em;
	}
	#search a{
		display: flex;
		justify-content: center;
		grid-gap: 0.5em;
		padding: 1em 1.5em;
		background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
		border-radius: 2em;
		color: #fff;
		}
		#search a:before{
			content: "";
			width: 1em;
			height: 1em;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.2 12.2"><path d="m11.06,5.55c-.26-2.31-2.09-4.15-4.4-4.4V0h-1.11v1.14C3.23,1.4,1.4,3.23,1.14,5.55H0v1.11h1.14c.26,2.31,2.09,4.15,4.4,4.4v1.14h1.11v-1.14c2.31-.26,4.15-2.09,4.4-4.4h1.14v-1.11h-1.14Zm-4.96,4.44c-2.15,0-3.88-1.74-3.88-3.88s1.74-3.88,3.88-3.88,3.88,1.74,3.88,3.88-1.74,3.88-3.88,3.88Zm0-6.34c-1.16,0-2.22.89-2.22,2.27,0,.92.74,2.01,2.22,3.27,1.48-1.26,2.22-2.35,2.22-3.27,0-1.38-1.05-2.27-2.22-2.27Zm0,2.77c-.33,0-.59-.27-.59-.59s.27-.59.59-.59.59.27.59.59-.27.59-.59.59Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background: currentColor;
			}

#pickup{
	display: grid;
	grid-gap: 1.5em;
	width: var(--wrap);
	}
	#pickup header{}
		#pickup header h2{
			line-height: 1.2em;
			}
	#pickup nav{}
		#pickup nav ul{
			display: flex;
			justify-content: center;
			grid-gap: 0.5em;
			}
		#pickup nav li{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2em;
			height: 2em;
			padding-bottom: 0.1em;
			background: #E5E5E5;
			border-radius: 100%;
			font-family: fot-tsukuardgothic-std, sans-serif;
			cursor: pointer;
			}
			#pickup nav li.select{
				background: var(--point-color);
				color: #fff;
				}
	#pickup section{
		display: contents;
		}
		#pickup section:not(.select){
			display: none;
			}
	#pickup h3{
		display: none;
		}
	#pickup h3+div{
		display: contents;
		}
	#pickup dl{
		position: relative;
		align-self: start;
		display: grid;
		grid-gap: 0.5em;
		}
		#pickup dl:before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			padding-top: 66.66%;
			background: var(--dummy) center center;
			background-size: cover;
			border-radius: var(--corner);
			z-index: -1;
			}
	#pickup dt{
		grid-column: 1;
		grid-row: 2;
		line-height: 1.6em;
		}
	#pickup dd{}
		#pickup dd:nth-last-child(2){
			position: relative;
			grid-column: 1;
			grid-row: 1;
			}
		#pickup dd:last-child{
			display: contents;
			}
		#pickup dd :where(img, a){
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			}
		#pickup dd img{
			grid-column: 1;
			grid-row: 1;
			object-fit: cover;
			border-radius: var(--corner);
			z-index: -1;
			}
		#pickup dd ul{
			display: flex;
			grid-gap: 0.5em;
			grid-column: 1;
			grid-row: 1;
			}
		#pickup dd li{
			align-self: flex-start;
			padding: 0.5em;
			background: var(--primary-color);
			border-radius: 0.5em;
			color: #fff;
			}
		#pickup dd a{
			opacity: 0;
			}

#modelcourse{}
	#modelcourse h2{
		position: relative;
		}
		#modelcourse h2:before,
		#modelcourse h2:after{
			content: "";
			position: absolute;
			bottom: 0;
			width: 1.5em;
			height: 1.5em;
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-position: center;
			-webkit-mask-size: contain;
			background: currentColor;
			}
		#modelcourse h2:before{
			left: -0.5em;
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.44 122.11"><path d="m25.7,37.22l2.47,2.47,4.11-7.4,7.4-4.11-2.47-2.47-5.76.82-9.05-9.05,17.28-9.05-3.29-3.29-21.39,4.94L5.96,1.02C4.59-.34,2.39-.34,1.02,1.02-.34,2.39-.34,4.59,1.02,5.96l9.05,9.05-4.94,21.39,3.29,3.29,9.05-17.28,9.05,9.05-.82,5.76Zm80.21,37.7c-.64-1.83-2.37-3.01-4.43-3.01h-32.81c-2.1,0-3.79,1.19-4.47,3.01l-6.53,18.76.05,25.15c0,1.73,1.41,3.29,3.15,3.29h2.83c1.73,0,3.1-1.73,3.1-3.47v-5.66h36.51v5.66c0,1.73,1.41,3.47,3.15,3.47h2.78c1.73,0,3.15-1.55,3.15-3.29l.05-6.25v-18.89l-6.53-18.76Zm-37.24,1.55h32.81l4.7,13.69h-42.22l4.7-13.69Zm-1.87,27.38c-2.51,0-4.56-2.05-4.56-4.56s2.05-4.56,4.56-4.56,4.56,2.05,4.56,4.56-2.05,4.56-4.56,4.56Zm36.51,0c-2.51,0-4.56-2.05-4.56-4.56s2.05-4.56,4.56-4.56,4.56,2.05,4.56,4.56-2.05,4.56-4.56,4.56ZM30.29,58.13l41.07.09v9.13h9.13v-4.56c0-7.58-6.12-13.69-13.69-13.69h-31.95c-7.58,0-13.69,6.12-13.69,13.69v36.51c0,7.58,6.12,13.69,13.69,13.69l-4.56,4.56v4.56h4.56l9.13-9.26,9.13.14v-22.82h-22.82v-32.04Zm4.56,36.6c2.51,0,4.56,2.05,4.56,4.56s-2.05,4.56-4.56,4.56-4.56-2.05-4.56-4.56,2.05-4.56,4.56-4.56Z"/></svg>');
			transform: translateX(-100%);
			}
		#modelcourse h2:after{
			right: -0.5em;
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.44 122.11"><polygon points="51.12 22.45 6.39 22.45 6.39 16.06 0 16.06 0 113.2 6.39 113.2 6.39 54.4 51.12 54.4 44.73 38.43 51.12 22.45"/></svg>');
			transform: translateX(100%);
			}
			
	#modelcourse section{
		width: min(100%, calc(1140px + 7em));
		margin-top: 2em;
		}
	#modelcourse h3{
		display: none;
		}
	#modelcourse dl{
		position: relative;
		display: grid;
		grid-gap: 0.5em;
		}
		#modelcourse dl:before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			padding-top: 66.66%;
			background: var(--dummy) center center;
			background-size: cover;
			border-radius: var(--corner);
			z-index: -1;
			}
	#modelcourse dt{
		line-height: 1.6em;
		}
	#modelcourse dd{
		grid-column: 1;
		grid-row: 1;
		}
		#modelcourse dd:nth-last-of-type(3){
			position: relative;
			grid-column: 1;
			grid-row: 1;
			}
		#modelcourse dd:nth-last-of-type(2){
			align-self: end;
			justify-self: end;
			padding: 0.5em 0.75em;
			background: #fff;
			border-radius: 0.5em 0 0 0;
			color: var(--primary-color);
			}
		#modelcourse dd :where(img, a){
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			}
		#modelcourse dd img{
			object-fit: cover;
			border-radius: var(--corner);
			z-index: -1;
			}
		#modelcourse dd a{
			opacity: 0;
			}
	#modelcourse .slick-arrow{
		padding: 0;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.74 53.74"><path d="m21.65,35.4c.01.65.28,1.25.74,1.69.45.43,1.05.67,1.67.67s1.29-.27,1.74-.74l8.48-8.84c.9-.94.89-2.46-.03-3.38l-8.48-8.48c-.94-.94-2.47-.94-3.41,0-.94.94-.94,2.47,0,3.41l6.81,6.81-6.85,7.13c-.45.46-.69,1.08-.67,1.72ZM26.89,0h0c-.78,0-1.41.63-1.41,1.41,0,.78.63,1.42,1.41,1.42,13.26.01,24.03,10.81,24.02,24.06-.01,13.25-10.79,24.02-24.04,24.02h-.02c-6.42,0-12.46-2.51-16.99-7.06s-7.03-10.58-7.03-17.01c0-8.73,4.76-16.79,12.4-21.01.68-.38.93-1.24.55-1.92-.38-.68-1.24-.93-1.92-.55C5.32,8.08,0,17.08,0,26.85c0,7.18,2.78,13.93,7.85,19.01,5.07,5.08,11.82,7.88,18.99,7.89h.02c14.8,0,26.85-12.04,26.87-26.84C53.75,12.08,41.71.01,26.89,0Z"/></svg>') center no-repeat;
		-webkit-mask-size: contain;
		white-space: nowrap;
		text-indent: 100vw;
		overflow: hidden;
		}
	#modelcourse .slick-prev{
		transform: scale(-1, 1);
		}

#ranking{}
	#ranking h2{}
		#ranking h2:before{
			content: "";
			align-self: center;
			width: 1.5em;
			height: 1em;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.17 54.76"><path d="m81.09,15.74c-2.8,0-5.07,2.27-5.07,5.07,0,.74.17,1.44.45,2.07-4.57,1.7-11.83,3.44-18.47.91-6.79-2.59-10.95-9.35-13.1-14,1.89-.74,3.24-2.56,3.24-4.72,0-2.8-2.27-5.07-5.07-5.07s-5.07,2.27-5.07,5.07c0,2.15,1.35,3.98,3.24,4.72-2.15,4.64-6.31,11.41-13.1,14-6.64,2.54-13.89.79-18.46-.91.29-.64.46-1.34.46-2.08,0-2.8-2.27-5.07-5.07-5.07S0,18,0,20.81s2.27,5.07,5.07,5.07c.5,0,.97-.09,1.43-.23l8.63,29.11s13.38-1.97,27.95-1.97c12.06,0,27.95,1.97,27.95,1.97l8.63-29.11c.46.14.93.23,1.44.23,2.8,0,5.07-2.27,5.07-5.07s-2.27-5.07-5.07-5.07Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background: currentColor;
			}
	#ranking nav{
		padding: var(--space) 0 4em 0;
		}
		#ranking nav ul{
			display: flex;
			justify-content: center;
			grid-gap: 2em;
			}
		#ranking li{
			font-family: fot-tsukuardgothic-std, sans-serif;
			font-size: min(6vw, 2em);
			line-height: 1em;
			cursor: pointer;
			}
			#ranking li.select{
				color: var(--point-color);
				}
	#ranking section{
		display: grid;
		align-items: start;
		}
		#ranking section:not(.select){
			display: none;
			}
	#ranking h3{
		display: none;
		}
	#ranking h3+div{
		display: contents;
		}
	#ranking dl{
		counter-increment: count;
		position: relative;
		display: grid;
		grid-gap: 0.5em;
		}
		#ranking dl:before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			padding-top: 66.66%;
			background: var(--dummy) center center;
			background-size: cover;
			border-radius: var(--corner);
			z-index: -1;
			}
		#ranking dl:after{
			content: counter(count);
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			align-items: top;
			justify-content: right;
			width: 1.5em;
			height: 1.5em;
			
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 115.58 118.32"><path fill="%23fff" d="m115.58,118.32c0-9.77-7.07-18.07-16.7-19.72C57.56,91.54,26.44,58.64,19.76,16.92,18.19,7.19,9.86,0,0,0h115.58v118.32Z"/></svg>') left bottom;
			background-size: 100% 100%;
			font-size: min(8vw, 2.8em);
			font-family: brandon-grotesque,sans-serif;
			font-weight: 700;
			line-height: 0.5em;
			}
		#ranking dl:first-child{}
			#ranking dl:first-child:before{
				font-size: min(10vw, 3.2em);
				}
	#ranking dt{
		line-height: 1.6em;
		text-align: center;
		}
	#ranking dd{
		grid-column: 1;
		grid-row: 1;
		}
		#ranking dd:nth-of-type(1){
			position: relative;
			padding-top: 66.66%;
			}
		#ranking dd :where(img, a){
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			}
		#ranking dd img{
			object-fit: cover;
			border-radius: var(--corner);
			z-index: -1;
			}
		#ranking dd a{
			opacity: 0;
			}

#access{
	display: grid;
	}
	#access header{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		grid-gap: 2em;
		margin-bottom: 2em;
		}
		#access header:before,
		#access header:after{
			content: "";
			width: 50%;
			height: 4px;
			background: var(--tertiary-color);
			border-radius: 2px;
			box-shadow: 0 10px 0 var(--primary-color);
			box-sizing: content-box;
			transform: translateY(-6px);
			z-index: -1;
			}
		#access header:before{
			border-radius: 0 2px 2px 0;
			}
		#access header:after{
			border-radius: 2px 0 0 2px;
			}
	#access h2{
		white-space: nowrap;
		}
	#access footer{
		display: flex;
		justify-content: center;
		justify-self: center;
		width: min(calc(100% - 2em), 900px);
		margin-top: var(--space);
		}
		#access footer a{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0.5em 1.5em;
			border: 2px solid currentColor;
			border-radius: 1.5em;
			color: var(--base-color);
			letter-spacing: 0.1em;
			text-decoration: none;
			}
			#access footer a:after{
				content: "";
				width: 1.5em;
				height: 1.5em;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.66 36.66"><path d="m18.35,0h0c-.78,0-1.41.63-1.41,1.41,0,.78.63,1.42,1.41,1.42,8.55,0,15.5,6.97,15.49,15.51,0,8.54-6.96,15.49-15.5,15.49h-.01c-4.14,0-8.03-1.62-10.96-4.55-2.92-2.93-4.53-6.82-4.53-10.96,0-5.63,3.07-10.82,8-13.55.68-.38.93-1.24.55-1.92-.38-.68-1.24-.93-1.92-.55C3.63,5.51,0,11.65,0,18.31c0,4.9,1.9,9.5,5.36,12.97,3.46,3.46,8.06,5.38,12.96,5.38h.02c10.1,0,18.32-8.21,18.33-18.31C36.67,8.24,28.45,0,18.35,0Zm1.78,18.11l-4.68,4.87c-.54.56-.52,1.46.04,2,.27.26.63.39.98.39.37,0,.74-.15,1.02-.43l5.64-5.87c.53-.56.52-1.44-.02-1.98l-5.64-5.64c-.55-.55-1.45-.55-2,0-.55.55-.55,1.45,0,2l4.66,4.66Z"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				background: var(--point-color);
				transform: translateX(0.5em);
				}

#accessCount{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--primary-color);
	z-index: 1;
	}
	#accessCount:before{
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: calc(100% - 4px);
		height: calc(100% - 4px);
		background: #F7F7F7;
		border: 2px solid var(--tertiary-color);
		transform: translate(-50%, -50%);
		z-index: -1;
		}
	#accessCount span{
		font-family: fot-tsukuardgothic-std, sans-serif;
		text-align: center;
		line-height: 1em;
		}
		#accessCount span:nth-of-type(1){
			color: var(--primary-color);
			font-size: min(6vw, 2em);
			line-height: 1em;
			letter-spacing: 0.1em;
			}
			#accessCount span:nth-of-type(1):only-child{
				font-size: min(6vw, 1.8em);
				line-height: 1.5em;
				letter-spacing: 0;
				}
		#accessCount span:nth-of-type(2){
			letter-spacing: 0.1em;
			}
		#accessCount span:nth-of-type(3){
			writing-mode: vertical-rl;
			letter-spacing: 0.1em;
			}
		#accessCount span:nth-of-type(4),
		#accessCount span:nth-of-type(5),
		#accessCount span:nth-of-type(6){
			display: flex;
			align-items: center;
			justify-content: center;
			width: 0.8em;
			height: 1.2em;
			margin: 0 0.05em;
			padding-bottom: 0.1em;
			background: #D59F30;
			border-radius: 3px;
			color: #fff;
			font-size: min(10vw, 3em);
			}
		#accessCount span:nth-of-type(7){
			align-self: flex-end;
			font-size: min(10vw, 1.6em);
			transform: translateY(-10%);
			}

#accessMap{
	display: grid;
	grid-gap: var(--space);
	width: min(calc(100% - 2em), 1600px);
	margin: auto;
	}

#information{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: var(--wrap);
	max-width: 900px;
	}
	#information h2{}
		#information h2:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60.36 60.36"><path d="m30.18,0C13.52,0,0,13.52,0,30.18s13.52,30.18,30.18,30.18,30.18-13.52,30.18-30.18S46.84,0,30.18,0Zm3.02,45.27h-6.04v-18.11h6.04v18.11Zm0-24.14h-6.04v-6.04h6.04v6.04Z"/></svg>');
			}
	#information h2+div{
		width: min(100%, 900px);
		margin-top: var(--space);
		}
	#information dl+div{
		margin-top: var(--space);
		}
		#information dl+div a{
			display: flex;
			align-items: center;
			justify-content: center;
			grid-gap: 1em;
			color: var(--base-color);
			font-family: fot-tsukuardgothic-std, sans-serif;
			}
			#information dl+div a:before{
				content: "";
				width: 2em;
				height: 2em;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.95 41.88"><polygon points="19.08 0 17.66 1.41 36.19 19.94 0 19.94 0 21.94 36.06 21.94 17.53 40.47 18.94 41.88 39.95 20.88 19.08 0"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				background: currentColor;
				}

#topicsList{}
	#topicsList dl{
		position: relative;
		display: grid;
		grid-gap: 0 0.5em;
		font-family: fot-tsukuardgothic-std, sans-serif;
		line-height: 1.5em;
		letter-spacing: 0.1em;
		}
	#topicsList dl+dl{
		margin-top: 1em;
		}
	#topicsList dt{
		order: 1;
		}
		#topicsList dt a:not(:hover){
			color: var(--base-color);
			}
	#topicsList ul{
		display: contents;
		}
	#topicsList li{
		position: absolute;
		top: 0;
		left: 0;
		color: var(--point-color);
		font-size: 0.5em;
		line-height: 1em;
		text-transform: uppercase;
		transform-origin: center center;
		transform: translate(-50%, -75%) rotate(-25deg);
		}
		#topicsList li:before{
			content: "＼";
			}
		#topicsList li:after{
			content: "／";
			}
		#topicsList li.tagCheck{
			letter-spacing: 0;
			}
	#topicsList li+li{
		display: none;
		}

#movie{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: var(--wrap);
	}
	#movie h2{}
		#movie h2:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58.05 38.7"><path d="m45.15,14.51V3.22c0-1.77-1.45-3.22-3.22-3.22H3.22C1.45,0,0,1.45,0,3.22v32.25c0,1.77,1.45,3.22,3.22,3.22h38.7c1.77,0,3.22-1.45,3.22-3.22v-11.29l12.9,12.9V1.61l-12.9,12.9Z"/></svg>');
			}
	#movie h2+div{
		width: min(100%, 900px);
		margin-top: 2em;
		}
	#movie ul+ul{
		margin-top: var(--space);
		}
	#movie li{
		position: relative;
		}
		#movie li:before{
			content: "";
			display: block;
			padding-top: 56.25%;
			}
		#movie li :where(iframe, img){
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			}
		#movie li img{
			object-fit: cover;
			}

#movieSlideNav{
	display: grid;
	width: min(90%, 700px);
	margin: auto;
	overflow: hidden;
	}
	#movieSlideNav li{
		position: relative;
		}
		#movieSlideNav li:after{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.84 29.81"><polygon points="0 0 0 29.81 24.84 14.9 0 0"/></svg>') center no-repeat;
			-webkit-mask-size: 33% 33%;
			background: #fff;
			}
	#movieSlideNav .slick-list{
		grid-column: 1;
		grid-row: 1;
		margin: 0 -0.5em;
		}
	#movieSlideNav .slick-slide{
		margin: 0 0.5em;
		cursor: pointer;
		}
	#movieSlideNav .slick-arrow{
		position: relative;
		align-self: center;
		grid-column: 1;
		grid-row: 1;
		width: 1em;
		height: 4em;
		padding: 0;
		background: rgba(255, 255, 255, 0.8);
		white-space: nowrap;
		text-indent: 100vw;
		overflow: hidden;
		z-index: 1;
		}
		#movieSlideNav .slick-arrow:before{
			content: "";
			position: absolute;
			top: 50%;
			left: 0;
			width: 1em;
			height: 1em;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.58 18.99"><polygon points="1.02 0 0 .81 6.91 9.49 0 18.17 1.02 18.99 8.58 9.49 1.02 0"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			background: #505050;
			transform: translateY(-50%);
			}
	#movieSlideNav .slick-prev{
		transform: scale(-1, 1);
		}
	#movieSlideNav .slick-next{
		justify-self: end;
		}

#useful{
	display: grid;
	width: var(--wrap);
	margin: var(--space) auto;
	}
	#useful h2{
		justify-self: center;
		}
		#useful h2:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.58 47.58"><path d="m46.18,0c-5.46,0-11.34,1.12-15.39,4.2C26.73,1.12,20.85,0,15.39,0S4.06,1.12,0,4.2v41c0,1.82,2.04,1.26,2.1,1.26,3.78-1.82,9.24-3.08,13.29-3.08,5.46,0,11.34,1.12,15.39,4.2,3.78-2.38,10.64-4.2,15.39-4.2s9.38.84,13.29,2.94c1.15.59,2.1-.53,2.1-1.26V4.2c-4.17-3.13-10.16-4.2-15.39-4.2Zm9.8,39.18c-3.08-.98-6.44-1.4-9.8-1.4-4.76,0-11.62,1.82-15.39,4.2V9.8c3.78-2.38,10.64-4.2,15.39-4.2,3.36,0,6.72.42,9.8,1.4v32.19Z"/></svg>');
			}
	#useful h2+div{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		margin-top: var(--space);
		}
	#useful dl{
		display: grid;
		border-radius: var(--corner);
		overflow: hidden;
		}
		#useful dl :where(dt a, dd){
			grid-column: 1;
			grid-row: 1;
			}
	#useful dt{
		display: contents;
		}
		#useful dt a{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 1em;
			background: rgba(var(--base-color-rgb), 0.35);
			color: #fff;
			text-align: center;
			line-height: 1.5em;
			text-decoration: none;
			word-break: keep-all;
			overflow-wrap: anywhere;
			}
	#useful dd{
		position: relative;
		z-index: -1;
		}
		#useful dd img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			}

#sns{}
	#sns ul{
		display: flex;
		justify-content: center;
		grid-gap: 1.5em;
		}
	#sns li{}
		#sns li a{
			display: block;
			width: 2em;
			height: 2em;
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-position: center;
			-webkit-mask-size: contain;
			background: currentColor;
			color: var(--base-color);
			white-space: nowrap;
			text-indent: 100vw;
			overflow: hidden;
			}
		#sns li a[href*="instagram.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m14.67,4.29c-.58,0-1.05.47-1.05,1.05s.47,1.05,1.05,1.05,1.05-.47,1.05-1.05-.47-1.05-1.05-1.05Zm4.02,2.11c-.04-.93-.19-1.57-.41-2.12-.22-.57-.52-1.06-1.01-1.55-.49-.49-.97-.78-1.55-1.01-.56-.22-1.19-.36-2.12-.41-.93-.04-1.23-.05-3.6-.05s-2.67.01-3.6.05c-.93.04-1.57.19-2.12.41-.57.22-1.06.52-1.55,1.01-.49.49-.78.97-1.01,1.55-.22.56-.36,1.19-.41,2.12-.04.93-.05,1.23-.05,3.6s.01,2.67.05,3.6c.04.93.19,1.57.41,2.12.22.57.52,1.06,1.01,1.55.49.49.97.78,1.55,1.01.56.22,1.19.36,2.12.41.93.04,1.23.05,3.6.05s2.67-.01,3.6-.05c.93-.04,1.57-.19,2.12-.41.57-.22,1.06-.52,1.55-1.01.49-.49.78-.97,1.01-1.55.22-.56.36-1.19.41-2.12.04-.93.05-1.23.05-3.6s-.01-2.67-.05-3.6Zm-1.57,7.14c-.04.85-.18,1.31-.3,1.62-.16.41-.35.7-.65,1s-.6.5-1,.65c-.31.12-.77.26-1.62.3-.92.04-1.2.05-3.53.05s-2.61,0-3.53-.05c-.85-.04-1.31-.18-1.62-.3-.41-.16-.7-.35-1-.65s-.5-.6-.65-1c-.12-.31-.26-.77-.3-1.62-.04-.92-.05-1.2-.05-3.53s0-2.61.05-3.53c.04-.85.18-1.31.3-1.62.16-.41.35-.7.65-1s.6-.5,1-.65c.31-.12.77-.26,1.62-.3.92-.04,1.2-.05,3.53-.05s2.61,0,3.53.05c.85.04,1.31.18,1.62.3.41.16.7.35,1,.65.31.31.5.6.65,1,.12.31.26.77.3,1.62.04.92.05,1.2.05,3.53s0,2.61-.05,3.53Zm-7.11-8.02c-2.48,0-4.49,2.01-4.49,4.49s2.01,4.49,4.49,4.49,4.49-2.01,4.49-4.49-2.01-4.49-4.49-4.49Zm0,7.4c-1.61,0-2.91-1.3-2.91-2.91s1.3-2.91,2.91-2.91,2.91,1.3,2.91,2.91-1.3,2.91-2.91,2.91Z"/></svg>');
			}
		#sns li a[href*="facebook.com"]{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10,1.31C5.17,1.31,1.26,5.23,1.26,10.05c0,4.36,3.2,7.98,7.37,8.63v-6.11h-2.22v-2.53h2.22v-1.93c0-2.19,1.3-3.4,3.3-3.4.96,0,1.96.17,1.96.17v2.15h-1.1c-1.09,0-1.42.67-1.42,1.36v1.64h2.42l-.39,2.53h-2.04v6.11c4.18-.66,7.37-4.27,7.37-8.63,0-4.83-3.91-8.74-8.74-8.74Z"/></svg>');
			}
		#sns li a[href*="youtube.com"]{
			margin-left: 0.2em;
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m18,2H2C.9,2,0,2.9,0,4v12C0,17.1.9,18,2,18h16c1.1,0,2-.9,2-2V4c0-1.1-.9-2-2-2ZM7.5,14.5V5.5l7,4.5-7,4.5Z"/></svg>');
			}





/* for lower */
@media (max-width: 1399.98px) {
/*1399px以下*/
}
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
#hero{}
	#hero dt{
		margin: 0 1em 1em 0;
		}
#pickup{
	grid-template-columns: repeat(2, 1fr);
	grid-row-gap: 2em;
	}
	#pickup dd{}
		#pickup dd ul{
			flex-direction: column;
			transform: translate(-0.5em, -0.5em);
			}
#modelcourse{}
	#modelcourse header,
	#modelcourse header:after{
		border-radius: 0;
		}
	#modelcourse .slick-slider{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		grid-gap: 1em;
		}
	#modelcourse .slick-list{
		width: 100%;
		order: 1;
		}
	#modelcourse .slick-slide{
		margin: 0 0.5em;
		cursor: pointer;
		}
	#modelcourse .slick-arrow{
		width: 1.5em;
		height: 1.5em;
		background: #505050;
		}
	#modelcourse .slick-prev{
		order: 2;
		}
	#modelcourse .slick-next{
		order: 4;
		}
	#modelcourse .slick-dots{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		grid-gap: 0.5em;
		max-width: calc(100% - 5em);
		order: 3;
		}
		#modelcourse .slick-dots li{
			width: 10px;
			height: 10px;
			border: 1px solid #505050;
			border-radius: 100%;
			overflow: hidden;
			}
		#modelcourse .slick-dots li.slick-active{
			background: var(--point-color);
			border-color: transparent;
			}
		#modelcourse .slick-dots button{
			opacity: 0;
			}
#ranking{}
	#ranking header,
	#ranking header:after{
		border-radius: 0;
		}
	#ranking section{
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 2em 1.5em;
		width: var(--wrap);
		margin: auto;
		}
	#ranking dl{}
		#ranking dl:nth-of-type(1){
			grid-column: 1 / 3;
			}
			#ranking dl:nth-of-type(1) dt{
				font-size: 1.2em;
				}
	#ranking footer{
		display: flex;
		justify-content: center;
		margin-top: var(--space);
		}
		#ranking footer a{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0.5em 1.5em;
			border: 2px solid currentColor;
			border-radius: 1.5em;
			color: var(--base-color);
			text-decoration: none;
			letter-spacing: 0.1em;
			}
			#ranking footer a:after{
				content: "";
				width: 1.5em;
				height: 1.5em;
				background: var(--primary-color);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.66 36.66"><path d="m18.35,0h0c-.78,0-1.41.63-1.41,1.41,0,.78.63,1.42,1.41,1.42,8.55,0,15.5,6.97,15.49,15.51,0,8.54-6.96,15.49-15.5,15.49h-.01c-4.14,0-8.03-1.62-10.96-4.55-2.92-2.93-4.53-6.82-4.53-10.96,0-5.63,3.07-10.82,8-13.55.68-.38.93-1.24.55-1.92-.38-.68-1.24-.93-1.92-.55C3.63,5.51,0,11.65,0,18.31c0,4.9,1.9,9.5,5.36,12.97,3.46,3.46,8.06,5.38,12.96,5.38h.02c10.1,0,18.32-8.21,18.33-18.31C36.67,8.24,28.45,0,18.35,0Zm1.78,18.11l-4.68,4.87c-.54.56-.52,1.46.04,2,.27.26.63.39.98.39.37,0,.74-.15,1.02-.43l5.64-5.87c.53-.56.52-1.44-.02-1.98l-5.64-5.64c-.55-.55-1.45-.55-2,0-.55.55-.55,1.45,0,2l4.66,4.66Z"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				transform: translateX(0.5em);
				}
}


/* Small */
@media (max-width: 767.98px) {
/*767px以下*/
#main{}
	#main h2{
		letter-spacing: 0.05em;
		}
#hero{}
	#hero dl{}
		#hero dl:before{
			padding-top: calc(100vh - 5em);
			}
#pickup{}
	#pickup nav{
		grid-column: 1 / 3;
		grid-row: 1;
		}
#useful{}
	#useful dt{
		font-family: fot-tsukuardgothic-std, sans-serif;
		letter-spacing: 0.05em;
		}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下縦向き*/
#accessCount{
	padding: 1em;
	border-width: 2px 0;
	grid-gap: 0.25em 0;
	}
	#accessCount:before{
		width: 100%;
		border-width: 2px 0;
		}
	#accessCount:after{
		content: "";
		display: block;
		width: 100%;
		order: -1;
		}
	#accessCount span:nth-of-type(-n+2){
		order: -1;
		}
	#accessCount span:nth-of-type(2){
		align-self: flex-end;
		}
#accessMap{
	margin-top: -2em;
	}
	#accessMap img{}
		#accessMap img:nth-of-type(2){
			justify-self: center;
			width: 80%;
			}
#useful{}
	#useful h2+div{
		grid-gap: 0.5em;
		}
	#useful dt{
		font-size: 10px;
		}
	#useful dd{
		padding-top: 100%;
		}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下横向き*/
#accessMap{
	grid-template-columns: 1fr 2fr;
	margin-top: 4em;
	}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
#access{}
	#access:after{
		content: "";
		display: block;
		width: 100%;
		height: 4px;
		margin-top: var(--space);
		background: var(--tertiary-color);
		box-shadow: 0 10px 0 var(--primary-color);
		box-sizing: content-box;
		z-index: -1;
		}
	#access section{
		position: relative;
		width: var(--wrap);
		margin: auto;
		}
#accessCount{
	position: absolute;
	top: 0;
	width: 100vw;
	padding: 1.5em 0;
	border-radius: 0 7px 7px 0;
	}
	#accessCount:before{
		border-radius: 0 4px 4px 0;
		}
	#accessCount span{}
		#accessCount span:nth-of-type(-n+2){
			width: 100%;
			}
		#accessCount span:nth-of-type(2){
			margin: 0.75em 0 0.5em 0;
			}
#accessMap{}
	#accessMap img{
		grid-row: 1;
		width: 100%;
		height: auto;
		}
		#accessMap img:nth-of-type(1){
			grid-column: 2;
			}
		#accessMap img:nth-of-type(2){
			grid-column: 1;
			align-self: end;
			}
#information{}
	#information dl+div{}
		#information dl+div a{
			justify-content: flex-end;
			}
#topicsList{}
	#topicsList dl{
		grid-template-columns: auto 2em auto;
		justify-content: start;
		}
		#topicsList dl:after{
			content: "";
			grid-column: 2;
			width: 100%;
			margin-top: 0.75em;
			border-top: 3px dotted currentColor;
			}
#useful{}
	#useful h2+div{
		justify-self: center;
		grid-gap: var(--space);
		}
	#useful dd{
		padding-top: 85%;
		}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
#accessCount{
	right: 60%;
	padding-left: calc(100vw - 18em);
	}
}


/* Medium */
@media (min-width: 768px) {
/*768px以上*/
#main{}
	#main h2{
		letter-spacing: 0.1em;
		}
#hero{}
	#hero dl{}
		#hero dl:before{
			padding-top: 50%;
			}
#pickup{}
	#pickup :where(header, nav){
		grid-column: 1;
		grid-row: 1;
		}
	#pickup header{
		display: grid;
		grid-template-rows: 1fr 1fr;
		align-items: end;
		}
	#pickup nav{
		position: relative;
		align-self: end;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50%;
		z-index: 1;
		}
		#pickup nav ul{
			font-size: 1.5em;
			}
#useful{}
	#useful dt{
		letter-spacing: 0.1em;
		}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
#accessMap{
	grid-template-columns: 1fr 2fr;
	margin-top: 2em;
	}
}


/* Large */
@media (min-width: 992px) {
/*992px以上*/
#hero{
	width: var(--wrap);
	margin: 1.5em auto;
	border-radius: var(--corner);
	overflow: hidden;
	}
	#hero dt{
		margin: 0 50% 2em 0;
		font-size: 1.2em;
		}
	#hero .slick-dots{
		position: absolute;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		grid-gap: 0.5em;
		padding: 1.5em 2em;
		background: #fff;
		border-radius: var(--corner) 0 0 0;
		}
		#hero .slick-dots li{
			width: 10px;
			height: 10px;
			background: #C7C7C7;
			border-radius: 100%;
			overflow: hidden;
			}
			#hero .slick-dots li.slick-active{
				background: var(--point-color);
				}
		#hero .slick-dots button{
			opacity: 0;
			}
#search{
	display: none;
	}
#pickup{
	grid-template-columns: repeat(3, 1fr);
	}
	#pickup dt{
		font-size: 1.2em;
		}
	#pickup dd{}
		#pickup dd ul{
			justify-content: flex-end;
			padding: 0.5em;
			}
		#pickup dd li{
			writing-mode: vertical-rl;
			font-feature-settings: normal;
			}
#modelcourse{
	display: flex;
	flex-direction: column;
	align-items: center;
	}
	#modelcourse header{
		width: var(--wrap);
		}
	#modelcourse dt{
		font-size: 1.2em;
		}
	#modelcourse .slick-slider{
		display: grid;
		grid-template-columns: 2em 1fr 1fr 1fr 2em;
		grid-gap: 1.5em;
		}
		#modelcourse .slick-slider:before{
			content: "";
			padding-top: 66.66%;
			grid-column: 3;
			grid-row: 1;
			}
	#modelcourse .slick-list{
		grid-column: 2 / 5;
		grid-row: 1 / 3;
		margin: 0 -0.75em;
		}
	#modelcourse .slick-slide{
		margin: 0 0.75em;
		cursor: pointer;
		}
	#modelcourse .slick-arrow{
		grid-row: 1;
		align-self: center;
		width: 2.5em;
		height: 2.5em;
		background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
		z-index: 1;
		}
	#modelcourse .slick-prev{
		grid-column: 1;
		}
	#modelcourse .slick-next{
		grid-column: 5;
		justify-self: end;
		}
#ranking{
	width: var(--wrap);
	}
	#ranking section{
		grid-template-columns: 2fr 1fr 1fr;
		grid-gap: 2em;
		}
	#ranking dl{}
		#ranking dl:nth-of-type(1){
			grid-row: 1 / 3;
			}
			#ranking dl:nth-of-type(1) dt{
				font-size: 1.5em;
				}
	#ranking dt{
		font-size: 1.2em;
		}
	#ranking footer{
		display: none;
		}
#access{}
	#access footer{
		justify-content: flex-end;
		margin-top: -2em;
		}
#topicsList{}
	#topicsList dl{
		font-size: 1.25em;
		}
#useful{}
	#useful dt{
		font-size: 1.125em;
		}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
#accessCount{
	right: 65%;
	padding-left: calc(100vw - 22em);
	}
#accessMap{
	grid-template-columns: 1fr 2fr;
	}
}


/* X-Large */
@media (min-width: 1200px) {
/*1200px以上*/
#pickup{}
	#pickup h2{}
		#pickup h2 br{
			display: none;
			}
#accessCount{
	right: 75%;
	padding-left: calc(100vw - 20em);
	}
#accessMap{
	grid-template-columns: 1.2fr 2.8fr 0.6fr;
	}
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
/*1200px～1399px*/
}


/* XX-Large */
@media (min-width: 1400px) {
/*1400px以上*/
}