@charset "utf-8";
/* CSS Document */


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

	目次【INDEX】
	
#####################################################################

■グリッド【row】

　＿均等カラム【row-col】

　＿分割カラム【row-col1～6】

　＿固定カラム【Box】

　＿インボックスカラム【.row-inbox】

　＿フロート解除

　＿ボックスカラム【.col-box】


■サムネール【thumbnail】

　＿サムネール【thumbnail】

　＿グリッド【.row-col】

　＿キャプション【.t_caption】

　＿サムネール【固定カラム】

　＿文字隠し【.t_hidden-full】

　＿文字隠しハーフ【.t_hidden-half】


■テーブル

　＿テーブル【table】

　＿ボーダー無し【t_no-border】

　＿セルのサイズ【t_size】

　＿セルの色【t_color】

　＿文字の左右中央揃え【t_align】


■トランジョン



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

	グリッド【row】
	
#####################################################################
*/

/*float解除指定*/.row:after { display: block; clear: both; height: 0; visibility: hidden; content: "."; font-size: 0; line-height: 0;}
/*float解除指定*/.row{ clear: both; min-height: 1px; }

.row {	
	box-sizing: border-box;
	
	display: -webkit-flex;/* Safari */
	display: flex;
	
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
}


/* ****************************************************
  均等カラム【row-col】
***************************************************** */

.row-col{ 
	display: table-cell;
    vertical-align: top;
	box-sizing: border-box;
	table-layout: fixed;
}

@media screen and (max-width : 479px){
	.row-col{
		float:none; 
		display: block;
		width: 100%;
	}
}

/* ****************************************************
  分割カラム【row-col1～6】
***************************************************** */

.row-col6,.row-col5,.row-col4,.row-col3,.row-col2,.row-col1,
.col-xs-6,.col-xs-5,.col-xs-4,.col-xs-3,.col-xs-2,.col-xs-1,
.col-sm-6,.col-sm-5,.col-sm-4,.col-sm-3,.col-sm-2,.col-sm-1,
.col-md-6,.col-md-5,.col-md-4,.col-md-3,.col-md-2,.col-md-1,
.col-lg-6,.col-lg-5,.col-lg-4,.col-lg-3,.col-lg-2,.col-lg-1{
	position:relative;
	display: table-cell;
    vertical-align: top;
	float:left;
}

/*均等カラムと混合してる場合調整*/
.row-col.col-xs-6,.row-col.col-xs-5,.row-col.col-xs-4,.row-col.col-xs-3,.row-col.col-xs-2,.row-col.col-xs-1,
.row-col.col-sm-6,.row-col.col-sm-5,.row-col.col-sm-4,.row-col.col-sm-3,.row-col.col-sm-2,.row-col.col-sm-1{
	float:inherit;
}

.row-col6{ width: 100%; }/*6カラム分幅*/
.row-col5{ width: 83.33333%; }/*5カラム分幅*/
.row-col4{ width: 66.66666%; }/*4カラム分幅*/
.row-col3{ width: 50%; }/*3カラム分幅*/
.row-col2{ width: 33.33333%; }/*2カラム分幅*/
.row-col1{ width: 16.66666%; }/*1カラム分幅*/

.col-md-6{ width: 100%; }/*6カラム分幅*/
.col-md-5{ width: 83.33333%; }/*5カラム分幅*/
.col-md-4{ width: 66.66666%; }/*4カラム分幅*/
.col-md-3{ width: 50%; }/*3カラム分幅*/
.col-md-2{ width: 33.33333%; }/*2カラム分幅*/
.col-md-1{ width: 16.66666%; }/*1カラム分幅*/

@media screen and (min-width : 2300px){
	.col-lg-6{ width: 100%; }/*6カラム分幅*/
	.col-lg-5{ width: 83.33333%; }/*5カラム分幅*/
	.col-lg-4{ width: 66.66666%; }/*4カラム分幅*/
	.col-lg-3{ width: 50%; }/*3カラム分幅*/
	.col-lg-2{ width: 33.33333%; }/*2カラム分幅*/
	.col-lg-1{ width: 16.66666%; }/*1カラム分幅*/
}

