@charset "utf-8";

/*共通 設定
---------------------------------------------------------*/
/* @font-face {
  font-family: "MyFont";
  src: url("font/BIZUDGothic-Regular.ttf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "MyFont";
  src: url("font/BIZUDGothic-Bold.ttf") format("opentype");
  font-weight: 700;
  font-style: normal;
} */

:root {
  --clr_meijored: #B7193F;
  --clr_bggray: #F3F3F3;
  --clr_linegray: #C3C3C3;
  --clr_txt: #5D5D5D;
  --clr_restriction: #DA0C00;
  --theme_support: #E65F00;
  --theme_admissions: #CCC03D;
  --theme_volunteer: #569BCC;
  --theme_staff: #4DB27F;
  --theme_about: #4E5C9C;
  --theme_all: #5D5D5D;
  --themecolor: #5D5D5D;
  --font-udgothic: "BIZ UDGothic", sans-serif;
  --font-udpgothic: "BIZ UDPGothic", sans-serif;
}

html.font-small {
  font-size: 8px;
}

html {
  font-size: 10px;
  /* 中（標準） */
}

html.font-large {
  font-size: 12px;
}

body {
  color: var(--clr_txt);
}

body:has(dialog[open]) {
  /* 背景ページのスクロールを止める */
  overflow: hidden;
}

.txt {
  line-height: 1.8;
}

.-en {
  font-family: var(--font-udpgothic);
}

[data-theme="support"] {
  --themecolor: var(--theme_support);
}

[data-theme="admissions"] {
  --themecolor: var(--theme_admissions);
}

[data-theme="volunteer"] {
  --themecolor: var(--theme_volunteer);
}

[data-theme="staff"] {
  --themecolor: var(--theme_staff);
}

[data-theme="about"] {
  --themecolor: var(--theme_about);
}

[data-theme="all"] {
  --themecolor: var(--theme_all);
}

.grecaptcha-badge {
  display: none;
  visibility: hidden;
  translate: 200% 0;
  opacity: 0;
}

/*header
---------------------------------------------------------*/

#header {
  text-align: left;
  width: 41rem;
  background-color: var(--clr_bggray);

  .sideconts {
    padding-bottom: 8rem;

    .site-title {
      width: 19rem;
      margin: 6.2rem 0 0 9.6rem;

      a {
        display: inline-block;
      }
    }
  }

  .accordion {
    text-align: left;
    max-width: 36rem;
    margin: 2.5rem auto 0;

    .item {
      display: none;

      a {
        min-height: 8rem;
        font-size: 1.8rem;
        letter-spacing: 0.03em;
        border-bottom: max(1px, 0.1rem) solid var(--clr_linegray);

        &.is-current {
          font-weight: 700;
          background-color: #fff;
        }
      }
    }
  }

  .accordion-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 10.6rem;
    border-bottom: max(1px, 0.1rem) solid var(--clr_linegray);
    transition: .2s ease;

    span[aria-hidden] {
      position: relative;
      display: inline-block;
      flex-shrink: 0;
      width: 3rem;
      height: 3rem;
      background-color: var(--clr_txt);

      &::before,
      &::after {
        content: '';
        position: absolute;
        translate: -50% -50%;
        top: 50%;
        left: 50%;
        width: 1.8rem;
        height: 0.2rem;
        background-color: #fff;
        transition: .2s ease;
      }

      &::after {
        rotate: 90deg;
      }
    }

    &:hover,
    &.is-current,
    .is-current {
      background-color: #fff;
    }

    .accordion-toggle.is-active {

      span[aria-hidden] {

        &::before,
        &::after {
          rotate: 360deg;
        }
      }
    }
  }

  .accordion-link {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-grow: 1;
    min-height: 10.6rem;
    color: var(--clr_txt);
    text-decoration: none;

    img {
      width: 7.5rem;
      margin: 0;
    }

    span {
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 1.7;
      flex-grow: 1;
    }
  }

  .accordion-toggle {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .guide {
    padding: 0 1rem 0 4.4rem;
    margin-top: 6rem;

    .link {
      +.link {
        margin-top: 3.5rem;
      }
    }

    a {
      font-size: 2rem;
      color: var(--clr_txt);
      width: max-content;

      img {
        width: 1.8rem;
        margin-left: 1rem;
        vertical-align: baseline;
      }

      &:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
      }
    }
  }
}

/*footer
---------------------------------------------------------*/
#footer {
  position: relative;
  text-align: left;
  color: #fff;
  padding: 3rem 0 6rem;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #5D5D5D;
    z-index: 2;
  }

  .contact-btn {
    position: fixed;
    translate: 0 0.9rem;
    bottom: -0.1rem;
    right: min(26rem, 13.541666666666666vw);
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2.3rem 4.6rem 3.3rem 9.2rem;
    border-radius: 3rem 3rem 0 0;
    color: #fff;
    background-color: #00679C;
    z-index: 10;
    transition: translate 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;


    &::before {
      content: '';
      position: absolute;
      top: 2.8rem;
      left: 4.6rem;
      width: 3.1rem;
      height: 2.4rem;
      background: url(../img/contact_icon.svg) no-repeat;
      background-size: cover;
    }

    &:hover {
      translate: 0 0;
      background-color: #3893c0;
      box-shadow: 0 -0.8rem 2rem rgba(0, 0, 0, .2);
    }
  }

  .container {
    position: relative;
    z-index: 5;
  }

  .logo {
    display: block;
    width: 54rem;
    border-radius: 10rem;
    transition: box-shadow 0.2s ease;

    img {
      width: 100%;
    }

    &:hover {
      box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);
    }
  }

  nav {
    margin-top: 3.5rem;
  }

  ul {
    &:not(:has(.lead)) {
      .link {
        padding-left: 0;

        &::before {
          display: none;
        }
      }
    }
  }

  .list {
    display: grid;
    grid-template-columns: 38rem 1fr 1fr;
    gap: 6rem 3rem;
    letter-spacing: 0.03em;

    .lead {
      font-size: 2rem;
      font-weight: 700;

      +.link {
        margin-top: 1.8rem;
      }
    }

    .link {
      position: relative;
      font-size: 1.6rem;
      padding-left: 1.2rem;

      &::before {
        content: '';
        position: absolute;
        top: 1.2rem;
        left: 0;
        width: 0.8rem;
        height: 0.1rem;
        background-color: #fff;
      }

      +.link {
        margin-top: 1.8rem;
      }
    }

    a {
      color: #fff;

      &:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
      }

      img {
        display: inline-block;
        width: 1.8rem;
        margin-left: 0.4rem;
        vertical-align: middle;
      }
    }
  }

  .officialsite {
    position: absolute;
    top: 2.6rem;
    right: 0;
    width: max-content;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 2rem;
    color: var(--clr_txt);
    padding: 1rem 1.8rem;
    border-radius: 0.5rem;
    background-color: #fff;
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;

    img:first-of-type {
      width: 18rem;
    }

    img:nth-of-type(2) {
      width: 1.8rem;
    }

    &:hover {
      box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);
    }
  }
}

/*共通 パーツ
---------------------------------------------------------*/
.page-wrapper {
  display: flex;

  main {
    flex-grow: 1;
    max-width: calc(100% - 41rem);
  }

  main>article {
    max-width: 115rem;
    padding: 2rem 5rem 18rem;
    overflow: hidden;
  }

  .breadcrumbs {
    display: flex;
    gap: 2.4rem;
    padding: 0.5rem 6px;
    border-bottom: max(1px, 0.1rem) solid var(--clr_txt);
    overflow-x: scroll;
    /* Firefox */
    scrollbar-width: none;

    /* IE, Edge Legacy */
    -ms-overflow-style: none;

    li,
    a {
      font-size: 1.6rem;
      letter-spacing: 0.03em;
      color: var(--clr_txt);
    }

    li {
      position: relative;
      white-space: nowrap;

      &:not(:last-child)::after {
        content: '>';
        position: absolute;
        translate: 0 -50%;
        top: 50%;
        right: -1.6rem;

      }
    }

    a {
      &:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
      }
    }
  }

  .fontsize-switch {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    font-size: 1.6rem;
    color: var(--clr_txt);
    margin-top: 2.3rem;

    button {
      display: grid;
      place-content: center;
      width: 3rem;
      height: 3rem;
      font-size: 1.6rem;
      line-height: 3rem;
      color: var(--clr_txt);
      background-color: var(--clr_bggray);

      &[aria-pressed="true"] {
        font-weight: 700;
        color: #fff;
        background-color: var(--clr_txt);
      }

      &:first-child {
        margin-left: 1rem;
      }

      &:hover {
        border: max(1px, 0.1rem) solid #000;
      }
    }
  }
}

html.font-small .fontsize-switch button[data-size="medium"],
html.font-large .fontsize-switch button[data-size="medium"] {
  font-weight: 400;
  color: var(--clr_txt);
  background-color: var(--clr_bggray);
}

html.font-small .fontsize-switch button[data-size="small"],
html.font-large .fontsize-switch button[data-size="large"] {
  font-weight: 700;
  color: #fff;
  background-color: var(--clr_txt);
}

.c-newslist {
  text-align: left;
  color: var(--clr_txt);
  margin-top: 8rem;

  .ttl {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
  }

  .no-message {
    font-size: 2rem;
  }

  .list {
    border: max(2px, 0.2rem) solid var(--clr_txt);
  }

  .item {
    a {
      display: block;
      color: var(--clr_txt);
      padding: 3.5rem 3.2rem;
      border-bottom: max(2px, 0.2rem) solid var(--clr_bggray);


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

    .txt {
      font-size: 2rem;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 4px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }
  }

  .group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;

    .date {
      flex-shrink: 0;
      font-size: 1.6rem;
    }

    .categorys {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;

      .cate {
        display: grid;
        place-content: center;
        font-size: 1.4rem;
        color: #fff;
        background-color: var(--themecolor);
        line-height: 1;
        padding: 0.4rem 1rem 0.3rem;
        border-radius: 3rem;
        border: max(1px, 0.1rem) solid transparent;
      }
    }
  }
}

.c-index-btn {
  position: relative;
  display: block;
  width: max-content;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background-color: var(--clr_txt);
  margin: 4rem auto 0;
  padding: 1.6rem 7.4rem 1.6rem 4.2rem;
  border-radius: 7rem;

  &::before {
    content: '';
    position: absolute;
    translate: 0 -50%;
    top: 50%;
    right: 3.2rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background-color: #fff;
  }

  &::after {
    content: '';
    position: absolute;
    translate: 0 -50%;
    top: 50%;
    right: 4.1rem;
    width: 0.8rem;
    height: 1.4rem;
    background: url(../img/btn_gray_arrow.svg) no-repeat;
    background-size: cover;
    transition: .2s ease;
  }

  &:hover {
    outline: 3px solid #005fcc !important;
    outline-offset: 3px;
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);

    &::after {
      translate: 0.3rem -50%;
    }
  }
}

.c-page-ttl {
  position: relative;
  /* display: grid;
  place-content: center; */
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-top: 2.6rem;
  background-color: var(--clr_bggray);
  border-radius: 1rem;
  padding: 4.2rem 14rem;
  overflow: hidden;
  word-break: keep-all;

  .image {
    position: absolute;
    display: block;
  }
}

