@charset "UTF-8";
@import url("//fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("//cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanmp.css");
/*
  *  変数
  */
/*
  *  mixin
  */
html,
body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  position: relative;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: clamp(0.9rem, 1.21vw, 1.5rem);
  display: flex;
  flex-direction: column;
}
body * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}
body.is-loaded {
  /*
  #wrapper {
    opacity: 1;
  }
  .loading {
    opacity: 0;
    pointer-events: none;
  }*/
}

@keyframes rotateYAnime {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.loading {
  display: none;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000;
  position: fixed;
  z-index: 90000;
  transition: opacity 1s ease-in-out 1s;
  background-color: #fff;
  flex-direction: column;
  gap: 20px;
  top: 0;
  left: 0;
}
.loading img {
  backface-visibility: visible;
  max-width: 60%;
}
.loading p {
  font-size: 5.625em;
  text-align: center;
  line-height: 1;
  margin: 0;
  letter-spacing: 0.1em;
}
.loading .dots {
  width: 50px;
  aspect-ratio: 7;
  --_g: no-repeat radial-gradient(circle closest-side, #508CFF 90%, #508CFF00);
  background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
  background-size: 33.3333333333% 100%;
  animation: l7 1s infinite linear;
}
@keyframes l7 {
  33% {
    background-size: 33.3333333333% 0%, 33.3333333333% 100%, 33.3333333333% 100%;
  }
  50% {
    background-size: 33.3333333333% 100%, 33.3333333333% 0%, 33.3333333333% 100%;
  }
  66% {
    background-size: 33.3333333333% 100%, 33.3333333333% 100%, 33.3333333333% 0%;
  }
}

a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
}

.pc-hidden {
  display: none;
}
@media screen and (max-width: 1000px) {
  .pc-hidden {
    display: block;
  }
}

@media screen and (max-width: 1000px) {
  .sp-hidden {
    display: none;
  }
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.btn-wrapper {
  display: flex;
  justify-content: center;
}

a.round-button {
  font-size: 1.625em;
  font-weight: 800;
  color: #003C88;
  padding: 3vw 4.2vw;
  position: relative;
  display: flex;
  gap: 4vw;
  align-items: center;
  text-align: center;
  border: 0.4vw solid #003C88;
  border-radius: 100px;
  overflow: hidden;
  transition: 0.5s;
}
@media screen and (max-width: 450px) {
  a.round-button {
    flex-direction: column;
    gap: 5px;
    width: 90%;
  }
}
a.round-button span {
  position: relative;
  z-index: 10;
}
a.round-button .label {
  border-left: 0.7vw solid #3E7EFF;
  padding-left: 0.5vw;
  line-height: 1;
}
a.round-button .name {
  font-size: 0.7em;
  border-bottom: 1px solid #003C88;
}
a.round-button .name .pdf {
  color: #FF269E;
  display: inline-block;
  margin-left: 10px;
  border: 2px solid #FF269E;
  line-height: 1;
  padding: 1px 7px;
  border-radius: 50px;
  font-size: 0.9em;
  margin-bottom: 5px;
}
a.round-button:hover {
  color: white;
}
a.round-button:hover .label {
  border-left-color: white;
}
a.round-button:hover .name {
  border-bottom-color: white;
}
a.round-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(0, 60, 136, 0.5);
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}
a.round-button:hover:before {
  transform-origin: left top;
  transform: scale(1, 1);
}
a.round-button.--pdf {
  display: inline-flex;
  gap: 50px;
  align-items: center;
  padding: 10px 30px;
}
a.round-button.--pdf:after {
  position: relative;
  z-index: 2;
  content: "";
  width: 12px;
  height: 17px;
  background: url(../images/common/ic-pdf.svg) no-repeat center center/contain;
}
a.round-button.--youtube {
  display: inline-flex;
  gap: 50px;
  align-items: center;
  padding: 10px 30px;
}
a.round-button.--youtube:after {
  position: relative;
  z-index: 2;
  content: "";
  width: 17px;
  height: 17px;
  background: url(../images/common/ic-youtube.svg) no-repeat center center/contain;
}

main {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  flex-grow: 1;
}

#wrapper {
  opacity: 1;
  position: relative;
  z-index: 5;
  flex-grow: 1;
  width: 100%;
  overflow: hidden;
}
@media screen and (max-width: 1000px) {
  #wrapper {
    width: 100%;
    margin-left: 0;
  }
}
#wrapper .sidebt {
  position: fixed;
  top: 100px;
  right: 0;
  z-index: 1000;
  opacity: 1;
  width: 6vw;
  max-width: 121px;
  min-width: 60px;
}
@media screen and (max-width: 450px) {
  #wrapper .sidebt {
    display: none;
  }
}
#wrapper .sidebt-sp {
  position: fixed;
  z-index: 1000;
  opacity: 1;
  width: 7vw;
  display: none;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  transform: translateY(150%);
  transition: 0.5s;
}
#wrapper .sidebt-sp a {
  background-color: #003C88;
  background: linear-gradient(90deg, #3E7EFF 0%, #3E7EFF 50%, #4EE7A5 100%);
  color: white;
  font-weight: 700;
  text-align: center;
  display: block;
  padding: 20px;
  font-size: 1.875em;
}
@media screen and (max-width: 450px) {
  #wrapper .sidebt-sp {
    display: block;
  }
}

