@charset "UTF-8";
/**
 * ピクセルをvwに変換
  * @param {number} px - ピクセル
  * @param {number} base - ベースとなるブレイクポイント
  * @return {string} vw
*/
main {
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .main {
    margin-top: 15.13vw;
  }
}

.kv {
  height: 582px;
}
@media screen and (max-width: 768px) {
  .kv {
    height: 103.08vw;
  }
}
.kv-wrapper {
  text-align: center;
  position: relative;
  max-width: 1512px;
  margin: 0 auto;
  padding-right: 40px;
}
@media screen and (max-width: 768px) {
  .kv-wrapper {
    padding-right: 0;
    width: 100%;
  }
}
.kv-lines {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  min-width: 1100px;
  transform: translateX(-50%);
  pointer-events: none;
}
.kv__logo {
  position: relative;
  z-index: 11;
}
@media screen and (max-width: 768px) {
  .kv__logo {
    width: 106vw;
    margin-left: -4vw;
  }
  .kv__logo img {
    width: 100%;
  }
}
.kv-item {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}
.kv-left--01 {
  left: 63px;
  top: -176px;
}
.kv-left--02 {
  left: -94px;
  top: -2px;
}
.kv-left--03 {
  left: -122px;
  top: 240px;
}
.kv-right--01 {
  right: -18px;
  top: -94px;
}
.kv-right--02 {
  right: -230px;
  top: -22px;
}
.kv-right--03 {
  right: -258px;
  top: 147px;
}
@media screen and (max-width: 768px) {
  .kv-lines {
    left: 0;
    min-width: 100%;
    transform: none;
  }
  .kv-item svg, .kv-item img {
    width: 100%;
  }
  .kv-left--01 {
    left: -9vw;
    top: -45vw;
    width: 46vw;
  }
  .kv-left--02 {
    left: -20vw;
    top: 2vw;
  }
  .kv-left--03 {
    left: -30vw;
    top: 13vw;
  }
  .kv-right--01 {
    right: -25vw;
    top: -30vw;
  }
  .kv-right--02 {
    right: -17vw;
    top: 30vw;
  }
  .kv-right--03 {
    display: none;
  }
}
.kv__title {
  position: absolute;
  top: 0px;
  left: -40px;
  right: 0;
  z-index: 10;
}
.kv__title img.pc {
  display: inline-block !important;
}
@media screen and (max-width: 768px) {
  .kv__title {
    width: 100vw;
    left: 0;
    top: 2vw;
  }
  .kv__title img {
    width: 100%;
  }
  .kv__title img.pc {
    display: none !important;
  }
}
.kv__subtitle {
  width: 441px;
  height: 87px;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.363;
  letter-spacing: 0.14em;
  text-align: center;
  background: #000000;
  padding: 2px 0 0 6px;
  border-radius: 50px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -13px auto 0;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .kv__subtitle {
    font-size: 3.85vw;
    width: 76.92vw;
    height: 15.38vw;
    border-radius: 10.26vw;
    margin: 10.5vw auto 0;
  }
}
.kv__lead {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.8889;
  letter-spacing: 0.12em;
  text-align: center;
  margin-top: 26px;
}
@media screen and (max-width: 768px) {
  .kv__lead {
    font-size: 3.85vw;
    margin-top: 3.59vw;
    letter-spacing: 0.16em;
    line-height: 1.7;
    font-feature-settings: "palt";
  }
}
.kv__title, .kv__subtitle, .kv__lead {
  opacity: 0;
}