.c-conts-list {
  max-width: 81.9047619047619%;
  margin: 2.5rem auto 0;

  .c-link {
    text-align: left;
    font-size: 2.4rem;
    padding: 3.5rem 5rem 3.5rem 0;

    &::before {
      width: 4rem;
      height: 4rem;
    }

    &::after {
      right: 1.3rem;
      width: 1rem;
      height: 1.8rem;
    }

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

.c-inner {
  text-align: left;
  max-width: max(81.9047619047619%, 86rem);
  margin: 4.8rem auto 0;

  .heading {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-bottom: max(1px, 0.1rem) solid var(--clr_txt);
    margin-bottom: 2.4rem;
    padding-bottom: 0.8rem;

    &:not(:first-of-type) {
      margin-top: 6rem;
    }
  }

  .major-heading {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background-color: var(--clr_bggray);
    padding: 1rem;
    border-radius: 1rem;
    margin-top: 6rem;
    margin-bottom: 2.4rem;

    +.heading {
      margin-top: 2rem;
    }
  }

  .content {
    width: 86.04651162790698%;

    +.content {
      margin-top: 10rem;
    }

    +.c-flow {
      margin-top: 3rem;
    }
  }

  .lead {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 0.8rem;
  }

  .txt {
    text-align: justify;
    font-size: 1.8rem;
    letter-spacing: 0.03em;
    line-height: 2;

    +.lead {
      margin-top: 4.2rem;
    }

    +.txt {
      margin-top: 1.8rem;
    }

    +.c-pdf {
      margin-top: 4rem;
    }

    .underline {
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  }

  .c-pdf {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.3rem;
    min-width: 38rem;
    max-width: 100%;
    width: max-content;
    padding: 0.8rem 6.6rem 0.8rem 0.8rem;
    border-radius: 8rem;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.09em;
    background-color: var(--clr_txt);

    .icon {
      width: 5.4rem;
    }

    &::before {
      content: '';
      position: absolute;
      translate: 0 -50%;
      top: 50%;
      right: 2.2rem;
      width: 2.2rem;
      height: 2.2rem;
      border-radius: 50%;
      background-color: #fff;
    }

    &::after {
      content: '';
      position: absolute;
      translate: 0 -50%;
      top: 50%;
      right: 2.9rem;
      width: 0.6rem;
      height: 1rem;
      background: url(../img/btn_gray_arrow.svg) no-repeat;
      background-size: cover;
      transition: .2s ease;
    }

    &:hover {
      outline: 3px solid #005fcc !important;
      outline-offset: 3px;
      box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);

      &::after {
        translate: 0.3rem -50%;
      }
    }

    +.lead {
      margin-top: 5.5rem;
    }

    +.c-pdf {
      margin-top: 1.5rem;
    }

  }

  .c-pdf-group {
    width: 62rem;
  }

  .c-anchor {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.3rem;
    min-width: 38rem;
    max-width: 100%;
    width: max-content;
    padding: 1.5rem 6rem 1.5rem 3.4rem;
    border-radius: 8rem;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.09em;
    background-color: var(--clr_txt);
    margin: 0 auto 6rem;

    .icon {
      width: 5.4rem;
    }

    &::before {
      content: '';
      position: absolute;
      translate: 0 -50%;
      top: 50%;
      right: 2.5rem;
      width: 2.2rem;
      height: 2.2rem;
      border-radius: 50%;
      background-color: #fff;
    }

    &::after {
      content: "";
      position: absolute;
      display: block;
      translate: 0 -50%;
      top: 52%;
      right: 3rem;
      width: 1.2rem;
      height: 0.8rem;
      background-color: var(--clr_txt);
      mask-image: url(../img/support/accordion_arrow.svg);
      mask-size: contain;
      mask-repeat: no-repeat;
      transition: translate 0.3s;
    }

    &:hover {
      outline: 3px solid #005fcc !important;
      outline-offset: 3px;
      box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);

      &::after {
        translate: 0 calc(-50% + 0.3rem);
      }
    }

  }

  .sub-lead {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--theme_about);
    margin-top: 1.5rem;
  }
}

.c-flow {
  .flow {
    position: relative;

    +.flow {
      margin-top: 5rem;
    }

    &:not(:last-of-type)::after {
      content: '';
      position: absolute;
      translate: -50% 100%;
      bottom: -1.6rem;
      left: 50%;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 2rem 1.2rem 0 1.2rem;
      border-color: var(--themecolor) transparent transparent transparent;
    }
  }

  .ttl {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    border-radius: 1rem 1rem 0 0;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    background-color: var(--clr_txt);
    padding: 0.8rem 3.7rem;


    .number {
      display: grid;
      place-content: center;
      width: 3.2rem;
      height: 3.2rem;
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 1;
      color: var(--clr_txt);
      background-color: #fff;
      border-radius: 50%;
    }
  }

  .box {
    border-radius: 0 0 1rem 1rem;
    padding: 2.6rem 3.4rem;
    background-color: var(--clr_bggray);

    .sub-ttl {
      font-size: 2.2rem;
      font-weight: 700;
      line-height: 1.6;
      letter-spacing: 0.03em;
      margin-bottom: 1rem;
    }

    .list-ttl {
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      border-bottom: max(1px, 0.1rem) solid var(--clr_txt);
      margin: 3.5rem 0 0;
    }

    /* .doc-list {
      margin-top: 1.5rem;

      .item {
        display: flex;
        gap: 1rem;

        +.item {
          margin-top: 2rem;
        }
      }

      .detail {
        flex-grow: 1;
      }

      .doc {
        display: block;
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: 0.03em;
      }

      .note {
        display: block;
        max-width: 80.05952380952381%;
        font-size: 1.8rem;
        line-height: 1.6;
        letter-spacing: 0.03em;
        padding-left: 2rem;
      }
    } */


    .-indent {
      text-align: left;
      padding: 0.2em 0 0 1em;

      +.-indent {
        padding-top: 0;
        margin-top: 0;
      }
    }

    .attention {
      font-size: 1.8rem;
      line-height: 2;
      letter-spacing: 0.03em;
      margin-top: 1.5rem;
    }

    .txt {
      max-width: 93.68686868686868%;
    }
  }

  +.content {
    margin-top: 5rem;
  }
}

.c-other {
  display: flex;
  margin-top: 10rem;
  border-radius: 1rem;

  /* &[data-theme="admissions"] {
    border: max(2px, 0.2rem) solid var(--clr_txt);

    .go-index {
      color: var(--clr_txt);

      span {

        &::before {
          background-color: var(--clr_txt);
        }
      }
    }
  } */

  .go-index {
    position: relative;
    display: grid;
    place-content: center;
    min-width: 28rem;
    width: 28rem;
    background-color: var(--themecolor);
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.8;
    color: #fff;
    padding: 0 1rem 4rem;
    border-radius: 1rem 0 0 1rem;

    span {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        /* right: 0; */
        left: 104%;
        bottom: -4rem;
        width: 2.8rem;
        height: 2.8rem;
        background-color: #fff;
        border-radius: 50%;
      }

      &::after {
        content: '';
        position: absolute;
        /* right: 0.9rem; */
        left: calc(104% + 1.1rem);
        bottom: -3.4rem;
        width: 0.8rem;
        height: 1.4rem;
        background-color: var(--themecolor);
        mask-image: url(../img/global_nav_arrow.svg);
        -webkit-mask-image: url(../img/global_nav_arrow.svg);
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        transition: .2s ease;
      }
    }

    &:hover span::after {
      translate: 0.3rem 0;
    }
  }

  .list {
    flex-grow: 1;
    background-color: var(--clr_bggray);
    padding: 1rem 4.3rem 1rem 3.7rem;
    border-radius: 0 1rem 1rem 0;

    .c-link {
      font-size: 2rem;
      padding: 1.5rem 3rem 1.5rem 0;

      &:last-of-type {
        border-bottom: none;
      }
    }
  }
}

.c-pagebtn {
  position: relative;
  display: block;
  max-width: 100%;
  width: max-content;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background-color: var(--themecolor);
  padding: 1.3rem 8.2rem 1.3rem 3.4rem;
  margin-top: 4rem;
  border-radius: 7rem;

  &::before {
    content: '';
    position: absolute;
    translate: 0 -50%;
    top: 50%;
    right: 2.4rem;
    width: 2.8rem;
    height: 2.8rem;
    background-color: #fff;
    border-radius: 50%;
  }

  &::after {
    content: '';
    position: absolute;
    translate: 0 -50%;
    right: 3.3rem;
    top: 50%;
    width: 0.8rem;
    height: 1.4rem;
    background-color: var(--themecolor);
    mask-image: url(../img/global_nav_arrow.svg);
    -webkit-mask-image: url(../img/global_nav_arrow.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    transition: .2s ease;
  }

  &:hover {
    outline: 3px solid #005fcc !important;
    outline-offset: 3px;
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);

    &::after {
      translate: 0.3rem -50%;
    }
  }
}

.meijo-navbtn {
  display: block;
  max-width: 70rem;
  margin: 6rem auto 0;
  border-radius: 1.2rem;
  transition: box-shadow 0.2s ease;

  &:hover {
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);
  }
}

.c-pagination {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 11rem;

  a,
  span {
    display: grid;
    place-content: center;
    min-width: 6rem;
    height: 6rem;
    font-size: 2rem;
    font-weight: 700;
    border-radius: 50%;
    text-decoration: none;
    color: var(--clr_txt);
    border: max(1px, 0.1rem) solid transparent;
    transition: box-shadow 0.2s ease;
  }

  a:hover {
    border-color: var(--clr_txt);
  }

  .dots {
    min-width: auto;
    height: auto;
    border: none;
    background: none;
    letter-spacing: 0.1em;
  }

  .current {
    font-weight: 700;
    color: #fff;
    background-color: var(--clr_txt);
  }

  .prev,
  .next {
    position: absolute;
    min-width: max-content;
    border-radius: 4rem;
    padding: 1.6rem 8.6rem 1.6rem 5.4rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    background-color: var(--clr_txt);

    &::before {
      content: '';
      position: absolute;
      translate: 0 -50%;
      top: 50%;
      width: 2.2rem;
      height: 2.2rem;
      border-radius: 50%;
      background-color: #fff;
    }

    &::after {
      content: '';
      position: absolute;
      translate: 0 -50%;
      top: 50%;
      width: 0.6rem;
      height: 1rem;
      background: url(../img/btn_gray_arrow.svg) no-repeat;
      background-size: cover;
      transition: .2s ease;
    }

    &:hover {
      outline: 3px solid #005fcc !important;
      outline-offset: 3px;
      box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);
    }

    &.is-disabled {
      opacity: 0.3;
      pointer-events: none;
    }
  }

  .prev {
    left: 0;
    padding: 1.6rem 5.4rem 1.6rem 8.6rem;

    &::before {
      left: 4rem;
    }

    &::after {
      left: 4.7rem;
      rotate: 180deg;
    }

    &:hover {

      &::after {
        translate: -0.3rem -50%;
      }
    }
  }

  .next {
    right: 0;

    &::before {
      right: 4rem;
    }

    &::after {
      right: 4.7rem;
    }

    &:hover {

      &::after {
        translate: 0.3rem -50%;
      }
    }
  }

  .pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  &:has(.pages > :nth-child(4)) {
    flex-wrap: wrap;
    row-gap: 2rem;

    .pages {
      order: 1;
      width: 100%;
    }

    .prev,
    .next {
      order: 2;
      position: relative;
    }

    .prev {
      margin-right: auto;
    }

    .next {
      margin-left: auto;
    }
  }
}

