@charset "utf-8";

html {
  font-size: 62.5%;
}

/*========================================
  Form Style
========================================*/
.form_section {
  font-size: 3.6rem;
  margin: 0 2rem;
  text-align: justify;

  p {
    margin: 0;
  }
}

.hide {
  display: none;
}

/*------------------------------
  Input/Select for Form
------------------------------*/
.form_section {
  select {
    border-radius: 1rem;
    font-size: 1em;
    width: 100%;
    min-height: 2.4em;
    padding: 1.5rem 1rem;
  }

  option {
    padding: 0;
    min-height: auto;

    &:disabled {
      color: var(--ClrGmg);
    }
  }

  input {
    border-radius: 1rem;
    font-size: 1em;
    min-height: 2.4em;
    padding: 1.5rem 1rem;

    &[type=checkbox],
    &[type=radio] {
      vertical-align: middle;
      -webkit-transform: scale(1.8);
      transform: scale(1.8);
      height: 2.6rem;
      min-height: unset;
    }
  }

  .form_input_box {
    input[type=checkbox],
    input[type=radio] {
      display: none;
    }

    input[type=checkbox] + label,
    input[type=checkbox] + div + label,
    input[type=radio] + label,
    input[type=radio] + div + label {
      position: relative;
      display: inline-block;
      margin: 0;
      cursor: pointer;
      padding: 0 2rem 0 3.2rem;

      &::before {
        content: '';
        display: block;
        position: absolute;
        border: solid .2rem var(--Clr15);
        top: .25rem;
        left: 0rem;
        width: 2.5rem;
        height: 2.5rem;
      }
    }

    input[type=checkbox] + label,
    input[type=checkbox] + div + label {
      &::before {
        border-radius: .4rem;
      }
    }

    input[type=radio] + label,
    input[type=radio] + div + label {
      &::before {
        border-radius: 50%;
      }
    }

    input[type=checkbox]:checked + label,
    input[type=checkbox]:checked + div + label {
      &::before {
        background-color: var(--Clr16);
        border-color: var(--Clr16);
      }
    }

    input[type=radio]:checked + label,
    input[type=radio]:checked + div + label {
      &::before {
        border-color: var(--Clr16);
      }
    }

    input[type=checkbox]:checked + label,
    input[type=checkbox]:checked + div + label {
      &::after {
        content: '';
        display: block;
        position: absolute;
        background-color: transparent;
        border-right: solid .4rem var(--ClrWht);
        border-bottom: solid .4rem var(--ClrWht);
        border-radius: 0 0 .4rem 0;
        top: .5rem;
        left: .75rem;
        width: 1rem;
        height: 1.75rem;
        transform: rotate(35deg);
      }
    }

    input[type=radio]:checked + label,
    input[type=radio]:checked + div + label {
      &::after {
        content: '';
        display: block;
        position: absolute;
        background-color: var(--Clr16);
        border-radius: 50%;
        top: .75rem;
        left: .5rem;
        width: 1.5rem;
        height: 1.5rem;
      }
    }
  }

  [id^=input_extra] {
    .form_input_box {
      input[type=radio] + label,
      input[type=radio] + div + label {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0 0 .5rem 3.2rem;
      }
    }
  }
}



.form_input_box {
  input[type=text],
  input[type=email],
  input[type=password] {
    width: 100%;
  }

  textarea {
    resize: vertical;
    border-radius: 1rem;
    font-size: 1em;
    width: 100%;
    padding: 1rem 1rem;
  }

  input {
    &.zip1,
    &.zip2 {
      width: 30%;
    }

    &.input_year {
      width: 25%;
    }

    &.tel_no {
      width: 22.5%;
    }

    &.card_date,
    &.security_code {
      width: 25%;
    }
  }

  select {
    &#OrderDeliveryDateYear {
      width: 25%;
    }

    &.ureru_efo_birthday,
    &.ureru_efo_delivery_date {
      width: 20%;
    }
  }

  label {
    vertical-align: middle;
    margin: 0 2rem;
  }

  input[type=text],
  input[type=tel],
  input[type=email],
  textarea,
  select {
    &:focus {
      background-color: var(--Clr25);
      border: .1rem solid var(--Clr24);
      outline: 0;
    }
  }

  &.efo_input_password_wrapper {
    display: table-cell;
  }

  .efo_toggle_input_password {
    position: absolute;
    top: 50%;
    right: 2.5rem;
    transform: translateY(-50%);
    z-index: 100;

    .efo_toggle_input_password_show {
      display: none;
    }

    .efo_toggle_input_password_hide {
      display: block;
    }

    svg {
      display: block;
      padding: .2em;
      font-size: 2em;
      width: 1.3em;
      height: 1.3em;
    }
  }
}

textarea {
  &:focus {
    background-color: var(--Clr25);
    border: .1rem solid var(--Clr24);
    outline: 0;
  }
}

.form-section01 {
  li {
    textarea {
      &:focus {
        background-color: var(--Clr25);
        border: .1rem solid var(--Clr24);
        outline: 0;
      }
    }
  }
}

/*------------------------------
  Form Title
------------------------------*/
.ttl01,
.form_title {
  color: var(--ClrWht);
  background-color: var(--Clr03);
  background-image: linear-gradient( to bottom, var(--Clr03) 0%, var(--Clr04) 99% );
  border: .5rem solid var(--ClrWht);
  border-radius: .8rem;
  box-shadow: .2rem .2rem .6rem var(--ClrNmr);
  font-size: .5em;
  font-weight: 700;
  text-shadow: .1rem .1rem .1rem var(--Clr05);
  margin-bottom: 2rem;
  padding: .5em 1em;
}

/*------------------------------
  Landing Form
------------------------------*/
#landing_form {
  background-color: var(--ClrWht);
  border-bottom: .2rem solid var(--Clr10);
  width: 98%;
  margin: 0 auto;

  .form_box {
    &:nth-of-type(1) {
      margin: 4rem auto 0;
    }
  }
}

#form_checkout_title {
  display: none;
}

.form_box {
  display: table;
  color: var(--ClrBlk);
  background-color: var(--Clr02);
  border-right: .2rem solid var(--Clr10);
  border-left: .2rem solid var(--Clr10);
  text-align: justify;
  vertical-align: middle;
  font-size: .5em;
  width: 100%;
}

