@charset "utf-8";


/*PC・タブレット・スマホ(全端末)共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	-webkit-text-size-adjust: none;
	color: #666;	/*全体の文字色*/
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 16px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	background: #fff;	/*背景色*/
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #bbb;	/*リンクテキストの色*/
	text-decoration:none;
	-webkit-transition: 0.3s;
	transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
}
a:hover {
	color: #80ad45;	/*マウスオン時の文字色*/
}


/*---------------------------common*/
.clear {
	clear:both;
}
.clearfix:after{
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix{
  display: inline-block;
}
* html .clearfix{
  height: 1%;
}
.clearfix{
  display: block;
}

.mgbtm40 {
	margin-bottom:40px !important;
}

/*---------------------------customize*/
.main {
	/*width:calc(100vw - 20%);*/
    width: 900px;
	min-width:727px;
	height:auto;
	margin:0 auto 40px;
	background:#fff;
}
h1 {
	width:100%;
	margin-bottom:20px;
	text-align:center;
}
h1 img{
	margin-top:10px;
	/*
	width:100%;
	height:auto;
	*/
}

h2 {
	width:100%;
	height:70px;
	background:#eeebe9;
	margin-bottom:60px;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
	color:#c30d23;
	font-size:28px;
	font-weight:bold;
	text-align:center;
}
h2 span{
	font-size:34px;
	letter-spacing:0.05em;
	margin:0 5px;
}
/*
.tab {
}
.tab li {
	float:left;
}
.tab li a{
	display:inline-block;
	width:156px;
	height:43px;
	background:url("../images/tab.png") no-repeat left top;
	margin-right:9px;
	text-align:center;
	line-height:2.5;
}
.tab li:nth-child(1) a{
	color:#9d75b1;
}
.tab li:nth-child(2) a{
	color:#ff9c00;
}
.tab li:nth-child(3) a{
	color:#d67083;
}
.tab li:nth-child(4) a{
	color:#8ac031;
}
.tab li a.selected{
	color:#fff;
}
.tab li:nth-child(1) a.selected{
	background:url("../images/tab_soy.png") no-repeat left top;
	transition: 1.2s;
}
.tab li:nth-child(2) a.selected{
	background:url("../images/tab_miso.png") no-repeat left top;
	transition: 1.2s;
}
.tab li:nth-child(3) a.selected{
	background:url("../images/tab_dressing.png") no-repeat left top;
	transition: 1.2s;
}
.tab li:nth-child(4) a.selected{
	background:url("../images/tab_chomiryo.png") no-repeat left top;
	transition: 1.2s;
}
*/

/*
.selectArea {
	width:auto;
	padding:10px 0 80px;
}
*/
.selectArea {
	width:auto;
	padding:10px 0 0;
}


.goodsBox {
/*	padding:20px 12px;*/
	padding:20px 0 20px 30px;
}
.goodsBox li {
	position:relative;
	float:left;
	display:inline-block;
	width:calc(148px - 12px);
	height:162px;
	padding:40px 6px 10px 6px;
	margin-right:21px;
	margin-bottom:20px;
	border:1px solid #ddd;
	color:#231815;
	text-align:center;
	font-size:12px;
	/*font-weight:bold;*/
	line-height:1.4;

background: -prefix-linear-gradient(left, rgba(0,0,0,0.01),white 25%);
background: -webkit-gradient(linear, left top, right top, from(rgba(250,250,250,0)),color-stop(25%, white));
background: linear-gradient(to right, rgba(250,250,250,0),white 25%);
	border:1px solid rgba(41,31,29,0.4);

border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;

	cursor:pointer;
}

.logo_kanetsu{
	position: absolute;
    top: 15px;
    left: 20px;
}

.logo_kiichimen{
	position: absolute;
    top: 15px;
    left: 20px;
}


/*
.goodsBox li:nth-child(4n) {
	margin-right:0;
}
*/




.goodsBox li p {
	position:absolute;
	top:-10px;
	left:124px;
	display:inline-block;
	width:36px;
	height:36px;
	background:#e60012;
	border-radius:50%;
	color:#fff;
	text-align:center;
	line-height:36px;
	font-size:17px;
}
.goodsBox li span{
	position:absolute;
	bottom:10px;
	left:0;
	display:inline-block;
	width:100%;
	text-align:center;
	font-family:serif;
	line-height:2.4;
}

.selectedBox {
	/*
	width:138px !important;
	height:194px !important;
	border:0 !important;
	*/
	border:1px solid #efefef !important;
}
.kon li.selectedBox {
	background:#E3DAD2;
	-webkit-transition: 1.2s;
	transition: 1.2s;
}
.shirataki li.selectedBox {
	background:#FDEEDE;
	-webkit-transition: 1.2s;
	transition: 1.2s;
}
.tare li.selectedBox {
	background:#E2E9B2;
	-webkit-transition: 1.2s;
	transition: 1.2s;
}
.tokoroten li.selectedBox {
	background:#FAE0E3;
	-webkit-transition: 1.2s;
	transition: 1.2s;
}
.ramen li.selectedBox {
	background:#FDD7D3;
	-webkit-transition: 1.2s;
	transition: 1.2s;
}


.grid {
	margin-bottom:80px;
}

.grid h3 {
/*	display:inline-block;*/
	width:390px;
	height:42px;
	background:#555;
	margin-top:-42px;
/*	vertical-align:middle;*/
	color:#fff;
	/*	text-align:center;*/
	font-size:22px;
	line-height:42px;
	padding-left:30px;

border-radius:6px 6px 0 0;
-webkit-border-radius:6px 6px 0 0;
-moz-border-radius:6px 6px 0 0;
}
.grid h3 span{
	display:inline-block;
	margin-top:-2px;
	vertical-align:middle;
	font-size:11px;
	letter-spacing:0.05em;
}
.grid .goodsBox{
	background:#efefef;
border-radius:0 8px 8px 8px;
-webkit-border-radius:0 8px 8px 8px;
-moz-border-radius:0 8px 8px 8px;
}
.kon h3 {
	background:#8A644A;
}
.shirataki h3 {
	background:#F08B1E;
}
.tare h3 {
	background:#A9BE1E;
}
.tokoroten h3 {
	background:#E4515B;
}
.ramen h3 {
	background:#F84E3C;
}



/*.letterSpacing04 {
	letter-spacing:0.4em;
}*/

.selectedArea {
	position:relative;
	display:block;
	width:calc(100% - 16px);
/*	background:rgba(201,202,202,0.7);*/
/*	background:rgba(255,255,255,0.8);*/
background:#fffbf4;
	border:8px solid #beb1aa;
	border-top:0px;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
}

.selectedArea h2 {
/*	background:#beb1aa url(../images/close.png) 10px center no-repeat !important;*/
	background:#beb1aa;
	margin-bottom:30px;
	color:#fff;
	font-size:25px;
	line-height:2.2;
	border-radius: 0;
}
/*
.selectedArea h2:hover {
	background:#ccc4c0 url(../images/close.png) 10px center no-repeat !important;
	background:#beb1aa;
	transition: 0.4s;
}
*/
.selectedArea .goodsBox {
	padding:21px 0 0 18px;
}
.selectedExp {
	display:inline-block;
	float:left;
	margin-bottom:20px;
	margin-left:40px;
	color:#444;
	font-size:22px;
	font-weight:bold;
	line-height:1.2;
}
.selectedExp span{
	color:#ff1a00;
	font-size:15px;
}
.selectedInvition {
	display:inline-block;
	padding:2px 15px;
	background:#c30d23;
	margin-left:20px;
	color:#fff;
	font-size:17px;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
}
.selectedInvition span{
	font-size:19px;
	margin-right:4px;
}
.countNumber {
	float:left;
	width:260px;
	background:#fff;
	margin-left:20px;
	color:#000;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	border:2px solid rgba(41,31,29,0.3);
}
.countNumber span{
	margin-right:10px;
	color:#c30d23;
	font-size:32px;
	line-height:1.7;
}
.allClear {
	display:inline-block;
	width:45%;
	height:40px;
	padding:10px 0;
	background:#898989;
	color:#fff;
	font-size:18px;
	line-height:2.4;
	text-align:center;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
}
a.allClear:hover {
	color:#fff;
	background:#686868;
}

.submit {
	display:inline-block;
/*	width:680px;*/
/*	width:calc(100vw - 20% - 100px);*/
/*	width:calc(100% - 50px);*/
/*	width:calc(100% - 2px);*/
	width:45%;
	height:40px;
/*	min-width:680px;*/
	padding:10px 0;
/*	background:#898989;*/
	margin:20px 0 20px 10px;
	color:#444;
	font-size:18px;
	line-height:2.4;
	text-align:center;

background-color:#000000;
background: -prefix-linear-gradient(top, rgba(0,0,0,0.05),white 30%);
/*background: linear-gradient(to bottom, rgba(0,0,0,0.05),rgba(255,255,255,1) 30%, rgba(255,255,255,1));*/
background: -webkit-gradient(linear, left top, left bottom, from(rgba(240,240,240,0)),color-stop(30%, rgba(255,255,255,1)));
background: linear-gradient(to bottom, rgba(240,240,240,0),rgba(255,255,255,1) 30%);
	border:1px solid rgba(41,31,29,0.4);

border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
}

a.submit:hover {
	color:#fff;
background:#686868;
border-color:#d5d1b9;
/*background: -prefix-linear-gradient(top, rgba(0,0,0,0.05),white 30%);
background: linear-gradient(to bottom, rgba(240,240,240,0),rgba(255,255,255,1) 30%);
	border:1px solid rgba(41,31,29,0.4);
	*/
}


.waku {
	width:100%;
	text-align:center;
}

/*
.floating {
	position:fixed;
	width:calc(100vw - 20%);
	min-width:727px;
	bottom:0;
	padding-bottom:20px;
	background:rgba(255,255,255,0.8);
}
*/
.floating { /*下部固定用*/
	min-width:727px;
	padding-bottom:20px;
	background:rgba(255,255,255,0.8);
}
.logo_kanetsu_select{
	margin-bottom: 20px;
	text-align:center;
}


.closeSlected {
}
.closeSlected {
	width:calc(100% - 16px);
/*	width:calc(100% - 50px - 16px);*/
	margin:0 auto;
	border-bottom:0;
/*	transition: 1.2s;*/
}
.closeSlected h2{
/*	background:#beb1aa url(../images/open.png) 10px center no-repeat !important;*/
	background:#beb1aa;
	margin-bottom:0;
}
/*
.closeSlected h2:hover {
	background:#ccc4c0 url(../images/open.png) 10px center no-repeat !important;
	transition: 0.4s;
}
*/
.closeSlected .selectedGoods{
	display:none;
}
/*
.selectedGoods .goodsBox{
	max-height:calc(100vh * 0.3);
}
*/
.koban {
	display:none !important;
}


h1 {
	width:100%;
	margin-bottom:0;
	text-align:center;
}
h1 img{
	width:calc(100%);
	height:auto;
	margin:10px 0 1em;
	margin-top:0px;
}
.explanation {
	padding-bottom:50px;
	background:#FFDBE7;
	background-size:100% 100%;
	margin-bottom:40px;
}
.requirements {
	width:90%;
	max-width:664px;
	padding:20px 5px 20px;
	background:#fff;
	margin:0 auto;
	text-align:center;

border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;	
}
.requirements>img {
	margin-bottom:10px;
}
.requirements h2 {
	background:transparent;
	margin-bottom:10px;
	color:#DC301C;
	font-size:26px;
}

.flow {
	margin:0 auto;
}
.flow li {
	position:relative;
	float:left;
	width:calc(30% - 20px);
	height:240px;
	padding:10px 10px 10px;
	background:#fbfbfb;
	border:2px solid #8d8f92;
	margin-right:15px;
	margin-bottom:35px;
	color:#5a3d1b;
	text-align:center;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;	
}
.flow li:first-child {
	margin-left:12px;
}
.flow li:last-child {
	margin-right:0;
}
.flow li p{
	color:#5a3d1b;
	font-weight:bold;
	text-align:left;
	line-height:1.6;
	letter-spacing:-0.02em;
}
.flow li img{
	margin-bottom:10px;
}
.flow li img.icon {
	position:absolute;
	right:calc(50% - 53px);
	bottom:0;
}
.campaginNote {
	padding:0 30px 15px;
	color:#333;
	text-align:left;
	line-height:1.6;
}
.campaginNote>li{
	font-weight:bold;
}
.campaginNote li {
	padding-left:20px;
	margin-bottom:3px;
}
.campaginNote li span {
	float:left;
	display:inline-block;
	margin-left:-20px;
}

.note {
	width:calc(100% - 40px + 20px);
	padding:25px 20px 25px;
	background:#fbfcd7;
	margin:15px 20px 15px -20px;
	color:#111;
	font-size:15px;
	line-height:1.4;
	text-align:left;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.note p{
	margin-bottom:8px;
	font-weight:bold;
}
.method {
	margin-bottom:15px;
}
.attention {
	color:#ff1a00;
	font-weight:normal;
}
.watchout {
	margin-top:10px;
	font-size:14px;
	line-height:1.4;
}

.textAlignLeft {
	text-align:left;
}
.buttons{
	text-align: center;
	margin-bottom: 90px;
}
.buttons > div{
	display: inline-block;
}
.btn_product a{
	margin: 0 auto 1em;
    background-color: #C6000B;
    color: #fff;
    text-align: center;
    display: block;
    border-radius: 8px;
    width: 260px;
    padding: 7px 0;
    font-size: 21px;
}
.btn_recipe a{
	margin: 0 auto 1em;
    background-color: #FF6C22;
    color: #fff;
    text-align: center;
    display: block;
    border-radius: 8px;
    width: 260px;
    padding: 7px 0;
    font-size: 21px;
}


/*画面幅801px以上の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

}

/*画面幅580px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:736px){

.br::before {
	content: "\A" ;
	white-space: pre ;
}


/*全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 16px;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

.main {
	width:100%;
	min-width:auto;
	height:auto;
	margin:0 auto;
	background:#fff;
}

h2 {
/*	width:calc(100% - 4%);*/
	width:100%;
	height:auto;
	padding:18px 0 20px;
	margin:0 auto 50px;
	font-size:26px !important;
	line-height:1.3;
border-radius:0;
-webkit-border-radius:0;
-moz-border-radius:0;
}
/*
.selectArea {
	padding:10px 0 40px;
}
*/
.selectArea {
	padding:10px 0 0;
}
.grid {
	margin-bottom:60px;
}
.grid h3 {
	width:90%;
	margin:-42px auto 0;
	font-size: 16px;
}

.selectedArea .goodsBox {
	padding:21px 0 0 17px;
}
.selectedArea .goodsBox li{
	margin-right:17px;
}
/*
.floating {
	position:fixed;
	width:calc(100% - 8px);
	min-width:auto;
	bottom:0;
	padding-bottom:5px;
	margin-left:4px;
}
*/
.floating {
	width:calc(100% - 8px);
	min-width:auto;
	padding-bottom:5px;
	margin-left:4px;
}

.selectedArea {
border-radius:6px 6px 0 0;
-webkit-border-radius:6px 6px 0 0;
-moz-border-radius:6px 6px 0 0;
}
.selectedArea h2 {
	padding:10px 0 10px;
	margin-bottom:20px;
	font-size:21px;
	line-height:1.2;
}
/*
.selectedArea .goodsBox li:nth-child(2n) {
	margin-right:0;
}
*/
.selectedExp {
	float:none;
	width:100%;
	margin:0 0 20px;
	text-align:center;
}
.countNumber {
	float:none;
	width:90%;
	margin:0 auto 5px;
	border:1px solid rgba(41,31,29,0.4);
}
.closeSlected h2{
	margin-bottom:0;
}
.allClear {
	width:90%;
	height:36px;
	margin:0 auto 10px;
	font-size:19px;
	line-height:36px;
	text-align:center;
}
.submit {
	width:90%;
	min-width:auto;
	padding:8px 0;
	margin:0 0 15px;

background-color:#000000;
background: -prefix-linear-gradient(top, rgba(0,0,0,0.05),white 30%);
/*background: linear-gradient(to bottom, rgba(0,0,0,0.05),rgba(255,255,255,1) 30%, rgba(255,255,255,1));*/
background: -webkit-gradient(linear, left top, left bottom, from(rgba(240,240,240,0)),color-stop(30%, rgba(255,255,255,1)));
background: linear-gradient(to bottom, rgba(240,240,240,0),rgba(255,255,255,1) 30%);

	border:1px solid rgba(41,31,29,0.4);

border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
}

.flow {
	padding:0 4%;
}
.flow li {
	width:calc(100% - 30px);
	height:180px;
	padding:10px 15px 10px;
	margin-right:0;
	margin-bottom:20px;
}
.flow li:first-child {
	margin-left:0;
}
.flow li:last-child {
	margin-bottom:50px;
}
.campaginNote {
	padding:0 6% 15px;
}
.note {
	width:calc(100% - 40px + 20px);
}


}

@media screen and (max-width:321px){

.goodsBox {
	padding-left:6px;
}
.goodsBox li{
	margin-right:6px;
}
.selectedArea {
	position:relative;
	display:block;
	width:calc(100% - 8px);
/*	background:rgba(201,202,202,0.7);*/
/*	background:rgba(255,255,255,0.8);*/
background:#fffbf4;
	border:4px solid #beb1aa;
	border-top:0px;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
}
.selectedArea .goodsBox {
	padding:21px 0 0 1px;
}
.selectedArea .goodsBox li{
	margin-right:1px;
}
.submit {
	font-size:17px;
	letter-spacing:-0.05em;
}
}