﻿@charset "utf-8";

/* block分割 */



/* 1ブロック */
.block1 {
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	margin: -10px; /* 外周★を打ち消し */
}

.blocks1 {
	padding: 10px; /* ★ */
	float: left;
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	@media only screen and (min-width: 480px){
		width : calc(100% / 1) ;
	}
	@media only screen and (max-width: 480px){
		width: 100%;
	}
}

/* 2ブロック */
.block2 {
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	margin: -10px; /* 外周★を打ち消し */
}
.blocks2 {
	padding: 10px; /* ★ */
	float: left;
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	@media only screen and (min-width: 480px){
		width : calc(100% / 2) ;
	}
	@media only screen and (max-width: 480px){
		width: 100%;
	}
}

/* 2-2ブロック */
.block2-2 {
	overflow: hidden;
	border: 0px #f6e solid;
	box-sizing: border-box;
	margin: -10px; /* 外周★を打ち消し */
}
.blocks2-2 {
	padding: 10px; /* ★ */
	float: left;
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	@media only screen and (min-width: 480px){
		width : calc(100% / 2) ;
	}
	@media only screen and (max-width: 480px){
		width: 50%;
	}
}

/* 2ブロック 40 60 */
.block2-40-60 {
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
		@media only screen and (min-width: 480px){
		display: flex; /* PCのみ枠縦一杯 */
		align-items: stretch; /* PCのみ枠縦一杯 */
		}
}
.block2-40-60 .blocks2-l {
	float: left;
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	@media only screen and (min-width: 480px){
		width : 60%;
	}
	@media only screen and (max-width: 480px){
		width: 100%;
	}
}
.block2-40-60 .blocks2-r {
	float: left;
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	margin-top: auto; /* 要素を下揃え */
	@media only screen and (min-width: 480px){
		width : 40%;
	padding-bottom: 0px;
	}
	@media only screen and (max-width: 480px){
		width: 100%;
	}
}

/* 3ブロック */
.block3 {
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	margin: -10px; /* 外周★を打ち消し */
}
.blocks3 {
	padding: 10px; /* ★ */
	float: left;
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	@media only screen and (min-width: 480px){
		width : calc(100% / 3) ;
	}
	@media only screen and (max-width: 480px){
		width: 100%;
	}
}

/* 3-2ブロック */
.block3-2 {
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	margin: -10px; /* 外周★を打ち消し */
}
.blocks3-2 {
	padding: 10px; /* ★ */
	float: left;
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	@media only screen and (min-width: 740px){/*480*/
		width : calc(100% / 3) ;
	}
	@media only screen and (max-width: 740px){/*480*/
		width: 50%;
	}
}

/* 4ブロック */
.block4 {
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	margin: -10px; /* 外周★を打ち消し */
}
.blocks4 {
	padding: 10px; /* ★ */
	float: left;
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	@media only screen and (min-width: 480px){
		width : calc(100% / 4) ;
	}
	@media only screen and (max-width: 480px){
		width: 100%;
	}
}

/* 4-2ブロック */
.block4-2 {
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	margin: -10px; /* 外周★を打ち消し */
}
.blocks4-2 {
	padding: 10px; /* ★ */
	float: left;
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	@media only screen and (min-width: 480px){
		width : calc(100% / 4) ;
	}
	@media only screen and (max-width: 480px){
		width: 50%;
	}
}

/* 5-3ブロック */
.block5-2 {
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	margin: -10px; /* 外周★を打ち消し */
}
.blocks5-2 {
	padding: 10px; /* ★ */
	float: left;
	overflow: hidden;
	border: 0px #eee solid;
	box-sizing: border-box;
	@media only screen and (min-width: 480px){
		width : calc(100% / 5) ;
	}
	@media only screen and (max-width: 480px){
		width : calc(100% / 2) ;
	}
}



/*float left 2列時の各boxの高さ違いによる回り込み防止 */
.contents-2-clear {
	clear: both;
}
/*float left 2列時の各boxの高さ違いによる回り込み防止 */
@media only screen and (max-width: 740px){.contents-2-block {
	clear: both;
}}
/*float left 3列時の各boxの高さ違いによる回り込み防止 */
@media only screen and (min-width: 740px){.contents-3-block {
	clear: both;
}}
/*float left 4列時の各boxの高さ違いによる回り込み防止 */
@media only screen and (min-width: 740px){.contents-4-block {
	clear: both;
}}

