body {
	box-sizing: border-box;
	margin: 0;
	background-image: url("../image/jimennhai.png");
	font-family: "myfont", sans-serif;
	user-select: none;




}

html {
	touch-action: manipulation;

}

#help2 {
	font-family: none;
	font-size: 14px;
	padding-bottom: 50px;
}

#sklkaku {
	background-color: #666666;
	max-width: 320px;
	margin: auto;
}

#sklkaku td {

	padding: 4px;
	text-align: center;
	background-color: #9cd1ff;
	color: #000000;
	font-size: 14px;
	background-size: 100%;
	border-radius: 4px;
}

@font-face {
	font-family: "myfont";
	/*任意のフォントファミリー名でOK*/
	src: url("../font/PixelMplus12-Regular.ttf") format("truetype");
	/*fontがあるパスを書いて、formatを指定*/
	font-display: swap;
	/*ダウンロード状況に応じてフォントの表示を変える
(「swap」はWebフォントが読み込まれるまでフォールバックフォントで表示し、読み込まれた時点で置き換えます。)*/
}

.ttl {
	font-size: 50px;
	font-family: "myfont", sans-serif;
	/*上で設定したフォントファミリー名*/
}

/*{
	outline: 1px solid #ff0099;
}*/
#maincon {
	margin: auto;
	padding: auto;
	width: 340px;
	background-color: rgb(255, 255, 255);
}

#qa {
	background-color: #c1ffb8;
	font-size: 20px;
	border-radius: 5px;
}

#qa2 {
	background-color: #ffb9a6;
	font-size: 20px;
	border-radius: 5px;
}

#topcon {
	margin: auto;
	padding: auto;
	text-align: center;
}

#topcon td {
	height: 24px;
	padding: 10px;
	text-align: center;
	background-image: url("../image/waku2.png");
	background-size: 100%;
	border-radius: 4px;
}

#jseki2 {
	background-color: rgb(255, 255, 255);
	padding: 10px;
	font-size: 16px;
	height: 1200px;
}

#jseki2 td {

	font-size: 12px;

}

#jseki2 a {
	background-color: rgb(255, 0, 0);
	padding: 10px;
}

#faccon {
	width: 320px;
	background-color: rgb(185, 185, 185);
	border: solid 1px#000000;
	margin: auto;
	display: flex;

}

#natoku {
	color: #3061ab;
	font-size: 20px;
	border-radius: 5px;
	width: 80px;
}

#faccon4 {
	width: 100px;

	margin: auto;
	float: left;
}

#faccon4 td {
	background-color: #c4e3ff;
	text-align: right;

}

#faccon2 {
	width: 100px;
	text-align: center;
	margin: auto;
	float: right;
}

#atlog {
	background-color: #d1defc;
}

#atlog2 {
	background-color: #adffbb;
}

#tklog {
	background-color: #ffbf36;
}

#drlog {
	background-color: #ffbf36;
}

#faccon3 {
	width: 100px;
	text-align: center;
	margin: auto;
	float: right;
}

#hatacon {
	width: 320px;

}

table,
td,
th {
	table-layout: fixed;
	border-collapse: cseparate;
	border: #000000;
	text-align: center;
}


#dispcon td,
th {
	/*border: solid 3px#877968;*/
	table-layout: fixed;


}

#ken {
	height: 30px;
	background-color: rgb(255, 88, 88);
	width: 110px;
	text-align: center;
	margin: 5px;
	border-radius: 5px;
	font-size: 20px;
}



#sir {
	height: 30px;
	background-color: rgb(255, 219, 219);
	width: 110px;
	text-align: center;
	margin: 5px;
	border-radius: 5px;
	font-size: 20px;
}

#pet {
	height: 30px;
	background-color: rgb(255, 219, 219);
	width: 110px;
	text-align: center;
	margin: 5px;
	border-radius: 5px;
	font-size: 20px;
}

#zkan2 {
	background-color: #c7c7c7;
}

#zkan2 td {
	border: solid 1px#000000;
	padding: 5px;

}

#zkan {
	height: 30px;
	background-color: rgb(255, 219, 219);
	width: 110px;
	text-align: center;
	margin: 3px;
	border-radius: 5px;
	font-size: 20px;
}

#help {
	height: 30px;
	background-color: rgb(255, 219, 219);
	width: 110px;
	text-align: center;
	margin: 3px;
	border-radius: 5px;
	font-size: 20px;
}

#zkan2 td:not(#red) {
	background-color: #cbe6ff;
}

