/* CSS Document */
#wrapper {
  overflow: hidden; }

#ul-header {
  margin-bottom: 10rem; }
  #ul-header .container .ul-img {
    background-image: url(../img/ul-header03-1.jpg); }

#news-school-life {
  margin-bottom: 10rem; }
  #news-school-life .more-btn {
    margin-bottom: 0; }

#event {
  padding-bottom: 6rem; }
  @media screen and (max-width: 991px) {
    #event {
      padding-bottom: 3rem; } }
  #event .h3-wave {
    position: relative; }
    #event .h3-wave::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 20%;
      margin: auto;
      display: inline-block;
      width: 157px;
      height: 137px;
      background-image: url("../img/event-enjoy.svg");
      background-size: contain;
      background-repeat: no-repeat;
      z-index: 1; }
      @media screen and (max-width: 1199px) {
        #event .h3-wave::after {
          top: 50%;
          left: 15%; } }
      @media screen and (max-width: 991px) {
        #event .h3-wave::after {
          width: 147px;
          height: 127px;
          top: 10%;
          left: 10%; } }
      @media screen and (max-width: 767px) {
        #event .h3-wave::after {
          width: 137px;
          height: 117px; } }
      @media screen and (max-width: 575px) {
        #event .h3-wave::after {
          width: 117px;
          height: 97px;
          top: -5%;
          left: 3%; } }
  #event .accordion {
    position: relative;
    z-index: 88; }
  @media screen and (max-width: 575px) {
    #event .accordion__button {
      width: 90%;
      margin-top: 0; } }
  #event .event__bg {
    background-color: #F1F1F1;
    background-image: repeating-linear-gradient(-45deg, white 0, white 1.5px, transparent 1.5px, transparent 8px);
    margin: 2rem auto;
    max-width: 1320px; }
    @media screen and (max-width: 1399px) {
      #event .event__bg {
        max-width: 1140px; } }
    @media screen and (max-width: 991px) {
      #event .event__bg {
        max-width: 960px; } }
    @media screen and (max-width: 767px) {
      #event .event__bg {
        max-width: 720px; } }
    @media screen and (max-width: 575px) {
      #event .event__bg {
        max-width: 540px; } }
  #event .event__area {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin: 0 -15px;
    padding: 4.5rem 0; }
    @media screen and (max-width: 1399px) {
      #event .event__area {
        padding: 4.5rem; } }
    @media screen and (max-width: 1199px) {
      #event .event__area {
        padding: 3rem;
        gap: 2rem; } }
    @media screen and (max-width: 991px) {
      #event .event__area {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem; } }
    @media screen and (max-width: 767px) {
      #event .event__area {
        padding: 3rem 1rem; } }
    @media screen and (max-width: 575px) {
      #event .event__area {
        padding: 2rem;
        gap: 1rem; } }
  #event .event-card {
    text-align: center;
    width: 100%; }
    #event .event-card .event-card__month {
      position: relative;
      width: 77px;
      height: 77px;
      margin: 0px auto -2.5rem;
      z-index: 2; }
      @media screen and (max-width: 575px) {
        #event .event-card .event-card__month {
          width: 60px;
          height: 60px; } }
    #event .event-card .event-card__media img {
      width: 100%; }
    #event .event-card .event-card__events {
      line-height: 1.5; }
  #event .event-card--green .event-card__media {
    border-bottom: #00AE64 6px solid; }
  #event .event-card--blue .event-card__media {
    border-bottom: #4170D9 6px solid; }
  #event .event-card--red .event-card__media {
    border-bottom: #D93069 6px solid; }

