@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　road
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
main{
	padding-top: 0;
}

.marker{
	background:no-repeat linear-gradient(transparent 60%, #cdf283 60%);
	background-size: 0% 100%;
	transition-duration: .8s;  
}
.marker.mv{
	background-size: 100% 100%;
}
	
/*--------------------------------------------------------------------------
   Kv
---------------------------------------------------------------------------*/
#Kv{
	position: relative;
  display: flex;
  align-items: center;
  height: 45.208vw;
  margin-bottom: 80px;
  background: url(../../images/special/road/img_kv_pc.jpg) no-repeat right center;
  background-size: cover;
}
#Kv h1{
  margin-left: 19.62vw; 
}
#Kv h1 .en{
  display: block;
  width: 28.99vw;
  margin-bottom: 1.5vw; 
}
#Kv h1 .ttl{
  font-size: 1.9vw; 
}
#Kv h1 .ttl small{
  font-size: 1.52vw;
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* point
-----------------------------------------------------------------*/
.point{
  position: relative;
  display: flex;
}
.point h2{
  width: 19vw;
  padding: 0 20px;
  padding-top: 11.08vw;
  text-align: center;  
}
.point .point-main{
  width: 81vw  
}
.point .pic-main{
  position: absolute;
  top: 0;
  max-width: 632px;
  width: 40vw;  
}
.point .pic-main::before{
  position:absolute;
  top: 4.43vw;
  display: block;
  content: "";
  width: calc(100% - 2.85vw);
  height: 100%;
  background: #cbfc6a; 
}
.point .pic-main img{
  position: relative;
  z-index: 5;  
}
.point .txt-area{
  width: calc(100% - 21vw);
  padding-top: 11.08vw;  
}
.point .txt-area h3{
  position: relative;
  padding-bottom: 30px;
  margin-bottom: 35px;
  line-height: 1.2;
  font-size: 4.6rem;
  font-weight: bold;  
}
.point .txt-area h3 small{
  font-size: 70%;  
}
.point .txt-area h3::before{
  position:absolute;
  left: 0;
  bottom: 0;
  display: block;
  content: "";
  width: 130px;
  height: 4px;
  background: #000;   
}
.point .txt-area .txt{
  font-size: 2.2rem;
  line-height: 1.65;  
}

/* point01 */
.point01{
  margin-bottom: 200px;  
}
.point01 .point-main{
  padding-right: 19vw;  
}
.point01 .pic-main,
.point01 .pic-main::before{
  right: 0;  
}
.point01 .txt-area{
  margin: 0 40vw 8vw 0;
  padding-right: 20px;  
}
.point01 .check-list{
  display: flex;
  justify-content: space-between;
}
.point01 .check-list > li{
  width: 48%;
  padding: 25px 3% 15px;
  background: #fff;
  border: 1px solid #898989;
  box-shadow: 8px 6px 0 #898989;  
}
.point01 .check-list h4{
  margin-bottom: 35px;
  text-align: center;
  font-size: 3.2rem;
  line-height: 1.4;
  font-weight:  bold;
}
.point01 .check-list h4 small{
  display: block;
  font-size: 2.6rem;
  font-weight: normal;
}
.point01 .check-list h4  strong{
  font-size: 123%;  
}
.point01 .check-list ul li{
  padding: 10px 0 10px 50px;
  background: url(../../images/special/road/ico_check.svg) no-repeat left top 10px;
  background-size: 37px auto;
  font-size: 2.7rem;
  line-height: 1.4;  
}
.point01 .check-list ul li:nth-child(n+2){
  border-top: 2px dotted #000;  
}

