@charset "UTF-8";
.info-list {
  list-style: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(51, 51, 59, 0);
  scroll-behavior: smooth;
}

@-ms-viewport {
  width: device-width;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #33333b;
  text-align: left;
  direction: ltr;
  background-color: #fff;
  font-synthesis: none;
  -moz-font-feature-settings: "kern";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: .5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.6;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 500;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

dfn {
  font-style: italic;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: #1e1eff;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  transition: color .2s ease-in-out;
}

a:hover {
  color: #1e1eff;
  text-decoration: underline;
}

a.alt {
  text-decoration: underline;
}

a.alt:hover {
  text-decoration: none;
}

a.none {
  text-decoration: none;
}

a:not([href]):not([tabindex]),
a.nohover {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus,
a.nohover:hover,
a.nohover:focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus,
a.nohover:focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: .75rem;
  padding-bottom: .75rem;
  color: #A4A4AC;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: .5rem;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

::placeholder {
  color: #c4c4c4;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

.surface {
  min-height: 100vh;
}

.content {
  position: relative;
  z-index: 1;
}

.flex {
  display: flex;
}

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

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-space {
  justify-content: space-between !important;
}

.justify-space-around {
  justify-content: space-around !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-end {
  justify-content: flex-end;
}

.align-self-start {
  align-self: start;
}

.align-self-center {
  align-self: center;
}

.align-self-end {
  align-self: end;
}

.flex-center {
  align-items: center;
  justify-content: center;
}

.flex-col {
  flex-direction: column;
}

@media (min-width: 769px) {
  .md-flex-row {
    flex-direction: row;
  }
  .md-justify-end {
    justify-content: flex-end;
  }
  .md-justify-start {
    justify-content: flex-start !important;
  }
}

@media (min-width: 769px) {
  .md-align-space {
    align-content: space-between;
  }
}

@media (min-width: 769px) {
  .md-justify-content-center {
    justify-content: center;
  }
}

.flex1 {
  flex: 1 1 auto;
}

.flex0 {
  flex: 0 0 auto;
}

@media (min-width: 769px) {
  .md-flex1 {
    flex: 1 1 auto;
  }
}

@media (min-width: 769px) {
  .md-flex0 {
    flex: 0 0 auto;
  }
}

.flex-wrap {
  flex-wrap: wrap;
}

@media (min-width: 769px) {
  .md-flex-nowrap {
    flex-wrap: nowrap;
  }
}

.align-bottom {
  vertical-align: bottom;
}

.container-lg {
  width: 77.875rem;
  max-width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
  margin-right: auto;
  margin-left: auto;
}

.p-0 {
  padding: 0 !important;
}

.p-10 {
  padding: .625rem !important;
}

.p-12 {
  padding: .75rem !important;
}

.p-16 {
  padding: 1rem !important;
}

.p-20 {
  padding: 1.25rem !important;
}

.p-22 {
  padding: 1.375rem !important;
}

.p-24 {
  padding: 1.5rem !important;
}

.p-30 {
  padding: 1.875rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-2 {
  padding-top: .125rem !important;
}

.pt-10 {
  padding-top: .625rem !important;
}

.pt-12 {
  padding-top: .75rem !important;
}

.pt-15 {
  padding-top: .9875rem !important;
}

.pt-16 {
  padding-top: 1rem !important;
}

.pt-20 {
  padding-top: 1.25rem !important;
}

.pt-24 {
  padding-top: 1.5rem !important;
}

.pt-26 {
  padding-top: 1.625rem !important;
}

.pt-30 {
  padding-top: 1.875rem !important;
}

.pt-34 {
  padding-top: 2.125rem !important;
}

.pt-40 {
  padding-top: 2.5rem !important;
}

.pt-50 {
  padding-top: 3.125rem !important;
}

.pt-60 {
  padding-top: 3.75rem !important;
}

.pt-70 {
  padding-top: 4.375rem !important;
}

.pt-84 {
  padding-top: 5.25rem !important;
}

.pt-100 {
  padding-top: 6.25rem !important;
}

.pt-200 {
  padding-top: 12.5rem !important;
}

.pt-180 {
  padding-top: 11.25rem !important;
}

.pr-5 {
  padding-right: .3125rem !important;
}

.pr-10 {
  padding-right: .625rem !important;
}

.pr-12 {
  padding-right: .75rem !important;
}

.pr-16 {
  padding-right: 1rem !important;
}

.pr-24 {
  padding-right: 1.5rem !important;
}

.pr-30 {
  padding-right: 1.875rem !important;
}

.pr-32 {
  padding-right: 2rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-5 {
  padding-bottom: .3125rem !important;
}

.pb-8 {
  padding-bottom: .5rem !important;
}

.pb-10 {
  padding-bottom: .625rem !important;
}

.pb-16 {
  padding-bottom: 1rem !important;
}

.pb-20 {
  padding-bottom: 1.25rem !important;
}

.pb-24 {
  padding-bottom: 1.5rem !important;
}

.pb-30 {
  padding-bottom: 1.875rem !important;
}

.pb-40 {
  padding-bottom: 2.5rem !important;
}

.pb-44 {
  padding-bottom: 2.75rem !important;
}

.pb-50 {
  padding-bottom: 3.125rem !important;
}

.pb-56 {
  padding-bottom: 3.5rem !important;
}

.pb-60 {
  padding-bottom: 3.75rem !important;
}

.pb-80 {
  padding-bottom: 5rem !important;
}

.pb-100 {
  padding-bottom: 6.25rem !important;
}

.pb-120 {
  padding-bottom: 7.5rem !important;
}

.pb-150 {
  padding-bottom: 9.375rem !important;
}

.pb-160 {
  padding-bottom: 10rem !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pl-6 {
  padding-left: .375rem !important;
}

.pl-10 {
  padding-left: .625rem !important;
}

.pl-14 {
  padding-left: .875rem !important;
}

.pl-16 {
  padding-left: 1rem !important;
}

.pl-20 {
  padding-left: 1.25rem !important;
}

.pl-24 {
  padding-left: 1.5rem !important;
}

.pl-26 {
  padding-left: 1.625rem !important;
}

.pl-30 {
  padding-left: 1.875rem !important;
}

.pl-40 {
  padding-left: 2.5rem !important;
}

.pl-68 {
  padding-left: 4.25rem !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-10 {
  padding-right: .625rem !important;
  padding-left: .625rem !important;
}

.px-16 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.px-20 {
  padding-right: 1.25rem !important;
  padding-left: 1.25rem !important;
}

.px-30 {
  padding-right: 1.875rem !important;
  padding-left: 1.875rem !important;
}

.py-4 {
  padding-top: .25rem !important;
  padding-bottom: .25rem !important;
}

.py-12 {
  padding-top: .75rem !important;
  padding-bottom: .75rem !important;
}

.py-16 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-20 {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.py-32 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.mx-auto {
  margin-right: auto;
  margin-left: auto;
}

.m-0 {
  margin: 0 !important;
}

.mt-1 {
  margin-top: .0625rem !important;
}

.mt-2 {
  margin-top: .125rem !important;
}

.mt-4 {
  margin-top: .25rem !important;
}

.mt-5 {
  margin-top: .3125rem !important;
}

.mt-6 {
  margin-top: .375rem !important;
}

.mt-8 {
  margin-top: .5rem !important;
}

.mt-10 {
  margin-top: .625rem !important;
}

.mt-12 {
  margin-top: .75rem !important;
}

.mt-16 {
  margin-top: 1rem !important;
}

.mt-20 {
  margin-top: 1.25rem !important;
}

.mt-26 {
  margin-top: 1.625rem !important;
}

.mt-30 {
  margin-top: 1.875rem !important;
}

.mt-40 {
  margin-top: 2.5rem !important;
}

.mt-50 {
  margin-top: 3.125rem !important;
}

.mt-80 {
  margin-top: 5rem !important;
}

.mt-84 {
  margin-top: 5.25rem !important;
}

.mt-120 {
  margin-top: 7.5rem !important;
}

.mt-178 {
  margin-top: 11.125rem !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: .0625rem !important;
}

.mb-2 {
  margin-bottom: .125rem !important;
}

.mb-3 {
  margin-bottom: .1875rem !important;
}

.mb-4 {
  margin-bottom: .25rem !important;
}

.mb-5 {
  margin-bottom: .3125rem !important;
}

.mb-6 {
  margin-bottom: .375rem !important;
}

.mb-8 {
  margin-bottom: .5rem !important;
}

.mb-10 {
  margin-bottom: 0.625rem !important;
}

.mb-12 {
  margin-bottom: 0.75rem !important;
}

.mb-14 {
  margin-bottom: .875rem !important;
}

.mb-15 {
  margin-bottom: .9375rem !important;
}

.mb-16 {
  margin-bottom: 1rem !important;
}

.mb-18 {
  margin-bottom: 1.125rem !important;
}

.mb-20 {
  margin-bottom: 1.25rem !important;
}

.mb-21 {
  margin-bottom: 1.3125rem !important;
}

.mb-22 {
  margin-bottom: 1.375rem !important;
}

.mb-24 {
  margin-bottom: 1.5rem !important;
}

.mb-25 {
  margin-bottom: 1.5625rem !important;
}

.mb-26 {
  margin-bottom: 1.625rem !important;
}

.mb-28 {
  margin-bottom: 1.75rem !important;
}

.mb-30 {
  margin-bottom: 1.875rem !important;
}

.mb-36 {
  margin-bottom: 2.25rem !important;
}

.mb-2r {
  margin-bottom: 2rem !important;
}

.mb-4r {
  margin-bottom: 4rem !important;
}

.mb-40 {
  margin-bottom: 2.5rem !important;
}

.mb-42 {
  margin-bottom: 2.625rem !important;
}

.mb-44 {
  margin-bottom: 2.75rem !important;
}

.mb-48 {
  margin-bottom: 3rem !important;
}

.mb-50 {
  margin-bottom: 3.125rem !important;
}

.mb-60 {
  margin-bottom: 3.75rem !important;
}

.mb-70 {
  margin-bottom: 4.375rem !important;
}

.mb-78 {
  margin-bottom: 4.875rem !important;
}

.mb-80 {
  margin-bottom: 5rem !important;
}

.mb-100 {
  margin-bottom: 6.25rem !important;
}

.mb-120 {
  margin-bottom: 7.5rem !important;
}

.mb-140 {
  margin-bottom: 8.75rem !important;
}

.mb-160 {
  margin-bottom: 10rem !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.ml-5 {
  margin-left: .3125rem !important;
}

.ml-6 {
  margin-left: .375rem !important;
}

.ml-10 {
  margin-left: .625rem !important;
}

.ml-16 {
  margin-left: 1rem !important;
}

.ml-18 {
  margin-left: 1.125rem !important;
}

.ml-20 {
  margin-left: 1.25rem !important;
}

.ml-30 {
  margin-left: 1.875rem !important;
}

.ml-36 {
  margin-left: 2.25rem !important;
}

.ml-40 {
  margin-left: 2.5rem !important;
}

.mr-2 {
  margin-right: .125rem !important;
}

.mr-3 {
  margin-right: .1875rem !important;
}

.mr-4 {
  margin-right: .25rem !important;
}

.mr-6 {
  margin-right: .375rem !important;
}

.mr-8 {
  margin-right: .5rem !important;
}

.mr-10 {
  margin-right: .625rem !important;
}

.mr-12 {
  margin-right: .75rem !important;
}

.mr-16 {
  margin-right: 1rem !important;
}

.mr-18 {
  margin-right: 1.125rem !important;
}

.mr-20 {
  margin-right: 1.25rem !important;
}

.mr-24 {
  margin-right: 1.5rem !important;
}

.mr-30 {
  margin-right: 1.875rem !important;
}

.mr-36 {
  margin-right: 2.25rem !important;
}

.mr-40 {
  margin-right: 2.5rem !important;
}

.mr-48 {
  margin-right: 3rem !important;
}

.ml--2 {
  margin-left: -.125rem;
}

.ml--8 {
  margin-left: -.5rem !important;
}

.pl-16 {
  padding-left: 1rem !important;
}

.pl-20 {
  padding-left: 1.25rem !important;
}

@media (min-width: 769px) {
  .p-md-0 {
    padding: 0 !important;
  }
  .p-md-30 {
    padding: 1.875rem !important;
  }
  .p-md-40 {
    padding: 2.5rem !important;
  }
  .pt-md-0 {
    padding-top: 0 !important;
  }
  .pt-md-10 {
    padding-top: .625rem !important;
  }
  .pt-md-12 {
    padding-top: .75rem !important;
  }
  .pt-md-15 {
    padding-top: .9375rem !important;
  }
  .pt-md-20 {
    padding-top: 1.25rem !important;
  }
  .pt-md-24 {
    padding-top: 1.5rem !important;
  }
  .pt-md-30 {
    padding-top: 1.875rem !important;
  }
  .pt-md-32 {
    padding-top: 2rem !important;
  }
  .pt-md-40 {
    padding-top: 2.5rem !important;
  }
  .pt-md-44 {
    padding-top: 2.75rem !important;
  }
  .pt-md-50 {
    padding-top: 3.125rem !important;
  }
  .pt-md-60 {
    padding-top: 3.75rem !important;
  }
  .pt-md-80 {
    padding-top: 5rem !important;
  }
  .pt-md-100 {
    padding-top: 6.25rem !important;
  }
  .pt-md-110 {
    padding-top: 6.875rem !important;
  }
  .pt-md-120 {
    padding-top: 7.5rem !important;
  }
  .pt-md-180 {
    padding-top: 11.25rem !important;
  }
  .pr-md-0 {
    padding-right: 0 !important;
  }
  .pr-md-8 {
    padding-right: .5rem !important;
  }
  .pr-md-16 {
    padding-right: 1rem !important;
  }
  .pr-md-20 {
    padding-right: 1.25rem !important;
  }
  .pr-md-24 {
    padding-right: 1.5rem !important;
  }
  .pr-md-30 {
    padding-right: 1.875rem !important;
  }
  .pr-md-50 {
    padding-right: 3.125rem !important;
  }
  .pr-md-60 {
    padding-right: 3.75rem !important;
  }
  .pr-md-80 {
    padding-right: 5rem !important;
  }
  .pl-md-20p {
    padding-left: 20% !important;
  }
  .pl-md-0 {
    padding-left: 0 !important;
  }
  .pl-md-1 {
    padding-left: .0625rem !important;
  }
  .pl-md-8 {
    padding-left: .5rem !important;
  }
  .pl-md-10 {
    padding-left: .625rem !important;
  }
  .pl-md-16 {
    padding-left: 1rem !important;
  }
  .pl-md-20 {
    padding-left: 1.25rem !important;
  }
  .pl-md-24 {
    padding-left: 1.5rem !important;
  }
  .pl-md-28 {
    padding-left: 1.75rem !important;
  }
  .pl-md-30 {
    padding-left: 1.875rem !important;
  }
  .pl-md-40 {
    padding-left: 2.5rem !important;
  }
  .pl-md-50 {
    padding-left: 3.125rem !important;
  }
  .pb-md-0 {
    padding-bottom: 0 !important;
  }
  .pb-md-8 {
    padding-bottom: .5rem !important;
  }
  .pb-md-12 {
    padding-bottom: .75rem !important;
  }
  .pb-md-16 {
    padding-bottom: 1rem !important;
  }
  .pb-md-20 {
    padding-bottom: 1.25rem !important;
  }
  .pb-md-30 {
    padding-bottom: 1.875rem !important;
  }
  .pb-md-32 {
    padding-bottom: 2rem !important;
  }
  .pb-md-40 {
    padding-bottom: 2.5rem !important;
  }
  .pb-md-44 {
    padding-bottom: 2.75rem !important;
  }
  .pb-md-48 {
    padding-bottom: 3rem !important;
  }
  .pb-md-50 {
    padding-bottom: 3.125rem !important;
  }
  .pb-md-60 {
    padding-bottom: 3.75rem !important;
  }
  .pb-md-80 {
    padding-bottom: 5rem !important;
  }
  .pb-md-100 {
    padding-bottom: 6.25rem !important;
  }
  .pb-md-120 {
    padding-bottom: 7.5rem !important;
  }
  .pb-md-200 {
    padding-bottom: 12.5rem !important;
  }
  .py-md-18 {
    padding-top: 1.125rem !important;
    padding-bottom: 1.125rem !important;
  }
  .py-md-20 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
  .py-md-24 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-md-30 {
    padding-top: 1.875rem !important;
    padding-bottom: 1.875rem !important;
  }
  .px-md-5 {
    padding-right: .3125rem !important;
    padding-left: .3125rem !important;
  }
  .px-md-16 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-md-20 {
    padding-right: 1.25rem !important;
    padding-left: 1.25rem !important;
  }
  .px-md-30 {
    padding-right: 1.875rem !important;
    padding-left: 1.875rem !important;
  }
  .px-md-34 {
    padding-right: 2.125rem !important;
    padding-left: 2.125rem !important;
  }
  .px-md-40 {
    padding-right: 2.5rem !important;
    padding-left: 2.5rem !important;
  }
  .m-md-0 {
    margin: 0 !important;
  }
  .mt-md-0 {
    margin-top: 0 !important;
  }
  .mt-md-4 {
    margin-top: .25rem !important;
  }
  .mt-md-6 {
    margin-top: .375rem !important;
  }
  .mt-md-10 {
    margin-top: .625rem !important;
  }
  .mt-md-18 {
    margin-top: 1.125rem !important;
  }
  .mt-md-30 {
    margin-top: 1.875rem !important;
  }
  .mt-md-40 {
    margin-top: 2.5rem !important;
  }
  .mt-md-60 {
    margin-top: 3.75rem !important;
  }
  .mt-md-80 {
    margin-top: 5rem !important;
  }
  .mt-md-100 {
    margin-top: 6.25rem !important;
  }
  .mt-md-120 {
    margin-top: 7.5rem !important;
  }
  .mb-md-0 {
    margin-bottom: 0 !important;
  }
  .mb-md-1 {
    margin-bottom: .0625rem !important;
  }
  .mb-md-2 {
    margin-bottom: .125rem !important;
  }
  .mb-md-4 {
    margin-bottom: .25rem !important;
  }
  .mb-md-10 {
    margin-bottom: .625rem !important;
  }
  .mb-md-12 {
    margin-bottom: .75rem !important;
  }
  .mb-md-14 {
    margin-bottom: .875rem !important;
  }
  .mb-md-15 {
    margin-bottom: .9375rem !important;
  }
  .mb-md-20 {
    margin-bottom: 1.25rem !important;
  }
  .mb-md-24 {
    margin-bottom: 1.5rem !important;
  }
  .mb-md-30 {
    margin-bottom: 1.875rem !important;
  }
  .mb-md-40 {
    margin-bottom: 2.5rem !important;
  }
  .mb-md-48 {
    margin-bottom: 3rem !important;
  }
  .mb-md-50 {
    margin-bottom: 3.125rem !important;
  }
  .mb-md-55 {
    margin-bottom: 3.4375rem !important;
  }
  .mb-md-56 {
    margin-bottom: 3.5rem !important;
  }
  .mb-md-60 {
    margin-bottom: 3.75rem !important;
  }
  .mb-md-64 {
    margin-bottom: 4rem !important;
  }
  .mb-md-70 {
    margin-bottom: 4.375rem !important;
  }
  .mb-md-78 {
    margin-bottom: 4.875rem !important;
  }
  .mb-md-80 {
    margin-bottom: 5rem !important;
  }
  .mb-md-90 {
    margin-bottom: 5.625rem !important;
  }
  .mb-md-100 {
    margin-bottom: 6.25rem !important;
  }
  .mb-md-116 {
    margin-bottom: 7.25rem !important;
  }
  .mb-md-120 {
    margin-bottom: 7.5rem !important;
  }
  .mb-md-142 {
    margin-bottom: 8.875rem !important;
  }
  .mb-md-200 {
    margin-bottom: 12.5rem !important;
  }
  .ml-md-0 {
    margin-left: 0 !important;
  }
  .ml-md-10 {
    margin-left: .625rem !important;
  }
  .ml-md-20 {
    margin-left: 1.25rem !important;
  }
  .ml-md-30 {
    margin-left: 1.875rem !important;
  }
  .ml-md-40 {
    margin-left: 2.5rem !important;
  }
  .ml-md-50 {
    margin-left: 3.125rem !important;
  }
  .ml-md-150 {
    margin-left: 9.375rem !important;
  }
  .mr-md-0 {
    margin-right: 0 !important;
  }
  .mr-md-10 {
    margin-right: .625rem !important;
  }
  .mr-md-20 {
    margin-right: 1.25rem !important;
  }
  .mr-md-30 {
    margin-right: 1.875rem !important;
  }
  .mr-md-36 {
    margin-right: 2.25rem !important;
  }
  .mr-md-40 {
    margin-right: 2.5rem !important;
  }
  .mr-md-50 {
    margin-right: 3.125rem !important;
  }
  .mr-md-60 {
    margin-right: 3.75rem !important;
  }
  .mr-md-70 {
    margin-right: 4.375rem !important;
  }
  .mr-md-80 {
    margin-right: 5rem !important;
  }
  .mr-md-100 {
    margin-right: 6.25rem !important;
  }

  .mr-md-130 {
    margin-right: 8.125rem !important;
  }

  .mr-md-160 {
    margin-right: 10rem !important;
  }

  .mr-md-16 {
    margin-right: 1rem !important;
  }
  .ml-md-16 {
    margin-left: 1rem !important;
  }
  .mx-md-0 {
    margin-right: 0;
    margin-left: 0;
  }
}

@media (max-width: 768.98px) {
  .mb-sm-14 {
    margin-bottom: .875rem !important;
  }
}

.d-block {
  display: block;
}

.d-none {
  display: none;
}

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

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

@media (min-width: 769px) {
  .md-flex {
    display: flex;
  }
  .md-block {
    display: block;
  }
  .md-inline {
    display: inline;
  }
  .md-inline-block {
    display: inline-block;
  }
  .md-none {
    display: none;
  }
  .align-items-md-center {
    align-items: center;
  }
  .align-items-md-start {
    align-items: flex-start;
  }
  .justify-md-start {
    justify-content: flex-start !important;
  }
  .justify-md-end {
    justify-content: flex-end !important;
  }
}

.w50p {
  width: 50%;
}

.w25p {
  width: 25%;
}

.w33p {
  width: 33.33333%;
}

.w65p {
  width: 65%;
}

.w80p {
  width: 80%;
}

.w100p {
  width: 100%;
}

.mw100p {
  max-width: 100%;
}

.w16px {
  width: 1rem;
}

.w40px {
  width: 2.5rem;
}

.w48px {
  width: 3rem;
}

.w70px {
  width: 4.375rem;
}

.w74px {
  width: 4.625rem;
}

.w90px {
  width: 5.625rem;
}

.w110px {
  width: 6.875rem;
}

.w120px {
  width: 7.5rem;
}

.w140px {
  width: 8.75rem !important;
}

.w150px {
  width: 9.375rem !important;
  min-width: 9.375rem !important;
}

.w160px {
  width: 10rem;
}

.w180px {
  width: 11.25rem;
}

.w240px {
  width: 15rem;
}

.w260px {
  width: 16.25rem;
}

.w307px {
  width: 19.1875rem;
}

.w10r {
  width: 10rem;
}

.w15r {
  width: 15rem;
}

.w20r {
  width: 20rem;
}

.w300 {
  width: 18.75rem;
}

.mw0 {
  min-width: 0;
}

.mw20px {
  max-width: 1.25rem;
}

.mw10r {
  max-width: 10rem;
}

.mw180px {
  max-width: 11.25rem;
}

.mw12_5r {
  max-width: 12.5rem;
}

.mw15r {
  max-width: 15rem;
}

.miw15r {
  min-width: 15rem;
}

.mw20r {
  max-width: 20rem;
}

.mw350px {
  max-width: 21.875rem;
}

.mw22_5r {
  max-width: 22.5rem;
}

.mw390px {
  max-width: 24.375rem;
}

.mw30r {
  max-width: 30rem;
}

.mw37_5r {
  max-width: 37.5rem;
}

.mw41r {
  max-width: 41rem;
}

.mw800 {
  max-width: 50rem;
}

@media (min-width: 769px) {
  .mw800 {
    margin-left: 20rem;
  }
}

@media (min-width: 769px) {
  .md-w50p {
    width: 50% !important;
  }
}
.h2px {
  height: 0.125rem;
}

.h20 {
  height: 1.25rem;
}

.h24px {
  height: 1.5rem;
}

.h50px {
  height: 3.125rem;
}

.h160px {
  height: 10rem;
}

.h186px {
  height: 11.625rem;
}

.h100p {
  height: 100%;
}

.h240px {
  height: 15rem;
}

.h260px {
  height: 16.25rem;
}

.h280px {
  height: 17.5rem;
}

@media (min-width: 769px) {
  .w-md-auto {
    width: auto;
  }
  .md-w5p {
    width: 5%;
  }
  .md-w6p {
    width: 6%;
  }
  .md-w7p {
    width: 7%;
  }
  .md-w10p {
    width: 10%;
  }
  .md-w12p {
    width: 12%;
  }
  .md-w12-5p {
    width: 12.5%;
  }
  .md-w14p {
    width: 14%;
  }
  .md-w15p {
    width: 15%;
  }
  .md-w16p {
    width: 16%;
  }
  .md-w17p {
    width: 17%;
  }
  .md-w18p {
    width: 18%;
  }
  .md-w19p {
    width: 19%;
  }
  .md-w20p {
    width: 20%;
  }
  .md-w21p {
    width: 21%;
  }
  .md-w23p {
    width: 23%;
  }
  .md-w24p {
    width: 24%;
  }
  .md-w25p {
    width: 25%;
  }
  .md-w26p {
    width: 26%;
  }
  .md-w28p {
    width: 28%;
  }
  .md-w30p {
    width: 30%;
  }
  .md-w35p {
    width: 35%;
  }
  .md-w40p {
    width: 40%;
  }
  .md-w45p {
    width: 45%;
  }
  .md-w48p {
    width: 48%;
  }
  .md-w33p {
    width: 33.33333%;
  }
  .md-w50p {
    width: 50%;
  }
  .md-w53p {
    width: 53%;
  }
  .md-w55p {
    width: 55%;
  }
  .md-w57p {
    width: 57%;
  }
  .md-w58p {
    width: 58%;
  }
  .md-w59p {
    width: 59%;
  }
  .md-w60p {
    width: 60%;
  }
  .md-w62p {
    width: 62%;
  }
  .md-w65p {
    width: 65%;
  }
  .md-w68p {
    width: 68%;
  }
  .md-w70p {
    width: 70%;
  }
  .md-w75p {
    width: 75%;
  }
  .md-w77p {
    width: 77%;
  }
  .md-w80p {
    width: 80%;
  }
  .md-w85p {
    width: 85%;
  }
  .md-w90p {
    width: 90%;
  }
  .md-w100p {
    width: 100%;
  }
  .md-w3-5r {
    width: 3.5rem;
  }
  .md-w5r {
    width: 5rem;
  }
  .md-w12r {
    width: 12rem;
  }
  .md-w15r {
    width: 15rem;
  }
  .md-w20r {
    width: 20rem !important;
  }
  .md-w100 {
    width: 6.25rem !important;
  }
  .md-w150 {
    width: 9.375rem !important;
  }
  .md-w200 {
    width: 12.5rem !important;
  }
  .md-w220 {
    width: 13.75rem !important;
  }

  .md-w240 {
    width: 15rem !important;
  }

  .md-w246 {
    width: 15.375rem !important;
  }
  .md-w300 {
    width: 18.75rem !important;
  }
  .md-w360 {
    width: 22.5rem !important;
  }
  .md-w380 {
    width: 23.75rem !important;
  }
  .md-w400 {
    width: 25rem !important;
  }
  .md-h126 {
    height: 7.875rem;
  }
  .md-h10r {
    height: 10rem;
  }
  .md-h12r {
    height: 12rem;
  }
  .md-h14r {
    height: 14rem;
  }
  .md-h17r {
    height: 17rem;
  }
  .md-h18r {
    height: 18rem;
  }
  .md-h20r {
    height: 20rem;
  }
  .md-h25r {
    height: 25rem;
  }
/* // 2023年10月 .md-mw204px追加 */
  .md-mw204px {
    max-width: 12.75rem !important;
  }
  .md-mw206px {
    max-width: 12.875rem !important;
  }
  .md-mw240 {
    max-width: 15rem !important;
  }
  .md-mw220px {
    max-width: 13.75rem !important;
  }
  .md-mw240px {
    max-width: 15rem !important;
  }
  .md-mw260px {
    max-width: 16.25rem !important;
  }

  .md-mw320px {
    max-width: 20rem !important;
  }

  .md-mw330px {
    max-width: 20.625rem !important;
  }
  .md-mw810px {
    max-width: 50.625rem !important;
  }
  .md-mw812px {
    max-width: 50.75rem !important;
  }

  .md-miw120px {
    min-width: 7.5rem !important;
  }
}

.bg-white {
  background: #fff !important;
}

.bg-g50 {
  background: #f8f8f8 !important;
}

.bg-g100 {
  background: #f5f5f5 !important;
}

.bg-g150 {
  background: #f1f1f1 !important;
}

.bg-g200 {
  background: #ebebeb !important;
}

.bg-g300 {
  background: #ddd !important;
}

.bg-g400 {
  background: #d7d7d7 !important;
}

.bg-g700 {
  background: #767676 !important;
}

.bg-g900 {
  background: #282830 !important;
}

.bg-green {
  background: #7DE5D4 !important;
}

@media (min-width: 769px) {
  .md-bg-white {
    background: #fff !important;
  }
}

.tx-8 {
  font-size: .5rem;
}

.tx-10 {
  font-size: .625rem;
}

.tx-12 {
  font-size: .75rem;
}

.tx-14 {
  font-size: .875rem;
}

.tx-16 {
  font-size: 1rem;
}

.tx-18 {
  font-size: 1.125rem;
}

.tx-20 {
  font-size: 1.25rem;
}

.tx-22 {
  font-size: 1.375rem;
}

.tx-24 {
  font-size: 1.5rem;
}

.tx-26 {
  font-size: 1.625rem;
}

.tx-30 {
  font-size: 1.875rem;
}

.tx-36 {
  font-size: 2.25rem;
}

.tx-40 {
  font-size: 2.5rem;
}

.tx-44 {
  font-size: 2.75rem;
}

.tx-50 {
  font-size: 3.125rem;
}

.tx-60 {
  font-size: 3.75rem;
}

.tx-80 {
  font-size: 5rem;
}

.tx-18-important {
  font-size: 1.125rem !important;
}

.tx-w300 {
  font-weight: 300 !important;
}

.tx-w400 {
  font-weight: 400 !important;
}

.tx-w500 {
  font-weight: 500 !important;
}

.tx-w600 {
  font-weight: 600 !important;
}

.tx-w700 {
  font-weight: 700 !important;
}

.tx-lower {
  text-transform: lowercase;
}

.tx-upper {
  text-transform: uppercase;
}

.tx-montserrat {
  font-family: "Montserrat", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
}

.tx-black {
  color: #33333b !important;
}

.tx-white {
  color: #fff !important;
}

.tx-g100 {
  color: #f5f5f5 !important;
}

.tx-g200 {
  color: #ebebeb !important;
}

.tx-g300 {
  color: #ddd !important;
}

.tx-g400 {
  color: #d7d7d7 !important;
}

.tx-g500 {
  color: #c4c4c4 !important;
}

.tx-g600 {
  color: #A4A4AC !important;
}

.tx-g700 {
  color: #767676 !important;
}

.tx-red {
  color: #d51040 !important;
}

.tx-blue {
  color: #1e1eff !important;
}

.tx-yellowgreen {
  color: #ECFF51 !important;
}

.tx-left {
  text-align: left !important;
}

.tx-right {
  text-align: right !important;
}

.tx-center {
  text-align: center !important;
}

.tx-l1 {
  line-height: 1;
}

.tx-l11 {
  line-height: 1.1;
}

.tx-l1r {
  line-height: 1rem;
}

.tx-l18 {
  line-height: 1.125rem;
}

.tx-l20 {
  line-height: 1.25rem;
}

.tx-l21 {
  line-height: 1.3125rem;
}

.tx-l22 {
  line-height: 1.375rem;
}

.tx-l24 {
  line-height: 1.5rem;
}

.tx-l28 {
  line-height: 1.75rem;
}

.tx-l30 {
  line-height: 1.875rem;
}

.tx-l44 {
  line-height: 2.75rem;
}

.tx-l55 {
  line-height: 3.4375rem;
}

.tx-l66 {
  line-height: 4.125rem;
}

.tx-l1p6 {
  line-height: 1.6;
}

.tx-ls0 {
  letter-spacing: 0;
}

.tx-ls5p {
  letter-spacing: .05em;
}

@media (min-width: 769px) {
  .tx-md-12 {
    font-size: .75rem;
  }
  .tx-md-14 {
    font-size: .875rem;
  }
  .tx-md-16 {
    font-size: 1rem;
  }
  .tx-md-18 {
    font-size: 1.125rem;
  }
  .tx-md-20 {
    font-size: 1.25rem;
  }
  .tx-md-24 {
    font-size: 1.5rem;
  }
  .tx-md-28 {
    font-size: 1.75rem;
  }
  .tx-md-30 {
    font-size: 1.875rem;
  }
  .tx-md-40 {
    font-size: 2.5rem;
  }
  .tx-md-50 {
    font-size: 3.125rem;
  }
  .tx-md-60 {
    font-size: 3.75rem;
  }
  .tx-md-65 {
    font-size: 4.0625rem;
  }
  .tx-md-70 {
    font-size: 4.375rem;
  }
  .tx-md-120 {
    font-size: 7.5rem;
  }
  .tx-md-l30 {
    line-height: 1.875rem;
  }
  .tx-md-l77 {
    line-height: 4.8125rem;
  }
  .tx-md-center {
    text-align: center !important;
  }
  .tx-md-left {
    text-align: left !important;
  }
  .tx-md-right {
    text-align: right !important;
  }
  .tx-md-black {
    color: #33333b !important;
  }
  .tx-md-w400 {
    font-weight: 400 !important;
  }
}

.tx-nowrap {
  white-space: nowrap;
}

.tx-wrap {
  overflow-wrap: break-word;
}

@media (min-width: 769px) {
  .tx-md-nowrap {
    white-space: nowrap;
  }
}

.tx-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tx-ellipsisl2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tx-cancel {
  text-decoration: line-through !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:active, .sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.chromeless {
  cursor: pointer;
  background: transparent;
  border: 0;
}

.chromeless:focus, .chromeless:active {
  outline: 0;
}

.hidden {
  display: none;
}

@media (min-width: 769px) {
  .visible-sm {
    display: none !important;
  }
}

@media (max-width: 768.98px) {
  .hidden-sm {
    display: none !important;
  }
}

.unstyled {
  padding: 0;
  margin: 0;
  list-style: none;
}

.hr {
  display: block;
  width: 100%;
  border-bottom: 1px solid #ddd;
}

.hr-white {
  display: block;
  width: 100%;
  border-bottom: 1px solid #fff;
}

.error-block {
  font-size: 0.75rem;
  color: #d51040;
}

.error-block p {
  display: flex;
  align-items: flex-start;
}

.error-block .icon {
  flex: 0 0 auto;
  margin-top: 0.125rem;
  margin-right: 0.625rem;
  vertical-align: sub;
}

.ov-hidden {
  overflow: hidden;
}

.spin {
  animation: spin 60s infinite linear;
}

@keyframes spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.round4 {
  border-radius: .25rem;
}

.z-2 {
  z-index: 2;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.vertical-align-top {
  vertical-align: top;
}

.rounded-full {
  border-radius: 9999px;
}

.border-line {
  border-bottom: solid;
  border-bottom-width: 1px;
  border-color: #ddd;
}

.table-4col table {
  white-space: nowrap;
  border: solid 1px #ddd;
}

.table-4col table:first-child {
  background: #fff;
}

.table-4col table:first-child td {
  min-width: 2rem;
}

@media (min-width: 769px) {
  .table-4col table:first-child td {
    min-width: 2rem;
  }
}

@media (min-width: 769px) {
  .table-4col table:nth-child(3) td:first-child {
    min-width: 2rem;
  }
}

@media (min-width: 769px) {
  .table-4col table:nth-child(3) td:last-child {
    min-width: 1rem;
  }
}

.table-4col table:last-child {
  margin-left: -1px;
}

.table-4col table:last-child td {
  min-width: 2rem;
}

@media (min-width: 769px) {
  .table-4col table:last-child td {
    min-width: 2rem;
  }
}

.table-3col table {
  white-space: nowrap;
  border: solid 1px #ddd;
}
.table-3col table:first-child {
  background: #fff;
}

@media (min-width: 769px) {
  .table-3col table:first-child td:first-child {
    min-width: 3rem;
  }
}

@media (min-width: 769px) {
  .table-3col table:first-child td:last-child {
    min-width: 2rem;
  }
}

.table-3col table:last-child {
  margin-left: -1px;
}

.table-3col table:last-child td {
  min-width: 2rem;
}

@media (min-width: 769px) {
  .table-3col table:last-child td {
    min-width: 2rem;
  }
}

.table-2col table {
  white-space: nowrap;
  border: solid 1px #ddd;
}

.table-2col table:first-child {
  background: #fff;
}

.table-2col table:first-child td:first-child {
  min-width: 7.5rem;
}

@media (min-width: 769px) {
  .table-2col table:first-child td:first-child {
    min-width: 8rem;
  }
}

.table-2col table:first-child td:last-child {
  min-width: 7.5rem;
}

@media (min-width: 769px) {
  .table-2col table:first-child td:last-child {
    min-width: 12rem;
  }
}

.table-2col table:last-child {
  margin-left: -1px;
}

.table-2col table:last-child td {
  min-width: 3rem;
}

@media (min-width: 769px) {
  .table-2col table:last-child td {
    min-width: 3rem;
  }
}

.table-1col table {
  white-space: nowrap;
  border: solid 1px #ddd;
}
.table-1col table:first-child {
  background: #fff;
  margin-left: -1px;
}

tr {
  height: 3.125rem;
}

tr:first-child {
  height: 1.875rem;
  color: #fff;
  background: #767676;
}

.lightbg {
  height: 1.875rem;
  color: #fff;
  background: #A4A4AC;
}

.underline {
  text-decoration: underline;
}

.reload {
  display: flex;
  align-items: center;
}
.reload span {
  display: block;
  color: #1e1eff;
  font-weight: 700;
}

.form-control .label {
  display: block;
  margin-bottom: .625rem;
  font-size: .875rem;
  font-weight: 600;
}

.form-control .detail-label {
  display: block;
  margin-bottom: .3125rem;
  font-size: .875rem;
  line-height: 1.25rem;
}

.form-control label {
  margin-bottom: 0;
}

.form-control input[type=text],
.form-control input[type=tel],
.form-control input[type=number],
.form-control input[type=email],
.form-control input[type=password],
.form-control input[type=date],
.form-control .input {
  display: block;
  width: 100%;
  min-height: 3.4375rem;
  padding: 1rem 1.25rem;
  font-size: .875rem;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
}

.form-control input[type=text]:focus,
.form-control input[type=tel]:focus,
.form-control input[type=number]:focus,
.form-control input[type=email]:focus,
.form-control input[type=password]:focus,
.form-control input[type=date]:focus,
.form-control .input:focus {
  border-color: #26e8ff !important;
  outline: 0;
}

.form-control input[type=text][readonly],
.form-control input[type=tel][readonly],
.form-control input[type=number][readonly],
.form-control input[type=email][readonly],
.form-control input[type=password][readonly],
.form-control input[type=date][readonly],
.form-control .input[readonly] {
  background: transparent;
  border: 1px solid #c4c4c4;
}

.form-control input[type=text].error,
.form-control input[type=tel].error,
.form-control input[type=number].error,
.form-control input[type=email].error,
.form-control input[type=password].error,
.form-control input[type=date].error,
.form-control .input.error {
  border-color: #d51040;
}

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

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

.form-control input[type=radio],
.form-control input[type=checkbox] {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.form-control input[type=radio] + span,
.form-control input[type=checkbox] + span {
  position: relative;
  display: flex;
  font-size: .875rem;
  line-height: 1.25rem;
  text-align: left;
}

.form-control input[type=radio] + span + span,
.form-control input[type=checkbox] + span + span {
  line-height: 1.25rem;
}

.form-control input[type=radio] + span::before, .form-control input[type=radio] + span::after,
.form-control input[type=checkbox] + span::before,
.form-control input[type=checkbox] + span::after {
  display: inline-block;
  content: "";
}

.form-control input[type=radio] + span::before,
.form-control input[type=checkbox] + span::before {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: .625rem;
  vertical-align: top;
  content: "";
  background: transparent center center no-repeat;
}

.form-control input[type=radio] + span + p,
.form-control input[type=checkbox] + span + p {
  width: 9rem;
  margin-left: 1.875rem;
  font-size: .75rem;
  color: #767676;
}

.form-control input[type=radio] + span::before {
  background: #fff;
  border: 1px solid #c4c4c4;
  border-radius: 50%;
}

.form-control input[type=radio] + span::after {
  position: absolute;
  top: .375rem;
  left: .375rem;
  width: .5rem;
  height: .5rem;
  background: #fff;
  border-radius: 50%;
}

.form-control input[type=radio]:checked + span::before {
  background: #33333b;
  border-color: #33333b;
}

.form-control input[type=radio]:disabled + span::before {
  background: rgba(235, 235, 235, 0.3);
  border-color: rgba(215, 215, 215, 0.3);
}

.form-control input[type=radio]:disabled + span::after {
  background: transparent;
}

.form-control input[type=checkbox] + span::before {
  background: #fff;
  border: 1px solid #33333b;
  border-radius: 2px;
}

.form-control input[type=checkbox] + span::after {
  position: absolute;
  top: .125rem;
  left: .375rem;
  width: .5rem;
  height: .75rem;
  border-top: 2px solid transparent;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-left: 2px solid transparent;
  transform: rotateZ(45deg);
}

.form-control input[type=checkbox]:checked + span::before {
  background: #33333b;
}

@media (min-width: 769px) {
  .form-control input[type=text].w120,
  .form-control input[type=tel].w120 {
    width: 7.5rem;
  }
  .form-control input[type=text].w200,
  .form-control input[type=tel].w200 {
    width: 12.5rem;
  }
  .form-control input[type=text].w20r,
  .form-control input[type=tel].w20r {
    width: 20rem;
  }
}

.form-control .error-message {
  margin: .25rem 0 1.25rem;
  font-size: .75rem;
  color: #d51040;
}

.form-control .password-mask {
  position: relative;
}

.form-control .password-mask input[type=password],
.form-control .password-mask input[type=text] {
  padding-right: 2.5rem;
}

.form-control .password-mask .icon {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1.125rem;
  line-height: .875rem;
  background: transparent;
  border: 0;
}

.form-control .password-mask .icon img {
  width: 1.5rem;
  height: 1rem;
}

.form-control .password-mask input[type=password] + .icon .icon-hide {
  display: none;
}

.form-control .password-mask input[type=text] + .icon .icon-view {
  display: none;
}

.form-control .js-required {
  padding: 0 .5rem;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.4;
  color: #d51040;
  border: 1px solid #d51040;
  border-radius: 4px;
}

.form-control .birth {
  border: 0;
  border-radius: 4px;
  box-shadow: none;
}

.form-control .birth.year {
  width: 5rem;
}

@media (min-width: 769px) {
  .form-control .birth.year {
    width: 6.875rem;
  }
}

.form-control .birth.month, .form-control .birth.day {
  width: 4.375rem;
}

@media (min-width: 769px) {
  .form-control .birth.month, .form-control .birth.day {
    width: 6.875rem;
  }
}

.form-control .choices {
  margin-bottom: 0;
  background-color: #fff;
  border-radius: .25rem;
  border: 1px solid #ebebeb;
}

.form-control .choices + span {
  display: inline-block;
  padding-right: .375rem;
  padding-left: .25rem;
}

.form-control .choices.is-focused {
  border-color: #7DE5D4 !important;
}

.form-control .choices.is-open {
  background-color: #f5f5f5;
  border-color: #7DE5D4;
}

.form-control .choices__list--dropdown .choices__list {
  background: #33333b;
}

.form-control .choices[data-type*=select-one] .choices__input {
  background: #fff;
}

.form-control .choices[data-type*=select-one]::after {
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border: 2px solid transparent;
  border-right-color: #33333b;
  border-bottom-color: #33333b;
  transform: rotate(45deg);
  transform-origin: center center;
}

.form-control .choices[data-type*=select-one].is-open::after {
  margin-top: 0;
  transform: rotate(-135deg);
  border-color: transparent #33333b #33333b transparent;
}

.form-control .choices__list--dropdown .choices__item--selectable {
  padding: .5rem 1.25rem;
}

.form-control .choices__list--dropdown .choices__item--selectable::after {
  display: none;
}

.form-control .choices__placeholder {
  opacity: 1;
}

.form-control .choices__inner {
  background-color: transparent;
  border: 0;
}

.form-control .choices__list--single {
  padding-right: 1.25rem;
}

.form-control .choices__list--dropdown {
  left: 0;
  padding: 1.25rem 0;
  margin-top: .5rem;
  background: #33333b;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.form-control .is-flipped .choices__list--dropdown {
  margin-top: 0;
  margin-bottom: .5rem;
}

.form-control .choices__list--dropdown .choices__item--selectable {
  color: #fff;
  background: #33333b;
}

.form-control .choices__list--dropdown .choices__item--selectable.is-highlighted {
  color: #33333b;
  background: #fff;
}

.form-control .selectbox {
  position: relative;
  display: inline-block;
}

.form-control .selectbox::before, .form-control .selectbox::after {
  position: absolute;
  content: "";
}

.form-control .selectbox::before {
  top: 1rem;
  right: 1.875rem;
  height: 1.5rem;
  border-right: 1px solid #ebebeb;
}

.form-control .selectbox::after {
  top: 50%;
  right: 11.5px;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border: 2px solid;
  border-color: transparent #33333b #33333b transparent;
  transform: rotate(45deg);
  transform-origin: center center;
}

.form-control .selectbox input,
.form-control .selectbox .input {
  padding-right: 2rem;
  padding-left: .625rem;
}

.form-control label.datey + input {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.form-control .point-input {
  border-width: 0 !important;
  background: #f5f5f5 !important;
  border-radius: 4px !important;
  width: 100% !important;
}
.form-control .point-input.sm {
  width: 6.25rem !important;
  min-height: 1.875rem;
  padding: 0 1.25rem;
}
@media (min-width: 769px) {
  .form-control .point-input {
    max-width: 12.5rem !important;
  }
}

.autocomplete-wrap {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 99;
  max-height: 20rem;
  margin-top: .625rem;
  overflow-y: auto;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.autocomplete-items {
  width: 100%;
}

.autocomplete-items > .item {
  padding: .5rem 1.25rem;
  color: #fff;
  cursor: pointer;
  background: #33333b;
}

.autocomplete-items > .item:hover {
  color: #33333b;
  background: #fff;
}

.autocomplete-items > .item.autocomplete-active {
  color: #33333b;
  background-color: #fff;
}

.campaign-code .cc-input {
  display: inline-block !important;
  width: 240px !important;
  height: 50px !important;
  min-height: unset !important;
}
.campaign-code .cc-point-area {
  border-radius: 4px;
}

.modal-campaign-code {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1.25rem;
  z-index: 20;
}
.modal-campaign-code.open {
  display: flex;
}
.modal-campaign-code .modal-container {
  max-width: 38.75rem;
  box-shadow: 0.25rem 0.25rem 1.875rem rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
}
.modal-campaign-code .modal-campaign-code-close button {
  cursor: pointer;
}

.btn {
  position: relative;
  display: inline-block;
  padding: 1.125rem 0;
  overflow: hidden;
  font-size: .875rem;
  line-height: 1;
  color: #fff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: #33333b;
  border: 0;
  border-radius: 99em;
  transition: color 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.btn:disabled {
  cursor: default;
  background: #d7d7d7;
}

.btn.sm {
  padding: .5rem 0;
}

.btn.md {
  padding: .75rem 0;
}

.btn .text {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}

.btn:not([disabled])::before {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 1.25rem;
  height: 2.5rem;
  content: "";
  background: #515159;
  border-radius: 50%;
  opacity: 0;
  transition: 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transform: translate(-50%, -50%);
}

.btn:not([disabled]):hover, .btn:not([disabled]):focus, .btn:not([disabled]):active {
  color: #fff;
  text-decoration: none;
  outline: 0;
}

.btn:not([disabled]):hover::before, .btn:not([disabled]):focus::before, .btn:not([disabled]):active::before {
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin-top: 0;
  margin-left: 0;
  border-radius: 99em;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.btn-floating-white {
  display: block;
  padding: .875rem 1rem;
  cursor: pointer;
  color: #33333b;
  font-size: .875rem;
  line-height: 1.6;
  letter-spacing: .05em;
  border: 0;
  border-radius: 999em;
  box-shadow: 0.25rem 0.25rem 0.625rem rgba(0, 0, 0, 0.3);
}

.btn-outline {
  color: #767676;
  background-color: transparent;
  border: 1px solid #A4A4AC;
}

.btn-outline:not([disabled])::before {
  background: #fff;
}

.btn-outline:not([disabled]):hover, .btn-outline:not([disabled]):focus, .btn-outline:not([disabled]):active {
  color: #767676;
}

.btn-shadow {
  padding: .875rem 1.09375rem;
  border-radius: 1.625rem;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}
.btn-shadow.lines {
  padding: 0.25rem 1.09375rem;
  line-height: 1.4em;
}
@media (min-width: 769px) {
  .btn-shadow.lines {
    padding: 0.875rem 1.09375rem;
  }
}

.btn-white {
  background: #fff;
  color: #33333b;
}

.btn-green {
  background: #DAFF2B;
  color: #33333b;
}

.modal {
  display: none;
}

.modal.is-open {
  display: block;
}

.modal img {
  vertical-align: baseline;
}

.modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 600;
  overflow: auto;
  background: #fff;
}

.modal-close {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 700;
  padding: 1.25rem;
  margin: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}

@media (min-width: 769px) {
  .modal-close {
    padding: 0;
  }
}

.modal-close:focus {
  outline: 0;
}

.modal-dark .modal-overlay,
.modal-white .modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(51, 51, 59, 0.5);
}

.modal-dark .modal-dialog,
.modal-white .modal-dialog {
  position: relative;
  padding: 3.125rem 1.875rem 2.5rem;
  margin: 0 2.25rem;
  border-radius: 4px;
}

.modal-dark .modal-close,
.modal-white .modal-close {
  position: absolute;
  padding: 1.25rem;
}

.modal-white .modal-dialog {
  width: 100%;
  max-width: 25rem;
  background: #fff;
}

.modal-white .modal-delivery-dialog {
  max-width: 38.75rem;
}

.modal-confirm-error .modal-dialog {
  padding: 2.5rem  1.875rem;
  margin: 0 1.25rem;
}

@media (min-width: 769px) {
  .modal-confirm-error .modal-dialog {
    padding: 3.75rem;
  }
}

.modal-confirm-error .modal-has-close {
  padding-top: 3.75rem;
  padding-bottom: 1.875rem;
}

.modal-dark .modal-dialog {
  color: #fff;
  background: #282830;
}

@keyframes animfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes animfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.modal[aria-hidden=false] .modal-overlay {
  animation: animfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.modal[aria-hidden=true] .modal-overlay {
  animation: animfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

/*===============================
=            Choices            =
===============================*/
.choices {
  position: relative;
  margin-bottom: 24px;
  font-size: 16px;
}

.choices:focus {
  outline: none;
}

.choices:last-child {
  margin-bottom: 0;
}

.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
  background-color: #eaeaea;
  cursor: not-allowed;
  user-select: none;
}

.choices.is-disabled .choices__item {
  cursor: not-allowed;
}

.choices [hidden] {
  display: none !important;
}

.choices[data-type*='select-one'] {
  cursor: pointer;
}

.choices[data-type*='select-one'] .choices__inner {
  padding-bottom: 7.5px;
}

.choices[data-type*='select-one'] .choices__input {
  display: block;
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #dddddd;
  background-color: #ffffff;
  margin: 0;
}

.choices[data-type*='select-one'] .choices__button {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
  padding: 0;
  background-size: 8px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -10px;
  margin-right: 25px;
  height: 20px;
  width: 20px;
  border-radius: 10em;
  opacity: 0.5;
}

.choices[data-type*='select-one'] .choices__button:hover, .choices[data-type*='select-one'] .choices__button:focus {
  opacity: 1;
}

.choices[data-type*='select-one'] .choices__button:focus {
  box-shadow: 0px 0px 0px 2px #00bcd4;
}

.choices[data-type*='select-one'] .choices__item[data-value=''] .choices__button {
  display: none;
}

.choices[data-type*='select-one']:after {
  content: '';
  height: 0;
  width: 0;
  border-style: solid;
  border-color: #333333 transparent transparent transparent;
  border-width: 5px;
  position: absolute;
  right: 11.5px;
  top: 50%;
  margin-top: -2.5px;
  pointer-events: none;
}

.choices[data-type*='select-one'].is-open:after {
  border-color: transparent transparent #333333 transparent;
  margin-top: -7.5px;
}

.choices[data-type*='select-one'][dir='rtl']:after {
  left: 11.5px;
  right: auto;
}

.choices[data-type*='select-one'][dir='rtl'] .choices__button {
  right: auto;
  left: 0;
  margin-left: 25px;
  margin-right: 0;
}

.choices[data-type*='select-multiple'] .choices__inner,
.choices[data-type*='text'] .choices__inner {
  cursor: text;
}

.choices[data-type*='select-multiple'] .choices__button,
.choices[data-type*='text'] .choices__button {
  position: relative;
  display: inline-block;
  margin-top: 0;
  margin-right: -4px;
  margin-bottom: 0;
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid #008fa1;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
  background-size: 8px;
  width: 8px;
  line-height: 1;
  opacity: 0.75;
  border-radius: 0;
}

.choices[data-type*='select-multiple'] .choices__button:hover, .choices[data-type*='select-multiple'] .choices__button:focus,
.choices[data-type*='text'] .choices__button:hover,
.choices[data-type*='text'] .choices__button:focus {
  opacity: 1;
}

.choices__inner {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  background-color: #f9f9f9;
  padding: 7.5px 7.5px 3.75px;
  border: 1px solid #dddddd;
  border-radius: 2.5px;
  font-size: 14px;
  min-height: 44px;
  overflow: hidden;
}

.is-focused .choices__inner,
.is-open .choices__inner {
  border-color: #b7b7b7;
}

.is-open .choices__inner {
  border-radius: 2.5px 2.5px 0 0;
}

.is-flipped.is-open .choices__inner {
  border-radius: 0 0 2.5px 2.5px;
}

.choices__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.choices__list--single {
  display: inline-block;
  padding: 4px 16px 4px 4px;
  width: 100%;
}

[dir='rtl'] .choices__list--single {
  padding-right: 4px;
  padding-left: 16px;
}

.choices__list--single .choices__item {
  width: 100%;
}

.choices__list--multiple {
  display: inline;
}

.choices__list--multiple .choices__item {
  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 3.75px;
  margin-bottom: 3.75px;
  background-color: #00bcd4;
  border: 1px solid #00a5bb;
  color: #ffffff;
  word-break: break-all;
  box-sizing: border-box;
}

.choices__list--multiple .choices__item[data-deletable] {
  padding-right: 5px;
}

[dir='rtl'] .choices__list--multiple .choices__item {
  margin-right: 0;
  margin-left: 3.75px;
}

.choices__list--multiple .choices__item.is-highlighted {
  background-color: #00a5bb;
  border: 1px solid #008fa1;
}

.is-disabled .choices__list--multiple .choices__item {
  background-color: #aaaaaa;
  border: 1px solid #919191;
}

.choices__list--dropdown {
  visibility: hidden;
  z-index: 1;
  position: absolute;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  top: 100%;
  margin-top: -1px;
  border-bottom-left-radius: 2.5px;
  border-bottom-right-radius: 2.5px;
  overflow: hidden;
  word-break: break-all;
  will-change: visibility;
}

.choices__list--dropdown.is-active {
  visibility: visible;
}

.is-open .choices__list--dropdown {
  border-color: #b7b7b7;
}

.is-flipped .choices__list--dropdown {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -1px;
  border-radius: 0.25rem 0.25rem 0 0;
}

.choices__list--dropdown .choices__list {
  position: relative;
  max-height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

.choices__list--dropdown .choices__item {
  position: relative;
  padding: 10px;
  font-size: 14px;
}

[dir='rtl'] .choices__list--dropdown .choices__item {
  text-align: right;
}

@media (min-width: 640px) {
  .choices__list--dropdown .choices__item--selectable {
    padding-right: 100px;
  }
  .choices__list--dropdown .choices__item--selectable:after {
    content: attr(data-select-text);
    font-size: 12px;
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  [dir='rtl'] .choices__list--dropdown .choices__item--selectable {
    text-align: right;
    padding-left: 100px;
    padding-right: 10px;
  }
  [dir='rtl'] .choices__list--dropdown .choices__item--selectable:after {
    right: auto;
    left: 10px;
  }
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #f2f2f2;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
  opacity: 0.5;
}

.choices__item {
  cursor: default;
}

.choices__item--selectable {
  cursor: pointer;
}

.choices__item--disabled {
  cursor: not-allowed;
  user-select: none;
  opacity: 0.5;
}

.choices__heading {
  font-weight: 600;
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid #f7f7f7;
  color: gray;
}

.choices__button {
  text-indent: -9999px;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.choices__button:focus {
  outline: none;
}

.choices__input {
  display: inline-block;
  vertical-align: baseline;
  background-color: #f9f9f9;
  font-size: 14px;
  margin-bottom: 5px;
  border: 0;
  border-radius: 0;
  max-width: 100%;
  padding: 4px 0 4px 2px;
}

.choices__input:focus {
  outline: 0;
}

[dir='rtl'] .choices__input {
  padding-right: 2px;
  padding-left: 0;
}

.choices__placeholder {
  opacity: 0.5;
}

/*=====  End of Choices  ======*/
.footer {
  min-height: 100vh;
  padding-top: 3.5rem;
  padding-bottom: 2.25rem;
}

.footer .catch {
  margin-bottom: 2.875rem;
  line-height: 1.1em;
}

@media (min-width: 769px) {
  .footer .col {
    width: 50%;
  }
}

.footer-lead {
  margin-bottom: 1.875rem;
}

@media (min-width: 769px) {
  .footer-lead {
    max-width: 20rem;
    margin-bottom: 3.125rem;
  }
}

.footer-content {
  margin-bottom: 2.5rem;
}

@media (min-width: 769px) {
  .footer-content {
    margin-bottom: 4.125rem;
  }
}

.footer-nav li {
  margin-bottom: 1.25rem;
}

.footer-nav a {
  color: #fff;
}

.slidecontainer {
  width: 100%;
  /* Width of the outside container */
}

/* The slider itself */
.slider {
  box-sizing: border-box;
  width: 100%;
  /* Full-width */
  height: 10px;
  /* Specified height */
  background: #fff;
  /* Grey background */
  border: 1px solid #ddd;
  border-radius: 10px;
  outline: none;
  /* Remove outline */
  appearance: none;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1;
  /* Fully shown on mouse-over */
}

.slider::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  cursor: pointer;
  background: #33333b url(/common/images/slider.svg) center center no-repeat;
  background-size: 24px 24px;
  border: 0;
  border-radius: 50%;
  outline: none;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  appearance: none;
}

.slider::-moz-range-thumb {
  width: 24px;
  /* Set a specific slider handle width */
  height: 24px;
  /* Slider handle height */
  cursor: pointer;
  /* Cursor on hover */
  background: #33333b url(/common/images/slider.svg) center center no-repeat;
  background-size: 24px 24px;
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.flatpickr-calendar {
  position: absolute;
  display: none;
  width: 18rem;
  padding: 1rem 1rem 1rem;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  direction: ltr;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  visibility: hidden;
  background: transparent;
  background: #282830;
  border: 0;
  border-radius: .25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  opacity: 0;
  animation: none;
}

@media (min-width: 321px) {
  .flatpickr-calendar {
    width: 21.375rem;
  }
}

@media (min-width: 376px) {
  .flatpickr-calendar {
    width: 22.125rem;
  }
}

.flatpickr-calendar.arrowTop {
  margin-top: .625rem;
}

.flatpickr-calendar.arrowBottom {
  margin-top: -3.5rem;
}

.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  max-height: 640px;
  visibility: visible;
  opacity: 1;
}

.flatpickr-calendar.open {
  z-index: 99999;
  display: inline-block;
}

.flatpickr-calendar.animate.open {
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.flatpickr-calendar.inline {
  position: relative;
  top: 2px;
  display: block;
}

.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}

.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  box-shadow: none !important;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}

.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}

.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}

.flatpickr-calendar .flatpickr-wrapper {
  position: relative;
  display: inline-block;
}

.flatpickr-months {
  position: relative;
  display: flex;
  margin-bottom: .875rem;
}

.flatpickr-months .flatpickr-month {
  position: relative;
  flex: 1;
  height: 34px;
  line-height: 1;
  color: #fff;
  text-align: center;
  user-select: none;
  background: transparent;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  position: absolute;
  top: 0;
  z-index: 3;
  height: 2rem;
  padding: 0 .625rem;
  line-height: 2rem;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  fill: #fff;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  color: #c4c4c4;
  fill: #c4c4c4;
}

.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  /*
      /*rtl:begin:ignore */
  /*
      */
  left: 0;
  /*
      /*rtl:end:ignore */
  /*
      */
}

/*
      /*rtl:begin:ignore */
/*
      /*rtl:end:ignore */
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  /*
      /*rtl:begin:ignore */
  /*
      */
  right: 0;
  /*
      /*rtl:end:ignore */
  /*
      */
}

/*
      /*rtl:begin:ignore */
/*
      /*rtl:end:ignore */
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}

.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  fill: inherit;
}

.numInputWrapper {
  position: relative;
  height: auto;
}

.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}

.numInputWrapper input {
  width: 100%;
}

.numInputWrapper input::-ms-clear {
  display: none;
}

.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.numInputWrapper span {
  display: none;
}

.numInputWrapper:hover {
  background: rgba(0, 0, 0, 0.05);
}

.numInputWrapper:hover span {
  opacity: 1;
}

.flatpickr-current-month {
  position: absolute;
  left: 12.5%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  width: 75%;
  height: 2rem;
  padding: 0;
  font-size: 1rem;
  font-size: 135%;
  font-weight: 300;
  line-height: inherit;
  line-height: 1;
  color: inherit;
  text-align: center;
  transform: translate3d(0, 0, 0);
}

.flatpickr-current-month span.cur-month {
  display: inline-block;
  height: 2rem;
  padding: 0;
}

.flatpickr-current-month span.cur-month:hover {
  background: rgba(0, 0, 0, 0.05);
}

.flatpickr-current-month .numInputWrapper {
  display: inline-block;
  font-size: 1rem;
}

.flatpickr-current-month .numInputWrapper::after {
  content: "年";
}

.flatpickr-current-month .numInputWrapper span.arrowUp::after {
  border-bottom-color: rgba(0, 0, 0, 0.9);
}

.flatpickr-current-month .numInputWrapper span.arrowDown::after {
  border-top-color: rgba(0, 0, 0, 0.9);
}

.flatpickr-current-month input.cur-year {
  display: inline-block;
  width: 4rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  color: #fff;
  text-align: right;
  cursor: text;
  background: transparent;
  border: 0;
  border-radius: 0;
  appearance: textfield;
}

.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}

.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  pointer-events: none;
  background: transparent;
  opacity: 1;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  position: relative;
  width: auto;
  height: 2rem;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  color: #fff;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: menulist-text;
  appearance: menulist-text;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0, 0, 0, 0.05);
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  padding: 0;
  background-color: transparent;
  outline: none;
}

.flatpickr-weekdays {
  display: flex;
  align-items: center;
  width: 100%;
  height: 28px;
  text-align: center;
  background: transparent;
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: flex;
  flex: 1;
}

.flatpickr-weekday {
  display: block;
  flex: 1;
  width: 1.75rem;
  margin: 0 .3125rem;
  line-height: 1;
  color: #c4c4c4;
  text-align: center;
  cursor: default;
  background: transparent;
}

@media (min-width: 321px) {
  .flatpickr-weekday {
    width: 2.25rem;
  }
}

.dayContainer,
.flatpickr-weeks {
  padding: 0;
}

.dayContainer,
.flatpickr-weekdaycontainer {
  flex: 1 1 auto;
  margin-right: -.375rem;
  margin-left: -.375rem;
}

.flatpickr-days {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.flatpickr-days:focus {
  outline: 0;
}

.dayContainer {
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  padding: 0;
  text-align: left;
  outline: 0;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (min-width: 321px) {
  .dayContainer {
    width: 20.5rem;
  }
}

.dayContainer + .dayContainer {
  box-shadow: -1px 0 0 #e6e6e6;
}

.flatpickr-day {
  position: relative;
  display: inline-block;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: .125rem .3125rem;
  font-weight: 400;
  line-height: calc(1.75rem - 1px);
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: none;
  border-radius: 50%;
}

@media (min-width: 321px) {
  .flatpickr-day {
    width: 2.25rem;
    height: 2.25rem;
    margin: 0 .3125rem;
    line-height: calc(2.25rem - 1px);
  }
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  color: #33333b;
  cursor: pointer;
  background: #fff;
  outline: 0;
}

.flatpickr-day.today {
  color: #fff !important;
  background: #33333b !important;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  color: #fff;
  background: #959ea9;
  border-color: #959ea9;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  color: #33333b;
  background: #fff;
  border-color: #fff;
  box-shadow: none;
}

.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}

.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}

.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}

.flatpickr-day.inRange {
  border-radius: 0;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(196, 196, 196, 0.5);
  cursor: default;
  background: transparent;
  border-color: transparent;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: rgba(196, 196, 196, 0.5);
  cursor: not-allowed;
}

.flatpickr-day.week.selected {
  border-radius: 0;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}

.flatpickr-day.hidden {
  visibility: hidden;
}

.rangeMode .flatpickr-day {
  margin-top: 1px;
}

.flatpickr-weekwrapper {
  float: left;
}

.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  box-shadow: 1px 0 0 #e6e6e6;
}

.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}

.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57, 57, 57, 0.3);
  cursor: default;
  background: transparent;
  border: none;
}

.flatpickr-innerContainer {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.flatpickr-rContainer {
  display: inline-block;
  width: 100%;
  padding: 0;
}

.flatpickr-time {
  display: flex;
  height: 0;
  max-height: 40px;
  overflow: hidden;
  line-height: 40px;
  text-align: center;
  outline: 0;
}

.flatpickr-time::after {
  display: table;
  clear: both;
  content: "";
}

.flatpickr-time .numInputWrapper {
  flex: 1;
  float: left;
  width: 40%;
  height: 40px;
}

.flatpickr-time .numInputWrapper span.arrowUp::after {
  border-bottom-color: #393939;
}

.flatpickr-time .numInputWrapper span.arrowDown::after {
  border-top-color: #393939;
}

.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}

.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}

.flatpickr-time input {
  position: relative;
  height: inherit;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: inherit;
  color: #393939;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  appearance: textfield;
}

.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}

.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}

.flatpickr-time input:focus {
  border: 0;
  outline: 0;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  align-self: center;
  float: left;
  width: 2%;
  height: inherit;
  font-weight: 600;
  line-height: inherit;
  color: #393939;
  user-select: none;
}

.flatpickr-time .flatpickr-am-pm {
  width: 18%;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  outline: 0;
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}

.flatpickr-input {
  height: 3.125rem;
}

.flatpickr-input[readonly] {
  cursor: pointer;
}

@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.loader-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: visible;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

.loader-container.disabled {
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}

.loader {
  color: #00FFEA;
  font-size: 10px;
  margin: 0 auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -.16s;
  animation-delay: -.16s;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  top: 0;
}

.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -.32s;
  animation-delay: -.32s;
}

.loader:after {
  left: 3.5em;
}

@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

.surface-home {
  position: relative;
}

.surface-home ul,
.surface-home ol {
  list-style: none;
}

.surface-home .fullscreen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.surface-home .scene {
  display: none;
}

.surface-home .scene.show {
  display: block;
}

.surface-home .btn {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

.surface-home .btn--black::before {
  background: #26e8ff;
}

.surface-home .btn--white {
  color: #33333b;
  background: #fff;
}

.surface-home .btn--white::before {
  background: #DEF960;
}

.surface-home .btn--white:hover {
  color: #33333b;
}

.surface-home .btn--white:active {
  color: #33333b;
}

.surface-home .btn--white:focus {
  color: #33333b;
}

.surface-home .btn--gray {
  color: #33333b;
  background: #d7d7d7;
}

.surface-home .btn--gray::before {
  background: #DEF960;
}

.surface-home-new {
  position: relative;
  margin-top: -100px;
  overflow-x: hidden;
}

.surface-home-new ul,
.surface-home-new ol {
  list-style: none;
}

.surface-home-new .newyear {
  text-decoration: underline;
}

.surface-home-new .newyear:hover {
  text-decoration: none;
}

.fullscreen {
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100vh;
}

.bg-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  background-image: linear-gradient(133.77deg, #ddd 0%, #ebebeb 97.92%);
  transition: background 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.bg-container::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  content: "";
  background: #d7d7d7;
  opacity: 0;
  transition: 2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.bg-container.bg-scene-init::before, .bg-container.bg-scene-home::before, .bg-container.bg-scene-service::before {
  background: #d7d7d7;
  opacity: 1;
}

.bg-container.bg-scene-flow::before {
  background: #33333b;
  opacity: 1;
}

.bg-container.bg-scene-usecase::before {
  background-color: #33333b;
  opacity: .97;
}

.bg-container .bg-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg-container .bg-home-mask1,
.bg-container .bg-home-mask2 {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 200%;
  opacity: 0;
  transition: 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

@media (min-width: 769px) {
  .bg-container .bg-home-mask1,
  .bg-container .bg-home-mask2 {
    width: 100%;
  }
}

.bg-container .bg-home-mask1 {
  left: -51%;
  width: 123%;
  transform: translateY(-100%);
}

.bg-container .bg-home-mask2 {
  z-index: 10;
  transform: translateY(100%);
}

.bg-container .js-blue {
  transform: scale(1.5) translate(-11%, -2%);
}

.bg-container .js-yellow {
  transform: scale(1.5) translate(-4%, -9%);
}

.bg-container.bg-scene-init .bg-home-mask1,
.bg-container.bg-scene-init .bg-home-mask2, .bg-container.bg-scene-home .bg-home-mask1,
.bg-container.bg-scene-home .bg-home-mask2, .bg-container.bg-scene-service .bg-home-mask1,
.bg-container.bg-scene-service .bg-home-mask2 {
  opacity: 1;
}

.bg-container.bg-scene-init .bg-home-mask1 {
  left: -23%;
  transform: translateY(0);
}

.bg-container.bg-scene-init .bg-home-mask2 {
  transform: translateY(-10%);
}

.bg-container.bg-scene-home .bg-home-mask1 {
  left: -123%;
  transform: translateY(0);
}

@media (min-width: 769px) {
  .bg-container.bg-scene-home .bg-home-mask1 {
    left: -51%;
  }
}

.bg-container.bg-scene-home .bg-home-mask2 {
  left: 100%;
  transform: translateY(20%);
}

@media (min-width: 769px) {
  .bg-container.bg-scene-home .bg-home-mask2 {
    left: 0;
  }
}

@media (max-width: 768.98px) {
  .bg-container.bg-scene-home .art-line {
    z-index: 2;
    width: 275%;
    height: 177%;
    transform: translate(5%, -13%);
  }
  .bg-container.bg-scene-home .art-line--img {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 600%;
    height: 550%;
    transform: translate(-40%, -40%);
  }
}

.bg-container.bg-scene-service .bg-home-mask1 {
  left: -140%;
  width: 300%;
  transform: translateY(-73%);
}

@media (min-width: 769px) {
  .bg-container.bg-scene-service .bg-home-mask1 {
    left: -51%;
    width: 100%;
    transform: translateY(-60%);
  }
}

.bg-container.bg-scene-service .bg-home-mask2 {
  left: -10rem;
  width: 300%;
  transform: translateY(-7%);
}

@media (min-width: 769px) {
  .bg-container.bg-scene-service .bg-home-mask2 {
    left: 0;
    width: 100%;
    transform: translateY(-10%);
  }
}

@media (max-width: 768.98px) {
  .bg-container.bg-scene-service .art-line--img {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 600%;
    height: 550%;
    transform: translate(-40%, -40%);
  }
}

.bg-container .art-line,
.bg-container .art-dot {
  position: absolute;
  margin-top: -9rem;
  transition: 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.bg-container .art-line {
  top: -5%;
  right: -19%;
  width: 100%;
  height: 120%;
}

@media (max-width: 768.98px) {
  .bg-container .art-line {
    top: -1%;
    right: -70%;
    width: 209%;
    height: 130%;
  }
}

.bg-container .art-dot {
  top: 19%;
  right: -19%;
  width: 110%;
  height: 83%;
}

@media (max-width: 768.98px) {
  .bg-container .art-dot {
    top: 20%;
    right: -50%;
    z-index: 2;
    width: 209%;
    height: 130%;
  }
}

.bg-container .bg-mask--dot,
.bg-container .bg-mask--line,
.bg-container .bg-mask--img {
  visibility: hidden;
  opacity: 0;
  transition: 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.bg-container.bg-scene-home .bg-mask--dot,
.bg-container.bg-scene-home .bg-mask--line,
.bg-container.bg-scene-home .bg-mask--img, .bg-container.bg-scene-usecase .bg-mask--dot,
.bg-container.bg-scene-usecase .bg-mask--line,
.bg-container.bg-scene-usecase .bg-mask--img {
  visibility: visible;
  opacity: 1;
  transition-delay: 1s;
}

.bg-container .bg-circle {
  position: absolute;
  top: 100%;
  left: 0;
  width: 37.5rem;
  margin-right: auto;
  margin-left: auto;
  transition: 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

@media (min-width: 769px) {
  .bg-container .bg-circle {
    width: 100%;
  }
}

.bg-container .bg-circle-white {
  opacity: 1;
  transition: 2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.bg-container .bg-circle-black {
  opacity: 0;
  transition: 2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.bg-container.bg-scene-plan .bg-circle {
  top: 50%;
}

.bg-container.bg-scene-flow .bg-circle, .bg-container.bg-scene-usecase .bg-circle {
  top: -18.75rem;
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 769px) {
  .bg-container.bg-scene-flow .bg-circle, .bg-container.bg-scene-usecase .bg-circle {
    top: -50rem;
    width: 85.375rem;
  }
}

.bg-container.bg-scene-flow .bg-circle-white, .bg-container.bg-scene-usecase .bg-circle-white {
  opacity: 0;
}

.bg-container.bg-scene-flow .bg-circle-black, .bg-container.bg-scene-usecase .bg-circle-black {
  opacity: 1;
}

.bg-container.bg-scene-usecase .bg-circle {
  top: -18.75rem;
  left: -18.75rem;
  transform: translateX(0);
}

@media (min-width: 769px) {
  .bg-container.bg-scene-usecase .bg-circle {
    top: -40rem;
    left: -40rem;
    width: 85.375rem;
  }
}

.bg-container.bg-scene-usecase .art-dot,
.bg-container.bg-scene-usecase .art-line {
  z-index: 2;
  opacity: .5;
}

.bg-container.bg-scene-usecase .art-line--img {
  opacity: 1;
}

.bg-container.bg-scene-usecase .art-line {
  top: 0;
  right: -30%;
  z-index: 2;
  width: 130%;
  height: 145%;
  transition-delay: 0s;
}

.bg-container.bg-scene-usecase .art-dot {
  top: 30%;
  right: -10%;
  z-index: 1;
  transition-delay: 0s;
}

@media (max-width: 768.98px) {
  .bg-container.bg-scene-usecase .art-line {
    top: 25%;
    right: -14%;
  }
  .bg-container.bg-scene-usecase .art-dot {
    top: 25%;
    right: -14%;
    width: 130%;
    height: 145%;
  }
}

.bg-container.bg-scene-usecase .usecase2 .art-line {
  top: -12%;
  right: -41%;
}

.bg-container.bg-scene-usecase .usecase2 .art-dot {
  top: 12%;
  right: -36%;
}

@media (max-width: 768.98px) {
  .bg-container.bg-scene-usecase .usecase2 .art-line {
    top: 17%;
    right: 0;
  }
  .bg-container.bg-scene-usecase .usecase2 .art-dot {
    top: 18%;
    right: 4%;
  }
}

.bg-container.bg-scene-usecase .usecase3 .art-line {
  top: -18%;
  right: -26%;
}

.bg-container.bg-scene-usecase .usecase3 .art-dot {
  top: 2%;
  right: -6%;
}

@media (max-width: 768.98px) {
  .bg-container.bg-scene-usecase .usecase3 .art-line {
    top: 28%;
    right: -26%;
  }
  .bg-container.bg-scene-usecase .usecase3 .art-dot {
    top: 34%;
    right: -26%;
  }
}

.bg-container.bg-scene-usecase .usecase4 .art-line {
  top: 4%;
  right: -30%;
}

.bg-container.bg-scene-usecase .usecase4 .art-dot {
  top: 21%;
  right: -16%;
}

@media (max-width: 768.98px) {
  .bg-container.bg-scene-usecase .usecase4 .art-line {
    top: 32%;
    right: -13%;
  }
  .bg-container.bg-scene-usecase .usecase4 .art-dot {
    top: 35%;
    right: -20%;
  }
}

.bg-container.bg-scene-usecase .usecase5 .art-line {
  top: 12%;
  right: -40%;
}

.bg-container.bg-scene-usecase .usecase5 .art-dot {
  top: 52%;
  right: -30%;
}

@media (max-width: 768.98px) {
  .bg-container.bg-scene-usecase .usecase5 .art-dot {
    top: 16%;
    right: -50%;
  }
}

.bg-container.bg-scene-usecase .usecase6 .art-line {
  top: -18%;
  right: -30%;
}

.bg-container.bg-scene-usecase .usecase6 .art-dot {
  top: 12%;
  right: -10%;
}

@media (max-width: 768.98px) {
  .bg-container.bg-scene-usecase .usecase6 .art-line {
    top: 18%;
    right: -20%;
  }
  .bg-container.bg-scene-usecase .usecase6 .art-dot {
    top: 24%;
    right: -20%;
  }
}

.bg-container.bg-scene-usecase #js-blue,
.bg-container.bg-scene-usecase #js-yellow {
  display: none;
}

.bg-container .bg-home-img {
  clip-path: url("#js-bg-mask-clip-path");
  transition: 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

@media (min-width: 769px) {
  .bg-container .bg-home-img-mb {
    display: none;
  }
}

.bg-container-hover .art-line,
.bg-container-hover .art-dot {
  top: -150%;
  right: -94%;
  width: 300%;
  height: 400%;
  transition-delay: 0s;
  transition-timing-function: ease;
  transition-duration: .6s;
}

.bg-container-hover .art-dot {
  opacity: .5;
}

.bg-container-hover .bg-mask--line {
  z-index: 3;
  transition-delay: 0s;
  transition-timing-function: ease;
  transition-duration: .6s;
}

.bg-container-hover .bg-mask .bg-home-mask1 {
  left: -120%;
  transition-delay: 0s;
  transition-timing-function: ease;
  transition-duration: .6s;
}

.bg-container-hover .bg-mask .bg-home-mask2 {
  left: 50%;
  transition-delay: 0s;
  transition-timing-function: ease;
  transition-duration: .6s;
}

.bg-container-hover .bg-home-img {
  width: 55%;
  height: 30%;
  transition-delay: 0s;
  transition-timing-function: ease;
  transition-duration: .6s;
  x: 400;
  y: 600;
}

.bg-container-out .art-line,
.bg-container-out .art-dot,
.bg-container-out .bg-mask--line,
.bg-container-out .bg-home-img {
  transition-delay: 0s;
  transition-timing-function: ease;
  transition-duration: .6s;
}

.bg-container-out .bg-mask .bg-home-mask1,
.bg-container-out .bg-mask .bg-home-mask2 {
  transition-delay: 0s;
  transition-timing-function: ease;
  transition-duration: .6s;
}

.bg-container-new {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  transition: background 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.bg-container-new .bg-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg-container-new .js-blue {
  transform: scale(1.5) translate(-11%, -2%);
}

.bg-container-new .js-yellow {
  transform: scale(1.5) translate(-4%, -9%);
}

.bg-container-new.bg-scene-init .bg-home-mask1 {
  left: -23%;
  transform: translateY(0);
}

.bg-container-new.bg-scene-init .bg-home-mask2 {
  transform: translateY(-10%);
}

.bg-container-new.bg-scene-home .bg-home-mask1,
.bg-container-new.bg-scene-home .bg-home-mask2 {
  opacity: 1;
}

.bg-container-new.bg-scene-home .bg-home-mask1 {
  left: -123%;
  transform: translateY(0);
}

@media (min-width: 769px) {
  .bg-container-new.bg-scene-home .bg-home-mask1 {
    left: -51%;
  }
}

.bg-container-new.bg-scene-home .bg-home-mask2 {
  left: 100%;
  transform: translateY(20%);
}

@media (min-width: 769px) {
  .bg-container-new.bg-scene-home .bg-home-mask2 {
    left: 0;
  }
}

@media (max-width: 768.98px) {
  .bg-container-new.bg-scene-home .art-line {
    z-index: 2;
    width: 275%;
    height: 177%;
    transform: translate(5%, -13%);
  }
  .bg-container-new.bg-scene-home .art-line--img {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    transform: translate(-35%, -20%) scale(1.3);
  }
}

.bg-container-new.bg-scene-home .bg-mask--dot,
.bg-container-new.bg-scene-home .bg-mask--line,
.bg-container-new.bg-scene-home .bg-mask--img {
  visibility: visible;
  opacity: 1;
  transition-delay: 1s;
}

.bg-container-new .art-line,
.bg-container-new .art-dot {
  position: absolute;
  margin-top: -9rem;
  transition: 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.bg-container-new .art-line {
  top: 10%;
  right: -19%;
  width: 100%;
  height: 130%;
}

@media (max-width: 768.98px) {
  .bg-container-new .art-line {
    top: -1%;
    right: -70%;
    width: 209%;
    height: 130%;
  }
}

.bg-container-new .art-dot {
  top: 29%;
  right: -35%;
  width: 120%;
  height: 100%;
}

@media (max-width: 768.98px) {
  .bg-container-new .art-dot {
    top: 20%;
    right: -50%;
    z-index: 2;
    width: 209%;
    height: 130%;
  }
}

.bg-container-new .bg-mask--dot,
.bg-container-new .bg-mask--line,
.bg-container-new .bg-mask--img {
  visibility: hidden;
  opacity: 0;
  transition: 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.bg-container-new .bg-circle {
  position: absolute;
  top: 100%;
  left: 0;
  width: 37.5rem;
  margin-right: auto;
  margin-left: auto;
  transition: 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

@media (min-width: 769px) {
  .bg-container-new .bg-circle {
    width: 100%;
  }
}

.bg-container-new .bg-circle-white {
  opacity: 1;
  transition: 2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.bg-container-new .bg-circle-black {
  opacity: 0;
  transition: 2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.bg-container-new .bg-home-img {
  clip-path: url("#js-bg-mask-clip-path");
  width: 47%;
  height: 55%;
}

@media (min-width: 576px) {
  .bg-container-new .bg-home-img {
    width: 60%;
    height: 60%;
  }
}

@media (min-width: 769px) {
  .bg-container-new .bg-home-img-mb {
    display: none;
  }
}

.bg-container-new .yellow-path {
  transform: translate(600px, 300px) scale(0.33416);
}

@media (min-width: 769px) {
  .bg-container-new .yellow-path {
    transform: translate(30px, -90px) scale(1.0351);
  }
}

.bg-container-new .blue-path {
  transform: translate(250px, 20px) scale(0.5);
}

@media (min-width: 769px) {
  .bg-container-new .blue-path {
    transform: translate(200px, 350px) scale(0.5);
  }
}

.bg-home-mask1 {
  position: absolute;
  z-index: -2;
  width: 68%;
}

.home-metabar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 0 0;
}

@media (min-width: 769px) {
  .home-metabar {
    padding: 2rem 1rem 0;
  }
}

.home-metabar .logo {
  width: 7.875rem;
  background-image: url(/common/images/logo_dark.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.home-metabar .logo::before {
  display: inline-block;
  width: 1.875rem;
  height: 1.875rem;
  margin-right: .875rem;
  vertical-align: sub;
  content: "";
}

.nav-open .home-metabar .auth-btns {
  display: none;
}

.home-metabar .btn-auth {
  display: inline-block;
  padding: .5rem 1.25rem;
  margin: 0;
  line-height: 1;
  color: #33333b;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.3);
  transition: .4s ease;
}

.home-metabar .btn-auth:hover, .home-metabar .btn-auth:focus, .home-metabar .btn-auth:active {
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
}

.home-metabar .btn-auth + .btn-auth {
  position: relative;
}

.home-metabar .btn-auth + .btn-auth::before {
  position: absolute;
  top: .5rem;
  left: 0;
  display: inline-block;
  width: 1px;
  height: 1em;
  content: "";
  background: rgba(51, 51, 59, 0.3);
}

.home-metabar .btn-auth:first-child {
  padding-left: 1.875rem;
  border-radius: 99em 0 0 99em;
}

.home-metabar .btn-auth:last-child {
  padding-right: 1.875rem;
  border-radius: 0 99em 99em 0;
}

.home-metabar .avatar-area {
  position: relative;
}

.home-metabar .avatar .hover {
  opacity: 0;
  transition: .2s ease;
}

.home-metabar .avatar .path {
  transition: .2s ease;
  stroke: #33333b;
}

.home-metabar .avatar .arrow {
  transition: .2s ease;
  fill: #c4c4c4;
}

.home-metabar .avatar .arrow.up {
  opacity: 0;
}

.home-metabar .avatar:hover .hover {
  opacity: 1;
}

.home-metabar .avatar:hover .path {
  stroke: #f3f3f3;
}

.home-metabar .avatar:hover .arrow {
  fill: #f3f3f3;
}

.home-metabar .avatar-dropdown-menu {
  position: absolute;
  top: 100%;
  right: .75rem;
  display: none;
  width: 6.875rem;
  padding: .625rem 0;
  margin-top: .25rem;
  background: #33333b;
  border-radius: .25rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.2);
}

.home-metabar .avatar-dropdown-menu a {
  display: block;
  font-size: .875rem;
  line-height: 2.25rem;
  color: #fff;
  text-align: center;
  transition: .2s ease-in-out;
}

.home-metabar .avatar-dropdown-menu a:hover, .home-metabar .avatar-dropdown-menu a:focus, .home-metabar .avatar-dropdown-menu a:active {
  color: #33333b;
  text-decoration: none;
  background: #fff;
}

.home-metabar .avatar-area.open .up {
  opacity: 1;
}

.home-metabar .avatar-area.open .down {
  opacity: 0;
}

.home-metabar .avatar-area.open .avatar-dropdown-menu {
  display: block;
}

.home-metabar.metabar-scene-flow .btn-auth, .home-metabar.metabar-scene-usecase .btn-auth {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.home-metabar.metabar-scene-flow .btn-auth:hover, .home-metabar.metabar-scene-flow .btn-auth:focus, .home-metabar.metabar-scene-flow .btn-auth:active, .home-metabar.metabar-scene-usecase .btn-auth:hover, .home-metabar.metabar-scene-usecase .btn-auth:focus, .home-metabar.metabar-scene-usecase .btn-auth:active {
  background: rgba(255, 255, 255, 0.3);
}

.home-metabar.metabar-scene-flow .btn-auth + .btn-auth::before, .home-metabar.metabar-scene-usecase .btn-auth + .btn-auth::before {
  background: rgba(255, 255, 255, 0.3);
}

.home-metabar.metabar-scene-flow .logo, .home-metabar.metabar-scene-usecase .logo {
  background-image: url(/common/images/logo_white.svg);
}

.home-metabar.metabar-scene-flow .avatar .hover, .home-metabar.metabar-scene-usecase .avatar .hover {
  fill: #fff;
  fill-opacity: .6;
}

.home-metabar.metabar-scene-flow .avatar .path, .home-metabar.metabar-scene-usecase .avatar .path {
  stroke: #fff;
}

.home-metabar.metabar-scene-flow .avatar .arrow, .home-metabar.metabar-scene-usecase .avatar .arrow {
  fill: #c4c4c4;
}

.home-metabar.metabar-scene-flow .avatar:hover .path, .home-metabar.metabar-scene-usecase .avatar:hover .path {
  stroke: #33333b;
}

.home-metabar.metabar-scene-flow .avatar:hover .arrow, .home-metabar.metabar-scene-usecase .avatar:hover .arrow {
  fill: #33333b;
}

.home-navigation {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 500;
}

.home-navigation a {
  display: flex;
  align-items: center;
  color: #33333b;
  text-decoration: none;
}

.home-navigation .menu-container {
  width: 0;
  max-width: 30rem;
  height: 0;
  padding-top: 1.25rem;
  margin: 0 auto;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

@media (min-width: 769px) {
  .home-navigation .menu-container {
    max-width: none;
    padding-top: 0;
  }
}

.home-navigation .menu-page {
  opacity: 0;
  transition: .4s ease-in-out;
}

@media (min-width: 769px) {
  .home-navigation .menu-page {
    width: 40%;
    min-width: 25rem;
    height: 100vh;
    margin-left: 17%;
  }
}

@media (max-width: 768.98px) {
  .home-navigation .menu-page ul {
    padding-left: 0;
  }
}

.home-navigation .menu-page ul,
.home-navigation .menu-page li {
  width: 100%;
}

.home-navigation .menu-page a {
  height: 2.75rem;
}

@media (min-width: 769px) {
  .home-navigation .menu-page a {
    height: 5rem;
  }
}

.home-navigation .menu-page a::before {
  display: inline-block;
  width: .25rem;
  height: .25rem;
  margin-right: .875rem;
  content: "";
  background: rgba(51, 51, 59, 0);
  border-radius: 50%;
  transition: 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

@media (min-width: 769px) {
  .home-navigation .menu-page a::before {
    width: .5rem;
    height: .5rem;
    margin-right: 2.25rem;
  }
}

.home-navigation .menu-page .active a::before {
  background: #33333b;
}

.home-navigation .menu-page .text-ja {
  margin-left: 1.25rem;
  visibility: hidden;
  opacity: 0;
  transition: 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transform: translateX(-1rem);
}

.home-navigation .menu-auth {
  margin: .5rem 0 1rem;
}

.home-navigation .menu-auth-btns {
  overflow: hidden;
}

.home-navigation .btn-auth {
  display: block;
  flex: 1 1 auto;
  padding: .5rem 0;
  margin: 0;
  line-height: 1;
  color: #33333b;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.3);
}

.home-navigation .btn-auth:active {
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
}

.home-navigation .btn-auth + .btn-auth {
  position: relative;
}

.home-navigation .btn-auth + .btn-auth::before {
  position: absolute;
  top: .5rem;
  left: 0;
  display: inline-block;
  width: 1px;
  height: 1em;
  content: "";
  background: rgba(51, 51, 59, 0.3);
}

.home-navigation .btn-auth:first-child {
  border-radius: 99em 0 0 99em;
}

.home-navigation .btn-auth:last-child {
  border-radius: 0 99em 99em 0;
}

.home-navigation .menu-auth-loggedin .btn-auth {
  padding-right: .875rem;
  padding-left: .875rem;
}

.home-navigation .menu-auth-loggedin .btn-auth:first-child {
  padding-left: 1.25rem;
}

.home-navigation .menu-auth-loggedin .btn-auth:last-child {
  padding-right: 1.25rem;
}

.home-navigation .menu-footer {
  font-size: .875rem;
  letter-spacing: .05em;
  opacity: 0;
  transition: opacity .4s ease-in-out;
}

@media (min-width: 769px) {
  .home-navigation .menu-footer {
    display: flex;
    align-items: center;
    width: 20rem;
    height: 100vh;
    margin-right: 5%;
    font-size: 1rem;
  }
}

.home-navigation .menu-footer .menu-footer-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-right: 1.375rem;
  padding-left: 1.375rem;
}

@media (min-width: 769px) {
  .home-navigation .menu-footer .menu-footer-inner {
    display: block;
    padding: 0;
  }
}

.home-navigation .menu-footer ul {
  margin-bottom: 0;
}

@media (max-width: 768.98px) {
  .home-navigation .menu-footer ul {
    padding-left: 0;
  }
}

.home-navigation .menu-footer a {
  height: 2.25rem;
}

@media (min-width: 769px) {
  .home-navigation .menu-footer a::before {
    display: inline-block;
    width: .25rem;
    height: .25rem;
    margin-right: 1.25rem;
    content: "";
    background: rgba(51, 51, 59, 0);
    border-radius: 50%;
    transition: 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  }
}

.home-navigation .hover {
  color: #37393f;
}

.home-navigation .hover .text-ja {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.home-navigation .menu-page .hover::before {
  margin-right: 3.5rem;
  background: #33333b;
}

.home-navigation .menu-footer .hover::before {
  margin-right: 2rem;
  background: #33333b;
}

.home-navigation .inactive {
  color: #c4c4c4;
}

.home-navigation .inactive::before {
  background: rgba(51, 51, 59, 0) !important;
}

.home-navigation .overlay {
  position: fixed;
  top: -100vh;
  right: -100vw;
  z-index: -1;
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -1.125rem;
  visibility: hidden;
  background: radial-gradient(100% 100% at 50% 50%, #38ffc3 0%, #38ff9f 100%);
  border-radius: 50%;
  opacity: 0;
  transition: 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

@media (min-width: 769px) {
  .home-navigation .overlay {
    top: 50%;
    right: auto;
  }
}

.home-navigation .overlay-alt {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
  background: transparent url(/common/images/menu-bg.svg) no-repeat;
  background-position: calc(50% - 7rem) 50%;
  background-size: 3832px 2535px;
  opacity: 0;
  transition: 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property: opacity, transform;
  transform: scale(0.9);
  transform-origin: right center;
}

@media (min-width: 769px) {
  .home-navigation .overlay-alt {
    background-position: center center;
  }
}

.home-navigation .btn-nav,
.home-navigation .btn-nav--scroll {
  position: fixed;
  top: 1.75rem;
  right: 1rem;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  margin-top: -1.125rem;
  cursor: pointer;
  background: transparent;
  border: 0;
  opacity: 1;
  transition: height .2s, opacity .2s;
}

@media (min-width: 769px) {
  .home-navigation .btn-nav,
  .home-navigation .btn-nav--scroll {
    top: 50%;
    right: auto;
    width: 2.25rem;
    height: 2.25rem;
  }
}

.home-navigation .btn-nav .circle,
.home-navigation .btn-nav--scroll .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: 12.5rem;
  height: 12.5rem;
  margin-top: -6.25rem;
  margin-left: -6.25rem;
  visibility: hidden;
  background-image: url(/common/images/nav-btn-bg.svg);
  background-size: contain;
  opacity: 0;
  transition: 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transform: scale(0.8);
}

@media (min-width: 769px) {
  .home-navigation .btn-nav .circle,
  .home-navigation .btn-nav--scroll .circle {
    display: block;
  }
}

.home-navigation .btn-nav:focus,
.home-navigation .btn-nav--scroll:focus {
  outline: 0;
}

.home-navigation .btn-nav::before, .home-navigation .btn-nav::after,
.home-navigation .btn-nav--scroll::before,
.home-navigation .btn-nav--scroll::after {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  content: "";
  background: #33333b;
  transition: 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transform-origin: left center;
}

.home-navigation .btn-nav::before,
.home-navigation .btn-nav--scroll::before {
  top: .75rem;
}

.home-navigation .btn-nav::after,
.home-navigation .btn-nav--scroll::after {
  top: 1.25rem;
}

@media (min-width: 769px) {
  .home-navigation .btn-nav::after,
  .home-navigation .btn-nav--scroll::after {
    top: 1.5rem;
  }
}

.home-navigation .btn-nav--scroll {
  height: 0;
  opacity: 0;
  transition: height .2s, opacity .2s;
}

.home-navigation .current-screen-position {
  position: fixed;
  right: 0;
  bottom: 2.5rem;
  padding-right: 1rem;
  text-align: right;
}

@media (min-width: 1200px) {
  .home-navigation .current-screen-position {
    right: calc((100vw - 75rem) / 2);
  }
}

.home-navigation .current-screen-position a {
  display: inline-block;
  padding: .375rem;
  line-height: 1;
}

.home-navigation .current-screen-position span {
  display: block;
  width: .5rem;
  height: .5rem;
  background: #c4c4c4;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(51, 51, 59, 0);
  transition: 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.home-navigation .current-screen-position span.active {
  background: #26e8ff;
  box-shadow: 0 0 0 0.5rem rgba(51, 51, 59, 0.05);
}

.home-navigation.open {
  bottom: 0;
  z-index: 500;
}

.home-navigation.open .menu-container {
  display: block;
  width: auto;
  height: auto;
  visibility: visible;
  opacity: 1;
}

@media (min-width: 769px) {
  .home-navigation.open .menu-container {
    display: flex;
  }
}

.home-navigation.open .overlay {
  top: 0;
  right: -100%;
  width: 200vh;
  height: 200vh;
  margin-top: -100vw;
  margin-left: -100vw;
  visibility: visible;
  opacity: 1;
}

@media (min-width: 769px) {
  .home-navigation.open .overlay {
    top: 50%;
    right: auto;
    width: 200vw;
    height: 200vw;
  }
}

.home-navigation.open .overlay-alt {
  visibility: visible;
  opacity: 1;
  transition-delay: .2s;
  transform: scale(1);
}

.home-navigation.open .btn-nav::before {
  top: .35rem;
  left: .35rem;
  margin-top: -3px;
  background: #33333b !important;
  transform: rotate(45deg);
}

@media (min-width: 769px) {
  .home-navigation.open .btn-nav::before {
    top: .3rem;
    left: .3rem;
    margin-top: -1px;
  }
}

.home-navigation.open .btn-nav::after {
  top: 1.5rem;
  left: .35rem;
  background: #33333b !important;
  transform: rotate(-45deg);
}

@media (min-width: 769px) {
  .home-navigation.open .btn-nav::after {
    top: 1.85rem;
    left: .3rem;
  }
}

.home-navigation.open .btn-nav .circle {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.home-navigation.open .current-scene-name,
.home-navigation.open .current-screen-position {
  display: none;
}

.home-navigation.open .menu-page,
.home-navigation.open .menu-footer {
  opacity: 1;
}

.home-navigation.open .menu-page {
  transition-delay: .2s;
}

.home-navigation.open .menu-footer {
  transition-delay: .4s;
}

.home-navigation.nav-scene-flow .btn-nav::before,
.home-navigation.nav-scene-flow .btn-nav::after, .home-navigation.nav-scene-usecase .btn-nav::before,
.home-navigation.nav-scene-usecase .btn-nav::after {
  background: #fff;
}

.home-navigation.nav-scene-flow .current-screen-position span.active, .home-navigation.nav-scene-usecase .current-screen-position span.active {
  box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.05);
}

.home-navigation .auth-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(51, 51, 59, 0.5);
}

.home-navigation .auth-nav-account,
.home-navigation .auth-nav-logout {
  height: 2.5rem;
  line-height: calc(2.5rem - 1px);
  color: #fff;
}

.home-navigation .auth-nav-account {
  padding-left: 1.125rem;
}

.home-navigation .auth-nav-logout {
  position: relative;
  padding: 0 1.25rem;
  text-align: center;
}

.home-navigation .auth-nav-logout::before {
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 0;
  content: "";
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.current-scene-name {
  padding-right: 1rem;
  margin-bottom: 1rem;
  transform: rotate(90deg) translate(0, -160%);
  transform-origin: left top;
}

@media (min-width: 769px) {
  .current-scene-name {
    position: fixed;
    top: 6.875rem;
    padding-right: 0;
    margin-bottom: 0;
    transform: rotate(90deg) translate(0, -100%);
  }
}

.current-scene-name .line {
  display: flex;
  justify-content: space-between;
  width: 4.5rem;
  height: .25rem;
  margin-bottom: .625rem;
  background: #7DE5D4;
}

@media (min-width: 769px) {
  .current-scene-name .line {
    width: 6rem;
    margin-bottom: 1rem;
  }
}

.current-scene-name .line::before, .current-scene-name .line::after {
  display: inline-block;
  width: 1.5rem;
  height: .25rem;
  content: "";
}

@media (min-width: 769px) {
  .current-scene-name .line::before, .current-scene-name .line::after {
    width: 2rem;
  }
}

.current-scene-name .line::before {
  background: #26e8ff;
}

.current-scene-name .line::after {
  background: #DEF960;
}

.current-scene-name span {
  display: none;
}

.current-scene-name .active {
  display: inline-block;
}

.current-screen-position-new {
  position: fixed;
  right: 0;
  bottom: 2.5rem;
  z-index: 5;
  padding-right: 3rem;
  text-align: right;
}

@media (min-width: 1200px) {
  .current-screen-position-new {
    right: calc((100vw - 75rem) / 2);
  }
}

.current-screen-position-new a {
  display: inline-block;
  padding: .375rem;
  line-height: 1;
}

.current-screen-position-new span {
  display: block;
  width: .5rem;
  height: .5rem;
  background: #A4A4AC;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(51, 51, 59, 0);
  transition: 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.current-screen-position-new span.active {
  background: #26e8ff;
  box-shadow: 0 0 0 0.5rem rgba(51, 51, 59, 0.05);
}

.current-scene-name-new {
  z-index: 5;
  padding-right: 1rem;
  margin-bottom: 1rem;
  transform: rotate(90deg) translate(0, -160%);
  transform-origin: left top;
}

@media (min-width: 769px) {
  .current-scene-name-new {
    position: fixed;
    top: 6.875rem;
    padding-right: 0;
    margin-bottom: 0;
    transform: rotate(90deg) translate(0, -100%);
  }
}

.current-scene-name-new .line {
  position: absolute;
  top: -1rem;
  left: 0;
  width: 6rem;
  height: .25rem;
}

.current-scene-name-new span {
  display: none;
}

.current-scene-name-new .active {
  display: inline-block;
}

.top-navigation {
  visibility: visible;
  opacity: 1;
  transition: 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.top-navigation.disabled {
  visibility: hidden;
  opacity: 0;
}

.sm-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  overflow: scroll;
  visibility: hidden;
  background-color: #33333b;
  opacity: 0;
  transition: 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.sm-menu.active {
  visibility: visible;
  opacity: 1;
}

.sm-menu .close {
  position: fixed;
  top: 1rem;
  right: 1rem;
}

.sm-menu .bg-path {
  position: fixed;
  top: -20%;
  left: -70%;
  z-index: -1;
  height: 130%;
}

.sm-menu .menu-sub {
  max-height: 0;
  overflow: hidden;
  transition: 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.sm-menu .menu-sub.active {
  max-height: 100vh;
}

.sm-menu .chev {
  transition: 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transform: rotate(0);
}

.sm-menu .chev.active {
  transform: rotate(-180deg);
}

.scene.home .container-home {
  position: relative;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: calc(100vh - 7rem);
  padding: 0 1rem;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}

@media (min-width: 769px) {
  .scene.home .container-home {
    justify-content: flex-start;
    width: 62rem;
    height: 100vh;
    padding: 0 3.25rem;
  }
}

@media (min-width: 769px) {
  .scene.home .header-home {
    padding-left: 4.25rem;
    margin-left: -3.25rem;
  }
}

.scene.home h1 {
  margin-bottom: 1rem;
  font-size: 3.125rem;
  line-height: 1.1;
  color: #fff;
}

@media (min-width: 769px) {
  .scene.home h1 {
    font-size: 4.375rem;
    color: #33333b;
  }
}

.scene.home h1 span {
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transition-property: opacity, transform;
  transform: translateY(1rem);
}

.scene.home .lead {
  margin-bottom: 1.25rem;
  font-size: .875rem;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transition-property: opacity, transform;
  transform: translateY(1rem);
}

@media (min-width: 769px) {
  .scene.home .lead {
    font-size: 1rem;
    color: #33333b;
  }
}

.scene.home .plan {
  margin-bottom: .625rem;
}

@media (min-width: 769px) {
  .scene.home .plan {
    margin-right: 1.25rem;
    margin-bottom: 0;
  }
}

.scene.home .btn {
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transition-property: opacity, transform;
}

@media (min-width: 769px) {
  .scene.home .btn {
    width: 10rem;
  }
}

.scene.home .btn.plan:hover .text {
  color: #33333b;
}

.scene.home .view-container {
  display: none;
}

@media (min-width: 769px) {
  .scene.home .view-container {
    display: block;
  }
}

.scene.home .view-home {
  position: fixed;
  top: 34%;
  right: 23%;
  width: 7.5rem;
  height: 7.5rem;
}

.scene.home .view-home span {
  position: absolute;
  top: 50%;
  left: 50%;
  user-select: none;
  transform: translate(-50%, -50%);
}

.scene.home .scroll-guide {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 4.5rem;
  margin-left: -2.25rem;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
}

@media (min-width: 769px) {
  .scene.home .scroll-guide {
    position: absolute;
    left: 15%;
    width: 5.875rem;
    margin-left: 0;
  }
}

@media (min-width: 769px) {
  .scene.home .scroll-guide-dots {
    position: absolute;
    bottom: 1.3rem;
    left: 12%;
    width: 9.875rem;
  }
}

.scene.home .js-d-block {
  transition: .6s ease-in-out;
}

.scene.home.active h1 span:nth-child(1), .scene.home.active h1 span:nth-child(2), .scene.home.active h1 span:nth-child(3) {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.scene.home.active h1 span:nth-child(1) {
  transition-delay: 1s;
}

.scene.home.active h1 span:nth-child(2) {
  transition-delay: 1.2s;
}

.scene.home.active h1 span:nth-child(3) {
  transition-delay: 1.4s;
}

.scene.home.active .lead {
  visibility: visible;
  opacity: 1;
  transition-delay: 2s;
  transform: translateY(0);
}

.scene.home.active .btn {
  visibility: visible;
  opacity: 1;
}

.scene.home.active .btn:nth-child(1) {
  transition-delay: 2.2s;
}

.scene.home.active .btn:nth-child(2) {
  transition-delay: 2.4s;
}

.scene.home.active .scroll-guide {
  visibility: visible;
  opacity: 1;
  transition-delay: 3s;
  transform: translateY(1rem);
}

@media (min-width: 769px) {
  .scene.home.active .scroll-guide {
    transform: translateY(0);
  }
}

.hero {
  margin-bottom: 7.5rem;
}

@media (min-width: 769px) {
  .hero {
    margin-bottom: 24.5rem;
  }
}

.hero .container-home {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  padding: 0 1rem;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 769px) {
  .hero .container-home {
    width: 62rem;
    height: 100vh;
    padding: 0 3.25rem;
  }
}

.hero .btn {
  width: 100%;
}

@media (min-width: 769px) {
  .hero .btn {
    width: 18.75rem;
  }
}

.scroll-guide-container {
  transition: .4s ease-in-out;
}

.scroll-guide-container.disabled {
  visibility: hidden;
  opacity: 0;
}

.scroll-guide {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 5;
  width: 4.5rem;
  margin-left: -2.25rem;
  transition: .4s ease-in-out;
}

.scroll-guide.disabled {
  visibility: hidden;
  opacity: 0;
}

@media (min-width: 769px) {
  .scroll-guide {
    left: 15%;
    width: 5.875rem;
    margin-left: 0;
  }
}

@media (min-width: 769px) {
  .scroll-guide-dots {
    bottom: 1.3rem;
    left: 12%;
    width: 9.875rem;
  }
}

.contents .container-home {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 0 1rem;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 769px) {
  .contents .container-home {
    width: 62rem;
    padding: 0 3.25rem;
  }
}

.contents .container-home h2 {
  font-family: "Montserrat", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  font-size: 1.875rem;
  font-weight: 300;
  line-height: 2.0625rem;
  color: #c4c4c4;
}

@media (min-width: 769px) {
  .contents .container-home h2 {
    font-size: 3.125rem;
    line-height: 3.4375rem;
  }
}

.contents .container-home h3 {
  font-family: "Montserrat", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  font-size: 1.875rem;
  font-weight: 300;
  line-height: 2.0625rem;
}

@media (min-width: 769px) {
  .contents .container-home h3 {
    font-size: 2.5rem;
    line-height: 2.75rem;
  }
}

.contents .container-home h4 {
  position: relative;
  padding-bottom: 1.5rem;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: .05em;
}

@media (min-width: 769px) {
  .contents .container-home h4 {
    font-size: 1.875rem;
    line-height: 2.625rem;
  }
}

.contents .container-home h4::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 62px;
  height: 4px;
  content: "";
  background: url(/common/images/title-line2.svg) center center no-repeat;
  background-size: 62px 4px;
  transform: translateX(-50%);
}

.contents .container-home .line {
  width: 3.875rem;
  height: .25rem;
}

@media (min-width: 769px) {
  .contents .container-home .documents {
    max-width: 46.875rem;
    margin: auto;
  }
}

.contents .container-home .switch {
  padding: .1875rem .625rem;
  background-color: #FBA56C;
  border-radius: 50px;
}

@media (min-width: 769px) {
  .contents .container-home .switch {
    transform: translateY(-5px);
  }
}

.contents .container-home .green-switch {
  padding: .1875rem .625rem;
  background-color: #7DE5D4;
  border-radius: 50px;
}

.contents.about {
  padding-bottom: 3.625rem;
}

@media (min-width: 769px) {
  .contents.about {
    padding-bottom: 8.125rem;
  }
}

.contents.about .static-line1 {
  position: absolute;
  top: -50%;
  left: -20%;
  width: 75%;
}

@media (min-width: 769px) {
  .contents.about .static-line1 {
    top: -54%;
    left: 5%;
    width: 36%;
  }
}

.contents.about .static-line2 {
  position: absolute;
  top: 50%;
  right: -50%;
  width: 100%;
  transform: rotate(-45deg);
}

@media (min-width: 769px) {
  .contents.about .static-line2 {
    top: -30%;
    right: -15%;
    width: 55%;
  }
}

.contents.subscription {
  position: relative;
  padding-top: 6.25rem;
  padding-bottom: 10rem;
}

.contents.subscription::before {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: calc(50% - 6.25rem);
  content: "";
  background-color: #ebebeb;
}

@media (min-width: 769px) {
  .contents.subscription::before {
    margin-top: calc(50% - 11.25rem);
  }
}

@media (min-width: 769px) {
  .contents.subscription {
    padding-top: 11.25rem;
    padding-bottom: 9.25rem;
  }
}

.contents.subscription .container-home {
  z-index: 2;
}

.contents.subscription .bg-circle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  padding-top: 100%;
}

.contents.subscription .bg-circle::before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-image: linear-gradient(180deg, rgba(237, 237, 237, 0.05) 0%, #ededed 50.28%);
  border-radius: 50%;
}

@media (min-width: 769px) {
  .contents.subscription .course {
    flex: 1;
    max-width: 18.75rem;
  }
}

.contents.subscription .delivery-label {
  padding: .1875rem .625rem;
  background-color: #d7d7d7;
  border-radius: 50px;
}

.contents.subscription .border-top {
  border-top: 1px solid #d7d7d7;
}

@media (min-width: 769px) {
  .contents.subscription .subscription-desc {
    height: 5.5rem;
  }
}

.contents.flow {
  background-color: #ebebeb;
}

.contents.flow .flow-title {
  z-index: 1;
}

.contents.flow .flow-step .bg {
  top: 0;
  left: -1rem;
  z-index: 1;
}

@media (min-width: 769px) {
  .contents.flow .flow-step .bg {
    left: -1.625rem;
  }
}

.contents.flow .flow-step .illust {
  top: -2.625rem;
  left: 2rem;
  z-index: 1;
  width: 13.125rem;
  height: 13.125rem;
}

@media (min-width: 769px) {
  .contents.flow .flow-step .illust {
    left: 1.375rem;
  }
}

.contents.flow .flow-step .illust-1 {
  transform: rotate(-7.79deg);
}

.contents.flow .flow-step .illust-1,
.contents.flow .flow-step .illust-3 {
  left: 1.375rem;
}

.contents.flow .flow-step .num {
  z-index: 2;
}

.contents.flow .flow-step .desc {
  z-index: 2;
}

@media (min-width: 769px) {
  .contents.flow .flow-step .desc {
    max-width: 12.5rem;
  }
}

.contents.flow .static-line {
  position: absolute;
  top: 28rem;
  left: -50%;
  z-index: 1;
  width: 220%;
}

@media (min-width: 769px) {
  .contents.flow .static-line {
    top: 0;
    right: -1rem;
    left: auto;
    width: 65%;
  }
}

.contents.afteruse {
  background-color: #ebebeb;
}

.contents.afteruse .afteruse-step-container {
  width: calc(100% + 3.75rem);
  transform: translateX(-1.875rem);
}

.contents.afteruse .after-step .illust {
  z-index: 1;
  width: 17.5rem;
  height: 17.5rem;
}

@media (min-width: 769px) {
  .contents.afteruse .after-step .illust {
    left: -26%;
    width: 140%;
    height: auto;
  }
}

.contents.afteruse .after-step .info {
  z-index: 2;
  max-width: 13.125rem;
}

@media (min-width: 769px) {
  .contents.afteruse .after-step .info {
    max-width: 12.5rem;
  }
}

@media (min-width: 769px) {
  .contents.afteruse .after-step .desc {
    max-width: 10.875rem;
  }
}

.contents.mattress-trial {
  background-color: #f5f5f5;
}

@media (min-width: 769px) {
  .contents.mattress-trial .trial-course .trial-doc {
    max-width: 20rem;
  }
}

.contents.mattress-trial .trial-course .trial-img {
  width: 120%;
  transform: translate(-10%, -2rem);
}

@media (min-width: 769px) {
  .contents.mattress-trial .trial-course .trial-img {
    position: relative;
    width: 28.5rem;
    transform: translateY(-3.25rem) translateX(-5rem);
  }
}

.contents.mattress-trial .trial-course .trial-img img {
  width: 100%;
  height: auto;
}

@media (min-width: 769px) {
  .contents.mattress-trial .trial-course .trial-img img {
    position: absolute;
    width: 28.5rem;
  }
}

@media (min-width: 769px) {
  .contents.mattress-trial .trial-desc {
    flex: 1;
    max-width: 18.75rem;
  }
}

@media (min-width: 769px) {
  .contents.mattress-trial .trial-txt {
    height: 9rem;
  }
}

.contents.trial-flow {
  background-color: #f5f5f5;
}

.contents.rental {
  background-color: #f5f5f5;
}

.contents.rental .mattress-rental-img {
  top: calc(20% + .9375rem);
  right: 0;
  width: 50%;
}

.contents.rental .mattress-rental-img-sm {
  top: 0;
  right: 0;
  width: 80%;
  max-width: 23rem;
}

.contents.rental .comforter-rental-img {
  top: calc(20% - 7.8125rem);
  left: 0;
  width: 50%;
}

.contents.rental .comforter-rental-img-sm {
  top: 0;
  right: 0;
  width: 80%;
  max-width: 23rem;
}

@media (min-width: 769px) {
  .contents.rental .rental-doc {
    max-width: 28.125rem;
  }
}

@media (min-width: 769px) {
  .contents.rental.comforter-rental .rental-doc {
    margin-left: 50%;
  }
}

.contents.cleaning {
  background-color: #f5f5f5;
}

.contents.cleaning .cleaning-img {
  width: 17.5rem;
  height: 17.5rem;
  margin: auto;
}

@media (min-width: 769px) {
  .contents .cleaning-content {
    min-width: 12.625rem;
    max-width: 15.625rem;
    margin-right: 3.25rem;
  }
  .contents .cleaning-content:last-child {
    margin-right: 0;
  }
}

.page-home .btn {
  min-width: 15rem;
  height: 3.125rem;
}

@media (min-width: 769px) {
  .page-home .btn {
    min-width: 15.625rem;
  }
}

.page-home .metabar {
  background-color: transparent !important;
}

.page-home .metabar .btn-auth:hover, .page-home .metabar .btn-auth:focus, .page-home .metabar .btn-auth:active {
  background: #33333b;
}

.lp .fixed-area {
  position: fixed;
  bottom: 0;
  width: 100%;
  box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
.lp .scroll-guide {
  bottom: 5.125rem;
}
@media (min-width: 769px) {
  .lp .scroll-guide {
    bottom: 3.625rem;
  }
}
.lp .current-screen-position-new {
  bottom: 6.125rem;
}
@media (min-width: 769px) {
  .lp .current-screen-position-new {
    bottom: 6.625rem;
  }
}
.lp .hero {
  margin-bottom: 0rem;
}
@media (min-width: 769px) {
  .lp .hero {
    margin-bottom: 7.5rem;
  }
}
.lp .about {
  padding-bottom: 0;
}
.lp .subscription {
  padding-bottom: 3rem !important;
}
@media (min-width: 769px) {
  .lp .subscription {
    padding-bottom: 10.125rem !important;
  }
  .lp .subscription::before {
    height: 150%;
  }
}
.lp .subscription .static-line3 {
  position: absolute;
  top: -10%;
  right: -30%;
  height: 90%;
  z-index: -1;
}
@media (min-width: 769px) {
  .lp .subscription .static-line3 {
    top: -10%;
    left: -10%;
    width: 120%;
    height: auto;
  }
}
.lp .mattress-trial {
  background-color: #ebebeb;
}
.lp .mattress-trial .container-home {
  z-index: 2;
}
@media (min-width: 769px) {
  .lp .mattress-trial {
    background-color: transparent;
  }
}
.lp .trial-flow {
  background-color: #ebebeb;
  padding-bottom: 7.875rem !important;
}
@media (min-width: 769px) {
  .lp .trial-flow {
    padding-bottom: 10.125rem !important;
  }
}
.lp .subscription2 {
  overflow: hidden;
  background-color: #f5f5f5;
  padding-top: 3.75rem;
  padding-bottom: 9.125rem;
}
@media (min-width: 769px) {
  .lp .subscription2 {
    padding-top: 5.625rem;
    padding-bottom: 9.625rem;
  }
}
.lp .subscription2 .static-line3 {
  position: absolute;
  top: 0%;
  right: -5%;
  height: 210%;
}
@media (min-width: 769px) {
  .lp .subscription2 .static-line3 {
    top: -10%;
    left: -10%;
    width: 120%;
    height: auto;
  }
}
.lp .trial-label {
  display: inline-block;
  background: linear-gradient(318.07deg, #101372 8.16%, #15399C 84.24%);
  border-radius: 16px;
  padding: 0rem 2rem;
}
@media (min-width: 769px) {
  .lp .trial-label {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}
.lp .user-voice-step {
  position: relative;
}
.lp .user-voice-step .bg {
  z-index: -1;
  top: -3rem;
  left: -4rem;
  width: 22rem;
}
.lp .user-voice-step .desc {
  width: 10rem;
  height: 10rem;
  margin: 2.875rem 2rem;
  display: flex;
  align-items: center;
}
@media (min-width: 769px) {
  .lp .user-voice-step .desc {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}

.scene.service {
  padding-bottom: 2.5rem;
}

@media (min-width: 769px) {
  .scene.service {
    padding: 0 4.25rem;
  }
}

.scene.service .container-service {
  position: relative;
  max-width: 100%;
  padding: 4.5rem 1rem 0;
  margin-right: auto;
  margin-left: auto;
  overflow-x: hidden;
}

@media (min-width: 769px) {
  .scene.service .container-service {
    display: flex;
    flex-direction: column;
    width: 69.5rem;
    height: 100vh;
    overflow: hidden;
  }
}

.scene.service h1 {
  line-height: 1.1;
}

.scene.service h1 span,
.scene.service h1 small {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transform: translateY(1rem);
}

.scene.service .service-contents-inner {
  max-width: 20rem;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 769px) {
  .scene.service .service-contents-inner {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: none;
  }
}

.scene.service .service-col {
  position: relative;
  margin-bottom: 1rem;
}

@media (min-width: 769px) {
  .scene.service .service-col {
    width: 30%;
    max-width: 17.5rem;
    padding-bottom: 2rem;
    margin-bottom: 0;
  }
  .scene.service .service-col + .service-col {
    margin-left: 3.75rem;
  }
}

.scene.service .service-col::before {
  position: absolute;
  top: 3.75rem;
  right: 0;
  bottom: 0;
  width: 12.5rem;
  max-width: 100%;
  visibility: hidden;
  content: "";
  background: transparent no-repeat;
  background-size: contain;
  opacity: 0;
  transition: .6s ease-in-out;
  transition-property: opacity, transform;
  transform: scale(0.95);
}

@media (min-width: 992px) {
  .scene.service .service-col::before {
    right: 1.875rem;
  }
}

.scene.service .col--no1::before {
  background-image: url(/common/images/service-1.png);
}

.scene.service .col--no2::before {
  background-image: url(/common/images/service-2.png);
}

.scene.service .col--no3::before {
  background-image: url(/common/images/service-3.png);
}

.scene.service .service-dots {
  position: absolute;
  top: -2rem;
  right: -3rem;
  opacity: 0;
  transition: .12s ease-in-out;
  transition-property: opacity;
}

@media (max-width: 991.98px) {
  .scene.service .service-dots {
    top: 1rem;
    right: -6rem;
  }
}

.scene.service .no {
  font-size: 3.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.scene.service h2 {
  height: 10rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: .05em;
}

@media (min-width: 769px) {
  .scene.service h2 {
    height: 11.875rem;
  }
}

.scene.service p {
  margin-bottom: .625rem;
}

.scene.service .note {
  font-size: .75rem;
  color: #767676;
}

.scene.service .no,
.scene.service h2,
.scene.service p,
.scene.service .note,
.scene.service .btn-service {
  position: relative;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transform: translateY(1rem);
}

.scene.service .col--no3 .note {
  margin-bottom: 1.25rem;
}

.scene.service .btn-service {
  height: 1.875rem;
  padding-top: .375rem;
  padding-bottom: .375rem;
  line-height: 1;
}

.scene.service .btn-service .text span {
  margin-right: .625rem;
  font-size: .75rem;
}

.scene.service .btn-service img {
  height: .5rem;
  object-fit: contain;
}

.scene.service.active h1 span,
.scene.service.active h1 small {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.scene.service.active h1 span {
  transition-delay: 1s;
}

.scene.service.active h1 small {
  transition-delay: 1.2s;
}

.scene.service.active .service-col::before,
.scene.service.active .no,
.scene.service.active h2,
.scene.service.active p,
.scene.service.active .note,
.scene.service.active .btn-service {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.scene.service.active .service-dots {
  opacity: 1;
}

.scene.service.active .col--no1 .no {
  transition-delay: 1.6s;
}

.scene.service.active .col--no1 h2 {
  transition-delay: 1.8s;
}

.scene.service.active .col--no1::before {
  transition-delay: 2s;
  transform: scale(1);
}

.scene.service.active .col--no1 p {
  transition-delay: 2.2s;
}

.scene.service.active #service-dots-1 {
  transition-delay: 2s;
}

.scene.service.active .col--no2 .no {
  transition-delay: 2s;
}

.scene.service.active .col--no2 h2 {
  transition-delay: 2.2s;
}

.scene.service.active .col--no2::before {
  transition-delay: 2.4s;
  transform: scale(1);
}

.scene.service.active .col--no2 p {
  transition-delay: 2.6s;
}

.scene.service.active #service-dots-2 {
  transition-delay: 2.4s;
}

.scene.service.active .col--no3 .no {
  transition-delay: 2.6s;
}

.scene.service.active .col--no3 h2 {
  transition-delay: 2.8s;
}

.scene.service.active .col--no3::before {
  transition-delay: 3s;
  transform: scale(1);
}

.scene.service.active .col--no3 p {
  transition-delay: 3.2s;
}

.scene.service.active .col--no3 .btn-service {
  transition-delay: 3.4s;
}

.scene.service.active #service-dots-3 {
  transition-delay: 3s;
}

.scene.plan {
  background: url(/common/images/account-bg-t.svg) top right no-repeat;
}

.scene.plan .plan-container {
  padding: 4.5rem 1rem 0;
}

@media (min-width: 769px) {
  .scene.plan .plan-container {
    display: flex;
    align-items: center;
    height: 100vh;
  }
}

@media (min-width: 769px) {
  .scene.plan .header-plan {
    width: 5.5rem;
    margin-top: -4rem;
    margin-left: 4rem;
  }
}

@media (min-width: 992px) {
  .scene.plan .header-plan {
    margin-right: 2rem;
    margin-left: 6rem;
  }
}

.scene.plan h1 {
  line-height: 1.1;
}

.scene.plan h1 span,
.scene.plan h1 small {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transform: translateY(1rem);
}

.scene.plan .plan-select {
  max-width: 30rem;
  padding-left: 3.5rem;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 769px) {
  .scene.plan .plan-select {
    width: 10.25rem;
    max-width: none;
    padding-left: 0;
    margin-left: 1.5rem;
  }
}

@media (min-width: 992px) {
  .scene.plan .plan-select {
    margin-left: 3.5rem;
  }
}

.scene.plan .plan-select p,
.scene.plan .plan-select .btn {
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transition-property: opacity, transform;
  transform: translateY(1rem);
}

@media (max-width: 768.98px) {
  .scene.plan .plan-select p {
    text-align: right;
  }
  .scene.plan .plan-select .btn {
    width: 100%;
  }
}

.scene.plan .plan-contents {
  position: relative;
  max-width: 30rem;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 769px) {
  .scene.plan .plan-contents {
    display: flex;
    max-width: none;
  }
}

.scene.plan .plan-contents h2 {
  position: absolute;
  top: 15rem;
  left: 50%;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transition-property: opacity, transform;
  transform: translate(-50%, 1rem);
}

@media (min-width: 992px) {
  .scene.plan .plan-contents h2 {
    top: 53%;
  }
}

@media (min-width: 1200px) {
  .scene.plan .plan-contents h2 {
    top: 22rem;
  }
}

.scene.plan .plan-contents h3 {
  margin-bottom: .25rem;
  font-size: 1rem;
  line-height: 1;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transform: translateY(1rem);
}

@media (min-width: 769px) {
  .scene.plan .plan-contents h3 {
    margin-bottom: 1.25rem;
    font-size: 2.5rem;
    color: rgba(164, 164, 172, 0.5);
  }
}

@media (min-width: 992px) {
  .scene.plan .plan-contents h3 {
    font-size: 3.125rem;
  }
}

.scene.plan .plan-contents p {
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transition-property: opacity, transform;
  transform: translateY(1rem);
}

@media (min-width: 769px) {
  .scene.plan .plan-contents p {
    height: auto;
    padding: 0 1rem;
  }
}

@media (min-width: 769px) {
  .scene.plan .plan-col {
    width: 50%;
  }
}

@media (min-width: 769px) {
  .scene.plan .plan-col p {
    width: 94%;
    margin-right: auto;
    margin-left: auto;
  }
}

.scene.plan .plan-selection {
  position: absolute;
  top: -3rem;
  right: -.5rem;
  width: 65%;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transition-property: opacity, transform;
  transform: scale(0.95);
}

@media (min-width: 769px) {
  .scene.plan .plan-selection {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
  }
}

.scene.plan .plan-selection-bg {
  width: 100%;
  max-width: 23.75rem;
}

.scene.plan .plan-controls {
  display: flex;
  width: 40%;
  padding-top: 25%;
  margin-bottom: 1rem;
}

@media (min-width: 769px) {
  .scene.plan .plan-controls {
    display: block;
    width: 100%;
    padding-top: 0;
    margin-bottom: 0;
  }
}

.scene.plan .plan-controls label {
  position: relative;
  width: 2.5rem;
  padding: .5rem;
  margin: 0;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transition-property: opacity, transform;
  transform: translateY(1rem);
}

@media (min-width: 769px) {
  .scene.plan .plan-controls label {
    width: 4rem;
    padding: .75rem .5rem;
    margin: 0;
  }
}

@media (min-width: 1200px) {
  .scene.plan .plan-controls label {
    width: 5rem;
    padding: .9375rem;
    margin: 0 .375rem;
  }
}

.scene.plan .plan-controls label input + span {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2.5rem;
  content: "";
  border: 2px dashed transparent;
  border-radius: 50%;
  transition: border .2s ease-in-out;
  animation: spin 40s infinite linear;
}

@media (min-width: 769px) {
  .scene.plan .plan-controls label input + span {
    width: 4rem;
    height: 4rem;
  }
}

@media (min-width: 1200px) {
  .scene.plan .plan-controls label input + span {
    width: 5rem;
    height: 5rem;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.scene.plan .plan-controls label input:checked + span {
  border-color: #fff;
}

.scene.plan .plan-radio {
  display: none;
}

.scene.plan .plan-control-radio {
  display: inline-block;
  width: 1.5rem;
  margin-bottom: 1.125rem;
}

@media (min-width: 769px) {
  .scene.plan .plan-control-radio {
    width: 2.5rem;
  }
}

@media (min-width: 1200px) {
  .scene.plan .plan-control-radio {
    width: 3.125rem;
  }
}

.scene.plan .plan-selection-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.scene.plan .plan-selection-text {
  position: absolute;
  top: 75%;
  left: 50%;
  display: none;
  width: 3.75rem;
  margin-left: -1.875rem;
  font-family: "Montserrat", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.1;
  color: rgba(196, 196, 196, 0.5);
  text-align: center;
}

@media (min-width: 769px) {
  .scene.plan .plan-selection-text {
    top: 63%;
    right: 18%;
    left: auto;
    width: auto;
    margin-left: 0;
    font-size: 1.75rem;
  }
}

@media (min-width: 1200px) {
  .scene.plan .plan-selection-text {
    font-size: 1.875rem;
  }
}

.scene.plan .red .plan-selection-text--basic,
.scene.plan .yellow .plan-selection-text--basic {
  display: block;
}

.scene.plan .blue .plan-selection-text--hard {
  display: block;
}

.scene.plan .plan-selection-img--red,
.scene.plan .plan-selection-img--yellow,
.scene.plan .plan-selection-img--blue {
  visibility: hidden;
  filter: brightness(500%);
  opacity: 0;
}

.scene.plan .red .plan-selection-img--red,
.scene.plan .yellow .plan-selection-img--yellow,
.scene.plan .blue .plan-selection-img--blue {
  visibility: visible;
  filter: brightness(100%);
  opacity: 1;
  transition: 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.scene.plan .btn {
  width: 10rem;
}

.scene.plan .btn .text {
  transition: .4s ease;
}

.scene.plan .btn:hover .text {
  color: #33333b;
}

.scene.plan .btn-group {
  position: relative;
  margin-bottom: 1.375rem;
  opacity: 0;
  transition: .6s ease-in-out;
  transition-property: opacity, transform;
  transform: translateY(1rem);
}

.scene.plan .btn-group::after {
  position: absolute;
  top: .5rem;
  left: 50%;
  display: block;
  width: 1px;
  height: .875rem;
  content: "";
  background: rgba(51, 51, 59, 0.3);
}

.scene.plan .btn-toggle {
  width: 50%;
  height: 1.875rem;
  padding: .5rem;
  font-size: .875rem;
  line-height: 1;
  color: #c4c4c4;
  background: rgba(255, 255, 255, 0.5);
  border: 0;
}

.scene.plan .btn-toggle.active {
  color: #33333b;
}

.scene.plan .btn-toggle:first-child {
  border-radius: 99em 0 0 99em;
}

.scene.plan .btn-toggle:last-child {
  border-radius: 0 99em 99em 0;
}

.scene.plan.active h1 span,
.scene.plan.active h1 small {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.scene.plan.active h1 span {
  transition-delay: 1s;
}

.scene.plan.active h1 small {
  transition-delay: 1.2s;
}

.scene.plan.active h2 {
  visibility: visible;
  opacity: 1;
  transition-delay: 1.4s;
  transform: translate(-50%, 0);
}

.scene.plan.active h3,
.scene.plan.active .plan-controls label,
.scene.plan.active .plan-contents p,
.scene.plan.active .btn-group {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.scene.plan.active .plan-selection {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.scene.plan.active .plan-mat h3 {
  transition-delay: 1.6s;
}

.scene.plan.active .plan-mat .plan-selection {
  transition-delay: 1.8s;
}

.scene.plan.active .plan-mat label {
  transition-delay: 2s;
}

.scene.plan.active .plan-mat p {
  transition-delay: 2.2s;
}

.scene.plan.active .plan-comf h3 {
  transition-delay: 2s;
}

.scene.plan.active .plan-comf .plan-selection {
  transition-delay: 2.2s;
}

.scene.plan.active .plan-comf .plan-controls label {
  transition-delay: 2.4s;
}

.scene.plan.active .plan-comf p {
  transition-delay: 2.6s;
}

.scene.plan.active .btn-group {
  transition-delay: 2.4s;
}

.scene.plan.active .plan-select p,
.scene.plan.active .plan-select .btn {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.scene.plan.active .plan-select p {
  transition-delay: 2.8s;
}

.scene.plan.active .plan-select .btn {
  transition-delay: 3s;
}

@media (max-width: 768.98px) {
  .scene.plan .current-scene-name {
    transform: rotate(90deg) translate(-70%, -160%);
  }
}

.scene.flow {
  overflow-x: hidden;
}

@media (min-width: 769px) {
  .scene.flow {
    padding-right: 4.25rem;
    padding-left: 4.25rem;
  }
}

@media (min-width: 769px) {
  .scene.flow {
    overflow: hidden;
  }
}

.scene.flow::before, .scene.flow::after {
  position: absolute;
  left: 50%;
  display: block;
  content: "";
  background: transparent no-repeat;
  opacity: 0;
  transition: .6s ease-in-out;
  transform: translateX(-50%);
}

.scene.flow::before {
  top: 0;
  width: 20rem;
  height: 9.325rem;
  background-image: url(/common/images/flow-bg-t.svg);
  background-position: top center;
  background-size: 26rem;
}

@media (min-width: 769px) {
  .scene.flow::before {
    width: 43.25rem;
    height: 21.125rem;
    background-size: 43.25rem;
  }
}

.scene.flow::after {
  bottom: 0;
  width: 20rem;
  height: 6.625rem;
  background-image: url(/common/images/flow-bg-b.svg);
  background-position: bottom center;
  background-size: 26rem;
}

@media (min-width: 769px) {
  .scene.flow::after {
    width: 43.25rem;
    height: 16.375rem;
    background-size: 43.25rem;
  }
}

.scene.flow .flow-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 30rem;
  min-height: 100vh;
  padding: 4.5rem 1rem 0;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}

@media (min-width: 769px) {
  .scene.flow .flow-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 62rem;
    max-width: 100%;
    height: 100vh;
    padding: 0 3.25rem;
    overflow: initial;
  }
}

.scene.flow .header-flow {
  height: 4.5rem;
  margin-bottom: 2rem;
  line-height: 1.1;
}

@media (min-width: 769px) {
  .scene.flow .header-flow {
    margin-top: 4.5rem;
    margin-bottom: 0;
  }
}

.scene.flow .header-flow h1 span,
.scene.flow .header-flow h1 small {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transform: translateY(1rem);
}

.scene.flow .flow-contents {
  padding: 0;
}

@media (min-width: 769px) {
  .scene.flow .flow-contents {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.scene.flow .link-container {
  height: 4.5rem;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transform: translateY(1rem);
}

@media (min-width: 769px) {
  .scene.flow .link-container {
    height: 8.5rem;
    padding-top: 2rem;
  }
}

.scene.flow .link-container .btn {
  width: 10rem;
  background: #282830;
  box-shadow: 0 0.25rem 2.5rem rgba(210, 210, 210, 0.2);
}

.scene.flow .link-container .btn::before {
  background: #33333b;
}

.scene.flow .no {
  font-family: "Montserrat", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transform: translateY(1rem);
}

@media (min-width: 769px) {
  .scene.flow .no {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 10.75rem;
    margin-bottom: 1.5rem;
    font-size: 3.75rem;
  }
}

.scene.flow .flow-term {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transform: translateY(-1rem);
}

@media (min-width: 769px) {
  .scene.flow .flow-term {
    align-items: flex-end;
    padding-bottom: .5rem;
    margin-top: 1.5rem;
  }
}

.scene.flow .flow-content {
  width: 7.5rem;
  height: 7.5rem;
  visibility: hidden;
  background: url(/common/images/flow-bg.svg) center center no-repeat;
  background-size: contain;
  opacity: 0;
  transition: .6s ease-in-out;
  transition-property: opacity, transform;
  transform: scale(0.95);
}

@media (min-width: 992px) {
  .scene.flow .flow-content {
    width: 9.75rem;
    height: 9.75rem;
  }
}

.scene.flow .flow-col {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

@media (min-width: 769px) {
  .scene.flow .flow-col {
    display: block;
    margin-bottom: 0;
  }
}

.scene.flow .bg-line {
  position: absolute;
  height: 1.875rem;
  margin-left: -1.875rem;
  overflow: hidden;
}

@media (max-width: 768.98px) {
  .scene.flow .bg-line {
    top: 9rem;
    left: 40%;
    transform: rotate(90deg);
    transform-origin: top left;
  }
}

.scene.flow .bg-line .circle {
  position: absolute;
  width: 1.875rem;
  height: 1.875rem;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transform: scale(0.9);
}

.scene.flow .bg-line .line-container {
  width: 0;
  overflow: hidden;
  transition: opacity 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.scene.flow .bg-line .line {
  margin-left: 1.875rem;
}

.scene.flow.active::before, .scene.flow.active::after {
  opacity: 1;
}

.scene.flow.active h1 span,
.scene.flow.active h1 small {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.scene.flow.active h1 span {
  transition-delay: 1s;
}

.scene.flow.active h1 small {
  transition-delay: 1.2s;
}

.scene.flow.active .circle {
  visibility: visible;
  opacity: 1;
  transition-delay: 1.4s;
  transform: scale(1);
}

.scene.flow.active .line-container {
  width: 300vh;
  transition: opacity 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86), width 1.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-delay: 1.6s;
}

@media (min-width: 769px) {
  .scene.flow.active .line-container {
    width: 100vw;
  }
}

.scene.flow.active .no,
.scene.flow.active .flow-term,
.scene.flow.active .flow-content {
  visibility: visible;
  opacity: 1;
  transition-delay: 1.8s;
}

.scene.flow.active .no {
  transform: translateY(0);
}

.scene.flow.active .flow-term {
  transform: translateY(0);
}

.scene.flow.active .flow-content {
  transform: scale(1);
}

.scene.flow.active .flow-col:nth-child(1) .no {
  transition-delay: 1.8s;
}

.scene.flow.active .flow-col:nth-child(1) .flow-term {
  transition-delay: 2s;
}

.scene.flow.active .flow-col:nth-child(1) .flow-content {
  transition-delay: 2.2s;
}

.scene.flow.active .flow-col:nth-child(2) .no {
  transition-delay: 2s;
}

.scene.flow.active .flow-col:nth-child(2) .flow-term {
  transition-delay: 2.2s;
}

.scene.flow.active .flow-col:nth-child(2) .flow-content {
  transition-delay: 2.4s;
}

.scene.flow.active .flow-col:nth-child(3) .no {
  transition-delay: 2.2s;
}

.scene.flow.active .flow-col:nth-child(3) .flow-term {
  transition-delay: 2.4s;
}

.scene.flow.active .flow-col:nth-child(3) .flow-content {
  transition-delay: 2.6s;
}

.scene.flow.active .flow-col:nth-child(4) .no {
  transition-delay: 2.4s;
}

.scene.flow.active .flow-col:nth-child(4) .flow-term {
  transition-delay: 2.6s;
}

.scene.flow.active .flow-col:nth-child(4) .flow-content {
  transition-delay: 2.8s;
}

.scene.flow.active .flow-col:nth-child(5) .no {
  transition-delay: 2.6s;
}

.scene.flow.active .flow-col:nth-child(5) .flow-term {
  transition-delay: 2.8s;
}

.scene.flow.active .flow-col:nth-child(5) .flow-content {
  transition-delay: 3s;
}

.scene.flow.active .link-container {
  visibility: visible;
  opacity: 1;
  transition-delay: 3.2s;
  transform: translateY(0);
}

@media (max-width: 768.98px) {
  .scene.flow .current-scene-name {
    position: absolute;
    transform: rotate(90deg) translate(-100%, -160%);
  }
}

.scene.usecase .usecase-container {
  padding: 4.5rem 1rem 0;
}

@media (min-width: 769px) {
  .scene.usecase .usecase-container {
    display: flex;
    align-items: center;
    height: 100vh;
  }
}

.scene.usecase .header-usecase {
  margin-bottom: 2rem;
}

@media (min-width: 769px) {
  .scene.usecase .header-usecase {
    width: 17rem;
    margin: -4rem 2rem 0 6rem;
  }
}

.scene.usecase h1 {
  line-height: 1.1;
}

.scene.usecase h1 span,
.scene.usecase h1 small {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transform: translateY(1rem);
}

.scene.usecase .usecase-contents {
  padding-left: 0;
}

.scene.usecase .usecase-content {
  font-size: .875rem;
}

@media (min-width: 769px) {
  .scene.usecase .usecase-content {
    font-size: 1rem;
  }
}

.scene.usecase .usecase-col {
  max-width: 28.125rem;
  visibility: hidden;
  opacity: 0;
  transition: .6s ease-in-out;
  transform: translateY(1rem);
}

.scene.usecase .usecase-col > span {
  line-height: 2.5rem;
  cursor: url(/common/images/circle-md.svg) 40 40, auto;
  transition: .2s ease-in-out;
}

@media (min-width: 769px) {
  .scene.usecase .usecase-col > span {
    line-height: 4.375rem;
  }
}

.scene.usecase .usecase-col > span:hover, .scene.usecase .usecase-col > span:active, .scene.usecase .usecase-col > span:focus {
  color: #7DE5D4;
}

.scene.usecase .no {
  width: 1.875rem;
}

@media (min-width: 769px) {
  .scene.usecase .no {
    width: 3.125rem;
  }
}

.scene.usecase.active h1 span,
.scene.usecase.active h1 small {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.scene.usecase.active h1 span {
  transition-delay: 1s;
}

.scene.usecase.active h1 small {
  transition-delay: 1.2s;
}

.scene.usecase.active .usecase-col {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.scene.usecase.active .no1 {
  transition-delay: 1.4s;
}

.scene.usecase.active .no2 {
  transition-delay: 1.6s;
}

.scene.usecase.active .no3 {
  transition-delay: 1.8s;
}

.scene.usecase.active .no4 {
  transition-delay: 2s;
}

.scene.usecase.active .no5 {
  transition-delay: 2.2s;
}

.scene.usecase.active .no6 {
  transition-delay: 2.4s;
}

@media (max-width: 768.98px) {
  .scene.usecase {
    min-height: 100vh;
  }
  .scene.usecase .current-scene-name {
    position: fixed;
    bottom: 2rem;
  }
}

.metabar,
.metabar--scroll {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 3.125rem;
  opacity: 1;
  transition: height .2s, opacity .2s;
}

@media (min-width: 769px) {
  .metabar,
  .metabar--scroll {
    height: 6.25rem;
  }
}

.metabar .logo,
.metabar--scroll .logo {
  display: block;
  width: 11.625rem;
  height: 2.375rem;
  background-image: url(/common/images/header-logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.metabar .logo::before,
.metabar--scroll .logo::before {
  display: inline-block;
  width: 1.875rem;
  height: 1.875rem;
  margin-right: .875rem;
  vertical-align: sub;
  content: "";
}

.metabar .btn-login,
.metabar--scroll .btn-login {
  padding: .5rem 1.875rem;
}

@media (max-width: 768.98px) {
  .metabar .btn-login,
  .metabar--scroll .btn-login {
    padding: 0;
    color: #33333b !important;
    background: transparent;
    border: 0;
  }
  .metabar .btn-login::before,
  .metabar--scroll .btn-login::before {
    display: none !important;
  }
}

.metabar .btn-auth,
.metabar--scroll .btn-auth {
  padding: .5rem 1.25rem;
  margin: 0;
  line-height: 1;
  color: #33333b;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.5);
  transition: .4s ease;
}

.metabar .btn-auth:hover, .metabar .btn-auth:focus, .metabar .btn-auth:active,
.metabar--scroll .btn-auth:hover,
.metabar--scroll .btn-auth:focus,
.metabar--scroll .btn-auth:active {
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
}

.metabar .btn-auth + .btn-auth,
.metabar--scroll .btn-auth + .btn-auth {
  position: relative;
}

.metabar .btn-auth + .btn-auth::before,
.metabar--scroll .btn-auth + .btn-auth::before {
  position: absolute;
  top: .5rem;
  left: 0;
  display: inline-block;
  width: 1px;
  height: 1em;
  content: "";
  background: rgba(51, 51, 59, 0.3);
}

.metabar .btn-auth:first-child,
.metabar--scroll .btn-auth:first-child {
  padding-left: 1.875rem;
  border-radius: 99em 0 0 99em;
}

.metabar .btn-auth:last-child,
.metabar--scroll .btn-auth:last-child {
  padding-right: 1.875rem;
  border-radius: 0 99em 99em 0;
}

.metabar.metabar-scene-flow .btn-auth, .metabar.metabar-scene-usecase .btn-auth,
.metabar--scroll.metabar-scene-flow .btn-auth,
.metabar--scroll.metabar-scene-usecase .btn-auth {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.metabar.metabar-scene-flow .btn-auth:hover, .metabar.metabar-scene-flow .btn-auth:focus, .metabar.metabar-scene-flow .btn-auth:active, .metabar.metabar-scene-usecase .btn-auth:hover, .metabar.metabar-scene-usecase .btn-auth:focus, .metabar.metabar-scene-usecase .btn-auth:active,
.metabar--scroll.metabar-scene-flow .btn-auth:hover,
.metabar--scroll.metabar-scene-flow .btn-auth:focus,
.metabar--scroll.metabar-scene-flow .btn-auth:active,
.metabar--scroll.metabar-scene-usecase .btn-auth:hover,
.metabar--scroll.metabar-scene-usecase .btn-auth:focus,
.metabar--scroll.metabar-scene-usecase .btn-auth:active {
  background: rgba(255, 255, 255, 0.3);
}

.metabar.metabar-scene-flow .btn-auth + .btn-auth::before, .metabar.metabar-scene-usecase .btn-auth + .btn-auth::before,
.metabar--scroll.metabar-scene-flow .btn-auth + .btn-auth::before,
.metabar--scroll.metabar-scene-usecase .btn-auth + .btn-auth::before {
  background: rgba(255, 255, 255, 0.3);
}

.metabar .metabar-page-divider,
.metabar--scroll .metabar-page-divider {
  display: inline-block;
  height: .75rem;
  margin-right: 1rem;
  margin-left: 1rem;
  vertical-align: baseline;
  content: "";
  border-left: 1px solid #ddd;
}

@media (min-width: 769px) {
  .metabar .metabar-page-divider,
  .metabar--scroll .metabar-page-divider {
    height: .875rem;
    margin-right: 1.875rem;
    margin-left: 1.875rem;
  }
}

.metabar .avatar-area,
.metabar--scroll .avatar-area {
  position: relative;
}

.metabar .avatar:hover,
.metabar--scroll .avatar:hover {
  text-decoration: none;
}

.metabar .avatar .hover,
.metabar--scroll .avatar .hover {
  opacity: 0;
  transition: .2s ease;
}

.metabar .avatar .path,
.metabar--scroll .avatar .path {
  transition: .2s ease;
  stroke: #33333b;
}

.metabar .avatar .arrow,
.metabar--scroll .avatar .arrow {
  fill: #c4c4c4;
}

.metabar .avatar .arrow.up,
.metabar--scroll .avatar .arrow.up {
  opacity: 0;
}

.metabar .avatar:hover .hover,
.metabar--scroll .avatar:hover .hover {
  opacity: 1;
}

.metabar .avatar:hover .path,
.metabar--scroll .avatar:hover .path {
  stroke: #f3f3f3;
}

.metabar .avatar:hover .arrow,
.metabar--scroll .avatar:hover .arrow {
  fill: #f3f3f3;
}

.metabar .avatar-dropdown-menu,
.metabar--scroll .avatar-dropdown-menu {
  position: absolute;
  top: 100%;
  right: .75rem;
  display: none;
  width: 6.875rem;
  padding: .625rem 0;
  margin-top: .25rem;
  background: #33333b;
  border-radius: .25rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.2);
}

.metabar .avatar-dropdown-menu a,
.metabar--scroll .avatar-dropdown-menu a {
  display: block;
  font-size: .875rem;
  line-height: 2.25rem;
  color: #fff;
  text-align: center;
  transition: .2s ease-in-out;
}

.metabar .avatar-dropdown-menu a:hover, .metabar .avatar-dropdown-menu a:focus, .metabar .avatar-dropdown-menu a:active,
.metabar--scroll .avatar-dropdown-menu a:hover,
.metabar--scroll .avatar-dropdown-menu a:focus,
.metabar--scroll .avatar-dropdown-menu a:active {
  color: #33333b;
  text-decoration: none;
  background: #fff;
}

.metabar .avatar-area.open .avatar .up,
.metabar--scroll .avatar-area.open .avatar .up {
  opacity: 1;
}

.metabar .avatar-area.open .avatar .down,
.metabar--scroll .avatar-area.open .avatar .down {
  opacity: 0;
}

.metabar .avatar-area.open .avatar-dropdown-menu,
.metabar--scroll .avatar-area.open .avatar-dropdown-menu {
  display: block;
}

.metabar .metabar-accordion,
.metabar--scroll .metabar-accordion {
  cursor: pointer;
}

.metabar .metabar-accordion-inner,
.metabar--scroll .metabar-accordion-inner {
  position: absolute;
  top: 2.5rem;
  right: 0;
  width: max-content;
  background: #33333b;
  padding-top: .5rem;
  padding-bottom: .5rem;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.metabar .metabar-accordion-inner a,
.metabar--scroll .metabar-accordion-inner a {
  display: block;
  font-size: .875rem;
  color: #fff;
  text-align: center;
  transition: .2s ease-in-out;
}

.metabar .metabar-accordion-inner a:hover, .metabar .metabar-accordion-inner a:focus, .metabar .metabar-accordion-inner a:active,
.metabar--scroll .metabar-accordion-inner a:hover,
.metabar--scroll .metabar-accordion-inner a:focus,
.metabar--scroll .metabar-accordion-inner a:active {
  color: #33333b !important;
  text-decoration: none;
  background: #fff;
}

.metabar .metabar-accordion-content,
.metabar--scroll .metabar-accordion-content {
  display: block;
  padding: .5rem 1.25rem;
  text-decoration: none;
  z-index: 100 !important;
}

.metabar .cart-area,
.metabar--scroll .cart-area {
  cursor: pointer;
}

.metabar .cart-area-num,
.metabar--scroll .cart-area-num {
  position: absolute;
  top: -.5rem;
  right: -.5rem;
  padding: .125rem .5rem;
  background: #FBA56C;
  border-radius: 9999px;
}

.metabar--scroll {
  height: 0;
  opacity: 0;
  transition: height .2s, opacity .2s;
}

@media (max-width: 768.98px) {
  .metabar--account {
    background: #ebebeb;
  }
}

.breadcrumbs {
  margin-bottom: 1.25rem;
}

@media (min-width: 769px) {
  .breadcrumbs {
    position: sticky;
    top: 6.25rem;
    width: 2rem;
    margin-bottom: 0;
  }
  .breadcrumbs ol {
    margin-top: 1rem;
    margin-left: 1.25rem;
    white-space: nowrap;
    transform: rotate(90deg);
    transform-origin: top left;
  }
}

.breadcrumbs li {
  display: inline-block;
  margin: 0 .25rem;
}

.breadcrumbs li + li {
  margin-left: 0;
}

.breadcrumbs li + li::before {
  display: inline-block;
  margin-right: .25rem;
  font-family: "Montserrat", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  font-weight: 500;
  color: #c4c4c4;
  content: " > ";
}

.breadcrumbs a {
  color: #33333b;
}

.product-breadcrumbs {
  margin-bottom: 1.25rem;
}

@media (min-width: 769px) {
  .product-breadcrumbs {
    position: sticky;
    top: 6.25rem;
    margin-bottom: 0;
  }
  .product-breadcrumbs ol {
    margin-left: 1.25rem;
    white-space: nowrap;
  }
}

.product-breadcrumbs li {
  display: inline-block;
  margin: 0 .25rem;
}

.product-breadcrumbs li + li {
  margin-left: 0;
}

.product-breadcrumbs li + li::before {
  display: inline-block;
  margin-right: .25rem;
  font-family: "Montserrat", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  font-weight: 500;
  color: #c4c4c4;
  content: " > ";
}

.product-breadcrumbs a {
  color: #33333b;
}

.product-breadcrumbs .product-navigation .active a > span {
  color: #33333b;
}

.product-breadcrumbs .product-navigation .active .dot {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
  background: rgba(125, 229, 212, 0.15);
  border-radius: 9999px;
}

.product-breadcrumbs .product-navigation .active .dot::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .625rem;
  height: .625rem;
  content: "";
  background: #7DE5D4;
  border-radius: 9999px;
  transform: translateX(-50%) translateY(-50%);
}

.product-breadcrumbs .product-navigation a > span {
  color: #A4A4AC;
}

.product-breadcrumbs .product-navigation .dot {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
  background: transparent;
  border-radius: 9999px;
}

.product-breadcrumbs .product-navigation .dot::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .625rem;
  height: .625rem;
  content: "";
  background: #ddd;
  border-radius: 9999px;
  transform: translateX(-50%) translateY(-50%);
}

.product-breadcrumbs .dot {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
  background: transparent;
  border-radius: 9999px;
}

.product-breadcrumbs .dot::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .625rem;
  height: .625rem;
  content: "";
  background: #ddd;
  border-radius: 9999px;
  transform: translateX(-50%) translateY(-50%);
}

.product-breadcrumbs .dot-active {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
  background: rgba(125, 229, 212, 0.15);
  border-radius: 9999px;
}

.product-breadcrumbs .dot-active::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .625rem;
  height: .625rem;
  content: "";
  background: #7DE5D4;
  border-radius: 9999px;
  transform: translateX(-50%) translateY(-50%);
}

.after-service-breadcrumbs {
  margin-bottom: 1.25rem;
}
@media (min-width: 769px) {
  .after-service-breadcrumbs {
    position: sticky;
    top: 6.5rem;
    margin-bottom: 0;
  }
  .after-service-breadcrumbs ol {
    margin-left: 1.25rem;
    white-space: nowrap;
  }
}
.after-service-breadcrumbs li {
  display: inline-block;
  margin: 0 0.25rem;
}
.after-service-breadcrumbs li + li {
  margin-left: 0;
}
.after-service-breadcrumbs li + li::before {
  display: inline-block;
  margin-right: 0.25rem;
  font-family: "Montserrat", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  font-weight: 500;
  color: #c4c4c4;
  content: " > ";
}
.after-service-breadcrumbs a {
  color: #33333b;
}

.terms-breadcrumbs {
  z-index: 10;
}

@media (min-width: 769px) {
  .order-breadcrumbs-wrap {
    position: absolute;
    z-index: 10;
    height: 100%;
  }
}

@media (min-width: 769px) {
  .order-breadcrumbs {
    position: sticky;
    top: 6.25rem;
  }
}

.order-breadcrumbs ol {
  display: flex;
  margin-top: 1.25rem;
}

@media (min-width: 769px) {
  .order-breadcrumbs ol {
    display: block;
    margin-top: 0;
  }
}

.order-breadcrumbs li {
  position: relative;
  width: 20%;
  font-size: .625rem;
  line-height: .875rem;
  color: #c4c4c4;
  text-align: center;
}

@media (min-width: 769px) {
  .order-breadcrumbs li {
    width: 100%;
    margin-bottom: 1.875rem;
    font-size: .875rem;
    line-height: 1.25rem;
    text-align: left;
  }
}

.order-breadcrumbs li > span,
.order-breadcrumbs li > a > span {
  display: block;
  margin-top: .625rem;
}

@media (min-width: 769px) {
  .order-breadcrumbs li > span,
  .order-breadcrumbs li > a > span {
    display: inline-block;
    margin-top: 0;
  }
}

.order-breadcrumbs li::before {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  content: "";
  background: #ddd;
  border-radius: 50%;
}

@media (min-width: 769px) {
  .order-breadcrumbs li::before {
    margin-right: 1.25rem;
  }
}

.order-breadcrumbs li.active::before {
  background: #33333b;
}

.order-breadcrumbs li.current::before {
  box-shadow: 0 0 0 0.625rem rgba(51, 51, 59, 0.05);
}

.order-breadcrumbs li + li::after {
  position: absolute;
  top: calc(.25rem + 1px);
  left: -50%;
  z-index: -1;
  width: 100%;
  height: .125rem;
  content: "";
  background: #ddd;
}

@media (min-width: 769px) {
  .order-breadcrumbs li + li::after {
    top: -2.45rem;
    left: .25rem;
    width: .125rem;
    height: 3.125rem;
  }
}

.order-breadcrumbs li + li.active::after {
  background: #33333b;
}

.order-breadcrumbs .active,
.order-breadcrumbs a {
  color: #33333b;
}

.order-breadcrumbs .lh30 {
  line-height: 1.875rem;
}

@media (max-width: 768.98px) {
  .order-breadcrumbs .br {
    display: block;
  }
}

.account-surface {
  position: relative;
}

@media (min-width: 769px) {
  .account-surface::before, .account-surface::after {
    position: absolute;    
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
  }

  .account-surface::before {
    background: transparent url(/common/images/account-bg-t.svg) top right no-repeat;
  } /*
  .account-surface::after {
    background: transparent url(/common/images/account-bg-b.svg) bottom left no-repeat;
  } */
}

.account-main {
  position: relative;
}

@media (min-width: 769px) {
  .account-main {
    display: flex;
    align-items: flex-start;
  }
}

.account-main h1 {
  position: relative;
  padding-bottom: 2.5rem;
  margin-bottom: 2.375rem;
  line-height: 1.1;
  color: #ddd;
}

.account-main h1 span + span {
  margin-top: .625rem;
}

.account-main h1::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 20px;
  height: 2px;
  content: "";
  background: #33333b;
}

@media (min-width: 769px) {
  .account-main .breadcrumbs {
    flex: 0 0 auto;
    width: 7%;
  }
}

.account-main .form-control {
  margin-bottom: 1.25rem;
}

@media (min-width: 769px) {
  .account-main-content,
  .account-navigation {
    flex: 0 0 auto;
  }
}

.account-main-content {
  max-width: 30rem;
  padding-bottom: 2rem;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 769px) {
  .account-main-content {
    width: 60%;
    max-width: none;
  }
}

@media (min-width: 769px) {
  .account-navigation {
    position: sticky;
    top: 9.375rem;
    width: 33%;
    max-width: 29.625rem;
  }
  .account-navigation.legal {
    top: 11.25rem;
  }
}

.account-navigation ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@media (min-width: 769px) {
  .account-navigation ul {
    display: block;
  }
}

.account-navigation li {
  position: relative;
  margin-bottom: 1.25rem;
}

.account-navigation li + li {
  margin-left: 1.25rem;
}

@media (min-width: 769px) {
  .account-navigation li + li {
    margin-left: 0;
  }
}

.account-navigation .account-navigation-login,
.account-navigation .account-navigation-signup {
  display: block;
  height: 2.5rem;
  padding-left: 3.125rem;
  color: #c4c4c4;
}

@media (min-width: 769px) {
  .account-navigation .account-navigation-login,
  .account-navigation .account-navigation-signup {
    height: 5rem;
    padding-top: 1rem;
    padding-left: 6.25rem;
  }
}

.account-navigation .account-navigation-login::before, .account-navigation .account-navigation-login::after,
.account-navigation .account-navigation-signup::before,
.account-navigation .account-navigation-signup::after {
  position: absolute;
  display: block;
  content: "";
}

.account-navigation .account-navigation-login::before,
.account-navigation .account-navigation-signup::before {
  top: 1.125rem;
  left: 1.125rem;
  width: .25rem;
  height: .25rem;
  background: #c4c4c4;
  border-radius: 50%;
}

@media (min-width: 769px) {
  .account-navigation .account-navigation-login::before,
  .account-navigation .account-navigation-signup::before {
    top: 2.25rem;
    left: 2.25rem;
    width: .5rem;
    height: .5rem;
  }
}

.account-navigation .account-navigation-login::after,
.account-navigation .account-navigation-signup::after {
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent center center no-repeat;
  background-image: url(/common/images/navigation-radio-sm-g.svg);
}

@media (min-width: 769px) {
  .account-navigation .account-navigation-login::after,
  .account-navigation .account-navigation-signup::after {
    width: 5rem;
    height: 5rem;
    background-image: none;
  }
}

.account-navigation .account-navigation-login:hover,
.account-navigation .account-navigation-signup:hover {
  text-decoration: none;
}

.account-navigation .account-navigation-login:hover::after,
.account-navigation .account-navigation-signup:hover::after {
  background-image: url(/common/images/navigation-radio-sm-g.svg);
}

@media (min-width: 769px) {
  .account-navigation .account-navigation-login:hover::after,
  .account-navigation .account-navigation-signup:hover::after {
    background-image: url(/common/images/navigation-radio-g.svg);
  }
}

.account-navigation .account-navigation-login.active,
.account-navigation .account-navigation-signup.active {
  color: #33333b;
}

.account-navigation .account-navigation-login.active::before,
.account-navigation .account-navigation-signup.active::before {
  background: #33333b;
}

.account-navigation .account-navigation-login.active::after,
.account-navigation .account-navigation-signup.active::after {
  background-image: url(/common/images/navigation-radio-sm.svg);
}

@media (min-width: 769px) {
  .account-navigation .account-navigation-login.active::after,
  .account-navigation .account-navigation-signup.active::after {
    background-image: url(/common/images/navigation-radio.svg);
  }
}

.account-login-form {
  width: 100%;
}

@media (min-width: 769px) {
  .account-login-form {
    max-width: 20rem;
  }
}

.account-signup-form {
  width: 100%;
}

.account-signup-form .lead {
  margin-bottom: 1.25rem;
}

@media (min-width: 769px) {
  .account-signup-form {
    max-width: 36rem;
  }
}

.account-signup-form .signup-btn {
  margin-bottom: 2.5rem;
}

.account-signup-form .hr {
  margin: 1.25rem 0;
}

.register-submit {
  padding-top: 2.5rem !important;
  padding-bottom: 3.75rem !important;
  text-align: center;
}

@media (min-width: 769px) {
  .register-submit {
    padding-top: 3.75rem;
    padding-bottom: 5rem;
    text-align: left;
  }
}

.forgot-verify-submit .btn {
  display: block;
  width: 100%;
  padding: 4.375rem 0;
  color: #33333b;
  background: #f5f5f5;
  border-radius: 0;
}

.forgot-verify-submit .btn::before {
  width: 20%;
  height: 100%;
  background: #ddd;
}

.forgot-verify-submit .btn:hover::before, .forgot-verify-submit .btn:focus::before, .forgot-verify-submit .btn:active::before {
  width: 200%;
}

.account-forgot-verify-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: .625rem;
  padding-bottom: 3.75rem;
  text-align: center;
}

.account-forgot-verify-content h1::after {
  left: 50%;
  transform: translateX(-50%);
}

.account-terms {
  padding-bottom: 3.75rem;
}

@media (min-width: 769px) {
  .account-terms {
    max-width: 35rem;
    padding-bottom: 10rem;
  }
  .account-forgot-form {
    max-width: 23.25rem;
  }
  .account-forgot-verify-content {
    max-width: 41rem;
    padding-bottom: 5rem;
    margin-right: auto;
    margin-left: auto;
  }
  .forgot-verify-submit .btn {
    padding: 6.875rem 0;
  }
}

#signup {
  padding-top: 9.5rem;
  margin-top: -9.5rem;
}

/* // 2023年10月 .withdrawal-note-block追加 */
.withdrawal-note-block {
  border-radius: 10px;
  background-color: #f5f5f5;
  padding: 1.25rem;
}

.order-surface {
  position: relative;
}

.order-main {
  position: relative;
}

@media (min-width: 769px) {
  .order-main {
    display: flex;
    align-items: flex-start;
  }
}

.order-main h1 {
  position: relative;
  padding-left: 1.125rem;
  margin-bottom: 1.875rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  letter-spacing: .05em;
}

@media (min-width: 769px) {
  .order-main h1 {
    padding-left: 1.75rem;
    margin-bottom: 2.5rem;
    font-size: 1.25rem;
  }
}

.order-main h1::before {
  position: absolute;
  top: .625rem;
  left: 0;
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .625rem;
  content: "";
  background: #33333b;
  border-radius: 50%;
}

@media (min-width: 769px) {
  .order-main h1::before {
    font-size: 1.25rem;
  }
}

@media (min-width: 769px) {
  .order-main .breadcrumbs {
    width: 20%;
  }
}

.order-main-content {
  width: 100%;
  padding-bottom: 2.5rem;
}

.order-main-content .exclude-message {
  display: none;
  padding: 2rem;
  background: #282830;
  border-radius: 4px;
}

.order-main-content .exclude-message .arrow {
  position: absolute;
  left: -9px;
  border-top: 10px solid transparent;
  border-right: 10px solid #282830;
  border-bottom: 10px solid transparent;
}

.order-main-content .exclude-message p {
  width: 14.375rem;
  margin-left: 10px;
  font-size: .75rem;
  line-height: 1rem;
  color: #fff;
}

@media (min-width: 769px) {
  .register-submit.order-main-content {
    margin-left: 18rem;
  }
}

.register-submit.order-main-content {
  margin: 0;
}

.order-signup-form .hr {
  margin: 1.875rem 0;
}

.order-signup-form .exclude-area {
  cursor: pointer;
}

.order-signup-form .exclude {
  display: block;
  margin-bottom: 0;
  font-size: .75rem;
  line-height: 1rem;
}

@media (min-width: 769px) {
  .simulation-navigation {
    width: 13.75rem;
    margin-right: 6.75rem;
  }
}

.simulation-navigation h2 {
  position: relative;
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
}

@media (min-width: 769px) {
  .simulation-navigation h2 {
    padding-bottom: 2.125rem;
    margin-bottom: 2.5rem;
  }
  .simulation-navigation h2::after {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 1.25rem;
    content: "";
    border-bottom: 2px solid #33333b;
  }
}

.simulation h1 {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: .05rem;
}

.simulation .hr {
  margin: 1.25rem 0;
}

.simulation .res-graph,
.simulation .res-graph-si {
  position: relative;
  width: 19.375rem;
  margin-top: .5rem;
  margin-right: .75rem;
  margin-bottom: .5rem;
}

/* // 2023年10月 res-graph-sx追加 */
.simulation .res-graph,
.simulation .res-graph-si,
.simulation .res-graph-sx,
.simulation .res-graph-si2 {
  position: relative;
  width: 19.375rem;
  margin-top: 0.5rem;
  margin-right: 0.75rem;
  margin-bottom: 0.5rem;
}
/* // 2023年10月 res-graph-sx追加 */
.simulation .res-graph-sx img {
  aspect-ratio: 619/532;
}
.simulation .res-graph-03 {
  position: relative;
  width: 19.375rem;
  margin-top: 0.5rem;
  margin-right: 0.75rem;
  margin-bottom: 0.5rem;
}
.simulation .green-title {
  padding: .25rem .75rem;
  font-size: .75rem;
  font-weight: 300;
  line-height: 1;
  background: #38ff9f;
  border-radius: 20px;
}

.simulation .graph {
  position: relative;
  width: 22.25rem;
  max-width: 100%;
}

.simulation .graph p {
  width: 8rem;
  margin: 0;
  font-size: .75rem;
  line-height: 1rem;
}

.simulation .graph .graph-img {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
}

.simulation .graph .axis {
  justify-content: space-between;
}

.simulation .graph .yaxis {
  flex-direction: column;
  width: 1.875rem;
}

.simulation .graph .xaxis {
  margin-left: .75rem;
}

.simulation .graph .xaxis p {
  text-align: center;
}

.simulation .graph .weight-title {
  position: absolute;
  top: 0;
  right: 0;
}

.simulation .graph .green-box {
  width: 1.375rem;
  height: 1.375rem;
  margin-top: .125rem;
  margin-left: 1.875rem;
  background: #b7cb8f;
}

.simulation .graph .red-box {
  width: 1.375rem;
  height: 1.375rem;
  margin-top: .125rem;
  margin-left: 1.875rem;
  background: #794f65;
}
.simulation .graph .red2-box {
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.125rem;
  margin-left: 1.875rem;
  background: #a44169;
}
.simulation .graph .blue-box {
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.125rem;
  margin-left: 1.875rem;
  background: #374579;
}

.simulation .graph .green-message {
  width: 62%;
  font-size: 0.625rem;
  line-height: 0.875rem;
}
.simulation .graph .gray-box {
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.125rem;
  margin-left: 1.875rem;
  background: #A5A2B4;
}

.simulation .recommend,
.simulation .sub-recommend {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2rem;
  height: 2rem;
  content: "";
  background: #f00;
}

.simulation .recommend {
  opacity: .7;
}

.simulation .sub-recommend {
  opacity: .5;
}

.simulation input[type="number"] {
  width: 2.5rem;
  height: 1.875rem;
  padding: 0;
  font-size: 1.125rem;
  line-height: 110%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
}

.simulation input[type="number"]:hover, .simulation input[type="number"]:focus {
  background: #fff;
  border-bottom: 1px solid #ddd;
}

.simulation .slidecontainer {
  font-size: .875rem;
  font-weight: 300;
  line-height: 110%;
}

.simulation .environment-img {
  width: 4.3125rem;
  height: 2.875rem;
}

.simulation .simulation-type {
  display: flex;
  flex-direction: row;
  margin-right: 3.5rem;
}

@media (max-width: 768.98px) {
  .simulation .simulation-type > div + div {
    margin-left: 1.875rem;
  }
}

@media (min-width: 769px) {
  .simulation .simulation-type {
    flex-direction: column;
  }
}

.simulation .simulation-type img {
  width: 3.75rem;
  height: 3.75rem;
  border: 1px solid #c4c4c4;
  border-radius: 50%;
}

.simulation .simulation-type p {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 110%;
  text-align: center;
}

.order-plan .step {
  margin-right: 2rem;
  line-height: 2.5rem;
}

@media (min-width: 769px) {
  .order-plan .step {
    width: 20%;
    max-width: 10rem;
    margin-right: 0;
  }
}

.order-plan .step-line {
  display: block;
  margin-bottom: .375rem;
  line-height: 1;
}

.order-plan .step-line span {
  display: inline-block;
  width: .125rem;
  height: 1rem;
  margin-right: 2.375rem;
  background: #7DE5D4;
}

.order-plan .step-line span:first-child {
  background: #26e8ff;
}

.order-plan .step-line span:last-child {
  margin-right: 0;
  background: #DEF960;
}

.order-plan .btn-simu::before {
  background: #ddd;
}

.order-plan .btn-simu span {
  display: inline-block;
  line-height: .875rem;
}

.order-plan .detail-link {
  padding-bottom: .5rem;
  border-bottom: 1px solid #33333b;
  transition: .2s ease-in-out;
}

.order-plan .detail-link:hover {
  text-decoration: none;
  border-color: rgba(51, 51, 59, 0);
}

.order-plan .border {
  width: 100%;
  height: 1px;
  background: #ddd;
}

.order-plan label {
  display: block;
  width: 100%;
  cursor: pointer;
}

.order-plan input[type="radio"] {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.order-plan .row .no {
  position: absolute;
  top: -5px;
  left: 0;
  line-height: 1;
}

.order-plan .row .image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.order-plan .row .image,
.order-plan .row .types {
  position: relative;
}

.order-plan .row .image::before, .order-plan .row .image::after,
.order-plan .row .types::before,
.order-plan .row .types::after {
  position: absolute;
  top: 50%;
  display: block;
  width: 1px;
  height: 1.25rem;
  margin-top: -.625rem;
  background: #ddd;
}

.order-plan .row .image::before,
.order-plan .row .types::before {
  left: 0;
}

.order-plan .row .image::after,
.order-plan .row .types::after {
  right: 0;
}

@media (min-width: 769px) {
  .order-plan .row .types::before {
    width: 0;
  }
}

.order-plan .row .typesp {
  position: relative;
}

.order-plan .row .typesp::after {
  position: absolute;
  top: 50%;
  display: block;
  width: 1px;
  height: 1.25rem;
  margin-top: -.625rem;
  background: #ddd;
}

.order-plan .row .typesp::after {
  right: 0;
}

@media (min-width: 769px) {
  .order-plan .row .typesp::after {
    content: "";
  }
}

.order-plan .row .types {
  white-space: nowrap;
}

.order-plan .row .types .submit-mattress-size {
  white-space: normal;
}

@media (min-width: 769px) {
  .order-plan .row .image::before, .order-plan .row .image::after {
    content: "";
  }
  .order-plan .row .types::after {
    content: "";
  }
}

.order-plan-selected .row {
  height: auto;
}

@media (min-width: 769px) {
  .order-plan-selected .row {
    height: 6.25rem;
  }
}

.order-plan-selected .row > div:first-child {
  height: 6.25rem;
}

@media (min-width: 769px) {
  .order-plan-selected .row > div:first-child {
    width: 42%;
  }
}

@media (min-width: 769px) {
  .order-plan-selected .row > div:last-child {
    width: 58%;
  }
}

.order-plan-selected .row .name {
  position: relative;
  width: 40%;
}

@media (min-width: 769px) {
  .order-plan-selected .row .name {
    width: 45%;
  }
}

.order-plan-selected .row .image {
  width: 60%;
}

@media (min-width: 769px) {
  .order-plan-selected .row .image {
    width: 55%;
  }
}

.order-plan-selected .row .image img {
  width: 4.25rem;
}

.order-plan-selected .row .type > div {
  width: 4.5rem;
}

.order-plan-selected .total-box {
  padding: 1.875rem 1.5rem 1.25rem;
}

.order-plan-selected .total-box h4 {
  margin-bottom: .875rem;
  font-weight: 400;
}

@media (min-width: 769px) {
  .order-plan-selected .total-box h4 {
    margin-bottom: 1.25rem;
  }
}

.order-plan-selected .total-box .total-amount {
  padding-bottom: 1.25rem;
  line-height: 1.1;
  border-bottom: 1px solid #ddd;
}

@media (min-width: 769px) {
  .order-plan-selected .total-box .total-amount {
    padding-bottom: 2.5rem;
  }
}

.order-plan-selected .total-box .total-after {
  margin-top: 1.25rem;
  line-height: 1.1;
}

@media (min-width: 769px) {
  .order-plan-selected .total-box .total-after {
    margin-top: 1.875rem;
  }
}

@media (min-width: 1170px) {
  .order-plan-selected-row {
    display: flex;
  }
  .order-plan-selected-row .total-box {
    width: 35%;
    padding: 3.75rem 3% 2.5rem;
    margin-left: 2.5rem;
  }
}

@media (min-width: 1170px) {
  .order-plan-selected .box-left {
    width: 65%;
    padding-right: 1rem;
  }
}

.order-delivery .border {
  width: 100%;
  height: 1px;
  background: #ddd;
}

.order-delivery .center-line {
  width: 1px;
  height: 1.5rem;
  margin-right: 2.5rem;
  background: #ddd;
}

.order-delivery .label-text {
  padding-left: 1.875rem;
  margin-top: 1rem;
}

@media (min-width: 769px) {
  .order-delivery .label-text {
    padding-left: 0;
    margin-top: 0;
  }
}

.order-delivery .select-or-not {
  display: block;
  width: 100%;
  padding: 1.875rem 1.25rem;
  cursor: pointer;
}

@media (min-width: 769px) {
  .order-delivery .select-or-not {
    padding: 2.5rem;
  }
}

.order-delivery .select-or-not.checked {
  background-color: #fff;
}

.order-delivery .select-or-not.disabled {
  color: #c4c4c4;
  cursor: default;
  user-select: none;
}

.order-delivery .selector-block {
  justify-content: space-around;
}

@media (min-width: 769px) {
  .order-delivery .selector-block .selector {
    width: 50%;
  }
}

.order-delivery .selector-block .selector .flatpickr-wrap {
  margin-bottom: 1.25rem;
}

@media (min-width: 769px) {
  .order-delivery .selector-block .selector .flatpickr-wrap {
    margin-bottom: 0;
  }
}

.order-delivery .selector-block .selector .flatpickr,
.order-delivery .selector-block .selector .choices {
  position: relative;
  display: block;
  width: 100%;
  padding: 1rem 1.25rem;
  margin: 0;
  font-size: .875rem;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 4px;
  appearance: none;
}

.order-delivery .selector-block .selector .flatpickr::placeholder,
.order-delivery .selector-block .selector .choices::placeholder {
  color: #000;
}

.order-delivery .selector-block .selector .flatpickr-wrap {
  position: relative;
}

.order-delivery .selector-block .selector .flatpickr-wrap::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  content: "";
  background: #fff;
  border-radius: 4px;
}

.order-delivery .selector-block .selector .flatpickr-wrap::after {
  position: absolute;
  top: 1rem;
  right: 20px;
  z-index: -1;
  width: 20px;
  height: 20px;
  content: url(/common/images/calender.svg);
}

.order-delivery .selector-block .selector .choices::after {
  display: none;
}

.order-delivery .selector-block .selector .choices {
  position: relative;
}

.order-delivery .selector-block .selector .choices__inner {
  min-height: 0;
  padding: 0;
}

.order-delivery .selector-block .selector .choices__list {
  padding: 0;
}

.order-delivery .selector-block .selector .choices__item {
  border: 0;
}

.order-delivery .selector-time-input {
  position: relative;
  display: block;
}

.order-delivery .selector-time-input::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  content: "";
  background: #fff;
  border-radius: 4px;
}

.order-delivery .selector-time-input::after {
  position: absolute;
  top: 0;
  right: 1.25rem;
  bottom: 0;
  z-index: -1;
  width: 1.25rem;
  content: "";
  background: transparent url(/common/images/clock.svg) center center no-repeat;
}

.order-confirm .order-cart {
  width: 100%;
}

@media (min-width: 769px) {
  .order-confirm .order-cart {
    width: 19.5rem;
    margin-left: 2.5rem;
  }
}

@media (min-width: 769px) {
  .order-confirm .order-cart.cleaning {
    width: 29.5rem;
    margin-left: 0;
  }
}

@media (min-width: 769px) {
  .order-confirm .cart {
    height: 20rem;
    overflow: auto;
  }
}

.order-confirm .dt {
  width: 7.5rem;
  font-weight: 600;
}

@media (min-width: 769px) {
  .order-confirm .dt {
    width: 11.625rem;
  }
}

.order-confirm .btn-small {
  width: auto;
  height: 1.625rem;
  padding: 0;
  margin-left: 1.875rem;
  line-height: 1.5rem;
  color: #33333b;
  background: #ebebeb;
  border-radius: 99em;
}

.order-confirm .btn-small .text {
  display: flex;
  height: 1.625rem;
  padding: 0 1rem;
}

.order-confirm .btn-small .text > span {
  display: inline-block;
  padding: .25rem 0;
  line-height: 1.125rem;
}

.order-confirm .btn-small img {
  display: block;
  width: .75rem;
  height: 1.625rem;
  margin-right: .375rem;
  object-fit: contain;
}

.order-confirm .btn-small::before {
  height: 1.625rem;
  background: #ddd;
}

.order-confirm .border_ {
  border-top: 1px solid #d7d7d7;
}

.order-confirm .border-white {
  border-top: 1px solid #fff;
}

.order-confirm .message {
  line-height: 1.4rem;
  letter-spacing: .05em;
}

.order-confirm .img-info {
  width: 1.125rem;
  height: 1.125rem;
}

.order-confirm .img-question {
  width: 1.125rem;
  height: 1.125rem;
}

.order-confirm .notes {
  color: #d51040;
}

.order-confirm .checkbox {
  width: 1.25rem;
  height: 1.25rem;
}

.order-confirm .btn-hint {
  padding: 0;
  cursor: pointer;
}

.order-confirm .hr-black {
  display: block;
  width: 100%;
  border-bottom: 1px solid #33333b;
}

.order-confirm .hint-message {
  position: absolute;
  bottom: 100%;
  padding: 2rem;
  margin-bottom: 1rem;
  background: #282830;
  border-radius: .25rem;
}

@media (min-width: 769px) {
  .order-confirm .hint-message {
    bottom: -2rem;
    left: 0;
    width: 16rem;
    margin-right: 2rem;
    margin-bottom: 0;
    transform: translateY(-50%);
  }
}

.order-confirm .hint-message .arrow {
  position: absolute;
  bottom: -14px;
  left: 5.5rem;
  border-top: 10px solid #282830;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translateY(-50%);
}

.order-confirm .hint-message .arrow.left-20 {
  left: 6.75rem;
}

.order-confirm .hint-message .arrow-short {
  position: absolute;
  bottom: -14px;
  left: 3.7rem;
  border-top: 10px solid #282830;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translateY(-50%);
}

.order-confirm .hint-message .arrow-short.left-20 {
  left: 4.95rem;
}

.order-confirm .hint-large-message {
  position: absolute;
  bottom: 100%;
  padding: 2rem;
  margin-bottom: 1rem;
  background: #282830;
  border-radius: .25rem;
}

@media (min-width: 769px) {
  .order-confirm .hint-large-message {
    top: 50%;
    bottom: auto;
    left: 9rem;
    width: 18.75rem;
    margin-right: 2rem;
    margin-bottom: 0;
    transform: translateY(-50%);
  }
}

.order-confirm .hint-large-message .arrow {
  position: absolute;
  bottom: -14px;
  left: 5.5rem;
  border-top: 10px solid #282830;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translateY(-50%);
}

@media (min-width: 769px) {
  .order-confirm .hint-large-message .arrow {
    top: 50%;
    bottom: auto;
    left: -9px;
    border-top: 10px solid transparent;
    border-right: 10px solid #282830;
    border-bottom: 10px solid transparent;
    border-left: 0;
  }
}

.order-confirm .hint-large-message .arrowk {
  position: absolute;
  bottom: -14px;
  left: 3.7rem;
  border-top: 10px solid #282830;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translateY(-50%);
}

@media (min-width: 769px) {
  .order-confirm .hint-large-message .arrowk {
    top: 50%;
    bottom: auto;
    left: -9px;
    border-top: 10px solid transparent;
    border-right: 10px solid #282830;
    border-bottom: 10px solid transparent;
    border-left: 0;
  }
}

.order-confirm .image,
.order-confirm .types {
  position: relative;
}

.order-confirm .image::before, .order-confirm .image::after,
.order-confirm .types::before,
.order-confirm .types::after {
  position: absolute;
  top: 50%;
  display: block;
  width: 1px;
  height: 1.25rem;
  margin-top: -.625rem;
  background: #ddd;
}

.order-confirm .image::before,
.order-confirm .types::before {
  left: 0;
}

.order-confirm .image::after,
.order-confirm .types::after {
  right: 0;
}

.order-confirm .typesp {
  position: relative;
}

.order-confirm .typesp::after {
  position: absolute;
  top: 50%;
  display: block;
  width: 1px;
  height: 1.25rem;
  margin-top: -.625rem;
  background: #ddd;
}

.order-confirm .typesp::after {
  right: 0;
}

@media (min-width: 769px) {
  .order-confirm .image::before, .order-confirm .image::after {
    content: "";
  }
  .order-confirm .types::after {
    content: "";
  }
}

.order-confirm .cart-sticky {
  position: sticky;
  top: 12.5rem;
  z-index: 1;
}

.order-confirm .order-fixed-button {
  position: fixed;
  right: 1rem;
  bottom: 5rem;
  z-index: 10;
  width: 3.125rem;
  height: 3.125rem;
  text-decoration: none;
  background: #33333b;
  border-radius: 9999px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

.order-confirm .card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
}

.order-confirm .amount {
  line-height: 1.225rem;
}

.order-information-form .hr {
  margin: 1.25rem 0;
}

.order-information-form .main-label {
  display: block;
  margin-bottom: .625rem;
  font-size: 1rem;
  font-weight: 600;
}

.order-information-form label {
  margin-bottom: 0;
}

.order-information-form .exclude-area {
  cursor: pointer;
}

.order-information-form .exclude {
  display: block;
  margin-bottom: 0;
  font-size: .75rem;
  line-height: 1rem;
}

.order-information-form .card-number-form-wrapper {
  position: relative;
}

.order-information-form .card-number-form-wrapper input {
  padding-right: 5rem;
}

.order-information-form .card-number-form-wrapper .rectangle-form-card {
  position: absolute;
  top: 0;
  right: 1.25rem;
  bottom: 0;
  display: flex;
  align-items: center;
  width: 2.5rem;
  height: 100%;
}

.order-information-form .card-number-form-wrapper .rectangle-form-card img {
  width: 100%;
}

.order-cart-page .anchor-nav,
.order-cart-page .anchor-nav-new,
.order-cart-page .anchor-nav--scroll {
  position: sticky;
  top: 8.75rem;
  z-index: 1;
  transition: top .2s;
}

@media (min-width: 769px) {
  .order-cart-page .anchor-nav,
  .order-cart-page .anchor-nav-new,
  .order-cart-page .anchor-nav--scroll {
    top: 12.75rem;
  }
}

.order-cart-page .anchor-nav a,
.order-cart-page .anchor-nav-new a,
.order-cart-page .anchor-nav--scroll a {
  text-decoration: none;
}

.order-cart-page .anchor-nav-new {
  top: 4.375rem;
}

@media (min-width: 769px) {
  .order-cart-page .anchor-nav-new {
    top: 11.25rem;
  }
}

.order-cart-page .anchor-nav--scroll {
  top: 6.25rem;
  transition: top .2s;
}

@media (min-width: 769px) {
  .order-cart-page .anchor-nav--scroll {
    top: 6.25rem;
  }
}

.order-cart-page .anchor {
  position: absolute;
  display: block;
  padding-top: 12rem;
  margin-top: -12rem;
  visibility: hidden;
}

@media (min-width: 769px) {
  .order-cart-page .anchor {
    padding-top: 15rem;
    margin-top: -15rem;
  }
}

.order-cart-page .order-cart-right {
  width: 100%;
}

@media (min-width: 769px) {
  .order-cart-page .order-cart-right {
    width: 19.5rem;
    margin-left: 2.5rem;
  }
}

@media (min-width: 769px) {
  .order-cart-page .order-cart-inner {
    height: 20rem;
    overflow-y: scroll;
  }
}

.order-cart-page .number-container {
  width: 8rem;
}

@media (min-width: 769px) {
  .order-cart-page .inner-container {
    width: 100%;
    max-width: 30rem;
  }
}

.order-cart-page .image,
.order-cart-page .types {
  position: relative;
}

.order-cart-page .image::before, .order-cart-page .image::after,
.order-cart-page .types::before,
.order-cart-page .types::after {
  position: absolute;
  top: 50%;
  display: block;
  width: 1px;
  height: 1.25rem;
  margin-top: -.625rem;
  background: #ddd;
}

.order-cart-page .image::before,
.order-cart-page .types::before {
  left: 0;
}

.order-cart-page .image::after,
.order-cart-page .types::after {
  right: 0;
}

.order-cart-page .typesp {
  position: relative;
}

.order-cart-page .typesp::after {
  position: absolute;
  top: 50%;
  display: block;
  width: 1px;
  height: 1.25rem;
  margin-top: -.625rem;
  background: #ddd;
}

.order-cart-page .typesp::after {
  right: 0;
}

@media (min-width: 769px) {
  .order-cart-page .image::before, .order-cart-page .image::after {
    content: "";
  }
  .order-cart-page .types::after {
    content: "";
  }
}

.order-cart-page .order-cart-sticky,
.order-cart-page .order-cart-sticky-new,
.order-cart-page .order-cart-sticky--scroll {
  position: sticky;
  top: 12.75rem;
  z-index: 1;
}

.order-cart-page .order-cart-sticky-new {
  top: 11.25rem;
}

.order-cart-page .order-cart-sticky--scroll {
  top: 6.25rem;
  transition: top .2s;
}

.order-cart-page .hint-large-message {
  position: absolute;
  bottom: 100%;
  padding: 2rem;
  margin-bottom: 1rem;
  background: #282830;
  border-radius: .25rem;
}

@media (min-width: 769px) {
  .order-cart-page .hint-large-message {
    top: 50%;
    bottom: auto;
    left: 9rem;
    width: 18.75rem;
    margin-right: 2rem;
    margin-bottom: 0;
    transform: translateY(-50%);
  }
}

.order-cart-page .hint-large-message .arrow {
  position: absolute;
  bottom: -14px;
  left: 5.5rem;
  border-top: 10px solid #282830;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translateY(-50%);
}

@media (min-width: 769px) {
  .order-cart-page .hint-large-message .arrow {
    top: 50%;
    bottom: auto;
    left: -9px;
    border-top: 10px solid transparent;
    border-right: 10px solid #282830;
    border-bottom: 10px solid transparent;
    border-left: 0;
  }
}

.order-cart-page .hint-large-message .arrowk {
  position: absolute;
  bottom: -14px;
  left: 3.7rem;
  border-top: 10px solid #282830;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translateY(-50%);
}

@media (min-width: 769px) {
  .order-cart-page .hint-large-message .arrowk {
    top: 50%;
    bottom: auto;
    left: -9px;
    border-top: 10px solid transparent;
    border-right: 10px solid #282830;
    border-bottom: 10px solid transparent;
    border-left: 0;
  }
}

.order-cart-page .hint-message,
.order-cart-page .hint-left-message {
  position: absolute;
  bottom: 100%;
  padding: 2rem;
  margin-bottom: 1rem;
  background: #282830;
  border-radius: .25rem;
}

@media (min-width: 769px) {
  .order-cart-page .hint-message,
  .order-cart-page .hint-left-message {
    bottom: -2rem;
    left: 0;
    width: 16rem;
    margin-right: 2rem;
    margin-bottom: 0;
    transform: translateY(-50%);
  }
}

.order-cart-page .hint-message .arrow,
.order-cart-page .hint-left-message .arrow {
  position: absolute;
  bottom: -14px;
  left: 5.5rem;
  border-top: 10px solid #282830;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translateY(-50%);
}

.order-cart-page .order-fixed-button {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
  width: 3.125rem;
  height: 3.125rem;
  background: #33333b;
  border-radius: 9999px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

@media (min-width: 769px) {
  .order-cart-page .item-name {
    width: 5.5rem;
  }
}

@media (min-width: 769px) {
  .order-cart-page .item-name-large {
    width: 6.25rem;
  }
}

.order-cart-page .btn-hint {
  padding: 0;
  cursor: pointer;
}

.order-cart-page .hint-left-message .arrow {
  left: 3.75rem;
}

@media (min-width: 769px) {
  .order-cart-page .choices__item {
    padding-left: .5rem;
  }
}

.order-cart-page .border-white {
  border-top: 1px solid #fff;
}

.order-cart-page .cart-selectbox {
  width: 6.875rem;
}

@media (max-width: 768.98px) {
  .order-cart-page .cart-selectbox {
    position: relative;
    width: 5rem;
  }
  .order-cart-page .cart-selectbox select {
    border: 1px solid #f5f5f5;
  }
  .order-cart-page .cart-selectbox::before, .order-cart-page .cart-selectbox::after {
    position: absolute;
    content: "";
  }
  .order-cart-page .cart-selectbox::before {
    top: .675rem;
    right: 1.875rem;
    bottom: .675rem;
    width: 0;
    pointer-events: none;
    border-left: 1px solid #ddd;
  }
  .order-cart-page .cart-selectbox::after {
    top: 50%;
    right: 11.5px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    pointer-events: none;
    border: 5px solid transparent;
    border-color: transparent #33333b #33333b transparent;
    border-style: solid;
    border-width: 2px;
    transform: rotate(45deg);
    transform-origin: center center;
  }
}

.modal-header {
  height: 3.125rem;
  padding: 0 1.25rem;
  background: #fff;
}

.modal-header a {
  outline: none;
}

.modal-body {
  height: calc(100vh - 10.125rem);
  height: calc((var(--vh, 1vh) * 100) - 10.125rem);
  overflow-y: scroll;
}

.modal-body .hint-message,
.modal-body .hint-left-message {
  position: absolute;
  bottom: 100%;
  padding: 2rem;
  margin-bottom: 1rem;
  background: #282830;
  border-radius: .25rem;
}

@media (min-width: 769px) {
  .modal-body .hint-message,
  .modal-body .hint-left-message {
    bottom: -2rem;
    left: 0;
    width: 16rem;
    margin-right: 2rem;
    margin-bottom: 0;
    transform: translateY(-50%);
  }
}

.modal-body .hint-message .arrow,
.modal-body .hint-left-message .arrow {
  position: absolute;
  bottom: -14px;
  left: 6.5rem;
  border-top: 10px solid #282830;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translateY(-50%);
}

.modal-body .hint-left-message .arrow {
  left: 4.75rem;
}

.modal-body .border-white {
  border-top: 1px solid #fff;
}

.modal-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 7rem;
  padding: 0 1.25rem;
  background: #fff;
}

.modal-body-confirm {
  height: calc((var(--vh, 1vh) * 100) - 14.125rem);
  overflow-y: scroll;
}

.modal-body-confirm .hint-message {
  position: absolute;
  bottom: 100%;
  padding: 2rem;
  margin-bottom: 1rem;
  background: #282830;
  border-radius: .25rem;
}

@media (min-width: 769px) {
  .modal-body-confirm .hint-message {
    bottom: -2rem;
    left: 0;
    width: 16rem;
    margin-right: 2rem;
    margin-bottom: 0;
    transform: translateY(-50%);
  }
}

.modal-body-confirm .hint-message .arrow {
  position: absolute;
  bottom: -14px;
  left: 5.5rem;
  border-top: 10px solid #282830;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translateY(-50%);
}

.modal-body-confirm .hint-message .arrow-short {
  position: absolute;
  bottom: -14px;
  left: 3.7rem;
  border-top: 10px solid #282830;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translateY(-50%);
}

.modal-footer-confirm {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 11rem;
  padding: 0 1.25rem;
}

.modal-footer-confirm-no-agreement {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 7rem;
  padding: 0 1.25rem;
}

.order-select-plan .small-container {
  max-width: 58.375rem;
}

.order-select-plan .hr {
  width: 1px;
  height: 20px;
  background: #ddd;
}

.order-select-plan .w-60 {
  width: 3.75rem;
}

@media (min-width: 769px) {
  .order-select-plan .w-md-auto {
    width: auto;
  }
}

.order-select-plan .hr-black {
  display: block;
  width: 100%;
  border-bottom: 1px solid #33333b;
}

/* // 2023年10月追加 .tab-img-wrapper */
.tab-img-wrapper {
  aspect-ratio: 1;
  width: 100px;
  height: 100px;
  padding: 0.625rem;
}
.tab-img-wrapper.air-01 {
  padding: 0;
}
.tab-img-wrapper.air-03 {
  padding: 0.25rem;
}
.tab-img-wrapper img {
  width: 100%;
  height: 100%;
}
@media (min-width: 769px) {
  .tab-img-wrapper {
    width: 10rem;
    height: 10rem;
  }
  .tab-img-wrapper.air-01 {
    padding: 0;
  }
  .tab-img-wrapper.air-03 {
    padding: 0.625rem;
  }
  .tab-img-wrapper.air-si, .tab-img-wrapper.air-sx {
    padding: 1.25rem;
  }
}

.product-breadcrumb {
  margin-top: .25rem;
}

@media (min-width: 769px) {
  .product-breadcrumb {
    position: absolute;
    z-index: 100;
    height: 100%;
  }
}

.product-main-content .anchor {
  position: absolute;
  margin-top: -4rem;
}

@media (min-width: 769px) {
  .product-main-content .anchor {
    margin-top: -7.25rem;
  }
}

.product-main-content .img-logo {
  width: 7.75rem;
  margin-bottom: 2.5rem;
}

.product-main-content .img-header {
  width: 100%;
}

.product-main-content h2 {
  position: relative;
  padding-left: 4.25rem;
}

.product-main-content h2::before {
  position: absolute;
  top: .75rem;
  left: 0;
  width: 48px;
  height: 2px;
  content: "";
  background: url(/common/images/title-line2.svg) center center no-repeat;
}

.product-main-content h3 {
  position: relative;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
}

.product-main-content h3::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 1rem;
  height: .125rem;
  content: "";
  background-color: #ddd;
}

/* // 2023年11月2日追加 h3.sx */
@media (min-width: 769px) {
  .product-main-content h3.sx {
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: 0.125rem;
  }
}
@media (min-width: 769px) {
  .product-main-content h3.sx::after {
    height: 0;
  }
}

.product-main-content .structure1 {
  width: 100%;
  max-width: 38.25rem;
}

.product-main-content .structuresi {
  width: 100%;
  max-width: 32.25rem;
}

/* // 2023年10月追加 .structuresx */
.product-main-content .structuresx {
  width: 100%;
  max-width: 38.125rem;
}
@media (min-width: 769px) {
  .product-main-content .structure-row {
    margin-right: -1.25rem;
    margin-left: -1.25rem;
  }
  .product-main-content .structure-row .col {
    width: 17.5rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
  .product-main-content .structure-row .fix-h {
    height: 11.375rem;
  }
  .product-main-content .structure-row .fix-hl {
    height: 14rem;
  }
  .product-main-content .structure-row .description {
    height: 11rem;
  }
  .product-main-content .structure-row .descriptio-s {
    height: 8.25rem;
  }
  .product-main-content .structure-row .notes {
    height: 2.5rem;
  }
}

@media (min-width: 769px) {
  .product-main-content .thermo-row {
    margin-right: -1.25rem;
    margin-left: -1.25rem;
  }
  .product-main-content .thermo-row div {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}

/* // 2023年10月27日 追加 */
.product-main-content .col-gap-40 {
  column-gap: 2.5rem;
}
/* // 2023年10月27日 修正 */
.product-main-content .thermo-img {
  width: 100%;
  max-width: 21.5rem;
  margin-bottom: 0.625rem;
  max-height: 7.5rem;
}
@media (min-width: 769px) {
  .product-main-content .thermo-img {
    max-height: 10.25rem;
  }
}

@media (min-width: 769px) {
  .product-main-content .line-up-wrap {
    padding-right: .875rem;
    padding-left: .875rem;
  }
  .product-main-content .line-up-row {
    margin-right: -1.875rem;
    margin-left: -1.875rem;
  }
  .product-main-content .line-up-row .col {
    width: 50%;
    padding: 0 1.25rem;
  }
  .product-main-content .line-up-row .col .col-inner {
    width: 50%;
  }
}

.product-main-content .howto {
  padding: 1.875rem 1.25rem 0;
}

@media (min-width: 769px) {
  .product-main-content .howto {
    padding: 2.5rem 2.5rem 1.25rem;
  }
}

.product-main-content .simulation {
  max-width: 34.875rem;
}

.product-main-content h4 {
  position: relative;
  display: flex;
  align-items: center;
}

.product-main-content h4::before {
  display: block;
  width: .375rem;
  height: .375rem;
  margin-right: 1.25rem;
  content: "";
  background: #33333b;
  border-radius: 50%;
}

.product-main-content .ratio1,
.product-main-content .ratio2 {
  align-items: center;
  max-width: 15rem;
  height: 1.875rem;
  font-size: .875rem;
  line-height: calc(1.875rem - 1px);
  border-radius: 99em;
}

@media (min-width: 769px) {
  .product-main-content .ratio1,
  .product-main-content .ratio2 {
    max-width: 17.5rem;
  }
}

.product-main-content .ratio1 .left,
.product-main-content .ratio2 .left {
  width: 6.625rem;
  text-align: center;
}

.product-main-content .ratio1 .mr-15,
.product-main-content .ratio2 .mr-15 {
  margin-right: 1rem;
}

.product-main-content .ratio1 .divider-ratio,
.product-main-content .ratio2 .divider-ratio {
  display: inline-block;
  width: 1px;
  height: .875rem;
  margin-right: 1.125rem;
}

.product-main-content .ratio1 {
  margin-bottom: .3125rem;
  color: #fff;
  background: #c4c4c4;
}

.product-main-content .ratio1 .divider-ratio {
  background: rgba(255, 255, 255, 0.3);
}

.product-main-content .ratio2 {
  background: #d7d7d7;
}

.product-main-content .ratio2 .divider-ratio {
  background: rgba(51, 51, 59, 0.3);
}

.product-main-content .comforter-spec {
  margin-bottom: 1.875rem;
  text-align: center;
}

@media (min-width: 769px) {
  .product-main-content .comforter-spec {
    padding-right: 4.375rem;
    margin-bottom: 0;
    text-align: left;
  }
}

.product-main-content .comforter-header {
  background: left center no-repeat;
  background-image: url(/common/images/comforter-header2.png);
  background-size: cover;
}

.product-main-content .comforter-header-logo {
  margin-bottom: 9.125rem;
}

@media (min-width: 769px) {
  .product-main-content .comforter-header-logo {
    margin-bottom: 2.5rem;
  }
}

.product-main-content .comforter-secret-tag {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 58.3333333333%;
  border: solid 1px #c4c4c4;
}

.product-main-content .comforter-secret-tag img {
  position: absolute;
  top: 0;
  height: 100%;
  padding: .625rem 0;
}

.product-main-content .comforter-course {
  border: 1px solid #ddd;
}

@media (min-width: 769px) {
  .product-main-content .comforter-course {
    max-width: 24.375rem;
  }
}

.product-main-content .hr-line {
  width: 1rem;
  height: .125rem;
  background: #d7d7d7;
}

.product-main-content .hr-sm {
  width: 1.25rem;
  height: .125rem;
  margin-bottom: 1.875rem;
  background: #33333b;
}

.product-main-content .flow-lead {
  margin-bottom: 2.875rem;
}

@media (min-width: 769px) {
  .product-main-content .flow-lead {
    margin-bottom: 4.5rem;
  }
}

.product-main-content .flow-wrap .col {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 2.25rem;
}

.product-main-content .flow-wrap .col:last-child {
  margin-bottom: 3.75rem;
}

@media (min-width: 769px) {
  .product-main-content .flow-wrap .col {
    display: block;
    width: 8.75rem;
    margin-bottom: 0;
    margin-bottom: 5rem;
  }
  .product-main-content .flow-wrap .col + .col {
    margin-left: 5rem;
  }
  .product-main-content .flow-wrap .col + .col::before {
    position: absolute;
    top: 3.875rem;
    left: -2.75rem;
    width: .5rem;
    height: 1rem;
    content: "";
    background: url(/common/images/chevron-right.svg) center center no-repeat;
  }
}

.product-main-content .flow-wrap .no {
  position: absolute;
  top: -1.25rem;
  left: 0;
  font-family: "Montserrat", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  font-size: 2.5rem;
  font-weight: 300;
  color: #d7d7d7;
}

@media (min-width: 769px) {
  .product-main-content .flow-wrap .no {
    top: -2.5rem;
    font-size: 3.75rem;
  }
}

.product-main-content .flow-wrap .flow-title {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  margin-right: 1.25rem;
  text-align: center;
  background: #fff;
  border-radius: 50%;
}

@media (min-width: 769px) {
  .product-main-content .flow-wrap .flow-title {
    width: 8.75rem;
    height: 8.75rem;
    margin-right: 0;
    margin-bottom: 1.25rem;
  }
}

.product-main-content .flow-wrap p {
  flex: 1 1 auto;
}

@media (min-width: 769px) {
  .product-main-content .consul-row .col {
    width: 15rem;
  }
  .product-main-content .consul-row .col + .col {
    margin-left: 2.5rem;
  }
}

.product-main-content .consul-wrap .col {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.product-main-content .consul-wrap .header {
  margin-right: 1rem;
}

.product-main-content .consul-wrap .logo {
  padding-right: .625rem;
  padding-left: .625rem;
  margin-top: .25rem;
  margin-right: .25rem;
  font-weight: 300;
  color: #33333b;
  border-radius: 1rem;
}

.product-main-content .consul-wrap .logo-tv {
  background-color: #26e8ff;
}

.product-main-content .consul-wrap .logo-chat {
  background-color: #38ff9f;
}

.product-main-content .catch {
  margin-top: 3.75rem;
}

@media (min-width: 769px) {
  .product-main-content .catch {
    margin-top: 1.875rem;
  }
}

.product-main-content .catch .title {
  margin-bottom: 1.875rem;
  font-size: 1.875rem;
  color: #d7d7d7;
}

@media (min-width: 769px) {
  .product-main-content .catch .title {
    margin-bottom: 0;
    font-size: 2.5rem;
  }
}

.product-main-content .catch-text {
  padding: 1.25rem;
}

@media (min-width: 769px) {
  .product-main-content .catch-text {
    padding: 2.5rem 1.25rem;
  }
}

.product-main-content .chat-row .col {
  margin-bottom: 3.75rem;
}

@media (min-width: 769px) {
  .product-main-content .chat-row .col {
    width: 50%;
    margin-bottom: 5rem;
  }
}

.product-main-content .chat-row .title {
  margin-bottom: .75rem;
  font-family: "Montserrat", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: rgba(196, 196, 196, 0.5);
  text-align: center;
}

@media (min-width: 769px) {
  .product-main-content .chat-row .title {
    font-size: 1.875rem;
  }
}

.product-main-content .chat-row .image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 17.25rem;
  margin-bottom: .75rem;
}

@media (min-width: 769px) {
  .product-main-content .chat-row .image {
    height: 22.25rem;
  }
}

.product-main-content .chat-row .image img {
  max-height: 100%;
}

.product-main-content .afterline {
  position: relative;
  padding-bottom: 1.25rem;
}

.product-main-content .afterline::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 1rem;
  height: .125rem;
  content: "";
  background-color: #d7d7d7;
}

.product-main-content .list-compress {
  padding: 0;
  list-style: none;
  counter-reset: listcompress;
}

.product-main-content .list-compress > li {
  position: relative;
  padding-left: 4rem;
  line-height: 1.6;
}

.product-main-content .list-compress > li + li {
  margin-top: 1.25rem;
}

.product-main-content .list-compress > li::before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Montserrat", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  font-size: 1.5rem;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.5rem;
  color: #A4A4AC;
  content: "0" counter(listcompress);
  counter-increment: listcompress;
}

@media (max-width: 768.98px) {
  .product-main-content .sm-w100p {
    width: 100%;
  }
}

.product-main-content .catch-list {
  padding: 0;
  padding-left: 1rem;
  margin: 0;
  list-style: none;
}

.product-main-content .catch-list li {
  position: relative;
  line-height: 1.6;
}

.product-main-content .catch-list li + li {
  margin-top: .675rem;
}

@media (min-width: 769px) {
  .product-main-content .catch-list li + li {
    margin-top: .8125rem;
  }
}

.product-main-content .catch-list li::before {
  margin-left: -1rem;
  content: "・";
}

.product-main-content .footer-list {
  padding-left: 1.25rem;
  margin-bottom: 3.125rem;
}

@media (min-width: 769px) {
  .product-main-content .footer-list {
    margin-bottom: 3.75rem;
  }
}

.product-main-content .footer-list > li {
  padding-left: .5rem;
}

.product-main-content .mattress-header,
.product-main-content .mattress-header-si {
  width: 100%;
  background: no-repeat;
  background-image: url(/common/images/mattress-header-sm.png);
  background-size: cover;
}

@media (min-width: 769px) {
  .product-main-content .mattress-header,
  .product-main-content .mattress-header-si {
    background-image: url(/common/images/mattress-header.png);
  }
}

.product-main-content .mattress-header .header-logo,
.product-main-content .mattress-header-si .header-logo {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

@media (min-width: 769px) {
  .product-main-content .mattress-header .header-logo,
  .product-main-content .mattress-header-si .header-logo {
    top: 2.5rem;
    left: 2.5rem;
  }
}

.product-main-content .mattress-header .header-mattress-img,
.product-main-content .mattress-header-si .header-mattress-img {
  max-width: 20.75rem;
  max-height: 11.625rem;
}

.product-main-content .mattress-header .header-mattress-sm,
.product-main-content .mattress-header-si .header-mattress-sm {
  width: 100%;
  max-width: 17.5rem;
}

.product-main-content .mattress-header-si {
  background-image: url(/common/images/mattress-header-si-sm.png);
  background-position: bottom;
}

@media (min-width: 769px) {
  .product-main-content .mattress-header-si {
    background-image: url(/common/images/mattress-header-si.png);
    background-position: top left;
  }
}

/* // 2023年10月 画像名修正 */
.product-main-content .mattress-header-03 {
  background: left center no-repeat;
  background-image: url(/common/images/mattress-header-03-sm.png);
  background-size: cover;
}
/* // 2023年10月追加 */
.product-main-content .mattress-header-03 .header-mattress-sm {
  width: 100%;
  max-width: 15rem;
}

@media (min-width: 769px) {
  .product-main-content .mattress-header-03 {
    background-image: url(/common/images/mattress-header-03.png);
    background-position: top left;
  }
}

/* // 2023年10月 .mattress-header-sx追加 */
.product-main-content .mattress-header-sx {
  background: left center no-repeat;
  background-image: url(/common/images/mattress-header-sx-sm.png);
  background-size: cover;
}
.product-main-content .mattress-header-sx .header-mattress-sm {
  width: 100%;
  max-width: 15rem;
}
@media (min-width: 769px) {
  .product-main-content .mattress-header-sx {
    height: auto;
    min-height: 188px;
    background-image: url(/common/images/mattress-header-sx.png);
    background-position: top left;
  }
}
@media (min-width: 769px) {
  .product-main-content .mattress-header.detail, .product-main-content .mattress-header-si.detail {
    height: 11.75rem;
  }
}
.product-main-content .body-pressure-img {
  width: 100%;
  max-width: 38.25rem;
}

.product-main-content .feature-row {
  margin-right: 0;
  margin-left: 0;
}

@media (min-width: 769px) {
  .product-main-content .feature-row {
    margin-right: -1.25rem;
    margin-left: -1.25rem;
  }
}

.product-main-content .mattress-feature-img-container {
  justify-content: center;
}

@media (min-width: 769px) {
  .product-main-content .mattress-feature-img-container {
    justify-content: flex-start;
  }
}

.product-main-content .img-container {
  width: 50%;
  max-width: 9.375rem;
}

.product-main-content .line-up-img {
  width: 100%;
  max-width: 20rem;
}

.product-main-content .line-up-img-si {
  width: 100%;
  max-width: 17.5rem;
}

@media (min-width: 769px) {
  .product-main-content .line-up-img-si {
    max-width: 19.5rem;
  }
}

.product-main-content .line-up-product-img-container {
  width: 8.75rem;
  height: 8.75rem;
}

@media (min-width: 769px) {
  .product-main-content .line-up-product-img-container {
    width: 11.25rem;
    height: 13.75rem;
  }
}

.product-main-content .line-up-product-img-container .type-img-double {
  width: 6.25rem;
  height: 6.25rem;
}

@media (min-width: 769px) {
  .product-main-content .line-up-product-img-container .type-img-double {
    width: 8.75rem;
    height: 8.75rem;
  }
}

.product-main-content .line-up-product-img-container .type-img-hard {
  width: 6rem;
  height: 6rem;
}

@media (min-width: 769px) {
  .product-main-content .line-up-product-img-container .type-img-hard {
    width: 8.5rem;
    height: 8.5rem;
  }
}

.product-main-content .line-up-product-img-container .type-img {
  width: 5.5rem;
  height: 6.25rem;
  /* 2024/10 センサー付きマットレス追加 */
}
.product-main-content .line-up-product-img-container .type-img.connected {
  width: 6.5rem;
  aspect-ratio: 91/105;
}

@media (min-width: 769px) {
  .product-main-content .line-up-product-img-container .type-img {
    width: 7.625rem;
    height: 8.75rem;
    /* 2024/10 センサー付きマットレス追加 */
  }
  .product-main-content .line-up-product-img-container .type-img.connected {
    width: 10rem;
    aspect-ratio: 150/168;
  }
}

.product-main-content .line-up-logo .air-01 {
  position: absolute;
  top: -1.5rem;
  left: 0;
}

@media (min-width: 769px) {
  .product-main-content .line-up-logo .air-01 {
    position: relative;
    top: 0;
    max-width: 4.75rem;
  }
}

.product-main-content .line-up-logo .air-si {
  position: absolute;
  top: -1.5rem;
  left: 0;
}

@media (min-width: 769px) {
  .product-main-content .line-up-logo .air-si {
    position: relative;
    top: 0;
    left: 0;
    max-width: 4.75rem;
  }
}

.product-main-content .tag .blue {
  padding: .25rem .625rem;
  background: #7de5d4;
  border-radius: 50px;
}

.product-main-content .tag .gray {
  padding: .25rem .625rem;
  background: #d7d7d7;
  border-radius: 50px;
}

.product-main-content .tag .orange {
  padding: .25rem .625rem;
  background: #FBA56C;
  border-radius: 50px;
}

.product-main-content .dotted-right {
  border-right: 1px dashed #c4c4c4;
}

.product-main-content .dotted-bottom {
  border-bottom: 1px dashed #c4c4c4;
}

.product-main-content .triangle {
  border-top: .5rem solid transparent;
  border-bottom: .5rem solid transparent;
  border-left: 0.875rem solid #c4c4c4;
}

.product-main-content .triangle-under {
  border-top: 0.875rem solid #c4c4c4;
  border-right: .5rem solid transparent;
  border-left: .5rem solid transparent;
}

.product-main-content .mattress-feature-img {
  width: 8.5rem;
  height: 8.5rem;
}

@media (min-width: 769px) {
  .product-main-content .mattress-feature-img {
    width: 9.375rem;
    height: 9.375rem;
  }
}

.product-main-content .tab1,
.product-main-content .tab2 {
  cursor: pointer;
}

/* // 2023年10月追加 */
.product-main-content .tab3,
.product-main-content .tab4 {
  cursor: pointer;
  background-color: #fff;
}
.product-main-content .tab1 > div,
.product-main-content .tab2 > div,
.product-main-content .tab3 > div,
.product-main-content .tab4 > div,
.product-main-content .tab5 > div {
  color: #33333b;
  font-weight: 400;
  font-size: 0.875rem;
  white-space: nowrap;
  text-align: center;
}
.product-main-content .tab1 .tab-new,
.product-main-content .tab2 .tab-new,
.product-main-content .tab3 .tab-new,
.product-main-content .tab4 .tab-new,
.product-main-content .tab5 .tab-new {
  color: #1e1eff;
}
.product-main-content .tab1.active,
.product-main-content .tab2.active,
.product-main-content .tab3.active,
.product-main-content .tab4.active,
.product-main-content .tab5.active {
  background: #33333b;
}
.product-main-content .tab1.active > div,
.product-main-content .tab2.active > div,
.product-main-content .tab3.active > div,
.product-main-content .tab4.active > div,
.product-main-content .tab5.active > div {
  color: #fff;
  font-weight: 700;
}
@media (min-width: 769px) {
  .product-main-content .tab1.active > div,
.product-main-content .tab2.active > div,
.product-main-content .tab3.active > div,
.product-main-content .tab4.active > div,
.product-main-content .tab5.active > div {
    color: #33333b;
  }
}
@media (min-width: 769px) {
  .product-main-content .tab1.active,
.product-main-content .tab2.active,
.product-main-content .tab3.active,
.product-main-content .tab4.active,
.product-main-content .tab5.active {
    background: #f5f5f5;
  }
}
.product-main-content .tab1.active .tab-new,
.product-main-content .tab2.active .tab-new,
.product-main-content .tab3.active .tab-new,
.product-main-content .tab4.active .tab-new,
.product-main-content .tab5.active .tab-new {
  color: #fff;
}
@media (min-width: 769px) {
  .product-main-content .tab1.active .tab-new,
.product-main-content .tab2.active .tab-new,
.product-main-content .tab3.active .tab-new,
.product-main-content .tab4.active .tab-new,
.product-main-content .tab5.active .tab-new {
    color: #1e1eff;
  }
}
.product-main-content .card {
  position: relative;
}

.product-main-content .card .fix-h {
  min-height: 33rem;
}

.product-main-content .card .note {
  position: absolute;
  bottom: 3.125rem;
  min-height: 5.625rem;
}

.product-main-content .large-circle-container {
  width: 13.75rem;
  height: 13.75rem;
  background: #fff;
  border-radius: 9999px;
}

.product-main-content .large-circle-no {
  position: absolute;
  top: -2rem;
  left: 0;
  font-size: 4.375rem;
  font-weight: 300;
  color: #d7d7d7;
}

.product-main-content .large-circle-tag {
  position: absolute;
  bottom: 0;
  left: 0;
}

.product-main-content .border-container {
  padding: 1.25rem;
  border: 1px solid #ddd;
}

@media (min-width: 769px) {
  .product-main-content .border-container {
    padding: 1.875rem;
    /* 2024/10 センサー付きマットレス追加 */
  }
  .product-main-content .border-container.connected {
    padding: 1.5rem 1.125rem;
  }
}

@media (min-width: 769px) {
  .product-main-content .normal-price-image-wraper {
    max-width: 11.25rem;
    max-height: 13.75rem;
  }
}

.product-main-content .normal-price-image-container {
  position: relative;
  width: 100%;
  border: 1px solid #ddd;
  padding-top: 107.142857%;
}

@media (min-width: 769px) {
  .product-main-content .normal-price-image-container {
    padding-top: 122.2222222%;
  }
}

.product-main-content .normal-price-image-container > div {
  position: absolute;
  top: 0;
}

.product-main-content .arrow-container,
.product-main-content .arrow-container-gray {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #ddd;
}

.product-main-content .arrow-container::after, .product-main-content .arrow-container::before,
.product-main-content .arrow-container-gray::after,
.product-main-content .arrow-container-gray::before {
  position: absolute;
  top: 100%;
  left: 4.875rem;
  width: 0;
  height: 0;
  pointer-events: none;
  content: "";
  border: solid transparent;
}

@media (min-width: 769px) {
  .product-main-content .arrow-container::after, .product-main-content .arrow-container::before,
  .product-main-content .arrow-container-gray::after,
  .product-main-content .arrow-container-gray::before {
    left: 6.375rem;
  }
}

.product-main-content .arrow-container::after,
.product-main-content .arrow-container-gray::after {
  margin-left: -12px;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-top-width: 12px;
  border-right-width: 12px;
  border-bottom-width: 12px;
  border-left-width: 12px;
}

.product-main-content .arrow-container::before,
.product-main-content .arrow-container-gray::before {
  margin-top: 1px;
  margin-left: -12px;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #ddd;
  border-top-width: 12px;
  border-right-width: 12px;
  border-bottom-width: 12px;
  border-left-width: 12px;
}

@media (min-width: 769px) {
  .product-main-content .arrow-container-gray::after, .product-main-content .arrow-container-gray::before {
    left: 12rem;
  }
}

.product-main-content .arrow-container-trial {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #ddd;
}

.product-main-content .arrow-container-trial::after, .product-main-content .arrow-container-trial::before {
  position: absolute;
  top: 100%;
  left: 76px;
  width: 0;
  height: 0;
  pointer-events: none;
  content: "";
  border: solid transparent;
}

@media (min-width: 769px) {
  .product-main-content .arrow-container-trial::after, .product-main-content .arrow-container-trial::before {
    left: 100px;
  }
}

.product-main-content .arrow-container-trial::after {
  margin-left: -12px;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-top-width: 12px;
  border-right-width: 12px;
  border-bottom-width: 12px;
  border-left-width: 12px;
}

.product-main-content .arrow-container-trial::before {
  margin-top: 1px;
  margin-left: -12px;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #ddd;
  border-top-width: 12px;
  border-right-width: 12px;
  border-bottom-width: 12px;
  border-left-width: 12px;
}

.product-main-content .arrow-container-gray::after {
  border-top-color: #f5f5f5;
}

@media (min-width: 769px) {
  .product-main-content .md-w50p-10 {
    width: calc(50% - .625rem);
  }
}

.product-main-content .border {
  width: 100%;
  border: 1px solid #d6d6d6;
}

.product-main-content .border-box {
  width: 100%;
  border: 1px solid #ddd;
}

.product-main-content .border-line {
  width: 100%;
  border: 1px solid #d7d7d7;
  border-bottom-width: 0;
}

.product-main-content .border-b-gray {
  border-bottom: 1px solid #ddd;
}

.product-main-content .border-b-lightgray {
  border-bottom: 1px solid #ebebeb;
}

@media (min-width: 769px) {
  .product-main-content .border-b-md-none {
    border-bottom: none;
  }
}

@media (min-width: 769px) {
  .product-main-content .border-r-md-gray {
    border-right: 1px solid #ddd;
  }
}
.product-main-content .scrollable-table {
  /* 2024/10 センサー付きマットレス追加 */
}
.product-main-content .scrollable-table table {
  white-space: nowrap;
  border-color: #ddd;
}

.product-main-content .scrollable-table table:first-child {
  background: #fff;
}

@media (min-width: 769px) {
  .product-main-content .scrollable-table table:first-child td:first-child {
    min-width: 10.625rem;
  }
}

@media (min-width: 769px) {
  .product-main-content .scrollable-table table:first-child td:last-child {
    min-width: 8.125rem;
  }
}

.product-main-content .scrollable-table table:last-child {
  margin-left: -1px;
}

.product-main-content .scrollable-table table:last-child.long td {
  min-width: 4.4375rem;
}

@media (min-width: 769px) {
  .product-main-content .scrollable-table table:last-child.long td {
    min-width: 5.625rem;
  }
}

.product-main-content .scrollable-table table:last-child td {
  min-width: 4rem;
}

@media (min-width: 769px) {
  .product-main-content .scrollable-table table:last-child td {
    min-width: 5.625rem;
  }
}

.product-main-content .scrollable-table tr {
  height: 3.125rem;
}

.product-main-content .scrollable-table tr:first-child {
  height: 1.875rem;
  color: #fff;
  background: #767676;
}

.product-main-content .scrollable-table td {
  padding: 0 .625rem;
  font-size: .75rem;
}

.product-main-content .scrollable-table .table-right {
  overflow-x: scroll;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.product-main-content .scrollable-table .table-right::-webkit-scrollbar {
  display: none;
}

/* // 2023年10月 tr.sx追加 */
.product-main-content .scrollable-table tr.comforter-table-row, .product-main-content .scrollable-table tr.si, .product-main-content .scrollable-table tr.sx {
  height: 3.75rem;
}
@media (min-width: 769px) {
  .product-main-content .scrollable-table tr.comforter-table-row, .product-main-content .scrollable-table tr.si, .product-main-content .scrollable-table tr.sx {
    height: 3.125rem;
  }
}

.product-main-content .table-scroll {
  padding-left: 8.75rem;
}

@media (min-width: 769px) {
  .product-main-content .table-scroll {
    padding-left: 18.75rem;
  }
}

.product-main-content .table-scroll button {
  line-height: 0;
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
}

.product-main-content .table-scroll button:focus {
  outline: none;
}

.product-main-content .table-scroll button:disabled {
  cursor: default;
}

.product-main-content .table-scroll button:disabled svg > path {
  stroke: #c4c4c4;
}

.product-main-content .table-scroll .js-table-scroll-prev svg {
  transform: rotate(180deg);
}

.product-main-content .mattress-flex-container {
  width: calc((100% - .5rem) / 2);
}

.product-main-content .bg-circle {
  padding-top: 26px;
  background: url(/common/images/ellipse.svg);
  background-repeat: no-repeat;
  background-position: bottom;
}
.product-main-content .mattress-header-si-short {
  height: 300px;
  max-width: 370px;
  background-image: url(/common/images/mattress-header-si-short.png);
  background-size: cover;
  aspect-ratio: 370/300;
}
.product-main-content .healthyon-header {
  height: 300px;
  max-width: 370px;
  background-image: url(/common/images/healthyon-header.png);
  background-size: cover;
  aspect-ratio: 370/300;
}
.product-main-content .healthyon-header .healthyon-header-contents {
  padding: 0 60px 14px 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.product-main-content .healthyon-header .healthyon-header-contents .healthyon-logo {
  margin-bottom: 7px;
}
.product-main-content .healthyon-header-sm {
  position: relative;
  background-image: url(/common/images/healthyon-header-sm.png);
  background-size: cover;
  width: 100%;
  aspect-ratio: 1;
}
.product-main-content .healthyon-header-sm .healthyon-header-contents {
  padding: 0 15px 17px 15px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.product-main-content .healthyon-header-sm .healthyon-header-contents .healthyon-logo {
  margin-bottom: 17px;
}
.product-main-content .js-mattress-trial-tab-mattress,
.product-main-content .js-mattress-trial-tab-healthyon {
  cursor: pointer;
  background-color: #f5f5f5;
}
.product-main-content .js-mattress-trial-tab-mattress.tab,
.product-main-content .js-mattress-trial-tab-healthyon.tab {
  border-top: 1px solid #ddd;
  background-color: #f5f5f5;
}
.product-main-content .js-mattress-trial-tab-mattress.tab .tab-text,
.product-main-content .js-mattress-trial-tab-healthyon.tab .tab-text {
  color: #33333b;
}
.product-main-content .js-mattress-trial-tab-mattress.active,
.product-main-content .js-mattress-trial-tab-healthyon.active {
  background-color: #D9D9D9;
}
.product-main-content .js-mattress-trial-tab-mattress.active.tab,
.product-main-content .js-mattress-trial-tab-healthyon.active.tab {
  background-color: #33333b;
}
.product-main-content .js-mattress-trial-tab-mattress.active.tab .tab-text,
.product-main-content .js-mattress-trial-tab-healthyon.active.tab .tab-text {
  color: #FFF;
}
.product-main-content .sticky {
  position: sticky;
  top: 50px;
  z-index: 10;
}
.product-main-content .rental-container.healthyon {
  background-color: #EEF1F8;
}
@media (min-width: 769px) {
  .product-main-content .rental-container {
    max-width: 390px;
  }
}
.product-main-content .rental-container .green-badge {
  background-color: #7DE5D4;
  border-radius: 999px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
}
.product-main-content .healthyon-hero-sm {
  position: relative;
  background-image: url(/common/images/healthyon-hero-sm.png);
  width: 100%;
  max-height: 500px;
  aspect-ratio: 288/421;
  background-size: cover;
  background-repeat: no-repeat;
}
.product-main-content .healthyon-hero-sm .contents {
  position: absolute;
  bottom: 35px;
  left: 0;
  right: 0;
}
.product-main-content .blood-circulation {
  width: 37px;
  height: 28px;
}
@media (min-width: 769px) {
  .product-main-content .blood-circulation {
    width: 52px;
    height: 40px;
  }
}
.product-main-content .fatigue-recovery {
  width: 48px;
  height: 28px;
}
@media (min-width: 769px) {
  .product-main-content .fatigue-recovery {
    width: 68px;
    height: 40px;
  }
}
.product-main-content .stomach {
  width: 32px;
  height: 30px;
}
@media (min-width: 769px) {
  .product-main-content .stomach {
    width: 45px;
    height: 43px;
  }
}
.product-main-content .nerve {
  width: 30px;
  height: 30px;
}
@media (min-width: 769px) {
  .product-main-content .nerve {
    width: 42px;
    height: 43px;
  }
}
.product-main-content .headache {
  width: 29px;
  height: 32px;
}
@media (min-width: 769px) {
  .product-main-content .headache {
    width: 40px;
    height: 45px;
  }
}
.product-main-content .stiff-shoulders {
  width: 40px;
  height: 31px;
}
@media (min-width: 769px) {
  .product-main-content .stiff-shoulders {
    width: 56px;
    height: 44px;
  }
}
.product-main-content .intestine {
  width: 32px;
  height: 32px;
}
@media (min-width: 769px) {
  .product-main-content .intestine {
    width: 46px;
    height: 45px;
  }
}
.product-main-content .sleep {
  width: 40px;
  height: 32px;
}
@media (min-width: 769px) {
  .product-main-content .sleep {
    width: 57px;
    height: 45px;
  }
}
.product-main-content .healthyon-efficacy-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
@media (min-width: 769px) {
  .product-main-content .healthyon-efficacy-list {
    flex-direction: row;
    gap: 30px;
  }
}
.product-main-content .healthyon-efficacy-list .group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
@media (min-width: 769px) {
  .product-main-content .healthyon-efficacy-list .group {
    flex-direction: row;
    gap: 30px;
  }
}
.product-main-content .treatment-block {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-main-content .treatment-block .blur-red {
  color: #BB3258;
  background-image: url(/common/images/blur-bg-red-sm.png);
  width: 182px;
  height: 182px;
  background-size: cover;
  margin-right: -30px;
}
@media (min-width: 769px) {
  .product-main-content .treatment-block .blur-red {
    background-image: url(/common/images/blur-bg-red.png);
    width: 395px;
    height: 395px;
    margin-right: -84px;
  }
}
.product-main-content .treatment-block .blur-blue {
  color: #272687;
  background-image: url(/common/images/blur-bg-blue-sm.png);
  width: 182px;
  height: 182px;
  background-size: cover;
  margin-left: -30px;
}
@media (min-width: 769px) {
  .product-main-content .treatment-block .blur-blue {
    background-image: url(/common/images/blur-bg-blue.png);
    width: 395px;
    height: 395px;
    margin-left: -84px;
  }
}
.product-main-content .treatment-block .cross-block {
  position: absolute;
  bottom: -38px;
}
@media (min-width: 769px) {
  .product-main-content .treatment-block .cross-block {
    bottom: -13px;
  }
}
.product-main-content .treatment-block .cross-block-main {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
}
@media (min-width: 769px) {
  .product-main-content .treatment-block .cross-block-main {
    gap: 40px;
  }
}
.product-main-content .treatment-block .cross-block-main .text {
  margin-bottom: -10px;
}
@media (min-width: 769px) {
  .product-main-content .treatment-block .cross-block-main .text {
    margin-bottom: -18px;
  }
}
.product-main-content .efficacy-card-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 769px) {
  .product-main-content .efficacy-card-list-wrapper {
    flex-direction: row;
    gap: 27px;
  }
}
.product-main-content .efficacy-card-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (min-width: 769px) {
  .product-main-content .efficacy-card-list {
    gap: 27px;
  }
}
.product-main-content .efficacy-card-list .efficacy-card {
  border: 1px solid #ebebeb;
  min-width: 135px;
  height: 200px;
  padding: 0 10px;
}
@media (min-width: 769px) {
  .product-main-content .efficacy-card-list .efficacy-card {
    min-width: 180px;
    height: 210px;
    padding: 0 20px;
  }
}
.product-main-content .efficacy-card-list .efficacy-card .image-wrapper {
  position: relative;
  height: 70px;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
@media (min-width: 769px) {
  .product-main-content .efficacy-card-list .efficacy-card .image-wrapper {
    height: 80px;
  }
}
.product-main-content .efficacy-card-list .efficacy-card .image-wrapper.red::before {
  position: absolute;
  content: "";
  bottom: 0;
  display: block;
  height: 2px;
  width: 16px;
  background-color: #BB3258;
}
.product-main-content .efficacy-card-list .efficacy-card .image-wrapper.blue::before {
  position: absolute;
  content: "";
  bottom: 0;
  display: block;
  height: 2px;
  width: 16px;
  background-color: #272687;
}
@media (min-width: 769px) {
  .product-main-content .healthyon-controller-course-list-container {
    margin-left: calc((100vw - 77.875rem) / 2 + 27.875rem - 3rem);
  }
}
.product-main-content .healthyon-controller-course-list {
  position: relative;
  overflow-x: auto;
  display: flex;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  scroll-behavior: smooth;
  padding: 45px 20px 40px 20px;
  gap: 20px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.product-main-content .healthyon-controller-course-list::-webkit-scrollbar {
  display: none;
}
@media (min-width: 769px) {
  .product-main-content .healthyon-controller-course-list {
    padding: 20px 20px 40px 20px;
    gap: 30px;
  }
}
.product-main-content .paging {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-top: -20px;
}
.product-main-content .healthyon-controller-course {
  scroll-snap-align: start;
  position: relative;
  border-radius: 20px;
  background-color: #fff;
  max-width: 220px;
  min-width: 220px;
  height: 340px;
}
@media (min-width: 769px) {
  .product-main-content .healthyon-controller-course {
    max-width: 320px;
    min-width: 320px;
    height: 397px;
  }
}
.product-main-content .healthyon-controller-course .contents {
  z-index: 10;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 20px;
  padding-top: 20px;
}
@media (min-width: 769px) {
  .product-main-content .healthyon-controller-course .contents {
    padding-top: 30px;
  }
}
.product-main-content .healthyon-controller-course .red {
  color: #BB3258;
}
.product-main-content .healthyon-controller-course .green {
  color: #6CADA0;
}
.product-main-content .healthyon-controller-course .blue {
  color: #1E1E82;
}
.product-main-content .healthyon-controller-course .orange {
  color: #E95A23;
}
.product-main-content .healthyon-controller-course .orange-container {
  display: flex;
  gap: 10px;
  padding: 0 20px;
}
@media (min-width: 769px) {
  .product-main-content .healthyon-controller-course .orange-container {
    gap: 14px;
    padding: 0 35px;
  }
}
.product-main-content .healthyon-controller-course .description {
  padding: 0 18px 20px 18px;
}
@media (min-width: 769px) {
  .product-main-content .healthyon-controller-course .description {
    padding: 0 40px 56px 40px;
  }
}
.product-main-content .healthyon-controller-course::before {
  z-index: 0;
  position: absolute;
  content: "";
  border-radius: 20px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.8;
  filter: blur(1px);
  box-shadow: 4px 4px 50px 0px rgba(0, 0, 0, 0.1);
}
.product-main-content .js-controller-button {
  z-index: 10;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #33333B;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
}
.product-main-content .js-controller-button.disabled {
  background-color: #E7E5E1;
  opacity: 0.6;
}
.product-main-content .app-controller {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
@media (min-width: 769px) {
  .product-main-content .app-controller {
    flex-direction: row;
    align-items: flex-start;
    gap: 80px;
  }
}
.product-main-content .app-controller .app-and-power {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
@media (min-width: 769px) {
  .product-main-content .app-controller .app-and-power {
    gap: 15px;
  }
}
.product-main-content .home-link-app-user-manual {
  text-decoration: none;
  color: #33333b;
  background-color: #fff;
  border: 1px solid #767676;
  border-radius: 2px;
  padding: 10px 12px;
  width: 240px;
}
@media (min-width: 769px) {
  .product-main-content .left-container {
    max-width: 335px;
  }
}
.product-main-content .healthyon-lineup-image-wrapper {
  margin: 0 -1rem;
}
@media (min-width: 769px) {
  .product-main-content .healthyon-lineup-image-wrapper {
    margin: 0;
  }
}
.product-main-content .healthyon-lineup-image-wrapper img {
  width: 100%;
  height: 100%;
}
@media (min-width: 769px) {
  .product-main-content .healthyon-lineup-image-wrapper img {
    max-width: 335px;
    max-height: 335px;
  }
}
.product-main-content .healthyon-lineup-sleeptech-problock {
  position: absolute;
  bottom: 40px;
  right: 0px;
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (min-width: 769px) {
  .product-main-content .healthyon-lineup-sleeptech-problock {
    position: relative;
    bottom: 0;
    right: 0;
  }
}
.product-main-content .caution ul {
  padding-inline-start: 24px;
}
.product-main-content .caution ol {
  padding-inline-start: 24px;
}
.product-main-content .border-line-thin {
  border-bottom: solid;
  border-bottom-width: 1px;
  border-color: #ddd;
}
.product-main-content .healthyon-big-container {
  width: 190px;
  padding-right: 10px;
  border: 1px solid #D9D9D9;
}
.product-main-content .healthyon-reactangle-image {
  margin-top: -15px;
  margin-bottom: -17px;
}
.product-main-content .healthyon-reactangle-image.big {
  margin-top: -10px;
  margin-bottom: -5px;
}

.fixed-button-container {
  position: fixed;
  bottom: 0;
  z-index: 10;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.1);
}

@media (min-width: 769px) {
  .fixed-button-container {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

.fixed-button-container button {
  border-radius: 9999px;
}

/* // 2023年11月2日追加 .structure-sx */
.structure-sx .img-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  row-gap: 1.25rem;
}
.structure-sx .img-list .first, .structure-sx .img-list .third {
  width: 7.5rem;
}
@media (min-width: 769px) {
  .structure-sx .img-list .first, .structure-sx .img-list .third {
    width: 22.75%;
    max-width: 11.25rem;
    max-height: 11.25rem;
  }
}
.structure-sx .img-list .second {
  height: 7.5rem;
  max-width: 18rem;
}
@media (min-width: 769px) {
  .structure-sx .img-list .second {
    height: auto;
    width: 54.5%;
    max-height: 11.25rem;
    max-width: unset;
  }
}
.structure-sx .img-list img {
  width: 100%;
  height: 100%;
}
@media (min-width: 769px) {
  .structure-sx .img-list {
    flex-direction: row;
    align-items: center;
    column-gap: 1.2rem;
  }
}
.structure-sx .short-border {
  width: 1rem;
  height: 0.125rem;
  background-color: #ddd;
}

.sleeptech-problock {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 20px;
  bottom: 0;
  right: -10px;
}
@media (min-width: 769px) {
  .sleeptech-problock {
    bottom: 40px;
    right: -40px;
  }
}

.mypage-nav-wrap {
  position: sticky;
  top: 3.125rem;
  z-index: 9;
  background: #f5f5f5;
}

@media (min-width: 769px) {
  .mypage-nav-wrap {
    position: absolute;
    top: 0;
    z-index: 8;
    height: 100%;
    background: transparent;
  }
}

.mypage-nav {
  height: 2.5rem;
}

@media (min-width: 769px) {
  .mypage-nav {
    position: sticky;
    top: 7.75rem;
    z-index: 8;
    min-width: 8.25rem;
    height: auto;
  }
  .mypage-nav.has-announce {
    top: 11.25rem;
  }
}

.mypage-status-nav .link {
  display: block;
  color: #A4A4AC;
}

.mypage-status-nav .link.current {
  color: #33333b;
}

.mypage-status-nav li a {
  display: block;
}

.mypage-status-nav li a:hover, .mypage-status-nav li a.current {
  color: #33333b;
  text-decoration: none;
}

@media (max-width: 768.98px) {
  .mypage-status-nav {
    display: flex;
    align-items: center;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  .mypage-status-nav > ul {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .mypage-status-nav > ul > li {
    position: relative;
    display: flex;
    align-items: center;
    width: 50%;
  }
  .mypage-status-nav > ul > li + li::before {
    display: inline-block;
    flex: 0;
    height: .875rem;
    content: "";
    border-left: 1px solid #ddd;
  }
  .mypage-status-nav .link {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
  }
}

@media (min-width: 769px) {
  .mypage-status-nav .link {
    position: relative;
    display: block;
    height: 1.875rem;
    line-height: calc(1.875rem - 1px);
    color: #c4c4c4;
  }
}

.mypage-status-nav-sm > ul > li > .link {
  padding-right: 1rem;
  padding-left: 1rem;
  background: #fff;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.mypage-status-nav-sm > ul > li + li::before {
  display: inline-block;
  flex: 0;
  height: 2.5rem;
  content: "";
  border-left: 1px solid #ddd;
}

.mypage-status-nav-sm .submenu {
  z-index: 8;
  position: absolute;
  top: 100%;
  display: none;
  width: 100%;
  padding-top: .625rem;
  padding-bottom: .625rem;
  background: #33333b;
  border-radius: 0 0 .25rem .25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.mypage-status-nav-sm .submenu a {
  justify-content: flex-start;
  padding-left: 1rem;
  color: #fff;
}

.mypage-status-nav-sm .submenu a.current {
  color: #33333b;
  background: #fff;
}

.mypage-status-nav-sm .link-account.active img {
  transform: rotate(180deg);
}

.mypage-status-nav-sm .link-account.active + .submenu {
  display: block;
}

.mypage h1 {
  position: relative;
  min-width: 12rem;
  padding-left: 1.125rem;
  margin-bottom: 1.875rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .05em;
}

@media (min-width: 769px) {
  .mypage h1 {
    padding-left: 1.75rem;
    margin-bottom: 2.5rem;
    font-size: 1.25rem;
  }
}

.mypage h1::before {
  position: absolute;
  top: .625rem;
  left: 0;
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .625rem;
  content: "";
  background: #33333b;
  border-radius: 50%;
}

@media (min-width: 769px) {
  .mypage h1::before {
    font-size: 1.25rem;
  }
}

.mypage .announcement {
  position: sticky;
  top: 3.125rem;
  z-index: 8;
  height: 2.5rem;
  border: 1px solid #f5f5f5;
}

@media (min-width: 769px) {
  .mypage .announcement {
    top: 6.25rem;
    z-index: 9;
  }
}

.mypage .announcement img {
  vertical-align: baseline;
}

.mypage .announcement .container-lg > div {
  padding: .75rem 0;
}

.mypage .mypage-nav-wrap + .announcement {
  top: 5.625rem;
}

@media (min-width: 769px) {
  .mypage .mypage-nav-wrap + .announcement {
    top: 6.25rem;
  }
}

.mypage .announce-title,
.mypage .announce-text {
  line-height: 1;
}

.mypage .announce-divider {
  height: .875rem;
  margin: 0 1.25rem;
  content: "";
  border-right: 1px solid #ddd;
}

.mypage .announce-title {
  position: relative;
}

.mypage .announce-button {
  padding: 0 1rem;
  margin-right: -1rem;
  cursor: pointer;
  transition: .2s ease;
}

.mypage .announce-button:hover {
  opacity: .5;
}

.mypage .mypage-title {
  position: relative;
  padding-bottom: 1.25rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.mypage .mypage-title::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 1.25rem;
  height: .125rem;
  content: "";
  background: #33333b;
}

.mypage .divider {
  display: inline-block;
  height: .875rem;
  margin-top: 1px;
  margin-right: 1.25rem;
  margin-left: 1.25rem;
  content: "";
  border-left: 1px solid #ddd;
}

.mypage .divider-hr {
  display: block;
  width: 1.25rem;
  margin-top: .625rem;
  margin-bottom: .625rem;
  margin-left: 1.25rem;
  border-top: 1px solid #ddd;
}

.mypage .border {
  width: 100%;
  border-top: 1px solid #ddd;
}

.mypage .border-sm {
  width: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border-top: 2px solid #ddd;
}

@media (min-width: 769px) {
  .mypage .border-sm {
    margin-top: 2.5rem;
  }
}

.mypage .box-gray,
.mypage .box-gray-alt {
  padding: .8125rem 1.25rem;
  background: #ebebeb;
  border: 1px solid #ddd;
  border-radius: .125rem;
}

.mypage .box-gray + .box-gray,
.mypage .box-gray-alt + .box-gray {
  margin-top: .625rem;
}

.mypage .box-gray-alt {
  padding: .75rem 1.875rem;
}

.mypage .mypage-plan .no {
  position: absolute;
  top: -.75rem;
  line-height: 1.1;
}

@media (min-width: 769px) {
  .mypage .mypage-plan-title {
    width: 40%;
  }
}

.mypage .mypage-plan-progress {
  max-width: 24.375rem;
}

.mypage .mypage-plan-progress .progress-label > div,
.mypage .mypage-plan-progress .progress-value > div {
  width: 4.75rem;
  color: #c4c4c4;
  text-align: center;
}

@media (min-width: 769px) {
  .mypage .mypage-plan-progress .progress-label > div,
  .mypage .mypage-plan-progress .progress-value > div {
    width: 6rem;
  }
}

.mypage .mypage-plan-progress .progress-label > div.active,
.mypage .mypage-plan-progress .progress-value > div.active {
  color: #33333b;
}

.mypage .mypage-plan-progress .progress-status {
  position: relative;
  margin: 1rem 2rem;
}

@media (min-width: 769px) {
  .mypage .mypage-plan-progress .progress-status {
    margin: 1.25rem 2.5rem;
  }
}

.mypage .mypage-plan-progress .progress-status::before {
  position: absolute;
  top: 50%;
  z-index: -1;
  display: block;
  width: 100%;
  content: "";
  border-top: 0.125rem dashed #ddd;
  transform: translateY(-50%);
}

.mypage .mypage-plan-progress .progress-status > div {
  position: relative;
  display: block;
  width: .625rem;
  height: .625rem;
  content: "";
  background: #ddd;
  border: 1px solid #ddd;
  border-radius: 50%;
}

.mypage .mypage-plan-progress .progress-status > div.active {
  background: #33333b;
  border-color: #33333b;
}

.mypage .mypage-plan-progress .progress-status > div.current {
  background: #7DE5D4;
  box-shadow: 0 0 0 0.875rem rgba(51, 51, 59, 0.05);
}

.mypage .mypage-plan-progress .progress-status > div.active::before {
  position: absolute;
  top: 50%;
  left: 100%;
  z-index: -1;
  width: 1.75rem;
  content: "";
  border-top: 0.125rem solid #33333b;
  transform: translateY(-50%);
}

.mypage .mypage-plan-progress .progress-status > div:last-child::before {
  display: none;
}

.mypage .mypage-plan-progress .progress-status > div + div.active::after {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: -1;
  width: 6.75rem;
  content: "";
  border-top: 0.125rem solid #33333b;
  transform: translateY(-50%);
}

@media (min-width: 360px) {
  .mypage .mypage-plan-progress .progress-status > div + div.active::after {
    width: 8.75rem;
  }
}

.mypage .mypage-plan-progress .progress-label {
  align-items: flex-end;
}

.mypage .mypage-plan-selected .image {
  position: relative;
  width: 8.375rem;
  height: 1rem;
}

.mypage .mypage-plan-selected .image img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3.375rem;
  height: 3.375rem;
  transform: translateY(-50%);
  object-fit: contain;
}

@media (min-width: 769px) {
  .mypage .mypage-plan-selected .image img {
    width: 4.375rem;
    height: 4.375rem;
  }
}

.mypage .mypage-plan-selected .image::after {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-block;
  height: 1.25rem;
  margin-right: 1.875rem;
  content: "";
  border-right: 1px solid #ddd;
  transform: translateY(-50%);
}

@media (min-width: 769px) {
  .mypage .mypage-plan-selected .image::after {
    margin-right: 2.5rem;
  }
}

.mypage .mypage-plan-selected .type {
  width: 6.25rem;
}

.mypage .cleaning-form .btn-small {
  width: 4.75rem;
  height: 1.625rem;
  padding: 0;
  margin-left: 1.875rem;
  line-height: 1.5rem;
  color: #33333b;
  background: #ebebeb;
}

.mypage .cleaning-form .btn-small img {
  margin-right: .375rem;
}

.mypage .cleaning-form .btn-small::before {
  height: 1.625rem;
  background: #ddd;
}

.mypage .cleaning-progress {
  position: relative;
  display: flex;
}

@media (min-width: 769px) {
  .mypage .cleaning-progress {
    display: block;
  }
}

@media (max-width: 768.98px) {
  .mypage .cleaning-progress .progress-label > div,
  .mypage .cleaning-progress .progress-status > div {
    height: 3.75rem;
  }
  .mypage .cleaning-progress .progress-label > div:nth-child(2), .mypage .cleaning-progress .progress-label > div:nth-child(6),
  .mypage .cleaning-progress .progress-status > div:nth-child(2),
  .mypage .cleaning-progress .progress-status > div:nth-child(6) {
    height: 7.5rem;
  }
}

@media (min-width: 769px) {
  .mypage .cleaning-progress .progress-label > div,
  .mypage .cleaning-progress .progress-status > div {
    width: 16.666666666%;
  }
  .mypage .cleaning-progress .progress-label > div .note,
  .mypage .cleaning-progress .progress-status > div .note {
    transform: translateX(75%);
  }
  .mypage .cleaning-progress .progress-label > div:last-child .note,
  .mypage .cleaning-progress .progress-status > div:last-child .note {
    transform: translateX(0);
  }
}

.mypage .cleaning-progress .progress-status {
  position: relative;
}

@media (min-width: 769px) {
  .mypage .cleaning-progress .progress-status {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 2.5rem 0 1.25rem;
  }
}

.mypage .cleaning-progress .progress-status::before {
  position: absolute;
  top: .75rem;
  left: .875rem;
  z-index: -1;
  display: block;
  width: 0;
  height: 22.5rem;
  content: "";
  border-left: 0.125rem dashed #ddd;
}

@media (min-width: 769px) {
  .mypage .cleaning-progress .progress-status::before {
    top: 50%;
    left: 50%;
    width: 83.33333333%;
    height: 0;
    border-top: 0.125rem dashed #ddd;
    border-left: 0;
    transform: translate(-50%, -50%);
  }
}

.mypage .cleaning-progress .progress-status > div {
  position: relative;
  padding-right: .625rem;
  padding-left: .625rem;
  margin-right: .625rem;
  line-height: 1;
}

@media (min-width: 769px) {
  .mypage .cleaning-progress .progress-status > div {
    height: .625rem;
    padding-right: 0;
    padding-left: calc(8.3333333% - .625rem / 2);
    margin-right: 0;
  }
}

.mypage .cleaning-progress .progress-status > div .dot {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  margin-top: .375rem;
  vertical-align: text-top;
  content: "";
  background: #ddd;
  border: 1px solid #ddd;
  border-radius: 50%;
}

@media (min-width: 769px) {
  .mypage .cleaning-progress .progress-status > div .dot {
    margin-top: 0;
  }
}

.mypage .cleaning-progress .progress-status > div.active .dot {
  background: #33333b;
  border-color: #33333b;
}

.mypage .cleaning-progress .progress-status > div.current .dot {
  background: #7DE5D4;
  box-shadow: 0 0 0 0.625rem rgba(51, 51, 59, 0.05);
}

@media (min-width: 769px) {
  .mypage .cleaning-progress .progress-status > div.current .dot {
    box-shadow: 0 0 0 0.875rem rgba(51, 51, 59, 0.05);
  }
}

.mypage .cleaning-progress .progress-status > div + div.active::after {
  position: absolute;
  bottom: 100%;
  left: .875rem;
  z-index: -1;
  width: 0;
  height: 3.75rem;
  content: "";
  border-left: 0.125rem solid #33333b;
  transform: translateY(0.625rem);
}

@media (min-width: 769px) {
  .mypage .cleaning-progress .progress-status > div + div.active::after {
    top: 50%;
    right: 50%;
    bottom: auto;
    left: auto;
    width: 100%;
    height: 0;
    border-top: 0.125rem solid #33333b;
    border-left: 0;
    transform: translateY(-50%);
  }
}

@media (max-width: 768.98px) {
  .mypage .cleaning-progress .progress-status > div:nth-child(3).active::after {
    height: 7.5rem;
  }
}

.mypage .cleaning-progress .note {
  display: inline-block;
  padding: .625rem;
  margin-top: .625rem;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: .125rem;
}

@media (min-width: 769px) {
  .mypage .cleaning-progress .note {
    margin-top: 3.5rem;
  }
}

.mypage .dl .no {
  position: absolute;
  top: -.75rem;
  line-height: 1.1;
}

.mypage .dt {
  width: 7.5rem;
  font-weight: 600;
}
.mypage .dt.dt-point {
  width: 9rem;
}
@media (min-width: 769px) {
  .mypage .dt {
    width: 11.625rem;
  }
}

@media (min-width: 769px) {
  .mypage .dd {
    width: calc(100% - 11.625rem);
  }
}

.mypage .account-dd {
  width: calc(100% - 7.5rem);
}

@media (min-width: 769px) {
  .mypage .account-dd {
    width: calc(100% - 11.625rem);
  }
}

.mypage .flatpickr-wrap {
  margin-bottom: 1.25rem;
}

@media (min-width: 769px) {
  .mypage .flatpickr-wrap {
    margin-bottom: 0;
  }
}

.mypage .flatpickr,
.mypage .choices {
  position: relative;
  display: block;
  width: 100%;
  padding: 1rem 1.25rem;
  margin: 0;
  font-size: .875rem;
  background-color: transparent !important;
  border: 1px solid #fff;
  border-radius: 4px;
  -webkit-appearance: none;
}

.mypage .flatpickr::placeholder,
.mypage .choices::placeholder {
  color: #000;
}

.mypage .flatpickr-wrap {
  position: relative;
  z-index: 1;
}

.mypage .flatpickr-wrap::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  content: "";
  background: #fff;
  border-radius: 4px;
}

.mypage .flatpickr-wrap::after {
  position: absolute;
  top: 1rem;
  right: 20px;
  z-index: -1;
  width: 20px;
  height: 20px;
  content: url(/common/images/calender.svg);
}

.mypage .flatpickr-wrap .input {
  margin: 0;
  cursor: pointer;
  border: 1px solid #fff !important;
}

.mypage .choices::after {
  display: none;
}

.mypage .choices {
  position: relative;
}

.mypage .choices__inner {
  min-height: 0;
  padding: 0 !important;
}

.mypage .choices__list {
  padding: 0;
}

.mypage .choices__item {
  border: 0;
}

.mypage .selector-time-input {
  position: relative;
  z-index: 1;
  display: block;
}

.mypage .selector-time-input::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  content: "";
  background: #fff;
  border-radius: 4px;
}

.mypage .selector-time-input::after {
  position: absolute;
  top: 0;
  right: 1.25rem;
  bottom: 0;
  z-index: -1;
  width: 1.25rem;
  content: "";
  background: transparent url(/common/images/clock.svg) center center no-repeat;
}

@media (min-width: 769px) {
  .mypage .selector {
    width: 50%;
  }
  .mypage .selector:first-child {
    margin-right: 1.25rem;
  }
  .mypage .selector:last-child {
    margin-left: 1.25rem;
  }
}

.mypage .btn-help {
  position: sticky;
  bottom: 2.5rem;
  display: block;
  float: right;
  width: 3.125rem;
  height: 3.125rem;
  padding: .5rem 0;
  margin: 0;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: #33333b;
  border-radius: 50%;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
}

.mypage .btn-help:hover, .mypage .btn-help:focus, .mypage .btn-help:active {
  text-decoration: none;
}

.mypage .btn-help > img {
  margin-bottom: .25rem;
}

.mypage .btn-help > span {
  display: block;
  font-size: .5rem;
}

@media (max-width: 768.98px) {
  .mypage .form-buttons {
    text-align: center;
  }
  .mypage .form-buttons a {
    display: block;
    margin-top: 1.875rem;
  }
}

.mypage .exclude-message {
  display: none;
  padding: 2rem;
  background: #33333b;
  border-radius: 4px;
}

.mypage .exclude-message .arrow {
  position: absolute;
  left: -9px;
  border-top: 10px solid transparent;
  border-right: 10px solid #33333b;
  border-bottom: 10px solid transparent;
}

.mypage .exclude-message p {
  width: 14.375rem;
  margin-left: 10px;
  font-size: .75rem;
  line-height: 1rem;
  color: #fff;
}

.mypage .hr-black {
  display: block;
  width: 100%;
  border-bottom: 2px solid #33333b;
}

.mypage .coupon {
  background: #f5f5f5;
  border-radius: 30px;
}

@media (min-width: 769px) {
  .mypage .coupon {
    max-width: 34.25rem;
  }
}

.mypage .coupon-decoration-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

.mypage .coupon-decoration-right {
  position: absolute;
  top: 0;
  right: 0;
}

.mypage-account .step {
  margin-right: 2rem;
  line-height: 2.5rem;
}

@media (min-width: 769px) {
  .mypage-account .step {
    width: 20%;
    margin-right: 0;
  }
}

.mypage-account .btn-cancel {
  color: #767676;
  text-decoration: underline;
  cursor: pointer;
  background-color: transparent;
}

@media (max-width: 768.98px) {
  .mypage-orderhistory .payment {
    padding-top: 1.25rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid #ddd;
  }
  .mypage-orderhistory .payment .date,
  .mypage-orderhistory .payment .name,
  .mypage-orderhistory .payment .price,
  .mypage-orderhistory .payment .number,
  .mypage-orderhistory .payment .delivery,
  .mypage-orderhistory .payment .amount {
    display: flex;
    margin-bottom: .625rem;
  }
  .mypage-orderhistory .payment .date::before,
  .mypage-orderhistory .payment .name::before,
  .mypage-orderhistory .payment .price::before,
  .mypage-orderhistory .payment .number::before,
  .mypage-orderhistory .payment .delivery::before,
  .mypage-orderhistory .payment .amount::before {
    display: inline-block;
    min-width: 4rem;
    margin-right: 1.25rem;
    font-weight: 600;
    color: #A4A4AC;
  }
  .mypage-orderhistory .payment .date::before {
    content: "支払日";
  }
  .mypage-orderhistory .payment .name::before {
    content: "商品名";
  }
  .mypage-orderhistory .payment .price::before {
    content: "単価";
  }
  .mypage-orderhistory .payment .number::before {
    content: "数量";
  }
  .mypage-orderhistory .payment .delivery::before {
    content: "送料";
  }
  .mypage-orderhistory .payment .amount::before {
    content: "支払額";
  }
}
.mypage-orderhistory .payment .btn-history .modal-open{
  color:#1e1eff;
cursor: pointer;
}
.mypage-orderhistory .payment .btn-history .modal-open:hover{
  text-decoration: underline;
}

@media screen and (max-width:768.98px) {
  .mypage-orderhistory .payment .btn-history{
      padding: 0 0 0 5.25rem;
  }
}

@media (min-width: 769px) {
  .mypage-orderhistory .payment {
    margin-bottom: 1.25rem;
  }
  .mypage-orderhistory .payment:last-child {
    margin-bottom: 1.875rem;
  }
  .mypage-orderhistory .payment .date {
    width: 15%;
    padding-right: .75rem;
  }
  .mypage-orderhistory .payment .name {
    width: 40%;
    padding-right: 1rem;
  }
  .mypage-orderhistory .payment .price{
    width: 10%;
  }
  .mypage-orderhistory .payment .number{
    width: 8%;
  }
  .mypage-orderhistory .payment .delivery{
    width: 10%;
  }
  .mypage-orderhistory .payment .amount {
    width: 10%;
  }
  .mypage-orderhistory .payment .btn-history{
    width: 7%;
    padding: 0 .5rem 0 0;
    text-align: right;
  }
}

@media (min-width: 1024px) {
  .mypage-orderhistory .payment .date {
    width: 15%;
  }
  .mypage-orderhistory .payment .name {
    width: 40%;
  }
}

/*** 宛名入力モーダル Start ***/
.mypage-orderhistory .modal-container .tx-label{
  margin: 0;
}
.mypage-orderhistory .modal-container .companylabel-error{
  color: #ff0000;
}
.mypage-orderhistory .modal-container .input-label{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  margin: 1rem 0 1.5rem;
}
.mypage-orderhistory .modal-container .input-label p{
  display: flex;
  align-items: center;
  width: 2rem;
  margin: 0;
  padding: .5rem;
}
.mypage-orderhistory .modal-container .btn_area{
  margin: 0;
  text-align: center;
}
.mypage-orderhistory .companylabel{
  width: 340px;
  max-width: 100%;
  display: block;
  min-height: 3.4375rem;
  padding: 1rem 1.25rem;
  font-size: .875rem;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
}
@media screen and (max-width:768.98px) {
  .mypage-orderhistory .modal-cart .modal-container{
      width: 100%;
      max-width: 28rem;
  }
  .mypage-orderhistory .companylabel{
      width: 100%;
      max-width: 100%;
      display: block;
      min-height: 3.4375rem;
      padding: 1rem 1.25rem;
      font-size: .875rem;
      background: #fff;
      border: 1px solid #fff;
      border-radius: 4px;
      appearance: none;
      -webkit-appearance: none;
  }
}
/*** 宛名入力モーダル End ***/

.mypage-orderhistory .prev-page-btn,
.mypage-orderhistory .next-page-btn {
  padding: 0;
}

.mypage-orderhistory .prev-page-btn:disabled,
.mypage-orderhistory .next-page-btn:disabled {
  cursor: default;
}

.mypage-orderhistory .prev-page-btn:disabled svg > path,
.mypage-orderhistory .next-page-btn:disabled svg > path {
  stroke: #c4c4c4;
}

.mypage-orderhistory .prev-page-btn:focus,
.mypage-orderhistory .next-page-btn:focus {
  outline: 0;
}

.mypage-orderhistory .prev-page-btn img,
.mypage-orderhistory .next-page-btn img {
  vertical-align: initial;
}

.mypage-orderhistory .prev-page-btn svg {
  transform: rotateZ(180deg);
}

.mypage-orderhistory .step {
  margin-right: 2rem;
  line-height: 2.5rem;
}

@media (min-width: 769px) {
  .mypage-orderhistory .step {
    width: 20%;
    margin-right: 0;
  }
}

.mypage-no-plan-btn .btn {
  display: block;
  width: 100%;
  padding: 4.375rem 0;
  color: #33333b;
  background: #ebebeb;
  border-radius: 0;
}

@media (min-width: 769px) {
  .mypage-no-plan-btn .btn {
    padding: 6.875rem 0;
  }
}

.mypage-no-plan-btn .btn::before {
  width: 20%;
  height: 100%;
  background: #ddd;
}

.mypage-no-plan-btn .btn:hover::before, .mypage-no-plan-btn .btn:focus::before, .mypage-no-plan-btn .btn:active::before {
  width: 200%;
}

.mypage-status-trial h1 {
  position: relative;
  min-width: 12rem;
  padding-left: 1.125rem;
  margin-bottom: 1.875rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .05em;
}

@media (min-width: 769px) {
  .mypage-status-trial h1 {
    padding-left: 1.75rem;
    margin-bottom: 2.5rem;
    font-size: 1.25rem;
  }
}

.mypage-status-trial h1::before {
  position: absolute;
  top: .625rem;
  left: 0;
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .625rem;
  content: "";
  background: #33333b;
  border-radius: 50%;
}

@media (min-width: 769px) {
  .mypage-status-trial h1::before {
    font-size: 1.25rem;
  }
}

.mypage-status-trial button:disabled {
  cursor: default;
  background: #A4A4AC;
}

.mypage-status-trial button:disabled .text {
  color: #d7d7d7;
}

.mypage-status-trial .trial-course .course-header {
  padding-top: 3.75rem;
}

.mypage-status-trial .trial-course:first-child .course-header {
  padding-top: 0;
}

.mypage-status-trial .step {
  margin-right: 2rem;
  line-height: 2.5rem;
}

@media (min-width: 769px) {
  .mypage-status-trial .step {
    width: 20%;
    margin-right: 0;
  }
}

.mypage-status-trial .step-line {
  display: block;
  margin-bottom: .375rem;
  line-height: 1;
}

.mypage-status-trial .step-line span {
  display: inline-block;
  width: .125rem;
  height: 1rem;
  margin-right: 2.375rem;
  background: #7DE5D4;
}

.mypage-status-trial .step-line span:first-child {
  background: #26e8ff;
}

.mypage-status-trial .step-line span:last-child {
  margin-right: 0;
  background: #DEF960;
}

@media (min-width: 769px) {
  .mypage-status-trial .item-name {
    width: 6.5rem;
  }
}

.mypage-status-trial .label-title {
  min-width: 9.6875rem;
}

.mypage-status-trial .border {
  width: 100%;
  height: 1px;
  background: #ddd;
}

.mypage-status-trial .no {
  position: absolute;
  top: -5px;
  left: 0;
  line-height: 1;
}

.mypage-status-trial .image {
  position: relative;
  width: 7.5rem;
  height: 100%;
}

@media (min-width: 769px) {
  .mypage-status-trial .image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    text-align: center;
  }
}

.mypage-status-trial .image,
.mypage-status-trial .types {
  position: relative;
}

.mypage-status-trial .image::before, .mypage-status-trial .image::after,
.mypage-status-trial .types::before,
.mypage-status-trial .types::after {
  position: absolute;
  top: 50%;
  display: block;
  width: 1px;
  height: 1.25rem;
  margin-top: -.625rem;
  background: #ddd;
}

.mypage-status-trial .image::before,
.mypage-status-trial .types::before {
  left: 0;
}

.mypage-status-trial .image::after,
.mypage-status-trial .types::after {
  right: 0;
}

.mypage-status-trial .types {
  white-space: nowrap;
}

.mypage-status-trial .trialterm {
  max-width: 4rem;
}

@media (min-width: 360px) {
  .mypage-status-trial .trial-price {
    padding-right: 1rem;
  }
}

.mypage-status-trial .btn-small {
  width: 100%;
  min-height: 3.125rem;
  padding-top: .875rem;
  padding-bottom: .875rem;
}

@media (min-width: 769px) {
  .mypage-status-trial .btn-small {
    width: auto;
    padding-right: 3.875rem;
    padding-left: 3.875rem;
  }
}

.mypage-status-trial .confirm-item {
  border: 1px solid #ddd;
}

@media (min-width: 769px) {
  .mypage-status-trial .confirm-item {
    width: calc(50% - .9375rem);
    height: 21.5rem;
  }
  .mypage-status-trial .confirm-item .confirm-item-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .mypage-status-trial .confirm-item:nth-child(2n + 1) {
    margin-right: .9375rem;
  }
  .mypage-status-trial .confirm-item:nth-child(2n) {
    margin-left: .9375rem;
  }
}

.mypage-status-trial .confirm-item--close {
  height: auto;
}

@media (min-width: 769px) {
  .mypage-status-trial .image::before, .mypage-status-trial .image::after {
    content: "";
  }
  .mypage-status-trial .types::after {
    content: "";
  }
  .mypage-status-trial .trialterm {
    max-width: 100%;
  }
}

.mypage-status-subscribe h1 {
  position: relative;
  min-width: 12rem;
  padding-left: 1.125rem;
  margin-bottom: 1.875rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .05em;
}

@media (min-width: 769px) {
  .mypage-status-subscribe h1 {
    padding-left: 1.75rem;
    margin-bottom: 2.5rem;
    font-size: 1.25rem;
  }
}

.mypage-status-subscribe h1::before {
  position: absolute;
  top: .625rem;
  left: 0;
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .625rem;
  content: "";
  background: #33333b;
  border-radius: 50%;
}

@media (min-width: 769px) {
  .mypage-status-subscribe h1::before {
    font-size: 1.25rem;
  }
}

.mypage-status-subscribe button:disabled {
  cursor: default;
  background: #A4A4AC;
}

.mypage-status-subscribe button:disabled .text {
  color: #d7d7d7;
}

.mypage-status-subscribe .cancel-btn {
  display: block;
  padding: 0;
  margin: 0;
  color: #1e1eff;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
}

.mypage-status-subscribe .cancel-btn:hover {
  text-decoration: underline;
}

.mypage-status-subscribe .subscribe-course .course-header {
  padding-top: 5rem;
}

@media (min-width: 769px) {
  .mypage-status-subscribe .subscribe-course .course-header {
    padding-top: 3.75rem;
  }
}

.mypage-status-subscribe .subscribe-course:first-child .course-header {
  padding-top: 0;
}

.mypage-status-subscribe .step {
  margin-right: 2rem;
  line-height: 2.5rem;
}

@media (min-width: 769px) {
  .mypage-status-subscribe .step {
    width: 20%;
    margin-right: 0;
  }
}

.mypage-status-subscribe .border {
  width: 100%;
  height: 1px;
  background: #ddd;
}

.mypage-status-subscribe .image {
  position: relative;
  width: 7.5rem;
  height: 100%;
}

@media (min-width: 769px) {
  .mypage-status-subscribe .image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    text-align: center;
  }
}

.mypage-status-subscribe .image,
.mypage-status-subscribe .types {
  position: relative;
}

@media (min-width: 769px) {
  .mypage-status-subscribe .image::before, .mypage-status-subscribe .image::after,
  .mypage-status-subscribe .types::before,
  .mypage-status-subscribe .types::after {
    position: absolute;
    top: 50%;
    display: block;
    width: 1px;
    height: 1.25rem;
    margin-top: -.625rem;
    content: " ";
    background: #ddd;
  }
  .mypage-status-subscribe .image::before,
  .mypage-status-subscribe .types::before {
    left: 0;
  }
  .mypage-status-subscribe .image::after,
  .mypage-status-subscribe .types::after {
    right: 0;
  }
}

.mypage-status-subscribe .types {
  white-space: nowrap;
}

@media (min-width: 769px) {
  .mypage-status-subscribe .types::before {
    width: 0;
  }
}

@media (min-width: 769px) {
  .mypage-status-subscribe .receipt {
    max-width: 29.25rem;
  }
}

.mypage-status-subscribe .btn-small {
  width: 100%;
  min-height: 3.125rem;
  padding-top: .875rem;
  padding-bottom: .875rem;
}

@media (min-width: 769px) {
  .mypage-status-subscribe .btn-small {
    width: 15rem;
  }
}

@media (min-width: 769px) {
  .mypage-status-subscribe .item-name {
    width: 6.5rem;
  }
}

@media (min-width: 769px) {
  .mypage-status-subscribe .item-name-down {
    width: 6.5rem;
  }
}

.mypage-status-subscribe .label-title {
  width: 7.5rem;
}

@media (min-width: 769px) {
  .mypage-status-subscribe .label-title {
    width: 11.625rem;
  }
}

.mypage-status-subscribe .status {
  padding: .3125rem 1.25rem;
  background-color: #7DE5D4;
  border-radius: 50px;
}

.mypage-status-subscribe .disable-btn {
  cursor: pointer !important;
}

.mypage-status-subscribe .disable-btn button {
  z-index: -10;
}

.mypage-status-subscribe .delivery-status {
  padding: .3125rem 1.25rem;
  background-color: #ebebeb;
  border-radius: 50px;
}

@media (min-width: 769px) {
  .mypage-status-subscribe .delivery-date-title {
    order: 1;
  }
  .mypage-status-subscribe .delivery-status-container {
    order: 2;
  }
  .mypage-status-subscribe .switch-btn {
    order: 1;
  }
  .mypage-status-subscribe .switch-alert-btn {
    order: 2;
  }
}

.mypage-status-subscribe .hint-message,
.mypage-status-subscribe .hint-message-alt {
  position: absolute;
  bottom: 100%;
  margin-bottom: 1rem;
  padding: 2rem;
  background: #282830;
  border-radius: .25rem;
}

@media (min-width: 769px) {
  .mypage-status-subscribe .hint-message,
  .mypage-status-subscribe .hint-message-alt {
    top: 50%;
    left: calc(100% + 1rem);
    width: 18.75rem;
    bottom: auto;
    margin-right: 2rem;
    margin-bottom: 0;
    transform: translateY(-50%);
  }
}

.mypage-status-subscribe .hint-message .arrow,
.mypage-status-subscribe .hint-message-alt .arrow {
  position: absolute;
  bottom: -14px;
  left: 50%;
  border-top: 10px solid #282830;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translate(-50%, -50%);
}

@media (min-width: 769px) {
  .mypage-status-subscribe .hint-message .arrow,
  .mypage-status-subscribe .hint-message-alt .arrow {
    top: 50%;
    right: auto;
    bottom: auto;
    left: -4px;
    border-top: 10px solid transparent;
    border-right: 10px solid #282830;
    border-bottom: 10px solid transparent;
    border-left: 0;
  }
}
.mypage-status-subscribe .pointer {
  border: none;
  background-color: transparent;
  cursor: pointer;
  text-align: start;
  padding-left: 0;
  color: #33333b;
}

.mypage-status-newpurchase h1 {
  position: relative;
  min-width: 12rem;
  padding-left: 1.125rem;
  margin-bottom: 1.875rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
@media (min-width: 769px) {
  .mypage-status-newpurchase h1 {
    padding-left: 1.75rem;
    margin-bottom: 2.5rem;
    font-size: 1.25rem;
  }
}
.mypage-status-newpurchase h1::before {
  position: absolute;
  top: 0.625rem;
  left: 0;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.625rem;
  content: "";
  background: #33333b;
  border-radius: 50%;
}
@media (min-width: 769px) {
  .mypage-status-newpurchase h1::before {
    font-size: 1.25rem;
  }
}
.mypage-status-newpurchase button:disabled {
  cursor: default;
  background: #A4A4AC;
}
.mypage-status-newpurchase button:disabled .text {
  color: #d7d7d7;
}
.mypage-status-newpurchase .cancel-btn {
  display: block;
  padding: 0;
  margin: 0;
  color: #1e1eff;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
}
.mypage-status-newpurchase .cancel-btn:hover {
  text-decoration: underline;
}
.mypage-status-newpurchase .newpurchase-course .course-header {
  padding-top: 5rem;
}
@media (min-width: 769px) {
  .mypage-status-newpurchase .newpurchase-course .course-header {
    padding-top: 3.75rem;
  }
}
.mypage-status-newpurchase .newpurchase-course:first-child .course-header {
  padding-top: 0;
}
.mypage-status-newpurchase .step {
  margin-right: 2rem;
  line-height: 2.5rem;
}
@media (min-width: 769px) {
  .mypage-status-newpurchase .step {
    width: 20%;
    margin-right: 0;
  }
}
.mypage-status-newpurchase .border {
  width: 100%;
  height: 1px;
  background: #ddd;
}
.mypage-status-newpurchase .image {
  position: relative;
  width: 7.5rem;
  height: 100%;
}
@media (min-width: 769px) {
  .mypage-status-newpurchase .image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    text-align: center;
  }
}
.mypage-status-newpurchase .image,
.mypage-status-newpurchase .types {
  position: relative;
}
@media (min-width: 769px) {
  .mypage-status-newpurchase .image::before, .mypage-status-newpurchase .image::after,
.mypage-status-newpurchase .types::before,
.mypage-status-newpurchase .types::after {
    position: absolute;
    top: 50%;
    display: block;
    width: 1px;
    height: 1.25rem;
    margin-top: -0.625rem;
    content: " ";
    background: #ddd;
  }
  .mypage-status-newpurchase .image::before,
.mypage-status-newpurchase .types::before {
    left: 0;
  }
  .mypage-status-newpurchase .image::after,
.mypage-status-newpurchase .types::after {
    right: 0;
  }
}
.mypage-status-newpurchase .types {
  white-space: nowrap;
}
@media (min-width: 769px) {
  .mypage-status-newpurchase .types::before {
    width: 0;
  }
}
@media (min-width: 769px) {
  .mypage-status-newpurchase .receipt {
    max-width: 29.25rem;
  }
}
.mypage-status-newpurchase .btn-small {
  width: 100%;
  min-height: 3.125rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
@media (min-width: 769px) {
  .mypage-status-newpurchase .btn-small {
    width: 15rem;
  }
}
@media (min-width: 769px) {
  .mypage-status-newpurchase .item-name {
    width: 6.5rem;
  }
}
@media (min-width: 769px) {
  .mypage-status-newpurchase .item-name-down {
    width: 6.5rem;
  }
}
.mypage-status-newpurchase .label-title {
  width: 7.5rem;
}
@media (min-width: 769px) {
  .mypage-status-newpurchase .label-title {
    width: 11.625rem;
  }
}
.mypage-status-newpurchase .status {
  padding: 0.3125rem 1.25rem;
  background-color: #7DE5D4;
  border-radius: 50px;
}
.mypage-status-newpurchase .disable-btn {
  cursor: pointer !important;
}
.mypage-status-newpurchase .disable-btn button {
  z-index: -10;
}
.mypage-status-newpurchase .delivery-status {
  padding: 0.3125rem 1.25rem;
  background-color: #ebebeb;
  border-radius: 50px;
}
@media (min-width: 769px) {
  .mypage-status-newpurchase .delivery-date-title {
    order: 1;
  }
  .mypage-status-newpurchase .delivery-status-container {
    order: 2;
  }
  .mypage-status-newpurchase .switch-btn {
    order: 1;
  }
  .mypage-status-newpurchase .switch-alert-btn {
    order: 2;
  }
}
.mypage-status-newpurchase .hint-message,
.mypage-status-newpurchase .hint-message-alt {
  position: absolute;
  bottom: 100%;
  margin-bottom: 1rem;
  padding: 2rem;
  background: #282830;
  border-radius: 0.25rem;
}
@media (min-width: 769px) {
  .mypage-status-newpurchase .hint-message,
.mypage-status-newpurchase .hint-message-alt {
    top: 50%;
    left: calc(100% + 1rem);
    width: 18.75rem;
    bottom: auto;
    margin-right: 2rem;
    margin-bottom: 0;
    transform: translateY(-50%);
  }
}
.mypage-status-newpurchase .hint-message .arrow,
.mypage-status-newpurchase .hint-message-alt .arrow {
  position: absolute;
  bottom: -14px;
  left: 50%;
  border-top: 10px solid #282830;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translate(-50%, -50%);
}
@media (min-width: 769px) {
  .mypage-status-newpurchase .hint-message .arrow,
.mypage-status-newpurchase .hint-message-alt .arrow {
    top: 50%;
    right: auto;
    bottom: auto;
    left: -4px;
    border-top: 10px solid transparent;
    border-right: 10px solid #282830;
    border-bottom: 10px solid transparent;
    border-left: 0;
  }
}
.mypage-status-newpurchase .pointer {
  border: none;
  background-color: transparent;
  cursor: pointer;
  text-align: start;
  padding-left: 0;
  color: #33333b;
}

.mypage-status-cleaning h1 {
  position: relative;
  min-width: 12rem;
  padding-left: 1.125rem;
  margin-bottom: 1.875rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .05em;
}

@media (min-width: 769px) {
  .mypage-status-cleaning h1 {
    padding-left: 1.75rem;
    margin-bottom: 2.5rem;
    font-size: 1.25rem;
  }
}

.mypage-status-cleaning h1::before {
  position: absolute;
  top: .625rem;
  left: 0;
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .625rem;
  content: "";
  background: #33333b;
  border-radius: 50%;
}

@media (min-width: 769px) {
  .mypage-status-cleaning h1::before {
    font-size: 1.25rem;
  }
}

.mypage-status-cleaning .cleaning-course .course-header {
  padding-top: 5rem;
}

@media (min-width: 769px) {
  .mypage-status-cleaning .cleaning-course .course-header {
    padding-top: 3.75rem;
  }
}

.mypage-status-cleaning .cleaning-course:first-child .course-header {
  padding-top: 0;
}

.mypage-status-cleaning .step {
  margin-right: 2rem;
  line-height: 2.5rem;
}

@media (min-width: 769px) {
  .mypage-status-cleaning .step {
    width: 20%;
    margin-right: 0;
  }
}

@media (min-width: 769px) {
  .mypage-status-cleaning .item-name {
    width: 6.5rem;
  }
}

.mypage-status-cleaning .label-title {
  width: 7.5rem;
}

@media (min-width: 769px) {
  .mypage-status-cleaning .label-title {
    width: 11.625rem;
  }
}

.mypage-status-cleaning .border {
  width: 100%;
  height: 1px;
  background: #ddd;
}

.mypage-status-cleaning .btn-small {
  width: auto;
  height: 1.625rem;
  padding: 0;
  margin-left: 1.875rem;
  line-height: 1.5rem;
  color: #33333b;
  background: #ebebeb;
  border-radius: 99em;
}

.mypage-status-cleaning .btn-small .text {
  display: flex;
  height: 1.625rem;
  padding: 0 1rem;
}

.mypage-status-cleaning .btn-small .text > span {
  display: inline-block;
  padding: .25rem 0;
  line-height: 1.125rem;
}

.mypage-status-cleaning .btn-small img {
  display: block;
  width: .75rem;
  height: 1.625rem;
  margin-right: .375rem;
  object-fit: contain;
}

.mypage-status-cleaning .btn-small::before {
  height: 1.625rem;
  background: #ddd;
}

.mypage-status-cleaning .btn-small--disable .text {
  opacity: .4;
}

.mypage-status-cleaning .delivery-status {
  padding: .3125rem 1.25rem;
  background-color: #ebebeb;
  border-radius: 50px;
}

.mypage-status-cleaning .info {
  max-width: 39rem;
}

.mypage-status-cleaning .info-area {
  height: 13.75rem;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  overflow-y: scroll;
  background-color: #f5f5f5;
  border: 1px solid #ebebeb;
  border-radius: 4px;
}

@media (min-width: 769px) {
  .mypage-status-cleaning .info-area {
    max-height: 12.5rem;
    padding-right: 1.875rem;
    padding-left: 1.875rem;
  }
}

.mypage-status-cleaning .info-area > div:first-child {
  margin-top: 1.25rem;
}

@media (min-width: 769px) {
  .mypage-status-cleaning .info-area > div:first-child {
    margin-top: 1.875rem;
  }
}

.mypage-status-cleaning .info-area > div:last-child {
  margin-bottom: 1.25rem !important;
}

@media (min-width: 769px) {
  .mypage-status-cleaning .info-area > div:last-child {
    margin-bottom: 1.875rem !important;
  }
}

@media (min-width: 769px) {
  .mypage-status-cleaning .form-btn {
    width: 15rem;
  }
}

.mypage-status-cleaning .btn-cancel {
  color: #767676;
  text-decoration: underline;
  cursor: pointer;
  background-color: transparent;
}

.nocontract-nosubscription-submit .btn {
  display: block;
  width: 100%;
  padding: 4.375rem 0;
  color: #33333b;
  background: #ebebeb;
  border-radius: 0;
}

.nocontract-nosubscription-submit .btn::before {
  width: 20%;
  height: 100%;
  background: #ddd;
}

.nocontract-nosubscription-submit .btn:hover::before, .nocontract-nosubscription-submit .btn:focus::before, .nocontract-nosubscription-submit .btn:active::before {
  width: 200%;
}

@media (min-width: 769px) {
  .nocontract-nosubscription-submit .btn {
    padding: 6.875rem 0;
  }
}
.mypage-after-service h1 {
  position: relative;
  min-width: 12rem;
  padding-left: 1.125rem;
  margin-bottom: 1.875rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
@media (min-width: 769px) {
  .mypage-after-service h1 {
    padding-left: 1.75rem;
    margin-bottom: 2.5rem;
    font-size: 1.25rem;
  }
}
.mypage-after-service h1::before {
  position: absolute;
  top: 0.625rem;
  left: 0;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.625rem;
  content: "";
  background: #33333b;
  border-radius: 50%;
}
@media (min-width: 769px) {
  .mypage-after-service h1::before {
    font-size: 1.25rem;
  }
}
.mypage-after-service h2 {
  font-size: 1rem;
  font-weight: 700;
}
.mypage-after-service h3, .mypage-after-service h4 {
  font-size: 0.875rem;
  font-weight: 700;
}
.mypage-after-service .border {
  width: 100%;
  border-top: 1px solid #d7d7d7;
}
.mypage-after-service .contents-container {
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 20px;
}
.mypage-after-service .accordion-container .title-block {
  display: flex;
  align-items: center;
}
.mypage-after-service .accordion-container .title-block h2 {
  margin-bottom: 0;
  width: 50%;
}
.mypage-after-service .accordion-container .title-block .chevron-wrapper {
  width: 50%;
  padding-left: 60px;
}
.mypage-after-service .step {
  width: 20%;
}
.mypage-after-service .price-table tr {
  height: 40px;
}
.mypage-after-service .price-table th {
  background-color: #767676;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  text-align: center;
  width: 25%;
  border: 1px solid #767676;
  border-collapse: collapse;
}
@media (min-width: 769px) {
  .mypage-after-service .price-table th {
    font-size: 0.875rem;
  }
}
.mypage-after-service .price-table td {
  font-size: 0.75rem;
  text-align: center;
  border: 1px solid #767676;
  border-collapse: collapse;
  width: 25%;
  padding: 0;
}
@media (min-width: 769px) {
  .mypage-after-service .price-table td {
    font-size: 0.875rem;
  }
}
.mypage-after-service .repair-warranty-table {
  overflow-x: auto;
  scroll-behavior: smooth;
  display: block;
}
.mypage-after-service .repair-warranty-table th:nth-child(1), .mypage-after-service .repair-warranty-table td:nth-child(1) {
  min-width: 160px;
}
.mypage-after-service .repair-warranty-table th:nth-child(2), .mypage-after-service .repair-warranty-table td:nth-child(2) {
  min-width: 290px;
}
.mypage-after-service .repair-warranty-table th:nth-child(3), .mypage-after-service .repair-warranty-table td:nth-child(3) {
  min-width: 70px;
}
.mypage-after-service .repair-warranty-table th:nth-child(4), .mypage-after-service .repair-warranty-table td:nth-child(4) {
  min-width: 70px;
}
.mypage-after-service .repair-warranty-table th:nth-child(5), .mypage-after-service .repair-warranty-table td:nth-child(5) {
  min-width: 300px;
}
@media (min-width: 769px) {
  .mypage-after-service .repair-warranty-table th:nth-child(1), .mypage-after-service .repair-warranty-table td:nth-child(1) {
    min-width: unset;
    width: 18%;
  }
  .mypage-after-service .repair-warranty-table th:nth-child(2), .mypage-after-service .repair-warranty-table td:nth-child(2) {
    min-width: unset;
    width: 33%;
  }
  .mypage-after-service .repair-warranty-table th:nth-child(3), .mypage-after-service .repair-warranty-table td:nth-child(3) {
    min-width: unset;
    width: 8.2%;
  }
  .mypage-after-service .repair-warranty-table th:nth-child(4), .mypage-after-service .repair-warranty-table td:nth-child(4) {
    min-width: unset;
    width: 8.2%;
  }
  .mypage-after-service .repair-warranty-table th:nth-child(5), .mypage-after-service .repair-warranty-table td:nth-child(5) {
    min-width: unset;
    width: 32.6%;
  }
}
.mypage-after-service .repair-warranty-table th {
  background-color: #767676;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  text-align: center;
  height: 40px;
  border: 1px solid #767676;
  border-collapse: collapse;
}
@media (min-width: 769px) {
  .mypage-after-service .repair-warranty-table th {
    font-size: 0.875rem;
  }
}
.mypage-after-service .repair-warranty-table td {
  height: 98px;
  font-size: 0.75rem;
  border: 1px solid #767676;
  border-collapse: collapse;
  padding: 0;
}
@media (min-width: 769px) {
  .mypage-after-service .repair-warranty-table td {
    font-size: 0.875rem;
  }
}
.mypage-after-service .repair-warranty-table td:nth-child(1) {
  padding: 0 38px;
}
.mypage-after-service .repair-warranty-table td:nth-child(2) {
  padding: 0 20px;
}
.mypage-after-service .repair-warranty-table td:nth-child(3) {
  text-align: center;
}
.mypage-after-service .repair-warranty-table td:nth-child(4) {
  text-align: center;
}
.mypage-after-service .repair-warranty-table td:nth-child(5) {
  padding: 0 20px;
}
.mypage-after-service .black-circle {
  background-color: #33333b;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.mypage-after-service .after-service-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 769px) {
  .mypage-after-service .after-service-container {
    flex-direction: row;
    justify-content: space-between;
  }
}
.mypage-after-service .after-service-main-contents {
  display: flex;
  justify-content: flex-end;
}
.mypage-after-service .after-service-main-contents > div {
  max-width: 58.375rem;
}

.help-surface .account-main-content {
  max-width: 35rem;
  margin-left: 0;
}

@media (max-width: 768.98px) {
  .help-surface .metabar {
    background: #ebebeb;
  }
  .help-surface .account-main {
    display: flex;
    flex-direction: column;
  }
  .help-surface .breadcrumbs {
    order: 2;
    margin-top: 1rem;
  }
  .help-surface .account-main-content {
    order: 3;
  }
  .help-surface .account-navigation {
    position: sticky;
    top: 3.125rem;
    z-index: 1;
    order: 1;
    margin: 0 -1rem;
  }
  .help-surface .account-navigation .account-navigation-login {
    padding-left: 0;
  }
  .help-surface .account-navigation .account-navigation-login::before, .help-surface .account-navigation .account-navigation-login::after {
    display: none;
  }
  .help-surface .account-navigation ul {
    display: flex;
    align-items: center;
    width: 100%;
    background: #ebebeb;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  .help-surface .account-navigation li {
    position: relative;
    width: 33.33333333%;
    margin: 0;
  }
  .help-surface .account-navigation li.half {
    width: 50%;
  }
  .help-surface .account-navigation li a {
    height: 2.5rem;
    line-height: calc(2.5rem - 1px);
    text-align: center;
  }
  .help-surface .account-navigation li + li::before {
    position: absolute;
    top: .75rem;
    left: 0;
    display: block;
    height: .875rem;
    content: "";
    border-left: 1px solid #ddd;
  }
  .help-surface .register-submit {
    margin-right: auto;
    margin-left: auto;
  }
  .help-surface .form-buttons {
    text-align: center;
  }
  .help-surface .form-buttons a {
    display: block;
    margin-top: 1.875rem;
  }
}

.help-content {
  position: relative;
}

.help-content .info-main .info-main-content {
  max-width: 35rem;
}

.help-content .info-main h1 {
  position: relative;
  padding-bottom: 2.5rem;
  margin-bottom: 2.375rem;
  line-height: 1.1;
  color: #ddd;
}

.help-content .info-main h1 span + span {
  margin-top: .625rem;
}

.help-content .info-main h1::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 20px;
  height: 2px;
  content: "";
  background: #33333b;
}

.help-content .info-main .form-control {
  margin-bottom: 1.25rem;
}

@media (max-width: 768.98px) {
  .help-content .account-main-content {
    width: 100%;
  }
}

@media (min-width: 769px) {
  .help-content::before, .help-content::after {
    position: sticky;
    display: block;
    content: "";
  }
  .help-content::before {
    top: 0;
    width: 100%;
    height: 19.5rem;
    margin-top: -6.25rem;
    background: transparent url(/common/images/account-bg-t.svg) 100% 0 no-repeat;
  }
  .help-content::after {
    bottom: 0;
    width: 40rem;
    height: 9rem;
    margin-top: -9rem;
    background: transparent url(/common/images/account-bg-b.svg) 0 100% no-repeat;
  }
  .help-content .content {
    margin-top: -13.25rem;
  }
}

.help-content .info-list {
  border-top: 1px solid #ddd;
}

.help-content .info-list a {
  color: #33333b;
  transition: background .2s ease-in-out;
}

.help-content .info-list a:hover {
  text-decoration: none;
}

.help-content .info-list > li > a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 4rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid #ddd;
}

@media (min-width: 769px) {
  .help-content .info-list > li > a {
    min-height: 5rem;
    padding: 1.75rem 0;
  }
}

.help-content .info-list > li > a span {
  display: block;
  flex: 1 1 auto;
}

.help-content .info-list > li > a::before, .help-content .info-list > li > a::after {
  display: block;
  flex: 0 0 auto;
  content: "";
}

.help-content .info-list > li > a::before {
  width: .375rem;
  height: .375rem;
  margin-right: 1.25rem;
  background: #33333b;
  border-radius: 50%;
}

.help-content .info-list > li > a::after {
  width: 1.125rem;
  height: .625rem;
  margin-right: .625rem;
  margin-left: 1rem;
  background: transparent url(/common/images/chevron-down.svg) center center no-repeat;
  opacity: .45;
}

.help-content .info-list-sub {
  display: none;
  border-bottom: 1px solid #ddd;
}

.help-content .info-list-sub > li > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.375rem;
  padding: .75rem 0 .75rem 1.625rem;
}

.help-content .info-list-sub > li > a::after {
  display: block;
  flex: 0 0 auto;
  width: .875rem;
  height: .75rem;
  margin-right: .625rem;
  margin-left: 1.25rem;
  content: "";
  background: transparent url(/common/images/arrow-right.svg) center center no-repeat;
  background-size: .875rem .75rem;
  opacity: .35;
  transition: .2s ease;
}

.help-content .info-list-sub > li > a:hover {
  background: #f5f5f5;
}

.help-content .info-list-sub > li > a:hover::after {
  opacity: 1;
}

.help-content .info-list > li.active > a::after {
  transform: rotate(180deg);
}

.help-content .info-list > li.active .info-list-sub {
  display: block;
}

.help-content .link-container {
  position: static;
  z-index: 10;
}

.help-content .phone-area {
  border: solid #ddd;
  border-width: 1px 0 1px;
}

@media (min-width: 769px) {
  .help-content .phone-area {
    align-items: center;
  }
}

.help-content .phone-area img {
  vertical-align: baseline;
}

.help-content .divider {
  height: .875rem;
  border-left: 1px solid #ddd;
}

.help-content .label-file {
  position: relative;
  display: inline-block;
  width: 11.25rem;
  height: 2.5rem;
  line-height: calc(2.5rem - 3px);
  text-align: center;
  cursor: pointer;
  background: #ddd;
  border-radius: 99em;
}

.help-content .label-file::before {
  background: #f5f5f5;
}

.help-content .label-file input {
  position: absolute;
  width: 100%;
  visibility: hidden;
  opacity: 0;
}

.help-content .file-name {
  max-width: 11.25rem;
}

.help-content .choices__inner {
  padding: .75rem 1.25rem !important;
  font-size: .875rem;
  background: #fff;
  border: 1px solid #fff;
}

.help-content .choices__list--dropdown .choices__item {
  padding: .5rem 1.25rem;
  color: #fff;
}

.help-content .form-control .choices__list--single {
  padding: 0 .625rem 0 0;
}

.help-content .choices[data-type*="select-one"].is-open::after {
  border-color: transparent #33333b #33333b transparent;
}

.help-content .form-control .selectbox::after {
  display: none;
}

.help-content .form-control .choices__list--single .choices__item {
  line-height: 1.875rem;
}

.help-content .input.confirm {
  background: transparent;
  border-color: #ddd;
}

.news-list {
  border-top: 1px solid #ddd;
}

.news-list .news {
  position: relative;
  border-bottom: 1px solid #ddd;
}

.news-list .news a {
  width: 100%;
  padding: 1.25rem 0;
  overflow: hidden;
  transition: background .2s ease-in-out;
}

.news-list .news a:hover {
  text-decoration: none;
  background: #f5f5f5;
}

.news-list-footer .left {
  transform: rotate(180deg);
}

.news-list-footer a.disabled {
  pointer-events: none;
  cursor: auto;
  opacity: .5;
}

.news-list-footer .page {
  margin: 0 1.125rem;
}

.news-list-footer img {
  vertical-align: baseline;
}

.user-guide-content h1 {
  margin-bottom: 1.875rem;
}

@media (min-width: 769px) {
  .user-guide-content h1 {
    margin-bottom: 2.5rem;
  }
}

.user-guide-content h2 {
  padding-bottom: 1.875rem;
  margin-bottom: 1.875rem;
  border-bottom: 1px solid #ddd;
}

@media (min-width: 769px) {
  .user-guide-content h2 {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
  }
}

.user-guide-content .steps .row {
  margin-bottom: 1.875rem;
}

@media (min-width: 769px) {
  .user-guide-content .steps .row {
    margin-bottom: 2.5rem;
  }
}

.user-guide-content .steps .step {
  width: 5.25rem;
}

@media (min-width: 769px) {
  .user-guide-content .steps .step {
    width: 5.75rem;
  }
}

.user-guide-content .steps .step-content {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #ddd;
}

@media (min-width: 769px) {
  .user-guide-content .steps .step-content {
    padding-bottom: 2.75rem;
  }
}

.user-guide-content .steps .row:last-child {
  border-bottom: 1px solid #ddd;
}

.user-guide-content .steps .row:last-child .step-content {
  border-bottom: 0;
}

.user-guide-content .steps h3 {
  margin-bottom: .625rem;
  font-size: 1rem;
  font-weight: 700;
}

.user-guide-content .steps p {
  margin-bottom: 1.25rem;
  font-size: .875rem;
}

@media (min-width: 769px) {
  .user-guide-content .steps p {
    margin-bottom: 1.875rem;
  }
}

.user-guide-content .steps .images {
  margin-right: -1rem;
  margin-left: -1rem;
}

@media (min-width: 769px) {
  .user-guide-content .steps .images {
    display: flex;
    flex-wrap: wrap;
  }
}

.user-guide-content .steps .image {
  width: 10.75rem;
  padding: 0 1rem 1rem;
}

@media (min-width: 769px) {
  .user-guide-content .steps .image {
    width: 50%;
  }
}

.user-guide-content .steps .image img {
  width: 100%;
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.08);
}

.faq-content .answer-content {
  padding-top: .75rem;
}

.faq-content .table {
  border-top: 1px solid #ddd;
}

.faq-content .dl {
  padding: 1.25rem 0;
  font-size: .875rem;
  border-bottom: 1px solid #ddd;
}

@media (min-width: 769px) {
  .faq-content .dl {
    display: flex;
    align-items: center;
  }
}

.faq-content .dt {
  margin-bottom: .3125rem;
  font-weight: 700;
  color: #c4c4c4;
}

@media (min-width: 769px) {
  .faq-content .dt {
    width: 7.75rem;
    height: 1rem;
    margin-right: 2.5rem;
    margin-bottom: 0;
    line-height: calc(1rem - 1px);
    border-right: 1px solid #ddd;
  }
}

.faq-content .dd ul {
  padding: 0;
  list-style: none;
}

.faq-content .dd li {
  padding-left: 1.25rem;
}

.faq-content .dd li::before {
  display: inline-block;
  margin-left: -1.25rem;
  content: "・";
}

.faq-content .dd .small {
  font-size: .75rem;
  color: #767676;
}

.info-breadcrumb {
  margin-top: .25rem;
}

@media (min-width: 769px) {
  .info-breadcrumb {
    position: absolute;
    z-index: 100;
    height: 100%;
  }
}

.info-breadcrumbs {
  margin-bottom: 1.25rem;
}

@media (min-width: 769px) {
  .info-breadcrumbs {
    position: sticky;
    top: 6.5rem;
    margin-bottom: 0;
  }
  .info-breadcrumbs ol {
    margin-left: 1.25rem;
    white-space: nowrap;
  }
}

.info-breadcrumbs li {
  display: inline-block;
  margin: 0 .25rem;
}

.info-breadcrumbs li + li {
  margin-left: 0;
}

.info-breadcrumbs li + li::before {
  display: inline-block;
  margin-right: .25rem;
  font-family: "Montserrat", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  font-weight: 500;
  color: #c4c4c4;
  content: " > ";
}

.info-breadcrumbs a {
  color: #33333b;
}

.info-breadcrumbs .product-navigation .active a > span {
  color: #33333b;
}

.info-breadcrumbs .product-navigation .active .dot {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
  background: rgba(125, 229, 212, 0.15);
  border-radius: 9999px;
}

.info-breadcrumbs .product-navigation .active .dot::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .625rem;
  height: .625rem;
  content: "";
  background: #7DE5D4;
  border-radius: 9999px;
  transform: translateX(-50%) translateY(-50%);
}

.info-breadcrumbs .product-navigation a > span {
  color: #A4A4AC;
}

.info-breadcrumbs .product-navigation .dot {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
  background: transparent;
  border-radius: 9999px;
}

.info-breadcrumbs .product-navigation .dot::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .625rem;
  height: .625rem;
  content: "";
  background: #ddd;
  border-radius: 9999px;
  transform: translateX(-50%) translateY(-50%);
}

.info-breadcrumbs .dot {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
  background: transparent;
  border-radius: 9999px;
}

.info-breadcrumbs .dot::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .625rem;
  height: .625rem;
  content: "";
  background: #ddd;
  border-radius: 9999px;
  transform: translateX(-50%) translateY(-50%);
}

.info-breadcrumbs .dot-active {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
  background: rgba(125, 229, 212, 0.15);
  border-radius: 9999px;
}

.info-breadcrumbs .dot-active::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .625rem;
  height: .625rem;
  content: "";
  background: #7DE5D4;
  border-radius: 9999px;
  transform: translateX(-50%) translateY(-50%);
}

.info-breadcrumbs-wrap,
.info-breadcrumbs-wrap--scroll {
  position: sticky;
  top: 3.125rem;
  z-index: 2;
  padding-top: 1.25rem;
  background-color: #fff;
  transition: top .2s;
}

@media (min-width: 769px) {
  .info-breadcrumbs-wrap,
  .info-breadcrumbs-wrap--scroll {
    top: 6.25rem;
  }
}

.info-breadcrumbs-wrap .info-arrow-back,
.info-breadcrumbs-wrap--scroll .info-arrow-back {
  position: absolute;
}

@media (max-width: 768.98px) {
  .info-breadcrumbs-wrap .br,
  .info-breadcrumbs-wrap--scroll .br {
    display: block;
  }
}

.info-breadcrumbs-wrap--scroll {
  top: 0;
  transition: top .2s;
}

.info-hr {
  margin: 1.25rem 0;
  display: block;
  width: 100%;
  border-bottom: 1px solid #ddd;
}

.aboutcompany .metabar {
  background-color: #fff !important;
}

.legal {
  letter-spacing: .05em;
}

.legal .mail {
  width: auto;
  height: 1rem;
}
.legal .priv-mail {
  width: auto;
  height: 1rem;
  margin-top: -0.25rem;
}
.legal p,
.legal li,
.legal address {
  margin-bottom: .5rem;
  font-size: .875rem;
  line-height: 1.7;
  word-break: break-all;
}

.legal h2 {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.7;
}

.legal h4 {
  margin-top: 2rem;
  margin-bottom: .5rem;
  font-weight: 400;
  line-height: 1.7;
}

.legal ol,
.legal ul {
  padding-left: 2rem;
}

.legal ol ol,
.legal ol ul {
  margin-top: .5rem;
}

.legal ol ul {
  list-style-type: disc;
}

.legal ol.round {
  counter-reset: round;
}

.legal ol.round > li {
  list-style: none;
  counter-increment: round;
}

.legal ol.round > li::before {
  display: inline-block;
  width: 2rem;
  margin-left: -2rem;
  content: "(" counter(round) ") ";
}

.legal ol.privacy-ol4,
.legal ol.privacy-ol7 {
  counter-reset: round;
}

.legal ol.privacy-ol4 > li,
.legal ol.privacy-ol7 > li {
  list-style: none;
  counter-increment: round;
}

.legal ol.privacy-ol4 > li::before,
.legal ol.privacy-ol7 > li::before {
  display: inline-block;
  width: 1.75rem;
  margin-left: -2rem;
  content: "5-" counter(round);
}

.legal ol.privacy-ol4 > li::before {
  content: "4-" counter(round);
}
.legal ol.privacy-ol7 > li::before {
  content: "7-" counter(round);
}

.legal ol.privacy-ol9 > li::before {
  content: "9-" counter(round);
}

.legal #return-anchor {
  padding-top: 6rem;
  margin-top: -6rem;
}

.legal #payment-time {
  padding-top: 6rem;
  margin-top: -6rem;
}

.od-breadcrumbs-wrap,
.od-breadcrumbs-wrap--scroll {
  position: sticky;
  top: 3.125rem;
  z-index: 2;
  padding-top: 1.25rem;
  background-color: #f5f5f5;
  transition: top .2s;
}

@media (min-width: 769px) {
  .od-breadcrumbs-wrap,
  .od-breadcrumbs-wrap--scroll {
    top: 6.25rem;
  }
}

.od-breadcrumbs-wrap .od-arrow-back,
.od-breadcrumbs-wrap--scroll .od-arrow-back {
  position: absolute;
}

.od-breadcrumbs-wrap .od-breadcrumbs,
.od-breadcrumbs-wrap--scroll .od-breadcrumbs {
  text-align: center;
}

.od-breadcrumbs-wrap .od-breadcrumbs ol,
.od-breadcrumbs-wrap--scroll .od-breadcrumbs ol {
  display: flex;
  margin: 0 auto;
  max-width: 41rem;
  justify-content: center;
}

.od-breadcrumbs-wrap .od-breadcrumbs li,
.od-breadcrumbs-wrap--scroll .od-breadcrumbs li {
  position: relative;
  width: 20%;
  font-size: .625rem;
  line-height: .875rem;
  color: #c4c4c4;
  text-align: center;
}

@media (min-width: 769px) {
  .od-breadcrumbs-wrap .od-breadcrumbs li,
  .od-breadcrumbs-wrap--scroll .od-breadcrumbs li {
    font-size: .875rem;
  }
}

.od-breadcrumbs-wrap .od-breadcrumbs li > span,
.od-breadcrumbs-wrap .od-breadcrumbs li > a > span,
.od-breadcrumbs-wrap--scroll .od-breadcrumbs li > span,
.od-breadcrumbs-wrap--scroll .od-breadcrumbs li > a > span {
  display: block;
  margin-top: .625rem;
}

.od-breadcrumbs-wrap .od-breadcrumbs li::before,
.od-breadcrumbs-wrap--scroll .od-breadcrumbs li::before {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  content: "";
  background: #ddd;
  border-radius: 50%;
}

.od-breadcrumbs-wrap .od-breadcrumbs li.active::before,
.od-breadcrumbs-wrap--scroll .od-breadcrumbs li.active::before {
  background: #33333b;
}

.od-breadcrumbs-wrap .od-breadcrumbs li.inactive::before,
.od-breadcrumbs-wrap--scroll .od-breadcrumbs li.inactive::before {
  background: #A4A4AC;
}

.od-breadcrumbs-wrap .od-breadcrumbs li.current::before,
.od-breadcrumbs-wrap--scroll .od-breadcrumbs li.current::before {
  box-shadow: 0 0 0 0.625rem rgba(51, 51, 59, 0.05);
}

.od-breadcrumbs-wrap .od-breadcrumbs li + li::after,
.od-breadcrumbs-wrap--scroll .od-breadcrumbs li + li::after {
  position: absolute;
  top: calc(.25rem + 1px);
  left: -50%;
  z-index: -1;
  width: 100%;
  height: .125rem;
  content: "";
  background: #ddd;
}

@media (min-width: 769px) {
  .od-breadcrumbs-wrap .od-breadcrumbs li + li::after,
  .od-breadcrumbs-wrap--scroll .od-breadcrumbs li + li::after {
    top: calc(.25rem + 3px);
  }
}

.od-breadcrumbs-wrap .od-breadcrumbs li + li.active::after,
.od-breadcrumbs-wrap--scroll .od-breadcrumbs li + li.active::after {
  background: #33333b;
}

.od-breadcrumbs-wrap .od-breadcrumbs .active,
.od-breadcrumbs-wrap .od-breadcrumbs a,
.od-breadcrumbs-wrap--scroll .od-breadcrumbs .active,
.od-breadcrumbs-wrap--scroll .od-breadcrumbs a {
  color: #33333b;
}

.od-breadcrumbs-wrap .od-breadcrumbs .lh30,
.od-breadcrumbs-wrap--scroll .od-breadcrumbs .lh30 {
  line-height: 1.875rem;
}

@media (min-width: 769px) {
  .od-breadcrumbs-wrap .od-breadcrumbs .md-lh30,
  .od-breadcrumbs-wrap--scroll .od-breadcrumbs .md-lh30 {
    line-height: 1.875rem;
  }
}

@media (max-width: 768.98px) {
  .od-breadcrumbs-wrap .br,
  .od-breadcrumbs-wrap--scroll .br {
    display: block;
  }
}

.od-breadcrumbs-wrap--scroll {
  top: 0;
  transition: top .2s;
}

.order-surface h1 {
  position: relative;
  min-width: 12rem;
  padding-left: 1.125rem;
  margin-bottom: 1.25rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .05em;
}

@media (min-width: 769px) {
  .order-surface h1 {
    padding-left: 1.75rem;
    font-size: 1.25rem;
  }
}

.order-surface h1::before {
  position: absolute;
  top: .625rem;
  left: 0;
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .625rem;
  content: "";
  background: #33333b;
  border-radius: 50%;
}

@media (min-width: 769px) {
  .order-surface h1::before {
    font-size: 1.25rem;
  }
}

.order-surface .step {
  margin-right: 2rem;
  line-height: 2.5rem;
}

@media (min-width: 769px) {
  .order-surface .step {
    width: 20%;
    margin-right: 0;
  }
}

.order-surface .step-line {
  display: block;
  margin-bottom: .375rem;
  line-height: 1;
}

.order-surface .step-line span {
  display: inline-block;
  width: .125rem;
  height: 1rem;
  margin-right: 2.375rem;
  background: #DEF960;
}

.order-surface .step-line span:first-child {
  background: #7DE5D4;
}

.order-surface .step-line span:last-child {
  margin-right: 0;
  background: #FBA56C;
}

.order-surface .border {
  border-top: 1px solid #ddd;
}

.order-plan .order-cart {
  width: 100%;
}

@media (min-width: 769px) {
  .order-plan .order-cart {
    margin-left: 2.5rem;
    width: 19.5rem;
  }
}

@media (min-width: 769px) {
  .order-plan .order-cart.cleaning {
    margin-left: 0;
    width: 29.5rem;
  }
}

.order-plan .cart {
  padding: 1.875rem 1.25rem;
}

@media (min-width: 769px) {
  .order-plan .cart {
    padding: 1.875rem;
  }
}

.order-plan .btn-hint {
  cursor: pointer;
}

.order-plan .hint-message,
.order-plan .hint-message-alt {
  position: absolute;
  bottom: 100%;
  margin-bottom: 1rem;
  padding: 2rem;
  background: #282830;
  border-radius: .25rem;
}

@media (min-width: 769px) {
  .order-plan .hint-message,
  .order-plan .hint-message-alt {
    top: 50%;
    right: calc(100% - 2px);
    width: 18.75rem;
    bottom: auto;
    margin-right: 2rem;
    margin-bottom: 0;
    transform: translateY(-50%);
  }
}

.order-plan .hint-message .arrow,
.order-plan .hint-message-alt .arrow {
  position: absolute;
  bottom: -14px;
  left: 5.45rem;
  border-top: 10px solid #282830;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translateY(-50%);
}

@media (min-width: 769px) {
  .order-plan .hint-message .arrow,
  .order-plan .hint-message-alt .arrow {
    top: 50%;
    right: -9px;
    bottom: auto;
    left: auto;
    border-top: 10px solid transparent;
    border-right: 0;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #282830;
  }
}

.order-plan .hint-message .arrow-short,
.order-plan .hint-message-alt .arrow-short {
  position: absolute;
  bottom: -14px;
  left: 3.7rem;
  border-top: 10px solid #282830;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translateY(-50%);
}

@media (min-width: 769px) {
  .order-plan .hint-message .arrow-short,
  .order-plan .hint-message-alt .arrow-short {
    top: 50%;
    right: -9px;
    bottom: auto;
    left: auto;
    border-top: 10px solid transparent;
    border-right: 0;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #282830;
  }
}

.order-plan .hint-message-alt {
  left: -8rem;
  width: calc(100vw - 3rem);
}

.order-plan .hint-message-alt .arrow {
  left: 11.5rem;
}

@media (min-width: 769px) {
  .order-plan .hint-message-alt {
    left: auto;
    width: 18.75rem;
  }
  .order-plan .hint-message-alt .arrow {
    right: -9px;
    left: auto;
  }
}

@media (min-width: 769px) {
  .order-plan .item-name {
    width: 6.5rem;
  }
}

.order-plan .image {
  position: relative;
  width: 7.5rem;
  height: 100%;
}

@media (min-width: 769px) {
  .order-plan .image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    text-align: center;
  }
}

.order-plan .image,
.order-plan .types {
  position: relative;
}

@media (min-width: 769px) {
  .order-plan .image::before, .order-plan .image::after,
  .order-plan .types::before,
  .order-plan .types::after {
    position: absolute;
    top: 50%;
    display: block;
    width: 1px;
    height: 1.25rem;
    margin-top: -.625rem;
    content: " ";
    background: #ddd;
  }
  .order-plan .image::before,
  .order-plan .types::before {
    left: 0;
  }
  .order-plan .image::after,
  .order-plan .types::after {
    right: 0;
  }
}

.order-plan .typesp {
  position: relative;
}

.order-plan .typesp::after {
  position: absolute;
  top: 50%;
  display: block;
  width: 1px;
  height: 1.25rem;
  margin-top: -.625rem;
  background: #ddd;
}

.order-plan .typesp::after {
  right: 0;
}

.order-plan .types {
  white-space: nowrap;
}

@media (min-width: 769px) {
  .order-plan .types::before {
    width: 0;
  }
}

.order-plan .trialterm {
  max-width: 4rem;
}

.order-selection,
.order-selection-semi-large,
.order-selection-large {
  display: block;
  cursor: pointer;
}

.order-selection:hover .row,
.order-selection-semi-large:hover .row,
.order-selection-large:hover .row {
  background-color: #fff;
}

.order-selection .row,
.order-selection-semi-large .row,
.order-selection-large .row {
  padding: 1.25rem .875rem;
}

@media (min-width: 769px) {
  .order-selection .row,
  .order-selection-semi-large .row,
  .order-selection-large .row {
    height: 7.5rem;
    padding-left: 3.125rem;
  }
}
.order-selection .row.js-sheets, .order-selection .row.js-pillow, .order-selection .row.js-healthyon-sheets,
.order-selection-semi-large .row.js-sheets,
.order-selection-semi-large .row.js-pillow,
.order-selection-semi-large .row.js-healthyon-sheets,
.order-selection-large .row.js-sheets,
.order-selection-large .row.js-pillow,
.order-selection-large .row.js-healthyon-sheets {
  padding-left: 0.625rem;
}
@media (min-width: 769px) {
  .order-selection .row.js-sheets, .order-selection .row.js-pillow, .order-selection .row.js-healthyon-sheets,
  .order-selection-semi-large .row.js-sheets,
  .order-selection-semi-large .row.js-pillow,
  .order-selection-semi-large .row.js-healthyon-sheets,
  .order-selection-large .row.js-sheets,
  .order-selection-large .row.js-pillow,
  .order-selection-large .row.js-healthyon-sheets {
    padding-left: 1.875rem;
  }
}
.order-selection.readonly,
.order-selection-semi-large.readonly,
.order-selection-large.readonly {
  cursor: auto;
}

.order-selection.readonly:hover .row,
.order-selection-semi-large.readonly:hover .row,
.order-selection-large.readonly:hover .row {
  background-color: transparent;
}

.order-selection input[type=radio] + .row .radio,
.order-selection-semi-large input[type=radio] + .row .radio,
.order-selection-large input[type=radio] + .row .radio {
  position: relative;
}

.order-selection input[type=radio] + .row .radio::before, .order-selection input[type=radio] + .row .radio::after,
.order-selection-semi-large input[type=radio] + .row .radio::before,
.order-selection-semi-large input[type=radio] + .row .radio::after,
.order-selection-large input[type=radio] + .row .radio::before,
.order-selection-large input[type=radio] + .row .radio::after {
  display: inline-block;
  content: "";
}

.order-selection input[type=radio] + .row .radio::before,
.order-selection-semi-large input[type=radio] + .row .radio::before,
.order-selection-large input[type=radio] + .row .radio::before {
  background: #fff;
  border: 1px solid #c4c4c4;
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: top;
}

.order-selection input[type=radio] + .row .radio::after,
.order-selection-semi-large input[type=radio] + .row .radio::after,
.order-selection-large input[type=radio] + .row .radio::after {
  position: absolute;
  top: .375rem;
  left: .375rem;
  width: .5rem;
  height: .5rem;
  background: #fff;
  border-radius: 50%;
}

.order-selection input[type=radio]:checked + .row,
.order-selection-semi-large input[type=radio]:checked + .row,
.order-selection-large input[type=radio]:checked + .row {
  background-color: #fff;
}

.order-selection input[type=radio]:checked + .row .radio::before,
.order-selection-semi-large input[type=radio]:checked + .row .radio::before,
.order-selection-large input[type=radio]:checked + .row .radio::before {
  background: #33333b;
  border-color: #33333b;
}

.order-selection input[type=radio]:disabled + .row .radio::before,
.order-selection-semi-large input[type=radio]:disabled + .row .radio::before,
.order-selection-large input[type=radio]:disabled + .row .radio::before {
  background: #ebebeb;
  border-color: #d7d7d7;
}

.order-selection input[type=radio]:disabled + .row .radio::after,
.order-selection-semi-large input[type=radio]:disabled + .row .radio::after,
.order-selection-large input[type=radio]:disabled + .row .radio::after {
  background: transparent;
}
.order-selection input[type=checkbox] + .row:hover,
.order-selection-semi-large input[type=checkbox] + .row:hover,
.order-selection-large input[type=checkbox] + .row:hover {
  background-color: #fff;
}
.order-selection input[type=checkbox] + .row .checkbox,
.order-selection-semi-large input[type=checkbox] + .row .checkbox,
.order-selection-large input[type=checkbox] + .row .checkbox {
  position: relative;
  padding-right: 0.625rem;
  padding-top: 1.25rem;
}
@media (min-width: 769px) {
  .order-selection input[type=checkbox] + .row .checkbox,
  .order-selection-semi-large input[type=checkbox] + .row .checkbox,
  .order-selection-large input[type=checkbox] + .row .checkbox {
    padding-right: 1.875rem;
    padding-top: 0;
  }
}
.order-selection input[type=checkbox] + .row .checkbox::before, .order-selection input[type=checkbox] + .row .checkbox::after,
.order-selection-semi-large input[type=checkbox] + .row .checkbox::before,
.order-selection-semi-large input[type=checkbox] + .row .checkbox::after,
.order-selection-large input[type=checkbox] + .row .checkbox::before,
.order-selection-large input[type=checkbox] + .row .checkbox::after {
  display: inline-block;
  content: "";
}
.order-selection input[type=checkbox] + .row .checkbox::before,
.order-selection-semi-large input[type=checkbox] + .row .checkbox::before,
.order-selection-large input[type=checkbox] + .row .checkbox::before {
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: top;
  background: #fff;
  border: 1px solid #33333b;
  border-radius: 2px;
}
.order-selection input[type=checkbox] + .row .checkbox::after,
.order-selection-semi-large input[type=checkbox] + .row .checkbox::after,
.order-selection-large input[type=checkbox] + .row .checkbox::after {
  position: absolute;
  top: 1.375rem;
  left: 0.375rem;
  width: 0.5rem;
  height: 0.75rem;
  border-top: 2px solid transparent;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-left: 2px solid transparent;
  transform: rotateZ(45deg);
}
@media (min-width: 769px) {
  .order-selection input[type=checkbox] + .row .checkbox::after,
  .order-selection-semi-large input[type=checkbox] + .row .checkbox::after,
  .order-selection-large input[type=checkbox] + .row .checkbox::after {
    top: 0.125rem;
  }
}
.order-selection input[type=checkbox]:checked + .row,
.order-selection-semi-large input[type=checkbox]:checked + .row,
.order-selection-large input[type=checkbox]:checked + .row {
  background-color: #fff;
}
.order-selection input[type=checkbox]:checked + .row .checkbox::before,
.order-selection-semi-large input[type=checkbox]:checked + .row .checkbox::before,
.order-selection-large input[type=checkbox]:checked + .row .checkbox::before {
  background: #33333b;
  border-color: #33333b;
}
.order-selection input[type=checkbox]:disabled + .row .checkbox::before,
.order-selection-semi-large input[type=checkbox]:disabled + .row .checkbox::before,
.order-selection-large input[type=checkbox]:disabled + .row .checkbox::before {
  background: #ebebeb;
  border-color: #d7d7d7;
}
.order-selection input[type=checkbox]:disabled + .row .checkbox::after,
.order-selection-semi-large input[type=checkbox]:disabled + .row .checkbox::after,
.order-selection-large input[type=checkbox]:disabled + .row .checkbox::after {
  background: transparent;
}
.order-selection .order-image,
.order-selection-semi-large .order-image,
.order-selection-large .order-image {
  width: 4.375rem;
}

@media (min-width: 769px) {
  .order-selection .order-image,
  .order-selection-semi-large .order-image,
  .order-selection-large .order-image {
    width: 5.625rem;
  }
}

@media (min-width: 769px) {
  .order-selection .submit-mattress-category,
  .order-selection-semi-large .submit-mattress-category,
  .order-selection-large .submit-mattress-category {
    display: block;
  }
}

.order-selection .submit-mattress-img,
.order-selection-semi-large .submit-mattress-img,
.order-selection-large .submit-mattress-img {
  width: 4.375rem;
  height: 4.375rem;
}

@media (min-width: 769px) {
  .order-selection .submit-mattress-img,
  .order-selection-semi-large .submit-mattress-img,
  .order-selection-large .submit-mattress-img {
    width: 5rem;
    height: 5rem;
  }
}

.order-selection .selecting-mattress-img,
.order-selection-semi-large .selecting-mattress-img,
.order-selection-large .selecting-mattress-img {
  width: 4.375rem;
  height: 4.375rem;
}

@media (min-width: 769px) {
  .order-selection .selecting-mattress-img,
  .order-selection-semi-large .selecting-mattress-img,
  .order-selection-large .selecting-mattress-img {
    width: 5rem;
    height: 5rem;
  }
}

.quantity-input,
.years-input {
  width: 6.875rem;
}

@media (max-width: 768.98px) {
  .quantity-input,
  .years-input {
    position: relative;
  }
  .quantity-input select,
  .years-input select {
    border: 1px solid #f5f5f5;
  }
  .quantity-input::before, .quantity-input::after,
  .years-input::before,
  .years-input::after {
    position: absolute;
    content: "";
  }
  .quantity-input::before,
  .years-input::before {
    top: .675rem;
    right: 1.875rem;
    bottom: .675rem;
    width: 0;
    border-left: 1px solid #ddd;
    pointer-events: none;
  }
  .quantity-input::after,
  .years-input::after {
    top: 50%;
    right: 11.5px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border: 5px solid transparent;
    border-color: transparent #33333b #33333b transparent;
    border-style: solid;
    border-width: 2px;
    transform: rotate(45deg);
    transform-origin: center center;
    pointer-events: none;
  }
}

.years-input {
  width: 16.875rem;
}

@media (min-width: 769px) {
  .order-selection-semi-large {
    width: calc((100% - 2.5rem) / 3) !important;
  }
}

.order-selection-semi-large .row {
  border: 1px solid #ddd;
}

@media (min-width: 769px) {
  .order-selection-semi-large .row {
    height: 9.375rem;
  }
}

.order-selection-large .row {
  border: 1px solid #ddd;
}

@media (min-width: 769px) {
  .order-selection-large .row {
    height: 12.5rem;
  }
}

.toast-trial {
  position: fixed;
  top: 4.625rem;
  z-index: 10;
  left: 50%;
  width: 100%;
  max-width: 17.5rem;
  transform: translate(-50%, 100vh);
  transition: .4s ease-in-out;
}

@media (min-width: 769px) {
  .toast-trial {
    top: auto;
    left: 1.25rem;
    bottom: 1.875rem;
    max-width: 22.5rem;
    transform: translate(-200%, 0);
  }
}

.toast-trial.open {
  transform: translateX(-50%);
}

@media (min-width: 769px) {
  .toast-trial.open {
    transform: translateX(0);
  }
}

.toast-trial .toast-close button {
  cursor: pointer;
}

.toast-trial .toast-container {
  padding: 1.25rem;
  box-shadow: 0.25rem 0.25rem 1.875rem rgba(0, 0, 0, 0.1);
  border-radius: .25rem;
}

@media (min-width: 769px) {
  .toast-trial .toast-container {
    padding: 1.25rem 1.875rem;
  }
}

.modal-cart {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1.25rem;
  z-index: 20;
}

.modal-cart.open {
  display: flex;
}

.modal-cart .modal-container {
  max-width: 38.75rem;
  box-shadow: 0.25rem 0.25rem 1.875rem rgba(0, 0, 0, 0.1);
  border-radius: .25rem;
}

.modal-cart .modal-cart-close button {
  cursor: pointer;
}

.modal-point,
.modal-point-error {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1.25rem;
  z-index: 20;
}
.modal-point.open,
.modal-point-error.open {
  display: flex;
}
.modal-point .modal-container,
.modal-point-error .modal-container {
  max-width: 38.75rem;
  box-shadow: 0.25rem 0.25rem 1.875rem rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
}
.modal-point .modal-point-close button,
.modal-point-error .modal-point-close button {
  cursor: pointer;
}
.modal-point .border,
.modal-point-error .border {
  width: 100%;
  border-top: 1px solid #ddd;
}
.modal-point input[type=radio] + div .radio,
.modal-point-error input[type=radio] + div .radio {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
}
.modal-point input[type=radio] + div .radio::before, .modal-point input[type=radio] + div .radio::after,
.modal-point-error input[type=radio] + div .radio::before,
.modal-point-error input[type=radio] + div .radio::after {
  display: inline-block;
  content: "";
}
.modal-point input[type=radio] + div .radio::before,
.modal-point-error input[type=radio] + div .radio::before {
  background: #fff;
  border: 1px solid #c4c4c4;
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: top;
}
.modal-point input[type=radio] + div .radio::after,
.modal-point-error input[type=radio] + div .radio::after {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  width: 0.5rem;
  height: 0.5rem;
  background: #fff;
  border-radius: 50%;
}
.modal-point input[type=radio]:checked + div,
.modal-point-error input[type=radio]:checked + div {
  background-color: #fff;
}
.modal-point input[type=radio]:checked + div .radio::before,
.modal-point-error input[type=radio]:checked + div .radio::before {
  background: #33333b;
  border-color: #33333b;
}
.modal-point input[type=radio]:disabled + div .radio::before,
.modal-point-error input[type=radio]:disabled + div .radio::before {
  background: #ebebeb;
  border-color: #d7d7d7;
}
.modal-point input[type=radio]:disabled + div .radio::after,
.modal-point-error input[type=radio]:disabled + div .radio::after {
  background: transparent;
}

.personal-check {
  display: none;
}
.personal-check.active {
  display: block;
}

/* 2024/09 ヘルシオン追加 */
.after-service h1 {
  position: relative;
  min-width: 12rem;
  padding-left: 1.125rem;
  margin-bottom: 1.875rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
@media (min-width: 769px) {
  .after-service h1 {
    padding-left: 1.75rem;
    margin-bottom: 2.5rem;
    font-size: 1.25rem;
  }
}
.after-service h1::before {
  position: absolute;
  top: 0.625rem;
  left: 0;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.625rem;
  content: "";
  background: #33333b;
  border-radius: 50%;
}
@media (min-width: 769px) {
  .after-service h1::before {
    font-size: 1.25rem;
  }
}
.after-service h2 {
  font-size: 1rem;
  font-weight: 700;
}
.after-service h3, .after-service h4 {
  font-size: 0.875rem;
  font-weight: 700;
}
.after-service .border {
  width: 100%;
  border-top: 1px solid #d7d7d7;
}
.after-service .contents-container {
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 20px;
}
.after-service .accordion-container .title-block {
  display: flex;
  align-items: center;
}
.after-service .accordion-container .title-block h2 {
  margin-bottom: 0;
  width: 50%;
}
.after-service .accordion-container .title-block .chevron-wrapper {
  width: 50%;
  padding-left: 60px;
}
.after-service .step {
  width: 20%;
}
.after-service .price-table tr {
  height: 40px;
}
.after-service .price-table th {
  background-color: #767676;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  text-align: center;
  width: 25%;
  border: 1px solid #767676;
  border-collapse: collapse;
}
@media (min-width: 769px) {
  .after-service .price-table th {
    font-size: 0.875rem;
  }
}
.after-service .price-table td {
  font-size: 0.75rem;
  text-align: center;
  border: 1px solid #767676;
  border-collapse: collapse;
  width: 25%;
  padding: 0;
}
@media (min-width: 769px) {
  .after-service .price-table td {
    font-size: 0.875rem;
  }
}
.after-service .repair-warranty-table {
  overflow-x: auto;
  scroll-behavior: smooth;
  display: block;
}
.after-service .repair-warranty-table th:nth-child(1), .after-service .repair-warranty-table td:nth-child(1) {
  min-width: 160px;
}
.after-service .repair-warranty-table th:nth-child(2), .after-service .repair-warranty-table td:nth-child(2) {
  min-width: 290px;
}
.after-service .repair-warranty-table th:nth-child(3), .after-service .repair-warranty-table td:nth-child(3) {
  min-width: 70px;
}
.after-service .repair-warranty-table th:nth-child(4), .after-service .repair-warranty-table td:nth-child(4) {
  min-width: 70px;
}
.after-service .repair-warranty-table th:nth-child(5), .after-service .repair-warranty-table td:nth-child(5) {
  min-width: 300px;
}
@media (min-width: 769px) {
  .after-service .repair-warranty-table th:nth-child(1), .after-service .repair-warranty-table td:nth-child(1) {
    min-width: unset;
    width: 18%;
  }
  .after-service .repair-warranty-table th:nth-child(2), .after-service .repair-warranty-table td:nth-child(2) {
    min-width: unset;
    width: 33%;
  }
  .after-service .repair-warranty-table th:nth-child(3), .after-service .repair-warranty-table td:nth-child(3) {
    min-width: unset;
    width: 8.2%;
  }
  .after-service .repair-warranty-table th:nth-child(4), .after-service .repair-warranty-table td:nth-child(4) {
    min-width: unset;
    width: 8.2%;
  }
  .after-service .repair-warranty-table th:nth-child(5), .after-service .repair-warranty-table td:nth-child(5) {
    min-width: unset;
    width: 32.6%;
  }
}
.after-service .repair-warranty-table th {
  background-color: #767676;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  text-align: center;
  height: 40px;
  border: 1px solid #767676;
  border-collapse: collapse;
}
@media (min-width: 769px) {
  .after-service .repair-warranty-table th {
    font-size: 0.875rem;
  }
}
.after-service .repair-warranty-table td {
  height: 98px;
  font-size: 0.75rem;
  border: 1px solid #767676;
  border-collapse: collapse;
  padding: 0;
}
@media (min-width: 769px) {
  .after-service .repair-warranty-table td {
    font-size: 0.875rem;
  }
}
.after-service .repair-warranty-table td:nth-child(1) {
  padding: 0 38px;
}
.after-service .repair-warranty-table td:nth-child(2) {
  padding: 0 20px;
}
.after-service .repair-warranty-table td:nth-child(3) {
  text-align: center;
}
.after-service .repair-warranty-table td:nth-child(4) {
  text-align: center;
}
.after-service .repair-warranty-table td:nth-child(5) {
  padding: 0 20px;
}
.after-service .black-circle {
  background-color: #33333b;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.after-service .after-service-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 769px) {
  .after-service .after-service-container {
    flex-direction: row;
    justify-content: space-between;
  }
}
.after-service .after-service-main-contents {
  display: flex;
  justify-content: flex-end;
}
.after-service .after-service-main-contents > div {
  max-width: 58.375rem;
}
.after-service .item-list {
  padding: 0;
  margin: 0;
}
.after-service .item-list li {
  list-style: none;
  display: flex;
  gap: 0.25rem;
}
.anchor-target {
  scroll-margin-top: 100px; /* ヘッダーの高さ分 */
}
.grecaptcha-badge {
  z-index: 9999 !important;
  opacity: 0.8;
}