@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700&display=swap');

:root {
  font-size: 16px; /* 1rem */
  --font-sans-serif: sans-serif;
  --font-serif: "Zen Old Mincho", serif;
  --color-body: #252525;
  --color-link: #AB8E5B;
  --color-accent: #AB8E5B;
  --color-bg: #F1F1F1;
  --border-radius-pill: 50rem;
  --padding-container: 20px;
  --max-width: 1680px;
  --max-width-container: calc(var(--max-width) + var(--padding-container) * 2);
}

body {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 2;
  color: var(--color-body);
  scrollbar-gutter: stable;
}

section {
  display: flow-root;
  position: relative;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity ease-out .3s;
  &:hover {
    color: inherit;
    opacity: .6;
    text-decoration: none;
  }
}

img {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6, dl, dt, dd {
  display: flow-root;
  font-family: inherit;
  font-weight: inherit;
  padding: 0;
  margin: 0;
}

.my-ajax-loading {
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, .5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.my-container {
  position: relative;
  max-width: var(--max-width-container);
  margin-inline: auto;
  padding: 0 var(--padding-container);
}

.my-cols,
.my-rows {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  &.my-rows {
    flex-direction: column;
  }
}

.my-breadcrumb {
  > ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 1.25rem 0 3.75rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    li + li::before {
      content: '\F285';
      font-family: bootstrap-icons;
      margin-inline: .5em;
    }
    a {
      color: var(--color-link);
    }
  }
}

.my-bg {
  background-color: var(--color-bg);
}

.my-title01 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 18.75rem;
  background: center / cover no-repeat;
  padding-inline: var(--padding-container);
  margin-top: 6.25rem;
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: .75;
    mix-blend-mode: multiply;
  }
  > span {
    font-size: 3.5rem;
    font-weight: 400;
    color: #B49664;
    z-index: 1;
  }
}

.my-title02 {
  font-size: 2.5rem;
  line-height: 2;
  color: #b49664;
  margin-bottom: 5rem;
  > small {
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
    &::before {
      content: '';
      width: 4.375rem;
      height: 1px;
      background: #b49664;
    }
  }
  &.-w {
    color: #fff;
    > small::before {
      background: #fff;
    }
  }
}

.my-title03 {
  display: flex;
  justify-content: center;
  gap: 5.25rem;
  margin-bottom: 6.25rem;
  > small {
    position: relative;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: var(--color-accent);
    font-size: 0.75rem;
    padding-top: 5.625rem;
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      margin: 0 auto auto;
      width: 1px;
      height: 4.375rem;
      background: var(--color-accent);
    }
  }
  > span {
    font-size: 1rem;
    font-weight: bold;
    writing-mode: vertical-rl;
  }
}

.my-link {
  color: var(--color-link);
  &:hover {
    color: var(--color-link);
  }
}

.my-btn01 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
  padding: 0.5em 2.25rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius-pill);
  >.bi {
    color: var(--color-accent);
  }
}

.my-btn02 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
  padding: 0.5em 1.375rem;
  border: 1px solid var(--color-accent);
  > .bi {
    color: var(--color-accent);
  }
}

.my-box01 {
  background: #fff;
  width: 100%;
  max-width: 72.5rem;
  padding: 1.875rem;
  border-radius: 10px;
  dl {
    text-align: center;
    dt {
      img {
        display: block;
        width: 2.25rem;
        margin: 0 auto 1.34375rem;
      }
      span {
        position: relative;
        display: inline-block;
        font-size: 2.5rem;
        padding-bottom: 1rem;
        &::after {
          content: '';
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          height: 0.375rem;
          background: #E8D9C0;
          border-left: 5.9375rem solid #B49664;
        }
      }
    }
    dd {
      &::before {
        content: '';
        display: block;
        width: 2.19687rem;
        height: 2.19687rem;
        margin: 1.25rem auto;
        background: url(../img/icon-flower.png) center / contain no-repeat;
      }
    }
  }
}

