*,
*::before,
*::after {
  min-width: 0px;
  min-height: 0px;
}

html {
  /* 最小値13pxを保証し、1200px未満では最大22pxまでフォントサイズが流動する */
  font-size: clamp(13px, var(--font-size-base), 22px);

  @media screen and (min-width: 1200px) {
    font-size: clamp(0.1rem, var(--font-size-base), 24px);
  }
}

body {
  font-family: var(--font-sans);
  color: var(--blue);
  background-color: var(--snow);
  font-weight: 700;
}

#root {
  margin: 0 auto;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  line-height: inherit;
}

img,
iframe {
  max-width: 100%;
}
iframe {
  border: none;
  box-shadow: none;
}

a,
a:hover {
  color: var(--ink);
}

[id] {
  scroll-margin-top: 3.75rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

button {
  position: relative;
  appearance: none;
  cursor: pointer;
  box-shadow: none;
  border: 0;
  outline: none;
  background: none;
  padding: 0;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1.5rem;
  list-style: disc outside none;

  & > p {
    margin: 0;
    display: list-item;
  }
}

.webgene-pagination {
  & ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    padding: 0;
    margin: 0;

    & li {
      & a {
        display: inline-block;
        width: 3rem;
        line-height: 3rem;
        text-align: center;
        border-radius: 9999px;
        background-color: var(--ink);
        color: var(--snow);
        &:hover {
          text-decoration: none;
        }
      }

      &.selected {
        & a {
          background-color: var(--vivid-blue);
          &:hover {
          }
        }
      }
    }
  }
}

.webgene-no-items {
  width: 100%;
  text-align: center;
  font-size: 0.875rem;
}

