@charset "UTF-8";
/* CSS Document */

*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}

#footer{margin-top:0;border-top:none}
#totop{z-index: 999;}

#plantwalk{position:relative;color:#666;line-height:1;font-family:"Noto Sans JP","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","Segoe UI Light","游ゴシック体","Yu Gothic",YuGothic,"メイリオ",Meiryo,sans-serif}
#plantwalk .contents_inner{max-width:768px;margin:auto;z-index: 1;position: relative; background-color: #F8FDFF;}
#plantwalk .container{max-width:92%;margin-right:auto;margin-left:auto;position:relative}
#plantwalk .container2{max-width:85.3%;margin-right:auto;margin-left:auto;position:relative}
#plantwalk .detail{height: auto;}
#plantwalk figure{margin: 0;}
#plantwalk figure img{display: block; max-width:100%;height: auto;margin-right:auto;margin-left:auto}
#plantwalk .desc{line-height:1.7;letter-spacing:0;font-weight:500;margin: 0;}
#plantwalk .small {font-weight: 700;}
#plantwalk .notice {text-indent:-1em;margin-left:1em;font-weight: 400; line-height: 1.6;}
#plantwalk .notice + .notice{margin-top:1em;}
#plantwalk p + p {margin-top: 1em;}
#plantwalk .btn img {width: 100%;height: auto;margin-right:auto;margin-left:auto}

#plantwalk .c-notice{background-color:#fff;}
#plantwalk .c-notice .heading{color:#fff;font-weight:700;text-align:center;background-color:#E54E4E;}
#plantwalk .c-notice p{line-height:1.6;}

#plantwalk .c-title figure img{width:96%;}
#plantwalk .c-title-r figure img{margin-right:0;}
#plantwalk .c-title-l figure img{margin-left:0;}

#plantwalk .c-link{display:block;color:#42ACDB;font-weight:500;text-align:right;}
#plantwalk .c-link.arrow{position:relative;}
#plantwalk .c-link.arrow::after{content:"";position:absolute;right:0;top:50%;background:url(../../images/plant_app/plantwalk/arrow01.png) left top / 100% auto no-repeat;transform: translateY(-50%);}

/* fixedimg */
#plantwalk .fixedimg{position:fixed;left:60px;bottom:55px;}
#plantwalk .fixedimg.nofixed{position:absolute;bottom:20px;}

/* first */
#plantwalk #first{background-color:#FFF8BC;}
#plantwalk #first .ttl{margin-bottom:20px;}
#plantwalk #first .ttl figure{width:81.2%;margin:auto;}
#plantwalk #first .lead{color:#87AC7D;font-weight:900;text-align:center;line-height:1.5625;}
#plantwalk #first .about .img{position:relative;margin:auto;}
#plantwalk #first .about .txt{background-color:#fff;}
#plantwalk #first .about .txt .note{color:#E54E4E;line-height:1.5;}

/* present */
#plantwalk #present .caption figure img{width:71.7%;}
#plantwalk #present .img img{width:88%;}

/* start */
#plantwalk #start .caption{position:relative;color:#42ACDB;font-weight:700;text-align:center;line-height:1.625;}
#plantwalk #start .caption::before{content:"";position:absolute;left:50%;top:0;background:url(../../images/plant_app/plantwalk/icon_download.png) center / cover no-repeat;transform:translateX(-50%);}
#plantwalk #start .download{border-top:2px solid #42ACDB;border-bottom:2px solid #42ACDB;}
#plantwalk #start .download .heading{color:#333;font-weight:700;text-align:center;line-height:1.3;}
#plantwalk #start .download .heading small{display:block;}
#plantwalk #start .download .store-links{display:flex;}

