@charset "UTF-8";
/* CSS Document */
/* 基本設定 */
/* --------------------------------------------------
	section size
-------------------------------------------------- */
/* 初期設定 */
body {
  opacity: 0;
}

body.is-loaded {
  opacity: 1;
}

/* ----------------------------------------------------------------------
ローディング
---------------------------------------------------------------------- */
#loading {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #2ca6e0;
  font-size: 2.5rem;
  visibility: visible;
  opacity: 0;
}
#loading .spinner {
  margin: 100px auto;
  font-size: 3.5rem;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
#loading .spinner .loadlogo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12rem;
  aspect-ratio: 1;
  animation: 5s linear infinite rotation1;
  background: url(../img/common/loadlogo01.svg) no-repeat center;
  background-size: 100%;
  transform-origin: center center;
}
#loading .loading-text {
  color: #fff;
  text-align: center;
  margin-top: 0.5rem;
}
#loading.loaded {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s;
}

#loading.is-active {
  opacity: 1;
  visibility: visible;
}

#loading.loaded {
  opacity: 0;
  visibility: hidden;
}

/* Loading Animation */
@-webkit-keyframes load5 {
  0%, 100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%, 100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
/* Hide Loading Block */
.loaded {
  opacity: 0;
  visibility: hidden;
}

/* ----------------------------------------------------------------------
MV
---------------------------------------------------------------------- */
#mv {
  width: 100%;
  position: relative;
  height: 92rem;
  padding-top: 5em;
}
@media screen and (max-width: 520px) {
  #mv {
    height: 55rem;
    padding-top: 3em;
  }
}
#mv .abs {
  position: absolute;
}
#mv .abs.mvTtl {
  width: 14%;
  max-width: 21rem;
  inset: 52% auto auto 27%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 840px) {
  #mv .abs.mvTtl {
    width: 21%;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #mv .abs.mvTtl {
    width: 28%;
    inset: 48% auto auto 27%;
  }
}
#mv .abs.mvBnr {
  width: 30%;
  max-width: 30.6rem;
  inset: auto 3% 17% auto;
}
@media screen and (max-width: 520px) {
  #mv .abs.mvBnr {
    width: 37%;
    inset: auto 3% 22% auto;
  }
}
#mv .abs.scrDown {
  width: 4%;
  max-width: 1.7rem;
  inset: auto auto 4% 1%;
}
@media screen and (max-width: 520px) {
  #mv .abs.scrDown {
    inset: auto auto 4% 2%;
  }
}
#mv .mv-slider {
  height: 100%;
}
#mv .mv-slider .slick-list {
  height: 100%;
}
#mv .mv-slider .slick-list .slick-track {
  height: 100%;
}
#mv .mv-slider .slick-list .slick-track .mv-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#mv .mv-slider .slick-list .slick-track .mv-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ----------------------------------------------------------------------
青背景部分
---------------------------------------------------------------------- */
.blueArea {
  padding: 21rem 0 40rem;
  position: relative;
  z-index: 0;
  background: #d8f3ff;
  background: linear-gradient(180deg, rgb(216, 243, 255) 0%, rgb(159, 221, 255) 39%);
}
@media screen and (max-width: 1440px) {
  .blueArea {
    padding: 19rem 0 30rem;
  }
}
@media screen and (max-width: 1440px) and (max-width: 840px) {
  .blueArea {
    padding: 44rem 0 27rem;
  }
}
@media screen and (max-width: 1440px) and (max-width: 840px) and (max-width: 520px) {
  .blueArea {
    padding: 44rem 0 18rem;
  }
}
.blueArea:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url(../img/top/blueBox-bg.svg);
  background-repeat: repeat;
  background-size: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
}
.blueArea:after {
  content: "";
  position: absolute;
  inset: auto auto calc(100% - 1px) 0;
  width: 100%;
  aspect-ratio: 19200/385;
  background: url(../img/top/blueBox-top.svg) no-repeat bottom;
  background-size: 100%;
}

