@charset "UTF-8";

/*
 * 京極堂ページ更新用・追加CSS
 * 既存の style.css / font.css より後に読み込んでください。
 */

/* 2026年8月追加メインビジュアル */
header .top-img {
  width: 100%;
  max-width: 1000px;
  padding: 0;
  margin: 0 auto;
  line-height: 1;
}

/* 既存CSSの980px制限を上書きし、PCメインビジュアルを1000pxにする */
header,
header > section {
  max-width: 1000px !important;
}

header .top-img img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

header .-pc {
  display: block;
}

header .-sp {
  display: none;
}

/* シリーズ見出し：PC/SPで画像を切り替える */
#books_header .books_header img {
  width: 100%;
  height: auto;
  margin: 0;
}

#books_header .books_header .pc {
  display: block;
}

#books_header .books_header .sp {
  display: none;
}

/* BOOK10・BOOK13後の区切り画像 */
#BOOKS > h1 {
  width: 100%;
  max-width: 748px;
  padding: 0;
  margin: 4% auto;
  line-height: 1;
}

#BOOKS > h1 img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

@media screen and (max-width: 768px) {
  header .-pc {
    display: none;
  }

  header .-sp {
    display: block;
  }

  #books_header .books_header .pc {
    display: none;
  }

  #books_header .books_header .sp {
    display: block;
  }

  #BOOKS > h1 {
    width: 92%;
    margin: 7% auto;
  }
}

/* 新刊2冊：#WBOOKS 内だけに限定 */
#WBOOKS,
#WBOOKS * {
  box-sizing: border-box;
}

#WBOOKS {
  width: 100%;
  max-width: 1000px;
  height: auto;
  padding: 24px 24px 40px;
  margin: 0 auto;
  color: #211c18;
  background: #e7e7e7;
}

#WBOOKS .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#WBOOKS .new,
#WBOOKS .daiichi-dan-book {
  width: 100%;
  padding: 0;
  margin: 0;
}

#WBOOKS .wbooks-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

#WBOOKS .wbooks-item {
  min-width: 0;
  padding: 0;
  margin: 0;
}

#WBOOKS .wbooks-card {
  display: grid;
  grid-template-columns: minmax(210px, 230px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  height: 100%;
  min-height: 330px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#WBOOKS .wbooks-cover-link {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

#WBOOKS .wbooks-cover-link:hover {
  opacity: 0.78;
}

#WBOOKS .wbooks-cover-link:focus-visible,
#WBOOKS .wbooks-purchase:focus-visible {
  outline: 3px solid #9b211f;
  outline-offset: 3px;
}

#WBOOKS .wbooks-cover {
  position: relative;
  display: block;
  width: 100%;
}

#WBOOKS .wbooks-book-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid #cfc7bc;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

#WBOOKS .wbooks-new-icon {
  position: absolute;
  z-index: 2;
  top: -14px;
  left: -14px;
  display: block;
  width: min(72px, 44%);
  height: auto;
  margin: 0;
}

#WBOOKS .wbooks-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

#WBOOKS .dai-ichi {
  padding: 0 0 10px;
  margin: 0 0 14px;
}

#WBOOKS .dai-ichi h3 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  padding: 0;
  margin: 0;
  color: #211c18;
  font-weight: 700;
  line-height: 1.35;
  justify-items: normal;
}

#WBOOKS .dai-ichi h3 small {
  display: block;
  padding: 0;
  margin: 0;
  font-size: 16.2px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

#WBOOKS .dai-ichi h3 strong {
  display: block;
  padding: 0;
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
    align-items: center;
    gap:4px
}

#WBOOKS .dai-ichi h3 span {
  padding: 0;
  margin: 0;
  font-size: 16.2px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#WBOOKS .dai-ichi-title {
  padding: 0;
  margin: 0 0 12px;
  /* color: #7b1c1a; */
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}

#WBOOKS .dai-ichi-txt {
  padding: 0;
  margin: 0 0 20px;
  color: #3c342e;
  font-size: 14px;
  line-height: 1.4;
  text-align: justify;
      letter-spacing: 0px;
    font-weight: 700;
}

#WBOOKS .dai-ichi-txt b {
  font-weight: 700;
}