.navi-wrapper {
  height: 495px;
  background: #F4F4F4;
  padding: 150px 0 80px;
}
@media screen and (max-width: 768px) {
  .navi-wrapper {
    padding-top: 17.95vw;
    padding-bottom: 12.82vw;
    height: auto;
  }
}
.navi-anchor {
  display: flex;
  align-items: center;
  justify-content: center;
}
.navi-anchor-item {
  width: 254px;
  height: 145px;
  background: #fff;
  border-radius: 22px;
  margin: 0 15px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.611;
  letter-spacing: 0.12em;
  text-align: center;
  vertical-align: middle;
  position: relative;
}
@media screen and (max-width: 768px) {
  .navi-anchor-item {
    font-size: 3.33vw;
    line-height: 1.3;
    width: 27.69vw;
    height: 25.13vw;
    margin: 0 1.54vw;
    border-radius: 4.87vw;
  }
  .navi-anchor-item .illust {
    width: 16.41vw;
  }
  .navi-anchor-item .illust svg {
    width: 16.41vw;
  }
}
.navi-anchor-link {
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 36px;
}
.navi-anchor-link:hover .arrow {
  transform: translateY(4px);
}
.navi-anchor-link .illust {
  position: absolute;
  top: -104px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.navi-anchor-link .arrow {
  display: block;
  width: 19px;
  height: 14.25px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2212%22%20height%3D%229%22%20viewBox%3D%220%200%2012%209%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5.53885%208.5007C5.93463%209.09481%206.80755%209.09481%207.20333%208.5007L11.8308%201.55441C12.2735%200.889832%2011.7971%200%2010.9985%200H1.7437C0.9451%200%200.4687%200.88983%200.9114%201.55441L5.53885%208.5007Z%22%20fill%3D%22black%22/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
  transform: translateY(0);
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 23px;
  transition: transform 0.25s ease-out;
}
.navi-anchor-link span {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .navi-anchor-link {
    padding-top: 5.13vw;
  }
  .navi-anchor-link .illust {
    top: -20.51vw;
  }
  .navi-anchor-link .arrow {
    width: 3.08vw;
    height: 2.56vw;
    bottom: 2.56vw;
  }
  .navi-anchor-link span {
    height: 13.08vw;
    letter-spacing: 0;
  }
}
.navi-lists {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .navi-lists {
    margin-top: 5.13vw;
  }
}
.navi-item {
  width: 254px;
  height: 80px;
  text-align: center;
  vertical-align: middle;
  margin: 0 15px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .navi-item {
    font-size: 3.33vw;
    width: 27.69vw;
    height: 18.97vw;
    margin: 0 1.54vw;
    border-radius: 4.1vw;
  }
}
.navi-item-link {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 18px;
  padding: 20px 0 0;
}
.navi-item-link span {
  font-size: 17px;
  display: block;
  font-weight: 700;
  color: #000000;
  margin: 0;
}
.navi-item-link .inline-arrow {
  background: none;
  position: absolute;
  top: 52px;
  right: 0;
  left: 0;
  width: 10px;
  height: 10px;
  margin: 0 auto;
}
.navi-item-link .inline-arrow::before {
  background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M1.26718%2010C1.18321%2010%201.09924%209.96949%201.03817%209.90847L0.091603%208.955C0.0305343%208.89397%200%208.81007%200%208.72616C0%208.64226%200.0305343%208.55835%200.091603%208.49733L6.62595%201.97559H2.73282C2.55725%201.97559%202.41221%201.83066%202.41221%201.65523V0.320366C2.41221%200.144928%202.55725%200%202.73282%200H9.67939C9.85496%200%2010%200.144928%2010%200.320366V7.26163C10%207.43707%209.85496%207.582%209.67939%207.582H8.34351C8.16794%207.582%208.0229%207.43707%208.0229%207.26163V3.37147L1.49618%209.90084C1.43511%209.96186%201.35878%209.99237%201.26718%209.99237V10Z%22%20fill%3D%22currentColor%22%20%2F%3E%20%3C%2Fsvg%3E);
  transform: translate(-100%, 100%);
}
.navi-item-link .inline-arrow::after {
  background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M1.26718%2010C1.18321%2010%201.09924%209.96949%201.03817%209.90847L0.091603%208.955C0.0305343%208.89397%200%208.81007%200%208.72616C0%208.64226%200.0305343%208.55835%200.091603%208.49733L6.62595%201.97559H2.73282C2.55725%201.97559%202.41221%201.83066%202.41221%201.65523V0.320366C2.41221%200.144928%202.55725%200%202.73282%200H9.67939C9.85496%200%2010%200.144928%2010%200.320366V7.26163C10%207.43707%209.85496%207.582%209.67939%207.582H8.34351C8.16794%207.582%208.0229%207.43707%208.0229%207.26163V3.37147L1.49618%209.90084C1.43511%209.96186%201.35878%209.99237%201.26718%209.99237V10Z%22%20fill%3D%22currentColor%22%20%2F%3E%20%3C%2Fsvg%3E);
}
@media screen and (max-width: 768px) {
  .navi-item-link {
    padding-top: 3.59vw;
  }
  .navi-item-link span {
    font-size: 3.33vw;
    line-height: 1.3;
  }
  .navi-item-link .inline-arrow {
    top: 14.62vw;
  }
}

.fixed-link {
  width: 182px;
  height: 133px;
  border-radius: 20px;
  color: #fff;
  background: #484AFE;
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 10;
  text-align: center;
  padding: 16px 0 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.09em;
  text-align: center;
}
.fixed-link .illust {
  display: block;
  margin-bottom: 8px;
}
.fixed-link__close {
  aspect-ratio: 1/1;
  background-position: 50%;
  background-size: cover;
  cursor: pointer;
  position: absolute;
  right: -14px;
  top: -11px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  z-index: 11;
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2509803922);
}
@media screen and (max-width: 768px) {
  .fixed-link__close {
    width: 7.18vw;
    height: 7.18vw;
    top: -2.05vw;
    right: -2.05vw;
    text-align: center;
  }
  .fixed-link__close svg {
    height: 100%;
  }
}
@media screen and (max-width: 768px) {
  .fixed-link {
    width: 43.33vw;
    height: 15.38vw;
    right: 2.82vw;
    bottom: 16.67vw;
    font-size: 3.08vw;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-align: left;
    padding: 3.08vw;
    border-radius: 4.8vw;
  }
  .fixed-link a {
    display: flex;
    height: 100%;
    align-items: center;
  }
  .fixed-link .illust {
    margin: 0;
  }
  .fixed-link .illust svg {
    width: 4.87vw;
    height: 7.69vw;
    margin-right: 2.56vw;
  }
}

