@charset "UTF-8";
/* Scss Document */
html {
  --vw: 100vw;
  overflow-y: scroll;
}
html.preload {
  font-size: 1px !important;
}
html.preload * {
  transition: none !important;
  visibility: hidden;
  max-width: 100%;
}
@media (max-width: 562.98px) {
  html {
    font-size: calc(var(--vw) / 375);
  }
}
@media (min-width: 563px) and (max-width: 767.98px) {
  html {
    font-size: 1.5px;
  }
}
@media (min-width: 768px) and (max-width: 1599.98px) {
  html {
    font-size: calc(var(--vw) / 1280);
  }
}
@media (min-width: 1600px) {
  html {
    font-size: 1.25px;
  }
}
@media print {
  html {
    font-size: 0.2mm;
  }
}

[id] {
  scroll-margin-top: 80rem;
}
@media screen and (min-width: 768px), print {
  [id] {
    scroll-margin-top: 150rem;
  }
}

* {
  box-sizing: border-box;
}

body {
  font-size: 14rem;
  font-weight: 500;
  color: #1A1A1A;
  background: #fff;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  min-width: 320rem;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", Arial, sans-serif;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: justify;
  min-height: 100dvh;
  letter-spacing: 0.05em;
}
body.home {
  background: #f6f6f6;
}
@media screen and (min-width: 768px), print {
  body.home {
    background: url(../images/bg1.webp) no-repeat fixed center center/103% #f6f6f6;
  }
}
body.local {
  background: #fff;
}
@media screen and (min-width: 768px), print {
  body.local {
    background: url(../images/bg2.webp) no-repeat fixed center center/108% #fff;
  }
}

html.modal-on,
body.modal-on {
  overflow: hidden;
}

a {
  color: #1A1A1A;
  text-decoration: none;
  will-change: transform, opacity;
  transform: translateZ(0);
}

.inner {
  width: 327rem;
  margin: 0 auto;
  position: relative;
}

@media screen and (min-width: 768px), print {
  .u-sp-only {
    display: none !important;
  }
}
@media screen and (max-width: 767.98px) {
  .u-pc-only {
    display: none !important;
  }
}
.touchdevice .clickdeviceOnly {
  display: none;
}

.clickdevice .touchdeviceOnly {
  display: none;
}

nav,
header,
footer,
figure {
  margin: 0;
  padding: 0;
}

article,
section {
  margin: 0;
}

p {
  margin: 16rem 0;
}
@media screen and (min-width: 768px), print {
  p {
    margin: 24rem 0;
  }
}

[lang=en],
.en {
  font-family: "Marcellus", "游明朝体", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Times New Roman", serif;
  text-align: left;
  letter-spacing: 0.01em;
}

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

i:has(svg) {
  line-height: 1px;
}
i:has(svg) svg {
  width: 100%;
  height: auto;
}

i.icon-arrow {
  display: block;
  border: 1px solid #1A1A1A;
  width: 30rem;
  height: 30rem;
  transition: background-color 0.3s, color 0.3s;
}
i.icon-arrow svg {
  width: 100%;
  height: 100%;
}

/*-----------------------------------------------------------------------------------*/
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 300;
  display: flex;
  justify-content: space-between;
  padding: 16rem 16rem;
  align-items: end;
  gap: 24rem;
  pointer-events: none;
}
body.local #header {
  background: linear-gradient(to bottom, white 1%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.1) 90%, rgba(255, 255, 255, 0) 100%);
}
@media screen and (min-width: 768px), print {
  #header {
    padding: 24rem;
    gap: 40rem;
    background: none;
  }
}
#header .logo {
  margin: 0;
  padding: 0;
  width: 82rem;
  font-size: 1px;
  pointer-events: all;
}
@media screen and (min-width: 768px), print {
  #header .logo {
    width: 104rem;
  }
}

.cart-btn {
  pointer-events: all;
}
.cart-btn a {
  margin-left: auto;
  width: 40rem;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s;
  background-color: #1A1A1A;
  color: #fff;
  width: 89rem;
  height: 36rem;
  align-items: center;
  font-size: 14rem;
  letter-spacing: 0.02em;
  border-radius: 2rem;
  gap: 4rem;
}
.cart-btn a i {
  line-height: 1px;
}
.cart-btn a img {
  width: 100%;
}
@media screen and (min-width: 768px), print {
  .cart-btn a:hover {
    opacity: 0.6;
  }
}

