@charset "UTF-8";
/* [ 富士テレネット ] common.css */
/* [ 富士テレネット ] setting */
/* [ 富士テレネット ] component */
@media screen and (min-width: 1025px) {
  .pcnone {
    display: none !important;
  }

  .spnone {
    display: block;
  }
}
/* */
@media print, screen and (max-width: 1024px) {
  .pcnone {
    display: block !important;
  }

  .spnone {
    display: none !important;
  }
}
@media only screen and (max-width: 768px) {
  .pcnone {
    display: block;
  }

  .spnone {
    display: none !important;
  }
}
/* */
h2 {
  position: relative;
}
h2::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  width: 80%;
  height: 21.1px;
  background: url("../img/line_nyoro.svg") center/contain no-repeat;
  transform: translateX(-50%);
}

h3 {
  position: relative;
  width: fit-content;
  font-size: clamp(3.2rem, calc(3.2rem + 1.15vw), 5.4rem);
  font-weight: 700;
  text-align: center;
  margin: 0 auto 2.08vw;
}
h3::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  width: 220px;
  height: 21.1px;
  background: url(../img/line_nyoro.svg) center/contain no-repeat;
  transform: translateX(-50%);
}
@media only screen and (max-width: 768px) {
  h3 {
    margin-bottom: 7.95vw;
    font-size: max(8.2vw, 3.2rem);
  }
  h3::before {
    top: -26px;
    width: max(32.05vw, 125px);
  }
}

.link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 220px;
  width: 100%;
  max-height: calc(40px - 4px);
  height: auto;
  color: #fff;
  font-size: clamp(1.2rem, calc(1.0rem + 0.156vw), 1.4rem);
  font-weight: 700;
  text-decoration: none;
  border-radius: 7px;
  transition: 0.3s;
  box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.3);
  border: 2px solid transparent;
  padding-top: 10px;
  padding-bottom: 10px;
}
.link-btn::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 9.6px;
  width: 8px;
  height: 14px;
  mask-repeat: no-repeat;
  background: #fff;
  mask-size: contain;
  mask-image: url("../img/icon_arrow.svg");
  mask-mode: luminance;
  transform: translateY(-50%);
}
.link-btn.bl {
  background-color: #414A9C;
}
.link-btn.lb {
  background-color: #00A0FF;
}
.link-btn.pk {
  background-color: #E62E8B;
}
.link-btn.gr {
  background-color: #64C800;
}
.link-btn.large {
  max-width: 338px;
  max-height: calc(78px - 4px);
  box-shadow: 0 10px 0 0 rgba(0, 0, 0, 0.15);
  font-size: clamp(1.4rem, calc(1.0rem + 0.625vw), 2rem);
  line-height: 2.3;
  padding-top: 25px;
  padding-bottom: 25px;
}
.link-btn.large::after {
  width: 11px;
  height: 20px;
}
.link-btn.x-large {
  max-width: 420px;
  max-height: calc(120px - 4px);
  box-shadow: none;
  font-size: clamp(1.6rem, calc(1.2rem + 0.625vw), 2.2rem);
  padding-top: 46px;
  padding-bottom: 46px;
}
@media (hover: hover) {
  .link-btn:hover {
    background-color: #fff;
    box-shadow: 0 0 rgba(0, 0, 0, 0.4);
    border-bottom-width: 2px;
    transform: translateY(2px);
  }
  .link-btn:hover.bl {
    color: #414A9C;
    border: 2px solid #414A9C;
  }
  .link-btn:hover.bl::after {
    background: #414A9C;
  }
  .link-btn:hover.lb {
    color: #00A0FF;
    border: 2px solid #00A0FF;
  }
  .link-btn:hover.lb::after {
    background: #00A0FF;
  }
  .link-btn:hover.pk {
    color: #E62E8B;
    border: 2px solid #E62E8B;
  }
  .link-btn:hover.pk::after {
    background: #E62E8B;
  }
  .link-btn:hover.gr {
    color: #64C800;
    border: 2px solid #64C800;
  }
  .link-btn:hover.gr::after {
    background: #64C800;
  }
}
@media only screen and (max-width: 768px) {
  .link-btn {
    max-width: 152px;
    max-height: calc(27.64px + 4px);
    font-size: 1.2rem;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .link-btn.large {
    max-width: 193px;
    max-height: calc(44.6px - 4px);
    font-size: 1.4rem;
    line-height: 1.4;
    padding-top: 13px;
    padding-bottom: 13px;
  }
  .link-btn.x-large {
    max-width: 320px;
    max-height: calc(80px - 4px);
    font-size: 1.6rem;
    padding-top: 23px;
    padding-bottom: 23px;
  }
}

.contact-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  max-height: 122px;
  color: #414A9C;
  font-size: calc(20px + (30 - 20) * (100vw - 1024px) / (1920 - 1024));
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  border-radius: 5px;
  transition: 0.3s;
  box-shadow: 0 15px 0 0 rgba(0, 0, 0, 0.3);
  border: 2px solid transparent;
  padding: 7.2% 12.88%;
  background-color: #FEBD04;
}
.contact-btn svg path {
  transition: all 0.4s ease;
}
.contact-btn b {
  display: inline-block;
  align-items: center;
  margin-left: 0.78vw;
}
@media (hover: hover) {
  .contact-btn:hover {
    color: #FEBD04;
    background-color: #fff;
    box-shadow: 0 0 rgba(0, 0, 0, 0.3);
    border-color: #FEBD04;
    border-bottom-width: 2px;
    transform: translateY(10px);
  }
  .contact-btn:hover svg path {
    fill: #FEBD04;
    transition: all 0.4s ease;
  }
}
@media only screen and (max-width: 768px) {
  .contact-btn {
    height: auto;
    font-size: max(2rem, 5.12vw);
    padding: 9.81% 0;
    box-shadow: 0 10px 0 0 rgba(0, 0, 0, 0.3);
  }
  .contact-btn b {
    margin-left: 2.82vw;
  }
}