.about-wrapper {
  text-align: center;
  background: #EAEAEA;
  padding: 90px 20px;
}
.about-wrapper .linkBtn {
  padding: 24px 40px 25px 36px;
}
.about-wrapper .linkBtn span {
  display: block;
}
.about__text {
  font-weight: 500;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: center;
  margin-top: 26px;
}
@media screen and (max-width: 768px) {
  .about-wrapper {
    padding: 12.82vw 0;
  }
  .about-wrapper .linkBtn {
    padding: 4.62vw 7.69vw 4.62vw 8.72vw;
  }
  .about-wrapper .linkBtn span {
    font-size: 4.1vw;
  }
  .about__text {
    font-size: 3.85vw;
    margin-top: 4.1vw;
  }
}

.news {
  text-align: center;
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 36px;
}
.news-wrapper {
  padding: 80px 0;
  overflow: hidden;
}
.news__title {
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 36px;
  margin-bottom: 30px;
}
.news__title i {
  display: block;
  width: 72px;
  margin-bottom: 10px;
  margin-right: auto;
  margin-left: auto;
}
.news__title span {
  font-size: 32px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: #000;
}
.news-wrapper {
  max-width: 870px;
  margin: 0 auto;
}
.news-link {
  background: none;
  float: right;
  display: block;
  padding-bottom: 6px;
  border-bottom: 2px solid #000000;
  margin-top: 60px;
}
.news-link span {
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.12em;
  color: #000000;
  margin: 0;
  padding-right: 23px;
}
.news-link .inline-arrow {
  background: none;
  right: 0;
  top: 50%;
}
.news-link .inline-arrow::before {
  background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M1.26718%2010C1.18321%2010%201.09924%209.96949%201.03817%209.90847L0.091603%208.955C0.0305343%208.89397%200%208.81007%200%208.72616C0%208.64226%200.0305343%208.55835%200.091603%208.49733L6.62595%201.97559H2.73282C2.55725%201.97559%202.41221%201.83066%202.41221%201.65523V0.320366C2.41221%200.144928%202.55725%200%202.73282%200H9.67939C9.85496%200%2010%200.144928%2010%200.320366V7.26163C10%207.43707%209.85496%207.582%209.67939%207.582H8.34351C8.16794%207.582%208.0229%207.43707%208.0229%207.26163V3.37147L1.49618%209.90084C1.43511%209.96186%201.35878%209.99237%201.26718%209.99237V10Z%22%20fill%3D%22currentColor%22%20%2F%3E%20%3C%2Fsvg%3E);
  transform: translate(-100%, 100%);
}
.news-link .inline-arrow::after {
  background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M1.26718%2010C1.18321%2010%201.09924%209.96949%201.03817%209.90847L0.091603%208.955C0.0305343%208.89397%200%208.81007%200%208.72616C0%208.64226%200.0305343%208.55835%200.091603%208.49733L6.62595%201.97559H2.73282C2.55725%201.97559%202.41221%201.83066%202.41221%201.65523V0.320366C2.41221%200.144928%202.55725%200%202.73282%200H9.67939C9.85496%200%2010%200.144928%2010%200.320366V7.26163C10%207.43707%209.85496%207.582%209.67939%207.582H8.34351C8.16794%207.582%208.0229%207.43707%208.0229%207.26163V3.37147L1.49618%209.90084C1.43511%209.96186%201.35878%209.99237%201.26718%209.99237V10Z%22%20fill%3D%22currentColor%22%20%2F%3E%20%3C%2Fsvg%3E);
}
@media screen and (max-width: 768px) {
  .news {
    max-width: 100%;
    padding: 0 6.15vw;
  }
  .news-wrapper {
    max-width: 100%;
    padding: 12.82vw 0 20.51vw;
  }
  .news__title {
    max-width: 1240px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 36px;
    margin-bottom: 7.69vw;
  }
  .news__title span {
    font-size: 6.67vw;
  }
  .news-link {
    margin-top: 12.82vw;
    float: none;
    display: inline-block;
  }
  .news-link span {
    font-size: 3.59vw;
  }
}