#WBOOKS .wbooks-purchase {
  display: block;
  width: 100%;
  padding: 12px 10px;
  margin: auto 0 0;
  color: #fff;
  background: #c8a03a;
  border: 1px solid #c8a03a;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  transition: color 0.2s ease, background-color 0.2s ease;
}

#WBOOKS .wbooks-purchase::after {
  content: "\00a0›";
}

#WBOOKS .wbooks-purchase:hover {
  color: #8a6816;
  background: #fff;
}

/*
 * BOOK10以降は区切り画像がDOMに入るため、既存の :nth-child による
 * 左右交互配置がずれる。IDで配置を固定し、購入ボタンも常時表示する。
 */
#BOOK10 > div > a,
#BOOK11 > div > a,
#BOOK12 > div > a,
#BOOK13 > div > a,
#BOOK14 > div > a {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 275px);
  grid-template-rows: auto 1fr;
  column-gap: 28px;
  align-items: start;
}

#BOOK11 > div > a,
#BOOK13 > div > a {
  grid-template-columns: minmax(210px, 275px) minmax(0, 1fr);
}

/* BOOK10以降も上段の書籍と同様、ホバー時に下線を表示しない */
#BOOK10 a,
#BOOK11 a,
#BOOK12 a,
#BOOK13 a,
#BOOK14 a,
#BOOK10 a:hover,
#BOOK11 a:hover,
#BOOK12 a:hover,
#BOOK13 a:hover,
#BOOK14 a:hover,
#BOOK10 a:hover *,
#BOOK11 a:hover *,
#BOOK12 a:hover *,
#BOOK13 a:hover *,
#BOOK14 a:hover * {
  text-decoration: none !important;
}

#BOOK10 > div > a > span,
#BOOK11 > div > a > span,
#BOOK12 > div > a > span,
#BOOK13 > div > a > span,
#BOOK14 > div > a > span {
  width: 100% !important;
  min-width: 0;
  float: none !important;
}

#BOOK10 > div > a > .left img,
#BOOK11 > div > a > .left img,
#BOOK12 > div > a > .left img,
#BOOK13 > div > a > .left img,
#BOOK14 > div > a > .left img {
  display: block;
  width: 100%;
  height: auto;
}

/* 偶数巻相当：本文を左、書影を右 */
#BOOK10 > div > a > .left,
#BOOK12 > div > a > .left,
#BOOK14 > div > a > .left {
  grid-column: 2;
  grid-row: 1 / 3;
}

#BOOK10 > div > a > .right,
#BOOK12 > div > a > .right,
#BOOK14 > div > a > .right {
  grid-column: 1;
  grid-row: 1;
}

/* 奇数巻相当：書影を左、本文を右 */
#BOOK11 > div > a > .left,
#BOOK13 > div > a > .left {
  grid-column: 1;
  grid-row: 1 / 3;
}

#BOOK11 > div > a > .right,
#BOOK13 > div > a > .right {
  grid-column: 2;
  grid-row: 1;
}

#BOOK10 > div > a > em,
#BOOK11 > div > a > em,
#BOOK12 > div > a > em,
#BOOK13 > div > a > em,
#BOOK14 > div > a > em {
  display: block !important;
  box-sizing: border-box !important;
  position: static !important;
  inset: auto !important;
  float: none !important;
  clear: none !important;
  align-self: end;
  justify-self: stretch;
  width: 100% !important;
  max-width: none !important;
  min-height: 44px;
  padding: 12px 10px !important;
  margin: 20px 0 0 !important;
  color: #fff !important;
  background: #c8a03a !important;
  border: 1px solid #c8a03a;
  border-radius: 0 !important;
  text-align: center;
  font-style: normal;
  line-height: 1.4;
  transform: none !important;
}

#BOOK10 > div > a > em,
#BOOK12 > div > a > em,
#BOOK14 > div > a > em {
  grid-column: 1;
  grid-row: 2;
}

/* 書影が右側になる3冊は、既存の偶数項目用ボタン指定を完全に解除する */
#BOOK10 > div > a > em,
#BOOK12 > div > a > em,
#BOOK14 > div > a > em {
  right: auto !important;
  left: auto !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