.form_box_label {
  display: table-cell;
  background-color: transparent;
  border-top: .2rem solid var(--Clr10);
  vertical-align: top;
  width: 35%;
  padding: 2rem;
}

.form_input_box {
  display: table-cell;
  background-color: var(--ClrWht);
  border-top: .2rem solid var(--Clr10);
  border-left: .2rem solid var(--Clr10);
  width: 65%;
  padding: 1.6rem 2.4rem 1.2rem 2.4rem;

  #input_name &,
  #input_kana & {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }

  .form_example {
    color: var(--ClrNmr);
    font-size: .8em;
    width: 100%;
    padding: .5em 0 0;
  }
}

.input_label {

  #input_name &,
  #input_kana & {
    width: 14%;
    text-align: center;
    padding: 0;

    &::after {
      content: '\ff1a'
    }
  }
}

#input_name,
#input_kana {
  input[type=text] {
    width: 34%;
  }
}

.credit_example {
  color: var(--ClrNmr);
  font-size: .8em;
  padding: 0;
}

.form_notice {
  color: var(--ClrNmr);
  vertical-align: middle;
  font-size: .4em;
}

/*------------------------------
  Payment Method
------------------------------*/
#form-payment-method {
  width: 100%;
}

/*--------------------
  for radio button
--------------------*/
#form_payment_method_radio,
#sku_radio {

  input[type=radio] {
    display: none;
  }

  .input_radio,
  .input_radio_sku {
    margin: 0 0 1em;
  }

  input[type=radio] + label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-size: 2.1rem;
    line-height: 1.5;
    margin: 0 0 0 0;
    padding: 0 0 0 4.8rem;

    &::before,
    &::before {
      content: '';
      position: absolute;
      top: 0rem;
      left: 0;
      box-sizing: border-box;
      border: .2rem solid var(--Clr15);
      border-radius: 50%;
      display: block;
      width: 3.2rem;
      height: 3.2rem;
      background-color: var(--ClrWht);
    }
  }

  input[type=radio]:checked + label {
    &::before {
      border: .2rem solid var(--Clr16);
    }

    &::after {
      content: '';
      position: absolute;
      top: .6rem;
      left: .6rem;
      box-sizing: border-box;
      border-radius: 50%;
      display: block;
      width: 2rem;
      height: 2rem;
      background-color: var(--Clr16);
    }
  }
}

/*--------------------
  CreditCard
--------------------*/
#form_payment_method_credit {
  display: none;
  background-color: var(--ClrWht);
  border: solid .2rem var(--Clr10);
  font-size: 1em;
  margin-top: 2rem;
  padding: 1rem 2rem;

  &.already_token {
    #ureru_creditcard_iframe-dummy-div {
      display: none;
    }

    .message {
      display: block;
    }
  }

  .message {
    display: block;
    letter-spacing: .025em;
    padding: 0 0 0 1em;
    text-indent: -1em;
  }
}

.credit_box {
  margin-bottom: 1rem;
}

.credit_input {
  width: 95%;
}

/*--------------------
  AmazonPayments
--------------------*/
#oneClickOrderBox {
  border: solid .3rem var(--Clr10);
  text-align: center;
  margin: 2rem auto 0 auto;
  padding: 4rem 0;

  p.title {
    color: var(--ClrRed);
    background: none !important;
    font-weight: 700;
    font-size: 3.6rem;
  }

  p.subTitle {
    color: var(--ClrAmzn01);
    font-weight: 700;
    font-size: .8em;
    margin: 2rem 0;
  }

  p.message {
    font-size: .6em;
    margin-top: 2rem;
  }

  img {
    max-height: auto !important;
    width: 29.6rem;
    margin: 0 auto;
  }
}

#PayWithAmazonAll {
  margin: 0 auto;
}

#oneClickOrderArea {
  p.notUseOneClickOrderMessage {
    color: var(--ClrAmzn01);
    font-weight: 900;
    text-align: center;
    font-size: .8em;
    margin: 2rem 0;
    letter-spacing: -.2rem;
  }
}

#PayWithAmazonAllArea {
  &.form_box {
    .form_box_label,
    .form_input_box {
    /*  border-bottom: .2rem solid var(--Clr10);*/
    }
  }

  > .form_box {
    &:last-of-type {
      .form_box_label,
      .form_input_box {
        border-bottom: .2rem solid var(--Clr10);
      }
    }
  }
}

#PayWithAmazonArea {
  .error-message {
    font-size: 2em;
  }
}

#consentWidgetMessage {
  font-size: 1.8em;
  font-weight: 700;
  margin: 1rem auto;
}

#changePayOnly {
  .changePayOnly-link {
    font-size: 2em;
  }
}

#changeAddressPay {
  font-size: .5em;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

#PleaseInputOtherForm {
  display: none;
  font-size: .5em;
  font-weight: 700;
  margin: 2rem auto;
}

.form_k {
  #PleaseInputOtherForm {
    font-size: 0;
  }
}

#form_payment_method_amazon_payments {
  #form_payment_method_amazon_payments_form {
    margin: 0;
    padding: 0;
  }
}

#PayWithAmazon {
  .AmazonPaymentsLoginButton {
    margin: 0;
  }
}

#ReadonlyPayWithAmazonArea {
  margin: 2rem auto 0;
}

.apArea {
  background-color: var(--ClrAmzn02);
  text-align: center;
  margin: 1rem auto 2rem;
  padding: 1.2rem 0;

  .apArea_bg_white {
    background-color: var(--ClrWht);
    border-radius: .6rem;
    width: 96%;
    margin: 0 auto;
    padding: 3rem 0;

    .apTit {
      color: var(--ClrAmzn03);
      border-bottom: .1rem solid var(--ClrAmzn02);
      font-size: 1em;
      margin-bottom: 2rem;
      padding-bottom: 2rem;
    }

    > a {
      display: block;
      padding: 0 4rem;

      > img {
        width: auto;
        margin: 0 auto;
      }
    }

    .MB60 {
      margin-bottom: 0rem;
    }

    #PayWithAmazonAllArea {
      width: 80%;
      margin: 4rem auto 0;

      img {
        &.amazonpay-button-inner-image {
          aspect-ratio: 296 / 60;
          width: auto;
          margin: 0 auto;
        }
      }
    }
  }
}

