main{
    width:1060px;
    height:auto;
    margin:50px auto;
}

section{
  /*
    border-top:2px solid #333;*/
    padding:5px 0 0;
}

h1{
    border-bottom:1px solid #333;


}  

/************************************
            詳細
**************************************/

/* 価格周辺*/
#price_area h1{
    margin: 0 0 20px 0;
}
#price_area h2{
    margin: 0;
    float: left;
}
#price_area h2 span{
    margin: 0 30px;
}
#price_area h3{
    margin: 0 0 0 70px;
    float: left;
    line-height: 40px;
    font-size: 22px;
}
#price_area h3 span{
    font-size: 18px;
    font-weight: 500;
    margin: 0 20px 0 0;
}
#price_area .car-info{
    display: flex;
    margin: 75px 0 0;
}
#price_area .car-info li{
    width: 176px;
    border-top: 1px solid #818080;
    border-left: 1px solid #818080;
    border-bottom: 1px solid #818080;
    padding: 14px;
    text-align: left;
    background:#ddd;
}
#price_area .car-info li:nth-child(even){
  background:#fff;
}
#price_area .car-info li:last-child{
  border-right: 1px solid #818080;
}
#price_area .info-txt{
    display: flex;
    width: 100%;
}
#price_area .info-txt li{
    border-top: 1px solid #818080;
    border-left: 1px solid #818080;
    border-bottom: 1px solid #818080;
    padding: 14px 0;
}
#price_area .info-txt li:first-child{
  background-color: #298fdb;
  color: #fff;
  width: 140px;
  text-align: center;
}
#price_area .info-txt li:last-child{
  border-right: 1px solid #818080;
  width: 100%;
  padding: 14px 20px; 
  background-color: #E4EEF2;
}




/* slide img */
#wrapper .sideByside #mainimgBox {
	padding: 5px;
	float: left;
	width: 640px;
	border: 1px solid #bbb;
}
#wrapper .sideByside #imgMovieBox {
	float: right;
	padding: 2px;
	width: 366px;
	border: 1px solid #bbb;
}
#wrapper .sideByside #imgMovieBox .imgsBox a {
	display: block;
	float: left;
	height: 47px;
	width: 63px;
	border: 2px solid #cbcbcb;
	margin-right: 6px;
	margin-bottom: 5px;
}
#wrapper .sideByside #imgMovieBox .imgsBox a:hover {
	border: 2px solid #F00;
}
#ImgPrev{
	position:absolute;
	display:block;
	width: 50px;
	height:480px;
	left:0;
	top:0;
	z-index:9999px;
	/*background-image:url(https://www.gtnet.co.jp/images/common/spacer.gif);*/
	background-repeat: no-repeat;
	background-position: center left;
	outline:none;
}
#ImgPrev:hover,#ImgPrev.hover{
	/*background-image:url(https://www.gtnet.co.jp/images/usedcar/detail/arrow_l.png);*/
}
#ImgNext{
	position:absolute;
	display:block;
	width: 60px;
	height:480px;
	right: 405px;
	top:0;
	z-index:9999;
	/*background-image:url(https://www.gtnet.co.jp/images/common/spacer.gif);*/
	background-repeat: no-repeat;
	background-position: center right;
	outline:none;
}
#ImgNext:hover,#ImgNext.hover{
	/*background-image:url(https://www.gtnet.co.jp/images/usedcar/detail/arrow_r.png);*/
}
#slide-img-area #wrapper {
	width: 1060px;
	background-color: transparent;
	margin:0 auto;
	border-top:0;
	position:relative;
}

.ImgDispArea img{width:640px; height:480px;}
.imgsBox img{width: 63px;height:47px;}

#imgMovieBoxInner ul{display:flex;margin: 0 0 5px 0;}
#imgMovieBoxInner ul li{width:100%;text-align:center;background: #ddd;}
#imgMovieBoxInner ul h2{margin:0;padding: 5px 20px 12px;}
#imgMovieBoxInner ul a{margin:0;padding: 5px 20px;position: relative;top: 12px;}


/* about */ 
#car_detail_area h4{
  font-size: 24px;
  margin: 30px 0 0 0;
}
.about_area{
  display: flex;
  flex-wrap: wrap;
}
.about_area li{
  width: 210px;
  padding: 14px 20px;
  margin-bottom: 20px;
  border-bottom: 2px solid #898989;
}
.about_area li:nth-child(odd){
  background:#ddd;
}
.about_area li:nth-child(even){
  margin-right:40px;
}
.about_area li:nth-child(4n){
  margin-right:0;
}

