/* CSS Document */

#wrapper{
	padding-top: 0;
	}

#pagePath{
	display: none;
	}

#pageTop{
	display: none !important;
	}

#main{
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	}
	#main>*{
		grid-column: 1;
		}
	#main h2{
		color: #1a1a1a;
		fill: #1a1a1a;
		font-weight: bold;
		text-align: center;
		}
		#main h2 i{
			position: relative;
			padding-left: 1.5em;
			}
		#main h2 svg{
			position: absolute;
			top: calc(50% - 0.6em);
			left: 0;
			width: 1.2em;
			height: 1.2em;
			}

#hero{
	display: contents;
	padding: 0;
	}

#heroSlide{
	width: 100%;
	background: #fff;
	padding-bottom: 3em;
	}
	#heroSlide:not(.slick-initialized){}
		#heroSlide:not(.slick-initialized)>dl{
			aspect-ratio: 1 / 0.449;
			}
		#heroSlide:not(.slick-initialized)>dl:nth-child(n+2){
			display: none;
			}
	#heroSlide dl{
		position: relative;
		display: flex;
		width: 100%;
		}
	#heroSlide dt{
		position: absolute;
		top: 50%;
		left: 50%;
		max-width: calc(100% - 8em);
		color: #fff;
		font-size: 1.6em;
		font-weight: bold;
		line-height: 1.4em;
		text-align: center;
		transform: translate(-50%,-50%);
		z-index: 1;
		}
		#heroSlide dt:empty{
			display: none;
			}
	#heroSlide dt+dd{
		width: 100%;
		align-self: center;
		}
	#heroSlide dd{}
		#heroSlide dd:last-child{
			display: contents;
			}
		#heroSlide dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			}
	#heroSlide .thumb{
		padding-top: 44.912%;
		background-size: contain;
		object-fit: contain;
		}
	#heroSlide .slick-track{
		display: flex;
		align-items: center;
		}
	#heroSlide .slick-slide{
		display: flex;
		}
	#heroSlide .slick-dots{
		position: absolute;
		left: 0;
		bottom: 0em;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 3em;
		grid-gap: 0.5em 1.5em;
		pointer-events: none;
		}
		#heroSlide .slick-dots li{
			position: relative;
			width: 10px;
			height: 10px;
			padding: 0 !important;
			background: #919191;
			border-radius: 100%;
			pointer-events: all;
			overflow: hidden;
			}
		#heroSlide .slick-dots li.slick-active{
			background: #000;
			}
		#heroSlide .slick-dots button{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			cursor: pointer;
			}

#heroNoslide{
	overflow: hidden;
	}
	#heroNoslide dl{
		position: relative;
		display: grid;
		padding: 4em 0;
		color: #fff;
		}
	#heroNoslide dt{
		font-size: 1.6em;
		font-weight: bold;
		line-height: 1.4em;
		text-align: left;
		}
	#heroNoslide dt+dd{
		position: absolute;
		top: 0;
		left: 50%;
		width: 100vw;
		height: 100%;
		padding: 0;
		background: #1a1a1a;
		transform: translateX(-50%);
		z-index: -1;
		}
	#heroNoslide dd{}
		#heroNoslide dd:last-child{
			display: contents;
			}
		#heroNoslide dd:nth-of-type(2),
		#heroNoslide dd:nth-of-type(3){
			background-color: rgba(0,0,0,0.1);
			border: 1px solid currentColor;
			}
		#heroNoslide dd:nth-of-type(2){
			display: flex;
			align-items: center;
			font-weight: bold;
			}
		#heroNoslide dd:nth-of-type(3){
			padding: 1em;
			background-position: bottom right;
			background-repeat: no-repeat;
			background-size: auto 100%;
			filter: drop-shadow(20px 20px 20px rgba(0,0,0,0.2));
			}
		#heroNoslide dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			}
	#hero .heroDetail{}
		#hero .heroDetail dt{
			display: flex;
			padding: 1em;
			align-items: center;
			font-weight: bold;
			}
	#heroNoslide .thumb{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		opacity: 0.9;
		}
	#heroNoslide .aomori{
		background-image: url("../images/heroMap-aomori.svg");
		}
	#heroNoslide .akita{
		background-image: url("../images/heroMap-akita.svg");
		}
	#heroNoslide .iwate{
		background-image: url("../images/heroMap-iwate.svg");
		}
	#heroNoslide .yamagata{
		background-image: url("../images/heroMap-yamagata.svg");
		}
	#heroNoslide .miyagi{
		background-image: url("../images/heroMap-miyagi.svg");
		}
	#heroNoslide .niigata{
		background-image: url("../images/heroMap-niigata.svg");
		}
	#heroNoslide .fukushima{
		background-image: url("../images/heroMap-fukushima.svg");
		}