@media screen and (max-width : 1000px){
	
	.col-lg-6{ width: 100%; }/*6カラム分幅*/
	.col-lg-5{ width: 83.33333%; }/*5カラム分幅*/
	.col-lg-4{ width: 66.66666%; }/*4カラム分幅*/
	.col-lg-3{ width: 50%; }/*3カラム分幅*/
	.col-lg-2{ width: 33.33333%; }/*2カラム分幅*/
	.col-lg-1{ width: 16.66666%; }/*1カラム分幅*/
	
	.col-md-6{ width: 100%; }/*6カラム分幅*/
	.col-md-5{ width: 83.33333%; }/*5カラム分幅*/
	.col-md-4{ width: 66.66666%; }/*4カラム分幅*/
	.col-md-3{ width: 50%; }/*3カラム分幅*/
	.col-md-2{ width: 33.33333%; }/*2カラム分幅*/
	.col-md-1{ width: 16.66666%; }/*1カラム分幅*/
}


@media screen and (max-width : 767px){
	
	/*均等カラムと混合してる場合調整*/
	.row-col.col-xs-6,.row-col.col-xs-5,.row-col.col-xs-4,.row-col.col-xs-3,.row-col.col-xs-2,.row-col.col-xs-1,
	.row-col.col-sm-6,.row-col.col-sm-5,.row-col.col-sm-4,.row-col.col-sm-3,.row-col.col-sm-2,.row-col.col-sm-1{
		float: left;
	}
	
	.col-lg-6{ width: 100%; }/*6カラム分幅*/
	.col-lg-5{ width: 83.33333%; }/*5カラム分幅*/
	.col-lg-4{ width: 66.66666%; }/*4カラム分幅*/
	.col-lg-3{ width: 50%; }/*3カラム分幅*/
	.col-lg-2{ width: 33.33333%; }/*2カラム分幅*/
	.col-lg-1{ width: 16.66666%; }/*1カラム分幅*/
	
	.col-md-6{ width: 100%; }/*6カラム分幅*/
	.col-md-5{ width: 83.33333%; }/*5カラム分幅*/
	.col-md-4{ width: 66.66666%; }/*4カラム分幅*/
	.col-md-3{ width: 50%; }/*3カラム分幅*/
	.col-md-2{ width: 33.33333%; }/*2カラム分幅*/
	.col-md-1{ width: 16.66666%; }/*1カラム分幅*/
	
	.col-sm-6{ width: 100%; }/*6カラム分幅*/
	.col-sm-5{ width: 83.33333%; }/*5カラム分幅*/
	.col-sm-4{ width: 66.66666%; }/*4カラム分幅*/
	.col-sm-3{ width: 50%; }/*3カラム分幅*/
	.col-sm-2{ width: 33.33333%; }/*2カラム分幅*/
	.col-sm-1{ width: 16.66666%; }/*1カラム分幅*/
}


@media screen and (max-width : 479px){
	.row-col6,
	.row-col5,
	.row-col4,
	.row-col3,
	.row-col2,
	.row-col1{
		float:none; 
		display: block;
		width: 100%;
	}
	
	.col-xs-6,.col-xs-5,.col-xs-4,.col-xs-3,.col-xs-2,.col-xs-1,
	.col-sm-6,.col-sm-5,.col-sm-4,.col-sm-3,.col-sm-2,.col-sm-1,
	.col-md-6,.col-md-5,.col-md-4,.col-md-3,.col-md-2,.col-md-1,
	.col-lg-6,.col-lg-5,.col-lg-4,.col-lg-3,.col-lg-2,.col-lg-1{
		display: table-cell;
		float:left;
	}
	
	.col-lg-6{ width: 100%; }/*6カラム分幅*/
	.col-lg-5{ width: 83.33333%; }/*5カラム分幅*/
	.col-lg-4{ width: 66.66666%; }/*4カラム分幅*/
	.col-lg-3{ width: 50%; }/*3カラム分幅*/
	.col-lg-2{ width: 33.33333%; }/*2カラム分幅*/
	.col-lg-1{ width: 16.66666%; }/*1カラム分幅*/
	
	.col-md-6{ width: 100%; }/*6カラム分幅*/
	.col-md-5{ width: 83.33333%; }/*5カラム分幅*/
	.col-md-4{ width: 66.66666%; }/*4カラム分幅*/
	.col-md-3{ width: 50%; }/*3カラム分幅*/
	.col-md-2{ width: 33.33333%; }/*2カラム分幅*/
	.col-md-1{ width: 16.66666%; }/*1カラム分幅*/
	
	.col-sm-6{ width: 100%; }/*6カラム分幅*/
	.col-sm-5{ width: 83.33333%; }/*5カラム分幅*/
	.col-sm-4{ width: 66.66666%; }/*4カラム分幅*/
	.col-sm-3{ width: 50%; }/*3カラム分幅*/
	.col-sm-2{ width: 33.33333%; }/*2カラム分幅*/
	.col-sm-1{ width: 16.66666%; }/*1カラム分幅*/
	
	.col-xs-6{ width: 100%; }/*6カラム分幅*/
	.col-xs-5{ width: 83.33333%; }/*5カラム分幅*/
	.col-xs-4{ width: 66.66666%; }/*4カラム分幅*/
	.col-xs-3{ width: 50%; }/*3カラム分幅*/
	.col-xs-2{ width: 33.33333%; }/*2カラム分幅*/
	.col-xs-1{ width: 16.66666%; }/*1カラム分幅*/
}
/* ****************************************************
  固定カラム【Box】
***************************************************** */
.row-box{
	float: left;
}

