@charset "UTF-8";
/*-------------------------------------------------*/
/* color
/*-------------------------------------------------*/
/*-------------------------------------------------*/
/* font family
/*-------------------------------------------------*/
/*-------------------------------------------------*/
/* break point
/*-------------------------------------------------*/
/*-------------------------------------------------*/
/*-------------------------------------------------*/
/*-------------------------------------------------*/
/*ショッピングカート(変更不可）
/*-------------------------------------------------*/
.categoryFrame {
  margin-bottom: 80px; }

.checkout-title + p {
  margin: 2em 0; }

.shopping-cart {
  margin-bottom: 0; }
  .shopping-cart input {
    text-align: center; }
  .shopping-cart .continue-shopping {
    float: left;
    padding: 5px 10px; }

.form-button-alt {
  background: #e7e9ec;
  margin-top: 5px;
  border-color: #adb1b8;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  display: inline-block;
  padding: 2px;
  text-align: center;
  text-decoration: none !important;
  vertical-align: middle;
  white-space: nowrap; }
  .form-button-alt span {
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    padding: 0 6px 0 7px;
    color: #111; }
.price_more {
    font-weight: bold;
    color: #EA5615;
}
.checkout-title.reco{    color: #87B829;
    font-weight: 300;
    font-size: 40px;
    margin-bottom: 40px;
    line-height: 1;}
.free_del_red{    font-weight: bold;
    color: #EA5615;}
#cart_notice {
  background-color: #F4F5D3;
  padding: 10px;
  width: 500px;
  border: 1px solid #D0D0D0;
  margin-top: 20px;
  text-align: justify; }
  #cart_notice span {
    float: left; }
  #cart_notice ul {
    padding: 0 10px 0 60px; }

#checkoutbutton {
  text-align: right; }
  #checkoutbutton dl {
    line-height: 24px;
    margin-bottom: 15px; }
  #checkoutbutton dt {
    float: left;
    width: 100px;
    font-weight: bold; }
  #checkoutbutton dd {
    font-size: 24px;
    font-weight: bold; }
  #checkoutbutton #shipping_ems_estimate {
    margin-bottom: 20px; }
    #checkoutbutton #shipping_ems_estimate dt {
      float: none;
      font-size: 14px !important; }
    #checkoutbutton #shipping_ems_estimate #shipping_fee {
      color: #EA5615;
      font-size: 14px !important; }
    #checkoutbutton #shipping_ems_estimate a {
      text-decoration: underline; }
      #checkoutbutton #shipping_ems_estimate a:hover {
        opacity: .5;
        text-decoration: none; }

