@charset "UTF-8";
/* -------- -------- --------
             middle
-------- -------- -------- */
.middle-container h2{
  position:relative;
  width:100%;
  padding:6vmax;
  z-index:8;
  background-color:rgba(240,244,248,1);
}
.mid-icon-deco{
  position:relative;
  width:100%;
  height:calc(44px + 32*var(--calcWidth));
  display:block;
}
.mid-icon-deco img{
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
  width:calc(152px + 71*var(--calcWidth));
  height:calc(44px + 22*var(--calcWidth));
}
.middle-container h2 span:nth-child(2){
  font-size:.72em;
  font-weight:500;
}
.middle-container ol li{
  width:100%;
  margin:0 auto;
  padding:4vmax 6vmax;
  position:relative;
  background-color:rgba(240,244,248,1);
  z-index:9992;
}
.middle-container ol li:last-child{
  background-color:rgba(255,255,255,0);
}
.middle-container ol li > div{
  width:100%;
  text-align:justify;

  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;

  -ms-flex-wrap:nowrap;
  flex-wrap:nowrap;

  -webkit-box-align:start;
  -ms-flex-align:start;
  align-items:flex-start;

  -webkit-box-pack:start;
  -ms-flex-pack:start;
  justify-content:flex-start;
}
.middle-container ol li > div > div > p:first-child span:first-child,
.middle-container ol li > div > div > p:first-child span:nth-child(2){
  font-family:'Oswald',sans-serif;
  font-size:1.2rem;
  font-weight:700;
  margin:0 .4vw 0 0;
}
.middle-container ol li > div > div > p:first-child span:first-child{
  text-decoration:underline;
}
.middle-container ol li > div > div > p:first-child span:nth-child(2){
  font-weight:400;
  color:rgba(88,108,128,1);
  text-decoration:none;
}
.middle-container h3{
  margin:.8vw 0 1.6vw 0;
}
.middle-container h3 span{
  font-size:1.2em;
  line-height:1.4;
  letter-spacing:0;
  display:block;
}
.middle-container ol li:nth-child(2) > div > div > p:first-child,
.middle-container ol li:nth-child(2) h3{
  text-align:right;
}
.middle-container ol li > div > div > p:last-child{
  font-size:1rem;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.8em;
  margin:4vw 1vw;
}
.middle-container ol li img{
  width:32vw;
  height:32vw;
  position:absolute;
  top:-6vw;
  display:block;
  z-index:9991;
}
.middle-container ol li:nth-child(odd) img{
  right:6vw;
}
.middle-container ol li:nth-child(even) img{
  left:6vw;
}
/* -------- -------- --------
         mid background
-------- -------- -------- */
.custom-shape-divider-bottom{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  overflow:hidden;
  line-height:0;
  transform:rotate(180deg);
}
.custom-shape-divider-bottom svg{
  position:relative;
  display:block;
  width:calc(100% + 1.3px);
  height:126px;
}
.shape-fill{
  fill:rgba(240,244,248,1);
}
.background-circle{
  width:100%;
  height:160vw;
  position:absolute;
  bottom:-50vw;
  right:0;
  left:0;
  margin:auto;
  background-color:rgba(240,244,248,1);
  border-bottom-right-radius:50%;
  border-bottom-left-radius:50%;
}
/* -------- -------- --------
            service
-------- -------- -------- */
.service-container{
  padding:0 0 12vmin 0;
  background-color:rgba(0,0,0,0);
  z-index:9993;
  text-align:center;
  overflow:hidden;
}
.service-container div{
  width:100%;
  height:4.6vw;
  text-align:center;
  margin:8vw auto 0 auto;
  position:relative;
}
.service-container div span{
  width:30vw;
  height:4vw;
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
  display:inline-block;
  background-image:url('../img/title_decoration.svg');
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.service-container div p{
  height:8vw;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  display:inline-block;
}
.service-container div p img{
  width:100%;
  height:100%;
  margin:0 auto;
  display:block;
}
.wavvy-left{
  left:0;
}
.wavvy-right{
  right:0;
}
.service-container h2{
  width:100%;
  text-align:center;
  font-size:1.27rem;
  font-weight:700;
  margin:2vw auto 8.8vw auto;
}
.service-container ol{
  width:100%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;

  -ms-flex-wrap:wrap;
  flex-wrap:wrap;

  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;

  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}
.service-container ol li{
  position:relative;
  width:50%;
  height:24vw;
  margin:4vw 0;
}
.service-container ol li img{
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:18vw;
  height:18vw;
  margin:auto;
  display:block;
}
.service-container ol li span{
  font-size:1rem;
  font-weight:700;
  width:100%;
  height:2vw;
  text-align:center;
  white-space:nowrap;
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  margin:auto;

  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;

  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;

  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
  z-index:3;
}
.service-container button{
  background-color:rgba(0,0,0,0);
  letter-spacing:0;
  padding:16px 32px;
  margin:6vw auto 0 auto;
}
.service-container .omochi-man{
  position:absolute;
  bottom:0;
  left:0;
  width:calc(48px + 24*var(--calcWidth));
  height:calc(48px + 24*var(--calcWidth));
  border-radius:50%;
  background-color:var(--mainColor);
  z-index:9998;
  transform:translate3d(-50vw,0,0);
}
.service-container .omochi-man img{
  position:absolute;
  right:-15%;
  top:-5%;
  width:calc(32px + 24*var(--calcWidth));
  height:calc(32px + 24*var(--calcWidth));
  transform:rotate(-25deg);
}
/* -------- -------- --------
             contact
-------- -------- -------- */
.contact-container{
  position:relative;
  width:100%;
  min-height:80vw;
  background-color:var(--mainColor);

  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;

  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;

  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}
.contact-container h3{
  width:100%;
  margin:auto;
  padding:10vmax 0;
  position:relative;
}
.contact-container h3 > span{
  width:100%;
  height:24vw;
  display:block;
  margin:auto;
}
.contact-container h3 > span img{
  display:block;
  width:100%;
  height:100%;
  margin:0 auto;
}
.contact-container h3 button{
  width:48vw;
  margin:4vw auto 0 auto;
}
/* -------- -------- --------
              flow
-------- -------- -------- */
.flow-container{
  width:100%;
  padding:0 0 12vmax 0;
  background-color:var(--mainColor);
}
.flow-container div{
  width:100%;
  height:8vw;
  text-align:center;
  margin:0 auto 1.4vw auto;
  position:relative;
}
.fw-title{
  color:var(--whiteColor);
  height:100%;
  position:absolute;
  top:0;
  right:48%;
  bottom:0;
  left:0;
  margin:auto;

  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;

  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;

  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}
.wavvy-right-wh{
  width:48%;
  height:4vw;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  margin:auto;
  display:inline-block;
  background-image:url('../img/title_decoration_wh.svg');
  background-position:center right;
  background-repeat:no-repeat;
  background-size:cover;
}
.fw-title img{
  width:100%;
  height:100%;
  display:block;
}
.flow-container h2{
  color:rgba(0,0,0,1);
  width:100%;
  height:2.4vw;
  margin:0 auto 24vw auto;
  position:relative;
}
.flow-container h2 span{
  font-size:1.17rem;
  font-weight:700;
  letter-spacing:.1em;
  width:100%;
  height:2.4vw;
  position:absolute;
  top:0;
  right:60%;
  bottom:0;
  left:0;
  display:block;
  margin:auto;
  padding:0 0 0 4vw;
}
.flow-container ol{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;

  -ms-flex-wrap:wrap;
  flex-wrap:wrap;

  -webkit-box-align:start;
  -ms-flex-align:start;
  align-items:flex-start;

  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}
.fw-icon,
.fw-icon dt,
.fw-icon span.step-title{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;

  -webkit-box-align:center;
  -ms-flex-align:center;
  align-items:center;

  -webkit-box-pack:center;
  -ms-flex-pack:center;
  justify-content:center;
}
.fw-icon{
  position:relative;
  width:80%;
  height:72vw;
  margin:0 1vw;
  border-bottom:4px dotted var(--whiteColor);
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
.fw-icon img{
  position:absolute;
  top:10vw;
  width:16vw;
  height:16vw;
}
.step-no{
  font-family:'Oswald',sans-serif;
  font-size:1rem;
  font-weight:700;
  position:absolute;
  top:26vw;
  right:0;
  width:100%;
  margin:1vw auto;
  text-align:center;
  letter-spacing:0;
}
.step-title{
  color:rgba(0,0,0,1);
  text-align:center;
  font-size:1.17rem;
  font-weight:700;
  position:absolute;
  top:0;
  width:64%;
  min-width:80px;
  height:6.4vw;
  max-height:64px;
  margin:0 auto 1vw auto;
  border-radius:10vw;
  background-color:var(--whiteColor);
}
.fw-icon dd{
  position:absolute;
  top:36vw;
  right:0;
  left:0;
  width:100%;
  padding:0 .2vw;
  margin:auto;
  line-height:1.2;
}
.step-comment{
  font-size:1rem;
  font-weight:700;
  line-height:1.8;
  letter-spacing:.05em;
  width:100%;
}
.fw-icon div{
  width:100%;
  height:8vh;
  margin:24px auto 0 auto;
  text-align:center;
}
.fw-icon div button{
  width:90%;
  height:96%;
  border:4px solid rgba(0,0,0,1);
  border-radius:50px;
  background-color:var(--whiteColor);
  margin:0 auto;
}
.fw-icon dt{
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}
.fw-next{
  width:100%;
  height:6vw;
  margin:6vw 0;
  overflow:hidden;
}
.fw-next img{
  width:100%;
  height:100%;
  margin:0 auto;
  display:block;
  -webkit-transform:rotate(90deg);
  transform:rotate(90deg);
}
.ft-line{
  border:none;
}
@media screen and (min-width:600px){
  /* -------- -------- --------
      initial settings - 600
  -------- -------- -------- */
  .top-container{
    height:100vmin;
  }
  .top-container div p{
    width:64%;
  }
  /* -------- -------- --------
             phrase - 600
  -------- -------- -------- */
  .phrase-container h1 span:nth-child(1){
    font-size:calc(24.5px + 16.5*var(--calcTabletWidth));
  }
  .phrase-container h1 span:nth-child(2){
    font-size:calc(17.5px + 10.5*var(--calcTabletWidth));
  }
  .phrase-container h1 span:nth-child(3){
    font-size:calc(12.5px + 4.5*var(--calcTabletWidth));
  }
  /* -------- -------- --------
      middle-container - 600
  -------- -------- -------- */
  .mid-icon-deco{
    height:calc(40px + 40*var(--calcTabletWidth));
  }
  .mid-icon-deco img{
    width:calc(170px + 85*var(--calcTabletWidth));
    height:calc(50px + 25*var(--calcTabletWidth));
  }
  .middle-container h2 span:nth-child(2){
    font-size:calc(14.5px + 6*var(--calcTabletWidth));
  }
  .middle-container ol li{
    padding:2vw 6vw;
  }
  .middle-container ol li img{
    width:40vw;
    height:40vw;
    top:0;
    bottom:0;
    margin:auto;
  }
  .middle-container ol li:nth-child(odd) img{
    left:6vw;
    right:auto;
  }
  .middle-container ol li:nth-child(even) img{
    right:6vw;
    left:auto;
  }
  .middle-container h3 span{
    font-size:1em;
  }
  .middle-container ol li:nth-child(odd) > div{
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end;
  }
  .middle-container ol li > div > div{
    width:calc(260px + 184*var(--calcTabletWidth));
  }
  .middle-container ol li > div > div > p:last-child{
    font-size:calc(11.5px + 6.5*var(--calcTabletWidth));
    margin:4vw 1vw 6vw 1vw;
  }
  .background-circle{
    height:100vw;
    bottom:-42vw;
  }
  /* -------- -------- --------
          service - 600
  -------- -------- -------- */
  .service-container h2{
    font-size:calc(14px + 6*var(--calcTabletWidth));
    margin:1vw auto 11.5vw auto;
  }
  .service-container div p{
    height:6vw;
  }
  .service-container div span{
    height:2.4vw;
  }
  .service-container ol{
    width:90%;
    margin:auto;
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
  }
  .service-container ol li{
    width:25%;
    height:22.5vw;
  }
  .service-container ol li span{
    font-size:calc(12px + 4*var(--calcTabletWidth));
  }
  .service-container ol li img{
    width:calc(72px + 36*var(--calcTabletWidth));
  }
  /* -------- -------- --------
        contact - 600
  -------- -------- -------- */
  .contact-container{
    min-height:auto;
  }
  .contact-container h3 > span{
    width:64%;
    height:calc(80px + 64*var(--calcTabletWidth));
  }
  .contact-container h3 button{
    width:calc(120px + 40*var(--calcTabletWidth));
    height:calc(40px + 24*var(--calcTabletWidth));
  }
  .contact-container h3 button.ct-btn-tp span:first-child{
    font-size:calc(10.5px + 4*var(--calcTabletWidth));
  }
  /* -------- -------- --------
            flow - 600
  -------- -------- -------- */
  .flow-container{
    min-height:calc(340px + 320*var(--calcTabletWidth));
    padding:0;
  }
  .flow-container div{
    height:3.8vw;
  }
  .wavvy-right-wh{
    width:72%;
    height:2vw;
  }
  .fw-title{
    right:72%;
  }
  .flow-container h2{
    margin:0 auto calc(32px + 56*var(--calcTabletWidth)) auto;
  }
  .flow-container h2 span{
    font-size:calc(12px + 10*var(--calcTabletWidth));
  }
  .fw-icon{
    width:20.5vw;
    height:auto;
    border-bottom:0;
  }
  .fw-next{
    width:2vw;
    margin:2.4vw 0 0 0;
  }
  .fw-next img{
    -webkit-transform:rotate(0);
    transform:rotate(0);
  }
  .fw-icon img{
    position:relative;
    top:0;
    width:8vw;
    height:8vw;
  }
  .step-no{
    font-size:calc(10.5px + 10.5*var(--calcTabletWidth));
    position:relative;
    top:0;
  }
  .step-title{
    font-size:calc(11.5px + 8.5*var(--calcTabletWidth));
    color:var(--whiteColor);
    width:calc(108px + 80*var(--calcTabletWidth));
    position:relative;
    top:0;
    height:3.2vw;
    background-color:rgba(0,0,0,1);
  }
  .step-comment{
    font-size:calc(8.5px + 6*var(--calcTabletWidth));
    font-weight:400;
  }
  .fw-icon dd{
    position:relative;
    top:0;
    width:100%;
  }
}
@media screen and (min-width:1025px){
  /* -------- -------- --------
       top container - 1025
  -------- -------- -------- */
  .top-container{
    min-height:568px;
  }
  .top-icon-face{
    width:calc(160px + 160*(100vw - 1025px)/1125);
    height:calc(160px + 160*(100vw - 1025px)/1125);
    top:calc(280px + 280*(100vw - 1025px)/1125);
    right:calc(180px + 180*(100vw - 1025px)/1125);
  }
  .top-container div p{
    height:16vw;
  }
  /* -------- -------- --------
      phrase-container - 1025
  -------- -------- -------- */
  .phrase-container{
    height:calc(568px + 568*var(--calcPCWidth));
  }
  .phrase-container h1 span:nth-child(1){
    font-size:calc(40px + 52*var(--calcPCWidth));
  }
  .phrase-container h1 span:nth-child(2){
    font-size:calc(28px + 32*var(--calcPCWidth));
  }
  .phrase-container h1 span:nth-child(3){
    font-size:calc(18px + 18*var(--calcPCWidth));
  }
  .background-circle{
    bottom:-32vw;
  }
  /* -------- -------- --------
      middle container - 1025
  -------- -------- -------- */
  .middle-container h2{
    padding:6vw 0 0 13.8vw;
  }
  .middle-container h2 span:nth-child(2){
    font-size:1.15rem;
  }
  .mid-icon-deco{
    max-width:1440px;
    max-height:104px;
  }
  .mid-icon-deco img{
    width:calc(226px + 118*var(--calcPCWidth));
    height:calc(76px + 38*var(--calcPCWidth));
  }
  .middle-container ol li{
    min-height:36vw;
    padding:0 0 4vw 0;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;

    -webkit-box-align:start;
    -ms-flex-align:start;
    align-items:flex-start;

    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
  }
  .middle-container ol li > div{
    width:30vw;
    max-width:616px;
  }
  .middle-container ol li:nth-child(2) > div > div > p:first-child,
  .middle-container ol li:nth-child(2) h3{
    text-align:left;
  }
  .middle-container ol li > div > div > p:first-child span:first-child,
  .middle-container ol li > div > div > p:first-child span:nth-child(2){
    font-size:calc(15px + 12*var(--calcPCWidth));

  }
  .middle-container h3 span{
    font-size:calc(26px + 20*var(--calcPCWidth));
  }
  .middle-container ol li > div > div > p:last-child{
    font-size:calc(12.5px + 15*var(--calcPCWidth));
    margin:0 .4vw;
  }
  .middle-container ol li img{
    width:30vw;
    height:30vw;
    max-width:616px;
    max-height:616px;
    position:relative;
    top:0!important;
    right:0!important;
    left:0!important;
  }
  .middle-container ol li:nth-child(1) img{
    margin:0 6vw 0 7vw;
  }
  .middle-container ol li:nth-child(2) img{
    margin:0;
  }
  .middle-container ol li:nth-child(3) img{
    margin:0 8vw 0 4vw;
  }
  .middle-container ol li:nth-child(even) > div{
    margin:0 5.6vw 0 4vw;
  }
  .middle-container ol li:nth-child(even) img{
    width:28vw;
  }
  /* -------- -------- --------
        service - 1025
  -------- -------- -------- */
  .service-container{
    min-height:46vw;
  }
  .service-container ol{
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
  }
  .service-container ol li{
    width:11.4vw;
    height:14vw;
    margin:0 3.6vw;
  }
  .service-container ol li img{
    width:8vw;
    height:8vw;
  }
  .service-container div span{
    width:36.6vw;
    height:1.7vw;
  }
  .service-container div p{
    height:4.6vw;
  }
  .service-container ol li span{
    font-size:calc(14.5px + 14*var(--calcPCWidth));
  }
  /* -------- -------- --------
        contact - 1025
  -------- -------- -------- */
  .contact-container{
    min-height:42vw;
  }
  .contact-container h3 > span{
    height:12vw;
  }
  .contact-container h3 button{
    width:16vw;
    height:4.8vw;
    margin:2.4vw auto 0 auto;
  }
  .contact-container h3 button.ct-btn-tp span:first-child{
    font-size:calc(15px + 12*var(--calcPCWidth));
  }
  /* -------- -------- --------
          flow - 1025
  -------- -------- -------- */
  .flow-container{
    min-height:50vw;
    padding:0;
  }
  .flow-container h2{
    margin:0 auto 7.2vw auto;
  }
  .flow-container h2 span{
    font-size:calc(14px + 6*(100vw -1025px)/1225);
    padding:0 0 0 9vw;
  }
  .flow-container div{
    height:3.8vw;
  }
  .fw-title{
    right:60%;
  }
  .wavvy-right-wh{
    width:64%;
    height:1.7vw;
  }
  .flow-container ol{
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
  }
  .fw-icon{
    width:15.5vw;
  }
  .fw-next{
    width:2.4vw;
  }
  .step-no{
    font-size:calc(13.5px + 16.5*var(--calcPCWidth));
  }
  .step-title{
    font-size:calc(13.5px + 15*var(--calcPCWidth));
    color:var(--whiteColor);
    width:74%;
  }
  .step-comment{
    font-size:calc(11px + 13.5*var(--calcPCWidth));
    font-feature-settings:normal;
    letter-spacing:.05em;
  }
  .fw-icon dd{
    position:relative;
    top:0;
    width:100%;
  }
}