@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) > .row .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;}

/* form.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("./image/iconmonstr-radio.png");}
form.img_chk input[type="radio"]:checked+label:before{background-image: url("./image/iconmonstr-radio_check.png") !important;}
form.img_chk input[type="checkbox"]+label:before{background-image: url("./image/iconmonstr-square.png");}
form.img_chk input[type="checkbox"]:checked+label:before{background-image: url("./image/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%;}
.per33{ width: 33%;}
.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
==============================================================================*/
.disp-block{ display: block; }

.disp-flex{ 
	display: flex !important;
	flex-wrap: wrap;
	list-style: none;
  -webkit-align-content: space-between; /* Safari */
  align-content:         space-between;
}

.disp-flex .flex-item{ 
	flex: auto;
	height: auto;
	justify-content: space-around;
}

.inline_b_pad{display: inline-block;}

/* 隙間の無いinline-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;
}
ul.inline_b.pad > li+li{ margin-left:1em; }


/* 疑似テーブル : .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.tb-fix{ table-layout: fixed;}

/* =============================================================================
▼ 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; }


/* table-cell属性のものにのみ効く */
.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; }


@media screen and (max-width: 480px) {
	.disp-flex{ flex-direction: column; width: 100%; }
}