@charset "utf-8";
/* ===================================================================
 file name  :dcommon.css
 style info :共通デザイン IE10～のみ。
=================================================================== */

/*----------------------------------------------------
  基本設定、リンクカラーなど
----------------------------------------------------*/
html {
  overflow-x: hidden;
}/* iframe用*/
body {
  letter-spacing: 0.1em;
}
/* font */
#guide section, #guide p,#guide li, .tr dd, .section p,  .section li, #productfreearea_2 p, .subarea p {
  font-size: 1.4rem;
  line-height: 1.6;
}
#productfreearea_2 .text p {
    line-height: 1.5;
}
object, iframe {
  max-width: 100%; /* レスポンシブiframe */
  overflow-x: hidden;
  overflow-y: auto;
}
iframe {
  border: 0 none;
}
blockquote {
  margin-bottom: 1em;
}
article dl {
  margin-bottom: 1.2em;
}
em {
  color: #d15e58;
  font-weight: bold;
  font-style: normal;
}
form dd em.attention {
  display: inline-block;
  margin-top: 5px;
}
em, span.voluntary {
  word-break: break-all;
}
form dt span.voluntary {
  display: block;
  float: right;
  color: #fff;
  background-color: #A7A7A7;
  font-size: 12px;
  padding: 2px 4px 1px 4px;
  border-radius: 3px;
  box-shadow: 0px 0px 5px #CCC;
  margin: 0px 5px;
}
.topicpath {
  background-color: #fff;
  padding: 8px 0 8px;
}
.topicpath .inner {
  margin: 0 auto;
}
.topicpath #topicpath {
  margin-bottom: 0;
}
small {
  color: #AA8000;
}
/*----------------------------------------------------
  ▼ ボックス ▼
----------------------------------------------------*/

.single article#main {
  float: none;
  width: 100%;
  margin: 0 auto;
}
.single article#main>div {
  margin-left: auto;
  margin-right: auto;
}

#main div .inner,.homectg-list.inner, .inner.contentArea {
  background-color: #fff;
  border-radius: 5px;
}
#undercolumn #guide, .inner.contentArea {
  padding: 1.5em;
}
#guide .menuBlock {
  margin-bottom: 20px;
}#guide #undercolumn>.menuBlock {
  display: block;
  width: 100%;
}
.inner .inner {
  padding: 2px 0px 1em 0;
}

#guide section>.inner {
  padding: 1.5em;
  border: 1px solid #ebe8e1;
}
#main div .inner .inner {
  border: 0 none;
}
#undercolumn div .section>.inner {
  margin-bottom: 60px;
}
#undercolumn .inner .inner {
  padding: 0 10px 10px;
}

/* ----------------------------------------------------
  ▼ 部分ボックス ▼
---------------------------------------------------- */
ul.newslist {
  padding: 1em 0.8em;
}
.point {
  border-radius: 5px;
  padding: 18px 24px 12px;
  box-shadow: 0 1px 5px rgba(77, 55, 38, 0.5) inset;
  margin-bottom: 30px;
}
.fb_box {
  text-align: center;
  width: 100%;
  margin: 14px 0;
}

/*------　Facebook いいね　-------------------------------*/
.fb_iframe_widget {
  /*width: auto !important;*/
  margin-top: 2px;
}
.fb_iframe_widget > span {
  vertical-align: baseline !important;
}

/*----------------------------------------------------
  ▼ 見出し：基本 ▼
----------------------------------------------------*/
h4 {
  color: #834141;
  line-heifht: 1.2;
}
.section h4 {
  font-size: 1.4rem;
}
h5 {
  margin-bottom: 6px;
}
td dt {
  font-weight: bold;
  margin-bottom: 4px;
}
/*----------------------------------------------------
  ▲ 見出し：基本 ▲
----------------------------------------------------*/

/*----------------------------------------------------
  見出し：個別
----------------------------------------------------*/

/* -- h1　見出し -- */
#guide h1, h1.h1 {
  color: #70564f;
  font-weight: bold;
  background-color: #fff;
  font-size: 1.8rem;
  text-align: left;
  border-radius: 4px;
  padding: 9px 9px 9px 20px;
  position: relative;
}
#guide h1:before, h1.h1:before {
    background-color: #998681;
    border-left: 4px solid #998681;
    border-radius: 4px;
    content: "";
    display: block;
    height: 25px;
    left: 4px;
    position: absolute;
    top: 5px;
    width: 2px;
}
#guide h2 {
  margin-bottom: 1.3em;
}

.section .heading02, #guide .heading02 {
  line-height: 1.4;
  margin-bottom: 1.18em;
}

.single #main h2.heading01 {
  background-color: #7D0000;
  background-image: none;
  width: 100%;
  padding: 8px 8px 8px 33px;
}

h4.h4, h2.h4, h3.h4, dt.h4 {
  font-size: 1.4rem;
  background-repeat: no-repeat;
  background-position: left top;
  line-height: 1.4;
  margin-bottom: 8px;
}
/* h1 summary texts --- red:#BE000A */


/*---------- Frame, Video ---------*/
.iframe object, .iframe iframe {
  max-height: 700px;
  overflow-y: scroll;/* iframe用. */
}
.accordion .video {
  display: none;
}
.video, .accordion .active + dd.video {
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*============= ▼ Link　▼ ============================= */
/*　▼ 外部リンク　*/
a.ex_link  {
  background: url("/user_data/packages/plg_responsivel0082/img/commonImg/icon/icon_external.png") no-repeat right 50%;
  padding-right: 16px;
}

.bnr a.ex_link, .btn a.ex_link, .friendlink a.ex_link, #footer_sns a.ex_link, #related a.ex_link {
  background-image: none;
  padding-right: 0;
}
.tag a.ex_link, .exnav a.ex_link {
  background-image: none;
}
/*-- ▼ ファイルタイプへリンク ---*/
a[href $='.pdf'] {
padding-right: 20px;
background: transparent url(http://www.f-l-daiichi.com/img/item/icon_pdf.gif) no-repeat center right;
}
svg:hover {
  opacity: 0.8;
}



/*============= ▼ header　▼ ============================= */
#header_utility2 {
  background: #4d4948;
  width: 100%;
  padding: 12px 0 10px 0;
}
#header_utility2 ul {
  margin-bottom: 0;
}
#header_utility2 li {
  float: left;
}
#header_utility2 li a {
 padding: 4px 10px;
}
#header_utility2 li a.ex_link {
 padding-right: 18px;
}
#header_utility2 a:link, #header_utility2 a:hover, #header_utility2 a:active {
 color: #fff;
}
#header_utility2 li:not(:last-child){
  border-right: 1px solid #ebe8e1;
  margin-right: 4px;
}

/*============= ▲ header　▼ ============================= */




/*----------------------------------------------------
  画像
----------------------------------------------------*/
/* ----- 画像 bgなし -----------------------------------*/
.headimg, .img, #product_detail h2.img {
 background: none;
 padding: 0;
 margin-bottom: 10px;
}
.img_noblank, p.btn.img_noblank {
 padding: 0;
 margin-bottom: 0;
}
h1.img_noblank, h2.img_noblank{
  background-image: inherit;
  background-color: transparent;
}
/* ----- 画像 大きい背景のような -----------------------------------*/
.imgwrap {
  position: relative;
}

.zoomin {
  position: rerative;
}
/* ----- 画像 floatして拡大 ------------------------------*/
#productfreearea_2 .subphotoimg, .imgL.zoomin {
  float: left;
  margin: 0 0.6em 1em 1em;
  width: 28.71%;
}
div[id*="freearea"] .zoomin:after, .contentArea .zoomin:after {
  content: url("/user_data/packages/plg_responsivel0082/img/commonImg/icon/icon_zoomin-ss.png");
  position: relative;
  top: -20px;
  left: 4px;
}
.shop_photos .zoomin:after {
 top: -4px;
 left: 0;
}

/* ========== ▲ 画像 ==================== */



/* 仕切り ================================= */
hr.clear {
  display: block; visibility: hidden;
  margin: 0; height: 0; line-height: 0;
}

#summary {
  padding-left:10px;
  border-left:10px solid #AAAAAA;
  margin-bottom: 20px;
}
#main .alt h1, #main .alt h2 {
  margin-bottom: 0;
}

