/******************************************************************************
******************************************************************************
** 
** utility.css¤Ë¤ª¤¤¤Æ
** -- align¤Ç¤Ïtext-align¤ÎCSSÖ¸¶¨
** -- color¤Ç¤ÏÎÄ×ÖÉ«¤ÎCSSÖ¸¶¨
** -- clear¤Ç¤Ï¥°¥í©`¥Ð¥ë¥Ê¥Ó¤ÎCSSÖ¸¶¨
** -- flex¤Ç¤Ï¥ì¥¤¥¢¥¦¥ÈÓÃ¤ÎCSSÖ¸¶¨
** -- img¤Ç¤Ï»­Ïñ¥¹¥¿¥¤¥ë¤ÎCSSÖ¸¶¨
** -- margin¤Ç¤Ïmargin¤ÎCSSÖ¸¶¨
** -- table¤Ç¤Ï±í¤ÎCSSÖ¸¶¨
** -- ul,ol¤Ç¤Ï¥ê¥¹¥È¤ÎCSSÖ¸¶¨
** -- width¤Ç¤Ïwidth¤ÎCSSÖ¸¶¨
**
** ×¢ÒâÊÂí—
** -- CSS¤ÎÃüÃûÒŽ„t¤ÏBEM¤Ë»ùœÊ¤·¤Ä¤Ä¥ª¥ê¥¸¥Ê¥ë¤ÎÃüÃûÒŽ„t¤ò’ñÓÃ¤·¤Æ¤¤¤Þ¤¹¡£
** -- ³õÆÚ¥Õ¥©¥ó¥È¥µ¥¤¥º¤Ïreset.css¤Ë¤Æ10px¤Ë¥ê¥»¥Ã¥È¤·¤Æ¤¤¤Þ¤¹¡£
**    Ö¸¶¨¤Ï»ù±¾[ rem ]Ö¸¶¨¡£
**    Àý 16px = 1.6rem
** -- ÐÐég¤Ï1¤Ë¥ê¥»¥Ã¥È¤·¤Æ¤¤¤Þ¤¹¡£
**    ÏÁ¤¤¤ÈÅÐ¶Ï¤·¤¿ˆöºÏ [ 1.4 ] ¤ò»ù±¾Ö¸¶¨¤·¤Æ¤¯¤À¤µ¤¤¡£
**    …gÎ»¤Ï²»Òª¤Ç¤¹¡£(¥¹¥¿¥¤¥ë±À¤ì¤¹¤ë¿ÉÄÜÐÔÓÐ)
** 
******************************************************************************
******************************************************************************/

/*-------------------------------------------------------------------------------------------------------
*********************************************************************************************************
*********************************************************************************************************
******
****** ¹²Í¨¥¹¥¿¥¤¥ë
******
*********************************************************************************************************
*********************************************************************************************************
-------------------------------------------------------------------------------------------------------*/

/* ==== align === */
.align-center { text-align:center!important; }
.align-left { text-align:left!important; }
.align-right { text-align:right!important; }

/* ==== box === */
.box_border-color-black,
.box_border-color-blue,
.box_border-color-gray,
.box_border-color-green,
.box_border-color-orange,
.box_border-color-red{
	color: rgba(255,255,255,1);
	padding:10px;
	border-style: solid;
	border-width: 1px;
}
.box_border-color-black {
	background-color: rgba(17,17,17,0.8);
	border-color: rgba(17,17,17,1);
}
.box_border-color-blue {
	background-color: rgba(89,102,221,0.8);
	border-color: rgba(89,102,221,1);
}
.box_border-color-gray {
	background-color: rgba(153,153,153,0.4);
	border-color: rgba(153,153,153,1);
	color: rgba(17,17,17,1);
}
.box_border-color-green {
	background-color: rgba(85,189,55,0.8);
	border-color: rgba(85,189,55,1);
}
.box_border-color-orange {
	background-color: rgba(220,150,30,0.8);
	border-color: rgba(220,150,30,1);
}
.box_border-color-red {
	background-color: rgba(210,94,94,0.8);
	border-color: rgba(210,94,94,1);
}
.box_radius{
	border-radius: 8px;
}

/* ==== button === */

