@charset "UTF-8";
/*
Theme Name: melt2023
Author: Shogakukan
Author URI: https://melt.shogakukan.co.jp/
*/

@charset "utf-8";

/* base */

html {
  font-size: 0.8125em;
}
body {
    padding: 0;
    background: none;
    font-family: "Hiragino Kaku Gothic ProN","游ゴシック Medium","游ゴシック",YuGothic,"Noto Sans CJK JP",Meiryo,Roboto,sans-serif;
}
section.container {
  margin-bottom: 5rem;
}
ul {
  list-style: none;
}
img {
  vertical-align: middle;
}
header h1 {
  margin-bottom: 0;
}
a:hover {
  text-decoration: none;
}
.content__inner {
  max-width: 1000px;
}
.content__inner p {
  margin-bottom: 1rem;
}
.content__inner section {
  margin-bottom: 3rem;
}

/* content */

body {
  color: #9e8684;
  font-size: 1.4rem;
}

/* Bulmaのルールを上書き */

a {
  color: #9e8684;
  transition: .3s;
}

a:hover {
  color: #9e8684;
  opacity: .8;
}

.font-zenmaru {
  font-family: 'Zen Maru Gothic', sans-serif;
}

.font-josefin {
  font-family: 'Josefin Sans', sans-serif;
}

.section-melt {
  padding: 4rem 2rem;
  margin-top: 5rem;
  position: relative;
}

/* テキストリンク */

.text-link-arrow {
  position: relative;
  padding-right: 15px;
  font-weight: bold;
}

.text-link-arrow::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-top: solid 3px;
  border-right: solid 3px;
  transform: rotate(45deg);
  margin: auto;
}

.text-pink {
  color: #fb7ca2;
  font-weight: bold;
}

.text-brown {
  color: #9e8684;
  font-weight: bold;
}

/* ボタン */

.button-melt {
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  height: 50px;
  display: grid;
  place-items: center;
  padding: .8rem;
}

.button-pink {
  background-color: #fb7ba2;
}

.button-brown {
  background-color: #9e8684;
}

.button-blue {
  background-color: #5dd6d2;
}

.button-pink:hover,
.button-brown:hover,
.button-blue:hover {
  color: #fff;
  opacity: .8;
}

.button-white {
  background-color: #fff;
  border: solid 1px #9e8684;
  color: #9e8684;
  max-width: 370px;
}

/* 背景色 */

.background-brown {
  background-color: #fcf5f4;
}

.background-mint {
  background-color: #edfefb;
}

.background-yellow {
  background-color: #fffced;
}

.background-green {
  background-color: #f8ffdf;
}

/* 背景角丸 */

.background-radius {
  border-radius: 20px;
  margin: 2rem auto;
  padding: 1.5rem;
}

/* タイトル */

.title-melt-area {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  max-width: 950px;
  width: 95%;
}

.title-melt {
  color: #fff;
  font-size: 2.2rem;
  text-align: center;
  padding: .8rem;
  margin: auto;
  border-radius: 10px;
  position: relative;
}

.title-pink {
  background-color: #fb7ba2;
}

.title-pink::before {
  background-image: url(/wp-content/themes/cms202008/assets/img/melt2023/arrow_pink.png);
}

.title-blue {
  background-color: #5dd6d2;
}

.title-blue::before {
  background-image: url(/wp-content/themes/cms202008/assets/img/melt2023/arrow_blue.png);
}

.title-brown {
  background-color: #9e8684;
}

.title-brown::before {
  background-image: url(/wp-content/themes/cms202008/assets/img/melt2023/arrow_brown.png);
}

.title-orange {
  background-color: #ff9d55;
}

.title-orange::before {
  background-image: url(/wp-content/themes/cms202008/assets/img/melt2023/arrow_orange.png);
}

.title-arrow {
  margin-bottom: 30px;
}

