@charset "UTF-8";
/* scrollani
----------------------------------------------*/
.scrollani {
	opacity: 0;
	transition: all .8s ease 0.3s;
}
.scrollani.show {
	opacity: 1;
	transform: none;
}
.scrollani--lr {
	transform: translate(-100px, 0);
}
.scrollani--rl {
	transform: translate(100px, 0);
}
.scrollani--up {
	transform: translate(0, 100px);
}
.scrollani--down {
	transform: translate(0, -100px);
}
.scrollani--scaleUp {
	transform: scale(.5);
}
.scrollani--scaleDown {
	transform: scale(1.5);
}
.scrollani--rotateL {
	transform: rotate(180deg);
}
.scrollani--rotateR {
	transform: rotate(-180deg);
}
@media print {
	.scrollani {
		opacity: 1;
		transform: none;
	}
}
/* main stylse
----------------------------------------------*/
#wrapper {
	width: 100%;
	padding-top: 0;
}
#bgBox {
	background: #ffffeb;
}
#introduction {
	margin: 0 auto;
	padding-top: 38px;
}
.pageTitle {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}
.setumeiBox {
	display: flex;
	align-items: center;
	padding: 37px calc((100% - 1100px) / 2) 50px;
	gap: 0 56px;
	overflow: hidden;
}
.setumeiBox .logo {
	flex: 0 0 auto;
}
.setumei {
	flex: 0 0 704px;
}
.setumeiBox h2 {
	margin-bottom: 30px;
	font-weight: bold;
	font-size: 3.2rem;
}
.setumeiBox .lead {
	font-size: 1.4rem;
	line-height: 1.75;
}
.setumeiBox .lead p + p {
	margin-top: 1.75em;
}
#mainContent {
	width: 100%;
	max-width: 1100px;
  margin: 0 auto 20px;
	padding-bottom: 18px;
	background-color: #000;
	position: relative;
	z-index: 0;
}
#mainContent::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 12px solid #5500ac;
}
#mainContent::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: 50%;
	bottom: 50%;
	translate: 50% 50%;
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	border: 6px solid #e7b200;
}
#mainContent img {
  display: block;
  margin: auto;
	max-width: 100%;
  height: auto;
}
#mainContent .main01::after {
	content: "";
	display: block;
	width: calc(100% - 36px);
	margin: 0 auto;
	height: 27px;
	background-image: url(../img/bg-lt.webp), url(../img/bg-rt.webp), linear-gradient(0deg, rgba(231, 178, 0, 1) 0%, rgba(231, 178, 0, 1) calc(100% - 1px), rgba(231, 178, 0, 0) calc(100% - 1px), rgba(231, 178, 0, 0) 100%);
	background-position: left top, right top, left top;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