.fadein {
  opacity: 0;
  transition: all 0.7s ease;
  transform: translateY(70px);
}
.fadein.is-show {
  opacity: 1;
  transform: translateY(0);
}

.fadein-e {
  opacity: 0;
  transition: all .3s ease-out;
  transform: translateY(70px);
}
.fadein-e.is-show {
  opacity: 1;
  transform: translateY(0);
}

.fadein-s {
  opacity: 0;
  transition: all 0.7s ease;
}
.fadein-s.is-show {
  opacity: 1;
}

.fadeleft {
  opacity: 0;
  transition: all 0.7s;
  transform: translateX(100%);
}
.fadeleft.is-show {
  opacity: 1;
  transform: translateX(0);
}

.faderight {
  opacity: 0;
  transition: all 0.7s;
  transform: translateX(-100%);
}
.faderight.is-show {
  opacity: 1;
  transform: translateX(0);
}

.fadeunder {
  opacity: 0;
  transition: all 0.7s;
  transform: translateY(50%);
}
.fadeunder.is-show {
  opacity: 1;
  transform: translateY(0);
}

.fadepy {
  opacity: 0;
}
.fadepy.is-show {
  opacity: 1;
  animation: py 1s;
}

.fadepr {
  opacity: 0;
}
.fadepr.is-show {
  opacity: 1;
  animation: pr 1s ease-in-out;
}

.animepr {
  animation: pr 1s ease-in-out;
}

.delay.is-show {
  animation-delay: .2s;
}

@keyframes py {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  15% {
    transform: scale(0.9, 0.9) translateY(5%) skewX(2deg);
  }
  30% {
    transform: scale(1.3, 0.8) translateY(10%) skewX(-5deg);
  }
  50% {
    transform: scale(0.8, 1.3) translateY(-10%) skewX(2deg);
  }
  70% {
    transform: scale(1.1, 0.9) translateY(5%) skewX(-5deg);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}
@keyframes pr {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.85);
  }
  35% {
    transform: scale(1.05);
  }
  45% {
    transform: scale(0.95);
  }
  55% {
    transform: scale(1.05);
  }
  65% {
    transform: scale(0.95);
  }
  75% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