#access{
	grid-row: 2;
	display: grid;
	grid-template-columns: 1fr min(calc(100% - 2em), 1140px) 1fr;
	align-items: start;
	background: #f2ece2;
	}
	#access:has( img[src*=".webp"]){
		display: none;
		}
	#access>*{
		grid-column: 2;
		}
	#access h2{
		margin-bottom: unset !important;
		}
	#access h2+div{
		margin: 1em 0;
		padding: 1em;
		background: #fff;
		border: 1px solid #333;
		border-radius: 1em;
		color: var(--color);
		}
	#access h2+div+div{
		order: 1;
		display: grid;
		justify-content: center;
		grid-gap: 1em 2em;
		margin-top: 1em;
		}
	#access img{
		width: 100%;
		height: auto;
		}
	#access ul{
		display: grid;
		grid-row-gap: 0.25em;
		}
	#access li{
		position: relative;
		padding-left: 1em;
		color: #1a1a1a;
		line-height: 1.65;
		letter-spacing: 0.05em;
		list-style: none;
		}
		#access li:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			aspect-ratio: 1;
			width: 0.5em;
			background: #ffbc02;
			border-radius: 100%;
			transform: translateY(0.55em);
			}
	#access a{
		display: grid;
		grid-template-columns: 1fr 1.5em;
		align-items: center;
		column-gap: 1em;
		min-width: min(100%, 240px);
		min-height: 3em;
		padding: 0.5em 1em 0.5em 1.5em;
		background: #1a1a1a;
		border-radius: 1.5em;
		color: #fff;
		text-align: center;
		text-decoration: none;
		}
		#access a:before,
		#access a:after{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1;
			}
			#access a:before{
				background: #fff;
				border-radius: 100%;
				}
			#access a:after{
				background: #1a1a1a;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" style="fill: none; stroke: black; stroke-width: 2px;"><polyline points="4 1 9 6 4 11"/></svg>') no-repeat center / min(75%, 12px);
				}
			#access a:hover{
				background: #E70012;
				}
				#access a:hover:after{
					background: #E70012;
					}
		#access figure{
			grid-row: 2;
			}
	@media (min-width: 768px) {
		#access{
			grid-template-rows: auto auto 1fr;
			}
		#access h2{
			grid-row: 1;
			text-align: left;
			}
		#access h2+div{
			grid-row: 2;
			width: min(50%, 520px);
			}
		#access h2+div+div{
			grid-row: 3;
			width: min(50%, 520px);
			justify-content: start;
			}
		#access figure{
			grid-row: 1 / 4;
			margin-left: min(50%, 520px);
			}
		}

#recommend{
	padding: 0;
	border-bottom: 4px solid #223e68;
	}
	#recommend header{
		padding-bottom: 0;
		background: #f2ece8;
		border-bottom: 4px solid #223e68;
		}
	#recommend section{
		padding: 0;
		}
	#recommend h3{
		display: none;
		}
	#recommend h3+div{
		position: relative;
		display: flex;
		flex-flow: wrap;
		justify-content: space-between;
		}
		#recommend h3+div:before,
		#recommend h3+div:after{
			content: "";
			position: absolute;
			}
	#recommend dl{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		}
	#recommend dt{
		position: relative;
		max-width: 100%;
		padding-right: 1.2em;
		color: #4d4d4d;
		fill: #1a1a1a;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		order: 2;
		}
		#recommend dt i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 0;
			}
	#recommend dt+dd{
		width: 100%;
		margin-bottom: 1em;
		order: 1;
		pointer-events: none;
		}
	#recommend dd{}
		#recommend dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: transparent;
			}
	#recommend .thumb{
		padding-top: 66.66%;
		}

