.l-header {
	position: relative;
	max-height: 100px;
	background-color: #fff;
	height: 44px;
}

.l-justify-left {
	display: flex;
	justify-content: flex-start;
}
.l-justify-right {
	display: flex;
	justify-content: flex-end;
}
.l-justify-center {
	display: flex;
	justify-content: center;
}



/* スマホ用 */
@media only screen and (max-width: 767px), {

	/* スマホ用を表示 */

}

/* タブレット・パソコン用 */
@media only screen and (min-width: 768px) and (max-width: 1040px), {

	/* パソコン用を表示 */
}

/* タブレット・パソコン用 */
@media only screen and (min-width: 1041px) and (max-width: 1280px), {

	/* パソコン用を表示 */

}

/* ワイド用 */
@media only screen and (min-width: 1281px), print {

	/* パソコン用を表示 */
	
}









html,
body {
	background-color: #f0f0f042;
}

.l-wrapper_pc {
	height: 100%;
	width: 1280px;
	margin: 0 auto;
}

/* スマホ用 */
@media only screen and (max-width: 767px) {

	.l-wrapper {
		width: 100%;
		margin: 0 auto 0px;
	}

}
/* タブレット・パソコン用 */
@media only screen and (min-width: 768px) and (max-width: 960px), print {

	.l-wrapper {
		width: 100%;
		margin: 0 auto 0px;
	}

}
/* タブレット・パソコン用 */
@media only screen and (min-width: 961px), print {

	.l-wrapper {
		width: 100%;
		max-width: 1280px;
		margin: 0 auto 0px;
	}

}


