@charset "utf-8";
/*
************************************************************************
 ボックス
************************************************************************
*/
.grid
{
	display: flex;
	flex-wrap: wrap;
	margin:-1em;
}
.grid > *
{
	margin:1em;
	flex:0 0 calc(100% - 2em);
}
.grid > *.col-01 {flex: 0 0 calc(  8.33333% - 2em);}
.grid > *.col-02 {flex: 0 0 calc( 16.66666% - 2em);}
.grid > *.col-03 {flex: 0 0 calc( 25.00000% - 2em);}
.grid > *.col-04 {flex: 0 0 calc( 33.33333% - 2em);}
.grid > *.col-05 {flex: 0 0 calc( 41.66666% - 2em);}
.grid > *.col-06 {flex: 0 0 calc( 50.00000% - 2em);}
.grid > *.col-07 {flex: 0 0 calc( 58.33333% - 2em);}
.grid > *.col-08 {flex: 0 0 calc( 66.66666% - 2em);}
.grid > *.col-09 {flex: 0 0 calc( 75.00000% - 2em);}
.grid > *.col-10 {flex: 0 0 calc( 83.33333% - 2em);}
.grid > *.col-11 {flex: 0 0 calc( 91.66666% - 2em);}
.grid > *.col-12 {flex: 0 0 calc(100.00000% - 2em);}
.grid > *.grid-center{align-self:center;}
.grid > *.order-1{order:1;}
.grid > *.order-2{order:2;}

/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1040px) {
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	.grid > *.col-01 {flex: 0 0 calc( 50.00000% - 2em);}
	.grid > *.col-02 {flex: 0 0 calc( 50.00000% - 2em);}
	.grid > *.col-03 {flex: 0 0 calc( 50.00000% - 2em);}
	.grid > *.col-04 {flex: 0 0 calc( 50.00000% - 2em);}
	.grid > *.col-05 {flex: 0 0 calc( 50.00000% - 2em);}
	.grid > *.col-06 {flex: 0 0 calc(100.00000% - 2em);}
	.grid > *.col-07 {flex: 0 0 calc(100.00000% - 2em);}
	.grid > *.col-08 {flex: 0 0 calc(100.00000% - 2em);}
	.grid > *.col-09 {flex: 0 0 calc(100.00000% - 2em);}
	.grid > *.col-10 {flex: 0 0 calc(100.00000% - 2em);}
	.grid > *.col-11 {flex: 0 0 calc(100.00000% - 2em);}
	.grid > *.col-12 {flex: 0 0 calc(100.00000% - 2em);}
	
	.grid > *.order-1{order:0;}
	.grid > *.order-2{order:0;}

	.grid > *.sp-col-01 {flex: 0 0 calc(  8.33333% - 2em);}
	.grid > *.sp-col-02 {flex: 0 0 calc( 16.66666% - 2em);}
	.grid > *.sp-col-03 {flex: 0 0 calc( 25.00000% - 2em);}
	.grid > *.sp-col-04 {flex: 0 0 calc( 33.33333% - 2em);}
	.grid > *.sp-col-05 {flex: 0 0 calc( 41.66666% - 2em);}
	.grid > *.sp-col-06 {flex: 0 0 calc( 50.00000% - 2em);}
	.grid > *.sp-col-07 {flex: 0 0 calc( 58.33333% - 2em);}
	.grid > *.sp-col-08 {flex: 0 0 calc( 66.66666% - 2em);}
	.grid > *.sp-col-09 {flex: 0 0 calc( 75.00000% - 2em);}
	.grid > *.sp-col-10 {flex: 0 0 calc( 83.33333% - 2em);}
	.grid > *.sp-col-11 {flex: 0 0 calc( 91.66666% - 2em);}
	.grid > *.sp-col-12 {flex: 0 0 calc(100.00000% - 2em);}
	
}