.btn_brick-color-black,
.btn_brick-color-blue,
.btn_brick-color-gray,
.btn_brick-color-green,
.btn_brick-color-orange,
.btn_brick-color-red,
.btn_ghost-color-black,
.btn_ghost-color-blue,
.btn_ghost-color-gray,
.btn_ghost-color-green,
.btn_ghost-color-orange,
.btn_ghost-color-red {
	border-radius: 4px;
	display: flex;
	font-weight: bold;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	height: 2.6em;
	line-height: 1.1;
	position: relative;
	text-align: center;
}
.btn_brick-color-black{
	background-color: rgba(17,17,17,0.9);
	color: rgba(255,255,255,1);	
}
.btn_brick-color-black:hover{
	background-color: rgba(17,17,17,1);
	color: rgba(255,255,255,1);
}
.btn_brick-color-blue{
	background-color: rgba(89,102,221,0.9);
	color: rgba(255,255,255,1);	
}
.btn_brick-color-blue:hover{
	background-color: rgba(89,102,221,1);
	color: rgba(255,255,255,1);
}
.btn_brick-color-gray{
	background-color: rgba(153,153,153,0.4);
	color: rgba(17,17,17,1);
}
.btn_brick-color-gray:hover{
	background-color: rgba(153,153,153,0.5);
	color: rgba(17,17,17,1);
}
.btn_brick-color-green{
	background-color: rgba(85,189,55,0.9);
	color: rgba(255,255,255,1);	
}
.btn_brick-color-green:hover{
	background-color: rgba(85,189,55,1);
	color: rgba(255,255,255,1);
}
.btn_brick-color-orange{
	background-color: rgba(220,150,30,0.9);
	color: rgba(255,255,255,1);	
}
.btn_brick-color-orange:hover{
	background-color: rgba(220,150,30,1);
	color: rgba(255,255,255,1);
}
.btn_brick-color-red{
	background-color: rgba(210,94,94,0.9);
	color: rgba(255,255,255,1);	
}
.btn_brick-color-red:hover{
	background-color: rgba(210,94,94,1);
	color: rgba(255,255,255,1);
}
.btn_ghost-color-black{
	border: 1px solid rgba(17,17,17,1);
	color: rgba(17,17,17,1);	
}
.btn_ghost-color-black:hover{
	background-color: rgba(17,17,17,1);
	color: rgba(255,255,255,1);
}
.btn_ghost-color-blue{
	border: 1px solid rgba(89,102,221,1);
	color: rgba(89,102,221,1);	
}
.btn_ghost-color-blue:hover{
	background-color: rgba(89,102,221,1);
	color: rgba(255,255,255,1);
}
.btn_ghost-color-gray{
	border: 1px solid rgba(153,153,153,1);
	color: rgba(153,153,153,1);
}
.btn_ghost-color-gray:hover{
	background-color: rgba(153,153,153,1);
	color: rgba(255,255,255,1);
}
.btn_ghost-color-green{
	border: 1px solid rgba(85,189,55,1);
	color: rgba(85,189,55,1);	
}
.btn_ghost-color-green:hover{
	background-color: rgba(85,189,55,1);
	color: rgba(255,255,255,1);
}
.btn_ghost-color-orange{
	border: 1px solid rgba(220,150,30,1);
	color: rgba(220,150,30,1);	
}
.btn_ghost-color-orange:hover{
	background-color: rgba(220,150,30,1);
	color: rgba(255,255,255,1);
}
.btn_ghost-color-red{
	border: 1px solid rgba(210,94,94,1);
	color: rgba(210,94,94,1);	
}
.btn_ghost-color-red:hover{
	background-color: rgba(210,94,94,1);
	color: rgba(255,255,255,1);
}

/* ==== color === */
.color-black {
color: rgba(17,17,17,1)!important;
}
.color-blue {
color: rgba(89,102,221,1)!important;
}
.color-gray {
color: rgba(153,153,153,1);!important;
}
.color-green {
color: rgba(85,189,55,1)!important;
}
.color-orange {
color: rgba(220,150,30,1)!important;
}
.color-red {
color: rgba(210,94,94,1)!important;
}

/* ==== clear === */
.clearfix:after {
content:" ";
display:block;
clear:both;
}
.crr,.cr,.cf {
font-size:0;
line-height:0;
padding:0;
margin:0;
clear:both;
}

/* ==== font === */
.font-size-s {
font-size: 0.9em!important;
}
.font-size-xs {
font-size: 0.8em!important;
}
.font-size-xxs {
font-size: 0.7em!important;
}
.font-size-l {
font-size: 1.2em!important;
}
.font-size-xl {
font-size: 1.35em!important;
}
.font-size-xxl {
font-size: 1.5em!important;
}

