@charset"UTF-8";

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

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

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

article#howto section section{
  margin:0 0 30px 0;
}

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

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

article#howto section section div{
  width:90%;
  border-bottom:1px dotted #777;
  padding:0 15px 15px 15px;
  margin:0 auto 20px auto;
}

article#howto section section div:last-child{
  border-bottom:none;
  padding:0 15px;
  margin:0 auto;
}

@media print, screen and (min-width:960px) { 
  article#howto section section div{  
    width:100%;
    padding:0 20px 25px 20px;
    margin:0 0 35px 0;
  }
  
  article#howto section section div:last-child{
   border-bottom:none;
   padding:0 20px;
   margin:0 auto;
 }
}

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

article#howto section section h3{
  line-height:150%;
  font-size:18px; font-size:1.8rem;
  font-weight: 700;
  padding:0 0 0 30px;
  margin:0 0 10px 0;
}

@media print, screen and (min-width:640px) { 
 article#howto section section h3{
  height:30px;
  line-height:28px;
  font-size:20px; font-size:2.0rem;
  margin:0 0 15px 0;
 }
}

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

article#howto section section p{
  width:100%;
  line-height:175%;
  padding:0;
  margin:0 0 15px 0;
}

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

section#howto01 div.how01-1 h3{
  background:url(/common/images/num01.png) no-repeat 0 3px;
}

section#howto01 div.how01-2 h3{
  background:url(/common/images/num02.png) no-repeat 0 3px;
}

section#howto01 div.how01-3 h3{
  background:url(/common/images/num03.png) no-repeat 0 3px;
}

section#howto01 div.how01-4 h3{
  background:url(/common/images/num04.png) no-repeat 0 3px;
}

section#howto01 div.how01-1 ul{
  width:100%;
  background-color:#F4F4F4;
  padding:25px 0;
  margin:0 0 15px 0;
}

@media print, screen and (min-width:960px) { 
 section#howto01 div.how01-1 ul{
  padding:25px 0;
 }
}

/*section#howto01 div.how01-1 ul li{
  font-size:16px; font-size:1.6rem;
  text-align:center;
  line-height:35px;
  padding:0;
  margin:0 auto 10px auto;
}

@media print, screen and (min-width:960px) { 
 section#howto01 div.how01-1 ul li{
  width:240px;
  height:50px;
  display:inline-block;
  font-size:18px; font-size:1.8rem;
  text-align:center;
  line-height:52px;
  margin:0 10px;
 }
}*/

section#howto01 div.how01-1 ul  a{
  position: relative;
  display: block;
  width:240px;
  height: 50px;
  margin: 0 auto;
}

section#howto01 div.how01-1 ul  span{
  width: 100%;
  font-size: 16px; font-size: 1.6rem;
  line-height: 100%;
  text-align: center;
  position: absolute;
  top:50%;
  left:0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

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


section#howto02 div h3{
  background:url(/common/images/icon13.png) no-repeat 0 3px;
}

section#howto02 div.how02-01 dl{
  background-color:#F4F4F4;
  text-align:center;
  padding:20px 0;
}

section#howto02 div.how02-01 dl dt{
  width:90%;
  font-size:13px; font-size:1.3rem;
  font-weight:700;
  line-height:150%;
  color:#FF0000;
  margin:0 auto 15px auto;
}

@media print, screen and (min-width:960px) { 
 section#howto02 div.how02-01 dl dt{
  font-size:16px; font-size:1.6rem;
  margin:0 auto 5px auto;
 }
}

section#howto02 div.how02-01 dl dd{
  width:90%;
  font-size:12px; font-size:1.2rem;
  font-weight:700;
  line-height:150%;
  color:#3F3F51;
  margin:0 auto;
}

@media print, screen and (min-width:960px) { 
 section#howto02 div.how02-01 dl dd{
  font-size:13px; font-size:1.3rem;
 }
}

/*------- contract --------*/

section#howto02 div.how02-02 dl.contract{
  width:100%;
  border:1px dashed #999;
  text-align:left;
  padding:15px 20px;
  margin:10px 0 0 0;
}

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

section#howto02 div.how02-02 dl.contract dt{
  position: relative;
  display:block;
  font-weight:bold;
  line-height:130%;
  padding:0 0 0 35px;
  margin:10px 0 20px 0;
}

div.how02-02 dl.contract dt a{
  color:#333;
  text-decoration:underline;
}