.c-enbox {
  margin: 4.8rem auto 0;
  background-color: var(--clr_bggray);
  border-radius: 1rem;
  padding: 3.2rem;

  .-en {
    text-align: left;
    line-height: 1.8;
  }

  +.content {
    margin-top: 6rem;
  }
}

.c-link {
  position: relative;
  display: grid;
  place-content: center left;
  color: var(--clr_txt);
  border-bottom: max(1px, 0.1rem) solid var(--clr_linegray);

  &::before {
    content: '';
    position: absolute;
    translate: 0 -50%;
    top: 50%;
    right: 0;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background-color: var(--clr_txt);
  }

  &::after {
    content: '';
    position: absolute;
    translate: 0 -50%;
    top: 50%;
    right: 0.9rem;
    width: 0.8rem;
    height: 1.4rem;
    background: url(../img/global_nav_arrow.svg) no-repeat;
    background-size: cover;
    transition: .2s ease;
  }

  &:hover {
    background-color: #fff;

    &::after {
      translate: 0.3rem -50%;
    }
  }
}

/*総合扉TOP
---------------------------------------------------------*/
.sec-sogo {

  .page-area {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    gap: 0 3.6rem;
    margin-top: 2.6rem;
    container-type: inline-size;

    .link {
      position: relative;
      width: calc((100% - 3.6rem) / 2);
      min-height: 18rem;


      &:nth-of-type(n + 3) {
        margin-top: 2.5rem;
      }

      &.-long {
        width: 100%;
        min-height: 16rem;
        margin-top: 2.1rem;

        a {
          justify-content: center;
          padding: 0;

          &::before {
            translate: 0 -50%;
            top: 50%;
            bottom: initial;
          }

          &::after {
            translate: 0 -50%;
            top: 50%;
            bottom: initial;
          }

          &:hover {
            &::after {
              translate: 0.3rem -50%;
            }
          }
        }

        .image {
          translate: 0 -50%;
          top: 50%;
          bottom: initial;
          width: clamp(10rem, 24.761904761904763cqw, calc(100% - (45rem + 3rem)));
        }
      }

      a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 100%;
        border-bottom: none;
        font-size: 2.4rem;
        font-weight: 700;
        color: var(--clr_txt);
        --themecolor: var(--clr_txt);
        background-color: var(--clr_bggray);
        padding: 0 3rem 5rem 0;
        border-radius: 1rem;
        overflow: hidden;

        span {
          position: relative;
          z-index: 1;
        }

        &::before {
          content: '';
          position: absolute;
          bottom: 2rem;
          right: 2.5rem;
          width: 4rem;
          height: 4rem;
          border-radius: 50%;
          background-color: var(--themecolor);
        }

        &::after {
          content: '';
          position: absolute;
          bottom: 3rem;
          right: 3.9rem;
          width: 1rem;
          height: 1.8rem;
          background: url(../img/global_nav_arrow.svg) no-repeat;
          background-size: cover;
          transition: .2s ease;
        }

        &:hover {
          outline: 0.3rem solid var(--clr_txt);

          &::after {
            translate: 0.3rem 0;
          }
        }
      }

      .image {
        position: absolute;
        bottom: -0.2rem;
        left: 0;
        width: clamp(10rem, 24.761904761904763cqw, calc(100% - (19.8rem + 3rem)));
      }
    }
  }
}

/*sec-support
---------------------------------------------------------*/
.sec-support {
  container-type: inline-size;

  .c-page-ttl {
    container-type: inline-size;

    .image {
      bottom: 0;
      left: 15.454545454545453cqw;
      width: clamp(10rem, 23.766233766233764cqw, calc(100% - 65rem));
    }
  }
}

.sec-support-accommodation {
  .example-list {
    display: flex;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 3rem;

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

      &.-problems {
        width: 55.11627906976744%;
        border-right: max(1px, 0.1rem) solid var(--clr_linegray);
      }

      &.-support {
        flex-grow: 1;

        .box {
          display: grid;
          place-content: center;
        }
      }
    }

    .ttl {
      display: grid;
      place-content: center;
      font-size: 1.8rem;
      letter-spacing: 0.03em;
      color: #fff;
      background-color: var(--clr_txt);
      padding: 0.7rem 0;
    }

    .box {
      padding: 3.2rem 3rem;
      background-color: var(--clr_bggray);
      flex-grow: 1;

    }

    .sub-ttl {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      font-size: 1.8rem;
      font-weight: 700;
      letter-spacing: 0.03em;

      +.sub-ttl {
        margin-top: 2.2rem;
      }
    }

    .icon {
      display: inline-block;
      min-width: 4rem;
      width: 4rem;
      height: 4rem;
      border-radius: 0.5rem;
      overflow: hidden;
    }
  }

  .c-inner {
    .txt {
      +.c-pdf {
        margin-top: 1.2rem;
      }
    }
  }

}

.sec-support-howto {
  container-type: inline-size;

  .voice-box {
    +.voice-box {
      margin-top: 7.6rem;
    }

    +.content {
      margin-top: 6rem;
    }

    .ttl-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      background-color: var(--clr_bggray);
      border-radius: 1rem;
      padding: 2.6rem 3rem;
      overflow: hidden;

      .group {
        min-width: 37.3rem;
      }

      .ttl {
        font-size: 2.4rem;
        font-weight: 700;
        letter-spacing: 0.03em;
      }

      .sub-ttl {
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        padding-bottom: 1rem;
        margin-bottom: 0.6rem;
        border-bottom: max(1px, 0.1rem) solid #000;

        .icon {
          display: inline-block;
          font-size: 1.8rem;
          font-weight: 700;
          letter-spacing: 0.03em;
          line-height: 1;
          color: #fff;
          background-color: var(--clr_txt);
          border-radius: 4rem;
          padding: 0.6rem 2.3rem;
          margin-right: 0.8rem;
        }
      }
    }

    &.-voice_a {
      .image {
        width: 16rem;
        margin-right: 4.3rem;
      }
    }

    &.-voice_b {
      .image {
        width: 26.6rem;
        margin-right: 1.8rem;
      }
    }

    &.-voice_c {
      .image {
        width: 21.4rem;
        margin-right: 2.5rem;
      }
    }

    .accordion-btn {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      max-width: 62rem;
      width: 100%;
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      margin: 1rem auto 0;
      color: #fff;
      background-color: var(--clr_txt);
      border-radius: 6rem;
      padding: 2rem 0;
      border: max(2px, 0.2rem) solid var(--clr_txt);
      transition: box-shadow 0.3s ease;

      .arrow {
        position: relative;
        display: grid;
        place-content: center;
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 50%;
        background-color: #fff;
        padding-top: 0.3rem;

        &::before {
          content: '';
          display: block;
          width: 1.2rem;
          height: 0.8rem;
          background-color: var(--clr_txt);
          mask-image: url(../img/support/accordion_arrow.svg);
          -webkit-mask-image: url(../img/support/accordion_arrow.svg);
          mask-size: contain;
          -webkit-mask-size: contain;
          mask-repeat: no-repeat;
          -webkit-mask-repeat: no-repeat;
          transition: translate 0.3s ease;
        }
      }

      @media (hover: hover) {
        &:not(.-close)&:hover {
          outline: 3px solid #005fcc !important;
          outline-offset: 3px;
          box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);

          .arrow {
            &::before {
              translate: 0 0.3rem;
            }
          }
        }

        &.-close:hover {
          outline: 3px solid #005fcc !important;
          outline-offset: 3px;
          box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);

          .arrow {
            &::before {
              translate: 0 -0.3rem;
            }
          }
        }
      }

      &.is-active {
        color: var(--clr_txt);
        background-color: var(--clr_bggray);

        .arrow {
          background-color: var(--clr_txt);
          padding-top: 0;
          padding-bottom: 0.3rem;

          &::before {
            rotate: 180deg;
            background-color: #fff;
          }
        }
      }

      &.-close {
        max-width: 30rem;
        color: var(--clr_txt);
        background-color: #fff;
        margin-top: 3rem;

        .arrow {
          background-color: var(--clr_txt);
          padding-top: 0;
          padding-bottom: 0.3rem;

          &::before {
            rotate: 180deg;
            background-color: #fff;
          }
        }
      }
    }

    .accordion {
      display: none;
      margin-top: 3rem;
    }
  }
}

.sec-support-enrolled {
  container-type: inline-size;

  .voice-box {
    +.voice-box {
      margin-top: 7.6rem;
    }

    .ttl-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      background-color: var(--clr_bggray);
      border-radius: 1rem;
      padding: 2.6rem 3rem;
      overflow: hidden;

      .group {
        min-width: 37.3rem;
      }

      .ttl {
        font-size: 2.4rem;
        font-weight: 700;
        letter-spacing: 0.03em;
      }

      .sub-ttl {
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        padding-bottom: 1rem;
        margin-bottom: 0.6rem;
        border-bottom: max(1px, 0.1rem) solid #000;

        .icon {
          display: inline-block;
          font-size: 1.8rem;
          font-weight: 700;
          letter-spacing: 0.03em;
          line-height: 1;
          color: #fff;
          background-color: var(--clr_txt);
          border-radius: 4rem;
          padding: 0.6rem 2.3rem;
          margin-right: 0.8rem;
        }
      }
    }

    &.-voice_a {
      .image {
        width: 16rem;
        margin-right: 4.3rem;
      }
    }

    &.-voice_b {
      .image {
        width: 26.6rem;
        margin-right: 1.8rem;
      }
    }

    &.-voice_c {
      .image {
        width: 21.4rem;
        margin-right: 2.5rem;
      }
    }

    .accordion-btn {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      max-width: 62rem;
      width: 100%;
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      margin: 1rem auto 0;
      color: #fff;
      background-color: var(--clr_txt);
      border-radius: 6rem;
      padding: 2rem 0;
      border: max(2px, 0.2rem) solid var(--clr_txt);
      transition: box-shadow 0.3s ease;

      .arrow {
        position: relative;
        display: grid;
        place-content: center;
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 50%;
        background-color: #fff;
        padding-top: 0.3rem;

        &::before {
          content: '';
          display: block;
          width: 1.2rem;
          height: 0.8rem;
          background-color: var(--clr_txt);
          mask-image: url(../img/support/accordion_arrow.svg);
          -webkit-mask-image: url(../img/support/accordion_arrow.svg);
          mask-size: contain;
          -webkit-mask-size: contain;
          mask-repeat: no-repeat;
          -webkit-mask-repeat: no-repeat;
          transition: translate 0.3s ease;
        }
      }

      @media (hover: hover) {
        &:not(.-close)&:hover {
          outline: 3px solid #005fcc !important;
          outline-offset: 3px;
          box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);

          .arrow {
            &::before {
              translate: 0 0.3rem;
            }
          }
        }

        &.-close:hover {
          outline: 3px solid #005fcc !important;
          outline-offset: 3px;
          box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);

          .arrow {
            &::before {
              translate: 0 -0.3rem;
            }
          }
        }
      }

      &.is-active {
        color: var(--clr_txt);
        background-color: var(--clr_bggray);

        .arrow {
          background-color: var(--clr_txt);
          padding-top: 0;
          padding-bottom: 0.3rem;

          &::before {
            rotate: 180deg;
            background-color: #fff;
          }
        }
      }

      &.-close {
        max-width: 30rem;
        color: var(--clr_txt);
        background-color: #fff;
        margin-top: 3rem;

        .arrow {
          background-color: var(--clr_txt);
          padding-top: 0;
          padding-bottom: 0.3rem;

          &::before {
            rotate: 180deg;
            background-color: #fff;
          }
        }
      }
    }

    .accordion {
      display: none;
      margin-top: 3rem;
    }
  }
}