.title-arrow::before {
  content: '';
  display: inline-block;
  width: 50px;
  height: 18px;
  background-size: contain;
  position: absolute;
  top: 88%;
  left: 10%;
}

/* TOPページ */
/* ヘッダー */

.melt-header {
  position: relative;
  z-index: 10;
}

.melt-header-grid {
  max-width: 1000px;
  width: 100%;
  margin: auto;
  padding: 1rem;
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
}

.melt-area-logo {
  grid-area: 1 / 1 / 2 / 2;
}

.melt-area-icon {
  grid-area: 1 / 2 / 2 / 3;
}

.melt-area-anniversary {
  grid-area: 2 / 1 / 3 / 3;
}

.logo-container {
  display: flex;
  align-items: center;
}

.header-logo-image {
  width: 76px;
}

.header-theme-image {
  width: 100px;
  margin-left: 1rem;
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.icon-container a {
  width: 30px;
  margin-left: 1rem;
}

.melt-area-anniversary img {
  max-width: 670px;
  width: 100%;
  display: block;
  margin: auto;
}

/* ヘッダーメニュー */

.header-menu {
  text-align: center;
  font-size: 1.2rem;
  border-top: solid 1px #9e8684;
  border-bottom: solid 1px #9e8684;
}

.melt-menu-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  max-width: 1000px;
  margin: auto;
  transition: opacity .5s ease-in-out;
}

.melt-menu-list .menu-new {
  grid-area: 1 / 1 / 2 / 3;
  border-right: solid 1px #9e8684;
  border-bottom: solid 1px #9e8684;
}

.melt-menu-list .menu-next {
  grid-area: 1 / 3 / 2 / 5;
  border-right: solid 1px #9e8684;
  border-bottom: solid 1px #9e8684;
}

.melt-menu-list .menu-book {
  grid-area: 1 / 5 / 2 / 7;
  border-bottom: solid 1px #9e8684;
}

.melt-menu-list .menu-all {
  grid-area: 2 / 1 / 3 / 3;
  border-right: solid 1px #9e8684;
}

.melt-menu-list .menu-message {
  grid-area: 2 / 3 / 3 / 5;
  border-right: solid 1px #9e8684;
}

.melt-menu-list .menu-entry {
  grid-area: 2 / 5 / 3 / 7;
}

.melt-menu-list-item a {
  color: #9e8684;
  display: block;
  width: 100%;
  height: 100%;
  padding: .5rem 0;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}

/* ヘッダーメニュー　近日配信なし */

.melt-menu-list.menu-nonext .menu-next {
  display: none;
}

.melt-menu-list.menu-nonext .menu-book {
  grid-area: 1 / 3 / 2 / 5;
  border-right: solid 1px #9e8684;
}

.melt-menu-list.menu-nonext .menu-all {
  grid-area: 1 / 5 / 2 / 7;
  border-right: none;
  border-bottom: solid 1px #9e8684;
}

.melt-menu-list.menu-nonext .menu-message {
  grid-area: 2 / 1 / 3 / 4;
}

.melt-menu-list.menu-nonext .menu-entry {
  grid-area: 2 / 4 / 3 / 7;
}

/* NEWS */

.news-area {
  max-width: 1000px;
  margin: auto;
}

.news-title {
  font-size: 2.8rem;
  vertical-align: middle;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}

.news-text {
  padding: 1rem 1rem 2rem;
}

/* 更新タイトル */

.melt-book-grid {
  max-width: 900px;
  margin: auto;
  padding: 2rem 0;
  display: grid;
  gap: 2rem 1rem;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
}

.melt-area-cover {
  grid-area: 1 / 1 / 2 / 2;
}

.melt-area-content {
  grid-area: 1 / 2 / 2 / 3;
}

.melt-area-button {
  grid-area: 2 / 1 / 3 / 3;
}

.melt-book-title {
  line-height: 1.2;
}

.melt-area-cover img {
  border: solid 1px #9e8684;
}

.label-new {
  display: inline-block;
  background-color: #fb7ba2;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  padding: .4rem .5rem;
}