/* ----------------------------------------------------------------------
トップ限定ナビ
---------------------------------------------------------------------- */
#topNav {
  margin-bottom: 22rem;
}
@media screen and (max-width: 520px) {
  #topNav {
    margin-bottom: 10rem;
  }
}
#topNav .innerS {
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  position: relative;
  row-gap: 3rem;
}
#topNav .innerS::before {
  content: "";
  display: block;
  width: 20%;
  max-width: 7rem;
  aspect-ratio: 70/79;
  background: url(../img/common/logo03.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  inset: 0 auto auto 0;
  transform: translate(-30%, -30%);
}
#topNav .innerS .importantNews {
  width: 73%;
  border-radius: 1.5rem;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 500;
  background-color: #2ca6e0;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 4px 0 rgba(44, 166, 224, 0.2);
}
@media screen and (max-width: 840px) {
  #topNav .innerS .importantNews {
    width: 100%;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #topNav .innerS .importantNews {
    box-shadow: 0 3px 0 rgba(44, 166, 224, 0.2);
  }
}
#topNav .innerS .importantNews .newsBlock {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 2em 3em;
}
@media screen and (max-width: 520px) {
  #topNav .innerS .importantNews .newsBlock {
    padding: 0.5em 1em 2em;
  }
}
#topNav .innerS .importantNews .newsBlock .ttlBox {
  line-height: 1.5;
  width: 16em;
  text-align: center;
  padding: 3em 3em 3em 0;
  margin-right: 1.5em;
  border-right: 0.1em dashed #fff;
}
@media screen and (max-width: 520px) {
  #topNav .innerS .importantNews .newsBlock .ttlBox {
    width: 100%;
    margin: 0;
    border: none;
    padding: 3em 1.5em;
  }
}
#topNav .innerS .importantNews .newsBlock .ttlBox > p {
  font-weight: 400;
}
#topNav .innerS .importantNews .newsBlock .ttlBox > h2 {
  font-size: 166.66%;
  position: relative;
}
#topNav .innerS .importantNews .newsBlock .ttlBox > h2::before {
  content: "";
  display: block;
  width: 25%;
  aspect-ratio: 54/16;
  position: absolute;
  inset: 93% -5% auto auto;
  background: url(../img/top/ttl-line.svg) no-repeat center;
  background-size: contain;
}
#topNav .innerS .importantNews .newsBlock .newsList {
  width: calc(100% - 17.5em);
  display: flex;
  flex-direction: column;
  row-gap: 0.3em;
}
@media screen and (max-width: 520px) {
  #topNav .innerS .importantNews .newsBlock .newsList {
    width: 100%;
  }
}
#topNav .innerS .importantNews .newsBlock .newsList .newsItem a {
  line-height: 1.75;
  padding: 0.5em 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.5em;
}
#topNav .innerS .importantNews .newsBlock .newsList .newsItem a .date {
  width: 6.5em;
}
@media screen and (max-width: 520px) {
  #topNav .innerS .importantNews .newsBlock .newsList .newsItem a .date {
    width: 100%;
  }
}
#topNav .innerS .importantNews .newsBlock .newsList .newsItem a .txt {
  width: calc(100% - 7.5em);
  border-bottom: 1px solid #fff;
  padding: 0 0.5em;
}
@media screen and (max-width: 520px) {
  #topNav .innerS .importantNews .newsBlock .newsList .newsItem a .txt {
    width: 100%;
    padding: 0;
  }
}
#topNav .innerS .importantNews .newsBtn {
  display: block;
  width: 100%;
  padding: 0.8em 0;
  text-align: center;
  background-color: #fff;
  color: #3e3a3a;
}
#topNav .innerS .importantNews .newsBtn:hover {
  opacity: 1;
  color: #2ca6e0;
}
#topNav .innerS .subNav {
  width: 25%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  align-content: space-between;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 700;
}
@media screen and (max-width: 840px) {
  #topNav .innerS .subNav {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 840px) {
  #topNav .innerS .subNav {
    width: 100%;
    row-gap: 1em;
  }
}
#topNav .innerS .subNav > a {
  display: block;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  padding: 1em 2em 1em 1em;
  position: relative;
  background-color: #fff;
  border-radius: 999px;
  border: 0.1em solid #ededed;
}
@media screen and (max-width: 840px) {
  #topNav .innerS .subNav > a {
    width: 49%;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #topNav .innerS .subNav > a {
    width: 100%;
  }
}
#topNav .innerS .subNav > a > img {
  width: 1.5em;
}
#topNav .innerS .subNav > a::after {
  content: "";
  display: block;
  width: 1em;
  aspect-ratio: 665/455;
  position: absolute;
  inset: 50% 1em auto auto;
  transform: translateY(-50%);
  background: url(../img/common/arrow01.svg) no-repeat center;
  background-size: contain;
  filter: brightness(0) saturate(100%) invert(59%) sepia(78%) saturate(1955%) hue-rotate(168deg) brightness(92%) contrast(90%);
}

