@charset "utf-8";

html {
	overflow: hidden;
	overscroll-behavior: none;
	-webkit-text-size-adjust: none;
	font-size: 62.5%;
    touch-action: pan-x pan-y;
}

body {
	color: #000;
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', "Yu Gothic Medium", "游ゴシック Medium", sans-serif;
	margin: 0px;
	padding: 0px;
	font-size: 1.0rem;
	font-weight: normal;
	line-height: 1.5;
	-webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

article, aside, dialog, figure, footer, header, hgroup, nav, section, main {
	display: block;
}

body, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0px;
	padding: 0px;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-weight: normal;
	font-style: normal;
}

ul, ol, li {
	list-style: none;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

input, textarea {
	vertical-align: middle;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
}

img {
	width: 100%;
	height: auto;
	border-style: none;
	vertical-align: top;
	font-size: 0;
	line-height: 0;
}

a {
	color: #000;
	text-decoration: none;
	outline: none;
}

a:focus {
	outline: none;
}

/*----- .clearfix -----*/

.clearfix::after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.fontE {
	font-family: 'Roboto', sans-serif;
}

/*----- common -----*/
html,
body,
#wrap,
main {
	width: 100%;
	height: 100%;
}

body {
	background: #fff;
}

#wrap {
	overflow: hidden;
}

main {
	align-items: center;
	justify-content: center;
	display: flex;
}

#allArea {
	margin: 0 auto;
	padding: 2rem;
	width: 144rem;
	height: 91.6rem;
	aspect-ratio: 1440 / 916;
	display: block;
	box-sizing: border-box;
	position: relative;
}

#cardArea {
	height: 81.6rem;
	position: relative;
}

#dropFlow .flow,
.card {
	width: 30.8rem;
	height: 20.2rem;
}

.card {
	position: relative;
}

.card a {
	width: 100%;
	height: 100%;
	background: #fff;
	border: 2px #71ABD8 solid;
	border-radius: 0.8rem;
	box-shadow: 0.1rem 0.1rem 0.3rem 0 rgba(0,0,0,0.25);
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	display: flex;
	position: relative;
}

.card.on a {
	border: 0.6rem #ccc solid;
	box-shadow: none;
}

.card a::after {
	content: " ";
	width: 3.7rem;
	height: 3.7rem;
	background: #E1F0FF url("../images/search.svg") no-repeat center center / 2.2rem auto;
	border-radius: 50%;
	box-shadow: 0.1rem 0.1rem 0.2rem 0 rgba(0,0,0,0.15);
	display: block;
	right: 0.6rem;
	bottom: 0.6rem;
	position: absolute;
}

.card a img {
	width: 27rem;
	height: auto;
	border: 1px #D9D9D9 solid;
	box-sizing: border-box;
}

#dropFlow {
	padding-top: 81.6rem;
	padding-top: 60rem;
}

#dropFlow .flow {
	background: #FAFAFB;
	border-radius: 0.8rem;
	box-shadow: 0.1rem 0.1rem 0.4rem 0.2rem rgba(0,0,0,0.12) inset;
	position: absolute;
	transition-property: background;
	transition-duration: 0.5s;
}

#dropFlow .flow.hov {
	background: #CEE3FF;
}

#dropFlow .flow:not(:last-of-type)::before {
	content: " ";
	width: 2.9rem;
	height: 3.5rem;
	background: url("../images/arrow.svg") no-repeat center center / contain;
	display: block;
	right: -3.6rem;
	top: 8.4rem;
	position: absolute;
}

#dropFlow .flow > span {
	width: 6.6rem;
	background: #BBBBBB;
	border-radius: 50%;
	color: #fff;
	font-size: 5.8rem;
	font-weight: 600;
	line-height: 6.6rem;
	text-align: center;
	left: 50%;
	top: 50%;
	position: absolute;
	transform: translate(-50%,-50%);
}

#dropFlow .flow .box {
	width: 100%;
	height: 100%;
}

#dropFlow #flow01,
#dropFlow #flow05 {
	left: 0;
}

#dropFlow #flow02,
#dropFlow #flow06 {
	left: 35rem;
}

#dropFlow #flow03 {
	left: 70rem;
}

#dropFlow #flow04 {
	left: 105rem;
}

#dropFlow #flow01,
#dropFlow #flow02,
#dropFlow #flow03,
#dropFlow #flow04 {
	top: 0;
}

#dropFlow #flow05,
#dropFlow #flow06 {
	top: 23rem;
}

