@charset "utf-8";

/* stylelint-disable selector-class-pattern */

/* common */
:root {
  --main-width: 570px;
  --blank-half-width: calc((100% - var(--main-width)) / 2);
}

body {
  font-family:
    'Noto Sans JP',
    -apple-system,
    BlinkMacSystemFont,
    'Helvetica Neue',
    'Segoe UI',
    'Hiragino Sans',
    Meiryo,
    sans-serif;
  line-height: 1.6;
  color: #333;
  background: linear-gradient(180deg, #eef1f5 43.64%, #e0e3ea 114.86%);
}

article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
  margin: 0;
}

button {
  background-color: transparent;
  border: none;
  outline: none;
}

ol,
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

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

h1,
h2,
h3 {
  max-width: 100%;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

a {
  color: #333;
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: #333;
  text-decoration: none;
  opacity: 0.7;
}

.u-sp {
  display: block;
}

.u-pc {
  display: none;
}

header,
main,
footer {
  width: 100%;
  max-width: var(--main-width);
  margin: 0 auto;
}

.u-plan-btn {
  display: block;
  margin: 0 auto 20px;
}

.about-product .u-plan-btn {
  margin-bottom: 0;
}

.u-plan-btn__img {
  height: auto;
}

.u-plan-btn + .u-plan-btn {
  width: 80%;
  margin-bottom: 0;
}

.slick-dots {
  bottom: -45px;
}

.slick-dots li button::before {
  font-size: 8px;
  opacity: 0.2;
}

.slick-dots li.slick-active button::before {
  color: #8fb130;
  opacity: 0.6;
}

@media (min-width: 768px) {
  h2 {
    font-size: 34px;
  }

  h3 {
    font-size: 28px;
  }

  body .u-sp {
    display: none;
  }

  body .u-pc {
    display: block;
  }
}

/* .Header */

.Header {
  z-index: 1; /* root: body */
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  padding-left: 15px;
  background-color: #fff;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: 0 0 8px rgba(119, 119, 119, 0.3);
}

.Header__logo {
  max-width: 205px;
}

/* END: .Header */

/* .Hero */

.Hero {
  margin: -5px 0 0;
  background: linear-gradient(180deg, #fff 19.93%, #ffebc7 93.48%);
}

.Hero__ttl {
  margin-bottom: 0;
}

.Hero-plan {
  padding: 10px 16px 0;
  text-align: center;
  background-color: #fff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.Hero-plan__note {
  margin-bottom: 24px;
  font-size: 12px;
}

.Hero-plan__mark {
  position: relative;
  max-width: 170px;
  margin: 0 auto 4px;
  font-weight: bold;
}

.Hero-plan__mark::before,
.Hero-plan__mark::after {
  position: absolute;
  bottom: 8px;
  width: 1px;
  height: 16px;
  content: '';
  background: #333;
}

.Hero-plan__mark::before {
  left: 0;
  transform: translate(-10px, 2px) rotate(150deg);
}

.Hero-plan__mark::after {
  right: 5px;
  transform: translate(10px, 2px) rotate(30deg);
}

@media (min-width: 768px) {
  .Hero-plan {
    padding-top: 15px;
  }

  .Hero-plan__note {
    font-size: 16px;
  }

  .Hero-plan__mark {
    max-width: 260px;
    font-size: 24px;
  }

  .Hero-plan__mark::before,
  .Hero-plan__mark::after {
    height: 24px;
  }
}

/* END: .Hero */

/* .Choice */

.Choice {
  padding: 36px 0 40px;
  text-align: center;
  background-color: #fff;
}

.Choice__ttl {
  padding: 0 16px;
  font-size: 28px;
  font-weight: bold;
  color: #f8860d;
  text-align: center;
}

.Choice__ttl--highlight {
  position: relative;
  padding-right: 12px;
  font-size: 20px;
  color: #f93828;
  border-bottom: 2px solid #f93828;
}

.Choice__ttl--highlight::after {
  position: absolute;
  top: 0;
  font-size: 14px;
  content: '\00203b';
}

.Choice-list {
  display: flex;
  justify-content: space-around;
  margin: 24px auto 30px;
}

.Choice-list-item {
  height: 625px;
  padding: 0 10px 10px;
}

.Choice-list-item-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 16px;
  background-color: #f6f9ef;
  border-radius: 16px;
  box-shadow: 0 4px 0 0 rgba(136, 136, 136, 0.2);
}

.Choice-list-item-inner__mark {
  padding: 4px 16px;
  margin: 0 auto 8px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3;
  color: #ffff;
  background-color: #f8860d;
  border-radius: 16px;
}

.Choice-list-item-inner__ttl {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: bold;
}

.Choice-list-item-inner__ttl--highlight {
  color: #f8860d;
  text-decoration: underline;
}

.Choice-list-item-inner__img {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 16px;
}

.Choice-list-item-inner-detail {
  height: 100%;
}

.Choice-list-item-inner-detail__txt {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.6;
  text-align: justify;
}

.Choice-list-item-inner-detail-note {
  padding-left: 0;
  font-size: 12px;
  text-align: left;
}

.Choice-list-item-inner-detail-note__txt::before {
  content: '\00203b';
}

@media (min-width: 390px) {
  .Choice-list-item {
    height: 585px;
  }
}

@media (min-width: 768px) {
  .Choice-list-item {
    height: 530px;
  }

  .Choice-list-item-inner {
    padding: 35px 25px;
  }
}

/* END: .Choice */

/* .Expand */

.Expand {
  padding: 0 16px 40px;
  background-color: #fff;
}

.Expand-item {
  padding: 10px 8px 16px;
  background-color: #92b729;
  border-radius: 16px;
}

.Expand-item + .Expand-item {
  margin-top: 18px;
}

.Expand-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  cursor: pointer;
}