#feature{}
	#feature h2{
		text-align: center;
		}
	#feature dl{
		position: relative;
		}
	#feature dt{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 1em;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
		background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
		color: #fff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		}
		#feature dt i{
			display: none;
			}
	#feature dt+dd{
		position: relative;
		z-index: -1;
		}
	#feature dd{}
		#feature dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: transparent;
			}
	#feature .thumb{
		padding-top: 66.66%;
		}
	#feature .slide{
		margin: 2em 0;
		}
	#feature .slick-arrow{}
		#feature .slick-arrow svg{
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			}

#guide{
	position: relative;
	overflow: hidden;
	padding-bottom: 0;
	}
	#guide > svg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		fill: rgba(18,44,64,0.06);
		color: #122c54;
		background: #d3f0f0;
		z-index: -1;
		}
	#guide h2{
		text-align: center;
		}

#ranking{
	position: relative;
	overflow: hidden;
	counter-reset: count;
	}
	#ranking:before{
		content: "";
		position: absolute;
		top: -5%;
		left: -5%;
		width: 110%;
		height: 110%;
		background: url("../images/rankingBg.jpg") center center no-repeat;
		background-size: cover;
		filter: blur(0.2em);
		z-index: -1;
		}
	#ranking h2{
		color: #fff;
		fill: #fff;
		}
	#ranking h2+div{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	#ranking dl{
		position: relative;
		overflow: hidden;
		}
		#ranking dl:before{
			content: "";
			position: absolute;
			top: 0;
			left: -1.5em;
			width: 3em;
			height: 3em;
			background: #000;
			transform: skew(-45deg,0);
			opacity: 0.8;
			}
		#ranking dl:after{
			counter-increment: count;
			content: counter(count);
			position: absolute;
			top: 0.5em;
			left: 0;
			width: 1.5em;
			color: #fff;
			line-height: 1em;
			font-weight: bold;
			font-style: italic;
			text-align: center;
			}
		#ranking dl:nth-of-type(1):before{
			background: #ebb802;
			}
		#ranking dl:nth-of-type(2):before{
			background: #999999;
			}
		#ranking dl:nth-of-type(3):before{
			background: #a64b01;
			}
	#ranking dt{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 1em;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
		background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
		color: #fff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		}
		#ranking dt i{
			display: none;
			}
	#ranking dt+dd{
		position: relative;
		z-index: -1;
		}
	#ranking dd{}
		#ranking dd a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			color: transparent;
			z-index: 1;
			}
	#ranking .wrap{
		position: relative;
		}

#movie{
	background: #1a1a1a;
	}
	#movie h2{
		color: #fff;
		fill: #fff;
		}

#banner{}
	#banner ul{
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		}
	#banner .thumb{
		padding-top: 28%;
		}

#sns {
	padding-top: 0;
	}
	#sns ul {
		display: flex;
		justify-content: center;
		list-style: none;
		}
	#sns li {
		margin: 0 0.25em;
		}
	#sns a {
		position: relative;
		display: block;
		aspect-ratio: 1;
		width: 2.8em;
		height: 2.8em;
		fill: #000;
		}
	#sns a svg {
		position: absolute;
		top: 10%;
		left: 10%;
		width: 80%;
		height: 80%;
		}

/* for all */
@media (max-width: 1199px) {
/*1199px以下*/
#areaguideMap{}
	#areaguideMap li{}
		#areaguideMap li.iwate{
			top: 9em;
			}
		#areaguideMap li.akita{
			top: 9.5em;
			}
		#areaguideMap li.yamagata{
			top: 14em;
			}
		#areaguideMap li.fukushima{
			top: 25.5em;
			}
}
@media (max-width: 991px) {
/*991px以下*/
#heroSlide{}
	#heroSlide .slick-arrow{
		display: none;
		}
}


/* for mobile */
@media (max-width: 767px) {
/*767px以下*/
#main{}
	#main h2{
		margin-bottom: 1em;
		font-size: 1.4em;
		}
