@charset "UTF-8";

:root {
  --color01: #000;
  --color02: #8b3d74;
  --color03: #eee;
  --color04: #ffef8f;
  --color05: #fff;
  --color06: #f00;
  --color07: #0093d3;
  --header-height: 64px;
  --max-width: calc(100vw - (100vw - 100%));
  --max-content-width: 400px;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  color: var(--color01);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: 1.6rem;
  -webkit-text-size-adjust: 100%;
}

* + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {
  margin-top: 1em;
}

* + p {
  margin-top: 1em;
}

a {
  color: var(--color02);
  text-decoration: none;
  border-bottom: 1px dotted var(--color02);
  transition: all .3s;
}

.caution {
  color: var(--color06);
}

.content {
  padding: 0 20px;
}

.header {
  position: fixed;
  z-index: 9999;
  width: var(--max-width);
  height: var(--header-height);
  background: var(--color02);
}

.header-content {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}

.logo-box {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: normal;
  color: var(--color05);
}

.logo {
  width: 24px;
  margin-right: 10px;
}

.main {
  padding-top: var(--header-height);
}

.footer {
  width: var(--max-width);
  height: 64px;
  margin-top: auto;
  background: var(--color02);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}

.logo-box__footer {
  margin: auto;
}

.mv {
  width: var(--max-width);
  height: calc(100vh - var(--header-height) - 20px);
  min-height: 586px;
  background: url(./mv.jpg) 27% 0 / cover no-repeat;
}

.mv-content {
  position: relative;
  height: 100%;
  margin: auto;
}

.sec-content {
  padding-top: 20px;
  padding-bottom: 40px;
}

.mv-cap {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 3rem;
  font-weight: 900;
}

.mv-cap-01 {
  display: inline-block;
  padding: 5px 18px;
  margin: 0 0 .3em .5em;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color05);
  background: var(--color02);
  border-radius: 20px;
}

.mv-vid {
  position: absolute;
  top: 22%;
  right: 3%;
  width: 170px;
  padding: 15px 10px;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--color03);
  text-align: center;
  background: var(--color02);
  border-radius: 10px;
}

.mv-vid-01 {
  font-size: 1.6rem;
  font-weight: 700;
}

.mv-vid .play-button {
  width: 50px;
  height: 50px;
  margin-top: 1em;
}

.mv-features {
  position: absolute;
  top: 57%;
  right: 3%;
  left: 3%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style-type: none;
}

.mv-features-item {
  display: flex;
  flex-grow: 1;
  align-items: center;
  padding: 10px;
  font-size: 1.7rem;
  font-weight: 900;
  background: #fffb;
}

.mv-features-item::before {
  margin-right: .5em;
  font-size: 1.2rem;
  color: var(--color02);
  content: '●';
}

.mv-banner {
  position: absolute;
  top: 80%;
  right: 0;
  left: 0;
  width: 100%;
}

.contact-button {
  display: inline-block;
  width: 80%;
  padding: 10px;
  font-size: 2rem;
  border: none;
  border-radius: 10px;
}

.mv-button-wrapper {
  padding-top: 40px;
  text-align: center;
  background: var(--color02);
}

.mv-button-wrapper .contact-button {
  color: var(--color02);
  background: var(--color05);
}

.mv-contact-tell {
  padding-top: 2em;
  margin-top: 2em;
  color: var(--color05);
  border-top: 1px solid var(--color05);
}

a.mv-contact-tell-link {
  display: block;
  font-size: 2.4rem;
  font-weight: bold;
  color: var(--color05);
}

.contact-button-wrapper {
  text-align: center;
}

.contact-button-wrapper .contact-button {
  color: var(--color05);
  background: var(--color02);
}

.sec-yellow {
  background: var(--color04);
}

.sec-gray {
  background: var(--color03);
}

.sec-white {
  background: var(--color05);
}

.arrow {
  display: block;
  width: 50px;
  height: 25px;
  margin: 0 auto;
}

.sec-arrow-white .arrow {
  fill: var(--color05);
}

.sec-arrow-yellow .arrow {
  fill: var(--color04);
}

.sec-arrow-gray .arrow {
  fill: var(--color03);
}

.sec-title {
  padding-bottom: 1em;
  font-size: 2.4rem;
  font-weight: 900;
}

