@media screen and (min-width: 721px) {
	html {
		font-size: 75%;
	}
}

@media screen and (max-width: 720px) {
	html {
		font-size: 62.5%;
	}
}

:root {
	--blue: #8BB8D6;
	--pink: #FA6E59;
	--orange: #F8A055;

	--font-color: #f4f4f4;
	--back-color: #383838;
	--button-color: #dfcc79;
	--ban-size: 350px;
	/* --ban-teihen-width: 108px; */
	--ban-teihen-width: 216px;
}

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}

html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;
	/*rem算出をしやすくするために*/
}

body {
	font-family: "Sawarabi Gothic", "Meiryo", "Hiragino Kaku Gothic ProN", "Helvetica Neue", "Hiragino Sans", "Helvetica", "Arial", "Yu Gothic", sans-serif;
	font-size: 18px;
	background-color: #11181A;

	color: var(--font-color);
	width: 100%;
	height: 100%;
}

.title {
	position: relative;
	margin-top: 10%;
	left: 2%;
	font-size: 3.0rem;
}

.message1 {
	margin-top: 3rem;
}

.sc_body {
	position: relative;
	left: 5%;
}

.buttons {
	position: relative;
	left: 2%;
	margin-top: 1rem;
}

.gbtn {
	font-size: 1.6rem;
	line-height: 1.5;
	position: relative;
	display: inline-block;
	padding: 1rem 4rem;
	cursor: pointer;
	margin: 0.3rem;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #272727;
	background-color: var(--button-color);
	border-radius: 0.8rem;
}

.gbtn-small {
	font-size: 1.3rem;
}

.gbtn-center {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
}

.cancel {
	background-color: #c7c7c7;
}


.gbtn:disabled {
	background-color: #6e6c6c;
}

/*
.btn--orange:hover {
	 color: #f8f8f8;
		background: #96cf2b;
}
	*/

.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.6);
}

.modal-on {
	display: block;
}

.modal-content {
	margin: 10% auto;

	width: 80%;
	max-width: 500px;
	background-color: var(--back-color);

	box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
	animation-name: modalopen;
	animation-duration: 0.5s;
}

.modal-text {
	position: relative;
}

.modal-config {
	max-width: 350px;
}

@keyframes modalopen {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

.blank {
	margin-top: 1rem;
}

.modal-header h1 {
	margin: 0.1rem 0;
}

.modal-header {
	background: lightblue;
	padding: 3px 15px;
	display: flex;
	justify-content: space-between;
}

.modalClose {
	font-size: 2rem;
}

.modalClose:hover {
	cursor: pointer;
}

.modal-body {
	padding: 10px 20px;
	color: var(--font-color);
}

.margine-ab {
	margin-top: 1em;
}

.sidebutton {
	width: 3em;
	height: 3em;
}

.mainhr {
	margin-top: 5rem;
	margin-bottom: 1rem;
}

.startmenu_body {
	background-image: url(img/start_back.png);
	background-size: contain 110%;
	background-position: top right -150px;

	height: 100%;
	width: 100%;

	min-height: 1000px;
}

.start_title {
	margin-top: 3em;

	height: 100%;
	width: 100%;
}

.startmenu_item {

	height: 100%;
	width: 100%;
}

.start_bt {
	margin-top: 2em;
	width: 100%;
	max-width: 10em;
	margin-left: 30%;
	font-size: 1.2em;
	opacity: 0.93;
}

#maincontents {
	/*	background-color: #c2e26c;*/
	margin-left: auto;
	margin-right: auto;

	height: 100%;
	width: 100%;
	max-width: 600px;
}

.status_tb {
	margin-left: 2rem;
}

.modal-title {
	font-size: 150%;
}

.info_icon {
	font-size: 65%;
	margin-top: 1rem;
	text-align: center;
	vertical-align: middle;
}

.grow_p {
	text-indent: 2rem;
}

body {
	overflow: hidden;
}

div {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

h1 {
	font-size: 100%;
	margin-top: 0;
}

@keyframes roulette {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(180deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


h1 {
	text-align: center;
}

#roulette {
	/* --blue: #8BB8D6;
	--pink: #FA6E59;
	--orange: #F8A055; */
	/* --ban1-color: #f8e86b;
	--ban2-color: #72d3c6;
	--ban3-color: #5dc4f0;
	--ban4-color: #b189f0; */
	--ban5-color: var(--ban1-color);
	--ban6-color: var(--ban2-color);
	--ban7-color: var(--ban3-color);
	--ban8-color: var(--ban4-color);

	--ban-size: 300px;
	--ban-teihen-width: 108px;
	--animate-dura: 1.2s;
	/* */
	width: 100%;
	margin: 0 auto;
}

/* ルーレットのボタン */
.act-start {
	display: block;
	margin-bottom: 40px;
	margin-right: auto;
	margin-left: auto;
	width: calc(var(--ban-size) * 0.7);
	height: 1.8em;
	border-radius: 0.25em;
	padding: 20px;
	background: var(--orange);
	animation: roulettebtn 0.5s ease-in infinite;
	animation-play-state: paused;
}

.start_btn:checked+.act-start {
	animation-play-state: running;
}

.act-start span,
.start_btn+.act-start span:before {
	display: block;
	width: 100%;
	height: 100%;

}

.start_btn {
	display: none;
}

.start_btn+.act-start span:before {
	content: "スタート！";
	line-height: 1.8em;
	vertical-align: middle;
	text-align: center;
}

.start_btn:checked+.act-start span:before {
	content: "ストップ！";
}


#roulette .rltt-body {
	position: relative;
	width: var(--ban-size);
	margin-right: auto;
	margin-left: auto;
}

#roulette .item-text {
	display: block;
	margin-bottom: 40px;
	margin-right: auto;
	margin-left: auto;
	height: 1.1em;
	border-radius: 0.25em;
	padding: 5px;
	right: 0;
	left: 0;
	font-size: 4em;
	text-align: center;
	line-height: 0.95em;
	font-weight: bold;
	color: #d6ca85;
	text-shadow: 0.02em 0.02em 0.02em rgba(0, 0, 0, 1);
}