#topNews {
  margin-bottom: 22rem;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-weight: 500;
}
@media screen and (max-width: 840px) {
  #topNews {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #topNews {
    margin-bottom: 10rem;
    font-size: 1.4rem;
  }
}
#topNews .innerM {
  background-color: #fff;
  padding: 5em 6.5em;
  position: relative;
  border-radius: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  row-gap: 4em;
  box-shadow: 0 6px 0 rgba(44, 166, 224, 0.3);
}
@media screen and (max-width: 840px) {
  #topNews .innerM {
    padding: 3em 2em;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #topNews .innerM {
    padding: 5em 2em;
    margin: 0 0.2em;
    width: fit-content;
    box-shadow: 0 4px 0 rgba(44, 166, 224, 0.3);
  }
}
#topNews .innerM .ttlBox {
  width: 17%;
}
@media screen and (max-width: 840px) {
  #topNews .innerM .ttlBox {
    width: 100%;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #topNews .innerM .ttlBox {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: nowrap;
  }
}
#topNews .innerM .ttlBox .ttl {
  font-size: 125%;
  margin-bottom: 2em;
}
@media screen and (max-width: 840px) {
  #topNews .innerM .ttlBox .ttl {
    margin-bottom: 1.2em;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #topNews .innerM .ttlBox .ttl {
    margin-bottom: 0;
  }
}
#topNews .innerM .ttlBox .ttl .enTtl {
  color: #ffc004;
  padding-left: 1.4em;
  position: relative;
  font-weight: 300;
}
#topNews .innerM .ttlBox .ttl .enTtl:before {
  content: "";
  display: block;
  width: 1.3em;
  aspect-ratio: 1;
  background: url(../img/common/ico-news.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  inset: 50% auto auto 0;
  transform: translateY(-50%);
  filter: brightness(0) saturate(100%) invert(77%) sepia(77%) saturate(3023%) hue-rotate(356deg) brightness(113%) contrast(104%);
}
#topNews .innerM .ttlBox .ttl > h3 {
  font-size: 165%;
  font-weight: 600;
  letter-spacing: 0.1em;
}
#topNews .innerM .ttlBox .btn {
  font-size: 88.88%;
  display: block;
  padding: 0.7em 1.5em;
  line-height: 1.2;
  border-radius: 999px;
  border: 2px solid #ffc004;
  font-weight: 500;
  position: relative;
  width: 95%;
}
@media screen and (max-width: 840px) {
  #topNews .innerM .ttlBox .btn {
    width: 12em;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #topNews .innerM .ttlBox .btn {
    margin-bottom: 0.3em;
  }
}
#topNews .innerM .ttlBox .btn span {
  color: #ffc004;
}
#topNews .innerM .ttlBox .btn::after {
  content: "";
  width: 1em;
  aspect-ratio: 665/455;
  position: absolute;
  inset: 50% 1em auto auto;
  transform: translateY(-50%);
  background: url(../img/common/arrow01.svg) no-repeat center;
  background-size: contain;
  filter: brightness(0) saturate(100%) invert(77%) sepia(77%) saturate(3023%) hue-rotate(356deg) brightness(113%) contrast(104%);
}
#topNews .innerM .newsblock {
  width: 78%;
}
@media screen and (max-width: 840px) {
  #topNews .innerM .newsblock {
    width: 100%;
  }
}
#topNews .innerM .newsblock .cateList {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: nowrap;
  border-bottom: 0.5px solid #3e3a3a;
}
@media screen and (max-width: 520px) {
  #topNews .innerM .newsblock .cateList {
    font-size: 80%;
    margin-bottom: 0.5em;
  }
}
#topNews .innerM .newsblock .cateList .cateItem {
  width: 18%;
  border-radius: 1em 1em 0 0;
  text-align: center;
  padding: 1.2em 0;
  position: relative;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}
@media screen and (max-width: 520px) {
  #topNews .innerM .newsblock .cateList .cateItem {
    width: 20%;
    border-radius: 0.8em 0.8em 0 0;
  }
}
#topNews .innerM .newsblock .cateList .cateItem.information {
  color: #e27364;
}
#topNews .innerM .newsblock .cateList .cateItem.rec {
  color: #2ca6e0;
}
#topNews .innerM .newsblock .cateList .cateItem.faq {
  color: #6cc15b;
}
#topNews .innerM .newsblock .cateList .cateItem.column {
  color: #8b5ad1;
}
#topNews .innerM .newsblock .cateList .cateItem.is-show {
  background-color: #ea8d39;
  color: #fff;
}
#topNews .innerM .newsblock .cateList .cateItem.information.is-show {
  background-color: #e27364;
}
#topNews .innerM .newsblock .cateList .cateItem.rec.is-show {
  background-color: #2ca6e0;
}
#topNews .innerM .newsblock .cateList .cateItem.faq.is-show {
  background-color: #6cc15b;
}
#topNews .innerM .newsblock .cateList .cateItem.column.is-show {
  background-color: #8b5ad1;
}
#topNews .innerM .newsblock .cateList .cateItem:after {
  content: "";
  width: 0.5px;
  height: 40%;
  background-color: #e2e2e2;
  position: absolute;
  inset: auto 0 0 auto;
}
#topNews .innerM .newsblock .cateList .cateItem:last-child::after {
  content: none;
}
#topNews .innerM .newsblock .postList {
  display: none;
}
#topNews .innerM .newsblock .postList.is-show {
  display: block;
}
#topNews .innerM .newsblock .postList .post-data a {
  width: 100%;
  display: block;
  padding: 1.8em 1.5em 1.8em 2.4em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  position: relative;
}
@media screen and (max-width: 520px) {
  #topNews .innerM .newsblock .postList .post-data a {
    padding: 2em 0.5em;
    row-gap: 0.3em;
  }
}
#topNews .innerM .newsblock .postList .post-data a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(to right, #e2e2e2 0, #e2e2e2 3px, transparent 3px, transparent 5px);
  border-radius: 999px;
}
#topNews .innerM .newsblock .postList .post-data a .date {
  width: 6em;
}
#topNews .innerM .newsblock .postList .post-data a .cate {
  font-size: 77.77%;
  line-height: 1;
  width: 7em;
  padding: 0.4em 1em;
  text-align: center;
  border-radius: 999px;
}
#topNews .innerM .newsblock .postList .post-data a .cate.important {
  background-color: #e27364;
  border: 1px solid #e27364;
  color: #fff;
}
#topNews .innerM .newsblock .postList .post-data a .cate.information {
  border: 1px solid #e27364;
}
#topNews .innerM .newsblock .postList .post-data a .cate.rec {
  border: 1px solid #2ca6e0;
}
#topNews .innerM .newsblock .postList .post-data a .cate.faq {
  border: 1px solid #6cc15b;
}
#topNews .innerM .newsblock .postList .post-data a .cate.column {
  border: 1px solid #8b5ad1;
}
#topNews .innerM .newsblock .postList .post-data a .ttl {
  width: calc(100% - 17em);
}
@media screen and (max-width: 520px) {
  #topNews .innerM .newsblock .postList .post-data a .ttl {
    width: calc(100% - 3.5em);
  }
}
#topNews .innerM .newsblock .postList .post-data a .arrow {
  width: 2em;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1px solid #2ca6e0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../img/common/arrow01.svg) no-repeat center;
  background-size: 30%;
  filter: brightness(0) saturate(100%) invert(49%) sepia(96%) saturate(510%) hue-rotate(160deg) brightness(97%) contrast(80%);
}
#topNews .innerM .newsblock .postList .post-data a:hover {
  opacity: 1;
}
#topNews .innerM .newsblock .postList .post-data a:hover .arrow {
  background-color: #2ca6e0;
  filter: none;
  transition: 0.25s;
}