.container {
  max-width: 1600px;
  margin: auto;
}

.row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}
.row .col {
  width: 100%;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/*
  first view
*/
#hero {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  min-height: 800px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #508cff;
  padding: 50px 26% 50px 50px;
}
@media screen and (max-width: 768px) {
  #hero {
    padding: 10vw;
    align-items: flex-start;
    padding-top: min(70vw, 400px);
    height: auto;
  }
}
@media screen and (max-width: 450px) {
  #hero {
    min-height: 0;
  }
}
#hero .title {
  position: relative;
}
@media screen and (max-width: 768px) {
  #hero .title {
    padding-top: 11vw;
  }
}
#hero .title .text {
  animation-delay: 1s;
}
#hero .title .text img {
  transition: 0.5s;
  width: 100%;
  height: auto;
}
#hero .title .ph {
  position: absolute;
  bottom: 0;
  left: 92%;
  width: 80vw;
}
@media screen and (max-width: 768px) {
  #hero .title .ph {
    bottom: auto;
    top: 0;
    left: 50%;
    transform: translateX(-22%);
  }
}
#hero .title .ph .hand {
  animation-delay: 1s;
  max-width: 816px;
}
#hero .title .ph .shadow {
  animation-delay: 1.5s;
}
#hero .title .ph .line {
  animation-delay: 1.5s;
}
#hero .title .ph .text {
  animation-delay: 2s;
}
#hero .title .ph img {
  opacity: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 42.5vw;
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  #hero .title .ph img {
    width: 60vw;
  }
}
#hero .title .ph .detail {
  position: absolute;
  bottom: 0;
  left: min(7vw, 135px);
  width: min(9.7vw, 183px);
  height: min(6vw, 126px);
  z-index: 10;
  transform: translateY(100%);
}
@media screen and (max-width: 768px) {
  #hero .title .ph .detail {
    left: 8.5vw;
    width: 16.5vw;
    height: 7.8vw;
  }
}
#hero .title .ph .detail img,
#hero .title .ph .detail svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#hero .title .ph .detail .line {
  z-index: 1;
}
#hero .title .ph .detail .hero-circle-line {
  fill: none;
  stroke: #00ebff;
  stroke-miterlimit: 10;
  stroke-width: 2px;
  stroke-dasharray: 397 399;
  stroke-dashoffset: 398;
}
#hero .title .ph .detail.start .hero-circle-line {
  animation: qxqlFNvA_draw 1333ms linear 2s forwards;
}
@keyframes qxqlFNvA_draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes qxqlFNvA_fade {
  0% {
    stroke-opacity: 1;
  }
  93.54838709677419% {
    stroke-opacity: 1;
  }
  100% {
    stroke-opacity: 0;
  }
}
#hero .title .ph .detail .circle {
  z-index: 2;
}
#hero .title .ph .detail .text {
  z-index: 3;
}
#hero .title .ph .shadow {
  position: absolute;
  bottom: -0.7vw;
  left: 5vw;
  width: 20vw;
  height: 3vw;
  z-index: -1;
  background: radial-gradient(rgba(0, 60, 136, 0.7) 10%, rgba(0, 60, 136, 0) 70%);
  mix-blend-mode: multiply;
}

#feature {
  background-color: #508cff;
  padding: 20px 50px 0;
}
@media screen and (max-width: 768px) {
  #feature {
    padding: 20px 5vw;
  }
}
#feature .scroller {
  white-space: nowrap;
  margin: 0 auto 12vw;
  text-align: center;
  color: white;
  font-size: 1.375em;
  position: relative;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2vw;
  flex-direction: column;
}
@media screen and (max-width: 1000px) {
  #feature .scroller {
    font-size: 20px;
  }
}
@media screen and (max-width: 768px) {
  #feature .scroller {
    font-size: 16px;
  }
}
@media screen and (max-width: 450px) {
  #feature .scroller {
    font-size: 14px;
  }
}
#feature .scroller img {
  height: 15vw;
  width: 2vw;
  max-height: 90px;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  #feature .scroller img {
    height: 80px;
    width: 15px;
    max-height: none;
  }
}
#feature .row {
  flex-wrap: wrap;
  gap: 0;
}
#feature .row .col {
  width: 33%;
  padding: 0 2vw 9vw;
  position: relative;
}
@media screen and (max-width: 1000px) {
  #feature .row .col {
    width: 50%;
    padding-bottom: 13vw;
  }
}
@media screen and (max-width: 768px) {
  #feature .row .col {
    padding: 0 3vw 15vw;
  }
}
@media screen and (max-width: 450px) {
  #feature .row .col {
    padding: 0 2vw 20vw;
  }
}
#feature .row .col .pop {
  position: absolute;
  top: -6vw;
  z-index: 10;
  width: calc(100% - 4vw);
}
@media screen and (max-width: 1000px) {
  #feature .row .col .pop {
    top: -12vw;
  }
}
@media screen and (max-width: 450px) {
  #feature .row .col .pop {
    width: 120%;
    left: -10%;
    top: -15vw;
  }
}