.Expand-item-header__img {
  object-fit: contain;
  object-position: center;
}

.Expand-item-header__ttl {
  margin: auto;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

.Expand-item-header__ttl--highlight {
  color: #fff377;
}

.Expand-item-detail-content-list {
  width: 100%;
  padding-left: 0;
  margin-top: 16px;
}

.Expand-item-detail-content-list__note::before {
  content: '\00203b';
}

.Expand-item-header__trigger {
  position: relative;
  width: 28px;
  height: 28px;
  margin-right: 16px;
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
}

.Expand-item-header__trigger::before,
.Expand-item-header__trigger::after {
  position: absolute;
  content: '';
  background-color: #888;
}

.Expand-item-header__trigger::before {
  top: 50%;
  left: 50%;
  width: 12px;
  height: 3px;
  transform: translate(-50%, -50%);
}

.Expand-item-header__trigger::after {
  top: 50%;
  left: 50%;
  width: 3px;
  height: 12px;
  transition: 0.4s transform ease;
  transform: translate(-50%, -50%);
}

.Expand-item--show .Expand-item-header__trigger::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.Expand-item-detail-content__btn {
  display: block;
  padding: 8px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}

.Expand-item-detail-content__btn:hover {
  color: #fff;
}

.Expand-item-detail-content__btn img {
  margin-left: 10px;
}

.Expand-item-detail-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-height: 0;
  padding: 0 16px;
  overflow: hidden;
  text-align: left;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  transition: 0.3s max-height ease;
}

.Expand-item--show .Expand-item-detail-content {
  padding: 0 16px 24px;
  border-top: 1px solid #fff;
  border-radius: 0 0 14px 14px;
}

.Expand--chat .Expand-item-header__img {
  width: 50px;
  margin-left: 16px;
}

.Expand--chat .Expand-item {
  padding: 10px 0;
}

.Expand--chat .Expand-item-detail-content img {
  width: 50px;
  margin: 6px 0;
}

.Expand--chat .Expand-item-detail-content__btn img {
  width: 26px;
  margin: 0 10px;
}

.Expand--chat .Expand-item-detail-content__txt {
  margin: auto;
  font-weight: bold;
  line-height: 1.3;
  color: #fff;
}

.Expand--chat .Expand-item-detail-content__btn {
  width: 100%;
  margin-bottom: 0;
  color: #92b729;
  background-color: #fff;
}

.Expand--chat .Expand-item--show .Expand-item-detail-content {
  padding: 0 0 8px;
  margin: 10px 16px 0;
}

.Expand--faq {
  padding: 0;
  background-color: unset;
}

.Expand--faq .Expand-item-header {
  padding: 16px 0;
}

.Expand--faq .Expand-item {
  padding: 0 16px;
  background-color: #fff;
}

.Expand--faq .Expand-item + .Expand-item {
  margin-top: 8px;
}

.Expand--faq .Expand-item-header__ttl {
  font-size: 16px;
  color: #333;
  text-align: left;
}

.Expand--faq .Expand-item-header__img {
  width: 28px;
}

.Expand--faq .Expand-item-header__trigger {
  position: relative;
  right: 8px;
  width: 10px;
  height: 10px;
  margin-right: 0;
  cursor: pointer;
  content: '';
  border-bottom: 2px solid #333;
  border-left: 2px solid #333;
  border-radius: unset;
  transition: all 0.8s;
  transform: rotate(-45deg);
}

