@CHARSET "UTF-8";
@import url('../column.css');

.promobook h2.contentTitle{
  background: url("../../../../../_webroot/img/page/newcolumn/promobook/bg_ttl_column_promobook_h1.png");
  border: none;
  padding:0;
  margin: 0;
  background-color: #ffe98d;
  text-align: center;
}
.cmnBody{
  height: 3200px;
}
.promobook h2.contentTitle img{
  max-width: 100%;
}
.promobook .contentWrap{
  background: #ffe98d;
  overflow: hidden;
  padding-bottom: 7rem;
}
div.leadText p{
  margin: 1.5rem 1rem;
  line-height: 28px;
  font-size: 0.9em;
}
ul.promobookList{
  padding-left: 0;
  margin: .75rem;
}
ul.promobookList li{
  list-style-type: none;
}
ul.promobookList li+li{
  margin-top: .5rem;
}
ul.promobookList a{
  background: #fff3c0;
  border: 4px double #cec521;
  display: flex;
  justify-content: space-between;
  padding: .75rem 0;
  position: relative;
}
ul.promobookList a:before{
  border: 10px solid transparent;
  border-top: 10px solid #cec521;
  border-left: 10px solid #cec521;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}
ul.promobookList a:after{
  border: 10px solid transparent;
  border-bottom: 10px solid #cec521;
  border-right: 10px solid #cec521;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
}

ul.promobookList figure{
  margin: 0 0 0 .5rem;
  width: 60px;
  position: relative;
}
ul.promobookList figure:before{
  border: 5px solid transparent;
  border-top: 5px solid #fff3c0;
  border-left: 5px solid #fff3c0;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}
ul.promobookList figure img{
  height: auto;
}
ul.promobookList div{
  width: calc(98% - 60px - .5rem);
  line-height: 1.2;
}
ul.promobookList a span{
  display: block;
}
ul.promobookList a .job{
  font-size: .8rem;
}
ul.promobookList a .name{
  font-size: 1.2em;
  font-weight: bold;
}
ul.promobookList a .leadText{
  font-size: .9em;
  margin-top: 9px;
}
ul.promobookList a .date{
  font-size: 1rem;
  text-align: right;
  margin: .25rem .5rem 0;
}

/* ------ PC.css ----- */
@media screen and (min-width: 768px){
  @import url('../column_pc.css');
  .innerWrap{
    width: 960px;
    margin: 0 auto;
    padding: 2rem 3rem;
  }
  }