@charset "UTF-8";
/*
	font
*******************************/
/*
	color
*******************************/
/*
01: テーブルセル（奇数行）
02: テーブルセル（偶数行）
03: ホバー
04: ダーク
05: SPグローバルナビゲーション
06: ヘッダーバナー
07: 料金表
*/
/*
	width
*******************************/
/*
	フォントサイズ
*******************************/
/*
	レスポンシブ
*******************************/
/*
	モード
*******************************/
/*
	アイコンフォント
*******************************/
/*
	アーガイル柄
*******************************/
/*
	ホバーアニメーション
*******************************/
.mainvisual-b {
  background: url("/wing/lp/03/images/mainvisual_bg_b.png") center center/cover no-repeat;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
}
@media (max-width: 768px) {
  .mainvisual-b {
    background: url("/wing/lp/03/images/mainvisual_bg-sp_b.png") center center/cover no-repeat;
    height: auto;
    overflow-x: clip;
    overflow-y: hidden;
    padding: 40px 0;
  }
}
.mainvisual-b .mainvisualTitle {
  background: none;
  max-width: 525px;
  padding: 0;
}
@media (max-width: 768px) {
  .mainvisual-b .mainvisualTitle .boxImage {
    flex-direction: column;
    gap: 16px 0;
  }
}
@media (max-width: 768px) {
  .mainvisual-b .mainvisualTitle .boxImage .forPCTB {
    display: none !important;
  }
}
.mainvisual-b .mainvisualApply {
  background: none;
  grid-area: apply;
  padding: 64px 0 0;
  width: 100%;
}
@media (max-width: 768px) {
  .mainvisual-b .mainvisualApply {
    padding: 36px 0 0;
  }
}
.mainvisual-b .mainvisual_rings {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
}
.mainvisual-b .mainvisual_rings.forPC {
  display: block !important;
}
@media (max-width: 768px) {
  .mainvisual-b .mainvisual_rings.forPC {
    display: none !important;
  }
}
.mainvisual-b .mainvisual_rings.forSP {
  display: none !important;
}
@media (max-width: 768px) {
  .mainvisual-b .mainvisual_rings.forSP {
    display: block !important;
  }
}
.mainvisual-b .mainvisual_ringsFrame {
  height: 100%;
  position: relative;
  width: 100%;
}
.mainvisual-b .mainvisual_ring {
  aspect-ratio: 1/1;
  border-radius: 50%;
  left: var(--l);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--bw) * 2), #000 calc(100% - var(--bw) * 2));
  mask: radial-gradient(closest-side, transparent calc(100% - var(--bw) * 2), #000 calc(100% - var(--bw) * 2));
  overflow: hidden;
  position: absolute;
  top: var(--t);
  width: var(--size);
}
.mainvisual-b .mainvisual_ring::before {
  animation: mainvisualRingSpin 8s linear infinite;
  background: conic-gradient(from 0deg, #fcff5d, #dbffb6, #aee6ff, #fcff5d);
  content: "";
  inset: -25%;
  position: absolute;
}
.mainvisual-b .mainvisual_ring.is-cool::before {
  background: conic-gradient(from 0deg, #aee6ff, #bcd7ff, #f8d9ff, #aee6ff);
}
.mainvisual_inner {
  column-gap: 0;
  display: grid;
  grid-template-areas: "left character" "apply character";
  grid-template-columns: 46% 48%;
  height: 100%;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1600px;
  padding: 60px 13.75%;
  position: relative;
}
@media (max-width: 1024px) {
  .mainvisual_inner {
    padding: 60px 5%;
  }
}
@media (max-width: 768px) {
  .mainvisual_inner {
    grid-template-areas: "left" "character" "apply";
    grid-template-columns: 100%;
    height: auto;
    padding: 20px 20px;
  }
}
.mainvisual_left {
  grid-area: left;
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) {
  .mainvisual_left {
    margin: 0 auto;
  }
}
.mainvisual_characterRow {
  grid-area: character;
  max-width: 635px;
  position: relative;
}
@media (max-width: 768px) {
  .mainvisual_characterRow {
    align-items: center;
    display: flex;
    gap: 0 10px;
    margin: 20px -20px 0 0;
    max-width: none;
    overflow: visible;
    width: calc(100% + 20px);
  }
}
.mainvisual_titleSp {
  flex-shrink: 0;
  height: auto;
  width: 40%;
}
.mainvisual_character {
  aspect-ratio: 1270/1528;
  height: auto;
  left: -12.5%;
  position: absolute;
  top: -20%;
  width: 115%;
  z-index: 3;
}
@media (max-width: 768px) {
  .mainvisual_character {
    flex: 1 1 0;
    height: auto;
    left: auto;
    min-width: 0;
    overflow: visible;
    position: relative;
    top: auto;
    width: 0;
    z-index: auto;
  }
}
.mainvisual_characterImage {
  display: block;
  height: 100%;
  object-fit: contain;
  object-position: top;
  width: 100%;
}
@media (max-width: 768px) {
  .mainvisual_characterImage {
    height: 130%;
    left: 50%;
    max-width: none;
    pointer-events: none;
    position: absolute;
    top: -18%;
    transform: translateX(-50%);
    width: 160%;
    z-index: 5;
  }
}
.mainvisual_slide {
  left: 19.9%;
  position: absolute;
  top: 57.9%;
  width: 44.2%;
}
@media (max-width: 768px) {
  .mainvisual_slide {
    left: 10.5%;
    top: 57.27%;
    width: 58%;
    z-index: 6;
  }
}
.mainvisual_slideItem {
  display: block;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.6s ease;
  width: 100%;
}
.mainvisual_slideItem.is-active {
  opacity: 1;
  position: relative;
}
.mainvisual_slideItem img {
  display: block;
  height: auto;
  object-fit: contain;
  width: 100%;
}
.mainvisual_slideCaption {
  align-items: center;
  background-color: #fff;
  border-radius: 50%;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  height: 84.0473684211%;
  justify-content: center;
  overflow: hidden;
  padding: 1%;
  position: absolute;
  right: -30%;
  text-align: center;
  top: -32%;
  width: 53.23%;
  z-index: 1;
}
@media (max-width: 768px) {
  .mainvisual_slideCaption {
    height: 102.6315789474%;
    left: -20%;
    right: auto;
    top: -50%;
    width: 65%;
  }
}
.mainvisual_slideCaption_label {
  color: #012370;
  display: block;
  font-family: "Noto Sans JP", "Droid Sans", Helvetica, YuGothic, "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Arial, sans-serif;
  font-size: 10cqw;
  font-weight: 700;
}
.mainvisual_slideCaption_highlight {
  color: #ff7246;
  display: block;
  font-family: "Noto Sans JP", "Droid Sans", Helvetica, YuGothic, "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Arial, sans-serif;
  font-size: 13cqw;
  font-weight: 700;
}
.mainvisual_button {
  align-items: center;
  background-color: #49dd4f;
  border-radius: 999px;
  box-shadow: 0 6px 0 #18911d;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding: 28px 40px;
  position: relative;
  transition: opacity 0.3s ease;
}
@media (max-width: 768px) {
  .mainvisual_button {
    height: 74px;
    padding: 0 32px;
    width: 100%;
  }
}
.mainvisual_button:hover {
  opacity: 0.8;
}
.mainvisual_button .textRibbonType04 {
  background-color: #ffdf00;
  color: #012370;
  font-family: "Noto Sans JP", "Droid Sans", Helvetica, YuGothic, "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Arial, sans-serif;
  font-weight: 700;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-size: 1.6rem;
}
.mainvisual_button_title {
  color: #414141;
  font-family: "Noto Sans JP", "Droid Sans", Helvetica, YuGothic, "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Arial, sans-serif;
  font-weight: 700;
  text-align: center;
  font-size: 20px;
  font-size: 2rem;
}

@keyframes mainvisualRingSpin {
  to {
    transform: rotate(360deg);
  }
}
/*# sourceMappingURL=this-b.css.map */