/* point02 */
.point02{
  flex-direction: row-reverse;  
}
.point02 .point-main{
  padding-left: 19vw;  
}
.point02 .pic-main,
.point02 .pic-main::before{
  left: 0;  
}
.point02 .txt-area{
  margin: 0 0 8vw 21vw;
  padding-left: 20px;  
}
.point02 .rank-list{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-bottom: 160px;    
}
.point02 .rank-list h4{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 20px 5px 10px;
  line-height: 1;
  color: #fff;  
}
.point02 .rank-list h4 small{
  font-size: 2.1rem;
  line-height: 1.1; 
}
.point02 .rank-list h4 strong{
  padding: 0 3px;
 font-size: 7.8rem;
 line-height: .6;
 font-weight: normal; 
}
.point02 .rank-list h4 span{
  font-size: 3.6rem; 
}
.point02 .rank-list .ico{
  margin: 25px auto 20px;  
}
.point02 .rank-list .txt{
  padding: 0 15px 25px;
  font-size: 2.4rem;
  line-height: 1.4;  
}
.point02 .rank-list li{
  position: relative;
  width: calc((100% - 40px)/3);
  text-align: center;  
}
.point02 .rank-list li:nth-child(1){
  background: #f5f1e2;
  color: #846f00; 
}
.point02 .rank-list li:nth-child(1)::before{
  position:absolute;
  left: 50%;
  top: -15px;
  transform: translate(-50%,-100%);
  display: block;
  content: "";
  width: 70px;
  height: 54px;
  background: url(../../images/special/road/ico_crown.svg) no-repeat;
  background-size: 100% center;  
}
.point02 .rank-list li:nth-child(1) h4{
  background: #846f00;   
}
.point02 .rank-list li:nth-child(1) .ico{
  width: 81px;  
}
.point02 .rank-list li:nth-child(2){
  transform: translateY(45px);
  background: #efefef;
  color: #595757;  
}
.point02 .rank-list li:nth-child(2) h4{
  background: #595757;   
}
.point02 .rank-list li:nth-child(2) .ico{
  width: 78px;  
}
.point02 .rank-list li:nth-child(3){
  transform: translateY(90px);
  background: #f1e5da;
  color: #965217;  
}
.point02 .rank-list li:nth-child(3) h4{
  background: #965217;   
}
.point02 .rank-list li:nth-child(3) .ico{
  width: 99px;  
}
.point02 .point-box{
  position: relative;
/*  padding: 20px 15px;*/
  padding: 35px 45px;
  border: 3px solid #ea5514;
  text-align: center;
  color: #e83828;
  font-size: 2.2rem;
}
.point02 .point-box h4{
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-20%,-45%);
  width: 100px;  
}

/* point03 */
.point03 .point-main{
  padding-right: 19vw;  
}
.point03 .pic-main{
  right: 0;  
}
.point03 .txt-area{
  margin-bottom: 60px;
    width: 100%;
}
.point03 .type-list{
  margin-bottom: 150px;  
}
.point03 .type-list > li{
  clip-path: polygon(48px 0, 100% 0, 100% 100%, 0 100%, 0 45px);
}
.point03 .type-list > li > div{
  display: flex;
  background: #fff;
  clip-path: polygon(50px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 47px);
}
.point03 .type-list > li:nth-child(n+2){
  margin-top: 55px;  
}
.point03 .type-list .txt-area{
  display: flex;
  align-items: center;
  width: 62%;
  padding: 30px 4%;
  margin-bottom: 0;
}
.point03 .type-list .txt-area h4{
  margin-bottom: 20px;
  font-size: 4rem;
  line-height: 1.4;
}
.point03 .type-list .txt-area .txt{
  margin-bottom: 20px;
  font-size: 1.7rem;
  line-height: 1.5; 
}
.point03 .type-list .txt-area h5{
  margin-bottom: 10px;
  font-size: 2.2rem;  
}
.point03 .type-list .priority-rank li{
  display: flex;
  padding: 5px 15px;
  font-size: 2.8rem;  
}
.point03 .type-list .priority-rank li span:nth-child(1){
  margin-right: 8px;  
}
.point03 .type-list .priority-rank li:nth-child(n+2){
  margin-top: 10px;  
}
.point03 .type-list .pic{
  width: 38%;
  line-height: 0;  
}
.point03 .type-list .pic img{
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: cover;  
}

