/*============
 SPフリック版
 ============*/
/* Common */
@media screen and (max-width: 479px) {
    .tab-and-pc {
        display: none;
    }
}
div.sp-flick {
    height: 100dvh;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-feature-settings: "palt";
}
@media screen and (min-width: 480px) {
    div.sp-flick {
        display: none;
    }
}

/* Common - buttons */
div.sp-flick a.cta-button {
    z-index: 2;
    display: block;
    position: absolute;
    bottom: 2.28dvh;
    background: #ffa51d;
    margin: 0 5.12%;
    padding: 4.35vw 2.56%;
    color: #fff;
    font-size: 5.64vw;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    width: 89.76%;
    border-radius: 100vw;
    box-shadow: 0 1.28vw 0.76vw rgba(75, 75, 75, 0.15);
}
div.sp-flick a.cta-button::after {
    content: "";
    display: inline-block;
    width: 4.61vw;
    height: 5.12vw;
    position: absolute;
    top: 50%;
    right: 4vw;
    translate: 0 -50%;
    background: url("/images/top/icon_arrow_right.webp") no-repeat center / cover;
    filter: invert(1);
}
div.sp-flick .swiper-slide.sp-fv a.cta-button {
    font-size: 6.15vw;
    line-height: 1;
    margin: 0 6.41%;
    padding: 5.12vw 2.56vw;
    width: 87.17%;
    bottom: 4.87dvh;
}
div.sp-flick .swiper-slide.sp-fv a.cta-button::before {
    content: "";
    position: absolute;
    display: block;
    background: url("/images/top/sp-flick-fv-text-on-cta.svg") no-repeat center / contain;
    height: 6.15vw;
    width: 100%;
    top: -6.92vw;
    left: 50%;
    translate: -50% 0;
}
div.sp-flick .swiper-slide.sp-fv a.cta-button::after {
    top: 50%;
    right: 9.29vw;
    translate: 0 -50%;
}

/* Common - header override */
div.sp-flick .header {
    background: #fff;
    padding: 2.3% 2.56% 2.3%;
    align-items: center;
}
div.sp-flick .header .header__text01 {
    font-size: 3.07vw;
}
div.sp-flick .header .header__img01 {
    width: 32.82vw;
}

/* Common */
div.sp-flick > .swiper-wrapper > .swiper-slide {
    position: relative;
    background: #eaf3fb;
    display: block;
    place-content: unset;
}
div.sp-flick .swiper-slide img {
    width: 100%;
    height: unset;
}
div.sp-flick .swiper-slide .heading {
    background: #3163d2;
    color: #fff;
    font-weight: 700;
    margin: 0 0 9vw;
    padding: 5.12vw;
    position: relative;
    filter: drop-shadow(0 1.02vw 3.07vw rgba(0, 55, 136, 0.18));
}
div.sp-flick .swiper-slide .heading::after {
    content: "";
    display: block;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzkwIiBoZWlnaHQ9IjIzIiB2aWV3Qm94PSIwIDAgMzkwIDIzIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0yMzAgOC4yMzM2M0MxNjIuODA0IDE1Ljk4MTQgNzkuMyAzMC42ODI5IDAgMTguMDkwNVYwLjM5MzA2NkgzOTBWMTguMDkwNUMzNTkuNSA5LjIzNjgxIDI5OCAwLjM5MzA2NiAyMzAgOC4yMzM2M1oiIGZpbGw9IiMzMTYzRDIiLz48L3N2Zz4=') no-repeat center / 102%;
    width: 100%;
    height: 5.9vw;
    position: absolute;
    left: 0;
    bottom: -4.75vw;
}
div.sp-flick .swiper-slide .heading h2 {
    font-size: 5.64vw;
    text-align: center;
}
div.sp-flick .swiper-slide .heading h2 span {
    color: #ffee34;
    font-size: 6.15vw;
}
div.sp-flick .swiper-slide .heading p {
    font-size: 3.85vw;
    text-align: center;
}
div.sp-flick .swiper-slide .heading img {
    width: 33.33vw;
    box-sizing: border-box;
}
div.sp-flick .swiper-slide h3 {
    text-align: center;
    color: #003788;
    font-size: 5.13vw;
    font-weight: 600;
    margin: 0 0 3.84vw;
}
div.sp-flick .swiper-slide .container {
    display: flex;
    flex-direction: column;
    position: relative;
    translate: 0 -50%;
}
div.sp-flick .sp-companies-slider,
div.sp-flick .sp-voices-slider,
div.sp-flick .sp-events-slider {
    position: relative;
    margin: 0 5.12vw 1.02vw;
    border: 1px solid #b9e3ff;
    overflow: hidden;
    background: #fff;
}
div.sp-flick .sp-companies-slider-pagination,
div.sp-flick .sp-voices-slider-pagination,
div.sp-flick .sp-events-slider-pagination {
    position: relative;
    bottom: 0 !important;
    text-align: center;
}
div.sp-flick .sp-companies-slider-pagination > .swiper-pagination-bullet,
div.sp-flick .sp-voices-slider-pagination > .swiper-pagination-bullet,
div.sp-flick .sp-events-slider-pagination > .swiper-pagination-bullet {
    width: 2.56vw !important;
    height: 2.56vw !important;
    border: 0.25vw solid #2e96dd;
    margin: 0 1.02vw !important;
}
div.sp-flick .swiper-slide .and-more {
    text-align: center;
    font-size: 5.12vw;
    font-weight: 600;
    color: #003788;
    margin: 0.76vw 0 0;
}
div.sp-flick .swiper-slide .and-more p {
    display: inline-block;
    border-bottom: 0.5625vw solid #3163d2;
    margin: 0 0 1.28vw;
    padding: 1.02vw 2.05vw;
}
div.sp-flick .swiper-slide .and-more span {
    font-size: 4.1vw;
}