.user {
  background: #F4F4F4;
}
.user-wrapper {
  max-width: 1208px;
  margin: 0 auto;
  text-align: center;
  padding: 110px 20px;
}
.user__title {
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.15em;
  text-align: center;
  max-width: 1000px;
  height: 68px;
  line-height: 68px;
  margin: 0 auto;
  color: #fff;
  background: #484AFE;
  position: relative;
  margin-bottom: 60px;
}
@media screen and (min-width: 769px) and (max-width: 1240px) {
  .user__title {
    font-size: clamp(20px, 13.39px + 1.14vw, 28px);
  }
}
.user__title .illust {
  position: absolute;
  left: -40px;
  bottom: -3px;
}
.user__text {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.875;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 40px;
}
.user-event {
  max-width: 1168px;
  margin: 50px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.user-event__title {
  margin-bottom: 26px;
  width: 100%;
}
.user-event .calendar {
  max-width: 726px;
  width: 62.16%;
}
@media screen and (min-width: 769px) and (max-width: 1240px) {
  .user-event .calendar {
    width: clamp(400px, 58vw, 726px);
    padding: clamp(15px, 2.5vw, 27px) clamp(12px, 2.4vw, 29px) clamp(10px, 1.8vw, 17px);
  }
}
.user-event .event {
  max-width: 404px;
  width: 34.6%;
}
@media screen and (min-width: 769px) and (max-width: 1240px) {
  .user-event .event {
    width: clamp(280px, 33vw, 404px);
    padding: clamp(18px, 2.8vw, 30px) clamp(16px, 3.2vw, 40px) clamp(12px, 2vw, 21px);
  }
}
.user-job .user-wrapper {
  padding-top: 120px;
}
@media screen and (max-width: 768px) {
  .user-job .user-wrapper {
    padding-top: 23.08vw;
  }
}
.user-employer .user__title .illust {
  left: -50px;
}
@media screen and (max-width: 768px) {
  .user-employer .user__title .illust {
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 34.1vw;
    height: auto;
    bottom: -36vw;
  }
  .user-employer .user__title .illust svg {
    width: 100%;
    height: auto;
  }
}
.user-educator .user__title {
  margin-bottom: 40px;
}
.user-educator .user__title .illust {
  left: -50px;
}
.user-educator .grid-item:not(:last-child) {
  margin-bottom: 30px;
}
.user-educator #workstyle .card__text {
  width: 79%;
}
.user-educator .card__text {
  padding: 0;
}
.user-educator .card__body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 22px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .user-educator .user__title {
    height: 21.28vw;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .user-educator .user__title .illust {
    width: 33.85vw;
    left: 0;
    bottom: -37vw;
  }
  .user-educator .user__title .illust svg {
    width: 100%;
  }
  .user-educator .user-wrapper {
    padding-bottom: 20.51vw;
  }
  .user-educator .card__body {
    margin-top: 3.59vw;
    display: block;
  }
  .user-educator .card__text {
    width: 100% !important;
  }
  .user-educator .card__btn {
    margin-top: 2.05vw;
  }
}
@media screen and (max-width: 768px) {
  .user-wrapper {
    max-width: 87.69vw;
    padding: 23.08vw 0 0;
  }
  .user__title {
    font-size: 5.9vw;
    height: 13.59vw;
    line-height: 13.59vw;
    margin-bottom: 42.56vw !important;
  }
  .user__title .illust {
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 34.1vw;
    height: auto;
    bottom: -36vw;
  }
  .user__title .illust svg {
    width: 100%;
    height: auto;
  }
  .user-job .user__title {
    height: 13.59vw;
    line-height: 13.59vw;
    margin-bottom: 38.25vw;
  }
  .user-job .user__title .illust {
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 34vw;
    height: auto;
    bottom: -36vw;
  }
  .user-job .user__title .illust svg {
    width: 100%;
    height: auto;
  }
  .user .grid {
    display: block;
  }
  .user .grid--pc2col .grid-item, .user .grid--pc3col .grid-item {
    width: 100%;
  }
  .user .grid--pc2col .grid-item:not(:last-child), .user .grid--pc3col .grid-item:not(:last-child) {
    margin-bottom: 6.15vw;
  }
  .user .grid--pc2col .card__btn, .user .grid--pc3col .card__btn {
    position: relative;
    bottom: auto;
    right: auto;
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .user-event {
    margin-top: 12.82vw;
  }
  .user__title {
    margin-bottom: 6.67vw;
  }
  .user__text {
    font-size: 3.85vw;
    letter-spacing: 0.08em;
    text-align: left;
  }
  .user .calendar {
    width: 100%;
    padding: 5.13vw 3.85vw;
    margin-bottom: 5.64vw;
  }
  .user .event {
    width: 100%;
  }
}

#areamap .card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
}
#areamap .card__title {
  margin-bottom: 20px;
}
#areamap .card__title::before {
  background: #1ABE71;
}
#areamap .card__content {
  max-width: 505px;
  width: 55%;
}
#areamap .card__image {
  width: 45%;
}
#areamap .card__image .cardarea {
  width: 76.74418%;
  width: 330px;
  margin-left: 14.372%;
  position: relative;
}
@media screen and (min-width: 769px) and (max-width: 1120px) {
  #areamap .card__image .cardarea {
    margin-left: 0;
  }
}
#areamap .card__image .cardarea .fig {
  width: 100%;
}
#areamap .card__image .cardarea .fig svg {
  width: 100%;
  height: auto;
}
#areamap .card__image .cardarea .btns {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#areamap .card__image .cardarea .btns button {
  position: absolute;
  cursor: pointer;
  display: inline-block;
  padding: 8px 12px;
  background: #3A3A3A;
  border-radius: 20px;
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #fff;
}
#areamap .card__image .cardarea .btns button[data-area=north] {
  top: 19.13%;
  left: 62.255%;
}
#areamap .card__image .cardarea .btns button[data-area=east] {
  top: 49.655%;
  right: 0.827%;
}
#areamap .card__image .cardarea .btns button[data-area=west] {
  bottom: 25%;
  left: 4.827%;
}
#areamap .card__image .cardarea .btns button[data-area=central] {
  top: 47%;
  left: 36.655%;
}
#areamap .card__image .cardarea .btns button[data-area=azuma] {
  top: 25.3%;
  left: -4%;
}
#areamap .card__image .cardarea .btns button[data-area=online] {
  width: 100px;
  text-align: center;
  bottom: -18%;
  left: 14%;
}
#areamap .card__image .cardarea .btns button[data-area=out] {
  width: 100px;
  text-align: center;
  bottom: -18%;
  left: 50%;
}
@media screen and (max-width: 768px) {
  #areamap .card__image {
    width: 100%;
    margin-right: 0;
  }
  #areamap .card__image p {
    font-size: 3.33vw;
    margin-bottom: 3.08vw;
  }
  #areamap .card__image .cardarea {
    width: 97.1%;
    margin-left: 0;
  }
  #areamap .card__image .cardarea .fig svg {
    width: 100%;
  }
  #areamap .card__image .cardarea .btns button {
    padding: 2.56vw 3.08vw;
    font-size: 3.08vw;
  }
  #areamap .card__image .cardarea .btns button[data-area=azuma] {
    left: -1%;
  }
  #areamap .card__image .cardarea .btns button[data-area=north] {
    left: 60.255%;
  }
}
@media screen and (max-width: 768px) {
  #areamap .card__title {
    line-height: 1.4;
    margin-bottom: 3.59vw;
  }
  #areamap .card__title::before {
    height: 15.38vw;
  }
  #areamap .card__text {
    width: 100%;
  }
  #areamap .card__content {
    width: 100%;
    max-width: 100%;
  }
  #areamap .card__image {
    width: 108%;
    margin-top: 2.56vw;
    margin-left: -4%;
    margin-right: -4%;
  }
  #areamap .card__image .cardarea {
    width: 100%;
    margin: 0;
  }
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.grid--single {
  max-width: 1000px;
  margin: 0 auto;
}
.grid--pc2col {
  max-width: 1000px;
  margin: 0 auto;
}
.grid--pc2col .grid-item {
  width: calc((100% - 24px) / 2);
}
.grid--pc3col {
  max-width: 1168px;
  margin: 0 auto;
}
.grid--pc3col .grid-item {
  width: calc((100% - 48px) / 3);
}
.grid--pc3col .card__title {
  height: 78px;
}
.grid--pc3col .card__title::before {
  height: 60px;
}
.grid-item {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .grid--pc2col .grid-item, .grid--pc3col .grid-item {
    width: 100%;
  }
  .grid--pc2col .grid-item:not(:last-child), .grid--pc3col .grid-item:not(:last-child) {
    margin-bottom: 6.15vw;
  }
  .grid--pc2col .grid-item .card__btn, .grid--pc3col .grid-item .card__btn {
    position: relative;
    bottom: 0;
    right: 0;
  }
  .grid--pc2col .grid-item .card__text, .grid--pc3col .grid-item .card__text {
    padding: 3.59vw 0 2.05vw;
  }
}

