@charset "utf-8";
/* ══════════════════════════════════════════════════════════
   AILÉA v3 — Look Book
   共通の土台は v3-base.css にあります（先に読み込まれます）。

   ■ 配置の考え方（kei-inc.jp の組み方を参考）
     すべてを散らすのではなく、「標準幅」に何度も戻します。
       標準幅 → 大小のペア → 標準幅 → 大小のペア（左右反転）→ …
     標準幅が静けさを、ペアが変化をつくり、戻るたびに目が休みます。
     全部バラバラだと、変化が続きすぎて逆に単調に見えます。

   ■ 位置は data-pos（0〜5）で決まります
     nth-child ではなく属性で指定しているのは、フィルターで絞り込んだとき
     JS が「表示中のものだけ」に 0〜5 を振り直せるようにするためです。
     nth-child だと隠れた項目も数に入り、リズムが崩れます。
   ══════════════════════════════════════════════════════════ */

/* ─────────── 1. 見出し ─────────── */
body.v3 .g-head{
  padding-top:clamp(56px,8vh,96px);
  padding-bottom:clamp(64px,9vh,120px);
}
body.v3 .g-head .v-en{ grid-column:2 / 7; margin-bottom:26px; }
body.v3 .g-head .v-h { grid-column:2 / 9; }
/* 見出しの下のリード。下層ページの .p-sub と同じ役割です（2026-10-04） */
body.v3 .g-head-lead{
  grid-column:2 / 9; margin-top:clamp(30px,4.4vh,48px);
  font-size:13px; line-height:2.6; letter-spacing:.09em; color:var(--ink-2);
}
body.v3 .g-head-note{
  grid-column:8 / 13; margin-top:clamp(28px,4vh,52px);
  font-family:var(--fl); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; line-height:2.4; color:var(--ink-sub);
}

/* ─────────── 2. 絞り込み ─────────── */
body.v3 .filter-bar{
  grid-column:2 / 13; margin-top:clamp(48px,7vh,88px);
  display:flex; flex-wrap:wrap; align-items:center; gap:0 clamp(18px,2.4vw,36px);
  padding:22px 0 0; border-top:1px solid var(--line-f); border-bottom:0;
  background:none;
}
body.v3 .filter-btn{
  position:relative; padding:0 0 5px; border:0; background:none; cursor:pointer;
  font-family:var(--fl); font-size:11.5px; letter-spacing:.12em;
  color:var(--ink-2); text-transform:none;
}
body.v3 .filter-btn::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 .filter-btn:hover::after,
body.v3 .filter-btn.active::after{ transform:scaleX(1); transform-origin:left center; }
body.v3 .filter-btn.active{ color:var(--ink); }
body.v3 .filter-sep{
  width:1px; height:14px; background:var(--line); display:inline-block;
}

/* ─────────── 3. ルックの面 ─────────── */
body.v3 .g-main{ padding-bottom:calc(var(--secY) * 1.1); }
body.v3 .g-grid{
  grid-column:1 / 13;
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--colgap);
  row-gap:clamp(56px,9vh,130px);
  align-items:start;
}

body.v3 .gal-item{
  position:relative; display:block; overflow:hidden;
  padding:0; border:0; background:none; cursor:pointer;
  width:100%; text-align:left;
}
body.v3 .gal-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* opacity も必ず書くこと。transform だけ書くと、v3-base.css の
     [data-rv-img] img が持っている不透明度のフェードを丸ごと消してしまい、
     覆いが開くより先に写真がパッと出ます（実際に出ました）。 */
  transition:opacity 1.9s var(--ease-slow), transform 1.9s var(--ease-slow);
}
body.v3 .gal-item:hover img{ transform:scale(1.04); }

/* ── 位置の型（0〜5をくり返す）── */
/* 0・3 … 標準幅。ここに戻ることでリズムが生まれます */
body.v3 .gal-item[data-pos="0"],
body.v3 .gal-item[data-pos="3"]{ grid-column:3 / 11; aspect-ratio:16/10; }

/* 1・2 … 大が左、小が右。小のほうが少し高い位置に来ます */
body.v3 .gal-item[data-pos="1"]{ grid-column:2 / 7;  aspect-ratio:4/5;
  margin-top:clamp(40px,6vh,90px); }
body.v3 .gal-item[data-pos="2"]{ grid-column:8 / 12; aspect-ratio:1/1; }

/* 4・5 … 前のペアの鏡像。小が左、大が右 */
body.v3 .gal-item[data-pos="4"]{ grid-column:2 / 6;  aspect-ratio:1/1; }
body.v3 .gal-item[data-pos="5"]{ grid-column:7 / 12; aspect-ratio:4/5;
  margin-top:clamp(40px,6vh,90px); }

