/* style.css */

@charset "UTF-8";

@import url('reset.css');
@import url('layout.css');

/* トップページ
============================================*/

.select-wrap{
	position:relative;
	overflow:hidden;
	display:block;
	width:100%;
	background-color:#ffffff;
	border:1px solid #000;
	color:#333;
	background: url(../images/common/select_arrow.png) no-repeat right center;
}

.select-wrap select{
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	position:relative;
	z-index:2;
	display:block;
	width:100%;/* fallback non calc support */
	width:-webkit-calc(100% + 5em);
	margin:0;
	padding:11px 35px 11px 11px;
	padding:.6875rem 2.1875rem .6875rem .6875rem;
	background:transparent;
	border:0;
	outline:none;
	font-size:16px;
	font-size:1rem;
	line-height:1.5;
}

	#main h2 {
		margin: 0 0 10px;
		font-size: 1.4rem;
		line-height: 1.2;
		font-weight: bold;
	}
	#main h2 strong {
		font-size: 2.85rem;
		font-weight: bold;
	}
	
	
	#main .visual {
		margin-bottom: 30px;
	}
	#main .visual p {
		margin-bottom: 20px;
	}
	
	#main .visual li {
		float: left;
		margin: 10px 10px 0 0;
		width: 144px;
		height: 144px;
		overflow: hidden;
		position: relative;
		box-sizing: border-box;
		border: #c8c8c8 1px solid;
	}
	#main .visual li img {
		height: 100%;
		max-width: inherit;
		position: relative;
		transform: translate(-17px, 0px);
	}
	
	#main .visual li a:before {
		display: block;
		content: "";
		width: 142px;
		height: 142px;
		box-sizing: border-box;
		border: #fff 4px solid;
		position: absolute;
		z-index: 2;
	}
	
	#main .link {
		margin-bottom: 40px;
	}
	
	#main .more {
		margin-bottom: 10px;
	}
	
	#main .more a {
		display: block;
		padding: 10px 10px;
		color: #FFF;
		text-decoration: none;
		font-weight: bold;
		background: #ed1c24;
		text-align: center;
		position: relative;
	}
#main .more a:before {
	content:"";
	display: block;
	width: 100%;
	height: 3px;
	background: rgba(255,255,255,0.3);
	position: absolute;
	left: 1px;
	top: 1px;
}


/*-------------------------
|                         |
|  レスポンシブCSS        |
|  SP用（767px以下）  　　|
|													|
-------------------------*/

@media screen and (max-width:766px){	
	#main {
		margin: 0 auto;
		width: 580px;
		font-size: 1rem;
		position: relative;
	}
	.tag {
		float: left;
	}
	.guide {
		margin-bottom: 30px;
	}
	.guide h2,
	.guide p {
		width: 415px;
		float: right;
	}
	#main .link * {
		float: left;
	}
	#main .more a {
		box-sizing: border-box;
		padding: 21px;
		width: 220px;
		margin-right: 10px;
	}
	.select-wrap{
		width:340px;
	}
	.select-wrap select{
		padding:7px 35px 7px 11px;
	}
}



/*-------------------------
|                         |
|  レスポンシブCSS        |
|  PC用（767px以上）  　　|
|													|
-------------------------*/

@media screen and (min-width:767px){	
	#main {
		margin: 0 auto;
		max-width: 1060px;
		font-size: 1rem;
		position: relative;
		padding-bottom: 50px;
	}
	#main .visual {
		width: 650px;
		float: left;
	}
	
	#main .text {
		width: 360px;
		float: right;
	}
	
	#main .guide {
		height: 340px;
	}
}