/* ==== margin === */
.margin-top-0 { margin-top:0px!important; }
.margin-top-5 { margin-top:5px!important; }
.margin-top-10 { margin-top:10px!important; }
.margin-top-15 { margin-top:15px!important; }
.margin-top-20 { margin-top:20px!important; }
.margin-top-30 { margin-top:30px!important; }
.margin-top-40 { margin-top:40px!important; }
.margin-top-50 { margin-top:50px!important; }
.margin-top-60 { margin-top:60px!important; }
.margin-top-70 { margin-top:70px!important; }
.margin-top-80 { margin-top:80px!important; }
.margin-top-90 { margin-top:90px!important; }
.margin-top-100 { margin-top:100px!important; }
.margin-top-50 { margin-top:50px!important; }
.margin-right-0 { margin-right:0px!important; }
.margin-right-5 { margin-right:5px!important; }
.margin-right-10 { margin-right:10px!important; }
.margin-right-15 { margin-right:15px!important; }
.margin-right-20 { margin-right:20px!important; }
.margin-right-30 { margin-right:30px!important; }
.margin-right-40 { margin-right:40px!important; }
.margin-right-50 { margin-right:50px!important; }
.margin-right-60 { margin-right:60px!important; }
.margin-right-70 { margin-right:70px!important; }
.margin-right-80 { margin-right:80px!important; }
.margin-right-90 { margin-right:90px!important; }
.margin-right-100 { margin-right:100px!important; }
.margin-bottom-0 { margin-bottom:0px!important; }
.margin-bottom-5 { margin-bottom:5px!important; }
.margin-bottom-10 { margin-bottom:10px!important; }
.margin-bottom-15 { margin-bottom:15px!important; }
.margin-bottom-20 { margin-bottom:20px!important; }
.margin-bottom-30 { margin-bottom:30px!important; }
.margin-bottom-40 { margin-bottom:40px!important; }
.margin-bottom-50 { margin-bottom:50px!important; }
.margin-bottom-60 { margin-bottom:60px!important; }
.margin-bottom-70 { margin-bottom:70px!important; }
.margin-bottom-80 { margin-bottom:80px!important; }
.margin-bottom-90 { margin-bottom:90px!important; }
.margin-bottom-100 { margin-bottom:100px!important; }
.margin-left-0 { margin-left:0px!important; }
.margin-left-5 { margin-left:5px!important; }
.margin-left-10 { margin-left:10px!important; }
.margin-left-15 { margin-left:15px!important; }
.margin-left-20 { margin-left:20px!important; }
.margin-left-30 { margin-left:30px!important; }
.margin-left-40 { margin-left:40px!important; }
.margin-left-50 { margin-left:50px!important; }
.margin-left-60 { margin-left:60px!important; }
.margin-left-70 { margin-left:70px!important; }
.margin-left-80 { margin-left:80px!important; }
.margin-left-90 { margin-left:90px!important; }
.margin-left-100 { margin-left:100px!important; }

/* ==== table === */
table.table_border {
border-top: 1px solid #D7D7D7;
border-left: 1px solid #D7D7D7;
margin-top: 20px;
margin-bottom: 20px;
}
table.table_border td {
border-right: 1px solid #D7D7D7;
border-bottom: 1px solid #D7D7D7;
padding: 10px;
}
table.table_border th {
border-right: 1px solid #D7D7D7;
border-bottom: 1px solid #D7D7D7;
background-color: #efefef;
font-weight: bold;
padding: 10px;
text-align: center;
}
table.table_border.align-center td,
table.table_border.align-center th {
text-align: center;
}
table.table_border.align-left td,
table.table_border.align-left th {
text-align: left;
}
table.table_border.align-right td,
table.table_border.align-right th {
text-align: right;
}
table.table_underline {
margin-top: 20px;
margin-bottom: 20px;
}
table.table_underline tr {
border-bottom: 1px dotted #D7D7D7;
}
table.table_underline td {
padding: 10px 5px;
vertical-align: top;
}
table.table_underline th {
font-weight: bold;
padding: 10px 5px;
text-align: left;
vertical-align: top;
}
table.table_underline.align-center td,
table.table_underline.align-center th {
text-align: center;
}
table.table_underline.align-left td,
table.table_underline.align-left th {
text-align: left;
}
table.table_underline.align-right td,
table.table_underline.align-right th {
text-align: right;
}

/* ==== ul,ol === */
ul.list_caution {
margin: 1rem 0 1rem 1.5rem!important;
}
ul.list_caution li { 
font-size: 1.2rem;
list-style: none;
margin: 0 0 0.5rem 0!important;
position: relative;
}
ul.list_caution li:before{
content: "¡ù";
left: -1.5rem;
position: absolute;
}
ul.list_inline { margin: 1rem 0!important; }
ul.list_inline li { 
display: inline-block;
margin: 0 15px 10px 0;
}
ul.list_underline { margin: 1rem 0!important; }
ul.list_underline li {
border-bottom: 1px dotted #CCC;
list-style: none;
margin: 0 0 10px 0;
padding-bottom: 10px;
}