.ma00 {
  margin: 0px !important;
}

.mt00 {
  margin-top: 0px !important;
}

.mb00 {
  margin-bottom: 0px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mb100 {
  margin-bottom: 100px !important;
}

.mb200 {
  margin-bottom: 200px !important;
}

.ml00 {
  margin-left: 0px !important;
}

.mr00 {
  margin-right: 0px !important;
}

@media screen and (min-width: 1025px) {
  .pc-mt65 {
    margin-top: 65px !important;
  }

  .pc-mt80 {
    margin-top: 80px !important;
  }

  .pc-mt100 {
    margin-top: 100px !important;
  }

  .pc-mt200 {
    margin-top: 200px !important;
  }

  .pc-mt225 {
    margin-top: 225px !important;
  }

  .pc-mb00 {
    margin-bottom: 0px !important;
  }

  .pc-mb10 {
    margin-bottom: 10px !important;
  }

  .pc-mb20 {
    margin-bottom: 20px !important;
  }

  .pc-mb30 {
    margin-bottom: 30px !important;
  }

  .pc-mb50 {
    margin-bottom: 50px !important;
  }

  .pc-mb70 {
    margin-bottom: 70px !important;
  }

  .pc-mb85 {
    margin-bottom: 85px !important;
  }

  .pc-mb100 {
    margin-bottom: 100px !important;
  }

  .pc-mb150 {
    margin-bottom: 150px !important;
  }

  .pc-mb200 {
    margin-bottom: 200px !important;
  }

  .pc-mb250 {
    margin-bottom: 250px !important;
  }
}
@media print, screen and (max-width: 1024px) {
  .tab-mt50 {
    margin-top: 50px !important;
  }

  .tab-mt60 {
    margin-top: 60px !important;
  }

  .tab-mt80 {
    margin-top: 80px !important;
  }

  .tab-mt100 {
    margin-top: 100px !important;
  }

  .tab-mt150 {
    margin-top: 150px !important;
  }

  .tab-mt225 {
    margin-top: 225px !important;
  }

  .tab-mb00 {
    margin-bottom: 0px !important;
  }

  .tab-mb10 {
    margin-bottom: 10px !important;
  }

  .tab-mb30 {
    margin-bottom: 30px !important;
  }

  .tab-mb50 {
    margin-bottom: 50px !important;
  }

  .tab-mb70 {
    margin-bottom: 70px !important;
  }

  .tab-mb85 {
    margin-bottom: 85px !important;
  }

  .tab-mb100 {
    margin-bottom: 100px !important;
  }

  .tab-mb200 {
    margin-bottom: 200px !important;
  }
}
@media only screen and (max-width: 768px) {
  .sp-mt00 {
    margin-top: 0px !important;
  }

  .sp-mt30 {
    margin-top: 30px !important;
  }

  .sp-mt60 {
    margin-top: 60px !important;
  }

  .sp-mt100 {
    margin-top: 100px !important;
  }

  .sp-mt120 {
    margin-top: 120px !important;
  }

  .sp-mb00 {
    margin-bottom: 0px !important;
  }

  .sp-mb10 {
    margin-bottom: 10px !important;
  }

  .sp-mb20 {
    margin-bottom: 20px !important;
  }

  .sp-mb30 {
    margin-bottom: 30px !important;
  }

  .sp-mb40 {
    margin-bottom: 40px !important;
  }

  .sp-mb50 {
    margin-bottom: 50px !important;
  }

  .sp-mb65 {
    margin-bottom: 65px !important;
  }

  .sp-mb75 {
    margin-bottom: 75px !important;
  }

  .sp-mb100 {
    margin-bottom: 100px !important;
  }

  .sp-mb200 {
    margin-bottom: 200px !important;
  }
}