/*-----------------------------------------------------------------------------------*/
#footer {
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
@media screen and (max-width: 767.98px) {
  #footer {
    padding: 24rem 24rem 40rem;
    border-top: 1rem dotted #1A1A1A;
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 768px), print {
  #footer {
    padding: 16rem 32rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    align-items: center;
  }
}
#footer a {
  transition: color 0.3s;
  pointer-events: all;
}
@media screen and (min-width: 768px), print {
  #footer a:hover {
    color: color-mix(in srgb, currentColor 40%, transparent);
  }
}
#footer .logo {
  width: 114rem;
  margin-bottom: 40rem;
}
@media screen and (min-width: 768px), print {
  #footer .logo {
    width: 180rem;
    margin: 0;
  }
}
#footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer ul li {
  margin: 0;
  padding: 0;
}
#footer ul.sub {
  display: grid;
  gap: 16rem;
  line-height: 1;
  font-size: 12rem;
  margin-top: 16rem;
}
@media screen and (min-width: 768px), print {
  #footer ul.sub {
    margin-top: 0;
    order: 2;
    display: flex;
    gap: 24rem;
    font-size: 12rem;
  }
}
#footer ul.sub a {
  display: grid;
  width: 150rem;
  grid-template-columns: 1fr 12rem;
  gap: 8rem;
}
@media screen and (min-width: 768px), print {
  #footer ul.sub a {
    width: -moz-fit-content;
    width: fit-content;
    grid-template-columns: 1fr 12rem;
  }
}
#footer ul.sub a svg {
  aspect-ratio: 1;
}
#footer ul.sns {
  display: flex;
  gap: 16rem;
}
@media screen and (min-width: 768px), print {
  #footer ul.sns {
    gap: 0;
  }
}
#footer ul.sns li {
  width: 56rem;
}
@media screen and (max-width: 767.98px) {
  #footer ul.sns li:nth-of-type(1), #footer ul.sns li:nth-of-type(2) {
    width: 24rem;
  }
}
#footer ul.sns li img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 56rem;
}

/*-----------------------------------------------------------------------------------*/
#contents {
  min-height: 100dvh;
}

/*-----------------------------------------------------------------------------------*/
.btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rem;
}

.btn {
  cursor: pointer;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  background-color: #1A1A1A;
  color: #fff;
  border-radius: 100rem;
  height: 44rem;
  position: relative;
  width: 100%;
  display: grid;
  place-content: center;
  font-size: 16rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.3s;
}
.btn--large {
  height: 59rem;
  font-size: 20rem;
}
.btn::after {
  content: "▼";
  position: absolute;
  top: 50%;
  display: block;
  line-height: 1;
  font-size: 14rem;
}
.btn--next::after {
  transform: translateY(-50%) rotate(-90deg);
  right: 24rem;
}
.btn--prev::after {
  transform: translateY(-50%) rotate(90deg);
  left: 24rem;
}

/*-----------------------------------------------------------------------------------*/
.inview._fadein {
  translate: 0 50rem;
  opacity: 0;
  transition: opacity 1.5s, translate 1.5s;
}
@media screen and (min-width: 768px), print {
  .inview._fadein {
    translate: 0 80rem;
  }
}
.inview.is-show {
  opacity: 1;
  translate: 0 0;
}

/*-----------------------------------------------------------------------------------*/
.pagetitle {
  position: fixed;
  top: 114rem;
  left: 24rem;
  transform: rotate(90deg) translateY(-100%);
  transform-origin: left top;
  font-family: "Marcellus", "游明朝体", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Times New Roman", serif;
  font-size: 56rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
}
@media screen and (max-width: 767.98px) {
  .pagetitle {
    display: none;
  }
}