#red {
	background-color: #ffe0e0;
}

#jseki {
	height: 30px;
	background-color: rgb(255, 219, 219);
	width: 110px;
	text-align: center;
	margin: 3px;
	border-radius: 5px;
	font-size: 20px;
}

#faccon99 {
	display: none;
	position: relative;
	z-index: 2;
}


#soubi td:not(#none, #ske) {
	background-color: #edf7ff;
	border-radius: 3px;
	padding: 5px;
}

#ksoubi [id]:not(#none, #ske) {
	background-color: #cbe6ff;
}

#petdis {
	background-color: #cbe6ff;
	display: none;
}

#bsoubi [id]:not(#none, #ske) {
	background-color: #cbe6ff;
}

#ske {
	background-color: #ffcdcd;
}

#masu td:not(#nexttd) {
	background-image: url("../image/jimen.jpg");
	background-size: cover;
	position: relative;
	border-radius: 5px;
	font-size: 14px;
	height: 60px;
	max-width: 60px;
	max-height: 60px;
	/*outline: solid 3px rgb(196, 156, 97);*/
	;
}

#idou {
	pointer-events: none;
}

#efect {
	pointer-events: none;
}

#efecy {
	pointer-events: none;
}

#idou td:not(#nexttd2) {
	border-radius: 5px;
	position: relative;
	font-size: 14px;
	height: 60px;
	max-height: 60px;
	/*outline: solid 3px rgb(196, 156, 97);*/
	;
	/*border: solid 1px#000000;*/

}

#item11 {
	background-color: #d0d0d0;
	margin: auto;
	margin-bottom: 5px;
	margin-top: 5px;
	border-radius: 5px;
	width: 300px;
	height: 130px;

}

#kentab {
	display: flex;
}



#zukantab {
	display: flex;
}

#item1 {
	margin: auto;
	background-color: #ffcfc9;
	width: 284px;
	border: solid 1px#000000;
	padding: 5px;
	font-size: 18px;
	text-align: left;
}

#item2 {
	margin: auto;
	background-color: #9cd1ff;
	width: 284px;
	border: solid 1px#000000;
	padding: 5px;
	font-size: 18px;
	font-size: 18px;
	text-align: left;
}

#masu td p:not(#nexttd) {

	position: absolute;
	/*重ねたい子要素にabsolute*/
	bottom: 0;
	right: 0;
	/*センター寄せの修正*/

	color: #fff;
	font-size: 16px;
	margin: 0 !important;
	/*文字がずれている場合や*/
	padding: 0 !important;
	/*文字が折り返される場合*/
}

#idou td p:not(#nexttd2) {

	position: absolute;
	/*重ねたい子要素にabsolute*/
	bottom: 0;
	right: 0;
	/*センター寄せの修正*/

	color: #fff;
	font-size: 16px;
	margin: 0 !important;
	/*文字がずれている場合や*/
	padding: 0 !important;
	/*文字が折り返される場合*/
}

#nexttd {
	width: 60px;
	height: 10px;
	background-color: rgb(34, 34, 34);
	color: rgb(255, 255, 255);
}

#nexttd2 {
	width: 60px;
	height: 10px;
}

th {
	background: #ff1100;
}

#dispcon {
	padding-top: 5px;
	display: flex;
	margin: auto;
	justify-content: center;
	display: none;

}

#gumazonli {
	padding: 2px;
	text-align: left;
	margin: auto;
	height: 12px;
	font-family: none;
	background-color: #000000;
	line-height: 10px;
	font-size: 10px;
	color: #FFF;
}

#stecon {
	padding-top: 5px;
	width: 120px;
}

#logcon {
	padding-top: 5px;
	width: 320px;
	display: none;
	margin: auto;
}

#logcon td {
	height: 20px;
}


#logmaincon {
	margin: 5px;
	width: 340px;
	border: solid 1px#000000;
	height: 300px;
	overflow: scroll;
}

#hako {
	display: none;
	background-color: #ffe5e5;
	min-height: 500px;
}

#hako td {
	width: 60px;
	height: 40px;
	border: solid 1px#000000;
	background-color: #ffffff;

}

#hako table {

	margin-bottom: 5px;
}

#infocon {
	padding-top: 20px;
	height: auto;
	min-height: 800px;
	margin: auto;
}

#tabcon td {
	width: 63px;


}

#entotu {
	position: absolute;
	bottom: 5px;
	left: 5px;
	width: 20px;
	height: 40px;
	background-color: #666666;
	z-index: 1;

}