.Expand--faq .Expand-item-header__trigger::before,
.Expand--faq .Expand-item-header__trigger::after {
  content: unset;
}

.Expand--faq .Expand-item--show .Expand-item-header__trigger {
  transform: rotate(-225deg);
}

.Expand--faq .Expand-item-detail-content {
  padding: 0;
  border-top: 1px solid #f0f0f0;
}

.Expand--faq .Expand-item-detail-content-list {
  margin: 0 0 16px;
  counter-reset: item;
}

.Expand--faq .Expand-item-detail-content-list__note::before {
  content: counter(item) ' 位';
  counter-increment: item;
}

.Expand--faq .Expand-item-detail-content__txt {
  padding-top: 16px;
}

@media (min-width: 768px) {
  .Expand-item {
    padding: 0 16px;
  }

  .Expand--chat .Expand-item-header {
    min-height: 105px;
  }

  .Expand--chat .Expand-item-header__img,
  .Expand--chat .Expand-item-detail-content img {
    width: 75px;
  }

  .Expand--chat .Expand-item-header__img {
    margin-left: 30px;
  }

  .Expand--chat .Expand-item--show .Expand-item-detail-content {
    padding: 0;
    margin: 0 30px 16px;
  }

  .Expand--chat .Expand-item-detail-content__txt {
    font-size: 20px;
  }

  .Expand--chat .Expand-item-detail-content__btn img {
    width: 26px;
  }

  .Expand--chat .Expand-item {
    padding-top: 8px;
  }

  .Expand--chat .Expand-item-detail-content {
    padding: 0 30px;
  }

  .Expand--faq .Expand-item-header__ttl {
    flex: 1;
    padding: 0 20px 0 12px;
    margin: 0;
  }

  .Expand--faq .Expand-item-header__img {
    width: 42px;
  }

  .Expand--faq .Expand-item + .Expand-item {
    margin-top: 16px;
  }
}

/* END: .Expand */

/* .Birthday */

.Birthday {
  padding: 40px 0;
  text-align: center;
  background-color: #fff377;
}

.Birthday__ttl {
  font-size: 28px;
  font-weight: bold;
  color: #f8860d;
}

.Birthday__sub,
.Birthday__mark {
  font-size: 20px;
  color: #333;
}

.Birthday__mark {
  position: relative;
  max-width: 205px;
  margin: 24px auto 8px;
}

.Birthday__mark--highlight {
  color: #f8860d;
}

.Birthday__mark::before,
.Birthday__mark::after {
  position: absolute;
  bottom: 8px;
  width: 2px;
  height: 16px;
  content: '';
  background: #333;
}

.Birthday__mark::before {
  left: 0;
  transform: translate(-10px, 2px) rotate(150deg);
}

.Birthday__mark::after {
  right: 5px;
  transform: translate(10px, 2px) rotate(30deg);
}

.Birthday__img {
  margin-top: 24px;
}

.Birthday__lnk {
  display: block;
  margin: 0 16px;
}

.Birthday__note {
  margin: 4px 16px 0;
  font-size: 12px;
  text-align: right;
}

@media (min-width: 768px) {
  .Birthday__mark {
    max-width: 290px;
    font-size: 28px;
  }

  .Birthday__mark::before,
  .Birthday__mark::after {
    height: 28px;
  }

  .Birthday__note {
    font-size: 16px;
  }
}

/* END: .Birthday */

/* .Introduce */

.Introduce {
  padding: 40px 0;
  text-align: center;
  background-color: #fff;
}

.Introduce__ttl {
  margin-bottom: 29px;
  font-size: 28px;
  font-weight: bold;
  color: #f8860d;
}

.Introduce__sub {
  margin-bottom: 0;
  font-size: 20px;
  color: #333;
}

.Introduce .Expand {
  padding-bottom: 0;
}

.Introduce .Expand-item-header__trigger {
  margin-right: 8px;
}

.Introduce .Expand-item-header__ttl {
  margin-left: 8px;
  font-size: 16px;
  line-height: 1.3;
  text-align: left;
}

.Introduce .Expand-item {
  padding: 0;
}

.Introduce .Expand-item-header__img {
  margin: -15px 0 16px;
}

.Introduce .Expand-item-detail-content__ttl {
  margin: 16px 0;
}

.Introduce .Expand-item-detail-content__btn {
  width: 100%;
  margin-top: 24px;
}

.Expand-item--life {
  border: 3px solid #92b729;
}

.Expand-item--medical {
  border: 3px solid #f5ab00;
}