#intro {
  position: relative;
  padding: 0vw 50px 10vw;
  background: #508CFF;
  background: linear-gradient(180deg, #508CFF 0%, #84AEFF 90%);
}
#intro .container {
  position: relative;
  z-index: 10;
}
#intro .en {
  width: 70%;
  max-width: 570px;
  text-align: center;
  display: block;
  margin: 0 auto 2vw;
}
#intro h2 {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 2vw;
}
@media screen and (max-width: 450px) {
  #intro h2 {
    margin-bottom: 5vw;
  }
}
#intro .desc {
  max-width: 1400px;
  margin: 0 auto 4vw;
  font-size: 1.875em;
  color: #003C88;
  font-weight: 700;
  text-align: justify;
  line-height: 1.88;
}
@media screen and (max-width: 768px) {
  #intro .desc {
    font-size: 1.5em;
  }
}
#intro .ph {
  margin: 0 auto;
  max-width: 800px;
  width: 50vw;
  height: 20vw;
  background-image: url(../images/intro-ph.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  #intro .ph {
    width: 80vw;
    height: 40vw;
  }
}
#intro .bg {
  position: absolute;
  bottom: 5vw;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/intro-bg.webp) no-repeat center center;
  z-index: 1;
  background-size: 150% auto;
}

#merit {
  margin-top: -5vw;
  position: relative;
  z-index: 1;
  background-color: #84AEFF;
}
#merit h2 {
  color: #003C88;
  text-align: center;
  font-size: 2.75em;
  margin: 0 auto 2vw;
}
@media screen and (max-width: 450px) {
  #merit h2 {
    margin-bottom: 5vw;
  }
}
#merit ul.merit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#merit ul.merit-list.--below {
  padding-top: 100px;
  margin-bottom: 0;
  background-color: #DEEBFF;
}
#merit ul.merit-list > li {
  margin: 0;
  padding: 0;
  height: 29vw;
  min-height: 500px;
  background-color: #DEEBFF;
  position: relative;
}
@media screen and (max-width: 1000px) {
  #merit ul.merit-list > li {
    min-height: 350px;
    padding: 30px;
  }
}
@media screen and (max-width: 450px) {
  #merit ul.merit-list > li {
    height: auto;
    padding: 0;
  }
}
#merit ul.merit-list > li .info {
  display: flex;
  gap: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
  margin-left: 50%;
  position: relative;
  z-index: 15;
}
@media screen and (max-width: 450px) {
  #merit ul.merit-list > li .info {
    width: 100%;
    margin-left: 0;
    padding: 8vw;
    align-items: flex-start;
  }
}
#merit ul.merit-list > li .info .inner {
  width: 36vw;
}
@media screen and (max-width: 1600px) {
  #merit ul.merit-list > li .info .inner {
    width: 45vw;
  }
}
@media screen and (max-width: 450px) {
  #merit ul.merit-list > li .info .inner {
    width: auto;
  }
}
#merit ul.merit-list > li .info .index {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  color: #003C88;
  font-size: 5em;
  letter-spacing: 0.05em;
  margin: 0 0 1.5vw;
  line-height: 1;
}
#merit ul.merit-list > li .info h3 {
  color: #003C88;
  font-size: 2.625em;
  margin: 0;
}
@media screen and (max-width: 768px) {
  #merit ul.merit-list > li .info h3 br {
    display: none;
  }
}
@media screen and (max-width: 450px) {
  #merit ul.merit-list > li .info h3 {
    font-size: 2.375em;
  }
  #merit ul.merit-list > li .info h3 br {
    display: block;
  }
}
#merit ul.merit-list > li .info .desc {
  font-size: 1.375em;
}
@media screen and (max-width: 768px) {
  #merit ul.merit-list > li .info .desc br {
    display: none;
  }
}
@media screen and (max-width: 450px) {
  #merit ul.merit-list > li .info .desc br {
    display: block;
  }
}
@keyframes clipPathSlideInLeft {
  0% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 64% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 64% 100%, 0 100%);
  }
}
@keyframes clipPathSlideInRight {
  0% {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  100% {
    -webkit-clip-path: polygon(36% 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(36% 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes clipPathSlideInLeftMobile {
  0% {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes clipPathSlideInRightMobile {
  0% {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
#merit ul.merit-list > li .ph {
  position: absolute;
  top: 0;
  left: 0;
  width: 52%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10;
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
          clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  #merit ul.merit-list > li .ph {
    width: 45%;
  }
}
@media screen and (max-width: 450px) {
  #merit ul.merit-list > li .ph {
    position: relative;
    width: 100%;
    height: 50vw;
    margin-left: 0;
  }
}
#merit ul.merit-list > li .ph.animated {
  opacity: 1;
}
#merit ul.merit-list > li .ph.is-show {
  animation: clipPathSlideInLeft 0.5s ease-in-out 0.5s forwards;
}
@media screen and (max-width: 450px) {
  #merit ul.merit-list > li .ph.is-show {
    animation: clipPathSlideInLeftMobile 0.5s ease-in-out 0.5s forwards;
  }
}
#merit ul.merit-list > li:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 52%;
  height: 100%;
  background-color: rgba(0, 60, 136, 0.5);
  mix-blend-mode: multiply;
  z-index: 9;
  -webkit-clip-path: polygon(0 0, 100% 0, 64% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 64% 100%, 0 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  #merit ul.merit-list > li:after {
    width: 45%;
  }
}
@media screen and (max-width: 450px) {
  #merit ul.merit-list > li:after {
    display: none;
  }
}
#merit ul.merit-list > li:nth-child(1) .ph {
  background-image: url(../images/merit-bg1.webp);
}
#merit ul.merit-list > li:nth-child(2) .ph {
  background-image: url(../images/merit-bg2.webp);
}
#merit ul.merit-list > li:nth-child(3) .ph {
  background-image: url(../images/merit-bg3.webp);
}
#merit ul.merit-list > li:nth-child(4) .ph {
  background-image: url(../images/merit-bg4.webp);
}
#merit ul.merit-list > li:nth-child(5) .ph {
  background-image: url(../images/merit-bg5.webp);
}
#merit ul.merit-list > li.option .ph {
  background-image: url(../images/merit-bg6.webp);
}
#merit ul.merit-list > li:nth-child(2n), #merit ul.merit-list > li.option {
  background-color: #A1C8FF;
}
#merit ul.merit-list > li:nth-child(2n) .info, #merit ul.merit-list > li.option .info {
  margin-left: 0;
}
#merit ul.merit-list > li:nth-child(2n) .ph, #merit ul.merit-list > li.option .ph {
  left: auto;
  right: 0;
  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
          clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