/* type01 */
.point03 .type-list .type01{
  background: #51bec1;   
}
.point03 .type-list .type01 .txt-area h4,
.point03 .type-list .type01 .priority-rank li span:nth-child(2){
  color: #51bec1;  
}
.point03 .type-list .type01 .priority-rank li{
  background: #dcf2f3;
}

/* type02 */
.point03 .type-list .type02{
  background: #59b659; 
}
.point03 .type-list .type02 .txt-area h4,
.point03 .type-list .type02 .priority-rank li span:nth-child(2){
  color: #59b659;  
}
.point03 .type-list .type02 .priority-rank li{
  background: #e5f3e5;
}


/* type03 */
.point03 .type-list .type03{
  background: #f4a145;
}
.point03 .type-list .type03 .txt-area h4,
.point03 .type-list .type03 .priority-rank li span:nth-child(2){
  color: #f4a145;  
}
.point03 .type-list .type03 .priority-rank li{
  background: #fdecda;
}


.point03 .both{
  margin-bottom: 150px;
  padding: 20px;
  background: #e60012;
  text-align: center;
  color: #fff;
  font-size: 4rem;  
}
.point03 .both .txt span.marker{
  padding-bottom: 2px;
   background:no-repeat linear-gradient(transparent 95%, #cdf283 95%);
   background-size: 0% 100%;  
}
.point03 .both .txt span.marker.mv{
  background-size: 100% 100%;
}

@media screen and (max-width: 1320px) {
    .point03 .both{
        font-size: 3.6rem;
    }
}
@media screen and (max-width: 1200px) {
    .point03 .both{
        font-size: 2.8rem;
    }
}





















/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

  main{
    padding-top: 0;
  }

    
/*--------------------------------------------------------------------------
   Kv
---------------------------------------------------------------------------*/
  #Kv{
    margin: 70px 0 30px;
  }
  #Kv h1{
    margin-left: 0; 
  }
  #Kv h1 .en{
    position: absolute;
    left: 15px;
    top: 0;
    transform: translateY(-50%);
    width: 26vw;
    margin-bottom: 0; 
  }
  #Kv h1 .ttl{
    position: absolute;
    right: 15px;
    top: 0;
    transform: translateY(-85%);
    font-size: 3vw; 
  }
  #Kv h1 .ttl small{
    font-size: 2.5vw;
  }


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* point
-----------------------------------------------------------------*/
  .point{
    display: block;
    padding: 0 20px;
  }
  .point h2{
    width: 100%;
    margin-bottom: 35px;
    padding: 0;
    text-align: left;  
  }
  .point h2 img{
    width: auto;
    height: 30px;  
  }
  .point .point-main{
    width: 100%;  
  }
  .point .pic-main{
    position: relative;
    top: 0;
    max-width: none;
    width: 100%;
    margin-bottom: 15vw;  
  }
  .point .pic-main::before{
    top: 8vw;
  }
  .point .txt-area{
    width: 100%;
    padding-top: 0;  
  }
  .point .txt-area h3{
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-size: 2rem;  
  }
  .point .txt-area h3::before{
    width: 65px;
    height: 2px;   
  }
  .point .txt-area .txt{
    font-size: 1.3rem;
    text-align: justify;  
  }

/* point01 */
  .point01{
    margin-bottom: 60px;  
  }
  .point01 .point-main{
    padding-right: 0;  
  }
  .point01 .txt-area{
    margin: 0;
    padding-right: 0;  
  }
  .point01 .check-list{
    display: block;
  }
  .point01 .check-list > li{
    width: 100%;
    padding: 20px 15px 15px;
    box-shadow: 5px 5px 0 #898989;  
  }
  .point01 .check-list > li:nth-child(n+2){
    margin-top: 30px;  
  }
  .point01 .check-list h4{
    margin-bottom: 20px;
    font-size: 2.2rem;
  }
  .point01 .check-list h4 small{
    display: block;
    font-size: 2rem;
    font-weight: normal;
  }
  .point01 .check-list h4  strong{
    font-size: 123%;  
  }
  .point01 .check-list ul li{
    padding: 10px 0 10px 30px;
    background: url(../../images/special/road/ico_check.svg) no-repeat left top 10px;
    background-size: 22px auto;
    font-size: 1.8rem; 
  }
  .point01 .check-list ul li:nth-child(n+2){
    border-top: 2px dotted #000;  
  }

