@charset "utf-8";

/*

************************************************************************

 ボックス

************************************************************************

*/

.grid

{

	display: flex;

	flex-wrap: wrap;

	margin:0 -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;}

.grid > *.col-shrink{flex:0 1 auto;}

.grid > *.col-grow{flex:1 0 auto;}


.block-position {
	position: absolute;
}

.block-center {
	left: 50%;
	transform: translateX(-50%);
}


.block-middle {
	top: 50%;
	transform: translateY(-50%);
}





/* ################################################################################################ */

/* ## TAB                        ################################################################## */

/* ################################################################################################ */

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

}



/* ################################################################################################ */

/* ## スマホサイト用スタイル ###################################################################### */

/* ################################################################################################ */

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

	.grid {

	}
	.grid.no-margin,
	.grid.sp-no-margin {
		margin-left: 0;
		margin-right: 0;
	}

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




	.block-middle {

	}
}