@charset "utf-8";
/* CSS Document */


* {
margin: 0;
padding: 0;
}

body {
	margin: 0;
	padding: 0;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-size: 16px;
	line-height: 1.8em;
	color: #707070;
}	
	
.lead {
	margin: 30px auto;
	width: 600px;
	text-align: center;
	font-size: 18px;
}
.lead span {
	display: block;
	margin-bottom: 20px;
	padding: 10px;
	font-size: 18px;
	color: #FFFFFF;
	background: #b53011;
}
.title {
	margin: 0;
	font-size: 36px;
	font-weight: normal;
	color: #3f2a0c;
	text-align: center;
}
.title span {
	display: block;
	margin-bottom: 20px;
	font-size: 24px;
}
.ichioshi {
	margin: 0;
	padding: 100px 0;
	background: #f7f4f0;
}
.ichioshi-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
	padding: 0;
	width: 95%;
	max-width: 1000px;
	list-style: none;
}
.ichioshi-list__item {
	width: 23%;
	margin: 50px 0 0;
	padding: 0;
}
.ichioshi-list__item a {
	color: #707070;
	text-decoration: none;
}
.ichioshi-list__item a:hover {
	opacity: 0.7;
}
.ichioshi-image {
	display: block;
	border-radius: 8px;
	width: 100%;
}

.teiki {
	margin: 0;
	padding: 100px 0;
	background: url(../img/bg_teiki.png);
	background-size: cover;
}
.teiki-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
	padding: 0;
	width: 95%;
	max-width: 1000px;
	list-style: none;
}
.teiki-list__item {
	width: 30%;
	margin: 50px 0 0;
	padding: 0;
}
.teiki-list__item a {
	color: #707070;
	text-decoration: none;
}
.teiki-list__item a:hover {
	opacity: 0.7;
}
.teiki-image {
	display: block;
	border-radius: 8px;
	width: 100%;
}
.brand {
	margin: 0 auto;
	padding: 100px 0;
	width: 100%;
	max-width: 1000px;
}
.brand-banner {
	margin: 50px auto 0;
	padding: 0;
	width: 90%;
}
.brand-banner a:hover {
	opacity: 0.7;
}
.brand-banner img {
	width: 100%;
}
.list-index {
	margin: 20px 0 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.5em;
	text-align: left;
}
.list-text {
	margin: 20px 0 0;
	text-align: left;
}
.list-price {
	margin: 16px 0 0;
	font-weight: 600;
	text-align: right;
}




/* レスポンシブ【PC表示】
****************************************/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; width:1000px; }
.sp { display: none !important; }

.lead span {
	display: block;
	margin-bottom: 20px;
	padding: 10px;
	font-size: 18px;
	color: #FFFFFF;
	background: #b53011;
}
	.ichioshi {
		padding: 80px 0;
	}
	.teiki {
		padding: 80px 0;
	}
	.brand {
		padding: 80px 0;
	}

h1 {
margin: 50px 0;
text-align: center;
word-break: keep-all;
}

.mainbox {
width: 1000px;
text-align: center;
margin: 20px auto 0;
}

.contents {
     width: 100%;
     max-width: 1200px;
     margin: auto;
 }
.contents a:hover {
	opacity: 0.7;
}
 .contents img {
     width: 100%;
 }
 .text-center {
     text-align: center;
 }
 .flexbox {
     display: flex;
 }
 .box1 {
     width: 50%;
     margin: auto;
 }
 .box2 {
     width: 50%;
     margin: auto .5rem;
 }


/* レスポンシブ【スマホ表示】
****************************************/
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 480px) {
    .pc { display: none !important; }
    .sp { display: block !important; width:100%; }

	.lead {
		margin: 50px auto;
		width: 90%;
		font-size: 16px;
	}
	.title {
		font-size: 32px;
	}
	.ichioshi {
		padding: 50px 0;
	}
	.ichioshi-list__item {
		width: 48%;
	}
	.teiki {
		padding: 50px 0;
	}
	.teiki-list__item {
		width: 48%;
	}
	.brand {
		padding: 50px 0;
	}
	.list-index {
		font-size:16px;
	}

.mainbox {
width: 100%;
text-align: center;
}
     .flexbox {
         display: block;
     }
     .flexbox .box1 {
         width: 100%;
         margin: 0 auto;
     }
     .flexbox .box2 {
         width: 100%;
         margin: 0 auto;
     }

}

/* レスポンシブ【改行位置】
****************************************/
.phone{display: none;}

@media screen and (max-width: 767px) {
.phone{display: block;}
}