@charset "utf-8";
/* ==========================================================================
   ブログ記事ページ用スタイル（R4E）。lower.css と同じ方針で ADDITIVE ONLY。

   このファイルは既存セレクタを一つも再定義しない。すべて `ar-` 接頭辞の
   新しいクラスで、TOP と16の下層ページはこのファイルを読み込みもしない
   （villa_assets() を参照）。

   記事ページのほとんどは受入済みの部品でできている:
     .art-head / .art-kicker / .art-h1   見出し
     .bc                                  パンくず
     .sec / .sec-in.narrow                版面
     .vids.vids-one / .vid / .yt          クリック再生の動画ファサード
     .art-next / .lp-next                 末尾の相談バンド
     .glink / .hair / .sec-orn / .sec-ghost / .sub-link

   ここで新しく定義するのは、記事にしか無い4つの型だけ:

     .ar-date   記事の日付と撮影地の行
     .ar-body   記事本文の組版（読みやすさ優先。装飾を持たない）
     .ar-nav    前後の記事へのカード
     .ar-more   記事の下の回遊セクション

   使う色はトークンだけ: --ivory / --ivory-2 / --green / --green-d /
   --gold / --gold-d / --gold-l / --gold-h / --orn-l。新しい色は入れない。

   長い記事を飾り立てない。この3本は本文200〜230字で、読み終わるまでに
   スクロールは2回で足りる。装飾密度より可読性を優先する。
   ========================================================================== */

/* ======================================================= 1. ARTICLE HEAD ==
   .art-head をそのまま使い、リード文の代わりに日付の行を置く。 */
.ar-head{padding-bottom:clamp(26px,2.4vw,42px)}

.ar-date{
  margin-top:clamp(18px,1.6vw,26px);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em;
  font-family:var(--jp-s);font-size:clamp(15px,1.0vw,17px);
  letter-spacing:.06em;color:#5A6862;
}
.ar-date time{
  font-family:var(--la);font-size:clamp(15px,1.06vw,18px);
  letter-spacing:.2em;color:var(--gold-d);
}
.ar-date time i{font-style:normal;padding:0 3px;opacity:.6}
.ar-date-sep{color:var(--orn-l)}

/* =========================================================== 2. THE BODY ==
   本文は版面いっぱいではなく読める幅で。行長は親テーマの --measure に
   従う。段落間は行間より広く取り、区切りに罫や記号を足さない。 */
.ar-sec{padding-block:clamp(8px,1.2vw,20px) var(--band);background:var(--ivory)}

.ar-video{margin-inline:auto}

.ar-body{
  max-width:calc(var(--measure) + 2em);margin-inline:auto;
  margin-top:clamp(30px,2.8vw,52px);
}
.ar-body p{
  font-family:var(--jp);font-size:clamp(17px,1.14vw,19.5px);line-height:2.05;
  letter-spacing:.045em;color:#33403A;margin-top:1.35em;
  word-break:auto-phrase;line-break:strict;
}
.ar-body p:first-child{margin-top:0}

/* ====================================================== 3. MORE ARTICLES ==
   前後の記事。移行済みの記事だけが並ぶ（nav.php の注記を参照）。 */
.ar-more{background:var(--ivory-2);border-top:1px solid var(--orn-l);
  padding-block:clamp(56px,5.2vw,96px)}