div.how02-02 dl.contract dt a:hover{
  color:#999;
  text-decoration:none;
}

div.how02-02 dl.contract dt:before{
  position: absolute;
  content: "";
  top: 50%;
  left: -5px;
  width: 32px;
  height: 40px;
  margin-top: -17px;
  background: url(/common/images/icon-pdf.png) no-repeat top left;
  background-size: 32px 31px;
}

div.how02-02 dl.contract dd{
  font-size: 14px; font-size: 1.4rem;
  line-height:150%;
}

@media print, screen and (min-width:960px) {
  div.how02-02 dl.contract dd{  
    font-size: 16px; font-size: 1.6rem;
  }
}

/*----------------------------------------
                 howto03
-----------------------------------------*/

section#howto03 div h3{
  background:url(/images/howto/howto08.png) no-repeat 0 3px;
}

section#howto03 div dl{
  width:100%;
  border-top:1px solid #CCC;
  border-left:1px solid #CCC;
  border-right:1px solid #CCC;
  margin:20px 0 10px 0;
}

@media print, screen and (min-width:960px) { 
 section#howto03 div dl{
  margin:30px 0 20px 0;
 }
}

section#howto03 div dl:after{
	display:table;
	content:"";
	clear:both; 
}

section#howto03 div dt{
  width:40%;
  height:50px;
  float:left;
  background-color:#F4F4F4;
  border-bottom:1px solid #CCC;
  font-size: 14px; font-size: 1.4rem;
  line-height:50px;
  padding:0 0 0 0;
  text-align: center;
  font-weight: 700;
  clear:both;
}

@media print, screen and (min-width:960px) { 
 section#howto03 div dt{
   height:70px;
   line-height:70px;
   font-size: 16px; font-size: 1.6rem;
 }
}

section#howto03 div dd{
  width:60%;
  height:50px;
  float:left;
  border-bottom:1px solid #CCC;
  font-size: 14px; font-size: 1.4rem;
  line-height:50px;
  text-align:center;
}

@media print, screen and (min-width:960px) { 
  section#howto03 div dd{
    height:70px;
    line-height:70px;
    font-size: 16px; font-size: 1.6rem;
 }
}

/*----------------------------------------
                 howto04
-----------------------------------------*/

section#howto04{
  margin:0 0 20px 0;
}

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

section#howto04 h2.title01{
  pading:0;
  margin:0;
}

section#howto04 ul{
  width:100%;
  background-color:#F4F4F4;
  padding:20px 0;
  margin:0;
}

@media print, screen and (min-width:960px) { 
 section#howto04 ul{
  width:690px;
  padding:30px 0 30px 40px;
  margin:0;
 }
}

section#howto04 ul li{
  width:80%;
  height:50px;
  line-height:50px;
  padding:0;
  margin:0 auto 5px auto;
}

@media print, screen and (min-width:960px) { 
 section#howto04 ul li{
  width:295px;
  height:50px;
  float:left;
  margin:0 20px 10px 0;
 }
}

section#howto04 ul li a{
  width:100%;
  height:50px;
  display:block;
  background:url(/common/images/icon-pdf.png) no-repeat 15px 10px #FFF;
  border-bottom:1px solid #CCC;
  border-right:1px solid #CCC;
  font-size:14px; font-size:1.4rem;
  color:#000;
  text-decoration:none;
  padding:0 0 0 65px;
}

@media print, screen and (min-width:960px) { 
 section#howto04 ul li a{
  width:295px;
  height:50px;
  display:block;
  background:url(/common/images/icon-pdf.png) no-repeat 15px 10px #FFF;
  font-size:16px; font-size:1.6rem;
  color:#000;
  text-decoration:none;
  padding:0 0 0 65px;
 }
}

section#howto04 ul li a:hover{
  background:url(/common/images/icon-pdf.png) no-repeat 15px 10px #F9F9DB;
}

section#howto02 ul.cap,
section#howto03 ul.cap{
  margin: 0 0 30px 0;
}

section#howto01 ul.cap li,
section#howto02 ul.cap li,
section#howto03 ul.cap li{
  font-size: 12px; font-size: 1.2rem;
  line-height: 150%;
  margin: 0 0 5px 0;
}

@media print, screen and (min-width:640px) { 
  section#howto01 ul.cap,
  section#howto02 ul.cap,
  section#howto03 ul.cap{
    margin: 0 0 30px 0;
  }

  section#howto01 ul.cap li,
  section#howto02 ul.cap li,
  section#howto03 ul.cap li{
    font-size: 14px; font-size: 1.4rem;
    margin: 0 0 5px 0;
  }
}

