@charset"UTF-8";

/* 
***********************************************************
* Copyright(C) CIDARIO Inc.
* URI:http://cidario.co.jp
* Editor:Hiromi Yoshino
***********************************************************
*/

/* article
========================================================================================================
*/

/*----------------------------------------
                howto-rs
-----------------------------------------*/

#howto-rs section section{
  margin:0 0 30px 0;
}

@media print, screen and (min-width:960px) { 
#howto-rs section section{
  margin:0 0 50px 0;
 }
}

/*------- div --------*/

#howto-rs section section div{
  width:95%;  
  border-bottom:1px dotted #777;
  padding:0 15px 15px 15px;
  margin:30px auto 0 auto;
}


@media print, screen and (min-width:960px) { 
 #howto-rs section section div{  
    width:100%;
    padding:0 30px 50px 30px;
    margin:50px 0 0 0;
  }
}

#howto-rs section section div:last-of-type{ 
  border-bottom:none;
}

/*------- h3 --------*/

#howto-rs h3{ 
  position: relative;
  font-size:1.8rem;
  font-weight: 700; 
  line-height: 1.3em;
  padding:0 0 0 32px;
  margin:0;
}

@media print, screen and (min-width:640px) { 
#howto-rs h3{
  font-size:1.8rem;
 }
}

#howto-rs #howto01 h3::before{
  content: "";
  width:24px;
  height: 24px;
  position: absolute;
  top:0;
  left:0;
}

#howto-rs #howto01 .howto01-01 h3::before{
  background: url("/common/images/num01.png") no-repeat 0 0;
  background-size: 100%;
}

#howto-rs #howto01 .howto01-02 h3::before{
  background: url("/common/images/num02.png") no-repeat 0 0;
  background-size: 100%;
}

#howto-rs #howto01 .howto01-03 h3::before{
  background: url("/common/images/num03.png") no-repeat 0 0;
  background-size: 100%;
}


#howto-rs #howto02 h3::before{
  content: "";
  width:24px;
  height: 24px;
  background: url("/common/images/icon13.png") no-repeat 0 0;
  position: absolute;
  top:0;
  left:0;
}

/*------- p --------*/

#howto-rs #main-contents #howto01 p,
#howto-rs #main-contents #howto02 p{
  width:100%;
  line-height:1.8em;
  padding:0;
  margin:25px 0 0 0;
}


#howto-rs #main-contents #howto01 p span.cap,
#howto-rs #main-contents #howto02 p span.cap{
  position: relative;
  display: block;
  width:100%; 
  font-size:1.4rem;
  line-height:1.8em;
  padding: 0 0 0 20px;
  margin: 10px 0 0 0;
}

@media print, screen and (min-width:640px) { 
#howto-rs #main-contents #howto01 p span.cap,
#howto-rs #main-contents #howto02 p span.cap{
  font-size:1.6rem;
  padding: 0 0 0 20px;
  margin: 0 0 0 0;
  }
}

#howto-rs #main-contents #howto01 p span.cap::before,
#howto-rs #main-contents #howto02 p span.cap::before{
  content: "※";
  position: absolute;
  top:0;
  left:0;
}

div.howto-rs-btn{
  width:100%;
  margin:40px auto 40px auto;
}

aside.howto-rs-btn{ 
  width:100%;
  margin:0 auto 40px auto;
}

@media print, screen and (min-width:640px) { 
div.howto-rs-btn{
  width:100%;
  margin: 40px auto 60px auto;
}

aside.howto-rs-btn{ 
  width:100%;
  margin:0 auto 80px auto;
  }
}

.howto-rs-btn a{
  width:75%;
  max-width: 320px;
  height: 70px;
  background: #FFF;
  border: 3px solid #6DC50E;
  border-radius: 5px;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;  
  font-size: 1.6rem;
  line-height: 1.5em;
  font-weight: 700;
  color: #6DC50E;
  text-align: center;
  text-decoration: none;
  margin: 0 auto;
  transition: 0.8s;
}

@media print, screen and (min-width:640px) { 
.howto-rs-btn a{
  width:90%;
  max-width: 420px;
  height: 90px; 
  font-size: 1.8rem;
  }
}

.howto-rs-btn a:hover{
  background:#6DC50E;
  color: #FFF;
}

.howto-rs-btn a span{
  display: block;
  font-size: 1.3rem;
}

@media print, screen and (min-width:640px) { 
  .howto-rs-btn a span{
  font-size: 1.4rem;
  }
}