#uniforms {
  position: relative; }
  #uniforms::after {
    content: '';
    background: #4170D9;
    height: 100%;
    width: 100%;
    clip-path: ellipse(100% 324px at bottom);
    position: absolute;
    bottom: 0; }
  #uniforms .bg-grid {
    padding: 8rem 0; }
    @media screen and (max-width: 767px) {
      #uniforms .bg-grid {
        padding: 6rem 0; } }
  #uniforms .uniforms__area {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 5px;
    box-shadow: 4px 4px 0 #00AE64;
    padding: 6rem 10rem;
    z-index: 2; }
    @media screen and (max-width: 1199px) {
      #uniforms .uniforms__area {
        padding: 4rem 6rem; } }
    @media screen and (max-width: 767px) {
      #uniforms .uniforms__area {
        gap: 2rem;
        padding: 3rem; } }
    @media screen and (max-width: 575px) {
      #uniforms .uniforms__area {
        grid-template-columns: repeat(1, 1fr); } }
    #uniforms .uniforms__area > img {
      position: absolute;
      width: 150px;
      height: 205px;
      top: -90px;
      left: -40px;
      z-index: 3; }
      @media screen and (max-width: 991px) {
        #uniforms .uniforms__area > img {
          width: 140px;
          height: 195px; } }
      @media screen and (max-width: 767px) {
        #uniforms .uniforms__area > img {
          width: 130px;
          height: 185px;
          top: -150px;
          left: -25px; } }
      @media screen and (max-width: 575px) {
        #uniforms .uniforms__area > img {
          width: 110px;
          height: 150px;
          top: -125px;
          left: 0; } }
  #uniforms .uniforms__card {
    text-align: center;
    width: 100%; }
    #uniforms .uniforms__card .uniforms__season {
      margin-bottom: 1rem; }
      #uniforms .uniforms__card .uniforms__season img {
        max-width: 210px; }

#facilities {
  padding-bottom: 10rem;
  position: relative; }
  @media screen and (max-width: 767px) {
    #facilities {
      padding-bottom: 8rem; } }
  #facilities::before {
    content: '';
    background-image: url("../img/facilities-left.svg");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    width: 567px;
    height: 278px; }
    @media screen and (max-width: 767px) {
      #facilities::before {
        width: 367px;
        height: 178px; } }
  #facilities::after {
    content: '';
    background-image: url("../img/facilities-right.svg");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    right: -1px;
    width: 567px;
    height: 278px; }
    @media screen and (max-width: 767px) {
      #facilities::after {
        width: 367px;
        height: 181px; } }
  #facilities .h3-wave {
    padding-top: 8rem; }
    @media screen and (max-width: 767px) {
      #facilities .h3-wave {
        padding-top: 6rem; } }
    #facilities .h3-wave::before {
      background-image: url("../../img/wave-yellow.svg"); }
    #facilities .h3-wave span {
      color: #F3D347; }
  #facilities .map {
    text-align: center;
    position: relative;
    z-index: 1; }
    #facilities .map p {
      padding: 1rem 4rem;
      background-color: #F3D347;
      display: inline-block;
      margin: 0 auto 4rem;
      position: relative;
      z-index: 1; }
      @media screen and (max-width: 767px) {
        #facilities .map p {
          margin: 0 auto 3rem; } }
      #facilities .map p::after {
        content: '';
        background: #F3D347;
        height: calc(tan(50deg) * 50px / 2);
        width: 40px;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        position: absolute;
        bottom: -20px;
        right: 0;
        left: 0;
        margin: auto;
        z-index: -1; }
    #facilities .map div {
      background-color: #fff;
      padding: 1rem;
      border: 5px solid #F3D347;
      height: 525px; }
      @media screen and (max-width: 991px) {
        #facilities .map div {
          height: 400px; } }
      @media screen and (max-width: 767px) {
        #facilities .map div {
          height: 330px; } }
      @media screen and (max-width: 575px) {
        #facilities .map div {
          height: 250px; } }
      #facilities .map div iframe {
        width: 100%;
        height: 100%; }

#student-support {
  margin-bottom: 15rem; }
  @media screen and (max-width: 767px) {
    #student-support {
      margin-bottom: 8rem; } }
  #student-support .student-support__bg {
    background-image: url(../img/student-support-bg.jpg);
    background-size: cover;
    background-position: center;
    padding: 10rem 0; }
    @media screen and (max-width: 767px) {
      #student-support .student-support__bg {
        padding: 6rem 0; } }
  #student-support .student-support__text1 {
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.9; }
  #student-support .student-support__text2 {
    line-height: 1.75;
    margin-bottom: 4rem; }
    #student-support .student-support__text2 span {
      color: #4170D9;
      font-weight: bold; }
  #student-support .student-support__h4 {
    font-size: 2.4rem;
    font-weight: 500;
    margin-bottom: 2.5rem; }
    #student-support .student-support__h4::before {
      content: "\f0da";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      color: #4170D9;
      margin-right: 0.5rem; }
  #student-support .pdf-btn {
    display: flex;
    gap: 5rem; }
    @media screen and (max-width: 767px) {
      #student-support .pdf-btn {
        flex-wrap: wrap;
        gap: 0; } }
    @media screen and (max-width: 767px) {
      #student-support .pdf-btn a {
        width: 100%;
        margin-bottom: 1rem; } }