/*-------------------------------------------------*/
/*ログイン
/*-------------------------------------------------*/
.loginFrame {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  margin-bottom: 80px; }
  .loginFrame > * {
    width: calc((100% - 60px) / 2); }
  .loginFrame .title h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px; }
  .loginFrame p {
    margin: 2em 0; }
    .loginFrame p.note {
      color: #EA5615; }

.login table {
  width: 100%; }
  .login table th {
    width: 9em; }
  .login table td {
    padding: 4px 0; }

.login input.text {
  width: 270px;
  padding: 5px; }

.login .reminder {
  background: url(../images/btn_arrrow_next.png) no-repeat center left;
  font-size: 14px;
  margin: 1em 0;
  padding: 0;
  text-indent: 15px; }
  .login .reminder a {
    text-decoration: underline; }
    .login .reminder a:hover {
      opacity: .5;
      text-decoration: none; }

.loginFrame .title h2.first_customer {
  background: url(../images/icon_beginner.png) no-repeat left center;
  padding-left: 40px; }

.loginFrame .title h2.login_customer {
  background: url(../images/icon_login.png) no-repeat left center;
  padding-left: 40px; }

/*-------------------------------------------------*/
/*注文履歴(変更不可）
/*-------------------------------------------------*/
.num {
  width: 600px;
  margin: 20px 0; }
  .num td a {
    display: inline-block;
    padding: 10px 30px 10px 10px; }

.dataT {
  width: 100%; }
  .dataT .num {
    padding: 0; }
    .dataT .num td {
      border-right: 1px solid #fff;
      border-bottom: 1px solid #fff;
      padding: 2px; }
  .dataT.order-history {
    margin: 40px 0 60px; }
  .dataT caption {
    padding: 0 0 5px 0;
    margin: 0 auto;
    width: auto;
    text-align: right; }
  .dataT th {
    border-bottom: 1px solid #e7e7e7;
    padding: 6px 12px 6px 12px;
    white-space: nowrap; }
  .dataT tr {
    background: #fff; }
  .dataT .odd {
    background: #f8f7f5; }
  .dataT td {
    border-bottom: 1px solid #ddd;
    padding: 6px 12px 6px 12px;
    vertical-align: top; }
    .dataT td img {
      margin: 0 auto; }
    .dataT td.lft {
      text-align: left; }
  .dataT tr.alt td {
    background: #ddd;
    color: #5E6064; }
  .dataT tr td.alt, .dataT tr.alt td.alt {
    background: #ddd; }
  .dataT tfoot {
    border-bottom: 1px solid #ddd; }
    .dataT tfoot td {
      padding: 1px;
      padding-bottom: 1px;
      border-bottom: 0;
      padding: 3px 12px 3px 12px; }
  .dataT tbody td {
    border-bottom: 1px solid #ddd; }
  .dataT tbody td span.blue{
    font-size:12px;
color:#357ae8}
  .dataT + .button {
    margin-top: 40px; }

/* Image free rules for Internet Explorer <7 */
.required {
  color: #F00; }

.subtotal {
  color: #EA5615; }

.recent-order {
  margin: 60px 0; }

/*-------------------------------------------------*/
/*フォームクラス(変更不可）
/*-------------------------------------------------*/
.form-list {
  display: block; }
  .form-list:after {
    content: "";
    display: block;
    clear: both;
    height: 0; }

.input-text, .input-textarea {
  width: 350px; }

.input-text-short {
  width: 60px; }

.input-text, .input-text-short {
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #ABADB3;
  border-right-color: #DBDFE6;
  border-bottom-color: #E3E9EF;
  border-left-color: #DBDFE6;
  margin: 0;
  padding: 2px; }

.input-text:focus, .input-text-short:focus {
  background-color: #FEFCE7; }

.button {
  text-align: right; }

#btn_postcode {
  display: inline-block;
  background: #ddd;
  font-size: 14px;
  line-height: 30px;
  padding: 0 10px;
  text-align: center;
  vertical-align: top; }
  #btn_postcode:hover {
    text-decoration: none;
    opacity: .5; }

a.edit {
  color: #aaa;
  font-size: 11px;
  font-weight: normal;
  text-decoration: none; }
  a.edit:hover {
    text-decoration: none; }

fieldset {
  padding: 0;
  margin: 0;
  border: 0px; }

* + html fieldset {
  margin-top: 10px; }

legend {
  font-weight: bold;
  font-size: 16px;
  display: block;
  position: relative;
  margin-bottom: 1em; }

.form-list input.input-text, .form-list input.input-text-short {
    width: 100%;
    line-height: 32px;
    height: 50px;
	background: #f6f9de;
}
.form-list select.input-text {
    padding: 12px!important;
	background: #f6f9de;
}
.form {
  border: 1px solid #ddd;
  background-color: #FFF;
  margin-bottom: 20px;
  padding: 20px; }
  .form#close_account {
    margin: 1em 0; }
    .form#close_account p {
      margin: 1em 0; }
    .form#close_account input {
      border-color: #aaa;
      padding: 5px; }
  .form a {
    display: inline-block; }
.form select{
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
}
#defaultSelected select{background: #fff;
    padding: 5px;
    border: 1px solid #ccc;}
.memo {
  color: #aaa;
  font-size: 14px; }

* + html fieldset {
  margin-top: 10px; }

.form-list dt {
  width: 10em !important;
  clear: both;
  float: left;
  display: block;
  margin-bottom: 5px; }

.form-list dd {
  margin-bottom: 5px;
  width: auto !important;
  float: left;
  display: block;
  padding-bottom: 1em; }
  .form-list dd input[type="text"],
  .form-list dd textarea {
    padding: 5px; }

.form-list small {
  color: #006D4B; }

.step {
  color: #999;
  height: 20px;
  padding-top: 5px;
  padding-left: 15px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #DCE1E7; }

.current {
  color: #6D9ADE;
  font-weight: bold; }

.step img {
  padding-right: 10px;
  vertical-align: middle; }

.form-list td {
  vertical-align: top; }

/*-------------------------------------------------*/
/*支払手続き(変更不可）
/*-------------------------------------------------*/
#mainNav {
  position: relative;
  display: block;
  height: 80px;
  margin-bottom: 40px; }
  #mainNav li {
    font-size: 12px;
    height: 71px;
    list-style: none;
    float: left;
    background-color: #efefef;
    background-image: url(../images/checkout_navBtn.gif);
    background-repeat: no-repeat;
    background-position: right top; }
    #mainNav li.current {
      background-color: #bbbbbb;
      background-image: url(../images/checkout_navBtn.gif); }
    #mainNav li.lastDone, #mainNav li.done {
      background-color: #efefef; }
    #mainNav li a {
      color: #777; }
      #mainNav li a:link, #mainNav li a:visited, #mainNav li a:hover, #mainNav li a:active {
        color: #777;
        text-decoration: none; }
    #mainNav li.lastDone a {
      color: #555;
      text-decoration: none; }
      #mainNav li.lastDone a:link, #mainNav li.lastDone a:visited, #mainNav li.lastDone a:hover, #mainNav li.lastDone a:active {
        color: #555;
        text-decoration: none; }
    #mainNav li.current a {
      color: #555;
      text-decoration: none; }
      #mainNav li.current a:link, #mainNav li.current a:visited, #mainNav li.current a:hover, #mainNav li.current a:active {
        color: #555;
        text-decoration: none; }
    #mainNav li.done a {
      color: #555;
      text-decoration: none; }
      #mainNav li.done a:link, #mainNav li.done a:visited, #mainNav li.done a:hover, #mainNav li.done a:active {
        color: #555;
        text-decoration: none; }
      #mainNav li.done a:hover {
        color: #555;
        cursor: hand; }
    #mainNav li.lastDone a:hover {
      color: #555;
      cursor: hand; }
    #mainNav li a em {
      width: 160px;
      display: block;
      margin: 6px 0 0 10px;
      font-style: normal;
      font-weight: bold; }
    #mainNav li a span {
      width: 140px;
      display: block;
      margin-left: 10px;
      font-weight: normal; }
    #mainNav li.mainNavNoBg {
      background-image: none; }
    #mainNav li a {
      height: 71px;
      display: block; }
  #mainNav.fiveStep li {
    width: 25%;
    margin: 0px; }
    #mainNav.fiveStep li a, #mainNav.fiveStep li.current a {
      width: 210px;
      color: #555; }
  #mainNav.fourStep li {
    width: 227px; }
    #mainNav.fourStep li.mainNavNoBg {
      width: 229px; }
    #mainNav.fourStep li a {
      width: 227px; }
  #mainNav.threeStep li {
    width: 303px; }
    #mainNav.threeStep li.mainNavNoBg {
      width: 304px; }
    #mainNav.threeStep li a {
      width: 303px; }
  #mainNav.twoStep li {
    width: 455px; }
    #mainNav.twoStep li a {
      width: 455px; }