section#howto01 img.howto-img01{
  display: block;
  width:90%;
  margin:30px auto;
}

@media print, screen and (min-width:640px) { 
  section#howto01 img.howto-img01{
   width:100%;
   max-width: 440px;
   margin:30px auto;
  }
}

section#howto02 img.howto-img02{
  display: block;
  width:80%;
  margin:30px auto;
}

@media print, screen and (min-width:640px) { 
  section#howto02 img.howto-img02{
   width:100%;
   max-width: 324px;
   margin:30px auto;
  }
}

section#howto02 img.howto-img03{
  display: block;
  width:100%;
  max-width:635px;
  margin:45px auto 50px auto;
}

/*----------------------------------------
                howto-notice
-----------------------------------------*/
.howto-notice{
  width:100%;
}

article#howto section section div.how02-01{
  border-bottom: none;
  margin: 0 auto;
}

article#howto section section .howto-notice h3{
  width:100%;
  height: 70px;
  background: #FF0000;
  font-size: 1.8rem;  
  color: #FFF;
  letter-spacing: 0.05em;
  line-height: 150%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 ;
}

@media print, screen and (min-width:640px) {
article#howto section section .howto-notice h3{
  width:100%;
  height: 90px;
  font-size: 2.4rem;
  line-height: 100%;
  }
}

article#howto section section .howto-notice h3 + p{
  font-size: 1.8rem;
  text-align: center;
  font-weight: 600;
  margin:40px auto 30px auto;
}

@media print, screen and (min-width:640px) {
article#howto section section .howto-notice h3 + p{
  font-size: 2.0rem;
  margin:50px auto 40px auto;
  }
}

article#howto section section .howto-notice h3 + p span{
  color: #FF0000;
}

article#howto section section .howto-notice a{
  display: flex;
  align-items: center;
  justify-content: center;
  width:140px;
  height: 36px;
  border-radius: 18px;
  border: 2px solid #999;  
  text-decoration: none;
  margin: 0 auto;
  transition: 0.5s;
}
article#howto section section .howto-notice a:hover{
  border: 2px solid #404051;
}

article#howto section section .howto-notice a span{
  font-size: 1.4rem;
  color: #999;
  font-weight: bold;  
  transition: 0.5s;
}

article#howto section section .howto-notice a:hover span{
  color: #404051;
}

article#howto section section .howto-notice p.howto-notice-ttl{
  width:100%;
  height: 40px;
  background: #404051;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px   0 0 0;
}

@media print, screen and (min-width:640px) {
article#howto section section .howto-notice p.howto-notice-ttl{
  width:100%;
  height: 50px;
  margin: 60px 0 0 0;
  }
}

article#howto section section .howto-notice p.howto-notice-ttl span{
  font-size: 1.6rem;
  color: #FFF;
}

@media print, screen and (min-width:640px) {
article#howto section section .howto-notice p.howto-notice-ttl span{
  font-size: 1.8rem;
  color: #FFF;
  }
}

article#howto section section .howto-notice .howto-notice-detail{
  width:100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  background: #CCC;
  column-gap: 1px;
  border: 1px solid #CCC;
  padding: 0;
}

@media print, screen and (min-width:640px) { 
article#howto section section .howto-notice .howto-notice-detail{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  }
}

article#howto section section .howto-notice .howto-notice-detail dl{  
  background: #FFF;
  height: 100%;
}

article#howto section section .howto-notice .howto-notice-detail dl dt{
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: #EEE;
  font-size: 1.6rem;
  color: #414151;
  font-weight: 700;
  margin: 0;
}
@media print, screen and (min-width:640px) {
article#howto section section .howto-notice .howto-notice-detail dl dt{
  height: 100px;
  font-size: 1.8rem;
  }
}

article#howto section section .howto-notice .howto-notice-detail dl dt span{
  font-size: 1.4rem;
  margin: 5px 0 0 0;
}

article#howto section section .howto-notice .howto-notice-detail dl dd{
  padding: 30px;
}

article#howto section section .howto-notice .howto-notice-detail dl dd img{
  display: block;
  width:90%;    
  margin: 0 auto;
}

@media print, screen and (min-width:640px) {
article#howto section section .howto-notice .howto-notice-detail dl dd img{
  width:100%;  
  max-width: 310px;
  }
}