/*--------------------
  Payment Notes
--------------------*/
[id^=form_payment_method_]:not(#form_payment_method_select, [id^=form_payment_method_credit], [id*=_inner], [id*=_form]) {
  font-size: .7em;
  padding-top: 1em;
}

[id^=form_payment_method_] {
  [class*=_image],
  [class*=_img],
  [id*=_image] {
    margin-bottom: .5em;

    img {
      max-width: 100%;
      height: auto;
    }
  }
}

[id^=form_payment_method_] {
    [class*=_note] {
    background-color: var(--ClrWht);
    border: .2rem solid var(--Clr10);
    font-size: 1em;
    letter-spacing: -.025em;
    padding: 1em 1em .5em 1em;
  }

  [class*=_note] {
    a,
    a:visited:hover {
      color: var(--Clr06);
    }

    a:hover,
    a:visited {
      color: var(--Clr07);
    }

    .c01 {
      color: var(--ClrRed);
    }

    .numbering {
      padding-left: 1em;
      text-indent: -1em;
    }

    .maru {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 0 0 .25em;

      &::before {
        content: '\25CF';
        display: inline-block;
        padding: 0 .5em 0 0;
      }
    }
  }

  [class*=_title]:not(.credit_title) {
    background-color: var(--ClrMlg);
    border: .2rem solid var(--Clr10);
    font-size: 1.15em;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: .5em;
    padding: .5em;
  }

  [class*=_description] {
    margin-bottom: 1em;
    padding: 0 .75em;
  }

  [class*=_annotation] {
    margin-bottom: 1em;
    padding: 0 .75em 0 1.75em;
    text-indent: -1em;
  }
}

/*--------------------
  atobarai dotcom
--------------------*/
/*
#form_payment_method_atobarai_com {
  border: dashed .2rem var(--ClrRed);
  padding: 0;

  #atobarai_com_note {
    text-align: justify;
    letter-spacing: -.025em;
    margin: 0;
    padding: 0 .5em 1em;
  }

  .atobarai_com_title {
    background-color: transparent;
    border: none;
    border-bottom: solid .2rem var(--ClrRed);
    font-size: 1.2em;
    margin-bottom: 1em;

    .ttl {
      font-size: 1.2em;
    }
  }

  .atobarai_com_description {
    margin: 0;
    padding: 0 .5em 0 .5em;

    .font10,
    p {
      font-size: 1em;
    }
  }
}
*/
/*--------------------
  cod
--------------------*/
#form_payment_method_collect,
#daibiki_area {
  box-sizing: border-box;
  background: none repeat scroll 0 0 var(--ClrMlg);
  border: .2rem solid var(--Clr10);
  width: 100%;
  font-size: 2rem;
  margin-top: 1em;
  padding: .5em .5em 0 .5em;

  p {
    background-color: var(--Clrlgr);
    font-size: .8em;
    line-height: 1.5;
    margin: 0;
    padding: .5em;
  }
}

#form_payment_method_collect_inner,
#daibiki_area_inner {
  box-sizing: border-box;
  background: none repeat scroll 0 0 var(--Clrlgr);
  border: .2rem solid var(--Clr10);
  width: 100%;
  margin: 0 0 .5em 0;
}

/*--------------------
  Paidy
--------------------*/
#form_payment_method_paidy {
  display: none;

  p {
    margin: 0;
  }
}

.sp_paidy_desc {
  margin: 0 auto;
  padding: 0;

  &__banner {
    margin: 0 auto 1rem auto;

    img {
      width: 100%;
    }
  }

  &__text {
    background-color: var(--ClrWht);
    border: .2rem solid var(--Clr10);
    text-align: justify;
    letter-spacing: .025em;
    padding: 1rem 1rem .5rem 1rem;

    div {
      &:not(:last-child) {
        padding-bottom: 1rem;
      }

      p.bold {
        padding-left: 1rem;
        font-weight: unset;
        font-size: .5em;
      }
    }

    p {
      font-size: .7em;
    }

    &--link {
      font-size: .7em;
    }
  }
}

/*------------------------------
  Agreement
------------------------------*/
#agreement {
  position: relative;
  background-color: var(--Clr02);
  border: solid .2rem var(--Clr10);
  font-size: .5em;
  width: 98%;
  margin: 2rem auto 0;
  padding: 3rem 2rem;

  > table {
    border: 0;
    width: 100%;
    padding: 0 1rem;

    &:first-of-type {
      margin: 0 0 2rem;
    }

    .agreement_check {
      text-align: center;
      vertical-align: top;
      width: 3.8rem;
    }

    .agreement_label {
      vertical-align: middle;
      padding: 0 0 0 .5em;
    }
  }

  .tipsy {
    table {
      margin: 0;
    }
  }

  a,
  a:visited:hover {
    color: var(--Clr06);
  }

  a:hover,
  a:visited {
    color: var(--Clr07);
  }
}

/*------------------------------
  EFO overwrite
------------------------------*/
@media screen and (min-width: 751px) {
  .form_section {
    #efo_required_box {
      font-size: 2.4rem;
    }

    .ureru-efo-baloon-wrapper {
      width: 80% !important;
      padding: 0 !important;
    }
  }
}

.form_section {
  .ureru-efo-baloon-wrapper {
    width: 90% !important;
    padding: 0 !important;
  }

  .ureru-efo-baloon-wrapper {
    #input_name &,
    #input_kana & {
      width: 80% !important;
      margin-top: -7.5em !important;
      margin-left: 3em !important;
    }
  }
}

/*------------------------------
  Required Icon
------------------------------*/
span.form_required,
span.form_notice,
.must {
  color: var(--ClrWht);
  background-color: var(--ClrRed);
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
  font-size: .8em;
  line-height: 1;
  letter-spacing: .05em;
  margin: 0.25em 0 0 1em;
  padding: .2em .3em;
}

span.form_required {
  float: right;
}

/*------------------------------
  Form K
------------------------------*/
.form_k {
  #landing_form {
    border-bottom: none;
    .form_box {
      &:last-of-type {
        border-bottom: .2rem solid var(--Clr10);
      }
    }
  }

  #input_name {
    margin-top: 4rem;
  }

  #input_email_confirm {
    border-bottom: .2rem solid var(--Clr10);
  }
}

