@charset "utf-8";

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

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
.block
{
	margin-bottom: 2em;
}
.block-left {
	float: left;
}
.block-right {
	float: right;
}
.block-text {
	max-width: 400px;
	width: 100%;
}
.block-pict {
	max-width: 400px;
	width: 100%;
}
.block-full {
	width: 100%;
	float: left;
}
.block-right.block-right-wraparound {
	padding-left: 1em;
}
.block-left.block-left-wraparound {
	float: none;
	max-width: 100%;
}



.block-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0em -2em;
}
.block-list .block-item {
	width: calc(50% - 4em);
	margin: 0 2em;
}
.block-list .block-item:hover {
	text-decoration: none;
}
.block-list .block-item .thumb {
	padding: 2px;
	margin-bottom: 1em;
	background-color: #fff;
	width: 100%;
	padding-top: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 1em;
}
.block-list .block-item .thumb.default {
	padding-top: 0;
}
.block-list .block-item .thumb img {
	border-radius: 1em;
}
.block-list .block-item .thumb .hover-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 4px solid #FCCC00;
	background-color: transparent;
	border-radius : 1em;
	display: none;
}
.block-list .block-item:hover .thumb .hover-img {
	display: block;
}

.block-promise .block-list-01 .block-item {
	width: calc(50% - 1em);
	margin: 0.5em;
}
.block-promise .block-list-02 .block-item {
	width: calc(33.3333% - 1em);
	margin: 0.5em;
}



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

}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	.block-left {
		float: none;
		margin-bottom: 1em;
	}
	.block-right {
		float: none;
		margin-bottom: 1em;
	}
	.block-blue .text {
		padding: 0 3.125vw;
		font-size: 3.4375vw;
	}
	.block-blue .block-left {
		padding: 0 1em;
	}
	.block-list {
		margin: 0em -1em;
	}
	.block-list .block-item {
		width: calc(100% - 6em);
		margin: 1em;
	}
	.block-promise .block-list {
		margin: 0;
	}
	.block-promise .block-list-01 .block-item {
		width: calc(50% - 0.5em);
		margin: 0.25em 0.25em;
	}
	.block-promise .block-list-02 .block-item {
		width: calc(33.3333% - 0.5em);
		margin: 0.25em 0.25em;
	}
	.block-right.block-right-wraparound {
		padding-left: 0em;
	}
	.block-left.block-left-wraparound {
	}
}