.Expand-item--medicalwomen {
  border: 3px solid #f05187;
}

.Expand-item--cancer {
  border: 3px solid #f93828;
}

.Expand-item--disability {
  border: 3px solid #1c59be;
}

.Expand-item--life .Expand-item-detail-content__btn {
  background-color: #92b729;
}

.Expand-item--medical,
.Expand-item--medical .Expand-item-detail-content__btn {
  background-color: #f5ab00;
}

.Expand-item--medicalwomen,
.Expand-item--medicalwomen .Expand-item-detail-content__btn {
  background-color: #f05187;
}

.Expand-item--cancer,
.Expand-item--cancer .Expand-item-detail-content__btn {
  background-color: #f93828;
}

.Expand-item--disability,
.Expand-item--disability .Expand-item-detail-content__btn {
  background-color: #1c59be;
}

.Expand-item--life .Expand-item-detail-content {
  background-color: #f4f7ea;
}

.Expand-item--medical .Expand-item-detail-content {
  background-color: #fef7e5;
}

.Expand-item--medicalwomen .Expand-item-detail-content {
  background-color: #fdeef3;
}

.Expand-item--cancer .Expand-item-detail-content {
  background-color: #feebe9;
}

.Expand-item--disability .Expand-item-detail-content {
  background-color: #e8eef8;
}

.Expand-item--life .Expand-item-detail-content__ttl {
  color: #8fb130;
}

.Expand-item--medical .Expand-item-detail-content__ttl {
  color: #f5ab00;
}

.Expand-item--medicalwomen .Expand-item-detail-content__ttl {
  color: #f05187;
}

.Expand-item--cancer .Expand-item-detail-content__ttl {
  color: #f93828;
}

.Expand-item--disability .Expand-item-detail-content__ttl {
  color: #1c59be;
}

.Expand-item-detail-content__note {
  width: 100%;
  font-size: 12px;
}

.Expand-item-detail-content__lnk {
  width: 100%;
  font-weight: bold;
}

.Expand-item-detail-content__img {
  margin-top: 8px;
}

.Expand-item--life .Expand-item-detail-content__img {
  margin-top: 24px;
}

.Expand-item--life .Expand-item-detail-content__txt,
.Expand-item--life .Expand-item-detail-content__note {
  margin-bottom: 8px;
}

.Expand-item-detail-content__img + .Expand-item-detail-content-list {
  margin-top: 16px;
}

@media (min-width: 768px) {
  .Introduce .Expand-item-header__ttl {
    max-width: 360px;
  }

  .Expand--chat .Expand-item-header__ttl {
    font-size: 28px;
  }

  .Expand--chat .Expand-item-header__trigger {
    width: 45px;
    height: 45px;
    margin-right: 30px;
  }

  .Expand--chat .Expand-item-header__trigger::before {
    width: 20px;
    height: 4px;
  }

  .Expand--chat .Expand-item-header__trigger::after {
    width: 4px;
    height: 20px;
  }
}

/* END: .Introduce */

/* .Procedure */

.Procedure {
  padding-bottom: 40px;
  background-color: #fff;
}

.Procedure-inner {
  padding: 40px 16px;
  background-color: #fff8ec;
  border-radius: 16px;
  box-shadow: 0 4px 4px #3333;
}

.Procedure img {
  margin-bottom: 24px;
}

.Procedure img:last-child {
  margin-bottom: 0;
}

.Procedure-advertise {
  position: relative;
  margin-top: 40px;
}

.Procedure-advertise__lnk {
  position: absolute;
  right: 0;
  bottom: 50px;
  left: 0;
  display: block;
  margin: 0 16px;
  text-align: center;
}

@media (min-width: 768px) {
  .Procedure-advertise__lnk img {
    padding: 0;
  }
}

/* END: .Procedure */

/* .Note */

.Note {
  padding: 40px 16px 10px;
  background-color: #fff;
}

.Note__lnk {
  display: block;
  margin-bottom: 24px;
}

.Note .Expand--chat {
  padding: 0;
}

.Note__ttl {
  margin-bottom: 15px;
  font-size: 18px;
  text-align: center;
}

.Note-list {
  margin-bottom: 40px;
}

.Note-list__item {
  position: relative;
  padding-left: 15px;
  margin-bottom: 3px;
  line-height: 26px;
  text-align: justify;
}

.Note-list__item::before {
  position: absolute;
  left: 0;
  content: '・';
}

@media (min-width: 768px) {
  .Note__ttl {
    font-size: 24px;
  }
}

/* END: .Procedure */

/* .Faq */

