@charset "utf-8";

/* -----------------------------------
  global
----------------------------------- */

/* global > calc-vw
----------------------------------- */
:root {
  --vw-sp: / 1000 * 100vw;
  --vw-pc: / 1920 * 100vw;
}

/* global > font
----------------------------------- */
:root {
  /* Base font family for the entire document */
  --font-family-base: "Noto Sans JP", serif;
}

/* -----------------------------------
  foundation
----------------------------------- */
body {
  font-family: var(--font-family-base);
}

a {
  text-decoration: none;
  color: inherit;
}

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


/* -----------------------------------
  page
----------------------------------- */

/* page > layout
----------------------------------- */
.container,
.section {
  position: relative;
}

.container {
  max-width: 1920px;
  margin: auto;
}

/* page > image
----------------------------------- */
.image--pc {
  display: none;
}

@media screen and (min-width: 750px) {
  .image--sp {
    display: none;
  }

  .image--pc {
    display: block;
  }
}

/* page > btn
----------------------------------- */
.c-btn {
  position: absolute;
  left: calc(48 var(--vw-sp));
  z-index: 100;
  width: calc(906 var(--vw-sp));

  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(7px);
  }
  50% {
    transform: translateY(-7px);
  }
}

.c-btn--01 {
  top: calc(1719 var(--vw-sp));
}

.c-btn--02 {
  top: calc(2269 var(--vw-sp));
}

.c-btn--03 {
  bottom: calc(128 var(--vw-sp));
}

.c-btn--04 {
  bottom: calc(-959 var(--vw-sp));
}

.c-btn--08 {
  display: none;
}

.c-btn--09 {
  bottom: calc(127 var(--vw-sp));
}

@media screen and (min-width: 750px) {
  .c-btn {
    left: initial;
    right: min(387px, calc(387 var(--vw-pc)));
    width: min(573px, calc(573 var(--vw-pc)));
  }

  .c-btn--01 {
    top: min(932px, calc(932 var(--vw-pc)));
  }

  .c-btn--02 {
    top: max(-307px, calc(-307 var(--vw-pc)));
  }

  .c-btn--03 {
    top: max(-270px, calc(-270 var(--vw-pc)));
    bottom: initial;
  }

  .c-btn--04 {
    top: max(-344px, calc(-344 var(--vw-pc)));
    bottom: initial;
  }

  .c-btn--08 {
    display: block;
    top: min(322px, calc(322 var(--vw-pc)));
  }

  .c-btn--09 {
    display: none;
  }

  .c-btn a {
    transition: opacity 0.3s;
  }

  .c-btn a:hover {
    opacity: 0.8;
  }
}

/* page > map
----------------------------------- */
.map {
  position: absolute;
  bottom: calc(470 var(--vw-sp));
  left: 50%;
  translate: -50%;
}

.map iframe {
  width: calc(656 var(--vw-sp));
  height: auto;
  aspect-ratio: 656 / 656;
}

@media screen and (min-width: 750px) {
  .map {
    bottom: min(409px, calc(409 var(--vw-pc)));
    left: calc(50% + min(89px, calc(89 var(--vw-pc))));
    display: block;
    translate: -50%;
  }

  .map iframe {
    width: min(620px, calc(620 var(--vw-pc)));
    height: auto;
    aspect-ratio: 620 / 424;
  }
}


/* page > footer
----------------------------------- */
.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 100%;
}

.footer {
  height: calc(300 var(--vw-sp));
}

.footer-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-list li a {
  display: block;
  color: #fff;
  font-weight: 300;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  padding: calc(20 var(--vw-sp)) calc(20 var(--vw-sp)) calc(20 var(--vw-sp)) calc(calc(20 var(--vw-sp)) + 0.05em);
  font-size: calc(45 var(--vw-sp));
}

@media screen and (min-width: 750px) {
  .footer {
    height: calc(252 var(--vw-pc));
  }

  .footer-list li a {
    position: relative;
    padding: calc(16 var(--vw-pc)) calc(16 var(--vw-pc)) calc(16 var(--vw-pc)) calc(calc(16 var(--vw-pc)) + 0.05em);
    font-size: calc(27 var(--vw-pc));
  }

  .footer-list li a::after {
    content: "";
    position: absolute;
    bottom: calc(10 var(--vw-pc));
    left: calc(calc(16 var(--vw-pc)) + 0.05em);
    width: calc(100% - (calc(16 var(--vw-pc))) * 2 + 0.05em);
    width: 0px;
    height: 1px;
    background-color: #fff;
    transition: width 0.3s;
  }

  .footer-list li a:hover::after {
    width: calc(100% - (calc(16 var(--vw-pc))) * 2 + 0.05em);
  }
}

/* page > lower-page
----------------------------------- */
.lower-page {
  font-size: 14px;
  font-weight: 400;
  text-align: justify;
  line-height: 1.75;
}

.lower-page-container {
  width: calc(335 / 375 * 100vw);
  max-width: 480px;
  padding: 48px 0 80px;
  margin: auto;
  color: #333;
}

.lower-page-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.lower-page-lead {
  margin-top: 40px;
}

.lower-page-content {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.lower-page-item {
  display: grid;
}

.lower-page-item-title {
  flex: 0 0 100px;
  font-weight: 700;
}

.lower-page-item-text {

}

.lower-page-item-text + .lower-page-item-text {
  margin-top: 1em;
}

.lower-page-list {
}

.lower-page-list-item,
.lower-page-ordered-list-item,
.lower-page-ordered-list-item-level2 {
  display: flex;
  gap: 2px;
}

.lower-page-ordered-list + .lower-page-item-text,
.lower-page-ordered-list-level2 + .lower-page-item-text {
  margin-top: 1em;
}

.lower-page-list-item::before {
  content: "・";
}

.lower-page-ordered-list-item:nth-child(1)::before {
  content: "①";
}
.lower-page-ordered-list-item:nth-child(2)::before {
  content: "②";
}
.lower-page-ordered-list-item:nth-child(3)::before {
  content: "③";
}
.lower-page-ordered-list-item:nth-child(4)::before {
  content: "④";
}

.lower-page-ordered-list-level2 {
  padding-left: calc(1em + 2px);
}

.lower-page-ordered-list-item-level2:nth-child(1)::before {
  content: "(1)";
}
.lower-page-ordered-list-item-level2:nth-child(2)::before {
  content: "(2)";
}
.lower-page-ordered-list-item-level2:nth-child(3)::before {
  content: "(3)";
}
.lower-page-ordered-list-item-level2:nth-child(4)::before {
  content: "(4)";
}
.lower-page-ordered-list-item-level2:nth-child(5)::before {
  content: "(5)";
}

.lower-page-footer {
  display: grid;
  place-items: center;
  height: 80px;
  background-color: #bb6f82;
}

.lower-page-footer a {
  padding: 2px 12px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 8px;
  transition: opacity 0.3s;
}

@media screen and (min-width: 750px) {
  .lower-page {
    font-size: 16px;
  }

  .lower-page-container {
    max-width: 600px;
    padding: 60px 0 120px;
  }

  .lower-page-title {
    font-size: 24px;
  }

  .lower-page-content {
    gap: 24px;
  }

  .lower-page-footer {
    height: 100px;
  }

  .lower-page-footer a:hover {
    opacity: 0.7;
  }
}