:root {
  font-size: 16px; /* 1rem */
  --font-sans-serif: "fot-tsukuardgothic-std", sans-serif;
  --font-serif: serif;
  --color-body: #1E1E1E;
  --color-blue: #3E5879;
  --color-blue-dark: #213555;
  --color-blur-light: #D5DEEA;
  --color-lightblue: #7EBBC7;
  --color-orange: #EA8F00;
  --color-green: #508657;
  --color-beige: #F5EFE7;
  --color-beige-dark: #D8C4B6;
  --color-gray: #737373;
  --color-purple: #8B73AA;
  --color-link: var(--color-orange);
  --color-meeting: #D8C4B6;
  --color-adjourn: #F17878;
  --color-event: #FFC05C;
  --color-other: #AAD0E5;
  --padding-container: 1.25rem;
  --max-width-container: 77.5rem;
}

body {
  font-family: var(--font-sans-serif);
  font-size: 1rem;
  line-height: 1.875;
  color: var(--color-body);
}

section {
  position: relative;
}

a:where(:any-link, :hover) {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: .7;
  text-decoration: none;
}

img {
  max-width: 100%;
}

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

.my-ajax-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 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: 0 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-link {
  color: var(--color-link);
}

.my-bc {
  font-size: 0.75rem;
  font-weight: 600;
  margin-block: 0.625rem 2.5rem;
  ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding: 0;
    margin: 0;
    a {
      color: var(--color-orange);
    }
    li + li::before {
      content: '';
      display: inline-block;
      width: 0.4375rem;
      height: 1px;
      background: var(--color-body);
      margin-right: 0.625rem;
      vertical-align: middle;
    }
  }
}

.my-link01 {
  color: var(--color-link);
  text-decoration: underline;
  &:hover {
    text-decoration: none;
  }
}

.my-title01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-bottom: 1.875rem;
  color: var(--color-blue);
  font-size: 35px;
  font-weight: 600;
  letter-spacing: 0.25em;
  line-height: 1.2;
  &::before {
    content: '';
    display: block;
    width: 0.9375rem;
    height: 0.9375rem;
    background: url(../img/icon-dot3.svg) center / contain no-repeat;
  }
  small {
    color: var(--color-body);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
  }
  &.-w {
    color: #F5EFE7;
    small {
      color: var(--color-beige-dark);
    }
  }
}

.my-title02 {
  display: flex;
  justify-content: center;
  margin-bottom: 1.875rem;
  > span {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.75rem;
    color: #fff;
    background: var(--color-blue);
    padding-inline: 1.5625rem;
    border-radius: 0.875rem;
  }
  &.-w {
    > span {
      color: var(--color-body);
      background: #fff;
    }
  }
}

.my-title03 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  &::before {
    content: '';
    display: block;
    width: 1.875rem;
    height: 1.875rem;
    background: url(../img/icon-i.svg) center / contain no-repeat;
  }
}

.my-title04 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: 1.875rem;
  font-size: 1.25rem;
  font-weight: bold;
  > img {
    width: 3.125rem;
  }
}

.my-btn01 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18.75rem;
  height: 3.75rem;
  margin: 3.75rem auto 0;
  background: var(--color-blue);
  color: #fff;
  font-weight: 600;
  border-radius: 0.3125rem;
}

.my-table01 {
  caption-side: top;
  margin-inline: auto;
  caption {
    margin-bottom: 1.1875rem;
  }
  td, th {
    border: 1px dashed var(--color-gray);
    vertical-align: middle;
    text-align: left;
    padding: 1.5rem;
  }
  td {
    background: #fff;
    .-adjourn > & {
      background: #E8E8E8;
    }
  }
  th {
    background: var(--color-blur-light);
    font-weight: 600;
    white-space: nowrap;
  }
  thead {
    th {
      text-align: center;
    }
  }
  &.-sm {
    td, th {
      vertical-align: top;
      padding: .5rem 1rem;
    }
  }
}

.my-table02 {
  width: 100%;
  tr + tr {
    border-top: 2px dotted var(--color-gray);
  }
  td, th {
    vertical-align: middle;
    text-align: left;
    padding: 1.5rem;
  }
  th {
    padding-inline: 0;
    font-weight: 600;
    white-space: nowrap;
  }
}