.Faq {
  padding: 40px 16px;
  background-color: #f5f3f0;
}

.Faq__ttl {
  margin-bottom: 16px;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
}

/* END: .Faq */

/* .Footer */

.Footer {
  padding-bottom: 90px;
  background-color: #fff;
}

.Footer__rt {
  margin: 0 16px 30px 0;
  font-size: 12px;
  text-align: right;
}

.Footer__copyright {
  padding: 20px 10px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 20px;
  color: #888;
  text-align: center;
  border-top: 1px solid #ccc;
}

@media (min-width: 768px) {
  .Footer {
    padding-bottom: 0;
  }
}

/* END: .Footer */

/* .Float */

.Float {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: -1; /* body */
  display: flex;
  gap: 8px;
  justify-content: center;
  width: 100%;
  padding: 5px 16px 8px;
  background-color: #fff;
  opacity: 0;
  transition: 0.3s opacity ease;
}

.Float .u-plan-btn {
  width: 100%;
  margin: 0;
  text-decoration: none;
}

.Float--show {
  z-index: 2; /* body */
  opacity: 1;
}

.u-plan-btn__txt {
  position: relative;
  width: fit-content;
  margin: 0 auto 2px;
  font-size: 14px;
  font-weight: bold;
}

.u-plan-btn__txt::before,
.u-plan-btn__txt::after {
  position: absolute;
  bottom: 5px;
  width: 1px;
  height: 16px;
  content: '';
  background: #333;
}

.u-plan-btn__txt::before {
  left: 0;
  transform: translate(-10px, 2px) rotate(150deg);
}

.u-plan-btn__txt::after {
  right: 5px;
  transform: translate(10px, 2px) rotate(30deg);
}

.Float .u-plan-btn__img {
  width: 100%;
}

@media (min-width: 768px) {
  .Float {
    display: none;
  }
}

/* END: .Float */

/* .Fixed */

.Fixed-logo {
  display: none;
}

.Fixed-plan {
  display: none;
}

.Fixed-index {
  display: none;
}

.Fixed-img {
  display: none;
}

.Fixed-index-item__lnk {
  padding: 16px 0;
}

@media (min-width: 960px) {
  .Fixed-logo {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
  }

  .Fixed-plan {
    position: fixed;
    top: 100px;
    right: calc(var(--blank-half-width) + var(--main-width));
    left: unset;
    display: block;
    width: 100%;
    max-width: min(430px, var(--blank-half-width));
    padding: 0 20px;
    text-align: center;
  }

  .Fixed-plan__img {
    width: 100%;
    max-width: 528px;
    margin-bottom: 25px;
  }

  .Fixed-plan__btn {
    display: block;
    width: 100%;
  }

  .Fixed-plan__btn + .Fixed-plan__btn {
    margin-top: 20px;
  }

  .Fixed-index {
    position: fixed;
    top: 100px;
    left: calc(var(--blank-half-width) + var(--main-width) + 20px);
    display: block;
    width: 100%;
    min-width: 156px;
    max-width: min(346px, var(--blank-half-width));
    padding: 25px 30px 25px 0;
  }

  .Fixed-index-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: bold;
  }

  .Fixed-index-item {
    position: relative;
    width: 100%;
    border-top: 1px solid #ccc;
  }

  .Fixed-index-item:last-child {
    border-bottom: 1px solid #ccc;
  }

  .Fixed-index-item__lnk {
    display: flex;
    text-align: left;
  }

  .Fixed-index-item__arrow {
    position: relative;
    display: inline-block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 3px 0 0 auto;
    background-color: #fff;
    border-radius: 50%;
  }

  .Fixed-index-item__arrow::after {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 9px;
    height: 9px;
    content: '';
    border-right: 3px solid #f8860d;
    border-bottom: 3px solid #f8860d;
    transform: rotate(45deg);
  }

  .Fixed-index-item__lnk {
    text-decoration: none;
  }

  .Fixed-index-item__lnk:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  .Fixed-img {
    position: fixed;
    bottom: 0;
    left: calc(var(--blank-half-width) + var(--main-width) + 20px);
    display: block;
    max-width: 578px;
  }
}

@media (min-width: 1024px) {
  .Fixed-plan {
    top: 120px;
  }

  .Fixed-index-list {
    padding: 0;
  }
}

@media (min-width: 1440px) {
  .Fixed-plan {
    top: 200px;
  }

  .Fixed-plan__btn + .Fixed-plan__btn {
    margin-top: 40px;
  }
}

@media (min-width: 1900px) {
  .Fixed-plan {
    left: 157px;
  }
}

/* END: .Fixed */