@charset "utf-8";

.header-box,#header{ z-index: auto; }
#header>div, #header>a { z-index: 2;}
#header>div#menu-btn,#header>a#cart { z-index: 600; }

/*一覧ページ*/

#mv + div>.con-box:first-child { padding-top: 6rem; }
.cat-ttl { display: inline-block; margin-bottom: 0; padding: 2rem 3rem; font-size: 2.25rem; line-height: 1.4; color: #e0e0e0; background: #985535;}
.cat-ttl>.gf-jose { display: block; font-size: 1.25rem; padding-left: .2em; }
.cat-info p { margin: 2rem auto; }
.cat-info figure { text-align: center;}
.invalid-btn{ width: 50%;}

/* detail */
.pan li:first-child{ padding-left:0; }
.main-wrap-pagettl{ position:relative; height:190px; }
.main-wrap-pagettl .pagettl{ bottom:0; font-size: 1.55em; z-index: 1; }
.item-data-box{ padding-bottom: 6em; }
.item-data-box .pic-data{ margin-bottom: 1.5em; }

.item-data-box p{ margin:0.5em 0; }
.item-data-box p.price{ font-size: 1.3em; margin:.5em .5em 1em; }
.item-data-box .category{ display:inline-block; margin-right: 1em; padding:0.2em 0.6em 0.3em; font-size:1.1em; line-height:1; 
  color:#e0e0e0; background:#635046; }
.price{ font-size:1.2em; }
.price small{ margin-left:-0.5em; font-size:0.75em; }
.item-data-box .txt-data .wbox{ margin-bottom: 1.5em; padding:1em .5em; }
.amount{ margin: .5em 1em; }
.amount input[name^="num"],
.form.cart input[name^="num"] { width: 3em; margin:0 0.7em; }
.form.cart input[name^="num"]:first-child { margin-left: 0;}
.num-update { 
  display:inline-block; width:28px; height:28px; margin: .5em .3em;
  background:url(../img/shopping/plus.svg) #635046 no-repeat 50% 50%; border-radius:50%;
  cursor:pointer; -webkit-transition:all .5s; transition:all .5s; }
.num-update.dec { background-image:url(../img/shopping/minus.svg); }
.item-data-box .arrow-btn{ display:block; min-width: 240px; margin: .5em auto; }
.comment-data{ margin-bottom:2.5em; }
.comment-data .copy{ margin-bottom:1em; font-size:1.2em; }
.detail-data{ font-size:0.95em; line-height:1.5; }

.item-data-box .payment { margin-bottom: 2em;}
.payment .arrow-btn.gf-jose { max-width: 240px; font-size: .9em; background: #635046; font-family: arial; font-weight: 300;}
.payment .arrow-btn .con { border: none; padding: 0.5em 1.5em 0.4em 2em;}

.pic-data figure { position: relative; overflow: hidden; }
.pic-data figure>img { position: absolute; }

.white-popup { width:auto; max-width:500px; margin:20px auto; padding:20px; background:#e0e0e0; position:relative; z-index: 1; }

/* カート追加完了 */
.addCartBox .done { text-align:center; }
.addCartBox li { width:48%; }
.addCartBox li a { display:block; text-align:center; min-width: 0; }
.addCartBox .btn_cart_add::before { left:20%; }
.addCartBox li .btn_close { padding: .8em 2em; color: #985535; cursor: pointer; border: 1px solid #b4b4b4; }
.addCartBox li .btn_close:hover {border: 1px solid #985535; background-color: #e2cdb2; }

/* タブ */
.detail-data .btn-area { margin-bottom:1.5em; border-bottom:2px solid #806a63; }
.detail-data .tab-btn {	display:inline-block; margin-bottom:-2px; padding:0.4em 1.5em; text-align: center; cursor: pointer; 
  border:2px solid #806a63; transition: all 0.2s ease 0s; }
.detail-data .tab-btn + .tab-btn { margin-left:0.3em; }
.detail-data .tab-btn.active { background:#806a63; color: #e0e0e0; }
.detail-data .tab-panel { display:none; }
.detail-data .tab-panel.active { display:block; }

/* 一覧 */
.item-list{ text-align:center; }
.item-list .sub{ font-size:1.2em; margin: .5em; text-align: left; }
.item-list .pic{ margin-bottom:1em; }
.item-list .price{ margin: .5em .5em 1em; line-height:1.5; }
.item-list .arrow-btn{ font-size:1.1em; line-height: 1.3; }
.item-list .arrow-btn .con::before{ width: 12px; height: 12px; top: calc(50% - 6px); }
.col3 li{ width:47%; margin:0 1.5% 1.5em; }

/* カテゴリ紹介枠 */
.doll-ttl{ position:relative; padding:4.3em 0 0; text-align:center; font-size: 1.5em; line-height:1.4; }
.doll-ttl::before{ position:absolute; content:""; width:2.5em; height:100%; top:0; left:50%;
  background:url(../img/doll_chef.png) no-repeat 0 0 / 100%;
  -webkit-transform:translate(-50%, 0); transform:translate(-50%, 0); }
.related-area{ margin-bottom:3em; }
.related-area .doll-ttl{ margin-top:-1.5em; }
.related-area .lead{ margin-bottom:3em; }
.chef-comment{ margin-top:1.5em; }
.chef-comment .pic{ width:50%; margin:0 auto; }
.chef-comment .pic img{ border-radius:50%; }
.chef-comment .txt{ position:relative; width:85%; margin: 1em auto 0; padding:1em; background:#e2cdb2; }
.chef-comment .txt::before{ position:absolute; content:""; width: 0; height: 0; top:-10px; left:50%;
  -webkit-transform:translate(-50%, 0); transform:translate(-50%, 0);
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #e2cdb2 transparent; }
.chef-comment .txt p{ margin:0; }

/* Yahooボタン */
.yahoo-btn{ width:90%; margin:2em auto; }
.yahoo-btn .arrow-btn{ min-width: 100%; font-size: 1.2em; background: #50342c; }
.yahoo-btn .arrow-btn .gf-jose{ font-size:1.2em; }
.yahoo-btn .arrow-btn .con{ padding: 1em 0em 1em 5.5em; border-left:0; }
.yahoo-btn .arrow-btn .con::before{ width:7em; height:130%; top:-15%; left:-2.5%;
  background: url(../img/shopping/bnr-pro.png) no-repeat 0 0 / 100%; }

/*slick*/
.slick-slide { font-size: 0; }
#slick figure { margin-right: 2%; padding-bottom: 98%; }
#slick_thumb .slick-track { width: 100%!important; }
#slick_thumb .slick-slide { width: 25%!important; }
#slick_thumb figure { margin-top: 8%; margin-right: 8%; padding-bottom: 92%; overflow: hidden; }


/* ================================================================
  レスポンシブ
=================================================================== */

/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

  /* detail */
  .item-data-box{ display:-webkit-flex; display:flex; flex-wrap:wrap; 
    -webkit-box-pack:justify; justify-content:space-between; }
  .item-data-box .txt-data,
  .item-data-box .pic-data{ width:46%; }
  .detail-data .d-list > div > dt{ width:26%; }

  /* 一覧 */
  .col3 li{ width:30%; }

  /* カテゴリ紹介枠 */
  .related-area{ margin-bottom:5em; }
  .related-area .lead{ margin-bottom:4em; }
  .chef-comment{ display:-webkit-flex; display:flex; flex-wrap:wrap; }
  .chef-comment .pic{ width:30%; }
  .chef-comment .txt{ -webkit-box-flex:1; flex:1; margin-top:0; margin-left: 1em; padding: 2em; }
  .chef-comment .txt::before{ border-width: 15px 20px 15px 0; top:30%; left:0;
    border-color: transparent #e2cdb2 transparent transparent; }

  /* Yahooボタン */
  .yahoo-btn{ width:50%; margin-bottom:5em; }

}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {
.main-wrap-pagettl { height: 130px; }
  .cat-info { position: relative; z-index: 0; }
  .cat-ttl { margin-left: -7rem; }
  .cat-info figure { position: absolute; z-index: -1; top: 0;}

  .cat-info.curry>.txt { margin: 22% 4% 0 43%; }
  figure.curry1 { width: 35%; max-width: 373px; left: 4%;}
  figure.curry2 { width: 55%; max-width: 589px; right: 4%;}

  .cat-info.hamburg>.txt { margin: 5% 4% 0 55%; }
  figure.hamburg1 { top: 4em; left: 8%; width: 44%; max-width: 460px;}

  .invalid-btn{ width: 88%;}

  /* detail */
  .item-data-box .txt-data .wbox{ display:-webkit-flex; display:flex; flex-wrap:wrap; width:100%; }
  .comment-data .copy{ font-size:1.3em; }

  /* タブ */
  .detail-data .tab-btn:not(.active):hover { background-color: #e2cdb2; }

  /* カテゴリ紹介枠 */
  .doll-ttl{ font-size:1.8em; }
  .related-area .lead{ width: 650px; margin-right:auto; margin-left:auto; }

  /* Yahooボタン */
  .yahoo-btn{ width:548px; }
  .yahoo-btn .arrow-btn{ font-size: 1.3em; }
  .yahoo-btn .arrow-btn .con{ padding: 1.4em 0em 1.4em 5.5em; }
  .yahoo-btn .arrow-btn .con::before{ width:8.5em; }

}

/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {

}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {
  /* リスト */
  .item-list .arrow-btn{ min-width:150px; }

  .cat-ttl { margin-left: -30px;}
  figure.curry1 { width: 27%; max-width: 225px;}
  figure.curry2 { width: 70.5%;}
  figure.hamburg1 { width: 90%; max-width: 320px; margin: auto;}
}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  /* detail */
  .main-wrap-pagettl{ height:170px; margin-bottom:-1.5em; }
  .main-wrap-pagettl .pagettl{ width: 120px; height: 120px;/*  left: calc(50% - 60px); */ font-size:1.35em; }
  .payment .arrow-btn.gf-jose { font-size: 1em;}

  /* 一覧ページ */
  .cat-ttl { margin-left: -15px; padding: 1rem 1.5rem; font-size: 1.5rem;}
  .cat-ttl>.gf-jose { font-size: 1rem; }
  .item-list .sub{ font-size:1em; }

#slick figure { margin: 0; padding-bottom: 100%; }
#slick_thumb { margin: 0 -4px; }
#slick_thumb figure { margin: 8px 4px 0;}
}