@charset "UTF-8";

body{
	color: #333;
}
/***********************************
#テキストサイズ
************************************/
/*h1 {
  display: block;
  max-width: 70px;
  width: 50%;
   margin-left: auto; 
   margin-right: auto; 
  margin-bottom: 80px;
}

h2 {
  display: block;
  max-width: 300px;
  width: 50%;
   margin-left: auto; 
   margin-right: auto; 
  margin-bottom: 80px;
}

@media screen and (max-width:767px) {
  
  h2 {
    margin-bottom: 40px;
  }
  
}

h3 {
  display: block;
  font-size: 30px;
  font-weight: 100;
  position: relative;
  padding-left: 40px;
  letter-spacing: 2px;
}

h3 sup {
  font-size: 1.2rem;
}

h3::before {
   content: ""; 
  display: block;
  width: 30px;
  height: 1px;
  background-color: #cdae75;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

h4 {
  font-size: 2rem;
  font-weight: 600;
  display: block;
}

p,
#price table th,
#price table td {
  font-size: 1.8rem;
}

p {
  font-weight: 300;
  display: block;
}

#price table th {
  font-weight: 600;
}

#price table th.price {
  font-size: 1.4rem;
  font-weight: 300;
}

#price table td {
  font-weight: 300;
}
*/
.notes {
  font-size: 1.4rem;
  display: block;
  font-weight: 300;
}

.notes .marker {
  color: #0066ff;
}
  #topcontrol {
	  z-index: 2;
  }
@media print,screen and (min-width:768px) {
  
  .mb {
    margin-bottom: 50px !important;
  }
  
  #topcontrol {
    bottom: 70px !important;
  }  
  
}

@media screen and (max-width:767px) {

/*  .title_h2 h2 {
    font-size: 1.8rem;
    letter-spacing: 4px;
  }

  .title_h2 span {
    font-size: 1.4rem;
    line-height: 40px;
    letter-spacing: 2px;
    margin-left: 15px;
    padding: 0 15px;
  }

  h3 {
    font-size: 1.8rem;
    padding-left: 25px;
  }
  
  h3 sup {
    font-size: 1rem;
  }

  h3::before {
     content: ""; 
     top: 25%; 
     width: 20px; 
  }  

  h4 {
    font-size: 1.6rem;
  }

  p,
  #price table th,
  #price table td {
    font-size: 1.4rem;
  }
  
  #price table th.price {
    font-size: 1.2rem;
  }
*/
  .notes {
    font-size: 1rem;
  }
  
  .mb {
    margin-bottom: 10px !important;
  }
  
  #topcontrol {
    bottom: 85px !important;
  }  
  
}


/***********************************
#画像ボックス
************************************/
.img-box {
  display: flex;
}

.img-box li {
  width: 100%;
  margin-right: 20px;
  /* margin-bottom: 1%; */
}

.img-box li span {
  display: block;
  margin-bottom: 20px;
}

.img-box li.single {
  width: 100%;
  margin-right: 0;
}

.img-box li:last-child {
  margin-right: 0;
}

/*サイズ違い*/
.img_difference-box {
  display: flex;
}

.img_difference-box li {
  margin-right: 1%;  
  margin-bottom: 1%;
}

.img_difference-box li:last-child {
  margin-right: 0;
}

@media screen and (max-width:767px) {
  
  .img-box {
    flex-wrap: wrap;
  }  
  
  .img-box li {
    margin-bottom: 10px;
    margin-right: 0;
  }
  
}


/***********************************
#購入相談ボタン・リンクボタン
************************************/
.consultation {
  display: block;
  padding-bottom: 100px;
}

.consultation_btn,
.link-are {
  text-align: center;
  margin-top: 100px;
}

