@charset "utf-8";
/* CSS Document */
body {
  background-color: #000;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  /*font-family: -apple-system, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', 'メイリオ', meiryo, sans-serif*/
  margin: 0px;
  padding: 0px;
  min-height: 100vh;
}
img {
  vertical-align: bottom; /*すきま調整*/
}
input {
  cursor: pointer;
}
/*=== ボックス開始 =================================*/
.box_main {
  width: 1000px;
  margin: 0px auto;
  padding: 0px;
  background-color: #FFF;
  overflow: auto;
}
.box_side {
  float: left;
  width: 24%;
  margin: 0px auto;
  padding: 0px;
}
.box_side_right {
  float: right;
  width: 240px;
  margin: 0px auto;
  padding: 0px;
}
/*=== トップページの枠の調整 =================================*/
#box_float_chousei {
  float: right;
  width: 76%;
  margin: 0px auto;
  padding: 0px;
}
.box_content {
  float: right;
  width: 73%;
  margin: 0px 0px 0px 30px;
  padding: 0px;
}
.box_content a {
  text-decoration: none;
}
.box_content a:hover {
  text-decoration: underline;
  color: #900;
}
.box_content a img {
  border-style: none;
  /*transition: 1s ease 0;*/
}
.box_content a img:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
}
.box_content_top {
  float: left;
  width: 520px;
  margin: 0px auto;
  padding: 0px;
}
.box_content_top a {
  text-decoration: none;
}
.box_content_top a:hover {
  text-decoration: underline;
  color: #900;
}
.box_content_top a img {
  border-style: none;
  /*transition: 1s ease 0;*/
}
.box_content_top a img:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
}
.box_footer {
  width: 80%;
  margin: 50px auto;
  padding: 1rem 0px;
  text-align: center;
  color: #FFF;
  background-color: #000;
}
.box_footer a {
  text-decoration: none;
  color: #FFF;
}
.box_footer a:hover {
  text-decoration: underline;
  font-weight: bold;
  color: #FFF;
}
/*=== ボックス終了 =================================*/
/*=== フロートクリア =================================*/
.float_clear {
  clear: both;
}
/*=== 文字枠開始 =================================*/
h4 {
  width: 90%;
  font-size: 2rem;
  line-height: 4rem;
  margin: 0px 0px 2rem 0px;
  padding: 0px 0px 0px 3rem;
  font-weight: bold;
  color: #FFF;
  background-color: #B9121B;
  position: relative;
  border-radius: 22px 22px 22px 22px;
}
h4:before {
  content: "";
  position: absolute;
  background: #eee;
  top: 50%;
  left: 14px;
  margin-top: -10px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  box-shadow: 1px 1px 1px #777 inset;
}
.waku {
  width: 90%;
  font-size: 1.5rem;
  line-height: 3rem;
  margin: 2rem 0px;
  padding: 0px 0px 0px 1rem;
  font-weight: bold;
  color: #FFF;
  background-color: #000;
}
.waku_navi {
  width: 80%;
  font-size: 1rem;
  line-height: 2rem;
  margin: 0px auto 2rem;
  padding: 0;
  text-align: center;
  font-weight: bold;
  color: #FFF;
  background-color: #000000;
}
.waku_top {
  width: 90%;
  font-size: 2rem;
  line-height: 2.8rem;
  margin: 3rem auto;
  padding: 0px;
  font-weight: bold;
  color: #000;
  border-bottom-width: 5px;
  border-bottom-style: solid;
  border-bottom-color: #B9121B;
}
/*=== 文字枠終了 =================================*/
/*=== 水平線装飾 =================================*/
.sen {
  border-top-width: 2px;
  border-top-style: dashed;
  border-top-color: #000;
}
/*=== お問い合わせ装飾 =================================*/
.table_form {
  background-color: rgba(230, 230, 230, 1.00);
  /*background-image: url(img/Top/010-subtle-light-patterns.jpg);*/
}
.table_form td {
  height: 3rem;
  padding-left: 0.5rem;
}
.table_form input, select {
  font-size: 1rem;
  border-radius: 7px;
  border: 0px none; /* 枠線を消す */
  outline: 0px none; /* クリックしたときに表示される枠線を消す */
  height: 2rem;
  padding-left: 0.5rem;
}
.table_form textarea {
  font-size: 1rem;
  border-radius: 7px;
  border: 0px none; /* 枠線を消す */
  outline: 0px none; /* クリックしたときに表示される枠線を消す */
  margin: 0.5rem auto;
  padding: 0.5rem 0 0 0.5rem;
}
.form_button { /*ボタン部分*/
  /*display: block;*/
  width: 25%;
  /*height: 50%;*/
  cursor: pointer;
  padding: 0;
  color: rgba(255, 255, 255, 1.00);
  background-color: rgba(0, 132, 255, 1.00);
  font-weight: bold;
}
/*=== お問い合わせ装飾終了 =================================*/
.table_haikei {
  background-image: url(img/Top/012-subtle-light-patterns.jpg);
}
/*=== テキスト装飾 =================================*/
.text_effect {
  color: #fff;
  background: #000;
  font-size: 52px;
  font-weight: bold;
  text-shadow: 0px 0px 1px #ffffff, 0px 0px 10px #ffd700, 0px 0px 20px #ffd700, 0px 0px 30px #ffd700, 0px 0px 40px #ffd700;
}
/*=== 「新着情報」装飾開始 =================================*/
.box_shinchaku {
  height: 250px;
  width: 90%;
  margin: 3rem auto;
  padding: 0px;
  overflow: auto;
  word-wrap: break-word;
  background-color: #000000;
}
.shinchaku {}
.shinchaku dt {
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: #B9121B;
  margin: 1rem;
  padding: 0px 0px 0px 0.5rem;
  color: #FFF;
}
.shinchaku dd {
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #FFF;
  margin: 1rem;
  padding: 0px 0px 0.5rem;
  color: #E47911;
}
.shinchaku dd a {
  color: #E47911;
  text-decoration: none;
}
.shinchaku dd a:hover {
  font-weight: bold;
  text-decoration: underline;
  color: #E47911;
}
/*===「新着情報」装飾終了 =================================*/
/*=== アンカーリンク装飾 =================================*/
.anchor_link {}
.anchor_link a {
  text-decoration: none;
  color: #000;
}
.anchor_link a:hover {
  font-weight: bold;
  color: #FF0000;
}
/*=== メニュー固定に使用 =================================*/
.fixed {
  position: fixed;
  top: 0;
  width: 13%;
  z-index: 10000;
}
/*=== ボタンナビ開始 =================================*/
#box_button_navi {
  height: 50px;
  width: 100%;
  background-color: rgba(192, 192, 192, 0.3);
  z-index: 50000;
  position: fixed;
  display: block;
  margin: 0px;
  padding: 0px;
  bottom: 0px;
}
.button_navi {
  text-align: center;
  width: 360px;
  margin: 0px auto;
  padding: 0px;
  height: 50px;
}
.button_navi li {
  list-style-type: none;
  float: left;
}
.button {
  text-decoration: none;
  display: block;
  background-color: #051E46;
  border-radius: 10px;
  color: #FFF;
  height: 30px;
  width: 100px;
  line-height: 30px;
  margin: 10px 10px 0px;
}
.button:hover {
  font-weight: bold;
  background-color: #00F;
  position: relative;
  top: 2px; /*下に2px動く*/
  left: 2px; /*右に2px動く*/
}
/*=== ボタンナビ終了 =================================*/
/*=== レシピページ開始 =================================*/
.box_recipe {
  width: 96%;
  height: 750px;
  margin: 2rem auto;
  padding: 0px;
  position: relative;
  background-color: #000;
  /*box-shadow: 7px 7px 7px rgba(51, 51, 51, 0.5);*/
}
.box_recipe ul {
  padding: 0px 0px 0px 1rem;
}
.box_recipe_photo {
  width: 400px;
  height: 234px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 100px;
  left: 10px;
  background-color: #FFF;
}
.box_recipe_photo img {
  width: 380px;
  height: 214px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 10px;
  left: 10px;
}
.box_recipe_material {
  width: 274px;
  height: 235px;
  margin: 0px;
  padding: 0px;
  color: #FFF;
  position: absolute;
  top: 100px;
  left: 420px;
  /*overflow-y:scroll;*/
  overflow-y: auto;
}
.box_recipe_tsukurikata {
  width: 680px;
  height: 380px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 354px;
  left: 10px;
  background-color: #FFF;
  border-radius: 10px;
}
.recipe_tsukurikata {}
.recipe_tsukurikata dt {
  width: 93%;
  margin: 0px 1rem 1rem;
  padding: 0px 0px 0.25rem 0.5rem;
  font-weight: bold;
  border-bottom-width: 1px;
  border-left-width: 5px;
  border-bottom-style: solid;
  border-left-style: solid;
  border-bottom-color: #00F;
  border-left-color: #00F;
}
.recipe_tsukurikata dd {
  width: 95%;
  margin: 1rem;
  padding: 0px;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #000;
}
.waku_recipe_title {
  width: 50%;
  font-size: 1.5rem;
  line-height: 2rem;
  margin: 0px;
  padding: 0px 0px 0px 0.5rem;
  font-weight: bold;
  color: #FFF;
  border-left-width: 5px;
  border-left-style: solid;
  border-left-color: #B9121B;
  position: absolute;
  top: 30px;
  left: 10px;
}
.waku_recipe_material {
  width: 30%;
  margin: 0px auto;
  padding: 5px 0px;
  font-weight: bold;
  color: #FFF;
  background-color: #e47911;
  border-radius: 10px;
  text-align: center;
}
/*=== レシピページ終了 =================================*/
/*=== アコーディオンメニューメイン開始 =================================*/
.menu_title {
  width: 80px;
  font-size: 1rem;
  line-height: 2rem;
  margin: 0px 0px 0px 20px;
  padding: 0px 10px;
  color: #fff;
  border-radius: 3px 3px 0px 0px;
  background: #2f3842;
  text-align: center;
}
#menu {
  width: 200px;
  margin: 0px 0px 0px 20px;
  padding: 0px;
  text-align: center;
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: #B9121B;
  /*box-shadow: 3px 5px rgba(102,102,102,0.5) , -3px 5px rgba(102,102,102,0.5);*/
}
#menu ul {
  margin: 0px;
  padding: 0px;
}
#menu li {
  list-style-type: none;
}
.archive {
  color: #FFF;
  cursor: pointer;
  height: 50px;
  width: 200px;
  padding: 0px;
  margin: 0px;
  background-color: #000;
  /*background-color:rgba(0,0,0,0.7);*/
  display: block;
  line-height: 50px;
  position: relative;
  /*transition: 1s ease;*/
}
.archive:hover {
  font-weight: bold;
  background-color: #E47911;
}
.archive:after {
  display: block;
  position: absolute;
  content: "";
  top: 50%;
  right: 5px;
  width: 0px;
  height: 0px;
  margin-top: -8px;
  border: 8px solid transparent;
  border-left-color: #aaa;
}
/*=== クラス・アクティブ =================================*/
.active {
  background-color: #E47911;
  font-weight: bold;
}
.active:after {
  display: block;
  position: absolute;
  content: "";
  top: 50%;
  right: 5px;
  width: 0px;
  height: 0px;
  margin-top: -8px;
  border: 8px solid transparent;
  border-top-color: #aaa;
}
.archive a {
  text-decoration: none;
  display: block;
  color: #FFF;
  line-height: 50px;
  /*transition: 1s ease;*/
}
.archive a:hover {
  font-weight: bold;
  background-color: #E47911;
}
.subMenu {
  margin: 0px;
  padding: 0px;
}
.subMenu li {
  background-color: #2E2E2E;
  padding: 0px;
  margin: 0px;
  height: 50px;
  width: 200px;
  color: #FFF;
  text-align: center;
  /*display: block;*/
  /*line-height: 50px;*/
  /*transition: 1s ease;*/
}
.subMenu a {
  text-decoration: none;
  display: block;
  color: #FFF;
  line-height: 50px;
  /*transition: 1s ease;*/
}
.subMenu a:hover {
  font-weight: bold;
  color: #000000;
  background-color: #FFFFCC;
  /*border-width: 1px;
	border-style: solid;
	border-color: #B9121B;*/
}
/*=== アコーディオンメニューメイン終了 =================================*/
/*=== イメージビュアー =================================*/
#viewer {
  width: 950px;
  height: 350px;
  text-align: left;
  overflow: hidden;
  position: relative;
  margin: 20px auto;
}
#viewer img {
  top: 0;
  left: 0;
  position: absolute;
}
/*=== カレンダー =================================*/
.calendar {
  width: 200px;
  margin: 0px auto;
  border: 0;
  background-color: #EBEBEB;
}
.calendar td {
  padding: 2px;
  text-align: center;
}
.Sun {
  border: 2px solid #FFF;
  font-weight: bold;
  color: #F00;
}
.Sat {
  border: 2px solid #FFF;
  font-weight: bold;
  color: #00F;
}
.Nor {
  border: 2px solid #FFF;
  font-weight: bold;
}
.waku_calendar {
  width: 80%;
  font-size: 1rem;
  line-height: 2rem;
  margin: 2rem auto;
  padding: 0px;
  text-align: center;
  font-weight: bold;
  border-right-width: 3px;
  border-left-width: 3px;
  border-right-style: solid;
  border-left-style: solid;
  border-right-color: #000;
  border-left-color: #000;
}
/*=== カレンダー終了 =================================*/
/*=== アイコン =================================*/
.icon_up {
  display: block;
  background-image: url(/img/Top/arrow_up.png);
  height: 30px;
  width: 30px;
  float: left;
  margin: 0px -10px 0px 10px;
}
.icon_down {
  display: block;
  background-image: url(/img/Top/arrow_down.png);
  height: 30px;
  width: 30px;
  float: left;
  margin: 0px -10px 0px 10px;
}
.icon_kago {
  display: block;
  background-image: url(/img/Top/kago.png);
  height: 30px;
  width: 30px;
  float: left;
  margin: 0px -10px 0px 10px;
}
/*=== パンくずリスト =================================*/
.breadcrumb {}
.breadcrumb li {
  float: left;
  list-style-type: none;
}
/*=== 余白調整 =================================*/
.table_margin {
  margin: 2rem auto;
  text-align: center;
}
.table_top {
  margin: 0rem auto 2rem;
}
.table_top td {
  padding: 5px 0px;
  text-align: center;
}
/*=== 商品一覧・カテゴリエリア =================================*/
#product_list {
  width: 100%;
  margin: 50px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly; /*均等に配置し周りに同じ大きさの間隔を置く*/
  text-align: center;
}
#product_list li {
  margin-bottom: 50px;
  padding: 0;
  list-style: none;
}
#product_list img {
  height: 150px;
}
.column_2 li {
  width: calc(50% - 20px);
}
.column_3 li {
  width: calc(33.3333% - 20px);
}
.column_4 li {
  width: calc(25% - 20px);
}
.column_5 li {
  width: calc(20% - 20px);
}