@charset "UTF-8";

html {
  font-size: min(16px, calc(16 * (100vw / 1500)));
  scroll-behavior: smooth;
  /* scroll-behavior: auto; */
  margin-top: 0 !important;
}

html.lenis {
  scroll-behavior: auto;
}

:root {
  --bw: calc(100vw / 1920);
  --bh: calc(100vh / 1020);
  --sb: 0.625rem;
  /* --color01: #09a680; */
  --color01: #239f7b;
  --link-color: var(--color01);
  --hover-color: #0c916e;
  --text-hover-color: #b3b3b3;
  --body-text-color: #333;
  --border-color: #ccc;
  --global-header-height: 100px;
  --border-radius: 0.9375rem;
  --border-radius-sm: 0.625rem;
  --red: #FF5449;
  /* --width-lg: 1420px;
  --width-md: 1140px; */
  /* --width-lg: min(1420px, calc(100% - 5rem));
  --width-md: 1140px; */
  /* --width-lg: min(1420px, calc(100vw - 5rem));
  --width-md: min(1140px, calc(100vw - 22.5rem)); */
  --width-lg: 88.75rem;
  /* --width-lg: 87.5rem; */
  --width-md: 71.25rem;
  --box-color01: #fff;
  --box-color02: #edf6f5;
  --gradient01: linear-gradient(to right, #2eafba, #00a582);
}

/* *{
  transition: 0.3s ease;
} */
body {
  --box-color: var(--box-color02);
  --box-color-inner: var(--box-color01);
  font-family: "Noto Sans JP";
  /* font-size: max(16px, 1rem); */
  font-size: 1rem;
  font-weight: 400;
  /* color: #222222; */
  color: var(--body-text-color);
  background: var(--box-color02);
  width: 100%;
  min-width: var(--width-md);
  transition: none;

  /* scrollbar-width: thin; */
  &.loading {

    .content-search,
    .card-list {
      &::before {
        opacity: 0.75;
        pointer-events: auto;
      }

      &::after {
        opacity: 0.75;
        animation: loading 1.0s both;
        animation-iteration-count: 1;
        pointer-events: auto;
      }
    }
  }

  .content-search,
  .card-list {
    position: relative;

    &::before,
    &::after {
      content: "";
      display: block;
      position: absolute;
      inset: 0 0 0;
      z-index: 5;
      transition: 0.3s ease;
    }

    &::before {
      width: 100%;
      height: 100%;
      background: #fff;
      opacity: 0;
      pointer-events: none;
    }

    &::after {
      margin: auto;
      opacity: 0;
      z-index: 21;
      pointer-events: none;
      border-top: 3px solid var(--link-color);
      border-left: 3px solid var(--link-color);
      border-right: 3px solid rgba(255, 255, 255, 0);
      border-bottom: 3px solid rgba(255, 255, 255, 0);
      border-radius: 50%;
      width: 3rem;
      height: 3rem;
      pointer-events: none;
      /* background: red; */
      /* animation: loading 1s both; */
    }
  }
}

body.member-only {
  --box-color: var(--box-color01);
  --box-color-inner: var(--box-color02);
}

/* body::-webkit-scrollbar {
  width: 5px;
  background-color: #57b0d5;
  border-radius: 3px;
} */

body.load {
  background-color: #fff;
  position: relative;
}

@media (scripting: none) {
  body.load {
    background: #313131;
  }
}

/* body::before {
  position: absolute;
  inset: 50vh 0 auto;
  content: "";
  margin: 0 auto;
  z-index: 10001;
  width: 50px;
  height: 50px;
  background-image: url(../images/animation_logo.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0;
  transition: 0.3s ease;
} */
body::after {
  position: absolute;
  inset: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 5000;
  pointer-events: none;
  /* transform: translateY(-25%); */
}

body.load::after {
  opacity: 1;
  /* transform: translateY(0%); */
  transition: 1.0s ease;
}

@media (scripting: none) {
  body.load::after {
    display: none;
  }
}

/* @media screen and (max-width: 1024px) { */
/* @media screen and (max-width: 1023px) {
} */

@media screen and (max-width: 768px) {
  body {
    min-width: 100%;
  }
}


/*----- header -----*/
#header {
  /*  padding: 30px 50px 30px;*/
  padding: 0;
  background: #fff;
  color: var(--body-text-color);
  /* display: flex; */
  display: grid;
  grid-template-areas:
    "searchbox searchbox"
    "logo nav";
  grid-template-rows: 0fr auto;
  justify-content: space-between;
  align-items: stretch;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.0);
  /* position: sticky; */
  position: relative;
  z-index: 10;
  top: 0;
  transition: 0.3s ease;
}

/* .scrolled #header { */
body:not(.front) #header {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}

#header.search-open {
  /* grid-template-rows: 3.75rem 1fr; */
  grid-template-rows: 1fr auto;
}

#header > .searchbox {
  /* opacity: 0; */
  height: auto;
  overflow: hidden;
  background: #f2f2f1;
  grid-area: searchbox;
  transition: 0.3s ease;
  translate: 0 -100%;
}

#header.search-open > .searchbox {
  opacity: 1;
  height: fit-content;
  translate: 0 0%;
}

#header .searchbox form > div,
main .searchbox input[type="text"] {
  background: #fff;
  border-radius: var(--border-radius-sm);
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
  /* font-size: 1rem; */
  padding: 0.375rem 0 0.375rem 1rem;
}

#header .searchbox form > div {
  width: calc(100% - 6.25rem);
  margin: 1rem auto;
}

#header .searchbox form > div input[type="text"] {
  width: 100%;
  outline: 0;
}

#header .searchbox #searchsubmit {
  text-indent: -200%;
  width: 2.375rem;
  height: 2.375rem;
  overflow: hidden;
  position: relative;
  padding: 0 1rem;
  box-sizing: content-box;
  color: var(--link-color);
}

#header .searchbox #searchsubmit::before {
  position: absolute;
  display: block;
  inset: 0;
  margin: auto;
  /* vertical-align: -0.4em; */
  content: "";
  width: 2.375rem;
  height: 2.375rem;
  background: currentColor;
  --mask: url("../img/svg_search.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
}

#header #burger {
  display: none;
}

.global-nav-wrapper {
  grid-area: nav;
  /* font-size: 15px; */
  /* font-size: 0.9375rem; */
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  height: auto;
}

.global-nav-wrapper__inner {
  display: contents;
}

.global-nav-wrapper ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
}

#header .global-nav > li {
  position: relative;
}

#header .global-nav {
  gap: 0 0.5rem;
  margin-right: 2.5rem;
}

#header .global-nav li a {
  display: flex;
  align-items: center;
  padding: 1.375rem 1rem;
  position: relative;
  overflow: hidden;
  display: block;
  font-weight: 400;
  transition: 0.3s ease;
}

#header .global-nav li:has(ul) > a::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--link-color);
  border-right: 1px solid var(--link-color);
  rotate: 135deg;
  translate: 100% -50%;
}

#header .global-nav li a::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  inset: auto auto 0 0;
  background: var(--link-color);
  transform: translateX(-101%);
  transition: 0.3s ease;
}

#header .global-nav li a:hover,
#header .global-nav li.active > a {
  color: var(--link-color);
}

#header .global-nav li a:hover::before,
#header .global-nav li.active > a::before {
  transform: translateX(0);
}

#header .global-nav li .sub-menu {
  position: absolute;
  display: flex;
  /* flex-direction: column; */
  gap: 0 1rem;
  justify-content: center;
  background: #efefef;
  /* width: 100%; */
  width: fit-content;
  left: -100%;
  margin: 0 auto;
  right: -100%;
  padding: 1rem 2rem;
  opacity: 0;
  pointer-events: none;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

#header .global-nav li .sub-menu li:first-of-type {
  display: none;
}

#header .global-nav li:last-of-type .sub-menu {
  right: 0;
  left: auto;
}

body:not(.front) #header .global-nav li .sub-menu {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
}

/*
#header .global-nav li .sub-menu::before{
  content: "";
  display: block;
  width: 200vw;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
  background: #efefef;
}*/
#header .global-nav li .sub-menu a {
  display: block;
  position: relative;
  padding: 1rem 2rem 1rem 1rem;
  white-space: nowrap;
}

#header .global-nav li .sub-menu a::before {
  display: none;
}

#header .global-nav li .sub-menu a::after {
  position: absolute;
  content: "";
  display: block;
  inset: 0 0 0 auto;
  margin: auto 0.5rem auto 0;
  width: 0.375rem;
  height: 0.625rem;
  background: var(--link-color);
  --mask: url("../img/svg_arrow01.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
}

#header .global-nav li:hover .sub-menu {
  opacity: 1;
  pointer-events: auto;
}

#header .global-nav-sub {
  /*  position: absolute;
  top: 0;
  right: 0;*/
  justify-content: flex-end;
  border-radius: 0 0 0 var(--border-radius);
  overflow: hidden;
  margin-left: auto;
}

.global-nav-sub {
  display: flex;
  gap: 0 !important;
}

.global-nav-sub a {
  color: var(--body-text-color);
  background: #eee;
  /* padding: 1.125rem 1.4375rem; */
  padding: 1.125rem 2.5rem;
  box-sizing: border-box;
  display: block;
  font-weight: 400;
}

#header .global-nav-sub a {
  min-width: 7.8125rem;
}

.global-nav-sub li[class^='page-'] a::before,
.global-nav-sub li:not([class^='page-']) a::after {
  display: inline-block;
  vertical-align: -0.4em;
  content: "";
  /* width: 1.5625rem;
  height: 1.5625rem; */
  width: 1.5625em;
  height: 1.5625em;
  background: currentColor;
}

.global-nav-sub .page-job-search a::before {
  --mask: url("../img/svg_persons.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
  margin-right: 0.25em;
}

.global-nav-sub .page-member a::before {
  --mask: url("../img/svg_lock.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
  margin-right: 0.25em;
}

.global-nav-sub .page-member-logout a::before {
  /* --mask: url("../img/svg_lock_out.svg"); */
  --mask: url("../img/svg_logout.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
  margin-right: 0.25em;
}

.global-nav-sub .page-contact a::before {
  --mask: url("../img/svg_mail.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
  margin-right: 0.25em;
}

.global-nav-sub li:not([class^='page-']) a::after {
  --mask: url("../img/svg_search.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
  margin-left: 0.25em;
}

#header .global-nav-sub li:not([class^='page-']) a {
  background: #f2f2f1;
  color: var(--link-color);
  padding-right: 2em;
}

#header .global-nav-sub li:not([class^='page-']) a:hover {
  color: var(--hover-color) !important;
  /* background: #edf6f5; */
}

.global-nav-sub .page-job-search a {
  background: #deeed7;
  color: var(--link-color);
}

.global-nav-sub .page-member a,
.global-nav-sub .page-member-logout a {
  background: #31b69e;
  color: #fff !important;
}

.global-nav-sub .page-contact a {
  background: #239f7b;
  color: #fff !important;
  transition: 0.3s ease;
}

.global-nav-sub a:hover {
  color: #fff !important;
  background: var(--hover-color);
}

#header .logo {
  grid-area: logo;
}

#header .logo a {
  display: flex;
  /* padding: 1.875rem 0 3.125rem 1.875rem; */
  padding: 1.875rem 0 1.875rem 1.875rem;
  transition: 0.3s ease;

  &:hover {
    opacity: 0.8;
  }
}

#header .logo a > span {
  display: flex;
  align-items: center;
}

img.logo-img {
  width: auto;
  height: 3.4375rem;
}

/*----- cats -----*/
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cats span,
.cats a {
  --color: var(--body-text-color);
  color: #fff;
  background: var(--color);
  display: block;
  padding: 0.125rem 1rem;
  /* font-size: 14px; */
  font-weight: 400;
  text-align: center;
  transition: 0.3s ease;
  width: 9rem;
  border-radius: var(--border-radius-sm);
}

.cats a.active,
.cats .active a,
.cats a:hover {
  color: #fff;
  background: var(--color01);
}

/*----- archive -----*/
.archive__categires {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0 20px;
  background: var(--box-color);
  border-radius: var(--border-radius);
  padding: 1.25rem 1.875rem;
  /* margin-right: auto; */
}

.archive__categires dt {
  min-width: 100px;
  font-weight: 400;
  border-right: 1px solid #333;
  padding-right: 1rem;
  white-space: nowrap;
}

.archive__categires .cats {
  gap: 0 1.25rem;
}

.archive__categires .cats a {
  padding: 0.5rem 0.5rem;
  color: var(--body-text-color);
  background: transparent;
  width: auto;
  transition: 0.3s ease;
}

.archive__categires .cats a:hover,
.archive__categires .cats .active a {
  color: var(--color01);
}

.archive__categires .cats .active a {
  font-weight: 700;
}

@media screen and (max-width: 1023px) {
  .archive__categires {
    align-items: stretch;
    padding: 1rem 1rem;
    gap: 0 1rem;

    .cats {
      flex-direction: column;
    }

    dt {
      /* border-bottom: 1px solid currentColor; */
      border-right: 0;
      padding: 0.25rem 1.5rem 0.25rem 0.5rem;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        display: block;
        width: 1px;
        height: calc(100% - 0.5rem);
        inset: 0 0 0 auto;
        margin: auto 0;
        background: #333;
      }
    }

    dd {
      width: 100%;
    }

    .cats a {
      text-align: left;
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
    }
  }

}

