@charset "utf-8";

/*====================================================================================================

  お支払い方法・送料

====================================================================================================*/

.l-pgTtl__txt {
  background-image:url(../image/pg-ttl.png?d=12212300);
}


/*----------------------------------------------------------------------------------------------------

  お支払い方法
  
----------------------------------------------------------------------------------------------------*/

.pay-ttl {
  width:100%;
  height:3.6em;
  background:url(../image/pay-ttl.png) no-repeat center center;
  background-size:auto 1.3em;
  position:relative;
}

.pay-ttl:before,
.pay-ttl:after {
  content:"";
  width:17em;
  height:1px;
  display:block;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  background:url(../../image/pattern/hasen.svg) repeat center top;
  background-size:contain;
}

.pay-ttl:before { top:0; }
.pay-ttl:after { bottom:0; }

.pay-info p:not(:first-of-type) {
  padding-top:0.5em;
}

.pay {
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
  background-color:rgba(255,255,255,0.7);
  text-align:left;
}

.pay__hd {
  color:#fff;
  padding:0.4em 1em 0.6em 1em;
  font-weight:600;
}

.pay.ginkou .pay__hd { background:url(../../image/pattern/bg_gold.jpg) repeat center top; }
.pay.daibiki .pay__hd { background:url(../../image/pattern/bg_green.jpg) repeat center top; }
.pay.web .pay__hd { background:url(../../image/pattern/bg_red.jpg) repeat center top; }

.pay__body.line {
  border-top:1px solid rgba(160,130,60,0.15);
}
  
.pay__info dd li:not(:first-child) {
  padding-top:0.25em;
}

@media print,screen and (min-width:641px) {
  .pay-info {
    margin-top:-0.5em;
  }
  
  .pay {
    margin-top:60px;
  }
  
  .pay__body {
    padding:2em;
  }

  .pay__info {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
  }

  .pay__info dt {
    width:34%;
    text-align:center;
    padding-right:2em;
  }
  
  .pay__info dt img {
    max-height:2.2em;
  }

  .pay__info dd {
    width:66%;
    border-left:1px solid rgba(75,60,45,0.15);
    padding-left:2em;
  }
}

@media screen and (max-width:640px) {
  .pay-info {
    text-align:left;
    margin-top:-0.5em;
    padding-bottom:0.5em;
  }
  
  .pay:first-of-type {
    margin-top:2.5em;
  }
  
  .pay:not(:first-of-type) {
    margin-top:2em;
  }
  
  .pay__body {
    padding:1.5em;
  }
  
  .pay__info {
    padding-bottom:0.25em;
  }
  
  .pay__info dt img {
    max-height:1.8em;
  }
  
  .pay__info dt {
    padding-top:0.25em;
    padding-bottom:1.5em;
  }
}


/*--------------------------------------------------------------------------------
  クレカ・電子マネーの画像
--------------------------------------------------------------------------------*/

.pay__list dt {
  font-weight:bold;
  padding-bottom:0.5em;
}

.pay__list:not(:first-child) dt {
  padding-top:1.5em;
}

.pay__list .pay-logo {
  list-style:none;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-left:-0.75em;
}

.pay__list .pay-logo li {
  margin-left:1em;
  margin-bottom:0.75em;
}

.pay__list .pay-atList li {
  padding-top:0.25em;
}

@media print,screen and (min-width:641px) {  
  .pay__list .pay-logo {
    margin-top:0.25em;
  }

  .pay__list .pay-logo img {
    height:1.8em;
  }
}

@media screen and (max-width:640px) {
  .pay__list .pay-logo img {
    height:1.5em;
  }
}


/*----------------------------------------------------------------------------------------------------

  送料について
  
----------------------------------------------------------------------------------------------------*/

.souryou-ttl {
  width:100%;
  height:3.6em;
  background:url(../image/souryou-ttl.png) no-repeat center center;
  background-size:auto 1.3em;
  position:relative;
  padding-top:1em;
}

.souryou-ttl:before,
.souryou-ttl:after {
  content:"";
  width:14em;
  height:1px;
  display:block;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  background:url(../../image/pattern/hasen.svg) repeat center top;
  background-size:contain;
}

.souryou-ttl:before { top:0; }
.souryou-ttl:after { bottom:0; }

@media print,screen and (min-width:641px) {
  .souryou {
    padding-bottom:100px;
  }
  
  .souryou-ttl {
     margin-top:100px;
  }
}

@media screen and (max-width:640px) {
  .souryou {
    padding-bottom:3.5em
  }
  
  .souryou-ttl {
     margin-top:3.5em;
  }
}


/*--------------------------------------------------------------------------------
  料金表
--------------------------------------------------------------------------------*/