/* 中央そろえ */
.btn {
  text-align: center;
}
p.btn {
  margin-bottom: 28px;
}
/* ボタン [Boot] ----------------------*/
main .bt {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  box-shadow: none;
  font-size: 1.2rem;
  line-height: 1.4;
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 0;
  opacity: 0.66;
  background-image: none;
}
.bt small {
  font-size: 1rem;
}
.bt + .bt {
  margin-left: .4rem;
}
.bt-default, .bt-default small {
  color: #232323;
  background-color: #EBEAE7;
  background-repeat: repeat-x;
  text-shadow: 0 1px 0 #fff;
}
.bt-primary, .bt-success, .bt-info, .bt-warning, .btn-danger {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.bt-default, .bt-default.disabled:hover, .bt-default.disabled:focus {
  border: 1px solid #D1CEC8; /*#ebe8e1*/
}
/* 無効化ボタン - a要素 */
.bt.disabled {
  pointer-events: none;
}
/* blue bt */
.bt-info {
  color: #fff;
}
.bt-info, .bt-info.disabled {
  background-color: #7ab1cc;
}
.bt-info.disabled, .bt-info:hover, .bt-info.disabled:active {
  border: 1px solid #29a6cc;
}

.btn_entry_all {
  clear: both;
  text-align: center;
  margin-bottom: 40px;
}
.btn_entry_all a {
  display: block;
  font-size: 1.4rem;
  background-image: url("../img/commonImg/icon/arrow01_r.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 98% center;
  background-size: 12px 12px;
  background-color: #d1625c;
  color: #fff;
  width: 74%;
  padding: 10px 20px;
  border-radius: 5px;
  margin: 0 auto;
}
.btn_entry_all a:hover, .btn_entry_all a:active {
  background-color: #e59b97;
}

article form.inline {
  float: left;
  width: 47%;
}

/* =================================== ==========================================
  リスト
==================================================================================　*/

.list_s {
  overflow: hidden;
  max-width: 100%;
  padding: 0;
  margin: 0 auto 20px;
}
.list_s li {
  overflow: hidden;
  max-width: 100%;
}
.list_s li {
  position: relative;
  z-index: 10;
  margin: 0;
  padding: 0px 10px 0px 26px;
  line-height: 1.5;
}

.list_s li:before {
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 8px;
  left: 10px;
  width: 8px;
  height: 8px;
  margin-top: -2px;
  background: #e56d65;
}
/* #fff display: block;*/
.list_s li:after {
  content: "";
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 8px;
  left: 5px;
  width: 8px;
  height: 8px;
  margin-top: -2px;
  color: #e56d65;
  background: #fff;
}
.list_s li a:hover:after {
 color: #d9d3c7;
}


/* =================================== ==========================================
  バナー、画像マーク横並び
  =================================== ==========================================　*/
.bnr, .SNSbtn {
  clear: both;
  margin-bottom: 14px;
}
.bnr {
  justify-content: flex-start;
  overflow: hidden;
  margin: 0 -10px 0 0;
}
.bnr, .bnr li, .friendlink li, .SNSbtn li {
  overflow: hidden;
  line-height: 1.3;
}
.friendlink li, .SNSbtn li {
  font-size: 1.2rem;
}
.bnr li {
  max-width: 49.29%;
  min-width: 12%;
  min-height: 18px;
  margin: 0 10px 12px 0;
}
#product_detail .bnr li, .inner .section .bnr li {
  max-width: 48.5%;
}

.bnr-list__items li {
  padding-bottom: 18px;
}
.bnr li p {
  margin-top: 6px;
  margin-bottom: 4px;
}
li a .linktxt {
  overflow: hidden;
  display: block;
  text-align: left;
  font-weight: bold;
}

.bt + .lead {
  margin-top: 5px;
}

/* ▼ category pickup ▼ */
h2.pickupctg__heading {
  background-color: #473f3c;
}

/* ▼ home スタッフが試しました　*/
.product_item .lead {
  color: #333;
  font-size: 12px;
  line-height: 1.5;
  padding-top: 5px;
  margin: 4px 0 6px;
  overflow: hidden;
}
/* ▲ home スタッフが試しました　*/

/* ============================
  ▼ home main カテゴリ
=============================== */
.homectg-list {
  margin: 6px auto 0;
}
.homectg-list.inner {
}
h2.homectg-list__heading {
  background: #473f3c;
  margin: 0 0 30px;
}
.homectg-list__info {
  line-height: 1.7;
  padding: 8px 0 8px;
  margin-bottom: 30px;
}
.homectg-list__items {
  font-weight: bold;
  margin-bottom: 40px;
}
.homectg-list__items li {
  float: left;
  width: 25%;
  min-height: 55px;
  border-bottom: 1px dotted #B5B19F;
}

.homectg-list__items a {
  display: table;
  padding: 8px 4% 2px;
}
.homectg-list__items .col2 a {
  padding-left: 2%;
}
.homectg-list__items .col3 a {
  padding-left: 0;
}
.homectg-list__items .listimg, .homectg-list__items .txt {
  display: table-cell;
  vertical-align: middle;
}
.homectg-list__items .col2 .listimg {
  width: 25.2%;
}
.homectg-list__items .col3 .listimg {
  width: 31%;
}
.homectg-list__items .listimg {
  min-height: 40px;
  padding-right: 6px;
}
.homectg-list__items .txt {
  padding-right: 4px;
  line-height: 1.4;
}
.homectg-list__items .lead {
  font-weight: normal;
  line-height: 1.4;
  padding: 4px 0 0;
}
/* ▲ home main カテゴリボタン　*/

/* 生産者からメッセージ */
.maker_voice {
  background: #fff;
  border: 4px solid #362e2b;
  padding: 0 10px 0;
  margin:  20px 0 20px;
}
.maker_voice h3 {
  overflow: visible;
  color: #fff;
  background: none repeat scroll 0 0 #362e2b;
  width: 107.1%;
  padding: 4px 4px 0;
  margin: 0 0 6px -10px;
}
.maker_voice_ttl__icon {
  float: left;
  width: 3.6rem;
}
.maker_voice_ttl__text {
  padding: 6px 10px 10px 2px;
}
.maker_voice .imgL {
  margin-right: 20px;
}
.maker_voice .imgL img {
  border-radius: 50%;
}
.maker_voice .text {
  margin: 20px 0 0;
}

/* 外部紹介バナー　*/
.friendlink {
  padding: 0 14px 0 14px;
  margin: 0 0 12px 0;
}
.friendlink .bnr {
  margin: 0 -42px 12px 0;
}
.friendlink .bnr li {
  margin: 0 20px 10px 0;
}
/*   margin: 0 42px 10px 0; */

/*　商品詳細エリア　横並び　bnr　*/

#main .mark {
  margin-right: -20px;
}
ul.mark {
  padding-top: 8px;
  padding-bottom: 8px;
}/* border: 1px dotted #707070;*/
.mark li {
  float: left;
  margin-right: 20px;
  margin-bottom: 4px;
}

/* =============================================================================
  順序
  =============================================================================　*/
.ol {
   margin-bottom: 24px;
}
.ol li {
  background-attachment: scroll;
  background-color: transparent;
  background-image: url(/user_data/packages/plg_responsivel0082/img/commonImg/icon/ol-01.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 20px auto;
  min-height: 28px;
  padding:0px 0 0px 28px;
}
#guide .ol li {
  background-size: 2.2rem;
}
.ol .no2 {
  background-image: url(/user_data/packages/plg_responsivel0082/img/commonImg/icon/ol-02.png);
}
.ol .no3 {
  background-image: url(/user_data/packages/plg_responsivel0082/img/commonImg/icon/ol-03.png);
}
.ol .no4 {
  background-image: url(/user_data/packages/plg_responsivel0082/img/commonImg/icon/ol-04.png);
}
.ol .no5 {
  background-image: url(/user_data/packages/plg_responsivel0082/img/commonImg/icon/ol-05.png);
}
.ol .no6 {
  background-image: url(/user_data/packages/plg_responsivel0082/img/commonImg/icon/ol-06.png);
}
.ol .no7 {
  background-image: url(/user_data/packages/plg_responsivel0082/img/commonImg/icon/ol-07.png);
}
.ol .no8 {
  background-image: url(/user_data/packages/plg_responsivel0082/img/commonImg/icon/ol-08.png);
}
.ol .no9 {
  background-image: url(/user_data/packages/plg_responsivel0082/img/commonImg/icon/ol-09.png);
}
.ol .no10 {
  background-image: url(/user_data/packages/plg_responsivel0082/img/commonImg/icon/ol-10.png);
}
.ol .no11 {
  background-image: url(/user_data/packages/plg_responsivel0082/img/commonImg/icon/ol-11.png);
}
.ol .no12 {
  background-image: url(/user_data/packages/plg_responsivel0082/img/commonImg/icon/ol-12.png);
}
/*----------  List style: none ----------- */
.ol li, main li {
  list-style: none;
}

/* --- 流れ、作り方 ------------------------------------*/
.flow ol {
  padding: 0.4rem 1rem;
  margin-left: 0;
}
.flow li {
  padding: 0;
  margin-bottom: 20px;
  margin-top: 14px;
  border-bottom: 0 none;
}
main .flow li {
  margin-bottom: 16px;
  margin-top: 0;
}
.flow li .photo {
  float: right;
  margin-left: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.flow_vertical__list li {
  border-bottom: 1px dotted #B5B19F;
}

.flow_vertical__list .flow01__num {
  float: left;
  width: 32px;
}
#main .flow .text {
  line-height: 1.4;
}
.flow_vertical__list .text {
  float: left;
}


/* =================================== ==========================================
  カテゴリボタン・バナー
 =================================== ========================================== */