.thumbnail {
  position: relative;

  &.thumbnail--16x9 {
    padding-top: 56.25%;
  }

  &.thumbnail--3x2 {
    padding-top: 66.6667%;
  }
  &.thumbnail--square {
    padding-top: 100%;
  }

  & img,
  & video,
  &:empty::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &:empty::before {
    content: "";
    background-image: url("/system_panel/uploads/images/ogp.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
}

/* 今後スタイルを定義するためのプレースホルダー */
.news-list {
  /* TODO: ニュース一覧のスタイルを定義 */
}
.blog-list {
  /* TODO: ブログ一覧のスタイルを定義 */
}

.article-body {
  & > p {
    margin: 1em 0;
  }

  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    margin: 2em 0 1em;
  }

  & > *:first-child {
    margin-top: 0;
  }

  & > *:last-child {
    margin-bottom: 0;
  }

  & a,
  & a:hover {
    color: var(--blue);
    text-decoration: underline;
  }
}

.backdrop-object {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.__mat.__mat--processed {
  word-break: keep-all;
  word-wrap: break-word;
}

.page-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  &::after {
    content: "";
    width: 100%;
    aspect-ratio: 1600 / 102;
    background-image: url("/system_panel/uploads/images/wave.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: -1px;
  }
  
  & .page-hero__content-wrapper {
    background-color: var(--vivid-blue);
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-block: 5rem 1rem;
    &::after {
      content: "";
      width: 100%;
      height: 5rem;
      display: block;
      background-image: url("/system_panel/uploads/images/fish_and_waves.svg");
      background-size: 26.0625rem 5rem;
      background-repeat: repeat-x;
      background-position: center center;
      animation: hero-slide-banner 10s linear infinite;
    }
  }

  
  & .page-hero__content {
    position: relative;
    overflow: hidden;
    height: 30rem;
    --content-border-radius: 3rem;
    border-radius: var(--content-border-radius);
    display: flex;
    flex-direction: column;
    @media (min-width: 768px) {
      margin-inline: 2.5rem;
    }
    @media (min-width: 1024px) {
      margin-inline: 3rem;
      --content-border-radius: 3.75rem;
    }
    @media (min-width: 1200px) {
      --content-border-radius: 5rem;
    }
    
    & > img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
    }
    
    & .page-hero__title {
      position: relative;
      max-width: 50rem;
      width: 100%;
      margin-top: auto;
      margin-left: auto;
      background-color: var(--snow);
      display: flex;
      flex-direction: column;
      padding: 2rem 1.25rem;
      border-radius: var(--content-border-radius);
      text-align: center;
      line-height: 1.25;
      & h1 {
        font-weight: 900;
        font-size: 2rem;
      }
      @media (min-width: 768px) {
        padding-inline: 2.5rem;
        width: 75%;
        border-radius: 0;
        border-top-left-radius: var(--content-border-radius);
        & p {
          font-size: 1.25rem;
        }
        & h1 {
          font-size: 2.25rem;
        }
      }
      @media (min-width: 1024px) {
        padding-inline: 4rem;
        & p {
          font-size: 1.5rem;
        }
        & h1 {
          font-size: 2.5rem;
        }
      }
      @media (min-width: 1200px) {
        & p {
          font-size: 2rem;
        }
        & h1 {
          font-size: 3rem;
        }
      }
    }
  }
}

.section-title {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  line-height: 1.25;
  color: var(--vivid-blue);
  & h2, & h3, & h4, & h5 {
    font-size: 2rem;
  }
  @media (min-width: 768px) {
    & p {
      font-size: 1.25rem;
    }
    & h2, & h3, & h4, & h5 {
      font-size: 2.25rem;
    }
  }
  @media (min-width: 1024px) {
    & p {
      font-size: 1.5rem;
    }
    & h2, & h3, & h4, & h5 {
      font-size: 2.5rem;
    }
  }
  @media (min-width: 1200px) {
    & p {
      font-size: 2rem;
    }
    & h2, & h3, & h4, & h5 {
      font-size: 3rem;
    }
  }
  &.section-title--center {
    text-align: center;
  }
  
  &.section-title--40 {
    & h2, & h3, & h4, & h5 {
      font-size: 1.875rem;
    }
    @media (min-width: 768px) {
      & h2, & h3, & h4, & h5 {
        font-size: 2rem;
      }
    }
    @media (min-width: 1024px) {
      & h2, & h3, & h4, & h5 {
        font-size: 2.25rem;
      }
    }
    @media (min-width: 1200px) {
      & h2, & h3, & h4, & h5 {
        font-size: 2.5rem;
      }
    }
  }
  
  &.section-title--snow {
    color: var(--snow);
  }
}

.massege-illust {
  position: absolute;
  width: 11.875rem;
  top: -6rem;
  left: -10rem;
}

.button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  border-radius: 0.375rem 1.5rem 0.375rem 1.5rem;
  background-color: var(--vivid-blue);
  color: var(--snow);
  line-height: 1.25;
  font-weight: 700;
  font-size: 1rem;
  transition: all ease 200ms;
  &::after {
    content: "";
    aspect-ratio: 1 / 1;
    width: 2rem;
    background-image: url("/system_panel/uploads/images/chevrons-right.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  &:hover {
    text-decoration: none;
    color: var(--snow);
    opacity: 0.85;
    transform: scale(0.95);
  }
  &.button--no-icon {
    &::after {
      content: none;
    }
  }
  &.button--snow {
    background-color: var(--snow);
    color: var(--vivid-blue);
    &::after {
      background-image: url("/system_panel/uploads/images/chevrons-right-blue.svg");
    }
    &:hover {
      color: var(--vivid-blue);
    }
  }
}

.access-map {
  & iframe {
    width: 100%;
    height: 100%;
  }
}

.regulations-illust {
  width: 25.3125rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
}

.contact-illust {
  position: absolute;
  top: 2rem;
  &.contact-illust--1 {
    width: 5rem;
    left: 1rem;
  }
  &.contact-illust--2 {
    width: 5rem;
    right: 1rem;
  }
  @media (min-width: 768px) {
    top: 3rem;
    &.contact-illust--1 {
      width: 8rem;
      left: 3rem;
    }
    &.contact-illust--2 {
      width: 10rem;
      right: 3rem;
    }
  }
  @media (min-width: 1200px) {
    top: 4rem;
    &.contact-illust--1 {
      width: 11.875rem;
      left: 5rem;
    }
    &.contact-illust--2 {
      width: 12.5rem;
      right: 5rem;
    }
  }
}

.partners-intro-illust {
  position: absolute;
  bottom: 2rem;
  left: 3.75rem;
}

.fish-and-waves-slider {
  width: 100%;
  height: 6.875rem;
  background-image: url("/system_panel/uploads/images/fish_and_waves-blue.svg");
  background-size: 36.3125rem 6.875rem;
  background-repeat: repeat-x;
  background-position: center center;
  animation: slide-banner 10s linear infinite;
  &.fish-and-waves-slider--reverse {
    transform: scaleX(-1);
  }
}

.section-wave {
  margin-top: -1px;
  &::before,
  &::after {
    content: "";
    aspect-ratio: 1600 / 200;
    width: 100%;
    background-image: url("/system_panel/uploads/images/section-wave.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  &::after {
    transform: scale(-1);
    z-index: -1;
    margin-top: -1px;
  }
  &.section-wave--light-gray {
    &::before,
    &::after {
      background-image: url("/system_panel/uploads/images/section-wave-light-gray.svg");
    }
  }
  &.section-wave--after-index-1::after {
    z-index: 1;
  }
}

.reservaation-fish {
  display: none;
  position: absolute;
  &.reservaation-fish--1 {
    width: 15rem;
    top: -3rem;
    right: 2.5rem;
  }
  &.reservaation-fish--2 {
    width: 12.5rem;
    bottom: -1.5rem;
    left: 2.5rem;
  }
  @media (min-width: 1024px) {
    display: block;
  }
  @media (min-width: 1200px) {
    display: block;
    &.reservaation-fish--1 {
      right: 21.875rem;
    }
    &.reservaation-fish--2 {
      left: 6.8125rem;
    }
  }
}

.price-table {
  display: grid;
  gap: 0.25rem;
  min-width: 55rem;
  & .price-table__row {
    display: grid;
    grid-template-columns: 400fr 320fr 228fr 320fr;
    gap: 0.25rem;
    & > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.25rem;
      border-radius: 1rem;
      padding: 1rem;
      @media (min-width: 768px) {
        padding-inline: 1.5rem;
      }
      @media (min-width: 1200px) {
        padding-inline: 2rem;
      }
    }
  }
  
  &.price-table--rental {
    min-width: 45rem;
    & .price-table__row {
      grid-template-columns: 400fr 320fr 552fr;
    }
  }
}

.flow-illust {
  position: absolute;
  &.flow-illust--1 {
    top: 8.5rem;
    left: 5.5rem;
  }
  &.flow-illust--2 {
    right: 5rem;
    bottom: 2.25rem;
  }
}


.recipe-item {
  & .property-time {
    vertical-align: middle;
    & > * {
      vertical-align: middle;
    }
    &::before {
      vertical-align: middle;
      content: "";
      display: inline-block;
      width: 1rem;
      height: 1rem;
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cmask%20id%3D%22mask0_186_857%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2216%22%20height%3D%2216%22%3E%0A%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23D9D9D9%22%2F%3E%0A%3C%2Fmask%3E%0A%3Cg%20mask%3D%22url(%23mask0_186_857)%22%3E%0A%3Cpath%20d%3D%22M10.1999%2011.1333L11.1333%2010.1999L8.66658%207.73325V4.66659H7.33325V8.26659L10.1999%2011.1333ZM7.99992%2014.6666C7.0777%2014.6666%206.21103%2014.4916%205.39992%2014.1416C4.58881%2013.7916%203.88325%2013.3166%203.28325%2012.7166C2.68325%2012.1166%202.20825%2011.411%201.85825%2010.5999C1.50825%209.78881%201.33325%208.92214%201.33325%207.99992C1.33325%207.0777%201.50825%206.21103%201.85825%205.39992C2.20825%204.58881%202.68325%203.88325%203.28325%203.28325C3.88325%202.68325%204.58881%202.20825%205.39992%201.85825C6.21103%201.50825%207.0777%201.33325%207.99992%201.33325C8.92214%201.33325%209.78881%201.50825%2010.5999%201.85825C11.411%202.20825%2012.1166%202.68325%2012.7166%203.28325C13.3166%203.88325%2013.7916%204.58881%2014.1416%205.39992C14.4916%206.21103%2014.6666%207.0777%2014.6666%207.99992C14.6666%208.92214%2014.4916%209.78881%2014.1416%2010.5999C13.7916%2011.411%2013.3166%2012.1166%2012.7166%2012.7166C12.1166%2013.3166%2011.411%2013.7916%2010.5999%2014.1416C9.78881%2014.4916%208.92214%2014.6666%207.99992%2014.6666ZM7.99992%2013.3333C9.4777%2013.3333%2010.736%2012.8138%2011.7749%2011.7749C12.8138%2010.736%2013.3333%209.4777%2013.3333%207.99992C13.3333%206.52214%2012.8138%205.26381%2011.7749%204.22492C10.736%203.18603%209.4777%202.66659%207.99992%202.66659C6.52214%202.66659%205.26381%203.18603%204.22492%204.22492C3.18603%205.26381%202.66659%206.52214%202.66659%207.99992C2.66659%209.4777%203.18603%2010.736%204.22492%2011.7749C5.26381%2012.8138%206.52214%2013.3333%207.99992%2013.3333Z%22%20fill%3D%22%233451B8%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
      background-repeat: no-repeat;
    }
  }
  & .property-cal {
    vertical-align: middle;
    & > * {
      vertical-align: middle;
    }
    &::before {
      vertical-align: middle;
      content: "";
      display: inline-block;
      width: 1rem;
      height: 1rem;
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cmask%20id%3D%22mask0_186_860%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2216%22%20height%3D%2216%22%3E%0A%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23D9D9D9%22%2F%3E%0A%3C%2Fmask%3E%0A%3Cg%20mask%3D%22url(%23mask0_186_860)%22%3E%0A%3Cpath%20d%3D%22M4.00008%209.33333C4.00008%209.91111%204.11675%2010.4583%204.35008%2010.975C4.58341%2011.4917%204.91675%2011.9444%205.35008%2012.3333C5.33897%2012.2778%205.33341%2012.2278%205.33341%2012.1833V12.0333C5.33341%2011.6778%205.40008%2011.3444%205.53341%2011.0333C5.66675%2010.7222%205.86119%2010.4389%206.11675%2010.1833L8.00008%208.33333L9.88341%2010.1833C10.139%2010.4389%2010.3334%2010.7222%2010.4667%2011.0333C10.6001%2011.3444%2010.6667%2011.6778%2010.6667%2012.0333V12.1833C10.6667%2012.2278%2010.6612%2012.2778%2010.6501%2012.3333C11.0834%2011.9444%2011.4167%2011.4917%2011.6501%2010.975C11.8834%2010.4583%2012.0001%209.91111%2012.0001%209.33333C12.0001%208.77778%2011.8973%208.25278%2011.6917%207.75833C11.4862%207.26389%2011.189%206.82222%2010.8001%206.43333C10.5779%206.57778%2010.3445%206.68611%2010.1001%206.75833C9.85564%206.83056%209.60564%206.86667%209.35008%206.86667C8.66119%206.86667%208.06397%206.63889%207.55841%206.18333C7.05286%205.72778%206.76119%205.16667%206.68341%204.5C6.25008%204.86667%205.86675%205.24722%205.53341%205.64167C5.20008%206.03611%204.91953%206.43611%204.69175%206.84167C4.46397%207.24722%204.29175%207.66111%204.17508%208.08333C4.05841%208.50556%204.00008%208.92222%204.00008%209.33333ZM8.00008%2010.2L7.05008%2011.1333C6.92786%2011.2556%206.83341%2011.3944%206.76675%2011.55C6.70008%2011.7056%206.66675%2011.8667%206.66675%2012.0333C6.66675%2012.3889%206.7973%2012.6944%207.05841%2012.95C7.31953%2013.2056%207.63341%2013.3333%208.00008%2013.3333C8.36675%2013.3333%208.68064%2013.2056%208.94175%2012.95C9.20286%2012.6944%209.33341%2012.3889%209.33341%2012.0333C9.33341%2011.8556%209.30008%2011.6917%209.23342%2011.5417C9.16675%2011.3917%209.0723%2011.2556%208.95008%2011.1333L8.00008%2010.2ZM8.00008%202V4.2C8.00008%204.57778%208.13064%204.89444%208.39175%205.15C8.65286%205.40556%208.9723%205.53333%209.35008%205.53333C9.55008%205.53333%209.73619%205.49167%209.90842%205.40833C10.0806%205.325%2010.2334%205.2%2010.3667%205.03333L10.6667%204.66667C11.489%205.13333%2012.139%205.78333%2012.6167%206.61667C13.0945%207.45%2013.3334%208.35556%2013.3334%209.33333C13.3334%2010.8222%2012.8167%2012.0833%2011.7834%2013.1167C10.7501%2014.15%209.48897%2014.6667%208.00008%2014.6667C6.51119%2014.6667%205.25008%2014.15%204.21675%2013.1167C3.18341%2012.0833%202.66675%2010.8222%202.66675%209.33333C2.66675%207.9%203.1473%206.53889%204.10841%205.25C5.06953%203.96111%206.36675%202.87778%208.00008%202Z%22%20fill%3D%22%23FF0000%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
      background-repeat: no-repeat;
    }
  }
  & .thumbnail {
    border-radius: 1rem;
    border-top-right-radius: 6.25rem;
    overflow: hidden;
  }
}

.recipe-list {
  & .webgene-blog {
    display: grid;
    gap: 1.5rem;
    
    @media (min-width: 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      
      & .webgene-pagination, & .webgene-no-items {
        grid-column: span 2 / span 2;
      }
    }
  }
}

.tag-list {
  & .webgene-blog {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
}
.category-list {
  & .webgene-blog {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
}

.swiper:not(.swiper-initialized) {
  & .swiper-wrapper {
    display: flex;
    overflow: auto;
  }
  & .swiper-slide {
    min-width: 35%;
  }
}

.gallery-slider {
  width: 100%;
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
  & .swiper-slide {
    width: 10rem;
    & img {
      object-fit: cover;
      width: 100%;
      aspect-ratio: 3 / 2;
      border-radius: 1rem;
    }
  }
}

.article-movie {
  width: 100%;
  
  & iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

.proven-illust {
  position: absolute;
  &.proven-illust--1 {
    width: 10.875rem;
    top: -4rem;
    left: -5rem;
    display: none;
    @media (min-width: 1024px) {
      display: block;
    }
  }
  &.proven-illust--2 {
    right: -2.5rem;
    bottom: -4rem;
  }
  &.proven-illust--3 {
    width: 19.5rem;
    top: 0;
    right: 1rem;
    transform: translateY(-100%);
  }
}

.charter-illust {
  position: absolute;
  display: none;
  @media (min-width: 1200px) {
    display: block;
  }
  &.charter-illust--1 {
    top: 5rem;
    left: 4rem;
  }
  &.charter-illust--2 {
    top: 8.5rem;
    right: 4.5rem;
  }
  &.charter-illust--3 {
    bottom: 9.25rem;
    left: 3.75rem;
  }
  &.charter-illust--4 {
    bottom: 4.5rem;
    right: 2.5rem;
  }
}