@charset "utf-8";
/* =======================================
   CSS BrowserReset BaseElements

   (C)BLACKFLAG.NET ALL RIGHTS RESERVED.
   http://black-flag.net/
 ======================================= */
/*.content html,*/
/*.content  body,*/
.content  div,
.content  span,
.content  applet,
.content  object,
.content  iframe,
.content h1,
.content  h2,
.content  h3,
.content  h4,
.content  h5,
.content  h6,
.content  p,
.content  blockquote,
.content  pre,
.content a,
.content  abbr,
.content  acronym,
.content  address,
.content  big,
.content  cite,
.content  code,
.content del,
.content  dfn,
.content  em,
.content  font,
.content  img,
.content  ins,
.content  kbd,
.content  q,
.content  s,
.content  samp,
.content small,
.content  strike,
.content  strong,
.content  sub,
.content  sup,
.content  tt,
.content  var,
.content dl,
.content  dt,
.content  dd,
.content  ol,
.content  ul,
.content  li,
.content fieldset,
.content  form,
.content  label,
.content  legend,
.content table,
.content  caption,
.content  tbody,
.content  tfoot,
.content  thead,
.content  tr,
.content  th,
.content  td {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;

/*  outline: 0;*/
}

/* =======================================
  タブレット／PC版
======================================= */
.content {font-size: 75%; filter: expression(document.execCommand("BackgroundImageCache", false, true)); }
.content img { vertical-align: text-bottom; -ms-interpolation-mode: bicubic;}
.content strong {font-weight: bold;}
.content ol,.content  ul {  list-style: none;}
.content table {border-collapse: collapse; /* border-collapse: separate;*/ border-spacing: 0; }
.content caption, .content th, .content td {font-weight: normal;text-align: left;vertical-align: top;}
.content blockquote:before, .content blockquote:after,
.content q:before, .content q:after {content: "";}
.content blockquote, q {quotes: "" "";}
.content a:focus {overflow: hidden;}
.content option {padding-right: 10px;}

