@charset "UTF-8";
/*
module :: ボタンなど最小単位のパーツ
*/
.box-blue {
  background: #EAF4FF; }

.box-main-line {
  border: 0.26667vw solid #0D3E85; }

.box-round {
  border-radius: 5px; }

.box-round-large {
  border-radius: 20px; }

.box-line {
  border: 1px solid #979797; }
  .box-line.box-line-secondary {
    border: 2px solid #FF35A6; }

.box-space-normal {
  padding: .5em; }

.box-space-short {
  padding: .5em; }

.box-round-list-title {
  padding: .5em;
  border-bottom: 1px solid #d6d6d6; }

.box-round-list-inner ul li {
  border-bottom: 1px dotted #d6d6d6; }
  .box-round-list-inner ul li:last-child {
    border-bottom: none; }
  .box-round-list-inner ul li > label {
    padding-top: .8em;
    padding-bottom: .8em;
    margin-left: .5em;
    width: calc(100% - .5em); }

.box-space {
  padding: 1em; }

.button {
  text-decoration: none;
  display: flex;
  align-items: center;
  position: relative;
  text-align: center;
  justify-content: center;
  font-size: 100%;
  min-height: 4em;
  max-height: 100px;
  width: 100%;
  border: 0;
  cursor: pointer; }
  .button.button--tiny {
    font-size: 12px;
    min-height: 2em;
    padding: 0; }
    @media screen and (max-width: 768px) {
      .button.button--tiny {
        font-size: 12px;
        font-size: 0.75rem; } }
    @media screen and (max-width: 499px) {
      .button.button--tiny {
        font-size: 3.12vw; } }
  .button.button--xx-small {
    font-size: 14px;
    min-height: 2em; }
    @media screen and (max-width: 768px) {
      .button.button--xx-small {
        font-size: 14px;
        font-size: 0.875rem; } }
    @media screen and (max-width: 499px) {
      .button.button--xx-small {
        font-size: 3.64vw; } }
  .button.button--x-small {
    font-size: 15px;
    min-height: 3.5em; }
    @media screen and (max-width: 768px) {
      .button.button--x-small {
        font-size: 15px;
        font-size: 0.9375rem; } }
    @media screen and (max-width: 499px) {
      .button.button--x-small {
        font-size: 3.9vw; } }
  .button.button--small {
    font-size: 16px;
    min-height: 3.5em; }
    @media screen and (max-width: 768px) {
      .button.button--small {
        font-size: 16px;
        font-size: 1rem; } }
    @media screen and (max-width: 499px) {
      .button.button--small {
        font-size: 4.16vw; } }
  .button.button--middle {
    font-size: 16px;
    min-height: 3.5em; }
    @media screen and (max-width: 768px) {
      .button.button--middle {
        font-size: 16px;
        font-size: 1rem; } }
    @media screen and (max-width: 499px) {
      .button.button--middle {
        font-size: 4.16vw; } }
  .button.button--space {
    padding-left: 1em;
    padding-right: 1em; }
  .button.button--size-middle {
    width: 260px; }

.Safari button.button,
.Safari input[type="submit"].button {
  display: inline-block;
  vertical-align: middle; }
  .Safari button.button > *,
  .Safari input[type="submit"].button > * {
    display: inline-block;
    vertical-align: middle; }

.button-primary {
  background-image: linear-gradient(#1E72BB 0%, #0D3E85 100%);
  color: #fff;
  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.29);
  border-radius: 5px; }
  .button-primary:hover {
    opacity: .9; }
  .button-primary:active {
    top: 2px;
    box-shadow: none; }

.button-secondary {
  background-image: linear-gradient(#F427B8 0%, #D2106F 96%);
  color: #fff;
  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.29);
  border-radius: 5px; }
  .button-secondary:hover {
    opacity: .9; }
  .button-secondary:active {
    top: 2px;
    box-shadow: none; }
.button-disable {
  background: #CACACA;
  color: #fff;
  border-radius: 5px;
  cursor: not-allowed;
  box-shadow: none; }
  .button-disable:hover {
    opacity: 1; }
  .button-disable:active {
    top: 0;
    box-shadow: none; }

.button-general {
  background: #F4F4F4;
  border: 1px solid #979797;
  border-radius: 3px;
  color: #6E6E6E; }
  .button-general:hover {
    opacity: .8; }

.button-alert {
  color: #FF3A4A;
  background: #FFFFFF;
  border: 1px solid #FF3A4A;
  box-shadow: 0 2px 0 0 #C83E49;
  border-radius: 5px; }
  .button-alert:hover {
    opacity: .9; }
  .button-alert:active {
    top: 2px;
    box-shadow: none; }

.button-main-line {
  color: #0D3E85;
  background: #FFFFFF;
  border: 1px solid #0D3E85;
  box-shadow: 0 2px 0 0 #0D3E85;
  border-radius: 5px; }
  .button-main-line:hover {
    opacity: .9; }
  .button-main-line:active {
    top: 2px;
    box-shadow: none; }

.button-main-line-general {
  color: #0D3E85;
  background: #FFFFFF;
  border: 1px solid #0D3E85;
  border-radius: 5px; }

.button-alert-line-general {
  color: #FF3A4A;
  background: #FFFFFF;
  border: 1px solid #FF3A4A;
  border-radius: 5px; }

.button-secondary-line {
  color: #CC4C71;
  background: #FFFFFF;
  border: 1px solid #CC4C71;
  box-shadow: 0 2px 0 0 #CC4C71;
  border-radius: 5px; }
  .button-secondary-line:hover {
    opacity: .9; }
  .button-secondary-line:active {
    top: 2px;
    box-shadow: none; }

.button-back {
  color: #6E6E6E;
  background: #fff;
  border: 1px solid #6E6E6E;
  border-radius: 5px; }
  .button-back:hover {
    background: #F4F4F4; }

.button--icon {
  line-height: 0; }

.button--icon-icon-right {
  padding-right: .2em;
  line-height: 0; }

.button--icon-icon {
  padding-right: .5em;
  padding-left: .5em;
  line-height: 0; }

.button--icon-icon-small {
  padding-right: .2em;
  line-height: 0; }

.button--icon-goto {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 6vw;
  padding-right: 0; }

.button-clear {
  background: #FFFFFF;
  border: 1px solid #979797;
  box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  color: #6E6E6E; }
  .button-clear:hover {
    opacity: .9; }
  .button-clear:active {
    top: 2px;
    box-shadow: none; }

.button-fav-active {
  background: #FFFFFF;
  border: 1px solid #FF35A6;
  box-shadow: inset 0 -4px 0 0 rgba(255, 53, 166, 0.3);
  border-radius: 5px;
  color: #FF35A6; }
  .button-fav-active:hover {
    opacity: .9;
    top: 2px;
    box-shadow: none; }

.button-radius-secondary {
  height: 36px;
  color: #fff;
  background: #D8157E;
  box-shadow: inset 0 -2px 0 0 #B01569;
  border-radius: 36px; }
  .button-radius-secondary:hover {
    opacity: .9;
    top: 2px;
    box-shadow: none; }

.button-radius-disable {
  height: 36px;
  color: #fff;
  background: #9B9B9B;
  box-shadow: inset 0 -2px 0 0 rgba(97, 97, 97, 0.5);
  border-radius: 36px; }
  .button-radius-disable:hover {
    opacity: .9;
    top: 2px;
    box-shadow: none; }

.button-clear-blue {
  box-shadow: inset 0 -3px 0 0 #9CB1C9;
  border: 1px solid #4A90E2;
  border-radius: 5px;
  color: #0D3E85;
  background: #fff; }

.button-position-right {
  margin: 0 0 0 auto; }

.button--icon-text-left {
  margin: 0 auto 0 1em; }

.button-zoom {
  box-shadow: inset 0 -3px 0 0 #9CB1C9;
  border: 1px solid #4A90E2;
  border-radius: 5px; }

.button-selected {
  background: #FF6464;
  box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  color: #fff; }
  .button-selected:hover {
    opacity: .9;
    top: 2px;
    box-shadow: none; }

.button-register-point-card {
  min-height: 22px;
  line-height: 1em;
  padding: 5px 8px;
  border: 1px solid #999;
  border-radius: 20px;
  font-weight: normal !important;
  font-size: 12px;
  display: flex;
  align-items: center;
  width: 16em;
  justify-content: space-between;
  margin: .5em 0 0 0; }
  @media screen and (max-width: 768px) {
    .button-register-point-card {
      font-size: 12px;
      font-size: 0.75rem; } }
  @media screen and (max-width: 499px) {
    .button-register-point-card {
      font-size: 3.12vw; } }
  .button-register-point-card .button--icon-icon {
    padding: 0; }

.color-g-main {
  background-image: linear-gradient(#1E72BB 0%, #0D3E85 100%); }

.color-g-secondary {
  background-image: linear-gradient(#F427B8 0%, #D2106F 96%); }

.color-g-alert {
  background-image: linear-gradient(-180deg, #FA8690 0%, #CE243E 98%); }

.color-main {
  background: #0D3E85; }

.color-secondary {
  background: #FF35A6; }

.color-disable {
  background: #CACACA; }

.color-alert {
  background: #FF3A4A; }

.color-alert-tint {
  background: #FFE7E9; }

.input-relative {
  position: relative; }

.err {
  border: 1px solid #FF3A4A !important; }
  .err:focus {
    border: 1px solid #FF3A4A !important; }

.formErrorMsg {
  position: absolute;
  top: 0;
  right: 0; }

.formErrorMsg {
  color: #fff;
  top: -30px;
  right: 0;
  border-radius: 3px;
  position: relative;
  background: rgba(255, 0, 0, 0.8);
  padding: 3px 5px;
  text-align: center;
  font-size: 12px; }
  @media screen and (max-width: 768px) {
    .formErrorMsg {
      font-size: 12px;
      font-size: 0.75rem; } }
  @media screen and (max-width: 499px) {
    .formErrorMsg {
      font-size: 3.12vw; } }
  .formErrorMsg:after {
    top: 100%;
    left: 80%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: rgba(255, 0, 0, 0.8);
    border-width: 5px;
    margin-left: -5px; }

.table-form-efo td {
  padding-top: 2em; }
  .table-form-efo td.plaintext {
    padding-top: 1em; }

.formError {
  position: absolute;
  right: 0; }

.form-list-name-form {
  position: relative; }

.input-position {
  position: relative; }

.input-position-middle {
  width: 10em; }

.err-message {
  text-align: center;
  margin: 0 0 2em;
  border: 1px solid #FF3A4A;
  color: #FF3A4A; }

.errmes-before {
  display: block;
  margin: 0 0 .5em;
  color: #FF3A4A;
  font-size: 12px; }
  @media screen and (max-width: 768px) {
    .errmes-before {
      font-size: 12px;
      font-size: 0.75rem; } }
  @media screen and (max-width: 499px) {
    .errmes-before {
      font-size: 3.12vw; } }

.errborder {
  border: 3px solid #f9223c;
  padding: 15px;
  border-radius: 5px; }

.terms-check .errborder {
  border: 3px solid #f9223c;
  padding: 15px;
  border-radius: 5px;
  width: 80%;
  margin: 0 auto;
  background: #fff; }

input, button, textarea, select {
  -webkit-appearance: none;
  appearance: none;
  outline: none; }

:placeholder-shown, ::-webkit-input-placeholder {
  color: #aaa; }

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

select::-ms-expand {
  display: none; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type="number"] {
  -moz-appearance: textfield; }

select {
  font-size: 4vw; }

.form-control {
  border: 1px solid #979797;
  border-radius: 5px;
  height: 34px;
  padding: 5px 8px 5px 8px;
  display: inline-block;
  width: 100%;
  background: #fff;
  font-size: 16px; }
  .form-control:focus {
    border: 1px solid #008cff;
    box-shadow: 0 0 6px 1px rgba(0, 140, 255, 0.5); }

.form-require {
  background: #FFF1F1; }

.radio, .checkbox {
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 4px 0 0 34px;
  vertical-align: middle;
  cursor: pointer; }

.radio:hover:after, .checkbox:hover:after {
  border: 1px solid #008cff;
  box-shadow: 0 0 6px 1px rgba(0, 140, 255, 0.5); }

.radio.disable:hover:after, .checkbox.disable:hover:after {
  border: 0;
  box-shadow: 0 0 0; }

.checkbox:after {
  transition: border-color 0.2s linear;
  position: absolute;
  top: 43%;
  left: 0;
  display: block;
  margin-top: -10px;
  width: 24px;
  height: 24px;
  border: 1px solid #C2C2C2;
  border-radius: 3px;
  content: '';
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.17);
  background: #fff; }

.checkbox.disable:after {
  background: #ccc;
  box-shadow: 0 0 0;
  border: 0; }

.radio:after {
  transition: border-color 0.2s linear;
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  margin-top: -10px;
  width: 24px;
  height: 24px;
  border: 1px solid #C2C2C2;
  border-radius: 24px;
  content: '';
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.17);
  background: #fff; }

.radio.notext {
  width: 24px;
  height: 24px;
  padding: 0; }

.radio.disable:after {
  background: #ccc;
  box-shadow: 0 0 0;
  border: 0; }

.checkbox:before {
  transition: opacity 0.2s linear;
  position: absolute;
  top: 46%;
  left: 8px;
  display: block;
  margin-top: -7px;
  width: 8px;
  height: 12px;
  border-right: 3px solid #53b300;
  border-bottom: 3px solid #53b300;
  content: '';
  opacity: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 100; }

input[type=checkbox]:checked + .checkbox:before {
  opacity: 1; }

.radio:before {
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 5px;
  display: block;
  margin-top: -5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-image: linear-gradient(#1E72BB 0%, #0D3E85 100%);
  content: '';
  opacity: 0;
  z-index: 100; }

input[type=radio]:checked + .radio:before {
  opacity: 1; }

.radio.disable:before, .checkbox.disable:before {
  display: none; }

label.select {
  position: relative;
  display: inline-block;
  width: 100%; }
  label.select.select-simple:after {
    background: none;
    border: 0;
    background: url(../img/icon/icon-trigger.png) no-repeat 50% 50%;
    background-size: 8px auto;
    width: 8px;
    height: 6px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    right: 10px;
    top: 10px; }
  label.select.select-simple:before {
    background: url(../img/icon/icon-trigger.png) no-repeat 50% 50%;
    background-size: 8px auto;
    width: 8px;
    height: 6px;
    right: 10px;
    top: 20px; }
  label.select:after {
    width: 34px;
    height: 34px;
    content: " ";
    position: absolute;
    display: block;
    background-image: linear-gradient(-180deg, #E4EDF8 0%, #C5D6EF 100%);
    border: 1px solid #979797;
    border-radius: 0 5px 5px 0;
    top: 0;
    right: 0;
    pointer-events: none; }
  label.select:before {
    z-index: 9;
    background: url(../img/icon/icon-trigger.png) no-repeat 50% 50%;
    width: 14px;
    height: 11px;
    content: " ";
    right: 10px;
    top: 12px;
    position: absolute;
    display: block; }

.form-input-desc {
  display: block;
  margin: 0 0 10px; }

.form-input-desc-sub {
  display: block;
  margin: 0 0 5px;
  font-size: 14px; }
  @media screen and (max-width: 768px) {
    .form-input-desc-sub {
      font-size: 14px;
      font-size: 0.875rem; } }
  @media screen and (max-width: 499px) {
    .form-input-desc-sub {
      font-size: 3.64vw; } }

.form--size-middle {
  width: 60% !important; }

.form--size-long {
  width: 100% !important; }

.form--size-zip {
  width: 36vw !important; }

.form--size-small {
  width: 30vw !important; }

.form--size-prefectures {
  width: 50vw !important; }

.form-input-address > li {
  margin-bottom: 10px; }
  .form-input-address > li:last-child {
    margin-bottom: 0; }

.form-input-name {
  display: table; }
  .form-input-name > * {
    display: table-cell;
    vertical-align: middle;
    padding: 0 2vw 0 0; }
    .form-input-name > *:first-child {
      width: 12vw;
      font-size: 14px; }
      @media screen and (max-width: 768px) {
        .form-input-name > *:first-child {
          font-size: 14px;
          font-size: 0.875rem; } }
      @media screen and (max-width: 499px) {
        .form-input-name > *:first-child {
          font-size: 3.64vw; } }
    .form-input-name > *:nth-child(3) {
      width: 16vw;
      padding-left: 4vw;
      font-size: 14px; }
      @media screen and (max-width: 768px) {
        .form-input-name > *:nth-child(3) {
          font-size: 14px;
          font-size: 0.875rem; } }
      @media screen and (max-width: 499px) {
        .form-input-name > *:nth-child(3) {
          font-size: 3.64vw; } }
    .form-input-name > * input {
      width: 30vw; }

.form-input-grid2 {
  display: table; }
  .form-input-grid2 > * {
    display: table-cell;
    vertical-align: middle;
    width: 30%; }

.form-label-tile-desc {
  border: 1px solid #979797;
  width: 100%;
  border-radius: 5px; }
  .form-label-tile-desc.active .radio, .form-label-tile-desc.active .checkbox {
    border: 2px solid #0D3E85; }
    .form-label-tile-desc.active .radio:hover, .form-label-tile-desc.active .checkbox:hover {
      border: 2px solid #0D3E85; }
  .form-label-tile-desc:hover {
    border: 1px solid rgba(0, 140, 255, 0.5);
    box-shadow: 0 0 2px 1px rgba(0, 140, 255, 0.2); }
  .form-label-tile-desc .radio {
    padding-top: .8em;
    padding-bottom: .8em;
    padding-left: 2.5em;
    width: 100%; }
    .form-label-tile-desc .radio:after {
      left: .5em;
      top: 48%; }
    .form-label-tile-desc .radio:before {
      left: calc(5px + .5em);
      top: 48%; }

.form-label-tile span {
  font-size: 80%; }

.form-label-tile.active .radio, .form-label-tile.active .checkbox {
  border: 2px solid #0D3E85; }
  .form-label-tile.active .radio:hover, .form-label-tile.active .checkbox:hover {
    border: 2px solid #0D3E85; }

.form-label-tile .radio {
  padding-top: .8em;
  padding-bottom: .8em;
  padding-left: 2.5em;
  border: 1px solid #979797;
  width: 100%;
  border-radius: 5px; }
  .form-label-tile .radio:after {
    left: .5em;
    top: 48%; }
  .form-label-tile .radio:before {
    left: calc(5px + .5em);
    top: 48%; }
  .form-label-tile .radio:hover {
    border: 1px solid rgba(0, 140, 255, 0.5);
    box-shadow: 0 0 2px 1px rgba(0, 140, 255, 0.2); }

.form-label-tile .checkbox {
  padding-top: .8em;
  padding-bottom: .8em;
  padding-left: 2.5em;
  border: 1px solid #979797;
  width: 100%;
  border-radius: 5px; }
  .form-label-tile .checkbox:after {
    left: .5em;
    top: 47%; }
  .form-label-tile .checkbox:before {
    left: calc(8px + .5em);
    top: 50%; }
  .form-label-tile .checkbox:hover {
    border: 1px solid rgba(0, 140, 255, 0.5);
    box-shadow: 0 0 2px 1px rgba(0, 140, 255, 0.2); }

.form-label-tile-high.active .radio, .form-label-tile-high.active .checkbox {
  border: 2px solid #0D3E85; }
  .form-label-tile-high.active .radio:hover, .form-label-tile-high.active .checkbox:hover {
    border: 2px solid #0D3E85; }

.form-label-tile-high .radio, .form-label-tile-high .checkbox {
  text-align: center;
  border: 1px solid #979797;
  width: 100%;
  border-radius: 5px;
  padding: 3.5em 0 1.5em; }
  .form-label-tile-high .radio:after, .form-label-tile-high .checkbox:after {
    left: 0;
    right: 0;
    margin: auto;
    top: 15px; }
  .form-label-tile-high .radio:before, .form-label-tile-high .checkbox:before {
    left: 0;
    right: 0;
    margin: auto;
    top: 20px; }
  .form-label-tile-high .radio:hover, .form-label-tile-high .checkbox:hover {
    border: 1px solid rgba(0, 140, 255, 0.5);
    box-shadow: 0 0 2px 1px rgba(0, 140, 255, 0.2); }

.form-input-birth {
  display: flex;
  flex-wrap: wrap;
  align-items: center; }
  .form-input-birth .form-input-year {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0 0 .5em; }

.icon-cart {
  display: inline-block;
  background: url(../img/icon/icon-cart.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-cart {
      background-size: 36px auto; } }

.icon-box-black {
  display: inline-block;
  background: url(../img/icon/icon-box-black.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-box-black {
      background-size: 36px auto; } }

.icon-gift-white {
  display: inline-block;
  background: url(../img/icon/icon-gift-white.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-gift-white {
      background-size: 36px auto; } }

.icon-home-white {
  display: inline-block;
  background: url(../img/icon/icon-home-white.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-home-white {
      background-size: 36px auto; } }

.icon-box-main {
  display: inline-block;
  background: url(../img/icon/icon-box-main.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-box-main {
      background-size: 36px auto; } }

.icon-address-white {
  display: inline-block;
  background: url(../img/icon/icon-address-white.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-address-white {
      background-size: 36px auto; } }

.icon-edit-white {
  display: inline-block;
  background: url(../img/icon/icon-edit-white.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-edit-white {
      background-size: 36px auto; } }

.icon-cart-gray {
  display: inline-block;
  background: url(../img/icon/icon-cart-gray.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-cart-gray {
      background-size: 36px auto; } }

.icon-hint-pink {
  display: inline-block;
  background: url(../img/icon/icon-hint-pink.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-hint-pink {
      background-size: 36px auto; } }

.icon-delivery-white {
  display: inline-block;
  background: url(../img/icon/icon-delivery-white.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-delivery-white {
      background-size: 36px auto; } }

.icon-send-white {
  display: inline-block;
  background: url(../img/icon/icon-send-white.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-send-white {
      background-size: 36px auto; } }

.icon-folder-white {
  display: inline-block;
  background: url(../img/icon/icon-folder-white.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-folder-white {
      background-size: 36px auto; } }

.icon-users-white {
  display: inline-block;
  background: url(../img/icon/icon-users-white.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-users-white {
      background-size: 36px auto; } }

.icon-users-main {
  display: inline-block;
  background: url(../img/icon/icon-users-main.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-users-main {
      background-size: 36px auto; } }

.icon-folder-main {
  display: inline-block;
  background: url(../img/icon/icon-folder-main.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-folder-main {
      background-size: 36px auto; } }

.icon-list-main {
  display: inline-block;
  background: url(../img/icon/icon-list-main.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-list-main {
      background-size: 36px auto; } }

.icon-coupon-main {
  display: inline-block;
  background: url(../img/icon/icon-coupon-main.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-coupon-main {
      background-size: 36px auto; } }

.icon-point-main {
  display: inline-block;
  background: url(../img/icon/icon-point-main.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-point-main {
      background-size: 36px auto; } }

.icon-error {
  display: inline-block;
  background: url(../img/icon/icon-error.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-error {
      background-size: 36px auto; } }

.icon-note {
  display: inline-block;
  background: url(../img/icon/icon-note.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-note {
      background-size: 36px auto; } }

.icon-q-blue {
  display: inline-block;
  background: url(../img/icon/icon-q-blue.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-q-blue {
      background-size: 36px auto; } }

.icon-q-pink {
  display: inline-block;
  background: url(../img/icon/icon-q-pink.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-q-pink {
      background-size: 36px auto; } }

.icon-box-white {
  display: inline-block;
  background: url(../img/icon/icon-box-white.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-box-white {
      background-size: 36px auto; } }

.icon-goto {
  display: inline-block;
  background: url(../img/icon/icon-goto.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-goto {
      background-size: 36px auto; } }

.icon-goto-secondary {
  display: inline-block;
  background: url(../img/icon/icon-goto-secondary.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-goto-secondary {
      background-size: 36px auto; } }

.icon-truck {
  display: inline-block;
  background: url(../img/icon/icon-truck.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-truck {
      background-size: 36px auto; } }

.icon-noshi {
  display: inline-block;
  background: url(../img/icon/icon-noshi.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-noshi {
      background-size: 36px auto; } }

.icon-receipt {
  display: inline-block;
  background: url(../img/icon/icon-receipt.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-receipt {
      background-size: 36px auto; } }

.icon-list {
  display: inline-block;
  background: url(../img/icon/icon-list.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-list {
      background-size: 36px auto; } }

.icon-list-active {
  display: inline-block;
  background: url(../img/icon/icon-list-active.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-list-active {
      background-size: 36px auto; } }

.icon-row4 {
  display: inline-block;
  background: url(../img/icon/icon-row4.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-row4 {
      background-size: 36px auto; } }

.icon-row4-active {
  display: inline-block;
  background: url(../img/icon/icon-row4-active.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-row4-active {
      background-size: 36px auto; } }

.icon-fav {
  display: inline-block;
  background: url(../img/icon/icon-fav.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-fav {
      background-size: 36px auto; } }

.icon-fav-active {
  display: inline-block;
  background: url(../img/icon/icon-fav-active.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-fav-active {
      background-size: 36px auto; } }

.icon-camera {
  display: inline-block;
  background: url(../img/icon/icon-camera.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-camera {
      background-size: 36px auto; } }

.icon-copy {
  display: inline-block;
  background: url(../img/icon/icon-copy.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-copy {
      background-size: 36px auto; } }

.icon-mail {
  display: inline-block;
  background: url(../img/icon/icon-mail.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-mail {
      background-size: 36px auto; } }

.icon-favorite {
  display: inline-block;
  background: url(../img/icon/icon-favorite.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-favorite {
      background-size: 36px auto; } }

.icon-cart-white {
  display: inline-block;
  background: url(../img/icon/icon-cart-white.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-cart-white {
      background-size: 36px auto; } }

.icon-delete {
  display: inline-block;
  background: url(../img/icon/icon-delete.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-delete {
      background-size: 36px auto; } }

.icon-edit-main {
  display: inline-block;
  background: url(../img/icon/icon-edit-main.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-edit-main {
      background-size: 36px auto; } }

.icon-user {
  display: inline-block;
  background: url(../img/icon/icon-user.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-user {
      background-size: 36px auto; } }

.icon-address-main {
  display: inline-block;
  background: url(../img/icon/icon-address-main.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-address-main {
      background-size: 36px auto; } }

.icon-address-secondary {
  display: inline-block;
  background: url(../img/icon/icon-address-secondary.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-address-secondary {
      background-size: 36px auto; } }

.icon-calendar-main {
  display: inline-block;
  background: url(../img/icon/icon-calendar-main.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-calendar-main {
      background-size: 36px auto; } }

.icon-calendar-secondary {
  display: inline-block;
  background: url(../img/icon/icon-calendar-secondary.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-calendar-secondary {
      background-size: 36px auto; } }

.icon-card-main {
  display: inline-block;
  background: url(../img/icon/icon-card-main.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-card-main {
      background-size: 36px auto; } }

.icon-favo-secondary-line {
  display: inline-block;
  background: url(../img/icon/icon-favo-secondary-line.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-favo-secondary-line {
      background-size: 36px auto; } }

.icon-import-excel {
  display: inline-block;
  background: url(../img/icon/icon-import-excel.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-import-excel {
      background-size: 36px auto; } }

.icon-import-main {
  display: inline-block;
  background: url(../img/icon/icon-import-main.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-import-main {
      background-size: 36px auto; } }

.icon-q-main {
  display: inline-block;
  background: url(../img/icon/icon-q-main.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-q-main {
      background-size: 36px auto; } }

.icon-link-point {
  display: inline-block;
  background: url(../img/icon/icon-link-point.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-link-point {
      background-size: 36px auto; } }

.icon-goto-blue {
  display: inline-block;
  background: url(../img/icon/icon-goto-blue.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-goto-blue {
      background-size: 36px auto; } }

.icon-plus {
  display: inline-block;
  background: url(../img/icon/icon-plus.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-plus {
      background-size: 36px auto; } }

.icon-excel {
  display: inline-block;
  background: url(../img/icon/icon-excel.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-excel {
      background-size: 36px auto; } }

.icon-window {
  display: inline-block;
  background: url(../img/icon/icon-window.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-window {
      background-size: 36px auto; } }

.icon-grid {
  display: inline-block;
  background: url(../img/icon/icon-grid.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-grid {
      background-size: 36px auto; } }

.icon-global-menu {
  display: inline-block;
  background: url(../img/icon/icon-global-menu.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-global-menu {
      background-size: 36px auto; } }

.icon-global-record {
  display: inline-block;
  background: url(../img/icon/icon-global-record.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-global-record {
      background-size: 36px auto; } }

.icon-global-fav {
  display: inline-block;
  background: url(../img/icon/icon-global-fav.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-global-fav {
      background-size: 36px auto; } }

.icon-global-cart {
  display: inline-block;
  background: url(../img/icon/icon-global-cart.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-global-cart {
      background-size: 36px auto; } }

.icon-close-white {
  display: inline-block;
  background: url(../img/icon/icon-close-white.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-close-white {
      background-size: 36px auto; } }

.icon-arrow-bottom {
  display: inline-block;
  background: url(../img/icon/icon-arrow-bottom.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-arrow-bottom {
      background-size: 36px auto; } }

.icon-settings {
  display: inline-block;
  background: url(../img/icon/icon-settings.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-settings {
      background-size: 36px auto; } }

.icon-arrow-top {
  display: inline-block;
  background: url(../img/icon/icon-arrow-top.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-arrow-top {
      background-size: 36px auto; } }

.icon-plus-white {
  display: inline-block;
  background: url(../img/icon/icon-plus-white.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-plus-white {
      background-size: 36px auto; } }

.icon-close {
  display: inline-block;
  background: url(../img/icon/icon-close.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-close {
      background-size: 36px auto; } }

.icon-right-arrow {
  display: inline-block;
  background: url(../img/icon/icon-right-arrow.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-right-arrow {
      background-size: 36px auto; } }

.icon-zoomin {
  display: inline-block;
  background: url(../img/icon/icon-zoomin.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-zoomin {
      background-size: 36px auto; } }

.flow-active-1 {
  display: inline-block;
  background: url(../img/icon/flow-active-1.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .flow-active-1 {
      background-size: 36px auto; } }

.flow-active-2 {
  display: inline-block;
  background: url(../img/icon/flow-active-2.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .flow-active-2 {
      background-size: 36px auto; } }

.flow-active-3 {
  display: inline-block;
  background: url(../img/icon/flow-active-3.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .flow-active-3 {
      background-size: 36px auto; } }

.flow-active-4 {
  display: inline-block;
  background: url(../img/icon/flow-active-4.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .flow-active-4 {
      background-size: 36px auto; } }

.icon-pdf {
  display: inline-block;
  background: url(../img/icon/icon-pdf.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-pdf {
      background-size: 36px auto; } }

.icon-goto-secondary-bottom {
  display: inline-block;
  background: url(../img/icon/icon-goto-secondary-bottom.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-goto-secondary-bottom {
      background-size: 36px auto; } }

.icon-store {
  display: inline-block;
  background: url(../img/icon/icon-store.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-store {
      background-size: 36px auto; } }

.icon-sp-code {
  display: inline-block;
  background: url(../img/icon/icon-sp-code.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-sp-code {
      background-size: 36px auto; } }

.icon-print {
  display: inline-block;
  background: url(../img/icon/icon-print.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-print {
      background-size: 36px auto; } }

.icon-arrow-red {
  display: inline-block;
  background: url(../img/icon/icon-arrow-red.png) no-repeat 50% 50%;
  background-size: 9vw auto;
  width: 9vw;
  height: 9vw;
  content: " ";
  max-width: 36px;
  max-height: 36px; }
  @media screen and (min-width: 499px) {
    .icon-arrow-red {
      background-size: 36px auto; } }

.icon--size-large {
  background-size: cover;
  width: 12vw;
  height: 12vw;
  max-width: 48px;
  max-height: 48px; }

.icon--size-middle {
  background-size: 30px auto;
  width: 30px;
  height: 30px; }

.icon--size-middle2 {
  background-size: cover;
  width: 8.5vw;
  height: 8.5vw;
  max-width: 28px;
  max-height: 28px; }

.icon--size-small {
  background-size: cover;
  width: 8.5vw;
  height: 8.5vw;
  max-width: 34px;
  max-height: 34px; }

.icon--size-xsmall {
  background-size: cover;
  width: 8vw;
  height: 8vw;
  max-width: 32px;
  max-height: 32px; }

.icon--size-xxsmall {
  background-size: cover;
  width: 7vw;
  height: 7vw;
  max-width: 30px;
  max-height: 30px; }

.icon--size-xxxsmall {
  background-size: 100% auto;
  width: 6vw;
  height: 6vw;
  max-width: 20px;
  max-height: 20px; }

.icon--size-xxxxsmall {
  background-size: cover;
  width: 4vw;
  height: 4vw;
  max-width: 16px;
  max-height: 16px; }

.icon-arrow-down {
  content: " ";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid black; }

.caret-white {
  border-top: solid 6px #fff;
  border-left: solid 6px transparent;
  border-right: solid 6px transparent;
  content: " "; }
  .caret-white.active {
    border-top: solid 6px transparent;
    border-bottom: solid 6px #fff;
    border-left: solid 6px transparent;
    border-right: solid 6px transparent; }

.label {
  text-align: center; }

.label-inline {
  display: inline-block; }

.label-round {
  background: #ccc;
  border-radius: 2em;
  padding: .3em 1em; }

.label--color-secondary {
  background: #d8157e;
  color: #fff; }

.label--color-alert {
  background: #FF3A4A;
  color: #fff; }

.label--color-blue {
  background: #1e75da;
  color: #fff; }

.label--color-main {
  background: #0D3E85;
  color: #fff; }

.label--color-disable {
  background: #B0B0B0;
  color: #fff; }

.label--color-tint-pink {
  background: #FFE7E9; }

.label--color-tint-blue {
  background: #EAF4FF; }

.label-space {
  padding-top: .6em;
  padding-bottom: .6em; }

.label-padding {
  padding: .3em; }

.label-delivery-free {
  background: #1e75da;
  color: #fff;
  font-size: 14px;
  padding: .5em; }
  @media screen and (max-width: 768px) {
    .label-delivery-free {
      font-size: 14px;
      font-size: 0.875rem; } }
  @media screen and (max-width: 499px) {
    .label-delivery-free {
      font-size: 3.64vw; } }

.link-underline {
  text-decoration: underline; }
  .link-underline:hover {
    text-decoration: none; }

.link-text {
  color: #4a4a4a; }

.link-secondary {
  color: #ff35a6; }

.link-main {
  color: #0D3E85; }

.link-pdf {
  font-weight: bold;
  text-decoration: underline; }
  .link-pdf:before {
    content: " ";
    margin-right: .5em;
    display: inline-block;
    background: url(../img/icon/icon-pdf.png) no-repeat 0 0;
    background-size: 20px;
    width: 20px;
    height: 20px; }

.list-border-dot > li {
  border-bottom: 1px dotted #d6d6d6; }
  .list-border-dot > li:last-child {
    border-bottom: 0; }

.plain-description-list > * {
  margin-bottom: 14px; }

.plain-description-list li:last-child {
  margin-bottom: 0; }

.list-m-b-10 > li {
  margin-bottom: 10px; }

.list-navi > li {
  display: inline-block; }
  .list-navi > li:after {
    content: "|";
    display: inline-block;
    margin: 0 .5em; }
  .list-navi > li:last-child:after {
    display: none; }

.list-inline > li {
  display: inline-block; }

.list-flex {
  display: flex;
  flex-wrap: wrap; }
  .list-flex.space > * {
    margin-right: 3%;
    margin-bottom: 20px; }
  .list-flex.space.grid3 > * {
    width: 31.3%; }
    .list-flex.space.grid3 > *:nth-child(3) {
      margin-right: 0; }
  .list-flex.grid3 > * {
    width: 33%; }
  .list-flex.between {
    justify-content: space-between; }

.list-decimal > li {
  list-style-type: decimal;
  margin-left: 2em;
  margin-bottom: .5em; }
  .list-decimal > li:last-child {
    margin-bottom: 0; }

.list-parenthesis > li {
  padding-left: 1.3em;
  text-indent: -1.3em;
  margin-bottom: .5em; }

.list-parenthesis_2em > li {
  padding-left: 1.6em;
  text-indent: -1.6em;
  margin-bottom: .5em; }

.list-parenthesis-num > li {
  padding-left: 3.5em;
  text-indent: -3.5em;
  margin-bottom: .5em; }
  .list-parenthesis-num > li span {
    width: 3.5em;
    display: inline-block;
    text-align: right; }

.list-disc > li {
  list-style-type: disc;
  margin-left: 2em; }

/**
 * This scss is created so that any custom class styles 
 * used on Swiper JS library will be availabe all throughout 
 * the application and not just any specific pages/page groups.
**/
.swiper-btn-prev.swiper-button-disabled,
.swiper-btn-next.swiper-button-disabled {
  display: none; }

.table-general {
  width: 100%; }
  .table-general tbody tr {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 .5em; }
  .table-general tbody th {
    background: #FBFBFB;
    width: 100%;
    border: 1px solid #979797;
    font-weight: normal;
    text-align: left;
    padding: .5em;
    vertical-align: middle;
    display: block; }
    .table-general tbody th .position-relative {
      position: relative; }
  .table-general tbody td {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #979797;
    border-top: 0;
    padding: 1em .5em; }

.table-general-row {
  width: 100%; }
  .table-general-row tbody th {
    background: #FBFBFB;
    width: 30%;
    border: 1px solid #979797;
    font-weight: normal;
    text-align: left;
    padding: .5em;
    vertical-align: middle; }
    .table-general-row tbody th .position-relative {
      position: relative; }
    .ie .table-general-row tbody th {
      position: static; }
  .table-general-row tbody td {
    background: #fff;
    border: 1px solid #979797;
    padding: .5em; }

.th-icon {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: auto;
  height: 1.3em; }

.table-noborder {
  width: 100%; }
  .table-noborder tbody th {
    font-weight: normal;
    vertical-align: middle;
    padding: .5em; }
  .table-noborder tbody td {
    vertical-align: middle;
    padding: .5em; }

.title-pages {
  background: #FFFFFF;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  z-index: 1;
  position: relative; }
  .title-pages .breadcrumbs {
    padding-top: 10px;
    margin: 0 auto 0 .5em; }
  .title-pages.title-pages-flow .title-pages-inner {
    justify-content: space-between;
    min-height: 100px; }
  .title-pages .title-pages-inner {
    margin: 0 .5em;
    display: flex;
    min-height: 50px;
    align-items: center; }
    .title-pages .title-pages-inner.title-pages-inner-date {
      min-height: 5em; }
      .title-pages .title-pages-inner.title-pages-inner-date .title-pages-text {
        display: block; }
        .title-pages .title-pages-inner.title-pages-inner-date .title-pages-text .title-pages-inner-text {
          font-size: 4.2vw;
          margin-top: .5em; }
  .title-pages .title-date {
    font-size: 14px;
    color: #0D3E85; }
    @media screen and (max-width: 768px) {
      .title-pages .title-date {
        font-size: 14px;
        font-size: 0.875rem; } }
    @media screen and (max-width: 499px) {
      .title-pages .title-date {
        font-size: 3.64vw; } }
  .title-pages .title-pages-text {
    font-size: 20px;
    display: flex;
    align-items: center; }
    @media screen and (max-width: 768px) {
      .title-pages .title-pages-text {
        font-size: 20px;
        font-size: 1.25rem; } }
    @media screen and (max-width: 499px) {
      .title-pages .title-pages-text {
        font-size: 5.2vw; } }
    .title-pages .title-pages-text .title-pages-inner-text {
      float: left; }
    .title-pages .title-pages-text .title-pages-inner-text-2line {
      display: flex;
      flex-direction: column;
      height: 60px;
      justify-content: center; }
      .title-pages .title-pages-text .title-pages-inner-text-2line .title-pages-inner-text-2line-sub {
        font-size: 80%; }
      .title-pages .title-pages-text .title-pages-inner-text-2line .title-pages-inner-text-2line-main {
        font-family: serif; }
    .title-pages .title-pages-text.title-pages-text-small {
      font-size: 4.8vw; }
  .title-pages .title-pages-btn {
    float: right;
    margin: 0 0 0 10px; }
    .title-pages .title-pages-btn > * {
      padding-left: 5px;
      padding-right: 5px;
      font-size: 12px; }
      @media screen and (max-width: 768px) {
        .title-pages .title-pages-btn > * {
          font-size: 12px;
          font-size: 0.75rem; } }
      @media screen and (max-width: 499px) {
        .title-pages .title-pages-btn > * {
          font-size: 3.12vw; } }
  .title-pages .title-pages-flow {
    width: 800px; }
  .title-pages .title-pages-arrow {
    margin: 0 0 0 auto;
    line-height: 0; }

.title-sub {
  border-bottom: 1px solid #0D3E85;
  color: #0D3E85;
  padding: 0 0 10px 10px; }

.title-main {
  font-size: 18px;
  margin: 0 0 20px; }
  @media screen and (max-width: 768px) {
    .title-main {
      font-size: 18px;
      font-size: 1.125rem; } }
  @media screen and (max-width: 499px) {
    .title-main {
      font-size: 4.68vw; } }

.title-pages-container {
  position: relative; }
  .title-pages-container.open .title-subcontent-menu {
    display: block; }

.title-subcontent-menu {
  display: none;
  position: absolute;
  top: 50px;
  left: .5%;
  width: 99%;
  background: #fff;
  z-index: 999;
  padding: .5em 0 0 0;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
  border-radius: 0 0 5px 5px;
  border-left: 1px solid #979797;
  border-right: 1px solid #979797;
  border-bottom: 1px solid #979797; }
  .title-subcontent-menu > ul {
    display: flex;
    flex-wrap: wrap; }
    .title-subcontent-menu > ul > li {
      width: 47%;
      margin: 0 .5% .5em 2%;
      font-size: 4vw; }
      .title-subcontent-menu > ul > li:nth-child(2n) {
        margin: 0 2% .5em .5%; }
      .title-subcontent-menu > ul > li.active .tile {
        background: #4A90E2;
        color: #fff;
        box-shadow: 0 0 0; }
      .title-subcontent-menu > ul > li div {
        display: flex;
        justify-content: center;
        text-align: center;
        padding-left: 0;
        min-height: 14vw;
        align-items: center; }

.title-contents {
  font-size: 20px;
  color: #0D3E85;
  display: table; }
  @media screen and (max-width: 768px) {
    .title-contents {
      font-size: 20px;
      font-size: 1.25rem; } }
  @media screen and (max-width: 499px) {
    .title-contents {
      font-size: 5.2vw; } }
  .title-contents > * {
    display: table-cell;
    vertical-align: middle;
    font-weight: bold; }
    .title-contents > *.title-contents-icon {
      padding-right: .5em; }

.title-subcontents {
  font-size: 4.2vw;
  border-bottom: 1px solid #0D3E85;
  padding: 10px 12px;
  color: #0D3E85; }

.text-bold {
  font-weight: bold; }

.text-large {
  font-size: 24px; }
  @media screen and (max-width: 768px) {
    .text-large {
      font-size: 24px;
      font-size: 1.5rem; } }
  @media screen and (max-width: 499px) {
    .text-large {
      font-size: 6.24vw; } }

.text-large-middle {
  font-size: 22px; }
  @media screen and (max-width: 768px) {
    .text-large-middle {
      font-size: 22px;
      font-size: 1.375rem; } }
  @media screen and (max-width: 499px) {
    .text-large-middle {
      font-size: 5.72vw; } }

.text-middle-2 {
  font-size: 20px; }
  @media screen and (max-width: 768px) {
    .text-middle-2 {
      font-size: 20px;
      font-size: 1.25rem; } }
  @media screen and (max-width: 499px) {
    .text-middle-2 {
      font-size: 5.2vw; } }

.text-middle {
  font-size: 18px; }
  @media screen and (max-width: 768px) {
    .text-middle {
      font-size: 18px;
      font-size: 1.125rem; } }
  @media screen and (max-width: 499px) {
    .text-middle {
      font-size: 4.68vw; } }

.text-normal {
  font-size: 16px; }
  @media screen and (max-width: 768px) {
    .text-normal {
      font-size: 16px;
      font-size: 1rem; } }
  @media screen and (max-width: 499px) {
    .text-normal {
      font-size: 4.16vw; } }

.text-small {
  font-size: 14px; }
  @media screen and (max-width: 768px) {
    .text-small {
      font-size: 14px;
      font-size: 0.875rem; } }
  @media screen and (max-width: 499px) {
    .text-small {
      font-size: 3.64vw; } }

.text-x-small {
  font-size: 12px; }
  @media screen and (max-width: 768px) {
    .text-x-small {
      font-size: 12px;
      font-size: 0.75rem; } }
  @media screen and (max-width: 499px) {
    .text-x-small {
      font-size: 3.12vw; } }

.text-alert {
  color: #FF3A4A; }

.text-main {
  color: #0D3E85; }

.text-secondary {
  color: #FF35A6; }

.text-success {
  color: #519A19; }

.text-info {
  color: #3665A8; }

.text-gray {
  color: #888; }

.text-blue {
  color: #4a90e2; }

.label-require {
  background: #FF3A4A;
  color: #fff;
  font-size: 12px;
  padding: 3px 3px;
  line-height: 0; }
  @media screen and (max-width: 768px) {
    .label-require {
      font-size: 12px;
      font-size: 0.75rem; } }
  @media screen and (max-width: 499px) {
    .label-require {
      font-size: 3.12vw; } }

.label-optional {
  background: #9B9B9B;
  color: #fff;
  font-size: 12px;
  padding: 3px 3px;
  line-height: 0; }
  @media screen and (max-width: 768px) {
    .label-optional {
      font-size: 12px;
      font-size: 0.75rem; } }
  @media screen and (max-width: 499px) {
    .label-optional {
      font-size: 3.12vw; } }

.text-right {
  text-align: right; }

.button-check-payment{
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100%;
  color: #0D3E85;
  background: #FFFFFF;
  border: 1px solid #0D3E85;
  box-shadow: 0 2px 0 0 #0d3e85;
  border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
}