#heroNoslide{}
	#heroNoslide dl{
		grid-gap: 2em 0;
		}
	#heroNoslide dt{
		grid-column: 1/3;
		min-height: 4.2em;
		}
	#heroNoslide dd{}
		#heroNoslide dd:nth-of-type(2),
		#heroNoslide dd:nth-of-type(3){
			height: 25vw;
			}
		#heroNoslide dd:nth-of-type(2){
			padding: 1em;
			font-size: 1.2em;
			}
		#heroNoslide dd:nth-of-type(3){
			border-left: none;
			}
#recommend{}
	#recommend h2+div{}
		#recommend h2+div div{
			display: none;
			}
	#recommend li{
		width: calc(25% - 0.375em);
		}
	#recommend h3+div{
		margin-left: -1em;
		margin-right: -1em;
		}
		#recommend h3+div:before{
			top: 0;
			left: 50%;
			width: 0;
			height: 100%;
			border-left: 1px solid #ccc;
			}
		#recommend h3+div:after{
			top: 33.33%;
			left: 0;
			width: 100%;
			height: 33.33%;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			}
	#recommend dl{
		width: 50%;
		padding: 1em;
		}
#feature{}
	#feature dl{
		margin: 0 0.5em;
		}
#ranking{}
	#ranking dl{
		width: calc(50% - 0.5em);
		}
		#ranking dl:nth-of-type(1){
			width: 100%;
			}
			#ranking dl:nth-of-type(1):before,
			#ranking dl:nth-of-type(1):after{
				font-size: 1.2em;
				}
			#ranking dl:nth-of-type(1) .thumb{
				padding-top: 66.66%;
				}
		#ranking dl:nth-of-type(n+2){
			margin-top: 1em;
			}
		#ranking dl:nth-of-type(8){
			display: none;
			}
#banner{}
	#banner h3{
		font-size: 1.2em;
		}
	#banner ul{
		margin-top: 1em;
		justify-content: space-between;
		}
	#banner li{
		width: calc(50% - 0.5em);
		}
		#banner li:nth-child(n+3){
			margin-top: 1em;
			}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#heroSlide{
	margin-top: 15vw;
	}
#heroNoslide{}
	#heroNoslide:first-child dl:nth-of-type(1){
		padding-top: calc(15vw + 4em);
		}
#recommend{}
	#recommend .tabMenu:lang(en){}
		#recommend .tabMenu:lang(en) li{
			padding: 0.8em;
			}
		#recommend .tabMenu:lang(en) li:before{
			content: none;
			}
	#recommend .tabMenu:lang(th){
		flex-wrap: wrap;
		margin-bottom: 1em;
		}
		#recommend .tabMenu:lang(th) li{
			width: calc(50% - 0.25em);
			border: 1px solid #ccc;
			border-radius: 0.4em;
			}
		#recommend .tabMenu:lang(th) li:nth-child(n+3){
			margin-top: 0.5em;
			}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#heroSlide{
	margin-top: 8vw;
	}
#heroNoslide{}
	#heroNoslide:first-child dl:nth-of-type(1){
		padding-top: calc(8vw + 4em);
		}
}


/* for TabletPC */
@media (min-width: 768px) {
/*768px以上*/
#heroNoslide{}
	#heroNoslide dl{
		grid-template-rows: 10em 10em;
		}
		#heroNoslide dl:nth-child(odd){
			grid-template-columns: 20em auto;
			}
			#heroNoslide dl:nth-child(odd) dt{
				grid-column: 2;
				text-align: right;
				}
		#heroNoslide dl:nth-child(even){
			grid-template-columns: auto 20em;
			}
			#heroNoslide dl:nth-child(even) dt{
				grid-column: 1;
				}
		#heroNoslide dt{
			grid-row: 1/3;
			align-self: center;
			}
	#heroNoslide dd{}
		#heroNoslide dd:nth-of-type(3){
			border-top: none;
			}