.search-result {
  margin-top: 4.5rem;
}

/* .post-lists */
.post-lists {
  display: block;
  margin: 2.625rem 0;
}

/* ul.post-lists {
  border-top: 1px solid var(--border-color);
} */

.post-lists > li {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto)) 1fr;
  align-items: center;
  gap: 1.25rem;
  padding: 0;
  /* padding: 1.75rem 0; */
  border-bottom: 1px solid var(--border-color);
}

.post-lists > li > a,
.post-lists > li > span {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  position: relative;
  transition: 0.3s ease;
  padding: 1.75rem 0;
}

.post-lists > li > a::before {
  display: block;
  content: "";
  width: 0%;
  /* width: calc(100% + 0.625rem); */
  height: 100%;
  position: absolute;
  inset: 0;
  /* margin: 0 auto; */
  pointer-events: none;
  /* background: rgb(35, 159, 123,0.05); */
  background: rgb(0, 0, 0, 0.02);
  opacity: 0;
  transition: 0.3s ease;
}

.post-lists > li > a:hover::before {
  width: 100%;
  opacity: 1;
}

.post-lists > li > a::after {
  position: absolute;
  content: "";
  display: block;
  inset: 0 0 0 auto;
  margin: auto 1.25rem auto 0;
  width: 0.375rem;
  height: 0.625rem;
  background: var(--link-color);
  --mask: url("../img/svg_arrow01.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
  transition: 0.3s ease;
}

.post-lists > li > a:hover {
  color: var(--hover-color);

  &::after {
    translate: 100% 0;
  }
}

.search .post-lists > li {
  display: block;

  > a {
    color: var(--link-color);
    font-size: 1rem;
    line-height: 1.5;

    &:hover {
      b {
        color: var(--color01);
      }

      small {
        color: var(--hover-color);
      }
    }

    small {
      color: var(--body-text-color);
      font-size: 1em;
    }

    b {
      font-size: 1.25em;
      color: var(--body-text-color);
      /* margin-bottom: 0.25em; */
    }

    span {
      font-size: 1em;
      text-decoration: underline;
      word-break: break-all;
    }
  }
}

.post-lists li time {
  grid-column: 1 / 2;
  padding-left: 1.25rem;
}

.post-lists li .title {
  grid-column: 3 / 4;
}

.post-lists li .cats-wrapper {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.post-lists li .cats-wrapper a,
.post-lists li .cats-wrapper span {
  /* width: 100%; */
  font-size: 0.875rem;
}

.post-lists li .cats-wrapper ul li:nth-of-type(n+2) {
  display: none;
}

/* pagenation */
.pagination {
  text-align: center;
  margin: 70px 0 0;
}

.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  position: relative;
  gap: 1rem;
}

.nav-links span.page-numbers:not(.prev):not(.next),
.nav-links a.page-numbers:not(.prev):not(.next) {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  /* font-weight: bold; */
  font-size: 1.5rem;
  width: min(3.5625rem, 10vw);
  height: min(3.5625rem, 10vw);
  border-radius: 100vh;
  background: var(--box-color);
  color: var(--link-color);
}

.nav-links .prev,
.nav-links .next,
.nav-links:not(:has(.prev))::before,
.nav-links:not(:has(.next))::after {
  font-size: 1rem;
  font-weight: 400;
  padding: 1.5625rem 1rem;
  /* padding: 1.5625rem 4.375rem; */
  box-sizing: border-box;
  width: 11.625rem;
}

.nav-links:not(:has(.prev))::before,
.nav-links:not(:has(.next))::after {
  display: block;
  content: "";
}


.nav-links span {
  /* color: #57b0d5; */
  background: none;
}

.nav-links .page-numbers.dots {
  border-color: transparent;
  background: transparent !important;
  width: fit-content !important;
}

.nav-links span.current {
  color: #fff !important;
  background: var(--link-color) !important;
}

.nav-links a:hover {
  opacity: 0.8;
}

.nav-links a.next,
.nav-links a.prev {
  /* display: inline-block; */
  border-radius: var(--border-radius);
  background: var(--box-color);
  color: var(--link-color);
  line-height: 1;
  /* width: fit-content; */
  position: relative;
}

.nav-links a.prev,
.nav-links:not(:has(.prev))::before {
  margin-right: auto;
  left: 0;
  /* clip-path: polygon(100% 0, 0 50%, 100% 100%); */
}


.nav-links a.next,
.nav-links:not(:has(.next))::after {
  margin-left: auto;
  right: 0;
  /* clip-path: polygon(0 0, 100% 50%, 0 100%); */
}

.nav-links a.prev::before,
.nav-links a.next::after {
  content: "";
  display: inline-block;
  border-style: solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid currentColor;
  border-right: 0;
  margin-left: 0.25rem;
  transition: 0.3s ease;
  vertical-align: 0.1em;
  width: 0;
  height: 0;
}

.nav-links a.prev::before {
  margin-left: 0;
  margin-right: 0.25rem;
  scale: -1;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*----- common -----*/
:where(p) {
  text-align: justify;
  word-break: break-all;
}

.sp {
  display: none;
}

a[href^="tel:"] {
  pointer-events: none;
}

.visibility-hidden {
  visibility: hidden;
}

.nowrap {
  white-space: nowrap;
}

dt, dd,
th, td {
  word-break: break-all;
}

/* youtube 対応 */
p:has(> iframe[src^='https://www.youtube.com/embed']),
div:has(> iframe[src^='https://www.youtube.com/embed']) {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

iframe[src^='https://www.youtube.com/embed'] {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.link-overlay01 {
  position: relative;
  z-index: 1;

  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.65);
    inset: 0;
    z-index: -1;
    transition: 0.3s ease;
  }

  &:hover {
    color: #fff;
    background-color: transparent;

    &:before {
      background: rgba(0, 0, 0, 0.35);
    }
  }

  > img {
    z-index: -2;
    position: relative;
  }

  &[href$='/movie/'] {
    &::after {
      display: block;
      vertical-align: -0.4em;
      content: "";
      position: absolute;
      width: 7.25rem;
      height: auto;
      /* height: 5.625em; */
      aspect-ratio: 116 / 90;
      max-width: 20vw;
      background: url("../img/svg_youTube01.svg");
      background-repeat: no-repeat;
      background-size: contain;
      inset: 0;
      margin: auto;
    }
  }
}

@media screen and (max-width: 768px) {

  .sp {
    display: block;
  }

  a[href^="tel:"] {
    pointer-events: auto;
  }

  .pc {
    display: none !important;
  }
}

main {
  line-height: 1.8em;
  color: #222;
  background: #fff;
}

.wrapper {
  margin: 0 auto;
  width: var(--width-lg);
  /* width: calc(100% - 5rem);
  max-width: 93.75rem; */
}

main .wrapper {
  margin: 0 auto;
  padding: 0;
  /* padding: 2.5rem 0; */
}

.container {
  width: 100%;
  max-width: var(--width-md);
  margin-inline: auto;
}

.common-title01 {
  font-size: 1.625rem;
  font-weight: 700;
  /* margin-bottom: 2.5rem; */
  margin-bottom: 1.5385em;
  letter-spacing: 0.05em;
}

.common-title01.c01 {
  color: var(--color01);
}

.common-title01 small {
  font-size: 1rem;
  line-height: 1.25;
  color: var(--color01);
  display: block;
  margin-top: 0.3125rem;
  letter-spacing: 0.05em;
}

.common-title02 {
  font-size: 1.875rem;
  line-height: 1.666;
  font-weight: 700;
  /* margin: 0 0 2.5rem; */
  letter-spacing: 0.05em;
}

.common-title03 {
  font-size: 1.625rem;
  /* line-height: 1.666; */
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding-left: 1rem;
  border-left: 5px solid var(--color01);
}

.box01 {
  /* margin: 3.75rem auto; */
  margin: 0 auto;
  padding: 6.25rem 0;
  /* padding: 6.25rem 4.375rem; */
  border-radius: var(--border-radius);
  width: 100%;
  /* max-width: var(--width-md); */
  box-sizing: border-box;
}

#page-header + .box01 {
  padding-top: 0;
}

.inbox01 {
  border-radius: var(--border-radius);
  padding: 2.1875rem;
}

.bg01 {
  background: var(--box-color);

  .tbl01 {
    --box-color: var(--box-color-inner);
  }

  .bg01 {
    background: var(--box-color-inner);
  }
}

.bg02 {
  color: #fff;
  background: var(--gradient01);

  .common-title01 small {
    color: #fff;
  }

  .btn {
    background: #fff;
    color: var(--link-color);
    transition: 0.3s ease;

    &:hover {
      background: #edf6f5;
    }
  }
}

.video {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.layout01 + .layout01,
.layout01 + .layout02,
.layout02 + .layout01,
.layout02 + .layout02 {
  border-top: 1px solid currentColor;
  margin-top: 5rem;
  padding-top: 5rem;
}

.layout01 {
  display: grid;
  gap: 0 3.125rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  align-content: start;
  /* grid-template-rows: [line-start] repeat(auto-fit, minmax(0, 1fr)) [line-end]; */
  /* grid-template-rows: repeat(auto-fit, minmax(0, 1fr)); */
}

.layout03 + .layout03 {
  border-top: 1px solid #ccc;
  margin-top: 5rem;
  padding-top: 5rem;
}

.layout01 > * {
  grid-column: 1 / 2;
}

.layout01 > figure {
  height: fit-content;
  grid-column: 2 / 3;
  grid-row: 1 / -1;
}

.layout01 > figure.layout01-figure__fixed {
  top: 4.375rem;
  position: sticky;
}

.layout01 figure img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

.layout01 > figure:has(figure) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;

  > figure {
    width: 100%;
    height: 27.125rem;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--border-radius);
    }

    &:last-of-type {
      margin-top: 2.8125rem;
    }
  }
}

/* .layout01__content {
  margin-top: 2.5rem;
} */

.layout01 .btn {
  margin: 3.75rem 0 0;
}

.layout01__content,
.layout02__content {
  p + p {
    margin-top: 1em;
  }
}

.layout02 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3.125rem 5rem;

  .layout02__full {
    grid-column: 1 / -1;
    /* margin: 3.125rem 0; */
  }

  a:has(>img),
  figure img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    overflow: hidden;
  }
}

.tbl01 {
  display: block;
  border-radius: var(--border-radius);
  overflow: hidden;

  tbody {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px;

    tr {
      display: grid;
      grid-column: 1 / 3;
      grid-template-columns: subgrid;

      > * {
        font-weight: 400;
        background: var(--box-color);
        padding: 0.9rem 1.875rem;
      }
    }
  }

  /* @media screen and (max-width: 1023px) {
      tbody {
    display: flex;
    flex-direction: column;
      }
  } */

}

.tbl01__caption {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.05em;
  margin-bottom: 1em;
}


.tbl02 {
  /* display: block; */
  border-radius: var(--border-radius);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 3px;
  border: 0;
  width: calc(100% + 6px);
  margin: 0 -3px;

  th, td {
    padding: 0.75rem 1rem;
    text-align: center;
    vertical-align: middle;
  }

  th {
    color: #fff;
    font-weight: 400;
    background: var(--color01);
    white-space: nowrap;
  }

  > * {
    font-weight: 400;
    background: var(--box-color);
    padding: 0.9rem 1.875rem;
  }
}

.dl01 {
  background: var(--box-color01);
  border-radius: var(--border-radius);
  padding: 1.875rem;

  dt, dd {
    display: block;
  }

  dt {
    color: var(--color01);
  }

  dt + dd {
    margin-top: 0.3125rem;
  }

  + .dl01 {
    margin-top: 1rem;
  }
}

p + .dl01 {
  margin-top: 2.25rem;
}

.dl02 {
  display: flex;

  dt {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color01);

    small {
      display: block;
      font-size: 1rem;
      font-weight: 400;
      color: var(--body-text-color);
    }
  }
}

.dl03 {
  display: flex;
  width: fit-content;
  gap: 2rem;

  dt {
    font-weight: 400;
  }

  > div {
    display: block;
  }
}

.ul01 {
  display: flex;
  flex-direction: column;
  margin-top: 5rem;

  li {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    box-sizing: border-box;
    line-height: 1.6;
    padding: 1.154em 0;
    letter-spacing: 0.05em;
  }

  li + li {
    border-top: 2px solid var(--border-color);
  }
}

.ul02 {
  display: block;
  margin-left: 1em;

  li {
    display: grid;
    grid-template-columns: 1.5em 1fr;
    align-items: center;
    line-height: 1.5;

    &::before {
      content: "";
      display: block;
      margin-top: 0.1875em;
      /* box-sizing: content-box; */
      width: 0.8125em;
      height: 0.8125em;
      background: var(--color01);
    }
  }
}

.common-title01 + .ul01 {
  margin-top: -1.875rem;
}

.ol01 {
  li {
    counter-increment: number;
    display: grid;
    grid-template-columns: 2rem auto;
    gap: 0 1.25rem;
    padding: 1.25rem 0;

    &::before {
      content: counter(number, decimal-leading-zero) '.';
    }

    > small {
      grid-column: 2 / 3;
      line-height: 1.57;
      font-size: 0.875em;
      margin-top: 0.5rem;
    }

    + li {
      border-top: 1px solid var(--border-color);
    }
  }
}