#merit ul.merit-list > li:nth-child(2n) .ph.is-show, #merit ul.merit-list > li.option .ph.is-show {
  animation: clipPathSlideInRight 0.5s ease-in-out 0.5s forwards;
}
@media screen and (max-width: 450px) {
  #merit ul.merit-list > li:nth-child(2n) .ph.is-show, #merit ul.merit-list > li.option .ph.is-show {
    animation: clipPathSlideInRightMobile 0.5s ease-in-out 0.5s forwards;
  }
}
#merit ul.merit-list > li:nth-child(2n):after, #merit ul.merit-list > li.option:after {
  left: auto;
  right: 0;
  -webkit-clip-path: polygon(36% 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(36% 0, 100% 0, 100% 100%, 0 100%);
}
#merit ul.merit-list > li.option {
  background-color: #FFD1EA;
}
#merit ul.merit-list > li.option::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8vw;
  height: 8vw;
  background: url(../images/ic-option.png) no-repeat center center/contain;
  z-index: 15;
}
@media screen and (max-width: 768px) {
  #merit ul.merit-list > li.option::before {
    width: 15vw;
    height: 15vw;
    min-width: 70px;
    min-height: 70px;
  }
}
#merit ul.merit-list > li.option .index,
#merit ul.merit-list > li.option h3 {
  color: #FF269E;
}
#merit ul.merit-list > li.option ul {
  list-style: disc;
  margin: 0;
}
#merit ul.merit-list > li.option ul li {
  color: #FF269E;
  font-weight: 600;
  margin: 0;
}
#merit ul.merit-list > li.option:after {
  background-color: rgba(255, 38, 158, 0.3);
}
#merit .btn-wrapper {
  padding: 5vw 0;
  background-color: #DEEBFF;
}

#movie {
  background: url(../images/movie-bg.webp) no-repeat center center/cover;
  background-attachment: fixed;
  padding: 5vw;
}
@media screen and (max-width: 768px) {
  #movie {
    background-attachment: scroll;
  }
}
@media screen and (max-width: 450px) {
  #movie {
    padding: 10vw;
  }
}
#movie .container {
  display: flex;
  align-items: center;
  justify-content: center;
}
#movie a.movie-thumb {
  display: block;
  max-width: 700px;
  position: relative;
}
#movie a.movie-thumb::before {
  content: "";
  display: block;
  width: 110px;
  height: 110px;
  background: url(../images/ic-movie-play.png) no-repeat center center/contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  transition: 0.5s;
}
@media screen and (max-width: 768px) {
  #movie a.movie-thumb::before {
    width: 11vw;
    height: 11vw;
  }
}
#movie a.movie-thumb:hover::before {
  transform: translate(-50%, -50%) scale(1.2);
  opacity: 0.7;
}