.category_nav_btn {
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: hidden;
  width: 103%;
  margin-right: -10px;
}
.category_nav_btn li {
  float: left; /* for mac safari */
  margin: 0 10px 14px 0;
  max-width: 49.29%;
  min-width: 12%;
  min-height: 20px;
}
.category_nav_btn li a {
  display: block;
  width: 100%;
}
.category_nav_btn li a img {
  display: block;
  min-width: 44px;
  margin: 0 auto;
}

/* ---  カテゴリボタン・バナー：メーカー小画像 --- */
#categoryfreearea .ctg_maker {
  justify-content: flex-start;
  width: 103%;
  margin-right: -10px;
  overflow: hidden;
}
#categoryfreearea .ctg_maker li {
  margin-right: 10px;
  margin-bottom: 8px;
}

/*====================================================
    table 表
====================================================*/
caption {
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
  padding-bottom: 4px;
}
table {
  word-break: break-all;
  word-wrap: break-word;
}
main form .table {
  max-width: 946px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}
.section .table  {
  margin-bottom: 30px;
}
th[scope="row"], .product-box th {
  vertical-align: top;
  text-align: left;
  padding: 8px 16px;
}
th[scope="col"] {
  vertical-align: middle;
}

/* =============================================================================
  商品詳細　table
 ============================================================================= */
.product-box {
  width: 100%;
  margin: 4px 0 16px;
}
.product-box th {
  padding: 10px;
}
.product-box th[scope="row"], .productmac th {
  width: 23.4%;/*150px相当 */
  min-width: 124px;
}

.product-box th.s01 {
  width: 15%;
  min-width: 82px;
}
.product-box td {
padding: 8px 10px;
}

/* --- ▼ mediaQuery  ----------------- */
  @media screen and (min-width: 769px) {
   .bnr-list__items li {
      max-width: 48.6%;
    }
    #categoryfreearea>.inner {
      padding: 1.8em;
    }
    .imgwrap .text {
      position: absolute;
    }
  }
  @media screen and (max-width: 768px) {
    .bnr-list__items li {
      max-width: 48.06%;
    }
    #categoryfreearea>.inner {
      padding: 1.2em;
    }
    #product_detail {
      background: #fff;
      padding: 1.2em;
    }
    .staffvoice-inner li {
      width: 31.05%;
    }
  .staffvoice-inner li a {
      overflow: hidden;
  }
  .category_nav_btn li {
      max-width: 47.79%;
      min-width: 12%;
  }
    #categoryfreearea .ctg_maker li {
    width: 12.33%;
    margin: 0 10px 6px 0;
    }
    .homectg-list__items li {
      height: 9.5rem;
    }
  }



/* ---  ▼ カテゴリボタン slim ▼ ------------------------------------- */
.category_nav_s {
  padding: 10px 0px 0;
}
.category_nav_s .menuBlock {
  width: 103.05%;
  padding: 0 0 10px;
  margin: 0 -10px 14px 0;
}
.category_nav_s .menuBlock {
  justify-content: flex-start;
}
 /* border-bottom: 1px dashed #c4cac9 #b5b19f*/
 /* */
.category_nav_s .menuBlock li {
  overflow: hidden;
  width: 23.58%;
  padding: 0 0 0 4px;
  margin: 0 10px 2px 0;
  border-bottom: 1px dotted #94907b;
}
.category_nav_s .menuBlock li a {
  display: block;
  background-repeat: no-repeat;
  background-position: no-repeat left top;
  width: 100%;
  padding: 3px 4px 3px;
  min-height: 1em;
 }

.category_nav_s .menuBlock li .cs {
  background-image: url("/user_data/packages/plg_responsivel0082/img/plg_shiro8_categorycontents/bnr-ctglist-79-80_cs.jpg");
}
.category_nav_s .menuBlock li .pc {
  background-image: url("/user_data/packages/plg_responsivel0082/img/plg_shiro8_categorycontents/bnr-ctglist-79-81_pc.jpg");
}
.category_nav_s .menuBlock li .opc {
  background-image: url("/user_data/packages/plg_responsivel0082/img/plg_shiro8_categorycontents/bnr-ctglist-79-312_opc.jpg");
}
.category_nav_s .menuBlock li .squareplate {
  background-image: url("/user_data/packages/plg_responsivel0082/img/plg_shiro8_categorycontents/bnr-ctglist-79-89_squareplate.jpg");
}
.category_nav_s .menuBlock li .settlementdish {
  background-image: url("/user_data/packages/plg_responsivel0082/img/plg_shiro8_categorycontents/bnr-ctglist-79-84_settlementdish.jpg");
}
.category_nav_s .menuBlock li .bowl {
  background-image: url("/user_data/packages/plg_responsivel0082/img/plg_shiro8_categorycontents/bnr-ctglist-79-83_bowl.jpg");
}
.category_nav_s .menuBlock li .heatdish {
  background-image: url("/user_data/packages/plg_responsivel0082/img/plg_shiro8_categorycontents/bnr-ctglist-79-84_heatdish.jpg");
}
.category_nav_s .menuBlock li .cutlery {
  background-image: url("/user_data/packages/plg_responsivel0082/img/plg_shiro8_categorycontents/bnr-ctglist-79-332_cutlery.jpg");
}
.category_nav_s .menuBlock li .glass {
  background-image: url("/user_data/packages/plg_responsivel0082/img/plg_shiro8_categorycontents/bnr-ctglist-79-85_glass.jpg");
}
.category_nav_s .menuBlock li .deskattachment {
  background-image: url("/user_data/packages/plg_responsivel0082/img/plg_shiro8_categorycontents/bnr-ctglist-79-86_deskattachment.jpg");
}
.category_nav_s .menuBlock li .tb_buffet {
  background-image: url("/user_data/packages/plg_responsivel0082/img/plg_shiro8_categorycontents/bnr-ctglist-79-87_tb_buffet.jpg");
}
.category_nav_s .menuBlock li .coffeeteaarticles {
  background-image: url("/user_data/packages/plg_responsivel0082/img/plg_shiro8_categorycontents/bnr-ctglist-79-338_coffeeteaarticles.jpg");
}
.category_nav_s .menuBlock li a span {
  display: block;
  padding-top: 8px;
  padding-left: 48px;  min-height: 48px;
}

/* --- ページ内、ミニリンク ----*/
ul.pageLinks {
  margin: 14px 10px 28px;
  background-color: #ebe8e1;
  padding: 8px 20px 6px;
}
#main ul.pageLinks li {
  position: relative;
  margin-right: 20px;
  margin-bottom: 8px;
  line-height: 1.8;
  display: inline-block;
}

/* ------- Accordion --------------------- */
.pageLinks li span.toggle, .accordion span.toggle {
  background: url("/user_data/packages/plg_responsivel0082/img/icon_down01.png") no-repeat scroll center center / 12px 12px #d9d3c7;
  top: 0.5em;
  height: 22px;
  width: 22px;
  margin-left: 6px;
  display: inline-block;
}
.ex_recipe_vtr .active>span.toggle {
  background: #d9d3c7 url("../img/icon_up01.png") no-repeat scroll center center / 12px 12px;
}
dl .watch_vtr, .ex_recipe_vtr dt.watch_vtr {
  background: url(../img/icon-watch-vtr.png) 8px center no-repeat #ebe8e1;
  padding-left: 48px;
}
.exnav ul {
  float: right;
}
.exnav li {
  float: left;
  margin-right: 6px;
}
/* ------- ▲ Acordion Btn ▲ --------------------- */
.tabNav {
 width: 100%;
}


/*-- 引用 -------------------------------*/
blockquote {
  color: #333;
  background-color: #EFEFEF;
  background-image: url(https://www.f-l-daiichi.com/image/blockquote_bgl01.gif);
  background-repeat: no-repeat;
  width : 90%;
  padding: 16px 12px 6px 32px;
  }
  blockquote p {
  margin-left : 0;
}

/*----------------------------------------------------
  汎用class
----------------------------------------------------*/
/* clearfix */
.clearfix:before, .clearfix:after,
.goodslist:before, .goodslist:after,
blockquote:before, blockquote:after, q:before, q:after {
  content: "";display: table;
}
.clear, .clearfix, .clearfix:after {
  clear: both;
 　zoom: 1; /* IE */
}
hr.page-break {
  display: none;
}
.section  {
  margin-bottom: 26px;
}

/* --- 英字を大文字 ----*/
.txtBigLetter {
text-transform: uppercase;
}
/*------ inline to block -----------*/
#Ranking .name {
  display: block;
}
.bnr .col3, .category_nav_btn .col3 {
  width: 31.67%;
}

/* --▼ 幅左右されず横並び ------------*/
.section, #main　section div, .text,
#main h2, article#main　section h3, section h4,
#main　p, section ul,
#categoryfreearea {
  overflow: hidden; _zoom: 1;
}
.section, #categoryfreearea {
　width: 100%;
}
#main .text {
  min-width: 130px;
  text-shadow:
  -1px -1px 0px rgba(255, 255, 255, .75), 1px -1px 0px rgba(255, 255, 255, .75),
  1px 1px 0px rgba(255, 255, 255, .9), -1px 1px 0px rgba(255, 255, 255, .75);
}
#main .text div[class^="button"] {
  text-shadow: none;
}
/* imgL,R　▲ 幅左右されず横並び --*/
.imgR {
  float: right;
  margin: 0 0 10px 10px;
}
.imgL {
  float: left;
  margin: 0 10px 10px 0;
}
.flow_vertical__list .imgL {
  margin-right: 2rem;
}
#productfreearea_2 .imgR, #productfreearea_2 .imgL {
  max-width: 37%;
}
.photo {
  margin-bottom: 8px;
  overflow: hidden;
}

