@charset "UTF-8";
/* CSS Document */

@font-face{
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-style:normal;
}

html{
  font-size: 62.5%; /* 62.5％ X 16px=10px */
}

body{
  color: #1c1c1c;
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 1.6rem;
  font-feature-settings: "palt" 1;
}

a{
  color: #1c1c1c;
}

img{
  max-width: 100%;
  height: auto;
}

.inner{
  max-width: 950px;
  margin: 0 auto;
}

.text-center{
  text-align: center;
}  

.sp_img{
  display: none;
}

.pc_br{
  display: none;
}



/*------------------ブランド------------------*/
.main>h1>img{
  width: 100vw;
  height: 100%;  
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.brand{
  padding: 120px 0;
  text-align: center;
}
.brand>li:nth-child(1){
  padding-bottom: 40px;  
  font-size: 9.2rem;
  font-weight: 900;
}
.brand>li:nth-child(2){
  padding-bottom: 70px;   
  font-size: 2.8rem;
  line-height: 1.9;
  margin: -12px 0;
  font-weight: 700;
}



/*------------------スライド画像------------------*/
.slick_item{
  padding-right: 20px;
}

.slider img{
  width: 100%; /*スライダー内画像横幅100%に*/
  height: auto;
	transition-duration: 0.5s;  
}
.slider img:hover{
	transform: scale(1.2);	
	transition-duration: 0.5s;	
}



/*------------------進化の軌跡------------------*/
.evo_title{
  padding: 15px 0; 
  font-size: 3.4rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: #1c1c1c; 
}

.evo_area{
  position: relative; /*--親--*/
}

.patt01{
  position: absolute; /*--子--*/
  top: 0;
  left: 0;
}

.evolution{
  padding: 56px 0 72px;
  text-align: center;
}
.evolution>li:nth-child(1){
  padding-bottom: 40px;  
  font-size: 2.8rem;
  font-weight: 800;
}
.evolution>li:nth-child(1)>span{
  vertical-align: -3px;
  font-size: 5rem;
  font-weight: 900;
}
.evolution>li:nth-child(2){
  padding-bottom: 68px;   
  font-size: 1.9rem;
  line-height: 2;
  margin: -10px 0;
  font-weight: 500;
}
.evolution>li:nth-child(3){
  font-size: 1.9rem;
  font-weight: 800;
}



/*------------------あなたにおすすめの------------------*/
.choice{
  padding: 138px 0;
  text-align: center;
}
.choice>li:nth-child(1){
  padding-bottom: 30px;  
  font-size: 14rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  margin: -10px 0;
}
.choice>li:nth-child(1)>span{
  font-weight: 900;
}
.choice>li:nth-child(2){
  padding-bottom: 60px;
  font-size: 3.3rem;
  font-weight: 900;
}

.y{
  margin-left: 60px;
}
.a{
  margin-right: 10px;
}

.lineup_item{
  text-align: center;
}
.lineup_item>li:nth-child(1){
  padding-bottom: 8px;  
  font-size: 2.5rem;
  line-height: 1.4;
  font-weight: 800;
}

.corolla{
  color: #3777b2;
}

.touring{
  color: #70823a;
}

.sport{
  color: #eb6100;
}

.cross{
  color: #2d3b95;
}
/*------------------拡大------------------*/
.car_image{
  overflow: hidden;
	width: 440px;	
	height: 270px;	
  background: #000;
}
.car_image>img{
	display: block;
	transition-duration: 0.5s;
}
.car_image>img:hover{
	transform: scale(1.2);	
	transition-duration: 0.5s;	
  opacity: 0.7;	
}



/*------------------タブメニュー------------------*/
.tab-area{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tab-area>li:nth-child(-n+2){
  padding-bottom: 56px;
}

.panel{
  display: none;
  padding: 0 0 50px;  
  animation: fadeIn 0.5s ease-in-out; 
}
.panel.active{
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.car>img{
  width: 100vw;
  height: 100%;  
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.selection>img{
  width: 100vw;
  height: 100%;  
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
}



/*------------------ページ内リンク------------------*/
#corolla{
  margin-top:-0px;
  padding-top:0px;   
}

#touring{
  margin-top:-0px;
  padding-top:0px;   
}

#sport{
  margin-top:-0px;
  padding-top:0px;   
}

#cross{
  margin-top:-0px;
  padding-top:0px;   
}