.main-visual {
  width: var(--width-lg);
  border-radius: var(--border-radius);
  aspect-ratio: 1420 / 460;
  overflow: hidden;

  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

@media screen and (max-width: 768px) {
  .main-visual {
    /* aspect-ratio: 1 / 1; */
    aspect-ratio: auto;
  }
}

.content-list {
  width: 100%;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;

  > div {
    color: var(--body-text-color);
    background: #fff;
    border-radius: var(--border-radius);
    /* grid-column: 2 / 3; */
    min-height: 10.625rem;
    padding: 2rem 2rem 2rem 5rem;
    position: relative;
    overflow: hidden;
    z-index: 1;

    &:has(>a) {
      padding: 0;
    }

    > a {
      padding: 2rem 2rem 2rem 5rem;
      min-height: 5rem;

      &:has(span) {
        padding: 0;

        span {
          padding: 2rem 2rem 2rem 5rem;
        }
      }
    }

    a {
      font-size: 1.625rem;
      font-weight: 700;
      color: var(--link-color);
      display: flex;
      align-items: center;
      /* justify-content: center; */
      height: 100%;

      &::after,
      &:has(span) span::after {
        content: "";
        display: inline-block;
        border-style: solid;
        border-top: 0.4em solid transparent;
        border-bottom: 0.4em solid transparent;
        border-left: 0.8em solid currentColor;
        border-right: 0;
        margin-left: 0.5em;
        transition: 0.3s ease;
        margin-top: 0.2em;
      }

      &:has(span) {
        span {
          position: absolute;

          display: block;
        }

        &::after {
          display: none;
        }
      }

      &:hover {
        color: var(--hover-color);
        background-color: #edf6f5;

        &::after {
          translate: 50% 0;
        }
      }

      &:has(img) {
        color: #fff;
      }

      img {
        display: block;
        position: static;
        /* position: absolute; */
        width: 100%;
        height: 100%;
        object-fit: cover;
        inset: 0;
        z-index: -2;
      }
    }
  }

  .content-officer {
    grid-column: 1 / 3;
    height: 23.125rem;

    @media screen and (max-width: 1023px) {
      height: auto;
    }
  }

  .content-search {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3;
    padding: 3.125rem;
    text-align: center;
    position: relative;

    form {
      /* width: fit-content; */
      margin: 0 auto;
    }

    /* .sponsors & {
      form{
        width: fit-content;
      }
    } */

    .title {
      text-align: center;
      color: var(--color01);
      font-size: 1.25rem;
      font-weight: 700;

      #page-header & {
        font-size: 1.25rem;
      }
    }

    dl {
      font-size: 1.25rem;
      display: grid;
      grid-template-columns: 7em auto;
      gap: 1.25rem;
      align-items: center;
      /* margin: 1.875rem auto; */
      margin: 1.875rem auto 0;
      /* width: fit-content; */
      width: 100%;
      max-width: 43.75rem;
      text-align: left;

      dt {
        font-weight: 400;

        &.visibility-hidden {
          height: 0;
        }
      }

      @media screen and (max-width: 768px) {
        dd {
          width: 100%;
        }
      }
    }

    .buttons {
      display: flex;
      justify-content: flex-start;
      gap: 1rem;

      @media screen and (max-width: 768px) {
        flex-direction: column;

        > button {
          width: 100% !important;
        }
      }
    }

    button {
      width: 10rem;
      text-align: center;
      /* margin-inline: auto; */
      display: inline-block;
      color: #fff;
      padding: 0.5rem;
      box-sizing: border-box;
      font-weight: 700;
      background: var(--link-color);
      border-radius: var(--border-radius-sm);
      /* margin: 0 1rem; */
    }

    #search-button {
      padding-left: 1rem;
    }

    #search-button::after {
      display: inline-block;
      vertical-align: -0.4em;
      content: "";
      width: 1.5625em;
      height: 1.5625em;
      background: currentColor;
      --mask: url("../img/svg_search.svg");
      -webkit-mask-image: var(--mask);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-image: var(--mask);
      mask-repeat: no-repeat;
      mask-size: contain;
      margin-left: 0.25em;
    }

    #search-clear {
      color: var(--body-text-color);
      background: #eee;
      width: 6rem;
      font-size: 0.9rem;
    }
  }
}

/* a {
  line-height: 1;
} */

a:hover {
  transition: 0.3s ease;
}

img {
  vertical-align: bottom;
}

@media screen and (max-width: 768px) {
  img {
    width: 100%;
    height: auto;
  }
}

.text-left {
  text-align: left !important
}

.text-right {
  text-align: right !important
}

.text-center {
  text-align: center !important
}

.text-center-block {
  text-align: left !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: fit-content;
}

.text-entry-closed {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 1em;
}

.text-indent01 {
  padding-left: 1em;
  text-indent: -1em;
}

@media screen and (max-width: 768px) {
  .text-left-sp {
    text-align: left !important;
  }
}

a.text-link01 {
  text-decoration: underline;
  text-underline-offset: 2px;
  /* color: var(--body-text-color); */
  color: var(--link-color);
}

a.text-link01:hover {
  color: var(--hover-color);
}

a.text-link01[target='_blank']::after {
  content: "";
  display: inline-block;
  vertical-align: -0.4em;
  content: "";
  width: 1.5625em;
  height: 1.5625em;
  background: currentColor;
  --mask: url("../img/svg_external_link.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
  margin-right: 0.25em;
}

a.btn,
.btn a,
button.btn {
  display: inline-block;
  border-radius: var(--border-radius);
  background: var(--link-color);
  color: #fff;
  padding: 1.5625rem 4.375rem;
  box-sizing: border-box;
  line-height: 1;
  width: fit-content;
  position: relative;
  transition: 0.3s ease;

  @media screen and (max-width: 1023px) {
    padding: 1.5625rem;
  }
}

button.btn {
  min-width: 225px
}

/* a.btn.btn-before,
.btn.btn-before a,
button.btn.btn-before {
  text-align: center;
} */
/* 
a.btn.btn-lg,
.btn.btn-lg a,
button.btn.btn-lg {
  min-width: 270px;
  padding: 20px 15px;
  font-size: 16px;
} */

a.btn:not([class*='btn-ico'])::after,
.btn:not([class*='btn-ico']) a::after,
button.btn:not([class*='btn-ico'])::after {
  content: "";
  display: inline-block;
  border-style: solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid currentColor;
  border-right: 0;
  margin-left: 20px;
  transition: 0.3s ease;
  vertical-align: 0.1em;
}

a.btn[class*='btn-ico']::before,
.btn[class*='btn-ico'] a::before,
button.btn[class*='btn-ico']::before {
  content: "";
  display: inline-block;
  vertical-align: -0.4em;
  content: "";
  width: 1.5625em;
  height: 1.5625em;
  background: currentColor;
}

a.btn-ico-web::before,
.btn-ico-web a::before,
button.btn-ico-web::before {
  --mask: url("../img/svg_web.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
  margin-right: 0.25em;
}

a.btn-ico-map::before,
.btn-ico-map a::before,
button.btn-ico-map::before {
  --mask: url("../img/svg_map.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
  margin-right: 0.25em;
}

a.btn-ico-mail::before,
.btn-ico-mail a::before,
button.btn-ico-mail::before {
  --mask: url("../img/svg_mail.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
  margin-right: 0.25em;
}

a.btn-back::after,
.btn-back a::after,
button.btn-back::after {
  display: none !important;
}

a.btn-back::before,
.btn-back a::before,
button.btn-back::before {
  content: "";
  display: inline-block;
  border-style: solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 10px solid currentColor;
  border-left: 0;
  margin-right: 20px;
  vertical-align: 0.1em;
  /* transition: 0.3s ease; */
}

a.btn:hover,
.btn a:hover,
button.btn:hover {
  background-color: #0c916e;
}

a.btn.btn-outline,
.btn.btn-outline a,
button.btn.btn-outline {
  background: #fff;
  border: 1px solid var(--link-color);
  color: var(--link-color);
}

a.btn.btn-outline:hover,
.btn.btn-outline a:hover,
button.btn.btn-outline:hover {
  background: var(--link-color);
  border: 1px solid var(--link-color);
  color: #fff;
}

/* ----- .front ----- */
.front .hero {
  margin: 0 auto;
  width: 100%;
  /* max-width: 1500px; */
  /* padding: 0 2.5rem 2.5rem; */
  padding: 0 0 2.5rem;
  height: auto;
  aspect-ratio: 1420 / 610;
  box-sizing: border-box;
  position: relative;
}

.front .hero.swiper > p {
  position: absolute;
  inset: 0 auto 0 8.75rem;
  margin: auto 0;
  display: block;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.225;
  letter-spacing: 0.05em;
  z-index: 2;
  height: fit-content;
  translate: 0 -2.5rem;
}

.front .hero .swiper-wrapper {
  border-radius: var(--border-radius);
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.front .hero .swiper-slide {
  width: 100%;
  height: 100%;
  max-width: 100%;
}

.front .hero .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.front .introduction {
  position: relative;
  /* width: 1280px; */
  /* margin: -6.875rem 6.875rem; */
  margin: -6.875rem auto;
  border-radius: var(--border-radius);
  /* padding: 4.375rem; */
  padding: 4.375rem 0 6.375rem;
  max-width: 80rem;
  /* max-width: var(--width-md); */
  /* box-sizing: content-box; */
  background: #fff;
  z-index: 1;
}

.front .introduction ul {
  display: flex;
  flex-direction: column;
  margin-top: 5rem;
}

.front .introduction li {
  display: block;
}

.front .introduction li a {
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
  position: relative;
  box-sizing: border-box;
  border-bottom: 2px solid var(--border-color);
  line-height: 1;
  padding: 1.154em 0;
  letter-spacing: 0.05em;
}

.front .introduction li a::before {
  position: absolute;
  content: "";
  display: block;
  inset: auto auto -0.083em 0;
  width: 1em;
  height: 0.083em;
  background: var(--link-color);
  transition: 0.3s ease;
}

.front .introduction li a:hover {
  color: var(--link-color);
}

.front .introduction li a:hover::before {
  width: 100%;
}

.front .introduction li a::after {
  position: absolute;
  content: "";
  display: block;
  inset: 0 0 0 auto;
  margin: auto 1.25rem auto 0;
  width: 0.625rem;
  height: 1.125rem;
  background: var(--link-color);
  --mask: url("../img/svg_arrow01.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
  transition: 0.3s ease;
}

.front .introduction li a:hover::after {
  margin: auto 0.5rem auto 0;
}

/* .front .introduction h3 {
  font-size: 1.875rem;
  line-height: 1.666;
  font-weight: 700;
  margin: 0 0 2.5rem;
  letter-spacing: 0.05em;
} */

.front .news-list {
  /* padding: calc(6.875rem + 6.25rem) 8.75rem 6.25rem; */
  padding-top: calc(6.875rem + 6.25rem);
  margin-top: 0;
  margin-bottom: 3.75rem;
}

.front .news-list > div + div {
  margin-top: 3.125rem;
}

/*----- news/products-news single -----*/
#main .content .thumbnail {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}

#main .content .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#main .content .post-tl {
  font-size: 1.625rem;
  font-weight: 700;
  margin: 1.875rem 0;
  line-height: 1.5;
}

#main .content p + p {
  margin-top: 1em;
}

.news.single,
.products-news.single {
  .wrapper > .container {
    display: grid;
    grid-template-columns: auto 17.75rem;
    gap: 5rem;

    .tbl01 + .btn {
      margin-top: 1.25rem;
    }

    @media screen and (max-width: 1023px) {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .side {
      background: var(--box-color02);
      border-radius: var(--border-radius);
      padding: 4.375rem 2rem;
      margin-bottom: auto;
    }
  }

  .supporter-name {
    font-size: 1.625rem;
    font-weight: 400;
    border-left: 0.375rem solid currentColor;
    padding-left: 1rem;
    margin-top: -0.625rem;
  }

  .post-info {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    /* margin-top: 1.5rem; */

    .cats {
      width: fit-content;
    }

    time {
      width: fit-content;
    }
  }

  .thumbnail {
    margin: 3.125rem 0;
  }

  .side__categires {
    dt {
      font-weight: 400;
      margin-bottom: 1.875rem;

      small {
        font-size: 1rem;
        font-weight: 700;
        color: var(--color01);
        margin-right: 1rem;
      }
    }

    dd {
      ul {
        display: flex;
        flex-direction: column;
        border-top: 1px solid #ccc;

        li {
          display: block;
          border-bottom: 1px solid #ccc;

          a {
            display: block;
            padding: 1.25rem 0;

            &:hover {
              color: var(--hover-color);
            }
          }
        }
      }

    }
  }

  .content .btn-back:last-child {
    margin-top: 5.125rem;
  }
}


/*----- searchbox -----*/
main .searchbox .screen-reader-text {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  border: 0;
}

main .searchbox form > div {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr auto;
  align-items: center;
  gap: 1rem;

  @media screen and (max-width: 1023px) {
    grid-template-columns: auto;
    grid-template-rows: repeat(3, auto);
    /* grid-template-rows: repeat(auto-fit, minmax(0, 1fr)); */
    align-items: stretch;
  }
}

main .searchbox input[type="text"] {
  width: 100%;
}

main .searchbox #searchsubmit {
  color: #fff;
  background: var(--link-color);
  border-radius: var(--border-radius);
  height: 100%;
  min-width: 10rem;
  text-align: center;
  box-sizing: border-box;

  @media screen and (max-width: 1023px) {
    & {
      padding: 0.75rem;
    }
  }
}

main .searchbox #searchsubmit::after {
  display: inline-block;
  vertical-align: -0.4em;
  content: "";
  width: 1.5625em;
  height: 1.5625em;
  background: currentColor;
  --mask: url("../img/svg_search.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
  margin-left: 0.25em;
}

main .searchbox #searchsubmit:hover {
  background: var(--hover-color);
}

/*----- schedule -----*/
.schedule-link {
  display: flex;
  gap: 3px;
  /* border-radius: var(--border-radius) var(--border-radius) 0 0; */
  border-radius: var(--border-radius);
  overflow: hidden;
  margin: 3.125rem 0 0;

  > li {
    flex: 1;
    display: block;
    /* background: var(--box-color); */

    a {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
      color: var(--body-text-color);
      font-weight: 700;
      padding: 1.875rem 2rem;
      position: relative;
      transition: 0.3s ease;
      background: var(--box-color);
      transition: 0.3s ease;

      /* &::before{
        inset: auto 0 0;
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        height: 3px;
        background: currentColor;
        opacity: 0;
        transition: 0.3s ease;
      } */
      &::before {
        /* position: absolute; */
        content: "";
        display: inline-block;
        /* inset: 0 0 0 auto; */
        /* margin: auto 1.25rem auto 0; */
        /* margin: 1em; */
        width: 0.375rem;
        height: 0.625rem;
        width: 0.5em;
        height: 0.75em;
        background: currentColor;
        --mask: url("../img/svg_arrow01.svg");
        -webkit-mask-image: var(--mask);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-image: var(--mask);
        mask-repeat: no-repeat;
        mask-size: contain;
        margin: 0 1em 0 0;
        transition: 0.3s ease;
      }

      &.open,
      &:hover {
        color: var(--hover-color);
      }

      &.open {
        &::before {
          rotate: 90deg;
          margin: 0 1em 0 0;
        }
      }
    }
  }

  @media screen and (max-width: 1023px) {
    & {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 5px;
      margin-top: 20px;

      > li a {
        padding: 1rem;
        border-radius: var(--border-radius);
      }
    }
  }
}

.tbl-schedule-outer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;

  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0 0 0;
    z-index: 5;
    transition: 0.3s ease;
    pointer-events: none;
  }

  &::before {
    width: 100%;
    height: 100%;
    background: var(--box-color-inner);
    opacity: 0;
  }

  /*
    &::after {
      margin: auto;
      opacity: 0;
      z-index: 21;
      pointer-events: none;
      border-top: 3px solid var(--link-color);
      border-left: 3px solid var(--link-color);
      border-right: 3px solid rgba(255, 255, 255, 0);
      border-bottom: 3px solid rgba(255, 255, 255, 0);
      border-radius: 50%;
      width: 3rem;
      height: 3rem;
      pointer-events: none;
    }*/

  &.loading {
    &::before {
      opacity: 1;
      pointer-events: auto;
    }

    /*
      &::after {
        opacity: 0.75;
        animation: loading 1.0s both;
        animation-iteration-count: 1;
        pointer-events: auto;
      }*/
  }

  /* .common-title01{
  display: none;
} */
  > * {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background: var(--box-color-inner);
    z-index: 1;
    height: 0;

    &.open {
      z-index: 2;
      height: auto;
    }
  }
}

/*
.member-only {
  .tbl-schedule-outer {
    > *{
      background: var(--box-color-inner);
    }
  }
}*/

.tbl-schedule-wrapper {
  /* padding: 0 0 3.125rem; */
  padding: 3.125rem 0;
  overflow: hidden;
}

.tbl-schedule-wrapper p {
  margin: 1rem 0;
}

.tbl-schedule-wrapper .table-wrapper {
  /* margin: 0; */
  margin: 2.5rem 0 0 0;
  border-radius: var(--border-radius);
  /* border-radius: 0 0 var(--border-radius) var(--border-radius); */
  overflow: hidden;

}

.tbl-schedule-wrapper table {
  border-collapse: separate;
  /* border-radius: var(--border-radius); */
  /* border-radius: calc(var(--border-radius) + 0.375rem); */
  border-spacing: 3px;
  overflow: hidden;
  width: 100%;
  width: calc(100% + 6px);
  /* margin: 2.5rem -3px 0 -3px; */
  margin: -3px;
  border: 0;

  th, td {
    font-weight: 400;
    vertical-align: middle;
    white-space: nowrap;
  }

  th {
    color: #fff;
    background: #1f8b6c;
    text-align: center;
    padding: 0.5rem;
    /* &:first-of-type{
      border-top-left-radius: var(--border-radius);
    }
    &:last-of-type{
      border-top-right-radius: var(--border-radius);
    } */
  }

  td {
    background: var(--box-color);
    padding: 0.5rem 1.25rem;
  }

  tr:has(td[rowspan]) td:first-of-type,
  tr:has(td[rowspan]) td:nth-of-type(5),
  tr:not(:has(td[rowspan])) td:nth-of-type(4) {
    text-align: center;
  }

  /* tr:last-of-type td{
    &:first-of-type{
      border-bottom-left-radius: var(--border-radius);
    }
    &:last-of-type{
      border-bottom-right-radius: var(--border-radius);
    }
  } */
}

/*----- card-list  -----*/
#search-card-result {
  position: relative;
  width: fit-content;

  &::before,
  &::after {
    content: "｜";
  }

  em {
    font-style: normal;
  }
}

