@charset "utf-8";

#visual {
  background: url(../img/01/00.jpg) center center no-repeat;
  height: 390px;
}

.voice_02 #visual {
  background-image: url(../img/02/00.jpg);
}

.voice_03 #visual {
  background-image: url(../img/03/00.jpg);
}

.voice_04 #visual {
  background-image: url(../img/04/00.jpg);
}

.voice_05 #visual {
  background-image: url(../img/05/00.jpg);
}

.voice_06 #visual {
  background-image: url(../img/06/00.jpg);
}

.voice_07 #visual {
  background-image: url(../img/07/00.jpg);
}

.voice_08 #visual {
  background-image: url(../img/08/00.jpg);
}

.voice_09 #visual {
  background-image: url(../img/09/00.jpg);
}

#visual2 {
  width: 980px;
  margin: 0 auto;
}

#visual2 img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.pc_only {
  display: block;
}

.sp_only {
  display: none;
}

/* -------------------------------------------------- */

.voice .en_font{
/*font-family: 'Montserrat';*/
font-weight: 500;
}

#title {
  background-color: #f5f5f5;
  padding: 80px 0 72px;
  text-align: center;
}

#title img {
  height: 18px;
}

#title .caution_year {
  font-size: 88%;
  color: #888;
  margin: -65px auto 70px;
  text-align: right;
  width: 100%;
  max-width: 1400px;
  padding: 0 1em;
}

#title .caution_year_980 {
  max-width: 980px;
}

#title .name {
  font-size: 112%;
  line-height: 1.33;
  margin-top: 14px;
}

#title h2 {
  font-size: 175%;
  line-height: 1.92;
  margin-top: 34px;
}

#title .lead {
  font-size: 125%;
  line-height: 1.6;
  margin-top: 28px;
}

/* -------------------------------------------------- */
.block {
  margin: 120px auto 0;
  width: 980px;
}

.block img {
  display: block;
  width: 100%;
}

.block .sp {
  display: none;
}

.block p {
  font-size: 125%;
  line-height: 1.9;
  margin: 51px 0 -10px;
  text-align: justify;
  text-justify: inter-ideograph;
  width: 100%;
}

.ie .block p {
  font-feature-settings: normal;
  letter-spacing: -.03em !important;
}

/* -------------------------------------------------- */
#more {
  line-height: 21px;
  margin: 120px 0;
  text-align: center;
}

#more a {
  display: inline-block;
}

#more a:nth-of-type(2) {
  margin-top: 35px;
}

#more a::before {
  background: url(../img/icon_more.png) 0 0 no-repeat;
  background-size: contain;
  content: '';
  display: inline-block;
  height: 21px;
  margin-right: .5em;
  vertical-align: middle;
  width: 19px;
}

#more a::after {
  background: url(../img/icon_blank.png) 0 0 no-repeat;
  background-size: contain;
  content: '';
  display: inline-block;
  height: 16px;
  margin: 0 0 0 .8em;
  vertical-align: middle;
  width: 17px;
}

/* -------------------------------------------------- */
#list {
  background-color: #f6f6f6;
  padding: 80px 0;
}

#list ul {
  margin: 0 auto;
  overflow: hidden;
  width: 984px;
}

#list li {
  background: #fff;
  float: left;
  margin: 0 17px;
  width: 294px;
}

#list li.new {
  position: relative;
}

#list li.new a::after {
  position: absolute;
  top: 5px;
  left: 5px;
  content: "NEW";
  color: #c00;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 4px;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid #ccc;
  letter-spacing: 0;
  line-height: 1;
}

#list li:nth-child(n+4) {
  margin-top: 20px;
}

#list li a {
  display: table;
  overflow: hidden;
  text-align: left;
  width: 100%;
}

#list li .thumb,
#list li .info {
  display: table-cell;
  vertical-align: middle;
}

#list li .thumb {
  width: 102px;
}

#list li .thumb img {
  display: block;
  width: 100%;
}

#list li .thumb .sp {
  display: none;
}

#list li .info {
  font-size: 75%;
  letter-spacing: .03em;
  line-height: 1.5;
  padding-left: 18px;
}

#list li .model,
#list li .name {
  display: block;
}

#list li .name {
  padding-top: 8px;
}

#list .active {
  background-color: #ccc;
}

#list .active .thumb {
  background-color: #000;
}

#list .active .thumb img {
  opacity: .8;
}