.consultation_btn a,
.link-are a {
  display: block;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  color: #fff;
  width: 70%;
  height: 100px;
  line-height: 100px;
  font-size: 3rem;
  font-weight: 600;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  -khtml-border-radius: 50px;
  position:
  relative;
  width: 100%;
  background: #c71717;
  background: -moz-linear-gradient(top,  #c71717 0%, #651313 100%);
  background: -webkit-linear-gradient(top,  #c71717 0%,#651313 100%);
  background: linear-gradient(to bottom,  #c71717 0%,#651313 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c71717', endColorstr='#b651313',GradientType=0 );
}

.link-are a {
  background: #15986c;
  background: -moz-linear-gradient(top,  #15986c 0%, #00584c 100%);
  background: -webkit-linear-gradient(top,  #15986c 0%,#00584c 100%);
  background: linear-gradient(to bottom,  #15986c 0%,#00584c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#15986c', endColorstr='#00584c',GradientType=0 );  
}

.consultation_btn ul {
  display: flex;
  max-width: 825px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.consultation_btn ul li {
  width: 100%;
}

.consultation_btn ul li:first-child {
  margin-right: 3%;
}

.consultation .notes{
	font-size: 16px;
	margin-top: 20px;
	text-align: center;
}

@media screen and (max-width:767px) {
  
  .consultation {
    padding-bottom: 50px;
  }  

  .consultation_btn,
  .link-are {
    margin-top: 50px;
  }
  
  .consultation_btn a,
  .link-are a {
    height: 80px;
    line-height: 80px;
    font-size: 1.3rem;
  }  
  
}
@media screen and (max-width:500px) {
  .consultation_btn a,
  .link-are a {
    height: 50px;
    line-height: 50px;
    font-size: 1.5rem;
  } 
	
  .consultation .notes{
    font-size: 1.35rem;
	  text-align: left;
}
}

/***********************************
#eye_catch-box
************************************/
#eye_catch-box {
    font-size: 0;
  line-height: 0;
  background: #000;
  width: 100%;
  max-height: 800px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
#eye_catch-box img {
  max-width: 1500px;
  height: auto;
}
@media screen and (max-width:500px) {
  #eye_catch-box {
    height: 350px;
  }
  #eye_catch-box img {
    width: 100%;
    height: auto;
  }
}


/***********************************
copy
************************************/
.copy{
	margin-top: 100px;
	text-align: center;
}
.copy_img{
	max-width: 516px;
	margin-right: auto;
	margin-left: auto;
}
.copy_txt{
	font-size: 16px;
	line-height: 1.8;
	margin-top: 40px;
}
@media screen and (max-width:500px) {
  .copy {
    margin-top: 70px;
  }
  .copy_img {
    max-width: 300px;
  }
  .copy_txt {
    font-size: 1.4rem;
  }
}

/***********************************
キャンペーン情報
************************************/
#campaign_information {
  padding: 0 0 100px 0;
}

#campaign_information .bnr {
  margin-bottom: 100px;
}

#campaign_information .st {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 815px;
  width: 100%;
  margin-bottom: 20px;  
}

#campaign_information .mov-box {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  margin-bottom: 0px;
}

#campaign_information .campaign_new {
  background-color: #d4372e;
  margin-bottom: 15px;
  padding: 0 0 50px 0;
}

#campaign_information .campaign_new .consultation_btn {
  margin-top: 0;
}

#campaign_information .campaign_new .consultation_btn a,
#campaign_information .campaign_new .link-are a {
  background: #16996c;
  background: -moz-linear-gradient(top,  #16996c 0%, #00574b 100%);
  background: -webkit-linear-gradient(top,  #16996c 0%,#00574b 100%);
  background: linear-gradient(to bottom,  #16996c 0%,#00574b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16996c', endColorstr='#00574b',GradientType=0 );  
}

#campaign_information .campaign_new .shop {
  margin: 50px 50px 0 50px;
  padding: 20px;
  background-color: #fff;
  display: flex;
}

#campaign_information .campaign_new .shop li {
  width: 100%;
}

#campaign_information .campaign_new .shop li:first-child {
  border-right: 1px solid #d4372e;
}

#campaign_information .campaign_new .shop li a {
  display: block;
  text-align: center;
}

#campaign_information .campaign_new .shop li a img {
  width: 100%;
  max-width: 260px;
}

#campaign_information .notes {
  display: block;
  /*margin-bottom: 100px;*/
  font-size: 14px;
}

#campaign_information .cp  {
  margin-bottom: 100px;
}

#campaign_information .cp img{
	border: solid 1px #e5001f;
}


