@charset "UTF-8";
@keyframes ciecleRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ===============================================================
My Reset
=============================================================== */
* {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}
@media screen and (max-width: 1100px) {
  html {
    font-size: 0.9090909091vw;
  }
}
@media screen and (max-width: 820px) {
  html {
    font-size: 1.2195121951vw;
  }
}
@media screen and (max-width: 480px) {
  html {
    font-size: 2.0833333333vw;
  }
}

body {
  font-size: 1.6rem;
  font-family: YakuHanJP, "Roboto", "Noto Sans JP", sans-serif;
  color: #333;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* ===============================================================
cursor
=============================================================== */
.cursor {
  position: fixed;
  top: -1rem;
  left: -1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 100vh;
  background: gray;
  z-index: 1000;
  transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s;
  transform: translate(0, 0);
  pointer-events: none;
}
@media screen and (max-width: 820px) {
  .cursor {
    display: none;
  }
}
.cursor--hover {
  top: -2rem;
  left: -2rem;
  width: 4rem;
  height: 4rem;
  background: rgba(255, 255, 0, 0.8);
}

/* ===============================================================
common
=============================================================== */
.inner {
  max-width: 1100px;
  margin: 0 auto;
}

.bgBlue {
  background: #02395e;
}

.bgBlack {
  background: #333;
}

.secTtl {
  text-align: center;
}
.secTtl img {
  height: 3.2rem;
}
@media screen and (max-width: 820px) {
  .secTtl img {
    height: 2.4rem;
  }
}

@media screen and (min-width: 821px) {
  .sp-only {
    display: none;
  }
}
@media screen and (max-width: 820px) {
  .pc-only {
    display: none;
  }
}
.applyBtn a {
  display: inline-block;
  background: linear-gradient(45deg, #00bef0, #0050ff, #fa02e6 70%) left center/150% 150% no-repeat;
  color: #fff;
  font-weight: bold;
  padding: 1.5rem 2rem;
  border-radius: 100vh;
  transition: 0.3s;
  border: 0.3rem solid #fff;
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.3);
}
.applyBtn a:hover {
  background-position: right center;
}

.scrollStop {
  overflow: hidden;
}

.fontBold {
  font-weight: bold;
}

.fontLarge {
  font-size: 1.2em;
}

/* ===============================================================
header
=============================================================== */
.header {
  padding: 0 1rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 100;
}

.header_in {
  display: flex;
  align-items: center;
  height: 8rem;
}
@media screen and (max-width: 820px) {
  .header_in {
    height: 5rem;
  }
}

.headerLogo {
  width: 20rem;
}

.headerNav {
  margin-left: auto;
}
@media screen and (max-width: 820px) {
  .headerNav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.9);
  }
}
.headerNav ul {
  font-size: 2rem;
  display: flex;
  align-items: center;
  gap: 1em;
}
@media screen and (max-width: 820px) {
  .headerNav ul {
    font-size: 3rem;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
}
.headerNav li:not(:last-child) a {
  font-weight: bold;
  color: #333;
}
.headerNav li:not(:last-child) a:hover {
  color: #fa02e6;
}
.headerNav .applyBtn a {
  line-height: 1;
}

/* ===============================================================
spBtn
=============================================================== */
.spBtn {
  display: none;
}
@media screen and (max-width: 820px) {
  .spBtn {
    display: block;
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 4rem;
    height: 3rem;
    z-index: 100;
  }
}
.spBtn span {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 0.5rem;
  width: 100%;
  background: #02395e;
  border-radius: 100vh;
  transition: 0.3s;
}
.spBtn span:nth-child(1) {
  margin-top: -1rem;
}
.spBtn span:nth-child(3) {
  margin-top: 1rem;
}
.spBtn.active span {
  background: #0050ff;
}
.spBtn.active span:nth-child(1) {
  margin-top: 0rem;
  transform: rotate(45deg);
}
.spBtn.active span:nth-child(2) {
  opacity: 0;
}
.spBtn.active span:nth-child(3) {
  margin-top: 0rem;
  transform: rotate(-45deg);
}

/* ===============================================================
mv
=============================================================== */
.mv {
  margin-top: 8rem;
  padding: 6rem 1rem calc(6rem + 4.7395833333vw);
  background: url(../images/bg-item06.webp) top 20% right calc(50% - 60rem) no-repeat, url(../images/bg-item06.webp) top 85% right calc(50% + 60rem) no-repeat, #eef2ff;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 820px) {
  .mv {
    margin-top: 5rem;
    background: url(../images/bg-item06.webp) top 55% right calc(50% - 28rem)/21rem auto no-repeat, url(../images/bg-item06.webp) top 96% right calc(50% + 27rem)/26rem auto no-repeat, #eef2ff;
  }
}
.mv .inner {
  position: relative;
  z-index: 20;
}

.mvLogo {
  width: 31rem;
  margin: 0 auto;
}
@media screen and (max-width: 820px) {
  .mvLogo {
    width: 25rem;
  }
}
@media screen and (max-width: 480px) {
  .mvLogo {
    width: 20rem;
  }
}

.mvTitle {
  width: 71rem;
  margin: 5rem auto 0;
}
@media screen and (max-width: 820px) {
  .mvTitle {
    width: 60rem;
    margin: 3rem auto 0;
  }
}
@media screen and (max-width: 480px) {
  .mvTitle {
    width: 40rem;
  }
}

.mvDate {
  font-size: 6.2rem;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #02395e;
  margin-top: 3rem;
}
@media screen and (max-width: 820px) {
  .mvDate {
    font-size: 5rem;
    margin-top: 2rem;
  }
}
@media screen and (max-width: 480px) {
  .mvDate {
    font-size: 3.2rem;
    margin-top: 1rem;
  }
}

.mvPlace {
  width: 45rem;
  margin: 3rem auto 0;
  background: #02395e;
  color: #fff;
  border-radius: 100vh;
  padding: 1rem 3rem 0.6rem;
  font-weight: bold;
}
@media screen and (max-width: 820px) {
  .mvPlace {
    margin: 1rem auto 0;
  }
}
@media screen and (max-width: 480px) {
  .mvPlace {
    width: 35rem;
    padding: 0.8rem 2rem 0.3rem;
  }
}

.mvPlace_top {
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
@media screen and (max-width: 480px) {
  .mvPlace_top {
    font-size: 1.6rem;
  }
}
.mvPlace_top .label {
  font-size: 0.9em;
  background: #fff;
  color: #02395e;
  padding: 0 1rem;
  border-radius: 100vh;
}

.mvPlace_bottom {
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border-top: 1px solid #fff;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
}
@media screen and (max-width: 480px) {
  .mvPlace_bottom {
    font-size: 1.4rem;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
  }
}
.mvPlace_bottom .small {
  font-size: 0.8em;
}

.mvIcon {
  width: 4rem;
  margin: 8rem auto 0;
  animation: ciecleRotate 10s infinite linear;
}
@media screen and (max-width: 820px) {
  .mvIcon {
    margin: 6rem auto 0;
  }
}

.mvText {
  font-size: 2rem;
  font-weight: bold;
  color: #02395e;
  margin: 6rem auto 0;
  text-align: center;
  line-height: 3;
  text-shadow: 0 0 1rem #fff;
}
@media screen and (max-width: 820px) {
  .mvText {
    margin: 4rem auto 0;
  }
}
@media screen and (max-width: 480px) {
  .mvText {
    font-size: 1.8rem;
  }
}

.mvApply {
  font-size: 2rem;
  margin-top: 6rem;
  text-align: center;
  font-weight: bold;
}
@media screen and (max-width: 820px) {
  .mvApply {
    margin-top: 4rem;
  }
}
.mvApply .applyBtn {
  margin-top: 2rem;
}
.mvApply .applyBtn a {
  font-size: 2.4rem;
  padding: 2rem 4rem;
}

.mvBgCiecleLeft {
  position: absolute;
  top: 10rem;
  left: 50%;
  width: 67rem;
  height: 67rem;
  transform: translateX(-50%);
  z-index: 10;
  margin-left: -79rem;
  opacity: 0.8;
}
@media screen and (max-width: 820px) {
  .mvBgCiecleLeft {
    width: 34rem;
    height: 34rem;
    top: 57rem;
    margin-left: -33rem;
  }
}
@media screen and (max-width: 480px) {
  .mvBgCiecleLeft {
    width: 21rem;
    height: 21rem;
    top: 44rem;
    margin-left: -23rem;
  }
}

.mvBgCiecleRight {
  position: absolute;
  top: 64rem;
  right: 50%;
  width: 54rem;
  height: 54rem;
  transform: translateX(-50%);
  z-index: 10;
  margin-right: -123rem;
  opacity: 0.8;
}
@media screen and (max-width: 820px) {
  .mvBgCiecleRight {
    width: 22rem;
    height: 22rem;
    top: 26rem;
    margin-right: -60rem;
  }
}
@media screen and (max-width: 480px) {
  .mvBgCiecleRight {
    width: 12rem;
    height: 12rem;
    top: 20rem;
    margin-right: -36rem;
  }
}

@keyframes ciecleRotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.mvBgCiecleItems {
  position: relative;
  width: 100%;
  height: 100%;
}
.mvBgCiecleItems img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  animation: ciecleRotate 20s infinite linear;
}
.mvBgCiecleItems img:nth-child(2n) {
  animation-direction: reverse;
}
.mvBgCiecleItems img:nth-child(1) {
  width: 42%;
}
.mvBgCiecleItems img:nth-child(2) {
  width: 56%;
}
.mvBgCiecleItems img:nth-child(3) {
  width: 70%;
}
.mvBgCiecleItems img:nth-child(4) {
  width: 87%;
}
.mvBgCiecleItems img:nth-child(5) {
  width: 100%;
}

.mvBgBorderLeft {
  position: absolute;
  bottom: -7%;
  left: 50%;
  transform: translateX(-50%);
  width: 32rem;
  height: 26rem;
  margin-left: -51rem;
}
@media screen and (max-width: 820px) {
  .mvBgBorderLeft {
    bottom: -6%;
    width: 22rem;
    height: 17rem;
    margin-left: -30rem;
  }
}
@media screen and (max-width: 480px) {
  .mvBgBorderLeft {
    bottom: -4%;
    width: 14rem;
    height: 11rem;
    margin-left: -18rem;
  }
}

.mvBgBorderRight {
  position: absolute;
  top: -8%;
  left: 50%;
  transform: translateX(-50%) rotateZ(180deg);
  width: 32rem;
  height: 26rem;
  margin-left: 68rem;
}
@media screen and (max-width: 820px) {
  .mvBgBorderRight {
    top: -3%;
    width: 14rem;
    height: 11rem;
    margin-left: 29rem;
  }
}
@media screen and (max-width: 480px) {
  .mvBgBorderRight {
    top: -2%;
    width: 9rem;
    height: 7rem;
    margin-left: 17rem;
  }
}

@keyframes borderMoving {
  0% {
    margin-top: 0%;
  }
  100% {
    margin-top: 8%;
  }
}
.mvBgBorderItems {
  position: relative;
  width: 100%;
  height: 100%;
}
.mvBgBorderItems img {
  position: absolute;
  width: auto;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  animation: borderMoving 2s infinite alternate;
}
.mvBgBorderItems img:nth-child(1) {
  height: 100%;
  animation-delay: 0.6s;
}
.mvBgBorderItems img:nth-child(2) {
  height: 68%;
  margin-right: 35%;
  animation-delay: 0.3s;
}
.mvBgBorderItems img:nth-child(3) {
  height: 48%;
  margin-right: 60%;
}

@keyframes bgBlueItemSize {
  0% {
    background-size: 100% auto;
  }
  100% {
    background-size: 120% auto;
  }
}
/* ===============================================================
bg item
=============================================================== */
.bgBlueTop {
  width: 100%;
  height: 4.7395833333vw;
  background: url(../images/bg-blue-top.svg) center top/100% auto no-repeat;
  margin-top: -4.7395833333vw;
  position: relative;
  bottom: -1px;
  animation: 3s bgBlueItemSize infinite alternate;
}

.bgBlueBottom {
  width: 100%;
  height: 4.7395833333vw;
  background: url(../images/bg-blue-bottom.svg) center top/100% auto no-repeat;
  position: relative;
  top: -1px;
  animation: 3s bgBlueItemSize infinite alternate;
}

.bgBlackTop {
  width: 100%;
  height: 4.7395833333vw;
  background: url(../images/bg-black-top.svg) center top/100% auto no-repeat;
  margin-top: -4.7395833333vw;
  position: relative;
  bottom: -1px;
  animation: 3s bgBlueItemSize infinite alternate;
}

.secTimeTable {
  padding: 6rem 1rem;
}
@media screen and (max-width: 820px) {
  .secTimeTable {
    padding: 4rem 1rem;
  }
}

.secTimeTableAnchor {
  display: flex;
  margin-top: 6rem;
}
@media screen and (max-width: 820px) {
  .secTimeTableAnchor {
    flex-wrap: wrap;
    margin-top: 4rem;
  }
}
.secTimeTableAnchor a {
  font-size: 2.4rem;
  border: 1px solid #eef2ff;
  width: 100%;
  height: 4em;
  color: #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.3em;
}
@media screen and (max-width: 820px) {
  .secTimeTableAnchor a {
    width: 20%;
    font-size: 1.8rem;
  }
}
.secTimeTableAnchor a::after {
  content: "";
  border: 2px solid #eef2ff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  width: 0.5em;
  height: 0.5em;
}
.secTimeTableAnchor a:hover {
  background: #eef2ff;
  color: #02395e;
}
.secTimeTableAnchor a:hover::after {
  border-color: #02395e;
}

/* ===============================================================
secTimeTable
=============================================================== */
.secTimeTablePlace {
  display: flex;
  gap: 6rem;
  margin-top: 8rem;
}
@media screen and (max-width: 820px) {
  .secTimeTablePlace {
    gap: 4rem;
    margin-top: 6rem;
  }
}
@media screen and (max-width: 480px) {
  .secTimeTablePlace {
    display: none;
  }
}
.secTimeTablePlace p {
  font-size: 1.8rem;
  color: #fff;
  font-weight: bold;
  border: 1px solid #fff;
  width: 100%;
  text-align: center;
  padding: 0.5em 0;
  letter-spacing: 0.3rem;
}
@media screen and (max-width: 820px) {
  .secTimeTablePlace p {
    font-size: 1.6rem;
  }
}

.secTimeTableSubEvent {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 6rem;
  font-size: 1.8rem;
  color: #fff;
  font-weight: bold;
  border: 1px solid #fff;
  padding: 1em 0;
  letter-spacing: 0.3rem;
}
@media screen and (max-width: 820px) {
  .secTimeTableSubEvent {
    gap: 2rem;
    margin-top: 4rem;
    font-size: 1.6rem;
  }
}
.secTimeTableSubEvent + .secTimeTableSubEvent {
  margin-top: 2rem;
}
@media screen and (max-width: 820px) {
  .secTimeTableSubEvent + .secTimeTableSubEvent {
    margin-top: 1.5rem;
  }
}

.secTimeTableTime {
  font-size: 3rem;
  color: #daeef5;
  font-weight: bold;
  text-align: center;
  margin-top: 4rem;
  font-family: "Roboto", sans-serif;
}
@media screen and (max-width: 820px) {
  .secTimeTableTime {
    font-size: 2.4rem;
    margin-top: 3rem;
  }
}

.secTimeTableGroup {
  margin-top: 2rem;
}
.secTimeTableGroup.is-grid02 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8rem;
}
@media screen and (max-width: 820px) {
  .secTimeTableGroup.is-grid02 {
    gap: 2rem;
  }
}
@media screen and (max-width: 480px) {
  .secTimeTableGroup.is-grid02 {
    grid-template-columns: 1fr;
  }
}

