/* ----------------------------------------------- */
/* BASIC SETUP */
/* ----------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

li {
  list-style: none;
}

a:link,
a:visited {
  text-decoration: none;
}

h1 {
  margin: 0;
}

.wrap {
  font-family: "游ゴシック体",
    YuGothic,
    "游ゴシック Medium",
    "Yu Gothic Medium",
    "游ゴシック",
    "Yu Gothic",
    sans-serif;
  overflow: hidden;
  position: relative;
}

:root {
  --red: #ff382e;
  --red-dark: #ff0000;
  --red-pink: #de5d50;
  --white: #fff;
  --black: #222222;
  --black-light: #333333;
  --brown: #76411c;
  --orange: #ff6f00;
  --orange-light: #f2f0eb;
  --orange-bright: #ffd74d;
  --orange-muddy-light: #d1c6bf;
  --orange-gray: #d7d2c7;
  --cream: #f4f1c1;
  --cream-orange: #fffac2;
  --yellow: #ffdf5f;
  --yellow-light: #ffdd5f;
  --gray: #cccccc;
  --gray-light: #dbd6cb;
  --gray-white: #eceae5;
  --gray-yellow: #f7f3eb;
  --gray-dark: #e8e6e1;
  --gray-light-white: #f8f8f8;
  --skyblue-dark: #8bc5d1;
  --green: #5baa4a;
}

.sp-open {
  display: none;
}

.sp-open575-98 {
  display: none;
}

.sp-open767-98 {
  display: none;
}

.not-product {
  font-size: 15px;
  text-align: center;
  color: var(--black);
}

.bgc-white {
  background-color: var(--white);
}

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

.fs-15 {
  font-size: 15px;
}

.fs-16 {
  font-size: 1.6rem;
}

.preparation {
  font-size: 15px;
  color: var(--black);
  text-align: center;
}

.form-back {
  background: url("../img/css/img/single-detail-background.png") no-repeat center/100% 100%;
  width: 100%;
  padding: 3rem 3rem 5rem;
}

.mtb-5 {
  margin: 5rem 0;
}

.border-none {
  border: none;
}

.font-brown h1 {
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-style: normal;
  font-weight: 500;
  color: var(--brown);
}

.bgc-initial {
  background-color: initial;
}

.ec-navlistRole .ec-navlistRole__item a {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.w-40-m-center {
  width: 40%;
  margin: 0 auto;
}

.mb-15 {
  margin-bottom: 15px;
}

/* ----------------------------------------------- */
/* MODULES */
/* ----------------------------------------------- */
/* ----------------------------- CARD ----------------------------- */
.card {
  width: 30%;
  border: 1px solid var(--gray-light);
  display: block;
  border-radius: 8px;
  background-color: var(--white);
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-style: normal;
  font-weight: 500;
  height: 100%;
}

.index-card:not(:last-child) {
  margin-right: 5%;
}

.card__img-wrap {
  width: 20rem;
  height: 20rem;
  margin: 2rem auto 4rem;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card__label {
  color: var(--brown);
  font-size: 2rem;
  margin: 0 3rem 1.5rem;
  line-height: 1.8;
  height: 5rem;
}

.card__size {
  color: var(--brown);
  font-size: 2rem;
  margin: 0 3rem;
}

.card__status {
  color: var(--white);
  background-color: var(--orange);
  font-size: 1.5rem;
  padding: 8px 1.6rem;
  border-radius: 4px;
  font-weight: bold;
  margin: 2.5rem 3rem;
  display: inline-block;
}

.card__status--off {
  color: var(--white);
  background-color: var(--black-light);
  font-size: 1.5rem;
  padding: 8px 1.6rem;
  border-radius: 4px;
  font-weight: bold;
  margin: 2.5rem 3rem;
  display: inline-block;
}

.card__status--reserve {
  color: var(--white);
  background-color: var(--green);
  font-size: 1.5rem;
  padding: 8px 1.6rem;
  border-radius: 4px;
  font-weight: bold;
  margin: 2.5rem 3rem;
  display: inline-block;
}

.card__text {
  color: var(--black);
  font-size: 1.5rem;
  margin: 0 3rem 2rem;
  line-height: 1.5;
  font-family: "游ゴシック体",
    YuGothic,
    "游ゴシック Medium",
    "Yu Gothic Medium",
    "游ゴシック",
    "Yu Gothic",
    sans-serif;
  height: 10rem;
}

/* ----------------------------- PRODUCT-NON-SALE ----------------------------- */
.product-non-sale-card-wrap {
  display: flex;
}

.product-non-sale__title {
  font-size: 1.9rem;
  color: var(--brown);
  font-weight: bold;
  margin: 3rem 0 4rem;
}

/* ----------------------------- PRICE-DETAIL ----------------------------- */
.price-detail {
  color: var(--brown);
  background-color: var(--orange-bright);
  font-size: 1.6rem;
  display: flex;
  justify-content: space-between;
  padding: 2rem 3rem;
}

.price-detail__detail {
  margin-right: 1rem;
  position: relative;
}

.price-detail__detail::after {
  content: "";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--brown);
  border-right: 1px solid var(--brown);
  transform: rotate(45deg);
  top: 5px;
  right: -10px;
}

/* ----------------------------- OPERATIONS ----------------------------- */
.operations__button {
  background: url("../img/css/img/tab-default.png") no-repeat center/contain;
  position: relative;
  border: none;
  display: inline-block;
  font-size: 1.9rem;
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-style: normal;
  font-weight: 500;
  color: var(--brown);
  width: 21rem;
  letter-spacing: 1px;
  padding: 2.5rem 1rem 2.5rem 0;
  cursor: pointer;
}

.operations__button:not(:last-child) {
  margin-right: 1rem;
}

