@charset "utf-8";

.qsec .list {
	display:flex;
	flex-wrap:wrap;
	gap:1em;
}
.qsec .list .item {
	display:block;

}

.s01 .inner {
	position:relative;
	padding:4em;
	#max-width:calc(var(--vwp) + 16em);
	background-image:url(top_sec1.1.jpg);
}
.s01 .inner:after {
	content:'';
	display:block;
	padding-top:calc(100%);
}
.s01 .inner:before {
	position:absolute;
	content:'';
	display:block;
	inset:0;
}
.s01 .stg {
	position:absolute;
	inset:0;
}
.s01 .stg svg {
	position:absolute;
	inset:0;
	display:block;
	margin:auto;
	width:260px;
	max-width:50%;
}
@media screen and (min-width:720px) {
	.s01 .inner:after {
		padding-top:calc(100% / 12 * 7);
	}
	.s01 .inner:before {
		background-image:linear-gradient(to right, #fff 0, #ffffff00 8em, #ffffff00 calc(100% - 8em), #fff 100% );
	}
}


.s02 .list {
	padding:1em 0;
	justify-content:space-evenly;
	font-size:170%;
	--bk:#aaa;
}
.s02 .list .item {
	position:relative;
	width:8em;
	height:8em;
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:var(--bk);
	color:#fff;
	font-family:'DIN Condensed';
	overflow:hidden;
}
.s02 .list .item:before {
	position:absolute;
	content:'';
	display:block;
	inset:-200% 0 100%;
	background-image:linear-gradient(to bottom, #00000088, #00000088, #00000000);
	transition-duration:.5s;
	transition-timing-function:ease;
	transition-property:all;
}
.s02 .list .item:hover:before {
	inset:0 0 -100%;
}
.s02 .list .item div {
	position:relative;
	transition-duration:.6s;
	transition-timing-function:ease;
	transition-property:all;
}
.s02 .list .item:hover div {
	font-size:120%;
}
@media screen and (min-width:720px) {
	.s02 .list .item {
		width:7em;
		height:7em;
	}
}


.s03 .list {
	padding:1em;
	justify-content:space-evenly;
	--bk:#aaa;
}
.s03 .list .item {
	display:block;
	width:100%;
}
.s03 .list .pics {
	position:relative;
	width:100%;
	background-color:var(--bk);
	color:#fff;
	font-family:'DIN Condensed';
	overflow:hidden;
	font-size:170%;
}
.s03 .list .pics:before {
	position:absolute;
	content:'';
	display:block;
	inset:-200% 0 100%;
	background-image:linear-gradient(to bottom, #00000088, #00000088, #00000000);
	transition-duration:.5s;
	transition-timing-function:ease;
	transition-property:all;
}
.s03 .list .pics:after {
	content:'';
	display:block;
	padding-top:calc(100% / 16 * 9);
}
.s03 .list .item:hover .pics:before {
	inset:0 0 -100%;
}
.s03 .list .item .pics div {
	position:absolute;
	inset:0;
	margin:auto;
	width:fit-content;
	height:fit-content;
	transition-duration:.6s;
	transition-timing-function:ease;
	transition-property:all;
	text-shadow:0 0 .5em #000000;
}
.s03 .list .item:hover .pics div {
	font-size:120%;
}
.s03 .wrd {
	display:flex;
	justify-content:space-between;
	padding:1em 0;
	font-size:120%;
}
.s03 .wrd > * {
	display:block;
}
.s03 .wrd > *:last-child {
	color:#c41b6f;
}
.s03 .wrd > *:last-child:before {
	content:'\¥';
}
@media screen and (min-width:720px) {
	.s03 .list .item {
	width:calc((100% - 2em) / 2);
	}
}