.secTimeTableCard {
  display: block;
  padding: 2rem;
  min-height: 16rem;
  border-radius: 1rem;
  position: relative;
}
.secTimeTableCard::before {
  content: "+ read more";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(45deg, #0050ff, #00bef0);
  text-align: center;
  color: #fff;
  text-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.3);
  border-radius: 0 0 1rem 1rem;
  line-height: 2rem;
}
@media screen and (max-width: 820px) {
  .secTimeTableCard::before {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}
.secTimeTableCard::after {
  content: "";
  width: 3rem;
  height: 3rem;
  background: url(../images/icon-ciecle-white.webp) center/cover no-repeat;
  position: absolute;
  bottom: -1rem;
  right: -0.6rem;
  border-radius: 100vh;
  animation: ciecleRotate 10s infinite linear;
}
.secTimeTableCard.is-blue {
  background: url(../images/bg-time-table-card-item_blue.webp) right bottom 1.9rem/9.2rem auto no-repeat, #fff;
}
@media screen and (max-width: 820px) {
  .secTimeTableCard.is-blue {
    background: url(../images/bg-time-table-card-item_blue.webp) right bottom 1.7rem/9.2rem auto no-repeat, #fff;
  }
}
.secTimeTableCard.is-blue::before {
  background: linear-gradient(45deg, #0050ff, #00bef0);
}
.secTimeTableCard.is-pink {
  background: url(../images/bg-time-table-card-item_pink.webp) right bottom 1.9rem/9.2rem auto no-repeat, #fff;
}
@media screen and (max-width: 820px) {
  .secTimeTableCard.is-pink {
    background: url(../images/bg-time-table-card-item_pink.webp) right bottom 1.7rem/9.2rem auto no-repeat, #fff;
  }
}
.secTimeTableCard.is-pink::before {
  background: linear-gradient(45deg, #af00ff, #fa02e6);
}
.secTimeTableCard:hover.is-blue {
  box-shadow: 0 0 0.5rem #00acf3, 0 0 2rem rgba(255, 255, 255, 0.5);
}
.secTimeTableCard:hover.is-pink {
  box-shadow: 0 0 0.5rem #fa02e6, 0 0 2rem rgba(255, 255, 255, 0.5);
}
.secTimeTableCard:hover::after {
  animation-play-state: paused;
}

.secTimeTableCard_ttl {
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
@media screen and (max-width: 820px) {
  .secTimeTableCard_ttl {
    font-size: 1.6rem;
  }
}
.secTimeTableCard_ttl.is-blue {
  color: #0050ff;
}
.secTimeTableCard_ttl.is-pink {
  color: #fa02e6;
}
.secTimeTableCard_ttl time {
  font-weight: bold;
}

.secTimeTableCard_desc {
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 1rem;
  color: #333;
}
@media screen and (max-width: 820px) {
  .secTimeTableCard_desc {
    font-size: 1.6rem;
  }
}
.secTimeTableCard_desc_name {
  font-size: 1.4rem;
  font-weight: normal;
  margin-top: 0.2rem;
}

.secTimeTableSubPlace {
  background: rgba(255, 255, 255, 0.1);
  margin-top: 8rem;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  padding: 3rem;
  border-radius: 1rem;
  width: 90%;
}
@media screen and (max-width: 820px) {
  .secTimeTableSubPlace {
    margin-top: 6rem;
    color: #fff;
    padding: 2rem;
  }
}

.secTimeTableSubPlace_head {
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
  padding-bottom: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  letter-spacing: 0.3rem;
}
@media screen and (max-width: 820px) {
  .secTimeTableSubPlace_head {
    font-size: 1.8rem;
    padding-bottom: 1.8rem;
    gap: 1.8rem;
  }
}

.secTimeTableSubPlace_ttl {
  border-top: 2px dashed #fff;
  padding-top: 2rem;
  font-size: 1.8rem;
  font-weight: bold;
}
@media screen and (max-width: 820px) {
  .secTimeTableSubPlace_ttl {
    padding-top: 1.8rem;
    font-size: 1.6rem;
  }
}

.secTimeTableSubPlace_desc {
  margin-top: 2rem;
}
@media screen and (max-width: 820px) {
  .secTimeTableSubPlace_desc {
    margin-top: 1rem;
  }
}

/* ===============================================================
modal
=============================================================== */
.modalOverlay {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 200;
}

.modalItem {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  z-index: 201;
  width: 90%;
  max-width: 900px;
  border-radius: 1rem;
}
.modalItem.is-blue .modalItem_head {
  background: linear-gradient(45deg, #0050ff, #00bef0);
}
.modalItem.is-blue .modalItemBtn a {
  background: linear-gradient(45deg, #0050ff, #00bef0) 0% 50%/150% 150% no-repeat;
}
.modalItem.is-blue .modalItemBtn a:hover {
  background-position: 100% 50%;
}
.modalItem.is-blue .modalItemMember_img {
  background: linear-gradient(45deg, #0050ff, #00bef0);
}
.modalItem.is-pink .modalItem_head {
  background: linear-gradient(45deg, #af00ff, #fa02e6);
}
.modalItem.is-pink .modalItemBtn a {
  background: linear-gradient(45deg, #af00ff, #fa02e6) 0% 50%/150% 150% no-repeat;
}
.modalItem.is-pink .modalItemBtn a:hover {
  background-position: 100% 50%;
}
.modalItem.is-pink .modalItemMember_img {
  background: linear-gradient(45deg, #af00ff, #fa02e6);
}

.modalItem_head {
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  background: linear-gradient(45deg, #0050ff, #00bef0);
  color: #fff;
  padding: 0 1rem 0 3rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5rem;
  border-radius: 1rem 1rem 0 0;
}
@media screen and (max-width: 480px) {
  .modalItem_head {
    font-size: 1.6rem;
    gap: 1.5rem;
    height: 4rem;
    padding: 0 1rem 0 2rem;
  }
}
.modalItem_head time {
  font-weight: bold;
}

.modalItem_close {
  position: relative;
  margin-left: auto;
  width: 3rem;
  height: 3rem;
}
.modalItem_close::before, .modalItem_close::after {
  cursor: pointer;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #fff;
  height: 0.5rem;
  width: 100%;
  border-radius: 100vh;
}
.modalItem_close::before {
  transform: translateY(-50%) rotate(45deg);
}
.modalItem_close::after {
  transform: translateY(-50%) rotate(-45deg);
}

.modalItem_content {
  padding: 3rem;
  max-height: 80vh;
  margin-top: 5rem;
  overflow-y: scroll;
}
@media screen and (max-width: 480px) {
  .modalItem_content {
    padding: 2rem;
    margin-top: 4rem;
  }
}

.modalItem_ttl {
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.2;
}
@media screen and (max-width: 480px) {
  .modalItem_ttl {
    font-size: 1.8rem;
  }
}

.modalItemMemberWrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2rem;
  gap: 1rem;
}
@media screen and (max-width: 480px) {
  .modalItemMemberWrap {
    grid-template-columns: 1fr;
  }
}

.modalItemMember {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.modalItemMember_img {
  width: 8rem;
  height: 8rem;
  padding: 0.5rem;
  border-radius: 100vh;
}
@media screen and (max-width: 480px) {
  .modalItemMember_img {
    width: 5rem;
    height: 5rem;
    padding: 0.4rem;
  }
}

.modalItemMember_text {
  font-size: 1.8rem;
}
@media screen and (max-width: 480px) {
  .modalItemMember_text {
    font-size: 1.6rem;
  }
}

.modalItemMember_group,
.modalItemMember_role {
  font-size: 0.8em;
}

.modalItemMember_name {
  font-weight: bold;
}

.modalItem_text {
  margin-top: 3rem;
}
@media screen and (max-width: 480px) {
  .modalItem_text {
    font-size: 1.4rem;
  }
}
.modalItem_text p + p {
  margin-top: 1rem;
}

.modalItem_tag {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  color: #02395e;
}
@media screen and (max-width: 480px) {
  .modalItem_tag {
    font-size: 1.4rem;
  }
}

.modalItemMovie {
  margin-top: 3rem;
}

.modalItemMovie_in {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.modalItemMovie_in iframe, .modalItemMovie_in lite-youtube {
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalItemBtn {
  margin-top: 3rem;
}
.modalItemBtn a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: #fff;
  max-width: 40rem;
  margin: 0 auto;
  border-radius: 100vh;
  padding: 1rem;
  transition: 1s;
}

/* ===============================================================
secMap
=============================================================== */
.secMap {
  padding: 6rem 1rem;
}
@media screen and (max-width: 820px) {
  .secMap {
    padding: 4rem 1rem;
  }
}

.secMap_img {
  margin-top: 4rem;
}
@media screen and (max-width: 820px) {
  .secMap_img {
    margin-top: 3rem;
  }
}

/* ===============================================================
secOutline
=============================================================== */
.secOutline {
  padding: calc(4.7395833333vw + 6rem) 1rem;
  background: #eef2ff;
  margin-top: -4.7395833333vw;
}
@media screen and (max-width: 820px) {
  .secOutline {
    padding: calc(4.7395833333vw + 4rem) 1rem;
  }
}

.secOutlineTbl {
  margin-top: 4rem;
  background: #fff;
  width: 100%;
  border-radius: 1rem;
  padding: 2rem;
}
@media screen and (max-width: 820px) {
  .secOutlineTbl {
    margin-top: 3rem;
  }
}
.secOutlineTbl th,
.secOutlineTbl td {
  padding: 1rem;
}
@media screen and (max-width: 820px) {
  .secOutlineTbl th,
  .secOutlineTbl td {
    display: block;
  }
}
.secOutlineTbl th {
  text-align: left;
  display: flex;
  gap: 0.5em;
}
@media screen and (max-width: 820px) {
  .secOutlineTbl th {
    padding-bottom: 0;
  }
}
.secOutlineTbl th::before {
  content: "";
  width: 1em;
  height: 1em;
  background: url(../images/icon-ciecle-blue.webp) center/95% auto no-repeat;
  position: relative;
  top: 0.2em;
  flex-shrink: 0;
}

.secOutlineTbl_gallery {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.secOutlineTbl_list > li {
  position: relative;
  padding-left: 1em;
}
.secOutlineTbl_list > li::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  border: 1px solid #02395e;
  position: absolute;
  top: 0.4em;
  left: 0.1em;
  border-radius: 100vh;
}

.secOutlineTbl_subList {
  padding-left: 1em;
}

/* ===============================================================
secFaq
=============================================================== */
.secFaq {
  padding: 6rem 1rem;
}
@media screen and (max-width: 820px) {
  .secFaq {
    padding: 4rem 1rem;
  }
}

.secFaq_list {
  margin-top: 6rem;
}
@media screen and (max-width: 820px) {
  .secFaq_list {
    margin-top: 4rem;
  }
}
.secFaq_list dl {
  position: relative;
}
.secFaq_list dl::before {
  content: "";
  width: 3.5rem;
  height: 6rem;
  position: absolute;
  top: -1rem;
  left: 1rem;
  z-index: 2;
}
@media screen and (max-width: 820px) {
  .secFaq_list dl::before {
    width: 2rem;
    height: 3.5rem;
    top: -0.4rem;
    left: 0.4rem;
  }
}
.secFaq_list dl + dl {
  margin-top: 4rem;
}

.secFaq_acTtl {
  background: linear-gradient(45deg, #0050ff, #00bef0) left center/150% 150% no-repeat;
  color: #fff;
  padding: 2rem 5rem;
  border-radius: 1rem 1rem 0 0;
  position: relative;
  cursor: pointer;
}
@media screen and (max-width: 820px) {
  .secFaq_acTtl {
    padding: 1rem 3rem;
  }
}
.secFaq_acTtl::before, .secFaq_acTtl::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 3rem;
  height: 0.5rem;
  background: #fff;
  border-radius: 100vh;
  transition: 0.3s;
}
@media screen and (max-width: 820px) {
  .secFaq_acTtl::before, .secFaq_acTtl::after {
    right: 1rem;
    width: 2rem;
    height: 0.4rem;
  }
}
.secFaq_acTtl::after {
  transform: rotate(90deg);
}

.secFaq_acData {
  background: #fff;
  padding: 2rem 5rem;
  border-radius: 0 0 1rem 1rem;
}
@media screen and (max-width: 820px) {
  .secFaq_acData {
    padding: 1rem 3rem;
  }
}

/* ===============================================================
アコーディオン
=============================================================== */
.js-ac-ttl.active .secFaq_acTtl::after {
  transform: rotate(0deg);
}

/* ======================================================
footer
====================================================== */
.footer {
  padding-top: 4rem;
  background: #333;
}
@media screen and (max-width: 820px) {
  .footer {
    padding-top: 3rem;
  }
}

.footerItem {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
}
@media screen and (max-width: 820px) {
  .footerItem {
    gap: 4rem;
  }
}

.footerItem_icon {
  width: 6rem;
}
.footerItem_icon:hover {
  opacity: 0.8;
}

.footerCopyright {
  font-size: 1.6rem;
  padding: 3rem 0;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 820px) {
  .footerCopyright {
    padding: 2rem 0;
  }
}

/* ======================================================
loadAnimation
====================================================== */
@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
#loadAnimation {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  background: #d3ecf5;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
  opacity: 1;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  visibility: visible;
}
#loadAnimation::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10rem;
  height: 10rem;
  margin-top: -14rem;
  background: url(../images/bg-item01.webp) center/25% auto no-repeat, url(../images/bg-item02.webp) center/45% auto no-repeat, url(../images/bg-item03.webp) center/64% auto no-repeat, url(../images/bg-item04.webp) center/85% auto no-repeat, url(../images/bg-item05.webp) center/100% auto no-repeat;
  border-top: none;
  border-radius: 100vh;
  animation: 3s rotate infinite linear;
  opacity: 1;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  visibility: visible;
}
#loadAnimation.loaded::before {
  opacity: 0;
  visibility: hidden;
}

@keyframes fadeOutloading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#loadAnimation.finish {
  animation: fadeOutloading 0.5s ease forwards;
  visibility: hidden;
}

#strokeAnime {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#strokeAnime.animationStart {
  display: block;
}
#strokeAnime svg {
  width: 100%;
  height: 100%;
}

.strokeAnime_textwrap {
  margin: 0 auto;
}
.strokeAnime_textwrap:nth-child(1) {
  font-size: 5rem;
  width: 3.2em;
  height: 2em;
}
.strokeAnime_textwrap:nth-child(2) {
  font-size: 5rem;
  width: 5em;
  height: 2em;
  margin-top: -5rem;
}
.strokeAnime_textwrap:nth-child(3) {
  font-size: 7rem;
  width: 2.5em;
  height: 2em;
  margin-top: -5rem;
}

@keyframes textAnime {
  0% {
    stroke-dashoffset: 600;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.strokeAnime_text {
  stroke: #333;
  stroke-width: 0.1rem;
  fill: transparent;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: textAnime 4s linear forwards;
}

@keyframes fadeOutZoom {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
#strokeAnime.finish .strokeAnime_textwrap {
  animation: fadeOutZoom 0.5s ease forwards;
}

/* ======================================================
special-benefit
====================================================== */
.secBenefitCard {
  display: block;
  padding: 2rem 2rem;
  min-height: 16rem;
  border-radius: 1rem;
  position: relative;
  background: #fff;
  text-align: center;
  margin-top: 6rem;
}
.secBenefitCard h2 {
  font-size: 1.5em;
  margin-bottom: 0.5rem;
  background: linear-gradient(45deg, #00bef0, #0050ff, #fa02e6 70%) left center/150% 150% no-repeat;
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}
.secBenefitCard p {
  font-size: 1em;
  margin-bottom: 0.5rem;
}
.secBenefitCard::after {
  content: "";
  width: 3rem;
  height: 3rem;
  background: url(../images/icon-circle-white.webp) center/cover no-repeat;
  position: absolute;
  bottom: -1rem;
  right: -0.6rem;
  border-radius: 100vh;
  animation: circleRotate 10s infinite linear;
}
.secBenefitCard:hover {
  box-shadow: 0 0 0.5rem #00acf3, 0 0 2rem rgba(255, 255, 255, 0.5);
}
.secBenefitCard:hover::after {
  animation-play-state: paused;
}

.secBenefitCard_items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.secBenefitCard_items .secBenefitCard_item {
  flex: 0 1 auto;
  margin: 0 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.secBenefitCard_items .secBenefitCard_item img {
  max-width: 100%;
  object-fit: cover;
  width: auto;
  height: 200px;
}
.secBenefitCard_items .secBenefitCard_item p {
  text-align: center;
  margin-top: 10px;
  font-size: 0.9em;
}

/* ======================================================
special-benefit
====================================================== */
.secBenefitCard2 {
  display: block;
  padding: 2rem 2rem;
  min-height: 16rem;
  border-radius: 1rem;
  position: relative;
  background: #fff;
  text-align: center;
  margin-top: 6rem;
}
.secBenefitCard2 h2 {
  font-size: 2em;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #00bef0, #0050ff, #fa02e6 70%) left center/150% 150% no-repeat;
  -webkit-background-clip: text;
  color: transparent;
  background-size: 100% 100%;
}
.secBenefitCard2 p {
  font-size: 1em;
  margin-bottom: 0.5rem;
}
.secBenefitCard2::after {
  content: "";
  width: 3rem;
  height: 3rem;
  background: url(../images/icon-circle-white.webp) center/cover no-repeat;
  position: absolute;
  bottom: -1rem;
  right: -0.6rem;
  border-radius: 100vh;
  animation: circleRotate 10s infinite linear;
}
.secBenefitCard2:hover {
  box-shadow: 0 0 0.5rem #00acf3, 0 0 2rem rgba(255, 255, 255, 0.5);
}
.secBenefitCard2:hover::after {
  animation-play-state: paused;
}

/* ======================================================
fade in
====================================================== */
@keyframes fadeInEffect {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-trigger {
  opacity: 0;
  visibility: hidden;
}

.fade-in-keyframes {
  opacity: 0;
  animation-name: fadeInEffect;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.youtube {
  width: 100%;
  aspect-ratio: 16/9;
  max-width: 560px;
  margin: 0 auto;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

.line_boarder {
  border: 2px solid #ccc;
  border-radius: 1rem;
  padding: 1rem;
  margin: 1rem;
}

/*# sourceMappingURL=style.css.map */