.sec-title-span {
  display: inline-block;
  padding: 5px 15px;
  margin-bottom: .5em;
  font-size: 1.8rem;
  font-weight: 700;
  background: var(--color05);
  border-radius: 20px;
}

.frame {
  padding: 18px;
  margin-bottom: 2em;
  border-radius: 10px;
}

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

.frame-white {
  background: var(--color05);
}

.frame-gray {
  background: var(--color03);
}

.c2 {
  display: flex;
  gap: 20px;
}

.h2 {
  margin-bottom: 1em;
  font-size: 2rem;
  font-weight: 900;
}

.h3 {
  margin-bottom: 1em;
  font-size: 1.6rem;
  font-weight: 900;
}

.sec1-title {
  width: fit-content;
  margin: 0 auto;
  font-size: 3.2rem;
  line-height: 1.8;
}

.sec1-title-span {
  padding: 3px 12px;
  margin-right: 12px;
  color: var(--color02);
  border: 6px solid var(--color02);
}

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

.sec1 .sec-content {
  padding-bottom: 0;
}

.sec1img {
  /* margin-left: -20px; */
  max-width: var(--max-content-width);
  padding-bottom: 3em;
  margin-right: auto;
  margin-left: auto;
  background: url(./question.png) -5px 0 / contain no-repeat;
}

.sec1list {
  width: fit-content;
  margin: 0 0 0 auto;
  font-weight: 700;
  line-height: 2;
  list-style-type: none;
}

.sec2-img {
  width: 100px;
}

.sec2-treating {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px dotted var(--color01);
}

.sec2-method {
  margin-top: 1em;
}

.sec2-method dd {
  margin-left: 1em;
}

.sec2-method dd + dt {
  margin-top: 1em;
}

.sec2-movie {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  padding: 20px;
  margin: 0 auto;
  background: var(--color02);
  border-radius: 10px;
}

.sec2-movie .play-button {
  width: 60px;
  height: 60px;
}

.sec4-frame-image {
  padding-bottom: 40%;
  background-image: url(./oneday.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 80% auto;
}

.sec4-p {
  padding-bottom: 1em;
  margin-bottom: 1em;
  border-bottom: 1px dotted var(--color01);
}

.sec6-frame {
  margin-top: 2em;
}

.sec6-img {
  width: 120px;
}

.sec6 p {
  /* padding-right: 20px; */
  padding-left: 20px;
}

.sec6-price {
  width: 100%;
  font-size: 1.4rem;
}

.sec6-price-name {
  width: 60%;
  padding: 10px 0;
  font-weight: 700;
  text-align: left;
}

.sec6-price-name span {
  padding: 10px;
  font-weight: 400;
}

.sec6-price-price {
  width: 40%;
  text-align: right;
}

.sec7-h2 {
  margin-bottom: .5em;
  font-weight: 700;
  color: var(--color07);
}

p + .sec7-h2 {
  padding-top: 1em;
  margin-top: 1em;
  border-top: 1px dotted var(--color01);
}

.sec8-title {
  padding-top: 1em;
  padding-bottom: 2em;
  background: url(./doctor.png) 95% 100% / contain no-repeat;
}

.contact-form {
  position: relative;
  overflow: hidden;
}

.mdl-conf {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding-bottom: 2em;
  overflow: scroll;
  background: #fff;
  opacity: 0;
  transition: opacity .6s, transform .0001s .6s;
  transform: translateX(100vw);
}

.mdl-conf.active {
  opacity: 1;
  transition: transform .0001s, opacity .6s .0001s;
  transform: translateX(0);
}

.mdl-conf-label {
  font-weight: 700;
}

.mdl-conf-set {
  padding-top: 1em;
  margin-top: 1em;
  border-top: 1px dotted var(--color01);
}

.mdl-conf-value {
  word-wrap: break-word;
}

.mdl-conf-submit {
  display: flex;
  justify-content: space-between;
}

.mdl-conf-edit-button {
  display: inline-block;
  width: 33%;
  padding: 10px;
  font-size: 2rem;
  color: var(--color01);
  background: var(--color03);
  border: none;
  border-radius: 10px;
}

.mdl-conf-submit-button {
  display: inline-block;
  width: 50%;
  padding: 10px;
  font-size: 2rem;
  color: var(--color05);
  background: var(--color02);
  border: none;
  border-radius: 10px;
}

.form {
  margin-bottom: 2em;
}

.form-block + .form-block {
  padding-top: 1em;
  margin-top: 1em;
  border-top: 1px dotted var(--color01);
}

.form-label {
  margin-bottom: .5em;
}

.form-input-set {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1em;
}

.form-input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color01);
  appearance: none;
  border-radius: 0;
}

