@charset "UTF-8";

.pc-img { display: block; }

.sp-img { display: none; }

ul,
li { list-style: none; }

.clear-fix:after {
  content: '';
  display: block;
  clear: both;
}

 h2, h3 { text-align: center; }

 .content-plan h2 {
   border-bottom: 1px #b8b8b8 solid;
   margin: 0 0 60px 0;
   padding: 0 0 38px 0;
}

.content-plan h2 img { margin: 88px auto 0; }

.plan-box01 { 
  margin: 45px auto 0px;
  padding: 0 0 53px 0;
  border-bottom: 1px #b8b8b8 solid;
 }

.plan-box01 img {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.plan-box02 h3 {
  border-top: 1px solid #b8b8b8;
}
.plan-box02 h3:first-of-type {
  border: none;
}
.plan-box02 h3 img { margin: 70px auto 35px; }

.cell-box02 {
  margin: 0 auto 60px;
}
.cell-box02 p {
  font-size: 11px;
  margin: 40px 0 80px;
  text-align: center;
}
.cell-box02 p.list-draw {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.cell-box02 img {
  max-width: 100%;
  margin: 0 auto;
}


.plan-box03 {
  border-top: 1px solid #cacaca; 
  border-bottom: 1px solid #cacaca;
  margin-bottom: 41px; 
 }

.plan-box03 h3 img { margin: 73px auto 0; }

.plan-box03 .contain{
	width: 850px;
	margin: 0 auto;
}

.list-draw {
  max-width: 100%;
  margin: 46px auto 61px;
  padding: 0;
}

.list-draw li {
  float: left;
  margin-right: 25px;
  margin-bottom: 25px;
}

.list-draw li:nth-child(3),
.list-draw li:nth-child(6) { margin-right: 0; }
.list-draw li:last-child {
  width: 100%;
  text-align: center;
  margin-right: 0;
}

.list-draw li a img { width: 266px; }

.draw02 {
  max-width: 895px;
  margin: 30px auto 118px; 
 }

.draw02 p {
  display: inline-block;
  float: left;
}

.draw02 p.plan_pc { 
  display: block;
  width: 100%;
  text-align: center;
}

.draw02 p.text-plan {
  text-align: left;
  margin-left: 37px;
  font-size: 14px;  
}

.draw02 p.plan_pc img { margin: 0 auto; text-align: center;}

.draw02 p.plan_sp { display: none; width: 100%;}

.draw02 p.plan_sp img { margin: 0 auto; }

.txt-pic { margin: 0 auto; }

.draw02 p.text-plan { margin-top: 5px; }

@media screen and (min-width: 641px) and (max-width: 1024px) {

 .plan-box01 > .draw01-box02 {
    width: 338px;
    float: right;
  }
  
  .plan-box01 img,
  .cell-box02 img {
    width: 675px;
    height: auto;
    margin: 0 auto;
  }
  
  .draw02 img { max-width: 100%; } 
  
  
  .plan-box02 h3 img { margin: 46px auto 20px; }
  
  .plan-box03 {
    width: 100%;
    margin: 0 auto 41px;
  }
  
  .plan-box03 h3 img { margin: 56px auto 0; }
	.plan-box03 .contain{
		width:556px;
	}
  .list-draw li:nth-child(3) {
	margin-right: 24px;
	}
  
  .list-draw li {
    margin-right: 24px;
    margin-bottom: 25px;
  }
  
  .list-draw li:nth-child(2n) { margin-right: 0; }
　.list-draw li:nth-child(3) { margin-right: 24px;}
  .list-draw li:last-child {
    width: auto;
  }

  
  .draw02 {
    width: calc( ( 100% - 581px ) /3 + 581px );
    margin: 39px auto 51px auto;
  }
  
  .draw02 p:first-child { margin-right: 0; }
  
  .draw02 p:nth-child(2),
  .draw02 p:last-child { width: 232px; }
  
  .draw02 p.text-plan {
    width: 100%;
    text-align: left;
    margin: 24px 0 0 55px
  }
  
  .list-draw { margin: 27px auto 69px; }

}

@media screen and (max-width: 640px) {
  
  .sp-img { display: block; }
  
  .pc-img { display: none; }
  
   .content-plan h2 {
     border-bottom: 1px #b8b8b8 solid;
     margin: 0 0 40px 0;
     padding: 0 0 28px 0;
  }

  .content-plan h2 img { margin: 59px auto 0; }
  
  .plan-box01 {
    width: calc(100% - 60px);
    margin: 46px auto 0 auto;
  }
  
  .plan-box01 {
    padding: 0 0 0px 0;
   }
  
  .plan-box01 > div {
    float: none;
    width: 100%;
  }
  
  .plan-box01 p,
  .list-draw li img,
  .draw02 p img { margin: 0 auto; }
  
  .draw01-box01 { margin-bottom: 43px; }
  
  .draw01-box01 p:first-child { width: 169px; }
  
  .draw01-box01 p:last-child {  width: 261px; }
  
  .draw01-box02 p { width: 261px; }
  
  .plan-box01 img {
      width: 100%;
      height: auto;
  }
  
  .plan-box02 h3 img { margin: 46px auto 20px; }
  
  .cell-box02 {
    width: calc(100% - 50px);
    margin: 10px auto 60px auto;
  }
  
  .list-draw {
    margin: 36px 0 0 0; 
    text-align: center;
  }
	.plan-box03 .contain{
		width:100%;
	}
  .plan-box03 h3 img { margin: 51px auto 0; }
  
  .list-draw li {
    float: none;
    display: block;
    margin-right: 0;
    margin-bottom: 30px;
  }
	.list-draw li:last-child{
		margin-left: 0;
	}
  
  .draw02 {
    width: 100%;
    margin: 34px auto 77px auto;
    text-align: center;
  }
  
  .draw02 p {
    display: block;
    float: none;
  }
  
  .draw02 p:first-child {
    margin-right: 0;
    margin-bottom: 32px;
  }
  
  .draw02 p img { max-width: 480px; }
  
  .draw02 p.plan_pc { display: none; } 
  
  .draw02 p.plan_sp { display: block; }
  
  .list-draw li:first-child a img { margin: 0 auto; }
  
  .plan-box03 { margin: 0 20px 41px; }

  .list-draw { margin: 27px auto 65px; }
  
}