.my-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9375rem;
  margin-bottom: 5rem;
  > a {
    font-size: 0.875rem;
    padding: 0.3125rem 1.25rem;
    border: 1px solid #B49664;
    background: #fff;
    color: var(--color-link);
    &:hover {
      color: var(--color-link);
    }
    &.-active {
      color: #fff;
      background: #B49664;
      pointer-events: none;
    }
  }
}

.my-modal-product {
  .modal-content {
    background: transparent;
    border: 0;
    .btn-close {
      width: 1.25rem;
      height: 1.25rem;
      background: url(../img/modal-close.svg) center / contain no-repeat;
      margin-left: auto;
      margin-bottom: 0.625rem;
      opacity: 1;
    }
  }
  .modal-body {
    position: relative;
    padding: 0;
    display: flex;
    align-items: center;
    background: #fff;
    > * {
      width: 50%;
    }
    dl {
      padding: 1.25rem;
      dt {
        font-size: 1.375rem;
        font-weight: 700;
        padding-bottom: 0.46875rem;
        margin-bottom: 1.25rem;
        border-bottom: 2px solid #B49664;
        .-tag {
          display: inline-block;
          font-size: 0.875rem;
          color: #B49664;
          border: 1px solid #B49664;
          padding-inline: 1.25rem;
          margin-right: 0.625rem;
        }
      }
      dd {
        .-price {
          font-weight: 700;
        }
      }
    }
  }
}

.my-pagetop {
  position: fixed;
  inset: auto 0 1rem;
  pointer-events: none;
  z-index: 2;
  a {
    display: flex;
    justify-content: center;
    width: 2rem;
    margin-left: auto;
    pointer-events: all;
    img {
      display: block;
      width: 0.375rem;
    }
  }
}

body:has(#menu-toggle:checked) {
  overflow: hidden;
}

.my-header {
  display: flow-root;
  position: relative;
  .my-header-fix {
    position: fixed;
    inset: 0 0 auto;
    pointer-events: none;
    z-index: 11;
    > .my-container {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      height: 6.25rem;
      .my-header-menu {
        cursor: pointer;
        pointer-events: all;
        width: 1.875rem;
        height: 1.875rem;
        background: url(../img/header-menu-open.svg) center / contain no-repeat;
        #menu-toggle:checked ~ .my-header-fix & {
          background-image: url(../img/header-menu-close.svg);
        }
      }
      .my-header-logo {
        pointer-events: all;
        width: 7.5rem;
        img {
          display: block;
          width: 100%;
        };
      }
    }
  }
  .my-header-nav {
    position: fixed;
    inset: 0 0 auto;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    overflow-y: auto;
    max-height: 100vh;
    pointer-events: none;
    opacity: 0;
    transition: all ease-out .4s;
    z-index: 10;
    #menu-toggle:checked ~ & {
      opacity: 1;
      pointer-events: all;
    }
    .my-container {
      display: flex;
      align-items: center;
      max-width: 56rem;
      height: 100%;
      padding-block: 6.25rem;
      .my-cols {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 2rem;
        width: 100%;
        dl {
          font-size: 0.875rem;
          font-weight: bold;
          dt {
            margin-bottom: 1.5rem;
            a {
              .bi {
                color: var(--color-accent);
              }
            }
          }
          dd {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            a {
              position: relative;
              color: var(--color-link);
              padding-left: 1.875rem;
              &::before {
                content: '';
                position: absolute;
                inset: 0 auto 0 0;
                margin-block: auto;
                width: 1.25rem;
                height: 1px;
                background: var(--color-body);
              }
            }
          }
        }
      }
    }
  }
}

.my-main {
  display: flow-root;
  position: relative;
  font-size: 0.875rem;
  background: #fff;
}