ol.list_caution { margin: 1rem 0 1rem 3.2rem!important; }
ol.list_caution li { 
font-size: 1.2rem;
margin: 0 0 0.5rem 0!important;
position: relative;
}
ol.list_caution li:before{
content: "¡ù";
left: -3.2rem;
position: absolute;
}
ol.list_inline {
	display: flex;
	flex-wrap: wrap;
	margin: 1rem 0 1rem 1.3rem!important;
}
ol.list_inline li { 
margin: 0 2.5em 10px 0;
}
ol.list_underline { margin: 1rem 0 1rem 1.5rem!important; }
ol.list_underline li {
margin-bottom: 10px;
padding-bottom: 10px;
position: relative;
}
ol.list_underline li:first-child {
padding-top: 0;
}
ol.list_underline li:after {
border-bottom: 1px dotted #CCC;
bottom: 0;
content: "";
left: -1.5em;
right: 0;
position: absolute;
}


/*-------------------------------------------------------------------------------------------------------
*********************************************************************************************************
*********************************************************************************************************
******
****** PC¥¹¥¿¥¤¥ë
******
*********************************************************************************************************
*********************************************************************************************************
-------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 781px) {

/* ==== display === */
.sp-display-none{ display: none; }

/* ==== flexbox === */
.flexbox{
display: flex;
justify-content: space-between;
}
.flexbox-wrap{
flex-wrap: wrap;
}
.flexbox-align-center{
align-items: center;
}
.flexbox-justify-center{
justify-content: center;
}

.flexbox_col-2,
.flexbox_col-3,
.flexbox_col-4,
.flexbox_col-5,
.flexbox_col-6,
.flexbox_col-7,
.flexbox_col-8,
.flexbox_col-9,
.flexbox_col-10{ 
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin-top: 1em;
}

ul[class^="flexbox_col-"]{
	margin: 1em 0 0 0!important;
}
ul[class^="flexbox_col-"] li{
	list-style: none;
}

.flexbox_col-2 > * {
margin: 0 2em 2em 0!important;
}

.flexbox_col-3 > *,
.flexbox_col-4 > *,
.flexbox_col-5 > *,
.flexbox_col-5 > *,
.flexbox_col-6 > *,
.flexbox_col-7 > *,
.flexbox_col-8 > *,
.flexbox_col-9 > *,
.flexbox_col-10 > * { 
margin: 0 1em 1em 0!important;
}

.flexbox_col-2 > *:nth-child(2n),
.flexbox_col-3 > *:nth-child(3n),
.flexbox_col-4 > *:nth-child(4n),
.flexbox_col-5 > *:nth-child(5n),
.flexbox_col-6 > *:nth-child(6n),
.flexbox_col-7 > *:nth-child(7n),
.flexbox_col-8 > *:nth-child(8n),
.flexbox_col-9 > *:nth-child(9n),
.flexbox_col-10 > *:nth-child(10n){
margin-right: 0!important;
}
.flexbox_col-2 > * { 
width: calc( (100% - 2em) / 2);
}

.flexbox_col-3 > * { 
width: calc( (100% - 2em) / 3);
}
.flexbox_col-4 > * { 
width: calc( (100% - 3em) / 4);
}
.flexbox_col-5 > * { 
width: calc( (100% - 4em) / 5);
}
.flexbox_col-6 > * { 
width: calc( (100% - 5em) / 6);
}
.flexbox_col-7 > * { 
width: calc( (100% - 6em) / 7);
}
.flexbox_col-8 > * { 
width: calc( (100% - 7em) / 8);
}
.flexbox_col-9 > * { 
width: calc( (100% - 8em) / 9);
}
.flexbox_col-10 > * { 
width: calc( (100% - 9em) / 10);
}

/* [ IE11 Huck ] calc¤ÎÐ¡ÊýµãÇÐ¤ê’Î¤Æ²»¾ßºÏ */
*::-ms-backdrop, .flexbox_col-2 > * { width: calc( (100% - 2em - 6px ) / 2);}
*::-ms-backdrop, .flexbox_col-3 > * { width: calc( (100% - 2em - 8px ) / 3);}
*::-ms-backdrop, .flexbox_col-4 > * { width: calc( (100% - 2em - 10px ) / 4);}
*::-ms-backdrop, .flexbox_col-5 > * { width: calc( (100% - 2em - 12px ) / 5);}
*::-ms-backdrop, .flexbox_col-6 > * { width: calc( (100% - 2em - 14px ) / 6);}
*::-ms-backdrop, .flexbox_col-7 > * { width: calc( (100% - 2em - 16px ) / 7);}
*::-ms-backdrop, .flexbox_col-8 > * { width: calc( (100% - 2em - 18px ) / 8);}
*::-ms-backdrop, .flexbox_col-9 > * { width: calc( (100% - 2em - 20px ) / 9);}
*::-ms-backdrop, .flexbox_col-10 > * { width: calc( (100% - 2em - 22px ) / 10);}