/* FV */
div.sp-flick .swiper-slide.sp-fv {
    background:
        url("/images/top/sp-flick-fv-bg.png") no-repeat center / cover,
        linear-gradient(120deg,rgba(187, 251, 255, 1) 0%, rgba(134, 211, 255, 1) 13%, rgba(126, 193, 255, 1) 54%, rgba(36, 128, 237, 1) 100%);
}
div.sp-flick .swiper-slide.sp-fv .container {
    top: 39.25%;
}
div.sp-flick .swiper-slide.sp-fv .catchline {
    color: #fff;
    text-align: center;
    font-size: 12.3vw;
    font-weight: 700;
    text-shadow: 0 0.51vw 3.84vw rgba(17, 55, 141, 0.36);
    margin: 3.07vw 0;
    line-height: 1.2;
}
div.sp-flick .swiper-slide.sp-fv .catchline span {
    font-size: 14.1vw;
}

/* Companies */
div.sp-flick .swiper-slide.sp-companies .container {
    top: 31%;
}

/* Features */
div.sp-flick .swiper-slide.sp-features .container {
    top: 31%;
}

/* Reasons */
div.sp-flick .swiper-slide.sp-reasons .container {
    top: 35%;
}

/* Voices */
div.sp-flick .swiper-slide.sp-voices .container {
    top: 30%;
}
div.sp-flick .swiper-slide.sp-voices .sp-voices-slider {
    border-radius: 2.56vw;
}

/* Events */
div.sp-flick .swiper-slide.sp-events .container {
    top: 31%;
}
div.sp-flick .swiper-slide.sp-events h3 {
    margin: 0 0 1.28vw;
}
div.sp-flick .swiper-slide.sp-events div.entrance-free {
    text-align: center;
    margin: 0 0 3.84vw;
}
div.sp-flick .swiper-slide.sp-events div.entrance-free p {
    display: inline-block;
    background: #fff;
    padding: 1.02vw 2.05vw;
    color: #003788;
    font-size: 3.84vw;
    font-weight: 600;
}
div.sp-flick .swiper-slide.sp-events div.entrance-free p span {
    color: #ff681d;
}
div.sp-flick .swiper-slide.sp-events .swiper-slide {
    display: grid;
    grid-template: repeat(2, 21.53vw) / repeat(2, 41.02vw);
    gap: 5.12vw 2.56vw;
    padding: 5.12vw 2.56vw;
}

/* Registration */
div.sp-flick .swiper-slide.sp-registration {
    background: #eaf3fb url("/images/top/sp-flick-registration-bg.png") no-repeat center / contain;
}
div.sp-flick .swiper-slide.sp-registration .container {
    top: 32.5%;
}
div.sp-flick .swiper-slide.sp-registration .cta-container {
  position: relative;
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group {
  background-color: #fff;
  border: 0.75vw solid #003788;
  margin: 0 3.84vw;
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group > .inner {
  padding: 7.69vw 5.12vw;
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group > .inner > h3 {
  text-align: center;
  font-size: 5.64vw;
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group > .inner > .group {
  margin-top: 10.25vw;
  text-align: center;
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group > .inner > .group > .label {
  font-size: 3.58vw;
  color: #2655BE;
  font-weight: bold;
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group > .inner > .group > a {
  margin-top: 2.56vw;
  display: block;
  border: 0.25vw solid #b2b2b2;
  border-radius: 1.28vw;
  text-decoration: none;
  font-size: 3.58vw;
  color: #000;
  padding: 3.07vw 0;
  background-image: url("/images/guestUser/membershipCampaign/icon_auth.png");
  background-repeat: no-repeat;
  background-position: 1.53vw 50%;
  background-size: 8.2vw;
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group > .inner > form > .group {
  margin-top: 7.69vw;
  text-align: center;
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group > .inner > form > .group > .label {
  font-size: 3.58vw;
  color: #2655BE;
  font-weight: bold;
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group > .inner > form > .group > input {
  margin-top: 2.56vw;
  display: block;
  border: 0.25vw solid #b2b2b2;
  border-radius: 1.28vw;
  text-decoration: none;
  font-size: 3.58vw;
  color: #000;
  padding: 3.07vw 0 3.07vw 2.05vw;
  width: 100%;
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group > .inner > form > .action {
  margin-top: 7.69vw;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  position: relative;
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group > .inner > form > .action > button {
  cursor: pointer;
  border: 2px solid #A80003;
  background-color: #E20000;
  border-radius: 1.28vw;
  padding: 3.07vw 12.3vw;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 1.28vw;
  transition: background-color 0.3s ease-in-out;
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group > .inner > form > .action > button:hover {
  background-color: #d90509;
  transition: background-color 0.3s ease-in-out;
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group > .inner > form > .action > button > span {
  font-size: 4.61vw;
  font-weight: bold;
  color: #fff;
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group > .inner > form > .action > button > .image-container {
  width: 2.56vw;
  height: 4.61vw;
  position: absolute;
  right: 6.41vw;
  top: 50%;
  transform: translateY(-50%);
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group > .inner > form > .register-note {
  margin: 30px 0 0;
  font-size: 0.75em;
}
div.sp-flick .swiper-slide.sp-registration .cta-container > .group > .inner > form > .register-note > a {
  color: #018ace;
}

/* Footer */
div.sp-flick .swiper-slide.sp-registration footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
    padding: 2.56vw;
    background: #003788;
    color: #fff;
    text-align: center;
    font-size: 3.07vw;
}
div.sp-flick .swiper-slide.sp-registration footer img {
    width: 30.76vw;
    margin: 0 0 2.56vw;
}

