@charset "utf-8";
/**/
* {
 margin: 0;
 padding: 0;
}
html {
  -webkit-overflow-scrolling: touch;
}
#mainBlock {
 font-family: sans-serif;
 color: #fff;
}
h2{
 color:#333;
}

a {
 text-decoration: none;
 color: #003a6b;
}
a:visited {
 color: #2b006b;
}
a:hover {
 color: #003a6b;
 text-decoration: underline;
}
a:active {
 color: #003a6b;
 text-decoration: underline;
}

article, aside, dialog, figure, footer, header, hgroup, nav, section {
 display: block;
}
header {
 text-align: left;
 padding-bottom: 0px;
 border-bottom: 1px solid #ccc;
}
ul li {
 list-style: none outside none;
}
#container {}
.wrapper1 {
 font-size: 16px;
 line-height: 1.6;
 padding: 0px;
 font-family: "メイリオ", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
 font-weight: 500;
}
/*背景*/
div {
  box-sizing: border-box;
  align-items: center;
}
.mv_box.mv_box2{
  padding-top: 15px;
}
.parallax-bg{
  background-size: cover;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position:bottom;
  will-change: transform;
}
.img-bg-01{
  background-image: url("../img/back_img_sp.jpg");
}
.img-bg-02{
  background-image: url("../img/moto_top3_back.jpg");
}
.img-bg-03{
  background-image: url("../img/top100_back1.jpg");
}
.img-bg-04 {
  background-image: url("../img/top100_back2.jpg");
}
.img-bg-05 {
  background-image: url("../img/top100_back3.jpg");
}
.img-bg-06{
  background-image: url("../img/kannren_back.jpg");
}

.contents_top {
 margin: 0 auto;
 width:95%;
 height: auto;
 font-size: 14px;
 line-height: 1.6;
 padding: 10px 0 50px;
}
.coty-logo {
 padding-bottom: 0px;
}
.rotary {
 margin-top: 50px;
 background-image: url("../img/hlogo_sp.png");
 background-repeat: no-repeat;
 padding: 0px 0px 55px;
 background-size: contain;
 font-size: 25px;
 line-height: 140%;
 height: 40px;
 padding-top: 5px;
}
#pickup {
 width: 100%;
 height: auto;
 margin: 0px auto;
 padding-top: 15px;
}
.yearcar_img {
 margin: 10px auto 0px;
}
.text_area1 {
 margin: 15px auto 0px;
}
h2.hensyuchoyori{
	color:#fff;
}

.comment_box {
position: relative;
 width: 100%;
 height: auto;
 margin: 50px auto 0px;
 border: solid 2px #fff;
 box-sizing: border-box;
 padding: 10px;
}
.hensyucho_img {
 margin: 10px 5px 0px;
}
.hensyuchoyori {
  font-size: 16px;
  margin-top: 16px;
}
.hensyuchoyori_h3{
  font-size: 1.9rem;
}
.hensyuchoyori_h3_2{
  font-size: 1.9rem;
  margin-top: -5px;
}
.text_area{
  text-align: center;
  width: 70%;
}
.photo{
  position: absolute;
    width: 87px;
    height: 87px;
    right: 17px;
    top: 17px;
    padding: 3px;
    background: #fff;
    border-radius: 3px;
}
.photo img{
  width: 100%;
}
.text_area2 {
 margin: 0px auto 0px;
}
.text_area2 p {
 margin: 10px;
 text-align: justify;
}
.pickup_yearcar_img {
 margin: 0px auto 20px;
}
.text_area3 {
 margin: 0px auto 30px;
}
.miryoku_box {
 margin: 30px auto 0px;
}
h3.caption{
 text-align:center;
 font-size: 0.9em;
 letter-spacing: .2em;
}
.ribbon_wrapper {  
  display: block;
  position: relative;
  margin: 15px auto;
  padding: 5px 0;
  width: 150px;
  background: #fff;
  color:#ff6010;
  box-sizing: border-box;
  }

.offshot{
	margin:50px auto 25px;
}
.slider li{
	display:none;
}
.bx-viewport .slider li{
	display:block !important;
}
.userkiita {
 margin: 30px auto 0px auto;
}
.userkiita_p {
 margin-top: 0px !important;
}
.year_bu, .mv_bu2bu{
 width: 100%;
 height: auto;
 margin: 25px auto 10px auto;
 padding:0 5px;
 display: flex;
 justify-content: space-around;
}
.video {
 width: 100%;
 padding-bottom: 56.25%;
 height: 0px;
 position: relative;
}
.video iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