.goodslink {
  margin-bottom: 40px;
}

p.date {
  font-size: 90%;
  color: #666666;
  text-align: right;
  clear: both;
}
/* map */
.access {
}
.access_map {
  text-align: center;
  position: relative;
  padding-bottom: 60%;
  height: 0;
  overflow: hidden;
}
.access_map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------- ▼ Accordion(.ex_recipe_vtr) --------------------- */
.ex_recipe_vtr dt {
  font-size: 1.5rem;
  font-weight: bold;
  color: #38322f;
  background-color: #ebe8e1;
  padding: 1em 0.8em;
  border: 1px solid #9f9b84;
  border-radius: 3px;
  cursor: pointer;
}

/* Acordion Contents */
.ex_recipe_vtr dd {
  padding: 0 1em 0.8em;
  margin: 0;
}

/* ------- ▲ Accordion(.ex_recipe_vtr) --------------------- */

/*　============= ▼ ガイド　注意事項 box =============　*/
#undercolumn_shopping .attention_box {
  width: 80%;
  border: 2px solid #d9d3c7;
  padding: 20px 20px 6px 20px;
  margin: 20px auto 16px auto;
}

/*---------執筆者/人物紹介box----------------------*/
.profile {
  border-top: 3px solid #EFA0A5;
  border-bottom: 3px solid #EFA0A5;
  padding-top: 14px;
  margin-bottom: 18px;
  padding-right: 6px;
  padding-left: 6px;
}
.profile .man {
  font-size: 107.75%;
}
/* -- maker等画像と説明リンク -- */

/*====== colmn等top nav ============================== */



/*========== ▼ 注意文など ============================== */
small, .review .note, .stReviewList .note {
  font-size:1.15rem;
}
.stReviewList .note {
  border-bottom: 2px dotted #D9BFBF;
}
dl.note {
  background-color: #FBFBFB;
  padding: 9px;
  border: 1px dotted #CCCCCC;
  max-width: 98%;
  margin-right: auto;
  margin-left: auto;
}
.note dt {
  margin-bottom: 4px;
  color: #555555;
}
.note dd {
  font-size: 92.3%;
}
.review .note {
  color: #828282;
}
/* ▼ 補足注意box */
.aside {
  padding: 8px 16px 3px;
  line-height: 1.3;
  border-top: 1px solid #777777;
  border-bottom: 1px solid #777777;
  background-color: #FAFAFA;
}

/*----------------------------------------------------
  #
----------------------------------------------------*/
#news_area.main_v, .homectg-list, .topicpath .inner {
  max-width: 980px;
}

/*----------------------------------------------------
  # news 新着情報　カテゴリトップ
----------------------------------------------------*/
#news_area.main_v {
  margin: 6px auto 0;
}
/* ★9/25 memo: 980pxで◆四角いnews見出しをfloat。　*/
#news_area .news-area__heading {
    background: url("../img/contents/ttl-bg_h2-02.png") no-repeat scroll left center;
    margin: 0 1px;
    padding: 23px 0 6px 33px;
}
#categoryfreearea #news_area {
  width: 100%;
}
#categoryfreearea #news_area dl {
  width: 100%;
}
#categoryfreearea #news_area .newslist {
  padding: 14px 18px 4px 18px;
}
#categoryfreearea #news_area .newslist dt {
  float: left;
  width: 14.5em;/* 字の幅 9em */
  padding: 0.7em 0.35em 0.7em 0;
  clear: both;
}
#categoryfreearea .newslist dt span {
  height: 1.42em;
  padding-top: 2px;
}
#categoryfreearea #news_area .date {
  width: 8.7em;
  padding-right: 6px;
}
#categoryfreearea #news_area .mark,#categoryfreearea #news_area .date {
  width: 10em;
}
#categoryfreearea #news_area dt img:first-child {
  float: left;
  padding: 0px 3px 0px 0px;
}
#categoryfreearea #news_area dl img {
  margin-bottom: 6px;
}
#categoryfreearea #news_area .newslist dd {
  display: block;
  border-top: 1px solid #ebe8e1;
  padding: 0.7em 0.35em;
  margin-left: 14.5em;/* 字の幅 */
  width:　75%;/* 全幅-(dl＋padding) */
}

#categoryfreearea #news_area .newslist .fst {
  border-top: none;
}
#categoryfreearea #news_area h3.news_title {
  text-decoration: none;
  padding: 0;
  margin: 0 0 0.74em;
}
#categoryfreearea #news_area dd p {
  padding-left: 12px;
  margin-bottom: 2px;
}
#categoryfreearea #news_area .news_title:hover,#news_area dt:hover {
  cursor: default;
}

/*----------------------------------------------------
  #contents
----------------------------------------------------*/
/* --- ▼ サイトマップ系　--- */
div.sitemap {
  margin-right: -26px;
}
.sitemap .section {
  width: 296px;
}#sitemap .section {
  width: 296px;
}
#sitemap .section, .sitemap .section {
  float:left;
  margin-right:26px;
  padding-top: 14px;
}
#categorymap .sitemap .section h3, #categorymap .sitemap .section ul {
}
#categorymap .section h3 {
  padding: 0px;
}
#categorymap .section>ul {
  margin-left: 12px;
}
/* ▼ 商品詳細 表 =============================================  */
th[scope="row"] .photo, td .photo, .materials td {
  vertical-align: top;
}
.product-box {
  border-top: 1px solid #DAD5C8;
}
.product-box th, .product-box td {
  background-color: #fff;
  border-bottom: 1px solid #DAD5C8;
  padding: 8px 16px;
}
.product-box th {
  background-color: #ebe8e1;
}
.product-box td, .table_spc td {
  vertical-align: top;
}
.product-box td {
  border-left: 1px solid #fff;
}

#product_detail td > *:last-child,
#product_detail td > *:last-child > *:last-child,
#product_detail td > *:last-child > *:last-child > *:last-child {
  margin-bottom: 0;
}/*- 最後の要素にある余白消し--  */

.product-box thead, .product-box th[scope="col"], .table_spc th {
  color: #000;
  background: #e7e3da;
}
.product-box thead, .table_spc th[scope="col"] {
  padding: 6px 6px;
}
/* ▲ 商品詳細 表 =============================================  */
.product-box .s1,.table_spc .s1 {
  width: 10%;
  max-width: 120px;
}
.product-box .s02 {
  max-width: 7rem;
}

/* ▼ guide 表 =============================================  */
#guide .product-box th {
  min-width: 90px;
  width: 20%;
}
.product-box .txt, .table_spc .txt {
  width: 31%;
  min-width: 19em;
}

/* ▼ センタリング表(スペック,料金表) ========================================  */
.table_spc {
  position: relative;
  border-collapse: separate;
  border-left: 0 none;
  border-spacing: 0;
  margin: 16px auto 20px;
}
.table_spc caption {
  border-bottom: 3px solid #362e2b;
}
#guide .table_spc {
  max-width: 94%;
  min-width: 76%;
}
.table_spc tr:first-child {
  border-top: 1px solid #DAD5C8;
}
.table_spc th[scope="col"] + th, .table_spc td + td, .x_scroll_box td + td {
  border-left: 1px solid #DAD5C8;
}
.x_scroll_box tr th:last-child, .x_scroll_box table td:last-child {
  border-right: 0 none;
}
.table_spc th, .table_spc td {
  border-bottom: 1px solid #DAD5C8;
  padding: 6px 8px;
}
.table_spc th, .table_spc th + th {
  min-width: 53px;
}
.table_spc th[scope="row"] {
  color: #fff;
  background-color: #706560;
  border-right: 1px solid #DAD5C8;
}
.table_spc.shop_info{
  width: 100%;
}
.table_spc th a {
  color: #eee;
}
.product-box.shop_info th {
  color: #444;
  min-width: 13rem;
}
/* ▲ センタリング表(スペック,料金表) ==================== */

/* ▼ ==== 材料表 ======================================== */
#main div.materials h2 {
  margin-top: 0;
  margin-bottom: 0;
}
#main table.materials th, #main table.materials td {
  border-right: 0;
  border-left: 0 none #FFF;
  border-top: 0;
  border-bottom: 1px solid #999;
}
#main table.materials th {
  min-width: 90px;
  padding: 6px;
}
table.materials td {
  min-width: 21%;
  max-width: 46%;
  padding-top: 6px;
  padding-bottom: 6px;
}
table.materials .amount {
  text-align: right;
  padding: 8px 6px;
}
/*　---------- 一覧サムネイル表 -----------------------　*/