.souryou-infoList {
  text-align:left;
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
  line-height:1.6;
}

.souryou-infoList li:not(:first-child) {
  margin-top:0.5em;
}

.souryou-tbl-wrap {
  overflow-x:auto; 
}

@media print,screen and (min-width:641px) {
  .souryou-infoList,
  .souryou-tbl-wrap {
    padding-top:60px;
  }
  
  .souryou-infoList {
    margin-top:-0.5em;
  }
}

@media screen and (max-width:640px) {
  .souryou-infoList,
  .souryou-tbl-wrap {
    padding-top:2em;
  }
}

.souryou-tbl thead th,
.souryou-tbl tbody th:first-child {
  position:-webkit-sticky;
  position:sticky;
  left:0;
}

.souryou-tbl {
  font-size:0.95em;
  width:100%;
  border-collapse:collapse;
  background-color:rgba(255,255,255,0.7);
}

.souryou-tbl thead th,
.souryou-tbl thead td {
  background:url(../../image/pattern/bg_brown.jpg) repeat center top;
  color:#fff;
  white-space:nowrap;
}

.souryou-tbl th,
.souryou-tbl td {
  padding:0.75em 0.5em;
  line-height:1.6;
  vertical-align:middle;
}

.souryou-tbl tr.ken td,
.souryou-tbl tr.price td {
  white-space:nowrap;
}

.souryou-tbl thead td {
  border-left:1px solid rgba(255,255,255,0.2);
}

.souryou-tbl thead th,
.souryou-tbl tbody th {
  width:6.5em;
  white-space:nowrap;
  background-color:#f1eace;
  font-weight:400;
}

.souryou-tbl tbody tr:not(:last-child) th:after {
  content:"";
  width:100%;
  height:1px;
  background-color:rgba(200,170,60,0.4);
  position:absolute;
  bottom:0;
  left:0;
}

.souryou-tbl tbody td:not(:first-of-type) {
  border-left:1px solid rgba(200,170,60,0.4);
}

.souryou-tbl tbody tr:not(:last-child) td {
  border-bottom:1px solid rgba(200,170,60,0.4);
}

.souryou-tbl tbody th {
  position:relative;
}

.souryou-tbl .kenList {
  list-style:none;
  font-size:0.9em;
}

.souryou-tbl .kenList li:not(:first-child) {
  padding-top:0.25em;
}

.souryou-tbl tr.ken td {
  vertical-align:top;
}


/*----------------------------------------------------------------------------------------------------

  販売業者情報
  
----------------------------------------------------------------------------------------------------*/

.shopInfo {
  text-align:left;
}

.shopInfo-ttl {
  line-height:1.4;
  margin-bottom:2.5rem;
}

.shopInfo-tbl {
  width:100%;
  border-collapse:collapse;
  border:1px solid rgba(200,170,60,0.6);
}

.shopInfo-tbl th {
  background-color:#f1eace;
  font-weight:400;
}

.shopInfo-tbl td {
  background-color:rgba(255,255,255,0.7);
}

.shopInfo-tbl .shopInfo__pay,
.shopInfo-tbl .shopInfo__henpin {
  padding-bottom:0.5em;
}

.shopInfo-tbl .shopInfo__pay dt:not(:first-of-type),
.shopInfo-tbl .shopInfo__henpin dt {
  padding-top:1em;
}

.shopInfo-tbl .shopInfo__pay dt,
.shopInfo-tbl .shopInfo__henpin dt {
  font-weight:600;
  font-size:1.11em;
  padding-bottom:0.25em;
  margin-left:-0.4em;
}

@media print,screen and (min-width:641px) {
  .shopInfo {
    padding-bottom:120px;
  }
  
  .shopInfo-tbl th,
  .shopInfo-tbl td {
    padding:0.75em 1em;
  }

  .shopInfo-tbl th {
    width:22%;
    white-space:nowrap;
  }

  .shopInfo-tbl tr:not(:first-child) th,
  .shopInfo-tbl tr:not(:first-child) td {
    border-top:1px solid rgba(200,170,60,0.4);
  }
  
  .shopInfo-tbl td {
    vertical-align:middle;
    font-size:0.95em;
  }
}

@media screen and (max-width:640px) {
  .shopInfo {
    padding-bottom:3.5em;
  }
  
  .shopInfo-tbl th {
    padding:0.5em 0.75em;
  }
  
  .shopInfo-tbl th br {
    display:none;
  }
  
  .shopInfo-tbl td {
    padding:1em 0.75em;
  }
  
  .shopInfo-tbl th,
  .shopInfo-tbl td {
    width:100%;
    display:block;
  }

  .shopInfo-tbl tr:not(:first-child) th {
    border-top:1px solid rgba(200,170,60,0.4);
  }
}