@charset "utf-8";




/* CSS Document */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/* For modern browsers */
.clearfix:before,
.clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
	zoom:1;
}

/*---------------------------------------------------------------
 common
-------------------------------------------------------------- */
html {
	font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
}

body {
	margin:0;
	padding:0;
	background:#fff;
	color:#333;
	font-family: 'Noto Sans Japanese', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-feature-settings : "palt";
	letter-spacing:1px;
	font-size: 1.6rem;/* 16px */
	font-weight:400;
	line-height:1.8;
}
#container {
	width: 100%;
	margin: 0;
	padding: 0;
}
ul{
	margin:0;
	padding:0;
	list-style-type:none;
}
img{
	width:100%;
	-webkit-backface-visibility: hidden;
}

/*---------------------------------------------------------------
 header
-------------------------------------------------------------- */
header {
	width:100%;
	border-bottom:solid 1px #e6e6e6;
}
header a {
	width:100px;
	margin:0 auto;
	padding:30px 0 20px;
	display:block;
}
header img {
	width:100%;
	margin:0 auto;
	padding:0;
}

#wrapper{
	width:90%;
	margin:0 auto;
}

/*---------------------------------------------------------------
 catalog
-------------------------------------------------------------- */

#catalog h2 {
	margin: 30px auto;
	padding:0;
	font-size:2rem;
	text-align:center;
	font-family: 'Lora', serif;
	letter-spacing:2px;
}
#catalog ul{
	width:100%;
	margin:0;
	padding:0;
}
#catalog ul li{
	margin:0 0 10% 0;
	padding:0;
	text-align:center;
}
#catalog ul li img {
	margin: 0;
	padding: 0;
	vertical-align: top;
}
#catalog ul li .title1{
	margin-top: 10px;
	font-size:1.4rem;
}
#catalog ul li .title2{
	margin:0;
	padding:0;
	font-size:1.2rem;
}
/*---------------------------------------------------------------
 footer
-------------------------------------------------------------- */
footer {
	width:100%;
	margin:10% 0 5% 0;
	font-size:1.0rem;
	text-align:center;
}


/* ============================================================

	PC

============================================================ */

@media screen and (min-width:768px) {

#wrapper{
	max-width:980px;
	margin:0 auto;
}

header a {
	width: 120px;
	margin: 0 auto;
	padding: 30px 0 20px;
	display: block;
}

/*---------------------------------------------------------------
 catalog
-------------------------------------------------------------- */
#catalog h2 {
	margin: 50px auto;
	padding: 0;
	font-size: 2rem;
}
#catalog ul{
    width: 80%;
    margin: 0 auto;
	padding:0;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
	display: -webkit-flex; /* Safari6.1以降 */
	justify-content:         space-between;
	-ms-flex-pack: justify; /*IE10*/
	-webkit-box-pack: justify; /* Android4.3以下、Safari3.1〜6.0 */
	-webkit-justify-content: space-between; /* Safari6.1以降 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /*IE10*/
	-webkit-flex-wrap: wrap; /* Safari6.1以降 */
}
#catalog ul li{
	width:48%;
	margin:0 0 8% 0;
	padding:0;
}
#catalog ul li:first-child {
	width:100%;
	margin:0 0 8% 0;
	padding:0;
}


}