@charset "UTF-8";

/* ==========================================================================
   itte-wide.css ／ サイト共通CSS・PC版（ウインドウ幅 481px 以上）

   担当は「幅・段組み・文字の大きさ」だけ。色はこのファイルにも書きません
   （色はすべてHTML側の配色ブロックで指定します）。
   幅の数値は itte-base.css の :root にまとめてあるので、
   ページごとに版面を変えたいときはHTML側の <style> で

       :root{ --page-width: 900px; --content-width: 800px; }

   のように上書きします。このファイルは全ページ共通のまま触りません。
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. 版面
   -------------------------------------------------------------------------- */
body{
  font-size: 16.5px;

  /* 【重要】版面より狭いウインドウでも中身が切れず、横スクロールになるための指定。
     --page-width と同じ値を使っているので、幅を変えても自動で追随します。 */
  min-width: var(--page-width);

  padding: 40px 0 56px;   /* パネルの外側の余白＝壁紙が見える幅 */
}

.page{
  width: var(--page-width);  /* ←PC版の版面幅（初期値800px・固定） */
  padding: 40px 45px 56px;   /* 紙面の内側の余白 */
  box-sizing: border-box;    /* 【重要】余白を版面幅の内側に含める */
  border-radius: calc(var(--radius) + 2px);
}


/* --------------------------------------------------------------------------
   2. 見出し（四角枠の中身）
   文字サイズは元HTMLの 25px / 45px をそのまま使っています。
   枠と文字の間隔は .head の padding で調整します。
   -------------------------------------------------------------------------- */
.head{
  padding: 28px 30px 32px;
  margin-bottom: 10px;
}
.site-title{
  font-size: 25px;
}
.page-title{
  margin-top: 18px;
  font-size: 45px;
}
.page-sub{           /* 「その２」などの小見出し */
  margin-top: 14px;
  font-size: 18px;
}


/* --------------------------------------------------------------------------
   3. 本文ブロックの幅
   解説箱・写真・予告箱を同じ幅でそろえています。
   幅を変えるときは itte-base.css の --content-width（またはHTML側）で。
   -------------------------------------------------------------------------- */
.note,
.photos,
.split,
.next{
  max-width: var(--content-width);
  margin: 0 auto 22px;     /* 最後の22pxがブロック間の間隔 */
}

.note,
.next{
  padding: 20px 26px;
  box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   4. 「写真＋解説」の横並び
   右の解説の幅は --side-width（初期値310px）。
   左の写真は残りを埋めるので、解説を広げれば写真は自動で縮みます。
   -------------------------------------------------------------------------- */
.split{
  display: flex;
  gap: var(--gap);
  align-items: stretch;    /* 解説箱の高さを写真にそろえる。
                              上端そろえにするなら flex-start */
}
.split .photo{
  flex: 1 1 auto;
  min-width: 0;            /* 【重要】写真が縮めるようにする */
}
.split .photo img{
  width: 100%;
}
.split .note{
  flex: 0 0 var(--side-width);
  display: flex;           /* 文章を写真の高さの中で縦中央に置くための3行 */
  align-items: center;
  justify-content: center;
}


/* --------------------------------------------------------------------------
   5. 節見出しと表（あとから追加した節）
   -------------------------------------------------------------------------- */
.section-title{
  max-width: var(--content-width);
  margin: 6px auto 14px;
  font-size: 22px;
}
.table-wrap{
  max-width: var(--content-width);
  margin: 0 auto 22px;
}
.table-wrap th,
.table-wrap td{
  padding: .55em .8em;
}


/* --------------------------------------------------------------------------
   6. ボタン・下部の文字サイズ
   itte-base.css で .pager 全体を font-size:0 にしているため、
   大きさの指定は必ず a と strong の側に書きます。
   -------------------------------------------------------------------------- */
.pager a,
.pager strong,
.nextlink a{
  font-size: 19px;
}

.meta,
.links{
  font-size: 15px;   /* 下部の補足情報は本文より少し小さく */
}

/* --------------------------------------------------------------------------
   7. 追加
   -------------------------------------------------------------------------- */
.notice{
  max-width: var(--content-width);
  padding: 14px 18px;
  box-sizing: border-box;
  font-size: 15px;
}
.sublink{
  max-width: var(--content-width);
}
.sublink a{
  padding: .55em 1.8em;
  font-size: 18px;
}