#club #ul-header .container .ul-img {
  background-image: url(../img/ul-header03-2.jpg); }
#club #news-club {
  margin-bottom: 10rem; }
  @media screen and (max-width: 767px) {
    #club #news-club {
      margin-bottom: 8rem; } }
  #club #news-club .more-btn {
    margin-bottom: 0; }
#club #club-policy {
  padding-bottom: 15rem;
  position: relative;
  z-index: 2; }
  @media screen and (max-width: 767px) {
    #club #club-policy {
      padding-bottom: 12rem; } }
  #club #club-policy p {
    margin-bottom: 3rem; }
#club .h3-box {
  font-size: 2.9rem;
  font-weight: 600;
  background-color: #00AE64;
  color: #fff;
  line-height: 1;
  border: solid 1.5px #fff;
  box-shadow: 4px 4px 0 #4170D9;
  width: 315px;
  margin: 0 auto 5rem;
  padding: 2rem 0;
  text-align: center;
  position: relative; }
  @media screen and (max-width: 575px) {
    #club .h3-box {
      font-size: 2.5rem;
      margin: 0 auto 2rem;
      padding: 1.5rem 0; } }
  #club .h3-box::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -210px;
    margin: auto;
    display: inline-block;
    width: 157px;
    height: 137px;
    background-image: url("../img/club-sports.svg");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1; }
    @media screen and (max-width: 991px) {
      #club .h3-box::before {
        width: 147px;
        height: 127px; } }
    @media screen and (max-width: 767px) {
      #club .h3-box::before {
        width: 137px;
        height: 117px; } }
    @media screen and (max-width: 575px) {
      #club .h3-box::before {
        width: 117px;
        height: 97px; } }
#club .h3-box--sports {
  background-color: #00AE64; }
  #club .h3-box--sports::before {
    background-image: url("../img/club-sports.svg"); }
    @media screen and (max-width: 767px) {
      #club .h3-box--sports::before {
        width: 127px;
        height: 107px;
        top: 45%;
        left: -100%; } }
#club .h3-box--culture {
  background-color: #D93069; }
  #club .h3-box--culture::before {
    background-image: url("../img/club-culture.svg"); }
    @media screen and (max-width: 767px) {
      #club .h3-box--culture::before {
        width: 127px;
        height: 107px;
        top: 45%;
        left: -100%; } }
#club .blog-announcement {
  text-align: center;
  margin-bottom: 4rem; }
#club .more-btn {
  margin-bottom: 5rem; }
@media screen and (max-width: 575px) {
  #club .accordion {
    margin: 10px 0; } }
#club .accordion .accordion__button {
  background: #008064;
  border: none;
  border-radius: 0;
  color: #fff;
  font-size: 20px;
  font-size: 2rem;
  text-align: left;
  width: 100%; }
  @media screen and (max-width: 575px) {
    #club .accordion .accordion__button {
      font-size: 18px;
      font-size: 1.8rem;
      padding: 1rem 2rem; } }
  #club .accordion .accordion__button::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 45%;
    background-image: url("../img/accordion-btn.svg");
    width: 20px;
    height: 11px;
    transform: rotate(180deg);
    transition: 0.3s; }
    @media screen and (max-width: 575px) {
      #club .accordion .accordion__button::after {
        top: 40%; } }
#club .accordion .accordion__button.active::after {
  transform: rotate(0deg); }
