/* ==== align === */
.context .align-C { text-align:center!important; }
.context .align-L { text-align:left!important; }
.context .align-R { text-align:right!important; }
.context .ver-align-T { vertical-align:top!important; }
.context .ver-align-M { vertical-align:middle!important; }
.context .ver-align-M { vertical-align:bottom!important; }
/* ==== bg === */
.bg-B { background: #669ACA!important; }
.context .bg-P { background: #F189BC!important; }
.context .bg-GLY { background: #66CBCA!important; }
.context .bg-O { background: #F4A766!important; }
.context .bg-GRN { background: #66C589!important; }
.context .bg-BK { background: #333!important; }
/* ==== box === */
.context .box {
	table-layout:fixed;
	display: table;
	width: 100%;
}
.context .box > div {
	display: table-cell;
	vertical-align: top;
	padding: 0 5px;
}
.context .box > div img {
	max-width: 100%;
	height: auto;
}
.context .btn{
	background-color: #EFEFEF;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border:none;
	color: #222;
	display: block;
	font-weight: bold;
	padding: 10px;
	margin: 0 auto;
	text-align:center;
	text-decoration: none;
}
.context .btn-IB{
	background-color: #EFEFEF;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border:none;
	color: #222;
	display: inline-block;
	font-weight: bold;
	padding: 10px;
	margin: 0 auto;
	text-align:center;
	text-decoration: none;
}
/* ==== color === */
.context .color-R {
	color: #FF3333!important;
	font-weight: bold!important;
}
.context .color-O {
	color: orange!important;
	font-weight: bold!important;
}
.context .color-B {
	color: #00557f!important;
	font-weight: bold!important;
}
.context .color-BK {
	color: #333!important;
	font-weight: bold!important;
}
.context .color-G {
	color: green!important;
	font-weight: bold!important;
}
/* ==== clear === */
.clearfix:after {
	content:" ";
	display:block;
	clear:both;
}
.crr {
	font-size:0;
	line-height:0;
	padding:0;
	margin:0;
	clear:both;
}
/* ==== display === */
.context .pc-display-B { display: block; }
.context .sp-display-N { display: none; }
/* ==== dl === */
.context dl.dl-B dd {
	padding-bottom: 5px;
	border-bottom: 1px dotted #CCC;
}
/* ==== float === */
.context .float-L { float: left!important; }
.context .float-R { float: right!important; }
/* ==== font === */
.context .font-S {
	font-size: 0.9em!important;
	line-height: 1.3em;
}
.context .font-XS {
	font-size: 0.8em!important;
	line-height: 1.3em;
}
.context .font-XXS {
	font-size: 0.7em!important;
	line-height: 1.3em;
}
.context .font-L {
	font-size: 1.2em!important;
	line-height: 1.3em;
}
.context .font-XL {
	font-size: 1.35em!important;
	line-height: 1.3em;
}
.context .font-XXL {
	font-size: 1.5em!important;
	line-height: 1.3em;
}
/* ==== img === */
.context .img-C {
	display: block;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}
.context .img-L {
	float: left;
	margin-bottom: 10px;
	margin-right: 10px;
}
.context .img-R {
	float: right;
	margin-bottom: 10px;
	margin-left: 10px;
}
.context .img-L,.context .img-R {
	text-align: center;
}
/* ==== margin === */
.context .margin-T0 { margin-top:0px!important; }
.context .margin-T5 { margin-top:5px!important; }
.context .margin-T10 { margin-top:10px!important; }
.context .margin-T15 { margin-top:15px!important; }
.context .margin-T20 { margin-top:20px!important; }
.context .margin-T30 { margin-top:30px!important; }
.context .margin-T40 { margin-top:40px!important; }
.context .margin-B0 { margin-bottom:0px!important; }
.context .margin-B5 { margin-bottom:5px!important; }
.context .margin-B10 { margin-bottom:10px!important; }
.context .margin-B15 { margin-bottom:15px!important; }
.context .margin-B20 { margin-bottom:20px!important; }
.context .margin-B30 { margin-bottom:30px!important; }
.context .margin-B40 { margin-bottom:40px!important; }

/* ==== smartphone === */
.context .sp-table-area { }
/* ==== table === */
.context table.table-B {
	border:1px solid #999999;
	background:#E8FFF8;
	border-collapse:collapse
}
.context table.table-B td {
	border:1px solid #cccccc;
	padding:5px
}
.context table.table-B th {
	color:#ffffff;
	background:#007351;
	text-align:center;
	padding:5px;
	border-left:1px solid #eee;
	border-left:1px solid #eee
}
.context table.table-B tr:nth-child(odd) {
	background:#F4FFFC
}

.context table.table-D { }
.context table.table-D td { border-bottom: 1px dotted #D7D7D7; }
.context table.table-D th {
	border-bottom: 1px dotted #D7D7D7;
	text-align: left;
	font-weight: bold;
}
/* ==== ul,ol === */
.context ul.ul-B { margin-left: 0!important; }
.context ul.ul-B li {
	border-bottom: 1px dotted #CCC;
	list-style: none;
	padding-bottom: 5px;
	padding-top: 5px
}
.context ul.ul-I { margin-left: 0; }
.context ul.ul-I li { display: inline-block; }
.context ol.ol-.context li {
	border-bottom: 1px dotted #CCC;
	padding-bottom: 5px;
	padding-top: 5px;
}
/* ==== width === */
.context .width-1 { width: 10%!important; }
.context .width-2 { width: 20%!important; }
.context .width-3 { width: 30%!important; }
.context .width-4 { width: 40%!important; }
.context .width-5 { width: 50%!important; }
.context .width-6 { width: 60%!important; }
.context .width-7 { width: 70%!important; }
.context .width-8 { width: 80%!important; }
.context .width-9 { width: 90%!important; }
.context .width-10 { width: 100%!important; }

/*----------------------------------------------------------------------------
******************************************************************************
max-width: 780px
******************************************************************************
----------------------------------------------------------------------------*/
@media screen and (max-width: 780px) {
/* ==== img === */
.context .img-L,.context .img-R {
display: block;
float: none;
margin: 0 auto 10px;
}
}
/*----------------------------------------------------------------------------
******************************************************************************
max-width: 480px
******************************************************************************
----------------------------------------------------------------------------*/
@media screen and (max-width: 580px) {
/* ==== box === */
.context .box {
display: block;
}
.context .box > div {
display: block;
width: 100%;
padding:0;
margin-bottom: 10px;
}
.context .box > div:nth-last-of-type(1) {
margin-bottom: 0;
}

/* ==== display === */
.pc-display-B {
display: none;
}
.context .sp-display-N {
display: block;
}

/* ==== float === */
.context .float-L {
float: none!important;
}
.context .float-R {
float: none!important;
}

/* ==== smartphone === */
.context .sp-table-area {
 box-shadow: -3px 0 5px rgba(0, 0, 0, 0.2) inset;
 margin-bottom: 20px;
 margin-top: 20px;
 overflow: auto;
}
.context .sp-table-area table {
 margin: 0!important;
 min-width: 580px;
}

/* ==== width === */
.width-1,
.context .width-2,
.context .width-3,
.context .width-4,
.context .width-5,
.context .width-6,
.context .width-7,
.context .width-8,
.context .width-9,
.context .width-100 {
width: 100%!important;
}
}