@media screen and (max-width:767px) {
  
  #campaign_information {
    padding: 0 0 25px 0;
  }
  #campaign_information .cp  {
  margin-bottom: 50px;
	}
	
  #campaign_information .bnr {
    margin-bottom: 50px;
  }
  
  #campaign_information .mov-box {
    width: 100%;
    margin-bottom: 50px;
  }  
  
  #campaign_information .campaign_new {
    padding: 0 0 25px 0;
  }  
  
  #campaign_information .campaign_new .consultation_btn li {
    margin-left: auto;
    margin-right: auto;
    width: 60% !important;
  }
  
  #campaign_information .campaign_new .shop {
    margin: 25px 25px 0 25px;
    padding: 10px;
  }  
  
  #campaign_information .campaign_new .shop li:first-child {
    padding-bottom: 10px;
  }
  
  #campaign_information .campaign_new .shop li:last-child {
    padding-top: 10px;
  }  
  
  #campaign_information .notes {
    margin-bottom: 50px;
    font-size: 12px;
  }

}
/***********************************
HybridReborn 車体イメージ
************************************/
.body_img_box{
	background: #000;
}
/* body_img00 
------------------------*/
.body_img00_bg{
	background: url("../images/body_image00.jpg")no-repeat center center / cover;
	height: 850px;
}

.body_img_titi00{
	margin-right: auto;
	margin-left: auto;
	margin-top: -100px;
	max-width: 1000px;
	width: 90%;
}

@media screen and (max-width:1024px) {
.body_img00_bg{
	height: 500px;
}
.body_img_titi00{
	margin-top: -40px;
}	
}
@media screen and (max-width:550px) {
.body_img00_bg{
	height: 240px;
}	
}
	

/* body_img_box_inner
------------------------*/
.body_img_box_inner{
	margin-top: 100px;
	margin-right: auto;
	margin-left: auto;	
	max-width: 1000px;
}
.body_img_box_inner:nth-child(odd){
	padding-left: 33.3%;
}
.body_img_box_inner:nth-child(even){
	padding-right: 33.3%;
}
@media screen and (max-width:767px) {
.body_img_box_inner:nth-child(odd){
	padding-left: 5%;
}
.body_img_box_inner:nth-child(even){
	padding-right: 5%;
}	
}

/* body_img_ani_box
------------------------*/
.body_img_ani_box{
	position: relative;
	width: 100%;
}
.body_img_ani_box::before {
  content: "";
  display: block;
  padding-top: calc(((580 / 1000) * 100%));
}
.body_img{
	position: absolute;
	  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	opacity: 0;
	animation: anime 10s 0s infinite;
}
.body_img:nth-of-type(2){
	animation-delay: 5s;
}
@keyframes anime {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    60% {
        opacity: 0;
		z-index: 1;
}
    100% {
        opacity: 0;
    }
}

/* body_img_txt_box
------------------------*/
.body_img_txt_box{
	margin-top: 50px;
	max-width: 800px;
}
.body_img_box_inner:nth-child(odd) .body_img_txt_box{
	padding-right: 20%;
}
.body_img_box_inner:nth-child(even) .body_img_txt_box{
	padding-left: 20%;
}
/*tit*/
.body_img_box_inner.design .body_img_tit {
	max-width: 379px;
}
.body_img_box_inner.usability .body_img_tit {
	max-width: 491px;
}
.body_img_box_inner.performance .body_img_tit {
	max-width: 779px;
}
.body_img_box_inner.safty .body_img_tit {
	max-width: 362px;
}
/*stit*/
.body_img_stit{
	display: block;
	margin-top: 50px;
}
.body_img_box_inner.design .body_img_stit{
	max-width: 159px;
}
.body_img_box_inner.usability .body_img_stit {
	max-width: 190px;
}
.body_img_box_inner.performance .body_img_stit {
	max-width: 147px;
}
.body_img_box_inner.safty .body_img_stit {
	max-width: 188px;
}
.body_img_txt{
	color: #fff;
	font-size: 16px;
	line-height: 1.6;
	margin-top: 20px;
}