.operations__button::before,
.operations__button::after {
  position: absolute;
  content: "";
  display: inline-block;
}

.operations__button::before {
  width: 20px;
  height: 20px;
  background-color: var(--brown);
  border-radius: 50%;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}

.operations__button::after {
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--yellow-light);
  border-right: 1px solid var(--yellow-light);
  top: 31px;
  right: 2.8rem;
  transform: rotate(45deg);
}

.operations__tab--active {
  background: url("../img/css/img/tab-active.png") no-repeat center/contain;
  color: var(--white);
}

.operations__tab--active::before {
  background-color: var(--white);
}

.operations__tab--active::after {
  border-top: 1px solid var(--orange);
  border-right: 1px solid var(--orange);
}

.operations__tab-container {
  text-align: center;
  margin-bottom: 5rem;
}

.operations__content {
  display: none;
}

.operations__content--active {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 3rem;
  position: relative;
}

.operations__content--active::after {
  position: absolute;
  display: block;
  content: "";
  background: url("../img/css/img/border-dotted.png") no-repeat center/contain;
  width: 100%;
  height: 1rem;
  bottom: 0;
}


/* ----------------------------- HAMBURGER-MENU ----------------------------- */
.sp-hanburger-menu {
  display: none;
}

/* ----------------------------------------------- */
/* COMPONENTS */
/* ----------------------------------------------- */
/* ----------------------------- LOGO ----------------------------- */
.logo {
  text-align: center;
  width: 25rem;
  font-size: 1.6rem;
  display: block;
  color: var(--black);
}

.logo__img-wrap {
  margin-top: 1rem;
}

.logo__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ----------------------------- MENU ----------------------------- */
.menu {
  margin-right: -9rem;
}

.menu__list {
  display: inline-block;
  vertical-align: middle;
}

.menu__list:not(:last-child) {
  margin-right: 3rem;
}

.menu__link {
  color: var(--black);
  font-size: 12px;
}

.menu__icon-wrap {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto;
  padding-bottom: 5px;
}

.menu__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu__button {
  display: inline-flex;
  align-items: center;
  background-color: var(--white);
  border-radius: 3rem;
  height: 4.5rem;
  width: 14rem;
}

.menu__cart-wrap {
  width: 3rem;
  margin-left: 2rem;
}

