@charset "utf-8";
/* ══════════════════════════════════════════════════════════
   AILÉA v3 — ジャーナル（一覧・記事ページ）
   共通の土台は v3-base.css にあります（先に読み込まれます）。

   ページの考え方：
     ・一覧は「目次」。写真より、見出しと日付を読ませます
     ・先頭の1本だけ大きく扱い、あとは静かな段組に落とします
     ・記事本文は1カラム。読み幅を34文字前後に抑えます
   ══════════════════════════════════════════════════════════ */

/* ─────────── 1. 見出し（一覧・カテゴリ共通） ─────────── */
/* パンくずが上に入るので、見出しの上余白はそのぶん控えめにします */
body.v3 .j-head{
  padding-top:clamp(76px,10vh,130px);
  padding-bottom:clamp(96px,13vh,180px);
}
body.v3 .j-head .v-en{ grid-column:2 / 7; margin-bottom:26px; }
body.v3 .j-head .v-h { grid-column:2 / 9; }
body.v3 .j-head .j-head-note{
  grid-column:7 / 13; margin-top:clamp(28px,4vh,52px);
  font-size:12.5px; line-height:2.5; letter-spacing:.09em; color:var(--ink-2);
}

/* カテゴリの絞り込み */
body.v3 .j-cats{
  grid-column:2 / 13; margin-top:clamp(56px,8vh,104px);
  display:flex; flex-wrap:wrap; gap:0 clamp(20px,2.6vw,40px);
  padding-top:22px; border-top:1px solid var(--line-f);
  list-style:none;
}
body.v3 .j-cats a{
  position:relative; display:inline-block; padding-bottom:5px;
  font-family:var(--fl); font-size:11.5px; letter-spacing:.12em;
  color:var(--ink-2); text-decoration:none;
}
body.v3 .j-cats a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:right center;
  transition:transform .6s var(--ease);
}
body.v3 .j-cats a:hover::after,
body.v3 .j-cats .is-current a::after{ transform:scaleX(1); transform-origin:left center; }
body.v3 .j-cats .is-current a{ color:var(--ink); }
body.v3 .j-cats .j-cat-count{ color:var(--ink-sub); font-size:9.5px; margin-left:6px; letter-spacing:.16em; }

/* 2列目＝話題（デート・記念日など）。
   1列目の「種類」より一段下げて、同じ粒度に見えないようにします。
   罫線は引きません。線を2本にすると帯が2つ並んで重く見えます。 */
body.v3 .j-cats-topic{
  margin-top:clamp(14px,2vh,20px);
  padding-top:0; border-top:0;
  gap:0 clamp(16px,2vw,30px);
}
body.v3 .j-cats-topic a{ font-size:10.5px; color:var(--ink-sub); }
body.v3 .j-cats-topic .is-current a{ color:var(--ink); }
body.v3 .j-cats-topic .j-cat-count{ font-size:9px; }

/* ─────────── 2. 先頭の1本（Featured） ─────────── */
/* 帯の中に写真を置き、右に文字を添えます。
   ※ この要素は <a> です。text-decoration:none を必ず入れること
     （抜けるとブラウザ既定の下線が中の文字すべてに引かれます）。 */
body.v3 .j-feat{
  padding-bottom:var(--secY); align-items:center;
  text-decoration:none; color:inherit;
}
/* 帯の中に収めます。左端まで抜くと画面の半分以上を占めて、
   一覧より先頭の1本ばかりが目立ってしまいます。 */
body.v3 .j-feat-media{
  grid-column:2 / 7; overflow:hidden; aspect-ratio:4/3;
}
body.v3 .j-feat-media img{ height:100%; will-change:transform; transition:transform 1.9s var(--ease-slow); }
body.v3 .j-feat:hover .j-feat-media img{ transform:scale(1.04); }
body.v3 .j-feat-txt{ grid-column:8 / 12; }
body.v3 .j-feat-label{
  display:block; margin-bottom:20px;
  font-family:var(--fl); font-size:9.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-3);
}
body.v3 .j-feat-cat{
  display:block; margin-bottom:16px;
  font-family:var(--fl); font-size:10px; letter-spacing:.2em; color:var(--ink-2);
}
/* この塊は <a> の中なのですべて <span> です。
   display:block を付けないと横に流れてしまい、上下のマージンも効きません。 */