.sponsors .card-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.features {
  ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    gap: 0 1.25rem;

    > li {
      counter-increment: feature;
      position: relative;
      flex: 1;
      padding: 1.875rem;
      background: var(--box-color);
      border-radius: var(--border-radius);
      overflow: hidden;
      display: grid;
      grid-row: 1 / 3;
      grid-template-rows: subgrid;

      &::before {
        content: counter(feature);
        /* display: flex; */
        align-items: center;
        justify-content: center;
        position: absolute;
        inset: 0 auto auto 0;
        font-size: 1.625rem;
        font-weight: 700;
        color: #fff;
        background: var(--gradient01);
        width: 5.375rem;
        height: 5.375rem;
        padding: 1rem;
        box-sizing: border-box;
        clip-path: polygon(0 0, 0% 100%, 100% 0);
      }

      .title {
        text-align: center;
        color: var(--color01);
        font-size: 1.625rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        margin: 0 0 2rem;
        grid-row: 1 / 2;
        display: flex;
        flex-direction: column;
        justify-content: center;

        small {
          display: block;
          font-size: 1rem;
          font-weight: 400;
          background: #fff;
          margin-inline: auto;
          width: fit-content;
          min-width: 8.125rem;
          padding: 0 1rem;
          margin-bottom: 1rem;
        }

        /* span{
          margin: auto;
        } */
      }

      .text {
        grid-row: 2 / 3;
      }
    }
  }

  @media screen and (max-width: 1023px) {
    ol {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
  }

}

.varieties-title {
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-bottom: 0.75rem;

  &::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    margin-right: 0.25em;
    vertical-align: -0.15em;
    border-radius: 3px;
  }
}

.varieties {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;

  @media screen and (max-width: 1023px) {
    font-size: 14px;
  }

  li {
    display: block;
    background: var(--box-color);
    color: var(--color01);
    border-radius: var(--border-radius-sm);
    padding: 0.625em 1.25em;
    line-height: 1.25;
    box-sizing: border-box;
    display: block;
    width: fit-content;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.05em;
  }
}

.card {
  .varieties li {
    background: #fff;
    color: var(--color01);
  }
}

.card-list {
  padding: 2rem 0 0;
  /* padding: 2rem 0 6.25rem; */
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  position: relative;
  /*
  &::before {
    content: "";
    display: block;
    position: absolute;
    inset: 5% 0 0;
    margin: 0 auto auto;
    opacity: 0;
    z-index: 21;
    pointer-events: none;
    border-top: 3px solid var(--link-color);
    border-left: 3px solid var(--link-color);
    border-right: 3px solid rgba(255, 255, 255, 0);
    border-bottom: 3px solid rgba(255, 255, 255, 0);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
  }

  &.loading::before {
    animation: loading 1s both;
  }*/



  /* 会員・賛助会員一覧共通 */
  .card {
    &.hidden {
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: height 1.0s ease, opacity 1.0s ease, transform 1.0s ease;
    }

    &.is-gone {
      display: none;
      height: 0;
      transition: height 1.0s ease, opacity 1.0s ease, transform 1.0s ease;
    }
  }
}

.link-list01 {
  display: flex;
  gap: 5px;

  > * {
    flex: 1;
    text-align: center;
    text-indent: -0.75rem;
  }

  b {
    font-size: 1.25rem;
    font-weight: 700;
    display: block;
    margin: 0.25em auto 0.5em;
  }

  a:has(b).btn[class*="file-"] {
    text-indent: 0;
    font-weight: 700;

    &::before {
      margin-right: 0;
      display: block;
      margin-inline: auto;
    }
  }

  @media screen and (max-width: 768px) {
    flex-direction: column;

    > * {
      width: 100% !important;
      box-sizing: border-box;
      max-width: none !important;
    }
  }
}

.members.single .link-list01 {
  a {
    max-width: 19.875rem;
  }
}

.link-list02 {
  display: flex;
  gap: 1.25rem;
  width: fit-content;

  > * {
    flex: 1;
    text-align: center;
  }

  b {
    font-size: 1.25rem;
    font-weight: 700;
    display: block;
    margin: 0.25em auto 0.5em;
  }

  a.btn[class*="file-"] {
    text-indent: 0;
    font-weight: 700;
    padding: 1.875rem 1.25rem;

    &::before {
      margin-right: 0;
      display: block;
      margin-inline: auto;
    }
  }
}

.link-list03 {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;

  > * {
    flex: 1;
    line-height: 1;

    + li {
      border-left: 1px solid currentColor;
    }

    a {
      white-space: nowrap;
      padding: 0 1.5625rem;

      &::after {
        display: inline-block;
        content: "";
        width: 0.75em;
        height: 0.75em;
        background: currentColor;
        vertical-align: baseline;
        margin-left: 0.5em;
        clip-path: polygon(50% 100%, 0 0, 100% 0);
      }

      &:hover {
        color: var(--hover-color);
      }
    }
  }
}

.faq-list {
  dl {
    background: var(--box-color02);
    border-radius: var(--border-radius);
    padding: 1.25rem 2.5rem;

    + dl {
      margin-top: 1.25rem;
    }

  }

  i {
    color: var(--color01);
    text-transform: uppercase;
    font-style: normal;
    text-align: center;
  }

  dt {
    border-bottom: 1px solid var(--color01);
  }

  dt, dd {
    font-weight: 400;
    padding: 1.25rem 0;
    display: grid;
    /* grid-template-columns: 3.125rem auto; */
    grid-template-columns: 2rem auto;
    gap: 0 1.125rem;
  }
}

.number-list01 {
  display: flex;
  gap: 1.125rem;
  width: 100%;
  padding-top: 2.75rem;

  li {
    counter-increment: number;
    flex: 1;
    border-radius: var(--border-radius);
    background: #fff;
    padding: 5rem 1.875rem 1.875rem;
    position: relative;

    &::before {
      content: counter(number);
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      inset: 0 0 auto;
      margin: 0 auto;
      font-size: 1.625rem;
      font-weight: 700;
      color: #fff;
      background: var(--color01);
      width: 3.4615em;
      height: 3.4615em;
      box-sizing: border-box;
      border-radius: 100vh;
      translate: 0 -50%;
    }

    .title {
      font-size: 1.625rem;
      font-weight: 700;
      color: var(--color01);
      line-height: 1.538;
      text-align: center;
      letter-spacing: 0.05em;
      margin-bottom: 2rem;
    }
  }
}

.step-list01 {
  display: flex;
  color: #fff;
  background: var(--color01);
  border-radius: var(--border-radius);
  padding: 3.75rem 2.5rem;

  > li {
    flex: 1;
    text-align: center;
    font-weight: 700;
    line-height: 1.375;

    b {
      font-size: 1.25rem;
      letter-spacing: 0.1rem;
    }

    p {
      text-align: center;
    }

    figure {
      width: 6.25rem;
      height: 6.25rem;
      border-radius: 100vh;
      background: #fff;
      margin: 1rem auto;

      img {
        max-width: 100%;
        height: auto;
      }
    }

    + li {
      border-left: 1px solid currentColor;
    }
  }
}

.block-list01 {
  display: flex;
  gap: 1.125rem;
  width: 100%;

  li {
    counter-increment: number;
    flex: 1;
    display: flex;
    border-radius: var(--border-radius);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.538;
    color: #fff;
    background: var(--color01);
    height: 13.3125rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.05em;
  }
}