.label-story {
  border: solid 1px #9e8684;
  margin-right: 1rem;
  padding: .2rem .5rem;
}

.label-book {
  background-color: #9e8684;
  color: #fff;
  margin-right: 1rem;
  padding: .4rem .5rem;
}

.readmore-text {
  overflow: hidden;
  position: relative;
  -webkit-transition: .2s;
  transition: .2s;
  word-break: break-word;
}

.is-text-link {
  color: #9d8683;
  font-weight: bold;
  text-decoration: none;
}

/* これまでの更新 */

.accordion-content {
  display: none;
  padding-top: 2rem;
}

.accordion-title {
  position: relative;
}

.button-accordion {
  cursor: pointer;
  margin: auto;
  transition: .3s;
}

.button-accordion:hover {
  color: #9e8684;
  opacity: .8;
}

.accordion-title::after {
  border-right: solid 2px #9d8683;
  border-top: solid 2px #9d8683;
  content: '';
  display: block;
  height: 8px;
  position: absolute;
  right: 25px;
  top: 38%;
  transform: rotate(135deg);
  transition: transform .3s ease-in-out, top .3s ease-in-out;
  width: 8px;
}

.accordion-title.open::after {
  top: 45%;
  transform: rotate(-45deg);
}

/* 近日配信 */

.next-area {
  max-width: 900px;
  margin: 0 auto 1rem;
  border-bottom: dashed 1px #9e8684;
}

.next-area:last-child {
  border-bottom: none;
}

.next-area p {
  margin-bottom: 1rem;
}

/* 単行本一覧 */

.melt-slick {
  max-width: 1200px;
  margin: 2rem auto;
  font-size: 1.2rem;
}

.melt-slick .ecs-slick {
  margin-left: -2rem;
  margin-right: -2rem;
}

.melt-slick .ecs-slick .slick-list {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}


.melt-item-title {
  color: #9e8684;
  font-weight: bold;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: .5rem;
  height: calc( 1.3em * 2 );
  line-height: 1.3;
}

.melt-slick .slick-prev,
.melt-slick .slick-next {
  display: none;
}

/* 作品一覧 */

.melt-link-container {
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2rem auto;
}

.item-banner {
  width: 46%;
  margin: .5rem;
}

/* メッセージ・ご意見 */

.melt-contact-container {
  max-width: 1000px;
  margin: 2rem auto;
}

/* フッター */

.melt-sns-list {
  max-width: 600px;
  margin: 1rem auto;
  padding: 0 2rem;
}


.melt-sns-list li:first-child {
  border-top: solid 1px #9e8684;
  border-bottom: solid 1px #9e8684;
}

.melt-sns-list li + li {
  border-bottom: solid 1px #9e8684;
}

.melt-sns-link {
  display: flex;
  width: 100%;
  padding: .8rem;
  align-items: center;
  color: #9e8684;
  position: relative;
}

.melt-sns-link::after {
  content: '';
  width: 10px;
  height: 10px;
  border: none;
  border-top: solid 2px #9d8683;
  border-right: solid 2px #9d8683;
  position: absolute;
  top: 50%;
  right: 1rem;
  margin-top: -4px;
  transform: rotate(45deg);
}

.melt-sns-icon {
  width: 40px;
  margin-right: 1rem;
}

