@charset "utf-8";

/*
************************************************************************
* 文章レイアウト
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
.image-sq
{
	width:100%;
	padding-top:100%;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	background-color:#222222;
	background-image:url(../../img/noimage.png);
}


.grid
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
    align-content: flex-start;
    
	margin:-1.0em -1.0em -1.0em -1.0em;
}
.grid.nowrap
{
	flex-wrap: nowrap;
}
.grid.middle
{
	align-items: center;
}

.grid .col       {width:calc(100.00000% - 2.00em); margin:1.0em 1.0em; order: 1;}
.grid .col.col-1 {width:calc(  8.33333% - 2.00em); }
.grid .col.col-2 {width:calc( 16.66666% - 2.00em); }
.grid .col.col-3 {width:calc( 25.00000% - 2.00em); }
.grid .col.col-4 {width:calc( 33.33333% - 2.00em); }
.grid .col.col-5 {width:calc( 41.66666% - 2.00em); }
.grid .col.col-6 {width:calc( 50.00000% - 2.00em); }
.grid .col.col-7 {width:calc( 58.33333% - 2.00em); }
.grid .col.col-8 {width:calc( 66.66666% - 2.00em); }
.grid .col.col-9 {width:calc( 75.00000% - 2.00em); }
.grid .col.col-10{width:calc( 83.33333% - 2.00em); }
.grid .col.col-11{width:calc( 91.66666% - 2.00em); }
.grid .col.col-12{width:calc(100.00000% - 2.00em); }

.grid .col.col-auto{width:auto;}
.grid .col.col-grow{flex-grow: 1;width:1%;}

.grid .col.order
{
	order: 0;
}

.grid .col.grid       {width:calc(100.00000%); margin:0.0em 0.0em;}
.grid .col.grid.col-1 {width:calc(  8.33333%); }
.grid .col.grid.col-2 {width:calc( 16.66666%); }
.grid .col.grid.col-3 {width:calc( 25.00000%); }
.grid .col.grid.col-4 {width:calc( 33.33333%); }
.grid .col.grid.col-5 {width:calc( 41.66666%); }
.grid .col.grid.col-6 {width:calc( 50.00000%); }
.grid .col.grid.col-7 {width:calc( 58.33333%); }
.grid .col.grid.col-8 {width:calc( 66.66666%); }
.grid .col.grid.col-9 {width:calc( 75.00000%); }
.grid .col.grid.col-10{width:calc( 83.33333%); }
.grid .col.grid.col-11{width:calc( 91.66666%); }
.grid .col.grid.col-12{width:calc(100.00000%); }

.grid.input-grid            {margin:-0.50em;}
.grid.input-grid .col       {width:calc(100.00000% - 1.00em); margin:0.50em;}
.grid.input-grid .col.col-1 {width:calc(  8.33333% - 1.00em); }
.grid.input-grid .col.col-2 {width:calc( 16.66666% - 1.00em); }
.grid.input-grid .col.col-3 {width:calc( 25.00000% - 1.00em); }
.grid.input-grid .col.col-4 {width:calc( 33.33333% - 1.00em); }
.grid.input-grid .col.col-5 {width:calc( 41.66666% - 1.00em); }
.grid.input-grid .col.col-6 {width:calc( 50.00000% - 1.00em); }
.grid.input-grid .col.col-7 {width:calc( 58.33333% - 1.00em); }
.grid.input-grid .col.col-8 {width:calc( 66.66666% - 1.00em); }
.grid.input-grid .col.col-9 {width:calc( 75.00000% - 1.00em); }
.grid.input-grid .col.col-10{width:calc( 83.33333% - 1.00em); }
.grid.input-grid .col.col-11{width:calc( 91.66666% - 1.00em); }
.grid.input-grid .col.col-12{width:calc(100.00000% - 1.00em); }
.grid.input-grid .col.col-auto{width:auto;}
.grid.input-grid .col.col-grow{flex-grow: 1;width:1%;}

.linline-grid
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
    align-content: flex-start;
	align-items: center;
    
	margin:-0.25em;
}
.linline-grid.middle
{
    align-content:center;
}
.linline-grid .col
{
	width:auto;
	margin:0.25em;
}
.linline-grid .col-grow
{
	width:auto;
	margin:0.25em;
	flex-grow: 1
}

.pre
{
	white-space:pre-wrap;
}
.ellipsis
{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}



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

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	.grid .col       {width:calc(100.00000% - 2.00em); margin:1.0em 1.0em;}
	.grid .col.col-1 {width:calc(100.00000% - 2.00em); }
	.grid .col.col-2 {width:calc(100.00000% - 2.00em); }
	.grid .col.col-3 {width:calc(100.00000% - 2.00em); }
	.grid .col.col-4 {width:calc(100.00000% - 2.00em); }
	.grid .col.col-5 {width:calc(100.00000% - 2.00em); }
	.grid .col.col-6 {width:calc(100.00000% - 2.00em); }
	.grid .col.col-7 {width:calc(100.00000% - 2.00em); }
	.grid .col.col-8 {width:calc(100.00000% - 2.00em); }
	.grid .col.col-9 {width:calc(100.00000% - 2.00em); }
	.grid .col.col-10{width:calc(100.00000% - 2.00em); }
	.grid .col.col-11{width:calc(100.00000% - 2.00em); }
	.grid .col.col-12{width:calc(100.00000% - 2.00em); }

	.grid .col.grid       {margin:0.0em 0.0em;}
	.grid .col.grid.col-1 {width:calc(100.00000%); }
	.grid .col.grid.col-2 {width:calc(100.00000%); }
	.grid .col.grid.col-3 {width:calc(100.00000%); }
	.grid .col.grid.col-4 {width:calc(100.00000%); }
	.grid .col.grid.col-5 {width:calc(100.00000%); }
	.grid .col.grid.col-6 {width:calc(100.00000%); }
	.grid .col.grid.col-7 {width:calc(100.00000%); }
	.grid .col.grid.col-8 {width:calc(100.00000%); }
	.grid .col.grid.col-9 {width:calc(100.00000%); }
	.grid .col.grid.col-10{width:calc(100.00000%); }
	.grid .col.grid.col-11{width:calc(100.00000%); }
	.grid .col.grid.col-12{width:calc(100.00000%); }
	
	.grid .col.sp-col-1 {width:calc(  8.33333% - 2.00em); }
	.grid .col.sp-col-2 {width:calc( 16.66666% - 2.00em); }
	.grid .col.sp-col-3 {width:calc( 25.00000% - 2.00em); }
	.grid .col.sp-col-4 {width:calc( 33.33333% - 2.00em); }
	.grid .col.sp-col-5 {width:calc( 41.66666% - 2.00em); }
	.grid .col.sp-col-6 {width:calc( 50.00000% - 2.00em); }
	.grid .col.sp-col-7 {width:calc( 58.33333% - 2.00em); }
	.grid .col.sp-col-8 {width:calc( 66.66666% - 2.00em); }
	.grid .col.sp-col-9 {width:calc( 75.00000% - 2.00em); }
	.grid .col.sp-col-10{width:calc( 83.33333% - 2.00em); }
	.grid .col.sp-col-11{width:calc( 91.66666% - 2.00em); }
	.grid .col.sp-col-12{width:calc(100.00000% - 2.00em); }

	.grid .col.grid          {width:calc(100.00000%); margin:0.0em 0.0em;}
	.grid .col.grid.sp-col-1 {width:calc(  8.33333%); }
	.grid .col.grid.sp-col-2 {width:calc( 16.66666%); }
	.grid .col.grid.sp-col-3 {width:calc( 25.00000%); }
	.grid .col.grid.sp-col-4 {width:calc( 33.33333%); }
	.grid .col.grid.sp-col-5 {width:calc( 41.66666%); }
	.grid .col.grid.sp-col-6 {width:calc( 50.00000%); }
	.grid .col.grid.sp-col-7 {width:calc( 58.33333%); }
	.grid .col.grid.sp-col-8 {width:calc( 66.66666%); }
	.grid .col.grid.sp-col-9 {width:calc( 75.00000%); }
	.grid .col.grid.sp-col-10{width:calc( 83.33333%); }
	.grid .col.grid.sp-col-11{width:calc( 91.66666%); }
	.grid .col.grid.sp-col-12{width:calc(100.00000%); }
	
	.grid.input-grid            {margin:-0.50em;}
	.grid.input-grid .col       {width:calc(100.00000% - 1.00em); margin:0.50em;}
	.grid.input-grid .col.col-1 {width:calc(100.00000% - 1.00em); }
	.grid.input-grid .col.col-2 {width:calc(100.00000% - 1.00em); }
	.grid.input-grid .col.col-3 {width:calc(100.00000% - 1.00em); }
	.grid.input-grid .col.col-4 {width:calc(100.00000% - 1.00em); }
	.grid.input-grid .col.col-5 {width:calc(100.00000% - 1.00em); }
	.grid.input-grid .col.col-6 {width:calc(100.00000% - 1.00em); }
	.grid.input-grid .col.col-7 {width:calc(100.00000% - 1.00em); }
	.grid.input-grid .col.col-8 {width:calc(100.00000% - 1.00em); }
	.grid.input-grid .col.col-9 {width:calc(100.00000% - 1.00em); }
	.grid.input-grid .col.col-10{width:calc(100.00000% - 1.00em); }
	.grid.input-grid .col.col-11{width:calc(100.00000% - 1.00em); }
	.grid.input-grid .col.col-12{width:calc(100.00000% - 1.00em); }

	.linline-grid
	{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
	    align-content: flex-start;
		align-items: center;
	    
		margin:-0.25em;
	}
	.linline-grid .col
	{
		width:auto;
		margin:0.25em;
	}
	.linline-grid .col-grow
	{
		width:auto;
		margin:0.25em;
		flex-grow: 1
	}
}