#hour {
  width: 98%;
  background-color: #fff;
  margin: 0 auto 4rem;
  padding: 12rem 0;
  border-radius: 1.5rem;
  font-size: 1.8rem;
  line-height: 1.6666666667;
  letter-spacing: 0.1em;
  box-shadow: 0 6px 0 rgba(44, 166, 224, 0.3);
}
@media screen and (max-width: 840px) {
  #hour {
    font-size: 1.6rem;
    line-height: 1.625;
    letter-spacing: 0.1em;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #hour {
    font-size: 1.4rem;
    line-height: 1.4285714286;
    letter-spacing: 0.1em;
    padding: 8rem 0;
    box-shadow: 0 4px 0 rgba(44, 166, 224, 0.3);
  }
}
#hour .innerM {
  width: 90%;
}
#hour .innerM .ttlBox {
  font-size: 183%;
  line-height: 1.1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  gap: 1em 0.3em;
  margin-bottom: 3em;
}
@media screen and (max-width: 520px) {
  #hour .innerM .ttlBox {
    font-size: 150%;
    padding-right: 0.7em;
  }
}
#hour .innerM .ttlBox .logoBox {
  width: 4.2em;
}
#hour .innerM .ttlBox .txtBox > p {
  color: #ea8d39;
}
#hour .innerM .ttlBox .txtBox > h3 {
  font-size: 181.82%;
  font-weight: 600;
  letter-spacing: 0.1em;
}
#hour .innerM .ttlBox .txtBox > h3:first-letter {
  color: #ea8d39;
}
#hour .innerM .calendarInfo {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  row-gap: 2em;
  margin-bottom: 3em;
}
@media screen and (max-width: 840px) {
  #hour .innerM .calendarInfo {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #hour .innerM .calendarInfo {
    margin-bottom: 3em;
  }
}
#hour .innerM .calendarInfo .calendarBox {
  width: 49%;
  aspect-ratio: 681/314;
  background: url(../img/top/calendar.svg) no-repeat center;
  background-size: contain;
  position: relative;
}
@media screen and (max-width: 840px) {
  #hour .innerM .calendarInfo .calendarBox {
    width: 100%;
  }
}
#hour .innerM .calendarInfo .calendarBox .calendarItems {
  position: absolute;
  width: 82.4%;
  height: 53.9%;
  inset: auto 0 23.5% auto;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}
#hour .innerM .calendarInfo .calendarBox .calendarItems li {
  width: 16.6666666667%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 180%;
  color: #f9be8f;
}
#hour .innerM .calendarInfo .calendarBox .noticeBox {
  position: absolute;
  inset: auto auto 0 0;
  width: 100%;
  height: 22%;
  overflow: auto;
  line-height: 1.4;
}
@media screen and (max-width: 520px) {
  #hour .innerM .calendarInfo .calendarBox .noticeBox {
    font-size: 88%;
  }
}
#hour .innerM .calendarInfo .infoBox {
  width: 49%;
  padding: 1em;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  background-color: #fff2e1;
  position: relative;
}
@media screen and (max-width: 840px) {
  #hour .innerM .calendarInfo .infoBox {
    width: 100%;
    padding: 3em 2em;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #hour .innerM .calendarInfo .infoBox {
    padding: 3em 1em;
  }
}
#hour .innerM .calendarInfo .infoBox > h3 {
  width: 80%;
  font-size: 150%;
  line-height: 1;
  font-weight: bold;
  padding-bottom: 0.6em;
  margin-bottom: 0.6em;
  border-bottom: 0.1em dashed #ea8d39;
}
#hour .innerM .calendarInfo .infoBox .txt {
  width: 80%;
  line-height: 1.75;
}
@media screen and (max-width: 840px) {
  #hour .innerM .calendarInfo .infoBox .txt {
    width: 90%;
  }
}
#hour .innerM .calendarInfo .infoBox .txt span {
  background: linear-gradient(transparent 50%, #fff 50%);
}
#hour .innerM .calendarInfo .infoBox .absOrn {
  width: 3rem;
  aspect-ratio: 30/26;
  top: -1.7rem;
  right: -1.1rem;
}
@media screen and (max-width: 840px) {
  #hour .innerM .calendarInfo .infoBox .absOrn {
    top: -1.2rem;
  }
}
#hour .innerM .bnrArea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
#hour .innerM .bnrArea .imgBox {
  width: 50%;
  aspect-ratio: 7/3;
  overflow: hidden;
  transition: 0.3s;
}
@media screen and (max-width: 520px) {
  #hour .innerM .bnrArea .imgBox {
    width: 100%;
  }
}
#hour .innerM .bnrArea .imgBox img {
  max-width: initial;
  width: 100%;
  height: 100%;
}
#hour .innerM .bnrArea .imgBox:hover {
  background-size: 115%;
  opacity: 1;
}
#hour .innerM .bnrArea .bnrBox1 {
  background: url(../img/top/yoyakubnr-img02@2x.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
#hour .innerM .bnrArea .bnrBox2 {
  background: url(../img/top/webbnr-img02@2x.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}
#hour .innerM .bnrArea .bnrAbs {
  position: absolute;
  width: 10rem;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 840px) {
  #hour .innerM .bnrArea .bnrAbs {
    width: 6rem;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #hour .innerM .bnrArea .bnrAbs {
    transform: rotate(90deg) translate(-50%, 50%);
  }
}

