@charset "utf-8";

/* ----------------------------------------------------- */
html, body {
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	color: var(--base-font-color);
	background: var(--base-bg-color);
}

input,select{
	vertical-align: middle;
}

.l { text-align: left !important; }
.r { text-align: right !important; }
.c { text-align: center !important; }
.t { vertical-align: top !important; }
.m { vertical-align: middle !important; }
.b { vertical-align: bottom !important; }
.fl { float: left; }
.fr { float: right; }

.white	 { color: #ffffff !important; }
.black0	 { color: #000000 !important; }
.black3	 { color: #333333 !important; }
.black6	 { color: #666666 !important; }
.oran    { color: #E77512 !important; }
.ltoran  { color: #FAD6B6 !important; }
.red	 { color: #dc143c !important; }
.ltred	 { color: #FF8080 !important; }
.blue    { color: #0066CC !important; }
.yellow  { color: #FFFF00 !important; }
.ltyelw  { color: #FFFFAA !important; }
.ltblue  { color: #CCECFF !important; }
.ctsblue { color: #0E6D9C !important; }
.navy	 { color: navy !important; }
.green   { color: #006400 !important; }
.ltgreen { color: #ECFFEC !important; }
.brgreen { color: #00E339 !important; }
.gray	 { color: #999 !important; }
.ltgray  { color: #CCC !important; }
.bold	 { font-weight: bold !important; }
.fwnom	 { font-weight: normal !important; }

.bc_white   { background-color: #FFF !important; }
.bc_black   { background-color: #000 !important; }
.bc_black3  { background-color: #333 !important; }
.bc_black6  { background-color: #666 !important; }
.bc_oran    { background-color: #E77512 !important; }
.bc_ltoran  { background-color: #FAD6B6 !important; }
.bc_red     { background-color: #f30119 !important; }
.bc_ltred   { background-color: #FF8080 !important; }
.bc_yellow  { background-color: #FFFF00 !important; }
.bc_ltyelw  { background-color: #FFFFAA !important; }
.bc_blue    { background-color: #0066CC !important; }
.bc_ltblue  { background-color: #CCECFF !important; }
.bc_ctsblue { background-color: #0E6D9C !important; }
.bc_green   { background-color: #006400 !important; }
.bc_ltgreen { background-color: #ECFFEC !important; }
.bc_gray    { background-color: #999 !important; }
.bc_ltgray  { background-color: #CCC !important; }
.bc_dkgray  { background-color: #666 !important; }

/* list background-color */
.bc_gr_lt { background-color: #ECFFEC; }
.bc_gr_dk { background-color: #CCF4D2; }
.bc_pp_lt { background-color: #F3EFFF; }
.bc_pp_dk { background-color: #E7D1FA; }
.bc_ye_lt { background-color: #FFFFCC; }
.bc_ye_dk { background-color: #F7F36F; }
.bc_or_lt { background-color: #FDEDDF; }
.bc_or_dk { background-color: #F8CEA9; }

.nowr { white-space: nowrap; }
.wrap { white-space: pre-wrap; }
.dib  { display: inline-block; }
.dblk { display: block; }
.dnon { display: none; }

.curpos { cursor: pointer !important; }
.curdef { cursor: default !important; }

.bb_13 { border-bottom: 1px solid #333; }
.bb_16 { border-bottom: 1px solid #666; }
.bb_19 { border-bottom: 1px solid #999; }
.bb_1a { border-bottom: 1px solid #AAA; }
.bb_1c { border-bottom: 1px solid #CCC; }
.bb_1e { border-bottom: 1px solid #EEE; }

.bl_13 { border-left: 1px solid #333; }
.bl_16 { border-left: 1px solid #666; }
.bl_19 { border-left: 1px solid #999; }
.bl_1a { border-left: 1px solid #AAA; }
.bl_1c { border-left: 1px solid #CCC; }
.bl_1e { border-left: 1px solid #EEE; }

.scroll {
	overflow: auto;
	scrollbar-width: auto;
	scrollbar-color: #AAA #DDD;
}

.ptev_no { pointer-events: none; }

.resver { resize:vertical; }

/* ----------------------------------------------------- */
/* size                                                  */
/* ----------------------------------------------------- */
.fs10  { font-size: 1.0rem; }
.fs12  { font-size: 1.2rem; }
.fs14  { font-size: 1.4rem; }
.fs16  { font-size: 1.6rem; }
.fs18  { font-size: 1.8rem; }
.fs20  { font-size: 2.0rem; }

.mgn0  { margin: 0 !important; }
.mgn1  { margin: 1px !important; }
.mgn2  { margin: 2px !important; }
.mgn3  { margin: 3px !important; }
.mgn4  { margin: 4px !important; }
.mgn5  { margin: 5px !important; }
.mgn10 { margin: 10px !important; }
.mgn20 { margin: 20px !important; }
.mgn25 { margin: 25px !important; }
.mgn30 { margin: 30px !important; }
.mgna  { margin: auto !important; }

.mgnl0  { margin-left: 0 !important; }
.mgnl1  { margin-left: 1px !important; }
.mgnl2  { margin-left: 2px !important; }
.mgnl3  { margin-left: 3px !important; }
.mgnl4  { margin-left: 4px !important; }
.mgnl5  { margin-left: 5px !important; }
.mgnl10 { margin-left: 10px !important; }
.mgnl20 { margin-left: 20px !important; }
.mgnl25 { margin-left: 25px !important; }
.mgnl30 { margin-left: 30px !important; }
.mgnla  { margin-left: auto !important; }

.mgnr0  { margin-right: 0 !important; }
.mgnr1  { margin-right: 1px !important; }
.mgnr2  { margin-right: 2px !important; }
.mgnr3  { margin-right: 3px !important; }
.mgnr4  { margin-right: 4px !important; }
.mgnr5  { margin-right: 5px !important; }
.mgnr10 { margin-right: 10px !important; }
.mgnr20 { margin-right: 20px !important; }
.mgnr25 { margin-right: 25px !important; }
.mgnr30 { margin-right: 30px !important; }
.mgnra  { margin-right: auto !important; }

.mgnt0  { margin-top: 0 !important; }
.mgnt1  { margin-top: 1px !important; }
.mgnt2  { margin-top: 2px !important; }
.mgnt3  { margin-top: 3px !important; }
.mgnt4  { margin-top: 4px !important; }
.mgnt5  { margin-top: 5px !important; }
.mgnt10 { margin-top: 10px !important; }
.mgnt20 { margin-top: 20px !important; }
.mgnt25 { margin-top: 25px !important; }
.mgnt30 { margin-top: 30px !important; }

.mgnb0  { margin-bottom: 0 !important; }
.mgnb1  { margin-bottom: 1px !important; }
.mgnb2  { margin-bottom: 2px !important; }
.mgnb3  { margin-bottom: 3px !important; }
.mgnb4  { margin-bottom: 4px !important; }
.mgnb5  { margin-bottom: 5px !important; }
.mgnb10 { margin-bottom: 10px !important; }
.mgnb20 { margin-bottom: 20px !important; }
.mgnb25 { margin-bottom: 25px !important; }
.mgnb30 { margin-bottom: 30px !important; }

.mgnlr0  { margin-left: 0 !important; margin-right: 0 !important; }
.mgnlr1  { margin-left: 1px !important; margin-right: 1px !important; }
.mgnlr2  { margin-left: 2px !important; margin-right: 2px !important; }
.mgnlr3  { margin-left: 3px !important; margin-right: 3px !important; }
.mgnlr4  { margin-left: 4px !important; margin-right: 4px !important; }
.mgnlr5  { margin-left: 5px !important; margin-right: 5px !important; }
.mgnlr10 { margin-left: 10px !important; margin-right: 10px !important; }
.mgnlr20 { margin-left: 20px !important; margin-right: 20px !important; }
.mgnlr25 { margin-left: 25px !important; margin-right: 25px !important; }
.mgnlr30 { margin-left: 30px !important; margin-right: 30px !important; }
.mgnlra  { margin-left: auto !important; margin-right: auto !important; }

.mgntb0  { margin-top: 0 !important; margin-bottom: 0 !important; }
.mgntb1  { margin-top: 1px !important; margin-bottom: 1px !important; }
.mgntb2  { margin-top: 2px !important; margin-bottom: 2px !important; }
.mgntb3  { margin-top: 3px !important; margin-bottom: 3px !important; }
.mgntb4  { margin-top: 4px !important; margin-bottom: 4px !important; }
.mgntb5  { margin-top: 5px !important; margin-bottom: 5px !important; }
.mgntb10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.mgntb20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.mgntb25 { margin-top: 25px !important; margin-bottom: 25px !important; }
.mgntb30 { margin-top: 30px !important; margin-bottom: 30px !important; }

.pad0  { padding: 0 !important; }
.pad1  { padding: 1px !important; }
.pad2  { padding: 2px !important; }
.pad3  { padding: 3px !important; }
.pad4  { padding: 4px !important; }
.pad5  { padding: 5px !important; }
.pad10 { padding: 10px !important; }
.pad20 { padding: 20px !important; }
.pad25 { padding: 25px !important; }
.pad30 { padding: 30px !important; }

.padl0  { padding-left: 0 !important; }
.padl1  { padding-left: 1px !important; }
.padl2  { padding-left: 2px !important; }
.padl3  { padding-left: 3px !important; }
.padl4  { padding-left: 4px !important; }
.padl5  { padding-left: 5px !important; }
.padl10 { padding-left: 10px !important; }
.padl20 { padding-left: 20px !important; }
.padl25 { padding-left: 25px !important; }
.padl30 { padding-left: 30px !important; }

.padr0  { padding-right: 0 !important; }
.padr1  { padding-right: 1px !important; }
.padr2  { padding-right: 2px !important; }
.padr3  { padding-right: 3px !important; }
.padr4  { padding-right: 4px !important; }
.padr5  { padding-right: 5px !important; }
.padr10 { padding-right: 10px !important; }
.padr20 { padding-right: 20px !important; }
.padr25 { padding-right: 25px !important; }
.padr30 { padding-right: 30px !important; }

.padt0  { padding-top: 0 !important; }
.padt1  { padding-top: 1px !important; }
.padt2  { padding-top: 2px !important; }
.padt3  { padding-top: 3px !important; }
.padt4  { padding-top: 4px !important; }
.padt5  { padding-top: 5px !important; }
.padt10 { padding-top: 10px !important; }
.padt20 { padding-top: 20px !important; }
.padt25 { padding-top: 25px !important; }
.padt30 { padding-top: 30px !important; }

.padb0  { padding-bottom: 0 !important; }
.padb1  { padding-bottom: 1px !important; }
.padb2  { padding-bottom: 2px !important; }
.padb3  { padding-bottom: 3px !important; }
.padb4  { padding-bottom: 4px !important; }
.padb5  { padding-bottom: 5px !important; }
.padb10 { padding-bottom: 10px !important; }
.padb20 { padding-bottom: 20px !important; }
.padb25 { padding-bottom: 25px !important; }
.padb30 { padding-bottom: 30px !important; }

.padlr0  { padding-left: 0 !important; padding-right: 0 !important; }
.padlr1  { padding-left: 1px !important; padding-right: 1px !important; }
.padlr2  { padding-left: 2px !important; padding-right: 2px !important; }
.padlr3  { padding-left: 3px !important; padding-right: 3px !important; }
.padlr4  { padding-left: 4px !important; padding-right: 4px !important; }
.padlr5  { padding-left: 5px !important; padding-right: 5px !important; }
.padlr10 { padding-left: 10px !important; padding-right: 10px !important; }
.padlr20 { padding-left: 20px !important; padding-right: 20px !important; }
.padlr25 { padding-left: 25px !important; padding-right: 25px !important; }
.padlr30 { padding-left: 30px !important; padding-right: 30px !important; }

.padtb0  { padding-top: 0 !important; padding-bottom: 0 !important; }
.padtb1  { padding-top: 1px !important; padding-bottom: 1px !important; }
.padtb2  { padding-top: 2px !important; padding-bottom: 2px !important; }
.padtb3  { padding-top: 3px !important; padding-bottom: 3px !important; }
.padtb4  { padding-top: 4px !important; padding-bottom: 4px !important; }
.padtb5  { padding-top: 5px !important; padding-bottom: 5px !important; }
.padtb10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.padtb20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.padtb25 { padding-top: 25px !important; padding-bottom: 25px !important; }
.padtb30 { padding-top: 30px !important; padding-bottom: 30px !important; }

.wh_auto { width: auto; height: auto; }

.w10  { width: 10px; }
.w15  { width: 15px; }
.w20  { width: 20px; }
.w25  { width: 25px; }
.w30  { width: 30px; }
.w35  { width: 35px; }
.w40  { width: 40px; }
.w50  { width: 50px; }
.w75  { width: 75px; }
.w80  { width: 80px; }
.w100 { width: 100px; }
.w125 { width: 125px; }
.w150 { width: 150px; }
.w200 { width: 200px; }
.w250 { width: 250px; }
.w300 { width: 300px; }
.w320 { width: 320px; }
.w400 { width: 400px; }
.w500 { width: 500px; }
.w600 { width: 600px; }
.w640 { width: 640px; }
.w800 { width: 800px; }

.w1000 { width: 1000px; }
.w1200 { width: 1200px; }
.w1600 { width: 1600px; }
.w1900 { width: 1900px; }

.w10fix  { width: 10px !important }
.w15fix  { width: 15px !important }
.w20fix  { width: 20px !important }
.w25fix  { width: 25px !important }
.w30fix  { width: 30px !important }
.w35fix  { width: 35px !important }
.w40fix  { width: 40px !important }
.w50fix  { width: 50px !important }
.w75fix  { width: 75px !important; }
.w80fix  { width: 80px !important; }
.w100fix { width: 100px !important; }
.w125fix { width: 125px !important; }
.w150fix { width: 150px !important; }
.w200fix { width: 200px !important; }
.w250fix { width: 250px !important; }
.w300fix { width: 300px !important; }
.w320fix { width: 320px !important; }
.w400fix { width: 400px !important; }
.w500fix { width: 500px !important; }
.w600fix { width: 600px !important; }
.w640fix { width: 640px !important; }
.w800fix { width: 800px !important; }

.w320max  { max-width: 320px; }
.w400max  { max-width: 400px; }
.w500max  { max-width: 500px; }
.w600max  { max-width: 600px; }
.w640max  { max-width: 640px; }
.w800max  { max-width: 800px; }
.w1000max { max-width: 1000px; }
.w1200max { max-width: 1200px; }
.w1600max { max-width: 1600px; }
.w1900max { max-width: 1900px; }

.h10  { height: 10px; }
.h15  { height: 15px; }
.h20  { height: 20px; }
.h25  { height: 25px; }
.h30  { height: 30px; }
.h40  { height: 40px; }
.h50  { height: 50px; }
.h75  { height: 75px; }
.h80  { height: 80px; }
.h100 { height: 100px; }
.h125 { height: 1250px; }
.h150 { height: 150px; }
.h200 { height: 200px; }
.h250 { height: 250px; }
.h300 { height: 300px; }
.h320 { height: 320px; }
.h400 { height: 400px; }
.h500 { height: 500px; }
.h600 { height: 600px; }
.h640 { height: 640px; }
.h800 { height: 800px; }

.h10fix  { height: 10px !important; }
.h15fix  { height: 15px !important; }
.h20fix  { height: 20px !important; }
.h25fix  { height: 25px !important; }
.h30fix  { height: 30px !important; }
.h40fix  { height: 40px !important; }
.h50fix  { height: 50px !important; }
.h75fix  { height: 75px !important; }
.h80fix  { height: 80px !important; }
.h100fix { height: 100px !important; }
.h125fix { height: 125px !important; }
.h150fix { height: 150px !important; }
.h200fix { height: 200px !important; }
.h250fix { height: 250px !important; }
.h300fix { height: 300px !important; }
.h320fix { height: 320px !important; }
.h400fix { height: 400px !important; }
.h500fix { height: 500px !important; }
.h600fix { height: 600px !important; }
.h640fix { height: 640px !important; }
.h800fix { height: 800px !important; }

.w100p { width: 100% !important; }
.ha { height: auto; }

.h0 { display: block; height: 0; line-height: 0; overflow: hidden; }

/* ----------------------------------------------------- */
/* flex                                                  */
/* ----------------------------------------------------- */
.flex        { display: flex; }
.flex-inline { display: inline-flex; }

.flp_wrap    { flex-wrap: wrap; }
.flp_between { justify-content: space-between; }
.flp_center  { justify-content: center; }
.flp_around  { justify-content: space-around; }

.flp_top     { align-items: flex-start; }
.flp_middle  { align-items: center; }
.flp_bottom  { align-items: flex-end; }

/* ----------------------------------------------------- */
/* flat style.                                           */
/* ----------------------------------------------------- */
input, textarea, select {
	font-size: var(--font-size);
}

input.flat {
	border-radius: 2px;
	padding: 4px;
	border: 1px solid #AAA;
}
input.flat[readonly],
input.flat[readonly="readonly"] {
	background-color: #FFF;
	border: 1px solid #AAA;
}
input.flat[disabled],
input.flat[disabled="disabled"] {
	background-color: #DDD;
}
input.static {
	border: none;
}

textarea.flat {
	width: 100%;
	line-height: 1.2;
	padding: 4px !important;
	border-radius: 2px;
	border: 1px solid #AAA !important;
}

select.flat {
	border-radius: 2px;
	padding: 3px 30px 2px 4px;
	border: 1px solid #AAA;
	appearance: none;
	background-image: url(/images/common/select_arrow.svg);
	background-repeat: no-repeat;
	background-size: 24px 20px;
	background-position: right 3px center;
}
select.flat::-ms-expand { display: none; }

/* ----------------------------------------------------- */
/* radius box.                                           */
/* ----------------------------------------------------- */
.box_rad4  { border-radius: 4px; }
.box_rad6  { border-radius: 6px; }
.box_rad8  { border-radius: 8px; }
.box_rad10 { border-radius: 10px; }
.box_rad12 { border-radius: 12px; }

/* ----------------------------------------------------- */
/* button style.                                         */
/* ----------------------------------------------------- */
.btn_base, .btn_icon, .btn_blue, .btn_red, .btn_oran, .btn_yellow, .btn_green, .btn_gray, .btn_disa, .btn_txt {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
}

.btn_base, .btn_blue, .btn_red, .btn_oran, .btn_yellow, .btn_green, .btn_gray, .btn_disa {
	padding: 6px 32px;
	color: #FFF;
}

.btn_base   { background-color: var(--base-color); }
.btn_blue   { background-color: #0E6D9C; }
.btn_red    { background-color: #f30119; }
.btn_oran   { background-color: #E77512; }
.btn_yellow { background-color: #999900; }
.btn_green  { background-color: #006400; }
.btn_gray   { background-color: #666; }
.btn_disa   { background-color: #999; cursor: default; pointer-events : none; }

.btn_base i, .btn_blue i, .btn_red i, .btn_oran i, .btn_yellow i, .btn_green i, .btn_gray i, .btn_disa i { margin-left:-6px; margin-right: 5px; }
.btn_base a, .btn_blue a, .btn_red a, .btn_oran a, .btn_yellow a, .btn_green a, .btn_gray a, .btn_disa a { color: #FFF !important; }

.btn_icon {
	cursor: pointer;
	text-align: center;
	border: 1px solid #AAA;
	padding: 4px 8px;
}

.btn_txt { border:1px solid #CCC; }

.btn_base:hover, .btn_icon:hover, .btn_blue:hover, .btn_red:hover, .btn_oran:hover, .btn_yellow:hover, .btn_green:hover, .btn_gray:hover, .btn_txt:hover {
	opacity: 0.8; filter: alpha(opacity=80); ms-filter: "alpha(opacity=80)";
}
.btn_base:active, btn_icon:active, .btn_blue:active, .btn_red:active, .btn_oran:active, .btn_yellow:active, .btn_green:active, .btn_gray:active, .btn_txt:active {
	opacity: 0.9; filter: alpha(opacity=90); ms-filter: "alpha(opacity=90)";
}

/* ----------------------------------------------------- */
/* file button.                                          */
/* ----------------------------------------------------- */
.btn_file {
	overflow: hidden;
	position: relative;
	margin: 0;
}

.btn_file input[type="file"] {
	opacity: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	cursor: pointer;
}

/* ----------------------------------------------------- */
/* font awesome.                                         */
/* ----------------------------------------------------- */
i.fa {
	vertical-align: middle;
	font-size: 1.6rem;
}

/* ----------------------------------------------------- */
/* checkbox                                              */
/* （●　）                                              */
/* ----------------------------------------------------- */
.checkbox {
	display: flex;
	align-items: center;
}
.checkbox input[type="checkbox"] { display: none; }
.checkbox label {
	position: relative;
	width: 44px;
	height: 22px;
	border-radius: 20px;
	background: #a0a2a9;
	cursor: pointer;
	transition: .2s ease;
}
.checkbox label.posl { margin-right: auto; }	/* 左寄せ */
.checkbox label.posr { margin-left: auto; }		/* 右寄せ */
.checkbox input[type="checkbox"]:checked + label { background-color: var(--base-color); }
.checkbox label:before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 20px;
	width: 18px;
	height: 18px;
	background: #fff;
	transition: .2s ease;
}
.checkbox input[type="checkbox"]:checked + label:before { left: 24px; }
.checkbox input[type="checkbox"]:disabled + label { background-color: #c0c2c9; cursor: default; }

/* ----------------------------------------------------- */
/* checkbox                                              */
/* □→×                                                */
/* ----------------------------------------------------- */
input.check-x {
	appearance: none;
}

input.check-x:before {
	content: "";
	display: inline-block;
	position: relative;
	width: 16px;
	height: 16px;
	margin: 0 5px 0 0;
	background-image: none, url("/images/common/check-box.png");
	background-repeat: no-repeat, no-repeat;
}

input.check-x:checked:before {
	background-image: url("/images/common/check-x.png"), url("/images/common/check-box.png");
}

/* ----------------------------------------------------- */
/* accordion                                             */
/* ----------------------------------------------------- */
.accord_body {
	position: fixed;
	left: -100%;
	visibility: hidden;
	overflow: hidden;
	transition: .3s ease;
}

/* ----------------------------------------------------- */
/* fade in out                                           */
/* ----------------------------------------------------- */
.fade_in {
	animation: fadeIn 0.5s ease 0s 1 normal;
}

@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

.fade_out {
	animation: fadeOut 0.5s ease 0s 1 normal;
}

@keyframes fadeOut {
	0% {opacity: 1}
	100% {opacity: 0}
}

@-webkit-keyframes fadeOut {
	0% {opacity: 1}
	100% {opacity: 0}
}

/* ----------------------------------------------------- */
/* page top button
/* ----------------------------------------------------- */
#page-top {
	position: fixed;
	display: flex;
	align-items: center;
	visibility: hidden;
	bottom: 30px;
	right: 30px;
	width: 60px;
	height: 60px;
	border-radius: 4px;
	opacity: 0;
	background-color: #666;
	cursor: pointer;
}
#page-top i {
	margin: 0 auto 5px auto;
	color: #FFF;
	font-size: 64px;
}
#page-top.pt_fadein {
	visibility: visible;
	opacity: 0.6;
	transition: opacity 1s;
/*	transform: scale(1.2, 0.7); */
}
#page-top:hover {
	opacity: 1;
	transition: opacity 0s;
}

/* ----------------------------------------------------- */
/* 0px ～ 901px(920-19)
/* ----------------------------------------------------- */
@media screen and (max-width: 901px) {
}
/* ----------------------------------------------------- */
/* 0px ～ 621px(640-19)
/* ----------------------------------------------------- */
@media screen and (max-width: 621px) {
	.w640 { width: 100%; }
	.w800 { width: 100%; }

	#page-top {
		bottom: 20px;
		right: 20px;
		width: 50px;
		height: 50px;
	}
	#page-top i { font-size: 48px; }
}