/* ── 写真の上に出る情報 ── */
body.v3 .gal-plan-badge{
  position:absolute; left:16px; top:14px; z-index:2;
  font-family:var(--fl); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.55);
  background:none; padding:0; border:0;
}
body.v3 .gal-item-ov{
  position:absolute; inset:0; z-index:1; display:block; pointer-events:none;
  background:linear-gradient(to bottom,rgba(20,18,15,0) 55%,rgba(20,18,15,.42) 100%);
  opacity:0; transition:opacity 1.5s var(--ease-slow);
}
body.v3 .gal-item:hover .gal-item-ov{ opacity:1; }
body.v3 .gal-item-tag{
  position:absolute; left:16px; bottom:14px;
  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 .gal-item:hover .gal-item-tag{ opacity:1; transform:none; }

/* 絞り込みで0件になったとき */
body.v3 .g-empty{
  grid-column:3 / 10; font-size:13px; line-height:2.4; color:var(--ink-2);
}

/* ─────────── 4. レスポンシブ ─────────── */
@media (max-width:900px){
  /* v3-base.css で6カラムに組み替わります。ここで置き直します */
  body.v3 .g-head .v-en{ grid-column:1 / 5 !important; }
  body.v3 .g-head .v-h { grid-column:1 / 7 !important; }
  body.v3 .g-head-lead { grid-column:1 / 7 !important; }
  body.v3 .g-head-note { grid-column:2 / 7 !important; }
  body.v3 .filter-bar  { grid-column:1 / 7 !important; gap:0 18px; }
  body.v3 .g-empty     { grid-column:1 / 7 !important; }

  /* ── 配置の型は狭い画面でも残します ──
     2列に並べると1枚が140px程度になり、ルックとして見られません。
     PCと同じ「標準幅 → 大小のペア → 標準幅 → 鏡像のペア」を、
     6カラムの上で1枚ずつ縦に置き直します。
     data-pos は JS が表示中のものだけに振り直すので、
     絞り込んでも穴は空きません（PCと同じしくみです）。 */
  body.v3 .g-grid{
    grid-column:1 / 7 !important;
    grid-template-columns:repeat(6,minmax(0,1fr));
    row-gap:clamp(34px,6vh,64px);
  }
  /* 0・3 … 標準幅。紙いっぱいに戻り、ここで目が休みます */
  body.v3 .gal-item[data-pos="0"],
  body.v3 .gal-item[data-pos="3"]{ grid-column:1 / 7 !important; aspect-ratio:16/10; margin-top:0 !important; }
  /* 1・2 … 大が左、小が右 */
  body.v3 .gal-item[data-pos="1"]{ grid-column:1 / 6 !important; aspect-ratio:4/5; margin-top:0 !important; }
  body.v3 .gal-item[data-pos="2"]{ grid-column:3 / 7 !important; aspect-ratio:1/1; margin-top:0 !important; }
  /* 4・5 … 前のペアの鏡像 */
  body.v3 .gal-item[data-pos="4"]{ grid-column:1 / 5 !important; aspect-ratio:1/1; margin-top:0 !important; }
  body.v3 .gal-item[data-pos="5"]{ grid-column:2 / 7 !important; aspect-ratio:4/5; margin-top:0 !important; }
}

/* ─────────── 5. 動きを減らす設定への配慮 ─────────── */
@media (prefers-reduced-motion:reduce){
  body.v3 .gal-item img,
  body.v3 .gal-item-ov,
  body.v3 .gal-item-tag{ transition:none !important; transform:none !important; }
  body.v3 .gal-item-tag,
  body.v3 .gal-item-ov{ opacity:1 !important; }
}

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

/* ─────────── 6. Instagram（Look Book の末尾） ─────────── */
/* 中身は inc/instagram.php が公式APIから取ってきて、ここで並べます。
   外部ウィジェットではないので、向こうのフォントやグリッドは入りません。

   ■ Look Book より弱く置くこと
     上に並んでいるのは一枚ずつ作った作品で、こちらは日々の更新です。
     同じ大きさ・同じ間隔で並べると、作品の面が2つあるように見えます。
     正方形で小さく、間隔も詰めて「一覧」として扱います。 */
body.v3 .g-ig{
  padding-top:var(--secY);
  border-top:1px solid var(--line-f);
  margin-top:var(--secY);
  row-gap:clamp(40px,6vh,72px);
}
body.v3 .g-ig-head{ grid-column:2 / 6; }
body.v3 .g-ig-head .v-en{ display:block; margin-bottom:clamp(20px,2.8vh,30px); }
body.v3 .g-ig-h{
  margin:0 0 clamp(20px,2.6vh,28px);
  font-family:var(--fd); font-weight:500;
  font-size:clamp(15px,1.5vw,20px); line-height:2.1; letter-spacing:.12em; color:var(--ink);
}
body.v3 .g-ig-lead{
  margin:0 0 clamp(26px,3.4vh,36px);
  font-size:12.5px; line-height:2.4; letter-spacing:.09em; color:var(--ink-2);
}
body.v3 .g-ig-grid{
  grid-column:6 / 13;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,1vw,14px);
}
body.v3 .g-ig-item{
  display:block; position:relative; overflow:hidden; aspect-ratio:1/1;
  background:var(--line-f);   /* 読み込み中に穴が空かないように */
}
body.v3 .g-ig-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--ease), opacity .6s var(--ease);
}
body.v3 .g-ig-item:hover img{ transform:scale(1.04); }

@media (max-width:900px){
  body.v3 .g-ig-head{ grid-column:1 / 7 !important; }
  body.v3 .g-ig-grid{ grid-column:1 / 7 !important; grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:600px){
  /* 4列のままだと1枚が80px前後になり、何が写っているか分かりません */
  body.v3 .g-ig-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  /* 3列だと8枚で最終行が2枚になり、右端が欠けた並びに見えます。
     狭い画面では6枚（3×2）に揃えます。PHP側の枚数は変えません
     （出す枚数を画面幅で変えると、キャッシュの中身まで分岐するためです）。 */
  body.v3 .g-ig-item:nth-child(n+7){ display:none; }
}
@media (prefers-reduced-motion:reduce){
  body.v3 .g-ig-item img{ transition:none !important; transform:none !important; }
}