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

/*プレオーダーページ*/

h1.fs-c-heading {display: none;}/*既存のh1タグ非表示*/

.topimg {
    margin: 0 calc(50% - 50vw);
}

/*リード文*/
.comingsoon .lead {
    text-align: center;
}

.comingsoon .lead h2 {
    margin: 10px 0;
    font-weight: 600;
    font-size: 170%;
}
/*/リード文ここまで*/

.content li{background:#fff;}

.hide {display:none;}


.cs_attention {
	padding: 6% 0 0 0;
	width: 90%;
	margin: auto;
	font-size: 10px;
}

.cs_attention p:nth-child(1) {
	margin-bottom: 3%;
}

.cs_date {
	font-weight: bold;
	font-size: 16px;
	padding: 1% 3%;
	margin-bottom: 4%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: flex-end;
	background-color: #d6d2c9;
	margin-top: 32px;
	color: #000;
}
#web_color{
border-bottom: 1px solid #000;
background-color: #fff;
}

.cs_date .cs_day {
	margin-right: auto;
}

.cs_cat {
    font-size: 11px;
    align-self: flex-end;
}


/*販売アイテム*/
.cs_products {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}

.cs_prolist{
	width: 49%;
	margin-right: 2%;

	padding-bottom: 16px;
}

.cs_prolist:nth-child(2n){
	margin-right: 0;
}

.cs_prolist a:hover {
	opacity: 0.6;
	display: block;
}

.cs_prolist img {
	display: block;
	width: 100%;
	margin: auto;
}

.pro_name {
	text-align: center;
	font-weight: normal;
	font-size: 12px;
}

.price {
	text-align: center;
	margin-top: 2px;
}

div.cs_prolist h3.pro_name{
	overflow-wrap: break-word;
}


/*カラバリ*/

.color_vari ul {
    display: flex;
    justify-content: center;
    padding: 0;
    margin:0;
}

.color_vari ul li {
	padding: 5px;
	display: block !important;
}

.color_vari ul li span {
	display: block;
	width: 12px;
	height: 12px;
}

.color_vari li span.blue { background-color: #001897; }
.color_vari li span.yellow { background-color: #ccb000; }



@media only screen and (min-width: 750px) {
/*プレオーダーページ（PC）*/

.comingsoon h1 { width: 60%; margin: 0 auto;}

.topimg {
    margin: 0;
}

/*リード文*/
.comingsoon .lead {
    text-align: center;
}
.comingsoon .lead p {
    font-size: 130%;
    margin: 10px 0 50px;
}

.comingsoon .lead h2 {
    margin: 10px 0;
    font-size: 250%;
}
/*/リード文ここまで*/


.content li{background:#fff; padding:20px;}

.hide {display:none;}


.cs_attention {
	padding: 4% 4% 0 4%;
}

.cs_attention p:nth-child(1) {
	margin-bottom: 3%;
}

.cs_date {
	background-color: #d6d2c9;
	font-weight: 600;
	font-size: 180%;
	padding: 0.8% 0.5% 0.2% 1.4%;
	margin-bottom: 2%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: flex-end;
	margin-top: 32px;
	color: #000;
}
#web_color{
border-bottom: 1px solid #000;
background-color: #fff;
}
.cs_date .cs_day {
	margin-right: auto;
}

.cs_cat{
font-size: 12px;
}


/*販売アイテム*/
.cs_products {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}

.web{
	display:none;
}

.real{
	display:block;
}

.cs_prolist{
	width: 19%;
	margin-right: 1%;
	padding-bottom: 24px;
}

.cs_prolist a:hover {
	opacity: 0.6;
	display: block;
}

.cs_prolist:nth-child(2n) {
	margin-right: 1%;
}

.cs_prolist:nth-child(4n) {
	margin-right: 1%;
}

.cs_prolist:nth-child(5n) {
	margin-right: 0;
}

.cs_prolist img {
	display: block;
	width: 100%;
	margin: auto;
}

.pro_name {
	text-align: center;
	font-weight: normal;
	font-size: 12px;
}

.price {
	text-align: center;
	margin-top: 2px;
}


div.cs_prolist h3.pro_name{
	overflow-wrap: break-word;
}


/*カラバリ*/

.color_vari ul {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
}

.color_vari ul li {
        padding: 5px;
        display: block !important;
}

.color_vari ul li span {
	display: block;
	width: 12px;
	height: 12px;
}

.color_vari li span.blue { background-color: #001897; }
.color_vari li span.yellow { background-color: #ccb000; }
}