#club .accordion .accordion__content {
  background-color: #fff;
  margin: 0;
  padding: 5rem 5rem 8rem; }
  @media screen and (max-width: 991px) {
    #club .accordion .accordion__content {
      padding: 5rem; } }
  @media screen and (max-width: 575px) {
    #club .accordion .accordion__content {
      padding: 2rem; } }
  #club .accordion .accordion__content .accordion__content-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #club .accordion .accordion__content .accordion__content-inner .swiper-parent {
      position: relative;
      width: 45%;
      height: 100%;
      margin-right: 5%; }
      @media screen and (max-width: 991px) {
        #club .accordion .accordion__content .accordion__content-inner .swiper-parent {
          width: 100%;
          margin-right: 0;
          margin-bottom: 5rem; } }
      @media screen and (max-width: 575px) {
        #club .accordion .accordion__content .accordion__content-inner .swiper-parent {
          width: 100%;
          margin-right: 0;
          margin-bottom: 5rem; } }
      #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-slide .youtube-block {
        width: 100%;
        height: 341.75px;
        overflow: hidden; }
        @media screen and (max-width: 1199px) {
          #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-slide .youtube-block {
            height: 280.91px; } }
        @media screen and (max-width: 991px) {
          #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-slide .youtube-block {
            height: 452.16px; } }
        @media screen and (max-width: 767px) {
          #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-slide .youtube-block {
            height: 316.97px; } }
        @media screen and (max-width: 575px) {
          #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-slide .youtube-block {
            height: 230.58px; } }
        #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-slide .youtube-block iframe {
          width: 100%;
          height: 100%; }
      #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-slide img {
        width: 100%; }
      #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-button-next, #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-button-prev {
        color: #B2B2B2; }
      #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-pagination {
        bottom: -10%; }
        @media screen and (max-width: 991px) {
          #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-pagination {
            bottom: -8%; } }
        @media screen and (max-width: 575px) {
          #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-pagination {
            bottom: -12%; } }
        #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-pagination .swiper-pagination-bullet {
          height: 8px;
          width: 8px;
          margin: 0 0.5rem; }
          @media screen and (max-width: 1199px) {
            #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-pagination .swiper-pagination-bullet {
              margin: 0 0.45rem;
              height: 7px;
              width: 7px; } }
          @media screen and (max-width: 575px) {
            #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-pagination .swiper-pagination-bullet {
              height: 6px;
              width: 6px;
              margin: 0 0.4rem; } }
        #club .accordion .accordion__content .accordion__content-inner .swiper-parent .swiper-pagination .swiper-pagination-bullet-active {
          background: #00AE64; }
    #club .accordion .accordion__content .accordion__content-inner .club-card__content {
      width: 50%; }
      @media screen and (max-width: 991px) {
        #club .accordion .accordion__content .accordion__content-inner .club-card__content {
          width: 100%; } }
      #club .accordion .accordion__content .accordion__content-inner .club-card__content p {
        text-align: justify;
        letter-spacing: normal;
        margin-bottom: 3rem;
        line-height: 1.4; }
        @media screen and (max-width: 575px) {
          #club .accordion .accordion__content .accordion__content-inner .club-card__content p {
            margin-bottom: 2rem; } }
        #club .accordion .accordion__content .accordion__content-inner .club-card__content p .swiper-slide img {
          width: 100%; }
      #club .accordion .accordion__content .accordion__content-inner .club-card__content table {
        width: 100%; }
        #club .accordion .accordion__content .accordion__content-inner .club-card__content table tr {
          border-bottom: 1px solid #000; }
          #club .accordion .accordion__content .accordion__content-inner .club-card__content table tr th {
            width: 25%;
            color: #ffF;
            background-color: #00AE64;
            padding: 1rem 2rem; }
            @media screen and (max-width: 1199px) {
              #club .accordion .accordion__content .accordion__content-inner .club-card__content table tr th {
                width: 30%;
                padding: 1rem; } }
            @media screen and (max-width: 575px) {
              #club .accordion .accordion__content .accordion__content-inner .club-card__content table tr th {
                padding: 0.5rem 1rem; } }
          #club .accordion .accordion__content .accordion__content-inner .club-card__content table tr td {
            width: 75%;
            padding: 1rem 2rem;
            line-height: 1.4; }
            @media screen and (max-width: 1199px) {
              #club .accordion .accordion__content .accordion__content-inner .club-card__content table tr td {
                width: 70%;
                padding: 1rem; } }
            @media screen and (max-width: 575px) {
              #club .accordion .accordion__content .accordion__content-inner .club-card__content table tr td {
                padding: 0.5rem 1rem; } }
          #club .accordion .accordion__content .accordion__content-inner .club-card__content table tr:first-child {
            border-top: 1px solid #000; }