.loopBox {
  display: flex;
  overflow: hidden;
  /* はみ出しを隠す */
  width: 100%;
  /* 親要素の幅 */
  justify-content: flex-start;
  margin-bottom: 17rem;
}
@media screen and (max-width: 520px) {
  .loopBox {
    margin-bottom: 10rem;
  }
}
.loopBox img {
  width: 120vw;
  /* 指定のサイズ */
  flex-shrink: 0;
  /* 画像が縮まないように固定 */
  margin: 0 0.5%;
  will-change: transform;
  /* アニメーションを滑らかにする */
  animation: infinity-loop-reverse 30s linear infinite;
}
@media screen and (max-width: 840px) {
  .loopBox img {
    width: auto;
    max-width: 180%;
    animation: infinity-loop-reverse 35s linear infinite;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  .loopBox img {
    max-width: 230%;
    animation: infinity-loop-reverse 40s linear infinite;
  }
}

@keyframes infinity-loop-reverse {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
#point {
  font-size: 1.8rem;
  line-height: 1.2222222222;
  letter-spacing: 0.1em;
  font-weight: 700;
}
@media screen and (max-width: 840px) {
  #point {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #point {
    font-size: 1.4rem;
  }
}
#point .innerM {
  position: relative;
}
#point .innerM .ttlBox {
  font-size: 183%;
  line-height: 1.1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  gap: 1em 0.3em;
  margin-bottom: 3em;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 840px) {
  #point .innerM .ttlBox {
    position: relative;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #point .innerM .ttlBox {
    font-size: 150%;
    padding-right: 0.7em;
  }
}
#point .innerM .ttlBox .logoBox {
  width: 4.2em;
}
#point .innerM .ttlBox .txtBox {
  color: #fff;
}
#point .innerM .ttlBox .txtBox > h3 {
  font-size: 181.82%;
  font-weight: 600;
  letter-spacing: 0.1em;
}
#point .innerM .ttlBox .txtBox > h3:first-letter {
  color: #4068cc;
}
#point .innerM .pointList .pointItem {
  display: block;
  background-color: #fff;
  border-radius: 1.5rem;
  overflow: hidden;
  margin-top: -12rem;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 53%;
  position: relative;
  box-shadow: 0 6px 0 rgba(44, 166, 224, 0.3);
}
@media screen and (max-width: 840px) {
  #point .innerM .pointList .pointItem {
    width: 86%;
    margin-top: 3rem;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #point .innerM .pointList .pointItem {
    width: 100%;
    margin-top: 3rem;
    border-radius: 1rem;
    box-shadow: 0 4px 0 rgba(44, 166, 224, 0.3);
  }
}
#point .innerM .pointList .pointItem:first-child {
  margin-top: 0;
}
#point .innerM .pointList .pointItem:first-child .txtBox .enTxt {
  color: #ea8d39;
}
#point .innerM .pointList .pointItem:first-child .txtBox > h2 {
  color: #ea8d39;
}
#point .innerM .pointList .pointItem:first-child .txtBox button {
  border: 2px solid #ea8d39;
}
#point .innerM .pointList .pointItem:first-child .txtBox button::after {
  filter: brightness(0) saturate(100%) invert(89%) sepia(30%) saturate(7418%) hue-rotate(332deg) brightness(95%) contrast(94%);
}
#point .innerM .pointList .pointItem:first-child::after {
  background-color: #ea8d39;
}
#point .innerM .pointList .pointItem:nth-child(2) .txtBox .enTxt {
  color: #2ca6e0;
}
#point .innerM .pointList .pointItem:nth-child(2) .txtBox > h2 {
  color: #2ca6e0;
}
#point .innerM .pointList .pointItem:nth-child(2) .txtBox button {
  border: 2px solid #2ca6e0;
}
#point .innerM .pointList .pointItem:nth-child(2) .txtBox button::after {
  filter: brightness(0) saturate(100%) invert(62%) sepia(13%) saturate(2823%) hue-rotate(162deg) brightness(91%) contrast(93%);
}
#point .innerM .pointList .pointItem:nth-child(2)::after {
  background-color: #2ca6e0;
}
#point .innerM .pointList .pointItem:nth-child(3) .txtBox .enTxt {
  color: #6cc15b;
}
#point .innerM .pointList .pointItem:nth-child(3) .txtBox > h2 {
  color: #6cc15b;
}
#point .innerM .pointList .pointItem:nth-child(3) .txtBox button {
  border: 2px solid #6cc15b;
}
#point .innerM .pointList .pointItem:nth-child(3) .txtBox button::after {
  filter: brightness(0) saturate(100%) invert(73%) sepia(40%) saturate(558%) hue-rotate(63deg) brightness(86%) contrast(89%);
}
#point .innerM .pointList .pointItem:nth-child(3)::after {
  background-color: #6cc15b;
}
#point .innerM .pointList .pointItem:nth-child(4) .txtBox .enTxt {
  color: #e27364;
}
#point .innerM .pointList .pointItem:nth-child(4) .txtBox > h2 {
  color: #e27364;
}
#point .innerM .pointList .pointItem:nth-child(4) .txtBox button {
  border: 2px solid #e27364;
}
#point .innerM .pointList .pointItem:nth-child(4) .txtBox button::after {
  filter: brightness(0) saturate(100%) invert(69%) sepia(15%) saturate(4390%) hue-rotate(315deg) brightness(91%) contrast(95%);
}
#point .innerM .pointList .pointItem:nth-child(4)::after {
  background-color: #e27364;
}
#point .innerM .pointList .pointItem:nth-child(5) .txtBox .enTxt {
  color: #4068cc;
}
#point .innerM .pointList .pointItem:nth-child(5) .txtBox > h2 {
  color: #4068cc;
}
#point .innerM .pointList .pointItem:nth-child(5) .txtBox button {
  border: 2px solid #4068cc;
}
#point .innerM .pointList .pointItem:nth-child(5) .txtBox button::after {
  filter: brightness(0) saturate(100%) invert(42%) sepia(87%) saturate(3428%) hue-rotate(212deg) brightness(86%) contrast(83%);
}
#point .innerM .pointList .pointItem:nth-child(5)::after {
  background-color: #4068cc;
}
#point .innerM .pointList .pointItem:nth-child(6) .txtBox .enTxt {
  color: #8b5ad1;
}
#point .innerM .pointList .pointItem:nth-child(6) .txtBox > h2 {
  color: #8b5ad1;
}
#point .innerM .pointList .pointItem:nth-child(6) .txtBox button {
  border: 2px solid #8b5ad1;
}
#point .innerM .pointList .pointItem:nth-child(6) .txtBox button::after {
  filter: brightness(0) saturate(100%) invert(40%) sepia(88%) saturate(503%) hue-rotate(223deg) brightness(88%) contrast(86%);
}
#point .innerM .pointList .pointItem:nth-child(6)::after {
  background-color: #8b5ad1;
}
#point .innerM .pointList .pointItem .txtBox {
  width: 56%;
  aspect-ratio: 1;
  position: relative;
}
@media screen and (max-width: 520px) {
  #point .innerM .pointList .pointItem .txtBox {
    padding: 1em;
  }
}
#point .innerM .pointList .pointItem .txtBox .enTxt {
  font-size: 111.11%;
  margin-left: 0.3em;
}
@media screen and (max-width: 520px) {
  #point .innerM .pointList .pointItem .txtBox .enTxt {
    font-size: 80%;
  }
}
#point .innerM .pointList .pointItem .txtBox > h2 {
  font-size: 222.22%;
  font-weight: 600;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 520px) {
  #point .innerM .pointList .pointItem .txtBox > h2 {
    font-size: 180%;
  }
}
#point .innerM .pointList .pointItem .txtBox button {
  font-size: 88.88%;
  width: 10em;
  display: block;
  padding: 0.7em 1.5em;
  border-radius: 999px;
  border: 2px solid #ffc004;
  font-weight: 500;
  position: relative;
  transition: 0.25s;
  box-shadow: 0 4px 0 #ededed;
  opacity: 1 !important;
}
@media screen and (max-width: 840px) {
  #point .innerM .pointList .pointItem .txtBox button {
    width: 12em;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #point .innerM .pointList .pointItem .txtBox button {
    font-size: 80%;
    border-width: 1px !important;
    box-shadow: 0 3px 0 #ededed;
  }
}
#point .innerM .pointList .pointItem .txtBox button::after {
  content: "";
  width: 1em;
  aspect-ratio: 665/455;
  position: absolute;
  inset: 50% 1em auto auto;
  transform: translateY(-50%);
  background: url(../img/common/arrow01.svg) no-repeat center;
  background-size: contain;
  filter: brightness(0) saturate(100%) invert(77%) sepia(77%) saturate(3023%) hue-rotate(356deg) brightness(113%) contrast(104%);
}
#point .innerM .pointList .pointItem .txtBox .num {
  width: 7em;
  position: absolute;
  z-index: 1;
}
@media screen and (max-width: 520px) {
  #point .innerM .pointList .pointItem .txtBox .num {
    width: 5em;
    inset: auto 1em 1em auto;
  }
}
#point .innerM .pointList .pointItem .txtBox .numR {
  inset: auto 2em 3em auto;
}
@media screen and (max-width: 520px) {
  #point .innerM .pointList .pointItem .txtBox .numR {
    inset: auto -9.1em 1em auto;
  }
}
#point .innerM .pointList .pointItem .txtBox .numL {
  inset: auto 3em 3em auto;
}
@media screen and (max-width: 520px) {
  #point .innerM .pointList .pointItem .txtBox .numL {
    inset: auto 17.6em 1em auto;
  }
}
#point .innerM .pointList .pointItem .txtR {
  padding: 3em 2em 3em 3em;
}
@media screen and (max-width: 520px) {
  #point .innerM .pointList .pointItem .txtR {
    padding: 3em 0em 3em 2em;
  }
}
#point .innerM .pointList .pointItem .txtL {
  padding: 3em 3em 3em 2em;
}
@media screen and (max-width: 520px) {
  #point .innerM .pointList .pointItem .txtL {
    padding: 3em 2em 3em 1em;
  }
}
#point .innerM .pointList .pointItem .imgBox {
  width: 44%;
  clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
}
#point .innerM .pointList .pointItem .imgBox img {
  max-width: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#point .innerM .pointList .pointItem::after {
  content: "";
  display: block;
  width: 1em;
  height: 100%;
  background-color: #303030;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 520px) {
  #point .innerM .pointList .pointItem::after {
    width: 0.9rem;
  }
}
#point .innerM .pointList .pointItem:nth-child(odd) {
  margin-left: auto;
}
#point .innerM .pointList .pointItem:nth-child(odd)::after {
  right: 0;
}
#point .innerM .pointList .pointItem:nth-child(even) {
  margin-right: auto;
  flex-direction: row-reverse;
}
#point .innerM .pointList .pointItem:nth-child(even) .imgBox {
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}
#point .innerM .pointList .pointItem:nth-child(even)::after {
  left: 0;
}
#point .innerM .pointList .pointItem:hover {
  opacity: 1;
}
#point .innerM .pointList .pointItem:hover button {
  transform: translateY(4px);
  box-shadow: none;
}
@media screen and (max-width: 520px) {
  #point .innerM .pointList .pointItem:hover button {
    transform: translateY(3px);
  }
}

