@charset "utf-8";
/* =============================================================================
▼ 設定 > 初期・レスポンシブ
==============================================================================*/
html { font-size: 16px;} /* 初期フォントサイズ */
html, body{ height: 100%; }

* a{
	width:100%;
	height:100%;
	zoom: 1;	/* IE6以前に対応 */
}

@media screen and (max-width: 480px) {
  html { font-size: 11px !important; }
}
@media screen and (min-width: 481px) and (max-width: 640px) {
  html { font-size: 12px !important; }
}

@media screen and (max-width: 640px) {
	.table:not(.non_responsive),
	.table:not(.non_responsive) > .row,
	.table:not(.non_responsive) > .row > .cell,
	.table:not(.non_responsive) > .cell{ display: block !important; width: 100% !important; }
	.table:not(.non_responsive) > .cell+.cell{ margin-top: 1rem; }
}

@media screen and (min-width: 641px) {
  html { font-size: 16px !important; }
}

html body{ font-size: 1rem;line-height: 1.5; }

/* =============================================================================
▼ tag > form
==============================================================================*/
html body input,
html body textarea,
html body select{ font-size: 1.1rem; line-height: 1.2; margin: 2pt; padding: 2.5pt;}

/* .img_chk : 画像のラジオボタンとチェックボックスを使用 */
/*form.img_chk input[type="radio"], form.img_chk input[type="checkbox"]{display: none;}
form.img_chk input[type="radio"]+label,
form.img_chk input[type="checkbox"]+label{
	position: relative;
	display: block;
	padding: .3rem 1rem .2rem 1.8rem;
}

form.img_chk input[type="radio"]+label:before,
form.img_chk input[type="checkbox"]+label:before{
	margin: auto 0;
	display: block;
	position: absolute;
	content: '';
	width: 1.4rem;
	height: 1.4rem;
	top: 0;
	bottom: 0;
	left: 0;
	background-repeat:no-repeat;
	-moz-background-size: auto 100%;
	background-size: auto 100%;
}
form.img_chk input[type="radio"]+label:before{background-image: url("./css/images/iconmonstr-radio.png");}
form.img_chk input[type="radio"]:checked+label:before{background-image: url("./css/images/iconmonstr-radio_check.png") !important;}
form.img_chk input[type="checkbox"]+label:before{background-image: url("./css/images/iconmonstr-square.png");}
form.img_chk input[type="checkbox"]:checked+label:before{background-image: url("./css/images/iconmonstr-square_check.png") !important;}
*/

/* =============================================================================
▼ 設定 > サイズ
==============================================================================*/
/* 自動リサイズ */
img, object, embed, video{ max-width: 100%; height: auto;}

/* 横サイズパーセント */
.per5{ width: 5%;}
.per10{ width: 10%;}
.per13{ width: 13%;}
.per14{ width: 14%;}
.per20{ width: 20%;}
.per22{ width: 22%;}
.per30{ width: 30%;}
.per35{ width: 35%;}
.per40{ width: 40%;}
.per45{ width: 45%;}
.per50{ width: 50%;}
.per60{ width: 60%;}
.per70{ width: 70%;}
.per78{ width: 78%;}
.per80{ width: 80%;}
.per86{ width: 86%;}
.per87{ width: 87%;}
.per90{ width: 90%;}
.per95{ width: 95%;}
.full{ width: 100%;}


/* 文字サイズ */
.text8 { font-size: .8em; }
.text9 { font-size: .9em; }
.text10 { font-size: 1em; }
.text11 { font-size: 1.1em; }
.text12 { font-size: 1.2em; }
.text13 { font-size: 1.3em; }
.text14 { font-size: 1.4em; }
.text15 { font-size: 1.5em; }
.text16 { font-size: 1.6em; }
.text17 { font-size: 1.7em; }
.text18 { font-size: 1.8em; }
.text19 { font-size: 1.9em; }
.text20 { font-size: 2em; }
.text21 { font-size: 2.1em; }
.text22 { font-size: 2.2em; }
.text23 { font-size: 2.3em; }
.text24 { font-size: 2.4em; }
.text25 { font-size: 2.5em; }
.text26 { font-size: 2.6em; }