.my-footer {
  display: flow-root;
  position: relative;
  overflow-x: hidden;
  .my-footer-top {
    padding-block: 6.25rem;
    background: var(--color-bg);
    .my-container {
      &::before {
        content: '';
        position: absolute;
        inset: 0 auto auto -7.5rem;
        width: 351px;
        height: 217px;
        background: url(../img/footer-img01.jpg) center / cover no-repeat;
      }
      &::after {
        content: '';
        position: absolute;
        inset: auto 0 -6.25rem auto;
        width: 272px;
        height: 300px;
        background: url(../img/footer-img02.jpg) center / cover no-repeat;
      }
      p {
        text-align: center;
        line-height: 3;
      }
      .my-cols {
        flex-wrap: wrap;
        justify-content: center;
        gap: 3.125rem;
        margin-top: 5rem;
      }
    }
  }
  .my-footer-calendar {
    padding-block: 6.25rem;
    background: var(--color-bg);
    .my-container {
      .-type1,
      .-type2 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2.0625rem;
        height: 2.0625rem;
        margin-inline: auto;
        background: #EFC9C9;
        border-radius: 50%;
        &.-type2 {
          background: #C1DAF1;
        }
      }
      > .my-cols {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.875rem;
        > div:first-child {
          flex: 1;
          max-width: 30rem;
          .-legend {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.875rem;
            font-weight: bold;
            white-space: nowrap;
            dd + dt {
              margin-left: 1.875rem;
            }
            .-type1,
            .-type2 {
              width: 1.25rem;
              height: 1.25rem;
            }
          }
        }
        > div:last-child {
          .my-cols {
            flex-wrap: wrap;
            justify-content: center;
            gap: 3.125rem;
            > div {
              width: 100%;
              max-width: 19.6875rem;
              table {
                width: 100%;
                table-layout: fixed;
                font-size: 0.875rem;
                thead td {
                  position: relative;
                  color: var(--color-accent);
                  padding: 0 1em 1em;
                  &::after {
                    content: '';
                    position: absolute;
                    inset: 0 1em 0 auto;
                    width: 8.75rem;
                    height: 1px;
                    margin-block: auto;
                    background: var(--color-accent);
                  }
                }
                tbody {
                  text-align: center;
                  .-weekname {
                    th {
                      padding-block: 0.375rem;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .my-footer-bottom {
    padding-block: 6.25rem;
    .my-container {
      max-width: calc(29.0625rem + var(--padding-container) * 2);
      font-size: 0.875rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3.75rem;
      .my-footer-logo {
        text-align: center;
        img {
          width: 11.3125rem;
        }
      }
      .my-footer-nav {
        width: 100%;
        padding-top: 1rem;
        .my-cols {
          flex-direction: row-reverse;
          justify-content: space-between;
          a {
            position: relative;
            font-weight: bold;
            writing-mode: vertical-rl;
            letter-spacing: 0.5em;
            padding: 1.2em 0.5em 0;
            &::before {
              content: '';
              position: absolute;
              inset: 0 0 auto;
              margin-block: auto;
              width: 0.5rem;
              height: 0.5rem;
              background: url(../img/icon-mark.png) center / contain no-repeat;
            }
          }
        }
      }
      .my-footer-sns {
        .my-cols {
          justify-content: center;
          gap: 1.875rem;
          li a img {
            width: 1.5625rem;
          }
        }
      }
      .my-footer-address {
        text-align: center;
      }
    }
  }
  > small {
    display: flow-root;
    text-align: center;
    font-size: 0.75rem;
    padding: 1em;
  }
}

#home_sec01 {
  padding-top: 10rem;
  background: var(--color-bg);
  &::after {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: min(calc(100vw - 24rem - (100vw - var(--max-width-container)) / 2), 100vw - 24rem);
    background: url(../img/home_sec01-img01.jpg) center / cover no-repeat;
  }
  .my-rows {
    align-items: center;
    gap: 3.75rem;
    width: 100%;
    max-width: 21.875rem;
    .-logo {
      img {
        width: 11.3125rem;
      }
    }
    .-nav {
      .my-cols {
        flex-direction: row-reverse;
        justify-content: center;
        a {
          position: relative;
          font-weight: bold;
          writing-mode: vertical-rl;
          letter-spacing: 0.5em;
          padding: 1.2em 0.3em 0;
          &::before {
            content: '';
            position: absolute;
            inset: 0 0 auto;
            margin-block: auto;
            width: 0.5rem;
            height: 0.5rem;
            background: url(../img/icon-mark.png) center / contain no-repeat;
          }
          .bi {
            color: var(--color-accent);
          }
        }
      }
    }
    .-sns {
      .my-cols {
        justify-content: center;
        gap: 1.875rem;
        li a img {
          width: 1.5625rem;
        }
      }
    }
  }
}

#home_sec02 {
  padding-block: 6.25rem;
  background: var(--color-bg);
  .my-container {
    max-width: 60rem;
    > .my-cols {
      flex-wrap: wrap;
      justify-content: space-around;
      gap: 1.875rem;
      .my-rows {
        gap: 1.875rem;
        max-width: 26rem;
        font-size: 0.875rem;
        a {
          dl {
            display: flex;
            dt {
              position: relative;
              width: 10.9375rem;
              &::after {
                content: '';
                position: absolute;
                inset: 1em 1.875rem auto auto;
                width: 2.6rem;
                height: 2px;
                background: radial-gradient(circle, var(--color-accent) 1px, transparent 1px) left top / 9px 2px repeat-x;
              }
            }
            dd {
              flex: 1;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}

#home_sec03 {
  padding-top: 6.25rem;
  .my-container {
    > .my-cols {
      flex-wrap: wrap;
      justify-content: center;
      gap: 4rem;
      margin-bottom: 6.25rem;
      .my-cols {
        flex-wrap: wrap;
        width: 100%;
        max-width: 36.25rem;
        gap: 3.125rem 1.25rem;
        font-size: 0.875rem;
        font-weight: bold;
        li {
          width: 11.25rem;
          a {
            display: block;
            .-img {
              display: block;
              width: 100%;
              aspect-ratio: 1 / 1;
              background: center / cover no-repeat;
              margin-bottom: 1em;
            }
          }
        }
      }
    }
  }
}

#home_sec04 {
  padding-block: 6.25rem;
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
    inset: 8rem 0 auto auto;
    width: min(calc(100vw - 28rem - (100vw - var(--max-width-container)) / 2), 100vw - 28rem);
    aspect-ratio: 915 / 720;
    background: url(../img/home_sec04-img02.jpg) center / cover no-repeat;
  }
  .my-rows {
    align-items: center;
    gap: 3.75rem;
    width: 100%;
    max-width: 18rem;
    &::after {
      content: '';
      display: block;
      width: 17rem;
      height: 24.6875rem;
      background: url(../img/home_sec04-img01.jpg) center / cover no-repeat;
    }
  }
}

#news {
  .my-title01 {
    background-image: url(../img/news_header-bg.jpg);
  }
}

#news_list {
  padding-bottom: 6.25rem;
  background: #B49664;
  &::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 22rem;
    background: var(--color-bg);
  }
  select[name="y"] {
    font-size: 1.125rem;
    border: 1px solid #B49664;
  }
  .my-cols {
    flex-wrap: wrap;
    gap: 3.75rem 2%;
    li {
      width: calc((100% - 2% * 2) / 3);
      a {
        display: block;
        .-img {
          width: 100%;
          height: auto;
          aspect-ratio: 3 / 2;
          background: #fff url(../img/logo-bg.jpg) center / contain no-repeat;
        }
        .-date {
          display: block;
          padding-block: 1.875rem 1.25rem;
          color: #fff;
          .-category {
            display: inline-block;
            font-size: 0.875rem;
            font-weight: 700;
            padding-inline: 1rem;
            margin-left: 1rem;
            border: 1px solid #fff;
          }
        }
        dd {
          font-size: 1.25rem;
          font-weight: 700;
          color: var(--color-body);
        }
      }
    }
  }
}

#news_post {
  padding-bottom: 6.25rem;
  background: #B49664;
  .-date {
    display: block;
    padding-block: 1.875rem 1.25rem;
    color: #fff;
    .-category {
      display: inline-block;
      font-size: 0.875rem;
      font-weight: 700;
      padding-inline: 1rem;
      margin-left: 1rem;
      border: 1px solid #fff;
    }
  }
  h2 {
    font-size: 1.125rem;
    font-weight: 700;
    padding-bottom: 1.25rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #fff;
  }
  .-body {
    font-size: 1rem;
    font-weight: 400;
    padding-bottom: 6.25rem;
  }
  .-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem 3rem;
    color: #fff;
    > div {
      flex: 1;
      display: flex;
      &:nth-child(1) {
        justify-content: end;
      }
    }
    > a {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 18.75rem;
      height: 3.75rem;
      border: 1px solid #fff;
      i {
        position: absolute;
        top: 0;
        right: 1.125rem;
        bottom: 0;
        display: flex;
        align-items: center;
      }
    }
  }
}

#feature {
  .my-title01 {
    background-image: url(../img/feature_header-bg.jpg);
  }
}

#feature_sec01 {
  margin-bottom: 6.25rem;
  .my-box01 {
    position: relative;
    margin-inline: auto;
    margin-bottom: -10rem;
    z-index: 1;
  }
}

#feature_sec02 {
  margin-bottom: 6.25rem;
  .my-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    .my-box01 {
      max-width: 60%;
      z-index: 1;
    }
  }
  .-img {
    width: 58.75%;
    margin-left: auto;
  }
}

#feature_sec03 {
  margin-bottom: 6.25rem;
  .my-container {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .my-box01 {
      max-width: 60%;
      z-index: 1;
    }
  }
  .-img {
    width: 58.75%;
    margin-right: auto;
  }
}