/*sec-admissions
---------------------------------------------------------*/
.sec-admissions {
  .c-page-ttl {
    container-type: inline-size;

    .image {
      bottom: 0;
      left: 12.337662337662337cqw;
      width: clamp(10rem, 24.675324675324674cqw, calc(100% - 65rem));
    }
  }
}

.sec-admissions-consult {
  .event-table {
    border-radius: 1rem;
    overflow: hidden;
    margin-top: 5rem;

    tbody tr+tr {
      border-top: max(1px, 0.1rem) solid var(--clr_linegray);
    }

    tr>* {
      &:nth-child(n + 2) {
        border-left: max(1px, 0.1rem) solid var(--clr_linegray);
      }
    }

    th {
      text-align: center;
      font-size: 1.8rem;
      font-weight: 400;
      letter-spacing: 0.03em;
      color: #fff;
      background-color: var(--clr_txt);
      padding: 1.2rem 0;
    }

    td {
      padding: 2.2rem 2.5rem 3rem;
      background-color: var(--clr_bggray);

      .txt {
        max-width: 52rem;
      }
    }

    .sub-ttl {
      min-width: 22rem;
      text-align: center;
      font-size: 1.8rem;
      font-weight: 700;
      letter-spacing: 0.03em;
    }

    th.sub-ttl {
      color: var(--clr_txt);
      background-color: var(--clr_bggray);
      padding: 2.2rem 2.5rem 3rem;
    }

    .icon {
      display: block;
      width: max-content;
      min-width: 16.8rem;
      padding: 0 4rem;
      margin: 1rem auto 0;

      &.-on {
        color: #fff;
        background-color: var(--clr_txt);
      }

      &.-off {
        border: max(2px, 0.2rem) solid var(--clr_txt);
      }
    }

    a {
      font-weight: 700;
      color: var(--clr_txt);
      text-decoration: underline;
      text-underline-offset: 4px;

      &:hover {
        text-decoration: none;
      }
    }
  }

}

/*sec-staff
---------------------------------------------------------*/
.sec-staff {
  container-type: inline-size;

  .c-page-ttl {
    container-type: inline-size;

    .image {
      bottom: 0;
      left: 13.766233766233766cqw;
      width: clamp(10rem, 24.675324675324674cqw, calc(100% - 65rem));
    }
  }
}

.sec-staff-consult {
  .restriction {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: #fff;
    background-color: var(--clr_restriction);
    padding: 1.2rem 0;
    margin-top: 1rem;

    .underline {
      border-bottom: min(1px, 0.1rem) solid #fff;
      padding-bottom: 4px;
      padding-left: 0.1rem;
    }
  }

  .sub-heading {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 1.3rem;

    +.content {
      margin-top: 3rem;
    }
  }

  .txt {
    +.sub-heading {
      margin-top: 3rem;
    }
  }
}

.sec-staff-teachers {
  .restriction {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-decoration: underline;
    text-decoration-thickness: 0.4rem;
    text-decoration-color: var(--theme_staff);
    text-underline-offset: 0.8rem;
    margin: 1rem 0;

    &:not(:first-of-type) {
      margin-top: 3rem;
    }
  }

  .sub-heading,
  .sub-restriction {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.03em;

    +.content {
      margin-top: 2rem;
    }
  }

  .txt {

    +.sub-heading,
    +.sub-restriction {
      margin-top: 3rem;
    }
  }

  .content {
    +.example {
      margin-top: 3rem;
    }

    .c-pagebtn {
      margin-top: 1.5rem;
    }
  }

  .example {

    +.example {
      margin-top: 2rem;
    }

    .ttl {
      text-align: center;
      border-radius: 1rem;
      font-size: 1.8rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      background-color: var(--clr_bggray);
      padding: 1.6rem 3.7rem;

      .underline {
        text-decoration: underline;
        text-underline-offset: 4px;
      }
    }

    .box {
      position: relative;
      border-radius: 0 0 1rem 1rem;
      padding: 3rem 3rem 1.5rem;
      background-color: var(--clr_bggray);

      &::before {
        content: '';
        position: absolute;
        translate: -50% 0;
        top: 1.2rem;
        left: 50%;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15px 8.5px 0 8.5px;
        border-color: var(--clr_txt) transparent transparent transparent;
      }
    }

    .point {
      text-align: center;
      font-size: 2.4rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: var(--clr_meijored);
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    +.content {
      margin-top: 2rem;
    }
  }

  .example-list {
    display: flex;
    flex-wrap: wrap;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 3rem;

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

      &.-problems {
        width: 48.13953488372093%;
        border-right: max(1px, 0.1rem) solid var(--clr_linegray);

        .box {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }

      &.-support {
        width: calc(100% - 48.13953488372093%);
        flex-grow: 1;

        .box {
          display: flex;
          gap: 0 2.9rem;
          flex-wrap: wrap;

          .txt {
            margin-top: 0;
            padding-top: 0;
          }
        }
      }

      + :nth-of-type(n + 3) {
        border-top: max(1px, 0.1rem) solid var(--clr_linegray);
      }
    }

    .ttl {
      display: grid;
      place-content: center;
      font-size: 1.8rem;
      letter-spacing: 0.03em;
      color: #fff;
      background-color: var(--clr_txt);
      padding: 0.7rem 0;

      &.onlysp {
        display: none;
        visibility: hidden;
      }
    }

    .box {
      padding: 3.2rem 3rem;
      background-color: var(--clr_bggray);
      flex-grow: 1;

    }

    .sub-ttl {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      font-size: 1.8rem;
      font-weight: 700;
      letter-spacing: 0.03em;

      +.sub-ttl {
        margin-top: 2.2rem;
      }
    }

    .icon {
      display: inline-block;
      min-width: 4rem;
      width: 4rem;
      height: 4rem;
      border-radius: 0.5rem;
      overflow: hidden;
    }
  }
}

/*sec-volunteer
---------------------------------------------------------*/
.sec-volunteer {
  container-type: inline-size;

  .c-page-ttl {
    container-type: inline-size;

    .image {
      bottom: 0;
      left: 13.636363636363635cqw;
      width: clamp(10rem, 22.07792207792208cqw, calc(100% - 65rem));
    }
  }
}

.sec-volunteer-message {
  .message-list {
    max-width: 94.5rem;
    margin: 8rem auto 0;

    .item {
      display: flex;
      justify-content: flex-end;

      .image {
        margin-bottom: 1rem;
      }

      +.item {
        margin-top: 8rem;
      }

      &:nth-of-type(even) {
        flex-direction: row-reverse;
      }

      &.-item01 {

        .image {
          width: 22.5rem;
          margin-right: 11.64021164021164%;
        }

      }

      &.-item02 {

        .image {
          width: 35.5rem;
          margin-left: 3.3862433862433865%;
        }

        .txt {
          max-width: 91.92100538599641%;
        }

      }

      &.-item03 {

        .image {
          width: 27.2rem;
          margin-right: 10.687830687830688%;
        }

        .txt {
          max-width: 86.53500897666068%;
        }

      }

      &.-item04 {

        .image {
          width: 37.1rem;
          margin-left: 4.1269841269841265%;
        }

        .wrap {
          max-width: max(56.507936507936506%, 52rem);
        }

        .txt {
          max-width: 87.64044943820225%;
        }

      }

      &.-item05 {

        .image {
          width: 30.4rem;
          margin-right: 7.4074074074074066%;
        }

        .txt {
          max-width: 84.20107719928187%;
        }
      }

      .wrap {
        max-width: max(58.941798941798936%, 52rem);

        .ttl {
          position: relative;
          font-size: 2.4rem;
          font-weight: 700;
          letter-spacing: 0.03em;
          color: #fff;
          word-break: keep-all;
          padding: 1rem 3rem;
          margin-bottom: 2rem;

          .conts {
            position: relative;
          }

          &::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: calc(100% - 6.3rem);
            height: 100%;
            background-color: var(--clr_txt);
            border-radius: 0 6rem 6rem 0;
          }
        }

        .sector {
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          width: 6.4rem;
          height: 100%;
          overflow: hidden;

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: calc(6.4rem * 2);
            aspect-ratio: 1/1;
            background-color: var(--clr_txt);
            border-radius: 50%;
          }
        }

        .txt {
          text-align: justify;
          font-size: 1.8rem;
          line-height: 2;
        }
      }
    }


  }
}

.sec-volunteer-join {
  .join-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4.2rem 2.4rem;
    margin: 3.2rem auto;

    .item {
      width: calc((100% - 2.4rem)/ 2);

      &:nth-of-type(even) {
        .image {
          width: 11.8rem;
        }
      }
    }

    .ttl {
      text-align: center;
      font-size: 2.2rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: #fff;
      background-color: var(--themecolor);
      border-radius: 6rem;
      padding: 0.8rem 0;
      margin-bottom: 2rem;
    }

    .wrap {
      display: flex;

      .image {
        width: 14.5rem;
        min-height: 7rem;
      }

      .txt {
        display: grid;
        place-content: center left;
        min-height: 7.2rem;
        font-weight: 700;
      }
    }
  }

  .image-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-top: 4.8rem;

    .image {
      width: calc((100% - 1.4rem)/ 2);
      border-radius: 1rem;
      overflow: hidden;
      height: max-content;

      &:only-child {
        width: 100%;
        max-width: 86.04651162790698%;
      }
    }
  }
}

/*sec-about
---------------------------------------------------------*/
.sec-about {
  container-type: inline-size;

  .c-page-ttl {
    container-type: inline-size;

    .image {
      translate: 0 -50%;
      top: 50%;
      left: 15.974025974025974cqw;
      width: clamp(8rem, 17.92207792207792cqw, calc(100% - 65rem));
    }
  }

  .circle-indent {
    display: inline-block;
    padding-left: 1.7em;
    text-indent: -1.7em;
  }
}

.sec-about-application {
  .c-inner {
    & .txt {
      +.c-pdf {
        margin-top: 1.1rem;
      }
    }
  }
}

.sec-about-tools {
  .c-inner {

    .txt {
      +.c-pdf {
        margin-top: 1.1rem;
      }
    }

  }
}