#BOOK11 > div > a > em,
#BOOK13 > div > a > em {
  grid-column: 2;
  grid-row: 2;
}

/* 各書籍の指定ボタンカラー */
#BOOK10 > div > a > em {
  background: #8f3e3e !important;
  border-color: #8f3e3e !important;
}

#BOOK11 > div > a > em {
  background: #d02069 !important;
  border-color: #d02069 !important;
}

#BOOK12 > div > a > em {
  background: #e28f4c !important;
  border-color: #e28f4c !important;
}

#BOOK13 > div > a > em {
  background: #81ca33 !important;
  border-color: #81ca33 !important;
}

#BOOK14 > div > a > em {
  background: #ad915f !important;
  border-color: #ad915f !important;
}

@media screen and (max-width: 768px) {
  #WBOOKS {
    padding: 28px 18px 34px;
  }

  #WBOOKS .wbooks-list {
    gap: 28px;
  }

  #WBOOKS .wbooks-card {
    grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
    gap: 20px;
    padding: 22px;
    min-height: 0;
    background: rgba(255, 255, 255, 0.45);
  }

  #WBOOKS .dai-ichi h3 strong {
    font-size: clamp(20px, 4.8vw, 26px);
  }

  #WBOOKS .dai-ichi h3 {
    column-gap: 8px;
  }

  #WBOOKS .dai-ichi h3 small {
    font-size: 13px;
  }

  #BOOK10 > div > a,
  #BOOK11 > div > a,
  #BOOK12 > div > a,
  #BOOK13 > div > a,
  #BOOK14 > div > a {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 34%);
    column-gap: 20px;
    position: relative !important;
  }

  #BOOK11 > div > a,
  #BOOK13 > div > a {
    grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
  }

  /* SPの購入ボタンは既存書籍と同じ、幅60％・下端固定 */
  #BOOK10 > div > a > em,
  #BOOK11 > div > a > em,
  #BOOK12 > div > a > em,
  #BOOK13 > div > a > em,
  #BOOK14 > div > a > em {
    display: block !important;
    position: absolute !important;
    width: 60% !important;
    max-width: 60% !important;
    height: auto !important;
    min-height: 0;
    padding: 2% 0 !important;
    margin: 10% 0 0 !important;
    border-radius: 1px !important;
    bottom: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: auto;
    justify-self: auto;
  }

  /* 書影が右：ボタンは左 */
  #BOOK10 > div > a > em,
  #BOOK12 > div > a > em,
  #BOOK14 > div > a > em {
    inset: auto auto 0 0 !important;
  }

  /* 書影が左：ボタンは右 */
  #BOOK11 > div > a > em,
  #BOOK13 > div > a > em {
    inset: auto 0 0 auto !important;
  }
}

@media screen and (max-width: 520px) {
  #WBOOKS {
    padding: 28px 14px;
  }

  #WBOOKS .wbooks-card {
    grid-template-columns: minmax(104px, 36%) minmax(0, 1fr);
    gap: 16px;
    padding: 18px 14px;
  }

  #WBOOKS .wbooks-new-icon {
    top: -10px;
    left: -8px;
    width: min(58px, 46%);
  }

  #WBOOKS .dai-ichi {
    padding-bottom: 8px;
    margin-bottom: 10px;
  }

  #WBOOKS .dai-ichi h3 strong {
    font-size: clamp(17px, 5.2vw, 23px);
  }

  #WBOOKS .dai-ichi-title {
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.5;
  }

  #WBOOKS .dai-ichi-txt {
    font-size: 13px;
    line-height: 1.75;
    text-align: left;
  }

  #WBOOKS .wbooks-purchase {
    padding: 11px 6px;
    font-size: 13px;
  }
}

@media screen and (max-width: 380px) {
  #WBOOKS .wbooks-card {
    grid-template-columns: 1fr;
  }

  #WBOOKS .wbooks-cover-link {
    width: min(66%, 210px);
    margin: 0 auto;
  }
}

