@charset "UTF-8";
.fade-in {
  opacity: 1 !important;
  transform: translateY(0);
  visibility: visible !important;
}

.top-mvttl-animation01,
.top-mv-intro > *:not(.top-mvttl-animation01),
header,
footer,
.main-contents > *:not(.top-mv-intro) {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0.5s;
  transition: opacity 0.8s ease;
}

body {
  scrollbar-gutter: stable;
}

body.no-scroll {
  overflow-y: scroll;
  height: 100vh;
  height: 100dvh;
}

.c-header {
  transform: translateY(max(-60px, -60 / 1440 * var(--inner-width) * 1px));
  transition: opacity 0.8s ease, transform 0.5s ease;
  transition-delay: 0;
}

.top-mv .top-mv-btn {
  transform: translateY(min(60px, 60 / 1440 * var(--inner-width) * 1px));
  transition: opacity 0.8s ease, transform 0.5s ease;
  opacity: 0;
  transition-delay: 0.5s;
}
.top-mv.fade-in .top-mv-btn {
  transform: translateY(0);
  opacity: 1;
}

.c-header.fade-in {
  transform: translateY(0);
}

.top-mvttl-animation01 {
  transition-delay: 0.7s;
}

.top-mv {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  position: relative;
  z-index: 100;
}
.top-mv .top-mv-btn {
  position: absolute;
  right: min(24px, 24 / 1440 * var(--inner-width) * 1px);
  bottom: min(24px, 24 / 1440 * var(--inner-width) * 1px);
  width: min(604px, 604 / 1440 * var(--inner-width) * 1px);
  height: min(104px, 104 / 1440 * var(--inner-width) * 1px);
  padding: min(4px, 4 / 1440 * var(--inner-width) * 1px);
  border-radius: min(8px, 8 / 1440 * var(--inner-width) * 1px);
  box-shadow: 0 0 min(20px, 20 / 1440 * var(--inner-width) * 1px) 0 rgba(25, 60, 55, 0.1);
  background: linear-gradient(90deg, #00a4a0 0%, #34d0b6 100%);
}
@media only screen and (max-width: 48em) {
  .top-mv .top-mv-btn {
    width: calc(380 / 400 * var(--inner-width) * 1px);
    height: calc(132 / 400 * var(--inner-width) * 1px);
    border-radius: calc(8 / 400 * var(--inner-width) * 1px);
    padding: calc(4 / 400 * var(--inner-width) * 1px);
    bottom: calc(8 / 400 * var(--inner-width) * 1px);
    top: auto;
    left: 0;
    right: 0;
    margin: auto;
    box-shadow: 0 0 calc(20 / 400 * var(--inner-width) * 1px) 0 rgba(25, 60, 55, 0.15);
  }
}
.top-mv .top-mv-btn ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (max-width: 48em) {
  .top-mv .top-mv-btn ul {
    flex-direction: column;
  }
}
.top-mv .top-mv-btn ul li {
  width: min(296px, 296 / 1440 * var(--inner-width) * 1px);
  height: min(96px, 96 / 1440 * var(--inner-width) * 1px);
  background-color: #fff;
  border-radius: min(6px, 6 / 1440 * var(--inner-width) * 1px);
  position: relative;
  z-index: 100;
}
@media only screen and (max-width: 48em) {
  .top-mv .top-mv-btn ul li {
    width: calc(372 / 400 * var(--inner-width) * 1px);
    height: calc(60 / 400 * var(--inner-width) * 1px);
    border-radius: calc(6 / 400 * var(--inner-width) * 1px);
  }
  .top-mv .top-mv-btn ul li:nth-of-type(n + 2) {
    margin-top: calc(4 / 400 * var(--inner-width) * 1px);
  }
}
.top-mv .top-mv-btn ul li a {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: min(17px, 17 / 1440 * var(--inner-width) * 1px) min(20px, 20 / 1440 * var(--inner-width) * 1px);
  background-image: url(../images/common/icon_box.svg);
  background-position: right min(4px, 4 / 1440 * var(--inner-width) * 1px) bottom min(6px, 6 / 1440 * var(--inner-width) * 1px);
  background-repeat: no-repeat;
  background-size: min(32px, 32 / 1440 * var(--inner-width) * 1px) auto;
}
@media only screen and (max-width: 48em) {
  .top-mv .top-mv-btn ul li a {
    background-position: right calc(4 / 400 * var(--inner-width) * 1px) bottom calc(6 / 400 * var(--inner-width) * 1px);
    background-repeat: no-repeat;
    background-size: calc(32 / 400 * var(--inner-width) * 1px) auto;
    height: calc(60 / 400 * var(--inner-width) * 1px);
    padding: calc(4 / 400 * var(--inner-width) * 1px);
    flex-direction: unset;
    align-items: center;
  }
}
.top-mv .top-mv-btn ul li a span {
  font-size: min(12px, 12 / 1440 * var(--inner-width) * 1px);
  color: #fff;
  height: min(24px, 24 / 1440 * var(--inner-width) * 1px);
  padding: 0 min(8px, 8 / 1440 * var(--inner-width) * 1px);
  border-radius: min(4px, 4 / 1440 * var(--inner-width) * 1px);
  font-weight: 700;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #00a4a0 0%, #34d0b6 100%);
  margin-bottom: min(10px, 10 / 1440 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .top-mv .top-mv-btn ul li a span {
    width: calc(132 / 400 * var(--inner-width) * 1px);
    height: calc(52 / 400 * var(--inner-width) * 1px);
    background-image: url(../images/top/mv-news-fukidashi-sp.svg);
    background-repeat: no-repeat;
    background-size: contain;
    padding-right: calc(10 / 400 * var(--inner-width) * 1px);
    justify-content: center;
    font-size: calc(12 / 400 * var(--inner-width) * 1px);
    text-align: center;
    margin-bottom: 0;
    line-height: 1.3em;
  }
}
.top-mv .top-mv-btn ul li a strong {
  font-size: min(20px, 20 / 1440 * var(--inner-width) * 1px);
  font-weight: 700;
}
@media only screen and (max-width: 48em) {
  .top-mv .top-mv-btn ul li a strong {
    font-size: calc(16 / 400 * var(--inner-width) * 1px);
    font-weight: 700;
    padding-left: calc(16 / 400 * var(--inner-width) * 1px);
    line-height: 1.3em;
  }
}
.top-mv .top-mv-btn .peek-character {
  display: block;
  height: min(136px, 136 / 1440 * var(--inner-width) * 1px);
  width: min(155px, 155 / 1440 * var(--inner-width) * 1px);
  background-image: url(../images/top/kappa-img.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: min(12px, 12 / 1440 * var(--inner-width) * 1px);
  bottom: min(0px, 0 / 1440 * var(--inner-width) * 1px);
  transform: translateY(0); /* 下に隠す */
  transition: all 0.4s ease;
  opacity: 0;
}
@media only screen and (max-width: 48em) {
  .top-mv .top-mv-btn .peek-character {
    height: calc(136 / 400 * var(--inner-width) * 1px);
    width: calc(155 / 400 * var(--inner-width) * 1px);
    right: 0;
  }
}
.top-mv .top-mv-btn .peek-character.show {
  transform: translateY(-50%); /* ぴょこんと出る */
  opacity: 1;
}
@media only screen and (max-width: 48em) {
  .top-mv .top-mv-btn .peek-character.show {
    transform: translateY(-66%);
  }
}

.top-mv-intro {
  position: relative;
}

.top-mvttl-animation01 {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
}
.top-mvttl-animation01 .top-mvttl-img {
  width: min(102px, 102 / 1440 * var(--inner-width) * 1px);
  height: min(88px, 88 / 1440 * var(--inner-width) * 1px);
  position: absolute;
  left: calc(50% - min(348px, 348 / 1440 * var(--inner-width) * 1px));
  top: calc(50% - min(110px, 110 / 1440 * var(--inner-width) * 1px));
  z-index: 10;
  transform: translate(0, 0);
  opacity: 0;
  transition: opacity 0.6s ease, transform 1s ease;
  transition-delay: 0.2s;
}
@media only screen and (max-width: 48em) {
  .top-mvttl-animation01 .top-mvttl-img {
    width: 12vw;
    height: 10vw;
    position: absolute;
    left: 5vw;
    top: calc(50% - 13vw);
  }
}
.top-mvttl-animation01 .top-mvttl-img.active {
  opacity: 1;
  transform: translate(min(45px, 45 / 1440 * var(--inner-width) * 1px), min(130px, 130 / 1440 * var(--inner-width) * 1px));
}
@media only screen and (max-width: 48em) {
  .top-mvttl-animation01 .top-mvttl-img.active {
    transform: translate(5.5vw, 14vw);
  }
}
.top-mvttl-animation01 .top-mvttl-img {
  /* 移動後に消える */
}
.top-mvttl-animation01 .top-mvttl-img.fadeout {
  opacity: 0;
  transform: translate(min(45px, 45 / 1440 * var(--inner-width) * 1px), min(130px, 130 / 1440 * var(--inner-width) * 1px));
}
.top-mvttl-animation01 .top-mvttl {
  width: min(704px, 704 / 1440 * var(--inner-width) * 1px);
  height: min(132px, 132 / 1440 * var(--inner-width) * 1px);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateZ(0);
}
@media only screen and (max-width: 48em) {
  .top-mvttl-animation01 .top-mvttl {
    width: calc(360 / 400 * var(--inner-width) * 1px);
    height: calc(67 / 400 * var(--inner-width) * 1px);
  }
}
.top-mvttl-animation01 .top-mvttl img {
  width: 100%;
  height: auto;
}

.top-mvttl-animation02 {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
}
.top-mvttl-animation02 .top-mvttl-img {
  width: min(102px, 102 / 1440 * var(--inner-width) * 1px);
  height: min(88px, 88 / 1440 * var(--inner-width) * 1px);
  position: absolute;
  right: calc(50% - min(348px, 348 / 1440 * var(--inner-width) * 1px));
  top: calc(50% - min(80px, 80 / 1440 * var(--inner-width) * 1px));
  z-index: 10;
  transform: translate(0, 0);
  opacity: 1;
  transition: opacity 1.5s ease;
}
@media only screen and (max-width: 48em) {
  .top-mvttl-animation02 .top-mvttl-img {
    width: 12vw;
    height: 10vw;
    top: calc(50% - 10.5vw);
    right: 6.5vw;
  }
}
.top-mvttl-animation02 .top-mvttl-img {
  animation: flipX 1s infinite;
}
.top-mvttl-animation02 .top-mvttl-img.fade-out {
  opacity: 0;
}
.top-mvttl-animation02 .top-mvttl,
.top-mvttl-animation02 .top-mvttl-upper {
  width: min(704px, 704 / 1440 * var(--inner-width) * 1px);
  height: min(132px, 132 / 1440 * var(--inner-width) * 1px);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transition: opacity 2s ease;
  transform: translateZ(0);
}
@media only screen and (max-width: 48em) {
  .top-mvttl-animation02 .top-mvttl,
  .top-mvttl-animation02 .top-mvttl-upper {
    width: calc(360 / 400 * var(--inner-width) * 1px);
    height: calc(67 / 400 * var(--inner-width) * 1px);
  }
}
.top-mvttl-animation02 .top-mvttl img,
.top-mvttl-animation02 .top-mvttl-upper img {
  width: 100%;
  height: auto;
}

.top-mvttl-upper {
  opacity: 0;
  transition: opacity 2s ease;
  transition-delay: 2s;
}

.top-mvttl-animation02.fade-in .top-mvttl-upper {
  opacity: 1;
}

@keyframes flipX {
  0% {
    transform: scaleX(1);
  }
  49% {
    transform: scaleX(1);
  }
  /* ★ここで一瞬で反転させる */
  50% {
    transform: scaleX(-1);
  }
  99% {
    transform: scaleX(-1);
  }
  100% {
    transform: scaleX(1);
  }
}
/* 初期状態は非表示 */
.top-mvttl-animation01,
.top-mvttl-animation02 {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* 表示される側のみ */
.top-mvttl-animation01.active,
.top-mvttl-animation02.active {
  opacity: 1;
}

.top-intro {
  padding: min(135px, 135 / 1440 * var(--inner-width) * 1px) 0 min(200px, 200 / 1440 * var(--inner-width) * 1px);
  position: relative;
  z-index: 100;
}
@media only screen and (max-width: 48em) {
  .top-intro {
    padding: calc(98 / 400 * var(--inner-width) * 1px) 0 calc(100 / 400 * var(--inner-width) * 1px);
  }
}
.top-intro p {
  font-size: min(20px, 20 / 1440 * var(--inner-width) * 1px);
  font-weight: 700;
  line-height: 1.8em;
  text-align: center;
  margin-bottom: min(30px, 30 / 1440 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .top-intro p {
    font-size: calc(14 / 400 * var(--inner-width) * 1px);
    margin-bottom: calc(24 / 400 * var(--inner-width) * 1px);
  }
}

.top-mv-rect {
  background-image: url(../images/top/mv-rect-left.png), url(../images/top/mv-rect-right.png);
  background-position: left top, right top;
  background-repeat: no-repeat;
  background-size: auto 100vh;
  background-size: auto 100dvh;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
}
@media only screen and (max-width: 48em) {
  .top-mv-rect {
    background-image: url(../images/top/mv-rect-sp.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto 100vh;
    background-size: auto 100dvh;
  }
}

/* ローディング背景（最初は固定） */
.loading-bg {
  position: fixed;
  inset: 0;
  z-index: -1; /* 後で変更するので */
  transition: opacity 0.6s ease;
  opacity: 1;
  height: 100vh;
  height: 100dvh;
  width: 100%;
}
.loading-bg .loading-bg-slide {
  position: absolute;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}
.loading-bg .bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  top: 0;
  left: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform-origin: center;
  animation: aurora-float 16s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate, aurora-hue 14s ease-in-out infinite alternate;
  transition: opacity 2s ease; /* クロスフェード時間 */
}
@media only screen and (max-width: 48em) {
  .loading-bg .bg-slide {
    background-size: auto calc(360 / 400 * var(--inner-width) * 1px);
    animation-duration: 6s;
    animation: aurora-float-sp 16s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate, aurora-hue 14s ease-in-out infinite alternate;
  }
}
.loading-bg .bg-slide.active {
  opacity: 1;
}

@keyframes aurora-float {
  0% {
    transform: scale(1) translate(0, 0) rotate(0deg);
  }
  50% {
    transform: scale(1.05) translate(-12px, 8px) rotate(5deg);
  }
  100% {
    transform: scale(1.12) translate(10px, -6px) rotate(-5deg);
  }
}
@keyframes aurora-float-sp {
  0% {
    transform: scale(1) translate(0, 0) rotate(0deg);
  }
  50% {
    transform: scale(1.08) translate(0, 0) rotate(10deg);
  }
  100% {
    transform: scale(1.15) translate(0, 0) rotate(-10deg);
  }
}
@keyframes aurora-hue {
  0% {
    filter: blur(0px) hue-rotate(0deg);
  }
  20% {
    filter: blur(2px) hue-rotate(25deg);
  }
  40% {
    filter: blur(0px) hue-rotate(0deg);
  }
  60% {
    filter: blur(2px) hue-rotate(25deg);
  }
  80% {
    filter: blur(0px) hue-rotate(0deg);
  }
  100% {
    filter: blur(2px) hue-rotate(25deg);
  }
}
/* ブラー白背景：スクロール中は固定 */
.top-intro-blur {
  position: fixed;
  inset: 0;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  background: rgba(247, 247, 247, 0.6);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.top-intro-blur.show {
  opacity: 1;
}

/* 固定解除 */
.top-intro-blur.release {
  position: absolute;
  top: 0;
  bottom: 0;
}

.top-mv-rect.release {
  position: absolute;
  top: auto;
  bottom: 0;
}

/* 固定解除後に背景として流すためのクラス */
.loading-bg.release {
  position: absolute;
  top: auto;
  bottom: 0;
  opacity: 1;
  z-index: -1;
}

.top-news {
  width: 100%;
  position: relative;
  padding: min(100px, 100 / 1440 * var(--inner-width) * 1px) 0 min(130px, 130 / 1440 * var(--inner-width) * 1px);
  background-image: url(../images/top/news-rect.svg);
  background-position: top min(140px, 140 / 1440 * var(--inner-width) * 1px) center;
  background-repeat: no-repeat;
  background-size: min(1400px, 1400 / 1440 * var(--inner-width) * 1px) auto;
}
@media only screen and (max-width: 48em) {
  .top-news {
    background-image: url(../images/top/news-rect-sp.png);
    background-position: top calc(104 / 400 * var(--inner-width) * 1px) center;
    background-size: contain;
    padding: calc(64 / 400 * var(--inner-width) * 1px) 0;
  }
}
.top-news .top-news-wrapper {
  padding-left: calc(100% - (50% + min(600px, 600 / 1440 * var(--inner-width) * 1px)));
  padding-right: calc(100% - (50% + min(600px, 600 / 1440 * var(--inner-width) * 1px)));
  position: relative;
}
@media only screen and (max-width: 48em) {
  .top-news .top-news-wrapper {
    padding-left: calc(20 / 400 * var(--inner-width) * 1px);
    padding-right: calc(20 / 400 * var(--inner-width) * 1px);
  }
}
.top-news .top-news-wrapper .top-news-inner {
  width: 100%;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: min(80px, 80 / 1440 * var(--inner-width) * 1px) min(100px, 100 / 1440 * var(--inner-width) * 1px) 0;
  background: url(../images/top/news-line.svg) no-repeat left top/min(24px, 24 / 1440 * var(--inner-width) * 1px) auto;
}
@media only screen and (max-width: 48em) {
  .top-news .top-news-wrapper .top-news-inner {
    padding: calc(40 / 400 * var(--inner-width) * 1px) 0 0 calc(40 / 400 * var(--inner-width) * 1px);
    justify-content: flex-start;
    flex-direction: column;
    background-size: calc(24 / 400 * var(--inner-width) * 1px) auto;
  }
}
.top-news .top-news-wrapper .top-news-inner::before {
  height: calc(100% - min(40px, 40 / 1440 * var(--inner-width) * 1px));
  width: 1px;
  content: "";
  display: block;
  background-color: #193c37;
  position: absolute;
  left: 0;
  bottom: 0;
}
@media only screen and (max-width: 48em) {
  .top-news .top-news-wrapper .top-news-inner::before {
    height: calc(100% - 40 / 400 * var(--inner-width) * 1px);
  }
}
.top-news .top-news-wrapper .top-news-inner .contents-ttl {
  font-size: min(40px, 40 / 1440 * var(--inner-width) * 1px);
  font-weight: 700;
  line-height: 1em;
}
@media only screen and (max-width: 48em) {
  .top-news .top-news-wrapper .top-news-inner .contents-ttl {
    font-size: calc(40 / 400 * var(--inner-width) * 1px);
    margin-bottom: calc(40 / 400 * var(--inner-width) * 1px);
  }
}
.top-news .top-news-wrapper .top-news-inner .contents-ttl span {
  font-size: min(20px, 20 / 1440 * var(--inner-width) * 1px);
  font-weight: 500;
  line-height: 1em;
  margin-bottom: min(20px, 20 / 1440 * var(--inner-width) * 1px);
  display: block;
}
@media only screen and (max-width: 48em) {
  .top-news .top-news-wrapper .top-news-inner .contents-ttl span {
    font-size: calc(24 / 400 * var(--inner-width) * 1px);
    margin-bottom: calc(16 / 400 * var(--inner-width) * 1px);
  }
}
.top-news .top-news-wrapper::after {
  height: 1px;
  width: calc(50% + min(560px, 560 / 1440 * var(--inner-width) * 1px));
  content: "";
  display: block;
  background-color: #193c37;
  position: absolute;
  top: 0;
  right: 0;
}
@media only screen and (max-width: 48em) {
  .top-news .top-news-wrapper::after {
    width: calc(100% - 60 / 400 * var(--inner-width) * 1px);
  }
}
@media only screen and (max-width: 48em) {
  .top-news .article {
    width: 100%;
  }
}
.top-news .article .article-list {
  width: min(795px, 795 / 1440 * var(--inner-width) * 1px);
  background-color: #fff;
  border-radius: min(8px, 8 / 1440 * var(--inner-width) * 1px);
  margin-bottom: min(8px, 8 / 1440 * var(--inner-width) * 1px);
  padding: min(32px, 32 / 1440 * var(--inner-width) * 1px) min(112px, 112 / 1440 * var(--inner-width) * 1px) min(32px, 32 / 1440 * var(--inner-width) * 1px) min(56px, 56 / 1440 * var(--inner-width) * 1px);
  position: relative;
}
@media only screen and (max-width: 48em) {
  .top-news .article .article-list {
    width: 100%;
    padding: calc(24 / 400 * var(--inner-width) * 1px) calc(40 / 400 * var(--inner-width) * 1px) calc(24 / 400 * var(--inner-width) * 1px) calc(24 / 400 * var(--inner-width) * 1px);
    border-radius: calc(8 / 400 * var(--inner-width) * 1px);
    margin-bottom: calc(8 / 400 * var(--inner-width) * 1px);
  }
}
.top-news .article .article-list::after {
  content: "";
  display: block;
  height: min(40px, 40 / 1440 * var(--inner-width) * 1px);
  width: min(40px, 40 / 1440 * var(--inner-width) * 1px);
  background: url(../images/common/icon_box.svg) no-repeat center center/contain;
  width: min(40px, 40 / 1440 * var(--inner-width) * 1px);
  height: min(40px, 40 / 1440 * var(--inner-width) * 1px);
  position: absolute;
  right: min(16px, 16 / 1440 * var(--inner-width) * 1px);
  bottom: min(16px, 16 / 1440 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .top-news .article .article-list::after {
    width: calc(40 / 400 * var(--inner-width) * 1px);
    height: calc(40 / 400 * var(--inner-width) * 1px);
    position: absolute;
    right: calc(8 / 400 * var(--inner-width) * 1px);
    bottom: calc(8 / 400 * var(--inner-width) * 1px);
  }
}
.top-news .article .article-list .article-ttl {
  font-size: min(16px, 16 / 1440 * var(--inner-width) * 1px);
  line-height: 1.5em;
  font-weight: 700;
  margin-bottom: min(16px, 16 / 1440 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .top-news .article .article-list .article-ttl {
    font-size: calc(16 / 400 * var(--inner-width) * 1px);
    line-height: 1.5em;
    font-weight: 700;
    margin-bottom: calc(16 / 400 * var(--inner-width) * 1px);
  }
}
.top-news .article .article-list .article-date {
  font-size: min(14px, 14 / 1440 * var(--inner-width) * 1px);
  line-height: 1em;
  font-weight: 500;
  color: #a0aeac;
}
@media only screen and (max-width: 48em) {
  .top-news .article .article-list .article-date {
    font-size: calc(14 / 400 * var(--inner-width) * 1px);
  }
}
.top-news .article .article-list.no-link {
  pointer-events: none;
}
.top-news .article .article-list.no-link::after {
  display: none;
}

.top-contents {
  padding: min(50px, 50 / 1440 * var(--inner-width) * 1px) 0 min(120px, 120 / 1440 * var(--inner-width) * 1px);
  background-image: url(../images/top/contents-bg-left.png), url(../images/top/contents-bg-right.png);
  background-repeat: no-repeat;
  background-position: left top min(50px, 50 / 1440 * var(--inner-width) * 1px), right top;
  background-size: min(666.5px, 666.5 / 1440 * var(--inner-width) * 1px) auto, min(765.5px, 765.5 / 1440 * var(--inner-width) * 1px) auto;
}
@media only screen and (max-width: 48em) {
  .top-contents {
    padding: calc(50 / 400 * var(--inner-width) * 1px) 0 calc(64 / 400 * var(--inner-width) * 1px);
    background-image: url(../images/top/contents-bg-right.png);
    background-size: 172vw auto;
    background-position: top 16vw right -100vw;
  }
}
.top-contents .contents-ttl {
  font-size: min(40px, 40 / 1440 * var(--inner-width) * 1px);
  font-weight: 700;
  line-height: 1em;
  text-align: center;
  margin-bottom: min(60px, 60 / 1440 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-ttl {
    font-size: calc(40 / 400 * var(--inner-width) * 1px);
    margin-bottom: calc(70 / 400 * var(--inner-width) * 1px);
  }
}
.top-contents .contents-ttl span {
  font-size: min(24px, 24 / 1440 * var(--inner-width) * 1px);
  font-weight: 500;
  display: block;
  margin-bottom: min(10px, 10 / 1440 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-ttl span {
    font-size: calc(24 / 400 * var(--inner-width) * 1px);
    margin-bottom: calc(10 / 400 * var(--inner-width) * 1px);
  }
}
.top-contents .contents-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: min(998px, 998 / 1440 * var(--inner-width) * 1px);
  margin: 0 auto;
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list {
    width: calc(340 / 400 * var(--inner-width) * 1px);
  }
}
.top-contents .contents-list > li {
  width: min(304px, 304 / 1440 * var(--inner-width) * 1px);
  height: min(240px, 240 / 1440 * var(--inner-width) * 1px);
  margin-bottom: min(56px, 56 / 1440 * var(--inner-width) * 1px);
  position: relative;
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li {
    width: calc(320 / 400 * var(--inner-width) * 1px);
    height: calc(104 / 400 * var(--inner-width) * 1px);
    border-radius: calc(8 / 400 * var(--inner-width) * 1px);
    margin: 0 auto calc(32 / 400 * var(--inner-width) * 1px);
  }
}
.top-contents .contents-list > li a {
  background-color: #fff;
  width: min(304px, 304 / 1440 * var(--inner-width) * 1px);
  height: min(240px, 240 / 1440 * var(--inner-width) * 1px);
  box-shadow: 0 0 min(20px, 20 / 1440 * var(--inner-width) * 1px) 0 rgba(25, 60, 55, 0.1);
  border-radius: min(8px, 8 / 1440 * var(--inner-width) * 1px);
  overflow: hidden;
  display: block;
  position: relative;
  z-index: 50;
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li a {
    width: 100%;
    height: calc(104 / 400 * var(--inner-width) * 1px);
    border-radius: calc(8 / 400 * var(--inner-width) * 1px);
    display: flex;
    align-items: center;
    box-shadow: 0 0 calc(20 / 400 * var(--inner-width) * 1px) 0 rgba(25, 60, 55, 0.15);
  }
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li a figure {
    width: calc(104 / 400 * var(--inner-width) * 1px);
    height: calc(104 / 400 * var(--inner-width) * 1px);
  }
}
.top-contents .contents-list > li.list02 {
  width: min(656px, 656 / 1440 * var(--inner-width) * 1px);
  height: min(240px, 240 / 1440 * var(--inner-width) * 1px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: min(16px, 16 / 1440 * var(--inner-width) * 1px);
  border-radius: min(8px, 8 / 1440 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li.list02 {
    flex-direction: column;
    width: calc(340 / 400 * var(--inner-width) * 1px);
    height: auto;
    padding: calc(10 / 400 * var(--inner-width) * 1px);
  }
}
.top-contents .contents-list > li.list02 a {
  height: min(208px, 208 / 1440 * var(--inner-width) * 1px);
  position: relative;
  z-index: 50;
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li.list02 a {
    width: calc(320 / 400 * var(--inner-width) * 1px);
    height: calc(104 / 400 * var(--inner-width) * 1px);
    border-radius: calc(8 / 400 * var(--inner-width) * 1px);
    display: flex;
    align-items: center;
  }
  .top-contents .contents-list > li.list02 a:nth-of-type(n + 2) {
    margin-top: calc(8 / 400 * var(--inner-width) * 1px);
  }
}
.top-contents .contents-list > li.list02::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #00a4a0 0%, #34d0b6 100%);
  opacity: 0.2;
  border-radius: min(8px, 8 / 1440 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li.list02::after {
    border-radius: calc(8 / 400 * var(--inner-width) * 1px);
  }
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li.list02 .num-icon {
    left: calc(-12 / 400 * var(--inner-width) * 1px);
    top: calc(-12 / 400 * var(--inner-width) * 1px);
  }
}
.top-contents .contents-list > li.list06, .top-contents .contents-list > li.list07 {
  width: min(491px, 491 / 1440 * var(--inner-width) * 1px);
  height: min(120px, 120 / 1440 * var(--inner-width) * 1px);
  margin-bottom: min(0px, 0 / 1440 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li.list06, .top-contents .contents-list > li.list07 {
    width: calc(152 / 400 * var(--inner-width) * 1px);
    height: calc(232 / 400 * var(--inner-width) * 1px);
  }
}
.top-contents .contents-list > li.list06 a, .top-contents .contents-list > li.list07 a {
  display: flex;
  align-items: center;
  width: min(491px, 491 / 1440 * var(--inner-width) * 1px);
  height: min(120px, 120 / 1440 * var(--inner-width) * 1px);
  box-shadow: 0 0 min(20px, 20 / 1440 * var(--inner-width) * 1px) 0 rgba(25, 60, 55, 0.1);
  padding: min(8px, 8 / 1440 * var(--inner-width) * 1px) min(32px, 32 / 1440 * var(--inner-width) * 1px) min(8px, 8 / 1440 * var(--inner-width) * 1px) min(8px, 8 / 1440 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li.list06 a, .top-contents .contents-list > li.list07 a {
    width: calc(152 / 400 * var(--inner-width) * 1px);
    height: calc(232 / 400 * var(--inner-width) * 1px);
    padding: calc(16 / 400 * var(--inner-width) * 1px);
    flex-direction: column;
    box-shadow: 0 0 calc(20 / 400 * var(--inner-width) * 1px) 0 rgba(25, 60, 55, 0.15);
  }
}
.top-contents .contents-list > li.list06 a figure, .top-contents .contents-list > li.list07 a figure {
  border-radius: min(4px, 4 / 1440 * var(--inner-width) * 1px);
  overflow: hidden;
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li.list06 a figure, .top-contents .contents-list > li.list07 a figure {
    width: calc(120 / 400 * var(--inner-width) * 1px);
    height: auto;
    border-radius: calc(4 / 400 * var(--inner-width) * 1px);
  }
}
.top-contents .contents-list > li.list06 a figure img, .top-contents .contents-list > li.list07 a figure img {
  width: min(104px, 104 / 1440 * var(--inner-width) * 1px);
  height: auto;
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li.list06 a figure img, .top-contents .contents-list > li.list07 a figure img {
    width: 100%;
    height: auto;
  }
}
.top-contents .contents-list > li.list06 a span, .top-contents .contents-list > li.list07 a span {
  width: calc(100% - min(104px, 104 / 1440 * var(--inner-width) * 1px));
  padding: 0 0 0 min(32px, 32 / 1440 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li.list06 a span, .top-contents .contents-list > li.list07 a span {
    width: 100%;
    height: auto;
    position: relative;
    font-size: calc(16 / 400 * var(--inner-width) * 1px);
    padding: calc(20 / 400 * var(--inner-width) * 1px) 0 0;
    position: static;
  }
}
.top-contents .contents-list > li a span {
  height: min(72px, 72 / 1440 * var(--inner-width) * 1px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 min(16px, 16 / 1440 * var(--inner-width) * 1px) 0 min(24px, 24 / 1440 * var(--inner-width) * 1px);
  font-size: min(20px, 20 / 1440 * var(--inner-width) * 1px);
  font-weight: 700;
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li a span {
    width: calc(100% - 104 / 400 * var(--inner-width) * 1px);
    height: calc(104 / 400 * var(--inner-width) * 1px);
    position: relative;
    font-size: calc(16 / 400 * var(--inner-width) * 1px);
    padding: 0 calc(16 / 400 * var(--inner-width) * 1px) 0 calc(24 / 400 * var(--inner-width) * 1px);
  }
}
.top-contents .contents-list > li a span::after {
  content: "";
  display: block;
  height: min(40px, 40 / 1440 * var(--inner-width) * 1px);
  width: min(40px, 40 / 1440 * var(--inner-width) * 1px);
  background: url(../images/common/icon_box.svg) no-repeat center center/contain;
  width: min(40px, 40 / 1440 * var(--inner-width) * 1px);
  height: min(40px, 40 / 1440 * var(--inner-width) * 1px);
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li a span::after {
    width: calc(40 / 400 * var(--inner-width) * 1px);
    height: calc(40 / 400 * var(--inner-width) * 1px);
    position: absolute;
    right: calc(8 / 400 * var(--inner-width) * 1px);
    bottom: calc(8 / 400 * var(--inner-width) * 1px);
  }
}
.top-contents .contents-list > li .num-icon {
  height: min(64px, 64 / 1440 * var(--inner-width) * 1px);
  width: min(64px, 64 / 1440 * var(--inner-width) * 1px);
  position: absolute;
  left: max(-24px, -24 / 1440 * var(--inner-width) * 1px);
  top: max(-24px, -24 / 1440 * var(--inner-width) * 1px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li .num-icon {
    height: calc(48 / 400 * var(--inner-width) * 1px);
    width: calc(48 / 400 * var(--inner-width) * 1px);
    left: calc(-20 / 400 * var(--inner-width) * 1px);
    top: calc(-20 / 400 * var(--inner-width) * 1px);
  }
}
.top-contents .contents-list > li .num-icon span {
  background: linear-gradient(45deg, #00a4a0 0%, #34d0b6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  font-size: min(20px, 20 / 1440 * var(--inner-width) * 1px);
  font-weight: 700;
  text-align: center;
  position: relative;
  z-index: 200;
  color: transparent;
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li .num-icon span {
    font-size: calc(16 / 400 * var(--inner-width) * 1px);
    font-weight: 700;
  }
}
.top-contents .contents-list > li .num-icon::before {
  content: "";
  display: block;
  height: min(64px, 64 / 1440 * var(--inner-width) * 1px);
  width: min(64px, 64 / 1440 * var(--inner-width) * 1px);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  position: absolute;
  left: min(0px, 0 / 1440 * var(--inner-width) * 1px);
  top: min(0px, 0 / 1440 * var(--inner-width) * 1px);
  z-index: 20;
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li .num-icon::before {
    height: calc(48 / 400 * var(--inner-width) * 1px);
    width: calc(48 / 400 * var(--inner-width) * 1px);
  }
}
.top-contents .contents-list > li .num-icon::after {
  content: "";
  display: block;
  height: min(64px, 64 / 1440 * var(--inner-width) * 1px);
  width: min(64px, 64 / 1440 * var(--inner-width) * 1px);
  background: url(../images/top/circle-line.svg) no-repeat center center/contain;
  position: absolute;
  left: min(0px, 0 / 1440 * var(--inner-width) * 1px);
  top: min(0px, 0 / 1440 * var(--inner-width) * 1px);
  z-index: 50;
}
@media only screen and (max-width: 48em) {
  .top-contents .contents-list > li .num-icon::after {
    height: calc(48 / 400 * var(--inner-width) * 1px);
    width: calc(48 / 400 * var(--inner-width) * 1px);
    background: url(../images/top/circle-line-sp.svg) no-repeat center center/contain;
  }
}/*# sourceMappingURL=top.css.map */