#club #sports {
  position: relative; }
  #club #sports::before {
    content: '';
    background-image: url("../img/club-sports-Illust.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 300px;
    height: 467px;
    display: block;
    position: absolute;
    top: -10%;
    right: 5%;
    z-index: 1; }
    @media screen and (max-width: 991px) {
      #club #sports::before {
        width: 250px;
        height: 350px;
        top: -5%;
        right: 0; } }
    @media screen and (max-width: 575px) {
      #club #sports::before {
        width: 150px;
        height: 250px;
        right: -10%; } }
  #club #sports::after {
    content: '';
    background-image: url("../img/club-sports-Illust.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 300px;
    height: 467px;
    display: block;
    position: absolute;
    bottom: 10%;
    right: -2%;
    z-index: 1; }
    @media screen and (max-width: 991px) {
      #club #sports::after {
        width: 250px;
        height: 350px; } }
    @media screen and (max-width: 575px) {
      #club #sports::after {
        width: 150px;
        height: 250px;
        right: -10%; } }
  #club #sports .more-btn a {
    background-color: #00AE64;
    border: 2px solid #00AE64; }
    #club #sports .more-btn a:hover {
      color: #00AE64;
      border: 2px solid #00AE64; }
  #club #sports .sports__bg {
    background-color: #BAF2DC;
    padding: 10rem 0 14rem;
    position: relative; }
    @media screen and (max-width: 767px) {
      #club #sports .sports__bg {
        padding: 6rem 0 10rem; } }
    @media screen and (max-width: 575px) {
      #club #sports .sports__bg {
        padding: 4rem 0 8rem; } }
    #club #sports .sports__bg::before {
      content: '';
      background-image: url("../img/wave-green.svg");
      background-repeat: repeat-x;
      background-size: 88px 35px;
      display: block;
      width: 100%;
      height: 35px;
      position: absolute;
      top: -34px; }
    #club #sports .sports__bg::after {
      content: '';
      background-image: url("../img/club-sports-Illust.svg");
      background-repeat: no-repeat;
      background-size: contain;
      width: 300px;
      height: 467px;
      display: block;
      position: absolute;
      bottom: 40%;
      left: -5%;
      z-index: 1; }
      @media screen and (max-width: 991px) {
        #club #sports .sports__bg::after {
          width: 250px;
          height: 350px; } }
      @media screen and (max-width: 575px) {
        #club #sports .sports__bg::after {
          width: 150px;
          height: 250px;
          right: -10%; } }
    #club #sports .sports__bg div.container {
      position: relative;
      z-index: 2; }
  #club #sports .news-box a {
    box-shadow: 6px 6px 0 #00AE64; }
    #club #sports .news-box a:hover {
      transform: translate(4px, 4px);
      box-shadow: 2px 2px 0 #00AE64; }
    #club #sports .news-box a:active {
      transform: translate(6px, 6px);
      box-shadow: 0 0 0 #00AE64; }
  #club #sports .news-box .news-title {
    color: #00AE64; }
#club #culture {
  position: relative; }
  #club #culture::before {
    content: '';
    background-image: url("../img/club-culture-Illust.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 300px;
    height: 467px;
    display: block;
    position: absolute;
    top: 25%;
    left: -4%;
    z-index: 1; }
    @media screen and (max-width: 991px) {
      #club #culture::before {
        width: 250px;
        height: 350px; } }
    @media screen and (max-width: 575px) {
      #club #culture::before {
        width: 150px;
        height: 250px;
        right: -10%; } }
  #club #culture::after {
    content: '';
    background-image: url("../img/club-culture-Illust.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 300px;
    height: 467px;
    display: block;
    position: absolute;
    bottom: 0%;
    right: -2%;
    z-index: 1; }
    @media screen and (max-width: 991px) {
      #club #culture::after {
        width: 250px;
        height: 350px; } }
    @media screen and (max-width: 575px) {
      #club #culture::after {
        width: 150px;
        height: 250px;
        right: -10%; } }
  #club #culture .culture__bg {
    background-color: #FFDDE3;
    padding: 10rem 0 14rem;
    position: relative; }
    @media screen and (max-width: 767px) {
      #club #culture .culture__bg {
        padding: 6rem 0 10rem; } }
    @media screen and (max-width: 575px) {
      #club #culture .culture__bg {
        padding: 4rem 0 8rem; } }
    #club #culture .culture__bg::before {
      content: '';
      background-image: url("../img/wave-pink.svg");
      background-repeat: repeat-x;
      background-size: 88px 35px;
      display: block;
      width: 100%;
      height: 35px;
      position: absolute;
      top: -34px; }
  #club #culture div.container {
    position: relative;
    z-index: 2; }
  #club #culture .accordion__button {
    background: #D86185; }
  #club #culture .swiper-pagination-bullet-active {
    background: #D93069; }
  #club #culture .club-card__content table tr th {
    background-color: #D93069; }








.swiper-button-prev,
.swiper-button-next {
  background-image: none !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 30px;
  color: #B2B2B2;
}

.swiper-button-next::after {
  content: '›';
  color: #B2B2B2;
  font-size: 30px;
}