@charset "utf-8";
body{
  background:url("../img/howto/bg_dotted.jpg");
  background-repeat: repeat;
  background-size: 80px 80px;
}
.backLnk{
  font-size:19px;
  color:#3c3c3c;
  margin:45px 50px;
}
.backLnk a::before{
  position:relative;
  top:3px;
  left:0;
  content:'';
  display:inline-block;
  background:url("../img/howto/nav_arrow.svg");
  background-size:100%;
  width:19px;
  height:19px;
  margin-right:8px;
}
.backLnk a:visited,
.backLnk a:hover{
  color: #3c3c3c;
}
.secBlk .logo{
  width:160px;
  margin:25px auto;
}
.wrap{
  width:1000px;
  margin:0 auto 65px;
  text-align:center;
}
.pageTtl{
  font-size:55.83px;
  color:#00a791;
  font-weight: 600;
  line-height:1;
  margin-top:-5px;
  margin-bottom:25px;
}
.pageTtl::before{
  position:relative;
  top:5px;
  left:0;
  content:'';
  display:inline-block;
  background:url("../img/howto/title_img.svg");
  background-size:100%;
  width:106px;
  height:109px;
  margin-right:10px;
}
.copy{
  font-size:20px;
  color:#3c3c3c;
  font-weight:500;
  margin-bottom:95px;
}
.mov-wrap{
  display:flex;
  justify-content: space-between;
  flex-wrap:wrap;
}
.mov-wrap .mov{
  width:320px;
  background-color:#fff;
  margin-bottom:58px;
  box-shadow: 0 3px 3px rgba(0,0,0,0.1);
  border-radius: 40px;
}
.mov-wrap .mov .movTtl{
  color:#fff;
  background-color:#00a791;
  font-size:20px;
  font-weight: 500;
  line-height:75px;
  height:75px;
  border-radius: 40px 40px 0 0;
  border-bottom:1px solid #fff;
}
.mov-wrap .mov .txt{
  color:#3c3c3c;
  background-color:#fff;
  font-size:14px;
  font-weight: 400;
  line-height:70px;
  height:70px;
  border-radius: 0 0 40px 40px;
}
.mov-wrap .mov.wide{
  width:1000px;
  margin-bottom:65px;
  display:flex;
  justify-content: center;
  flex-wrap:wrap;
}
.mov-wrap .mov.wide .movTtl{
  width:1000px;
  margin-bottom:15px;
}
.mov-wrap .mov.wide:last-child .movTtl{
  background-color:#ff9e18;
}
.mov-wrap .mov.wide a{
  width:314px;
  margin-right:15px;
}
.mov-wrap .mov.wide a:last-child{
  margin-right:0;
}
.mov-wrap .mov.wide:last-child{
  margin-bottom:77px;
}
.mov-wrap .mov a.none{

	pointer-events: none;
}
.backBtn{
  position:relative;
  width:422px;
  margin:0 auto;
}
.backBtn a{
  height:61px;
  line-height:1;
  padding-top:20px;
  display:block;
  font-size:14px;
  font-weight: 500;
  color:#00a791;
  background-color:#fff;
  border:2px solid #00a791;
  box-sizing:border-box;
  border-radius:29px;
}
.backBtn a::before{
  position:absolute;
  top:20px;
  left:25px;
  content:'';
  display:inline-block;
  background:url("../img/howto/btn_arrow.svg");
  background-size:100%;
  width:22px;
  height:22px;
}
.remodal-overlay{
  background-color:rgba(0,0,0,.9);
}
.remodal-wrapper{
  top:50%;
  transform: translate(0,-50%);
  overflow: visible;
}
.remodal{
  width:640px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.remodal iframe{
  /*opacity:0;*/
}
.remodal-close {
  width:auto;
  height: auto;
  top: -45px;
  right:0;
  font-size:16.5px;
  color:#fff;
}
.remodal-close::before {
  background: none;
}
.remodal-close::after {
  background: url("../img/howto/md_btn_close.svg") no-repeat center/contain;
  position:relative;
  content:'';
  display:inline-block;
  top: 2px;
  left: 0;
  width: 71px;
  height: 14px;
  margin-left:0;
}
iframe{
  border:0;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.movWrap{
	position: absolute;
	top: 0;
	opacity: 0;
	z-index: -1;
	width: 360px;
	height: auto;
}

@media screen and (max-width: 768px) {
  .backLnk{
    font-size:5.12vw;
  }
  .secBlk .logo{
    display:none;
  }
  .wrap{
    width:100%;
    margin:29.333% auto 8%;
  }
  .pageTtl{
    font-size:8.642vw;
    margin-top:0;
    margin-bottom:5.333%;
  }
  .pageTtl::before{
    top:0;
    display:block;
    width:25.467vw;
    height:25.867vw;
    margin:0 auto 5.333%;
  }
  .copy{
    font-size:3.467vw;
    margin-bottom:12%;
  }
  .mov-wrap{
    display:block;
    width:83.6%;
    margin:0 auto;
  }
  .mov-wrap .mov{
    width:100%;
    margin-bottom:9.333%;
  }
  .mov-wrap .mov .movTtl{
    font-size:5.333vw;
    line-height:20vw;
    height:20vw;
  }
  .mov-wrap .mov .txt{
    font-size:3.733vw;
    line-height:18.933vw;
    height:18.933vw;
  }
  .mov-wrap .mov.wide{
    width:100%;
    margin-bottom:9.333%;
    display:block;
  }
  .mov-wrap .mov.wide .movTtl{
    width:100%;
    margin-bottom:0;
  }
  .mov-wrap .mov.wide a{
    width:100%;
    margin-right:0;
  }
  .mov-wrap .mov.wide:last-child{
    margin-bottom:20%;
  }
  .backBtn{
    width:83.6%;
  }
  .backBtn a{
    height:16vw;
    padding-top:7.177%;
    padding-left:4.905%;
    font-size:3.2vw;
    border-radius:58px;
  }
  .backBtn a::before{
    top:33.333%;
    left:7.177%;
    width:5.6vw;
    height:5.6vw;
  }
  .remodal{
    width:92%;
  }
  .remodal-close {
    margin:0;
    top: -7vw;
  }
}