@charset "UTF-8";
/* layout
----------------------------- */
.co_container_box_inner {
  width: 965px;
  margin: 0 auto;
}
.contents_right {
  width: 770px;
  margin: 0 auto;
  padding-bottom: 35px;
  float: right;
  line-height: 1.5;
  text-align: left;
}
.contents_right * {
  box-sizing: border-box;
  color: #333;
}
/* common
----------------------------- */
.imgBlock {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.imgBlock a {
  display: block;
}
.imgBlock a img:hover {
  opacity: 1;
}
.underline {
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
}
.indent_1em {
  padding-left: 1em;
  text-indent: -1em;
}
.contents_right a {
  transition: opacity .2s;
  text-decoration: none;
  word-break: break-all;
}
.contents_right a:hover {
  opacity: .6;
}
.contents_right a,
.contents_right a:hover {
  color: #333;
}
.contents_right ul {
  list-style: none;
}
.contents_right .br_hidden {
  display: none;
}
.contents_right .pc_hidden {
  display: none;
}
.section_area {
  max-width: 680px;
  margin: 40px auto 0;
}
.section_title {
  position: relative;
  margin: 16px auto 0;
  padding: 8px;
  border-radius: 16px 16px 0 0;
  background: #ffd743;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.icon_sale::after {
  content: "値下げ";
  display: inline-block;
  margin-top: 4px;
  padding: 2px 4px 1px;
  border: 1px solid #ef0156;
  border-radius: 2px;
  color: #ef0156;
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}
/* endArea
----------------------------- */
.endArea {
  margin: 0 auto;
  padding: 40px 0;
  text-align: center;
}
.endArea p {
  color: #333;
  font-size: 18px;
}
/* headArea
----------------------------- */
.headArea {
  margin: 0 auto;
}
.headArea img {
  width: 100%;
  max-width: 770px;
  height: auto;
}
/* termArea
----------------------------- */
.termArea {
  padding: 8px;
  background: #1e90ff;
  line-height: 1.5;
}
.termArea * {
  color: #fff;
}
.termArea p {
  font-size: 18px;
  text-align: center;
}
.termArea .date {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: .05em;
}
/* リード文
----------------------------- */
.text_lead {
  margin-top: 24px;
  line-height: 1.8;
  text-align: center;
}
.lead_1 {
  color: #0056c1;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: .05em;
}
.lead_2 {
  font-size: 18px;
}
/* 今日のおすすめ作品
----------------------------- */
.today_area {
  padding: 24px 80px;
  border-radius: 40px;
  background: #fff4ca;
  text-align: center;
}
.today_area a {
  display: block;
  color: #333;
}
.today_area h1 {
  width: 80%;
  margin: auto;
  padding: 0 16px 8px;
  border-bottom: 2px dashed #ffd743;
  font-size: 17px;
  text-align: center;
}
.today_area h1 .anniv {
  display: block;
  font-size: 14px;
  font-weight: normal;
}
.today_area .today_title {
  font-size: 20px;
}
.today_area img {
  max-width: 180px;
  border: 1px solid #eee;
}
.today_area [class^="today_"],
.today_area [class*=" today_"] {
  margin-top: 16px;
}
.today_area .icon_sale::after {
  margin-top: 12px;
}
.today_area .today_title,
.today_area .today_author {
  margin-top: 4px;
}
.today_area .today_author {
  font-size: 14px;
}
.today_area .today_author a {
  display: inline-block;
  color: #06f;
}
.today_area .today_comment {
  margin-top: 8px;
  font-size: 14px;
  text-align: left;
}
/* 今月のカレンダー
----------------------------- */
.cal_area {
  margin-top: 64px;
  text-align: center;
}
.cal_area .section_title::before,
.cal_area .section_title::after {
  content: "●";
  display: block;
  position: absolute;
  top: -20px;
  width: 25px;
  height: 24px;
  padding-top: 2px;
  border-radius: 50% 50% 0 0;
  background: #ffd743;
  color: #fff;
  font-family: sans-serif;
  font-size: 10px;
}
.cal_area .section_title::before {
  left: 20%;
}
.cal_area .section_title::after {
  right: 20%;
}
.cal_month {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 4px 8px;
  border: 2px solid #ffd743;
  border-top: none;
}
.cal_month li {
  flex: 0 0 calc(100% / 7);
  font-size: 18px;
  line-height: 1.8;
}
.cal_month li:nth-child(-n+7) {
  font-weight: bold;
}
.cal_month li a,
.cal_month li a:hover {
  display: block;
  color: #06f;
  text-decoration: underline;
}
/* 今月のタイトル一覧
----------------------------- */
.cal_list_area {
  margin-top: 40px;
}
.cal_t_item:not(:first-child) {
  padding-top: 40px;
}
.cal_t_item .t_date {
  position: relative;
  z-index: 1;
  padding: 6px;
  background: #ffd743;
  letter-spacing: .05em;
  text-align: center;
}
.cal_t_item .t_date .day_title {
  font-size: 20px;
}
.cal_t_item .t_date .day_anniv {
  font-size: 15px;
  font-weight: normal;
}
.cal_t_item .t_title {
  display: flex;
  margin-top: 16px;
}
.cal_t_item .t_title a {
  display: block;
  color: #333;
  text-decoration: none;
}
.cal_t_item .thum_box {
  flex: 0 0 30%;
}
.cal_t_item .text_box {
  flex: 0 0 70%;
}
.cal_t_item .t_name {
  font-size: 20px;
  font-weight: bold;
}
.cal_t_item .t_author {
  margin-top: 2px;
  font-size: 15px;
}
.cal_t_item .t_author a {
  display: inline-block;
  color: #06f;
}
.cal_t_item .t_story {
  margin-top: 6px;
  font-size: 14px;
}
.cal_t_item .t_story {
  display: -webkit-box;
  max-height: calc(4em * 1.5); /* line-clampがサポート外のときの措置 */
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.cal_t_item .t_comment {
  margin-top: 12px;
  padding: 16px;
  border-radius: 8px;
  background: #fff4ca;
  font-size: 14px;
}
/* アーカイブボタン
----------------------------- */
.btn_cal_archive {
  margin: 40px 4%;
}
.btn_cal_archive a {
  display: block;
  width: 80%;
  height: 80px;
  margin: auto;
  border: 7px double #fff;
  border-radius: 40px;
  background: #1e90ff;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 66px;
  text-align: center;
  text-decoration: none;
}
.btn_cal_archive a:hover {
  color: #fff;
}
.info_area {
  padding: 16px;
  border: 1px solid #ccc;
}
.info_area li {
  position: relative;
  padding-left: 1em;
  font-size: 13px;
  text-indent: -1em;
}
.info_area li::before {
  content: "・";
}
/* アーカイブリスト
----------------------------- */
.cal_archive_area .section_title {
  background: #0081cc;
  color: #fff;
}
.archive_list {
  display: flex;
  flex-wrap: wrap;
  margin: 4px -4px;
}
.archive_list li {
  flex: 0 0 25%;
  height: 64px;
  padding: 4px;
  text-align: center;
}
.archive_list li .archive_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 4px;
  border: 2px solid #f9cf46;
  border-radius: 4px;
  font-weight: bold;
}
.archive_list li .archive_item.current {
  background: #f9cf46;
}
.archive_list li .archive_item.close {
  border: none;
  background: #ccc;
  color: #777;
}
.archive_list li .archive_item.close * {
  color: #777;
}
.archive_list li .archive_item span {
  display: block;
  font-size: 10px;
  line-height: 1;
}