#recommend{}
	#recommend h2+div{
		display: flex;
		justify-content: space-between;
		align-items: center;
		}
		#recommend h2+div > div{
			font-size: 1.1875em;
			}
	#recommend h3+div{}
		#recommend h3+div:before{
			left: calc(33.33% - 0.665em);
			width: calc(33.33% + 1.33em);
			height: 100%;
			border-left: 1px solid #ccc;
			border-right: 1px solid #ccc;
			overflow: hidden;
			}
		#recommend h3+div:after{
			top: 50%;
			left: 0;
			width: 100%;
			border-top: 1px solid #ccc;
			}
	#recommend dl{
		width: calc(33.33% - 2.66em);
		padding: 2em 0;
		}
		#recommend dl:nth-of-type(3n+2){
			margin: 0 auto;
			}
#feature{
	overflow: hidden;
	}
#banner{}
	#banner h3{
		font-size: 1.25em;
		}
	#banner ul{
		margin-top: 2em;
		}
}
@media (min-width: 768px) and (max-width: 1199px) {
/*768px～1199px*/
#main{}
	#main h2{
		margin-bottom: 1em;
		font-size: 2.25em;
		}
#ranking{}
	#ranking dl{
		width: calc(33.33% - 0.66em);
		}
		#ranking dl:nth-of-type(n+3){
			margin-top: 1em;
			}
		#ranking dl:nth-of-type(1){
			width: calc(66.66% - 0.33em);
			}
			#ranking dl:nth-of-type(1) .thumb{
				padding-top: calc(50% - 0.66em);
				}
}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
#heroSlide{
	margin-top: 5em;
	}
	#heroSlide dt{
		font-size: 2.5em;
		}
#heroNoslide{}
	#heroNoslide:first-child dl:nth-of-type(1){
		padding-top: 10em;
		}
	#heroNoslide dl{
		grid-gap: 0 2em;
		padding: 5em 0;
		}
	#heroNoslide dt{
		font-size: 2.5em;
		}
	#heroNoslide dd:nth-of-type(2){
		padding: 0.667em;
		font-size: 1.5em;
		}
		#hero .heroDetail dt+dd{
			height: 10em;
			padding: 1em;
			}
#recommend{}
	#recommend li{
		width: 8em;
		}
	#recommend li+li{
		margin-left: 0.5em;
		}
#feature{}
	#feature dl{
		margin: 0 0.75em;
		}
#ranking{}
	#ranking dl{}
		#ranking dl:before,
		#ranking dl:after{
			font-size: 1.14285em;
			}
#banner{}
	#banner li{
		width: calc(33.33% - 0.67em);
		}
		#banner li:nth-child(3n+2){
			margin: 0 1em;
			}
		#banner li:nth-child(n+4){
			margin-top: 1em;
			}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
.scrollTop{}
	.scrollTop #navButton{
		display: none;
		}
	.scrollTop #nav{
		background: none;
		}
	.scrollTop #globalMenu{}
		.scrollTop #globalMenu ul{
			padding-right: 11em;
			}
		.scrollTop #globalMenu ul:lang(ja){
			padding-right: 12.5em;
			}
		.scrollTop #globalMenu a{
			font-size: 0.875em;
			}
		.scrollTop #globalMenu li+li{}
			.scrollTop #globalMenu li+li:lang(en){
				margin-left: 1.5em;
				}
	.scrollTop #extraMenu{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		}
		.scrollTop #extraMenu ul,
		.scrollTop #extraMenu dl{
			width: 10em;
			}
			.scrollTop #extraMenu ul:lang(ja),
			.scrollTop #extraMenu dl:lang(ja){
				width: 11.5em;
				}
		.scrollTop #extraMenu i{
			font-size: 1em;
			}
		.scrollTop #extraMenu li{}
			.scrollTop #extraMenu li+li{
				margin-top: 0.5em;
				}
			.scrollTop #extraMenu li a{
				padding: 0.5em;
				padding-right: 1em;
				background: #1a1a1a;
				}
		.scrollTop #extraMenu .wrap{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			}
	.scrollTop #selectLanguage{
		margin-top: 0.5em;
		border-radius: 1em;
		border: 1px solid #ccc;
		}
		.scrollTop #selectLanguage dt{
			padding: 0.5em;
			padding-right: 1em;
			}
		.scrollTop #selectLanguage a{
			padding: 0.5em;
			}
	body.scrollTop{}
		body.scrollTop #announceLink+#wrapper #extraMenu{
			top: 4em;
			}