/*sec-news
---------------------------------------------------------*/
.sec-news {
  container-type: inline-size;

  .category-area {
    display: flex;
    align-items: center;

    .ttl {
      min-width: max-content;
      font-size: 1.8rem;
      font-weight: 700;
      padding-right: 3.3rem;
    }

    .inner {
      position: relative;
      width: 100%;

      &::after {
        content: '';
        position: absolute;
        translate: 0 -50%;
        top: 50%;
        left: 0;
        width: 0.1rem;
        height: 85%;
        background-color: #000;
      }
    }

    .categorys {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      padding-left: 3.3rem;

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

      .cate {
        display: grid;
        place-content: center;
        min-width: 8.5rem;
        font-size: 1.4rem;
        line-height: 1;
        color: #fff;
        background-color: var(--themecolor);
        border: max(1px, 0.1rem) solid transparent;
        padding: 1.2rem 0;
        border-radius: 4rem;
        transition: box-shadow 0.2s ease;

        &[data-theme="clear"] {
          min-width: calc(8.5rem * 2 + 1rem);
          color: var(--clr_txt);
          background-color: #fff;
          border: max(1px, 0.1rem) solid #000;
        }

        &[data-theme="all"] {
          min-width: 11.5rem;
        }

        &:hover {
          outline: 3px solid #005fcc !important;
          outline-offset: 3px;
          box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);
        }

        &.is-active {
          border: max(1px, 0.1rem) solid #000;
        }
      }

      &:has(.is-active) {
        .cate:not(.is-active) {
          opacity: 0.4;
        }

        .cate[data-theme="clear"] {
          opacity: 1;
          border: max(1px, 0.1rem) solid var(--clr_linegray);
        }
      }
    }
  }

  .c-newslist {

    .list {
      border: none;
    }

  }
}

.sec-news-detail {
  .group {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .date {
    flex-shrink: 0;
    font-size: 1.6rem;
  }

  .categorys {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    .cate {
      display: grid;
      place-content: center;
      font-size: 1.4rem;
      color: #fff;
      background-color: var(--themecolor);
      line-height: 1;
      padding: 0.4rem 1rem 0.3rem;
      border-radius: 3rem;
    }
  }

  .c-inner {
    .heading {
      margin-bottom: 7rem;
    }

    .wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 1.4rem;
      margin-bottom: 6.2rem;

      .image {
        width: calc((100% - 1.4rem)/ 2);
        border-radius: 1rem;
        overflow: hidden;
        height: max-content;

        &:only-child {
          width: 100%;
          max-width: 86.04651162790698%;
        }
      }
    }

    .content {
      p {
        font-size: 1.8rem;
        font-weight: 400;
        line-height: 2;
        letter-spacing: 0.03em;
      }

      a {
        color: var(--clr_txt);
        text-decoration: underline;
        text-underline-offset: 4px;

        &:hover {
          text-decoration: none;
        }
      }

      span[style="color: #000000"] {
        color: var(--clr_txt) !important;
      }

      .aligncenter {
        display: block;
        text-align: center;
        margin: 0 auto;
      }

      .alignright {
        display: block;
        margin-left: auto;
        margin-right: 0;
      }
    }
  }

  .pager {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 6rem;
    border-top: max(1px, 0.1rem) solid var(--clr_txt);
    padding: 4rem 2rem 0;
    margin-top: 7rem;

    &::before {
      content: '';
      position: absolute;
      translate: -50% 0;
      bottom: 0;
      left: 50%;
      width: 0.1rem;
      height: calc(100% - 4rem);
      background-color: var(--clr_txt);
    }

    &:has(> a:only-child)::before {
      display: none;
    }

    .btn-txt {
      position: relative;
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 1;
      margin-bottom: 1rem;

      &::before {
        content: '';
        position: absolute;
        translate: 0 -50%;
        top: 50%;
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 50%;
        color: #fff;
        background-color: var(--clr_txt);
      }

      &::after {
        content: '';
        position: absolute;
        translate: 0 -50%;
        top: 50%;
        width: 0.6rem;
        height: 1rem;
        background: url(../img/global_nav_arrow.svg) no-repeat;
        background-size: cover;
        transition: .2s ease;
      }
    }

    .ttl {
      font-size: 2rem;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .prev-btn {
      min-width: calc((100% - 6rem)/ 2);

      .btn-txt {
        padding-left: 3.2rem;

        &::before {
          left: 0;
        }

        &::after {
          rotate: 180deg;
          left: 0.7rem;
        }
      }
    }

    .next-btn {
      min-width: calc((100% - 6rem)/ 2);

      .btn-txt {
        text-align: right;
        padding-right: 3.2rem;

        &::before {
          right: 0;
        }

        &::after {
          right: 0.7rem;
        }
      }
    }

    a {
      color: var(--clr_txt);

      &:hover {

        .ttl {
          text-decoration: none;
        }

        &.prev-btn {
          min-width: calc((100% - 6rem) / 2);

          .btn-txt {
            &::after {
              translate: -0.3rem -50%;
            }
          }
        }

        &.next-btn {
          min-width: calc((100% - 6rem) / 2);

          .btn-txt {

            &::after {
              translate: 0.3rem -50%;
            }
          }
        }
      }
    }
  }
}

/*sec-contact
---------------------------------------------------------*/
.sec-contact {
  container-type: inline-size;

  .formWrap.confirmWrap,
  .formWrap.thanksWrap,
  .is-finish .wpcf7-response-output {
    display: none;
  }

  .about-table {
    tr {
      &:not(:last-of-type) {
        th {
          border-bottom: max(1px, 0.1rem) solid #fff;
        }

        td {
          border-bottom: max(1px, 0.1rem) solid var(--clr_linegray);
        }
      }
    }

    th {
      text-align: center;
      min-width: 18rem;
      font-size: 1.8rem;
      font-weight: 400;
      color: #fff;
      background-color: var(--clr_txt);
    }

    td {
      padding: 1.5rem 2.8rem;

      strong {
        font-size: 2.4rem;
        letter-spacing: 0;
      }
    }

    a {
      display: flex;
      align-items: center;
      font-weight: 700;
      color: var(--clr_txt);
      text-decoration: underline;
      text-underline-offset: 4px;
      width: max-content;
      margin-top: 0.5rem;

      img {
        width: 1.8rem;
        margin-left: 1rem;
      }

      &:hover {
        text-decoration: none;
      }
    }
  }

  .-en {
    letter-spacing: 0.2em;
  }

  .c-inner {
    .c-pdf {
      margin-top: 3rem;
    }
  }

  .input-content {

    &:not(:first-of-type) {
      margin-top: 8rem;
    }


    .tel-area {
      .ttl {
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-align: center;
        margin-bottom: 0.8rem;
      }

      .item {
        display: flex;
        border-radius: 1rem;
        overflow: hidden;
      }

      .box {
        min-width: max-content;
        background-color: var(--clr_bggray);
        padding: 2.6rem 4rem;

        .tel {
          font-size: 4rem;
          font-weight: 700;
          color: var(--themecolor);
          letter-spacing: -0.05em;

          span {
            font-size: 2.4rem;
            letter-spacing: 0.1em;
          }

          &:hover {
            text-decoration: underline;
            text-underline-offset: 4px;
          }
        }

        .txt {
          text-align: left;
          font-size: 1.6rem;
          line-height: 1.8;
          letter-spacing: -0.05em;
        }
      }

      .sub-ttl {
        display: grid;
        place-content: center;
        width: 30rem;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: 0.05em;
        color: #fff;
        background-color: var(--themecolor);
        padding: 3.5rem 1rem 3rem;
      }

      .attention {
        text-align: center;
        font-size: 1.8rem;
        letter-spacing: 0.03em;
        margin-top: 0.8rem;
      }
    }

    .holiday-area {
      max-width: 70%;
      padding: 2rem 1rem;
      border-radius: 1rem;
      background-color: var(--clr_bggray);
      margin: 6rem auto 0;

      .ttl {
        text-align: center;
        font-size: 2.2rem;
      }

      .txt {
        text-align: center;
      }
    }
  }

  .formBox {
    background-color: var(--clr_bggray);
    border-radius: 1rem;
    margin-top: 2rem;

    .item {
      display: flex;
      flex-wrap: wrap;
      gap: 3rem 2.5rem;
      padding: 3rem 3rem 3rem 2rem;

      &:not(:last-of-type) {
        border-bottom: max(1px, 0.1rem) solid var(--clr_txt);
      }

      dt {
        width: 26.4rem;
        font-size: 2rem;
        position: relative;
        padding: 1rem 6rem 0 0;

        span {
          position: absolute;
          top: 1.2rem;
          right: 0;
          display: grid;
          place-content: center;
          font-size: 1.8rem;
          font-weight: 700;
          color: var(--clr_txt);
          background: #fff;
          width: 6rem;
          height: 3rem;
        }

        &.req {

          span {
            color: #fff;
            background: var(--clr_txt);
          }
        }
      }

      dd {
        width: calc(100% - (26.4rem + 2.5rem));

        input:not([type="radio"]),
        select,
        textarea {
          font-family: var(--font-udgothic);
          width: 100%;
          padding: 1.5rem 1.3rem;
          background-color: #fff;
          border: max(1px, 0.1rem) solid var(--clr_linegray);
          font-size: 1.8rem;
          color: var(--clr_txt);
          letter-spacing: 0.05em;

          &[name="student-email01"] {
            max-width: 24.7rem;
          }

          &[name="student-email02"]::placeholder {
            letter-spacing: -0.1em;
          }
        }

        &:has([name="student-email01"]) {
          position: relative;

          .-en {
            position: absolute;
            top: 1.3rem;
            left: 25.7rem;
            font-size: 1.4rem;
          }
        }

        label {
          &:has(input[type="radio"]) {
            font-size: 1.8rem;
            color: var(--clr_txt);
          }
        }

        ::placeholder {
          font-family: var(--font-udgothic);
          font-size: 1.8rem;
          letter-spacing: 0.05em;
          color: #C3C3C3;
        }

        .wpcf7-list-item {
          width: 100%;

          +.wpcf7-list-item {
            margin-top: 1rem;
          }
        }

        select {
          position: relative;
          max-width: 32rem;
          background: url(../img/select_arrow.svg) no-repeat;
          background-size: 1.2rem 0.8rem;
          background-position: center right 1.5rem;
          background-color: #fff;

          &:disabled {
            background-color: var(--clr_bggray);
          }
        }

        &.-long {

          label {
            display: block;
            width: 100%;
          }
        }



        @container (max-width: 86rem) {

          &.-long {
            width: 100%;
          }
        }
      }
    }

    .wpcf7-not-valid-tip,
    .message-error {
      color: #DA0C00;
      font-size: 1.8rem;
      display: block;
      letter-spacing: 0.03em;
    }
  }

  .formBtn {
    display: flex;
    flex-direction: column;
    align-items: center;

    .btnCont {
      position: relative;
      margin: 3.5rem auto 0;

      &::before {
        content: '';
        position: absolute;
        translate: 0 -50%;
        top: 50%;
        right: 6.2rem;
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 50%;
        background-color: #fff;
        z-index: 1;
      }

      &::after {
        content: '';
        position: absolute;
        translate: 0 -50%;
        top: 50%;
        right: 7rem;
        width: 0.6rem;
        height: 1rem;
        background: url(../img/btn_gray_arrow.svg) no-repeat;
        background-size: cover;
        transition: .2s ease;
        z-index: 1;
      }

      &:has([disabled]) {
        opacity: .4;
        pointer-events: none;
      }

      &:hover {


        &::after {
          translate: 0.3rem -50%;
        }
      }

      &:has(#backBtn) {
        &::before {
          left: 6.2rem;
          background-color: var(--clr_txt);
        }

        &::after {
          rotate: 180deg;
          left: 7rem;
          background: initial;
          background-color: #fff;
          mask-image: url(../img/global_nav_arrow.svg);
          -webkit-mask-image: url(../img/global_nav_arrow.svg);
          mask-size: contain;
          -webkit-mask-size: contain;
          mask-repeat: no-repeat;
          -webkit-mask-repeat: no-repeat;
        }

        &:hover {
          &::after {
            translate: -0.3rem -50%;
          }
        }

        p {
          position: relative;
        }
      }
    }

    #confirmBtn,
    #submitBtn {
      cursor: pointer;
      display: block;
      min-width: 30rem;
      border-radius: 4rem;
      padding: 1.6rem 9rem 1.6rem 6rem;
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: #fff;
      background-color: var(--clr_txt);
      border: 0;
      transition: 0.2s ease;

      &:hover {
        box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);
      }
    }

    #submitBtn {
      text-align: center;
      padding: 1.6rem 6rem;
    }

    #backBtn {
      cursor: pointer;
      text-align: center;
      display: block;
      min-width: 30rem;
      border-radius: 4rem;
      padding: 1.6rem 6rem;
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: var(--clr_txt);
      background-color: #fff;
      border: max(1px, 0.1rem) solid var(--clr_txt);
      transition: 0.2s ease;

      &:hover {
        box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);
      }
    }
  }

  .policyBox {
    display: flex;
    border: max(1px, 0.1rem) solid var(--clr_txt);
    border-radius: 1rem;
    margin-top: 3.5rem;

    .ttl {
      display: grid;
      place-content: center;
      min-width: 21rem;
      font-size: 1.8rem;
      letter-spacing: 0.03em;
      padding: 0 1rem;
    }

    .txt {
      position: relative;
      padding: 2.1rem 2.2rem 2.1rem 3.6rem;

      &::before {
        content: '';
        position: absolute;
        translate: 0 -50%;
        top: 50%;
        left: 0;
        width: 0.1rem;
        height: 80%;
        background-color: var(--clr_txt);
      }

      a {
        color: var(--clr_txt);
        text-decoration: underline;
        text-underline-offset: 4px;

        &:hover {
          text-decoration: none;
        }
      }
    }
  }

  .confirmWrap {
    .formBox {
      dt {
        padding: 0;

        span {
          top: 0;
        }
      }

      dd {
        font-size: 1.8rem;
      }
    }

  }

  .wpcf7-spinner {
    position: absolute;
    translate: 0 100%;
    bottom: 2rem;
    left: 0;
  }
}