/* -------------------------------------------------- */
#back {
  background-color: #f6f6f6;
  line-height: 21px;
  padding-bottom: 60px;
  text-align: center;
}

#back a::before {
  background: url(../img/icon_back.png) 0 0 no-repeat;
  background-size: contain;
  content: '';
  display: inline-block;
  height: 21px;
  margin-right: .5em;
  vertical-align: middle;
  width: 19px;
}

@media screen and (max-width: 767px) {
  #visual {
    background-image: url(../img/01/00_sp.jpg);
    background-size: cover;
    height: 410px;
  }

  .voice_02 #visual {
    background-image: url(../img/02/00_sp.jpg);
  }

  .voice_03 #visual {
    background-image: url(../img/03/00_sp.jpg);
  }

  .voice_04 #visual {
    background-image: url(../img/04/00_sp.jpg);
  }

  .voice_05 #visual {
    background-image: url(../img/05/00_sp.jpg);
  }

  .voice_06 #visual {
    background-image: url(../img/06/00_sp.jpg);
  }

  .voice_07 #visual {
    background-image: url(../img/07/00_sp.jpg);
  }

  .voice_08 #visual {
    background-image: url(../img/08/00_sp.jpg);
  }

  .voice_09 #visual {
    background-image: url(../img/09/00_sp.jpg);
  }

  .voice_10 #visual {
    background-image: url(../img/10/00_sp.jpg);
  }

  .voice_11 #visual {
    background-image: url(../img/11/00_sp.jpg);
  }

  .voice_12 #visual {
    background-image: url(../img/12/00_sp.jpg);
  }

  #visual2 {
    display: none;
  }

  .pc_only {
    display: none;
  }

  .sp_only {
    display: block;
  }

  /* -------------------------------------------------- */
  #title {
    padding: 40px 0 35px;
  }

  #title .caution_year {
    font-size: 90%;
    margin: -30px auto 33px;
    max-width: inherit;
  }

  #title img {
    height: 13px;
  }

  #title .name {
    font-size: 108%;
    margin-top: 8px;
  }

  #title h2 {
    line-height: 1.68;
    margin-top: 18px;
  }

  #title .lead {
    font-size: 116%;
    line-height: 1.78;
    margin-top: 14px;
  }

  /* -------------------------------------------------- */
  .block {
    margin: 75px auto 0;
    width: 78.6%;
  }

  .block .pc {
    display: none;
  }

  .block .sp {
    display: block;
  }

  .block h3 {
    font-size: 116%;
    line-height: 1.79;
    margin-top: 35px;
  }

  .block p {
    font-size: 116%;
    line-height: 1.78;
    margin: 29px 0 -5px;
  }

  /* -------------------------------------------------- */
  #more {
    font-size: 100%;
    line-height: 17px;
    margin: 75px 0;
  }

  #more a::before {
    background: url(../img/icon_more_sp.png) 0 0 no-repeat;
    background-size: contain;
    height: 17px;
    margin-right: .6em;
    width: 16px;
  }

  #more a::after {
    background: url(../img/icon_blank_sp.png) 0 0 no-repeat;
    background-size: contain;
    height: 13px;
    margin-left: .6em;
    width: 13px;
  }

  /* -------------------------------------------------- */
  #list {
    padding: 40px 0;
  }

  #list ul {
    width: 94%;
  }

  #list li {
    background: #fff url(../img/icon_more_sp.png) right 15px center no-repeat;
    background-size: 16px;
    float: none;
    margin: 0 auto;
    width: 100%;
  }

  #list li:nth-child(n+2) {
    margin-top: 10px !important;
  }

  #list li .thumb {
    width: 140px;
  }

  #list li .thumb .pc {
    display: none;
  }

  #list li .thumb .sp {
    display: block;
  }

  #list li .info {
    font-size: 100%;
    padding-left: 20px;
  }

  #list li .name {
    font-size: 108%;
    line-height: 1.61;
  }

  /* -------------------------------------------------- */
  #back {
    font-size: 100%;
    line-height: 17px;
    padding-bottom: 40px;
  }

  #back a::before {
    background: url(../img/icon_back_sp.png) 0 0 no-repeat;
    background-size: contain;
    height: 17px;
    margin-right: .6em;
    width: 16px;
  }
}

.block p.caution_custom {
  font-size: 80%;
  line-height: 1.5;
  margin-top: 65px;
  margin-left: 1em;
  text-indent: -1em;
}