/* info */ 
.info_area{
  display: flex;
  flex-wrap: wrap;
}
.info_area li{
  width: 245px;
}
.info_area li{
  margin-right:20px;
  background-color: #DDD;
  font-weight: bold;
  text-align: center;
  padding: 8px 0;
  margin-bottom: 10px;
  font-size: 18px;
}
.info_area li:last-child{
  margin-right:0;
}

.note{
  margin:25px 0;
}

.coments{
  border:2px solid #ccc;
  padding:10px 20px;
}

.sd_box{

}
#sd_title{
  margin: 0;
  padding: 10px 1.8%;
  background: #ddd;
  font-weight: bold;
}
#sdtxt1{
  font-size:24px;
  margin: 0;
}
#sdtxt2{
  font-size:18px;
  margin: 0;
}
#sdtxt3{
  font-size:12px;
}
.sd_box ul{
  display:flex;
  padding: 1%;
  margin: 0;
  border: 1px solid #898989;
}
.sd_box ul li:first-child{
  width:20%;
}
.sd_box ul li:last-child{
  width: 78%;
  margin-left: 2%;
}
.sd_box ul li img{
  width:100%;
}

/************************************
            TAB切替 view
***************************************/
.tabs_view {
  padding-bottom: 10px;
  background-color: #fff;
  width: 1040px;
  margin: 0 auto;
}

.tabs_view .tab_item_view {
  background-color: #38b538;
  font-size: 14px;
  text-align: center;
  color: #fff;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  margin-right: 3px;
  border-radius: 0.25em 0.25em 0 0;
  padding: 5px 25px;
}

.tabs_view input[name="tab_item_view"] {display: none;}
.tabs_view .tab_content_view {
  display: none;
  clear: both;
  overflow: hidden;
  border: 2px solid #000;
  padding: 20px 40px 0;
}

.tabs_view #tab1_view:checked ~ #tab1_contents_view,
.tabs_view #tab2_view:checked ~ #tab2_contents_view,
.tabs_view #tab3_view:checked ~ #tab3_contents_view{
  display: block;
}
input:checked + .tab_item_view {
  background-color: #000;
  color: #fff;
}
.tabs_view .tab_content_view ul{
    display:flex;
    flex-wrap: wrap;
}
.tabs_view .tab_content_view ul li{
    padding: 0 16px;
    border-right: 1px solid #ccc;
    margin-bottom: 16px;
    width: 150px;
}
.tabs_view .tab_content_view ul li img{  
    width: 150px;  
    height: 113px;
}
.tabs_view .tab_content_view ul li .item-name_view{font-weight: 600;}
.tabs_view .tab_content_view ul li .item-name_view span{font-weight: 300;}
.tabs_view .tab_content_view ul li .price{ 
    text-align: right;  
    color: #c00; 
    font-weight: 600; 
    font-size: 16px;
}


.sideByside #detailBox ul {
	height: 48px;
	width: 84px;
	position: absolute;
	top: -16px;
	left: 386px;
}
.sideByside #detailBox p {
	display: block;
	width: 360px;
	position: relative;
	font-size: 14px;
	line-height: 1.2;
	padding: 7px;
	background: #000;
	color: #fff;
}
.sideByside #detailBox p strong {
	position: absolute;
	float: right;
	right: 10px;
	bottom: 5px;
}
.sideByside #detailBox p strong .num {
	font-size: 30px;
	color: #F00;
	margin-right: 10px;
	top: 2px;
	position: relative;
}
.sideByside #detailBox ul li a {
	background-position: 0px 0px;
	display: block;
	height: 48px;
	width: 100%;
	background: #000;
	color: #fff;
  font-weight:bold;
  text-align:center;
  line-height:48px;
}
#detailBox{margin:0 10px;}


/************************************
            TAB切替 parts
***************************************/
.tabs_parts {
  padding-bottom: 40px;
  background-color: #fff;
  width: 1040px;
  margin: 0 auto;
}

.tabs_parts .tab_item_parts {
  width: 130px;
  height: 50px;
  background-color: #000;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  margin-right: 8px;
  border-radius: 0.75em 0.75em 0 0;
}

.tabs_parts input[name="tab_item_parts"] {display: none;}
.tabs_parts .tab_content_parts {
  display: none;
  clear: both;
  overflow: hidden;
  border: 2px solid #000;
  padding: 20px 40px 40px;
}

.tabs_parts #tab1_parts:checked ~ #tab1_contents_parts,
.tabs_parts #tab2_parts:checked ~ #tab2_contents_parts,
.tabs_parts #tab3_parts:checked ~ #tab3_contents_parts {
  display: block;
}
input:checked + .tab_item_parts {
  background-color: #b60d0d;
  color: #fff;
}