#initSet .set .card {
	position: absolute;
}

#initSet .set #card01 {
	left: 2.4rem;
	top: 50.6rem;
	transform:rotate(-12deg);
}

#initSet .set #card02 {
	left: 19.1rem;
	top: 54rem;
	transform:rotate(-8deg);
}

#initSet .set #card03 {
	left: 43rem;
	top: 48.4rem;
	transform:rotate(-3deg);
}

#initSet .set #card04 {
	left: 65rem;
	top: 53rem;
	transform:rotate(-6deg);
}

#initSet .set #card05 {
	left: 89.4rem;
	top: 47.2rem;
	transform:rotate(2deg);
}

#initSet .set #card06 {
	left: 105.9rem;
	top: 57.4rem;
	transform:rotate(-12deg);
}

#ft {
	justify-content: space-between;
	display: flex;
}

#btmCtr {
	padding: 0 2rem 0 1.8rem;
	height: 6rem;
	background-color: #D9E8F6;
	border-radius: 0.5rem;
	box-sizing: border-box;
	align-items: center;
	display: flex;
}

#btmCtr p {
	margin-right: 2.2rem;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 2rem;
	text-align: center;
	letter-spacing: 0.1em;
}

#btmCtr p::before {
	content: " ";
	width: 0;
	height: 0;
	display: block;
	left: -99999px;
	top: 0;
	z-index: 0;
	position: absolute;
}

#btmCtr #prevCtr,
#btmCtr #nextCtr,
#btmCtr #playCtr {
	height: 4.4rem;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}

#btmCtr #prevCtr,
#btmCtr #nextCtr {
	width: 2.9rem;
}

#btmCtr #playCtr {
	margin: 0 1rem;
	width: 4.4rem;
}

#btmCtr #prevCtr {
	background: url("../images/prev.svg") no-repeat center center / contain;
}

#btmCtr #nextCtr {
	background: url("../images/next.svg") no-repeat center center / contain;
}

#btmCtr #playCtr {
	background: url("../images/play.svg") no-repeat center center / contain;
}

#btmCtr p::before,
#btmCtr #playCtr.now {
	background: url("../images/stop.svg") no-repeat center center / contain;
}

#btmCtr input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	background: transparent;
	cursor: pointer;
	padding: 0 1.3rem 0 2.2rem;
	width: 49.6rem;
}

#btmCtr input[type="range"]::-webkit-slider-runnable-track {
	background: #5BB2FD;
	height: 1.4rem;
	border-radius: 0.7rem;
}

#btmCtr input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	border: 0.2rem #B6B8C9 solid;;
	width: 1.3rem;
	height: 3.6rem;
	margin-top: -1.1rem;
	background-color: #3463CB;
	border-radius: 0.2rem;
}

#btmCtr input[type="range"]::-moz-range-track {
	background: #5BB2FD;
	height: 1.4rem;
	border-radius: 0.7rem;
}

#btmCtr input[type="range"]::-moz-range-thumb {
	border: 0.2rem #B6B8C9 solid;;
	width: 1.3rem;
	height: 3.6rem;
	background-color: #3463CB;
	border-radius: 0.2rem;
}

#btmCtr #timeCtr {
	font-size: 1.9rem;
	font-weight: normal;
	line-height: 2.2rem;
	text-align: center;
	letter-spacing: 0.05em;
}

#btmBt {
	align-items: center;
	justify-content: flex-end;
	display: flex;
}

#btmBt li {
	margin-left: 0.8rem;
	padding: 1.3rem 1.3rem 1.2rem;
	width: 16.8rem;
	height: 6rem;
	background-color: #D9E8F6;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 0 auto;
	border-radius: 0.5rem;
	box-sizing: border-box;
	font-size: 0;
	line-height: 0;
}

#btmBt li a {
	width: 100%;
	height: 100%;
	background-color: #fff;
	background-position: left 1.4rem center;
	background-repeat: no-repeat;
	border-radius: 0.5rem;
	box-shadow: 0.1rem 0.1rem 0.1rem 0 rgba(0,0,0,0.25);
	color: #2C74AB;
	text-indent: -9999px;
	display: block;
}

#btmBt li a#btKeyword {
	background-image: url("../images/icon_key.svg");
	background-size: 11.4rem auto;
}

#btmBt li:first-of-type,
#btmBt li a#btKeyword.set {
	background-image: url("../images/icon_key_on.svg");
}