/*********************************/
/* フォントサイズ大 用のスタイル記述 */
/*********************************/
html.font-large {
  @media screen and (min-width: 781px) {
    @container (max-width: 86rem) {

      /* 共通パーツ */
      .c-pagination:has(.pages > :nth-child(2)) {
        flex-wrap: wrap;
        row-gap: 2rem;

        .pages {
          order: 1;
          width: 100%;
        }

        .prev,
        .next {
          order: 2;
          position: relative;
        }

        .prev {
          margin-right: auto;
        }

        .next {
          margin-left: auto;
        }
      }

      /* sec-support-howto */
      .sec-support-howto {
        .voice-box {
          .ttl-wrap {
            display: block;

            .group {
              min-width: initial;
              width: 100%;
            }
          }

          &.-voice_a {
            .image {
              margin: 0 auto;
            }
          }

          &.-voice_b {
            .image {
              margin: 0 auto;
            }
          }

          &.-voice_c {
            .image {
              margin: 0 auto;
            }
          }

          .group {
            max-width: 62rem;
            margin: 0 auto;
          }
        }
      }

      /* sec-support-enrolled */
      .sec-support-enrolled {
        .voice-box {
          .ttl-wrap {
            display: block;

            .group {
              min-width: initial;
              width: 100%;
            }
          }

          &.-voice_a {
            .image {
              margin: 0 auto;
            }
          }

          &.-voice_b {
            .image {
              margin: 0 auto;
            }
          }

          &.-voice_c {
            .image {
              margin: 0 auto;
            }
          }

          .group {
            max-width: 62rem;
            margin: 0 auto;
          }
        }
      }

      /* sec-volunteer-message */
      .sec-volunteer-message {
        .message-list {

          .onlypc {
            display: none;
          }

          .onlysp {
            display: block;
          }

          .item {
            flex-direction: column;

            &:nth-of-type(odd) {
              .wrap {
                margin: 0 auto;
              }
            }

            &:nth-of-type(even) {
              .image {
                margin: 0 auto;
              }

              .wrap {
                margin: 0 auto;
              }
            }

            .image {
              margin: 0 auto 2rem;
            }

            +.-item02,
            +.-item03,
            +.-item04,
            +.-item05 {
              .txt {
                max-width: initial;
              }
            }
          }
        }
      }

      /* sec-volunteer-join */
      .sec-volunteer-join {
        .join-list {

          .wrap {
            flex-direction: column;
          }
        }
      }

      /* sec-contact */
      .sec-contact {

        .input-content {
          .tel-area {

            .item {
              display: block;
            }

            .sub-ttl {
              width: 100%;
              text-align: center;
            }

            .box {
              display: grid;
              place-content: center;
            }
          }
        }

        .formBox {

          .item {

            dd {
              width: 100%;

            }
          }
        }

      }


    }
  }
}

/*********************************/
/* タブレット用のスタイル記述 */
/*********************************/
@media screen and (max-width: 1300px) {
  html {
    font-size: 0.76vw;
  }

  html.font-small {
    font-size: calc(0.76vw * 0.8);
  }

  html.font-large {
    font-size: calc(0.76vw * 1.2);
  }
}