.btnNext-area {
  width: 100%;
  padding: 2rem;
  text-align: center;

  .message {
    color: var(--ClrRed);
    font-size: .6em;
    font-weight: 700;
    margin: 0;
  }

  .btnNext {
    cursor: pointer;
    color: var(--ClrBlk);
    background-image: linear-gradient( to bottom, var(--ClrWht) 0%, var(--ClrLgr) 100%);
    border: solid .3rem var(--Clr10);
    box-shadow: 0 0 .8rem var(--ClrGmg);
    border-radius: 8rem;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    width: 60%;
    margin: .3em auto;
    padding: .3em;
  }
}

/*------------------------------
  Error Message
------------------------------*/
.error-message {
  color: var(--ClrRed);
  background-color: var(--ClrErr01);
  font-weight: 700;
  font-size: .5em;
  margin: .5em 0;
}

#duplicate_error-box {
  &.form_box {
    border: none;
    background-color: var(--ClrWht);
  }
}

#duplicate_error {
  &.error-message {
    font-size: 1.5em;
  }
}

/*------------------------------
  IME Mode
------------------------------*/
#OrderFamilyKana,
#OrderGivenKana {
  ime-mode: active;
}

#OrderZip1,
#OrderZip2 {
  ime-mode: disabled;
}

#OrderTelNo1,
#OrderTelNo2,
#OrderTelNo3,
#OrderEmail,
#OrderEmailConfirm,
#OrderBirthdayYear {
  ime-mode: disabled;
}

/*------------------------------
  Honki Check
------------------------------*/
.form-section01 {
  background-color: var(--Clr18);
  border: .4rem solid var(--Clr17);
  border-radius: 2.5rem;
  font-size: .6em;
  margin: 1em auto;
  padding: 1em;

  h3 {
    color: var(--ClrRed);
    text-align: center;
    font-weight: 700;
    font-size: 1.3em;
    margin-bottom: 1em;
  }

  input[type=checkbox] {
    display: none;
  }

  ul {
    border-bottom: .2rem var(--Clr17) dashed;
    padding-bottom: .5em;
  }

  li {
    font-size: 1em;
    margin-top: .5em;

    > input[type=checkbox] + label,
    > input[type=checkbox] + div + label {
      position: relative;
      display: inline-block;
      margin: 0;
      cursor: pointer;
      padding: 0 2rem 0 4rem;

      &::before {
        content: '';
        display: block;
        position: absolute;
        background-color: var(--ClrWht);
        border: solid .2rem var(--ClrBlk);
        border-radius: .4rem;
        top: .4rem;
        left: .4rem;
        width: 2.5rem;
        height: 2.5rem;
      }
    }

    > input[type=checkbox]:checked + label,
    > input[type=checkbox]:checked + div + label {
      &::before {
        background-color: var(--Clr16);
        border-color: var(--Clr16);
      }

      &::after {
        content: '';
        display: block;
        position: absolute;
        background-color: transparent;
        border-right: solid .4rem var(--ClrWht);
        border-bottom: solid .4rem var(--ClrWht);
        border-radius: 0 0 .4rem 0;
        top: .65rem;
        left: 1.15rem;
        width: 1rem;
        height: 1.75rem;
        transform: rotate(35deg);
      }
    }

    .att-msg {
      color: var(--ClrRed);
      background-color: var(--ClrErr01);
      font-weight: 700;
    }

    .must {
      font-size: .6em;
    }

    [class^=check_] {
      padding: 0 1rem;
    }

    .check_textarea {
      padding: 1rem 1rem 0;

      textarea {
        border-radius: 1rem;
        font-size: 1em;
        width: 100%;
        height: 10em;
        padding: 1rem;
      }
    }

    #countUpBlock {
      font-size: 1em;
    }
  }
}

/*------------------------------
  Confirm Block
------------------------------*/
.order_info_table {
  border-left: .2rem solid var(--Clr10);
  border-top: .2rem solid var(--Clr10);
  font-size: .5em;
  width: 98%;
  margin: 0 auto 1rem;

  th {
    color: var(--ClrBlk);
    background-color: var(--Clr02);
    border-right: .2rem solid var(--Clr10);
    border-bottom: .2rem solid var(--Clr10);
    text-align: center;
    vertical-align: middle;
    width: 35%;
    padding: 1.6rem;
  }

  td {
    border-right: .2rem solid var(--Clr10);
    border-bottom: .2rem solid var(--Clr10);
    vertical-align: middle;
    padding: 1.6rem;
  }
}

.customer_info {
  margin-top: 4rem;

  .form_box {
    display: table;
    width: 98%;
    margin: 0 auto;

    &:last-of-type {
      .form_box_label,
      .form_input_box {
        border-bottom: .2rem solid var(--Clr10);
      }
    }
  }

  .form_box_label {
    display: table-cell;
  }

  .form_input_box {
    display: table-cell;
    padding: 1.6rem 2.4rem;
  }
}

#order_info_checkout {
  background-color: var(--ClrWht);
}

#order_info_payment_box {
  margin: 4rem 0 4rem;

  #order_info_payment {
    .form_input_box {
      border-top: none;
      border-bottom: .2rem solid var(--Clr10);
      border-left: none;
      width: 100%;
      margin: 0 auto;
    }
  }
}

#order_info_payment {
  color: var(--ClrBlk);
  border-top: .2rem solid var(--Clr10);
  width: 98%;
  margin: 0 auto;
}