.info_text{
  padding-bottom: 60px;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: justify;
  text-justify: inter-ideograph; /*--edge--*/   
}
.info_text>span{
  color: #ff0000;   
}



/*------------------ページトップ------------------*/
.PageTopBtn{
  font-size: 1.4rem;
  position: fixed; /*配置場所を固定*/
  z-index: 100;
  bottom: 70px; /*下からの位置*/
  right: 50px; /*右からの位置*/
}

.PageTopBtn a{
  display: block; /*配置の調整*/
  color: #c8161d;
  background: #fff;
  border: solid 1px #c8161d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 25px; /*高さheightと同じに*/
  transition: 0.6s;
}

.PageTopBtn a:hover{
  color: #fff;
  background: #880025; /*マウスオーバー時の背景色*/
  border: solid 1px #880025;
}



/*------------------フッッター------------------*/
footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.link{
  display: flex;
}

.link>li{
  width: 25%;
  text-align: center;
}
.link>li>a{
  display: block;
  padding: 14px 0;
  background: #000;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 400;
  transition: 0.5s;     
}

.link>li{
  list-style: none;
  border-right: 1px solid #fff;
}
.link>li:last-child{
  border-right: none;
}
/*------------------マウスが乗った時の色------------------*/
.link>li>a:hover{
  background: #b2b2b2;
  color: #1c1c1c;
}



/*------------------カローラ------------------*/
.c_info_area{
  background: #E1E5F2; 
}

.c_info{
  padding: 60px 0; 
}
.c_info>li:nth-child(1){
  padding-bottom: 34px; 
}

.c_grade{
  display: flex;
  justify-content: space-between; 
}

.c_grade_info{
  padding-top: 40px;
}
.c_grade_info>li:nth-child(-n+2){
  padding-bottom: 46px;
}
.c_grade_info>li:nth-child(3){
  padding-bottom: 30px;
}



/*------------------ツーリング------------------*/
.touring_info_area{
  background: #f4f4ee; 
}

.touring_info{
  padding: 60px 0; 
}
.touring_info>li:nth-child(-n+2){
  padding-bottom: 34px; 
}

.touring_grade{
  display: flex;
  justify-content: space-between; 
}

.touring_grade_info{
  padding-top: 40px;
}
.touring_grade_info>li:nth-child(-n+2){
  padding-bottom: 46px;
}
.touring_grade_info>li:nth-child(3){
  padding-bottom: 30px;
}



/*------------------スポーツ------------------*/
.sport_info_area{
  background: #fef0e4; 
}

.sport_info{
  padding: 60px 0; 
}
.sport_info>li:nth-child(-n+2){
  padding-bottom: 34px; 
}

.sport_grade{
  display: flex;
  justify-content: space-between; 
}

.sport_grade_info{
  padding-top: 40px;
}
.sport_grade_info>li:nth-child(1){
  padding-bottom: 46px;
}
.sport_grade_info>li:nth-child(2){
  padding-bottom: 15px;
}

.sport_var{
  display: flex;
  justify-content: space-between;  
}



/*------------------クロス------------------*/
.cross_info_area{
  background: #f0eff7; 
}

.cross_info{
  padding: 60px 0; 
}
.cross_info>li:nth-child(-n+3){
  padding-bottom: 34px; 
}

.cross_grade{
  display: flex;
  justify-content: space-between; 
}

.gr_grade{
  display: flex;
  justify-content: space-between; 
}

.cross_grade_info{
  padding-top: 40px;
}
.cross_grade_info>li:nth-child(1){
  padding-bottom: 46px;
}
.cross_grade_info>li:nth-child(2){
  padding-bottom: 60px;
}
.cross_grade_info>li:nth-child(3){
  padding-bottom: 26px;
}
.cross_grade_info>li:nth-child(4){
  padding-bottom: 50px;
}
.cross_grade_info>li:nth-child(5){
  padding-bottom: 15px;
}





