@charset "utf-8";

/* ------------------------------------------------
 * 要素に対する定義
 */
ul {
  list-style-type: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
fieldset {
  margin: 0;
  padding: 0;
}
img { /* 削除NG */
  max-width: 100%;
}

/* ------------------------------------------------
フォームの表現
*/
@media screen and (max-width: 979px) {
  .field-label {
    padding-left: 5px;
    border-left: 5px solid #ffdd87;
  }
}
@media screen and (min-width: 980px) {
  .field-group.pc-dl-table .-required > dt > .field-label::after {
    display: none;
  }
  .field-group.pc-dl-table .-required > dt > .field-label::before {
    content: "\FF0A";/* content: "＊"; */
    color: #D00;
    padding: 0 0 0 5px;
  }
}

@media screen and (min-width: 980px) {
 .field-confirm {
   text-align: center;
 }
}
.field-confirm dd {
  text-align: center;
}
.field-confirm .button {
  border-width: 0 .2em .2em 0;
  border-style: solid;
  border-color: #CCC;
  font-weight: bold;
  padding: 1em 2em;
  font-size: 15px;
}
.gift-confirm {
  margin-top: 15px;
  border-top: 1px solid #CCC;
  padding-top: 15px;
}
.osake-confirm {
  margin-bottom: 20px;
}


/* ------------------------------------------------
 * ページのレイアウト
 */
@media screen and (min-width: 980px) {
  body {
    background: #F9F6F3;
    /*background: url(/images/common/hemp_45.png);*/
  }
  .o-wrapper {
    max-width: 720px;
    padding: 20px;
  }
}




/* ------------------------------------------------
 * トップのメッセージ
 */
.f-top-message {
  max-width: 600px;
  margin:0 auto;
}
.f-top-message-john img {
  width: 280px;
}

/* ------------------------------------------------
 * Form Group
 */
/* h2　の話　*/
.f-group.-required .f-group-header h2::after {
  content: "\FF0A"/* "＊" */;
  color: #D00;
  padding: 0 0 0 5px;
}
.f-group h2._billing {/* ご注文者様 */
  background: url(/images/common/hito.png) no-repeat left center;
  background-size: 25px;
}
.f-group h2._shipping {/* お届け先 */
  background: url(/images/common/icon_sumai.png) no-repeat left center;
  background-size: 25px;
}
.f-group h2._payment {/* お支払い */
  background: url(/images/common/icon_money.png) no-repeat left center;
  background-size: 25px;
}
.f-group h2._delivery {/* お届けする商品 */
  background: url(/images/common/icon_truck.png) no-repeat left center;
  background-size: 25px;
}
.f-group h2._teiki {/* お届けする商品 */
  background: url(/images/common/teiki.png) no-repeat left center;
  background-size: 25px;
}
.f-group h2._present {/* オプション */
  background: url(/images/common/icon_present.png) no-repeat left center;
  background-size: 25px;
}

@media screen and (max-width: 979px) {
  .f-group h2{
    padding-left:30px;
    font-size: 15px;
  }
}
@media screen and (min-width: 980px) {
  .f-group {
    margin: .5em 0 1em;
  }
  .f-group h2 {
    font-weight: normal;
    font-size: 19px;
    padding-left: 1.75em;
  }
}

/* f-group 構造的なこと */
.f-group-header {
  padding: .7em;
  border-bottom: 2px solid #BBB;
  border-radius: 4px;
  background-color: #ffdd88;
}
.f-group-body/*,
.f-group-end*/ {
  padding: .7em 0;
}


/* ================================================ 
 * 注文者情報とお届け先
 */
@media screen and (max-width: 979px) {
 .shipping-address{
   padding:10px;
 }
}
/* ================================================
   お支払い方法
 */
.payment-notice {
  padding: 8px;
  background-color: #F1EFEC;
  margin-top: 5px;
}
.payment-notice ul {
  padding: 0 1em;
  margin: .5em 1em;
  list-style-type:disc;
}
/* ------------------------
  クレカ
*/
#payment-cc {
  margin-top:10px;
}
/*
20180404
見た目の微妙な違い。削除ok？

.cc-exp select {
  width: 4em;
}*/
#payment-cc-installment {
  border-top: 1px solid #cccccc;
  padding-top: 10px;
  margin-top: 10px;
}
.payment-cc-img {
  border: 1px solid #d8d8d8;
  line-height: 0;
}
@media screen and (min-width: 980px) {
  .payment-notice {
    margin: 5px 0 10px 26px;
    padding: 8px;
    background-color: #fff;
    border: 1px dotted;
  }
  .cc-code .payment-notice {
    margin: 10px 0 0;
  }
  
}