/*---------------------------------------
  Line Box
---------------------------------------*/
.line_box {
  font-size: 2rem;
  padding: 0 .25rem 1rem;

  .line_box_inner {
    font-size: 1em;
    padding: .5rem 1rem;

    h2 {
      text-align: center;
      font-weight: 700;
      font-size: 1em;
      letter-spacing: -.15em;
    }
  }

  &.failed {
    .line_box_inner {
      border: solid .2rem var(--ClrLine01);
      border-radius: 1rem;
    }

    .add_friend_box {
      .login_button,
      .login_button_v2 {
        padding: 70% 0 0 0;
      }
    }
  }

  #line_wrapper,
  .line_wrapper {
  }

  .error-message {
    color: var(--ClrWht);
    background-color: var(--ClrRed);
    text-align: justify;
    font-size: .8em;
    letter-spacing: .025em;
    margin: 1rem 1rem 1rem;
    padding: .2em;
  }

  .add_friend_box {

    .message,
    > p:nth-of-type(2) {
      display: none;
    }

    .add_friend_link {
      text-align: center;
      font-size: .9em;
      width: 100%;
      margin: 0 auto;
      padding: 1rem 0 0 0;

      a {
        color: var(--ClrLine02);
      }
    }

    .login_button,
    .login_button_v2 {
      display: block;
      overflow: hidden;
      background: url(../img/bt_line_login_v2.jpg) no-repeat center;
      background-size: contain;
      text-indent: 100%;
      width: 100%;
      height: 0;
      margin: 0;
      padding: 90% 0 0 0;
    }

    .login_button02 {
      width: 90%;
      margin: 0 auto;
    }

    .annotation {
      display: none;
      text-align: justify;
      font-size: .7em;
      line-height: 1.2;

      li {
        &:nth-of-type(1) {
          padding: 0 0 0 1em;
          text-indent: -1em;
        }
      }
    }

    > div {
      display: none;
      text-align: justify!important;
      font-size: .8em!important;
      letter-spacing: .025em;
      line-height: 1.5;
      margin: 0 auto .5rem;

      > p {
        text-align: justify!important;
        font-size: .8em!important;
        letter-spacing: .025em;
        line-height: 1.5;
        margin: 0 auto .5rem;

        &:nth-of-type(1) {
          font-size: 1em!important;
          font-weight: 700!important;
          text-decoration: underline!important;
          text-indent: -1em;
          padding: 0 0 0 1em;
        }

        &:nth-of-type(3),
        &:nth-of-type(4),
        &:nth-of-type(5) {
          padding: 0 0 0 1em;
          text-indent: -1em;
        }

        &:nth-of-type(5) {
          span {
            &:nth-of-type(1) {
              color: var(--ClrLine01)!important;
              border: .2rem solid var(--ClrLine01)!important;
              border-radius: .5rem!important;
              white-space: nowrap!important;
              font-weight: 700!important;
              line-height: 1;
              padding: 0 .2em!important;
            }
          }
        }
      }

      > br {
        display: none;
      }
    }

  }

  .line_box_txt {
    border: .2rem dotted var(--ClrRed);
    text-align: justify;
    vertical-align: baseline;
    line-height: 1;
    font-size: .85em;
    letter-spacing: -.01em;
    margin: 0 auto .5rem;
    padding: .5em;

    p {
      margin: 0 0 .5em;

      &:last-of-type {
        margin: 0;
      }
    }

    .juyou {
      font-size: 1.1em;
      color: var(--ClrRed);
      font-weight: 700;

      .line {
        display: inline-block;
        white-space: nowrap;
        color: var(--ClrLine01);
        border: .2rem solid var(--ClrLine01);
        border-radius: .5rem;
        font-weight: 700;
        line-height: 1;
        margin: 0 .05em;
        padding: .1em .2em;
      }
    }
  }
}

/*--------------------
  Confirm annotation
--------------------*/
#order_info_confirm_message {
  width: 98%;
  margin: 0 auto;

  p {
    font-size: 1.4rem;
  }
}

#reconfirm_order_info {
  #order_info_confirm_message {
    p {
      .bg_clr {
        background-color: var(--BGC01);
        padding: 2rem;
      }

      .bg_wht {
        font-family: inherit;
        background-color: var(--ClrWht);
        border: solid .4rem var(--BGC02);
        border-radius: .8rem;
        text-align: justify;
        line-height: 1.4;
        margin: 0;
        padding: .5em;
      }

      span {
        display: block;
        font-size: 1em;
        font-feature-settings: 'palt';
        letter-spacing: 0em;
      }

      > br,
      > span > br,
      > span > span > br,
      > span > span > span > br:first-of-type,
      > span > span > span > br:last-of-type,
      > span > span > span > span > br:first-of-type,
      > span > span > span > span > br:last-of-type,
      > span > span > span > span > span > br:first-of-type,
      > span > span > span > span > span > br:last-of-type,
      > span > span > span > span > span > span > br:first-of-type,
      > span > span > span > span > span > span > br:last-of-type,
      > span > span > span > .text > br,
      > span > span > span[class^=box_] > br {
        display: none;
      }

      > span {
        > span {
          > .back {
            text-align: center;
            font-weight: 700;
            font-size: .9em;
          }

          > span {
            > .title {
              color: var(--ClrWht);
              background-color: var(--BGC02);
              border-radius: 6rem;
              text-align: center;
              font-weight: 700;
              font-size: 1.5em;
              width: 90%;
              margin: .8em auto;
              padding: .5em 0;

              &.longer {
                letter-spacing: -.05em;
              }

              &.long {
                font-size: 1.2em;
              }
            }

            > .text {
              > .maru {
                font-size: 1em;
                padding: 0 .5em .5em 2em;
                text-indent: -1.5em;

                &::before {
                  content: '\25cf';
                }
              }

              > .maru_no {
                font-size: 1em;
                padding: 0 .5em .5em 2em;
                text-indent: 0;
              }

              .kome {
                font-size: 1em;
                padding: 0 .5em 0 2em;
                text-indent: -1.5em;

                &::before {
                  content: '\203b';
                }
              }
            }
          }
        }
      }

      .bg_ylw {
        display: inline;
        background-image: linear-gradient( to bottom, transparent 0%, transparent 14%, var(--ClrYlw) 14%, var(--ClrYlw) 92%, transparent 92% );
      }

      .c_red {
        display: inline;
        color: var(--ClrRed);
      }

      .big {
        display: inline;
        font-size: 1.5em;
      }
    }
  }
}

/*------------------------------
  Upsell Page
------------------------------*/
#form_upsell {
  background-color: var(--ClrWht);

  .form_box {
    &:last-of-type {
      border-bottom: solid .2rem var(--Clr10);
    }
  }
}

/*--------------------
  Horizontal Button
--------------------*/
.btn_area,
.btn_area_below {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  margin: -15rem auto 2rem;
  padding: 0 4rem;
}

.btn_area_below {
  align-items: flex-start;
}