/*----------------------------------------------------
  #main
  メイン
----------------------------------------------------*/
#product_detail #sub_area .subtext {
  background-color: #fff;
}
/* Number text右 */
.num {
  text-align: right;
}

/* ===============================================
  ▼ Flex ▼
 ================================================ */
main .menuBlock {
  display: -moz-box;
}/*↑　guideにあたるとガイドトップ崩れる　*/

.bnr, .staffvoice-inner,
.category_nav_s .menuBlock, .flow .menuBlock,
.categoryRanking_area .ranklist {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  display: flex;
  display: -ms-flexbox; /* IE10 */
}
/* .category_nav_btn, */

/* ===============================================
  ▼ 商品カテゴリ一覧 ▼
 ================================================ */
/*　---------- ▼ ランキング：商品カテゴリ -----------------------　*/
.categoryRanking_area {
  background-color: #fff;
  padding-bottom: 8px;
  margin-bottom: 30px;
}
#main .categoryRanking_area h2.heading01 {
  background-position: left -6px;
  width: 113.5%;
  padding: 10px 0 4px 33px;
}

.categoryRanking_area .ranklist {
  justify-content: flex-start;
  overflow: hidden;
  margin: 0 -10px 0 0;
}
.categoryRanking_area .ranklist li {
  list-style-type: none;
  width: 19.973%;
  border-right: 10px solid transparent;
  vertical-align: top;
}
.categoryRanking_area .ranklist li p.rank {
  margin-bottom: 0;
}

.categoryRanking_area .rankitem {
 border: 1px solid #cccccc;
 padding: 10px 10px 10px 10px;
 -webkit-box-shadow:0 0 2px 2px rgba(0, 0, 0,0.1) inset;
 -moz-box-shadow:0 0 2px 2px rgba(0,0,0,0.1) inset;
 box-shadow:0 0 2px 2px rgba(0,0,0,0.1) inset;
}
.rankitem a {
  display: block;
  overflow: hidden;
  width: 100%;
}
.rankitem .photo {
  display: block;
  float: none;
  margin: 0 auto 6px auto;
}
.rankitem span {
  font-size: 1.2rem;
  display: block;
  width: 100%;
}


/*　---------- ▼ 詳細検索box ▼ -----------------------　*/
.itemsearch {
  margin-bottom: 18px;
  width: 100%;
}
.itemsearch .search_box {
  min-height: 100px;
  padding: 10px 10px 0px 10px;
  margin-bottom: 20px;
}
.itemsearch .menuBlock, .itemsearch .function {
  overflow: hidden;
  padding: 0 0 10px;
  margin: 0 -10px 20px 0px;
  border-bottom: 1px dashed #c4cac9;
}
.itemsearch .function {
}
.itemsearch .menuBlock li, .itemsearch .function li {
  float: left;
  font-size: 1.23rem;
  position: relative;
  margin: 0 10px 8px 0;
}
.itemsearch .menuBlock li {
  width: 15.2%;
}
.itemsearch .menuBlock li a {
  display: block;
}
.itemsearch .menuBlock li img {
  margin: 0 5px 0 0px;
}
.itemsearch .menuBlock li span {
  display: inline-block;
  position: absolute;
  top: 0.345em;
}
.itemsearch .function li {
  width: 15.2%;
  margin: 0 10px 0 0;
}

/*======▼ 関連記事box ▼======================*/
#related, #related ul {
  overflow: hidden;
}
#related {
  min-width: 304px;
  margin-bottom: 16px;
}
#related ul {
  background: #fff;
  border-bottom: 1px solid #9f9b84;
  border-top: 1px solid #9f9b84;
  margin-right: -20px;
  padding: 8px 10px 0;
  max-width: 105.63%;
}
#related h3 {
  background: none repeat scroll 0 0 #362e2b;
  padding: 4px 4px 0 4px;
  margin-bottom: 2px;
}
#main #related li {
  overflow: hidden;
  float: left;
  margin: 0 20px 6px 0;
  width: 30.336%;
}
#main .inner #related li {
  width: 30.3%;
}
#related li a {
  display: table;
}
#related li .listimg, #related li .txt {
  display: table-cell;
  vertical-align: top;
  overflow: hidden;
  height: 3.7em;
}
#related li img {
  max-width: 50px;
  margin-right: 6px;
  border: 1px solid #d9d3c7;
}
#related .txt {
  font-size: 1.2rem;
  min-width: 98px;
}
/*======▲ 関連記事box▲ ======================*/

/*　---------- ▼ ランキング（home） -----------------------　*/
#Ranking {
  width: 624px;
  margin-left: 4px;
  background-color: #dddddd;
  padding: 6px 4px;
  margin-right: -4px;
  margin-bottom: 10px;
  zoom: 1;
}
#Ranking li {
  float: left;
  width: 116px;
  margin-right: 8px;
  background-color: #E9E9E9;
}

/* --- ▲ ランキング　-----*/


/* --- column
 ------------------------------------------------------------*/

/* ===============================================
    ガイド
  ================================================ */
#guide {
  background-color: #fff;
}
#guide #undercolumn .menuBlock {
  margin-right: -10px;
}
#guide .menuBlock>.section {
  float: left;
  width: 48.5%;
  margin-right: 10px;
  margin-bottom: 14px;
}
dl#about_ci　{
  margin: 10px 12px 20px 12px;
}
#main #about_ci dt {
  color: #888;
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 16px;
}

/* ================ ▼ 商品詳細 ▼ ==========================================*/

/* --------- ▼商品詳細「スタッフレビュー」 ----------------*/
div.stReviewList {
  background-color: #fff;
  padding: 8px 18px 10px 14px;
  border: 1px solid #9f9b84;
  border-radius: 5px;
  margin-bottom: 20px;
}
#product_detail h2.stReviewList {
  background: none repeat  #802626; /* html変更しレッドに */
  padding: 0;
  margin-left: -13px;
  margin-bottom: 8px;
}
.stReviewList .Rvsec {
  padding-top: 8px;
}
#main .Rvsec .inner {
  background-color: transparent;
  border: 0 none;
}
.stfReviewTit {
  color: #80764d;
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 1.1em;
}
/* --------- ▲ 商品詳細「スタッフレビュー」 ----------------*/


/*===== ▼ 商品詳細 [ メーカー/ブランドについて ] ▼============================= */
.maker_info {
  border: 1px solid #CCCAC4;
  background-color: #fff;
  padding: 10px 8px 0 0;
  margin-left: auto;
  margin-right: auto;
}
#productfreearea_2 .maker_info .imgL {
  margin-right: 40px;
  max-width: 29%;
}
.maker_info .info_logo {
  padding-left: 17px;
}
/*===== ▲ 商品詳細 [ メーカー/ブランドについて ] ▲ ============================ */


/*=====▼ 商品詳細 おすすめレシピ ▼　======================================== */
.section-recipe_area {
  padding: 16px 20px 18px;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: -20px;
}
.section-recipe_area .recipe_item {
  float: left;
  overflow: hidden;
  background-color: transparent;
  background-position: 0 0;
  width: 45.1%;
  margin-right: 20px;
}
.section-recipe_area .sec_recipe {
  padding: 8px 0 14px;
}
.section-recipe_area .recipe_item h3 {
  font-size: 123.1%;
  color: #4c0f0f;
  background-image: url(/recipe/img/ttl-recipe-icon-arrange.gif);
  background-repeat: no-repeat;
  background-position: 0 center;
  padding-left: 32px;
  background-attachment: scroll;
  background-color: transparent;
  padding-top: 4px;
  padding-bottom: 7px;
  border-bottom: 3px solid;
}
.section-recipe_area .recipe_item .sec_recipe .recipe_img {
  display: block;
  margin-bottom: 4px;
}
#product_detail .sec_recipe .recipe_img {
  max-height: 220px;
}
.section-recipe_area .recipe_item .sec_recipe .recipe_img {
  margin-right: auto;
  margin-left: auto;
}
/* table */
.materials {
  font-size: 1.2rem;
  width: 100%;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 8px;
}
.section-recipe_area .recipe_item table.materials th,.section-recipe_area .recipe_item table.materials td {
  border-right-width: 0;
  border-left-width: 0;
  border-right-style: none;
  border-left-style: none;
  border-top-width: 0;
  border-top-style: none;
}
.section-recipe_area .recipe_item table.materials th,
.section-recipe_area .recipe_item table.materials td {
  border-bottom: 1px dotted #b5b19f;
}
.section-recipe_area .recipe_item .materials th {
  background-color: #F5F4F3;
  min-width: 150px;
}
.section-recipe_area .recipe_item table.materials td {
  padding-right: 6px;
  padding-left: 6px;
}
.recipe_item p.r_explanation {
  font-size: 1.2rem;
  margin-top: 8px;
  clear: both;
}
.section-recipe_area .recipe_item .sec_recipe ul {
  margin-top: 12px;
}
.section-recipe_area .recipe_item .sec_recipe ul li {
  padding: 0 2px 0 20px;
  width: 168px;
}
.section-recipe_area .see_details {
  text-align: right;
  clear: left;
}