/* ==== float === */
.float-left { float: left; }
.float-right { float: right; }

/* ==== img === */
.img_align-center {
display: block;
margin: 1em auto;
}
.img_align-left {
float: left;
margin-bottom: 1em;
margin-right: 2em;
}
.img_align-right {
float: right;
margin-bottom: 1em;
margin-left: 2em;
}
div.img_align-center,
div.img_align-left,
div.img_align-right,
p.img_align-center,
p.img_align-left,
p.img_align-right {
font-size: 0.8em;
text-align: center;
}
div.img_align-center img,
div.img_align-right img,
div.img_align-left img,
p.img_align-center img,
p.img_align-right img,
p.img_align-left img{
margin-bottom: 0.5em;
}

/* ==== width === */
.width-1 { width: 1%!important; }
.width-2 { width: 2%!important; }
.width-3 { width: 3%!important; }
.width-4 { width: 4%!important; }
.width-5 { width: 5%!important; }
.width-6 { width: 6%!important; }
.width-7 { width: 7%!important; }
.width-8 { width: 8%!important; }
.width-9 { width: 9%!important; }
.width-10 { width: 10%!important; }
.width-11 { width: 11%!important; }
.width-12 { width: 12%!important; }
.width-13 { width: 13%!important; }
.width-14 { width: 14%!important; }
.width-15 { width: 15%!important; }
.width-16 { width: 16%!important; }
.width-17 { width: 17%!important; }

.width-18 { width: 18%!important; }
.width-19 { width: 19%!important; }
.width-20 { width: 20%!important; }
.width-21 { width: 21%!important; }
.width-22 { width: 22%!important; }
.width-23 { width: 23%!important; }
.width-24 { width: 24%!important; }
.width-25 { width: 25%!important; }
.width-26 { width: 26%!important; }
.width-27 { width: 27%!important; }
.width-28 { width: 28%!important; }
.width-29 { width: 29%!important; }
.width-30 { width: 30%!important; }
.width-31 { width: 31%!important; }
.width-32 { width: 32%!important; }
.width-33 { width: 33%!important; }
.width-34 { width: 34%!important; }
.width-35 { width: 35%!important; }
.width-36 { width: 36%!important; }
.width-37 { width: 37%!important; }
.width-38 { width: 38%!important; }
.width-39 { width: 39%!important; }
.width-40 { width: 40%!important; }
.width-41 { width: 41%!important; }
.width-42 { width: 42%!important; }
.width-43 { width: 43%!important; }
.width-44 { width: 44%!important; }
.width-45 { width: 45%!important; }
.width-46 { width: 46%!important; }
.width-47 { width: 47%!important; }
.width-48 { width: 48%!important; }
.width-49 { width: 49%!important; }
.width-50 { width: 50%!important; }
.width-51 { width: 51%!important; }
.width-52 { width: 52%!important; }
.width-53 { width: 53%!important; }
.width-54 { width: 54%!important; }
.width-55 { width: 55%!important; }
.width-56 { width: 56%!important; }
.width-57 { width: 57%!important; }
.width-58 { width: 58%!important; }
.width-59 { width: 59%!important; }
.width-60 { width: 60%!important; }
.width-61 { width: 61%!important; }
.width-62 { width: 62%!important; }
.width-63 { width: 63%!important; }
.width-64 { width: 64%!important; }
.width-65 { width: 65%!important; }
.width-66 { width: 66%!important; }
.width-67 { width: 67%!important; }
.width-68 { width: 68%!important; }
.width-69 { width: 69%!important; }
.width-70 { width: 70%!important; }
.width-71 { width: 71%!important; }
.width-72 { width: 72%!important; }
.width-73 { width: 73%!important; }
.width-74 { width: 74%!important; }
.width-75 { width: 75%!important; }
.width-76 { width: 76%!important; }
.width-77 { width: 77%!important; }
.width-78 { width: 78%!important; }
.width-79 { width: 79%!important; }
.width-80 { width: 80%!important; }
.width-81 { width: 81%!important; }
.width-82 { width: 82%!important; }
.width-83 { width: 83%!important; }
.width-84 { width: 84%!important; }
.width-85 { width: 85%!important; }
.width-86 { width: 86%!important; }
.width-87 { width: 87%!important; }
.width-88 { width: 88%!important; }
.width-89 { width: 89%!important; }
.width-90 { width: 90%!important; }
.width-91 { width: 91%!important; }
.width-92 { width: 92%!important; }
.width-93 { width: 93%!important; }
.width-94 { width: 94%!important; }
.width-95 { width: 95%!important; }
.width-96 { width: 96%!important; }
.width-97 { width: 97%!important; }
.width-98 { width: 98%!important; }
.width-99 { width: 99%!important; }
.width-100 { width: 100%!important; }
img.width-10,
img.width-20,
img.width-30,
img.width-40,
img.width-50,
img.width-60,
img.width-70,
img.width-80,
img.width-99,
img.width-100 { height: auto; }

}


