@charset "utf-8";

/* custom property */
:root {
  --mc-red: #c7000b;
  --mc-blue: #0080CC;
}

#header {
  background-color: #FFF;
}

/* inner */
.inner {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

/* title */
.area_title {
  background-image: linear-gradient(180deg,rgba(190,0,4,1.00) 0%,rgba(0,0,0,1.00) 100%);
}
.area_title,
.area_title h1 {
  margin: 0;
  padding: 0;
}
.area_title h1 img {
  margin: 0 0 -2px;
  width: 100%;
}

/* term */
.area_term {
  background-color: var(--mc-red);
}
.area_term .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
.area_term h2 {
  flex-basis: 78px;
  line-height: 0px;
  margin: 0 8px;
  padding: 0;
}
.area_term .txt_date {
  flex-basis: 312px;
  margin: 0 8px;
}
.area_term .txt_notice {
  flex-basis: 316px;
  margin: 0 8px;
}
.area_term img {
  width: 100%;
}

/* works */
.area_works {
  background-color: #FFF;
  color: #000;
  margin: 0;
  padding: 56px 0;
}
.area_works h2 {
  margin: 0 0 48px;
  text-align: center;
}
.area_works h2 img {
  width: 192px;
}
.area_works .box_fl {
  display: flex;
  flex-wrap: wrap;
}
.area_works .box_wroks {
  text-align: center;
}
.area_works .box_new .box_wroks {
  margin: 0 auto 56px;
  width: 632px;
}
.area_works .box_fl .box_wroks {
  flex-basis: 228px;  
  margin: 0 16px 48px 0;
}
.area_works .box_fl .box_wroks:nth-of-type(4n) {
  margin: 0 0 48px;
}
.area_works .box_wroks a {
  background-color: #FFFFFF;
  border: 2px solid rgba(0,0,0,0.25);
  border-radius: 10px;
  box-shadow: 1px 1px 6px rgba(0,0,0,0.30);
  display: block;
  padding: 16px 8px;
  text-decoration: none;
}
.area_works .box_wroks a[href]:hover {
  background-color: rgba(255,245,5,0.30);
  border-color: rgba(232,0,21,1.00);
  box-shadow: 1px 1px 6px rgba(2,131,204,1.00);
}
.area_works .box_wroks a dl dt {
  display: inline-block;
  font-family: kozuka-gothic-pro, sans-serif;
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1em;
  margin: 0 0 4px;
  background-color: #000000;
  padding: 8px 24px;
  border-radius: 16px;
  color: #FFF697;
}
.area_works .box_wroks a dl dd {
  font-size: 1.3rem;
  line-height: 1.4em;
  margin: 0;
}
.area_works .box_wroks a dl dd.el_works {
  font-size: 1.6rem;
  line-height: 1.2em;
  margin: 0 0 4px;
}
.area_works .box_wroks a dl dd.el_txtja {
  font-size: 1.3rem;
  line-height: 1.2em;
  margin: 0 0 8px;
}
.area_works .box_wroks a dl dd.el_oshinagaki {
  color: #DDD;
  font-size: 1.1rem;
  line-height: 1.2em;
  margin: 0 0 8px;
}
.area_works .box_wroks a dl dd.el_date {
  border-top: 1px dotted #000000;
  font-size: 1.3rem;
  line-height: 1.2em;
  padding: 8px 0 0;
}
.area_works .box_wroks figure {
  margin: 0 0 8px;
}
.area_works .box_wroks a figure img {
  border: 2px solid #000000;
}
.area_works .box_new .box_wroks a figure img {
  width: 600px;
}
.area_works .box_fl .box_wroks a figure img {
  width: 200px;
}

/* comics */
.area_comics {
  background-color: rgba(199, 0, 11, 0.10);
  color: #000;
  margin: 0;
  padding: 56px 0;
}
.area_comics h2 {
  margin: 0 0 48px;
  text-align: center;
}
.area_comics h2 img {
  width: 252px;
}
.area_comics .newest {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 48px;
  padding: 0;
}
.area_comics .newest .cover {
  flex-basis: 240px;
  padding: 0 24px;
}
.area_comics .newest .cover img {
  box-shadow: 3px 3px 5px rgba(0,0,0,0.35);
  width: 100%;
}
.area_comics .newest .comics_info {
  flex-basis: 492px;
  padding: 0 24px;
}
.area_comics .newest .comics_info .txt_release {
  margin-bottom: 24px;
}
.area_comics .newest .comics_info .txt_release img {
  width: 240px;
}
.area_comics .newest .comics_info dl {
  margin: 0 0 32px;
  padding: 0;
}
.area_comics .newest .comics_info dl dt {
  font-family: kozuka-gothic-pro, sans-serif;
  font-weight: 900;
  font-size: 3.2rem;
  line-height: 1.2em;
  margin: 0 0 4px;
}
.area_comics .newest .comics_info dl .txt_author {
  border-bottom: 3px solid var(--mc-blue);
  font-family: kozuka-gothic-pro, sans-serif;
  font-weight: 900;
  font-size: 1.8rem;
  line-height: 1.2em;
  margin: 0;
  padding: 0 0 8px;
}
.area_comics .newest .comics_info dl .txt_price {
  font-size: 1.4rem;
  line-height: 1.2em;
  margin: 0;
  padding: 8px 0 0;
}
.area_comics .newest .comics_info .btn {
  margin-bottom: 20px;
  text-align: right;
}
.area_comics .newest .comics_info .btn a {
  background-color: #ffff00;
  border-radius: 10px;
  box-shadow: 1px 1px 6px rgba(0,0,0,0.50);
  color: #c7000b;
  display: inline-block;
  font: 800 2.2rem/1em kozuka-gothic-pro, sans-serif;
  padding: 24px 24px 20px;
  text-align: center;
  text-decoration: none;
  opacity: 1.0;
}
.area_comics .newest .comics_info .btn a:hover {
  box-shadow: 0px 0px 0px;
  opacity: 0.6;
}
.area_comics .released h3 {
  background-color: var(--mc-red);
  margin: 0 0 20px;
  padding: 8px 0;
  text-align: center;
}
.area_comics .released h3 img {
  width: 268px;
}
.area_comics .released .comic_list {
  display: flex;
  flex-wrap: wrap;
}
.area_comics .released .comic_list .comic {
  flex-basis: 20%;
  margin: 0 24px 32px;
}
.area_comics .released .comic_list .comic img {
  box-shadow: 3px 3px 5px rgba(0,0,0,0.35);
  width: 100%;
}

/* basue info */
#basue_info {
  background-color: #FFF;
  margin-bottom: 24px;
  padding: 32px 0;
}
#basue_info ul {
  display: flex;
}
#basue_info ul li {
  flex-basis: 320px;
  list-style: none;
  margin: 0 4px;
}
#basue_info ul li img {
  width: 100%;
}