.mnt_btn {
  width: 47.01492537%;
}

.us_btn {
  width: 50.59701493%;
}

/*--------------------
  Upsell Enquete
--------------------*/
.btn_area {
  .demand_answer {
    background-color: var(--Clr21);
    border: solid .2rem var(--Clr10);
    border-radius: 1rem;
    text-align: justify;
    font-size: .45em;
    line-height: 1.3;
    margin: 0 .1em .5em .1em;
    padding: .5em;
    letter-spacing: .01em;

    p {
      font-weight: 700;
      margin: 0;

      &.small {
        line-height: 1.1;
        font-size: .8em;
      }
    }
  }
}

.box_d {
  width: 100%;

  .box_d_inner {
    position: relative;
    background: none repeat scroll 0 0 var(--Clr22);
    border: solid .2rem var(--Clr20);
    text-align: justify;
    font-size: .3em;
    margin: 2rem auto 4rem;
    padding: 5rem 4rem 2rem;
  }

  p {
    margin: 0;
  }

  .enq_ttl {
    text-align: justify;
    line-height: 1.5;
    font-size: 2.4em;
    font-weight: 700;
    padding: 0 0 1.5rem;
  }

  .enq_txt {
    text-align: justify;
    font-size: 1.6em;
    line-height: 1.5;
    padding: 0 0 1em;
  }

  .enq_anno {
    font-size: 1em;
    padding: 0 0 .5em;
  }

  #enq_textarea {
    resize: vertical;
    border: solid .2rem var(--Clr10);
    border-radius: 0;
    font-size: 1.6em;
    line-height: 1.5;
    width: 100%;
    margin: 0 auto;
    padding: .5em;

    &:focus {
      background-color: var(--Clr25);
      border: solid .2rem var(--Clr24);
    }
  }
}

#countUpBlock {
  font-size: 2em;
  text-align: right;
}

#countUp {
  color: var(--ClrRed);
  font-weight: 700;
  padding: 0 .4em;
}

/*------------------------------
  Btn Below Area
------------------------------*/
.btn_below_area {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin: 0 auto 2rem;
  padding: 0 4rem;

  .mnt_btn_below {
    .box_d {
      .box_d_inner {
        font-size: .3em;
        margin: .5rem auto 0;
        padding: 1.4rem 1.2rem 1rem;

        .must {
          font-size: .8em;
        }
      }

      .enq_ttl {
        font-size: 1.8em;
      }

      .enq_txt {
        line-height: 1.3;
      }
    }

    #countUpBlock {
      font-size: 1.8em;
    }
  }
}

.mnt_btn_below {
  width: 47.01492537%;
}

.us_btn_below {
  width: 50.59701493%;
}

/*------------------------------
  Extra Area
------------------------------*/
.extra_area {
  font-size: .8em;
  width: 100%;

  .extra_area_inner {
    width: 100%;
    padding: 1rem .5rem;

    .extra_input_box {
      display: table;
      border-left: solid .1rem var(--ClrGry);
      width: 100%;

      &:nth-of-type(1) {
        border-top: solid .1rem var(--ClrGry);
      }

      dt,
      dd {
          display: table-cell;
          border-right: solid .1rem var(--ClrGry);
          border-bottom: solid .1rem var(--ClrGry);
          font-size: .8em;
          padding: .5rem;

        &.label {
          color: var(--ClrWht);
          background-color: var(--Clr11);
          text-align: center;
          vertical-align: middle;
          font-weight: 700;
          width: 30%;
        }

        &.fillin {
          width: 70%;
        }
      }

      .choices {
        input {
          display: none;
        }

        label {
          cursor: pointer;
          display: flex;
          justify-content: left;
          align-items: center;
          background-color: var(--ClrWht);
          width: 100%;
          padding: .25em 0 .25em .25em;

          .radiobutton {
            position: relative;
            display: block;
            vertical-align: middle;
            width: 15%;

            svg {
              vertical-align: middle;
              width: 100%;

              circle {
                &:nth-of-type(1) {
                  fill: transparent;
                  stroke: var(--Clr11);
                  stroke-width: 2;
                  transition: all .3s ease;
                }

                &:nth-of-type(2) {
                  fill: transparent;
                  stroke: none;
                }
              }
            }
          }

          > span {
            position: relative;
            display: block;
            text-align: justify;
            font-size: .8em;
            line-height: 1.3;
            letter-spacing: -.05em;
            width: 85%;
            padding: 0 0 0 .25em;
          }
        }

        input:checked + label {
          .radiobutton {
            svg {
              circle {
                &:nth-of-type(1) {
                  fill: var(--ClrWht);
                  stroke: var(--Clr12);
                }

                &:nth-of-type(2) {
                  fill: var(--Clr12);
                }
              }
            }
          }
        }
      }

      .preferred-time {
        width: 100%;
        padding: 1rem;

        .datepicker-wrapper {
          width: 100%;
          position: relative;
        }

        input,
        select {
          border: solid .1rem var(--Clr12);
          border-radius: .8rem;
          font-size: 1em;
          width: 100%;
          margin-bottom: .25em;
          padding: .25em .25em 0;
        }
      }
    }
  }
}

/*------------------------------
  Datepicker Adjust
------------------------------*/
.ui-datepicker {
  &.ui-widget {
    font-size: .7em;
  }
}

/*------------------------------
  Reconfirm Page
------------------------------*/
.btn {
  padding: 2rem 0 2rem;
}