.iziModal .iziModal-content {
  position: relative;
  height: 0;
  padding-top: 56.5% !important;
}

.iziModal_iframe {
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 90%;
}
.iziModal_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#product {
  padding: 5vw 50px;
  background-color: #DEEBFF;
}
@media screen and (max-width: 768px) {
  #product {
    padding: 5vw;
  }
}
#product h2 {
  color: #003C88;
  text-align: center;
  font-size: 2.75em;
  margin-bottom: 3vw;
}
@media screen and (max-width: 450px) {
  #product h2 {
    margin-bottom: 5vw;
  }
}
#product .product-wrapper {
  position: relative;
}
#product .--indicator {
  position: absolute;
  top: 17.5vw;
  z-index: 100;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  #product .--indicator {
    position: relative;
    top: 0;
    transform: none;
  }
}
#product .bluetooth {
  width: 7vw;
  height: 2.2vw;
  left: 33.3%;
  background: url(../images/bluetooth-pc.svg) no-repeat center center/contain;
}
@media screen and (max-width: 768px) {
  #product .bluetooth {
    width: 100%;
    height: 10vw;
    min-height: 50px;
    left: 0;
    background-image: url(../images/bluetooth-sp.svg);
    margin-top: -5vw;
    margin-bottom: -5vw;
  }
}
#product .wifi {
  width: 5vw;
  height: 2.2vw;
  left: 66.6%;
  background: url(../images/wifi-pc.svg) no-repeat center center/contain;
}
@media screen and (max-width: 768px) {
  #product .wifi {
    width: 100%;
    height: 10vw;
    min-height: 50px;
    left: 0;
    background-image: url(../images/wifi-sp.svg);
    margin-top: -5vw;
    margin-bottom: -5vw;
  }
}
#product .row {
  gap: 1vw;
  box-sizing: border-box;
  align-items: stretch;
  margin-bottom: 3vw;
}
@media screen and (max-width: 768px) {
  #product .row {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
  }
}
#product .row .col {
  background-color: white;
  border-radius: 3vw;
  overflow: hidden;
}
#product .header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4.5vw 2vw 2vw;
  background: linear-gradient(180deg, #DFDFE1 0%, #ffffff 100%);
}
#product .header:before {
  position: absolute;
  content: "";
  display: block;
  width: 25vw;
  height: 25vw;
  top: 0;
  left: 0;
  z-index: 1;
  background: url(../images/product-ph-bg.png) no-repeat top left/cover;
}
#product .header .ph {
  position: relative;
  z-index: 2;
  height: 13vw;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #product .header .ph {
    height: 40vw;
  }
}
#product .header .ph img {
  width: auto;
  max-width: 100%;
  height: auto;
}
#product .header .ph img.nano {
  width: 7vw;
}
@media screen and (max-width: 768px) {
  #product .header .ph img.nano {
    width: 20vw;
  }
}
#product .header .ph img.x82 {
  width: 15vw;
}
@media screen and (max-width: 768px) {
  #product .header .ph img.x82 {
    width: 35vw;
  }
}
@media screen and (max-width: 450px) {
  #product .header .ph img.x82 {
    width: 50vw;
  }
}
#product .header .ph img.md {
  width: 20vw;
}
@media screen and (max-width: 768px) {
  #product .header .ph img.md {
    width: 50vw;
  }
}
@media screen and (max-width: 450px) {
  #product .header .ph img.md {
    width: 70vw;
  }
}
#product .header .en {
  line-height: 1;
  font-weight: 800;
  color: #003C88;
  font-size: 1.875em;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}
@media screen and (max-width: 1000px) {
  #product .header .en {
    font-size: 1.875em;
  }
}
@media screen and (max-width: 768px) {
  #product .header .en {
    font-size: 3.75em;
  }
}
@media screen and (max-width: 450px) {
  #product .header .en {
    font-size: 2.5em;
  }
}
#product .header h3 {
  margin-top: 0;
  color: #003C88;
}
@media screen and (max-width: 768px) {
  #product .header h3 {
    font-size: 1.5625em;
  }
}
#product .type {
  background-color: #003C88;
  color: white;
  font-size: 1.25em;
  font-weight: 600;
  text-align: center;
  padding: 0.8vw;
}
@media screen and (max-width: 450px) {
  #product .type {
    padding: 10px;
    font-size: 1.875em;
  }
}
#product .product-body {
  padding: 1.5vw 2vw;
}
@media screen and (max-width: 768px) {
  #product .product-body {
    padding: 4vw 5vw;
  }
}
#product .product-body hr {
  margin: 3vw 0;
}
#product .product-body h4 {
  font-size: 1.5625em;
  font-weight: 700;
  margin: 0 0 0.5vw;
  color: #3E7EFF;
}
@media screen and (max-width: 450px) {
  #product .product-body h4 {
    font-size: 2.0625em;
  }
}
#product .product-body p {
  margin-top: 0;
  line-height: 1.7;
}
@media screen and (max-width: 450px) {
  #product .product-body p {
    font-size: 1.375em;
  }
}
#product .product-body p.notice {
  font-size: 0.7em;
}
@media screen and (max-width: 450px) {
  #product .product-body p.notice {
    font-size: 1.25em;
  }
}
#product .product-body .type {
  background: none;
  color: black;
  text-align: left;
  padding: 0;
  font-weight: 800;
}
@media screen and (max-width: 450px) {
  #product .product-body .type {
    font-size: 1.875em;
  }
}
#product .btn-wrapper {
  margin-bottom: 3vw;
}