.tabs_parts .tab_content_parts ul{
    display:flex;
    flex-wrap: wrap;
}
.tabs_parts .tab_content_parts ul li{
    padding: 0 16px;
    border-right: 1px solid #ccc;
    margin-bottom: 16px;
    width: 150px;
}
.tabs_parts .tab_content_parts ul li img{  
    width: 150px;  
    height: 113px;
}
.tabs_parts .tab_content_parts ul li .item-name_parts{
    font-weight: 600;
}
.tabs_parts .tab_content_parts ul li .item-name_parts span{ 
    font-weight: 300;
}
.tabs_parts .tab_content_parts ul li .price{ 
    text-align: right;  
    color: #c00; 
    font-weight: 600; 
    font-size: 16px;
}

/**********  flow **********/
#flow_area{

}
#flow_area p{ 
  font-size: 20px;
  font-weight: bold;
  border-top: 4px solid orange;
  padding-top: 14px;
}
#flow_area img{
  width:90%;
  margin:0 5%;
}


/**********************************************************
                        スマホ
***********************************************************/
@media screen and (max-width: 980px) {

  main{width: 90%;margin: 10px auto;clear:both;}
  section {padding: 20px 0 0}
  .tabs_view {width:100%;}
  .tabs_parts {width:100%;}
  .sideByside #detailBox p {width:70%;}
  .sideByside #detailBox ul {width:30%;left:70%;}
  #car_detail_area h4 {font-size:20px;}

  #price_area h1 {font-size:20px;}


  /***************  price  ***************/
  #price_area .car-info li {width: 45%;padding: 10px 2%;font-size: 14px;border-bottom: none;}
  #price_area .car-info li:nth-child(even){border-right: 1px solid #818080;}
  #price_area .car-info li:nth-child(5n){border-bottom: 1px solid #818080;}
  #price_area .car-info li:nth-child(6n){border-bottom: 1px solid #818080;}
  #price_area h1 {font-size:20px;margin-bottom:20px;}
  #price_area h2 {float:none; font-size:18px;}
  #price_area h3 {float:none; margin:0;  font-size:18px;}
  #price_area h3 span {font-size: 16px;}
  #price_area .car-info {flex-wrap: wrap;margin: 10px auto;}

  #price_area .info-txt li:last-child {padding: 14px 9px;}


  /**********  slide img  ***************/
  #slide-img-area #wrapper {width:100%;}
  #wrapper .sideByside #mainimgBox {width: 100%;}
  #wrapper .sideByside #imgMovieBox {width:100%;}
  #wrapper .sideByside #mainimgBox {padding: 0 0%;border: none;}
  #wrapper .sideByside #imgMovieBox .imgsBox a {width:22%; height:auto;}
  .imgsBox img {width: 100%; height: auto;}

  #ImgDispArea img{width:100%;height:auto;z-index: 0;position: relative;}
  #imgsBox img{width: 63px;height:47px;}
  #ImgPrev {width:50px;height: 270px;}
  #ImgNext {width:50px;right: 0;height: 270px;}

  #maincomment{font-size:14px;}


  /******** about *************/
  .about_area li {width: 42%;margin-right: 0;font-size:14px;padding: 12px 4%;}
  .about_area li:nth-child(even){margin-right:0;}


  /******** info *************/
  .info_area li {width:49%; margin-right:2%; font-size:14px;}
  .info_area li:nth-child(even){margin-right:0;}

  .coments{font-size:14px;}

  .sd_box {margin: 30px 0 0;}
  .sd_box ul {display:block;}
  #sd_title {padding: 10px 5%;}
  .sd_box ul {padding: 3% 5%;}
  .sd_box ul li:last-child {width: 100%; margin-left: 0%;}
  .sd_box ul li:first-child {width: 100%;margin-bottom: 15px;}

  /******** tab view *********/
  .tabs_view .tab_content_view {padding: 20px 0 40px;}
  .tabs_view .tab_content_view ul li {width:41.5%;padding:0 4%;}
  .tabs_view .tab_content_view ul li:nth-child(even) {border-right:none;}
  .tabs_view .tab_item_view {padding: 5px 12px; font-size:12px;}


  /******** カウンター *********/
  #detailBox {margin:0;}
  .sideByside #detailBox p strong {right:6%;}


  /******** tab parts *********/
  .tabs_parts .tab_item_parts {
    width: 32%;
    font-size: 14px;
    margin-right: 1%;
  }
  .tabs_parts .tab_content_parts {padding: 20px 0 40px;}
  .tabs_parts .tab_content_parts ul li {width:41.5%;padding:0 4%;}
  .tabs_parts .tab_content_parts ul li:nth-child(even) {border-right:none;}
  .item-name{font-size:14px;}
  .tabs_view .tab_content_view ul li .price {font-size:15px;}

}