.menu__cart {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu__num {
  color: var(--white);
  margin-right: auto;
  padding: 5px 8px;
  font-size: 1.4rem;
  border-radius: 10rem;
  background-color: var(--red);
}

.menu__total {
  font-size: 1.4rem;
  margin-right: 1rem;
  font-weight: normal;
  color: var(--black);
}

/* ----------------------------- MAIN-VISUAL ----------------------------- */
.main-visual {
  background: url("../img/css/img/main-visual.jpg") no-repeat bottom/cover;
  height: 72vh;
  position: relative;
}

.main-visual::after {
  content: "";
  position: absolute;
  display: block;
  background: url("../img/css/img/main-visual-bottom.png") no-repeat bottom/contain;
  width: 130%;
  height: 100%;
  left: -15%;
  bottom: -55px;
  z-index: 0;
}

.main-visual__heading {
  width: 26rem;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.main-visual__catch-copy {
  width: 100%;
}

/* ----------------------------- UNDER-MAIN-VISUAL ----------------------------- */
.under-main-visual {
  background: url("../img/css/img/product-list-main-visual.jpg") no-repeat bottom/cover;
  height: 50vh;
  position: relative;
}

.under-main-visual::before {
  content: "";
  position: absolute;
  display: block;
  opacity: .3;
  background-color: var(--skyblue-dark);
  width: 100%;
  height: 100%;
}

.under-main-visual::after {
  content: "";
  position: absolute;
  display: block;
  background: url("../img/css/img/main-visual-bottom.png") no-repeat bottom/cover;
  width: 130%;
  height: 100%;
  left: -15%;
  bottom: -50px;
  z-index: 0;
}

.under-main-visual__heading {
  font-size: 5rem;
  color: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* ----------------------------- SECTION-HEADING ----------------------------- */
.section-heading__sub-heading,
.how-to__sub-heading,
.news-heading__sub-heading,
.review__heading,
.policy__heading,
.contact-page__heading {
  width: 100%;
  margin: 0 auto;
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-weight: 500;
  font-style: normal;
  color: var(--brown);
  text-align: center;
  position: relative;
}

.review__heading,
.policy__heading,
.contact-page__heading,
.transaction__heading {
  font-size: 4.8rem;
}

.section-heading__sub-heading {
  max-width: 30rem;
  font-size: 2.8rem;
}

.news-heading__sub-heading {
  max-width: 30rem;
  font-size: 2.8rem;
}

.how-to__sub-heading {
  max-width: 22rem;
  font-size: 2.8rem;
  letter-spacing: 4px;
}

.section-heading__sub-heading::before,
.section-heading__sub-heading::after,
.how-to__sub-heading::before,
.how-to__sub-heading::after,
.news-heading__sub-heading::before,
.news-heading__sub-heading::after {
  position: absolute;
  content: "";
  display: inline-block;
}

.section-heading__sub-heading::before,
.how-to__sub-heading::before,
.news-heading__sub-heading::before {
  width: 2.7rem;
  height: 2.7rem;
  background: url("../img/css/img/mikan-yellow.png") no-repeat center/contain;
  bottom: 0;
  left: -10px;
}

.section-heading__sub-heading::after,
.how-to__sub-heading::after,
.news-heading__sub-heading::after {
  width: 2.7rem;
  height: 2.7rem;
  background: url("../img/css/img/mikan-orange.png") no-repeat center/contain;
  right: -5px;
  bottom: 0;
}

.section-heading__heading,
.how-to__heading,
.company__heading,
.transaction__heading,
.news-heading__heading {
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-weight: 500;
  font-style: normal;
  color: var(--brown);
  text-align: center;
}

.section-heading__heading {
  font-size: 5.5rem;
}

.news-heading__heading {
  font-size: 5.5rem;
  margin: 3rem 0 4rem;
}


.how-to__heading {
  font-size: 6.5rem;
  line-height: 1.5;
  letter-spacing: -6px;
}

.company__heading {
  font-size: 4.8rem;
}

.section-heading__read {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 5rem;
  color: var(--black);
}

.section-heading__director {
  text-align: center;
  font-size: 2.2rem;
}

.section-heading__name {
  text-align: center;
  font-size: 3.4rem;
  font-weight: bold;
  margin: 3rem 0;
}



/* ----------------------------- MESSAGE-BODY ----------------------------- */
.message-body__img-wrap {
  width: 60rem;
  margin: 5rem auto;
  position: relative;
  border-radius: 1rem;
}

.message-body__img-wrap::before,
.message-body__img-wrap::after {
  position: absolute;
  content: "";
  display: inline-block;
}

.message-body__img-wrap::before {
  width: 30rem;
  height: 17rem;
  background: url("../img/css/img/message-serif.png") no-repeat center/contain;
  bottom: 10rem;
  left: -14rem;
}

.message-body__img-wrap::after {
  width: 23rem;
  height: 22rem;
  background: url("../img/css/img/message-woman.png") no-repeat center/contain;
  bottom: 16rem;
  right: -35rem;
}

.message-body__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-body__text-wrap {
  margin: 0 0 10rem 0;
}

.message-body__text {
  font-size: 2rem;
  color: var(--black);
  letter-spacing: 1px;
  line-height: 2;
  text-align: center;
}

/* ----------------------------- MESSAGE-FOOTER ----------------------------- */
.message-footer {
  margin-bottom: 16%;
  position: relative;
  z-index: 1;
}

.message-footer::before,
.message-footer::after {
  position: absolute;
  content: '';
  display: inline-block;
}

.message-footer::before {
  background: url("../img/css/img/message-man.png") no-repeat center/contain;
  width: 27rem;
  height: 18rem;
  top: -8rem;
  left: 0;
}

.message-footer::after {
  background: url("../img/css/img/message-man2.png") no-repeat center/contain;
  width: 24rem;
  height: 18rem;
  top: -7.5rem;
  right: 0;
}

/* ----------------------------- MESSAGE-FOOTER-HEADING ----------------------------- */
.message-footer-heading__img-wrap {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  display: block;
}


.message-footer-heading__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.message-footer-heading__text-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}

.message-footer-heading__text {
  font-size: 1.8rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  color: var(--black);
}

.message-footer-heading__icon-wrap {
  width: 16rem;
  margin-left: 2rem;
  margin-bottom: -2.5rem;
}

.message-footer-heading__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ----------------------------- MESSAGE-FOOTER-BODY ----------------------------- */
.message-footer-body {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
}

.message-footer-body__img-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.message-footer-body__iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* ----------------------------- CALENDAR-BODY ----------------------------- */
.calendar-body__img-wrap {
  width: 100%;
}

.calendar-body__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.calendar-body__text {
  font-size: 1.8rem;
  color: var(--black);
  margin-top: 2rem;
}


/* ----------------------------- CONTACT-BUTTON ----------------------------- */
.contact-button {
  display: block;
  width: 100%;
  padding: 9rem 0;
  position: relative;
  background: url("../img/css/img/contact-button.png") no-repeat center/contain;
  color: var(--brown);
  font-size: 3.5rem;
  text-align: center;
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-weight: 500;
  font-style: normal;
}

.contact-button::before,
.contact-button::after {
  content: "";
  position: absolute;
  display: inline-block;
}

.contact-button::before {
  width: 54px;
  height: 38px;
  left: 150px;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/css/img/mail-icon.svg") no-repeat center/contain;
}

.contact-button::after {
  width: 35px;
  height: 35px;
  right: 114px;
  top: 90px;
  background: url("../img/css/img/contact-button-arrow.png") no-repeat center/contain;
}

.contact-button-wrap {
  position: relative;
}

.contact-button-wrap::before,
.contact-button-wrap::after {
  content: "";
  position: absolute;
  display: inline-block;
}

.contact-button-wrap::before {
  width: 47rem;
  height: 21rem;
  background: url("../img/css/img/contact-man-trees.png") no-repeat center/contain;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

/* ----------------------------- NEWS-NEWS ----------------------------- */
.news-news {
  border-bottom: 1px solid var(--orange-muddy-light);
}

.news-news:not(:last-child) {
  margin-bottom: 3rem;
}

.news-news__header {
  color: var(--brown);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  letter-spacing: 1px;
}

.news-news__date {
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-weight: 500;
  font-style: normal;
}

.news-news__text {
  font-size: 1.8rem;
  color: var(--black);
  letter-spacing: 1px;
  margin: 2rem 0;
  line-height: 1.8;
}

.news-news__category {
  display: inline-block;
  background-color: var(--cream-orange);
  padding: 7px 1.5rem;
  margin-left: 2rem;
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-weight: 500;
  font-style: normal;
}


/* ----------------------------- GUIDE-CONTENT ----------------------------- */
.guide-content {
  background: url('../img/css/img/guide-background.png') no-repeat center/100% 100%;
  width: 100%;
  height: 141rem;
  margin: 5rem 0;
}

.guide-content tbody {
  display: block;
  padding: 0 3rem;
  line-height: 1.5;
  letter-spacing: .1em;
}

.guide-content tr:not(:last-child) {
  background: url("../img/css/img/border-dotted.png") no-repeat bottom/contain;
}

.guide-content th {
  font-size: 18px;
  color: var(--brown);
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-weight: 500;
  font-style: normal;
  width: 25rem;
  text-align: left;
}

.guide-content td {
  width: 68rem;
  display: block;
  margin: 4rem 0 4rem;
}

.guide-content tr:not(:last-child) td {
  padding-right: 4rem;
}

.guide-content__title {
  font-size: 16px;
  font-weight: bold;
  color: var(--black);
  margin-bottom: 3rem;
}

.guide-content__text {
  font-size: 14px;
  color: var(--black);
}

.guide-content__text--red {
  font-size: 13px;
  color: var(--red-dark);
  text-indent: -1em;
  margin-left: 11px;
}

.guide-content__text--dot {
  font-size: 14px;
  color: var(--black);
  position: relative;
  margin-bottom: 1rem;
  margin-left: 9px;
  text-indent: -1rem;
}

.guide-content__text--dot::before {
  position: relative;
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--black);
}

.guide-content__img-card-wrap {
  width: 100%;
  height: auto;
  max-width: 36rem;
  margin: 2rem 0;
}

.guide-content__img-card {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ----------------------------- GUIDE-CONTENT-box ----------------------------- */
.guide-content-box {
  margin-bottom: 3rem;
}

.guide-content-box__title {
  font-size: 18px;
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-weight: 500;
  font-style: normal;
  background-color: var(--brown);
  color: var(--white);
  padding: 1rem 2rem;
}

.guide-content-box__body {
  background-color: var(--gray-yellow);
  padding: 0 2rem;
}

.guide-content-box__label {
  font-size: 15px;
}

.guide-content-box__price {
  font-size: 16px;
}

.guide-content-box__price--bold {
  font-weight: bold;
  font-size: 2rem;
  margin-right: 2rem;
}

.guide-content-box__text--red {
  font-size: 13px;
  color: var(--red-dark);
  padding-bottom: 1.5rem;
}

.guide-content-box:first-child .guide-content-box__text-wrap:first-child {
  border-bottom: 1px solid var(--gray);
}

.guide-content-box__text-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
}

/* ----------------------------- SCROLL-BUTTON ----------------------------- */
.scroll-button {
  width: 7rem;
  position: absolute;
  top: 0;
  right: 15rem;
  cursor: pointer;
}

.scroll-button__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ----------------------------- FOOTER-HEADER-INFO ----------------------------- */
.footer-header-info {
  width: 100%;
}

.footer-header-info__heading {
  font-size: 2.3rem;
  font-weight: bold;
}

.footer-header-info__logo-wrap {
  width: 42rem;
  margin-top: 1rem;
}

.footer-header-info__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-header-info__access {
  font-size: 1.5rem;
  line-height: 1.7;
  margin: 2rem 0;
  font-family: "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
  ;
}

.footer-header-info__contact {
  font-size: 1.8rem;
}

.footer-header-info__contact {
  width: 30rem;
  display: block;
}

.footer-header-info__button {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ----------------------------- FOOTER-HEADER-YOUTUBE ----------------------------- */
.footer-header-youtube {
  background: url("../img/css/img/footer-youtube-earth.png") no-repeat center/contain;
  position: relative;
  height: 28rem;
  width: 100%;
  margin-top: -4rem;
  margin-left: 19rem;
}

.footer-header-youtube__youtube-wrap {
  width: 17rem;
  position: absolute;
  top: 4rem;
  left: 7rem;
}

.footer-header-youtube__youtube {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-header-youtube__text {
  position: absolute;
  top: 13rem;
  left: 2rem;
  font-size: 1.8rem;
  color: var(--black);
  line-height: 1.7;
  font-weight: bold;
}

.footer-header-youtube__button {
  display: inline-block;
  width: 38rem;
  position: absolute;
  bottom: -40px;
  left: -1rem;
}

.footer-header-youtube__register {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ----------------------------- FOOTER-NAV----------------------------- */
.footer-nav {
  text-align: center;
  padding-top: 6rem;
}

.footer-nav__list {
  display: inline-block;
  font-size: 1.6rem;
}

.footer-nav__list:not(:last-child) {
  margin-right: 3rem;
}

.footer-nav__link {
  color: var(--white);
}

/* ----------------------------- FOOTER-SNS----------------------------- */

.footer-sns {
  text-align: center;
  padding: 7rem 0;
}

.footer-sns__link {
  background-color: var(--white);
  width: 4rem;
  height: 4rem;
  display: inline-block;
  border-radius: 50%;
  padding: 8px;
}

.footer-sns__link:not(:last-child) {
  margin-right: 2rem;
}

.footer-sns__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ----------------------------- COPYRIGHT----------------------------- */
.copyright {
  font-size: 1.2rem;
  text-align: center;
  display: block;
  margin-top: 5rem;
}

/* ----------------------------- BUTTONS ----------------------------- */
.button {
  width: 55rem;
  display: block;
  margin: 0 auto;
  margin-top: 6rem;
  background: url("../img/css/img/section-button.png") no-repeat center/contain;
  font-size: 2.2rem;
  color: var(--brown);
  padding: 4rem 0;
  text-align: center;
  position: relative;
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-weight: 500;
  font-style: normal;
  cursor: pointer;
}

.button::before,
.button::after {
  position: absolute;
  content: "";
  display: inline-block;
}

.button::before {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--brown);
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}

.button::after {
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--yellow);
  border-right: 1px solid var(--yellow);
  transform: rotate(45deg);
  right: 40px;
  top: 47px;
}

.review-button::after {
  top: 51px;
}

/* ----------------------------- SINGLE-DETAIL----------------------------- */
.single-detail {
  background-color: var(--gray-dark);
  padding: 10rem 0;
  position: relative;
}

.single-detail::after {
  content: "";
  display: inline-block;
  position: absolute;
  background: url("../img/css/img/single-item-tree.png") no-repeat center/contain;
  width: 38rem;
  height: 32rem;
  bottom: 0;
  left: -10rem;
}

.single-detail__item {
  background: url("../img/css/img/single-detail-background.png") no-repeat center/100% 100%;
  width: 100%;
  padding: 3rem 5rem 5rem;
  line-height: 2;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
  color: var(--black);
}

.single-detail__title {
  font-size: 4rem;
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-weight: 500;
  font-style: normal;
  color: var(--brown);
  text-align: center;
  margin: 0 0 4rem;
}

.single-detail__text--brown {
  font-size: 1.9rem;
  color: var(--brown);
  font-weight: bold;
  margin: 4rem 0 3rem;
}

.single-detail__text {
  font-size: 1.5rem;
  width: 90%;
}

.single-detail__image-wrap {
  border: 1px solid var(--orange-gray);
  text-align: center;
  border-radius: 8px;
  width: 100%;
  height: 45rem;
  padding: 5rem 10rem;
  margin-bottom: 2rem;
}

.single-detail__image,
.single-detail__thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.single-detail__thumb-wrap {
  border: 1px solid var(--orange-gray);
  text-align: center;
  width: 100%;
  max-width: 10rem;
  height: 7rem;
  padding: 5px;
  cursor: pointer;
}

.single-detail__thumb-wrap--is-active {
  border: 1px solid var(--brown);
}

.single-detail__thumb-wrap:not(:last-child) {
  margin-right: 1rem;
}

.single-detail__nav {
  display: flex;
}

.single-detail__images {
  width: 100%;
  max-width: 55rem;
  margin: 0 auto;
}

.single-detail__body {
  background: url("../img/css/img/single-border-dotted.png") no-repeat bottom/contain;
  padding-bottom: 5rem;
}

/* ----------------------------- SINGLE-DETAIL-BOX----------------------------- */
.single-detail-box {
  border: 1px solid var(--orange-gray);
  padding: 2rem;
}

.single-detail-box:first-child {
  margin-bottom: 3rem;
}

.single-detail-box__label,
.single-detail-box__label--orange {
  font-size: 1.9rem;
  color: var(--brown);
  font-weight: bold;
  position: relative;
}

.single-detail-box__label--orange::before,
.single-detail-box__label::before {
  position: relative;
  content: "";
  display: inline-block;
  margin-right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  top: 4px;
  left: 0;
}

.single-detail-box__label::before {
  background: url("../img/css/img/mikan-yellow.png") no-repeat center/contain;
}

.single-detail-box__label--orange::before {
  background: url("../img/css/img/mikan-orange.png") no-repeat center/contain;
}

.single-detail-box__title {
  font-size: 1.8rem;
  font-weight: bold;
}

.single-detail-box__wrap {
  font-size: 1.5rem;
}

.single-detail-box__grade {
  font-size: 1.8rem;
  font-weight: bold;
}

.single-detail-box__list {
  font-size: 1.5rem;
}

.single-detail-box__text {
  font-size: 1.5rem;
}

/* ----------------------------- SINGLE-DETAIL-BUY----------------------------- */
.single-detail-buy {
  width: 42%;
  margin-left: auto;
}

.single-detail-buy__price {
  font-size: 1.6rem;
}

.single-detail-buy__tax {
  font-size: 12px;
  padding-left: 1rem;
}

.single-detail-buy__price--red {
  font-size: 2.9rem;
  color: var(--red-pink);
  font-weight: bold;
  /* background: url("../img/css/img/single-border-dotted-half.png") no-repeat bottom/contain; */
  padding-bottom: 1rem;
}

.single-detail-buy__tax--red {
  font-size: 1.6rem;
  color: var(--red-pink);
  padding-left: 1rem;
}

.single-detail-buy__code {
  font-size: 1.6rem;
  background: url("../img/css/img/single-border-dotted-half.png") no-repeat bottom/contain;
  padding: 1rem 0;
}

.single-detail-buy__status--reserve {
  color: var(--white);
  background-color: var(--green);
  font-size: 1.5rem;
  padding: 8px 1.6rem;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.single-detail-buy__status {
  color: var(--white);
  background-color: var(--orange);
  font-size: 1.5rem;
  padding: 8px 1.6rem;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

/* ----------------------------- BUY-FORM ----------------------------- */
/* .buy-form {
  padding-top: 2rem;
} */

.buy-form__label {
  font-size: 1.6rem;
}

.buy-form__button {
  border: none;
  background: url("../img/css/img/cart-button.png") no-repeat center/contain;
  width: 32rem;
  height: 7rem;
  font-size: 2rem;
  color: var(--brown);
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-weight: 500;
  font-style: normal;
  position: relative;
  margin-top: 4rem;
  cursor: pointer;
}

.buy-form__button::before,
.buy-form__button::after {
  display: inline-block;
  content: "";
  position: absolute;
}

.buy-form__button::before {
  background: url("../img/css/img/cart-brown.svg") no-repeat center/contain;
  width: 4rem;
  height: 4rem;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
}

.buy-form__button::after {
  background: url("../img/css/img/contact-button-arrow.png") no-repeat center/contain;
  width: 2.2rem;
  height: 2.2rem;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
}

.ec-numberInput .buy-form__select {
  border: 1px solid var(--orange-gray);
  padding: 1rem 0 1rem 5rem;
  border-radius: 8px;
  font-size: 16px;
  vertical-align: initial;
}


/* ----------------------------- HOW-TO----------------------------- */
.how-to {
  padding: 10rem 0;
  position: relative;
}

.how-to::before,
.how-to::after {
  content: "";
  position: absolute;
  display: inline-block;
}

.how-to::before {
  width: 43rem;
  height: 20rem;
  background: url("../img/css/img/how-to-man.png") no-repeat center/contain;
  bottom: 0;
  left: -5rem;
}

.how-to::after {
  width: 32rem;
  height: 27rem;
  background: url("../img/css/img/how-to-tree.png") no-repeat center/contain;
  bottom: 0;
  right: -5rem;
}

.how-to__text {
  font-size: 2.2rem;
  text-align: center;
  margin: 3rem 0 5rem;
  color: var(--black);
}

.how-to__image-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.how-to__image {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* ----------------------------- REVIEW ----------------------------- */
.review {
  background-color: var(--gray-dark);
  padding: 10rem 0;
  position: relative;
  color: var(--black);
}

.review::before,
.review::after {
  content: "";
  display: inline-block;
  position: absolute;
}

.review::before {
  background: url("../img/css/img/review-man.png") no-repeat center/contain;
  width: 22rem;
  height: 17rem;
  left: 8rem;
  bottom: 0;
}

.review::after {
  background: url("../img/css/img/bird-cloud3.png") no-repeat center/contain;
  width: 21rem;
  height: 23rem;
  top: 12rem;
  right: -3rem;
}

.review__body {
  background: url("../img/css/img/review-background.png") no-repeat center/100% 100%;
  width: 100%;
  padding: 5rem 3rem 5rem;
  margin: 4rem 0 0;
  color: var(--black);
}

.review__average {
  font-size: 2.4rem;
  font-weight: bold;
  margin-right: 4rem;
}

.review__average-wrap {
  background-color: var(--gray-yellow);
  padding: 2.5rem 3rem;
}

.review__num {
  font-size: 2rem;
  margin-left: 1rem;
}

.review__star {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.review__star-wrap {
  width: 2rem;
  display: inline-block;
}

.review__star-wrap:not(:last-child) {
  margin-right: 2px;
}

.review__star-wrap--small {
  width: 1.5rem;
  display: inline-block;
}


/* ----------------------------- REVIEW-COMMENT ----------------------------- */
.review-comment__header {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

.review-comment__date {
  margin-right: 4rem;
}

.review-comment__name {
  margin-left: 4rem;
}

.review-comment__text {
  font-size: 1.5rem;
  width: 90%;
  margin: 0 auto;
  line-height: 2;
}

.review-comment__title {
  font-weight: bold;
  font-size: 1.5rem;
  width: 90%;
  margin: 0 auto;
}

.review-comment:not(:first-child) {
  background: url("../img/css/img/review-dotted.png") no-repeat top/contain;
}

.review-comment {
  padding: 4rem 0 3.5rem;
}

/* ----------------------------- COMPANY ----------------------------- */
.company {
  background-color: var(--gray-white);
  padding: 10rem 0;
  color: var(--black);
}

.company__table {
  font-size: 1.8rem;
  width: 100%;
  line-height: 2;
  margin-top: 4rem;
  padding: 3rem 0;
  background: url("../img/css/img/review-background.png") no-repeat center/100% 100%;
}

.company__column {
  display: flex;
}

.company__label {
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-weight: 500;
  font-style: normal;
  color: var(--brown);
  text-align: right;
  width: 40%;
  padding: 2rem 0;
  margin-left: 3rem;
}

.company__column:not(:last-child) .company__label,
.company__column:not(:last-child) .company__content {
  border-bottom: 1px solid var(--orange-muddy-light);
}

.company__content {
  width: 60%;
  padding: 2rem 0;
  padding-left: 5rem;
  margin-right: 3rem;
}

/* ----------------------------- POLICY ----------------------------- */
.policy {
  background-color: var(--gray-white);
  padding: 10rem 0;
  color: var(--black);
}

.policy__body {
  padding: 5rem 3rem;
  margin-top: 4rem;
  background: url("../img/css/img/guide-background.png") no-repeat center/100% 100%;
  line-height: 2;
}

.policy__read {
  font-size: 16px;
}

.policy__read:nth-child(2) {
  margin-bottom: 3rem;
}

.policy__text {
  font-size: 15px;
}

.policy__list {
  font-size: 15px;
}

.policy__list:first-child {
  margin-top: 1rem;
}

.policy__list:last-child {
  margin-bottom: 1rem;
}

.policy__label {
  font-size: 18px;
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-weight: 500;
  font-style: normal;
  color: var(--brown);
  background: url("../img/css/img/border-dotted.png") no-repeat bottom/contain;
  margin-bottom: 1rem;
}

.policy__column {
  margin-bottom: 3rem;
}

/* ----------------------------- CONTACT-PAGE ----------------------------- */
.contact-page {
  background-color: var(--gray-white);
  padding: 10rem 0;
}

.contact-page__body {
  background: url("../img/css/img/guide-background.png") no-repeat center/100% 100%;
  margin-top: 4rem;
  font-size: 16px;
  padding: 5rem 3rem;
  line-height: 1.8;
  letter-spacing: 1px;
}

.contact-page__column,
.contact-page__column--address,
.contact-page__column--textarea {
  background: url("../img/css/img/border-dotted.png") no-repeat bottom/contain;
  display: flex;
  padding: 2rem 3rem;
}

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


.contact-page__address {
  width: 100%;
}

.contact-page__address>.contact-page__input:nth-of-type(1) {
  margin-bottom: 2.5rem;
}

.contact-page__zip {
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
}

.contact-page__zip .contact-page__input--zip {
  width: 30%;
  margin-left: 1rem;
}

.contact-page__label {
  width: 40%;
}

.contact-page__column .contact-page__required {
  width: 40%;
}

.contact-page__column--textarea .contact-page__required {
  width: 40%;
}

.contact-page__required--label {
  font-size: 14px;
  margin-left: 1rem;
  color: var(--red-dark);
}

.contact-page__read {
  padding-bottom: 2rem;
  padding-left: 3rem;
  background: url("../img/css/img/border-dotted.png") no-repeat bottom/contain;
}

.contact-page__search--link {
  margin-left: 1rem;
  color: var(--skyblue-dark);
}

.contact-page__body input,
.contact-page__body textarea,
.contact-page__body select {
  border: 1px solid var(--orange-gray);
  border-radius: 4px;
  font-size: 14px;
}

.contact-page__body select {
  padding: 6px 12px;
  background-color: var(--gray-light-white);
  height: 40px;
  margin-bottom: 2.5rem;
}

.contact-page__body input {
  padding: 6px 12px;
  width: 100%;
  height: 50px;
}

.contact-page__body textarea {
  width: 100%;
  height: 15rem;
  padding: 6px 12px;
}

.contact-page__button {
  border: none;
  background: url("../img/css/img/section-button.png") no-repeat center/contain;
  width: 51rem;
  height: 7rem;
  font-size: 2rem;
  color: var(--brown);
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-weight: 500;
  font-style: normal;
  position: relative;
  margin-top: 4rem;
}

.contact-page__button::after {
  display: inline-block;
  content: "";
  position: absolute;
}

.contact-page__button::after {
  background: url("../img/css/img/contact-button-arrow.png") no-repeat center/contain;
  width: 2.2rem;
  height: 2.2rem;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
}

.contact-page__button-wrap {
  text-align: center;
}

.contact-page__checkbox {
  display: none;
}

.contact-page__checkbox:checked+.contact-page__label--policy::before {
  background-color: var(--brown);
  border-color: var(--brown);
}

.contact-page__checkbox:checked+.contact-page__label--policy::after {
  opacity: 1;
}

.contact-page__label--policy {
  cursor: pointer;
  position: relative;
  padding-left: 4rem;
}

.contact-page__label--policy::before,
.contact-page__label--policy::after {
  content: '';
  position: absolute;
  display: block;
}

.contact-page__label--policy::before {
  border: 1px solid var(--orange-gray);
  width: 25px;
  height: 25px;
  background-color: var(--white);
  top: -5px;
  left: 5px;
  border-radius: 5px;
}

.contact-page__label--policy::after {
  border-right: 3px solid var(--yellow-light);
  border-bottom: 3px solid var(--yellow-light);
  width: 8px;
  height: 17px;
  transform: rotate(45deg);
  top: -4px;
  left: 13px;
  opacity: 0;
}

.contact-page__body .contact-page__input--email {
  width: 99%;
}

.contact-page__number {
  width: 100%;
}

.contact-page__column .contact-page__input--number {
  width: 30%;
}

.contact-page__contents {
  width: 100%;
}

.contact-page__confirm {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  margin-top: 2rem;
}

.contact-page__check {
  text-align: center;
  margin: 2.5rem 0 0 0;
}

/* ----------------------------- TRANSACTION ----------------------------- */
.transaction {
  background-color: var(--gray-white);
  padding: 10rem 0;
  color: var(--black);
}

.transaction__table {
  font-size: 1.8rem;
  width: 100%;
  line-height: 2;
  margin-top: 4rem;
  padding: 3rem 0;
  background: url("../img/css/img/review-background.png") no-repeat center/100% 100%;
}

.transaction__column {
  display: flex;
}

.transaction__label {
  font-family: 'Zen Maru Gothic',
    sans-serif;
  font-weight: 500;
  font-style: normal;
  color: var(--brown);
  text-align: right;
  width: 30%;
  padding: 2rem 0;
  margin-left: 3rem;
}

.transaction__column:not(:last-child) .transaction__label,
.transaction__column:not(:last-child) .transaction__content {
  border-bottom: 1px solid var(--orange-muddy-light);
}

.transaction__content {
  width: 70%;
  padding: 2rem 0;
  padding-left: 5rem;
  margin-right: 3rem;
}


/* ----------------------------------------------- */
/* LAYOUT */
/* ----------------------------------------------- */
.inner {
  width: 100%;
  max-width: 99rem;
  margin: 0 auto;
}

.footer-inner {
  margin-top: -42%;
}

/* ----------------------------------------------- */
/* HEADER */
/* ----------------------------------------------- */
.header {
  background-color: rgba(255, 255, 255, 0);
  padding: 2rem 5%;
  font-weight: bold;
  width: 100%;
  position: absolute;
  z-index: 1;
}

.header--under {
  padding: 2rem 0 2rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  width: 100%;
  background-color: var(--white);
}

.menu-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ----------------------------------------------- */
/* MAIN */
/* ----------------------------------------------- */

.product-introduction {
  letter-spacing: 1px;
  background-color: var(--orange-light);
  padding: 20rem 0 12rem;
}

.product-introduction::after {
  position: absolute;
  content: "";
  display: inline-block;
  width: 27rem;
  height: 12rem;
  background: url("../img/css/img/product-introduction-dog.png") no-repeat center/contain;
  bottom: inherit;
  left: 0;
}

.product-introduction-heading {
  position: relative;
}

.product-introduction-heading__heading {
  margin: 3rem 0 4rem;
}

.product-introduction-heading::before,
.product-introduction-heading::after {
  position: absolute;
  display: inline-block;
  content: "";
}

.product-introduction-heading::before {
  width: 30rem;
  height: 20rem;
  background: url("../img/css/img/product-introduction-couple.png") no-repeat center/contain;
  bottom: 0;
  left: 0;
}

.product-introduction-heading::after {
  width: 30rem;
  height: 15rem;
  background: url("../img/css/img/product-introduction-woman.png") no-repeat center/contain;
  bottom: 0;
  right: 0;
}

.product-introduction-inner {
  display: flex;
  justify-content: center;
}

.message {
  padding: 12rem 0;
  position: relative;
  background-color: var(--white);
}

.message::after {
  background: url("../img/css/img/message-background.jpg") no-repeat center/contain;
  position: absolute;
  content: "";
  display: block;
  width: 100vw;
  padding-top: 51%;
  bottom: 0;
  z-index: 0;
}

.message-heading__sub-heading {
  width: 100%;
  max-width: 33rem;
}

.message-heading__heading {
  margin: 3rem 0 4rem;
}

.message-heading {
  position: relative;
  color: var(--black);
}

.message-heading::before {
  position: absolute;
  display: inline-block;
  content: "";
  width: 60rem;
  height: 37rem;
  background: url("../img/css/img/message-monorail.png") no-repeat center/contain;
  top: 19rem;
  left: -7rem;
}

.message-heading::after {
  position: absolute;
  display: inline-block;
  content: "";
  width: 46rem;
  height: 39rem;
  background: url("../img/css/img/message-tree.png") no-repeat center/contain;
  top: -28rem;
  right: -12rem;
}

.calendar {
  background-color: var(--cream);
  margin-top: -7px;
  padding: 10rem 0;
  position: relative;
}

.calendar::before,
.calendar::after {
  position: absolute;
  display: inline-block;
  content: "";
}

.calendar::before {
  background: url("../img/css/img/calendar-tree.png") no-repeat center/contain;
  width: 32rem;
  height: 27rem;
  left: -14rem;
  bottom: 0;
}

.calendar::after {
  background: url("../img/css/img/calendar-woman.png") no-repeat center/contain;
  width: 30rem;
  height: 20rem;
  top: 32rem;
  right: -8rem;
}

.calendar-heading__heading {
  margin: 2rem 0 4rem;
}

.calendar-heading__sub-heading {
  width: 100%;
  max-width: 35rem;
}

.contact {
  padding: 25rem 5rem 10rem;
  background-color: var(--white);
}

.news {
  background-color: var(--orange-light);
  padding: 12rem 0 28rem;
  margin-bottom: -7%;
}

.news-heading {
  position: relative;
}

.news-heading::after {
  position: absolute;
  content: "";
  display: inline-block;
  width: 30rem;
  height: 16rem;
  background: url("../img/css/img/news-track.png") no-repeat center/contain;
  right: -18rem;
  top: 1rem;
}

.news-heading__sub-heading {
  width: 100%;
  max-width: 42rem;
}

.product-sale-heading {
  position: relative;
}

.product-sale-heading::before,
.product-sale-heading::after {
  position: absolute;
  display: inline-block;
  content: "";
}

.product-sale-heading::before {
  background: url("../img/css/img/product-sale-human1.png") no-repeat center/contain;
  width: 20rem;
  height: 11rem;
  left: -15rem;
  bottom: 1rem;
}

.product-sale-heading::after {
  background: url("../img/css/img/product-sale-human2.png") no-repeat center/contain;
  width: 22rem;
  height: 18rem;
  right: -15rem;
  bottom: 1rem;
}

.product-sale {
  background-color: var(--gray-white);
  padding: 16rem 0 6rem;
}

.product-sale-body {
  position: relative;
}

.product-sale-body::before {
  position: absolute;
  display: inline-block;
  content: "";
  width: 24rem;
  height: 14rem;
  background: url("../img/css/img/product-sale-human3.png") no-repeat center/contain;
  left: -23rem;
  bottom: 2rem;
}

.product-sale-heading__heading {
  font-size: 4.8rem;
  margin: 0 0 4rem;
}

.product-sale-card:not(:nth-child(3n)) {
  margin-right: 5%;
}

.product-sale-card {
  margin-bottom: 6rem;
}

.guide {
  background-color: var(--gray-white);
  padding: 10rem 5rem 20rem;
  margin-bottom: -14rem;
  color: var(--black);
}

.guide-heading__heading {
  font-size: 4.8rem;
}

.single-detail-inner {
  position: relative;
}

.single-detail-inner::before,
.single-detail-inner::after {
  display: inline-block;
  content: "";
  position: absolute;
}

.single-detail-inner::before {
  width: 16rem;
  height: 19rem;
  background: url("../img/css/img/bird-cloud1.png") no-repeat center/contain;
  top: 30rem;
  left: -22rem;
}

.single-detail-inner::after {
  width: 30rem;
  height: 32rem;
  background: url("../img/css/img/bird-cloud2.png") no-repeat center/contain;
  top: 26rem;
  right: -30rem;
}

.single-detail-box-wrap {
  width: 50%;
}

.single-detail-box-buy-wrap {
  display: flex;
  margin-top: 6rem;
}

/* ----------------------------------------------- */
/* FOOTER */
/* ----------------------------------------------- */
.footer {
  background: url('../img/css/img/footer-background.png') no-repeat center/cover;
  padding-top: 51%;
  position: relative;
  color: var(--white);
  margin-bottom: -2px;
  overflow: hidden;
}

.footer::before,
.footer::after {
  content: '';
  display: inline-block;
  position: absolute;
}

.footer::before {
  background: url("../img/css/img/footer-tree.png") no-repeat center/contain;
  width: 50rem;
  height: 27rem;
  left: 0;
  bottom: -40px;
}

.footer::after {
  background: url("../img/css/img/footer-monorail.png") no-repeat center/contain;
  width: 50rem;
  height: 27rem;
  right: -92px;
  bottom: -10px;
}

.footer-header {
  display: flex;
}