.card {
  border-radius: 22px;
  background: #fff;
  display: block;
  padding: 22px 30px;
  text-align: left;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.card__title {
  position: relative;
  box-sizing: border-box;
  padding-bottom: 18px;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 3px solid #EAEAEA;
  padding-left: 18px;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.428;
  letter-spacing: 0.12em;
  width: 100%;
}
.card__title.--nowrap {
  flex-wrap: nowrap;
}
@media screen and (min-width: 769px) and (max-width: 1240px) {
  .card__title {
    font-size: clamp(0.9375rem, 0.3255rem + 1.275vw, 1.3125rem);
  }
}
.card__title::before {
  content: "";
  display: block;
  width: 6px;
  height: 30px;
  background: #484AFE;
  border-radius: 2px;
  left: 0;
  position: absolute;
  top: 0;
}
.card__title.--large {
  height: 78px;
}
.card__title.--large::before {
  height: 60px;
}
.card__text {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.733;
  letter-spacing: 0.12em;
  padding: 14px 0;
}
.card__text .small {
  display: block;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  margin-top: 10px;
}
.card__btn {
  margin-top: auto;
  align-self: flex-end;
}
.card__btn span {
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  display: block;
  letter-spacing: 0.1em;
  margin-right: 0;
}
.card__btn i {
  right: 20px;
  top: 50%;
}
@media screen and (max-width: 768px) {
  .card {
    overflow: hidden;
    padding: 5.64vw 7.69vw;
    border-radius: 5.64vw;
  }
  .card__title {
    font-size: 5.38vw;
    line-height: 1.4;
    padding-bottom: 4.62vw;
  }
  .card__title .small {
    font-size: 4.1vw;
  }
  .card__text {
    font-size: 3.85vw;
    padding-top: 3.59vw;
    padding-bottom: 2.05vw;
  }
  .card__btn.linkBtn--innerarrow--s {
    float: right;
    padding: 3.59vw 9.74vw 4.1vw 7.69vw;
  }
  .card__btn span {
    font-size: 3.33vw;
  }
}

.border-title {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.363;
  letter-spacing: 0.08em;
  position: relative;
  text-align: left;
  padding-left: 16px;
}
.border-title::before {
  content: "";
  width: 6px;
  height: 100%;
  background: #1ABE71;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  .border-title {
    font-size: 5.38vw;
  }
}

