/********************************************************/
/* side__menu */
/********************************************************/
.side__menu {
   position: fixed;
   right: 0;
   top: 50%;
   border-right-color: 0;
   transform: translateY(-50%);
   width: 100%;
   max-width: 50px;
   z-index: 999;

   @media screen and (max-width: 768px) {
      top: auto;
      bottom: -26px;
      display: grid;
      grid-template-columns: 33% 44% 23%;
      max-width: 100%;
   }
}

.side__list:nth-of-type(3) .side__picture {
   margin-top: 1rem;
   display: block;
   margin-inline: auto;
   max-width: 14px;

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

.side__list:nth-of-type(1) {
   @media screen and (max-width: 768px) {
      background-color: #f8b2d8;
   }
}

.side__list:nth-of-type(2) {
   @media screen and (max-width: 768px) {
      background-color: #8ccef2;
   }
}

.side__list:nth-of-type(3) {
   @media screen and (max-width: 768px) {
      background-color: #000;
   }
}

/********************************************************/
/* side__text */
/********************************************************/
.side__text {
   width: 100%;
   max-width: 15px;
   position: fixed;
   top: 50%;
   left: 1rem;
   transform: translateY(-50%);
   z-index: 999;

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

/********************************************************/
/* cv__btn */
/********************************************************/
.cv__btn1 {
   width: 100%;
   max-width: 200px;
   position: fixed;
   bottom: 2rem;
   right: 2rem;
   z-index: 200;

   @media screen and (max-width: 768px) {
      bottom: 4rem;
      right: 1rem;
      width: 33%;
      max-width: 170px;
   }
}

.cv__btn2 {
   width: 100%;
   max-width: 200px;
   position: fixed;
   bottom: 2rem;
   right: 2rem;
   z-index: 250;
   display: none;

   @media screen and (max-width: 768px) {
      bottom: 4rem;
      right: 1rem;
      width: 33%;
      max-width: 170px;
   }

   &.active {
      display: block;
   }
}

/********************************************************/
/* header */
/********************************************************/
.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: 1rem;
   z-index: 250;
   background-color: #fff;
}

.header__logo {
   width: 30%;
   max-width: 170px;
   margin-inline: auto;

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

/********************************************************/
/* mv */
/********************************************************/
.mv {
   width: 100%;

   @media screen and (max-width: 768px) {
      margin-top: 64px;
   }
}

.mv__picture {
   width: 100%;
}

.mv__inner {
   width: min(100% - 2rem, 1200px);
   margin-inline: auto;

   @media screen and (max-width: 768px) {
      width: min(100% - 0rem, 1200px);
   }
}

/********************************************************/
/* message */
/********************************************************/
.message__title {
   width: 48%;
   max-width: 585px;
   margin-inline: auto;

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

/********************************************************/
/* point */
/********************************************************/
.point1 {
   width: 100%;
   background-color: #fff3ff;
   padding-top: 8rem;
   padding-bottom: 8rem;
   clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0 100%);

   @media screen and (max-width: 768px) {
      padding-top: 4rem;
      padding-bottom: 4rem;
      clip-path: polygon(0 7%, 100% 0%, 100% 92%, 0 100%);
   }

   & .point__headline {
      font-size: clamp(1.5rem, 1.3438rem + 0.7813vw, 2.125rem);
      font-weight: 900;
      color: #d64386;
   }

   & .point__headline span {
      margin-top: 1rem;
      margin-bottom: 1rem;
      display: block;
      font-size: clamp(0.875rem, 0.8125rem + 0.3125vw, 1.125rem);
   }
}

.point1 .point__number {
   width: 100%;
   max-width: 180px;

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

.point1 .point__btn {
   margin-top: 2rem;
   width: 48%;
   max-width: 270px;
}


.point2 {
   width: 100%;
   background-color: #e7f3fc;
   padding-top: 8rem;
   padding-bottom: 8rem;
   clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0 100%);
   margin-top: -120px;

   @media screen and (max-width: 768px) {
      padding-top: 4rem;
      padding-bottom: 4rem;
      clip-path: polygon(0 7%, 100% 0%, 100% 92%, 0 100%);
      margin-top: -60px;
   }

   & .point__contents {
      & .point__text-box {
         order: -1;

         @media screen and (max-width: 768px) {
            order: 0;
         }
      }
   }

   & .point__headline {
      font-size: clamp(1.5rem, 1.3438rem + 0.7813vw, 2.125rem);
      font-weight: 900;
      color: #3fa6f2;
   }
}


.point2 .point__number {
   width: 100%;
   display: block;
   max-width: 205px;
   margin-bottom: 1.5rem;

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


.point3 {
   width: 100%;
   background-color: #fffced;
   padding-top: 8rem;
   padding-bottom: 8rem;
   clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0 100%);
   position: relative;
   margin-top: -100px;

   @media screen and (max-width: 768px) {
      padding-top: 4rem;
      padding-bottom: 4rem;
      clip-path: polygon(0 7%, 100% 0%, 100% 92%, 0 100%);
      margin-top: -50px;
   }

   & .point__headline {
      font-size: clamp(1.5rem, 1.3438rem + 0.7813vw, 2.125rem);
      font-weight: 900;
      color: #f8ad3b;
   }
}

.point__contents {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;

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

.point__text {
   margin-top: 2rem;
}

.point3 .point__number {
   width: 100%;
   display: block;
   max-width: 200px;
   margin-bottom: 1.5rem;

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



/********************************************************/
/* movie */
/********************************************************/
.movie {
   padding-top: 20px !important;
   padding-bottom: 0 !important;
}

.movie__title {
   width: 100%;
   max-width: 600px;
   margin-inline: auto;
   @media screen and (max-width: 768px) {
      max-width: 620px;
      width: 100%;
   }
}
.inner_box {
   display:flex;
   justify-content:center;
   margin-block:50px 0;
}
/********************************************************/
/* select */
/********************************************************/
.select {
   padding-bottom: 0 !important;
}

.select__title {
   width: 100%;
   max-width: 565px;
   margin-inline: auto;

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

.select__menu {
   margin-top: var(--margin);
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 1.5rem;

   @media screen and (max-width: 768px) {
      margin-top: var(--sp-margin);
      gap: 0.5rem;
   }
}

/********************************************************/
/* main */
/********************************************************/
.main__effect1 {
   position: absolute;
   top: 0;
   right: 0;
   max-width: 300px;
   width: 20%;
   z-index: -1;
}

.main__effect2 {
   position: absolute;
   top: 25%;
   left: 0;
   max-width: 300px;
   width: 20%;
   z-index: -1;
}

.main__effect3 {
   position: absolute;
   top: 40%;
   right: 0;
   max-width: 300px;
   width: 20%;
   z-index: -1;
}

.main__effect4 {
   position: absolute;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   max-width: 300px;
   width: 20%;
   z-index: -1;
}

.main__effect5 {
   position: absolute;
   bottom: 25%;
   right: 0;
   max-width: 300px;
   width: 20%;
   z-index: -1;
}

.main__effect6 {
   position: absolute;
   bottom: 0;
   left: 0;
   max-width: 300px;
   width: 20%;
   z-index: -1;
}

.infection__btn {
   width: 40%;
   max-width: 490px;
   margin-inline: auto;

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

/* program */
.program__title {
   width: 59%;
   max-width: 700px;
   margin-inline: auto;

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

.program__container {
   width: 100%;

   @media screen and (max-width: 768px) {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1rem;
      overflow: scroll;
   }
}

.program__contents {
   position: relative;
   margin-top: var(--margin);
   width: 100%;
   display: flex;

   @media screen and (max-width: 768px) {
      margin-top: var(--sp-margin);
      flex-direction: column;
      width: 300px;

   }
}

.program__contents:nth-of-type(1) {
   & .program__headline__text {
      display: inline-block;
      background: linear-gradient(transparent 60%, #ffdce5 60%);

      @media screen and (max-width: 768px) {
         width: 100%;
         text-align: center;
         display: inline;
      }
   }

   & .program__comment {
      position: absolute;
      bottom: 0;
      right: 2rem;
      max-width: 200px;
      width: 24%;
   }
}

.program__contents:nth-of-type(2) {
   & .program__headline__text {
      display: inline-block;
      background: linear-gradient(transparent 60%, #fff9c1 60%);

      @media screen and (max-width: 768px) {
         width: 100%;
         text-align: center;
         display: inline;
      }
   }

   & .program__comment {
      position: absolute;
      bottom: 0;
      right: 2rem;
      max-width: 155px;
      width: 19%;
   }
}

.program__contents:nth-of-type(3) {
   & .program__headline__text {
      display: inline-block;
      background: linear-gradient(transparent 60%, #d2edfa 60%);

      @media screen and (max-width: 768px) {
         width: 100%;
         text-align: center;
         display: inline;
      }
   }

   & .program__comment {
      position: absolute;
      bottom: 0;
      right: 2rem;
      max-width: 155px;
      width: 19%;
   }
}

.program__img {
   position: relative;
   z-index: 10;
   width: 40%;

   @media screen and (max-width: 768px) {
      width: 85%;
      margin-inline: auto;
   }
}

.program__text-box {
   width: 80%;
   border-radius: 30px;
   background: #fff;
   padding: 2rem 15rem 2rem 5rem;
   margin-left: -2rem;
   position: relative;
   z-index: 1;

   @media screen and (max-width: 1024px) {
      padding: 2rem 9rem 2rem 4rem;
      width: 90%;
   }

   @media screen and (max-width: 768px) {
      margin-top: -2rem;
      padding: 4rem 2rem 2rem 2rem;
      margin-left: 0;
      width: 100%;
      height: 15rem;
      border-radius: 15px;
   }
}

.program__headline {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1rem;
   font-size: clamp(1.375rem, 1.125rem + 1.25vw, 2.375rem);

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

.program__headline__icon {
   display: block;
   max-width: 65px;
   width: 10%;
   position: relative;
   z-index: 10;

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

.program__headline__icon--sp {
   display: none;

   @media screen and (max-width: 768px) {
      display: block;
      position: absolute;
      top: 44%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 15;
      width: 18%;
   }
}

.program__headline__small {
   font-size: clamp(0.875rem, 0.6563rem + 1.0938vw, 1.75rem);
}

.program__text {
   margin-top: 1rem;
   font-size: clamp(0.75rem, 0.6875rem + 0.3125vw, 1rem);
}

.program__comment {
   position: absolute;
   bottom: 0;
   right: 2rem;
   max-width: 190px;
   width: 20%;

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

/* support */
.support__btn {
   margin-top: var(--margin);
   width: 61%;
   max-width: 730px;
   margin-inline: auto;

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

/* event */
.event__title {
   margin-top: 8rem;
   width: 38%;
   max-width: 455px;
   margin-inline: auto;

   @media screen and (max-width: 768px) {
      margin-top: 4rem;
      width: 80%;
   }
}

.event__contents {
   margin-top: var(--margin);
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr;

   @media screen and (max-width: 768px) {
      grid-template-columns: 1fr;
      margin-top: var(--sp-margin);
   }
}

.event__item {
   position: relative;
}

.event__tag {
   position: absolute;
   left: 0;
   top: 0;
   background-color: #7058a1;
   padding: 0.2rem 1rem;
   color: #fff;
   font-weight: 700;
}

.event__text-box {
   position: relative;
   background-color: #fff;
   padding: 2rem;
   height:100%;
   @media screen and (max-width: 768px) {
      padding: 1rem 1rem 3rem;
   }
}

.event__date {
   display: inline;
   padding: 0.7rem 1rem;
   background-color: #52b5ad;
   color: #fff;
   font-weight: 700;
}

.event__sub__headline {
   margin-top: 1rem;
   font-size: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
   color: #ff488a;
}

.event__text {
   margin-top: 1rem;

   @media screen and (max-width: 768px) {
      margin-top: 0;
   }
}

.event__btn-box {
   display: grid;
   grid-template-columns: 1fr 1fr;
   width: 100%;
   background-color: #fff;
   font-size: clamp(0.5rem, 0.4063rem + 0.4688vw, 0.875rem);
   position: absolute;
   bottom: 0px;
   left: 50%;
   transform: translateX(-50%);
}

.event__btn {
   border-top: solid 1px #c9c9c9;

   &:first-of-type {
      border-right: solid 1px #c9c9c9;
   }

}

@media screen and (max-width: 768px) {
   .event__btn-box {
      bottom: 0;
   }
}


.event__btn__link {
   padding: 0.6rem;
   text-align: center;
}

.event__btn__link__arrow {
   vertical-align: text-bottom;
   display: inline-block;
   width: 15px;
   height: 15px;
   margin-left: 5px;

   @media screen and (max-width: 768px) {
      margin-left: .1rem;
      width: 10px;
      height: 10px;
   }
}

/* schedule */
.schedule__title {
   margin-top: 8rem;
   width: 70%;
   max-width: 505px;
   margin-inline: auto;

   @media screen and (max-width: 768px) {
      margin-top: 4rem;
      width: 90%;
   }
}

.schedule__nav {
   margin-top: var(--margin);
   width: 100%;
   background-color: #cae8e6;
   padding: 2rem;
   border-radius: 20px;

   @media screen and (max-width: 768px) {
      padding: 1rem;
      margin-top: var(--sp-margin);
   }
}

/********************************************************/
/* splide */
/********************************************************/
.splide {
   width: 100%;
   max-width: 850px;
   margin-inline: auto;
}

.slider2 {
   margin-top: var(--margin);
   width: 100%;

   @media screen and (max-width: 768px) {
      margin-top: var(--sp-margin);
      margin-right: calc(50% - 50vw);
      margin-left: calc(50% - 48vw);
      width: 109%;
      display: none;
   }
}

.splide__link {
   text-align: center;
   border-radius: 50%;
   background-color: #fff;
   padding: 0.5rem;
   height: 100px;
   width: 100px;
   display: grid;
   grid-template-columns: 1fr;
   place-items: center;
   font-weight: 300;

   @media screen and (max-width: 768px) {
      height: 70px;
      width: 70px;
   }
}

.splide__top-text {
   font-size: clamp(1.125rem, 0.9375rem + 0.9375vw, 1.875rem);
}

.splide__bottom-text {
   margin-top: -1rem;
   font-size: clamp(0.875rem, 0.8438rem + 0.1563vw, 1rem);
}

.splide__top-text--blue,
.splide__bottom-text--blue {
   color: #3380ca;
}

.splide__top-text--red,
.splide__bottom-text--red {
   color: #ff6666;
}

.splide__arrow--prev {
   left: -3em !important;

   @media screen and (max-width: 768px) {
      left: -2em !important;
   }
}

.learning .splide__arrow--prev {
   @media screen and (max-width: 768px) {
      left: -3em !important;
   }
}

.splide__arrow--next {
   right: -3em !important;

   @media screen and (max-width: 768px) {
      right: -2em !important;
   }
}


.splide__arrow {
   background: transparent !important;
}

.splide__arrow svg {
   fill: #FFF !important;
   width: 40px !important;
   height: 30px !important;
   background: #000 !important;
   border-radius: 50%;
   padding: .4rem !important;
}

.splide__pagination {
   display: none !important;
}

/* schedule__menu */
.schedule__menu {
   margin-top: 2rem;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 2rem;
   max-width: 1000px;
   margin-inline: auto;

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

.schedule__list {
   width: 100%;
}

.schedule__accordion__title {
   width: 100%;
   border-radius: 25px;
   background-color: #fff;
   border: solid 1px #000;

   & span {
      display: inline-block;
      background-color: #000;
      color: #fff;
      border-radius: 25px;
      padding: 0.5rem 1rem;
      margin-right: 1rem;
      font-weight: 700;
   }
}

.schedule__accordion__item {
   padding: 0.5rem 1rem;
   border-radius: 25px;
   border: solid 1px #000;
   background-color: #fff;
}

/* blog-card */
.blog-card__container {
   width: 100%;
   margin-top: var(--margin);
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   column-gap: 2rem;
   row-gap: 5rem;

   @media screen and (max-width: 768px) {
      margin-top: var(--sp-margin);
      grid-template-columns: 1fr 1fr;
      column-gap: 1rem;
      row-gap: 2rem;
   }
}

.blog-card__img {
   position: relative;
}

.blog-card__tag {
   position: absolute;
   left: 0;
   top: 0;
   padding: 0.2rem 1rem;
   color: #fff;
   font-weight: 700;
   font-size: clamp(0.625rem, 0.5625rem + 0.3125vw, 0.875rem);
}

.blog-card__tag--all {
   background-color: #7058a1;
}

.blog-card__tag--beauty {
   background-color: #ed454a;
}

.blog-card__tag--barber {
   background-color: #77bfdc;
}

.blog-card__tag--artist {
   background-color: #ce91bd;
}

.blog-card__date {
   text-align: center;
   width: 100%;
   background-color: #52b5ad;
   font-weight: 700;
   color: #fff;
   padding: 0.2rem;
   font-size: clamp(0.625rem, 0.5625rem + 0.3125vw, 0.875rem);
}

.blog-card__text-box {
   position: relative;
   padding: 1rem;
   background-color: #fff;
}

.blog-card__title {
   color: #ff488b;
   font-size: clamp(0.75rem, 0.6563rem + 0.4688vw, 1.125rem);
}

.blog-card__text {
   margin-top: 1rem;
   height: 7rem;
   font-size: clamp(0.625rem, 0.5625rem + 0.3125vw, 0.875rem);
}

.blog-card__btn-box {
   display: grid;
   grid-template-columns: 1fr 1fr;
   width: 100%;
   background-color: #fff;
   font-size: clamp(0.5rem, 0.4063rem + 0.4688vw, 0.875rem);
   position: absolute;
   bottom: -20px;
   left: 50%;
   transform: translateX(-50%);
}

/********************************************************/
/* live */
/********************************************************/
.live {
   background-color: #ef8d9c;
}

.live__title {
   width: 90%;
   max-width: 890px;
   margin-inline: auto;

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

.live__text__top {
   margin-top: 2rem;
   text-align: center;
   color: #000;
   max-width: 625px;
   margin-inline: auto;

   @media screen and (max-width: 768px) {
      text-align: left;
      width: 70%;
      margin-inline: 0;
      margin-right: auto;
   }
}

.live__container {
   margin-top: 2rem;
   background-color: #fff;
   padding: 2rem;
   border-radius: 20px;

   @media screen and (max-width: 768px) {
      padding: 1rem;
      margin-top: 1rem;
   }
}

.live__container:nth-of-type(2) {
   & .live__contents__item {
      display: grid;
      grid-template-columns: 1fr 30%;
      gap: 2rem;
      border-radius: 20px;

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

   & .live__text-box {
      order: -1;

      @media screen and (max-width: 768px) {
         order: 0;
      }
   }
}

.live__contents__item {
   display: grid;
   grid-template-columns: 30% 1fr;
   gap: 2rem;

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

.live__headline {
   color: #ff488b;
   font-size: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
}

.live__contents {
   position: relative;
}

.live__img__top {
   position: absolute;
   top: -223px;
   right: 0;
   max-width: 150px;
   width: 25%;

   @media screen and (max-width: 768px) {
      width: 30%;
      top: -135px;
      right: -15px;
   }
}

.live__btn {
   margin-top: 1rem;
   max-width: 160px;
   width: 50%;
}

/********************************************************/
/* live__accordion */
/********************************************************/
.live__accordion {
   margin-top: 2rem;
   width: 100%;
}

.live__accordion__title {
   position: relative;
   width: 100%;
   background-color: #ff488a;
   color: #fff;
   padding: 0.5rem;
   text-align: center;
   font-weight: 700;
}

.live__accordion__contents__item {
   margin-top: 1rem;
   color: #000;
}

.live__accordion__title::before {
   content: '';
   position: absolute;
   top: 50%;
   right: 29px;
   transform: translateY(-50%);
   height: 20px;
   width: 2px;
   background-color: #fff;
   opacity: 1;
   display: block;
}

@media screen and (max-width: 768px) {
   .live__accordion__title::before {
      height: 15px;
   }
}

.live__accordion__title::after {
   content: '';
   position: absolute;
   top: 50%;
   right: 20px;
   transform: translateY(-50%);
   height: 2px;
   width: 20px;
   background-color: #fff;
   font-size: 14px;

   @media screen and (max-width: 768px) {
      right: 22px;
      width: 15px;
   }
}

@media screen and (max-width: 768px) {
   .live__accordion__title::after {
      right: 22px;
      width: 15px;
   }
}

/* オープン時にアニメーションを設定 */
details[open] {
   .live__accordion__contents__item__text {
      animation: fadeIn 0.5s ease;
   }

   .live__accordion__title::before {
      opacity: 0;
      display: none;
      /* opacityとdisplayを同時に指定するとtransitionが使用できる */
      transition: opacity 0.5s, display 0.5s allow-discrete;
   }

   .live__accordion__title {
      border-bottom: none;
   }

   .story__accordion__contents__item__text {
      animation: fadeIn 0.5s ease;
   }

   .story__accordion__title::before {
      opacity: 0;
      display: none;
      /* opacityとdisplayを同時に指定するとtransitionが使用できる */
      transition: opacity 0.5s, display 0.5s allow-discrete;
   }

   .question__accordion__contents__item__text {
      animation: fadeIn 0.5s ease;
   }

   .question__accordion__title::before {
      opacity: 0;
      display: none;
      /* opacityとdisplayを同時に指定するとtransitionが使用できる */
      transition: opacity 0.5s, display 0.5s allow-discrete;
   }
}

@keyframes fadeIn {
   0% {
      opacity: 0;
      /* 透明 */
      transform: translateY(-10px);
      /* 上から表示 */
   }

   100% {
      opacity: 1;
      transform: none;
   }
}

.live__table__headline {
   width: 100%;
   font-size: clamp(1rem, 0.9688rem + 0.1563vw, 1.125rem);
   padding: .5rem 1rem;
   background-color: #fbecf4;
}

.live__table {
   width: 100%;
}

.live__table__contents {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   align-items: start;
   padding: .5rem 1rem;
   border-bottom: 1px solid #e7e7e7;
   font-size: clamp(0.875rem, 0.8438rem + 0.1563vw, 1rem);
}

.live__table__header {
   width: 15%;
   font-weight: 700;
   text-align-last: left;
   color: #ff488b;

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

.live__table__data {
   width: 85%;

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





/********************************************************/
/* contact */
/********************************************************/
.contact {
   position: relative;
   background-image: url(../images/contact_bg.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   z-index: -10;
}

.contact__inner {
   position: relative;
}

.contact__title {
   max-width: 460px;
   width: 50%;
   margin-inline: auto;

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

.contact__text {
   text-align: center;
   margin-top: var(--margin);
   color: #000;

   @media screen and (max-width: 768px) {
      margin-top: var(--sp-margin);
   }
}

.contact__btn-box {
   max-width: 900px;
   margin-inline: auto;
   margin-top: var(--margin);
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
   align-items: center;

   @media screen and (max-width: 768px) {
      margin-top: var(--sp-margin);
      grid-template-columns: 1fr;
      gap: 0;
   }
}

.contact__img__left {
   position: absolute;
   left: -3rem;
   bottom: -8rem;
   max-width: 200px;
   width: 17%;
   z-index: -5;

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

.contact__img__right {
   position: absolute;
   right: -3rem;
   bottom: -8rem;
   max-width: 200px;
   width: 17%;
   z-index: -5;

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

/********************************************************/
/* campus */
/********************************************************/
.campus {
   position: relative;
   background-image: url(../images/campus_bg.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   z-index: -10;
}

.campus__title {
   width: 100%;
   max-width: 680px;
   margin-inline: auto;

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

.campus__contents {
   margin-top: var(--margin);
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;

   @media screen and (max-width: 768px) {
      grid-template-columns: 1fr 1fr;
      margin-top: var(--sp-margin);
   }
}

.campus__img:nth-of-type(3) {
   @media screen and (max-width: 768px) {
      grid-column: 1 / -1;
      /* このアイテムが全列を占めるように */
      width: 50%;
      margin-inline: auto;
   }
}

/********************************************************/
/* learning */
/********************************************************/
.learning {
   background: linear-gradient(90deg,
         rgba(130, 133, 212, 0.4) 0%,
         rgba(255, 159, 198, 0.4) 50%,
         rgba(255, 159, 198, 0.4) 100%);
}

.learning__title {
   max-width: 680px;
   width: 70%;
   margin-inline: auto;

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

.learning__text__top {
   margin-top: var(--margin);
   text-align: center;
   color: #000;

   @media screen and (max-width: 768px) {
      margin-top: var(--sp-margin);
   }
}

.learning__container {
   display: none;

   @media screen and (max-width: 768px) {
      margin-top: var(--sp-margin);
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      gap: 2rem;
      overflow: scroll;
      width: 100%;
   }
}

.learning__contents {
   @media screen and (max-width: 768px) {
      display: block;
      width: 250px;
   }
}

.learning__text-box {
   position: relative;
   z-index: 10;
   margin-top: -50px;
   background-color: #fff;
   padding: 1rem;
   border-radius: 10px;
}

.learning__headline {
   font-size: clamp(0.875rem, 0.7813rem + 0.4688vw, 1.25rem);
   font-weight: 700;
   display: flex;
   align-items: center;
}

.red-tag:before {
   content: "";
   display: inline-block;
   margin-right: 0.5rem;
   width: 10px;
   height: 70px;
   background-color: #ed454a;
}

.blue-tag:before {
   content: "";
   display: inline-block;
   margin-right: 0.5rem;
   width: 10px;
   height: 70px;
   background-color: #9bd0e5;
}

.purple-tag:before {
   content: "";
   display: inline-block;
   margin-right: 0.5rem;
   width: 10px;
   height: 70px;
   background-color: #ce91bd;
}

.asagi-tag:before {
   content: "";
   display: inline-block;
   margin-right: 0.5rem;
   width: 10px;
   height: 70px;
   background-color: #00a3af;
}

.learning__headline__span {
   font-size: clamp(0.875rem, 0.8438rem + 0.1563vw, 1rem);
}

.learning__text {
   margin-top: 1rem;
   color: #000;
}

.learning__btn {
   margin-top: 1rem;
   width: 100%;
   text-align: right;
}

.learning__btn__link {
   font-size: clamp(0.875rem, 0.8438rem + 0.1563vw, 1rem);
}

.learning__arrow {
   width: 15px;
   height: 15px;
   vertical-align: text-top;
   display: inline-block;
}

/********************************************************/
/* footer */
/********************************************************/
.footer {
   width: 100%;
   padding-top: 3rem;
   padding-bottom: 3rem;

   @media screen and (max-width: 768px) {
      padding-bottom: 5rem;
   }
}

.footer__contents {
   width: 100%;
   display: grid;
   grid-template-columns: 55% 1fr;

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

.footer__logo {
   width: 46%;
   max-width: 275px;

   @media screen and (max-width: 768px) {
      width: 60%;
      margin-inline: auto;
   }
}

.footer__address-box {
   margin-top: 2rem;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;

   @media screen and (max-width: 768px) {
      grid-template-columns: 1fr;
      text-align: center;
   }
}

.footer__address {
   font-style: normal;
   font-weight: 400;
   color: #000;
}

.footer__text__link {
   font-weight: 400;
}

.footer__btn {
   max-width: 200px;
   width: 100%;

   @media screen and (max-width: 768px) {
      margin-inline: auto;
   }
}

.footer__sns-box {
   margin-left: auto;
   text-align: center;
   width: 100%;
   max-width: 330px;

   @media screen and (max-width: 768px) {
      width: 80%;
      margin-left: 0;
      margin-inline: auto;
   }
}

.footer__sns__title {
   color: #7058a3;
}

.footer__sns__menu {
   margin-top: 1rem;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   gap: 2rem;
   place-items: center;

   @media screen and (max-width: 768px) {
      gap: 1.5rem;
   }
}

.footer__copyright {
   margin-top: 1rem;
   display: block;
   color: #999;
   font-size: 14px;

   @media screen and (max-width: 768px) {
      margin-top: 2rem;
      text-align: center;
      font-size: 12px;
   }
}

/********************************************************/
/* TAB */
/********************************************************/
.tab {
   position: relative;
   width: 100%;
   margin: 0 auto;
   margin-top: 120px;
   @media screen and (max-width: 768px) {
      margin-top: 60px;
   }
}

/* タブメニュー */
.tab__menu {
   display: flex;
   align-items: flex-end;
   /* メニューを下揃え */
   justify-content: center;
   /* メニュー切替時にタブがズレないように */
   padding: 0;
   margin: 0;
}

.tab__menu-item {
   list-style: none;
   cursor: pointer;
   transition: all 0.3s;
   /* アニメーション */
}

.tab__menu-item:last-of-type {
   margin-right: 0px;
}

.select__link:hover {
   opacity: 1 !important;
}

.select__link img:hover {
   opacity: 1 !important;
}

/* タブパネル */
.tab__panel {
   width: 100%;
}

.tab__panel-box001 {
   display: none;
}

.tab__panel-box002 {
   display: none;
}

/* is-showがついている時のスタイル */
.tab__panel-box.is-show {
   display: block;
}

.tab__panel-box.is-show .pre-academy {
   display: block;
}

.main {
   border-top: solid 4px #ef8d9c;
   background-color: #fff3ff;
   position: relative;
   z-index: 10;
}

.pre-academy {
   border-top: solid 4px #70bde1;
   background-color: #ddf1fc;
   position: relative;
   z-index: 10;
}

.tab__inner {
   padding-top: var(--padding);
   padding-bottom: var(--padding);

   @media screen and (max-width: 768px) {
      padding-top: var(--sp-padding);
      padding-bottom: var(--sp-padding);
   }
}

.pre-academy_title1 {
   max-width: 1000px;
   margin-inline: auto;
   width: 100%;
}

.pre-academy__top-contents {
   margin-top: var(--margin);
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr;

   @media screen and (max-width: 768px) {
      margin-top: var(--sp-margin);
      grid-template-columns: 1fr;
   }
}

.pre-academy_title2 {
   margin-top: var(--margin);
   width: 100%;
   max-width: 290px;
   margin-inline: auto;

   @media screen and (max-width: 768px) {
      margin-top: var(--sp-margin);
   }
}

.pre-academy__center-contents {
   margin-top: var(--margin);
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 1rem;

   @media screen and (max-width: 768px) {
      margin-top: var(--sp-margin);
      grid-template-columns: 1fr 1fr;
   }
}

.pre-academy_title3 {
   margin-top: var(--margin);
   width: 100%;
   max-width: 205px;
   margin-inline: auto;

   @media screen and (max-width: 768px) {
      margin-top: var(--sp-margin);
   }
}

.pre-academy__bottom-contents {
   margin-top: var(--margin);
   width: 100%;

   @media screen and (max-width: 768px) {
      margin-top: var(--sp-margin);
   }
}

.pre-academy__bottom-contents__img {
   width: 100%;

   @media screen and (max-width: 1240px) {
      display: block;
      width: 100%;
      overflow: scroll;
   }

   & img {
      width: 1200px;
      display: block;
      /* 画像が横に伸びるのを防ぐ */
      max-width: none;
      /* これはimgタグに適用されるデフォルトのmax-widthを上書きします */
   }
}

.pre-academy__top-contents__text-box {
   background-color: #fff;
   padding: 1.5rem;
}

.pre-academy__top-contents__text-box__title {
   color: #ff488b;
   font-size: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
}

.pre-academy__top-contents__text-box__text {
   margin-top: 1rem;
   font-size: 14px;
}



/********************************************************/
/* 追加 */
/********************************************************/
table.qa,
td,
th {
   border: none;
   border-collapse: collapse;
}