/*文字ｺｰﾄﾞ*/
@charset "utf-8";

@font-face {
	font-family:"font";
	src:url("../../font/Noto_Sans_JP/NotoSansJP-Regular.otf");
}

/*ﾌﾞﾗｳｻﾞが勝手に付ける枠線を無効化*/
:focus {
	outline:none;
}

/*全体*/
* {
	font-family:"font";
	font-size:14px;
	margin:0;
	padding:0;
}

/*html*/
html {
	overflow-y:scroll;
}

/*ﾎﾞﾃﾞｨ*/
body {
	color:#000000;
	background-color:#ffffff;
}

/*ﾘﾝｸ*/
a {
	color:#000000;
}

a:hover {
	color:#ff0000 !important;
}

/*ﾗｲﾝ*/
hr {
	margin:5px 0;
	border-top:1px dashed #aaaaaa;
}

/*画像*/
img {
	image-rendering:-webkit-optimize-contrast;/*画像ぼやけ対応*/
}

/*ﾃｷｽﾄ*/
input[type="text"], 
input[type="password"],
input[type="number"] {
	box-sizing:border-box;
	width:150px;
	border:1px solid #d4d4d4;
	border-radius:3px;
	padding:2px;
}

/*ｾﾚｸﾄﾎﾞｯｸｽ*/
select {
	box-sizing:border-box;
	background-color:#ffffff;
	border:1px solid #d4d4d4;
	border-radius:3px;
	padding:1px;
}

/*ﾃｷｽﾄｴﾘｱ*/
textarea {
	box-sizing:border-box;
	width:480px;
	height:120px;
	border:1px solid #d4d4d4;
	padding:3px;
}

/*ﾁｪｯｸﾎﾞｯｸｽ*/
input[type="checkbox"] {
	display:none;
}

input[type="checkbox"] + label {
	display:none;
	box-sizing:border-box;
	cursor:pointer;
	display:inline-block;
	position:relative;
	padding-left:25px;
	padding-right:10px;
}

input[type="checkbox"] + label::before {
	content:"";
	position:absolute;
	display:block;
	box-sizing:border-box;
	width:18px;
	height:18px;
	margin-top:-8px;
	left:0;
	top:50%;
	border:1px solid #d4d4d4;/*枠色*/
	background-color:#ffffff;/*背景色*/
}

input[type="checkbox"]:checked + label::after {
	content:"";
	position:absolute;
	display:block;
	box-sizing:border-box;
	width:16px;
	height:10px;
	margin-top:-9px;
	top:50%;
	left:3px;
	transform:rotate(-45deg);
	border-bottom:3px solid;
	border-left:3px solid;
	border-color:#000000;/*ﾚ色*/
}

/*ﾗｼﾞｵﾎﾞﾀﾝ*/
input[type="radio"] {
	display:none;
}

input[type="radio"] + label {
	box-sizing:border-box;
	cursor:pointer;
	display:inline-block;
	padding-left:20px;
	position:relative;
	margin-right:10px;
}

input[type="radio"] + label::before {
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:16px;
	height:16px;
	border:1px solid #999999;
	border-radius:50%;
}

input[type="radio"]:checked + label {
	color:#000000;/*選択文字色*/
}

input[type="radio"]:checked + label::after {
	content:"";
	display:block;
	position:absolute;
	top:3px;
	left:3px;
	width:12px;
	height:12px;
	border-radius:50%;
	background-color:#0000ff;/*選択●色*/
}

input[type="radio"].gray:checked + label::after {
	background-color:#808080;/*選択●色*/
}

/*ｶﾗｰﾎﾞﾀﾝ*/
.btn_gray,
.btn_red,
.btn_blue,
.btn_green,
.btn_purple,
.btn_orange {
	display:inline-block;
	box-sizing:border-box;
	font-size:14px;
	font-weight:bold;
	background-color:#ffffea;
	border-radius:30px;
	padding:3px;
	width:120px;
	text-decoration:none;
	transition:.3s;
}

.btn_gray {
	color:#555555;
	border:1px solid #ffffff;
	background-color:#ffffff;
}

.btn_red {
	color:#ff6a6a;
	border:1px solid #ff6a6a;
}

.btn_blue {
	color:#8080ff;
	border:1px solid #8080ff;
}

.btn_green {
	color:#00d400;
	border:1px solid #00d400;
}

.btn_purple {
	color:#ff55ff;
	border:1px solid #ff55ff;
}

.btn_orange {
	color:#ff8c00;
	border:1px solid #ff8c00;
}

.btn_gray:hover,
.btn_red:hover,
.btn_blue:hover,
.btn_green:hover,
.btn_purple:hover,
.btn_orange:hover {
	background-color:#ffffff;
}

/*ﾄｯﾌﾟ*/
.area_top {
	box-sizing:border-box;
	margin:0 auto;
	width:600px;
	height:50px;
	position:fixed;
	left:calc(50% - (600px / 2));
	top:0;
	padding:5px;
	background-color:#d1bf97;
	color:#ffffff;
	line-height:14px;
	z-index:501;
}