.my-lead {
  font-weight: bold;
  line-height: 2.5;
  margin-bottom: 3.75rem;
}

.my-news {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  flex-direction: column;
  max-width: 56.25rem;
  width: 100%;
  + .btn {
    display: block;
    max-width: 56.25rem;
    margin-inline: auto;
  }
  > li {
    margin-bottom: 1rem;
    > a {
      position: relative;
      display: flex;
      gap: 1.875rem;
      padding-block: 1.25rem;
      padding-right: 3rem;
      border-bottom: 2px solid var(--color-beige-dark);
      font-weight: 600;
      time {
        white-space: nowrap;
        letter-spacing: 0.3em;
        font-weight: normal;
      }
      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 1rem;
        bottom: 0;
        width: 1rem;
        height: 1rem;
        margin-block: auto;
        background: url(../img/icon-arrow-down.svg) center / contain no-repeat;
      }
      &[aria-expanded="true"]::after {
        background-image: url(../img/icon-arrow-close.svg);
      }
    }
    > div {
      padding-top: 1.25rem;
    }
  }
}

.my-event {
  > dt {
    display: flex;
    gap: 1rem;
    font-weight: 600;
  }
  &.-event,
  &.-meeting,
  &.-adjourn,
  &.-other {
    > dt::before {
      content: 'その他';
      width: 5em;
      height: 2.375em;
      line-height: 2.375em;
      text-align: center;
      background: var(--color-other);;
    }
    &.-event {
      > dt::before {
        content: '行事';
        background: var(--color-event);
      }
    }
    &.-meeting {
      > dt::before {
        content: '例会';
        background: var(--color-meeting);
      }
    }
    &.-adjourn {
      > dt::before {
        content: '休会';
        background: var(--color-adjourn);
      }
    }
  }
  > dd {
    > dl {
      display: inline-flex;
      align-items: center;
      gap: 1.25rem;
      margin: 1.25rem 1.25rem 0 0;
      > dt {
        width: 5rem;
        font-size: 0.875rem;
        font-weight: 600;
        text-align: center;
        line-height: 1.75rem;
        color: #fff;
        background: var(--color-blue);
        border-radius: 0.875rem;
      }
      > dd {
        flex: 1;
      }
    }
    > p {
      font-weight: 600;
      color: var(--color-blue);
      padding-left: 0.625rem;
      border-left: 0.375rem solid var(--color-beige-dark);
      margin-top: 1.25rem;
    }
  }
}

.my-quill .ql-container {
  background: #fff;
  font-family: inherit;
  font-size: inherit;
}

.my-quill-body {
  background: #fff;
  p {
    margin: 0;
  }
  .my-quill-body img {
    max-width: 100%;
  }
}

.my-header {
  position: relative;
  border-top: 0.625rem solid var(--color-beige-dark);
  overflow: hidden;
  > .my-container {
    padding-block: 1.25rem 1.09375rem;
    &::before,
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      background: bottom center / contain no-repeat;
    }
    &::before {
      background-image: url(../img/header-img01.png?v1);
      right: calc(50% + 27.4375rem);
      width: 12.5625rem;
      height: 4.0625rem;
    }
    &::after {
      background-image: url(../img/header-img02.png?v1);
      left: calc(50% + 26.9375rem);
      width: 13.0625rem;
      height: 4.625rem;
    }
  }
  > img {
    display: block;
    width: 100%;
  }
  > h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    height: 13.75rem;
    background: var(--color-blue) url(../img/header-bg01.png) center / 20.125rem;
    color: #fff;
    font-weight: bold;
    font-size: 2rem;
    > img {
      display: block;
      width: 3.5rem;
      height: auto;
    }
  }
  .my-header-logo {
    display: block;
    width: 21.6rem;
    margin-inline: auto;
    img {
      width: 100%;
    }
  }
  .my-header-nav {
    padding-top: 1.25rem;
    .my-cols {
      justify-content: center;
      max-width: 45rem;
      margin-inline: auto;
      text-align: center;
      li {
        flex: 1;
        a {
          display: block;
          color: var(--color-blue-dark);
          font-weight: 600;
        }
        + li {
          border-left: 1px solid var(--color-beige-dark);
        }
      }
    }
  }
  #header-nav-check,
  .my-header-nav-btn {
    display: none;
  }
}