.calendar {
  background: #fff;
  padding: 27px 29px 17px;
  border-radius: 22px;
}
.calendar-caption {
  font-weight: 700;
  font-size: 17.8px;
  line-height: 1.338;
  letter-spacing: 0.1em;
  vertical-align: middle;
  text-align: left;
  margin-left: 19px;
  margin-bottom: 3px;
}
.calendar-table {
  border-collapse: separate;
  border-spacing: 17px 10px;
}
.calendar-table thead th {
  font-weight: 500;
  font-size: 15.43px;
  line-height: 1.1;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: #6B7280;
}
.calendar-table thead th.sun {
  color: #C53535;
}
.calendar-table thead th.sat {
  color: #386CD3;
}
.calendar-table tbody td {
  font-size: 15px;
  font-family: "Roboto", sans-serif;
}
.calendar-table th,
.calendar-table td {
  width: 76px;
  height: 44px;
  text-align: center;
  vertical-align: middle;
  border-radius: 12px;
}
.calendar-table td.prev-month {
  color: #9CA3AF;
}
.calendar-table td.has-event {
  color: #fff;
  background: #484AFE;
}
.calendar-table td.has-event a {
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.calendar-table td.has-event a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  .calendar-caption {
    font-size: 3.85vw;
    margin-left: 2.56vw;
  }
  .calendar-table {
    border-spacing: 1.03vw 0.77vw;
  }
  .calendar-table th,
.calendar-table tbody td {
    font-size: 3.33vw;
    width: 10.77vw;
    height: 8.97vw;
    border-radius: 2.56vw;
  }
  .calendar thead th {
    font-size: 3.33vw;
  }
}

.event {
  background: #fff;
  border-radius: 22px;
  padding: 30px 40px;
  text-align: left;
}
.event__heading {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5556;
  letter-spacing: 0.12em;
  vertical-align: middle;
  margin-bottom: 30px;
}
@media screen and (min-width: 769px) and (max-width: 1240px) {
  .event__heading {
    margin-bottom: clamp(10px, 2vw, 30px);
  }
}
.event-item {
  padding: 22px 0 28px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
@media screen and (min-width: 769px) and (max-width: 1240px) {
  .event-item {
    padding-top: clamp(16px, 1.5vw, 22px);
    padding-bottom: clamp(20px, 2vw, 28px);
  }
}
.event-item:not(:last-of-type) {
  border-bottom: 2px solid #eaeaea;
}
.event-item:first-of-type {
  padding-top: 0;
}
.event-datetime {
  width: 100%;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.429;
  letter-spacing: 0.12em;
  vertical-align: middle;
  color: #9E9E9E;
  margin-bottom: 5px;
}
.event-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  vertical-align: middle;
  width: calc(100% - 131px);
}
.event-btn {
  padding: 12px 13px 12px 26px;
  border-radius: 30px;
}
@media screen and (min-width: 769px) and (max-width: 1240px) {
  .event-btn {
    position: relative;
    bottom: 0;
    margin-top: 10px;
  }
}
.event-btn i {
  top: 50%;
  right: 16px;
}
.event-btn span {
  font-size: 13px;
  display: block;
  letter-spacing: 0.1em;
  margin-right: 20px;
}
@media screen and (max-width: 768px) {
  .event {
    padding: 6.15vw 9.23vw;
  }
  .event__heading {
    font-size: 4.62vw;
    margin-bottom: 6.15vw;
  }
  .event-title {
    font-size: 3.85vw;
    width: 54%;
  }
  .event-datetime {
    font-size: 3.59vw;
    width: 100%;
  }
  .event-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-top: 5.13vw;
    padding-bottom: 5.64vw;
  }
  .event-btn {
    padding: 2.82vw 6.92vw 3.33vw 5.13vw;
  }
  .event-btn span {
    font-size: 3.33vw;
    margin-right: 1.28vw;
  }
}