.ar-nav{
  list-style:none;margin:clamp(28px,2.6vw,44px) 0 0;padding:0;
  display:grid;gap:clamp(14px,1.3vw,22px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
/* 片側しか無い記事でも、カードが版面いっぱいに伸びない。 */
.ar-nav>li:only-child{max-width:32em}

.ar-nav a{
  display:block;height:100%;
  padding:clamp(18px,1.6vw,26px) clamp(18px,1.7vw,28px);
  background:var(--ivory);border:1px solid var(--orn-l);
  text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease;
}
.ar-nav a:hover,.ar-nav a:focus-visible{
  border-color:var(--gold);background:var(--gold-h);
}
.ar-nav-lab{
  display:block;font-family:var(--jp-s);font-weight:700;
  font-size:clamp(14px,.96vw,15px);letter-spacing:.14em;color:#7D6129;
}
.ar-nav-date{
  display:block;margin-top:clamp(8px,.7vw,12px);
  font-family:var(--la);font-size:clamp(13px,.94vw,15px);
  letter-spacing:.2em;color:var(--gold-d);
}
.ar-nav-ttl{
  display:block;margin-top:clamp(6px,.6vw,10px);
  font-family:var(--jp);font-weight:700;
  font-size:clamp(17px,1.18vw,20px);line-height:1.62;letter-spacing:.04em;
  color:var(--ink);word-break:auto-phrase;line-break:strict;
}
/* 「次の記事」を左、「前の記事」を右に。DOM は新しい記事が先。 */
.ar-nav-next{grid-column:1}
.ar-nav-prev{grid-column:2}
.ar-nav>li:only-child{grid-column:1}

.ar-more .btn-row{margin-top:clamp(26px,2.4vw,42px)}

/* ========================================================== 4. NARROWER ==
   タブレット。カードはまだ2列に収まる。 */
@media (max-width:1199px){
  .ar-body{max-width:none}
}

/* ============================================================= 5. PHONE ==
   390 / 430。カードを縦に積み、順序は DOM のまま（新しい記事が上）。
   タップ領域はカード全体で、44px を大きく超える。 */
@media (max-width:699px){
  .ar-head{padding-bottom:22px}
  .ar-date{font-size:15px;gap:.4em}
  .ar-date time{font-size:15px}
  .ar-body{margin-top:26px}
  .ar-body p{font-size:17px;line-height:2.0;margin-top:1.3em}
  .ar-more{padding-block:52px}
  .ar-nav{grid-template-columns:1fr;gap:12px}
  .ar-nav-next,.ar-nav-prev,.ar-nav>li:only-child{grid-column:1}
  .ar-nav>li:only-child{max-width:none}
  .ar-nav a{padding:16px 18px}
  .ar-nav-ttl{font-size:17px}
}

/* ========================================================================
   R4F 追加分。ここも ADDITIVE ONLY で、既存セレクタは一つも再定義しない。

   増えたのは2つの型だけ:

     .ar-figure / .lp-post-fig   写真だけの記事・エントリ
     .lp-pager                   ブログ索引 22ページのページ送り

   ブログ索引（/026.html?paginate=N）が article.css を読むようになったのも
   R4F から。2〜22ページ目には動画ではなく写真のエントリが並ぶので、記事
   ページと同じ図版の組版をそのまま使う。
   ======================================================================== */

/* ============================================== 6. 写真だけのエントリ ==
   本番の古いエントリは動画ではなく写真1枚。動画ファサード（.vid）と同じ
   位置・同じ幅に置き、同じ余白で本文へつなぐ。枠も影も付けない: 受入済み
   の他ページの図版が付けていない。 */
.ar-figure,.lp-post-fig{
  margin:0 auto;max-width:calc(var(--measure) + 10em);
}
.ar-sec .ar-figure{max-width:calc(var(--measure) + 6em)}
.lp-post-fig{margin-top:clamp(20px,1.8vw,32px)}

.ar-figure img,.lp-post-fig img{
  display:block;width:100%;height:auto;
  /* 本番は 1920px の原寸をそのまま出しているが、実際の版面は最大でも
     830px 程度。ここでは 1100px までの AVIF を出し分ける（render.php）。 */
  background:var(--ivory-2);
}

/* =========================================================== 7. ページ送り ==
   22ページある索引の移動手段。数字だけの列は指では押しにくいので、
   「前へ / 次へ」を大きく取り、数字はその補助として並べる。
   長い索引ページの末尾に置くものなので、装飾は罫一本に留める。 */
.lp-pager{
  margin-top:clamp(44px,4vw,76px);
  padding-top:clamp(28px,2.6vw,44px);
  border-top:1px solid var(--orn-l);
}
.lp-pager-in{
  max-width:calc(var(--measure) + 10em);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(16px,1.5vw,26px);
}
.lp-pager-now{
  font-family:var(--jp-s);font-size:clamp(14px,.98vw,16px);
  letter-spacing:.1em;color:#5A6862;
}
.lp-pager-now b{font-family:var(--la);font-weight:700;
  font-size:1.14em;letter-spacing:.16em;color:var(--gold-d)}

.lp-pager-nums{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(6px,.6vw,10px);
}
.lp-pager-nums a,.lp-pager-cur{
  display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 .5em;
  font-family:var(--la);font-size:clamp(15px,1.02vw,17px);
  letter-spacing:.1em;text-decoration:none;
  border:1px solid var(--orn-l);
}
.lp-pager-nums a{color:var(--gold-d);background:var(--ivory);
  transition:border-color .2s ease,background-color .2s ease,color .2s ease}
.lp-pager-nums a:hover,.lp-pager-nums a:focus-visible{
  border-color:var(--gold);background:var(--gold-h);color:#5E4712;
}
.lp-pager-cur{
  color:var(--ivory);background:var(--green);border-color:var(--green);
  font-weight:700;
}
.lp-pager-gap{
  display:flex;align-items:flex-end;justify-content:center;
  min-width:24px;min-height:44px;color:var(--orn-l);letter-spacing:.1em;
}
/* 「ページ12」と読ませるための語。目には出さない。 */
.lp-pager-sr{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.lp-pager-dir{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(10px,1vw,16px);width:100%;
}
.lp-pager-dir a{
  flex:1 1 14em;max-width:20em;
  display:flex;flex-direction:column;gap:4px;
  padding:clamp(13px,1.2vw,18px) clamp(16px,1.5vw,24px);
  background:var(--ivory);border:1px solid var(--orn-l);
  text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease;
}
.lp-pager-dir a:hover,.lp-pager-dir a:focus-visible{
  border-color:var(--gold);background:var(--gold-h);
}
.lp-pager-prev{text-align:left}
.lp-pager-next{text-align:right}
.lp-pager-lab{
  font-family:var(--jp-s);font-weight:700;
  font-size:clamp(15px,1.04vw,17px);letter-spacing:.14em;color:#7D6129;
}
.lp-pager-sub{
  font-family:var(--jp-s);font-size:clamp(13px,.92vw,14.5px);
  letter-spacing:.08em;color:#5A6862;
}

@media (max-width:699px){
  .lp-pager{margin-top:38px;padding-top:26px}
  .lp-pager-in{gap:14px}
  /* 電話では数字を1行に収めようとしない。折り返して2行になってよい。 */
  .lp-pager-nums{gap:6px}
  /* 44px は下限であって、削ってよい数字ではない。22ページを指で辿る
     ときに一番押される的がこれ。390px 幅でも 44*7 + 6*6 = 344px で収まる。 */
  .lp-pager-nums a,.lp-pager-cur{min-width:44px;min-height:44px;font-size:15px}
  /* 前へ/次へは縦に積む。横に2枚だと1枚の幅が指の的として狭くなる。 */
  .lp-pager-dir{flex-direction:column}
  .lp-pager-dir a{max-width:none;flex:0 0 auto}
  .lp-pager-next{text-align:left}
  .lp-post-fig{margin-top:18px}
}