/* 会員一覧 */
.members,
.job-search {

  /*
  .content-search{
    dl {
      gap: 0;
      dt{
        width: 9.125rem;
      }
    }
    .buttons{
      justify-content: flex-start;
      margin-left: 9.125rem;
    }
  }*/
  .card {
    /* padding: 1.25rem; */
    padding: 0;
    border-radius: var(--border-radius);
    background: var(--box-color);
    opacity: 1;
    transform: translateY(0);
    transition: height 1.0s ease, opacity 1.0s ease, transform 1.0s ease;

    > a {
      display: grid;
      padding: 2.5rem 2rem;
      grid-template-columns: 22.5rem auto;
      gap: 2.375rem;
      transition: 0.3s ease;
      box-sizing: border-box;
      position: relative;

      &::before {
        border: 0px solid transparent;
        border-radius: var(--border-radius);
        inset: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        content: "";
        display: block;
        pointer-events: none;
        transition: 0.3s ease;
      }

      &:hover {
        &::before {
          border: 2px solid var(--link-color);
        }

        .card-title {
          color: var(--link-color);
        }
      }

      > .card-body {
        align-self: center;
      }

      > figure {
        align-self: flex-start;
        background: #fff;
        overflow: hidden;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 360 / 236;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    .card-title {
      font-size: 1.25rem;
      font-weight: 700;
      border-bottom: 1px solid currentColor;
      padding-bottom: 1.25rem;
      margin-bottom: 1.25rem;
      transition: 0.3s ease;

      &:has(em) {
        font-size: 1.625rem;
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
      }

      small {
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        background: var(--color01);
        border-radius: var(--border-radius-sm);
        min-width: 12.5rem;
        /* margin-bottom: 0.25rem; */
        padding: 0.625rem 0;
        box-sizing: border-box;
        display: block;
        width: fit-content;
        text-align: center;
      }

      em {
        display: block;
        font-style: normal;
        position: relative;
        width: fit-content;
        padding: 0.9rem 1.5rem 1.1rem 0;
        line-height: 1.5;

        &::after {
          position: absolute;
          content: "";
          display: block;
          inset: 0 0 0 auto;
          background: var(--link-color);
          margin: auto 0;
          width: 0.75rem;
          height: 1.25rem;
          --mask: url("../img/svg_arrow01.svg");
          -webkit-mask-image: var(--mask);
          -webkit-mask-repeat: no-repeat;
          -webkit-mask-size: contain;
          mask-image: var(--mask);
          mask-repeat: no-repeat;
          mask-size: contain;
        }

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

}

/* 賛助会員一覧 */
.sponsors {
  .card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card {
    padding: 1.25rem;
    border-radius: var(--border-radius);
    background: var(--box-color);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.0s ease, transform 1.0s ease;

    .card-title {
      font-size: 1.25rem;
      font-weight: 700;
      border-bottom: 1px solid currentColor;
      padding-bottom: 1.25rem;
      margin-bottom: 1.25rem;
    }

    figure {
      width: 6.25rem;
      margin-bottom: 1rem;
      aspect-ratio: 100 / 48;
      overflow: hidden;
      border-radius: var(--border-radius-sm);

      &:has(.blank-logo) {
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .blank-logo {
        max-width: 5rem;
      }

      img {
        width: 100%;
        max-width: 100%;
        height: auto;
        /* &.blank-logo{
          width: auto;
        } */
      }
    }

    dl {
      display: grid;
      grid-template-columns: 5em auto;
      gap: 0.25rem 0.25rem;

      dt, dd {
        font-weight: 400;
        line-height: 1.5;
      }

      dd p {
        line-height: 1.5;

        & + p {
          margin-top: 0.1rem;
        }
      }
    }
  }
}

@keyframes loading {
  0% {
    /* opacity: 0; */
    transform: rotate(0);
  }

  25% {
    transform: rotate(180deg);
  }

  50% {
    /* opacity: 1; */
    transform: rotate(360deg);
  }

  75% {
    transform: rotate(540deg);
  }

  100% {
    /* opacity: 0; */
    transform: rotate(720deg);
  }
}

.blank-logo {
  width: auto !important;
  height: auto !important;
  max-width: 11.25rem;
}

.members.single main {

  .main-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 2.5em;
    margin-bottom: 1.2em;
    line-height: 1.4;

    small {
      display: block;
      font-size: 1.625rem;
      font-weight: 700;
      margin-bottom: 0.61538em;
    }
  }

  .catch {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 1em 0 0;
    line-height: 1.4;
  }

  .image-main {
    aspect-ratio: 1140 / 590;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    &:has(.blank-logo) {
      border: 1px solid #333;
    }

    > img.img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .data {
    display: grid;
    grid-template-columns: 1fr 28.75rem;
    gap: 2.5rem;
    margin-top: 5rem;

    > div {
      grid-row: 1 / 2;
      grid-column: 1 / 2;
    }

    *:first-child:last-child {
      grid-column: 1 / 3;
    }
  }

  .image-sub {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    aspect-ratio: 460 / 290;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    &:has(.blank-logo) {
      border: 1px solid #333;
    }

    > img.img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .item-title {
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin-top: 6.25rem;
    margin-bottom: 1.5rem;
    color: var(--color01);

    &::before {
      content: "";
      display: inline-block;
      width: 1em;
      height: 1em;
      background: currentColor;
      margin-right: 0.25em;
      vertical-align: -0.15em;
      border-radius: 3px;
    }
  }

  p + .tbl01 {
    margin-top: 2rem;
  }

  .tbl01 {
    margin: 0 0 2rem;

    tbody {
      grid-template-columns: 10rem auto;
    }
  }

  @media screen and (max-width: 1023px) {
    .data {
      display: flex;
      flex-direction: column;
      margin-top: 1rem;
      gap: 1rem;

      .item-title {
        margin-top: 4rem;
        margin-bottom: 0.75rem;
      }
    }

    .item-title {
      margin-top: 4rem;
    }

    .features {
      margin-bottom: 0.75rem;
    }
  }

}

/*----- bottom_nav  -----*/
.bottom_nav {
  background: var(--color01);
  font-size: 1rem;
  color: #fff;
  margin-top: 8.75rem;
  margin-bottom: -8.75rem;
  padding: 1em;
}

.bottom_nav ul {
  display: flex;
  justify-content: center;
}

.bottom_nav li {
  display: block;
  position: relative;
}

.bottom_nav li + li::before {
  content: "";
  display: block;
  width: 1px;
  height: 1em;
  background: currentColor;
  position: absolute;
  inset: 0 auto 0 0;
  margin: auto 0;
}

.bottom_nav a {
  color: #fff;
  padding: 0.75em 1.5em;
  display: block;
  line-height: 1;
}

.bottom_nav {
  @media screen and (max-width: 768px) {
    padding-left: 0;
    padding-right: 0;

    ul {
      display: grid;
      /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
      grid-template-columns: 55% 45%;

      li + li::before {
        display: none;
      }

      li a {
        position: relative;

        &::before {
          position: absolute;
          content: "";
          display: block;
          inset: 0 0 0 auto;
          margin: auto 0.5rem auto 0;
          width: 0.375rem;
          height: 0.625rem;
          background: currentColor;
          --mask: url("../img/svg_arrow01.svg");
          -webkit-mask-image: var(--mask);
          -webkit-mask-repeat: no-repeat;
          -webkit-mask-size: contain;
          mask-image: var(--mask);
          mask-repeat: no-repeat;
          mask-size: contain;
          transition: 0.3s ease;
        }
      }
    }
  }
}

/*----- contact-us -----*/
.contact-us {
  padding: 3.75rem;
  text-align: center;

  .title {
    font-size: 1.25rem;
    font-weight: 700;
  }
}

/*----- footer -----*/
#footer {
  /* font-size: 0.9375rem; */
  background: #fff;
  /* position: relative; */
  border-top: 1px solid var(--color01);
}

body.front,
body.about,
body.admission {
  #main {
    padding-bottom: 0;
  }

  #footer {
    border-top: 0;
  }
}

#footer .wrapper {
  max-width: var(--width-md);
}

#footer a {
  color: var(--body-text-color);

  &:has(.logo-img) {
    transition: 0.3s ease;

    &:hover {
      opacity: 0.8;
    }
  }
}

#footer > .wrapper {
  position: relative;
  margin-bottom: 0;
  padding: 5rem 0 3.125rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

#footer .wrapper > p {
  grid-column: 1 / 3;
}

#footer .top-btn {
  position: fixed;
  display: block;
  width: 4.125rem;
  height: 4.125rem;
  border-radius: var(--border-radius);
  background-color: var(--link-color);
  background-repeat: no-repeat;
  background-position: center;
  z-index: 5;
  overflow: hidden;
  text-indent: -200%;
  right: 2.5rem;
  bottom: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
  max-width: 12.5vw;
  max-height: 12.5vw;

  @media screen and (max-width: 1023px) {
    right: 1rem;
  }
}

.scrolled #footer .top-btn {
  opacity: 1;
  pointer-events: auto;
}

#footer .top-btn::before {
  position: absolute;
  content: "";
  display: block;
  inset: 0;
  background: #fff;
  margin: auto;
  /* width: 0.75rem;
  height: 1.25rem; */
  width: 18.18%;
  height: 30.3%;
  --mask: url("../img/svg_arrow01.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
  rotate: -90deg;
}

#footer .top-btn:hover {
  background-color: var(--hover-color);
}

#footer nav:has(.footer-nav) {
  display: flex;
}

#footer ul.footer-nav {
  flex: 1;
  display: block;
  /* columns: 2;
  column-gap: 20px; */
}

#footer .footer-nav span,
#footer .footer-nav a {
  display: block;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

#footer .footer-nav a:hover {
  color: #b3b3b3;
  /* color: var(--link-color); */
}

#footer ul.footer-nav > li {
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}

#footer ul.footer-nav:last-child > li:last-child {
  margin-bottom: 0;
}

#footer ul.footer-nav > li > span {
  color: var(--color01);
  font-weight: 900;
  letter-spacing: 0.05em;
}

#footer ul.footer-nav > li > ul > li > ul > li a::before,
#footer ul.footer-nav > li > ul > li > ul > li span::before {
  content: "";
  display: inline-block;
  border-style: solid;
  border-top: 0.3125rem solid transparent;
  border-bottom: 0.3125rem solid transparent;
  border-left: 0.625rem solid currentColor;
  border-right: 0;
  z-index: 2;
  margin-right: 0.5em;
  transition: 0.3s ease;

}

#footer .global-nav-sub {
  border-radius: var(--border-radius);
  overflow: hidden;
  width: fit-content;
}

#footer .logo {
  display: block;
}

#footer .info {
  line-height: 1.5925;
}

#footer .info h2 {
  margin-top: 1.25rem;
}

#footer .info nav {
  margin-top: 2.8rem;
}

#footer .copyright {
  justify-content: space-between;
  padding: 15px;
  background: var(--box-color);
}

#footer .front-btn {
  position: fixed;
  display: block;
  width: 4.125rem;
  height: 4.125rem;
  border-radius: var(--border-radius);
  background-color: var(--link-color);
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  overflow: hidden;
  text-indent: -200%;
  right: 2.5rem;
  bottom: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
}

.scrolled #footer .front-btn {
  opacity: 1;
  pointer-events: auto;
}

#footer .front-btn::before {
  position: absolute;
  content: "";
  display: block;
  inset: 0;
  background: #fff;
  margin: auto;
  width: 0.75rem;
  height: 1.25rem;
  --mask: url("../img/svg_arrow01.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
  rotate: -90deg;
}

#footer .front-btn:hover {
  background-color: var(--hover-color);
}

/*----- main -----*/
#main {
  width: 100%;
  padding-bottom: 8.75rem;
}

body.member-only #main {
  background: var(--box-color02);
  /* background: var(--box-color); */
  /* .archive__categires {
    background: #fff;
  }
  .schedule-link li{
    background: #fff;
  } */
}

/*----- page-header -----*/
#page-header {

  /* margin-left: auto;
  margin-right: auto;
  max-width: var(--width-md); */
  &:has(.content-list) {
    color: #fff;
    background: var(--gradient01);
    margin-bottom: 3.75rem;

    .container {
      flex-direction: column;
      align-items: flex-start;
    }

    .title .en {
      color: #fff;
    }
  }

  .container {
    padding: 4.25rem 0;
    /* padding: 3.125rem 0; */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

#page-header .title {
  font-weight: 700;
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  /* gap: 1.625rem; */
  gap: 0.65em;
  font-size: 2.5rem;
}

#page-header .title .en {
  position: relative;
  font-size: 1.875rem;
  color: var(--color01);
  text-transform: uppercase;
}

#page-header .title .ja {
  display: flex;
}

#page-header .title .ja b {
  line-height: 1;
  display: block;
}

#page-header .title .search-result {
  display: flex;
  font-size: 0.75em;
  font-weight: 400;
  margin-left: 1rem;
  padding: 0.25rem 1rem;
  align-self: stretch;
  align-items: center;
  line-height: 1;
}