#info {
  margin-bottom: 17rem;
  position: relative;
  z-index: 1;
  font-size: 1.8rem;
  line-height: 1.7222222222;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 840px) {
  #info {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #info {
    font-size: 1.4rem;
    margin-bottom: 12rem;
  }
}
#info:before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1920/909;
  background: url(../img/top/info-bg.svg) no-repeat center;
  background-size: contain;
  position: absolute;
  inset: -15% auto auto 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media screen and (max-width: 840px) {
  #info:before {
    width: 230%;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #info:before {
    inset: -4% auto auto 50%;
  }
}
#info .innerS .ttlBox {
  font-size: 183%;
  line-height: 1.1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  gap: 1em 0.3em;
  margin-bottom: 2.5em;
  padding-top: 1em;
}
@media screen and (max-width: 520px) {
  #info .innerS .ttlBox {
    font-size: 150%;
  }
}
#info .innerS .ttlBox .logoBox {
  width: 4.2em;
}
#info .innerS .ttlBox .txtBox > p {
  color: #2ca6e0;
}
#info .innerS .ttlBox .txtBox > h3 {
  font-size: 181.82%;
  font-weight: 600;
  letter-spacing: 0.1em;
}
#info .innerS .ttlBox .txtBox > h3:first-letter {
  color: #2ca6e0;
}
#info .innerS .infoList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4em 2em;
  counter-reset: info-count;
}
#info .innerS .infoList .infoItem {
  display: block;
  width: calc((100% - 4em) / 3);
  position: relative;
}
@media screen and (max-width: 840px) {
  #info .innerS .infoList .infoItem {
    width: calc((100% - 2em) / 2);
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #info .innerS .infoList .infoItem {
    width: 100%;
  }
}
#info .innerS .infoList .infoItem .imgBox {
  border-radius: 1.5rem;
  overflow: hidden;
}
#info .innerS .infoList .infoItem .imgBox img {
  max-width: initial;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#info .innerS .infoList .infoItem .txt {
  font-size: 150%;
  text-align: center;
  counter-increment: info-count;
  line-height: 1;
  font-weight: bold;
}
@media screen and (max-width: 520px) {
  #info .innerS .infoList .infoItem .txt {
    font-size: 120%;
  }
}
#info .innerS .infoList .infoItem .txt:before {
  content: counter(info-count, decimal-leading-zero);
  display: block;
  margin: -1em auto 0.6em auto;
  font-family: "Outfit", sans-serif;
  font-size: 130%;
  width: 2em;
  aspect-ratio: 1;
  background: url(../img/top/info-badge.svg) no-repeat center;
  background-size: contain;
  color: #fff;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 520px) {
  #info .innerS .infoList .infoItem .txt:before {
    font-size: 170%;
    margin: -1em auto 0.4em auto;
  }
}
#info .innerS .infoList .infoItem:nth-child(3n+4):before {
  content: "";
  display: block;
  max-width: 110rem;
  width: 86vw;
  height: 0;
  border-bottom: 0.2em dashed #fff;
  position: absolute;
  inset: auto auto calc(100% + 2em) 5rem;
}
@media screen and (max-width: 840px) {
  #info .innerS .infoList .infoItem:nth-child(3n+4):before {
    display: none;
  }
}
#info .innerS .infoList .infoOther {
  width: calc((100% - 4em) / 3);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  row-gap: 1em;
}
@media screen and (max-width: 840px) {
  #info .innerS .infoList .infoOther {
    width: calc((100% - 2em) / 2);
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #info .innerS .infoList .infoOther {
    width: 100%;
  }
}
#info .innerS .infoList .infoOther > a {
  display: block;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  padding: 1em 2.8em 1em 1.5em;
  position: relative;
  background-color: #fff;
  border-radius: 999px;
  border: 0.1em solid #ededed;
  font-weight: bold;
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #info .innerS .infoList .infoOther > a {
    width: 100%;
  }
}
#info .innerS .infoList .infoOther > a > img {
  width: 1.5em;
}
#info .innerS .infoList .infoOther > a::after {
  content: "";
  display: block;
  width: 1em;
  aspect-ratio: 1;
  position: absolute;
  inset: 50% 1.5em auto auto;
  transform: translateY(-50%);
  background: url(../img/common/ico-newtab02.svg) no-repeat center;
  background-size: contain;
}