/* --------- ▼ 商品詳細「エスプレッソ豆 (F＆L)」 ----------------*/
.box_FLibsellpoint {
  background-attachment: scroll;
  background-color: #504234;
  background-image: url("/user_data/packages/plg_responsivel0082/img/plg_shiro8_productcontents/56-57_fl-sellpoint-bg.png");
  background-position: 0 0;
  background-repeat: repeat;
  margin: 0 auto 0;
  padding-bottom: 2px;
  padding-top: 32px;
}
.box_FLibsellpoint .photo {
  float: left;
  margin-right: 20px;
  padding-left: 28px;
}
.box_FLibsellpoint ul {
  float: left;
  overflow: hidden;
  width: 314px;
}
#main .box_FLibsellpoint li {
  background-color: #fff;
  background-image: none;
  margin-bottom: 38px;
  padding: 16px 16px 8px;
}
.box_FLibsellpoint h3 {
  border-bottom-style: none;
  margin-bottom: 0;
  padding: 0;
}

/* --------- ▲ 商品詳細「エスプレッソ豆 (F＆L)」 ----------------*/

/* --------- ▼ 商品詳細「エスプレッソ豆 (クィート)」 ----------------*/
.quitoimport {
  background-image: url("/user_data/packages/plg_responsivel0082/img/plg_shiro8_productcontents/56-59_qui-spoint-bg.png");
  background-position: left top;
  background-repeat: repeat;
  padding-bottom: 16px;
  padding-left: 16px;
  padding-right: 16px;
  margin-bottom: 20px;
}
.quitoimport h2 {
  background: none;
  padding: 0;
}
.quitoimport h3 {
  color: #554000;
  font-family: Georgia,"Times New Roman","メイリオ",Meiryo;
  margin-top: 24px;
  border-bottom: 1px solid #f9f9f7;
  font-size: 123.1%;
  padding: 0 8px 0;
}
.quitoimport h3 span {
  border-bottom: 3px solid #b1a889;
  padding-bottom: 4px;
  display: block;
}
.quitoimport ul li {
  background-image: url("/user_data/packages/plg_responsivel0082/img/arrow_r01.png");
  background-position: left top;
  background-repeat: no-repeat;
  margin-bottom: 4px;
  padding-left: 32px;
  min-height:24px;
}
/* --------- ▲ 商品詳細「エスプレッソ豆 (クィート)」 ----------------*/

/* =====================================
    footer_shopping
  ===================================== */
.footer_shopping {
  margin-top: 2.4rem;
  margin-bottom: 1.6rem;
}
.footer_shopping li {
  float: left;
  width: 32.5%;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 0 10px 5px 0;
}
#footer .footer_shopping h3 {
  margin: 0.6rem 0 5px 0;
}
.footer_shopping li a {
  display: block;
  padding: 6px 1.2rem;
}
.footer_shopping a .linktxt {
  color: #478fb3;
}

/* --------------  ▼メディア紹介 ---------------------------*/


/* ==================================================================
    ▼　フォーム　▼
  ================================================================== */
/* -------------- ▼ flow_area_form -------------------------------- */
.flow_area_form ol {
  display: table;
  list-style: outside none none;
  overflow: hidden;
  width: 100%;
  margin-bottom: 20px;
}
.flow_area_form ol li {
  background-color: #92c7eb;
  color: #fff;
  display: table-cell;
  font-weight: bold;
  height: 44px;
  line-height: 17px;
  padding-left: 15px;
  text-align: center;
  width: 25%;
}
.flow_area_form ol li:before {
  background: none repeat scroll 0 0 #92c7eb;
  border-right: 2px solid #ffffff;
  content: " ";
  display: block;
  height: 22px;
  margin: 0 -11px -17px auto;
  transform: skew(20deg);
  width: 15px;
}
.flow_area_form ol li:after {
  background: none repeat scroll 0 0 #92c7eb;
  border-right: 2px solid #ffffff;
  content: " ";
  display: block;
  height: 22px;
  margin: -17px -11px 0 auto;
  transform: skew(-20deg);
  width: 15px;
}
.flow_area_form ol li.active {
  background-color: #54a8e0;
}
.flow_area_form ol li.active:before, .flow_area_form ol li.active:after {
  background: none repeat scroll 0 0 #54a8e0;
}
.flow_area_form ol li:last-child:before, .flow_area_form ol li:last-child:after {
  content: "";
}
/* ------------------- ▼ フォーム部品 ----------------------------------------------- */
#categoryfreearea input + p, #categoryfreearea select + p {
  margin: 10px 8px 8px;
}
.member_table input + p, .member_table p + p, .member_table p + ul {
  margin-top: 10px;
}
#categoryfreearea .member_table input[name*="name"], #categoryfreearea .member_table input[name*="kana"] {
  width: 80%;
}
#categoryfreearea .member_table input[name*="tel"], #categoryfreearea .member_table input[name*="fax"] {
  width: 40%;
}
.member_table input[name*="zip"] {
  width: 36%;
}
article form input[type="date"] {
  border: 1px solid #c7c7c7;
  border-radius: 4px;
  max-width: 90%;
  padding: 0.5em 0.8em;
  vertical-align: middle;
}
.text .button01, .text .button02, .text .button03 {
  text-shadow: none;
}
article .button01, article .button02, article .button03 {
  font-size: 1.4rem;
  width: 90%;
  max-width: 630px;
  margin: 0 auto 20px;
}
.single .btn_area .col2+.col2 {
  margin-left: 1rem;
}
article .bnr [class^="button0"] {
  margin: 0 auto 20px;
}
article .button01 button, article .button02 button, article .button03 button {
  font-weight: bold;
  font-size: 1.6rem;
  padding: 0.6em 0 0.5em;
}
article .inline .button03 {
  max-width: 264px;
}
.btn .button06 a {
  background: url(../img/commonImg/icon/arrow01_r2.png) left center no-repeat #e3dfd5;
  border-bottom: 3px solid #e3dfd5;
  margin-bottom: 1em;
}
.btn .button06 a, .pickup_know .button06 a {
  font-size: 1.3rem;
  padding: 0.5em 0.8em 0.3em 3.6em;
  background-size: 40px 12px;
  border-radius: 5px;
}
.pickup_know .button06 {
  position: absolute;
  top: 30%;
  right: 14px;
}
.pickup_know .button06 a {
  color: #fff;
  background: url(../img/commonImg/icon/arrow01_r2.png) left center no-repeat #444;
  width: 30%;
  min-width: 208px;
  border-bottom: 3px solid #444;
}
.btn .button06 a:hover,.pickup_know .button06 a:hover {
  background-color: #ddd9d0;
  border-bottom-color:#ddd9d0;
}
#guide .member_table .tbody dl.tr dd {
  width: 83%;
}

/***************** Media Queries *****************/
/* 979px～ //////////////////////////////////////////////////*/
@media only screen and (max-width: 979px), only screen and (max-device-width: 979px) {
  #main .inner #related li {
    width: 30.65%;
  }
  #related li .listimg, #related li img {
      width: 46px;
  }

  /* =====================================
    footer_shopping(max-width: 979px)
  ===================================== */
  .footer_shopping li {
    width: 32.5%;
    margin: 0 1.2% 5px 0;
  }
}
/* ～768px //////////////////////////////////////////////////*/
@media screen and (max-width: 768px) {
    .bnr li {
      max-width: 48.06%;
    }
    .flow_vertical__list .imgL {
    margin-right: 1rem;
    }
    .pushitem li{
      width: 47%;
    }
    #related li .listimg, #related li .txt {
      height: 3.71em;
    }
    #guide .menuBlock>.section {
      width: 47.73%
    }
    #productfreearea_2 .imgR, #productfreearea_2 .imgL {
      max-width: 31.4%;
    }
    .imgwrap .text {
      position: relative;
    }
}

/* ～480px //////////////////////////////////////////////////*/
@media screen and (max-width: 480px) {
  .headerframe {
    min-height: 164px;
  }
  #categoryfreearea>.inner {
    padding: 1.8em 1.4em;
  }
  #product_detail {
    padding: 1.53em 4px;
  }
  .subarea .imgL, .subarea .imgR, #sub_area .subphotoimg {
    float: none;
  }
  #sub_area .subphotoimg {
    width: auto;
  }
  .subarea .imgL, .subarea .imgR, #sub_area .subphotoimg {
    text-align: center;
  }
  #guide .menuBlock>ul,#guide .menuBlock>.section,
    .quitoimport .imgR, .quitoimport .imgL　{
      float: none;
    }
  #main .text {
    min-width: 120px;
  }
  .bnr li {
      max-width: 46.82%;
  }
  .noteTop_category .bnr li {
      width: 50%;
      max-width: 50%;
  }
  .bnr-list__items li {
    max-width: 100%;
  }
  #main #related li {
    width: 43.4%;
  }
    #main .inner #related li {
      width: 43.2%;
    }
    #related li .listimg {
      width: 32px;
    }
    #related li a img {
      width: 31px;
    }
    #guide .menuBlock>ul,#guide .menuBlock>.section {
      width: 100%;
    }

  .category_nav_btn li {
    max-width: 46.97%;
    min-width: 16.96%;
    margin: 0 10px 8px 0;
  }
  #categoryfreearea .ctg_maker li {
    max-width: 16.93%;
    width: 16.93%;
  }/* 16.96% relatで5分割 %で6分割*/

  .inner .section .bnr.bnr-list__items li {
    max-width: 100%;
  }
  .inner .section.pushitem .bnr li {
    width: 100%;
    max-width: 100%;
  }
  article .inline .button02, article .inline .button03 {
    max-width: 320px;
  }

}