/* =======================================
  CommonElements
======================================= */
.content a:link { text-decoration:none; color: #000;}
.content a:visited { text-decoration:none; color: #000;}
.content a:active { text-decoration:none; color: #000;}
.content a:hover { text-decoration:none; color: #000;}
.content #container {margin: 0 auto;width: 800px;text-align: center;}

/* #flickscroll--------------------------- */
.content #flickscroll {margin: 0 auto; width: 800px; height: 534px; text-align: left; position: relative; overflow: hidden; cursor: pointer; /*background-color:#eeeeee; コンデジ対応*/ }
.content #flickscroll ul {top: 0; left: 0; height: 534px; position: absolute; overflow: hidden; }
.content #flickscroll ul li {width: 800px; height: 534px; float: left; display: inline; overflow: hidden; }

/* #flickthumb
--------------------------- */
.content #flickthumb {margin: 10px auto; width: 700px; height: 100px; text-align: center; }
.content #flickthumb ul {width: 700px; height: 100px;}
.content #flickthumb ul li {width: 100px; height: 100px; float: left; cursor: pointer; display: inline; }
.content #flickthumb ul li.active {filter:alpha(opacity=100)!important; -moz-opacity: 1!important; opacity: 1!important; }

/* =======================================
  ClearFixElements
======================================= */
.content #flickscroll ul:after,
.content #flickthumb ul:after {content: "."; height: 0; clear: both; display: block; visibility: hidden; }
.content #flickscroll ul,
.content #flickthumb ul {display: none; overflow: hidden; }

/* =======================================
  flick
======================================= */
.content .thumbnail .active{filter: alpha(opacity=25)!important; -moz-opacity:0.25!important; opacity:0.25!important; }
.content .thumArrow {padding-top:18px; }
.content #backBtn  {display:block; background-color: #999999; background-image: url("/vcsImg/img/car/thumbnail-left.png"); background-position: left center; background-repeat: no-repeat; display: block; height: 52px; width: 17px; }
.content #backBtn:hover {background-color: #000000; background-image: url("/vcsImg/img/car/thumbnail-left.png"); background-position: left center; background-repeat: no-repeat; display: block; height: 52px; width: 17px; }
.content #nextBtn {background-color: #999999; background-image: url("/vcsImg/img/car/thumbnail-right.png"); background-position: right center; background-repeat: no-repeat; display: block; height: 52px; width: 17px; }
.content #nextBtn:hover {background-color: #000000; background-image: url("/vcsImg/img/car/thumbnail-right.png"); background-position: right center; background-repeat: no-repeat; display: block; height: 52px; width: 17px; }
.content .hidText               { display: block; text-indent: -9999px;}
.content .mainPhoto               { position: relative; width: 800px; height: 534px; text-align: center;}
.content .mainPhoto img             { width: 800px; height: 534px;}
.content .mainPhoto img#shipNoPhoto { width: 711px; height: 533px; margin-left: 44.5px;}
.content .commentDiv            { position: absolute; top: 474px; left: 0px; width: 800px; height: 60px; overflow: hidden;}
.content #commentArea           { position: absolute; left: 0; width: 800px; height: 60px; background-color: #000; overflow: hidden; filter: alpha(opacity=70); -moz-opacity: 0.7; opacity:0.7;}
.content #commentArea:hover       { filter: alpha(opacity=90); -moz-opacity: 0.9; opacity:0.9;}
.content #commentArea a         { display: block; padding: 6px 40px 0 10px; height: 54px; text-align: left; line-height: 16px; color: #ffffff !important; text-decoration: none; outline: none;  font-size:12px; word-break: break-all; background:url("/vcsImg/img/car/close.png") 770px center no-repeat;}
.content .thumbnailArea         { position: relative; margin-top: 15px; width: 800px; height: 53px;}
.content .pageArr             { position: absolute; top: 0px; width: 17px; height: 53px;}
.content #prevBtn.pageArr         { left: 0px;}
.content #nextBtn.pageArr         { right: 0px;}
.content .thumbnail             { position: absolute; top: 0; left: 25px; width: 750px; height: 52px; overflow: hidden;}
.content .thumsUl             { width: 760px; height: 52px; float: left;}
.content .thumsUl li              { float: left; width: 75px; height: 52px; margin-left:1px; background-size: contain;background-repeat: no-repeat;background-position: center center;}
.content .thumsUl li a            { display: block; width: 75px; height: 52px;}
/*20200401cyber前田修正　このファイル下部にも.content .thumsUl li a img の指定があったので、それも変更した。 */
/*.content .thumsUl li a img          { margin: 3px; width: 69px; height: 46px;}*/
.content .thumsUl li a img          {height: 46px; display: block; margin: auto; max-width: 69px;visibility: hidden;}

/*laravel移行時修正*/
.content .mainPhoto img {
  margin-left: 0 !important;
  width: 100%;
  height: auto !important;
  max-height: 600px !important;
}
.content #flickscroll ul li {
  text-align: center;
}

/* =======================================
  スマホ版
======================================= */
@media only screen and (max-width: 640px) {
.content  div,
.content  span,
.content  applet,
.content  object,
.content  iframe,
.content h1,
.content  h2,
.content  h3,
.content  h4,
.content  h5,
.content  h6,
.content  p,
.content  blockquote,
.content  pre,
.content a,
.content  abbr,
.content  acronym,
.content  address,
.content  big,
.content  cite,
.content  code,
.content del,
.content  dfn,
.content  em,
.content  font,
.content  img,
.content  ins,
.content  kbd,
.content  q,
.content  s,
.content  samp,
.content small,
.content  strike,
.content  strong,
.content  sub,
.content  sup,
.content  tt,
.content  var,
.content dl,
.content  dt,
.content  dd,
.content  ol,
.content  ul,
.content  li,
.content fieldset,
.content  form,
.content  label,
.content  legend,
.content table,
.content  caption,
.content  tbody,
.content  tfoot,
.content  thead,
.content  tr,
.content  th,
.content  td {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
/*  outline: 0;*/
}

.content {font-size: 75%;filter: expression(document.execCommand("BackgroundImageCache", false, true));}
.content img {vertical-align: text-bottom;-ms-interpolation-mode: bicubic;}
.content strong {font-weight: bold;}
.content ol, ul {list-style: none;}
.content table {border-collapse: collapse;/*  border-collapse: separate;*/border-spacing: 0;}
.content caption, th, td {font-weight: normal;text-align: left;vertical-align: top;}
.content blockquote:before, blockquote:after,
.content q:before, q:after {content: "";}
.content blockquote, q {quotes: "" "";}
.content a:focus {overflow: hidden;}
.content option {padding-right: 10px;}
/* =======================================
  CommonElements
======================================= */
.content a:link { text-decoration:none; color: #000;}
.content a:visited { text-decoration:none; color: #000;}
.content a:active { text-decoration:none; color: #000;}
.content a:hover { text-decoration:none; color: #000;}

.content #container {margin: 0 auto; width: 304px; text-align: center; }
/* #flickscroll
--------------------------- */
.content #flickscroll {margin: 0 auto; width: 304px; height: 203px; text-align: left; position: relative; overflow: hidden; cursor: pointer; /*background-color:#eeeeee; コンデジ対応*/ }
.content #flickscroll ul {top: 0; left: 0; height: 203px; position: absolute; overflow: hidden; }
.content #flickscroll ul li {width: 304px; height: 203px; float: left; display: inline; overflow: hidden; }

/* #flickthumb
--------------------------- */
.content #flickthumb {margin: 10px auto; width: 204px; height: 100px; text-align: center; }
.content #flickthumb ul {width: 204px; height: 100px; }
.content #flickthumb ul li {width: 100px; height: 100px; float: left; cursor: pointer; display: inline; }
.content #flickthumb ul li.active {filter:alpha(opacity=100)!important; -moz-opacity: 1!important; opacity: 1!important; }

/* =======================================
  ClearFixElements
======================================= */
.content #flickscroll ul:after,
.content #flickthumb ul:after {content: ".";height: 0;clear: both;display: block;visibility: hidden;}
.content #flickscroll ul,
.content #flickthumb ul {display: none;overflow: hidden;}

/* =======================================
  flick
======================================= */
.content .thumbnail .active{filter: alpha(opacity=25)!important;-moz-opacity:0.25!important;opacity:0.25!important;}
.content .thumArrow {padding-top:18px;}
.content #backBtn  {display:block; background-color: #999999; background-image: url("/vcsImg/img/car/thumbnail-left.png"); background-position: left center; background-repeat: no-repeat; display: block; height: 72px; width: 17px; }
.content #backBtn:hover {background-color: #000000; background-image: url("/vcsImg/img/car/thumbnail-left.png"); background-position: left center; background-repeat: no-repeat; display: block; height: 72px; width: 17px; } .content #nextBtn {background-color: #999999; background-image: url("/vcsImg/img/car/thumbnail-right.png"); background-position: right center; background-repeat: no-repeat; display: block; height: 72px; width: 17px; }
.content #nextBtn:hover {background-color: #000000; background-image: url("/vcsImg/img/car/thumbnail-right.png"); background-position: right center; background-repeat: no-repeat; display: block; height: 72px; width: 17px; }
.content .hidText     { display: block; text-indent: -9999px;}
.content .mainPhoto   { position: relative; width: 304px; height: 203px; text-align: center;}
/*laravel移行時に以下に修正。.content .mainPhoto img { width: 304px; height: 203px;}*/
.content .mainPhoto img { width: 100% !important; height: 100% !important; object-fit: contain;}
.content .mainPhoto img#shipNoPhoto { width: 270px; height: 203px; margin-left: 17px;}
.content .commentDiv      { position: absolute; top: 143px; left: 0px; width: 304px; height: 60px; overflow: hidden;}
.content #commentArea   { position: absolute; left: 0; width: 304px; height: 60px; background-color: #000; overflow: hidden; filter: alpha(opacity=70); -moz-opacity: 0.7; opacity:0.7;}
.content #commentArea:hover { filter: alpha(opacity=90); -moz-opacity: 0.9; opacity:0.9;}
.content #commentArea a { display: block; padding: 6px 40px 0 10px; height: 54px; text-align: left; line-height: 16px; color: #ffffff !important; text-decoration: none; outline: none;  font-size:12px; word-break: break-all; background:url("/vcsImg/img/car/close.png") 274px center no-repeat;}
.content .thumbnailArea { position: relative; margin-top: 15px; width: 304px; height: 72px;}
.content .pageArr { position: absolute; top: 0px; width: 17px; height: 72px;}
.content #prevBtn.pageArr { left: 0px;}
.content #nextBtn.pageArr { right: 0px;}
.content .thumbnail { position: absolute; top: 0; left: 22px; width: 260px; height: 72px; overflow: hidden;}
.content .thumsUl { width: 260px; height: 72px; float: left;}
.content .thumsUl li  { float: left; width: 52px; height: 35px;margin-top: 1px;margin-left: 0px;}
.content .thumsUl li a  { display: block; width: 52px; height: 36px;}
/*20200401cyber前田修正　このファイル上部にも.content .thumsUl li a img の指定があったので、それも変更した。 */
/*.content .thumsUl li a img  { margin: 2px; width: 48px; height: 32px;}*/
.content .thumsUl li a img  { margin: auto; height: 32px; display: block;max-width: 48px;}
}/* END スマホ版  */