/* スマホ用 */
@media only screen and (max-width: 767px) {

	.l-content {
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.l-content .l-main {
		width: 100%;
		-webkit-flex: 1;
		flex: 1;
	}

	.l-content .l-sidemenu {
		width: 100%;
	}

	/* 並び順 */
	.l-content .l-first {
		order: 2;
	}

	.l-content .l-second {
		order: 1;
	}

	.l-content .l-third {
		order: 3;
	}
	
	/* 馬一覧 */
	.l-umaichiran {
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	
	.l-umaichiran .uma {
		width: 100%;
	}
	
	/* 2カラム */
	.l-2column {
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	
	.l-2column > div {
		width: 100%;
	}

}

/* タブレット・パソコン用 */
@media only screen and (min-width: 768px) and (max-width: 1040px), {

	.l-content {
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.l-content .l-main {
		width: 100%;
		-webkit-flex: 1;
		flex: 1;
	}

	.l-content .l-sidemenu {
		width: 100%;
		padding: 0 2px;
	}

	/* 並び順 */
	.l-content .l-first {
		order: 2;
	}

	.l-content .l-second {
		order: 1;
	}

	.l-content .l-third {
		order: 3;
	}
	
	/* バナー */
	.l-banner {
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.l-banner .banner {
		width: 240px;
	}
	
	/* 馬一覧 */
	.l-umaichiran {
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.l-umaichiran .uma {
		width: 49.9%;
	}
	
	/* 2カラム */
	.l-2column {
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	
	.l-2column > div {
		width: 49.9%;
	}

}
/* タブレット・パソコン用 */
@media only screen and (min-width: 1041px) and (max-width: 1280px), {

	.l-content {
		display: -webkit-flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.l-content .l-main {
		-webkit-flex: 1;
		flex: 1;
		margin: 0 5px;
	}

	.l-content .l-sidemenu {
	}

	/* 並び順 */
	.l-content .l-first {
		order: 1;
		width: 240px;
	}

	.l-content .l-second {
		order: 2;
	}

	.l-content .l-third {
		order: 3;
		width: 100%;
	}
	
	/* バナー */
	.l-banner {
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.l-banner .banner {
		width: 240px;
	}
	
	/* 馬一覧 */
	.l-umaichiran {
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	
	.l-umaichiran .uma {
		width: 49.9%;
	}
	
	/* 2カラム */
	.l-2column {
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	
	.l-2column > div {
		width: 49.9%;
	}

}

/* ワイド用 */
@media only screen and (min-width: 1281px), print {

	.l-content {
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.l-content .l-main {
		-webkit-flex: 1;
		flex: 1;
		margin: 0 5px;
	}

	.l-content .l-sidemenu {
		width: 240px;
	}

	/* 並び順 */
	.l-content .l-first {
		order: -1;
	}

	.l-content .l-second {
		order: 0;
	}

	.l-content .l-third {
		order: 1;
	}
	
	/* 馬一覧 */
	.l-umaichiran {
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.l-umaichiran .uma {
		width: 49.9%;
	}
	
	/* 2カラム */
	.l-2column {
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	
	.l-2column > div {
		width: 49.9%;
	}
	
}

/* スマホ用 */
@media only screen and (max-width: 767px), {

	/* スマホ用を表示 */
	.l-display_sp {
		display: block;
	}
	.l-display_pc {
		display: none;
	}

}

/* タブレット・パソコン用 */
@media only screen and (min-width: 768px) and (max-width: 1040px), {

	/* タブレット・パソコン用表示 */
	.l-display_sp {
		display: block;
	}
	.l-display_pc {
		display: none;
	}
}

/* タブレット・パソコン用 */
@media only screen and (min-width: 1041px) and (max-width: 1280px), {

	/* タブレット・パソコン用を表示 */
	.l-display_sp {
		display: none;
	}
	.l-display_pc {
		display: block;
	}

}

/* ワイド用 */
@media only screen and (min-width: 1281px), print {

	/* パソコン用を表示 */
	.l-display_sp {
		display: none;
	}
	.l-display_pc {
		display: block;
	}
	
}






.l-flexstart {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 5;
}




.l-container {
	width: 100%;
	max-width: 1030px;
	max-width: 1260px;
	margin: 0 auto;
}

/*---------------------
 media
---------------------*/
@media screen and (max-width : 768px){
/* ここに0px〜768pxまでのCSSを記述*/ 
/*
	.l-content {
		width: 100%;
		margin: 0 auto;
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
	}
*/
	.l-photo {
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
	}

}

@media screen and (min-width : 769px) {
/* ここに769以上のCSSを記述*/ 
/*
	.l-content {
		width: 1030px;
		margin: 0 auto;
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
*/
	.l-photo {
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

}

/*---------------------
 media
---------------------*/
@media screen and (max-width : 1040px){
/* ここに0px〜768pxまでのCSSを記述*/ 

	.tab-navi {
		display: none;
	}

	.select-navi {
		display: block;
	}

}

@media screen and (min-width : 1041px) {
/* ここに769以上のCSSを記述*/ 

	.tab-navi {
		display: block;
	}

	.select-navi {
		display: none;
	}

}


/*---------------------
 Topページのindex
---------------------*/

/* スマホ用 */
@media only screen and (max-width: 767px), {

	.index {
		width: 100%;
	}

}

/* タブレット用 */
@media only screen and (min-width: 768px) and (max-width: 1040px), {

	.index {
		width: 100%;
	}
}

@media only screen and (min-width: 1041px) and (max-width: 1280px), {

	.index {
		width: 66%;
	}

}

/* ワイド用 */
@media only screen and (min-width: 1281px), print {

	.index {
		width: 66%;
	}
}


/*---------------------
 Topページの右側
---------------------*/

/* スマホ用 */
@media only screen and (max-width: 767px), {

	.nav-side {
		display: block;
		width: 100%;
	}

}

/* タブレット用 */
@media only screen and (min-width: 768px) and (max-width: 1040px), {

	.nav-side {
		display: block;
		width: 100%;
	}
}

@media only screen and (min-width: 1041px) and (max-width: 1280px), {

	.nav-side {
		display: block;
		width: 33%;
	}

}

/* ワイド用 */
@media only screen and (min-width: 1281px), print {

	.nav-side {
		display: block;
		width: 33%;
	}
}