/* 700px～ //////////////////////////////////////////////////*/
@media screen and (min-width: 700px) {
  #undercolumn .contentArea, .homectg-list.inner {
    padding: 1.8em;
  }
  /* =====================================
     header (min-width: 700px)
  ===================================== */
    #header_utility2 ul {
      width: 38%;
  }
  /* ==== ▼ bnr ============= */
  .bnr .col2 {
    width: 48.4%;
    max-width: 48.5%;
  }
  .bnr .col4 {
    width: 23.5%;
  }
  .inner .section .bnr.ushop_detail li {
    width: 31.67%;
  }

  /* ==== ▼ home main カテゴリ ============= */
  .homectg-list__items .col2 {
      width: 50%;
      height: 86px;
    }
    .homectg-list__items .col3 {
      width: 33%;
      min-height: 9.7rem;
    }
    .homectg-list__items .col3 .listimg {
      max-width: 15rem;
    }
    .homectg-list__items .listimg, .homectg-list__items .txt {
      display: table-cell;
      vertical-align: top;
      overflow: hidden;
    }
    .homectg-list__items .txt {
      width: 76%;
    }
    .homectg-list__items .col2 .txt {
      width: 91%;
    }
    .homectg-list__items .col3 .txt {
      width: 78%;
  }
    .homectg-list__items .listimg {
      padding: 0 5px 0 0;
  }

  /* flow */
  main .flow .photo {
    float: right;
  }
  .flow_vertical__list .text {
    width: 62%;
  }
  main .flow .photo {
    float: none;
    margin: 8px auto;
    text-align: center;
  }
  main .flow_vertical__list .photo {
    width: 30%;
    margin: 0 auto 8px;
  }
  .single .flow_vertical__list .imgL {
    width: 35.3%;
  }
    /* footer */
    .footer_shopping li:nth-child(3n) {
      margin-right: 0;
    }
    .footer_shopping li:nth-child(4) {
      clear: both;
    }

  /* ============================
      ▼ カテゴリ (min-width: 700px)
  =============================== */
    #categoryfreearea .ctg_maker li {
      width: 12.33%;
    }
  /* ============================
      ▼ table, layout (min-width: 700px)
  =============================== */
  }
/* ～480px /　その2　/////////////////////////////////////////////////*/
@media screen and (max-width: 480px) {
/* ============================
      ▼ Ranking (max-width: 480px)
  ===================================== */
  .categoryRanking_area .ranklist li {
    min-width: 23%;
    margin-bottom: 8px;
  }
  .categoryRanking_area .ranklist .no1, .categoryRanking_area .ranklist .no2 {
    width: 49.84%;
  }
  .categoryRanking_area .ranklist .no3, #categoryfreearea .no4, #categoryfreearea .no5  {
      width: 33.3%;
  }

  #categoryfreearea .no1 .rankitem .photo, #categoryfreearea .no2 .rankitem .photo {
      max-width: 80px;
  }
  #categoryfreearea .no3 .rankitem .photo, #categoryfreearea .no4 .rankitem .photo, #categoryfreearea .no5 .rankitem .photo {
      width: 40px;
  }
  .rankitem span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 1.2rem;
  }
  .no3 .rankitem span {
    float: none;
    font-size: 1.0rem;
  }

  .flow_vertical__list .text {
    width: 87%;
  }
  .flow_vertical__list .photo {
    float: none;
    width: 100%;
    margin-left: auto;
  }
}
/* 1101px～ //////////////////////////////////////////////////*/
  /* =====================================
     DETAIL (min-width: 1101px)
  ===================================== */
  @media only screen and (min-width: 1101px) {
  .tr dd {
    max-width: 33em;
  }
}
/* ============= ▼ 商品カテゴリ　検索,nav ：mediaQuery ▼ ========================================== */

/* ～768px //////////////////////////////////////////////////*/
@media screen and (max-width: 768px) {
  #product_detail .bnr li, .inner .section .bnr li {
    max-width: 47%;
  }
  .category_nav_s .menuBlock li {
    font-size: 1.2rem;
    width: 30.995%;
  }
  .category_nav_s .menuBlock li {
    width: 23.4%;
  }
  .category_nav_s .menuBlock li a {
    background-position: -5px top;
    background-size: 34px auto;
  }
  .category_nav_s .menuBlock li a span {
    min-height: 46px;
    padding: 11px 0 4px 34px;
  }
  .pickup_know .pickuplist li {
    margin-right: 2rem;
  }
/*photo area (max-width: 768px ---------- */
  .photo.imgL,　.photo.imgR {
    max-width: 37%;
  }
  .hero .col2 {
  max-width: 46%;
 }
}

/* ～700px //////////////////////////////////////////////////*/
@media screen and (max-width: 699px) {
    .itemsearch .menuBlock li {
      width: 15%;
    }
    .homectg-list__items li {
      width: 50%;
    }
    .bnr .col3, .category_nav_btn .col3 {
      width: 30.21%;
  }
  .bnr-list__items .col3 {
    width: 46.7%;
  }
  .inner .section .bnr .col100 {
    width: 100%;
    max-width: 100%;
  }
  .category_nav_s .menuBlock li {
    width: 31.2%;
  }
  .newslist dt .date {
      float: none;
  }

  .subtext.imgL, .subtext.imgR {
    width: 58%;
  }

  .footer_shopping {
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .footer_shopping li {
    width: 49%;
    margin: 0 1.2% 5px 0;
    min-height: 48px;
    border: none;
  }
  .footer_shopping li:nth-child(2), .footer_shopping li:nth-child(4), .footer_shopping li:nth-child(6) {
    margin-right: 0;
  }
  .footer_shopping li:nth-child(5) {
    clear: both;
  }
  #footer .footer_shopping h3 {
    border-bottom: none;
  }
  .footer_shopping a .linktxt {
    display: none;
    overflow: hidden;
  }
}
  @media screen and (max-width: 480px) {
    .pctb2 {
      display: none;
    }
    .bnr-list__items li {
      max-width: 100%;
    }
    .bnr .col100, .bnr li.col100 {
      width: 100%;
      max-width: 100%;
    }
    .bnr .col4 {
      width: 46.5%;
    }
    .section-recipe_area .recipe_item {
      width: 100%;
      margin-right: 0;
    }
    .homectg-list__items .col3 .listimg {
      max-width: 5.3rem;
    }
  .category_nav_s .menuBlock li {
      font-size: 1.12rem;
      width: 46.82%;
  }
  .itemsearch .menuBlock li {
      width: 30.1%;
  }
    .itemsearch .function li {
      width: 21.7%;
    }
    .category_nav_s .menuBlock li a {
      min-height: 40px;
      background-position: left center;
      background-size: 26px auto;
    }
    .category_nav_s .menuBlock li a span {
      min-height: 40px;
      padding: 11px 0 4px 28px;
    }
    ul.newslist {
      padding: 4px 8px 6px;
    }
    #categoryfreearea #news_area .newslist dt {
      width: 5em;
    }
    #categoryfreearea #news_area .newslist dd {
      margin-left: 9em;
      width:  66%;
    }
    /*photo area (max480px ---------- */
    .photo {
      text-align: center;
      margin: auto;
    }
    .photo.imgL,.photo.imgR {
      float: none;
    }
    .subtext.imgL, .subtext.imgR, .photo.imgL, .photo.imgR {
      width: 100%;
      max-width: 100%;
    }
    .product-box th[scope="row"], #product_detail .product-box th, .product-box th.s01, .product-box td {
      display: block;
      width: 100%;
    }
    .product-box th {
      background-color: #e3dfd5;
    }
    .product-box td {
      border-left: 0 none;
    }
    #guide .product-box th {
      background-color: #fff;
      border-bottom: 0 none;
    }
    #guide .product-box th[scope="row"] {
      padding: 6px 10px 0;
    }
    #guide .product-box th, #guide .product-box td {
      width: 100%;
    }
    #categoryfreearea div.x_scroll_box {
     max-width: 318px;
    }

    /* -- スマホ:  データを横スクロール -- */
    div.x_scroll_box {
      overflow-y: hidden;
      overflow-x: scroll;
      margin-bottom: 20px;
    }
    .x_scroll_box {
     width: auto;
    }
    .x_scroll_box::-webkit-scrollbar { /* スクロールバー全体(iphone対策　・・△) */
      height: 16px;
      width: 100%;
    }
    .x_scroll_box::-webkit-scrollbar-thumb{ /* スクロールバー部分 */
      background: #b5b19f;
      border-radius: 8px;
      width: 110px;
    }
    .x_scroll_box::-webkit-scrollbar-track-piece:start { /* スクロールバー表示ない部分（前） */
      background: #ebe8e1;
    }
    .x_scroll_box::-webkit-scrollbar-track-piece:end { /* スクロールバー表示ない部分（後ろ） */
      background: #ebe8e1;
    }
    .xscroll {
      width:　100%;
    }
    .table_spc {
      table-layout: fixed;
    }
    .xscroll th, .xscroll td {
      overflow: hidden;
      white-space: nowrap;
    }
    .x_scroll_box .product-box th,.x_scroll_box .product-box td {
      display: table-cell;
    }
    #guide .table_spc {
    max-width: 100%;
    }

    .maker_info .text {
      padding:0 20px;
    }
    #productfreearea_2 .maker_info .imgL {
      float: none;
      margin-right: 10px;
      max-width: 100%;
    }
}

