html {
  background: #FFF;
  color: #000; }

body {
  line-height: 1.5em;
  margin: 0;
  overflow: visible; }
  body.show {
    overflow: hidden; }

.image {
  width: 100%;
  height: auto; }

.smp {
  display: none; }

#header {
  position: relative;
  text-align: center; }
  #header h1 {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%); }
    #header h1.title {
      color: #FFF;
      font-size: clamp(14px, 1.8vw, 28px); }

#footer {
  font-size: clamp(10px, 1.3vw, 16px);
  position: relative;
  text-align: center; }
  #footer .copy {
    padding: 1em 0; }

.float-bnr {
  width: max(120px, 12vw);
  position: fixed;
  top: 40vw;
  right: 4vw;
  z-index: 10;
  transition: all .75s;
  transform: translateY(-100%); }
  .float-bnr.UpMove {
    top: -100vh; }
  .float-bnr.DownMove {
    top: 95vh; }
  .float-bnr.end {
    top: -100vh; }
  .float-bnr a {
    opacity: 1; }
    .float-bnr a:hover {
      opacity: 0.75; }

.ipad .float-bnr.DownMove {
  top: 90vh; }

#top-page .wrap {
  max-width: 1680px;
  margin: 0 auto;
  position: relative; }
  #top-page .wrap .intro {
    padding: 10vw 0 12vw;
    padding-top: min(160px, 10vw);
    padding-bottom: min(200px, 12vw);
    text-align: center; }
    #top-page .wrap .intro .title {
      margin: 0 auto 2vw;
      font-size: clamp(14px, 1.8vw, 28px); }
    #top-page .wrap .intro h3 {
      font-size: clamp(22px, 3vw, 48px);
      margin-bottom: 0.5em;
      line-height: 1.5em; }
    #top-page .wrap .intro p {
      font-size: clamp(12px, 1.55vw, 24px);
      line-height: 1.8em; }
  #top-page .wrap .content .inner.cont01, #top-page .wrap .content .inner.cont06, #top-page .wrap .content .inner.cont07 {
    padding-left: 10%;
    padding-right: 10%; }
    #top-page .wrap .content .inner.cont01 .box, #top-page .wrap .content .inner.cont06 .box, #top-page .wrap .content .inner.cont07 .box {
      margin-bottom: 10VW;
      margin-bottom: min(160px, 10vw); }
      #top-page .wrap .content .inner.cont01 .box:last-child, #top-page .wrap .content .inner.cont06 .box:last-child, #top-page .wrap .content .inner.cont07 .box:last-child {
        margin-bottom: 0; }
      #top-page .wrap .content .inner.cont01 .box .imgBox, #top-page .wrap .content .inner.cont06 .box .imgBox, #top-page .wrap .content .inner.cont07 .box .imgBox {
        width: 45%; }
      #top-page .wrap .content .inner.cont01 .box .txtBox, #top-page .wrap .content .inner.cont06 .box .txtBox, #top-page .wrap .content .inner.cont07 .box .txtBox {
        box-sizing: border-box;
        text-align: justify;
        width: 50%; }
  #top-page .wrap .content .inner.cont03, #top-page .wrap .content .inner.cont04, #top-page .wrap .content .inner.cont05, #top-page .wrap .content .inner.cont08 {
    margin-top: 10VW;
    margin-top: min(160px, 10vw); }
    #top-page .wrap .content .inner.cont03 .box, #top-page .wrap .content .inner.cont04 .box, #top-page .wrap .content .inner.cont05 .box, #top-page .wrap .content .inner.cont08 .box {
      flex-wrap: wrap; }
      #top-page .wrap .content .inner.cont03 .box .imgBox, #top-page .wrap .content .inner.cont04 .box .imgBox, #top-page .wrap .content .inner.cont05 .box .imgBox, #top-page .wrap .content .inner.cont08 .box .imgBox {
        width: 100%;
        position: relative;
        overflow: hidden; }
        #top-page .wrap .content .inner.cont03 .box .imgBox .left,
        #top-page .wrap .content .inner.cont03 .box .imgBox .right, #top-page .wrap .content .inner.cont04 .box .imgBox .left,
        #top-page .wrap .content .inner.cont04 .box .imgBox .right, #top-page .wrap .content .inner.cont05 .box .imgBox .left,
        #top-page .wrap .content .inner.cont05 .box .imgBox .right, #top-page .wrap .content .inner.cont08 .box .imgBox .left,
        #top-page .wrap .content .inner.cont08 .box .imgBox .right {
          width: 100%; }
        #top-page .wrap .content .inner.cont03 .box .imgBox .left, #top-page .wrap .content .inner.cont04 .box .imgBox .left, #top-page .wrap .content .inner.cont05 .box .imgBox .left, #top-page .wrap .content .inner.cont08 .box .imgBox .left {
          margin-left: 10%; }
        #top-page .wrap .content .inner.cont03 .box .imgBox .right, #top-page .wrap .content .inner.cont04 .box .imgBox .right, #top-page .wrap .content .inner.cont05 .box .imgBox .right, #top-page .wrap .content .inner.cont08 .box .imgBox .right {
          margin-left: -10%; }
        #top-page .wrap .content .inner.cont03 .box .imgBox .slick-slider.slick-dotted, #top-page .wrap .content .inner.cont04 .box .imgBox .slick-slider.slick-dotted, #top-page .wrap .content .inner.cont05 .box .imgBox .slick-slider.slick-dotted, #top-page .wrap .content .inner.cont08 .box .imgBox .slick-slider.slick-dotted {
          margin-bottom: 5.5vw; }
        #top-page .wrap .content .inner.cont03 .box .imgBox .slick-dots, #top-page .wrap .content .inner.cont04 .box .imgBox .slick-dots, #top-page .wrap .content .inner.cont05 .box .imgBox .slick-dots, #top-page .wrap .content .inner.cont08 .box .imgBox .slick-dots {
          width: 90%;
          bottom: -5vw; }
          #top-page .wrap .content .inner.cont03 .box .imgBox .slick-dots li, #top-page .wrap .content .inner.cont04 .box .imgBox .slick-dots li, #top-page .wrap .content .inner.cont05 .box .imgBox .slick-dots li, #top-page .wrap .content .inner.cont08 .box .imgBox .slick-dots li {
            margin: 0;
            width: 20%;
            height: 2px; }
            #top-page .wrap .content .inner.cont03 .box .imgBox .slick-dots li button, #top-page .wrap .content .inner.cont04 .box .imgBox .slick-dots li button, #top-page .wrap .content .inner.cont05 .box .imgBox .slick-dots li button, #top-page .wrap .content .inner.cont08 .box .imgBox .slick-dots li button {
              width: 100%;
              height: 100%;
              padding: 0; }
              #top-page .wrap .content .inner.cont03 .box .imgBox .slick-dots li button::before, #top-page .wrap .content .inner.cont04 .box .imgBox .slick-dots li button::before, #top-page .wrap .content .inner.cont05 .box .imgBox .slick-dots li button::before, #top-page .wrap .content .inner.cont08 .box .imgBox .slick-dots li button::before {
                background: #000;
                content: '';
                width: 100%;
                height: 100%; }
      #top-page .wrap .content .inner.cont03 .box .txtBox, #top-page .wrap .content .inner.cont04 .box .txtBox, #top-page .wrap .content .inner.cont05 .box .txtBox, #top-page .wrap .content .inner.cont08 .box .txtBox {
        box-sizing: border-box;
        margin-bottom: 4vw;
        margin-bottom: min(64px, 4vw);
        padding-left: 10%;
        text-align: justify;
        width: 76%; }
  #top-page .wrap .content .inner.cont03 .box .imgBox .slick-slide {
    margin-right: 10px; }
  #top-page .wrap .content .inner.cont03 .box .imgBox .slick-dots li {
    width: 20%; }
  #top-page .wrap .content .inner.cont04 {
    margin-top: -10vw;
    padding-top: 20vw;
    position: relative;
    overflow: hidden; }
    #top-page .wrap .content .inner.cont04 .verticalImg {
      width: 100%;
      height: 120%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      background: no-repeat url("../img/bg_step04.jpg") 50% 50%;
      background-size: cover;
      z-index: -1; }
    #top-page .wrap .content .inner.cont04 .box {
      flex-direction: row-reverse; }
      #top-page .wrap .content .inner.cont04 .box .txtBox {
        padding-left: 0;
        padding-right: 10%; }
      #top-page .wrap .content .inner.cont04 .box .imgBox .slick-slide {
        margin-left: 10px; }
      #top-page .wrap .content .inner.cont04 .box .imgBox .slick-dots li {
        width: 25%; }
  #top-page .wrap .content .inner.cont05 {
    background: #FFF;
    margin-top: -10vw;
    padding-top: 20vw; }
    #top-page .wrap .content .inner.cont05 .box .imgBox .slick-slide {
      margin-right: 10px; }
    #top-page .wrap .content .inner.cont05 .box .imgBox .slick-dots li {
      width: 20%; }
  #top-page .wrap .content .inner.cont06 {
    margin-top: 10VW;
    padding-top: 30vw;
    margin-top: -20vw;
    padding-bottom: 20vw;
    margin-bottom: -20vw;
    position: relative;
    overflow: hidden; }
    #top-page .wrap .content .inner.cont06 .verticalImg {
      width: 100%;
      height: 120%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      background: no-repeat url("../img/bg_step06.jpg") 50% 50%;
      background-size: cover;
      z-index: -1; }
  #top-page .wrap .content .inner.cont07 {
    margin-top: 10VW;
    margin-top: min(160px, 10VW); }
  #top-page .wrap .content .inner.cont08 {
    padding-top: 8vw;
    padding-top: min(120px, 8vw);
    padding-bottom: 8vw;
    padding-bottom: min(120px, 8vw);
    position: relative;
    overflow: hidden; }
    #top-page .wrap .content .inner.cont08 .verticalImg {
      width: 100%;
      height: 120%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      background: no-repeat url("../img/bg_step08.jpg") 50% 50%;
      background-size: cover;
      z-index: -1; }
    #top-page .wrap .content .inner.cont08 .box {
      justify-content: center; }
      #top-page .wrap .content .inner.cont08 .box .txtBox {
        margin-bottom: 8vw;
        padding-left: 0;
        padding-right: 0;
        text-align: center; }
        #top-page .wrap .content .inner.cont08 .box .txtBox .title {
          margin: 0 auto 2vw;
          font-size: clamp(14px, 1.8vw, 28px); }
      #top-page .wrap .content .inner.cont08 .box .imgBox .slick-slide {
        margin-left: 10px; }
      #top-page .wrap .content .inner.cont08 .box .imgBox .slick-dots li {
        width: 20%; }
    #top-page .wrap .content .inner.cont08 .backtoTop a {
      border: 1px solid #707070;
      border-radius: 50vw;
      position: absolute;
      right: 2.5%;
      bottom: 120px;
      width: 64px;
      height: 64px; }
      #top-page .wrap .content .inner.cont08 .backtoTop a::before {
        content: '';
        display: block;
        vertical-align: middle;
        color: #707070;
        width: 1.25em;
        height: 1.25em;
        border: 0.1em solid currentColor;
        border-left: 0;
        border-bottom: 0;
        box-sizing: border-box;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-25%) rotate(-45deg);
        position: absolute; }
  #top-page .wrap .content .inner .box {
    display: flex;
    align-items: center;
    justify-content: space-between; }
    #top-page .wrap .content .inner .box .txtBox .step {
      font-size: clamp(16px, 1.8vw, 24px);
      margin-bottom: 1.2vw;
      padding-bottom: 1.6vw;
      position: relative; }
      #top-page .wrap .content .inner .box .txtBox .step::after {
        background: #000;
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 1.5vw;
        min-width: 16px;
        height: 1px; }
    #top-page .wrap .content .inner .box .txtBox h3 {
      font-size: clamp(20px, 2.2vw, 36px);
      margin-bottom: 1em;
      line-height: 1.5em; }
    #top-page .wrap .content .inner .box .txtBox p {
      font-size: clamp(13px, 1.35vw, 20px);
      line-height: 1.8em; }
    #top-page .wrap .content .inner .box.rev .imgBox {
      order: 2; }
    #top-page .wrap .content .inner .box.rev .txtBox {
      order: 1; }
  #top-page .wrap .btnArea {
    padding: 12vw 10%;
    padding-top: min(200px, 12vw);
    padding-bottom: min(200px, 12vw);
    text-align: center; }
    #top-page .wrap .btnArea .btn {
      font-size: clamp(12px, 1.8vw, 30px);
      line-height: 1em;
      padding-bottom: 12vw; }
      #top-page .wrap .btnArea .btn a {
        background: #8eb8bf;
        border-radius: 50vh;
        box-sizing: border-box;
        color: #FFF;
        display: block;
        padding: 1.5em;
        position: relative; }
        #top-page .wrap .btnArea .btn a::after {
          background: no-repeat url("../img/icon_arrow.svg") 50% 50%;
          background-size: cover;
          content: '';
          display: block;
          width: 1em;
          height: 1em;
          position: absolute;
          top: 1.5em;
          right: 3em;
          transition: all .25s; }
        #top-page .wrap .btnArea .btn a:hover {
          background: rgba(142, 184, 191, 0.75); }
          #top-page .wrap .btnArea .btn a:hover::after {
            right: 2.5em; }
    #top-page .wrap .btnArea .bnr {
      margin: 0 auto;
      width: 70%; }
      #top-page .wrap .btnArea .bnr a {
        opacity: 1; }
        #top-page .wrap .btnArea .bnr a:hover {
          opacity: 0.75; }

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 25%);
  transition: 0.8s; }
  .fadeIn_up.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.slideIn_left {
  opacity: 0;
  transform: translate(-25%, 0);
  transition: 0.8s; }
  .slideIn_left.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.slideIn_right {
  opacity: 0;
  transform: translate(25%, 0);
  transition: 0.8s; }
  .slideIn_right.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.fadeIn {
  opacity: 0;
  transition: 0.8s; }
  .fadeIn.is-show {
    opacity: 1; }

.delay1 {
  transition-delay: 0.2s; }

.delay2 {
  transition-delay: 0.4s; }

.delay3 {
  transition-delay: 0.6s; }