/*----------------------------------------
                 howto01
-----------------------------------------*/

#howto-rs #howto01 .howto01-01 ul{
  background: #EEE;
}

#howto-rs #howto01 .howto01-01 ul{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  column-gap: 20px;
  padding: 30px 20px;
  margin: 30px auto 0 auto;
}

#howto-rs #howto01 .howto01-01 ul li.app01{
  display: none;
}

@media print, screen and (min-width:640px) { 
#howto-rs #howto01 .howto01-01 ul li.app01{
  display: block;
  width: 100px;
  }
}

#howto-rs #howto01 .howto01-01 ul li.app02{
  width: 136px;
}

#howto-rs #howto01 .howto01-01 ul li.app03{
  width: 168px;
}

#howto-rs #howto01 .howto01-01 ul li img{
  display: block;
  width: 100%!important;
}


#howto-rs #howto01 .howto01-02 figure{
  width:100%;
  max-width: inherit;
  background: #EEE;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  margin: 30px auto 0 auto;
}

#howto-rs #howto01 .howto01-02 figure img{
  display: block;
  width: 100%;
  max-width: 240px;
}

@media print, screen and (min-width:640px) { 
#howto-rs #howto01 .howto01-02 figure img{
  display: block;
  width: 100%;
  max-width: 290px;
  }
}

#howto-rs #howto01 .howto01-03 ul{
  counter-reset: number 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 1px;
  justify-content: center;
  margin: 30px 0 0 0;
}

#howto-rs #howto01 .howto01-03 ul li{
  position: relative;
  background: #EEE;
  padding: 30px 0 20px 0;
  z-index: 100;
}

#howto-rs #howto01 .howto01-03 ul li:not(:first-child)::after{
  content: "";
  width:15px;
  height: 10px;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  background: #6eb92b;
  position: absolute;
  top:50%;
  left: -5px;
  transform: translateY(-50%);
  z-index: 101;
}

@media print, screen and (min-width:640px) {
#howto-rs #howto01 .howto01-03 ul li:not(:first-child)::after{
  content: "";
  width:20px;
  height: 15px;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  background: #6eb92b;
  position: absolute;
  top:50%;
  left: -10px;
  transform: translateY(-50%);
  z-index: 101;
  }
}

#howto-rs #howto01 .howto01-03 ul li span{
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #313140;
  text-align: center;
}

@media print, screen and (min-width:640px) { 
#howto-rs #howto01 .howto01-03 ul li span{
  font-size: 1.8rem;
  }
}

#howto-rs #howto01 .howto01-03 ul li figure{
  width: 45px;
  height: 45px;
  margin: 15px auto 0 auto;
}

@media print, screen and (min-width:640px) {
#howto-rs #howto01 .howto01-03 ul li figure{
  width: 65px;
  height: 65px;
  margin: 30px auto 0 auto;
  }
}

#howto-rs #howto01 .howto01-03 ul li figure::after{ 
  counter-increment: number 1;
  content: counter(number) " ";
  font-family: "Times New Roman", serif;
  font-size: 4.8rem;
  color: #CCC;
  position: absolute;
  bottom: -24px;
  right: 20px;
}

@media print, screen and (min-width:640px) {
#howto-rs #howto01 .howto01-03 ul li figure::after{ 
  font-size: 7.2rem;
  position: absolute;
  bottom: -34px;
  right: 20px;
  }
}

#howto-rs #howto01 .howto01-03 figure img{
  display: block;
  width: 100%;
  max-width: 290px;
}

/*----------------------------------------
                 howto02
-----------------------------------------*/

#howto-rs #howto02 .howto02-02 dl{
  width:100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 1px 1px;
  background: #CCC;
  border: 1px solid #CCC;
  margin:20px 0 0 0;
}

@media print, screen and (min-width:960px) { 
#howto-rs #howto02 .howto02-02 dl{
  margin:30px 0 0 0;
 }
}

#howto-rs #howto02 .howto02-02 dl dt{
  background: #EEE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

#howto-rs #howto02 .howto02-02 dl dd{
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

#howto-rs #howto02 .howto02-02 dl dd,
#howto-rs #howto02 .howto02-02 dl dt{
  font-size: 1.4rem;
  line-height: 1.5em;
  text-align: center;
  padding: 0 10px;
}

@media print, screen and (min-width:640px) {
#howto-rs #howto02 .howto02-02 dl dd,
#howto-rs #howto02 .howto02-02 dl dt{
  font-size: 1.6rem;
  }
}