* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-size:24px;
        overscroll-behavior-y: none;
}

/* flex */
.fleft{
	justify-content: flex-start;	
	-webkit-justify-content: flex-start;	
}
.fright{
	justify-content: flex-end;	
	-webkit-justify-content: flex-end;	
}
.fcenter{
	justify-content: center !important;	
	-webkit-justify-content: center !important;	
}
.fbet{
	justify-content: space-between;
	-webkit-justify-content: space-between;
}
.faround{
	justify-content: space-around !important;	
	-webkit-justify-content: space-around !important;	
}

.ftop{
	align-items: flex-start;	
	-webkit-align-items: flex-start;	
}
.fbottom{
	align-items: flex-end ;	
	-webkit-align-items: flex-end ;	
}
.fmiddle{
	align-items: center;	
	-webkit-align-items: center;	
}
.fbase{
	align-items: baseline ;	
	-webkit-align-items: baseline ;	
}
.ffix{
	align-items: stretch ;	
	-webkit-align-items: stretch ;	
}

.fatop{
	align-content: flex-start;	
	-webkit-align-content : flex-start;	
}
.fabottom{
	align-content: flex-end;	
	-webkit-align-content : flex-end;	
}
.fab{
	align-content: space-between;	
	-webkit-align-content : space-between;	
}
.faa{
	align-content: space-around;	
	-webkit-align-content : space-around;	
}
.ft{
	-webkit-align-self: flex-start;
	align-self: flex-start;
}
.fc{
	-webkit-align-self: center;
	align-self: center;
}
.fb{
	-webkit-align-self: flex-end;
	align-self: flex-end;
}
.fs{
	-webkit-align-self: stretch;
	align-self: stretch;
}
.fba{
	-webkit-align-self: baseline;
	align-self: baseline;
}
.flex_flex>*{
	flex:1 1 auto;

}
.flex_r{
	flex-flow:row-reverse;
	-webkit-flex-flow:row-reverse;
}

.flex {
	display: flex;
	display: -webkit-flex;
	flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
}
.flex_nowrap{
	display: flex;
	display: -webkit-flex;
	flex-wrap:nowrap;
	-webkit-flex-wrap:nowrap;
}
.flex_nowrap_res{
	display: flex;
	display: -webkit-flex;
	flex-wrap:nowrap;
	-webkit-flex-wrap:nowrap;
}
.flex_nowrap_r{
	display: flex;
	display: -webkit-flex;
	flex-wrap:nowrap;
	-webkit-flex-wrap:nowrap;
	flex-flow:row-reverse;
	-webkit-flex-flow:row-reverse;
}
.fcol{
	-webkit-flex-direction: column;
	flex-direction: column;

}
.flex2x{
}
.flex2x>div{
}
.flex2x>div>a,.flex3x>div>a{
	width:100%;
}
.flex2x>div>a>img,.flex3x>div>a>img,.flex3x2x>div>a>img{
}
.flex2x>div>img,.flex3x>div>img,.flex3x2x>div>img{
	width:100%;
}
.flex3x{
	justify-content: space-between;
	-webkit-justify-content: space-between;
}
.flex3x>div{
	width:33% ;
	padding:10px 0;
}
.flex3x>li{
	width:33% ;
	padding:10px 0;
}
.flex3x2x>div{
	width:33% ;
	padding:10px 0;
}
.flex3x2x>li{
	width:33% ;
	padding:10px 0;
}
.fcont{
	justify-content: space-between;
	-webkit-justify-content: space-between;
}
.fcont>div:first-child{
	width:68%;
	padding:0;
}
.fcont>div:last-child{
	width:30%;
	padding:0;
}

.flist>div{
	padding:5px;
}
.flist>li{
	padding:5px;
}


/* icons */

/* アイコンのサイズを変更するためのルール */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* 明るい背景の場合に黒色でアイコンを表示するためのルール */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* 暗い背景の場合に白色でアイコンを表示するためのルール */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/*  */
.divtitle{
	font-size: 2rem;
	text-align: center;
}
.table {
	display:table;
	border-collapse:collapse;
	width:calc(100% - 10px);
	margin:5px auto;
	font-size:14px;
}
.table .row {
	display:table-row;
}
.table .cell {
	display:table-cell;
	border:#333333 1px solid;
	padding:10px 5px;
}