#page-header .content-list {
  /* width: 100%;
  display: grid;
  gap: 1rem; */
  /* margin: 6.25rem 0 3.125rem; */
  margin: 3.25rem 0 0.125rem;
  grid-template-columns: 2fr 1fr;

  > div {
    grid-column: 2 / 3;

    a {
      align-items: center;
      justify-content: center;
      padding: 0 !important;
    }
  }

  .content-search:last-child {
    grid-column: 1 / 3 !important;
  }

  .content-schedules:last-child {
    grid-row: 1 / 3;
  }
}

#page-header .content-search dl dd input {
  border: 1px solid #e6e6e6;
  border-radius: var(--border-radius-sm);
  padding: 0.625rem;
  width: 100%;
  box-sizing: border-box;

  &::placeholder {
    color: #ccc;
  }
}

/*----- breadcrumbs -----*/
.breadcrumbs {
  /* max-width: var(--width-lg); */
  margin-inline: auto;
  /* margin: 0 -0.75rem; */
  padding: 0.625rem 3.125rem;
  font-size: min(14px, 0.875rem);
  line-height: 1.5;

  span[property='name'] {
    padding: 1rem 0.75rem;
    /* display: inline-block; */
    display: inline;
  }

  @media screen and (max-width: 1440px) {
    padding-left: 0;
    padding-right: 0;
    max-width: var(--width-md);
  }

  @media screen and (max-width: 1023px) {
    /* max-width: var(--width-lg); */
    max-width: none;
  }
}

/*----- documents-list -----*/
a[class*='file-']:not(.btn) {
  display: inline-block;
  padding-left: 1.8125em;
  text-indent: -1.8125em;
}

a[class*='file-']::before {
  content: "";
  display: inline-block;
  vertical-align: -0.4em;
  content: "";
  width: 1.5625em;
  height: 1.5625em;
  background: currentColor;
  --mask: url("../img/svg_file.svg");
  -webkit-mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-size: contain;
  margin-right: 0.25em;
}

a.file-pdf::before {
  --mask: url("../img/svg_pdf.svg");
  background: #c30d23;
}

a.file-word::before {
  --mask: url("../img/svg_word.svg");
  background: #2b579a;
}

a.file-word::before {
  --mask: url("../img/svg_word.svg");
  background: #217346;
}

a.file-ppt::before {
  --mask: url("../img/svg_ppt.svg");
  background: #d24726;
}

a.file-video::before {
  --mask: url("../img/svg_video.svg");
  background: var(--color01);
}

a.file-other::before {
  --mask: url("../img/svg_file.svg");
  background: var(--color01);
}

a.btn[class*='file-']::before {
  background: currentColor;
}

a.btn[class*='file-']::after {
  display: none;
}

.members-list {
  > ul {
    margin: 2rem 0 4.125rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    border-radius: var(--border-radius);
    overflow: hidden;

    @media screen and (max-width: 1023px) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    &:has(li:first-of-type:last-of-type) {
      li a {
        border-radius: var(--border-radius);
      }
    }

    li {
      display: block;

      a {
        display: block;
        background: var(--box-color);
        padding: 0.9rem 1.875rem;
        color: var(--link-color);
        font-weight: 700;
        transition: 0.3s ease;

        &::after {
          content: "";
          display: inline-block;
          border-style: solid;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left: 10px solid currentColor;
          border-right: 0;
          margin-left: 20px;
          transition: 0.3s ease;
          vertical-align: 0.1em;
        }

        &:hover {
          background: var(--link-color);
          color: var(--box-color);

          &::after {
            translate: 50% 0;
          }
        }
      }
    }

    & + .common-title01 {
      margin-top: 3.125rem;
    }
  }

  @media screen and (max-width: 1023px) {
    .common-title01 {
      margin-bottom: 1rem;
    }

    > ul {
      margin: 1rem 0 2rem;

      li a {
        padding: 0.9rem 0.9rem;
      }
    }
  }
}

.item-list {
  a:hover {
    color: var(--hover-color);
  }
}

.documents-list {

  /* .common-title01 {
    margin-bottom: 1.1875rem;
  } */
  .tbl01 {
    tbody {
      th, td {
        display: grid;
      }

      th {
        color: var(--color01);
        font-weight: 700;
        /* width: 25rem; */
        width: 13rem;
        align-items: center;
      }

      td .item-list {
        margin: 0;
      }

      @media screen and (max-width: 1023px) {
        tr {
          grid-template-columns: 1fr;

          th {
            width: 100%;
            padding-bottom: 0;
          }

          /* td{
            padding-top: 0;
          } */
        }
      }
    }

    + .common-title01 {
      margin-top: 3.125rem;
    }
  }

  .item-list {
    li + li {
      margin-top: 0.5rem;
    }
  }

  > .item-list, table {
    /* margin: 2rem 0; */
    margin: 2rem 0 4.125rem;
    /* margin: 1.1875rem 0; */
  }

  > .item-list {
    border-radius: var(--border-radius);
    overflow: hidden;

    li {
      background: var(--box-color);
      padding: 0.9rem 1.875rem;
    }
  }
}

/*----- links-list -----*/
.links-list {

  h2 {
    font-size: 1.625rem;
    font-weight: 700;

  }

  > .item-list {
    margin: 3.125rem 0;

    + h2 {
      margin-top: 6.25rem;
    }
  }

  .item-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;

    li.max-column {
      grid-column: 1 / 4;
      margin-bottom: 0.75rem;
    }

    li {
      display: block;

      a {
        display: block;
        border-radius: var(--border-radius);
        background: var(--box-color);
        padding: 0.9rem 1.875rem;
        color: var(--link-color);
        font-weight: 700;
        transition: 0.3s ease;

        &::after {
          content: "";
          display: inline-block;
          border-style: solid;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left: 10px solid currentColor;
          border-right: 0;
          margin-left: 20px;
          transition: 0.3s ease;
          vertical-align: 0.1em;
        }

        &:hover {
          background: var(--link-color);
          color: var(--box-color);

          &::after {
            translate: 50% 0;
          }
        }
      }
    }

    @media screen and (max-width: 1023px) {
      li {
        grid-column: 1 / 4;
      }
    }

  }

  /* .item-list {
    li + li{
      margin-top: 0.5rem;        
    }
  }
  > .item-list, table {
    margin: 2rem 0;
  }
  > .item-list {
    border-radius: var(--border-radius);
  overflow: hidden;

  } */
}

.page-index {
  margin: 4.5rem 0 12rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5625rem;

  li a {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--color01);
    padding: 1.875rem 0 1.25rem;
    transition: 0.3s ease;

    &:hover {
      border-color: var(--text-hover-color);

      b, p {
        color: var(--text-hover-color);
      }
    }

    b {
      display: block;
      color: var(--color01);
      font-size: 1.625rem;
      font-weight: 700;
      position: relative;
      padding: 0.3846em 0;
      transition: 0.3s ease;

      &::after {
        position: absolute;
        content: "";
        display: block;
        inset: 0 0 0 auto;
        margin: auto 2.8125rem auto 0;
        width: 0.5rem;
        height: 0.875em;
        background: currentColor;
        --mask: url("../img/svg_arrow01.svg");
        -webkit-mask-image: var(--mask);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: var(--mask);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;

      }
    }

    p {
      letter-spacing: 0.1em;
      transition: 0.3s ease;
    }
  }
}

.coming-soon {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 18.75rem;
  font-size: 1.625rem;
  font-weight: 700;
}

/*---- admission -----*/
.admission {
  .link-list03 {
    margin-top: 9.125rem;
    margin-bottom: 3.25rem;
  }
}

/*---- contact-----*/
.contact dl dt {
  font-weight: 700;
  border-left: 0.3125rem solid currentColor;
  padding-left: 0.5em;
  line-height: 1;
}

.contact dl dd {
  padding-left: calc(0.5em + 0.3125rem);
  line-height: 1.5;
  margin-top: 0.75rem;
}

/*---- input共通-----*/
.form-content label {
  display: block !important;
}

.form-content input[type='submit'] {
  background: linear-gradient(90deg, rgb(143, 225, 228) 0%, rgb(0, 168, 212) 100%);
  padding-right: var(--wp--preset--spacing--70);
  padding-left: var(--wp--preset--spacing--70);
  border-radius: 100vh;
  color: #fff;
  text-align: center;
  font-family: var(--wp--preset--font-family--noto-sans-jp);
  margin: 1rem 0;
}

.wpcf7-form > p {
  display: grid;
  grid-template-columns: auto;
  gap: 20px;
}

@media (min-width:600px) {
  .wpcf7-form > p {
    grid-template-columns: auto 1fr;
    gap: 20px;
  }
}

/* .wpcf7 label {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
} */
.wpcf7 label {
  display: block;
}

.wpcf7 label + label {
  margin-top: 2rem;
}

.wpcf7 label b {
  color: #e50012;
}

.wpcf7 label + br {
  display: none;
}

@media (min-width:600px) {
  .wpcf7 label span:not([class]) {
    text-align: right;
  }
}

.wpcf7 label > .wpcf7-form-control-wrap {
  display: block;
}

#loginform input:not(input[type="checkbox"]):not(input[type="submit"]):not(input[type="radio"]),
.wpcf7-form input:not(input[type="checkbox"]):not(input[type="submit"]):not(input[type="radio"]),
.wpcf7-form select,
.wpcf7-form textarea {
  padding: 5px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 0;
  width: min(calc(100% - 12px), 35.625rem);
  box-sizing: content-box;
  border-radius: var(--border-radius-sm);
}

.wpcf7-form input:not(input[type="checkbox"]):not(input[type="submit"]):not(input[type="radio"]),
.wpcf7-form select,
.wpcf7-form textarea {
  margin-top: 1rem;
}

.wpcf7-form textarea {
  width: calc(100% - 12px);
}


#loginform input:not(input[type="checkbox"]):not(input[type="submit"]):not(input[type="radio"]),
.wpcf7-form input:not(input[type="checkbox"]):not(input[type="submit"]):not(input[type="radio"]),
.wpcf7-form select,
.wpcf7-form textarea {
  &:focus {
    border-color: rgba(35, 159, 123, 0.5);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(35, 159, 123, 0.1);
    /* border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); */
  }
}

.wpcf7-form select {
  width: fit-content;
  -webkit-appearance: none;
  appearance: none;
}

.wpcf7-form-control-wrap:has(> select) {
  width: fit-content;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset: 2rem 1em auto auto;
    margin: auto 0;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  select {
    padding-right: 2em;
  }
}

/* .wpcf7-form input[type="checkbox"] {
    vertical-align: text-bottom;
} */

#loginform input[type="checkbox"],
#loginform input[type="radio"],
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
  transform: scale(1.5);
  margin: 0 6px 0 0;
  -webkit-appearance: auto;
  appearance: auto;
  vertical-align: baseline;
}

#loginform input[type="submit"],
.wpcf7-form button[type="submit"] {
  display: block;
  border-radius: var(--border-radius);
  background: var(--link-color);
  color: #fff;
  padding: 1.5625rem 4.375rem;
  box-sizing: border-box;
  line-height: 1;
  width: fit-content;
  position: relative;
  transition: 0.3s ease;
  text-align: center;
  min-width: min(100%, 15.625rem);

  &:hover {
    background: var(--hover-color);
  }
}

.wpcf7-form .submit {
  text-align: center;
}

.wpcf7-form .wpcf7-spinner {
  display: none !important;
}

/*----- loginform -----*/
#loginform {
  display: grid;
  grid-template-columns: 1fr auto;
  width: fit-content;
  gap: 0.5rem 1rem;
  margin-top: 1rem;

  > p {
    text-align: left;
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;

  }

  > div {
    grid-column: 1 / 3;
  }

  .login-remember {
    display: block;
  }

  .login-submit {
    margin-top: 3.125rem;
    display: block;
  }

  @media screen and (max-width: 768px) {
    > p {
      display: block;
    }

    .login-submit {
      margin-top: var(--space);
    }
  }
}

.loginform__error {
  margin-top: 1rem;
  color: var(--red);
}

/*----- #logout-dialog -----*/
/* ダイアログ全体 */
#logout-dialog {
  border: none;
  border-radius: 12px;
  padding: 0;
  background: #fff;
  width: min(90%, 320px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(-20px) scale(0.98);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* モーダル背景 */
#logout-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  transition: background 0.3s ease;
}

/* 開いているときの状態（フェードイン） */
#logout-dialog[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 内部コンテンツ */
.dialog-inner {
  padding: 24px 20px;
  text-align: center;
}

.dialog-inner p {
  /* font-size: 16px; */
  margin-bottom: 20px;
}

/* ボタン配置 */
.dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.dialog-buttons button {
  padding: 8px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  transition: background 0.2s ease, transform 0.2s ease;
}

#logout-ok {
  background: #d33;
  color: #fff;
}

#logout-ok:hover {
  background: #b22;
  transform: translateY(-1px);
}

#logout-cancel {
  background: #ddd;
  color: #333;
}

#logout-cancel:hover {
  background: #ccc;
  transform: translateY(-1px);
}

/* ダイアログ開いている間、スクロール無効 */
body:has(#logout-dialog[open]) {
  overflow: hidden;
}

/*----- spacing -----*/
.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: var(--sb) !important;
}

.m-2 {
  margin: calc(var(--sb) * 2) !important;
}

.m-3 {
  margin: calc(var(--sb) * 3) !important;
}

.m-4 {
  margin: calc(var(--sb) * 4) !important;
}

