/* WP wp-block-library-inline-css の代替 */
html img[class*="wp-image-"] { height: auto; max-width: 100%; }

/* _screen.css comic関連定義（screen.min.cssに未収録） */
.mainArea_inner.comic img {
  height: auto;
  max-width: 100%;
}

.nav__comic, .nav__comic-other { text-align: left; }
.nav__comic li { display: inline-block; width: 19%; }
.nav__comic-other li { display: inline-block; width: 23.96107%; }
.nav__comic li:not(:last-child), .nav__comic-other li:not(:last-child) { margin-right: 1%; }
.nav__comic li:hover, .nav__comic-other li:hover {
  animation: flipButton .5s ease-in 0s 1 normal none running;
}
.nav__comic li a img, .nav__comic-other li a img { max-width: 100%; }

.nav__comic-btns { text-align: center; }
.nav__comic-btns li { display: inline-block; margin: 0 10px; vertical-align: top; }

.ttl__comic-subhead { font-size: 2rem; line-height: 1.8; color: #ff8098; }

.mainArea_inner p.box__comic-lead {
  background: #fadee4;
  padding: 1rem;
  font-size: 1.3rem;
  line-height: 1.6;
  max-width: 90%;
  margin: 0 auto;
}

@keyframes flipButton {
  0%   { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
}

/* course_pickup (top/common.css より) */
.course_pickup { background-color: #fafafa; padding: 40px 0; }
.course_pickup h3 { color: #604C3F; font-size: 28px; line-height: 1.5; margin-bottom: 30px; text-align: center; }
.course_pickup_list { background-color: #fff; height: 360px; position: relative; }
.course_pickup_list_inner { padding: 10px; text-align: left; }
.course_pickup_list_title { font-size: 16px; font-weight: bold; margin-bottom: 10px; }
.course_pickup_list_tag { margin-bottom: 10px; }
.course_pickup_list_tag span {
  background-color: #d63d59; border-radius: 5px; color: #fff;
  display: inline-block; margin-right: 5px; padding: 3px 5px;
}
.course_pickup_list_link { position: absolute; bottom: 10px; width: calc(100% - 20px); }
.course_pickup_list_link a {
  background: url("/assets/img/top/pickup_arrow_right.png") no-repeat right center;
  background-size: 19px; color: #333; display: block;
}
.course_pickup_list_link a:hover { opacity: 0.8; }

/* top_feature (top/common.css より) */
.top_feature { padding: 40px 0; }
.top_feature ul li { text-align: left; }
.top_feature ul li a { color: #333; }
.top_feature h3 { color: #604C3F; font-size: 28px; line-height: 1.5; margin-bottom: 30px; text-align: center; }
.top_feature h3::after { background: none; }
.top_feature_slider { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; padding: 0; width: 100%; list-style: none; }
.top_feature_slider::after { content: ''; display: block; width: calc(96% / 4); }
.top_feature_slider li { width: calc(96% / 4); margin-bottom: 10px; }
.top_feature_slider li > a > img { margin-bottom: 0 !important; max-width: 100%; height: auto; }
.top_feature_link { text-align: center; margin-top: 20px; }
.top_feature_link a { color: #333; }

/* ユーティリティ */
.cf::after { content: ""; display: table; clear: both; }
.mb10 { margin-bottom: 10px !important; }

/* レスポンシブ */
@media screen and (max-width: 480px) {
  .nav__comic li { width: 48%; margin-bottom: 5px; }
  .nav__comic-other li { width: 48%; margin-bottom: 5px; }
  .nav__comic-btns li { display: block; margin: 5px 0; }
  .top_feature_slider li { width: 48%; }
  .course_pickup_list { height: auto; }
  .course_pickup_list_link { position: static; width: auto; }
  .mainArea_inner p.box__comic-lead { max-width: 100%; }
  .ttl__comic-subhead { font-size: 1.5rem; }
}