body.v3 .j-feat-title{
  display:block;
  font-family:var(--fd); font-weight:500;
  font-size:clamp(16px,1.5vw,21px); line-height:2.1; letter-spacing:.13em;
  color:var(--ink);
}
body.v3 .j-feat-desc{
  display:block;
  margin-top:1.8em; font-size:12.5px; line-height:2.4;
  letter-spacing:.09em; color:var(--ink-2);
}
body.v3 .j-feat-meta{
  margin-top:2em; display:flex; gap:18px; align-items:center;
  font-family:var(--fl); font-size:10px; letter-spacing:.16em; color:var(--ink-sub);
}
body.v3 .j-feat .v-more{ margin-top:2.4em; }

/* ─────────── 3. 記事の一覧（masonry） ─────────── */
/* 高さの違うカードを積む段組み。
   仕組み：行の高さを1pxに刻んでおき、各カードが自分の高さぶんだけ
   行をまたぐよう JS が grid-row-end を書き込みます。
   カード下端の余白は padding-bottom で作る（row-gap は0のまま）。
   これを変えると JS の計算とズレるので注意してください。 */
body.v3 .j-list{ padding-bottom:calc(var(--secY) * 1.1); }
body.v3 .j-list .v-en{ grid-column:2 / 12; margin-bottom:clamp(60px,8.5vh,110px); }

/* 左右に紙を残した「帯」に収めます。端から端まで並べると、
   縦にどれだけ空けても余白として認識されません。
   帯は見出しと同じ2カラム目から始め、右も同じ量だけ空けて左右対称にします
   （左右がずれていると、一覧全体が右に寄って見えます）。 */
body.v3 .j-mason{
  grid-column:2 / 12;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(20px,2.8vw,50px);
  row-gap:0;
  grid-auto-rows:1px;
  /* align-items:start は必須。
     既定の stretch のままだと、カードが1pxの行に引き伸ばされてしまい、
     JSがspanを外して測り直しても「1px」しか返らず、段が組めません。 */
  align-items:start;
}

body.v3 .j-card{
  display:block; text-decoration:none; color:inherit;
  padding-bottom:clamp(50px,7vh,104px);
  transition:transform 1.2s var(--ease-slow);
}

/* ── 5件ごとに1件を2カラム幅にして、段を崩します ──
   Look Book ほど散らさないのは、一覧は新着順が読み取れることが優先だからです。
   等間隔の3列が続くと単調ですが、崩しすぎると順番が追えなくなります。
   広い1件が「標準幅」の役目をして、そこで目が一度休みます。 */
/* 広い1件は「先頭から5件ごと」。必ず先頭起点にすること。
   途中（例：3件目）に置くと、その手前の列が埋まらず穴が空きます。
   4件ごとにすると、記事が少ないうちは中央の列が埋まらず右に寄って見えます。
   3列なので「広い1件＋その後ろ4件」でちょうど各列が埋まります。 */
body.v3 .j-card:nth-child(5n+1){ grid-column:span 2; }
body.v3 .j-card:nth-child(5n+1) .j-card-media{ aspect-ratio:16/10 !important; }
body.v3 .j-card:hover{ transform:translate3d(0,-7px,0); }