.container{
	width:calc(100% - 10px);
	max-width:960px;
	margin:auto;
}
input,select{
	padding: 8px 8px;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border:1px solid #cccccc;
	font-size:24px;
	background:#FFFFFF;
}
button.btn{
	width:15vh;
	height:10vh;
	margin:5px;
	padding: 8px 16px;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:3px;
	border:1px solid #cccccc;
	font-size:30px;
	background:#FFFFFF;
}

input[type="submit"],input[type="button"] {
    width: 100%;
    margin: 5px auto;
    color:#000000;
}
.btnok {
    color:red !important;
}
.txtid,.txtval{
	width:100%;
	margin:5px auto;
    text-align: center;
    font-size: 2rem;
}

#video-input{
	width:960px;
	max-width:100%;
	height:960px;
	max-height:100%;
}
#video-input video{
	width:100%;
	height:100%;
}

#video-input a{
	border:1px solid #CCCCCC;
}

#video-input span{
	font-size:48px !important;
	color:#CCCCCC !important;
}

.btn_detail{
	display:block;
	margin:5px auto;
	padding: 8px 8px;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border:1px solid #cccccc;
	font-size:24px;
	background:#FFFFFF;
	color:#2196f3;
	text-align: center;
    text-decoration: none;
}

.lblpoint {
    display: block;
    margin: 10px auto;
    border: 1px solid #999999;
    border-radius: 20px;
    text-align: center;
    width: 600px;
    max-width: 90%;
    height: 80px;
    line-height: 80px;
    font-size: 2rem;
}

@media screen and (max-width: 640px) {
	.container>.flex2x,.container>.flex3x{
		   -webkit-flex-direction: column;
	    flex-direction: column;
			align-items: center;	
		-webkit-align-items: center;	
	}
	.flex2x>div{
		   width:100% !important;
	}
	.container>.flex3x{
		width:100% !important;
		margin:0 auto;	
	}
	.container .flex3x>div{
		width:100% !important;
	}
	.container .flex3x>li{
		width:50%;
		font-size:5vw;
		padding:0;
	}
	.container .flex3x>li img{
		width:100%;
	}
	.container>.flex3x2x{
		width:100% !important;
		margin:0 auto;	
	}
	.container .flex3x2x>div{
		width:50% !important;
		font-size:5vw;
	}
	.container .flex3x2x>li{
		width:50%;
		font-size:5vw;
		padding:0;
	}
	.container .flex3x2x>li img{
		width:100%;
	}
}

.divmess{
    color:red;
}
.divmess2{
	font-size:14px;	
}

button,input[type="submit"],input[type="button"],.btn_detail{
  box-shadow: 2px 2px 0 #555555; /* 影の太さ・色 */
}
button:active,input[type="submit"]:active,input[type="button"]:active,.btn_detail:active{
  box-shadow: none;
  transform: translateY(5px);
}

.r{
	text-align:right;
}

.radio-inline__input {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}

.radio-inline__label {
	width:15vh;
	height:10vh;
	margin:5px 5px 5px 20px;
	padding: 0px;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:3px;
	border:1px solid #B54A4A;
	font-size:24px;
	text-align: center;
	line-height: 10vh;
}

.radio-inline__input:checked + .radio-inline__label {
	background: #B54A4A;
	color: #fff;
	text-shadow: 0 0 1px rgba(0,0,0,.7);
}

.radio-inline__input:focus + .radio-inline__label {
	outline-color: #4D90FE;
	outline-offset: -2px;
	outline-style: auto;
	outline-width: 5px;
}

@media (min-width: 600px) {
	#sayu {
		display: flex;
	}
	#sayu1 {
		flex-basis:70%;
	}
	#sayu2 {
		flex-basis:30%;
	}
}


.lblckok__input {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}

.lblckok__label {
    display: block;
    margin: 5px auto 5px 0px;
    padding:8px;
    border: 1px solid #CCCCCC;
    width: 90%;
    max-width: 100%;
    text-align: center;
    border-radius: 5px;
    color: #0030ff;
}

.lblckok__input:checked + .lblckok__label {
	background: #0000FF;
	color: #fff;
	text-shadow: 0 0 1px rgba(0,0,0,.7);
}


.iro1{
	background: #c9edf3;
}
.iro2{
	background: #ffe595;
}