h1.title{
	margin: 40px auto 15px;
	overflow: hidden;
}
.title03{
	color:#fff!important;
}

ul.top3 {
    display: block;
    flex-direction: row;
    justify-content: center;
	margin-top: 25px;
}
ul.top3 li{
	margin:auto;
	text-align:center;
	padding:10px 0;
}
ul.top3 li a:hover{
  filter: brightness(85%);
}
.top3 img{
  box-shadow: 0 10px 15px 0;
}

.click_setsumei {
 margin-bottom: 20px;
 font-size: 13px;
}
.bu2box {
 display: flex;
 justify-content: space-around;
 max-width: 100%;
 width: 95%;
 margin: 0 auto 0 auto;
}
.copyright__logo a{
  vertical-align: top;
}
.past_ranking {
    margin: 20px 0;
	text-align: center;
}
/*リボンランクボタン*/
.rank-ribbon {
 width: 250px;
 margin: 0px auto 15px auto;
 padding-top: 30px;
}
/*1位～10位*/
.top100_back1 {
 padding-bottom: 20px;
 color: #fff;
 text-align: center;
}
.top100_back1 a:hover {
 color: #fff;
 text-decoration: underline;
 text-decoration-color: #fff;
}
.top100_back2 {
 color: #fff;
 text-align: center;
}
.top100_back2 a:hover {
 color: #fff;
 text-decoration: underline;
 text-decoration-color: #fff;
}
.top100_back3 {
 padding-bottom: 20px;
 color: #fff;
 text-align: center;
}
.top100_back3 a:hover {
 color: #fff;
 text-decoration: underline;
 text-decoration-color: #fff;
}
#top100 {
 height: auto;
 text-align: center;
}
.rank-bu {
 margin-top: 30px;
}
.rank_box {
 width: 95%;
 margin: 0px auto 50px auto;
}
.rank_box_kobetsu {
 width: 95%;
 height: auto;
 border: 2px solid #fff;
 color: #fff;
 margin: 0 auto 30px auto;
}
.rank1_10_car_photo {
 padding-top: 2px;
}
.rank1_10_car_photo img {
 padding-top: 8px;
 max-width: 360px;
}
.rank1_10_bu {
 width: 95%;
 height: 50px;
 margin: 20px auto 10px;
 display: flex;
 justify-content:space-between;
}
.used_f_bu img {
 width: 95%;
}
.ca_look_bu img {
 width: 95%;
}
.maker {
 width: 95%;
 height: 25px;
 text-align: center;
 font-size: 16px;
 margin: 0px auto 0px auto;
}
.car_name {
 width: 500px;
 height: 45px;
 font-size: 24px;
 line-height: 110%;
 margin: 0px auto 20px auto;
 vertical-align: middle;
 display: table-cell;
 padding-left: 5px;
 padding-right: 5px;
}
/*11位～100位で使用*/
.sp11rank_box {
 width: 100%;
 margin: 0px auto 0px auto;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
.rank_box_kobetsu11 {
 width: 100px;
 height: 160px;
 margin-bottom: 10px;
 background-color: rgba(255, 0, 0, 0);
 margin-left: 5px;
 margin-right: 5px;
}
.rank_box_kobetsu11_photo {
 width: 100px;
 height: 100px;
}
.rank_box_kobetsu11_photo img {}
.rank_box_kobetsu11_name {
 width: 100px;
 height: 50px;
 padding-top: 7px;
 color: #fff;
 font-size: 12px;
 line-height: 140%;
}
/*関連記事*/
#kannren {
 padding-bottom: 0px;
 background-position: bottom;
}
.kannren_img {
 width: 100%;
 margin: 0px auto 0px auto;
 padding-top: 40px;
}
.kannren_link_box {
 width: 95%;
 margin: 0px auto 0px auto;
}
.kannren_link {
 width: 100%;
 margin: 5px auto 0px auto;
 font-size: 12px;
 border-bottom: 1px solid #B3B3B3;
 display: flex;
 justify-content: space-between;
}
.kannren_link_1st {
 width: 100%;
 margin: 30px auto 0px auto;
 font-size: 12px;
 border-top: 1px solid #B3B3B3;
 border-bottom: 1px solid #B3B3B3;
 display: flex;
 justify-content: space-between;
 padding-top: 5px;
}
.kannren_link_img {
 width: 100px;
}
.kannren_link_txt {
 width: 100%;
 margin-left: 5px;
 padding-top: 0px;
 color: #fff;
}
/*アーカイブ*/
/*Archiveの文字 */
.title03 {
 margin: 50px 0px 0px 0px;
 color: #fff;
 font-size: 26px;
}
.archive {
 margin: 0px auto 0px auto;
 line-height: 200%;
 font-size: 16px;
 text-align: center;
}
.archive ul {
 margin-top: 10px;
 line-height: 250%;
 font-size: 13px;
 text-align: center;
}
.archive ul li a {
 color: #fff;
}
.nav {
 margin: 2px 0px 0px 0px;
}
/*-------------------------------------------------
  サイドナビ
-------------------------------------------------*/
#side_bu{
 height:50px;
 position:fixed;
 display:block;
 bottom:0px;
 left:0;
 right:0;
 background:rgba(51,51,51,0.5);
 z-index:100;
}