/* ---▼ ランキング：商品カテゴリ：mediaQuery ▼ --- */
@media screen and (min-width: 481px) {
  .sp {
    display: none;
  }
    #header_utility2 ul {
      float: right;
      max-width: 50%;
    }
    .rankitem .photo {
      float: none;
    }
}

/* ================================================================== */
/* Safariだけ適用ハック macには効かない */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, .category_nav_s .menuBlock, .category_nav_btn,#main .category_nav_btn, .categoryRanking_area .ranklist, .bnr,
  .staffvoice-inner {
    display: block;
  }
  ::i-block-chrome, .category_nav_s .menuBlock li, .categoryRanking_area .ranklist li,
  .bnr li, .staffvoice-inner li {
    float: left;
  }
  ::i-block-chrome, .category_nav_s .menuBlock li {
    height: 5.4em;
  }
  ::i-block-chrome, .staffvoice-inner li {
    height: 80em;
  }
}
/* ▲ Safariハックend ▲ */
/* mac Safariだけ適用ハック：html:\66irst-child＝不可 */

/* iPhone 6,6plus */
@media screen and (min-width: 375px) and (max-width: 414px) {
  .bnr, .category_nav_btn, .category_nav_s, #categoryfreearea .ctg_maker, .menuBlock, .categoryRanking_area .ranklist {
    display: block;
    width: 103%;
  }
  .bnr li, .category_nav_btn li, #categoryfreearea .ctg_maker li, .category_nav_s .menuBlock li, .categoryRanking_area .ranklist li {
    float: left;
  }
  #categoryfreearea .ctg_maker li a {
    width: 98.47%;
    }
}
@media screen and (min-height: 375px) and (max-height: 414px) {
  .bnr, .category_nav_btn, .category_nav_s, #categoryfreearea .ctg_maker, .menuBlock, .categoryRanking_area .ranklist {
    display: block;
    width: 103%;
  }
  .bnr li, .category_nav_btn li, #categoryfreearea .ctg_maker li, .category_nav_s .menuBlock li, .categoryRanking_area .ranklist li {
    float: left;
  }
  .bnr li {
    max-width: 48%;
  }
  #categoryfreearea .ctg_maker li {
    max-width: 65px;
    width: 16.7%;
  }
  #categoryfreearea .ctg_maker li a img {
    max-width: 65px;
  }
}
/* ▲ iPhone 6,6plus ハック end ▲ */

/* ランキング崩れtest */
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width: 480px) {
    ::i-block-chrome, .categoryRanking_area {
    width: 100%;
  }
}/* 【Opera】【Safari】width指定しないと崩れる？ */

/* Chromeだけハック */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .bnr {
    margin-right: -11px;
  }
}


/* --------------▼ お問合わせ ---------------------------*/
.inquiry-phone {
  padding: 14px 10px 6px;
  width: auto;
  background-attachment: scroll;
  background-color: transparent;
  background-image: url(img/share/bg-inquiry-phone.png);
  background-repeat: repeat;
  background-position: 0 0;
  margin-bottom: 24px;
}
.inquiry-phone dt {
  clear: both;
  float: left;
}
.inquiry-phone dd {
  margin-left: 80px;
}

/*==============　▼  メイン要素▼ ================*/

/* 見出しベージュ----------------------------------------*/
dl.dlStyle03 dt {font-size:1.3em; background: url(http://www.daiichi-mottainai.com/caffeseminar/img/title-back-img001.jpg) ; margin: 0.5em 0.20em 0.80em; padding: 0.50em; border-radius: 5px; box-shadow: 2px 2px 4px rgba(0, 0, 0, .1) inset; box-shadow: 0 2px 6px rgba(0, 0, 0, .15);}


.dlStyle03 li{margin-bottom: 0.7em;}

/* 見出しピンク----------------------------------------*/
dl.dlStyle02 dt {
 margin: 0.9em 0;
  padding: 0.5em;
  color: #FFF;
  text-shadow: 1px 1px rgba(0,0,0,.4);
  background-color: #e49eae;
}



/* バナー並び----------------------------------------*/
ul.catego_mmitem-box {
    display:table;
    table-layout: fixed;
    width:101%;
    margin: 5px 0;
}
ul.catego_mmitem-box li {
    display:table-cell;
    border-right: solid 10px transparent;
　　vertical-align:middle;
}

/* 商品詳細テーブル使用----------------------------------------*/
.productmac2 {
width: 96%;
text-align: left;
margin: 0px 0px 0px 11px;
}

.productmac {
width: 100%;
text-align: left;
margin: 5px 0px;
}

/* -- カテゴリセミナーにて使用-- */
#product-sm {
  margin: 0;
  background: #fff;
}

/* -- セミナーテーブル-- */
#product-sm .table-sm{
  width: 690px;
  margin: 5px 10px 20px 50px;
  padding: 0;
  border-collapse: collapse;
}
#product-sm .table-sm th {
   width: 150px;
   border-top: #e3e3e3 1px solid;
   border-bottom: #e3e3e3 1px solid;
   border-right: #e3e3e3 1px solid;
   border-left: #e3e3e3 1px solid;
   text-align: left;
   background: #f7f7f7;
   padding: 10px;
   font-weight: normal;
}

#product-sm .table-sm td {
   border-top: #e3e3e3 1px solid;
   border-bottom: #e3e3e3 1px solid;
   border-right: #e3e3e3 1px solid;
   text-align: left;
   padding: 10px;
}

/* -- h3見出し -- */
.ptitle01{
   font-weight: bold;
   margin: 10px 0 5px 15px;
   padding: 10px 0 10px 5px;
   border-left: 5px solid #ccc;
   border-top:1px solid #ccc;
   border-bottom:1px solid #ccc;
}

/* -- p設定-サポートbox内のp要素-子 -- */
p.space04 {
  margin: 10px 0 20px 0 ;
}

/* --マシン-商品ポイント-- */
.mac-point-title {
  margin: 20px 0px 0px;
  padding: 0;
}

/* -- サイドバナー　各紹介-- */
.bnr-introduction{
  margin: 0;
  padding: 0;
}
.bnr-introduction li{
  margin: 10px 0 10px 0;
  background: none;
}

/* -----------------------------------------------------------
    aside#side
    サイドバー、サブ
----------------------------------------------------------- */

/* サブ banner */


/* サブ お買いものガイド　*/
.sub_guide {
  background-color: #fff;
  margin-bottom: 28px;
}
.sub_guide h3 {
  background: none repeat scroll 0 0 #80706b;
  border-radius: 4px 4px 0 0;
  font-size: 1.6rem;
  padding: 0.8em;
  margin-bottom: 0;
}
.sub_guide h3, .sub_guide h3 a {
  color: #fff;
  display: block;
}
.sub_guide dl {
  margin: 0 auto 20px;
  padding: 0.7em 1em;
  border-top:0 none;
  border-right:1px solid #80706b;
  border-left:1px solid #80706b;
  border-bottom:1px solid #80706b;
  border-radius: 0 0 4px 4px;
  max-width: 100%;
  overflow: hidden;
}
.sub_guide dt {
  font-size: 1.6rem;
  font-weight: bold;
  padding: 3px 4px;
}
.sub_guide dd {
    max-width: 100%;
    overflow: hidden;
}
.sub_guide dd {
    line-height: 1.5;
    margin: 0;
    padding: 0 10px 0 26px;
    position: relative;
    z-index: 10;
}
.sub_guide dd:before {
    background: none repeat scroll 0 0 #e56d65;
    content: "";
    height: 8px;
    left: 10px;
    margin-top: -2px;
    position: absolute;
    top: 8px;
    transform: rotate(45deg);
    width: 8px;
}
.sub_guide dd:after {
    background: none repeat scroll 0 0 #fff;
    color: #e56d65;
    content: "";
    height: 8px;
    left: 5px;
    margin-top: -2px;
    position: absolute;
    top: 8px;
    transform: rotate(45deg);
    width: 8px;
}
.sub_guide dd a:hover:after {
    color: #d9d3c7;
}
/* ▲ サブ お買いものガイド　*/


/* Onishi用
----------------------------------------------------------------------------- */

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