@media screen and (max-width : 479px){
	.row-box{ width:100%; }
}

/* ****************************************************
  インボックスカラム【.row-inbox】
***************************************************** */

.row-inbox{
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
}

/*詳細設定*/
.row-inbox { margin-right:40px; }

@media screen and (max-width : 479px){
	.row-inbox{ width:100%; margin-right:0;}
}



/* ****************************************************
  フロート解除
***************************************************** */
.row-col-floatNone{ float:none;}


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

	サムネール【thumbnail】
	
#####################################################################
*/


/* ****************************************************
  サムネール【thumbnail】
***************************************************** */

.thumbnail{ 
	width:auto; 
	margin:0 -10px;/*row-colのパディング分マイナスマージン*/
}

/*サムネール設定*/
.thumbnail .thum-box{ 
	margin:10px;
	height:100%;
}
.thumbnail .thum-box a:hover{
	filter: alpha(opacity=80);
	-moz-opacity:0.8;opacity:0.8;
}

/*画像*/
.thumbnail img{ width:100%; height:auto;}

@media screen and (max-width : 479px){
	.thumbnail .thum-box{ margin:5px; }
}

/* ****************************************************
  グリッド【.row-col】
***************************************************** */

.thumbnail .row-col{
	display: table-cell;
    vertical-align: up;
	float:left;
	
	border-bottom:1px solid rgba( 255, 255, 255, 0.7 );
	border-left:1px solid rgba( 255, 255, 255, 0.7 );
}

/*カラム数*/
.thumbnail .row-col{ width: 25%; }/*4分割*/

@media screen and (max-width : 800px){
	.thumbnail .row-col{ width: 33.333%; }/*3分割*/
}

@media screen and (max-width : 479px){
	.thumbnail .row-col{ width:50%; }
}

/* ****************************************************
  キャプション【.t_caption】
***************************************************** */
.t_caption{
	width:100%;
	overflow: hidden;
}

.t_caption{/*詳細指定*/
	height:58px;
	margin-top:10px;
	box-sizing:border-box;
}

/* ****************************************************
  サムネール【固定カラム】
***************************************************** */

.thumbnail .row-box{
	height:auto;
	margin:0;
	
	width:294px;
}

@media screen and (max-width : 479px){
	.thumbnail .row-box{
		width:100%;
		height:auto;
	}
}

/* ****************************************************
  文字隠し【.t_hidden-full】
***************************************************** */

.t_hidden-full .thum-box{ position:relative; }
.t_hidden-full .t_caption{ 
	position:absolute;
	top:0;
	margin:0;
	height:100%;
	
	filter: alpha(opacity=0); -moz-opacity:0; opacity:0;
}
.t_hidden-full .thum-box a:hover{
	filter: alpha(opacity=100);
	-moz-opacity:1.0;opacity:1.0;
}

/*キャプション詳細設定【デスクトップサイズの設定】*/
@media screen and (min-width : 480px){
	.t_hidden-full .t_caption{
		color:#FFF;
		padding:85px 1rem 0 1rem;
	}
	.t_hidden-full .thum-box:hover .t_caption{
		filter: alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;	
		background-color: rgba( 26, 26, 26, 0.9 );
	}
}