/* =============================================================================
▼ 設定 > リセット解除
==============================================================================*/
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

header, nav, article, aside, section, footer,
#container, #header, #wrapper, #nav, #footer{display:block;}

/* table */
table th { vertical-align: middle; }
/* =============================================================================
▼ tag > list
==============================================================================*/
p+dl, p+ol, p+ul.disc,
ul+ul, ul.disc+p, ul.disc+.table, ul+ol, ul+dl,
ol+ol, ol+p, ol+.table, ol+ul, ol+dl,
dl+dl, dl+p, dl+.table, dl+ol, dl+ul{ margin-top: 1rem; }

dl dd{ padding-left: 1.5rem; }

ol { margin: 1rem 1.5rem; }
ol li {
	margin-left: .6rem;
	padding: .5rem 0 .5rem .25rem ;
	list-style-type: decimal; /* 算用数字 */
}

/* mark */
.disc{
	list-style-type: disc !important;
	margin-left: .5rem;
	padding-left: 1.5rem;
}

/* =============================================================================
▼ tag > display
==============================================================================*/
.block{ display: block; }

.inline_b{font-size: 0 !important;letter-spacing: -1em !important;word-spacing: -1em !important;}
:root .inline_b {font-size: 0.1px;letter-spacing: -1px;word-spacing: -1px;}
.inline_b > * {
	display: inline-block !important;
	font-size: 1rem;
	letter-spacing: normal;
	word-spacing: normal;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
}


/* 疑似テーブル : .non_responsiveをつけるとテーブルのまま */
.table { margin-right: auto; margin-left: auto; display: table; }
.table.non_responsive{ display: table !important; }

.table .row{ display: table-row; }
.table.non_responsive .row{ display: table-row !important; }

.table .cell{ display: table-cell; vertical-align: top; }
.table.non_responsive .cell{ display: table-cell !important; }

.table.pad .row > .cell,
.table.pad > .cell{ padding: 2.5px 5px; }

.table .row > .cell:first-child{ padding-left: 0; }

.table.tb-fix{ table-layout: fixed;}

/* =============================================================================
▼ flex [.disp-flex]
============================================================================= */
ul.disp-flex{ list-style-type: none; }
.disp-flex {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	
	-webkit-box-pack:justify;
	-moz-box-pack:justify;
	-webkit-flex-pack:justify;
	-moz-flex-pack:justify;
	-ms-flex-pack:justify;
	-webkit-justify-content:space-between;
	-moz-justify-content:space-between;
	justify-content:space-between;
	
	-webkit-box-align: start;
	-moz-box-align: start;
	-ms-flex-align: start;
	-webkit-align-items: flex-start;
	-moz-align-items: flex-start;
	align-items: flex-start;
	
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}

/* =============================================================================
▼ tag > 配置
==============================================================================*/

.non_responsive{}

.posi-abs {position: absolute;}
.posi-rel {position: relative;}

.align-left{  margin-left: 0 !important; margin-right: auto !important; text-align:left !important; }
.align-center{ margin-left: auto !important; margin-right: auto !important; text-align:center !important; }
.align-right{ margin-left: auto !important; margin-right: 0 !important; text-align:right !important; }

/* .tableじゃなければブロック属性を付与 */
.align-left:not(.table){ display: block; }
.align-center:not(.table){ display: block; }
.align-right:not(.table){ display: block; }

.ver-top{ vertical-align: top !important; }
.ver-bottom{ vertical-align: bottom !important; }
.ver-middle{ vertical-align: middle !important; }

/* =============================================================================
▼ tag > float
==============================================================================*/
/* floatさせたいもの（または範囲）に対してfloat-left or float-right */
.float-left { float: left; display: block; }
.float-right { float: right; display: block; }

/* floatを終わらせたいところに挿入する */
.float-end { clear: both; }

/* =============================================================================
▼ tag > 装飾
==============================================================================*/
/* 背景色 */
.bg-white{background: #fff;}

/* フォント色 */
.font-red { color: red;}