.m-5 {
  margin: calc(var(--sb) * 5) !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: 0.625rem !important;
  margin-left: 0.625rem !important;
}

.mx-2 {
  margin-right: calc(var(--sb) * 2) !important;
  margin-left: calc(var(--sb) * 2) !important;
}

.mx-3 {
  margin-right: calc(var(--sb) * 3) !important;
  margin-left: calc(var(--sb) * 3) !important;
}

.mx-4 {
  margin-right: calc(var(--sb) * 4) !important;
  margin-left: calc(var(--sb) * 4) !important;
}

.mx-5 {
  margin-right: calc(var(--sb) * 5) !important;
  margin-left: calc(var(--sb) * 5) !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.625rem !important;
  margin-bottom: 0.625rem !important;
}

.my-2 {
  margin-top: calc(var(--sb) * 2) !important;
  margin-bottom: calc(var(--sb) * 2) !important;
}

.my-3 {
  margin-top: calc(var(--sb) * 3) !important;
  margin-bottom: calc(var(--sb) * 3) !important;
}

.my-4 {
  margin-top: calc(var(--sb) * 4) !important;
  margin-bottom: calc(var(--sb) * 4) !important;
}

.my-5 {
  margin-top: calc(var(--sb) * 5) !important;
  margin-bottom: calc(var(--sb) * 5) !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.625rem !important;
}

.mt-2 {
  margin-top: calc(var(--sb) * 2) !important;
}

.mt-3 {
  margin-top: calc(var(--sb) * 3) !important;
}

.mt-4 {
  margin-top: calc(var(--sb) * 4) !important;
}

.mt-5 {
  margin-top: calc(var(--sb) * 5) !important;
}

.mt-auto {
  margin-top: auto !important;
}

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: 0.625rem !important;
}

.me-2 {
  margin-right: calc(var(--sb) * 2) !important;
}

.me-3 {
  margin-right: calc(var(--sb) * 3) !important;
}

.me-4 {
  margin-right: calc(var(--sb) * 4) !important;
}

.me-5 {
  margin-right: calc(var(--sb) * 5) !important;
}

.me-auto {
  margin-right: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: var(--sb) !important;
}

.mb-2 {
  margin-bottom: calc(var(--sb) * 2) !important;
}

.mb-3 {
  margin-bottom: calc(var(--sb) * 3) !important;
}

.mb-4 {
  margin-bottom: calc(var(--sb) * 4) !important;
}

