@charset "utf-8";

/***************************************************
  cm.css
***************************************************/
.contents-inner.position {
   position: relative;
}
.box-title-01 .name {
  font-size: 34px;
  font-weight: bold;
  line-height: 1em;
}
.ttl-01-box {
  padding: 0 0;
  margin: 0 auto;
}
.box-title-01 .ttl-back {
  position: absolute;
  top: 5px;
  right: 20px;
  padding-right: 20px;
  background: url(/shared/img/svg/cur02.svg)no-repeat center right;
  background-size: 12px 19px;
}
.box-title-01 .ttl-back span {
  font-weight: bold;
}
.box-title-01 + .ttl-02 {
  border-top: 3px solid #e10000;
  font-size: 26px;
  font-weight: bold;
  padding: 20px 0 35px 0;
}
/* CM history */
.list-anchor li {
  float: left;
  width: 23.4%;
  margin: 0 2% 20px 0;
  box-shadow: 0 0 3px 1px rgba(0,0,0,.2);
}
.list-anchor li {
  float: left;
  width: 23.4%;
  margin: 0 2% 20px 0;
  box-shadow: 0 0 3px 1px rgba(0,0,0,.2);
}
.list-anchor li:nth-child(4n) {
  margin-right: 0px;
}
.list-anchor li a {
  text-align: center;
  display: block;
  padding: 16px 0 17px 0;
  background: url(/shared/img/svg/ar07.svg) 95% 50% no-repeat;
}
.list-anchor li a:hover {
  text-decoration: none;
  background-color: rgba(0,0,0,0.5);
  color: #FFF;
  background-image: url(/shared/img/svg/ar06.svg);
  background-position: 95% 50%;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 640px) {
  .list-anchor li a:hover {
    text-decoration: none;
    background-color: inherit;
    color: #000;
    background-image: url(/shared/img/svg/ar07.svg);
    background-position: 95% 50%;
    background-repeat: no-repeat;
  }
}
.box-tvcm-history{
  padding-top: 33px;
}
.domini {
  display: block;
  font-size: 26px;
  margin: 0 0 15px;
  border-bottom: 1px solid #918c89;
  padding-bottom: 12px;
  font-weight: bold;
  margin-top: 40px;
}
.history-main-area {
  margin-top: 25px;
  float: left;
  width: 31.5%;
  margin-right: 2.75%;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.history-main-area:nth-child(3n) {
  margin-right: 0;
}
.history-main-area.history-main-area-audio {
  width: 65.75%;
  display: block;
  margin-right: 0;
}
.history-main-area.history-main-area-audio figure img {
  max-height: 190px;
}
.history-title p.main-ttl {
  margin-top: 10px;
  font-size: 15px;
  font-weight: bold;
}
.history-title p.sub-ttl {
  font-size: 13px;
  font-weight: bold;
}
.overview-txt {
  margin-top: 15px;
  font-size: 13px;
  line-height: 21px;
}
.history-txt p {
  margin: 15px 0;
  font-size: 13px;
  color: #65562d;
}
.no-nav-side > .ttl-02 {
  padding-top: 0;
  margin-bottom: 40px;
  margin-top: 30px;
  font-size: 34px;
  font-weight: bold;
  line-height: 1em;
}
.no-nav-side.top-line{
  border-top: 3px solid #e00000;
}
@media only screen and (max-width: 640px) {
  .list-anchor li {
    float: left;
    width: 48%;
    margin: 0 4% 20px 0;
    box-shadow: 0 0 3px 1px rgba(0,0,0,.2);
  }
  .history-main-area.history-main-area-audio {
    width: 100%;
  }
  .list-anchor li:nth-child(2n) {
    margin-right: 0px;
  }
  .no-nav-side{
    padding: 0 20px;
  }
  .box-title-01 {
    margin-bottom: 20px;
  }
  .box-title-01 .name {
    font-size: 22px;
  }
  .box-title-01 .ttl-back {
    font-size: 13px;
    top: 0;
    padding-right: 13px;
    background-size: 7px 14px;
    position: static;
    text-align: right;
    width: 100%;
    display: block;
    margin: 10px 0 2px;
  }
  .box-title-01 + .ttl-02 {
    margin: 0 -20px;
    padding: 30px 20px;
    font-size: 20px;
  }
  .history-main-area,.history-main-area:nth-child(3n) {
    margin-top: 15px;
    width: 47%;
    margin-bottom: 20px;
    margin-right: 6%;
  }
  .history-main-area:nth-child(2n) {
    margin-right: 0;
  }
  .no-nav-side > .ttl-02 {
    padding-top: 15px;
    font-size: 20px;
    margin: 15px 0 35px;
  }
  .domini{
    padding-bottom: 9px;
    font-size: 17px;
    margin-top: 0;
  }
}

/* jplayer */
#jp_container_1 a {
  -webkit-transition: inherit;
  transition: inherit;
  -webkit-backface-visibility: inherit;
  backface-visibility: inherit;
}
a.jp-play,
a.jp-pause {
  width: 12px;
  height: 14px;
  margin-left: 6px;
  margin-top: 4px;
}
a.jp-play,
a.jp-play:hover {
  background: url(/enjoy/cmhistory/img/sound01.png) no-repeat center;
  background-size: 11px 14px;
}
a.jp-pause,
a.jp-pause:hover {
  background: url(/enjoy/cmhistory/img/sound02.png) no-repeat center;
  background-size: 12px 14px;
}
div.jp-audio {
  width: 100%;
  border: none;
}
div.jp-audio ul.jp-controls {
  width: auto;
  padding: 5px 5px 5px 5px;
}
div.jp-audio div.jp-type-single div.jp-interface {
  height: 32px;
  background-color: #fafafa;
}
div.jp-audio div.jp-type-single div.jp-time-holder {
  left: 32px;
  width: 71px;
  top: 7px;
}
div.jp-audio div.jp-type-single div.jp-progress {
  left: 125px;
  width: calc(100% - 230px);
  top: 5px;
  height: 22px;
  background: transparent;
  overflow: inherit;
}
div.jp-current-time,
div.jp-duration {
  width: 33px;
  font-family: "Noto Sans Japanese";
  font-size: 0.8em;
  font-style: inherit;
}
div.jp-current-time + span {
  font-size: .6em;
  float: left;
  margin-top: 1px;
}
div.jp-seek-bar {
  background: url(/enjoy/cmhistory/img/sound07.png) repeat-x center top 10px;
}
div.jp-play-bar {
  background: url(/enjoy/cmhistory/img/sound05.png) repeat-x center top 10px;
  position: relative;
}
div.jp-play-bar:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #3f86f8;
  position: absolute;
  top: 5px;
  right: -6px;
}
div.jp-audio div.jp-volume-bar {
  right: 8px;
  top: 11px;
  height: 10px;
  left: inherit;
  background: url(/enjoy/cmhistory/img/sound06.png) repeat-x center top 4px;
  overflow: inherit;
}
div.jp-volume-bar-value {
  background: url(/enjoy/cmhistory/img/sound05.png) repeat-x center top 4px;
  height: 10px;
  position: relative;
}
div.jp-volume-bar-value:after{
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #3f86f8;
  position: absolute;
  top: -1px;
  right: -6px;
}
div.jp-audio div.jp-type-single a.jp-mute,
div.jp-audio div.jp-type-single a.jp-unmute {
  margin-left: 0;
  margin-top: 0;
}
a.jp-mute,
a.jp-unmute {
  width: 18px;
  height: 18px;
}
a.jp-unmute,
a.jp-unmute:hover {
  background: url(/enjoy/cmhistory/img/sound04.png);
}
a.jp-mute,
a.jp-mute:hover {
  background: url(/enjoy/cmhistory/img/sound03.png);
}
div.jp-audio div.jp-type-single li.volume-right {
  top: 7px;
  right: 66px;
  position: absolute;
}

@media only screen and (max-width: 640px) {
  div.jp-audio div.jp-type-single div.jp-interface {
    height: 32px;
  }
  div.jp-audio ul.jp-controls {
    width: 100%;
  }
  div.jp-audio div.jp-type-single div.jp-time-holder {
    width: 70px;
  }
  div.jp-current-time {
    width: 33px;
  }
  div.jp-duration {
    width: 31px;
  }
  div.jp-audio div.jp-type-single div.jp-progress {
    left: 120px;
    width: calc(100% - 138px);
    top: 5px;
  }
  div.jp-audio div.jp-type-single li.volume-right,
  div.jp-audio div.jp-volume-bar{
    display: none!important;
  }
}