@charset "UTF-8";

/* ==========================================================================
   Reset（最小限）／全体に効く初期化
   -------------------------------------------------------------------------- */
html{box-sizing:border-box;-ms-overflow-style:scrollbar}
*,*::before,*::after{box-sizing:inherit;word-break:break-word}
img{border:0;max-width:100%;height:auto;vertical-align:middle}
a{text-decoration:none}
ol,ul{list-style:none;padding:0;margin:0}
hr{border:none;height:1px;background:#f1eded;margin:2em 0}


/* ==========================================================================
   Base Typography（本文の基本）／フォント・色・行間など
   -------------------------------------------------------------------------- */
body{
  background:#f7f7f8;            /* 本文外は薄グレー */
  color:#222;
  /* font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP","Meiryo",sans-serif; */
  font-family: dcsymbols,'Helvetica Neue',Helvetica,Arial,'ヒラギノ角ゴ Pr6N','Hiragino Kaku Gothic Pr6N','ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN','Segoe UI',Verdana,'メイリオ',Meiryo,sans-serif;
  /* font-weight:400; */
  font-size: 16px;
  line-height:1.8;
  margin:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
p{margin:0 0 1em}


/* ==========================================================================
   Layout（共通レイアウト）／コンテナと本文カード
   -------------------------------------------------------------------------- */
.container{max-width:720px;margin:48px auto;padding:0 20px}
.content{
  background:#fff;               /* 本文カードは白 */
  border:1px solid #eee;
  border-radius:12px;
  padding:20px;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
  letter-spacing:.01em;          /* 全体をほんの少しだけ広げる */
}


/* ==========================================================================
   Page Titles（ページ先頭の見出し）／総タイトル・h1
   -------------------------------------------------------------------------- */
/* 上部の総タイトル（--index-title） */
.suptitle{
  font-size:.90rem;              /* 小さめ */
  color:#666;
  letter-spacing:.04em;
  line-height:1.6;
  margin:0 0 .25rem;
}

/* ページタイトル（TXT 1行目）：さらに小さく＆うっすら下線 */
h1{
  font-family:inherit;color:inherit;font-weight:600;letter-spacing:.015em;line-height:1.6;
  margin:0 0 .9rem;
  font-size:clamp(1.25rem,1.6vw + 1rem,1.6rem);
  padding-bottom:.35rem;
  border-bottom:1px solid #e9e9e9;
}


/* ==========================================================================
   Headings（h2/h3）／章・小見出し
   -------------------------------------------------------------------------- */
h2{
  font-family:inherit;font-weight:600;font-size:1.125rem;margin:40px 0 15px;position:relative;padding-left:15px;
}
h2::before{
  content:"";display:block;width:15px;height:1.5px;background:#dcdcdc;position:absolute;top:0;bottom:0;left:-15px;margin:auto;
}
@media (min-width:768px){ h2{font-size:1.25rem;padding-left:0} h2::before{left:-45px;width:20px} }
h3{font-family:inherit;font-weight:600;font-size:1.0625rem;border-bottom:1px solid #d1d1d1;padding-bottom:6px}
@media (min-width:768px){ h3{font-size:1.125rem} }


/* ==========================================================================
   Ruby（ルビの見た目）
   -------------------------------------------------------------------------- */
ruby rt{font-size:.50em;color:#444}


/* ==========================================================================
   Tables（任意）／テーブルの見た目
   -------------------------------------------------------------------------- */
table{border-collapse:collapse;width:100%;margin:30px 0}
thead{background:#f7f7f7}
tr{border-top:1px solid #ccc}
tr:last-of-type{border-bottom:1px solid #ccc}
th,td{padding:8px 0}
@media (min-width:768px){ th,td{padding:12px 0} }


/* ==========================================================================
   Links（基本リンク色）
   -------------------------------------------------------------------------- */
a{color:#00A0DF}
a:hover{color:#A3D4E4}


/* ==========================================================================
   Footer Navigation（末尾ナビ／共通）
   -------------------------------------------------------------------------- */
.footer-nav,
.footer-nav-sub{
  margin-top:16px;
  display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;
}
.footer-nav{
  padding-top:14px;
  border-top:1px solid #eee;     /* 本文との区切り線 */
}
.footer-nav-sub{margin-top:8px}

/* ボタン風リンク（チップ） */
.chip{
  display:inline-block;
  border:1px solid #dcdcdc;
  border-radius:999px;
  padding:.38rem .7rem;
  background:#fff;
  color:#0077B8;                 /* ベース色 */
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.chip:hover{
  background:#f0f0f0;
  color:#00A0DF;
}
.chip:visited{
  color:#5B89A6;
  border-color:#c8d6e3;
}


/* ==========================================================================
   Index 共通カード／作品リスト
   -------------------------------------------------------------------------- */
.card{background:#fff;border:1px solid #eee;border-radius:12px;padding:20px}
ul.toc{list-style:none;padding-left:0;margin:0}
ul.toc li{margin:.35rem 0}
ul.toc a{color:inherit}

/* グローバルリンク（順序：link → visited → hover → active） */
a:link    { color:#0077B8; }
a:visited { color:#5B89A6; }
a:hover   { color:#00A0DF; }
a:active  { color:#006091; }

/* 概要テキスト（シリーズ index／アーカイブで使用） */
.index-summary{
  color:#555;
  margin: .25rem 0 1rem;
  line-height: 1.9;
}

/* 作品リンクを“リンクらしく”／ホバー・訪問済みの視覚強化 */
ul.toc{ list-style:none; padding-left:0; margin:0; }
ul.toc li{ margin:.35rem 0; }
ul.toc a{
  display:block;
  padding:.5rem .6rem;
  border-radius:8px;
  color:#006AA6;
  border:1px solid transparent;         /* 枠を追加 */
}
ul.toc a:hover{
  background:#F2F7FB;
  color:#00A0DF;
  text-decoration: underline;
  border-color:#D7E8F4;                  /* ホバー時の枠色 */
}
ul.toc a:visited{
  color:#5B89A6;
  border-color:#E5EEF5;                  /* 訪問済みの淡い枠 */
}


/* ==========================================================================
   ページ種別ごとの“強さ”調整（アーカイブトップ／シリーズ index）
   -------------------------------------------------------------------------- */
/* 各話 index（シリーズの目次ページ）：控えめ */
.is-series-index ul.toc a{
  font-size: 1.00rem;
  font-weight: 500;
}
/* アーカイブトップ：存在感アップ */
.is-archive-top ul.toc a{
  font-size: 1.06rem;
  font-weight: 600;
}
/* 概要テキストはリンクと揃えて（共通） */
.toc .index-summary{
  padding-left: .6rem;      /* リンクと同じ開始位置 */
  margin: .25rem 0 1rem;
  font-size: .95rem;        /* タイトルより一段小さい */
  color: #555;
}


/* ==========================================================================
   アーカイブトップ専用（見出し・グルーピング）
   -------------------------------------------------------------------------- */
.site-title{
  font-size: clamp(2rem, 2.6vw + 1rem, 2.8rem);
  line-height: 1.3;
  letter-spacing: .02em;
  margin: 0 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid #e9e9e9;
}
/* シリーズ見出し：beforeの棒はやめて左ボーダーに（はみ出し防止） */
.is-archive-top .archive-group h2{
  position: relative;
  padding-left: .6rem;
  margin: 28px 0 12px;
  border-left: 3px solid #dcdcdc; /* カード内で安全 */
  font-weight: 700;
}
.is-archive-top .archive-group h2::before{
  content: none !important; /* 既存の棒を無効化 */
}
/* グループ間の間隔 */
.archive-group + .archive-group { margin-top: 28px; }


/* ==========================================================================
   Mobile（≤560px）：読みやすさ優先レイアウト
   -------------------------------------------------------------------------- */
@media (max-width: 560px){

  /* コンテナ：左右ゼロでフル幅、上の余白は保持 */
  .container{
    max-width: none;
    padding: 0;
    margin: calc(env(safe-area-inset-top) + 24px) 0 20px;
  }

  /* 本文カード＆アーカイブカード：フルブリード */
  .content,
  .card{
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
    padding: 18px calc(env(safe-area-inset-right) + 16px)
             20px calc(env(safe-area-inset-left) + 16px);
  }

  /* h1をやや小さく */
  h1{
    margin: 0 0 .75rem;
    font-size: clamp(1.2rem, 1.4vw + 1rem, 1.5rem);
  }

  /* 末尾ナビ：2段（前/次→1段目、タイトル→2段目・自然幅） */
  .footer-nav{ flex-wrap: wrap; justify-content: center; row-gap: .4rem; }
  .footer-nav .chip--prev, .footer-nav .chip--next{ order: 1; }
  .footer-nav::after{ content:""; order:1; flex-basis:100%; width:0; }
  .footer-nav .chip--title{ order:2; flex-basis:auto; width:auto; margin-inline:auto; text-align:center; }

  /* チップの横幅を少し詰める（任意） */
  .footer-nav .chip{ padding: .34rem .6rem; }
}

/* 追記：アーカイブトップの上余白を少し厚めに（同一ブレークポイント） */
@media (max-width: 560px){
  .is-archive-top .container{
    margin-top: calc(env(safe-area-inset-top) + 28px);
  }
}


/* ==========================================================================
   Mobile（≤560px）：灰色背景側の左右パディング
   （白カード外にある見出し/概要/戻る系リンクの端ギリ回避）
   -------------------------------------------------------------------------- */
@media (max-width: 560px){
  /* 端末の安全域＋16px を共通化 */
  :root{
    --xpad-l: calc(env(safe-area-inset-left) + 16px);
    --xpad-r: calc(env(safe-area-inset-right) + 16px);
  }

  /* 各話ページ（suptitle と h1 は白枠の外） */
  .container > .suptitle,
  .container > h1{
    padding-left: var(--xpad-l);
    padding-right: var(--xpad-r);
  }

  /* シリーズ index & アーカイブトップの概要（白枠の外） */
  .container > .index-summary{
    padding-left: var(--xpad-l);
    padding-right: var(--xpad-r);
  }

  /* アーカイブトップの大見出しも揃える */
  .is-archive-top .site-title{
    padding-left: var(--xpad-l);
    padding-right: var(--xpad-r);
  }

  /* 戻る系サブナビ（白枠の外にある場合） */
  .is-series-index .footer-nav-sub,
  .is-archive-top .footer-nav-sub{
    padding-left: var(--xpad-l);
    padding-right: var(--xpad-r);
  }
}


/* ==========================================================================
   折りたたみ系（「その他の物語」「注意事項」）の見た目
   -------------------------------------------------------------------------- */
/* 旧：テキストリンク（今は .chip を主に使用。残しても無害） */
.linklike{
  color:#006AA6;
  text-decoration: underline;
}
.linklike:hover{ color:#00A0DF; }

/* 折りたたみ領域の余白 */
.more-collapsible ul.toc{ margin-top:.25rem; }
.more-toggle.top{ margin-top:.5rem; }
.more-toggle.bottom{ margin-bottom:.5rem; }

/* トグルの左位置を作品リンクと揃える */
.more-toggle{
  padding-left: .6rem;   /* ul.toc a と同じ開始位置 */
  margin: .5rem 0 .25rem;
}
.more-toggle.bottom{ margin: .25rem 0 .5rem; }

/* 注意事項トリガー（chip）微調整 */
.notice-area .chip{ margin-top: .15rem; }


/* ==========================================================================
   Mobile（≤560px）：注意事項エリアの左右揃え
   -------------------------------------------------------------------------- */
@media (max-width: 560px){
  :root{
    --xpad-l: calc(env(safe-area-inset-left) + 16px);
    --xpad-r: calc(env(safe-area-inset-right) + 16px);
  }
  /* トリガー（chip）は灰色側テキストと同じ左右余白 */
  .is-archive-top .notice-area{
    padding-left: var(--xpad-l);
    padding-right: var(--xpad-r);
  }
}


/* ==========================================================================
   汎用：hidden 属性の強制非表示（作者CSSに勝つため）
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }
.chip[hidden] { display: none !important; }


/* ==========================================================================
   注意事項カード（中身が開いた時のカード内ルール）
   -------------------------------------------------------------------------- */
/* 「畳む」をカード内に揃える（.more-toggle の左インデントを打ち消し） */
.notice-box .more-toggle{ padding-left: 0; }

/* カードの上下パディングを少し整える（任意） */
.notice-area .card{ padding-top: 16px; padding-bottom: 12px; }

/* Mobile：トリガーは灰色側に、本文カードはフルブリード */
@media (max-width: 560px){
  :root{
    --xpad-l: calc(env(safe-area-inset-left) + 16px);
    --xpad-r: calc(env(safe-area-inset-right) + 16px);
  }
  .is-archive-top .notice-area > .chip{
    margin-left: var(--xpad-l);
    margin-right: var(--xpad-r);
  }
  .is-archive-top .notice-area .card{
    margin-left: calc(var(--xpad-l) * -1);
    margin-right: calc(var(--xpad-r) * -1);
  }
}

/* カード内“ミニ見出し” */
.card-label{
  font-size: .92rem;
  font-weight: 600;
  color: #666;
  letter-spacing: .06em;
  line-height: 1.6;
  margin: .1rem 0 .35rem;
  padding-bottom: .2rem;
  border-bottom: 1px solid #eee;   /* さりげない下線 */
}

/* （再掲）カード内の「畳む」位置調整：上書き維持用 */
.notice-box .more-toggle{ padding-left: 0; }

/* Mobile：見出しの上余白を少し詰める */
@media (max-width: 560px){
  .notice-area .card-label{ margin-top: 0; }
}

/* カード内の本文サイズをシリーズ概要と合わせる */
.notice-box .index-summary{
  font-size: .95rem;   /* .toc .index-summary と揃える */
  line-height: 1.9;
  color: #555;
  margin: .25rem 0 1rem;
}