/*-------------------------------------------------------------------------------------------------------
*********************************************************************************************************
*********************************************************************************************************
******
****** SP¥¹¥¿¥¤¥ë
******
*********************************************************************************************************
*********************************************************************************************************
-------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 780px) {

/* ==== display === */
.pc-display-none{ display: none; }

/* ==== flexbox === */

.flexbox,
.flexbox_col-2 > *,
.flexbox_col-3 > *,
.flexbox_col-4 > *,
.flexbox_col-5 > *,
.flexbox_col-5 > *,
.flexbox_col-6 > *,
.flexbox_col-7 > *,
.flexbox_col-8 > *,
.flexbox_col-9 > *,
.flexbox_col-10 > * { 
margin: 1rem 0;
}

.flexbox_col-2 > *:nth-child(2n),
.flexbox_col-3 > *:nth-child(3n),
.flexbox_col-4 > *:nth-child(4n),
.flexbox_col-5 > *:nth-child(5n),
.flexbox_col-6 > *:nth-child(6n),
.flexbox_col-7 > *:nth-child(7n),
.flexbox_col-8 > *:nth-child(8n),
.flexbox_col-9 > *:nth-child(9n),
.flexbox_col-10 > *:nth-child(10n){
margin-right: 0;
}

.sp-flexbox{
display: flex;
justify-content: space-between;
}
.sp-flexbox-wrap{
flex-wrap: wrap;
}
.sp-flexbox-align-center{
align-items: center;
}
.sp-flexbox-justify-center{
justify-content: center;
}

.sp-flexbox_col-2,
.sp-flexbox_col-3,
.sp-flexbox_col-4,
.sp-flexbox_col-5,
.sp-flexbox_col-6,
.sp-flexbox_col-7,
.sp-flexbox_col-8,
.sp-flexbox_col-9,
.sp-flexbox_col-10{ 
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 1em 0;
}

.sp-flexbox_col-2 > * {
margin-right: 2em;
margin-bottom: 2em;
}

.sp-flexbox_col-3 > *,
.sp-flexbox_col-4 > *,
.sp-flexbox_col-5 > *,
.sp-flexbox_col-5 > *,
.sp-flexbox_col-6 > *,
.sp-flexbox_col-7 > *,
.sp-flexbox_col-8 > *,
.sp-flexbox_col-9 > *,
.sp-flexbox_col-10 > * { 
margin-right: 1em;
margin-bottom: 1em;
}

.sp-flexbox_col-2 > *:nth-child(2n),
.sp-flexbox_col-3 > *:nth-child(3n),
.sp-flexbox_col-4 > *:nth-child(4n),
.sp-flexbox_col-5 > *:nth-child(5n),
.sp-flexbox_col-6 > *:nth-child(6n),
.sp-flexbox_col-7 > *:nth-child(7n),
.sp-flexbox_col-8 > *:nth-child(8n),
.sp-flexbox_col-9 > *:nth-child(9n),
.sp-flexbox_col-10 > *:nth-child(10n){
margin-right: 0;
}
.sp-flexbox_col-2 > * { 
width: calc( (100% - 2.1em) / 2);
}
.sp-flexbox_col-3 > * { 
width: calc( (100% - 2em) / 3);
}
.sp-flexbox_col-4 > * { 
width: calc( (100% - 3em) / 4);
}
.sp-flexbox_col-5 > * { 
width: calc( (100% - 4em) / 5);
}
.sp-flexbox_col-6 > * { 
width: calc( (100% - 5em) / 6);
}
.sp-flexbox_col-7 > * { 
width: calc( (100% - 6em) / 7);
}
.sp-flexbox_col-8 > * { 
width: calc( (100% - 7em) / 8);
}
.sp-flexbox_col-9 > * { 
width: calc( (100% - 8em) / 9);
}
.sp-flexbox_col-10 > * { 
width: calc( (100% - 9em) / 10);
}

/* ==== float === */
.float-left,
.float-right { float: none; }
.sp-float-left { float: left!important; }
.sp-float-right { float: right!important; }

/* ==== img === */
.img_align-center,
.img_align-left,
.img_align-right {
display: block;
margin-bottom: 1em;
margin-left: auto;
margin-right: auto;
}

