@charset "utf-8";
/* CSS Document */

/*-------------------------------------------
　　reset
-------------------------------------------*/
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video, input, select {
	font-size:100%;
	font-weight:inherit;
	font-style:inherit;
	vertical-align:baseline;
	white-space:normal;
	text-align:left;
	margin:0;
	padding:0;
	border:0;
	outline:0;
	background:transparent;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
:focus {outline:0;}
table {border-collapse:collapse; border-spacing:0;}
img {vertical-align:top;}
input, textarea, select, button {-webkit-appearance:none; -moz-appearance:none; appearance:none;}



/*-------------------------------------------
　　base
-------------------------------------------*/
body {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: 400;
	position: relative;
}

a, a:visited, a:hover, a:focus, a:active {text-decoration:none; color:#000;}
a:hover			  {-moz-opacity:0.6; opacity:0.6; filter:alpha(opacity=60);}

img {width: 100%;}

p {
	line-height: 1.8;
	font-size: 11px;
}


@media screen and (max-width: 700px) {
	.pc_only {display: none;}
}
@media screen and (min-width: 701px) {
	.sp_only {display: none;}
}


/*-------------------------------------------
　　Contents
-------------------------------------------*/
/*　　Main Visual */
.main_visual {
	width: 100%;
	margin-bottom: 60px;
}
@media screen and (min-width: 701px) {
	.main_visual {
		max-width: 1300px;
		margin: 0 auto 150px auto;
	}
}

/* Concept */
#concept {
	width: 90%;
	margin: 0 auto 100px auto;
}
#concept h1 {
	width: 62%;
	max-width: 210px;
	margin-bottom: 40px;
}
#concept p {
	margin-bottom: 20px;
}
#concept .name {
	text-align: right;
	margin-bottom: 40px;
	font-size: 11px;
}
#concept .sign {
	width: 110px;
	margin: 0 0 0 auto;
}
@media screen and (min-width: 701px) {
	#concept {
		max-width: 600px;
		margin: 0 auto 150px auto;
	}
	#concept .sign {
		width: 150px;
	}
}

/* Items */
.item_box h2 {
	font-size: 18px;
	margin: 25px 0 5px 0;
	line-height: 1.3;
}
.item_box .price {
	font-size: 11px;
	margin-bottom: 25px;
}
.item_box p {
	margin-bottom: 15px;
}

@media screen and (max-width: 700px) { /* SPレイアウト */
	.w90 {
		width: 90%;
		margin: 0 auto 100px auto;
	}
	.w70 {
		width: 70%;
		margin: 0 auto 100px auto;
	}
	.item_box h2 {
		font-size: 14px;
		margin: 25px 0 5px 0;
		line-height: 1.3;
	}
}
.box6 > div:first-child {
	width: 60%;
}
.box6 > div:last-child {
	width: 60%;
	margin: 30px 0 0 auto;
}
.box7 {
	display: flex;
}
.box7 > div {
	width: 49%;
}
.box7 > div:first-child {
	margin-right: 2%;
}
.box11 .flex {
	display: flex;
}
.box11 .flex > div {
	width: 49%;
}
.box11 .flex > div:first-child {
	margin: 30% 2% 0 0;
}
.box12 {
	width: 44%;
	margin: 0 auto 100px auto;
}

@media screen and (min-width: 701px) { /* PCレイアウト */
	.items {
		max-width: 960px;
		width: 90%;
		margin: 0 auto;
	}
	.item_box {
		margin: 0 auto 150px auto;
	}
	.box1 {width: 62%;}
	.box2 {width: 100%;}
	.box3 {width: 48%;}
	.box4 {width: 62%;}
	.box5 {width: 100%;}
	.box6 {width: 83%;}
	.box7 {width: 100%;}
	.box8 {width: 100%;}
	.box9 {width: 62%;}
	.box10 {width: 62%;}
	.box11 {width: 83%;}
	.box12 {width: 40%;}
	.box13 {width: 62%;}

	.box6 {
		display: flex;
		justify-content: space-between;
	}
	.box6 > div:first-child {
		width: 49%;
	}
	.box6 > div:last-child {
		width: 49%;
		margin: 240px 0 0 0;
	}
}

/* Producers */
.producers {
	width: 70%;
	margin: 0 auto 150px auto;
}
@media screen and (min-width: 701px) {
	.producers {
		max-width: 960px;
		width: 90%;
	}
	.producers p {
		width: 62%;
		margin: 200px auto 200px auto;
	}
}

/* Footer */
footer li {
	margin-bottom: 60px;
}
footer li .logo,
footer li svg {
	display: block;
	margin: 0 auto 4% auto;
}
footer li.baycrews .logo {width: 27%;}
footer li.baycrews svg   {width: 29%;}
footer li.edifice .logo  {width: 23%;}
footer li.edifice svg    {width: 58%;}

footer .copyright {
	width: 38%;
	margin: 0 auto 40px auto;
}
@media screen and (min-width: 701px) {
	footer {
		max-width: 580px;
		width: 60%;
		margin: 0 auto;
	}
	footer li {
		margin-bottom: 100px;
	}
}