#redlog {
	color: #7c1414;
}

#yellowlog {
	color: #756715;
}

details {
	background-color: #ffc0c0;
}

#kakoi22 {
	padding: 7px;
	background-color: #9cd1ff;
	border-radius: 5px;
}

#gamestart {
	height: 500px;
	text-align: center;
	background-color: #ffe7ba;
	border-radius: 10px;
	background-image: url("../image/waku3.png");
}

#skllog {
	color: #157200;
}

#gamestart td {

	background-color: #c9daff;
}

#gamestart select {
	width: 200px;

	height: 30px;
}

.start {
	border-radius: 10px;
	width: 150px;
	height: 50px;
	background-color: #ffc98c;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 50px;
	font-size: 30px;
}

#item1 {
	margin-top: 20px;
	margin-bottom: 5px;

}

#item2 {
	margin-top: 20px;
	margin-bottom: 5px;

}

select {
	font-size: 16px;
}

#tabcon td {
	height: 40px;
	background: #bbf3af;
}

#tabcon {
	margin: auto;
}

#infomaincon {
	margin: 5px;
	width: 330px;

	height: auto;
}

#syuka {
	height: 500px;
}

#syuka table {
	background-color: #9cd1ff;
	border-radius: 10px;
	margin-bottom: 10px;
}

#kaiti {
	display: none;
}

#kyouka {
	display: none;
	height: 500px;
}

#kyouka table {
	background-color: #9cd1ff;
	;
	border-radius: 10px;
	margin-bottom: 10px;
}

#soubi {
	display: none;
	background-color: #666666;
	border-radius: 10px;
	padding-top: 10px;
	padding-bottom: 20px;
	font-size: 14px;
}

#soubi table {
	width: 320px;
}

#zukan {
	display: none;
}

#zukan {
	display: none;
}

#imolist a {
	padding: 5px;
	background-color: #ffbaba;
	border-radius: 3px;
}

#klist a {
	padding: 2px;
	background-color: #ffbaba;
	border-radius: 3px;
}

#hpber2 {
	width: 320px;
	height: 5px;
	background-color: #5e0000;
	margin: auto;
	border: solid 1px#000000;
	position: relative;
	z-index: 10;
	display: none;
}

#hpber {
	margin-left: 0;
	width: 320px;
	height: 5px;
	background-color: #35c759;

	position: relative;
	z-index: 10;
}

.toggle {
	position: relative;
	width: 40px;
	height: 22px;
	margin: 10px 20px;
	user-select: none;
	cursor: pointer;
}

.toggle input[type=checkbox] {
	display: none;
}

.toggle span {
	position: absolute;
	top: 16px;
	right: -36px;
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	color: #cbcbcb;
	-webkit-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}

.autocon {
	height: 30px;
	display: none;
}



.toggle:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50px;
	display: block;
	background: #e9e9eb;
	-webkit-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}

.toggle:after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	display: block;
	border-radius: 50px;
	background: #fff;
	box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.3);
	-webkit-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}

#subeake {
	padding: 2px;
	background-color: #3061ab;
	color: #FFF;
	border-radius: 3px;
	width: 100px;
}

.toggle.checked span {
	color: #35c759;
}

.toggle.checked:before {
	background: #35c759;
}

.toggle.checked:after {
	left: 33px;
	box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.5);
}

.select-box {
	position: relative;
}

.select-box::after {
	position: absolute;
	content: '▼';
	top: 28%;
	right: 4%;
	color: #333;
	pointer-events: none;
}

.wpcf7-select {
	padding: 15px !important;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #c0c0c0;
	background-color: #fff !important;
}

#con1 {
	width: 340px;
	height: auto;
}

#con2 {
	width: 340px;
	height: auto;
	min-height: 500px;
}

#btncon {
	margin: auto;

}

@media screen and (min-width: 700px) {
	#maincon {
		width: 700px;
		display: flex;

	}

	#con1 {
		postion: -webkit-sticky;
		position: sticky;
		top: 0;
		border: solid 3px#c0c0c0;
		height: auto;
	}

	#con2 {
		width: 340px;
		height: auto;
		border: solid 3px#c0c0c0;
	}

	#logcon {
		padding-top: 200px;
	}

	#btncon {
		padding-top: 10px;
		height: 100px;

	}

	#spes {
		height: 100px;
	}


}

#none {
	border: 0px;
	height: 10px;

	background-color: none;
}