#side_bu ul{
  display:flex;
  padding:0;
  margin:0;
  justify-content:space-evenly;
  list-style:none;
  text-align:center;
}

#side_bu ul li{
 flex:1;
}
#side_bu ul li a{
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 18px 10px 10px 18px;
 height: 50px;
 color: #fff;
}
#side_bu ul li a:hover{
 opacity: 0.7;
}
.anchor{
	display:block;
	padding-top:30px;
	margin-top:-30px;
}
#side_bu span{
 line-height:1.0;
 font-family:vdl-logomaru;
 font-style:normal;
 font-weight:400;
}

/******************************
 ソーシャルエリア全体を囲む要素
 * 他のコンテンツと距離を取りたい場合は[margin]を設定して下さい
******************************/
.social-area-syncer {
 width: 100%;
 min-height: 190px;
 padding: 1.5em 0;
}
/* デスクトップPCでは高さを拡張する */
@media screen and (min-width:480px) {
 .social-area-syncer {
  min-height: 119px;
 }
}
/******************************
 [ul]要素
******************************/
/* スマホ */
ul.social-button-syncer {
 width: 238px;
 margin: 24px auto;
 padding: 0 0 0 60px;
 border: none;
 list-style-type: none;
}
/* デスクトップ */
@media screen and (min-width:480px) {
 ul.social-button-syncer {
  width: 410px;
 }
}
/******************************
 [li]要素
******************************/
ul.social-button-syncer li {
 float: left;
 text-align: center;
 height: 71px;
 margin: 0 8px;
 padding: 0;
}
/******************************
 各種ボタン
******************************/
/* [Twitter] */
.sc-tw {
 width: 71px;
}
/* [Facebook] */
.sc-fb {
 z-index: 99;
 width: 69px;
}
/* [LINE] */
.sc-li {
 width: 50px;
}
.sc-li-img {
 border: none;
 margin: 0 auto;
 padding: 0;
 width: 36px;
 height: 60px;
}
/* デスクトップPCではLINEボタンを表示しない */
@media screen and (min-width:480px) {
 .sc-li {
  display: none;
 }
}
/*-------------------------------------------------
  SNSボタン 0609修正対応
-------------------------------------------------*/
.sns-btnSP{
    margin: 20px 0;
    padding:30px 0;
    background:#404040;
}
.sns-btnSP ul{
    margin: 0 auto;
    padding: 0 10px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content:space-evenly;
    flex-wrap:wrap;
}
.sns-btnSP ul li{
    margin: 0;
    height: auto;
    float: none;
}
.sns-btnSP .fb-btn div{
    background: #1877f2;
    border-radius: 3px;
    height:20px;
    padding:3px 6px 0;
    font-size: 10px;
    display: block;
    box-sizing: border-box;
}
.sns-btnSP .fb-btn a{display:block;}
.sns-btnSP .fb-btn a:hover{
    text-decoration: none;
}
.sns-btnSP .fb-btn div img{
    vertical-align: text-bottom;
}
.sns-btnSP .fb-btn div span{
    font-weight: bold;
    font-family: Helvetica, Arial, "hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif;
    vertical-align: bottom;
    padding-left: 4px;
    color: #fff;
}
.sns-btnSP .mail-btn div{
    background: #ff9500;
    border-radius: 3px;
    font-size: 10px;
    text-align: center;
}
.sns-btnSP .mail-btn img{
    margin: 2px 5px 0 0;
    width: 16px; 
    height: auto;
}
.sns-btnSP .mail-btn span{
    margin-top: 3px;
    vertical-align: super;
    display: inline-block;
}
.sns-btnSP .mail-btn a{
    padding:0 5px;
    font-weight: bold;
    color: #fff!important;
    display: block;
    height: 20px;
}
.sns-btnSP .mail-btn a:hover{
    text-decoration: none;
    background: #FFA426;
    border-radius: 3px;
}