.modal-heading {
  font-size: 21px;
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}
.modal-heading::before {
  background: #484AFE;
}
@media screen and (max-width: 768px) {
  .modal-heading {
    font-size: 4.87vw;
    margin-bottom: 2.56vw;
  }
}

.modal-subtitle {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.12em;
  margin-bottom: 36px;
}
@media screen and (max-width: 768px) {
  .modal-subtitle {
    font-size: 3.59vw;
    line-height: 1.57;
    margin-bottom: 5.13vw;
  }
}

.modal-content {
  width: 960px;
  max-width: 960px;
  max-height: 71.283vh;
  padding: 56px 64px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media screen and (max-width: 768px) {
  .modal-content {
    width: 87.18vw;
    max-width: none;
    padding: 10.77vw 6.67vw;
    border-radius: 6.67vw;
  }
}
.modal-content::-webkit-scrollbar {
  display: none;
}
@media screen and (min-width: 769px) and (max-width: 1100px) {
  .modal-content {
    width: 90vw;
    max-width: none;
  }
}

.modal-area__image {
  width: 560px;
  margin: 0 auto 36px;
}
.modal-area__title {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.53;
  letter-spacing: 0.16em;
  padding-bottom: 18px;
  border-bottom: 3px solid #eaeaea;
}
.modal-area__text {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7857;
  letter-spacing: 0.12em;
  padding-top: 18px;
}
.modal-area__note {
  background: #F4F4F4;
  padding: 30px 22px;
  margin-top: 26px;
}
@media screen and (max-width: 768px) {
  .modal-area__image {
    width: 100%;
    margin-bottom: 7.69vw;
  }
  .modal-area__image img {
    width: 100%;
  }
  .modal-area__title {
    font-size: 4.36vw;
    line-height: 1.294;
    padding-bottom: 4.62vw;
  }
  .modal-area__text {
    letter-spacing: 0.06em;
    font-size: 3.59vw;
    line-height: 1.643;
    padding-top: 4.62vw;
  }
}

.note-title {
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.16em;
  margin-bottom: 14px;
  color: #484AFE;
}
.note-item {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.857;
  letter-spacing: 0.12em;
}
.note-item::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: #000;
  border-radius: 50%;
  vertical-align: 3px;
  margin: 0 8px 0 5px;
}
@media screen and (max-width: 768px) {
  .note {
    margin-top: 5.64vw;
    padding: 7.18vw 4.1vw;
  }
  .note-title {
    font-size: 3.85vw;
    margin-bottom: 4.1vw;
  }
  .note-item {
    font-size: 3.59vw;
    text-indent: -1em;
    margin-left: 1em;
  }
}

.back-btnbox {
  margin: 20px auto 0;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .back-btnbox {
    margin-top: 5.13vw;
  }
}
.back-btnbox .linkBtn--inner--s {
  cursor: pointer;
  padding: 19px 50px 20px 60px;
  border-radius: 30px;
}
@media screen and (max-width: 768px) {
  .back-btnbox .linkBtn--inner--s {
    padding: 4.87vw 12.82vw 5.13vw 15.38vw;
    border-radius: 7.69vw;
  }
}
.back-btnbox .linkBtn--inner--s span {
  font-size: 16px;
  letter-spacing: 0.1em;
  display: block;
  margin-right: 0;
}
.back-btnbox .linkBtn--inner--s i.inline-arrow {
  transform: scaleX(-1);
  left: 26px;
  right: auto;
  top: calc(50% - 4px);
}

.media-wrapper {
  text-align: center;
  background: #EAEAEA;
  padding: 110px 20px 130px;
}
.media__title {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2727;
  letter-spacing: 0.15em;
  text-align: center;
  margin-bottom: 60px;
}
.media__title span {
  display: block;
  line-height: 1;
}
.media__title .fukidashi {
  display: inline-block;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0.12em;
  text-align: center;
  border-radius: 44px;
  color: #fff;
  background: #484AFE;
  padding: 16px 30px;
  position: relative;
}
.media__title .fukidashi::before {
  content: "";
  display: block;
  width: 37px;
  height: 30px;
  background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2240%22%20height%3D%2226%22%20viewBox%3D%220%200%2040%2026%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19.9185%2025.5L-0.00012747%206.26352e-08L39.837%203.54531e-06L19.9185%2025.5Z%22%20fill%3D%22%23484AFE%22%2F%3E%3C%2Fsvg%3E);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}