.my-main {
  position: relative;
  overflow: hidden;
  background: var(--color-beige);
}

#home01 {
  display: flex;
  > div {
    position: relative;
    width: 50%;
    padding: 2.25rem var(--padding-container);
  }
  #home01-1 {
    background: var(--color-blue);
    color: #fff;
    text-align: center;
    &::after {
      content: '';
      position: absolute;
      bottom: -1.0625rem;
      right: calc(50% + 11.1875rem);
      width: 7.11375rem;
      height: 7.2175rem;
      background: url(../img/home-img01.png?v1) center / contain no-repeat;
      z-index: 1;
    }
    figure {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.625rem;
      margin-bottom: 1.25rem;
      img {
        width: 18.75rem;
      }
      figcaption {
        font-size: 0.75rem;
      }
    }
    dl {
      .my-title02 {
        margin-bottom: 0.625rem;
      }
    }
  }
  #home01-2 {
    .my-cols {
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 1.875rem;
      table {
        border-collapse: separate;
        border-spacing: 0 1.46875rem;
        th {
          font-weight: 600;
          padding-right: 1.875rem;
          vertical-align: top;
          white-space: nowrap;
          > span {
            display: block;
            text-align: center;
            border-bottom: 2px solid var(--color-beige-dark);
          }
        }
        .-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          max-width: 12.5rem;
          height: 1.875rem;
          border-radius: 0.3125rem;
          background: var(--color-blue);
          color: #fff;
        }
      }
      img {
        width: 12.8125rem;
      }
    }
  }
}

#home02 {
  background: #fff;
  padding-top: 5rem;
  .my-container {
    > div {
      position: relative;
      min-height: 35rem;
      padding-top: 4.6875rem;
      padding-left: 33.875rem;
      text-align: center;
      &::before {
        content: '';
        position: absolute;
        top: -2.75rem;
        right: 0;
        width: 7.73125rem;
        height: 9.015rem;
        background: url(../img/home-img02.png?v1) center / contain no-repeat;
      }
      > figure {
        position: absolute;
        top: 0;
        left: 0;
        width: 33.875rem;
        > .-img {
          position: relative;
          display: block;
          width: calc(100% - 11.4%);
          margin: 0 0 8.6% 11.4%;
          border-radius: 0.3125rem;
          z-index: 1;
        }
        > figcaption {
          position: absolute;
          top: 72%;
          right: 0;
          left: 11.4%;
          font-size: 1.4em;
          line-height: 1.2;
          white-space: nowrap;
          z-index: 1;
        }
        &::before {
          content: '';
          position: absolute;
          bottom: -1rem;
          left: 3rem;
          width: 9.57312rem;
          height: 6.49313rem;
          background: url(../img/home-img03.png?v1) center / contain no-repeat;
          z-index: 2;
        }
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 80.2%;
          height: 77.8%;
          background: var(--color-blue);
          border-radius: 0.3125rem;
        }
      }
      > dl {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1.875rem;
        margin-top: 3.75rem;
        margin-inline: 2.5rem;
        dt {
          display: flex;
          justify-content: center;
          text-align: center;
          > span {
            font-size: 1.25rem;
            font-weight: 600;
            text-decoration: underline 2px var(--color-beige-dark);
            text-underline-offset: 0.3em
          }
        }
        dd {
          text-align: left;
        }
      }
    }
  }
}

#home03 {
  background: #fff;
  padding-block: 5rem 5.8125rem;
  .my-container {
    &::before {
      content: '';
      position: absolute;
      top: 1.25rem;
      right: 5.1875rem;
      width: 4.14125rem;
      height: 5.72687rem;
      background: url(../img/home-img04.png?v1) center / contain no-repeat;
    }
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 1.9375rem;
      width: 5.64813rem;
      height: 6.47813rem;
      background: url(../img/home-img05.png?v1) center / contain no-repeat;
    }
  }
}