/*********************************/
/* スマートフォン用のスタイル記述 */
/*********************************/
@media screen and (max-width: 375px) {}

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

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

  /*全体レイアウト
---------------------------------------------------------*/
  html {
    font-size: 1.5625vw;
  }

  html.font-small {
    font-size: calc(1.5625vw * 0.8);
  }

  html.font-large {
    font-size: calc(1.5625vw * 1.2);
  }


  body {
    font-size: 1.4rem;
    line-height: 1.5;
  }

  body.active {
    overflow: hidden;
  }

  .txt {
    line-height: 1.8;
  }

  /*header
-------------------------------------------------------*/
  #header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 10;

    .sideconts {
      padding: 3.4rem 0 0.8rem 2.6rem;

      .site-title {
        width: min(72%, 41.7rem);
        margin: 0;
      }


    }

    #openmenu-btn {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      width: 10rem;
      height: 10rem;
      background-color: var(--clr_txt);
      border-radius: 0 0 0 1.5rem;

      span {
        display: block;
        width: 4.1rem;
        height: 0.3rem;
        background-color: #fff;
      }

      &:hover {
        opacity: 0.8;
      }
    }

    #closemenu-btn {
      position: absolute;
      top: 1.6rem;
      right: 2.6rem;
      width: 5.2rem;
      height: 5.2rem;

      span {
        position: absolute;
        rotate: 45deg;
        translate: -50% -50%;
        top: 50%;
        left: 50%;
        display: block;
        width: 100%;
        height: 0.4rem;
        background-color: var(--clr_txt);

        &:last-child {
          rotate: 135deg;
        }
      }

      &:hover {
        opacity: 0.8;
      }
    }

    #menu {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      margin: 0;
      overflow-y: scroll;
      border: none;
      background-color: rgba(93, 93, 93, 0.8);

      nav {
        width: 90%;
        margin-left: auto;
        background-color: var(--clr_bggray);
        padding: 7.6rem 0 6rem;
      }
    }

    .accordion {
      max-width: 86%;
      margin: 0 auto;

      .item {
        a {
          min-height: 11.6rem;
          font-size: max(12px, 2.4rem);
          padding-right: 4rem;
        }
      }
    }

    .accordion-btn {
      min-height: 11.1rem;
    }

    .accordion-btn {

      span[aria-hidden] {
        width: 6rem;
        height: 6rem;
      }

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

      .accordion-toggle.is-active {

        span[aria-hidden] {

          &::before,
          &::after {
            rotate: 360deg;
          }
        }
      }
    }

    .accordion-link {
      min-height: 11.1rem;
      gap: 0;

      img {
        width: 6.1rem;
        margin-right: 1.2rem;
      }

      span {
        font-size: max(14px, 2.4rem);
      }
    }

    .guide {
      max-width: 86%;
      padding: 0;
      margin: 2rem auto 0;

      .link {
        +.link {
          margin-top: 2rem;
        }
      }

      a {
        width: max-content;
        font-size: max(14px, 2.2rem);
      }
    }

    .contact-btn {
      position: relative;
      display: block;
      width: max-content;
      font-size: max(16px, 2.6rem);
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #fff;
      background-color: #00679C;
      margin: 4rem auto 0;
      padding: 2.2rem 8.7rem 2.2rem 13.4rem;
      border-radius: 10rem;
      transition: background-color 0.2s ease;

      &::before {
        content: '';
        position: absolute;
        top: 3.4rem;
        left: 8.8rem;
        width: 3.1rem;
        height: 2.4rem;
        background: url(../img/contact_icon.svg) no-repeat;
        background-size: cover;
      }

      &:hover {
        box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, .2);
        background-color: #3893c0;
      }
    }
  }

  /*footer
---------------------------------------------------------*/
  #footer {
    padding: 8rem 0 14rem;

    .contact-btn {
      right: 0;
      font-size: max(16px, 2.6rem);
      padding: 2.3rem 4.6rem 3.3rem 9.2rem;
      border-radius: 3rem 0 0 0;


      &::before {
        content: '';
        position: absolute;
        top: 3.4rem;
        left: 4.6rem;
        width: 3.1rem;
        height: 2.4rem;
        background: url(../img/contact_icon.svg) no-repeat;
        background-size: cover;
      }

      &:hover {
        box-shadow: 0 -0.8rem 2rem rgba(0, 0, 0, .2);
        background-color: #3893c0;
      }
    }

    .logo {
      width: min(100%, 54rem);
      margin: 0 auto;
      border-radius: 6rem;
    }

    .officialsite {
      position: initial;
      margin: 4rem auto 0;
    }
  }

  /*共通 パーツ
---------------------------------------------------------*/
  .page-wrapper {
    display: block;

    main {
      max-width: initial;
    }

    main>article {
      max-width: initial;
      padding: 11.6rem min(3vw, 2rem) 18rem;
    }

    .breadcrumbs {
      gap: 2.4rem;

      li,
      a {
        font-size: max(14px, 2rem);
      }
    }

    .fontsize-switch {
      gap: 2rem;
      font-size: max(14px, 2rem);
      margin: 3rem 0;

      button {
        width: 6rem;
        height: 6rem;
        font-size: max(14px, 2.6rem);
        line-height: 6rem;
      }
    }
  }

  .c-newslist {
    translate: -2rem 0;
    width: 100vw;

    .ttl {
      font-size: max(16px, 3.2rem);
      padding: 0 4rem;
    }

    .list {
      border: none;
      border-top: max(1px, 0.1rem) solid var(--clr_linegray);
    }

    .no-message {
      font-size: 2.4rem;
    }

    .item {
      a {
        padding: 2rem 5.6rem 2rem 4rem;
      }

      .txt {
        font-size: max(14px, 2.8rem);
        /* line-height: 1.4; */
      }
    }

    .group {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;

      .date {
        font-size: max(12px, 2rem);
      }

      .categorys {
        gap: 0.5rem;

        .cate {
          min-width: 12rem;
          font-size: max(12px, 2rem);
          padding: 0.7rem 1.5rem 0.6rem;
        }
      }
    }
  }

  .c-pagination {
    flex-wrap: wrap;
    row-gap: 2rem;

    .pages {
      order: 1;
      width: 100%;
    }

    .prev,
    .next {
      order: 2;
      position: relative;
      font-size: max(14px, 2.2rem);
    }

    .prev {
      margin-right: auto;
      padding: 1.6rem 2rem 1.6rem 6rem;

      &::before {
        left: 2rem;
      }

      &::after {
        left: 2.7rem;
      }
    }

    .next {
      margin-left: auto;
      padding: 1.6rem 6rem 1.6rem 2rem;

      &::before {
        right: 2rem;
      }

      &::after {
        right: 2.7rem;
      }
    }
  }


  .c-index-btn {
    font-size: max(14px, 2.8rem);
    padding: 1.8rem 7.4rem 1.6rem 4.2rem;
    border-radius: 7rem;
  }

  .c-page-ttl {
    font-size: max(18px, 3.6rem);
    padding: 4.6rem 8%;
  }

  .c-conts-list {
    max-width: 90%;

    .c-link {
      font-size: max(14px, 2.8rem);
    }
  }

  .c-inner {
    max-width: 90%;

    .heading {
      font-size: max(16px, 3.2rem);
    }

    .major-heading {
      font-size: max(16px, 3.2rem);
      padding: 2rem;
      margin-bottom: 4rem;

      +.heading {
        margin-top: 4rem;
      }
    }

    .content {
      width: 100%;

      +.content {
        margin-top: 12rem;
      }
    }

    .lead {
      font-size: max(16px, 3.2rem);
      font-weight: 700;
      letter-spacing: 0.03em;
      margin-bottom: 0.8rem;
    }


    .txt {
      font-size: max(14px, 2.8rem);
      line-height: 1.8;
      padding-top: 1rem;

      +.lead {
        margin-top: 6rem;
      }
    }

    .c-enbox {

      .-en {
        line-height: 1.6;
      }
    }

    .c-pdf {
      max-width: 100%;
      width: 45rem;
      min-width: 75%;
      gap: 1.3rem;
      padding: 1rem 8.2rem 1rem 1rem;
      font-size: max(12px, 2.4rem);
      margin: 0 auto;

      .icon {
        min-width: 7.4rem;
      }

      &::before {
        right: 3.2rem;
        width: 2.8rem;
        height: 2.8rem;
      }

      &::after {
        right: 4.2rem;
        width: 0.8rem;
        height: 1.4rem;
      }

      +.lead {
        margin-top: 7rem;
      }
    }

    .c-anchor {
      max-width: 100%;
      width: 45rem;
      min-width: 75%;
      padding: 2.4rem 7rem 2.5rem 4rem;
      font-size: max(12px, 2.4rem);

      &::before {
        right: 3.2rem;
        width: 2.8rem;
        height: 2.8rem;
      }

      &::after {
        right: 3.9rem;
      }
    }

    .sub-lead {
      font-size: max(16px, 3rem);
      margin-top: 3rem;
    }
  }

  .c-flow {

    .ttl {
      font-size: max(16px, 3rem);
      padding: 1.5rem 3rem;


      .number {
        width: 4rem;
        height: 4rem;
        font-size: 2.4rem;
      }
    }

    .box {
      padding: 3rem;

      .sub-ttl {
        font-size: max(16px, 3rem);
      }

      .list-ttl {
        font-size: max(12px, 2.6rem);
      }

      .doc-list {
        margin-top: 1.5rem;

        .item {
          display: flex;
          gap: 1rem;

          +.item {
            margin-top: 2rem;
          }
        }

        .detail {
          flex-grow: 1;
        }

        .doc {
          font-size: max(12px, 2.4rem);
        }

        .note {
          max-width: initial;
          font-size: max(12px, 2.4rem);
          margin-top: 1rem;
        }
      }

      .attention {
        font-size: max(14px, 2.8rem);
      }

      .txt {
        max-width: initial;
        text-align: left;
      }

      .-indent {
        padding: 0.5em 0 0 1em;

        +.-indent {
          margin-top: 1.8rem;
        }
      }
    }
  }

  .c-other {
    flex-direction: column;

    .go-index {
      text-align: center;
      min-width: initial;
      width: 100%;
      font-size: max(16px, 3.2rem);
      padding: 3rem 1rem;
      border-radius: 1rem 1rem 0 0;

      span {
        &::before {
          translate: 0 0;
          bottom: 1.5rem;
          left: 104%;
        }

        &::after {
          translate: 0 0;
          bottom: 2.2rem;
          left: calc(104% + 1.1rem);
        }
      }

      &:hover {

        span {

          &::after {
            translate: 0.3rem 0;
          }
        }


      }

    }

    .list {
      padding: 2rem 4rem;
      border-radius: 0 0 1rem 1rem;

      .c-link {
        font-size: max(14px, 2.6rem);
        padding: 3rem 3rem 3rem 0;
      }
    }
  }

  .c-pagebtn {
    font-size: max(14px, 2.6rem);
    padding: 2.4rem 7rem 2.5rem 4rem;
    margin: 4rem auto 0;
  }


  /*総合扉TOP
---------------------------------------------------------*/
  .sec-sogo {
    .page-area {
      max-width: 93.33333333333333%;
      margin: 1.3rem auto 0;
      gap: 2rem;

      .link {
        width: 100%;
        min-height: 19rem;

        &:nth-of-type(n + 3) {
          margin-top: 0;
        }

        a {
          font-size: max(16px, 3rem);
          padding: 0 3rem 3rem;
        }

        .image {
          width: min(40%, 25rem);
        }

        &.-long {
          min-height: 19rem;

          a {
            align-items: center;
            justify-content: flex-end;
            padding: 0 3rem 3rem;

            &::before {
              translate: 0 0;
              top: initial;
              bottom: 2rem;
              right: 2.5rem;
            }

            &::after {
              translate: 0 0;
              top: initial;
              bottom: 3rem;
              right: 3.9rem;
            }

            &:hover {

              &::after {
                translate: 0.3rem 0;
              }


            }
          }

          .image {
            width: min(40%, 25rem);
          }

        }
      }
    }
  }


  /*sec-support
---------------------------------------------------------*/
  .sec-support {
    .c-page-ttl {
      padding: 4.2rem 0;

      .image {
        bottom: 0;
        left: 0;
        width: min(24%, 15rem);
      }
    }
  }

  .sec-support-accommodation {
    .example-list {
      display: block;

      .item {

        &.-problems {
          width: 100%;
          border-right: initial;
        }

        &.-support {
          .box {
            display: block;
          }
        }
      }

      .ttl {
        font-size: max(14px, 2.8rem);
        padding: 1.5rem 0;
        border-radius: 0;
      }



      .sub-ttl {
        gap: 1.5rem;
        font-size: max(14px, 2.8rem);
      }

      .icon {
        min-width: 6rem;
        width: 6rem;
        height: 6rem;
      }
    }

  }

  .sec-support-howto {
    .content {
      .c-pdf {
        min-width: 75%;
      }
    }

    .voice-box {
      .ttl-wrap {

        .group {
          min-width: initial;
          width: 100%;
        }

        .ttl {
          font-size: 2.8rem;
          margin: 2rem 0;
        }

        .sub-ttl {
          font-size: max(12px, 2.4rem);

          .icon {
            font-size: max(12px, 2.4rem);
            padding: 0.6rem 2rem;
          }
        }
      }

      &.-voice_a {
        .image {
          width: 24rem;
          margin: 0 auto;
        }
      }

      &.-voice_b {
        .image {
          width: 30rem;
          margin: 0 auto;
        }
      }

      &.-voice_c {
        .image {
          width: 26rem;
          margin: 0 auto;
        }
      }

      .accordion-btn {
        width: 80%;
        font-size: max(12px, 2.4rem);
        margin: 1rem auto 0;
        color: #fff;
        background-color: var(--clr_txt);
        border-radius: 6rem;
        padding: 3rem 0;
        border: max(2px, 0.2rem) solid var(--clr_txt);
        transition: box-shadow 0.3s ease;

        .arrow {
          width: 2.8rem;
          height: 2.8rem;

          &::after {
            width: 1.6rem;
            height: 1rem;
          }
        }
      }
    }
  }

  .sec-support-enrolled {
    .content {
      .c-pdf {
        min-width: 75%;
      }
    }

    .voice-box {
      .ttl-wrap {

        .group {
          min-width: initial;
          width: 100%;
        }

        .ttl {
          font-size: 2.8rem;
          margin: 2rem 0;
        }

        .sub-ttl {
          font-size: max(12px, 2.4rem);

          .icon {
            font-size: max(12px, 2.4rem);
            padding: 0.6rem 2rem;
          }
        }
      }

      &.-voice_a {
        .image {
          width: 24rem;
          margin: 0 auto;
        }
      }

      &.-voice_b {
        .image {
          width: 30rem;
          margin: 0 auto;
        }
      }

      &.-voice_c {
        .image {
          width: 26rem;
          margin: 0 auto;
        }
      }

      .accordion-btn {
        width: 80%;
        font-size: max(12px, 2.4rem);
        margin: 1rem auto 0;
        color: #fff;
        background-color: var(--clr_txt);
        border-radius: 6rem;
        padding: 3rem 0;
        border: max(2px, 0.2rem) solid var(--clr_txt);
        transition: box-shadow 0.3s ease;

        .arrow {
          width: 2.8rem;
          height: 2.8rem;

          &::after {
            width: 1.6rem;
            height: 1rem;
          }
        }
      }
    }
  }

  /*sec-admissions
---------------------------------------------------------*/
  .sec-admissions {
    .c-page-ttl {

      .image {
        left: 0;
        width: min(23%, 15rem);
      }
    }
  }

  .sec-admissions-consult {
    .event-table {
      border-radius: 1rem;
      overflow: hidden;
      margin-top: 5rem;

      th {
        font-size: 2.6rem;
        padding: 1.5rem 0;
      }

      td {
        padding: 3.2rem 2rem;

        .txt {
          max-width: initial;
        }
      }

      .sub-ttl {
        min-width: 10%;
        font-size: 2.4rem;
      }

      th.sub-ttl {
        padding: 3.2rem 2rem;
      }

      .icon {
        min-width: 13.8rem;
        padding: 0px 1rem;
      }
    }

  }

  /*sec-staff
---------------------------------------------------------*/
  .sec-staff {
    .c-page-ttl {

      .image {
        left: 0;
        width: min(20%, 14rem);
      }
    }
  }

  .sec-staff-consult {
    .restriction {
      font-size: max(16px, 3.2rem);
    }

    .sub-heading {
      font-size: max(14px, 2.8rem);
    }

    .txt {
      +.sub-heading {
        margin-top: 6rem;
      }
    }
  }

  .sec-staff-teachers {
    .restriction {
      font-size: max(16px, 3.2rem);
      margin-bottom: 1.5rem;
      padding: 0 0.1rem;
    }

    .sub-heading {
      font-size: max(16px, 3.2rem);
    }

    .sub-restriction {
      font-size: max(14px, 2.8rem);
    }

    .txt {
      +.sub-heading {
        margin-top: 6rem;
      }
    }

    .content {
      +.example {
        margin-top: 3rem;
      }

      .c-pagebtn {
        margin-top: 2rem;
      }
    }

    .example {
      .ttl {
        font-size: 2.6rem;
        padding: 3rem 1rem;

        .underline {
          text-decoration: underline;
          text-underline-offset: 4px;
        }
      }

      .box {
        position: relative;
        border-radius: 0 0 1rem 1rem;
        padding: 6rem 3rem 3rem;
        background-color: var(--clr_bggray);

        &::before {
          top: 2rem;
        }
      }

      .point {
        font-size: 3rem;
      }

      +.content {
        margin-top: 3.2rem;
      }

      +.restriction {
        margin-top: 10rem;
      }
    }

    .example-list {
      display: block;
      margin-bottom: 5rem;

      .item {

        &.-problems {
          width: 100%;
          border-right: initial;

          &:not(:first-of-type) {
            border-radius: 1rem 1rem 0 0;
            overflow: hidden;
          }
        }

        &:nth-of-type(n + 3) {
          border-top: none;
        }

        &.-support {
          width: 100%;
          border-radius: 0 0 1rem 1rem;
          overflow: hidden;

          &:not(:last-of-type) {
            margin-bottom: 6rem;
          }

          .box {
            display: block;
          }
        }
      }

      .ttl {
        font-size: max(14px, 2.8rem);
        padding: 1.5rem 0;
        border-radius: 0;

        &.onlysp {
          display: flex;
          visibility: visible;
        }
      }

      .sub-ttl {
        gap: 1.5rem;
        font-size: max(14px, 2.8rem);
      }

      .icon {
        min-width: 6rem;
        width: 6rem;
        height: 6rem;
      }
    }
  }

  /*sec-volunteer
---------------------------------------------------------*/
  .sec-volunteer {

    .c-page-ttl {

      .image {
        left: 0;
        width: 28cqw;
      }
    }
  }

  .sec-volunteer-message {
    .message-list {
      margin: 12rem auto 0;

      .item {
        display: block;

        +.item {
          margin-top: 12rem;
        }

        &:nth-of-type(even) {
          flex-direction: row;
        }

        &.-item01 {

          .image {
            margin: 0 auto 2rem;
          }

        }

        &.-item02 {

          .image {
            margin: 0 auto 2rem;
          }

          .txt {
            max-width: initial;
          }

        }

        &.-item03 {

          .image {
            margin: 0 auto 2rem;
          }

          .txt {
            max-width: initial;
          }

        }

        &.-item04 {

          .image {
            margin: 0 auto 2rem;
          }

          .wrap {
            max-width: 90%;
          }

          .txt {
            max-width: initial;
          }

        }

        &.-item05 {

          .image {
            margin: 0 auto 2rem;
          }

          .txt {
            max-width: initial;
          }
        }


        .wrap {
          max-width: 90%;
          margin: 0 auto;

          .ttl {
            display: grid;
            place-content: center;
            font-size: max(16px, 3rem);
            height: 12rem;
            padding: 1rem 3rem;
            margin: 0 auto 2rem;

            &::before {
              width: calc(100% - 7.9rem);
              border-radius: 0 12rem 12rem 0;
            }
          }

          .sector {
            width: 8rem;

            &::before {
              width: calc(8rem * 2);
              height: 18rem;
              aspect-ratio: initial;
            }
          }

          .txt {
            font-size: max(14px, 2.8rem);
            line-height: 1.8;
          }
        }
      }


    }
  }

  .sec-volunteer-join {
    .join-list {
      flex-direction: column;
      gap: 6.4rem;
      margin: 4rem auto;

      .item {
        width: 100%;

        &:nth-of-type(even) {
          .image {
            width: 14rem;
          }
        }
      }

      .ttl {
        font-size: 2.8rem;
        padding: 0.8rem 0;
        margin-bottom: 2rem;
      }

    }

    .image-group {
      display: flex;
      flex-wrap: wrap;
      gap: 1.4rem;
      margin-top: 4.8rem;

      .image {
        width: calc((100% - 1.4rem)/ 2);
        border-radius: 1rem;
        overflow: hidden;
        height: max-content;

        &:only-child {
          width: 100%;
          max-width: 86.04651162790698%;
        }
      }
    }
  }

  /*sec-about
---------------------------------------------------------*/
  .sec-about {

    .c-page-ttl {

      .image {
        top: 75%;
        left: 11.25cqw;
      }
    }
  }

  /*sec-news
---------------------------------------------------------*/
  .sec-news {
    .category-area {
      display: block;
      margin-top: 5rem;

      .ttl {
        text-align: center;
        font-size: max(12px, 2.4rem);
        padding: 0 0 1rem;
      }

      .inner {
        &::after {
          translate: -50% 0;
          top: 0;
          left: 50%;
          width: 30%;
          height: 0.1rem;
        }
      }

      .categorys {
        gap: 2rem 1.4rem;
        padding: 3rem 0 0;

        +.categorys {
          padding-top: 2rem;
          margin-top: 0;
        }

        .cate {
          min-width: initial;
          width: calc((100% - 1.4rem) / 2);
          font-size: max(12px, 2.4rem);
          line-height: 1;
          color: #fff;
          background-color: var(--themecolor);
          border: max(1px, 0.1rem) solid transparent;
          padding: 2rem 0;
          border-radius: 4rem;

          &[data-theme="clear"] {
            width: 100%;
          }
        }
      }
    }

    .c-newslist {
      translate: calc((((100vw - 90%)/2) + 2rem) * -1) 0;

      .list {
        border: none;
      }

    }
  }

  .sec-news-detail {
    .group {
      flex-direction: column;
      gap: 1rem;

      .date {
        font-size: max(12px, 2rem);
      }

      .categorys {

        .cate {
          min-width: 12rem;
          font-size: max(12px, 2rem);
          padding: 0.7rem 1.5rem 0.6rem;
        }
      }
    }

    .c-inner {
      .heading {
        font-size: 3.2rem;
        margin-bottom: 5rem;
      }

      .wrap {
        margin-bottom: 4rem;
      }

      .txt,
      p {
        font-size: max(14px, 2.8rem);
      }

      .content {
        p {
          font-size: max(14px, 2.8rem);
        }
      }
    }

    .pager {

      .btn-txt {
        font-size: max(14px, 2.8rem);

        &::before {
          width: 2.8rem;
          height: 2.8rem;
        }

        &::after {
          width: 0.8rem;
          height: 1.4rem;
        }
      }

      .ttl {
        font-size: max(14px, 2.4rem);
      }

      .prev-btn {
        .btn-txt {
          &::after {
            left: 0.8rem;
          }
        }
      }

      .next-btn {

        .btn-txt {
          &::after {
            right: 0.8rem;
          }
        }
      }
    }
  }

  /*sec-contact
---------------------------------------------------------*/
  .sec-contact {
    .about-table {

      tr {
        display: flex;
        flex-direction: column;
        border: max(1px, 0.1rem) solid var(--clr_txt);
      }

      th {
        min-width: initial;
        font-size: max(16px, 2.8rem);
        padding: 1rem 0;
      }

      td {
        padding: 1.5rem 2.8rem;

        strong {
          font-size: max(12px, 2.4rem);
          letter-spacing: 0;
        }

        .txt:only-of-type {
          padding-top: 0;
        }
      }

      a {
        font-size: max(12px, 2.4rem);
        margin-top: 0.5rem;

      }

      .c-inner {
        .c-pdf {
          margin-top: 3rem;
          background-color: var(--theme_about);
        }
      }


    }

    .input-content {

      &:not(:first-of-type) {
        margin-top: 12rem;
      }

      .tel-area {
        .ttl {
          font-size: 2.6rem;
        }

        .item {
          display: block;
        }

        .box {
          display: grid;
          place-content: center;
          text-align: center;
          padding: 2.6rem 2rem;

          .tel {
            font-size: 3.3rem;

            span {
              font-size: 2.6rem;
            }
          }

          .txt {
            text-align: center;
            font-size: max(12px, 2.4rem);
          }
        }

        .sub-ttl {
          text-align: center;
          width: 100%;
          font-size: 2.8rem;
          padding: 3.5rem 1rem;
        }

        .attention {
          text-align: justify;
          font-size: max(12px, 2.4rem);
        }
      }

      .holiday-area {
        max-width: initial;
        width: 100%;
        padding: 4rem 1rem;
        margin: 6rem auto 0;

        .ttl {
          font-size: 2.8rem;
        }
      }
    }


    .formBox {
      margin-top: 2rem;

      .item {
        padding: 6rem 3rem 6rem 2rem;

        &:not(:last-of-type) {
          border-bottom: max(1px, 0.1rem) solid var(--clr_txt);
        }


        dt {
          width: 100%;
          font-size: max(14px, 2.8rem);

          span {
            top: 0.8rem;
            font-size: 2.4rem;
            width: 8rem;
            height: 4rem;
          }
        }

        dd {
          width: 100%;

          input:not([type="radio"]),
          select,
          textarea {
            font-size: max(14px, 2.8rem);

            &[name="student-email01"] {
              max-width: 36rem;
            }
          }

          &:has([name="student-email01"]) {
            .-en {
              position: initial;
              display: block;
              font-size: 2.4rem;
              padding-top: 1rem;
            }
          }

          label {
            &:has(input[type="radio"]) {
              font-size: max(14px, 2.8rem);
            }
          }


          ::placeholder {
            font-size: max(12px, 2.1rem);
          }

          .wpcf7-list-item {

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

          select {
            max-width: 40rem;
            background-size: 2rem 1.6rem;
          }

          &.-long {

            label {
              display: flex;
              flex-direction: column;
              gap: 1rem;
            }
          }
        }
      }

      .wpcf7-not-valid-tip,
      .message-error {
        font-size: 2.4rem;
      }
    }

    .formBtn {

      .btnCont {
        margin: 4rem auto 0;

        &::before {
          right: 2.4rem;
          width: 2.8rem;
          height: 2.8rem;
        }

        &::after {
          right: 3.3rem;
          width: 0.8rem;
          height: 1.4rem;
        }

        &:has(#backBtn) {
          &::before {
            left: 2.4rem;
          }

          &::after {
            left: 3.3rem;
          }
        }
      }

      #confirmBtn,
      #submitBtn,
      #backBtn {
        min-width: 40rem;
        border-radius: 6rem;
        font-size: max(18px, 3.2rem);
        padding: 2rem 6rem;
      }
    }

    .policyBox {
      display: block;
      margin-top: 4rem;

      .ttl {
        min-width: initial;
        text-align: center;
        font-size: max(14px, 2.8rem);
        padding: 3rem 1rem;
      }

      .txt {
        padding: 3rem;

        &::before {
          translate: -50% 0;
          top: 0;
          left: 50%;
          width: 80%;
          height: 0.1rem;
        }

        a {
          color: var(--clr_txt);
          text-decoration: underline;
          text-underline-offset: 4px;

          &:hover {
            text-decoration: none;
          }
        }
      }
    }

    .confirmWrap {
      .formBox {
        dt {
          padding: 0;

          span {
            top: 0;
          }
        }

        dd {
          font-size: 2.6rem;
        }
      }

    }
  }
}