#btmBt li a#btKeyword.set {
	background-color: #2C74AB;
	color: #fff;
}

#btmBt li a#btReset {
	background-image: url("../images/icon_reset.svg");
	background-size: 10.5rem auto;
}

#modImg {
	width: 100%;
	height: 81.6rem;
	left: 0;
	top: 2rem;
	z-index: 99996;
	position: absolute;
}

#modImgMain {
	width: 109rem;
	height: 63rem;
	background: #fff;
	border: 4px #7EB3DC solid;
	border-radius: 2rem;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	display: flex;
	left: 16.7rem;
	top: 2rem;
	position: absolute;
}

#modImg img {
	width: 95.8rem;
	height: auto;
	border: 1px #D9D9D9 solid;
	box-sizing: border-box;
}

#modKey,
#modReset,
#modImg {
	transform: translateX(9999px);
	opacity: 0;
	transition: transform 0s 0.2s, opacity 0.1s 0s;
}

#modKey.open,
#modReset.open,
#modImg.open {
	transform: translateX(0);
	opacity: 1;
	transition: transform 0s, opacity 0.3s;
}

#modImg #modImgClose {
	width: 3.6rem;
	height: 3.6rem;
	background: #8B8B8B url("../images/close.svg") no-repeat center center / 1.8rem auto;
	border-radius: 50%;
	box-shadow: 0.1rem 0.1rem 0.3rem 0 rgba(0,0,0,0.3);
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	display: block;
	right: 0.7rem;
	top: 0.9rem;
	position: absolute;
}

#modKey {
	padding: 2.4rem 8rem;
	width: calc(100% - 4rem);
	background: rgba(255,255,255,0.8);
	box-sizing: border-box;
	font-size: 4.8rem;
	font-weight: bold;
	line-height: 5.2rem;
	text-align: center;
	left: 2rem;
	bottom: 9rem;
	z-index: 99998;
	position: absolute;
    letter-spacing: 0.5px;
}

#modKey i {
	font-style: oblique;
}

#modReset {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	left: 0;
	top: 0;
	z-index: 99999;
	position: fixed;
	align-items: center;
	justify-content: center;
	display: flex;
}

#modReset > div {
	width: 64rem;
	background: #DAD9CB;
	border: 1px #000 solid;
	border-radius: 0.5rem;
	box-sizing: border-box;
	overflow: hidden;
}

#modReset h2 {
	margin: 0 0 6.9rem;
	background: #FA154F;
	color: #fff;
	font-size: 2.6rem;
	font-weight: 400;
	line-height: 3.6rem;
	text-align: center;
}

#modReset p {
	margin: 0 auto 6.9rem;
	width: 20em;
	color: #000;
	font-size: 2.6rem;
	font-weight: 400;
	line-height: 5.2rem;
	text-align: center;
	letter-spacing: -0.02em;
}

#modReset ul {
	margin: 0 auto;
	padding: 0 0 3.2rem;
	width: 36.4em;
	justify-content: space-between;
	display: flex;
}

#modReset ul li {
	width: 13.2rem;
	font-size: 2.6rem;
	font-weight: 400;
	line-height: 3rem;
	text-align: center;
}

#modReset ul li a {
	padding: 0.5rem 0;
	background: #fff;
	box-shadow: 0.2rem 0.2rem 0.5rem rgba(0,0,0,0.3);
	display: block;
	color: #6f6f6f;
	border-radius: 0.8rem;
}

/*----- roulette -----*/

#rouletteWrap {
	width: 100%;
}

#rouletteArea {
	margin: 0 auto;
	width: 90%;
	max-width: 50rem;
	height: 100%;
	max-height: 50rem;
	aspect-ratio: 1 / 1;
	position: relative;
}

#rouletteList {
	width: 100%;
	height: 100%;
	background: #fff;
	border: 1rem #fff solid;
	box-shadow: 0 0 0 1rem #000;
	border-radius: 50%;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
}

#rouletteList::after {
	content: " ";
	width: 5rem;
	height: 5rem;
	background: #000;
	border: 1rem #000 solid;
	border-radius: 50%;
	box-sizing: border-box;
	display: block;
	left: 50%;
	top: 50%;
	z-index: 10;
	position: absolute;
	transform: translate(-50%,-50%);
}

#rouletteList li {
	width: 57.735%;
	height: 50%;
	left: 21.1325%;
	bottom: 50%;
	z-index: 1;
	position: absolute;
	transform-origin: center bottom;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	color: #000;
}