#home06 {
  padding-block: 3.75rem 10rem;
  &::before {
    content: '';
    position: absolute;
    top: 1.73125rem;
    right: calc(50% + 18rem);
    width: 7rem;
    height: 7.5rem;
    background: url(../img/home-img06.png?v1) center / contain no-repeat;
  }
  &::after {
    content: '';
    position: absolute;
    top: 1.73125rem;
    left: calc(50% + 16.875rem);
    width: 7.8rem;
    height: 7.5rem;
    background: url(../img/home-img07.png?v1) center / contain no-repeat;
  }
  .my-cols {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.875rem;
    max-width: 69.375rem;
    margin-inline: auto;
    > li {
      width: 21.875rem;
      table {
        width: 100%;
        table-layout: fixed;
        background: #fff;
        font-size: 1.25rem;
        text-align: center;
        > caption {
          caption-side: top;
          line-height: 1.8;
          text-align: center;
          background: var(--color-blue);
          color: #fff;
          small {
            display: block;
            font-size: 1rem;
          }
        }
        th, td {
          padding: 0;
          &.-holiday {
            color: #D00000;
          }
          div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 3.75rem;
            font-weight: 600;
            background: var(--color-other);
            line-height: 1.4;
            &::after {
              font-size: 0.6875rem;
              font-weight: normal;
            }
            &.-event {
              background: var(--color-event);
              &::after {
                content: '行事';
              }
            }
            &.-meeting {
              background: var(--color-meeting);
              &::after {
                content: '例会';
              }
            }
            &.-adjourn {
              background: var(--color-adjourn);
              pointer-events: none;
              &::after {
                content: '休会';
              }
            }
          }
        }
      }
      ul {
        margin-top: 0.25rem;
      }
    }
  }
}

#home07 {
  background: #fff;
  padding-block: 5rem 2rem;
  .-info {
    padding: 1.875rem;
    border-radius: 0.625rem;
    background: #fff;
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.16);
  }
}

#club02,
#club03 {
  padding-top: 6.25rem;
  &#club02 {
    padding-top: 0;
  }
  &#club03 {
    .my-title01 {
      letter-spacing: 0.1em;
    }
  }
  .my-title03 {
    margin-top: 5.625rem;
  }
  dl {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.875rem;
    margin-top: 1.875rem;
    dt {
      display: flex;
      justify-content: center;
      text-align: center;
      > span {
        font-size: 1.25rem;
        font-weight: 600;
        text-decoration: underline 2px var(--color-beige-dark);
        text-underline-offset: 0.3em
      }
    }
    dd {
      strong {
        font-size: 1.25rem;
      }
      text-align: left;
      .my-rows {
        align-items: center;
        gap: 1.25rem;
        margin-top: 1.25rem;
        > li {
          width: 100%;
          max-width: 62.5rem;
          padding: 1.25rem 2.5rem;
          background: var(--color-blue);
          color: #fff;
          border-radius: 0.3125rem;
          > strong {
            display: block;
            color: var(--color-orange);
            font-size: 1.125rem;
            font-weight: bold;
            margin-bottom: 0.625rem;
          }
        }
      }
    }
  }
}

#club04 {
  padding-block: 6.25rem 11rem;
  .my-title03 {
    margin-top: 5.625rem;
  }
}

#access01 {
  padding-bottom: 11.25rem;
  .my-cols {
    align-items: center;
    gap: 6%;
    > div {
      &:first-child {
        width: 54%;
        iframe {
          width: 100%;
          height: 30rem;
        }
      }
      &:last-child {
        width: 40%;
      }
    }
  }
}

#news00 {
  padding-bottom: 10rem;
}

#schedule00 {
  padding-bottom: 10rem;
}

#member00 {
  padding-bottom: 3.75rem;
  .my-cols {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    a {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1.5625rem;
      width: 17.5rem;
      height: 7.8125rem;
      background: #fff;
      font-size: 1.25rem;
      font-weight: bold;
      border-left: 0.375rem solid var(--color-orange);
      > img {
        width: 4.6875rem;
      }
      &::after {
        content: '';
        display: block;
        background: var(--color-blue);
        width: 0.4375rem;
        height: 0.875rem;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
      }
    }
  }
}