/*ﾍﾞｰｽ*/
.area_base {
	box-sizing:border-box;
	width:600px;
	margin:0 auto;
	padding:50px 0 0 0;
	margin:0 auto;
	border-right:1px solid #d4d4d4;
	border-left:1px solid #d4d4d4;
	background-color:#ffffff;
}

/*ﾛｰﾄﾞ*/
.area_load {
	width:100%;
	height:100%;
	background-color:#000000;
	opacity:0.5;
	top:0;
	left:0;
	position:fixed;
	z-index:901;
	display:none;
}

.area_load img {
	top:calc(50% - 16px);
	left:calc(50% - 16px);
	position:fixed;
	z-index:902;
}

/*ﾒｲﾝ*/
.area_main {
	box-sizing:border-box;
	padding:10px;
}

/*回り込み解除*/
.clear {
	clear:both;
}

/*ｻｸｾｽ･ｴﾗｰ*/
.top_suc,
.top_err,
.det_suc,
.det_err {
	padding:3px;
	text-align:left;
	font-weight:normal;
	border-radius:3px;
}

.top_suc {
	border:1px solid #0000ff;
	background-color:#eaeaff;
	color:#0000ff;
	margin:10px 10px 0 10px;
}

.top_err {
	border:1px solid #ff0000;
	background-color:#ffeaea;
	color:#ff0000;
	margin:10px 10px 0 10px;
}

.det_suc {
	border:1px solid #0000ff;
	background-color:#eaeaff;
	color:#0000ff;
	margin-top:3px;
}

.det_err {
	border:1px solid #ff0000;
	background-color:#ffeaea;
	color:#ff0000;
	margin-top:3px;
}

/*ﾀｲﾄﾙ*/
.title_purple, 
.title_blue,
.title_green,
.title_orange {
	margin:10px 0 5px 0;
	padding:3px;
	font-weight:bold;
}

.title_purple {
	border-left:3px solid #ff00ff;
	border-bottom:1px solid #ff00ff;
	background-color:#ffeaff;
}

.title_blue {
	border-left:3px solid #0000ff;
	border-bottom:1px solid #0000ff;
	background-color:#eaeaff;
}

.title_green {
	border-left:3px solid #008000;
	border-bottom:1px solid #008000;
	background-color:#eaffea;
}

.title_orange {
	border-left:3px solid #ff8c00;
	border-bottom:1px solid #ff8c00;
	background-color:#ffecd5;
}

/*ﾄﾗｲｱﾝｸﾞﾙ*/
.tl_red,
.tl_blue,
.tl_orange,
.br_red,
.br_blue,
.br_orange {
	box-sizing:border-box;
	position:absolute;
	height:40px;
	width:80px;
	font-size:12px;
	text-align:center;
	transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}

.tl_red {
	padding:20px 0 2px 0;
	background-color:#ff0000;
	color:#ffffff;
	left:-32px;
	top:-12px;
}

.tl_blue {
	padding:20px 0 2px 0;
	background-color:#0000ff;
	color:#ffffff;
	left:-32px;
	top:-12px;
}

.tl_orange {
	padding:20px 0 2px 0;
	background-color:#ff8c00;
	color:#ffffff;
	left:-32px;
	top:-12px;
}

.br_red {
	padding:2px 0 20px 0;
	background-color:#ff0000;
	color:#ffffff;
	right:-32px;
	bottom:-12px;
}

.br_blue {
	padding:2px 0 20px 0;
	background-color:#0000ff;
	color:#ffffff;
	right:-32px;
	bottom:-12px;
}

.br_orange {
	padding:2px 0 20px 0;
	background-color:#ff8c00;
	color:#ffffff;
	right:-32px;
	bottom:-12px;
}

/*要素背景(縦中央右配置、親にrelative指定要)*/
.box_back {
	position:absolute;
	right:15px;
	top:50%;/*要素縦も考慮*/
	transform:translateY(-50%);/*要素縦も考慮*/
	-webkit- transform:translateY(-50%);/*要素縦も考慮*/
	margin:auto;
	font-size:24px;
	color:#d4d4d4
}

/*ﾎﾞﾄﾑ*/
.area_bottom {
	box-sizing:border-box;
	margin:0 auto;
	width:600px;
	position:fixed;
	left:calc(50% - (600px / 2));
	bottom:0;
	padding:10px;
	background-color:#d1bf97;
	color:#ffffff;
	text-align:center;
	z-index:502;
}

/*ﾄｯﾌﾟへ*/
.img_totop {
	display:none;
	position:fixed;
	right:calc(50% - (600px / 2) + 20px);
	bottom:70px;
	z-index:600;
}

/*SP*/ 
@media screen and (max-width:600px) {
	.area_base,
	.area_top,
	.area_bottom {
		width:100%;
		left:0;
	}

	.img_totop {
		right:20px;
		bottom:70px;
	}
}

/*印刷*/
@media print {
	.area_top,
	.area_bottom {
		display:none;
	}
}