#rouletteList li:nth-of-type(2),
#rouletteList li:nth-of-type(4) {
	z-index: 2;
}

#rouletteList li:nth-of-type(1) {
	background: #fff338;
	transform:  rotate(30deg);
}

#rouletteList li:nth-of-type(2) {
	background: #f39839;
	transform: rotate(90deg);
}

#rouletteList li:nth-of-type(3) {
	background: #38beef;
	transform: rotate(150deg);
}

#rouletteList li:nth-of-type(4) {
	background: #b964a4;
	transform: rotate(-150deg);
}

#rouletteList li:nth-of-type(5) {
	background: #6bbc65;
	transform: rotate(-90deg);
}

#rouletteList li:nth-of-type(6) {
	background: #eb6ea5;
	transform: rotate(-30deg);
}

#rouletteList li::after {
	content: " ";
	width: 10%;
	height: 50%;
	background: #000;
	display: none;
	clip-path: polygon(50% 0, 100% 40%, 75% 40%, 75% 100%, 25% 100%, 25% 40%, 0 40%);
	left: 45%;
	bottom: 0;
	position: absolute;
}

#rouletteList li.set::after {
	display: block;
}

#rouletteList li .roulD {
	width: 100%;
	height: 100%;
	position: relative;
}

#rouletteList li span {
	font-size: 7rem;
	font-weight: bold;
	line-height: 2;
	text-align: center;
	left: 50%;
	top: 30%;
	position: absolute;
	transform-origin: center center;
}

#rouletteList li:nth-of-type(1) span {
	transform: translate(-50%,-50%) rotate(-30deg);
}

#rouletteList li:nth-of-type(2) span {
	transform: translate(-50%,-50%) rotate(-90deg);
}

#rouletteList li:nth-of-type(3) span {
	transform: translate(-50%,-50%) rotate(-150deg);
}

#rouletteList li:nth-of-type(4) span {
	transform: translate(-50%,-50%) rotate(150deg);
}

#rouletteList li:nth-of-type(5) span {
	transform: translate(-50%,-50%) rotate(90deg);
}

#rouletteList li:nth-of-type(6) span {
	transform: translate(-50%,-50%) rotate(30deg);
}

#rouletteList .line span,
#rouletteList .line::before,
#rouletteList .line::after {
	width: 1rem;
	height: 100%;
	background: #fff;
	display: block;
	font-size: 0;
	line-height: 0;
	left: 50%;
	top: 50%;
	z-index: 8;
	position: absolute;
	transform-origin:center center;
}

#rouletteList .line::before,
#rouletteList .line::after {
	content: " ";
}

#rouletteList .line span {
	transform: translate(-50%,-50%);
}

#rouletteList .line::before {
	transform: translate(-50%,-50%) rotate(60deg);
}

#rouletteList .line::after {
	transform: translate(-50%,-50%) rotate(-60deg);
}

#rouletteBt {
	margin: 6rem auto 0;
	width: 20rem;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}

#rouletteBt a {
	padding: 1.5rem 0;
	border: 0.4rem #000 solid;
	border-radius: 2rem;
	color: #000;
	display: block;
}

#rouletteBt a .start {
	display: block;
}

#rouletteBt a .stop {
	display: none;
}

#rouletteBt a.play .start {
	display: none;
}

#rouletteBt a.play .stop {
	display: block;
}

/*----- shuffle -----*/

#shuffleWrap {
	width: 100%;
}

#shuffleArea {
	margin: 0 auto;
	width: 90%;
	max-width: 96rem;
	position: relative;
}

#shuffleList {
	width: 100%;
	overflow: hidden;
	position: relative;
}

#shuffleList li {
	width: 100%;
	font-size: 0;
	left: 0;
	bottom: 0;
	z-index: 1;
	position: absolute;
}

#shuffleList li:first-of-type {
	left: auto;
	bottom: auto;
	position: relative;
}

#shuffleList li.set {
	z-index: 10;
}

#shuffleBt {
	margin: 6rem auto 0;
	width: 20rem;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}

#shuffleBt a {
	padding: 1.5rem 0;
	border: 0.4rem #000 solid;
	border-radius: 2rem;
	color: #000;
	display: block;
}

#shuffleBt a .start {
	display: block;
}

#shuffleBt a .stop {
	display: none;
}

#shuffleBt a.play .start {
	display: none;
}

#shuffleBt a.play .stop {
	display: block;
}