/* SPではシリーズ全冊の購入ボタン領域を100%幅に統一 */
@media screen and (max-width: 500px) {
  article#BOOKS section div a em {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/*
 * 書籍一覧のリンク領域
 * 書影と購入ボタンだけをリンクにし、紹介文は通常テキストとして配置する。
 */
#BOOKS section .book-entry {
  display: grid !important;
  grid-template-columns: minmax(210px, 275px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 28px;
  align-items: start;
  position: relative;
  overflow: hidden;
}

#BOOKS section .book-cover-link {
  display: block !important;
  grid-column: 1;
  grid-row: 1 / 3;
  width: 100% !important;
  min-width: 0;
  margin: 0;
  position: static !important;
  text-decoration: none !important;
}

#BOOKS section .book-cover-link .left {
  display: block;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}

#BOOKS section .book-cover-link img {
  display: block;
  width: 100%;
  height: auto;
}

#BOOKS section .book-entry > .right {
  display: block;
  grid-column: 2;
  grid-row: 1;
  width: 100% !important;
  min-width: 0;
  float: none !important;
}

#BOOKS section .book-entry > .right h3 {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0 0 1%;
}

#BOOKS section .book-entry > .right h3 small {
  display: block;
  padding: 0 5% 0 0;
  margin: 0;
  font-size: 0.9rem;
}

#BOOKS section .book-entry > .right h3 strong {
  display: block;
  padding: 0;
  margin: 0;
  font-size: 2.2rem;
}

#BOOKS section .book-entry > .right b {
  display: block;
  padding: 0;
  margin: 0.5% 0 1%;
  font-size: 1.4rem;
}

#BOOKS section .book-entry > .right p {
  display: block;
  padding: 0;
  margin: 1% 0 3%;
  font-size: 1rem;
}

#BOOKS section .book-purchase-link {
  display: block !important;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  width: 100% !important;
  max-width: none !important;
  margin: 20px 0 0 !important;
  position: static !important;
  inset: auto !important;
  float: none !important;
  text-decoration: none !important;
}

#BOOKS section .book-purchase-link em {
  display: block !important;
  box-sizing: border-box !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto;
  min-height: 44px;
  padding: 12px 10px !important;
  margin: 0 !important;
  text-align: center;
  text-decoration: none !important;
  font-style: normal;
  line-height: 1.4;
}

/* 偶数冊目：本文を左、書影を右 */
#BOOKS section:nth-of-type(even) .book-entry {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 275px);
}

#BOOKS section:nth-of-type(even) .book-cover-link {
  grid-column: 2;
}

#BOOKS section:nth-of-type(even) .book-entry > .right,
#BOOKS section:nth-of-type(even) .book-purchase-link {
  grid-column: 1;
}

@media screen and (max-width: 768px) {
  #BOOKS section .book-entry {
    grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
    column-gap: 20px;
  }

  #BOOKS section:nth-of-type(even) .book-entry {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 34%);
  }
}

@media screen and (max-width: 500px) {
  #BOOKS section .book-entry {
    grid-template-rows: auto auto;
    padding-bottom: 0 !important;
  }

  /* 個別指定されていた下余白も解除 */
  #BOOK10 .book-entry,
  #BOOK11 .book-entry,
  #BOOK12 .book-entry,
  #BOOK13 .book-entry,
  #BOOK14 .book-entry {
    padding-bottom: 0 !important;
  }

  #BOOKS section .book-cover-link,
  #BOOKS section:nth-of-type(even) .book-cover-link {
    grid-row: 1 !important;
  }

  #BOOKS section .book-entry > .right {
    grid-row: 1 !important;
  }

  #BOOKS section .book-entry > .right h3 strong {
    font-size: 1.4rem;
  }

  #BOOKS section .book-entry > .right h3 small {
    font-size: 0.8rem;
  }

  #BOOKS section .book-entry > .right b {
    font-size: 0.9rem;
  }

  #BOOKS section .book-entry > .right p {
    font-size: 0.8rem;
  }

  #BOOKS section .book-purchase-link {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 20px 0 0 !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 50 !important;
  }

  #BOOKS section .book-purchase-link em {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0;
    padding: 2% 0 !important;
    border-radius: 1px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #WBOOKS .wbooks-cover-link,
  #WBOOKS .wbooks-purchase {
    transition: none;
  }
}