.select_area {
  font-size: .8em;
  width: 100%;
  padding: 0rem 3rem 0;

  ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 2rem;
    border: solid .4rem var(--ClrBlk);

    li {
      padding: 4% 0 4% 0%;

      &:nth-of-type(1) {
        width: 20%;
        padding: 2% 0 2% 2%;
      }

      &:nth-of-type(2) {
        width: 80%;
        text-align: justify;
      }

      label {
        user-select: none;
        cursor: pointer;
        margin-bottom: 0;


        input:checked + .checkbox {
          border-color: var(--ClrBlk);
          background-color: var(--ClrBlk);

          svg {
            path {
              fill: var(--ClrBlk);
            }

            polyline {
              stroke-dashoffset: 0;
            }
          }
        }

        &:hover {
          .checkbox {
            svg {
              path {
                stroke-dashoffset: 0;
              }
            }
          }
        }

        .checkbox {
          position: relative;
          top: 0;
          width: 4.4rem;
          height: 4.4rem;
          border: .4rem solid var(--ClrNmr);
          border-radius: .8rem;
          margin: 0 auto;

          svg {
            position: absolute;
            width: 4.4rem;
            top: -.4rem;
            left: -.4rem;

            path {
              fill: none;
              stroke: var(--ClrBlk);
              stroke-width: 2;
              stroke-linecap: round;
              stroke-linejoin: round;
              stroke-dasharray: 14.2rem;
              stroke-dashoffset: 14.2rem;
              transition: all .6s ease;
            }

            polyline {
              fill: none;
              stroke: var(--ClrWht);
              stroke-width: 2;
              stroke-linecap: round;
              stroke-linejoin: round;
              stroke-dasharray: 3.6rem;
              stroke-dashoffset: 3.6rem;
              transition: all .3s ease;
            }
          }
        }

        > span {
          pointer-events: none;
          vertical-align: top;
          font-weight: 700;
          font-size: 3.2rem;
          letter-spacing: .05em;

          &.txt_confirmed {
          }

          > * {
            vertical-align: baseline;
          }
        }
      }
    }
  }

  .btn {
    width: 100%;
  }

  .anno {
    font-size: .5em;
    padding: 0;
  }
}

input {
  &.checkbox_select {
    display: none;
  }

  &.btn_cnf {
    display: block;
    aspect-ratio: 375 / 101;
    font-size: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/r3_confirm_btn.jpg);
    background-size: 100% auto;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;

    .purun & {
      animation: purun01 3s 0s infinite;
    }
  }
}

.btn_blw {
  text-align: center;
  font-size: 2.4rem;
  line-height: 1.2;
}

/*------------------------------
  Thanks Upsell Page
------------------------------*/
/*==================================================
  for screen of smart phone
==================================================*/
@media screen and (max-width: 750px) {
  html {
    font-size: 1.33333333333vw;
  }
}