div.img_align-center,
div.img_align-left,
div.img_align-right,
p.img_align-center,
p.img_align-left,
p.img_align-right {
font-size: 0.8em;
margin: 1rem 0;
text-align: center;
}
div.img_align-center img,
div.img_align-right img,
div.img_align-left img,
p.img_align-center img,
p.img_align-right img,
p.img_align-left img{
margin-bottom: 0.5em;
}

.sp-img_align-center {
display: block;
margin-bottom: 1em;
margin-left: auto;
margin-right: auto;
}
.sp-img_align-left {
float: left;
margin-bottom: 1em;
margin-right: 1em;
}
.sp-img_align-right {
float: right;
margin-bottom: 1em;
margin-left: 1em;
}
div.sp-img_align-center,
div.sp-img_align-left,
div.sp-img_align-right {
font-size: 0.8em;
text-align: center;
}

/* ==== margin === */
.sp-margin-top-0 { margin-top:0px!important; }
.sp-margin-top-5 { margin-top:5px!important; }
.sp-margin-top-10 { margin-top:10px!important; }
.sp-margin-top-15 { margin-top:15px!important; }
.sp-margin-top-20 { margin-top:20px!important; }
.sp-margin-top-30 { margin-top:30px!important; }
.sp-margin-top-40 { margin-top:40px!important; }
.sp-margin-top-50 { margin-top:50px!important; }
.sp-margin-top-60 { margin-top:60px!important; }
.sp-margin-top-70 { margin-top:70px!important; }
.sp-margin-top-80 { margin-top:80px!important; }
.sp-margin-top-90 { margin-top:90px!important; }
.sp-margin-top-100 { margin-top:100px!important; }
.sp-margin-top-50 { margin-top:50px!important; }
.sp-margin-right-0 { margin-right:0px!important; }
.sp-margin-right-5 { margin-right:5px!important; }
.sp-margin-right-10 { margin-right:10px!important; }
.sp-margin-right-15 { margin-right:15px!important; }
.sp-margin-right-20 { margin-right:20px!important; }
.sp-margin-right-30 { margin-right:30px!important; }
.sp-margin-right-40 { margin-right:40px!important; }
.sp-margin-right-50 { margin-right:50px!important; }
.sp-margin-right-60 { margin-right:60px!important; }
.sp-margin-right-70 { margin-right:70px!important; }
.sp-margin-right-80 { margin-right:80px!important; }
.sp-margin-right-90 { margin-right:90px!important; }
.sp-margin-right-100 { margin-right:100px!important; }
.sp-margin-bottom-0 { margin-bottom:0px!important; }
.sp-margin-bottom-5 { margin-bottom:5px!important; }
.sp-margin-bottom-10 { margin-bottom:10px!important; }
.sp-margin-bottom-15 { margin-bottom:15px!important; }
.sp-margin-bottom-20 { margin-bottom:20px!important; }
.sp-margin-bottom-30 { margin-bottom:30px!important; }
.sp-margin-bottom-40 { margin-bottom:40px!important; }
.sp-margin-bottom-50 { margin-bottom:50px!important; }
.sp-margin-bottom-60 { margin-bottom:60px!important; }
.sp-margin-bottom-70 { margin-bottom:70px!important; }
.sp-margin-bottom-80 { margin-bottom:80px!important; }
.sp-margin-bottom-90 { margin-bottom:90px!important; }
.sp-margin-bottom-100 { margin-bottom:100px!important; }
.sp-margin-left-0 { margin-left:0px!important; }
.sp-margin-left-5 { margin-left:5px!important; }
.sp-margin-left-10 { margin-left:10px!important; }
.sp-margin-left-15 { margin-left:15px!important; }
.sp-margin-left-20 { margin-left:20px!important; }
.sp-margin-left-30 { margin-left:30px!important; }
.sp-margin-left-40 { margin-left:40px!important; }
.sp-margin-left-50 { margin-left:50px!important; }
.sp-margin-left-60 { margin-left:60px!important; }
.sp-margin-left-70 { margin-left:70px!important; }
.sp-margin-left-80 { margin-left:80px!important; }
.sp-margin-left-90 { margin-left:90px!important; }
.sp-margin-left-100 { margin-left:100px!important; }

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