/* 作品一覧ページ */
.p4s2-banner-h-melt__main ul {
  margin: 25px 0 50px 0;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8em;
}
.p4s2-banner-h-melt__item {
  width: calc((100% / 2) - 8px);
  margin: 4px;
  padding: 10px;
  background: #fffced;
  border-radius: 10px;
}
.p4s2-banner-h-melt__link {
  display: table;
  margin-bottom: 5px;
}
.p4s2-banner-h-melt__box01 {
  width: 30%;
  display: table-cell;
  vertical-align: middle;
}
.p4s2-banner-h-melt__box02 {
  width: 70%;
  padding-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
.p4s2-banner-h-melt__box02_title {
  font-weight: bold;
}
.p4s2-banner-h-melt__box02 > p {
  margin-bottom: 0;
}
.p4s2-banner-h-melt__box02_author {

}
.p4s2-banner-h-melt__links {
  display: flex;
}
.p4s2-banner-h-melt__links .button-melt{
  height: auto;
  width: 100%;
  margin: 2px;
}
.page-top {
  text-align: center;
}
.page-top .button-melt.button-pink {
  max-width: 400px;
  background: none;
  border: 2px solid #fb7ba2;
  color: #fb7ba2;
  margin: 0 auto;
}


/* 作品詳細ページ */
.workPost__content__movie {
  text-align: center;
}
.workPost__content__movie iframe {
  max-width: 90%;
}
.workPost__info__inner {
  display: flex;
  padding: 2%;
}
.workPost__info__inner .col1 {
  width: 40%;
  text-align: center;
}
.workPost__info__inner .col1 img {
  width: 90%;
}
.workPost__info__inner .col1 .workPost__link .button-melt {
  margin: 1rem 0;
  font-size: 1.0rem;
}
.workPost__info__inner .col2 {
  width: 60%;
  padding: 0 4%;
}
.workPost__info__inner .col2 .work__title {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}
.workPost__info__inner .col2 .work__author {
  font-size: 1.6rem;
  text-align: center;
  font-weight: bold;
}
.band-melt {
  color: #fff;
  width: 300px;
  text-align: center;
  margin: 0 auto 1em;
}
.band-pink {
  background: #fb7ba2;
}
.work-post-author-massage__inner {
  display: flex;
}
.work-post-author-massage__inner .col1 {
  width: 25%;
  text-align: center;
}
.work-post-author-massage__inner .col1 .author-name {
  font-weight: bold;
  font-size: 1.4rem;
  margin-top: 0.8rem;
}
.work-post-author-massage__inner .col2 {
  width: 75%;
  padding-left: 2%;
}
.title-twitter {
  text-align: center;
}
.timeline-twitter>div {
  margin: 0 auto;
}
.topic-path {
  display: none;
}
/* 作家詳細 */
.author-post {
  /* margin-top: 8rem; */
}
.author-post .author-post__image {
  text-align: center;
}
.author-post-container__inner {
  margin-top: 10rem;
}
.author-post .author-post__name {
  text-align: center;
  color: #fff;
  padding-top: 10rem;
}
.author-post h2 {
  text-align: center;
}
.author-post > p {
  max-width: 70%;
  margin:  0 auto;
}
.authorPost__info__inner {
  display: flex;
}
.authorPost__info__inner .col1 {
  width: 25%;
  text-align: center;
}
.authorPost__info__inner .col1 .author-name {
  font-weight: bold;
  font-size: 1.4rem;
  margin-top: 0.8rem;
}
.authorPost__info__inner .col2 {
  width: 75%;
  padding-left: 2%;
}
.workPost__info__inner .col1 {
  width: 40%;
  text-align: center;
}
.workPost__info__inner .col1 img {
  width: 90%;
}
.workPost__info__inner .col1 .workPost__link .button-melt {
  margin: 1rem 0;
  font-size: 1.0rem;
}
.workPost__info__inner .col2 {
  width: 60%;
  padding: 0 4%;
}
.workPost__info__inner .col2 .work__title {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}
.workPost__info__inner .col2 .work__author {
  font-size: 1.6rem;
  text-align: center;
  font-weight: bold;
}
.author-post__comics .workPost__info__inner {
  align-items: center;
  justify-content: center;
}
.author-post__kv {
  background: #fb7ba2;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}
.author-post__kv .author-post__image {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  max-width: 220px;
}



@media screen and (min-width: 767px) {
  body {
    font-size: 1.2rem;
  }

  /* タイトル */

  .title-arrow::before {
    width: 90px;
    height: 31px;
  }

  /* 背景角丸 */

  .background-radius {
    padding: 2rem 3rem;
  }

  /* TOPページ */
  /* ヘッダー */

  .melt-header-grid {
    grid-template-columns: 23% 30% auto;
    grid-template-rows: 1fr;
  }

  .melt-area-icon {
    grid-area: 1 / 3 / 2 / 4;
  }

  .melt-area-anniversary {
    grid-area: 1 / 2 / 2 / 3;
    padding-left: 1rem;
  }

  .header-logo-image {
    width: 100px;
  }

  .header-theme-image {
    width: 120px;
  }

  .icon-container a {
    width: 42px;
  }

  /* ヘッダーメニュー */

  .header-menu {
    font-size: 1rem;
  }

  .melt-menu-list,
  .melt-menu-list.menu-nonext {
    grid-template-rows: 1fr;
  }

  .melt-menu-list {
    grid-template-columns: repeat(6, 1fr);
  }

  .melt-menu-list.menu-nonext {
    grid-template-columns: repeat(5, 1fr);
  }

  .melt-menu-list .menu-new,
  .melt-menu-list .menu-next,
  .melt-menu-list .menu-book,
  .melt-menu-list .menu-all,
  .melt-menu-list .menu-message,
  .melt-menu-list .menu-entry,
  .melt-menu-list.menu-nonext .menu-new,
  .melt-menu-list.menu-nonext .menu-next,
  .melt-menu-list.menu-nonext .menu-book,
  .melt-menu-list.menu-nonext .menu-all,
  .melt-menu-list.menu-nonext .menu-message,
  .melt-menu-list.menu-nonext .menu-entry {
    grid-area: auto;
  }

  .melt-menu-list .menu-new,
  .melt-menu-list .menu-next,
  .melt-menu-list .menu-book,
  .melt-menu-list.menu-nonext .menu-all {
    border-bottom: none;
  }

  .melt-menu-list .menu-new {
    border-left: solid 1px #9e8684;
  }

  .melt-menu-list .menu-book,
  .melt-menu-list .menu-entry,
  .melt-menu-list.menu-nonext .menu-all {
    border-right: solid 1px #9e8684;
  }

  /* 更新タイトル */

  .melt-book-grid {
    gap: 2rem;
    grid-template-columns: 1fr 3fr;
  }

  .melt-area-cover {
    grid-area: 1 / 1 / 3 / 2;
  }

  .melt-area-content {
    grid-area: 1 / 2 / 2 / 3;
  }

  .melt-area-button {
    grid-area: 2 / 2 / 3 / 3;
  }

  /* 単行本一覧 */

  .melt-slick-wrapper {
    padding: 0 4rem;
  }

  .melt-slick .ecs-slick .slick-list {
    padding-left: 0;
    padding-right: 0;
  }
  
  .melt-slick .slick-prev,
  .melt-slick .slick-next {
    display: block;
    width: 30px;
    height: 30px;
  }

  .melt-slick .slick-prev {
    left: -40px;
  }

  .melt-slick .slick-next {
    right: -40px;
  }

  /* 作品一覧 */

  .item-banner {
    width: 30%;
    margin: .5rem;
  }

  /* メッセージ・ご意見 */

  .melt-contact-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .item-contact {
    width: 46%;
    margin: .5rem;
  }

  /* 作品一覧ページ */
  .p4s2-banner-h-melt__item {
    width: calc((100% / 4) - 8px);
    margin: 4px;
  }
  /* 作品詳細ページ */
  .workPost__info__inner .col1 .workPost__link .button-melt {
    font-size: 1.2rem;
  }
}

@media only screen and (min-width: 767px) and (max-width: 1000px) {
  .melt-menu-list .menu-new,
  .melt-menu-list.menu-nonext .menu-new {
    border-left: none;
  }

  .melt-menu-list .menu-entry,
  .melt-menu-list.menu-nonext .menu-entry {
    border-right: none;
  }
}