#header{
	transition: background 0.2s ease-out;
	}
#siteName{}
	#siteName svg{
		transition: all 0.2s ease-out;
		}
#globalMenu{}
	#globalMenu ul{
		transition: padding 0.2s ease-out;
		}
#extraMenu{
	transition: opacity 0.2s ease-out;
	}
#heroSlide{
	margin: 10em auto 0 auto;
	max-width: 1140px;
	}
	#heroSlide dt{
		font-size: 2.75em;
		}
	#heroSlide .slick-arrow{
		width: 3em;
		height: 3em;
		margin-top: -1.5em;
		background: #919191;
		border-radius: 100%;
		}
		#heroSlide .slick-arrow svg{
			position: absolute;
			top: 50%;
			left: 50%;
			width: 2em;
			height: 2em;
			background: none;
			transform: translate(-50%, -50%);
			}
	#heroSlide .slick-prev{
		left: -1.5em;
		}
	#heroSlide .slick-next{
		right: -1.5em;
		}
#heroNoslide{}
	#heroNoslide dl{
		grid-gap: 0 3em;
		padding: 6em 0;
		}
	#heroNoslide dt{
		font-size: 2.75em;
		}
	#heroNoslide dd{}
		#heroNoslide dd:nth-of-type(2){
			padding: 0.6em;
			font-size: 1.75em;
			}
		#heroNoslide dd:nth-of-type(3){
			padding: 0.887em;
			font-size: 1.125em;
			}
#recommend{}
	#recommend li+li{
		margin-left: 1em;
		}
#feature{}
	#feature dl{
		margin: 0 1em;
		}
#ranking{}
	#ranking dl{
		width: calc(33.33% - 1em);
		}
		#ranking dl:before,
		#ranking dl:after{
			font-size: 1.5625em;
			}
		#ranking dl:nth-of-type(n+3){
			margin-top: 1.5em;
			}
		#ranking dl:nth-of-type(1){
			width: calc(66.66% - 0.5em);
			}
			#ranking dl:nth-of-type(1) .thumb{
				padding-top: calc(50% - 1em);
				}
#banner{}
	#banner li{
		width: calc(25% - 0.75em);
		margin-left: 1em;
		}
		#banner li:nth-child(4n+1){
			margin-left: 0;
			}
		#banner li:nth-child(n+5){
			margin-top: 1em;
			}
}
@media (min-width: 992px) and (max-width: 1199px) {
/*992px～1199px*/
.scrollTop{}
	.scrollTop #siteName{}
		.scrollTop #siteName svg{
			font-size: 5em;
			}
	.scrollTop #globalMenu{}
		.scrollTop #globalMenu ul{
			padding-left: 10em;
			}
		.scrollTop #globalMenu li+li{
			margin-left: 1em;
			}
#heroSlide{}
	#heroNoslide:first-child dl:nth-of-type(1){
		padding-top: 12em;
		}
	#heroSlide .slick-prev{
		left: 1em;
		}
	#heroSlide .slick-next{
		right: 1em;
		}
#recommend{}
	#recommend li{
		width: 10em;
		}
}
@media (min-width: 1200px) {
/*1200px以上*/
.scrollTop{}
	.scrollTop #siteName{}
		.scrollTop #siteName svg{
			font-size: 7em;
			}
	.scrollTop #globalMenu{}
		.scrollTop #globalMenu ul{
			padding-left: 14em;
			}
#main{}
	#main h2{
		margin-bottom: 1em;
		font-size: 2.75em;
		}
#heroSlide{}
	#heroSlide .slick-prev{
		left: -1.5em;
		}
	#heroSlide .slick-next{
		right: -1.5em;
		}
#heroSlide{}
	#heroNoslide:first-child dl:nth-of-type(1){
		padding-top: 14em;
		}
#recommend{}
	#recommend li{
		width: 12em;
		}
}


/* Edge */
@supports (-ms-ime-align:auto) {
}


/* ie */
@media all and (-ms-high-contrast: none) {
}