.form-middle {
  width: calc(50% - 10px);
}

.form-short {
  width: calc(21% - 10px);
}

.form-errmsg {
  display: none;
  padding: 5px;
  color: var(--color06);
  border: 1px solid var(--color06);
}

.form-submit {
  text-align: center;
}

.form-button {
  display: inline-block;
  width: 80%;
  padding: 10px;
  font-size: 2rem;
  color: var(--color05);
  background: var(--color02);
  border: none;
  border-radius: 10px;
  appearance: none;
}

.form-birthday-text {
  width: 5%;
  text-align: left;
}

.contact-tell {
  padding-top: 2em;
  margin-top: 2em;
  text-align: center;
  border-top: 1px solid var(--color03);
}

.contact-tell-link {
  font-size: 3rem;
  font-weight: bold;
}

@media screen and (min-width: 880px) {
  body {
    font-size: 2.2rem;
    line-height: 1.7;
  }

  a:focus, a:hover, a:active {
    color: var(--color07);
    border-bottom: 1px dotted var(--color07);
  }

  .m {
    display: none;
  }

  .content {
    max-width: 900px;
    margin: auto;
  }

  .header-content {
    max-width: 1480px;
    margin: auto;
  }

  .mv {
    min-height: 900px;
    background-position: 50% 76%;
  }

  .mv-content {
    max-width: 1006px;
    margin: 0 auto;
  }

  .sec-content {
    padding-top: 40px;
    padding-bottom: 120px;
  }

  .mv-cap {
    top: 0;
    right: 0;
    left: auto;
    font-size: 5.4rem;
  }

  .mv-cap-01 {
    padding: 5px 26px;
    font-size: 3rem;
    border-radius: 30px;
  }

  a.mv-vid {
    top: 22%;
    right: 0;
    width: 300px;
    padding: 30px 20px;
    font-size: 3.6rem;
    color: var(--color05);
    border-radius: 30px;
    transition: all .3s;
  }

  .mv-vid:focus, .mv-vid:hover, .mv-vid:active {
    opacity: .9;
    transform: scale(1.02);
  }

  .mv-vid-01 {
    font-size: 2.8rem;
  }

  .mv-vid .play-button {
    width: 90px;
    height: 90px;
  }

  .mv-features {
    top: 22%;
    right: 36%;
    left: auto;
    gap: 20px;
    width: 262px;
  }

  .mv-features-item {
    padding: 16px;
    font-size: 2.2rem;
  }

  .mv-features-item::before {
    font-size: 1.6rem;
  }

  .mv-banner {
    position: absolute;
    top: 60%;
    right: -2.5%;
    left: auto;
    width: 674px;
    transition: all .3s;
  }

  .mv-banner:focus, .mv-banner:hover, .mv-banner:active {
    opacity: .9;
    transform: scale(1.02);
  }

  .mv-button-wrapper .sec-content {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .contact-button {
    width: auto;
    padding: 10px 60px;
    transition: all .3s;
  }

  .mv-button-wrapper {
    padding-top: 0;
  }

  .mv-button-wrapper .contact-button {
    border: 1px solid var(--color02);
  }

  .mv-button-wrapper .contact-button:focus, .mv-button-wrapper .contact-button:hover, .mv-button-wrapper .contact-button:active {
    color: var(--color05);
    background: var(--color02);
    border-color: var(--color05);
  }

  .sec-yellow .contact-button-wrapper .contact-button {
    border: 1px solid var(--color04);
  }

  .sec-gray .contact-button-wrapper .contact-button {
    border: 1px solid var(--color03);
  }

  .sec-white .contact-button-wrapper .contact-button {
    border: 1px solid var(--color05);
  }

  .sec-yellow .contact-button-wrapper .contact-button:focus, .sec-yellow .contact-button-wrapper .contact-button:hover, .sec-yellow .contact-button-wrapper .contact-button:active {
    color: var(--color02);
    background: var(--color04);
    border-color: var(--color02);
  }

  .sec-gray .contact-button-wrapper .contact-button:focus, .sec-gray .contact-button-wrapper .contact-button:hover, .sec-gray .contact-button-wrapper .contact-button:active {
    color: var(--color02);
    background: var(--color03);
    border-color: var(--color02);
  }

  .sec-white .contact-button-wrapper .contact-button:focus, .sec-white .contact-button-wrapper .contact-button:hover, .sec-white .contact-button-wrapper .contact-button:active {
    color: var(--color02);
    background: var(--color05);
    border-color: var(--color02);
  }

  .arrow {
    width: 200px;
    height: 100px;
  }

  .sec-title {
    padding-bottom: 2em;
    font-size: 2.8rem;
  }

  .frame {
    padding: 26px;
    border-radius: 30px;
  }

  .c2 {
    gap: 40px;
  }

  .h2 {
    font-size: 2.8rem;
  }

  .h3 {
    font-size: 2.4rem;
  }

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

  .sec1-title-span {
    color: var(--color02);
    border: 4px solid var(--color02);
  }

  .sec1img {
    width: calc(100% - 20px);
    max-width: none;
    padding-top: 3em;
    padding-bottom: 8em;
    margin-top: -2em;
    margin-left: -10px;
  }

  .sec1list {
    font-size: 2.2rem;
    line-height: 3;
  }

  .sec2-img {
    width: 130px;
  }

  .sec2 .c2-s1 {
    min-width: 170px;
  }

  .sec2 .c2-s2 {
    padding-top: 70px;
  }

  .sec2-treating {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px dotted var(--color01);
  }

  .sec2-method {
    margin-top: 1em;
  }

  .sec2-method dd {
    margin-left: 1em;
  }

  .sec2-method dd + dt {
    margin-top: 1em;
  }

  .sec2-movie {
    width: 200px;
    border-radius: 20px;
    transition: transform .3s;
  }

  .sec2-movie .play-button {
    width: 70px;
    height: 70px;
  }

  .sec2-movie:focus, .sec2-movie:hover, .sec2-movie:active {
    transform: scale(1.02);
  }

  .sec4-frame-image {
    padding-bottom: 40%;
    background-size: 80% auto;
  }

  .sec6-frame {
    width: 50%;
    margin-right: auto;
    margin-left: auto;
  }

  .sec6-img {
    width: 200px;
  }

  .sec6 p {
    padding-left: 34px;
  }

  .sec6-price {
    font-size: 1.8rem;
  }

  .sec6-price-name {
    width: 60%;
    padding: 10px 0;
    font-weight: 700;
    text-align: left;
  }

  .sec6-price-name span {
    padding: 10px;
    font-weight: 400;
  }

  .sec6-price-price {
    width: 40%;
    text-align: right;
  }

  .contact-button-wrapper {
    margin-top: 100px;
  }

  .sec8 .content {
    width: 40%;
    min-width: 600px;
  }

  .sec8-title {
    padding-top: 2em;
    padding-bottom: 2em;
    padding-left: 2em;
    background: url(./doctor.png) 90% 100% / contain no-repeat;
  }

  .form-errmsg {
    padding: 5px 10px;
  }

  .form-button {
    width: auto;
    padding: 10px 30px;
    cursor: pointer;
    border: 1px solid var(--color02);
    transition: all .3s;
  }

  .form-button:hover {
    color: var(--color02);
    background: var(--color05);
    border-color: var(--color02);
  }

  .mdl-conf-edit-button {
    width: auto;
    padding: 10px 50px;
    cursor: pointer;
    border: 1px solid var(--color03);
    transition: all .3s;
  }

  .mdl-conf-edit-button:hover {
    background: var(--color05);
    border-color: var(--color01);
    transition: all .3s;
  }

  .mdl-conf-submit-button {
    width: auto;
    padding: 10px 100px;
    cursor: pointer;
    border: 1px solid var(--color02);
    transition: all .3s;
  }

  .mdl-conf-submit-button:hover {
    color: var(--color02);
    background: var(--color05);
    border-color: var(--color02);
  }
}

@supports (-webkit-touch-callout: none) {
  .mv {
    height: -webkit-fill-available;
  }

  .mv-content {
    height: -webkit-fill-available;
  }
}