@media screen and (max-width:767px) {
.body_img_txt_box{
	margin-top: 25px;
}	
.body_img_box_inner:nth-child(odd) .body_img_txt_box{
	padding-right: 5%;
}
.body_img_box_inner:nth-child(even) .body_img_txt_box{
	padding-left: 5%;
}
	
/*tit*/	
.body_img_box_inner.design .body_img_tit {
	max-width: calc( 379px * 0.8);
}
.body_img_box_inner.usability .body_img_tit {
	max-width: calc( 491px * 0.8);
}
.body_img_box_inner.performance .body_img_tit {
	max-width: calc( 779px * 0.8);
}
.body_img_box_inner.safty .body_img_tit {
	max-width: calc( 362px * 0.8);
}
/*stit*/
.body_img_stit{
	margin-top: 25px;
}
.body_img_box_inner.design .body_img_stit{
	max-width: calc( 159px * 0.8); 
}
.body_img_box_inner.usability .body_img_stit {
	max-width: calc( 190px * 0.8)
}
.body_img_box_inner.performance .body_img_stit {
	max-width: calc( 148px * 0.8)
}
.body_img_box_inner.safty .body_img_stit {
	max-width: calc( 188px * 0.8)
}
.body_img_txt{
	color: #fff;
	font-size: 16px;
}	
	
}
@media screen and (max-width:500px) {
	
/*tit*/	
.body_img_box_inner.design .body_img_tit {
	max-width: calc( 379px * 0.5);
}
.body_img_box_inner.usability .body_img_tit {
	max-width: calc( 491px * 0.5);
}
.body_img_box_inner.performance .body_img_tit {
	max-width: calc( 779px * 0.5);
}
.body_img_box_inner.safty .body_img_tit {
	max-width: calc( 362px * 0.5);
}
/*stit*/
.body_img_box_inner.design .body_img_stit{
	max-width: calc( 159px * 0.6); 
}
.body_img_box_inner.usability .body_img_stit {
	max-width: calc( 190px * 0.6)
}
.body_img_box_inner.performance .body_img_stit {
	max-width: calc( 148px * 0.6)
}
.body_img_box_inner.safty .body_img_stit {
	max-width: calc( 188px * 0.6)
}
.body_img_txt{
	font-size: 1.4rem;
}	
	
}

/* body_img05
------------------------*/
.body_img05_bg{
	background: url("../images/body_image05.jpg")no-repeat center center / cover;
	height: 600px;
	margin-top: 100px;
}
@media screen and (max-width:1024px) {
.body_img05_bg{
	height: 340px;
	margin-top: 100px;
}	
}
@media screen and (max-width:550px) {
.body_img05_bg{
	height: 220px;
	margin-top: 50px;
}	
}
/***********************************
price
************************************/
#price {
  padding: 100px 0 100px 0;
}