/* ルーレットの針 */
#roulette .hari {
	position: absolute;
	margin-right: auto;
	margin-left: auto;
	right: 0;
	left: 0;
	top: -15px;
	bottom: 0;
	z-index: 10;
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 40px solid rgb(255, 184, 32);
}

#roulette .rltt {
	position: relative;
	width: var(--ban-size);
	height: var(--ban-size);
	overflow: hidden;
	background: #fff;
	border-radius: var(--ban-size);
}

#roulette .rltt .ban,
#roulette .rltt .labelgroup {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: var(--ban-size);
	/* width: var(--ban-teihen-width); */
}

#roulette .rltt .ban:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	/* border-left: calc(var(--ban-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban-teihen-width) / 2) solid transparent;
	border-top: calc(var(--ban-size) / 2) solid var(--pink); */
}

#roulette .rltt .ban:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
}

/* 追加 */

.rban1:before {
	border-left: calc(var(--ban1-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban1-teihen-width) / 2) solid transparent;
	border-top: calc(var(--ban-size) / 2) solid var(--ban1-color);
}

.rban1:after {
	border-left: calc(var(--ban1-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban1-teihen-width) / 2) solid transparent;
	border-bottom: calc(var(--ban-size) / 2) solid var(--ban1-color);
}

.rban1 {
	width: var(--ban1-teihen-width);
}

.rban2:before {
	border-left: calc(var(--ban2-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban2-teihen-width) / 2) solid transparent;
	border-top: calc(var(--ban-size) / 2) solid var(--ban2-color);
}

.rban2:after {
	border-left: calc(var(--ban2-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban2-teihen-width) / 2) solid transparent;
	border-bottom: calc(var(--ban-size) / 2) solid var(--ban2-color);
}

.rban2 {
	width: var(--ban2-teihen-width);
}

.rban3:before {
	border-left: calc(var(--ban3-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban3-teihen-width) / 2) solid transparent;
	border-top: calc(var(--ban-size) / 2) solid var(--ban3-color);
}

.rban3:after {
	border-left: calc(var(--ban3-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban3-teihen-width) / 2) solid transparent;
	border-bottom: calc(var(--ban-size) / 2) solid var(--ban3-color);
}

.rban3 {
	width: var(--ban3-teihen-width);
}

.rban4:before {
	border-left: calc(var(--ban4-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban4-teihen-width) / 2) solid transparent;
	border-top: calc(var(--ban-size) / 2) solid var(--ban4-color);
}

.rban4:after {
	border-left: calc(var(--ban4-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban4-teihen-width) / 2) solid transparent;
	border-bottom: calc(var(--ban-size) / 2) solid var(--ban4-color);
}

.rban4 {
	width: var(--ban4-teihen-width);
}

.rban5:before {
	border-left: calc(var(--ban5-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban5-teihen-width) / 2) solid transparent;
	border-top: calc(var(--ban-size) / 2) solid var(--ban5-color);
}

.rban5:after {
	border-left: calc(var(--ban5-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban5-teihen-width) / 2) solid transparent;
	border-bottom: calc(var(--ban-size) / 2) solid var(--ban5-color);
}

.rban5 {
	width: var(--ban5-teihen-width);
}

.rban6:before {
	border-left: calc(var(--ban6-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban6-teihen-width) / 2) solid transparent;
	border-top: calc(var(--ban-size) / 2) solid var(--ban6-color);
}

.rban6:after {
	border-left: calc(var(--ban6-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban6-teihen-width) / 2) solid transparent;
	border-bottom: calc(var(--ban-size) / 2) solid var(--ban6-color);
}

.rban6 {
	width: var(--ban6-teihen-width);
}

.rban7:before {
	border-left: calc(var(--ban7-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban7-teihen-width) / 2) solid transparent;
	border-top: calc(var(--ban-size) / 2) solid var(--ban7-color);
}

.rban7:after {
	border-left: calc(var(--ban7-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban7-teihen-width) / 2) solid transparent;
	border-bottom: calc(var(--ban-size) / 2) solid var(--ban7-color);
}

.rban7 {
	width: var(--ban7-teihen-width);
}

.rban8:before {
	border-left: calc(var(--ban8-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban8-teihen-width) / 2) solid transparent;
	border-top: calc(var(--ban-size) / 2) solid var(--ban8-color);
}

.rban8:after {
	border-left: calc(var(--ban8-teihen-width) / 2) solid transparent;
	border-right: calc(var(--ban8-teihen-width) / 2) solid transparent;
	border-bottom: calc(var(--ban-size) / 2) solid var(--ban8-color);
}

.rban8 {
	width: var(--ban8-teihen-width);
}


/* 回転させる */
.rban1:nth-child(1) {
	transform: rotate(var(--ban1-deg));
}

.rban2:nth-child(2) {
	/* transform: rotate(30deg); */
	transform: rotate(var(--ban2-deg));
}

.rban3:nth-child(3) {
	transform: rotate(var(--ban3-deg));
}

.rban4:nth-child(4) {
	transform: rotate(var(--ban4-deg));
}

.rban5:nth-child(5) {
	transform: rotate(var(--ban5-deg));
}

.rban6:nth-child(6) {
	transform: rotate(var(--ban6-deg));
}

.rban7:nth-child(7) {
	transform: rotate(var(--ban7-deg));
}

.rban8:nth-child(8) {
	transform: rotate(var(--ban8-deg));
}