#product {
  .my-title01 {
    background-image: url(../img/product_header-bg.jpg);
  }
}

#product_sec01 {
  padding-bottom: 6.25rem;
  [data-bs-toggle="modal"] {
    display: block;
    background: #B49664;
    color: #fff;
    text-align: center;
    padding-bottom: 0.625rem;
    .-img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 22 / 17;
      background: #EAEBF0 center / cover no-repeat;
    }
    .-tag {
      font-size: 0.875rem;
      margin-top: 0.625rem;
    }
    .-name {
      font-weight: 700;
      margin-block: 0.25rem 0.625rem;
    }
    &::after {
      content: '詳細を見る';
      display: inline-block;
      font-size: 0.875rem;
      padding: 0.3125rem 2rem;
      background: #fff url(../img/icon-arrow-right.svg) center right 0.6rem / 0.875rem no-repeat;
      color: #B49664;
      border-radius: var(--border-radius-pill);
    }
  }
}

#access {
  .my-title01 {
    background-image: url(../img/access_header-bg.jpg);
  }
}

#access_sec01 {
  padding-bottom: 6.25rem;
  .my-container {
    .-map {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 168 / 80;
      margin-bottom: 1.25rem;
    }
    > dl {
      display: inline-block;
      margin: 0 3.125rem 0.625rem 0;
      dt {
        display: inline-block;
        vertical-align: middle;
        background: #B49664;
        color: #fff;
        padding: 0.3125rem 1.25rem;
        font-size: 0.75rem;
        margin: 0 1.25rem 1.25rem 0;
      }
      dd {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 1.25rem;
      }
    }
    .my-cols {
      justify-content: center;
      gap: 3.75rem;
      margin-top: 6.25rem;
      .my-box01 {
        max-width: 37.5rem;
      }
    }
  }
}