/* setting */
#plantwalk #setting .stepwrap{counter-reset:step 0;}
#plantwalk #setting .stepwrap .step{position:relative;}
#plantwalk #setting .stepwrap .step::before{counter-increment:step 1;content:"STEP "counter(step);position:absolute;left:0;top:0;color:#fff;font-family:"Lato",sans-serif;font-weight:700;background-color:#42ACDB;}
#plantwalk #setting .stepwrap .step .desc + .desc{margin-top:1em;}
#plantwalk #setting .stepwrap .step .howto{text-align:center;border:1px solid #41ACDC;background-color:#fff;}
#plantwalk #setting .stepwrap .step .howto ul{display:flex;justify-content:center;}
#plantwalk #setting .stepwrap .step .howto ul > li{width:50%;}
#plantwalk #setting .stepwrap .step .howto ul > li .c-link{display:inline-block;}

@media screen and (min-width:769px){
  .only_pc{display: block}
  .only_sp{display: none}

  #plantwalk{background:url(../../images/plant_app/plantwalk/bg_pc.png) center / cover no-repeat #E3F7FF;background-attachment:fixed}
  #plantwalk .desc{font-size:30px;}
  #plantwalk .notice{font-size:26px;}
  #plantwalk .section{padding:60px 0 40px;}

  #plantwalk .c-notice .heading{padding:20px;font-size:30px;}
  #plantwalk .c-notice p{padding:20px;font-size:26px;}

  #plantwalk .c-title{margin-bottom:50px;}

  #plantwalk .c-link{font-size:28px;}
  #plantwalk .c-link.arrow{padding-right:40px;}
  #plantwalk .c-link.arrow::after{width:30px;height:30px;}

  #plantwalk #first{border-radius:0 0 60px 60px;}
  #plantwalk #first > .container{padding:50px 0 80px;}
  #plantwalk #first .ttl{margin-bottom:2.7vw;}
  #plantwalk #first .lead{font-size:32px;}
  #plantwalk #first .about{margin-top:30px;}
  #plantwalk #first .about .img{width:50%;} 
  #plantwalk #first .about .txt{margin-top:-60px;padding:60px 40px 40px;border-radius:30px;}
  #plantwalk #first .about .txt .note{font-size:26px;}
  #plantwalk #first .c-notice{margin-top:30px;}

  #plantwalk #present .caption{margin-bottom:50px;}
  #plantwalk #present .img{margin-bottom:50px;}
  #plantwalk #present .bonus{margin-top:80px;}
  #plantwalk #present .bonus figure{margin-top:80px;}
  #plantwalk #present .bonus figure img{width:90.6%;}
  #plantwalk #present .bonus .c-link{margin-top:60px;}

  #plantwalk #ranking .img{margin-top:40px;}
  #plantwalk #ranking .img img{width:53.1%;}

  #plantwalk #start .caption{margin-bottom:30px;padding-top:120px;font-size:32px;}
  #plantwalk #start .caption::before{width:61px;height:94px;}
  #plantwalk #start .download{margin-top:30px;padding:40px 0;border-top-width:4px;border-bottom-width:4px;}
  #plantwalk #start .download .heading{margin-bottom:20px;font-size:42px;}
  #plantwalk #start .download .heading small{font-size:30px;}
  #plantwalk #start .download .store-links{justify-content:center;gap:20px;}
  #plantwalk #start .download .store-links img{height:105px;}

  #plantwalk #setting{padding-bottom:150px;}
  #plantwalk #setting .stepwrap .step{padding-top:120px;}
  #plantwalk #setting .stepwrap .step::before{padding:20px 60px;font-size:36px;border-radius:0 60px 60px 0;}
  #plantwalk #setting .stepwrap .step + .step{margin-top:140px;}
  #plantwalk #setting .stepwrap .step .howto{margin-top:50px;padding:30px;border-width:2px;}
  #plantwalk #setting .stepwrap .step .howto ul{margin-top:30px;}
  #plantwalk #setting .c-notice{margin-top:60px;}
}
@media screen and (max-width:768px){
  .only_pc{display: none}
  .only_sp{display: block}

  #plantwalk .desc{font-size:4vw;}
  #plantwalk .notice{font-size:3.5vw;}
  #plantwalk .section{padding:8vw 0 5.3vw;}

  #plantwalk .c-notice .heading{padding:2.7vw;font-size:4vw;}
  #plantwalk .c-notice p{padding:2.7vw;font-size:3.5vw;}

  #plantwalk .c-title{margin-bottom:6.7vw;}

  #plantwalk .c-link{font-size:3.7vw;}
  #plantwalk .c-link.arrow{padding-right:5.3vw;}
  #plantwalk .c-link.arrow::after{width:4vw;height:4vw;}

  #plantwalk .fixedimg{display:none;}

  #plantwalk #first{border-radius:0 0 8vw 8vw;}
  #plantwalk #first > .container{padding:6.7vw 0 10.7vw;}
  #plantwalk #first .lead{font-size:4.3vw;}
  #plantwalk #first .about{margin-top:9vw;}
  #plantwalk #first .about .img{width:45.3vw;} 
  #plantwalk #first .about .txt{margin-top:-5.3vw;padding:8vw 5.3vw 5.3vw;border-radius:4vw;}
  #plantwalk #first .about .txt .note{font-size:3.5vw;}
  #plantwalk #first .c-notice{margin-top:4vw;}

  #plantwalk #present .caption{margin-bottom:6.7vw;}
  #plantwalk #present .img{margin-bottom:6.7vw;}
  #plantwalk #present .bonus{margin-top:10.7vw;}
  #plantwalk #present .bonus figure{margin-top:10.7vw;}
  #plantwalk #present .bonus figure img{width:77.3vw;}
  #plantwalk #present .bonus .c-link{margin-top:8vw;}

  #plantwalk #ranking .img{margin-top:5.3vw;}
  #plantwalk #ranking .img img{width:45.3vw;}

  #plantwalk #start .caption{margin-bottom:4vw;padding-top:16vw;font-size:4.3vw;}
  #plantwalk #start .caption::before{width:8.5vw;height:12.5vw;}
  #plantwalk #start .download{margin-top:4vw;padding:5.3vw 0;}
  #plantwalk #start .download .heading{margin-bottom:2.7vw;font-size:5.6vw;}
  #plantwalk #start .download .heading small{font-size:4vw;}
  #plantwalk #start .download .store-links{justify-content:space-between;}
  #plantwalk #start .download .store-links img{height:13.4vw;}

  #plantwalk #setting{padding-bottom:18.7vw;}
  #plantwalk #setting .stepwrap .step{padding-top:16vw;}
  #plantwalk #setting .stepwrap .step::before{padding:2.7vw 8vw;font-size:4.8vw;border-radius:0 8vw 8vw 0;}
  #plantwalk #setting .stepwrap .step + .step{margin-top:18.7vw;}
  #plantwalk #setting .stepwrap .step .howto{margin-top:10.7vw;padding:4vw;}
  #plantwalk #setting .stepwrap .step .howto ul{margin-top:4vw;}
  #plantwalk #setting .c-notice{margin-top:8vw;}
}

/* --------------------------------------------------- */
/* animation */
/* --------------------------------------------------- */
.wow.animated{opacity: 0}
.animated.slide-up{-webkit-animation:slideUp ease .75s;animation:slideUp ease .75s}
.animated.smallbig{-webkit-animation:smallbig ease .75s;animation:smallbig ease .75s}
@-webkit-keyframes smallbig{
0%{-webkit-transform:scale(.75);transform:scale(.75);opacity:0}
100%{-webkit-transform:scale(1);transform:scale(1);opacity: 1}
}
@keyframes smallbig{
0%{-webkit-transform:scale(.75);transform:scale(.75);opacity:0}
100%{-webkit-transform:scale(1);transform:scale(1);opacity: 1}
}
@-webkit-keyframes slideUp{
0%{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}
100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
}
@keyframes slideUp{
0%{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}
100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
}