body.v3 .j-card-media{
  position:relative; display:block; overflow:hidden;
  /* 縦横比は index.php 側で1枚ずつ指定しています */
}
body.v3 .j-card-media img{
  width:100%; height:100%; object-fit:cover; will-change:transform;
  /* 写真はパッと出さず、ゆっくり濃くします。
     一覧は小さな写真が同時にいくつも出る場所なので、
     即時に表示すると画面が一度に埋まって落ち着きません。

     ※ ここは [data-rv-img] の覆いを使えません。
       .j-card-media::after は、カテゴリ名を読ませるための墨がすでに使っています
       （同じ擬似要素は1つしか持てません）。
       代わりに、カードに付く .is-in を見て写真の不透明度だけを動かします。
     ※ ホバーの拡大（transform）と同じ transition にまとめて書くこと。
       別々に書くと後から書いたほうが前のを消します。 */
  opacity:0;
  transition:opacity 1.5s var(--ease-slow), transform 1.9s var(--ease-slow);
}
body.v3 .j-card.is-in .j-card-media img{ opacity:1; }
body.v3 .j-card:hover .j-card-media img{ transform:scale(1.05); }

/* 写真の上をごく薄い墨が覆い、カテゴリ名を読ませる */
body.v3 .j-card-media::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,rgba(20,18,15,0) 55%,rgba(20,18,15,.4) 100%);
  opacity:0; transition:opacity 1.5s var(--ease-slow);
}
body.v3 .j-card:hover .j-card-media::after{ opacity:1; }
body.v3 .j-card-cat{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-family:var(--fl); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:#fff;
  opacity:0; transform:translate3d(0,12px,0);
  transition:opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow);
  transition-delay:.1s;
}
body.v3 .j-card:hover .j-card-cat{ opacity:1; transform:none; }

body.v3 .j-card-body{ display:block; padding-top:22px; }
body.v3 .j-card-en{
  display:block; margin-bottom:12px;
  font-family:var(--fl); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3);
}
/* 下線は内側の span。理由は v3-top.css の .v-jp-title と同じです
   （インラインのままだと text-wrap:balance が効きません） */
body.v3 .j-card-title{
  display:block; text-wrap:balance;
  font-family:var(--fd); font-weight:400; font-size:clamp(13px,1.1vw,15px);
  line-height:2.1; letter-spacing:.12em; color:var(--ink);
}
body.v3 .j-card-title > span{
  display:inline; background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat; background-position:0 100%; background-size:0 1px;
  transition:background-size 1.1s var(--ease-slow);
}
body.v3 .j-card:hover .j-card-title > span{ background-size:100% 1px; }
body.v3 .j-card-date{
  display:block; margin-top:16px;
  font-family:var(--fl); font-size:10px; letter-spacing:.16em; color:var(--ink-sub);
}
body.v3 .j-empty{ grid-column:1 / -1; font-size:13px; color:var(--ink-2); line-height:2.4; }

/* 関連記事では段組みを使わず、素直に3つ横並びにします */
body.v3 .j-related-list{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,44px);
}
body.v3 .j-related-list .j-card-media{ aspect-ratio:4/5; }

/* ページ送り */
body.v3 .j-pager{
  grid-column:2 / 12; margin-top:clamp(56px,8vh,96px);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
body.v3 .j-pager .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 10px;
  font-family:var(--fl); font-size:11px; letter-spacing:.1em;
  color:var(--ink-2); text-decoration:none;
  border:1px solid var(--line-f); transition:border-color .5s var(--ease), color .5s var(--ease);
}
body.v3 .j-pager .page-numbers:hover{ border-color:var(--line); color:var(--ink); }
body.v3 .j-pager .page-numbers.current{ border-color:var(--ink); color:var(--ink); }

/* ─────────── 4. 記事ページ ─────────── */
body.v3 .j-article{ padding-top:clamp(60px,8.5vh,116px); }

/* 見出しは中央に置かず、本文と同じ左の基準線から始めます */
body.v3 .j-art-head{ padding-bottom:clamp(68px,9.5vh,120px); }
body.v3 .j-art-cat{
  grid-column:2 / 7; display:block; margin-bottom:22px;
  font-family:var(--fl); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3);
}
body.v3 .j-art-en{
  grid-column:2 / 7; display:block; margin-bottom:clamp(24px,3.5vh,40px);
  font-family:var(--fl); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink);
}
body.v3 .j-art-title{
  grid-column:2 / 10;
  font-family:var(--fd); font-weight:500;
  font-size:clamp(18px,1.9vw,27px); line-height:2.25; letter-spacing:.14em;
  color:var(--ink);
}
body.v3 .j-art-meta{
  grid-column:2 / 8; margin-top:clamp(28px,4vh,48px);
  display:flex; gap:18px; align-items:center;
  font-family:var(--fl); font-size:10px; letter-spacing:.16em; color:var(--ink-sub);
}