.mb-5 {
  margin-bottom: calc(var(--sb) * 5) !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.ms-1 {
  margin-left: var(--sb) !important;
}

.ms-2 {
  margin-left: calc(var(--sb) * 2) !important;
}

.ms-3 {
  margin-left: calc(var(--sb) * 3) !important;
}

.ms-4 {
  margin-left: calc(var(--sb) * 4) !important;
}

.ms-5 {
  margin-left: calc(var(--sb) * 5) !important;
}

.ms-auto {
  margin-left: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: var(--sb) !important;
}

.p-2 {
  padding: calc(var(--sb) * 2) !important;
}

.p-3 {
  padding: calc(var(--sb) * 3) !important;
}

.p-4 {
  padding: calc(var(--sb) * 4) !important;
}

.p-5 {
  padding: calc(var(--sb) * 5) !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: var(--sb) !important;
  padding-left: var(--sb) !important;
}

.px-2 {
  padding-right: calc(var(--sb) * 2) !important;
  padding-left: calc(var(--sb) * 2) !important;
}

.px-3 {
  padding-right: calc(var(--sb) * 3) !important;
  padding-left: calc(var(--sb) * 3) !important;
}

.px-4 {
  padding-right: calc(var(--sb) * 4) !important;
  padding-left: calc(var(--sb) * 4) !important;
}

.px-5 {
  padding-right: calc(var(--sb) * 5) !important;
  padding-left: calc(var(--sb) * 5) !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: var(--sb) !important;
  padding-bottom: var(--sb) !important;
}

.py-2 {
  padding-top: calc(var(--sb) * 2) !important;
  padding-bottom: calc(var(--sb) * 2) !important;
}

.py-3 {
  padding-top: calc(var(--sb) * 3) !important;
  padding-bottom: calc(var(--sb) * 3) !important;
}

.py-4 {
  padding-top: calc(var(--sb) * 4) !important;
  padding-bottom: calc(var(--sb) * 4) !important;
}

.py-5 {
  padding-top: calc(var(--sb) * 5) !important;
  padding-bottom: calc(var(--sb) * 5) !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: var(--sb) !important;
}

.pt-2 {
  padding-top: calc(var(--sb) * 2) !important;
}

.pt-3 {
  padding-top: calc(var(--sb) * 3) !important;
}

.pt-4 {
  padding-top: calc(var(--sb) * 4) !important;
}

.pt-5 {
  padding-top: calc(var(--sb) * 5) !important;
}

.pe-0 {
  padding-right: 0 !important;
}

.pe-1 {
  padding-right: var(--sb) !important;
}

.pe-2 {
  padding-right: calc(var(--sb) * 2) !important;
}

.pe-3 {
  padding-right: calc(var(--sb) * 3) !important;
}

.pe-4 {
  padding-right: calc(var(--sb) * 4) !important;
}

.pe-5 {
  padding-right: calc(var(--sb) * 5) !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: var(--sb) !important;
}

.pb-2 {
  padding-bottom: calc(var(--sb) * 2) !important;
}

.pb-3 {
  padding-bottom: calc(var(--sb) * 3) !important;
}

.pb-4 {
  padding-bottom: calc(var(--sb) * 4) !important;
}

.pb-5 {
  padding-bottom: calc(var(--sb) * 5) !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.ps-1 {
  padding-left: var(--sb) !important;
}

.ps-2 {
  padding-left: calc(var(--sb) * 2) !important;
}

.ps-3 {
  padding-left: calc(var(--sb) * 3) !important;
}

.ps-4 {
  padding-left: calc(var(--sb) * 4) !important;
}

.ps-5 {
  padding-left: calc(var(--sb) * 5) !important;
}

/* @media screen and (max-width: 768px) { */
@media screen and (max-width: 1023px) {
  :root {
    --width-lg: calc(100vw - 40px);
    --width-md: calc(100vw - 80px);
    --sb: 5px;
    --space: 2.5rem;
    --space: 1.5rem;
  }

  html {
    font-size: 16px;
  }

  body {
    min-width: 100%;
  }

  /*----- common -----*/
  .container {
    max-width: var(--width-lg);
  }

  .common-title01 {
    font-size: 1.25rem;
  }

  .common-title02 {
    font-size: 1.25rem;
  }

  .ul01 li {
    font-size: 1.25rem;
  }

  /*----- header -----*/
  #header {
    position: fixed;
    width: 100%;
    padding: 12px;
    z-index: 99;
    background-color: #FFF;
  }

  img.logo-img {
    max-height: 36px;
  }

  #header .logo a {
    padding: 0;
  }

  .global-nav-wrapper {
    justify-content: flex-start;
    flex-direction: column;
    background: linear-gradient(to bottom, var(--color01) 50%, #fff 50%);
  }

  .global-nav-wrapper ul {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* #header .logo img {
    height: 36px;
  } */

  #header #burger {
    position: absolute;
    display: block;
    width: 60px;
    height: 60px;
    background-color: #FFF;
    top: 0;
    right: 0;
    z-index: 2;
    transition: 0.3s ease;
  }

  #header #burger::before {
    content: "MENU";
    position: absolute;
    inset: auto 0 10px;
    margin: 0 auto;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--color01);
  }

  #header #burger.active {
    background-color: rgba(255, 255, 255, 0);
    /* background-color: var(--color01); */
  }

  #header .global-nav li .sub-menu li:first-of-type {
    display: block;
  }

  #header #burger span {
    width: 30px;
    height: 2px;
    position: absolute;
    background-color: var(--color01);
    transition: 0.3s ease;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.3s ease;
  }

  #header #burger.active span {
    background-color: #fff;
  }

  #header #burger span:nth-of-type(1) {
    top: 17px;
  }

  #header #burger span:nth-of-type(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -5px);
  }

  #header #burger span:nth-of-type(3) {
    bottom: 25px;
  }

  #header #burger.active span:nth-of-type(1) {
    transform: translateY(0px) rotate(-30deg);
    left: 10px;
    top: 24px;
  }

  #header #burger.active span:nth-of-type(2) {
    opacity: 0;
  }

  #header #burger.active span:nth-of-type(3) {
    transform: translateY(0px) rotate(30deg);
    left: 10px;
    top: 24px;
  }

  body:has(.global-nav-wrapper.open) {
    overflow: hidden;
  }

  .global-nav-wrapper {
    display: block;
    grid-area: none;
    position: absolute;
    width: 100%;
    /* height: calc(100vh - 60px); */
    height: 100vh;
    background-color: #fff;
    top: 0;
    left: 0;
    border-top: 60px solid var(--color01);
    padding: 0;
    transition: 0.3s ease;
    transform: translateX(100%);
    box-sizing: border-box;
  }

  .global-nav-wrapper__inner {
    display: block;
    overflow-y: scroll;
    height: 100%;
    /* display: flex; */
    /* flex-direction: column; */

  }

  .global-nav-wrapper.open {
    transform: translateX(0%);
  }

  .global-nav-wrapper li {
    width: calc(100% - 0px);
    margin: 0 auto;
    display: block;
  }

  .global-nav-wrapper li a {
    display: block;
    transition: 0.3s ease;
    padding: 20px 0 !important;

    position: relative;
    color: #fff;
    font-size: 14px;
  }

  #header .global-nav {
    padding: 0 20px;
    background: var(--color01);
    margin: 0;
  }

  #header .global-nav a {
    border-bottom: solid 1px rgba(255, 255, 255, 0.25);
  }

  #header .global-nav li a:hover,
  #header .global-nav li.active > a {
    color: #fff;
  }

  .global-nav-wrapper li a:hover {
    /* color: #222 !important; */
    /* border-bottom: solid 1px #fff !important; */
    /* color: #57b0d5;
    border-bottom: solid 3px #57b0d5; */
  }

  /* #header .global-nav li a{
  position: relative;
  color: #fff;
} */

  #header .global-nav li:has(.sub-menu) > a::before,
  #header .global-nav li:has(.sub-menu) > a::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0 0 0 auto;
    margin: auto;
    background: currentColor;
    width: 1rem;
    height: 2px;
    transform: none !important;
    translate: none !important;
    border: none;
    transition: 0.3s ease;
  }

  #header .global-nav li:has(.sub-menu) > a::after {
    rotate: 90deg;
  }

  #header .global-nav li:has(.sub-menu.open) > a::after {
    rotate: 0deg;
  }

  #header .global-nav-sub {
    /* margin-left: -25px;
    margin-right: -25px; */
    display: grid;
    padding: 0 0 60px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "search search"
      "job-search job-search"
      "member contact";
    background: #fff;
    justify-content: stretch;
    border-radius: 0;
    width: 100%;
  }

  #header .global-nav-sub li {
    padding: 20px;
    background: var(--color01);
    box-sizing: border-box;
    width: 100%;
  }

  #header .global-nav-sub .searchbox form > div {
    width: 100%;
    margin: 0;
  }

  #header .global-nav-sub li[class^='page-'] {
    background: #fff;
    text-align: center;
  }

  #header .global-nav-sub li[class^='page-'] a {
    padding: 20px 0 !important;
  }

  #header .global-nav-sub li:not([class^='page-']) {
    grid-area: search;
  }

  #header .global-nav-sub li.page-job-search {
    grid-area: job-search;
    padding: 20px 20px 5px;

    a {
      border-radius: var(--border-radius-sm);

    }
  }

  #header .global-nav-sub li.page-member-logout,
  #header .global-nav-sub li.page-member {
    grid-area: member;
    padding: 5px 0 5px 20px;

    a {
      border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
    }
  }

  #header .global-nav-sub li.page-contact {
    grid-area: contact;
    padding: 5px 20px 5px 0;

    a {
      border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    }
  }

  #header .global-nav li .sub-menu {
    position: static;
    max-height: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none !important;
    border-left: 10px solid transparent;
    width: 100%;
    padding: 0;
    border-radius: 0 !important;
    box-sizing: border-box;
    opacity: 0;
  }

  #header .global-nav li .sub-menu.open {
    max-height: 200vh;
    opacity: 1;
  }

  /*--- page-header ---*/
  #page-header {
    overflow: hidden;
  }

  #page-header .title {
    font-size: 1.5rem;
    gap: 0.35em;
  }

  #page-header .title .ja b {
    line-height: 1.25;
  }

  #page-header .title .en {
    font-size: 1.25rem;
  }

  #page-header .container {
    flex-direction: column;
    padding: var(--space) 0 3.25rem;

    .title {
      width: 100%;

      + .btn {
        margin-top: var(--space);
        align-self: flex-start;
      }
    }
  }

  /*--- breadcrumbs ---*/
  .breadcrumbs {
    width: calc(100% - 1rem);
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  #main {
    /* padding-top: var(--space); */
    padding-top: 3.75rem;
    padding-bottom: 2rem;
  }

  .bottom_nav {
    margin-top: 2rem;
    margin-bottom: -2rem;
  }

  .front .hero {
    aspect-ratio: 1 / 1;
    margin-top: 2.5rem;
    padding-bottom: 0;

    &.swiper > p {
      inset: 0 0 0 5vw;
      font-size: min(2.5rem, 7vw);
      translate: 0 0;
    }
  }

  .layout01,
  .layout02 {
    .common-title01 {
      margin-bottom: 0;
    }
  }

  .layout01 {
    display: flex;
    flex-direction: column;

    > figure.layout01-figure__fixed {
      position: static;
    }

    .introduction & {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(6, auto);

      > .common-title01 {
        grid-row: 1 / 2;
      }

      > .layout01__content {
        display: grid;
        grid-column: 1 / 2;
        grid-row: 2 / -1;
        /* grid-auto-rows: min-content; */
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;

        p {
          grid-row: 3 / 4;
        }

        .btn {
          grid-row: 4 / 5;
          margin-top: 0;
        }

        ul {
          grid-row: 5 / 6;
          margin-top: 0;
        }
      }

      > figure.layout01-figure__fixed {
        position: static;
        grid-area: figure;
        grid-column: 1 / 2;
        grid-row: 3 / 4;
      }
    }
  }

  .layout01 .btn {
    width: 100%;
    text-align: center;
    margin-top: 2.5rem;
  }

  .layout02 {
    display: flex;
    flex-direction: column;
  }

  .front .introduction {
    margin-top: 0;
    margin-bottom: 0;
    /* max-width: calc(100% - 40px); */
    max-width: 100%;
    padding: 2.5rem 0 5.5rem;
  }

  .front .introduction li a {
    font-size: 1.25rem;
  }

  .front .introduction ul {
    margin-top: 2.5rem;
  }

  .front .news-list {
    padding-top: 2.5rem;
  }

  .post-lists > li {
    grid-template-columns: 1fr;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: 1rem repeat(2, minmax(0, auto)) 1rem;
    gap: 0 10px;
  }

  .post-lists > li > a,
  .post-lists > li > span {
    grid-column: 1 / 4;
    grid-row: 2 / 4;
    grid-template-rows: subgrid;
    padding: 0;
  }

  .search .post-lists > li > a {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    font-size: 0.8rem;

    &::after {
      position: absolute;
    }
  }

  .post-lists li time {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    padding-left: 0;
  }

  .post-lists li .title {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
  }

  .post-lists > li > a::after {
    position: static;
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    margin-left: auto;
    pointer-events: none;
    margin-right: 0;
  }

  .post-lists li .cats-wrapper {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .cats span, .cats a {
    width: fit-content;
    padding: 0 1rem;
    line-height: 1.5;
    border-radius: 4px;
  }

  .news-list {
    .btn {
      width: 100%;
      text-align: center;
    }
  }

  .content-list {
    display: flex;
    flex-direction: column;

    > div {
      min-height: auto;

      > a,
      > a:has(span) span {
        padding: 2rem 10px;
        text-align: center;
        font-size: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .links-list {
    .item-list {
      margin: 1rem 0 2rem
    }
  }

  .documents-list {
    .common-title01 {
      margin-bottom: 1rem;
    }

    > .item-list, table {
      margin: 1rem 0 2rem;
      /* margin: 2rem 0 4.125rem */
    }
  }

  /*----- news/products-news single -----*/
  #main .content .post-tl {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .news.single,
  .products-news.single {
    .thumbnail {
      margin: 20px 0;
    }

    .wrapper > .container {
      .tbl01 + .btn {
        margin-top: 1.25rem;
      }

      .side {
        padding: 1.25rem;
        margin-bottom: 1rem;
      }
    }

    .side__categires {
      dt {
        margin-bottom: 20px;
      }

      dd ul li a {
        padding: 1rem 0;
      }
    }

    .content .btn-back:last-child {
      margin-top: 3.9425rem;
      /* margin-top: 2rem; */
    }
  }

  /*-----footer-----*/
  #footer > .wrapper {
    padding: calc(var(--space) * 2) 0;
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--width-lg);
    gap: calc(var(--space) * 2 - 0.25rem);
  }

  #footer .global-nav-sub {
    flex-direction: column;
    width: 100%;
    border-radius: none;
    gap: 10px !important;

    a {
      border-radius: var(--border-radius);
    }
  }

  #footer ul.footer-nav {
    font-size: 0.9rem;
    line-height: 1;
  }

  #footer nav:has(.footer-nav) {
    flex-direction: column;
  }

  #footer .copyright {
    > * {
      text-align: center;
    }
  }

  .tbl01.sp-vertical {
    tr {
      display: flex;
      flex-direction: column;
      background: var(--box-color);
      padding: 0.9em 1.875em;

      > * {
        padding: 0;
      }

      th {
        font-weight: 700;
        /* border-bottom: 1px solid var(--box-color); */
      }
    }
  }

  .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    /* スマホでスムーズスクロール */
    position: relative;
    /* width: 100%; */


    /* Opera doesn't support this in the shorthand */
    /* background-attachment: local, local, scroll, scroll; */
    &.is-visible::after {
      content: "";
      display: block;
      position: absolute;
      pointer-events: none;
      inset: 5rem 0 auto 0;
      margin: 0 auto;
      background: #111;
      width: 3rem;
      height: 3rem;
      --mask: url("../img/svg_hand01.svg");
      -webkit-mask-image: var(--mask);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-image: var(--mask);
      mask-repeat: no-repeat;
      mask-size: contain;
      opacity: 0;
      animation: scroll-hint-appear 1.2s linear;
      animation-iteration-count: 2;
      filter: drop-shadow(0 0 0 red);
    }

    > table {
      width: 100%;
      min-width: 200vw;
      position: relative;

      &::after {
        content: "";
        display: block;
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, transparent 80vw, rgba(0, 0, 0, 0.5) 100vw);
        background-attachment: fixed;
        top: 0;
        left: 0;
        /*
  --overflow-cover-color: white;
  --overflow-shadow-color: rgba(0, 0, 0, 0.2);
  background: linear-gradient(
      90deg,
      var(--overflow-cover-color) 20%,
      rgba(255, 255, 255, 0)
    ),
    linear-gradient(
        90deg,
        rgba(255, 255, 255, 0),
        var(--overflow-cover-color) 80%
      )
      100% 0,
    linear-gradient(90deg, var(--overflow-shadow-color) 20%, rgba(0, 0, 0, 0)),
    linear-gradient(
        90deg,
        rgba(255, 255, 255, 0),
        var(--overflow-shadow-color) 80%
      )
      100% 0;
  background-repeat: no-repeat;
  background-color: var(--overflow-color-cover);
  background-size: 6.5rem 100%, 6.5rem 100%, 1rem 100%, 1rem 100%;
  background-attachment: local, local, scroll, scroll;*/

      }

    }
  }

  .tbl-schedule-wrapper {
    .common-title01 {
      margin-bottom: 1rem;
    }

    .table-wrapper {
      margin-top: 1rem;

    }
  }

  .officer {
    .greeting-name {
      margin-bottom: 1.4425rem;
    }
  }

  .sponsors {
    .card {
      figure {
        margin-bottom: 0.5rem;
      }
    }

    .card-list {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .content-list {
    .content-search {
      padding: 20px;

      dl {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 1rem;
        gap: 0.5rem;
        margin-top: 0.875rem;
      }
    }
  }

  .number-list01 {
    & li {
      padding-top: 3.5rem;

      &::before {
        font-size: 1.25rem;
      }

      & .title {
        font-size: 1.25rem;
        margin-bottom: 1rem;
      }
    }
  }

  .block-list01 {
    & li {
      font-size: 1.25rem;
      padding: 1rem;
    }
  }

  .dl02 {
    flex-direction: column;
    gap: 1rem;
  }

  .admission {
    .link-list03 {
      margin-top: 2.5rem;
      margin-bottom: 2.5rem;
      width: 100%;
      /* gap: 0 1rem; */
    }

    .box01 .container {
      max-width: var(--width-md);
    }

    .admission-introduction.box01 {
      padding-top: 0;

      .container {
        max-width: var(--width-lg);
      }

      .layout01 {
        .common-title02 {
          margin-top: 1.875rem !important;
          margin-bottom: 0.6875rem !important;
        }

        > figure:has(figure) figure {
          height: calc(27.125rem * 0.75);
        }
      }
    }
  }



  /*----- page-index -----*/
  .page-index {
    margin: 0 0 2.5rem;
    grid-template-columns: 1fr;
    gap: 0;

    li a {
      font-size: 1rem;
      padding: 1rem 0 1rem;

      b {
        font-size: 1.25rem;
      }
    }
  }

  .members, .job-search {
    .card {
      > a {
        display: grid;
        /* padding: 2.5rem 2rem; */
        padding: 1rem 1rem;
        grid-template-columns: auto;
        grid-template-areas:
          "card-title"
          "figure"
          "varieties-title"
          "varieties";
        gap: 10px;
        transition: 0.3s ease;
        box-sizing: border-box;
        position: relative;
      }

      .card-body {
        display: contents;
      }

      figure {
        grid-area: figure;
      }

      .card-title {
        grid-area: card-title;

        &:has(em) {
          font-size: 1.25rem;
        }

        small {
          /* width: 100%; */
          min-width: auto;
          padding: 0.5rem 1.25rem;
        }

        em {
          padding-bottom: 0.5rem;

          &::after {
            inset: 0.9rem 0 0.25rem auto;
          }
        }
      }

      .varieties-title {
        grid-area: varieties-title;
        margin: 1rem 0 0.5rem;
      }

      .varieties {
        grid-area: varieties;
      }
    }
  }

  .members.single main {
    .main-title {
      font-size: 1.5rem;

      small {
        font-size: 1.25rem;
        margin-bottom: 0;
      }
    }

    .catch {
      font-size: 1.5rem;
    }
  }

  .dl03 {
    flex-direction: column;
  }

  .number-list01 {
    flex-direction: column;
    gap: 60px;
  }

  .block-list01 {
    flex-direction: column;
  }

  .step-list01 {
    flex-direction: column;
    padding: 2rem 1rem;

    > li {

      + li {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid currentColor;
        border-left: 0;
      }
    }
  }

  .link-list02 {
    flex-direction: column;
    width: 100%;

    > * {
      > .btn {
        width: 100%;
      }
    }
  }

  .link-list03 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;

    > * {
      + li {
        border: 0;
      }

      a {
        display: block;
        /* padding: 0.625em 2em 0.625em 0.625em; */
        padding: 0.75em 2em 0.75em 0.75em;
        position: relative;
        color: #fff;
        background: var(--color01);
        border-radius: var(--border-radius-sm);

        &::after {
          position: absolute;
          inset: 0 0.5rem 0 auto;
          margin: auto 0;
        }
      }
    }
  }

  .faq-list {
    & dl {
      padding: 1.25rem 1rem;

      dt, dd {
        grid-template-columns: 2rem auto;
      }

      dt {
        padding-top: 0;
      }

      dd {
        padding-bottom: 0;

      }
    }
  }

  .dl01 {
    padding: 1rem;
  }

  .nav-links {
    gap: 10px;
    align-items: stretch;
  }

  .nav-links a.next,
  .nav-links a.prev,
  .nav-links:not(:has(.prev))::before,
  .nav-links:not(:has(.next))::after {
    width: min(3.5625rem, 10vw);
    height: min(3.5625rem, 10vw);
  }

  .nav-links a.next,
  .nav-links a.prev {
    text-indent: -100vw;
    overflow: hidden;
    height: auto;
    padding: 5px 1rem;
    border-radius: var(--border-radius-sm);
  }

  .nav-links a.prev::before,
  .nav-links a.next::after {
    position: absolute;
    text-indent: 0;
    inset: 0;
    margin: auto;
  }

  .nav-links span.page-numbers:not(.prev):not(.next), .nav-links a.page-numbers:not(.prev):not(.next) {
    font-size: 1rem;
  }

  .contact-us {
    padding: var(--space) 0.25rem;
  }

  .varieties {
    li {
      /* width: 100%; */
      text-align: left;
      /* padding: 0.625em; */
    }
  }

  .box01 {
    /* padding-top: var(--space); */
    /* padding-bottom: var(--space); */
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;

    &.bg01,
    &.bg02 {
      .container {
        max-width: var(--width-md);
      }
    }
  }

  .inbox01 {
    padding: 1rem;
  }

  .layout01 {
    gap: var(--space);
  }

  .layout02 {
    gap: var(--space);
  }

  .layout01 + .layout01, .layout01 + .layout02, .layout02 + .layout01, .layout02 + .layout02 {
    /* margin-top: var(--space);
    padding-top: var(--space); */
    margin-top: 3.4375rem;
    padding-top: 3.125rem;
  }

  .layout03 + .layout03 {
    /* margin-top: var(--space);
      padding-top: var(--space); */
    margin-top: 2.5rem;
    padding-top: 2.5rem;
  }

  .common-title01 {
    margin-bottom: var(--space);
  }

  .post-lists {
    margin-top: var(--space);
    margin-bottom: var(--space);
  }

}

@keyframes scroll-hint-appear {
  0% {
    transform: translateX(40px);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  50%,
  100% {
    transform: translateX(-40px);
    opacity: 0;
  }
}