.media__title .illust {
  display: block;
  margin-top: 5px;
}
.media .card__title {
  line-height: 1.24;
}
.media .card__title.gunma-title img {
  max-width: 200px;
}
.media .card__title .small {
  display: block;
  font-weight: 700;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.06em;
}
.media .card__title .small .icon-insta {
  margin-left: 3px;
}
.media .card__text {
  padding-bottom: 26px;
}
@media screen and (max-width: 768px) {
  .media-wrapper {
    padding: 20.51vw 6.15vw;
  }
  .media__title {
    font-size: 5.64vw;
  }
  .media__title .fukidashi {
    font-size: 4.1vw;
    line-height: 1.375;
    padding: 2.56vw 7.69vw;
    border-radius: 11.28vw;
  }
  .media .card__title {
    height: 20vw;
  }
}

/*Topのnews記事をベースに、news一覧、column一覧で使用*/
.article-item:not(:last-of-type) {
  margin-bottom: 24px;
}
.article-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.article-header time {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #9E9E9E;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: center;
}
.article-content {
  display: flex;
  align-items: center;
  padding-bottom: 26px;
  border-bottom: 3px solid #EAEAEA;
  text-align: left;
}
.article-content a {
  display: flex;
  align-items: center;
}
.article-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.12em;
}
.article-text {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.857;
  letter-spacing: 0.1em;
  margin-left: 36px;
}
@media screen and (max-width: 768px) {
  .article-header {
    margin-bottom: 3.08vw;
  }
  .article-header time {
    font-size: 3.85vw;
    letter-spacing: 0;
    margin-right: 2.5vw;
  }
  .article-title {
    font-size: 4.1vw;
    margin-bottom: 2.56vw;
  }
  .article-text {
    font-size: 3.59vw;
    letter-spacing: 0.03em;
    line-height: 1.5;
    margin: 0;
  }
  .article-content {
    padding-bottom: 6.67vw;
  }
  .article-content a {
    display: block;
  }
}

.tag-lists {
  margin-left: 14px;
  display: flex;
  flex-wrap: wrap;
}
.tag-item {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.15em;
  text-align: center;
  border-radius: 30px;
  overflow: hidden;
  padding: 2px 10px 3px;
  color: #fff;
}
.tag-item:not(:last-child) {
  margin-right: 10px;
}
.tag-notice, .tag-report {
  background: #484AFE;
}
.tag-important, .tag-interview {
  background: #FF6F5B;
}
.tag-info, .tag-column {
  background: #F89E07;
}
.tag-event, .tag-about {
  background: #1ABE71;
}
@media screen and (max-width: 768px) {
  .tag-lists {
    margin-left: 0;
  }
  .tag-item {
    font-size: 3.08vw;
    padding: 2px 10px;
  }
}

.modal-content--event {
  width: 800px;
  max-width: 800px;
  max-height: 61.283vh;
  height: auto;
}
@media screen and (max-width: 768px) {
  .modal-content--event {
    width: 84.62vw;
    max-width: 84.62vw;
    height: auto;
    min-height: 0;
  }
}
.modal-content--event .modal-event-lists {
  width: 100%;
}
.modal-content--event .modal-event-lists > * + * {
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .modal-content--event .modal-event-lists > * + * {
    margin-top: 5.64vw;
  }
}
.modal-content--event .modal-event-lists .modal-event-item {
  text-align: right;
  display: flex;
  flex-wrap: wrap;
}
.modal-content--event .modal-event-lists .modal-event-item:nth-child(n+2) {
  padding-top: 26px;
  border-top: 3px solid #eaeaea;
}
@media screen and (max-width: 768px) {
  .modal-content--event .modal-event-lists .modal-event-item:nth-child(n+2) {
    padding-top: 6.67vw;
  }
}
@media screen and (max-width: 768px) {
  .modal-content--event .modal-event-lists .modal-event-item {
    display: block;
  }
}
.modal-content--event .modal-event-lists .modal-event-datetime {
  margin-bottom: 10px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: #9e9e9e;
  width: 100%;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .modal-content--event .modal-event-lists .modal-event-datetime {
    font-size: 3.59vw;
    margin-bottom: 2.56vw;
  }
}
.modal-content--event .modal-event-lists .modal-event-title {
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.12em;
  width: calc(100% - 145px);
  margin-right: 10px;
}
@media screen and (max-width: 768px) {
  .modal-content--event .modal-event-lists .modal-event-title {
    width: 100%;
    font-size: 3.85vw;
  }
}
@media screen and (max-width: 768px) {
  .modal-content--event .modal-event-lists .modal-event-btn {
    margin-top: 3.59vw;
  }
}
/*# sourceMappingURL=top.css.map */