@charset "utf-8";

/*-------------------------------------------------------------------------
	株式会社DYM
	Style Sheet for Common Setting (#csr)
	Date: 2015-01
	All content (c) RYNAPSE
-------------------------------------------------------------------------*/

/* =page structure
-------------------------------------------------------------------------*/
body { background: #EEE; }

.pkg figure {
	margin: 0 0 20px;
	background: #FFF;
	overflow: hidden;
	}

.pkg figure span {
	position: relative;
	display: block;
	height: 170px;
	overflow: hidden;
	}

.pkg figure span img {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: none;
	width: 100%;
	transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
	}

.pkg figure figcaption {
	padding: 20px;
	background: #FFF;
	}

.pkg figure figcaption h3,
.pkg figure figcaption h4,
.pkg figure figcaption p {
	font-size: 1.3rem;
	line-height: 1.8;
	margin: 0 0 1em;
	}

.pkg figure figcaption h4 { margin: 0; }
.pkg figure figcaption ul { margin: 1em 0; }

.pkg figure figcaption li:before {
	content: '\f111';
	font-size: 1.4rem;
	margin-right: .5em;
	}

.pkg figure figcaption p,
.pkg figure figcaption li { color: #666; }

.pkg figure figcaption a {
	display: inline-block;
	padding: 1em 20px;
	color: #131B3F;
	background: #EEE;
	}

.pkg figure figcaption a:hover { background: #DDD; }


/* =Media Query
-------------------------------------------------------------------------*/
@media only screen and ( min-device-width: 321px ) {
	.pkg figure span { height: 200px; }
	}

@media only screen and ( min-device-width: 376px ) {
	.pkg figure span { height: 220px; }
	}

@media only screen and ( max-device-width: 720px ) and ( orientation: landscape ) {
	.pkg figure span { height: 300px; }
	}

@media only screen and ( min-device-width: 721px ) {
	.pkg { margin-top: -40px; overflow: hidden; }
	.pkg figure { position: relative; width: 48%; float: left; margin-right: 4%; 40px; margin-bottom: -999px; padding-bottom: 999px; border-top: 40px solid #EEE; }
	.pkg figure:nth-of-type(even) { margin-right: 0; }
	.pkg figure:nth-of-type(2n+1) { clear: left; }
	.pkg figure span { height: 200px; }
	.pkg figure figcaption h3 { height: 4em; font-size: 1.8rem; }
	}

@media
only screen and ( min-device-width: 721px ) and ( orientation: landscape ),
only screen and ( min-width: 1025px ) {
	.pkg figure span { height: 280px; }
	}

@media only screen and ( min-width: 1025px ) {
	.pkg figure { width: 32%; float: left; margin-right: 2%; }
	.pkg figure:nth-of-type(even) { margin-right: 2%; }
	.pkg figure:nth-of-type(3n) { margin-right: 0; }
	.pkg figure:nth-of-type(2n+1) { clear: none; }
	.pkg figure:nth-of-type(3n+1) { clear: left; }
	.pkg figure span { height: 220px; }
	}

@media only screen and ( min-width: 1281px ) {
	.pkg figure span { height: 260px; }
	}

@media only screen and ( min-width: 1601px ) {
	.pkg figure span { height: 320px; }
	}

@media only screen and ( min-width: 1681px ) {
	.pkg figure span { height: 380px; }
	}


/* EOF
-------------------------------------------------------------------------*/