@media screen and (max-width: 750px) {
  .form_section {
    font-size: 3.6rem;
    margin: 0 2rem;
  }

  .form_title {
    font-size: 1em;
  }

  /*------------------------------
    Input/Select for Form
  ------------------------------*/
  .form_section {
    .form_input_box {
      input[type=checkbox] + label,
      input[type=checkbox] + div + label,
      input[type=radio] + label,
      input[type=radio] + div + label {
        padding: 0 4rem 0 6.4rem;

        &::before {
          border-width: .4rem;
          top: .5rem;
          left: 0rem;
          width: 5rem;
          height: 5rem;
        }
      }

      input[type=checkbox] + label,
      input[type=checkbox] + div + label {
        &::before {
          border-radius: .8rem;
        }
      }

      input[type=radio] + label,
      input[type=radio] + div + label {
        &::before {
          border-radius: 50%;
        }
      }

      input[type=checkbox]:checked + label,
      input[type=checkbox]:checked + div + label,
      input[type=radio]:checked + label,
      input[type=radio]:checked + div + label {
        &::before {
          border-width: .4rem;
        }
      }

      input[type=checkbox]:checked + label,
      input[type=checkbox]:checked + div + label {
        &::after {
          border-right-width: .8rem;
          border-bottom-width: .8rem;
          border-radius: 0 0 .8rem 0;
          top: 1rem;
          left: 1.5rem;
          width: 2rem;
          height: 3.5rem;
        }
      }

      input[type=radio]:checked + label,
      input[type=radio]:checked + div + label {
        &::after {
          top: 1.5rem;
          left: 1rem;
          width: 3rem;
          height: 3rem;
        }
      }
    }

    [id^=input_extra] {
      .form_input_box {
        input[type=radio] + label,
        input[type=radio] + div + label {
          padding: 0 0 1rem 6.4rem;
        }
      }
    }
  }

  .form_input_box {
    &.efo_input_password_wrapper {
      display: block;
    }
  }

  /*------------------------------
    Landing Form
  ------------------------------*/
  .form_box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 1em;
  }

  #landing_form {
    .form_box {
      &:nth-of-type(1) {
        margin: 2rem auto 0;
      }
    }
  }

  .form_box_label {
    display: block;
    width: 100%;
    margin-bottom: 0;
    padding: 3.2rem;
  }

  .form_input_box {
    display: block;
    border-left: none;
    width: 100%;
    margin-bottom: 0;
    padding: 3.2rem 3.2rem 2.4rem 3.2rem;
  }

  .input_label {

    #input_name &,
    #input_kana & {
      width: 18%;
      text-align: justify;

      &:first-of-type {
        margin: 0 0 .8em;
      }
    }
  }

  #input_name,
  #input_kana {
    input[type=text] {
      width: 80%;

      &:first-of-type {
        margin: 0 0 .8em;
      }
    }
  }

  .form_box {
    &:last-of-type {
      .input_label {
        border-bottom-width: .2rem;
      }
    }
  }

  /*--------------------
    for radio button
  --------------------*/
  #form_payment_method_radio,
  #sku_radio {
    input[type=radio] + label {
      font-size: 4.2rem;
      padding: 0 0 0 7.2rem;

      &::before {
        border: .4rem solid var(--Clr15);
        top: .25rem;
        width: 6rem;
        height: 6rem;
      }
    }

    input[type=radio]:checked + label {
      &::before {
        border: .4rem solid var(--Clr16);
      }

      &::after {
        top: 1.45rem;
        left: 1.2rem;
        width: 3.6rem;
        height: 3.6rem;
      }
    }
  }

  /*--------------------
    CreditCard
  --------------------*/
  #form_payment_method_credit {
    font-size: .8em;
  }

  /*--------------------
    AmazonPayments
  --------------------*/
  #oneClickOrderBox {
    border-width: .6rem;
    padding: 4rem 0;

    p.title {
      font-size: 4rem;
    }

    p.subTitle {
      font-size: 3.2rem;
    }

    p.message {
      font-size: 3.2rem;
      margin-top: 4rem;
    }

    img {
      max-height: auto !important;
      width: 29.6rem;
    }
  }

  #oneClickOrderArea {
    p.notUseOneClickOrderMessage {
      font-size: 3.2rem;
      margin: 2rem 0 2rem;
      letter-spacing: -.2rem;
    }
  }

  div#changeAddressPay {
    font-size: 1em;
    margin-top: 1rem;
    margin-right: 1rem;
  }

  /*--------------------
    Payment Notes
  --------------------*/
  [id^=form_payment_method_]:not(#form_payment_method_select, [id^=form_payment_method_credit], [id*=_inner], [id*=_form]) {
    padding-top: 2rem;
  }

  [id^=form_payment_method_] {
    [class*=_image] {
      margin-bottom: 1rem;
    }

    [class*=_note] {
      font-size: 2rem;
      padding: 2rem 2rem 1rem 2rem;
    }

    [class*=_title]:not(.credit_title) {
      margin-bottom: 2rem;
      padding: 2rem;
    }

    [class*=_description] {
      padding: 0 1rem;
    }

    [class*=_annotation] {
      padding: 0 .5em 0 1.5em;
      text-indent: -1em;
    }
  }

  /*--------------------
    atobarai dotcom
  --------------------*/
  #form_payment_method_atobarai_com {

    .atobarai_com_note {
    }

    .atobarai_com_title {
      background-color: #fafafa;
      border: none;
      border-bottom: dotted .4rem var(--Clr10);
      font-size: 1.2em;
      padding: 0 1rem 2rem;
    }

    .atobarai_com_description {
      margin: 0;
      padding: 0rem 1rem 0rem 1rem;
    }
  }

  /*-----------------------------
    cod
  -----------------------------*/
  #form_payment_method_collect,
  #daibiki_area {
    font-size: 2.8rem;
  }

  /*--------------------
    Paidy
  --------------------*/
  .sp_paidy_desc__text {
    padding: 2rem 2rem 1rem 2rem;

    div {
      &:not(:last-child) {
        padding-bottom: 2rem;
      }

      p.bold {
        padding-left: 1rem;
      }
    }
  }

  /*------------------------------
    Agreement
  ------------------------------*/
  #agreement {
    font-size: .9em;

    > table {
      .agreement_check {
        width: 5rem;
      }

      .agreement_label {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        span.form_notice {
          height: 2.1em;
          line-height: 1.5;
          margin: 1em 0 0 1em;
        }
      }
    }
  }

  /*------------------------------
    EFO overwrite
  ------------------------------*/
  .form_section {
    #input_name,
    #input_kana {
      .ureru-efo-baloon-wrapper {
        width: 79% !important;
        margin-top: -10em !important;
      }
    }
  }

  /*------------------------------
    Required Icon
  ------------------------------*/
  span.form_required,
  span.form_notice,
  .must {
    font-size: .6em;
  }

  /*------------------------------
    Form K
  ------------------------------*/
  .btnNext-area {
    .message {
      font-size: .8em;
    }

    .btnNext {
      font-size: 6rem;
      width: 90%;
    }
  }

  /*------------------------------
    Honki Check
  ------------------------------*/
  .form-section01 {
    font-size: 1em;

    li {
      > input[type=checkbox] + label,
      > input[type=checkbox] + div + label {
        position: relative;
        display: inline-block;
        margin: 0;
        cursor: pointer;
        padding: 0 2rem 0 8rem;
      }

      > input[type=checkbox] + label,
      > input[type=checkbox] + div + label {
        &::before {
          border-width: .4rem;
          border-radius: 1rem;
          top: .6rem;
          left: .6rem;
          width: 4.5rem;
          height: 4.5rem;
        }

        &::after {
          border-width: .8rem;
          top: .8rem;
          left: 2rem;
          width: 2rem;
          height: 3.5rem;
        }
      }
    }
  }

  /*------------------------------
    Confirm Block
  ------------------------------*/
  .order_info_table {
    font-size: .8em;
  }

  .customer_info {
    .form_box {
      display: block;
      font-size: .8em;

      &:last-of-type {
        .form_box_label {
          border-bottom: none;
        }
      }
    }

    .form_box_label {
      display: block;
      width: 100%;
      padding: 1.6rem 2.4rem;
    }

    .form_input_box {
      display: block;
      width: 100%;
    }
  }

  #order_info_payment_box {
    #order_info_payment {
      .form_input_box {
        font-size: .8em;
        padding: 1.6rem 2.4rem;
      }
    }
  }

  /*--------------------
    Confirm annotation
  --------------------*/
  #order_info_confirm_message {
    p {
      font-size: 2.4rem;
    }
  }

  /*--------------------
    Upsell Enquete
  --------------------*/
  .btn_area {
    .demand_answer {
      line-height: 1.2;
      font-size: .45em;
      letter-spacing: -.01em;
    }
  }

  .box_d {
    .box_d_inner {
      font-size: .5em;
    }

    p {
    }

    .enq_ttl {
      font-size: 1.8em;
    }
  }

  /*------------------------------
    Btn Below Area
  ------------------------------*/
  .btn_below_area {
    .mnt_btn_below {
      .box_d {
        .box_d_inner {
          font-size: .38em;
        }

        .enq_ttl {
          line-height: 1.4;
          font-size: 1.2em;
        }

        .enq_txt {
          line-height: 1.3;
          font-size: 1.2em;
        }

        .enq_anno {
          line-height: 1.2;
        }

        #enq_textarea {
          font-size: 1.5em;
          line-height: 1.4;
        }
      }

      #countUpBlock {
        font-size: 1.5em;
        line-height: 1;
      }
    }
  }

  /*------------------------------
    Reconfirm Page
  ------------------------------*/
  .select_area {
    font-size: 1em;
    padding: 0rem 2rem 0;

    ul {
      li {
        label {
          .checkbox {
            width: 6.4rem;
            height: 6.4rem;

            svg {
              position: absolute;
              width: 6.4rem;
              top: -.4rem;
              left: -.4rem;

              path {
                stroke-dasharray: 20vw;
                stroke-dashoffset: 20vw;
              }

              polyline {
                stroke-dasharray: 4.8vw;
                stroke-dashoffset: 4.8vw;
              }
            }
          }

          > span {
            font-size: 3.6rem;
            letter-spacing: -.05em;
          }
        }
      }
    }
  }

  .btn_blw {
    font-size: 3.2rem;
  }
}