/*キャプション詳細設定【モバイルサイズの設定】*/
@media screen and (max-width : 479px){
	.t_hidden-full .t_caption{
		position:relative;
		filter: alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;
		height:auto;
		padding:0;
		
		margin:0.6rem 0 1.6rem 0;
	}
}

/* ****************************************************
  文字隠しハーフ【.t_hidden-half】
***************************************************** */

.t_hidden-half .thum-box{ position:relative; }
.t_hidden-half .t_caption{ 
	position:absolute;
	top:auto;
	bottom:0;
	margin:0;
	
	filter: alpha(opacity=0); -moz-opacity:0; opacity:0;
}
.t_hidden-half .thum-box a:hover{
	filter: alpha(opacity=100);
	-moz-opacity:1.0;opacity:1.0;
}

/*キャプション詳細設定【デスクトップサイズの設定】*/
@media screen and (min-width : 480px){
	.t_hidden-half .t_caption{
		color:#FFF;
		padding: 0 1rem 0 1rem;
		height:50px;
		line-height:50px;
	}
	.t_hidden-half .thum-box:hover .t_caption{
		filter: alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;	
		background-color: rgba( 26, 26, 26, 0.9 );
	}
}

/*キャプション詳細設定【モバイルサイズの設定】*/
@media screen and (max-width : 479px){
	.t_hidden-half .t_caption{
		position:relative;
		filter: alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;
		height:auto;
		padding:0;
		
		margin:0.6rem 0 1.6rem 0;
	}
}

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

	テーブル
	
#####################################################################
*/

/* ****************************************************
  テーブル【table】
***************************************************** */

.table table {
    width: 100%;
	border-collapse: collapse;
    border-spacing: 0;
}

.table th, .table td {
    padding: 14px 10px;
    vertical-align: top;
}
.table th {
    text-align: left;
}

/*ボーダー*/
.table th, .table td{
	border: 1px solid #e4e7ec;
}



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

	.table table::before, .table table::after {
		content: "";
		display: table;
	}
	.table table::after {
		clear: both;
	}
	.table colgroup, .table col {
		display: none;
		width: auto;
	}
	.table tbody, .table tr, .table th, .table td {
		box-sizing: border-box;
		clear: both;
		display: block;
		float: left;
		width: 100%;
	}
	
	.table th, .table td {
		border: medium none;
		margin: 2px 0;
		padding: 10px 0px;
	}
	.table th {
		border-top: 1px solid #e4e7ec;
		margin-top: -1px;
	}
	.table th + td, .table td + td {
		margin-top: 0;
		padding-top: 0;
	}
	.table th + td + td, .table td + td + td {
		padding: 0 2px;
	}
}

/* ****************************************************
  ボーダー無し【t_no-border】
***************************************************** */

.t_no-border th,
.t_no-border td{
	border:none;
}

/* ****************************************************
  セルのサイズ【t_size】
***************************************************** */

.t_size-s{ width: 200px; }
.t_size-m{ width: 300px; }
.t_size-l{ width: 400px; }

/* ****************************************************
  セルの色【t_color】
***************************************************** */

.t_color-gray {
    background: #fbfbfd none repeat scroll 0 0;
}

/* ****************************************************
  文字の左右中央揃え【t_align】
***************************************************** */

.t_alignLeft { text-align: left; }
.t_alignCenter { text-align: center !important; }
.t_alignRight { text-align: right !important; }


/* ****************************************************
  ボックスカラム【col-box】
***************************************************** */

.col-box-xs{ width:100px; }
.col-box-s { width:240px; }
.col-box-m { width:300px; }
.col-box-l { width:400px; }
.col-box-xl{ width:500px; }

@media screen and (max-width : 479px){
	.col-box-xs{ width:100%; }
	.col-box-s { width:100%; }
	.col-box-m { width:100%; }
	.col-box-l { width:100%; }
	.col-box-xl{ width:100%; }
}




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

	トランジョン
	
#####################################################################
*/

/* ****************************************************
  一括指定【easeOutExpo】
***************************************************** */

.thumbnail .thum-box a,
.t_hidden-full .t_caption,
.t_hidden-half .t_caption{
	-webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
	transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
}