/*-----------------------------------------------------------------------------------*/
#entrance {
  overflow: hidden;
  display: grid;
  min-height: 100dvh;
  place-content: center;
  text-align: center;
  padding: 120rem 0 120rem;
}
@media screen and (min-width: 768px), print {
  #entrance {
    padding: 30rem 0 120rem;
  }
}
#entrance .inner {
  position: relative;
  max-height: calc(100dvh - 240rem);
}
@media screen and (min-width: 768px), print {
  #entrance .inner {
    max-height: calc(100dvh - 150rem);
  }
}
#entrance .inner::before {
  content: "";
  width: 619rem;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 100%;
  display: block;
  position: absolute;
  top: 59rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media screen and (min-width: 768px), print {
  #entrance .inner::before {
    top: 59rem;
  }
}
#entrance h1 {
  margin: 0;
}
#entrance p {
  margin: 12rem 0 25rem;
  line-height: 1.6;
  font-size: 15rem;
}
#entrance figure {
  width: 453rem;
  margin: 38rem 0 0 -64rem;
}
@media screen and (min-width: 768px), print {
  #entrance figure {
    width: 465rem;
    margin: 18rem -69rem 0;
  }
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
#diagnosis {
  padding: 100rem 0 24rem;
}
@media screen and (min-width: 768px), print {
  #diagnosis {
    padding: 100rem 0;
  }
}
#diagnosis .lead {
  text-align: center;
  line-height: 2;
  margin: 0 0 40rem;
}
#diagnosis .step {
  border-top: 1rem dotted #1A1A1A;
  padding: 56rem 0 56rem;
}
#diagnosis .step h2 {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 16rem;
  font-weight: 500;
}
#diagnosis .step h2 i {
  font-family: "Marcellus", "游明朝体", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Times New Roman", serif;
  font-size: 32rem;
  font-style: normal;
  font-weight: 400;
  display: block;
  line-height: 1;
  margin-bottom: 32rem;
}
#diagnosis .step__body {
  height: 0;
  opacity: 0;
}
#diagnosis .step__body ul {
  display: grid;
  gap: 8rem;
  margin: 32rem 0;
  padding: 0;
  list-style: none;
}
#diagnosis .step__body ul li {
  margin: 0;
  padding: 0;
}
#diagnosis .step__body label {
  background: #F8F6F6;
  border: 2rem solid #F8F6F6;
  border-radius: 4rem;
  padding: 10rem 16rem;
  display: grid;
  grid-template-columns: 8rem 1fr;
  align-items: center;
  gap: 17rem;
  transition: border-color 0.3s;
  cursor: pointer;
}
#diagnosis .step__body label::before {
  content: "";
  width: 8rem;
  height: 8rem;
  border-radius: 100%;
  background: #D9D9D9;
  display: block;
  transition: background-color 0.3s;
}
#diagnosis .step__body label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#diagnosis .step__body label:has(input:checked) {
  border-color: #DAC3C3;
}
#diagnosis .step__body label:has(input:checked)::before {
  background: #DAC3C3;
}
#diagnosis .step__body-inner {
  overflow: hidden;
}
#diagnosis .step.is-open .step__body {
  opacity: 1;
}
#diagnosis .btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
#diagnosis .submit {
  margin-top: 16rem;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
#result {
  padding: 82rem 0 47rem;
  overflow: hidden;
}
@media screen and (min-width: 768px), print {
  #result {
    padding: 82rem 0 100rem 0;
  }
}
#result .plan {
  position: relative;
  margin: 0 0 56rem;
}
#result .plan::before {
  content: "";
  width: 524rem;
  aspect-ratio: 1;
  border-radius: 100%;
  background: #F8F6F6;
  z-index: -1;
  position: absolute;
  top: 36rem;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}
#result .plan .label {
  text-align: center;
}
#result .plan .label img {
  width: 215rem;
}
#result .plan h1 {
  text-align: center;
  font-family: "Marcellus", "游明朝体", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Times New Roman", serif;
  font-size: 40rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 71rem 0 17rem;
  padding: 0;
  line-height: 1;
}
#result .plan p {
  margin: 0 0 16rem;
}
#result .plan dl {
  margin: 0 0 24rem;
  padding: 0;
  font-size: 12rem;
}
#result .plan dl > div {
  display: grid;
  grid-template-columns: 4em 1fr;
  gap: 12rem;
  align-items: start;
}
#result .plan dl dt {
  background: #1A1A1A;
  color: #fff;
  margin: 0;
  padding: 0;
  text-align: center;
  font-weight: 400;
}
#result .plan dl dd {
  margin: 0;
  padding: 0;
}
#result .advice {
  margin: 0 0 64rem;
}
#result .advice h2 {
  text-align: center;
  margin: 0 0 16rem;
  line-height: 1px;
}
#result .advice h2 img {
  width: 232rem;
}
#result .advice .frame {
  border: 1px solid #1A1A1A;
  border-radius: 8rem;
}
#result .advice h3 {
  font-weight: 500;
  font-size: 18rem;
  text-align: center;
  margin: 0;
  border-bottom: 1px solid #1A1A1A;
  padding: 20rem 24rem;
}
#result .advice p {
  margin: 0;
  padding: 20rem 24rem;
}
#result .point {
  margin: 0 0 64rem;
}
#result .point h2 {
  text-align: center;
  margin: 0 0 16rem;
  line-height: 1px;
}
#result .point h2 img {
  width: 91rem;
}
#result .point h3 {
  font-weight: 500;
  font-size: 18rem;
  text-align: center;
  margin: 0;
  border-top: 1px solid #1A1A1A;
  border-bottom: 1px solid #1A1A1A;
  padding: 8rem 0;
  line-height: 2;
}
#result .point p {
  margin: 0;
  padding: 16rem 0;
}
#result .point a {
  display: grid;
  background: #F8F6F6;
  grid-template-columns: 180rem 1fr;
  color: #1A1A1A;
}
#result .point a .label {
  display: grid;
  place-content: center;
  gap: 8rem;
}
#result .point a i {
  background: #fff;
  width: 28rem;
  height: 28rem;
  border-radius: 100%;
  margin: 0 auto;
  display: grid;
  place-content: center;
}
#result .point a i svg {
  height: 100%;
  width: 11.5rem;
}

/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*//*# sourceMappingURL=common.css.map */