.guide-text {
  margin: 0 0 1em; }

.form_select {
  width: 20px;
  text-align: center; }

.address_width {
  width: 33%;
  padding: 0;
  vertical-align: top; }
  .address_width a {
    color: #EA5615;
    font-size: 14px;
    margin: 0 0 1em 0;
    text-decoration: underline; }
    .address_width a:hover {
      opacity: .5;
      text-decoration: none; }

   .post_code .address_width br:nth-child(2) {    /* margin-bottom: 15px; */
    display: block;
    content: "\A";
    background-image: url(../images/s-herb/name.png);
    background-repeat: no-repeat;
    width: 120px;
    height: 20px;
}
   .post_code .address_width br:nth-child(3) {    /* margin-bottom: 15px; */
    display: block;
    content: "\A";
    margin-top: 15px;
    background-image: url(../images/s-herb/address.png);
    background-repeat: no-repeat;
    width: 120px;
    height: 20px;
}
   .post_code .address_width br:nth-last-of-type(2) {    /* margin-bottom: 15px; */
    display: block;
    margin-top: 15px;
    content: "\A";
    background-image: url(../images/s-herb/tel.png);
    background-repeat: no-repeat;
    width: 120px;
	   height: 20px;}
/*-------------------------------------------------*/
/*ajax(変更不可）
/*-------------------------------------------------*/
div#payment {
  display: none; }

.errors {
  color: #CC3333; }


/*-------------------------------------------------*/
/*subscription CSS
/*-------------------------------------------------*/
#subscription_option select#cycle_days, select#cycle_months {
    border: 1px solid #a9a9a9;
}

#subscription_option input#check_date {
    background: #EA5615;
    color: #fff;
    margin: 0 20px;
    padding: 5px 10px;
}


/*-------------------------------------------------*/
/*stripe CSS
/*-------------------------------------------------*/

.stripeForm #card-name {
    background-color: #fff;
    padding: 6px 12px;
    border-radius: 0!important;
    border: 1px solid #666!important;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
    margin-bottom: 10px;
    width: 310px;
    margin-right: 5px;
    float: left;    height: 40px;
}
.StripeElement {
    background-color: white;
    padding: 6px 12px!important;
    border-radius: 0!important;
    border: 1px solid #666!important;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
    margin-bottom: 10px!important;
    float: left;    height: 40px;
	width: 380px!important;}