.price_tit{
	max-width: 160px;
	margin-right: auto;
	margin-left: auto;
}
.price_box{
	margin-top: 50px;
}
/*stit*/
.price_stit{
	padding-bottom: 20px;
	border-bottom: 1px solid;
}
.price_box.z .price_stit img{
	max-width: 26px;	
}
.price_box.g .price_stit img{
	max-width: 33px;	
}
.price_box.u .price_stit img{
	max-width: 27px;	
}
.price_box.x .price_stit img{
	max-width: 31px;	
}
/*car_img*/
.price_car_img{
	display: block;
	margin-top: 50px;
	margin-right: auto;
	margin-left: auto;
}
.price_box.z .price_car_img{
	max-width: 729px;
}
.price_box.g .price_car_img{
	max-width: 729px;
}
.price_box.u .kinto{
	background: #00829c;
	padding: 50px 20px 40px;
}
.price_box.u .price_car_img{
	max-width: 729px;
	margin-top: 0px;
}
.price_box.x .price_car_img{
	max-width: 638px;
}
/*car_img_note*/
.price_car_img_note{
	text-align: center;
	margin-top: 40px;
	font-size: 16px;
}
.price_box.u .price_car_img_note{
	color: #fff;
}
.price_box.u .price_car_img_note2{
	font-size: 20px;
	text-align: center;
	margin-top: 20px;
}
.price_box.u .price_car_img_note2 a{
	color: #00829c;
}
/*table*/
.price_car_table_tit{
	font-size: 16px;
	margin-top: 50px;
	position: relative;
    padding-left:20px;
}
.price_car_table_tit:before {
    background: #333;
    content: "";
    height: 14px;
    width: 14px;
    left: 0;
    position: absolute;
    top: 5px;
}
.price_car_table{
	margin-top: 15px;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
.price_car_table th, .price_car_table td{
	border: .5px solid #333;
	font-size: 20px;
	padding: 10px;
	text-align: center;
}
.price_car_table th{
	background: #ddd;
}
.price_note{
	margin-top: 30px;
	font-size: 14px;
}
.price_note a{
	color: #333;
	text-decoration: underline;
}

@media print,screen and (min-width:768px) {
  

  
}
@media screen and (max-width:767px) {
.price_car_table th, .price_car_table td{
	border: 1px solid #333;
}
}
@media screen and (max-width:500px) {
	
.price_tit{
	max-width: calc( 160px * 0.6);
} 
.price_box{
	margin-top: 30px;
}	
/*stit*/
.price_stit{
	padding-bottom: 10px;
}	
.price_stit{
	padding-bottom: 10px;
	border-bottom: 1px solid;
}
.price_box.z .price_stit img{
	max-width:calc( 26px * 0.6);	
}
.price_box.g .price_stit img{
	max-width:calc( 33px * 0.6);	
}
.price_box.u .price_stit img{
	max-width:calc( 27px * 0.6);	
}
.price_box.x .price_stit img{
	max-width: calc( 31px * 0.6);	
} 
/*car_img*/
.price_car_img{
	margin-top: 30px;
}
.price_box.u .kinto{
	padding: 30px 20px 20px;
}	
/*car_img_note*/
.price_car_img_note{
	font-size: 1.4rem;
	margin-top: 20px;
}
.price_box.u .price_car_img_note2{
	font-size: 1.6rem;
}
/*table*/
.price_car_table_tit{
	font-size: 1.4rem;
	margin-top: 30px;
}
	.price_car_table_tit:before {
    top: 3px;
}
.price_car_table th, .price_car_table td{
	border: 1px solid #333;
	font-size: 1.6rem;
	padding: 6px;
}
.price_note{
	font-size: 1rem;
	margin-top: 20px;
}	
}



/***********************************
body_img06
************************************/
.body_img06_bg{
	background: url("../images/body_image06.jpg")no-repeat center center / cover;
	height: 600px;
}
@media screen and (max-width:1024px) {
.body_img06_bg{
	height: 340px;
}	
}
@media screen and (max-width:550px) {
.body_img06_bg{
	height: 220px;
}	
}

/***********************************
COLOR
************************************/
#color {
  padding: 100px 0 100px 0;
  background-color: #ddd;
}

.color_tit {
	max-width: 189px;
  margin-right: auto;
  margin-left: auto;
	margin-bottom: 50px;
}

#color .notes {
  padding-top: 20px;
}
@media screen and (max-width:767px) {
	#color .notes {
  font-size: 14px;
}	
}
@media screen and (max-width:500px) {
  
  #color {
    padding: 50px 0 50px 0;
  }
	
	.color_tit {
	max-width: calc( 189px * 0.6);
		margin-bottom: 30px;
}
	#color .notes {
  font-size: 1rem;
}
  
}

/***********************************
body_img06
************************************/
.body_img07_bg{
	background: url("../images/body_image07.jpg")no-repeat center center / cover;
	height: 600px;
}
@media screen and (max-width:1024px) {
.body_img07_bg{
	height: 340px;
}	
}
@media screen and (max-width:550px) {
.body_img07_bg{
	height: 220px;
}	
}

/***********************************
サービス情報
************************************/
#service_information .bnr-box {
  position: relative;
  overflow: hidden;
  /* margin-bottom: 50px; */
}

#service_information .logo-box {
  padding-top: 100px;
  display: block;
  text-align: center;
  margin: 0 auto;
  max-width: 200px;
  width: 60%;
  padding-bottom: 30px;
}

#service_information .logo-box li:first-child {
  max-width: 125px;
  margin: 0 auto;
}

@media print,screen and (min-width:501px) {
  
  #service_information .bnr-box li {
    float: left;
    width: 49%;
    /* margin-bottom: 20px; */
  }
  
  #service_information .bnr-box li:nth-child(2n) {  
    float: right;
  }
  
}

@media screen and (max-width:500px) {
  
  #service_information .bnr-box {
    margin-bottom: 20px;
  }

  #service_information .bnr-box li {  
    margin-bottom: 20px;    
  }  

  #service_information .logo-box {
    padding-top: 30px;
  }
  
  #service_information .service_information_i01 span {
    text-align: left;
    font-size: 11px;
  }
  
}