/* アイキャッチは右端まで抜きます */
body.v3 .j-art-hero{
  overflow:hidden; aspect-ratio:16/9;
  margin-left:clamp(24px,6vw,120px); margin-right:0;
}
body.v3 .j-art-hero img{ height:100%; will-change:transform; }

/* 本文。読み幅を絞り、見出しと段落の間を大きく取ります */
body.v3 .j-art-body{
  grid-column:3 / 10;
  padding-top:clamp(96px,13.5vh,180px);
  font-size:13.5px; line-height:2.6; letter-spacing:.1em; color:var(--ink-2);
}
body.v3 .j-art-body > * + *{ margin-top:2em; }
body.v3 .j-art-body h2{
  font-family:var(--fd); font-weight:500;
  font-size:clamp(15px,1.35vw,19px); line-height:2.2; letter-spacing:.14em;
  color:var(--ink);
  margin-top:3.4em; padding-top:1.6em; border-top:1px solid var(--line-f);
}
body.v3 .j-art-body h3{
  font-family:var(--fd); font-weight:400; font-size:14px;
  line-height:2.1; letter-spacing:.12em; color:var(--ink); margin-top:2.8em;
}
body.v3 .j-art-body p{ margin-top:1.9em; }
body.v3 .j-art-body a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
body.v3 .j-art-body a:hover{ border-bottom-color:var(--ink); }
body.v3 .j-art-body img{ width:100%; height:auto; margin-top:2.6em; }
body.v3 .j-art-body ul,
body.v3 .j-art-body ol{ padding-left:1.4em; }
body.v3 .j-art-body li{ margin-top:.7em; }
body.v3 .j-art-body blockquote{
  margin-top:2.6em; padding-left:1.6em; border-left:1px solid var(--line);
  color:var(--ink-3);
}

/* 記事末尾の導線。囲みは作らず、罫線だけで区切ります */
body.v3 .j-art-cta{
  grid-column:3 / 11; margin-top:clamp(116px,17vh,200px);
  padding-top:clamp(52px,7.5vh,90px); border-top:1px solid var(--line);
}
body.v3 .j-art-cta-wing{ display:block; width:38px; color:var(--ink-3); margin-bottom:24px; }
body.v3 .j-art-cta-wing svg{ width:100%; height:auto; display:block; }
body.v3 .j-art-cta-title{
  font-family:var(--fd); font-weight:500; font-size:clamp(15px,1.35vw,19px);
  line-height:2.2; letter-spacing:.14em; color:var(--ink);
}
body.v3 .j-art-cta-note{
  margin-top:1.8em; font-size:12px; line-height:2.3;
  letter-spacing:.09em; color:var(--ink-2);
}
body.v3 .j-art-cta .v-more{ margin-top:2.4em; }

/* 関連記事 */
body.v3 .j-related{
  padding-top:var(--secY); padding-bottom:calc(var(--secY) * 1.1);
}
body.v3 .j-related .v-en{ grid-column:2 / 12; margin-bottom:clamp(54px,7.5vh,96px); }
body.v3 .j-related-list{ grid-column:2 / 12; }