/*------------------SP版------------------*/
@media screen and (max-width: 640px){
  
  .inner{
    padding: 0 20px;
  }
  
  .pc_img{
    display: none;
  }

  .sp_img{
    display: block;
  }
 
  .pc_br{
    display: block;
  }
  
  .sp_br{
    display: none;
  }

  
  
  /*------------------ブランド------------------*/
  .brand{
    padding: 44px 20px 60px;
  }
  .brand>li:nth-child(1){
    padding-bottom: 30px;  
    font-size: 5.4rem;
    line-height: 1.3;
  }
  .brand>li:nth-child(2){
    padding-bottom: 40px;   
    font-size: 2rem;
    line-height: 1.8;
    text-align: justify;
    text-justify: inter-ideograph; /*--edge--*/
  }

  
  
  /*------------------スライド画像------------------*/
  .slick_item{
    padding-right: 10px;
  }  

  .slider img:hover{
    pointer-events: none;
    transform: none; 
  }  
  
  
  
  /*------------------進化の軌跡------------------*/
  .evo_title{
    font-size: 2.4rem; 
  }

  .evo_area{
    position: static; /*--解除--*/
  }

  .evolution{
    padding: 30px 20px 40px;
  }
  .evolution>li:nth-child(1){
    padding-bottom: 24px;  
    font-size: 2.6rem;
  }
  .evolution>li:nth-child(1)>span{
    vertical-align: -2px;
    font-size: 3.8rem;
  }
  .evolution>li:nth-child(2){
    padding-bottom: 24px;   
    font-size: 1.6rem;
    text-align: justify;
    text-justify: inter-ideograph; /*--edge--*/  
  }
  .evolution>li:nth-child(3){
    line-height: 1.6;
  }

  
  
  /*------------------あなたにおすすめの------------------*/
  .choice{
    padding: 100px 0 30px;
  }
  .choice>li:nth-child(1){
    padding-bottom: 30px;  
    font-size: 8rem;
  }
  .choice>li:nth-child(2){
    padding-bottom: 6px;
    font-size: 2.6rem;
  }

  .y{
    margin-left: 0;
  }
  .a{
    margin-right: 6px;
  }

  .lineup_item>li:nth-child(1){
    padding-top: 24px;
    padding-bottom: 6px;  
    font-size: 2rem;
  }
  /*------------------拡大------------------*/
  .car_image{
    width: auto;	
    height: auto;	
  }

  .car_image>img:hover{
    pointer-events: none;
    transform: none;  
  }
  

  
  /*------------------タブメニュー------------------*/
  .tab-area{
    padding: 20px;
    display: block;
  }

  .tab-area>li:nth-child(-n+2){
    padding-bottom: 0;
  }

  
  
  /*------------------ページトップ------------------*/
  .PageTopBtn{
    font-size: 1.2rem;
    position: fixed; /*配置場所を固定*/
    bottom: 15px; /*下からの位置*/
    right: 15px; /*右からの位置*/
  }

  

  /*------------------フッッター------------------*/
  footer{
    position: static;
  }

  .link{
    display: block;
  }

  .link>li{
    width: auto;
  }
  .link>li>a{
    padding: 16px 0;
    font-size: 1.8rem;
  }

  .link>li{
    border-right: none;
    border-bottom: 1px solid #fff;
  }
  .link>li:last-child{
    border-bottom: none;
  }



  /*------------------カローラ------------------*/
  .c_info{
    padding: 30px 20px 40px; 
  }
  .c_info>li:nth-child(1){
    padding-bottom: 36px; 
  }

  .c_grade{
    padding-top: 30px;  
    display: block;
  }
  .c_grade>li:nth-child(-n+2){
    padding-bottom: 40px;
  }
    


  /*------------------ツーリング------------------*/
  .touring_info{
    padding: 30px 20px 40px; 
  }

  .touring_info>li:nth-child(-n+2){
    padding-bottom: 36px; 
  }  
  
  .touring_grade{
    padding-top: 30px;
    display: block;
  }
  .touring_grade>li:nth-child(-n+2){
    padding-bottom: 40px;
  }
  
  
  
  /*------------------スポーツ------------------*/
  .sport_info{
    padding: 30px 20px 40px; 
  }

  .sport_grade{
    padding-top: 30px;
    display: block;
  }
  .sport_grade>li:nth-child(-n+2){
    padding-bottom: 36px;
  }

  .sport_var{
    display: block;
  }
  .sport_var>li:nth-child(1){
    padding-bottom: 40px;
  }
  
  
  
  /*------------------クロス------------------*/
  .cross_info{
    padding: 30px 20px 40px; 
  }

  .cross_grade{
    padding-top: 30px;
    display: block;
  }
  .cross_grade>li:nth-child(-n+3){
    padding-bottom: 36px;
  }
  
  .gr_grade{
    display: block;
  }

  .cross_grade_info>li:nth-child(1){
    padding-bottom: 40px;
  }

  
  
  
  
 }