#compare {
  padding: 5vw 50px;
  background-color: #DEEBFF;
}
@media screen and (max-width: 768px) {
  #compare {
    padding: 5vw;
  }
}
#compare h2 {
  color: #003C88;
  text-align: center;
  font-size: 2.75em;
  margin-bottom: 3vw;
}
#compare table {
  table-layout: fixed;
  width: 100%;
  border-spacing: 0;
  margin-bottom: 4vw;
}
#compare table th,
#compare table td {
  padding: 1.6vw 2vw;
}
#compare table thead th {
  font-size: 1.875em;
  font-weight: 700;
  text-align: center;
  border-radius: 2.5vw 2.5vw 0 0;
  background-color: #DADADD;
  border-radius: 2.5vw 2.5vw 0 0;
  border: 0.5vw solid #DEEBFF;
  border-bottom: none;
}
@media screen and (max-width: 768px) {
  #compare table thead th {
    font-size: 11px;
  }
}
#compare table thead th.primary {
  background-color: #3E7EFF;
  color: white;
  border: 0.5vw solid red;
  border-bottom: none;
}
@media screen and (max-width: 768px) {
  #compare table thead th.primary {
    border-width: 5px;
  }
}
#compare table thead th.empty {
  background-color: transparent;
  border: none;
}
#compare table tbody th,
#compare table tbody td {
  border-bottom: 1px solid #003C88;
  padding: 1.95vw 2vw;
}
#compare table tbody th {
  text-align: left;
  font-size: 1.5625em;
  background-color: #BCD2FF;
}
#compare table tbody th br {
  display: none;
}
@media screen and (max-width: 768px) {
  #compare table tbody th {
    font-size: 11px;
  }
  #compare table tbody th br {
    display: block;
  }
}
#compare table tbody td {
  font-weight: 700;
  font-size: 1em;
  color: #676969;
  background-color: #fff;
  padding: 0.5vw 1vw 0.5vw 1vw;
  border-left: 1px solid #003C88;
}
@media screen and (max-width: 768px) {
  #compare table tbody td {
    font-size: 10px;
    text-align: center;
    padding: 10px;
  }
}
@media screen and (max-width: 450px) {
  #compare table tbody td {
    font-size: 9px;
  }
  #compare table tbody td br {
    display: none;
  }
}
#compare table tbody td span {
  display: inline-block;
  line-height: 1.5;
  vertical-align: middle;
}
#compare table tbody td::before {
  content: "";
  display: inline-block;
  margin-right: 1vw;
  vertical-align: middle;
  width: 3vw;
  height: 3vw;
  background: url(../images/ic-hikaku3.png) no-repeat center center/contain;
}
@media screen and (max-width: 768px) {
  #compare table tbody td::before {
    display: block;
    margin: auto;
    width: 25px;
    height: 30px;
  }
}
#compare table tbody td.primary {
  border-left: 0.5vw solid red;
  border-right: 0.5vw solid red;
  color: #3E7EFF;
}
@media screen and (max-width: 768px) {
  #compare table tbody td.primary {
    border-left-width: 5px;
    border-right-width: 5px;
  }
}
#compare table tbody td.primary:before {
  background: url(../images/ic-hikaku1.png) no-repeat center center/contain;
}
#compare table tbody td.primary + td {
  border-left: none;
}
#compare table tbody td.triangle:before {
  background: url(../images/ic-hikaku2.png) no-repeat center center/contain;
}
#compare table tbody tr:nth-child(even) td {
  background-color: #EBEBEC;
}
#compare table tbody tr:first-child th,
#compare table tbody tr:first-child td {
  border-top: 1px solid #003C88;
}
#compare table tbody tr:last-child th,
#compare table tbody tr:last-child td {
  border-bottom: none;
}
#compare table tbody tr:last-child th.primary,
#compare table tbody tr:last-child td.primary {
  border-bottom: 0.5vw solid red;
  border-radius: 0 0 2.5vw 2.5vw;
}
@media screen and (max-width: 768px) {
  #compare table tbody tr:last-child th.primary,
  #compare table tbody tr:last-child td.primary {
    border-bottom-width: 5px;
  }
}