/* ================================================
 * 〇〇からのお届けの商品

.sg-field -+- .sg-detail 商品
           +- .sg-option
                 +- .f-field
                 +- .f-field
                 ...
                 +- fieldset.sg-gift
 */
.sg:not(:last-child) {
  margin-bottom: 2em;
}
.sg-detail {
  border: 1px solid #d8d8d8;
}
.sg-detail .layout-table {
  width: 100%;
}
@media screen and (max-width: 979px) {
 .sg-detail {
  margin:0 0 1em 0;
 }
}
.sg-detail dt {
  background-color: #F1EFEC;
  padding: 5px 8px;
  margin: 0;
  font-weight: bold;
}
@media screen and (max-width: 979px) {
  .sg-detail dd {
   overflow-y: scroll;
   max-height: 15em;
  }
}
.back-to-cart {
  text-align: right;
  font-size: 12px;
}
/* ------------------------
 * 商品一覧
 */
.precord {
  font-size: 12px;
}
.precord .quantity::before {
  content: "\6570\91CF\FF1A";/* 数量 */
  font-weight:bold;
}
.precord .quantity {
  min-width: 6em;
  margin-left:1em;
}

.sg .f-note p {
  text-indent: -1em;
  margin-left: 1em;
  margin-bottom: .25em;
}
.sg .f-note p::before {
  content: "\25A0";/* ■ */
}


/* ------------------------
 * 配達希望日とか
 */
.sg-option .f-field-lid {
  min-width: 8em;
}
.sg:not(.js-toggle-flag) .sg-gift {
  display: none;
}
.sg:not(.js-toggle-flag) .sg-option select {
  width: auto;
}
/* ------------------------
 * ギフト
 */
@media screen and (min-width: 980px) {
 .sg-gift-type-img {
   display: block;
 }
}
@media screen and (max-width: 979px) {
 .sg-gift-type-img{
   max-width: 50px;
 }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {/* IE11 */
 .sg-gift-type .f-check-item{
   width:28%;
 }
 .sg-gift-type .f-check-item img{
   width:100%;
 }
}
.sg-message li {
  margin-bottom:.5em;
}

/* ================================================
   プレゼントの選択とか　オプション
*/

.options .form-note,
.options .field-note {
  margin-bottom:5px;
}
.options small {
  color: #888;
}

@media screen and (max-width: 979px) {
  .options .form-note:not(.js-toggle-flag){ /* mbでははじめ非表示 */
    display:none;
  }
  .options fieldset {
    margin-left: 1em;
  }
}
@media screen and (min-width: 980px) {
  .options .form-label {
    font-size: 16.8px;
  }
  .options dd{
    margin-bottom: .5em;
    border-left: .4em solid #F1EFEC;
    margin-left: 1em;
    padding-left: .8em;
  }
  .options .hint {/* pcでは非表示 */
    display:none;
  }
  /* ご意見・ご要望 */
  .options .requests-field {
    width: 350px;
  }
  .options .requests-field input {
    width:100%;
  }
}

/* coupon */
.cup-active {
  color: #d00;
  margin-top: 5px;
}
.coupon-code #btn_coupon {
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  background-image: linear-gradient(to bottom, #f7a6a6 0%, #d25050 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7a6a6', endColorstr='#d25050',GradientType=0 ); /* IE6-9 */
  text-align: center;
  border: 1px solid #d25050;
  display:inline-block\9;
}
.coupon-code #btn_coupon.disabled {
  background-image: linear-gradient(to bottom, #FFF 0%, #F9F7F4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#F9F7F4', GradientType=0 );
}
.coupon-code #btn_coupon a {
  color: #ffffff;
  padding: 5px;
  display: block;
}
/* ------------------------------------------------
   最後のつぎにいくぼたん
   */
#go_next_btn {
  background-color: inherit;
  border: none;
}
@media screen and (min-width: 980px) {
  .f-end-button {
    text-align: right;
  }
  #go_next_btn {
    font-size: 18px;
  }
}
@media screen and (max-width: 979px) {
  .f-end-button {
    text-align: center;
  }
  #go_next_btn {
    font-size: 16px;
  }
}