@charset "UTF-8";
/* ==========================================================
   瀬戸内寂聴『寂聴　源氏物語』特設サイト
   /content/files/SP/jakuchogenji/css/style.css
   デザインシステム「寂聴 源氏物語」準拠
   ========================================================== */

:root {
  --jg-bg-page: #f0e8dd;
  --jg-bg-paper: #faf6ef;
  --jg-bg-book: #f5eedf;
  --jg-ink: #110604;
  --jg-ink-sub: #4d423c;
  --jg-accent: #006d75;
  --jg-gold: #c5a060;
  --jg-violet: #3e3577;
  --jg-white: #ffffff;
  --jg-link: #006d75;
}

body { margin: 0; background: var(--jg-bg-page); }

.jg {
  font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  color: var(--jg-ink);
  max-width: 1000px;
  margin: 0 auto;
  -webkit-text-size-adjust: 100%;
}
.jg *, .jg *::before, .jg *::after { box-sizing: border-box; }
.jg img { display: block; max-width: 100%; height: auto; }
.jg a { color: var(--jg-link); }
.jg a:hover { opacity: .7; }
.jg a:focus-visible { outline: 3px solid var(--jg-accent); outline-offset: 2px; }

/* キービジュアル */
.jg-mv { margin: 0; line-height: 0; }
.jg-mv img { width: 100%; }

/* コンテンツ地 */
.jg-main { background: var(--jg-bg-paper); padding: 0 30px; }
.jg-sec { padding: 48px 18px; }
.jg-sec--last { padding-bottom: 64px; }
.jg-box { background: var(--jg-bg-book); padding: 32px 40px; }
.jg-stack { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }

/* 見出し・ラベル・本文 */
.jg-h2 {
  position: relative; margin: 0; padding-left: .7em;
  font-size: 24px; font-weight: 700; line-height: 1.5;
}
.jg-h2::before {
  content: ""; position: absolute; top: .2em; left: 0; height: 76%;
  border-left: 4px solid var(--jg-accent);
}
.jg-label { margin: 0; font-size: 24px; font-weight: 700; color: var(--jg-accent); }
.jg-label--gap { margin-top: 32px; }
.jg-body { margin: 0; font-size: 17px; line-height: 1.9; }
.jg-ind { text-indent: 1em; }
/* サイト共通CSSの p／strong 指定に負けないよう強めに指定 */
#jg .jg-strong,
#jg .jg-strong strong { font-weight: 700 !important; }
.jg-part { margin: 16px 0 0; font-size: 20px; font-weight: 700; }

/* 最新刊 */
.jg-book { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: start; }
.jg-book__text { display: flex; flex-direction: column; gap: 12px; }
.jg-book__title { margin: 0; font-size: 40px; line-height: 1.4; font-weight: 900; }
.jg-btn {
  display: block; margin-top: 28px; padding: 12px;
  background: var(--jg-accent); color: var(--jg-white) !important;
  font-size: 24px; text-align: center; text-decoration: none;
}

/* 『寂聴　源氏物語』とは */
.jg-obi {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 96px; padding: 16px 24px;
  background: url(../images/img_obi.jpg) center / cover no-repeat;
}
.jg-obi .jg-h2 { background: var(--jg-bg-paper); padding: 10px 24px 10px 40px; }
.jg-obi .jg-h2::before { left: 20px; top: calc(10px + .25em); height: 1.1em; }
.jg-obi--gap { margin-top: 32px; }
/* 旧ページCSSの img { margin:auto } で写真が中央に寄るのを防ぐ */
#jg .jg-obi .jg-avatar { margin: 0 0 0 auto; }
.jg-obi .jg-avatar { border: 4px solid var(--jg-bg-paper); }
.jg .jg-avatar {
  width: 120px; height: 120px !important; flex: none; /* CMS共通CSS（#SP img {height:auto}）対策 */
  border-radius: 50%; object-fit: cover; object-position: 50% 20%;
}

/* 系図 */
.jg-keizu { margin: 0; background: var(--jg-white); padding: 16px; }
.jg-keizu + .jg-keizu { margin-top: 16px; }
.jg-keizu img { width: 100%; }
.jg-keizu--portrait img { width: 60%; margin: 0 auto; }
.jg-keizu figcaption { margin-top: 8px; font-size: 14px; color: var(--jg-ink-sub); text-align: right; }

/* 人物紹介 */
.jg-chars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; margin: 0; }
.jg-chars dt { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--jg-violet); }
.jg-chars dd { margin: 0; font-size: 16px; line-height: 1.8; }

/* 著者略歴 */
.jg-profile { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 40px; align-items: start; }
.jg-profile__text { display: flex; flex-direction: column; gap: 8px; }
.jg-profile__name { margin: 0; font-size: 24px; font-weight: 700; }
.jg-profile__text .jg-body { margin-top: 8px; }
.jg .jg-profile__photo { width: 190px; aspect-ratio: 3 / 4; object-fit: cover; }

/* バナー・ページトップ */
.jg-bnr { display: block; margin-top: 32px; }
.jg-bnr img { width: 100%; max-width: 940px; margin: 0 auto; }
.jg-pagetop { margin: 32px 0 0; text-align: right; font-size: 14px; }

/* ---------- タブレット（〜1000px） ---------- */
@media screen and (max-width: 1000px) {
  .jg-main { padding: 0 3vw; }
  .jg-sec { padding: 40px 2vw; }
}

/* ---------- スマートフォン（〜640px） ---------- */
@media screen and (max-width: 640px) {
  .jg-sec { padding: 32px 2vw; }
  .jg-box { padding: 24px 20px; }
  .jg-book { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .jg-book__cover { width: 60%; margin: 0 auto; }
  .jg-book__title { font-size: 30px; text-align: center; }
  .jg-btn { font-size: 20px; }
  .jg-h2, .jg-label { font-size: 20px; }
  .jg-body { font-size: 15px; }
  .jg-part { font-size: 17px; }
  .jg .jg-avatar { width: 72px; height: 72px !important; }
  .jg-obi { min-height: 72px; padding: 12px; }
  .jg-obi .jg-h2 { padding: 8px 14px 8px 30px; }
  .jg-obi .jg-h2::before { left: 14px; top: calc(8px + .25em); }
  .jg-keizu--portrait img { width: 100%; }
  .jg-chars { grid-template-columns: minmax(0, 1fr); }
  .jg-chars dt { font-size: 19px; }
  .jg-chars dd { font-size: 15px; }
  .jg-profile { grid-template-columns: minmax(0, 1fr); }
  .jg .jg-profile__photo { width: 50%; margin: 0 auto; order: -1; }
}