/* ─────────── 5. レスポンシブ ─────────── */
@media (max-width:900px){
  /* v3-base.css で6カラムに組み替わり、いったん全部が 1/7 に戻ります。
     ここから置き直して、狭い画面にも余白とずらしを残します。 */
  body.v3 .j-head .v-en   { grid-column:1 / 5 !important; }
  body.v3 .j-head .v-h    { grid-column:1 / 7 !important; }
  body.v3 .j-head-note    { grid-column:2 / 7 !important; margin-top:clamp(28px,5vh,48px); }
  body.v3 .j-cats{ grid-column:1 / 7 !important; gap:0 20px; }
  body.v3 .j-cats-topic{ gap:0 16px; }

  /* 先頭の1本：写真を右の画面外へ抜きます。
     一覧のカードは左右に振ってあるので、先頭だけは「抜く」で
     別格に見せます（大きくするのではなく、扱いを変える） */
  body.v3 .j-feat-media{
    grid-column:2 / 7 !important;
    margin-left:0; margin-right:calc(var(--gut) * -1);
    aspect-ratio:4/5;
  }
  body.v3 .j-feat-txt{ grid-column:1 / 6 !important; margin-top:clamp(28px,5vh,48px); }
  body.v3 .j-art-hero{ margin-left:0; aspect-ratio:4/3; }

  body.v3 .j-mason{ grid-column:1 / 7 !important; margin-left:0; grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.v3 .j-related-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.v3 .j-pager{ grid-column:1 / 7 !important; }
}
@media (max-width:600px){
  /* 1列のときは段組みをやめる。JS側も列数1を検出して指定を外します */
  body.v3 .j-mason{ grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; }
  /* 1列のときに span 2 が残ると、暗黙の2列目ができて他のカードが潰れます */
  body.v3 .j-card:nth-child(5n+1){ grid-column:auto; }

  /* ── 1列でも「一覧」に見せないための崩し ──
     幅いっぱいのカードを縦に積むと、余白が上下にしか残らず、
     このサイトでいちばん効いている「左右の余白」が消えます。
     そこで1件ずつ左右に振り、縦横比も交互に変えます。
     マージンで振るのは、段組みのJS（grid-row-end）に触れないためです。 */
  body.v3 .j-card{ transition:none; }
  body.v3 .j-card:nth-child(odd) { margin-right:clamp(30px,13vw,64px); }
  body.v3 .j-card:nth-child(even){ margin-left :clamp(30px,13vw,64px); }
  body.v3 .j-card:nth-child(odd)  .j-card-media{ aspect-ratio:4/5 !important; }
  body.v3 .j-card:nth-child(even) .j-card-media{ aspect-ratio:3/4 !important; }
  /* 3件に1件は幅いっぱい・横長にして、目を休ませます */
  body.v3 .j-card:nth-child(3n+1){ margin-left:0; margin-right:0; }
  body.v3 .j-card:nth-child(3n+1) .j-card-media{ aspect-ratio:16/11 !important; }

  body.v3 .j-related-list{ grid-template-columns:minmax(0,1fr); }
  body.v3 .j-related-list .j-card:nth-child(odd) { margin-right:clamp(30px,13vw,64px); }
  body.v3 .j-related-list .j-card:nth-child(even){ margin-left :clamp(30px,13vw,64px); }
}

/* ─────────── 6. 動きを減らす設定への配慮 ─────────── */
@media (prefers-reduced-motion:reduce){
  body.v3 .j-card-media img{ opacity:1 !important; transition:none !important; }
  body.v3 .j-feat-media img,
  body.v3 .j-card,
  body.v3 .j-card-media img,
  body.v3 .j-card-media::after,
  body.v3 .j-card-cat,
  body.v3 .j-card-title{ transition:none !important; transform:none !important; }
  body.v3 .j-card-cat{ opacity:1 !important; }
  body.v3 .j-card-media::after{ opacity:1 !important; }
}

/* ─────────── 指で触る画面 ─────────── */
/* この列は「ホバーで下線が伸びる」作りですが、指で触る画面にホバーはありません。
   未選択の項目が素の文字にしか見えず、押せる列だと分かりませんでした。
   ホバーが無い環境では、薄い下線を最初から敷いておきます。
   ※ v3-base.css には置けません。このファイルのほうが後に読まれて勝つためです。 */
@media (hover: none){
  body.v3 .j-cats a::after{ transform:scaleX(1); background:var(--line-link); }
  body.v3 .j-cats .is-current a::after{ background:var(--ink); }
}