/* ==== width === */
.sp-width-1 { width: 1%!important; }
.sp-width-2 { width: 2%!important; }
.sp-width-3 { width: 3%!important; }
.sp-width-4 { width: 4%!important; }
.sp-width-5 { width: 5%!important; }
.sp-width-6 { width: 6%!important; }
.sp-width-7 { width: 7%!important; }
.sp-width-8 { width: 8%!important; }
.sp-width-9 { width: 9%!important; }
.sp-width-10 { width: 10%!important; }
.sp-width-11 { width: 11%!important; }
.sp-width-12 { width: 12%!important; }
.sp-width-13 { width: 13%!important; }
.sp-width-14 { width: 14%!important; }
.sp-width-15 { width: 15%!important; }
.sp-width-16 { width: 16%!important; }
.sp-width-17 { width: 17%!important; }
.sp-width-18 { width: 18%!important; }
.sp-width-19 { width: 19%!important; }
.sp-width-20 { width: 20%!important; }
.sp-width-21 { width: 21%!important; }
.sp-width-22 { width: 22%!important; }
.sp-width-23 { width: 23%!important; }
.sp-width-24 { width: 24%!important; }
.sp-width-25 { width: 25%!important; }
.sp-width-26 { width: 26%!important; }
.sp-width-27 { width: 27%!important; }
.sp-width-28 { width: 28%!important; }
.sp-width-29 { width: 29%!important; }
.sp-width-30 { width: 30%!important; }
.sp-width-31 { width: 31%!important; }
.sp-width-32 { width: 32%!important; }
.sp-width-33 { width: 33%!important; }
.sp-width-34 { width: 34%!important; }
.sp-width-35 { width: 35%!important; }
.sp-width-36 { width: 36%!important; }
.sp-width-37 { width: 37%!important; }
.sp-width-38 { width: 38%!important; }
.sp-width-39 { width: 39%!important; }
.sp-width-40 { width: 40%!important; }
.sp-width-41 { width: 41%!important; }
.sp-width-42 { width: 42%!important; }
.sp-width-43 { width: 43%!important; }
.sp-width-44 { width: 44%!important; }
.sp-width-45 { width: 45%!important; }
.sp-width-46 { width: 46%!important; }
.sp-width-47 { width: 47%!important; }
.sp-width-48 { width: 48%!important; }
.sp-width-49 { width: 49%!important; }
.sp-width-50 { width: 50%!important; }
.sp-width-51 { width: 51%!important; }
.sp-width-52 { width: 52%!important; }
.sp-width-53 { width: 53%!important; }
.sp-width-54 { width: 54%!important; }
.sp-width-55 { width: 55%!important; }
.sp-width-56 { width: 56%!important; }
.sp-width-57 { width: 57%!important; }
.sp-width-58 { width: 58%!important; }
.sp-width-59 { width: 59%!important; }
.sp-width-60 { width: 60%!important; }
.sp-width-61 { width: 61%!important; }
.sp-width-62 { width: 62%!important; }
.sp-width-63 { width: 63%!important; }
.sp-width-64 { width: 64%!important; }
.sp-width-65 { width: 65%!important; }
.sp-width-66 { width: 66%!important; }
.sp-width-67 { width: 67%!important; }
.sp-width-68 { width: 68%!important; }
.sp-width-69 { width: 69%!important; }
.sp-width-70 { width: 70%!important; }
.sp-width-71 { width: 71%!important; }
.sp-width-72 { width: 72%!important; }
.sp-width-73 { width: 73%!important; }
.sp-width-74 { width: 74%!important; }
.sp-width-75 { width: 75%!important; }
.sp-width-76 { width: 76%!important; }
.sp-width-77 { width: 77%!important; }
.sp-width-78 { width: 78%!important; }
.sp-width-79 { width: 79%!important; }
.sp-width-80 { width: 80%!important; }
.sp-width-81 { width: 81%!important; }
.sp-width-82 { width: 82%!important; }
.sp-width-83 { width: 83%!important; }
.sp-width-84 { width: 84%!important; }
.sp-width-85 { width: 85%!important; }
.sp-width-86 { width: 86%!important; }
.sp-width-87 { width: 87%!important; }
.sp-width-88 { width: 88%!important; }
.sp-width-89 { width: 89%!important; }
.sp-width-90 { width: 90%!important; }
.sp-width-91 { width: 91%!important; }
.sp-width-92 { width: 92%!important; }
.sp-width-93 { width: 93%!important; }
.sp-width-94 { width: 94%!important; }
.sp-width-95 { width: 95%!important; }
.sp-width-96 { width: 96%!important; }
.sp-width-97 { width: 97%!important; }
.sp-width-98 { width: 98%!important; }
.sp-width-99 { width: 99%!important; }
.sp-width-100 { width: 100%!important; }
img.sp-width-10,
img.sp-width-20,
img.sp-width-30,
img.sp-width-40,
img.sp-width-50,
img.sp-width-60,
img.sp-width-70,
img.sp-width-80,
img.sp-width-99,
img.sp-width-100 { height: auto; }
}