#agree {
  font-size: 1.8rem;
  line-height: 1.75;
  letter-spacing: 0.1em;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 840px) {
  #agree {
    font-size: 1.6rem;
    line-height: 1.8125;
    letter-spacing: 0.1em;
    font-weight: 700;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #agree {
    font-size: 1.4rem;
    line-height: 1.7857142857;
    letter-spacing: 0.1em;
    font-weight: 600;
  }
}
#agree .innerM {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  position: relative;
}
#agree .innerM .txtBox {
  width: 50%;
  padding: 3em 2em;
  position: relative;
}
@media screen and (max-width: 840px) {
  #agree .innerM .txtBox {
    width: 60.5%;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #agree .innerM .txtBox {
    padding: 3em 1.4em 23em;
    width: 100%;
  }
}
#agree .innerM .txtBox:before {
  content: "";
  display: block;
  width: 150%;
  height: 100%;
  border-top: 0.3em solid #2ca6e0;
  position: absolute;
  inset: 0 auto auto 0;
  z-index: -1;
  background: url(../img/top/agree-bg.svg) no-repeat center left, #f7f7f7;
  background-size: cover;
}
@media screen and (max-width: 520px) {
  #agree .innerM .txtBox:before {
    width: 100%;
  }
}
#agree .innerM .txtBox > h4 {
  font-size: 166.66%;
  line-height: 2;
  font-weight: bold;
  margin-bottom: 1em;
}
@media screen and (max-width: 520px) {
  #agree .innerM .txtBox > h4 {
    font-size: 140%;
  }
}
#agree .innerM .txtBox > h4 span {
  background-color: #fff;
  color: #2ca6e0;
  padding: 0.2em 0.5em;
}
#agree .innerM .txtBox > p {
  margin-bottom: 2em;
}
#agree .innerM .txtBox > a {
  display: block;
  width: fit-content;
  padding: 0 4em 0 0;
  margin-left: auto;
  position: relative;
}
#agree .innerM .txtBox > a::after {
  content: "";
  width: 3.5em;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 0.1em solid #2ca6e0;
  position: absolute;
  inset: 50% 0 auto auto;
  transform: translateY(-50%);
  background: url(../img/common/arrow01.svg) no-repeat center;
  background-size: 40%;
  filter: brightness(0) saturate(100%) invert(65%) sepia(14%) saturate(5986%) hue-rotate(168deg) brightness(91%) contrast(92%);
}
#agree .innerM .txtBox > a:hover {
  opacity: 1;
}
#agree .innerM .txtBox > a:hover::after {
  filter: none;
  background-color: #2ca6e0;
}
#agree .innerM .imgBox {
  width: 50%;
  position: relative;
}
@media screen and (max-width: 840px) {
  #agree .innerM .imgBox {
    position: absolute;
    inset: -5.3% -42% auto auto;
    width: 84%;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #agree .innerM .imgBox {
    inset: 57% -9% auto auto;
    width: 112%;
  }
}
#agree .innerM .imgBox .abs {
  color: #fff;
  line-height: 1.4;
  inset: auto 15.5em 0.5em auto;
  text-align: right;
}
@media screen and (max-width: 840px) {
  #agree .innerM .imgBox .abs {
    inset: auto 19em 0.5em auto;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #agree .innerM .imgBox .abs {
    inset: auto 2.7em 0.5em auto;
  }
}
#agree .innerM .imgBox .abs span {
  display: block;
  font-size: 138.88%;
}