#contact {
  padding: 8vw 0px min(5vw, 70px);
  background: #DEEBFF;
}
#contact .container {
  padding: 0 50px;
}
@media screen and (max-width: 1000px) {
  #contact .container {
    padding: 0 5vw;
  }
}
#contact h2 {
  text-align: center;
  margin-bottom: 2vw;
}
@media screen and (max-width: 768px) {
  #contact h2 {
    max-width: 200px;
    margin: 0 auto 2vw;
  }
}
#contact h2 img {
  width: auto;
  max-width: 100%;
  height: auto;
}
#contact h2 + p {
  text-align: center;
  font-size: 1.5em;
  line-height: 2;
  margin-bottom: 4vw;
}
@media screen and (max-width: 450px) {
  #contact h2 + p br {
    display: none;
  }
}
#contact .btn-wrapper {
  margin-bottom: 5vw;
}
@media screen and (max-width: 1000px) {
  #contact .btn-wrapper {
    max-width: 300px;
    display: block;
    margin: 0 auto 5vw;
  }
}
@media screen and (max-width: 768px) {
  #contact .btn-wrapper {
    margin-bottom: 10vw;
  }
}
#contact .btn-wrapper a {
  transition: 0.3s;
}
#contact .btn-wrapper a:hover {
  transform: scale(1.1);
}
#contact h3 {
  text-align: left;
  color: #003C88;
  font-size: 1.625em;
  border-left: 0.7vw solid #3E7EFF;
  line-height: 1;
  padding-left: 10px;
  display: flex;
  align-items: center;
  gap: 2vw;
}
#contact h3:after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #003C88;
}
#contact .flow-image {
  width: 90%;
  margin: 0 auto min(8vw, 110px);
}
@media screen and (max-width: 1000px) {
  #contact .flow-image {
    margin-bottom: 80px;
  }
}
@media screen and (max-width: 768px) {
  #contact .flow-image {
    display: none;
  }
}
#contact .flow-timeline {
  width: 100vw;
  height: 0.5vw;
  background-color: #003C88;
}
@media screen and (max-width: 768px) {
  #contact .flow-timeline {
    display: none;
  }
}
#contact .row {
  position: relative;
  gap: 0;
  margin-bottom: 3vw;
}
@media screen and (max-width: 768px) {
  #contact .row {
    flex-direction: column;
    margin-top: 80px;
  }
}
#contact .row .col {
  padding: 0 1vw;
  position: relative;
}
@media screen and (max-width: 768px) {
  #contact .row .col {
    padding-bottom: 15vw;
    padding-left: 5vw;
  }
  #contact .row .col::after {
    content: "";
    width: 84px;
    height: 52px;
    position: absolute;
    top: 0;
    right: 20px;
    transform: translateY(-120%);
    display: none;
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  #contact .row .col::after {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  #contact .row .col:nth-child(1)::after {
    background: url(../images/flow-sp-face1.svg) no-repeat center center/contain;
  }
  #contact .row .col:nth-child(2)::after {
    background: url(../images/flow-sp-face2.svg) no-repeat center center/contain;
  }
  #contact .row .col:nth-child(3)::after {
    background: url(../images/flow-sp-face3.svg) no-repeat center center/contain;
  }
  #contact .row .col:nth-child(4)::after {
    background: url(../images/flow-sp-face4.svg) no-repeat center center/contain;
  }
}
#contact .row .col:nth-child(2) h4,
#contact .row .col:nth-child(2) h5,
#contact .row .col:nth-child(2) p {
  color: #3E7EFF;
}
#contact .row .flow-header {
  position: relative;
}
#contact .row .flow-header .index {
  color: white;
  background-color: #003C88;
  position: absolute;
  top: 0;
  left: 0;
  width: 4vw;
  height: 4vw;
  max-width: 70px;
  max-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1875em;
  font-weight: 600;
  line-height: 1;
  border-radius: 5vw;
  transform: translate(-50%, calc(-50% - 0.25vw));
  z-index: 10;
}
@media screen and (max-width: 768px) {
  #contact .row .flow-header .index {
    width: 32px;
    height: 32px;
  }
}
#contact .row .flow-header h4 {
  font-size: 2.8125em;
  font-weight: 800;
  color: #003C88;
  margin: 0;
  padding: 0 min(2vw, 40px) 1vw min(3vw, 50px);
  line-height: 1.2;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
}
@media screen and (max-width: 1000px) {
  #contact .row .flow-header h4 {
    font-size: 25px;
  }
}
@media screen and (max-width: 768px) {
  #contact .row .flow-header h4 {
    border-bottom: 3px solid #003C88;
    width: 100%;
    padding-left: 30px;
  }
}
#contact .row .flow-header h4 span {
  font-size: 0.66em;
}
#contact .row .flow-body {
  padding: 0 min(2vw, 40px) 0 min(3vw, 50px);
}
@media screen and (max-width: 768px) {
  #contact .row .flow-body {
    padding: 0 0 20px 0;
  }
}
#contact .row .flow-body h5 {
  font-size: 1.25em;
  font-weight: 800;
  color: #003C88;
  margin-bottom: 0.5em;
  margin-top: 0;
  padding-top: 0.5em;
}
@media screen and (max-width: 768px) {
  #contact .row .flow-body h5 {
    font-size: 16px;
    padding-left: 30px;
  }
}
#contact .row .flow-body p {
  font-size: 0.75em;
  font-weight: 600;
  color: #003C88;
  line-height: 1.7;
  margin: 0 0 1em;
  text-align: justify;
}
@media screen and (max-width: 768px) {
  #contact .row .flow-body p {
    font-size: 11px;
    margin-left: 30px;
  }
}
#contact .row .flow-body .notice-starter {
  border-radius: 5px;
  padding: 1vw;
  text-align: center;
  color: #003C88;
  background-color: #FFE93C;
  position: relative;
}
@media screen and (max-width: 768px) {
  #contact .row .flow-body .notice-starter {
    padding: 15px;
  }
  #contact .row .flow-body .notice-starter br {
    display: none;
  }
}
#contact .row .flow-body .notice-starter:after {
  content: "";
  width: 1px;
  height: 2.5vw;
  border-left: 9px dotted #003C88;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateY(120%);
}
@media screen and (max-width: 768px) {
  #contact .row .flow-body .notice-starter:after {
    display: none;
  }
}
#contact .row .flow-body .sp-ph1,
#contact .row .flow-body .sp-ph2 {
  display: none;
}
@media screen and (max-width: 768px) {
  #contact .row .flow-body .sp-ph1,
  #contact .row .flow-body .sp-ph2 {
    display: block;
  }
}
#contact .row .flow-body .sp-ph1 {
  float: left;
  margin-right: 2vw;
  width: 40%;
  max-width: 150px;
  padding-top: 10px;
}
#contact .row .flow-body .sp-ph1 img {
  width: 100%;
  height: auto;
}
#contact .row .flow-body .sp-ph2 {
  text-align: right;
}
#contact .row .flow-body .sp-ph2 img {
  max-width: 150px;
}
#contact .row .flow-img2 {
  max-width: 300px;
  margin: auto;
  display: block;
}
@media screen and (max-width: 768px) {
  #contact .row .flow-img2 {
    max-width: 250px;
  }
}
#contact .starterkit {
  background: #ffe93c;
  padding: 2.5vw 4.3vw 1vw;
  max-width: 1400px;
  margin: auto;
  border-radius: 5vw;
}
@media screen and (max-width: 768px) {
  #contact .starterkit {
    padding: 5vw;
  }
}
#contact .starterkit h4 {
  text-align: center;
  font-size: 3.4375em;
  font-weight: 800;
  color: #003C88;
  margin-top: 0;
  margin-bottom: 1vw;
}
@media screen and (max-width: 768px) {
  #contact .starterkit h4 {
    font-size: 2.8125em;
  }
}
@media screen and (max-width: 450px) {
  #contact .starterkit h4 {
    font-size: 2.1875em;
  }
}
#contact .starterkit h4 small {
  font-size: 0.7em;
}
#contact .starterkit h4 span {
  writing-mode: vertical-rl;
  font-size: 0.3em;
  vertical-align: middle;
  display: inline-block;
}
#contact .starterkit h4 sup {
  font-size: 0.5em;
}
#contact .starterkit img {
  margin-bottom: 1vw;
}
#contact .starterkit p {
  font-size: 1.4375em;
  line-height: 2;
  text-align: center;
  margin: 0 0 2vw;
}
@media screen and (max-width: 768px) {
  #contact .starterkit p {
    font-size: 1.5625em;
  }
  #contact .starterkit p br {
    display: none;
  }
}
@media screen and (max-width: 450px) {
  #contact .starterkit p {
    font-size: 1.5em;
    margin-bottom: 15px;
  }
}
#contact .starterkit p.caption {
  font-size: 1.25em;
}
@media screen and (max-width: 768px) {
  #contact .starterkit p.caption br {
    display: block;
  }
}
@media screen and (max-width: 450px) {
  #contact .starterkit p.caption {
    font-size: 1em;
  }
}

footer {
  background-color: #DEEBFF;
  text-align: center;
  padding-bottom: 5vw;
}
@media screen and (max-width: 768px) {
  footer {
    padding-top: 20px;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 100px;
  }
}
footer p {
  line-height: 2;
  margin: 0 0 2vw;
}
@media screen and (max-width: 768px) {
  footer p {
    padding-bottom: 20px;
    width: 88%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 450px) {
  footer p {
    font-size: 14px;
  }
}
footer .logo img {
  width: auto;
}
@media screen and (max-width: 768px) {
  footer .logo img {
    width: 70%;
  }
}/*# sourceMappingURL=disp.css.map */