#member01 {
  padding-top: 3.75rem;
  .nav-tabs {
    border-bottom-color: #CED4DA;
  }
  .nav-tabs .nav-link:not(.active) {
    color: var(--color-orange);
  }
  .bg-primary {
    background: var(--color-blue) !important;
  }
  .text-primary {
    color: var(--color-blue) !important;
  }
}

#member02 {
  padding-top: 3.75rem;
}

#member03 {
  padding-top: 3.75rem;
  .my-cols {
    flex-wrap: wrap;
    gap: 1.875rem;
    max-width: 69.375rem;
    margin-inline: auto;
    a {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: .5em;
      width: 21.875rem;
      height: 6.25rem;
      border-radius: 0.625rem;
      background: #fff;
      box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.16);
      padding: 1em;
    }
  }
}

#member04 {
  padding-block: 3.75rem 11.25rem;
}

#list01 {
  padding-bottom: 11.25rem;
}

#admin-news {
  .btn-primary {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
    &:hover {
      filter: brightness(90%);
    }
  }
}

#admin-event {
  .btn-primary {
    background-color: var(--color-green);
    border-color: var(--color-green);
    &:hover {
      filter: brightness(90%);
    }
  }
}

#admin-report {
  .btn-primary {
    background-color: var(--color-lightblue);
    border-color: var(--color-lightblue);
    &:hover {
      filter: brightness(90%);
    }
  }
}

#admin-info {
  .btn-primary {
    background-color: var(--color-purple);
    border-color: var(--color-purple);
    &:hover {
      filter: brightness(90%);
    }
  }
}

.my-footer {
  position: relative;
  color: #fff;
  text-align: center;
  padding-block: 3.75rem 0.6875rem;
  background: linear-gradient(rgba(0, 0, 0, .73), rgba(0, 0, 0, .73)),
              url(../img/footer-bg.jpg?v1) center / cover no-repeat;
  z-index: 1;
  .my-container {
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: -6.75rem;
      background: bottom center / contain no-repeat;
    }
    &::before {
      background-image: url(../img/footer-img01.png?v1);
      left: var(--padding-container);
      width: 15.375rem;
      height: 4.21125rem;
    }
    &::after {
      background-image: url(../img/footer-img02.png?v1);
      right: var(--padding-container);
      width: 14.11812rem;
      height: 4.10625rem;
    }
  }
  .my-footer-pagetop {
    position: absolute;
    top: -13rem;
    right: var(--padding-container);
    display: block;
    width: 5rem;
    height: 5rem;
    background: url(../img/icon-pagetop.svg) center / contain no-repeat;
    img {
      width: 100%;
    }
  }
  .my-footer-logo {
    display: block;
    width: 21.6rem;
    margin: 0 auto 1.875rem;
    img {
      width: 100%;
    }
  }
  .my-footer-address {
    line-height: 2;
    .my-cols {
      flex-wrap: wrap;
      justify-content: center;
      column-gap: 3.75rem;
      margin-block: 1.25rem 2.5rem;
      li {
        a {
          font-size: 1.25rem;
          color: inherit;
          padding-left: 2rem;
          background: center left / 1.4375rem no-repeat;
        }
        .my-footer-tel {
          background-image: url(../img/icon-phone.svg);
        }
        .my-footer-mail {
          background-image: url(../img/icon-mail.svg);
        }
      }
    }
  }
  .my-footer-nav {
    justify-content: center;
    max-width: 45rem;
    margin-inline: auto;
    text-align: center;
    margin-bottom: 5rem;
    li {
      flex: 1;
      a {
        display: block;
        color: inherit;
        font-weight: 600;
      }
      + li {
        border-left: 1px solid var(--color-beige-dark);
      }
    }
  }
  small {
    display: block;
    font-size: 0.6875rem;
  }
}

#modalEvent,
#modalForm {
  .modal-body {
    padding: 0;
  }
  iframe {
    display: block;
    width: 100%;
    height: calc(100vh - 240px);
  }
}

