@charset "utf-8";

/* nav */
#nav {
}

/* h2 */
#main h2 {
  margin-bottom: 35px;
}

/* contents */
#main #contents {
  padding: 0 0 15px;
  width: 620px;
}
#contents h3 {
  line-height: 1.2em;
  margin-bottom: 10px;
  color: #A20000;
  font-size: 12px;
}
#yjpb {
  margin-bottom: 35px;
}
#g_history {
  margin-bottom: 35px;
  margin-left: 7px;
}
#g_history li img {
  display: block;
  margin-bottom: 5px;
  -moz-box-shadow:2px 2px 4px rgba(200,200,200,200.65);
  -webkit-box-shadow:2px 2px 4px rgba(200,200,200,200.65);
  box-shadow:2px 2px 4px rgba(200,200,200,200.65);
}
#g_history li {
  list-style: none;
  float: left;
  margin-right: 5px;
  padding: 0 0 10px;
  margin-bottom: 20px;
}
#g_history li .note {
  font-size: 11px;
  line-height: 1.2em;
  display: block;
  text-align: center;
}

/* year */
#contents #year {
  padding: 0;
  font-size: 12px;
  line-height: 1em;
  margin: 0 0 50px;
  position: relative;
}
#year ul {
  margin-left: 17px;
}
#year ul li {
  font-size: 13px;
  list-style: none;
  line-height: 1em;
  margin-bottom: 10px;
  margin-right: 8px;
  width: 141px;
  float: left;
}
#year ul li a {
  padding: 12px 0;
  background-color: #E7E4E5;
  border: 3px solid #E7E4E5;
  display: block;
  text-align: center;
}
#year ul .active a {
  border: 3px solid #5A5A5A;
  color: #000000;
}

/* gra_box */
.gra_box {
  padding: 15px;
  position: relative;
  background-color: #E7E4E5;
  margin-bottom: 35px;
}
.gra_box .yj_cover {
  width: 135px;
  height: 190px;
}
.gra_box .summary {
  width: 435px;
}
.gra_box .summary .yj_info {
  padding-bottom: 35px;
}
.gra_box .summary .yj_info h3 {
  font-size: 12px;
  color: #A20000;
  line-height: 1.2em;
  margin-bottom: 5px;
}
.gra_box .summary .yj_info p {
  font-size: 11px;
  line-height: 1.5em;
}
.gra_box .summary .gra_title {
  position: relative;
  width: 435px;
  margin-bottom: 35px;
}
.gra_box .summary .gra_title:last-child {
  margin-bottom: 10px;
}
.gra_box .summary .gra_title .face {
  width: 118px;
  padding: 1px;
  height: 118px;
  background-color: #EA6DA4;
}
.gra_box .summary .gra_title h3 {
  font-size: 12px;
  line-height: 1em;
  font-weight: bold;
  color: #EA6DA4;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px dotted #000000;
}
.gra_box .summary .gra_title dl {
  width: 295px;
}
.gra_box .summary .gra_title dl dt {
  font-size: 20px;
  line-height: 1.2em;
  margin-bottom: 5px;
  font-weight: bold;
  padding-top: 5px;
}
.gra_box .summary .gra_title dl dt .group,
.gra_box .summary .gra_title dl dt .sub_name {
  font-size: 12px;
  line-height: 1.3em;
}
.gra_box .summary .gra_title dl dd {
  font-size: 12px;
  line-height: 1.3em;
  margin-bottom: 10px;
}
.gra_box .summary .gra_title dl .sns {
  text-align: right;
}
.gra_box .summary .gra_title dl .sns .pl_name {
  display: inline-block;
  padding-right: 5px;
}
.gra_box .summary .gra_title dl .sns a {
  display: inline-block;
  padding: 3px 5px;
  border: 1px solid #000000;
  font: 11px/1.2em 'Muli', sans-serif;
  text-decoration: none;
}
.gra_box .summary .gra_title dl .sns a:hover {
  background-color: #000000;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.gra_box .summary .gra_title dl .sns .tw {
  background-image: url(../img/icon_twitter.png);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 2px 1px;
  padding-left: 20px;
}
.gra_box .summary .gra_title dl .sns .inst {
  background-image: url(../img/icon_instagram.png);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 2px 1px;
  padding-left: 20px;
}
.gra_box .summary .gra_title .link {
  text-align: right;
  float: right;
  width: 295px;
}
.gra_box .summary .gra_title .link li {
  list-style: none;
  display: inline-block;
}
.gra_box .summary .gra_title .link a {
  padding: 10px 21px 10px 7px;
  display: block;
  font-size: 12px;
  font-weight: bold;
  line-height: 1em;
  color: #999999;
  background-color: #FFFFFF;
  cursor: default;
  margin-right: 0px;
  text-decoration: none;
  float: left;
  margin-left: 5px;
}
.gra_box .summary .gra_title .link a[id],
.gra_box .summary .gra_title .link a[href] {
  color: #EA6DA4;
  background-image: url(/gravure/assets/img/cursor.png);
  background-repeat: no-repeat;
  background-position: 95% center;
  cursor: pointer;
  transition: all .3s;
}
.gra_box .summary .gra_title .link a[id]:hover,
.gra_box .summary .gra_title .link a[href]:hover {
  opacity: 0.6;
}