#mainContent .contents {
	margin: 0 18px;
	position: relative;
	display: grid;
	grid-template-columns: 30px 1fr 30px;
	grid-template-rows: repeat(6, auto);
}
#mainContent .contents::before,
#mainContent .contents::after {
	content: "";
	display: block;
	grid-column: 1 / 2;
	grid-row: 1 / -1;
	position: sticky;
	left: 0;
	top: 0;
	width: 100%;
	max-height: var(--winHeight, 100lvh);
	background: url(../img/bg-left.webp) no-repeat round left top / 100% auto;
}
#mainContent .contents::after {
	right: 0;
	left: auto;
	grid-column: -2 / -1;
	background-image: url(../img/bg-right.webp);
	background-position: right top;
}
#mainContent .contents > img:first-of-type {
	margin-top: 8px;
}
div:has(> ul > .scrollani) {
	position: relative;
	overflow: hidden;
}
ul:has(> .scrollani) {
	list-style: none;
	width: calc(100% - 34px);
	position: absolute;
	left: 20px;
	display: flex;
}
li.scrollani {
	flex: 0 0 auto;
}
.kokuchi02 ul {
	bottom: 30px;
	gap: 3px;
}
.kokuchi02 li {
	width: calc((100% - 6px) / 3);
}
.doyame ul {
	bottom: 22px;
	flex-wrap: wrap;
	gap: 8px;
}
.doyame li {
	width: calc((100% - 24px) / 4);
}
.sound ul {
	bottom: 25px;
	gap: 5px 3px;
}
.sound li {
	width: calc((100% - 9px) / 4);
}
.bonus ul {
	gap: 5px 3px;
	bottom: 18px;
}
.bonus li {
	width: calc((100% - 3px) / 2);
}
#mainContent .grid {
	display: grid;
	grid-template-columns: 69.3227% 29.7808%;
	grid-template-rows: repeat(2, auto) 1fr;
	gap: 0;
	padding-bottom: 44px;
	align-items: start;
}
.haitou ul {
	width: auto;
	max-width: calc(100% - 40px);
	justify-content: center;
	margin: 0 auto;
	bottom: 10px;
	gap: 0 8px;
}
.haitou li {
	flex-shrink: 1;
	height: 58px;
}
.haitou li img {
	width: auto;
	max-height: 100%;
}
.uchikata {
	position: relative;
}
.uchikata .bb {
	position: absolute;
	left: -6px;
	top: 15px;
}
.kakuritsu {
	position: relative;
}
.kakuritsu .scrollani {
	position: absolute;
	bottom: 12px;
	left: 16px;
	width: calc(100% - 38px);
}
.reel {
	grid-column: -2 / -1;
	grid-row: 1 / -1;
	position: relative;
}
.reel .scrollani {
	position: absolute;
	right: 50%;
	bottom: 23px;
	translate: 50% 0;
	width: calc(100% - 21px);
}
#mainContent .bottom::before,
#mainContent .bottomSp::before {
	content: "";
	display: block;
	width: 100%;
	height: 27px;
	background-image: url(../img/bg-lb.webp), url(../img/bg-rb.webp), linear-gradient(180deg, rgba(231, 178, 0, 1) 0%, rgba(231, 178, 0, 1) calc(100% - 1px), rgba(231, 178, 0, 0) calc(100% - 1px), rgba(231, 178, 0, 0) 100%);
	background-position: left bottom, right bottom, left top;
	background-repeat: no-repeat;
	background-size: auto 100%;
}#mainContent .bottomSp {
	display: none;
}
#mainContent .bottom {
	padding: 0 18px;
}
@media screen and (max-width: 767px) {
	main {
		overflow: visible;
	}
	#introduction {
		width: 93.3333%;
		margin: 0 auto 35px;
		padding-top: 20px;
	}
	.pageTitle {
    width: 68%;
    }
	.setumeiBox {
		display: block;
		padding: 30px 0 35px;
	}
	.setumeiBox .logo {
		text-align: center;
		margin: 0 auto 18px;
	}
	.setumeiBox h2 {
		margin-bottom: 22px;
		text-align: center;
		font-size: 2.3rem;
	}
  #mainContent {
		padding-bottom: 9px;
	}
  #mainContent::before {
		border-width: 6px;
	}
  #mainContent::after {
		width: calc(100% - 12px);
		height: calc(100% - 12px);
		border-width: 3px;
	}
	#mainContent .main01 {
		padding-top: max(3px, 0.8vw);
		padding-left: 3px;
		padding-bottom: 14px;
		position: relative;
	}
	#mainContent .main01::after {
		position: absolute;
		right: 50%;
		bottom: 0;
		translate: 50% 0;
		width: calc(100% - 18px);
		height: 14px;
	}
	#mainContent .contents {
		grid-template-columns: 15px 1fr 15px;
		margin: 0 9px;
	}
	#mainContent .contents > * {
		margin-bottom: 20px;
	}
	#mainContent .contents > img:first-of-type {
		margin-top: 3px;
	}
	ul:has(> .scrollani) {
		left: 50%;
		bottom: 12px;
		translate: -50% 0;
	}
	.kokuchi02 ul {
		display: block;
		width: min(225px, 68.8073%);
	}
	.kokuchi02 li {
		width: 100%;
	}
	.doyame ul {
		width: min(270px, 82.5688%);
		gap: 10px;
	}
	.doyame li {
		width: calc((100% - 10px) / 2);
	}
	.sound ul {
		width: min(270px, 82.5688%);
		flex-wrap: wrap;
	}
	.sound li {
		width: calc((100% - 3px) / 2);
	}
	.bonus ul {
		width: min(270px, 82.5688%);
		flex-direction: column;
	}
	.bonus li {
		width: 100%;
	}
	#mainContent .contents .grid {
		display: flex;
		flex-direction: column;
		padding-bottom: 10px;
		margin-bottom: 0;
	}
	#mainContent .contents .grid > * {
		margin-bottom: 20px;
		width: 100%;
		overflow: hidden;
	}
	.haitou ul {
		width: min(240px, 73.3945%);
		max-width: none;
		justify-content: center;
		flex-wrap: wrap;
		gap: 10px 5px;
		bottom: 10px;
	}
	.haitou li {
		height: 40px;
		height: min(40px, 10.6667vw);
	}
	.kakuritsu {
		order: 1;
	}
	.kakuritsu .scrollani {
		width: min(290px, 88.685%);
		left: auto;
		right: 50%;
		translate: 50% 0;
		bottom: 10px;
	}
	.reel .scrollani {
		width: min(160px, 48.9297%);
		bottom: 10px;
		bottom: 2.0683%;
	}
	#mainContent .contents .grid .uchikata {
		width: 94.8012%;
		max-width: 310px;
		margin-inline: auto;
		overflow: visible;
	}
	.uchikata .bb {
		width: 22.7419%;
		left: -2.4194%;
		top: 12.7764%;
	}
	#mainContent .bottomSp::before {
		height: 14px;
		margin-bottom: 8px;
	}
	#mainContent .bottomSp {
		display: block;
		background: linear-gradient(90deg, #4d00a8 0%, #8546c4 50%, #4d00a8 100%);
		margin: 0 9px;
		padding: 0 0 12px;
	}
	#mainContent .bottomSp h3 {
		text-align: center;
		padding-bottom: 5px;
	}
	#mainContent .completeFunc {
		background-color: #f4f3f2;
		border: 2px solid #d9ac00;
		width: 92.5926%;
		margin: 14px auto 0;
		padding: 10px 0;
	}
	#mainContent .bottom {
		display: none;
	}
}