/* point02 */
  .point02{
    margin-bottom: 50px;  
  }
  .point02 .point-main{
    padding-left: 0;  
  }
  .point02 .pic-main,
  .point02 .pic-main::before{
    left: 0;  
  }
  .point02 .pic-main{
    margin-bottom: 25vw;  
  }
  .point02 .txt-area{
    margin: 0 0 0;
    padding-left: 0;  
  }
  .point02 .rank-list{
    display: block;
    margin-bottom: 40px;    
  }
  .point02 .rank-list h4{
    padding: 15px 5px 10px;
  }
  .point02 .rank-list h4 small{
    font-size: 1.3rem;
    line-height: 1.2; 
  }
  .point02 .rank-list h4 strong{
   font-size: 5rem;
   line-height: .6;
   font-weight: normal; 
  }
  .point02 .rank-list h4 span{
    font-size: 2.5rem; 
  }
  .point02 .rank-list .ico{
    margin: 15px auto 5px;  
  }
  .point02 .rank-list .txt{
    padding: 0 10px 20px;
    font-size: 1.6rem;
    line-height: 1.4;  
  }
  .point02 .rank-list li{
    width: 100%;
  }
  .point02 .rank-list li:nth-child(1){
    margin-bottom: 20px;
  }
  .point02 .rank-list li:nth-child(1)::before{
    top: -8px;
    width: 40px;
    height: 32px;
  }
  .point02 .rank-list li:nth-child(1) .ico{
    width: 45px;  
  }
  .point02 .rank-list li:nth-child(2){
    transform: none;
    margin-bottom: 20px;
  }
  .point02 .rank-list li:nth-child(2) .ico{
    width: 42px;  
  }
  .point02 .rank-list li:nth-child(3){
    transform: none;
  }
  .point02 .rank-list li:nth-child(3) .ico{
    width: 52px;  
  }
  .point02 .point-box{
    padding: 15px 10px;
    border: 2px solid #ea5514;
    font-size: 1.4rem;
    line-height: 1.5;
  }
  .point02 .point-box h4{
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-20%,-45%);
    width: 50px;  
  }

/* point03 */
  .point03 .point-main{
    padding-right: 0;  
  }
  .point03 .pic-main{
    right: 0;  
  }
  .point03 .txt-area{
    margin-bottom: 35px;  
  }
  .point03 .type-list{
    margin-bottom: 40px;  
  }
  .point03 .type-list > li > div{
    display: block;
  }
  .point03 .type-list > li:nth-child(n+2){
    margin-top: 30px;  
  }
  .point03 .type-list .txt-area{
    display: block;
    width: 100%;
    padding: 40px 20px 20px;
    margin-bottom: 0;
  }
  .point03 .type-list .txt-area h4{
    margin-bottom: 15px;
    font-size: 2.6rem;
    line-height: 1.4;
  }
  .point03 .type-list .txt-area .txt{
    margin-bottom: 15px;
    font-size: 1.3rem;
    text-align: justify;
  }
  .point03 .type-list .txt-area h5{
    font-size: 1.6rem;  
  }
  .point03 .type-list .priority-rank li{
    padding: 5px 10px;
    font-size: 1.8rem;  
  }
  .point03 .type-list .priority-rank li span:nth-child(1){
    margin-right: 5px;  
  }
  .point03 .type-list .priority-rank li:nth-child(n+2){
    margin-top: 10px;  
  }
  .point03 .type-list .pic{
    width: 100%;
    padding: 0 20px 20px; 
  }
  .point03 .type-list .pic img{
    height: auto;  
  }
  
  
  .point03 .both{
    margin-bottom: 60px;
    padding: 15px;
    font-size: 1.4rem;  
  }






}