/* `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) {
  #home02 {
    .my-container {
      > div {
        height: auto;
        padding: 0;
        > figure {
          display: inline-block;
          position: relative;
          width: 100%;
          max-width: 33.875rem;
        }
      }
    }
  }
}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .my-news {
    > li {
      > a {
        flex-direction: column;
        gap: 0.625rem;
      }
    }
  }

  .my-event {
    > dt {
      flex-direction: column;
      gap: 0.625rem;
    }
    > dd {
      > dl {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin-right: 0;
      }
    }
  }

  #home01 {
    flex-direction: column;
    > div {
      width: 100%;
    }
    #home01-1 {
      &::after {
        bottom: -1.5rem;
        right: calc(50% + 7.0625rem);
        width: 3.79188rem;
        height: 3.8475rem;
      }
    }
  }

  #home02 {
    .my-container {
      > div {
        &::before {
          top: -4.375rem;
          width: 3.8125rem;
          height: 4.44562rem;
        }
        > figure {
          &::before {
            bottom: -0.75rem;
            left: 2rem;
            width: 6.94187rem;
            height: 4.70812rem;
          }
        }
        > dl {
          margin-inline: 0;
        }
      }
    }
  }

  #home03 {
    padding-bottom: 10.8125rem;
    .my-container {
      &::before {
        top: -2.5rem;
        right: 3.125rem;
        width: 2.44rem;
        height: 3.37375rem;
      }
      &::after {
        bottom: -5.9375rem;
        left: 1.25rem;
        width: 3.97938rem;
        height: 4.56375rem;
      }
    }
  }

  #home06 {
    &::before {
      top: -1.69375rem;
      right: auto;
      left: var(--padding-container);
      width: 4.3rem;
      height: 4.62875rem;
    }
    &::after {
      top: -1.69375rem;
      right: var(--padding-container);;
      left: auto;
      width: 4.79812rem;
      height: 4.62875rem;
    }
    .my-cols {
      > li {
        width: 100%;
      }
    }
  }

  #club04 {
    .my-table01 {
      white-space: nowrap;
    }
  }

  #access01 {
    .my-cols {
      flex-direction: column;
      gap: 1rem;
      > div {
        &:first-child,
        &:last-child {
          width: 100%;
        }
      }
    }
  }

  #access02 {
    .my-cols {
      flex-direction: column;
      gap: 2.5rem;
    }
  }

  #member03 {
    .my-cols {
      a {
        width: 100%;
      }
    }
  }
}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  :root {
    font-size: calc(100vw * 16 / 393);
  }

  #home02 {
    .my-container {
      > div {
        > figure {
          width: auto;
          margin-inline: calc(var(--padding-container) * -1);
        }
      }
    }
  }

  .my-header {
    > .my-container {
      padding-bottom: 3.9375rem;
      &::before {
        right: auto;
        left: 0;
        width: 9.4375rem;
        height: 3.9375rem;
      }
      &::after {
        right: 0;
        left: auto;
        width: 10rem;
        height: 3.9375rem;
      }
    }
    .my-header-logo {
      width: 17.4rem;
      margin-inline: 0;
    }
    .my-header-nav {
      display: none;
    }
    .my-header-nav-btn {
      position: absolute;
      display: block;
      width: 1.875rem;
      height: 1.875rem;
      top: 1.25rem;
      right: 1.25rem;
      background: url(../img/icon-menu-open.svg) center / contain no-repeat;
      cursor: pointer;
      z-index: 3;
    }
    #header-nav-check:checked {
      ~ .my-header-nav {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        display: flex;
        align-items: center;
        height: 100vh;
        height: 100dvh;
        padding: 0;
        overflow-y: auto;
        background: var(--color-blue-dark);
        z-index: 2;
        .my-cols {
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          gap: 2.5rem;
          li {
            + li {
              border: 0;
            }
            a {
              color: #fff;
              font-weight: normal;
            }
          }
        }
      }
      ~ .my-header-nav-btn {
        position: fixed;
        margin-top: 0.625rem;
        background-image: url(../img/icon-menu-close.svg);
      }
    }
  }

  .my-footer {
    .my-container {
      &::before,
      &::after {
        top: -6.2rem;
      }
      &::before {
        left: 0;
        width: 12.25625rem;
        height: 3.35688rem;
      }
      &::after {
        right: 0;
        width: 11.25437rem;
        height: 3.27375rem;
      }
    }
    .my-footer-address {
      .my-cols {
        margin-bottom: 5rem;
      }
    }
    .my-footer-nav {
      display: none;
    }
  }
}