#contact {
  .my-title01 {
    background-image: url(../img/contact_header-bg.jpg);
  }
}

#contact_sec01 {
  padding-bottom: 6.25rem;
  text-align: center;
  iframe {
    margin-top: 3.75rem;
  }
}

#privacy {
  .my-title01 {
    background-image: url(../img/privacy_header-bg.jpg);
  }
}

#privacy_sec01 {
  padding-bottom: 6.25rem;
  font-size: 1rem;
  h2 {
    font-size: 1.125rem;
    font-weight: 700;
    padding-bottom: 1.25rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #B49664;
  }
  h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }
  section {
    margin-top: 2.5rem;
  }
}

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
  .my-footer {
    .my-footer-top {
      .my-container {
        &::before {
          display: block;
          position: relative;
          left: calc(-1 * var(--padding-container));
          margin-bottom: 6.25rem;
        }
        &::after {
          display: block;
          position: relative;
          margin-left: auto;
        }
      }
    }
  }
}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .my-title01 {
    height: 11.875rem;
    > span {
      font-size: 2.1875rem;
    }
  }

  .my-box01 {
    dl {
      dt {
        span {
          font-size: 1.75rem;
        }
      }
      dd {
        text-align: left;
      }
    }
  }

  #home_sec01 {
    padding-top: 8rem;
    &::after {
      display: block;
      position: static;
      width: 100%;
      aspect-ratio: 16 / 9;
      margin-top: 3.75rem;
    }
    .my-rows {
      margin-inline: auto;
    }
  }

  #news {
    .my-title01 {
      background-image: url(../img/news_header-bg-sp.jpg);
    }
  }

  #news_list {
    .my-cols {
      li {
        width: calc((100% - 2%) / 2);
      }
    }
  }

  #feature {
    .my-title01 {
      background-image: url(../img/feature_header-bg-sp.jpg);
    }
  }

  #feature_sec01 {
    .my-box01 {
      margin-bottom: -6.25rem;
    }
  }

  #feature_sec02,
  #feature_sec03 {
    .my-container {
      position: relative;
      inset: auto;
      display: block;
      .my-box01 {
        max-width: none;
        margin-bottom: -6.25rem;
      }
    }
    .-img {
      width: 100%;
    }
  }

  #product {
    .my-title01 {
      background-image: url(../img/product_header-bg-sp.jpg);
    }
  }

  #product_sec01 {
    padding-bottom: 6.25rem;
    .modal-body {
      flex-direction: column;
      > * {
        width: 100%;
      }
    }
  }

  #access {
    .my-title01 {
      background-image: url(../img/access_header-bg-sp.jpg);
    }
  }

  #access_sec01 {
    .my-container {
      .-map {
        aspect-ratio: 353 / 460;
      }
      .my-cols {
        flex-direction: column;
        align-items: center;
        gap: 1.875rem;
      }
    }
  }

  #contact {
    .my-title01 {
      background-image: url(../img/contact_header-bg-sp.jpg);
    }
  }

  #contact_sec01 {
    text-align: left;
  }

  #privacy {
    .my-title01 {
      background-image: url(../img/privacy_header-bg-sp.jpg);
    }
  }
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .my-title02 {
    font-size: 1.7rem;
  }

  .my-footer {
    .my-footer-top {
      .my-container {
        p {
          text-align: start;
        }
      }
    }
  }

  #home_sec03 {
    .my-container {
      > .my-cols {
        .my-cols {
          justify-content: center;
          column-gap: 4%;
          li {
            width: 48%;
          }
        }
      }
    }
  }

  #home_sec04 {
    &::before {
      display: block;
      position: static;
      width: 100%;
      aspect-ratio: 915 / 720;
      margin-bottom: 6.25rem;
    }
    .my-rows {
      margin-inline: auto;
    }
  }

  #news_list {
    .my-cols {
      li {
        width: 100%;
      }
    }
  }

  #news_post {
    .-nav {
      flex-wrap: wrap;
      column-gap: 0;
      > div {
        flex: auto;
        width: 50%;
        justify-content: end;
        &:nth-child(1) {
          justify-content: start;
        }
      }
      > a {
        order: 1;
        margin-inline: auto;
      }
    }
  }
}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}

/* XD */
@media (max-width: 392.98px) {
  :root {
    font-size: calc(100vw * 16 / 393);
  }
}