/*
Theme Name: KIRINO TOMOAKI
Theme URI: https://kirino.kochi-ai.com/
Description: 写真作家 桐野伴秋 オフィシャルサイト専用テーマ（デザイン案 v02 実装）
Author: kawa
Version: 1.0
*/

/* ===== tokens ===== */
:root{
  --ink:#0B0B0E;
  --ink2:#141419;
  --ink3:#1E1E25;
  --paper:#F6F3EE;
  --gold:#C9A45C;
  --gold-l:#E6D2A3;
  --bdx:#8E1F4B;
  --bdx-l:#B54372;
  --gray:#9A9AA3;
  --gray-d:#6A6A73;
  --line:rgba(255,255,255,.12);
  --line-d:rgba(0,0,0,.14);
  --min:"Shippori Mincho","游明朝",YuMincho,"Hiragino Mincho ProN","MS PMincho",serif;
  --lat:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --got:-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:#fff;
  font-family:var(--got);
  font-size:15px;
  line-height:2;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
figure{margin:0}
blockquote{margin:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
/* 写真を並べる面は、本文幅より広く取って作品を大きく見せる */
.wrap-wide{max-width:1640px;padding:0 40px}
@media(max-width:900px){.wrap-wide{padding:0 20px}}
.sec{padding:104px 0}
@media(max-width:768px){.sec{padding:64px 0}}

/* ===== typography ===== */
.en{
  font-family:var(--lat);
  font-size:11px;
  letter-spacing:.42em;
  color:var(--gold);
  text-transform:uppercase;
  margin:0 0 14px;
}
.h-sec{
  font-family:var(--min);
  font-weight:500;
  font-size:clamp(24px,3.2vw,32px);
  letter-spacing:.18em;
  margin:0;
  line-height:1.6;
}
.rule{width:34px;height:1px;background:var(--gold);margin:22px 0 0}
.rule.c{margin-left:auto;margin-right:auto}
.lead{color:var(--gray);font-size:13.5px;line-height:2.2;margin:20px 0 0}
.center{text-align:center}

/* ===== buttons ===== */
.btn{
  display:inline-block;
  padding:15px 34px;
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:12.5px;
  letter-spacing:.16em;
  transition:.4s;
}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn-bdx{border-color:var(--bdx);background:var(--bdx);color:#fff}
.btn-bdx:hover{background:var(--bdx-l);border-color:var(--bdx-l);color:#fff}
.btn-light{border-color:#1A1A1F;color:#1A1A1F}
.btn-light:hover{background:#1A1A1F;color:#fff}

/* ===== header ===== */
.hd{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:.5s;
  border-bottom:1px solid transparent;
}
.hd.on{background:rgba(11,11,14,.92);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
/* ヘッダーだけは本文幅(1200px)に収めず、画面の端まで使う
   → ロゴは左端、メニューは右端に寄る */
/* 左のパディングだけ広くして、ロゴを少し内側へ寄せる（メニューは右端のまま） */
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:100px;
  max-width:none;padding:0 48px 0 96px}
.logo{display:block}
.logo img{height:38px;width:auto;display:block}
.logo .jp{font-family:var(--min);font-size:19px;letter-spacing:.22em;display:block;line-height:1.3}
.logo .en{font-size:8px;letter-spacing:.28em;margin:2px 0 0;color:var(--gold)}
.ft .logo img{height:30px}
@media(max-width:900px){.logo img{height:24px}}
.nav{display:flex;align-items:center;gap:32px}
.nav a{font-family:var(--lat);font-weight:400;font-size:18px;letter-spacing:.12em;opacity:.94;transition:.3s;white-space:nowrap}
.nav a:hover{opacity:1;color:var(--gold)}
@media(max-width:1400px){.nav{gap:24px}.nav a{font-size:16px;letter-spacing:.08em}}
@media(max-width:1150px){.nav{gap:18px}.nav a{font-size:14.5px;letter-spacing:.05em}.logo img{height:30px}}
.burger{display:none;width:28px;height:18px;position:relative;background:none;border:0;cursor:pointer;padding:0}
.burger span{position:absolute;left:0;width:100%;height:1.4px;background:#fff;transition:.35s}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:8px}
.burger span:nth-child(3){top:16px}
.burger.on span:nth-child(1){top:8px;transform:rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){top:8px;transform:rotate(-45deg)}
@media(max-width:900px){
  .hd .wrap{height:70px;padding:0 24px}
  /* ★重要：backdrop-filter があると position:fixed の基準がヘッダーになり、
     メニューがヘッダーの高さに閉じ込められる。モバイルでは必ず切る */
  .hd,.hd.on{backdrop-filter:none;-webkit-backdrop-filter:none}
  .hd.on{background:rgba(11,11,14,.96)}
  /* メニューを開いている間はヘッダーも塗りつぶす */
  body.nav-open .hd{background:var(--ink);border-bottom-color:transparent}
  /* ロゴとボタンは常に最前面 */
  .hd .logo,.burger{position:relative;z-index:3}
  .burger{display:block}
  .nav{
    position:fixed;inset:0;z-index:2;
    background:var(--ink);                 /* 半透明にしない（下が透けてしまうため） */
    flex-direction:column;align-items:center;justify-content:center;
    gap:26px;padding:96px 24px 48px;
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;
    transition:opacity .4s ease,visibility .4s ease;
  }
  .nav.on{opacity:1;visibility:visible}
  .nav a{font-size:16px;letter-spacing:.26em;opacity:1}
}

/* ===== OP動画 → シャッター ===== */
body.op-on{overflow:hidden}
.op{position:fixed;inset:0;z-index:9999;background:#000;overflow:hidden}
.op video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:opacity .7s ease}
.op .sh{position:absolute;left:0;width:100%;height:50.4%;background:#000;z-index:1;
  transition:transform 1.9s cubic-bezier(.74,0,.20,1)}
.op .sh.t{top:0}
.op .sh.b{bottom:0}
.op-ui{position:absolute;z-index:3;right:32px;bottom:32px;display:flex;gap:12px;transition:opacity .5s}
.op-btn{
  background:rgba(0,0,0,.35);border:1px solid rgba(201,164,92,.55);color:var(--gold);
  font-family:var(--got);font-size:11.5px;letter-spacing:.14em;padding:11px 20px;cursor:pointer;
  backdrop-filter:blur(6px);transition:.3s;
}
.op-btn:hover{background:var(--gold);color:#000;border-color:var(--gold)}
.op-btn.on{color:#fff;border-color:rgba(255,255,255,.6)}
.op.end video,.op.end .op-ui{opacity:0;pointer-events:none}
.op.open{background:transparent;pointer-events:none}
.op.open .sh.t{transform:translateY(-100%)}
.op.open .sh.b{transform:translateY(100%)}
@media(max-width:600px){.op-ui{right:16px;bottom:20px}.op-btn{padding:10px 14px;font-size:11px}}

/* ===== トップ ヒーロー（日の出） ===== */
.hero-img{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-img .ph{position:absolute;inset:0}
/* 切り取り位置を上に寄せ、岩の上に朝焼けの空を残す */
.hero-img .ph img{width:100%;height:100%;object-fit:cover;object-position:center 8%}
.hero-img .ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 46%,rgba(11,11,14,.80) 88%,var(--ink) 100%);
}
.hero-img .wrap{position:relative;z-index:1;padding-bottom:96px;text-align:center}
.hero-img .sub{font-family:var(--min);font-size:13px;letter-spacing:.42em;opacity:.9;margin:0}
.hero-img h1{
  font-family:var(--min);font-weight:500;
  font-size:clamp(28px,4.6vw,48px);letter-spacing:.26em;margin:18px 0 0;line-height:1.5;
  text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.hero-img .scroll{margin-top:44px}

/* ===== 額（展示室への入口） ===== */
.gate{background:var(--ink);text-align:center;padding:120px 0}
.gate .frame{margin:44px auto 0}
.gate .cap-jp{font-family:var(--min);font-size:14px;letter-spacing:.4em;opacity:.85;margin:40px 0 0}

/* ===== 闇 ⇄ 光 の境目 =====
   グラデーションで溶かすと濁って見えたため、きっぱり切り替える。
   境界に金の細い線を1本だけ引いて「意図した仕切り」に見せる。 */
.flowers{border-top:1px solid rgba(201,164,92,.45);border-bottom:1px solid rgba(201,164,92,.45)}
.flowers{padding-top:132px;padding-bottom:132px}
@media(max-width:768px){.flowers{padding-top:80px;padding-bottom:80px}}

/* ===== hero ===== */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:120px 24px 80px;text-align:center;
  background:radial-gradient(120% 90% at 50% 30%,#1A1622 0%,#0B0B0E 58%,#000 100%);
}
.hero .en{margin-bottom:46px}
.frame{
  display:block;                 /* aタグで使うのでインラインにしない（枠が潰れる） */
  position:relative;width:min(620px,88vw);
  padding:18px;background:#0F0D0A;
  border:1px solid rgba(201,164,92,.7);
  box-shadow:0 0 140px rgba(230,210,163,.16),0 0 40px rgba(230,210,163,.10);
}
.frame::after{content:"";position:absolute;inset:12px;border:1px solid rgba(201,164,92,.42);pointer-events:none}
.frame img{width:100%;aspect-ratio:3/2;object-fit:cover}
.hero .sub{font-family:var(--min);font-size:14px;letter-spacing:.42em;opacity:.85;margin:44px 0 0}
.hero h1{
  font-family:var(--min);font-weight:500;
  font-size:clamp(28px,4.6vw,46px);
  letter-spacing:.26em;margin:20px 0 0;line-height:1.5;
}
.hero .btn{margin-top:38px}
.scroll{margin-top:56px;font-family:var(--lat);font-size:9px;letter-spacing:.3em;color:var(--gray)}
.scroll::before{content:"";display:block;width:1px;height:44px;background:rgba(255,255,255,.3);margin:0 auto 12px}

/* ===== message ===== */
.msg{position:relative;overflow:hidden;text-align:center;padding:120px 0}
.msg .bg{position:absolute;inset:0;z-index:0}
.msg .bg img{width:100%;height:100%;object-fit:cover;opacity:.22}
.msg .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(11,11,14,.55) 50%,var(--ink) 100%)}
.msg .wrap{position:relative;z-index:1}
.msg p{
  font-family:var(--min);font-size:clamp(14px,1.4vw,16.5px);
  line-height:2.7;letter-spacing:.1em;max-width:800px;margin:0 auto;opacity:.94;
}
.msg .sign-txt{font-family:var(--min);font-size:14.5px;letter-spacing:.22em;color:var(--gold);margin-top:52px}
.msg .sign{width:210px;margin:6px auto 0;opacity:.95}

/* ===== section head ===== */
.head{display:flex;align-items:flex-start;gap:60px;margin-bottom:56px;flex-wrap:wrap}
.head .lead{margin-top:0;flex:1;min-width:260px;max-width:640px}

/* ===== gallery grid ===== */
.g-main{display:grid;grid-template-columns:1.72fr 1fr;gap:24px}
.g-side{display:grid;gap:24px}
.g-main figure,.g-side figure{margin:0;overflow:hidden}
.g-main img{width:100%;height:480px;object-fit:cover}
.g-side img{width:100%;height:228px;object-fit:cover}
.cap{margin-top:16px}
.cap .jp{font-family:var(--min);font-size:16px;letter-spacing:.14em}
.cap .en{font-size:9px;letter-spacing:.26em;margin:4px 0 0}
@media(max-width:860px){
  .g-main{grid-template-columns:1fr}
  .g-main img{height:56vw}
  .g-side{grid-template-columns:1fr 1fr}
  .g-side img{height:32vw}
}

.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid img{width:100%;object-fit:cover}
.grid-2 img{height:392px}
.grid-3 img{height:258px}
@media(max-width:860px){
  .grid-2,.grid-3{grid-template-columns:1fr 1fr}
  .grid-2 img,.grid-3 img{height:34vw}
}

/* ===== flowers (invert) ===== */
.flowers{background:var(--paper);color:#1A1A1F;text-align:center}
.flowers .en{color:#9A7B3C}
.flowers h2{font-family:var(--min);font-weight:500;font-size:clamp(23px,3vw,32px);letter-spacing:.2em;margin:0}
.flowers .quote{font-family:var(--min);font-size:14px;letter-spacing:.26em;color:#9A7B3C;margin:22px 0 0}
.flowers .fg{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center;margin-top:72px;text-align:left}
.flowers .fg img{width:100%;height:400px;object-fit:cover}
.flowers .fg .s img{height:320px}
.flowers .foot{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:56px;flex-wrap:wrap;text-align:left}
.flowers .foot p{color:#55555C;font-size:13.5px;line-height:2.2;margin:0;max-width:560px}
@media(max-width:860px){.flowers .fg{grid-template-columns:1fr;gap:24px}.flowers .fg img,.flowers .fg .s img{height:56vw}}

/* ===== cards ===== */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{position:relative;min-height:380px;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink3)}
.card .ph{position:absolute;inset:0}
.card .ph img{width:100%;height:100%;object-fit:cover;object-position:left center}
.card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,14,.82) 0%,rgba(11,11,14,.30) 60%,rgba(11,11,14,.55) 100%)}
.card .in{position:relative;padding:44px;width:100%}
.card .in .en{margin-bottom:10px}
.card h3{font-family:var(--min);font-weight:500;font-size:24px;letter-spacing:.14em;margin:0}
.card p{color:var(--gray);font-size:13px;line-height:2.1;margin:16px 0 0}
.card.outline{border:1px solid rgba(201,164,92,.4);align-items:center}
.card .btn{margin-top:26px}
@media(max-width:860px){.cards{grid-template-columns:1fr}.card{min-height:320px}}

/* ===== plans (exhibition) ===== */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.plan{background:var(--ink3);border:1px solid var(--line);padding:44px 38px;display:flex;flex-direction:column}
.plan h3{font-family:var(--min);font-weight:500;font-size:22px;letter-spacing:.14em;margin:0}
.plan p{color:var(--gray);font-size:13px;line-height:2.1;margin:22px 0 0;flex:1}
.plan .btn{margin-top:30px;align-self:flex-start}
@media(max-width:900px){.plans{grid-template-columns:1fr}}

/* ===== page hero ===== */
.phero{position:relative;min-height:440px;display:flex;align-items:center;overflow:hidden;padding:140px 0 60px}
.phero .bg{position:absolute;inset:0}
.phero .bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.phero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,14,.9) 0%,rgba(11,11,14,.45) 55%,rgba(11,11,14,.92) 100%)}
.phero .wrap{position:relative}
.phero h1{font-family:var(--min);font-weight:500;font-size:clamp(28px,4vw,40px);letter-spacing:.24em;margin:0}
.phero.story .bg img{object-position:center 30%;opacity:.85}

/* ===== timeline ===== */
.tl{border-top:1px solid var(--line)}
.tl li{display:grid;grid-template-columns:200px 1fr;gap:40px;padding:44px 0;border-bottom:1px solid var(--line);list-style:none}
.tl{margin:0;padding:0}
.tl .y{font-family:var(--lat);font-size:32px;letter-spacing:.04em;color:var(--gold);opacity:.9;line-height:1}
.tl h3{font-family:var(--min);font-weight:500;font-size:20px;letter-spacing:.12em;margin:0}
.tl p{color:var(--gray);font-size:13px;line-height:2.2;margin:14px 0 0}
@media(max-width:768px){.tl li{grid-template-columns:1fr;gap:10px}}

/* ===== quote block ===== */
.qb{background:#07070A}
.qb-in{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:center}
/* 写真は切らずに全体を見せる。高さを決め打ちにすると左右が切れる
   （ここに入る写真は3:2、枠は約1.11なので26%が切られていた） */
.qb .ph img{display:block;width:100%;height:auto}
.qb blockquote{margin:0;font-family:var(--min);font-size:clamp(22px,2.6vw,32px);line-height:1.9;letter-spacing:.12em}
.qb .sub{color:var(--gray);font-size:13px;line-height:2.2;margin:30px 0 0}
@media(max-width:900px){.qb-in{grid-template-columns:1fr;gap:36px}}

/* ===== news ===== */
.news{border-top:1px solid var(--line);margin:0;padding:0}
.news li{display:grid;grid-template-columns:200px 84px 1fr;gap:28px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line);list-style:none}
.news .date{font-family:var(--lat);font-size:13px;letter-spacing:.1em;color:var(--gold)}
.news .tag{border:1px solid rgba(255,255,255,.28);font-size:10.5px;text-align:center;padding:3px 0;color:var(--gray)}
.news h3{font-family:var(--min);font-weight:500;font-size:17px;letter-spacing:.1em;margin:0}
.news p{color:var(--gray);font-size:12.5px;margin:8px 0 0;line-height:1.9}
.news.no-date li{grid-template-columns:84px 1fr}

/* ===== お知らせ（会期・会場つき＋ポスター） ===== */
.news2{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.news2 li{display:grid;grid-template-columns:1fr;gap:44px;align-items:start;
  padding:40px 0;border-bottom:1px solid var(--line)}
.news2 li.has-img{grid-template-columns:200px 1fr}
.n-meta{display:flex;align-items:center;gap:16px;margin:0 0 12px}
.n-meta .date{font-family:var(--lat);font-size:14px;letter-spacing:.1em;color:var(--gold)}
.n-meta .tag{border:1px solid rgba(255,255,255,.28);font-size:10.5px;color:var(--gray);
  padding:3px 12px;line-height:1.8}
.news2 h3{font-family:var(--min);font-weight:500;font-size:20px;letter-spacing:.1em;margin:0;line-height:1.7}
.n-info{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;margin:16px 0 0;font-size:13px}
.n-info dt{color:var(--gold);font-size:11px;letter-spacing:.18em;padding-top:3px}
.n-info dd{margin:0;color:#D6D6DC;line-height:1.9}
.n-body{color:var(--gray);font-size:12.5px;line-height:2;margin:14px 0 0}
.n-ph img{width:100%;border:1px solid var(--line)}
@media(max-width:768px){
  .news2 li,.news2 li.has-img{grid-template-columns:1fr;gap:20px}
  .n-ph{max-width:190px}
}
@media(max-width:768px){.news li,.news.no-date li{grid-template-columns:1fr;gap:8px}.news .tag{width:84px}}

/* ===== books ===== */
.books{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;align-items:start}
.book .jacket{height:320px;display:flex;align-items:flex-end;justify-content:center}
.book .jacket img{max-width:100%;max-height:320px;width:auto;height:auto;display:block;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.8)}
.book .jacket span{display:flex;align-items:center;justify-content:center;
  width:220px;height:294px;background:var(--ink3);border:1px solid rgba(255,255,255,.14);
  color:var(--gray-d);font-size:11px}
.book .b-label{font-size:11.5px;letter-spacing:.14em;color:var(--gold);margin:18px 0 0}
.book .b-label + h3{margin-top:5px}
.book h3{font-family:var(--min);font-weight:500;font-size:15px;letter-spacing:.08em;margin:18px 0 0}
.book p{color:var(--gray);font-size:11.5px;margin:6px 0 0;line-height:1.8}
.book .b-sub{color:#C9C9D0}
.book .b-link a{font-size:12px;color:var(--gold);letter-spacing:.08em;transition:.3s}
.book .b-link a:hover{opacity:.7}
.book .b-link{margin-top:12px}
.book .b-desc{margin-top:14px;font-size:12.5px;line-height:2}
.book .b-desc + .b-desc{margin-top:8px}
.book .b-price{margin-top:10px;font-size:13px;letter-spacing:.06em;color:var(--gold)}

/* 暗い面のカレンダー（BOOKSページ）は文字色だけ差し替える */
.sec .cal__y{color:#fff}
.sec .cal__s{color:var(--gold)}
.cal__bd{font-family:var(--got);font-style:normal;font-size:11px;letter-spacing:.14em;
  background:#8E1F4B;color:#fff;padding:4px 12px;margin-left:12px;vertical-align:middle}

/* トップのメディア掲載の帯 */
.media-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;align-items:end}
.media-strip a{display:block;overflow:hidden;background:var(--ink3)}
.media-strip img{width:100%;transition:.6s;opacity:.9}
.media-strip a:hover img{opacity:1;transform:scale(1.04)}
@media(max-width:768px){.media-strip{grid-template-columns:repeat(3,1fr);gap:12px}}

/* 雑誌表紙のグリッド */
.cover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px;margin-top:22px}
.cover-grid img{width:100%;border:1px solid var(--line)}
@media(max-width:900px){.books{grid-template-columns:1fr 1fr}}

.banner{background:var(--ink3);padding:38px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:64px}
.banner h3{font-family:var(--min);font-weight:500;font-size:19px;letter-spacing:.1em;margin:0}
.banner p{color:var(--gray);font-size:12px;margin:6px 0 0}

/* ===== contact ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:80px}
.contact-info .line{border-top:1px solid var(--line);margin:40px 0 30px}
.contact-info dl{margin:0;font-size:13px;line-height:2.4}
.contact-info dt{color:var(--gray);font-size:11px;letter-spacing:.14em}
.contact-info dd{margin:0 0 16px}
.form label{display:block;font-size:12px;color:var(--gray);margin:0 0 8px}
.form input[type=text],.form input[type=email],.form textarea{
  width:100%;background:transparent;border:1px solid rgba(255,255,255,.22);
  color:#fff;font-family:var(--got);font-size:14px;padding:14px 16px;margin-bottom:26px;
}
.form textarea{min-height:180px;resize:vertical}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--gold)}
.form .submit{background:transparent;border:1px solid var(--gold);color:var(--gold);padding:15px 46px;font-size:12.5px;letter-spacing:.16em;cursor:pointer;transition:.4s}
.form .submit:hover{background:var(--gold);color:var(--ink)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:48px}}

/* ===== ギャラリー：隙間なく組むモザイク ==========================
   参考デザイン（ギャラリー参考）にならい、写真を突き合わせて並べ、
   文字は写真の上に載せる。
   ================================================================ */
/* セル1つを作品と同じ 3:2 にそろえる（4列×2段＝全体 3:1）。
   使うのは 1コマ と 2x2 だけ。どちらも 3:2 になるので、作品はほとんど切れない。 */
.mosaic{display:grid;gap:0;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);aspect-ratio:3/1}
.mosaic figure{margin:0;position:relative;overflow:hidden;background:#000}
.mosaic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.mosaic figure:hover img{transform:scale(1.04)}
.mosaic figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  font-family:var(--min);font-size:12.5px;letter-spacing:.12em;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.62) 100%);
  opacity:0;transform:translateY(6px);transition:.5s;
}
.mosaic figure:hover figcaption{opacity:1;transform:none}
.m-2x2{grid-column:span 2;grid-row:span 2}

/* 冒頭：モザイクの上に置くタイトル */
.g-top{position:relative}
/* ヘッダーのロゴ・メニューが写真に埋もれないよう、上に暗がりを敷く */
.g-top::before{
  content:"";position:absolute;left:0;right:0;top:0;height:220px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,14,.88) 0%,rgba(11,11,14,.45) 46%,rgba(11,11,14,0) 100%);
}
.g-title{
  z-index:2;
  position:absolute;left:0;right:0;bottom:0;padding:0 0 46px;
  text-align:center;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,14,0) 0%,rgba(11,11,14,.72) 78%,var(--ink) 100%);
  padding-top:120px;
}
.g-title .en{margin-bottom:10px}
.g-title h1{
  font-family:var(--min);font-weight:500;margin:0;
  font-size:clamp(30px,4.6vw,52px);letter-spacing:.38em;text-indent:.38em;
  text-shadow:0 2px 30px rgba(0,0,0,.6);
}

/* 大きな一枚 ＋ 縦書き */
.feature{position:relative;background:#000}
/* 大きな一枚は切らずに全部見せる */
.feature > img{display:block;width:100%;height:auto;opacity:.94}
.feature::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.55) 100%);
}
.feature__v{position:absolute;right:7%;top:12%;bottom:12%;z-index:2;display:flex;justify-content:flex-end}
.feature__v p{
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:var(--min);font-size:clamp(13px,1.25vw,16.5px);
  line-height:2.5;letter-spacing:.18em;margin:0;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.75);
  padding:26px 30px 26px 0;position:relative;
}
/* 参考デザインの「かぎ括弧」の罫 */
.feature__v p::before,.feature__v p::after{content:"";position:absolute;width:34px;height:34px}
.feature__v p::before{top:0;right:0;border-top:1px solid rgba(255,255,255,.75);border-right:1px solid rgba(255,255,255,.75)}
.feature__v p::after{bottom:0;left:0;border-bottom:1px solid rgba(255,255,255,.75);border-left:1px solid rgba(255,255,255,.75)}
.feature__cap{
  position:absolute;left:6%;bottom:34px;z-index:2;margin:0;
  font-family:var(--min);font-size:13px;letter-spacing:.2em;color:rgba(255,255,255,.85);
}

/* 二段目のモザイクに重ねる一文 */
.g-mid{position:relative;background:var(--ink)}
.g-over{
  position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;
  padding:70px 24px 34px;text-align:center;pointer-events:none;
  font-family:var(--min);font-size:clamp(15px,1.8vw,22px);letter-spacing:.22em;color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.9);
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.62) 60%,rgba(0,0,0,.78) 100%);
}

/* テーマ別のセクション */
.g-theme{padding:96px 0}

/* 花（白）のモザイク */
.flowers .mosaic--f{margin-top:56px}
.flowers .mosaic figcaption{color:#1A1A1F;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(246,243,238,.86) 100%)}
.f-note{color:#55555C;font-size:13.5px;line-height:2.2;margin:40px 0 0;text-align:center}
.flowers:has(.mosaic--f){padding-bottom:88px}

/* 締め */
.g-end{position:relative;background:#000}
.g-end img{display:block;width:100%;height:min(52vh,520px);object-fit:cover;opacity:.55}
.g-end__t{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;
  font-family:var(--min);font-size:clamp(16px,2.2vw,26px);letter-spacing:.32em;color:#fff;
  text-shadow:0 2px 26px rgba(0,0,0,.7);
}

@media(max-width:900px){
  /* 2列×4段。セルはやはり 3:2 のまま（全体 3:4） */
  .mosaic{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr);aspect-ratio:3/4}
  .mosaic figcaption{opacity:1;transform:none;font-size:11.5px;padding:10px 12px}
  .g-title{padding-top:70px;padding-bottom:30px}
  /* スマホでは写真の上に縦書きの言葉が重なって読みづらいので、
     セクションごと出さない（客の指示 2026-08-03）。写真は上のグリッドで見せている */
  .feature{display:none}
  .feature__v{right:5%;top:6%;bottom:6%}
  .feature__v p{font-size:13px;line-height:2.2;letter-spacing:.14em}
  .g-over{bottom:4%;font-size:14px;letter-spacing:.14em;padding:0 18px}
  .g-theme{padding:64px 0}
}

/* ===== テーマ別への導線 ===== */
.theme-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:24px}
.theme-nav a{position:relative;display:block;overflow:hidden;background:var(--ink3)}
/* 作品と同じ 3:2。切らずに見せる */
.theme-nav img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;opacity:.62;transition:.6s}
.theme-nav a:hover img{opacity:.8;transform:scale(1.03)}
.theme-nav .jp{position:absolute;left:0;right:0;top:50%;transform:translateY(-62%);text-align:center;
  font-family:var(--min);font-size:28px;letter-spacing:.26em;text-shadow:0 2px 24px rgba(0,0,0,.7)}
.theme-nav .en{position:absolute;left:0;right:0;top:50%;transform:translateY(38%);text-align:center;
  font-family:var(--lat);font-size:11px;letter-spacing:.34em;color:var(--gold)}
@media(max-width:768px){.theme-nav{grid-template-columns:1fr;gap:18px}.theme-nav .jp{font-size:24px}}

/* ===== 明るい面（光に着地したあとのセクション）===== */
.sec.light{background:var(--paper);color:#1A1A1F}
.sec.light .en{color:#9A7B3C}
.sec.light .h-sec{color:#1A1A1F}
.sec.light .lead{color:#55555C}
.sec.light .rule{background:#9A7B3C}
.sec.light .card.outline{background:#fff;border-color:rgba(0,0,0,.14)}
.sec.light .card.outline h3{color:#1A1A1F}
.sec.light .card.outline p{color:#55555C}

/* ===== 展示室 =====================================================
   壁に額を掛けた常設展示。額縁は画像に焼き込まず、CSSで描く。
   → 作品ごとに別の額にできる／後から額の種類を足せる
   ================================================================== */
.hall{
  position:relative;padding:120px 0 140px;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(201,164,92,.10) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg,#141110 0%,#0d0b0a 42%,#0a0908 78%,#060505 100%);
  border-top:1px solid var(--line);
}
/* 床の見切り */
.hall::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:180px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.hall .wrap{position:relative;z-index:1}
.hall .wrap{max-width:1640px;padding:0 40px}
.hall-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:130px 80px;align-items:end;justify-items:center;
}

/* ---- 一点ぶん ---- */
.art{margin:0;width:100%;max-width:660px;text-align:center;position:relative}
.art--lg{max-width:760px}
.art--md{max-width:620px}
.art--sm{max-width:480px}
/* 上からのスポットライト */
.art::before{
  content:"";position:absolute;left:50%;top:-70px;transform:translateX(-50%);
  width:150%;height:190px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,238,205,.16) 0%,rgba(255,238,205,0) 100%);
}
.art__btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.art__frame{
  display:block;position:relative;
  box-shadow:0 26px 50px -18px rgba(0,0,0,.85), 0 6px 18px rgba(0,0,0,.5);
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.art__btn:hover .art__frame{transform:translateY(-4px)}
.art__mat{display:block;background:var(--mat,#0b0b0e);padding:16px}
.art__mat img{display:block;width:100%;height:auto}

/* ---- 額縁の種類（増やすときはここに1ブロック足す）---- */
.frame-gold{
  padding:18px;
  background:
    linear-gradient(135deg,#e6d2a3 0%,#b9903f 18%,#7d5f2c 34%,#e0c98f 52%,#8a6a33 70%,#c9a45c 86%,#6d5227 100%);
  box-shadow:0 26px 50px -18px rgba(0,0,0,.85),
             inset 0 0 0 1px rgba(0,0,0,.45),
             inset 0 0 0 7px rgba(255,240,205,.14),
             inset 0 0 0 8px rgba(0,0,0,.35);
}
.frame-gold2{
  padding:11px;
  background:linear-gradient(135deg,#d9c391 0%,#a5813a 40%,#e3cf9c 62%,#8e6d34 100%);
  box-shadow:0 22px 44px -18px rgba(0,0,0,.85),
             inset 0 0 0 1px rgba(0,0,0,.5),
             inset 0 0 0 4px rgba(255,244,214,.16);
}
.frame-black{
  padding:15px;
  background:linear-gradient(135deg,#1c1a18 0%,#0d0c0b 50%,#23201d 100%);
  box-shadow:0 22px 44px -18px rgba(0,0,0,.9),
             inset 0 0 0 1px rgba(0,0,0,.8),
             inset 0 0 0 6px rgba(201,164,92,.42);
}
.frame-wood{
  padding:16px;
  background:linear-gradient(135deg,#5a3f28 0%,#3a2717 45%,#6b4c2e 70%,#2f1f13 100%);
  box-shadow:0 22px 44px -18px rgba(0,0,0,.85),
             inset 0 0 0 1px rgba(0,0,0,.6),
             inset 0 0 0 5px rgba(255,226,180,.10);
}
.frame-silver{
  padding:13px;
  background:linear-gradient(135deg,#d8d8dc 0%,#8e8e96 38%,#ececed 58%,#7b7b84 100%);
  box-shadow:0 22px 44px -18px rgba(0,0,0,.85),
             inset 0 0 0 1px rgba(0,0,0,.45),
             inset 0 0 0 4px rgba(255,255,255,.35);
}
.frame-thin{
  padding:6px;
  background:#e8e4db;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.8),inset 0 0 0 1px rgba(0,0,0,.25);
}

/* ---- 題箋 ---- */
.plate{margin-top:22px}
.plate__t{display:block;font-family:var(--min);font-size:16px;letter-spacing:.16em}
.plate__s{display:block;font-size:11px;color:var(--gray);letter-spacing:.1em;margin-top:5px}

@media(max-width:900px){
  .hall{padding:72px 0 96px}
  .hall-grid{grid-template-columns:1fr;gap:72px}
  .art,.art--lg,.art--md,.art--sm{max-width:100%}
  .art::before{top:-40px;height:120px}
  .frame-gold{padding:12px}
  .frame-gold2,.frame-silver{padding:8px}
  .frame-black,.frame-wood{padding:10px}
  .art__mat{padding:10px}
}

/* ---- 拡大表示 ---- */
.zoom{
  position:fixed;inset:0;z-index:9000;display:none;
  align-items:center;justify-content:center;padding:5vh 4vw;
  background:rgba(4,4,6,.96);
}
.zoom.on{display:flex}
.zoom__in{margin:0;text-align:center;max-width:min(1200px,92vw)}
.zoom__in img{max-width:100%;max-height:78vh;width:auto;height:auto;display:block;margin:0 auto;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9)}
.zoom__in figcaption{margin-top:20px}
.zoom__in .t{display:block;font-family:var(--min);font-size:18px;letter-spacing:.16em}
.zoom__in .s{display:block;font-size:11.5px;color:var(--gray);margin-top:6px}
.zoom__close{
  position:absolute;right:24px;top:20px;width:46px;height:46px;
  background:none;border:1px solid rgba(201,164,92,.5);color:var(--gold);
  font-size:24px;line-height:1;cursor:pointer;transition:.3s;
}
.zoom__close:hover{background:var(--gold);color:#000}

/* ===== quote line ===== */
.qline{text-align:center;padding:96px 0 0}
.qline p{font-family:var(--min);font-size:clamp(18px,2.2vw,22px);letter-spacing:.2em;margin:0;opacity:.92}

/* ===== footer ===== */
.ft{background:var(--ink);border-top:1px solid var(--line);padding:80px 0 34px}
.ft-in{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:50px}
.ft .logo{margin-bottom:24px;display:block}
.ft address{font-style:normal;color:#B4B4BC;font-size:14px;line-height:2.1}
.ft h4{font-family:var(--lat);font-size:12px;letter-spacing:.26em;color:var(--gold);margin:0 0 20px;text-transform:uppercase}
.ft ul{margin:0;padding:0;list-style:none;columns:2;column-gap:24px}
.ft ul li{margin-bottom:13px}
.ft ul a,.ft .sns a{font-size:14px;color:#B4B4BC;transition:.3s}
.ft ul a{font-family:var(--lat);letter-spacing:.12em}
.ft ul a:hover,.ft .sns a:hover{color:var(--gold)}
.ft .sns a{display:block;margin-bottom:13px}
.ft-btm{border-top:1px solid var(--line);margin-top:56px;padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ft-btm small{font-family:var(--lat);font-size:12px;letter-spacing:.08em;color:#7A7A83}
@media(max-width:900px){.ft-in{grid-template-columns:1fr;gap:38px}.ft ul{columns:2}}

/* =====================================================================
   ファインアート販売サイトの白い面（トップページ・参考 lik.com）
   写真が主役。装飾を持たず、余白と写真だけで見せる。
   ===================================================================== */
/* 2026-09-04：白基調 → クリーム（和紙白 --paper）に変更。
   .lt-alt は「1段濃い方」なので、.lt より必ず暗く保つこと。
   逆転すると段組みのリズムが崩れる */
.lt{background:var(--paper);color:#15151a}
.lt-alt{background:#EFEBE4}
.sec-lt{padding:120px 0}
.lt-head{margin:0 0 60px;text-align:center}
.lt-head .en{font-family:var(--lat);font-size:12px;letter-spacing:.42em;color:#9A7B3C;margin:0 0 14px;text-transform:uppercase}
.lt-head h2{font-family:var(--min);font-weight:500;margin:0;
  font-size:clamp(26px,3.2vw,36px);letter-spacing:.24em;color:#15151a}
/* 2026-09-11：高知の風景のリード文が長くなったので、行の幅に上限を置いた。
   無いと wrap-wide の全幅（最大1500px）に広がって、中央寄せの長文が読みにくい */
.lt-lead{color:#5A5A62;font-size:14px;line-height:2.1;margin:22px auto 0;max-width:760px}

/* 作品カード（クリックで販売ページへ） */
.ac-grid{display:grid;gap:70px 44px}
.ac-grid--2{grid-template-columns:repeat(2,1fr)}
.ac-grid--3{grid-template-columns:repeat(3,1fr)}
.ac{display:block;text-align:center;color:inherit}
.ac__ph{display:block;overflow:hidden;background:#eee}
.ac__ph img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.ac:hover .ac__ph img{transform:scale(1.035)}
.ac__t{display:block;font-family:var(--min);font-size:19px;letter-spacing:.14em;margin-top:26px}
.ac__s{display:block;font-family:var(--lat);font-size:12px;letter-spacing:.24em;color:#9A7B3C;margin-top:10px}
.ac:hover .ac__s{text-decoration:underline;text-underline-offset:4px}

/* 白い面のボタン */
.btn-lt{
  display:inline-block;padding:15px 42px;border:1px solid #15151a;color:#15151a;
  font-size:12.5px;letter-spacing:.18em;transition:.4s;
}
.btn-lt:hover{background:#15151a;color:#fff}
.btn-lt--on{border-color:rgba(255,255,255,.85);color:#fff}
.btn-lt--on:hover{background:#fff;color:#15151a}

/* ファインアートコレクション（部屋に飾った姿を全幅で。作品の上に文字を置かない） */
.collection{position:relative;background:#0d0a08;overflow:hidden}
.collection > img{display:block;width:100%;height:auto;opacity:1}
/* 文字を置く左下だけ、そっと暗がりを作る */
.collection::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 26%,rgba(0,0,0,0) 52%),
    linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 38%);
}
.collection__in{
  position:absolute;left:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  padding:0 6% 7%;max-width:860px;
}
.collection__in .en{font-family:var(--lat);font-size:12px;letter-spacing:.42em;color:#E6D2A3;margin:0 0 14px}
.collection__in h2{font-family:var(--min);font-weight:500;margin:0;color:#fff;
  font-size:clamp(24px,2.9vw,36px);letter-spacing:.22em;text-shadow:0 2px 24px rgba(0,0,0,.8)}
.collection__in p{color:rgba(255,255,255,.9);font-size:14px;line-height:2.1;margin:20px 0 30px;
  text-shadow:0 2px 16px rgba(0,0,0,.85)}

@media(max-width:768px){
  /* スマホは重ねずに、画像の下に文字を置く */
  .collection::after{display:none}
  .collection__in{position:static;max-width:none;padding:40px 24px 52px;background:#0d0a08}
}

/* 和合 3点 */
.wago-3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;max-width:1120px;margin:0 auto}
.wago-3 img{width:100%;border:1px solid rgba(0,0,0,.12);transition:.5s}
.wago-3 a:hover img{opacity:.82}

/* 写真集 */
/* 上端で揃える。下端揃えにすると、購入リンクの無い本だけ下にずれる */
.bk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;align-items:start}
/* 書影は判型がまちまち（縦長・正方形・横長）。
   決まった箱に収めると余白だらけになるので、
   高さの上限だけ決めて下端で揃える＝本棚に並べたように見せる。 */
.bk__ph{height:400px;display:flex;align-items:flex-end;justify-content:center}
.bk__ph img{max-width:100%;max-height:400px;width:auto;height:auto;display:block;
  box-shadow:0 16px 36px -12px rgba(0,0,0,.5)}
.bk__ph span{
  display:flex;align-items:center;justify-content:center;
  width:290px;height:380px;background:#EDEBE7;color:#B5B0A8;font-size:11.5px;
}
.lt-alt .bk__ph span{background:#E6E4DF}
.bk__lb{font-size:11.5px;letter-spacing:.14em;color:#9A7B3C;margin:18px 0 0}
.bk__lb + .bk__t{margin-top:5px}
.bk__t{font-family:var(--min);font-size:15px;letter-spacing:.1em;margin:18px 0 0;color:#15151a}
.bk__s{font-size:11.5px;color:#7A7A83;margin:6px 0 0;line-height:1.8}
.bk__l{display:inline-block;font-size:12px;letter-spacing:.1em;color:#9A7B3C;margin-top:10px}
.bk__l:hover{text-decoration:underline;text-underline-offset:3px}

/* 最新年のカレンダー（予約受付中）は1点だけ大きく出す */
.cal-feat{max-width:900px;margin:0 auto 76px;text-align:center}
.cal-feat a{display:block;color:inherit}
.cal-feat__ph{position:relative;display:block;overflow:hidden}
.cal-feat__ph img{display:block;width:100%;height:auto;
  box-shadow:0 22px 46px -16px rgba(0,0,0,.5);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.cal-feat a:hover .cal-feat__ph img{transform:scale(1.02)}
.cal-feat__badge{
  position:absolute;left:0;top:0;background:#8E1F4B;color:#fff;
  font-size:12px;letter-spacing:.16em;padding:9px 20px;
}
.cal-feat__y{display:block;font-family:var(--lat);font-size:30px;letter-spacing:.14em;margin-top:26px;color:#15151a}
.cal-feat__btn{margin-top:20px}

/* カレンダー（横長の表紙を年ごとに並べる） */
.cal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 44px}
.cal{display:block;text-align:center;color:inherit}
.cal__ph{display:block;overflow:hidden}
.cal__ph img{display:block;width:100%;height:auto;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.45);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
a.cal:hover .cal__ph img{transform:scale(1.03)}
.cal__y{display:block;font-family:var(--lat);font-size:22px;letter-spacing:.14em;margin-top:20px;color:#15151a}
.cal__s{display:block;font-size:12px;letter-spacing:.18em;color:#9A7B3C;margin-top:7px}
a.cal:hover .cal__s{text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){.cal-grid{grid-template-columns:1fr 1fr;gap:34px 18px}.cal__y{font-size:18px;margin-top:12px}}

/* プロフィール */
/* 2026-09-07：クリーム基調に変えたとき直し忘れていた。#F7F6F4 は新しい地色より
   明るく、濃淡が逆転していた。lt-alt と同じ「1段濃い」色に揃える */
.profile{background:#EFEBE4;padding:120px 0}
.profile__in{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center;max-width:1440px;padding:0 40px}
.profile__ph img{width:100%;aspect-ratio:3/2;object-fit:cover}
.profile__tx .en{font-family:var(--lat);font-size:12px;letter-spacing:.42em;color:#9A7B3C;margin:0 0 14px}
.profile__tx h2{font-family:var(--min);font-weight:500;font-size:clamp(24px,3vw,32px);
  letter-spacing:.24em;margin:0 0 26px;color:#15151a}
.profile__tx p{color:#4A4A52;font-size:14px;line-height:2.2;margin:0 0 34px}

/* 白い面のお知らせ */
.lt .news2{border-top-color:rgba(0,0,0,.14)}
.lt .news2 li{border-bottom-color:rgba(0,0,0,.14)}
.lt .news2 h3{color:#15151a}
.lt .n-meta .date{color:#9A7B3C}
.lt .n-meta .tag{border-color:rgba(0,0,0,.28);color:#6A6A72}
.lt .n-info dt{color:#9A7B3C}
.lt .n-info dd{color:#3A3A42}
.lt .n-body{color:#6A6A72}
.lt .n-ph img{border-color:rgba(0,0,0,.14)}

/* 最後のメッセージ（黒に戻して締める） */
.msg-lt{background:var(--ink);color:#fff;padding:130px 0;text-align:center}
.msg-lt .en{font-family:var(--lat);font-size:12px;letter-spacing:.42em;color:var(--gold);margin:0 0 40px}
.msg-lt__t{font-family:var(--min);font-size:clamp(14px,1.4vw,16.5px);line-height:2.8;
  letter-spacing:.1em;margin:0 auto;max-width:820px;opacity:.94}
.msg-lt__s{font-family:var(--min);font-size:15px;letter-spacing:.22em;color:var(--gold);margin:56px 0 0}
.msg-lt__sign{width:210px;margin:8px auto 0}

/* トップページだけヘッダーを白基調にする（スクロール後） */
body.home .hd.on{background:rgba(246,243,238,.95);border-bottom-color:rgba(0,0,0,.10)}
body.home .hd.on .nav a{color:#15151a}
body.home .hd.on .nav a:hover{color:#9A7B3C}
body.home .hd.on .logo img{filter:brightness(.72) saturate(1.15)}
body.home .hd.on .burger span{background:#15151a}

@media(max-width:900px){
  .sec-lt,.profile{padding:72px 0}
  .lt-head{margin-bottom:40px}
  .ac-grid{gap:44px 20px}
  .ac-grid--2,.ac-grid--3{grid-template-columns:1fr}
  .ac__t{font-size:16px;margin-top:16px}
  .collection > img{height:62vh}
  .wago-3{gap:16px}
  .bk-grid{grid-template-columns:1fr 1fr;gap:28px}
  .bk__ph{height:210px}
  .bk__ph img{max-height:210px}
  .bk__ph span{width:150px;height:196px}
  .profile__in{grid-template-columns:1fr;gap:34px}
  .msg-lt{padding:84px 0}
  .msg-lt__t{font-size:14px;line-height:2.4;padding:0 4px}
}

/* ===== reveal ===== */
/* JSが動く時だけ隠す（JS無効・エラー時も本文は必ず見える） */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1)}
.js .rv.in{opacity:1;transform:none}
/* 確認用モード（?flat=1）：演出を止めて通しで見る */
body.flat-view .rv,body.flat-view.js .rv{opacity:1!important;transform:none!important}
body.flat-view .hero-img{min-height:0;height:760px}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ===== 404 ===== */
.nf{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:160px 24px 100px}

/* =====================================================================
   ★サイト全体を白基調へ（2026-08-02）
   参考 lik.com。写真が主役、装飾を持たない。
   暗いまま残すのは「OP動画・トップのヒーロー・ページ見出しの写真帯・
   ファインアートコレクション・締めのメッセージ・拡大表示」だけ。
   ===================================================================== */
:root{
  --ink:#FFFFFF;
  --ink2:#F7F6F4;
  --ink3:#EFEDE9;
  --line:rgba(0,0,0,.13);
  --line-d:rgba(0,0,0,.13);
  --gray:#6A6A72;
  --gray-d:#9A9AA3;
  --dark:#0B0B0E;
  --gold-t:#9A7B3C;          /* 白地に載せる金 */
}
body{background:var(--paper);color:#15151a}

/* 見出し・罫 */
.en{color:var(--gold-t)}
.rule{background:var(--gold-t)}
.lead{color:#5A5A62}
.h-sec{color:#15151a}

/* ボタン */
.btn{border-color:#15151a;color:#15151a}
.btn:hover{background:#15151a;color:#fff}

/* ヘッダー（スクロール後は白地・黒文字） */
.hd.on{background:rgba(246,243,238,.95);border-bottom-color:rgba(0,0,0,.10)}
.hd.on .nav a{color:#15151a}
.hd.on .nav a:hover{color:var(--gold-t)}
.hd.on .logo img{filter:brightness(.72) saturate(1.15)}
.hd.on .burger span{background:#15151a}

/* ページ見出しの写真帯は暗いまま（文字は白） */
.phero{color:#fff;background:#0B0B0E}
.phero .en{color:#E6D2A3}
.phero .lead{color:rgba(255,255,255,.82)}
.phero .rule{background:#C9A45C}

/* トップのヒーロー下端は黒へ落とす */
.hero-img .ph::after{
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 46%,rgba(11,11,14,.80) 88%,#0B0B0E 100%);
}
.msg-lt{color:#fff}   /* 背景は下の「暗い紫の場」でまとめて指定 */

/* お知らせ */
.news2 h3{color:#15151a}
.news2 .n-meta .date{color:var(--gold-t)}
.news2 .n-meta .tag{border-color:rgba(0,0,0,.26);color:#6A6A72}
.n-info dt{color:var(--gold-t)}
.n-info dd{color:#3A3A42}
.n-body{color:#6A6A72}
.n-ph img{border-color:rgba(0,0,0,.13)}
.news .date{color:var(--gold-t)}
.news .tag{border-color:rgba(0,0,0,.26);color:#6A6A72}

/* 年表・引用 */
.tl .y{color:var(--gold-t)}
.qb{background:var(--ink2)}
.qb blockquote{color:#15151a}
.qb .sub{color:#5A5A62}
.qline p{color:#15151a}

/* カード類 */
.plan{background:var(--ink3);border-color:rgba(0,0,0,.10)}
.plan h3{color:#15151a}
.plan p{color:#5A5A62}
.plan .rule{background:var(--gold-t)}
.banner{background:var(--ink3)}
.banner h3{color:#15151a}
.banner p{color:#5A5A62}
.card.outline{background:#fff;border-color:rgba(0,0,0,.13)}
.card.outline h3{color:#15151a}
.card.outline p{color:#5A5A62}

/* 書籍（BOOKSページ） */
.book h3{color:#15151a}
.book .b-sub{color:#4A4A52}
.book p{color:#6A6A72}
.book .b-label{color:var(--gold-t)}
.book .jacket span{background:var(--ink3);border-color:rgba(0,0,0,.10);color:#A9A49C}
.book .jacket img{box-shadow:0 16px 34px -14px rgba(0,0,0,.35)}
.sec .cal__y{color:#15151a}
.sec .cal__s{color:var(--gold-t)}

/* お問い合わせフォーム */
.contact-info dt{color:var(--gold-t)}
.contact-info dd{color:#3A3A42}
.form label{color:#5A5A62}
.form input[type=text],.form input[type=email],.form textarea{
  border-color:rgba(0,0,0,.22);color:#15151a}
.form input:focus,.form textarea:focus{border-color:var(--gold-t)}
.form .submit{border-color:#15151a;color:#15151a}
.form .submit:hover{background:#15151a;color:#fff}

/* テーマ別への導線（白地に合わせる） */
.theme-nav a{background:#EFEDE9}
.theme-nav img{opacity:.9}
.theme-nav .jp{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.8)}
.theme-nav .en{color:#E6D2A3}

/* ギャラリーのモザイク面 */
.g-mid,.g-top{background:#fff}
.g-title{
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 78%,#fff 100%);
}
.g-title h1{color:#15151a;text-shadow:none}
.g-title .en{color:var(--gold-t)}
.g-top::before{
  background:linear-gradient(180deg,rgba(11,11,14,.72) 0%,rgba(11,11,14,.30) 46%,rgba(11,11,14,0) 100%);
}
.feature__cap{color:rgba(255,255,255,.9)}
.f-note{color:#55555C}

/* 展示室：白い壁のギャラリーへ */
.hall{
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(201,164,92,.10) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#FAF8F5 0%,#F4F1EC 60%,#EFEBE4 100%);
  border-top:1px solid rgba(0,0,0,.10);
}
.hall::after{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 100%)}
.art::before{background:radial-gradient(closest-side,rgba(255,238,205,.42) 0%,rgba(255,238,205,0) 100%)}
.art__frame{box-shadow:0 26px 50px -20px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.12)}
.plate__t{color:#15151a}
.plate__s{color:#7A7A83}

/* フッター */
.ft{background:#fff;border-top:1px solid rgba(0,0,0,.12)}
.ft .logo img{filter:brightness(.72) saturate(1.15)}
.ft address{color:#5A5A62}
.ft h4{color:var(--gold-t)}
.ft ul a,.ft .sns a{color:#5A5A62}
.ft ul a:hover,.ft .sns a:hover{color:var(--gold-t)}
.ft-btm{border-top-color:rgba(0,0,0,.12)}
.ft-btm small{color:#8A8A92}

/* 404・汎用 */
.nf{color:#15151a}

/* ---- ヘッダーの文字色：ページ先頭が写真か白かで切り替える ---- */
/* 既定（白い面から始まるページ）＝黒文字 */
.hd:not(.on) .nav a{color:#15151a}
.hd:not(.on) .logo img{filter:brightness(.72) saturate(1.15)}
.hd:not(.on) .burger span{background:#15151a}
/* 先頭が写真のページ（見出し帯・トップのヒーロー）＝白文字のまま */
body:has(.phero) .hd:not(.on) .nav a,
body:has(.hero-img) .hd:not(.on) .nav a{color:#fff}
body:has(.phero) .hd:not(.on) .logo img,
body:has(.hero-img) .hd:not(.on) .logo img{filter:none}
body:has(.phero) .hd:not(.on) .burger span,
body:has(.hero-img) .hd:not(.on) .burger span{background:#fff}

/* ボルドーピンクのボタンは白文字（.btn の色指定より後に置いて確実に効かせる） */
.btn.btn-bdx,a.btn-bdx,.btn-bdx{background:var(--bdx);border-color:var(--bdx);color:#fff}
.btn.btn-bdx:hover,a.btn-bdx:hover,.btn-bdx:hover{background:var(--bdx-l);border-color:var(--bdx-l);color:#fff}

/* =====================================================================
   ページ見出し（写真の帯をやめ、白い余白に文字だけ）
   参考 lik.com。作品が主役なので、見出しは静かに置く。
   ===================================================================== */
.phead{padding:200px 0 76px;text-align:center;background:#fff}
.phead .en{color:var(--gold-t);margin:0 0 16px}
.phead h1{
  font-family:var(--min);font-weight:500;color:#15151a;
  font-size:clamp(28px,3.6vw,42px);letter-spacing:.28em;margin:0;line-height:1.5;
}
.phead .lead{color:#5A5A62;margin:24px auto 0;max-width:760px}
@media(max-width:900px){.phead{padding:130px 0 44px}}

/* 白地では白文字の直書きを打ち消す */
.plan p[style*="color:#fff"],.plan strong[style*="color:#fff"]{color:#15151a !important}
.sec .tl .jp[style*="var(--gold)"]{color:var(--gold-t) !important}
.sub[style*="var(--gold)"]{color:var(--gold-t) !important}

/* テーマ別ページの代表作（全幅で1点） */
.feature-lt{background:#fff}
.feature-lt a{display:block;color:inherit;text-align:center}
/* 作品は絶対にトリミングしない。画面に収まる範囲で全体を見せる
   （以前 height 固定＋object-fit:cover にしていて、桂浜心象・花宇宙が切れていた） */
.feature-lt img{display:block;width:auto;max-width:100%;height:auto;max-height:min(78vh,820px);margin:0 auto}
.feature-lt__t{display:block;font-family:var(--min);font-size:20px;letter-spacing:.16em;margin-top:26px;color:#15151a}
.feature-lt__s{display:block;font-family:var(--lat);font-size:12px;letter-spacing:.24em;color:var(--gold-t);margin-top:10px}
.feature-lt a:hover .feature-lt__s{text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){.feature-lt img{max-height:70vh}}

/* =====================================================================
   カレンダーの中身を見るビューアー
   ===================================================================== */
.cal__ph{position:relative;display:block;width:100%;padding:0;border:0;background:none}
button.cal__ph{cursor:zoom-in}
.cal__peek{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%) translateY(6px);
  background:rgba(0,0,0,.62);color:#fff;font-size:11.5px;letter-spacing:.14em;
  padding:8px 18px;white-space:nowrap;opacity:0;transition:.4s;
}
button.cal__ph:hover .cal__peek,button.cal__ph:focus-visible .cal__peek{opacity:1;transform:translateX(-50%)}
.cal__s{display:inline-block}

.cv{
  position:fixed;inset:0;z-index:9500;display:none;
  align-items:center;justify-content:center;padding:4vh 6vw;
  background:rgba(6,6,8,.96);
}
.cv.on{display:flex}
.cv__in{margin:0;text-align:center;max-width:min(760px,88vw)}
.cv__in img{max-width:100%;max-height:78vh;width:auto;height:auto;display:block;margin:0 auto;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.9);background:#fff}
.cv__in figcaption{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:18px}
.cv__cap{font-family:var(--min);font-size:15px;letter-spacing:.16em;color:#fff}
.cv__buy{border-color:rgba(255,255,255,.7);color:#fff}
.cv__buy:hover{background:#fff;color:#15151a}
.cv__close{
  position:absolute;right:24px;top:20px;width:46px;height:46px;
  background:none;border:1px solid rgba(255,255,255,.45);color:#fff;
  font-size:24px;line-height:1;cursor:pointer;transition:.3s;
}
.cv__close:hover{background:#fff;color:#15151a}
.cv__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:56px;height:56px;background:none;border:1px solid rgba(255,255,255,.35);
  color:#fff;font-size:28px;line-height:1;cursor:pointer;transition:.3s;
}
.cv__nav:hover{background:rgba(255,255,255,.14)}
.cv__prev{left:2vw}
.cv__next{right:2vw}
@media(max-width:768px){
  .cv{padding:3vh 4vw}
  .cv__in img{max-height:66vh}
  .cv__nav{width:44px;height:44px;font-size:22px}
  .cv__prev{left:8px}.cv__next{right:8px}
  .cal__peek{opacity:1;transform:translateX(-50%);font-size:11px;padding:6px 12px}
}

/* ビューアーの月サムネイル（Amazonのように下に小さく並べる） */
.cv__in{max-width:min(860px,92vw)}
.cv__in img#cvImg{max-height:66vh}
.cv__thumbs{
  display:flex;gap:8px;margin-top:16px;padding-bottom:6px;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;
  justify-content:center;
}
.cv__th{
  position:relative;flex:0 0 auto;width:62px;padding:0;background:none;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);transition:.25s;
}
.cv__th img{display:block;width:100%;height:auto}
.cv__th span{
  position:absolute;left:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;
  font-family:var(--lat);font-size:10px;line-height:1;padding:3px 5px;
}
.cv__th:hover{border-color:rgba(255,255,255,.7)}
.cv__th.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
@media(max-width:768px){
  .cv__thumbs{justify-content:flex-start}
  .cv__th{width:48px}
  .cv__in img#cvImg{max-height:54vh}
}

/* 一覧のサムネイル（その場で画像を差し替える） */
.cal__main{transition:opacity .25s}
.cal__thumbs{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:10px}
.cal__th{
  position:relative;padding:0;background:none;cursor:pointer;overflow:hidden;
  border:1px solid rgba(0,0,0,.14);transition:.25s;line-height:0;
}
.cal__th img{display:block;width:100%;height:auto}
.cal__th span{
  position:absolute;left:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;
  font-family:var(--lat);font-size:9px;line-height:1;padding:2px 4px;
}
.cal__th:hover{border-color:rgba(0,0,0,.4)}
.cal__th.on{border-color:var(--gold-t);box-shadow:0 0 0 1px var(--gold-t)}
@media(max-width:900px){.cal__thumbs{grid-template-columns:repeat(7,1fr);gap:3px}.cal__th span{font-size:8px}}

/* 中身の画像がまだ無い年も、サムネイル2段ぶんの高さを確保して列を揃える */
.cal__thumbs--empty{min-height:calc((100% / 7 * 0.68) * 2 + 5px)}
.cal__thumbs--empty::before{content:"";display:block;padding-top:19.5%}

/* 『和合』の表紙は原本が225pxと小さいので、引き伸ばさずに小さく置く */
.wago-3{max-width:720px;gap:36px}
@media(max-width:900px){.wago-3{max-width:420px;gap:14px}}

/* =====================================================================
   ヘッダーとヒーローを saigen サイトの作りに合わせる（2026-08-02）
   ===================================================================== */

/* 読み込み／スクロールの進み具合（細い金の線） */
.prog{position:fixed;left:0;top:0;height:2px;width:0;background:var(--gold);z-index:3000;
  transition:width .15s linear,opacity .6s ease}

/* 言語切替（丸いボタン） */
.lang{
  margin-left:1.6rem;background:transparent;border:1px solid currentColor;color:inherit;
  border-radius:20px;padding:6px 16px;font-family:var(--got);font-size:12px;letter-spacing:.1em;
  cursor:pointer;transition:.3s;white-space:nowrap;
}
.lang:hover{border-color:var(--gold);color:var(--gold)}
html.lang-en [data-jp]{display:none}

/* ---- トップページのヘッダー ----
   最初から出す。ヒーローの上では背景なし（白文字）。
   スクロールしたら白い背景が出て、文字は黒に変わる。 */
body.home .hd{opacity:1;visibility:visible;transform:none}
body.home .hd:not(.on){background:transparent;border-bottom-color:transparent}
body.home .hd:not(.on) .nav a,
body.home .hd:not(.on) .lang{color:#fff}
body.home .hd:not(.on) .logo img{filter:none}
body.home .hd:not(.on) .burger span{background:#fff}
body.home .hd.on{
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);
  border-bottom-color:rgba(0,0,0,.10);
}
body.home .hd.on .nav a,body.home .hd.on .lang{color:#15151a}
body.home .hd.on .nav a:hover,body.home .hd.on .lang:hover{color:var(--gold-t)}
body.home .hd.on .logo img{filter:brightness(.72) saturate(1.15)}
body.home .hd.on .burger span{background:#15151a}

/* ---- ヒーロー：全画面スライド ---- */
.hero-img{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000;display:block}
.sc{position:absolute;inset:0;z-index:0}
.sc__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.sc__slide.on{opacity:1}
.sc__slide img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
/* 文字が読めるよう、左と下だけ静かに沈める */
.hero-img::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 34%,rgba(0,0,0,0) 62%),
    linear-gradient(0deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,0) 34%);
}
.sc__cap{
  position:absolute;z-index:2;left:6%;right:auto;top:50%;transform:translateY(-50%);
  max-width:760px;text-align:left;
}
.sc__sub{font-family:var(--lat);font-size:13px;letter-spacing:.42em;color:#E6D2A3;margin:0 0 22px}
.sc__ttl{
  font-family:var(--min);font-weight:600;color:#fff;margin:0;
  font-size:clamp(2.4rem,4.6vw,4.6rem);line-height:1.5;letter-spacing:.06em;
  white-space:pre-line;text-shadow:0 3px 24px rgba(0,0,0,.6);
}
.sc__credit{
  position:absolute;z-index:2;left:6%;bottom:52px;margin:0;
  font-family:var(--min);font-size:13px;letter-spacing:.18em;color:rgba(255,255,255,.82);
}
.hero-img .scroll{
  position:absolute;z-index:2;right:6%;bottom:52px;margin:0;
  font-family:var(--lat);font-size:10px;letter-spacing:.34em;color:rgba(255,255,255,.75);
}
.hero-img .scroll::before{content:"";display:block;width:1px;height:46px;background:rgba(255,255,255,.4);margin:0 auto 12px}

@media(max-width:900px){
  .sc__cap{left:8%;right:8%;max-width:none}
  .sc__sub{font-size:11px;letter-spacing:.3em;margin-bottom:16px}
  .sc__ttl{font-size:clamp(1.9rem,7vw,2.6rem);line-height:1.6}
  .sc__credit{left:8%;bottom:34px;font-size:11px}
  .hero-img .scroll{right:8%;bottom:34px}
  .lang{margin-left:0;margin-top:8px}
}

/* メニューと言語ボタンを右にひとかたまりで寄せる（saigen に合わせる） */
.hd .nav{gap:24px;margin-left:auto}
.hd .lang{margin-left:2px}
@media(max-width:1400px){.hd .nav{gap:20px}}
@media(max-width:1150px){.hd .nav{gap:15px}}
@media(max-width:900px){.hd .nav{margin-left:0}.hd .lang{margin-left:0}}

/* ---- ロゴの下の英字 ---- */
.logo__en{
  display:block;font-family:var(--lat);font-size:9px;letter-spacing:.30em;
  color:var(--gold);margin-top:5px;white-space:nowrap;
}
body.home .hd.on .logo__en{color:var(--gold-t)}
@media(max-width:900px){.logo__en{font-size:7.5px;letter-spacing:.2em}}

/* ---- ヒーロー：題字の下に金の線と英字 ---- */
.sc__cap .sc__ttl{margin:0}
.sc__rule{display:block;width:110px;height:1px;background:var(--gold);margin:34px 0 20px;opacity:.9}
.sc__cap .sc__sub{
  margin:0;font-family:var(--lat);font-size:13px;letter-spacing:.36em;
  color:rgba(230,210,163,.92);text-shadow:0 2px 16px rgba(0,0,0,.6);
}

/* ---- スライドの位置を示す点（右下） ---- */
.sc__dots{position:absolute;z-index:2;right:6%;bottom:56px;display:flex;gap:14px}
.sc__dot{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.7);transition:.35s;
}
.sc__dot:hover{border-color:var(--gold)}
.sc__dot.on{background:var(--gold);border-color:var(--gold)}

/* ---- SCROLL は中央下 ---- */
.hero-img .scroll{
  left:50%;right:auto;transform:translateX(-50%);bottom:44px;text-align:center;
}
@media(max-width:900px){
  .sc__rule{width:80px;margin:24px 0 14px}
  .sc__cap .sc__sub{font-size:10.5px;letter-spacing:.24em}
  .sc__dots{right:8%;bottom:38px;gap:11px}
  .sc__dot{width:8px;height:8px}
  .hero-img .scroll{bottom:30px}
}

/* 英字だけの見出し（NEW など） */
.lt-head__lat{
  font-family:var(--lat)!important;font-weight:400!important;
  font-size:clamp(30px,3.6vw,44px)!important;letter-spacing:.34em!important;
  text-indent:.34em;color:#15151a;
}

/* ---- ヘッダーの微調整（2026-08-02）---- */
/* もう少し上に、メニューは小さく右端へ */
.hd .wrap{height:76px;padding:0 26px 0 72px}
.hd .nav a{font-size:15px;letter-spacing:.10em}
.hd .nav{gap:19px}
.hd .lang{padding:5px 13px;font-size:11px}
@media(max-width:1500px){.hd .nav a{font-size:14px}.hd .nav{gap:16px}}
@media(max-width:1250px){.hd .nav a{font-size:13px}.hd .nav{gap:13px}.hd .wrap{padding:0 18px 0 48px}}
@media(max-width:900px){.hd .wrap{height:66px;padding:0 20px}}
.logo img{height:34px}
@media(max-width:900px){.logo img{height:24px}}

/* ロゴの下の英字は中央寄せ */
.logo{display:inline-block;text-align:center}
.logo img{margin:0 auto}
.logo__en{text-align:center}

/* NEW の見出しは金色 */
.lt-head__lat{color:var(--gold-t)!important}

/* NEW に並べる新作カレンダー */
.ac__ph--cal{position:relative}
.ac__badge{
  position:absolute;left:0;top:0;background:var(--bdx);color:#fff;
  font-size:11.5px;letter-spacing:.14em;padding:7px 16px;
}

/* カレンダーは全部同じ大きさで並べる（7年ぶん） */
.cal-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
@media(max-width:900px){.cal-grid{grid-template-columns:1fr 1fr}}

/* ---- ヒーローの文字はふんわり入れ替える ---- */
.sc__cap{transition:opacity .85s ease}
.sc__credit{transition:opacity .85s ease}
.sc__cap.out,.sc__credit.out{opacity:0}

/* ---- SCROLL は下寄せ＋ゆっくり明滅 ---- */
.hero-img .scroll{bottom:18px;animation:scrollBlink 2.6s ease-in-out infinite}
.hero-img .scroll::before{animation:scrollBlink 2.6s ease-in-out infinite}
@keyframes scrollBlink{
  0%,100%{opacity:.28}
  50%{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .hero-img .scroll,.hero-img .scroll::before{animation:none;opacity:.8}
}
@media(max-width:900px){.hero-img .scroll{bottom:12px}}

/* ---- ロゴだけ大きく（下の英字はそのまま）---- */
.logo img{height:44px}
@media(max-width:1250px){.logo img{height:38px}}
@media(max-width:900px){.logo img{height:28px}}
.hd .wrap{height:88px}
@media(max-width:900px){.hd .wrap{height:70px}}

/* ---- 作品名とスライドの点をもっと下へ（SCROLLと同じ高さに揃える）---- */
.sc__credit{bottom:26px}
.sc__dots{bottom:28px}
@media(max-width:900px){.sc__credit{bottom:18px}.sc__dots{bottom:20px}}

/* ---- ロゴの大きさと位置（微調整）---- */
.logo img{height:36px}
@media(max-width:1250px){.logo img{height:32px}}
@media(max-width:900px){.logo img{height:26px}}
.hd .wrap{height:80px;padding:0 26px 0 34px}
@media(max-width:1250px){.hd .wrap{padding:0 18px 0 24px}}
@media(max-width:900px){.hd .wrap{height:66px;padding:0 18px}}

/* ---- NEW は1点だけ中央に置く ---- */
.ac-grid--one{grid-template-columns:1fr;max-width:660px;margin-left:auto;margin-right:auto}

/* =====================================================================
   新作の紹介（左に文章とボタン、右に写真。参考 lik.com）
   ===================================================================== */
.rel{display:grid;grid-template-columns:0.85fr 1.15fr;gap:90px;align-items:center;max-width:1500px;margin:0 auto}
.rel__lb{font-family:var(--got);font-size:12px;letter-spacing:.22em;color:#15151a;margin:0 0 14px}
.rel__ttl{
  font-family:var(--min);font-weight:500;color:var(--gold-t);margin:0;
  font-size:clamp(22px,2.2vw,30px);letter-spacing:.10em;line-height:1.7;
}
.rel__body{color:#4A4A52;font-size:14px;line-height:2.2;margin:28px 0 0}
.rel__note{color:var(--bdx);font-size:12.5px;letter-spacing:.06em;margin:16px 0 0}
.rel__btn{
  display:inline-flex;align-items:center;gap:18px;margin-top:34px;
  padding:16px 30px;border:1px solid var(--gold-t);color:var(--gold-t);
  font-size:12.5px;letter-spacing:.18em;transition:.4s;
}
.rel__btn:hover{background:var(--gold-t);color:#fff}
.rel__arw{transition:transform .4s}
.rel__btn:hover .rel__arw{transform:translateX(6px)}
.rel__ph{display:block;overflow:hidden}
.rel__ph img{display:block;width:100%;height:auto;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.rel__ph:hover img{transform:scale(1.03)}
@media(max-width:900px){
  .rel{grid-template-columns:1fr;gap:34px}
  .rel__ph{order:-1}
  .rel__body{font-size:13.5px;line-height:2.1;margin-top:22px}
}

/* 新作：写真の下に商品名 */
.rel__fig{margin:0}
.rel__cap{display:block;margin-top:20px;text-align:center}
.rel__cap-t{display:block;font-family:var(--min);font-size:16px;letter-spacing:.12em;color:#15151a}
.rel__cap-s{display:block;font-size:12px;color:#7A7A83;letter-spacing:.06em;margin-top:8px}
.rel__ttl{font-size:clamp(24px,2.6vw,34px);letter-spacing:.24em}
@media(max-width:900px){.rel__cap-t{font-size:14px}}

/* 新作の見出しを英字（NEW）で出すとき */
.rel__ttl--lat{
  font-family:var(--lat);font-weight:400;
  font-size:clamp(30px,3.4vw,42px);letter-spacing:.34em;color:var(--gold-t);
}

/* リンク先が未定のボタン（見た目だけ置く） */
.rel__btn--off{cursor:default}
.rel__btn--off:hover{background:transparent;color:var(--gold-t)}
.rel__btn--off:hover .rel__arw{transform:none}

/* ---- テーマ別の導線：文字は写真の中ではなく下に置く ---- */
.theme-nav a{background:none;overflow:visible;text-align:center;color:inherit}
.theme-nav img{opacity:1;transition:opacity .5s}
.theme-nav a:hover img{opacity:.86;transform:none}
.theme-nav .jp{
  position:static;transform:none;display:block;margin-top:22px;
  font-family:var(--min);font-size:20px;letter-spacing:.18em;color:#15151a;text-shadow:none;
}
.theme-nav .en{
  position:static;transform:none;display:block;margin-top:9px;
  font-family:var(--lat);font-size:11.5px;letter-spacing:.28em;color:var(--gold-t);
}
.theme-nav a:hover .en{text-decoration:underline;text-underline-offset:4px}
@media(max-width:768px){.theme-nav .jp{font-size:18px;margin-top:16px}}

/* ---- フッターのSNS：線画のロゴを頭に置く ---- */
.ft .sns a{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
}
.sns__ic{
  width:19px;height:19px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.9;transition:opacity .3s;
}
.sns__ic .fill{fill:currentColor;stroke:none}
.ft .sns a:hover .sns__ic{opacity:1}
.sns__n{font-family:var(--lat);letter-spacing:.1em}
.sns__id{color:#8A8A92;font-size:13px;letter-spacing:.02em;transition:color .3s}
.ft .sns a:hover .sns__id{color:inherit}

/* =====================================================================
   スマホまわりの直し（2026-08-03）
   ===================================================================== */

/* ---- ハンバーガーメニュー ----
   backdrop-filter が付いていると position:fixed の基準がヘッダーになり、
   メニューがヘッダーの高さの中に閉じ込められる。スマホでは必ず切る。
   （body.home の指定があとから効いていたので、ここで打ち消す） */
@media(max-width:900px){
  .hd,.hd.on,body.home .hd,body.home .hd.on{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    filter:none!important;
  }
  /* 開いている間は、ヘッダーもメニューと同じ白に */
  body.nav-open .hd,body.home.nav-open .hd,body.home.nav-open .hd.on{
    background:#fff!important;border-bottom-color:transparent!important;
  }
  /* ヒーローの上（ヘッダーが透明で文字が白）で開いても読めるように、
     白地のパネルでは必ず黒文字にする */
  body.nav-open .nav a{color:#15151a!important}
  body.nav-open .nav a:hover{color:var(--gold-t)!important}
  body.nav-open .burger span{background:#15151a!important}
  body.nav-open .logo img{filter:brightness(.72) saturate(1.15)!important}
  body.nav-open .lang{color:#15151a!important;border-color:rgba(0,0,0,.35)!important}
  /* パネルは画面いっぱい。上下の余白を揃えて、中央に並ぶようにする */
  .nav{background:#fff;padding:100px 24px}
  .nav a{color:#15151a}
}

/* ---- ファインアートコレクション：写真の比率をそのままに ---- */
@media(max-width:900px){
  .collection > img{height:auto}
}

/* ---- スマホは書籍・カレンダーを1列に（1点ずつ大きく見せる） ---- */
@media(max-width:768px){
  .bk-grid{grid-template-columns:1fr;gap:52px}
  .bk__ph{height:auto}
  .bk__ph img{max-height:none;width:100%;max-width:100%}
  .cal-grid{grid-template-columns:1fr;gap:52px}
  .cal__y{font-size:22px;margin-top:16px}
  /* 1列のときは高さを揃える必要がないので、中身が無い年の空き場所は出さない */
  .cal__thumbs--empty{display:none}
}

/* ---- スマホは写真だけ画面いっぱいに（文字は余白を残す） ---- */
@media(max-width:768px){
  body{overflow-x:clip}
  .ac-grid,.bk-grid,.cal-grid{
    width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  }
  .ac__t,.ac__s,
  .bk__lb,.bk__t,.bk__s,.bk__l,
  .cal__y,.cal__s,.cal__thumbs{
    padding-left:20px;padding-right:20px;
  }
}

/* =====================================================================
   OP動画 → トップ写真のつなぎ（2026-08-20）
   動画は最後、画面の下中央から白い光が波紋のように広がって終わる。
   そこで黒いシャッターはやめ、その白い光の中からトップ写真が現れるようにした。
   広がる穴の大きさは site.js が1コマずつ書き換える。
   ===================================================================== */
.op.rip{background:#fff}
.op.rip video{opacity:0;pointer-events:none}
/* 白くなった瞬間にボタンは消す（白地に残ると目立つため、こちらは即座に） */
.op.rip .op-ui{opacity:0;pointer-events:none;transition:none}
.op.rip .sh{display:none}

/* 光が引いていくあいだ、写真はわずかに大きい状態から実寸へ戻る */
.hero-img.rip-wait .sc__slide img{transform:scale(1.07)}
.hero-img.rip-in .sc__slide img{
  transform:scale(1);
  transition:transform 5.4s cubic-bezier(.16,.84,.36,1);
}
/* 題字と作品名は、写真が現れたあとから浮かび上がる */
.hero-img.rip-wait .sc__cap,.hero-img.rip-wait .sc__credit{opacity:0}
.hero-img.rip-in .sc__cap,.hero-img.rip-in .sc__credit{
  opacity:1;transition:opacity 1.8s ease 2.8s;
}

@media(prefers-reduced-motion:reduce){
  .hero-img.rip-in .sc__slide img{transition:none}
}

/* ---- 書籍ページ（/books/）----
   書影の枠を高さ320pxで固定していたので、スマホでは写真の上に
   大きな空きができていた。高さは中身にまかせる */
@media(max-width:768px){
  .books{gap:40px 16px}
  .book .jacket{height:auto;display:block}
  .book .jacket img{width:100%;max-width:100%;max-height:none}
  .book .jacket span{width:100%;height:auto;aspect-ratio:3/4}
  .book h3{margin-top:14px}
  .book .b-label{margin-top:14px}
}

/* ===== ページ内アンカー（トップの「書籍を見る」「カレンダーを見る」から飛ぶ先） =====
   ヘッダーが position:fixed なので、そのぶん上に余白を取らないと見出しが隠れる */
.anchor{scroll-margin-top:96px}
@media(max-width:900px){.anchor{scroll-margin-top:72px}}

/* =====================================================================
   作品の持ち出しを防ぐ（サイト全体）
   ・ドラッグでデスクトップへ持っていけないようにする
   ・スマホの長押しで「画像を保存」を出さない
   右クリックの抑止は site.js 側で行う
   ===================================================================== */
img,video,picture,.no-save{
  -webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}

/* =====================================================================
   キヤノンの企業カレンダー（トップのプロフィール節の下）
   ===================================================================== */
.canon{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:56px;align-items:center;
  max-width:1440px;padding:64px 40px 0;
  margin-top:72px;border-top:1px solid rgba(0,0,0,.10);
}
/* 上のプロフィールが「写真＝左」なので、こちらは写真を右にして交互にする */
.canon__tx{order:1}
.canon__ph{order:2}
.canon__ph{margin:0}
.canon__ph img{width:100%;height:auto;display:block;box-shadow:0 18px 44px -22px rgba(0,0,0,.5)}
.canon__lb{font-family:var(--lat);font-size:12px;letter-spacing:.34em;color:var(--gold-t);margin:0 0 14px}
.canon__tx h3{
  font-family:var(--min);font-weight:500;letter-spacing:.14em;color:#15151a;
  font-size:clamp(19px,2.1vw,24px);margin:0 0 22px;
}
.canon__tx p{color:#4A4A52;font-size:14px;line-height:2.2;margin:0}
@media(max-width:900px){
  .canon{grid-template-columns:1fr;gap:28px;padding:48px 20px 0;margin-top:52px}
  /* 1列のときは、他の節と同じく写真を先に出す */
  .canon__ph{order:1}
  .canon__tx{order:2}
}


/* =====================================================================
   作り方についての断り書き（AIや合成ではない、という説明）
   ===================================================================== */
/* .profile__tx p の指定より強くしないと効かないので、親も含めて書く */
.craft,.profile__tx .craft{
  /* ボタンからしっかり離す。米印のぶら下げにして2行目以降を本文と揃える */
  margin:58px 0 0;padding-left:1.5em;text-indent:-1.5em;
  font-size:13px;line-height:2.4;color:#5F5F68;letter-spacing:.03em;
  max-width:33em;
}
@media(max-width:900px){
  .craft,.profile__tx .craft{margin-top:44px;font-size:12.5px;line-height:2.2}
}

/* =====================================================================
   高知ページのスライドショー（A / B / C の3パターン）
   ===================================================================== */

/* 共通：矢印 */
.ks{position:relative}
.ks-arw{
  position:absolute;top:50%;z-index:4;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.86);border:1px solid rgba(0,0,0,.10);
  color:#15151a;font-size:26px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:.28s;opacity:.85;
}
.ks-arw:hover{opacity:1;background:#fff;border-color:var(--gold-t);color:var(--gold-t)}
.ks-prev{left:26px}
.ks-next{right:26px}
@media(max-width:900px){.ks-arw{width:42px;height:42px;font-size:22px}.ks-prev{left:10px}.ks-next{right:10px}}

/* ---------- A：画面いっぱいのフェード ---------- */
.ks-a{background:#0B0B0E;overflow:hidden}
.ks-a__stage{position:relative;height:min(78vh,760px)}
.ks-a__item{
  position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity 1.5s ease;
}
.ks-a__item.on{opacity:1}
.ks-a__item img{width:100%;height:100%;object-fit:cover;display:block}
/* ゆっくり寄っていく */
.ks-a__item.on img{animation:ksZoom 9s ease-out both}
@keyframes ksZoom{from{transform:scale(1)}to{transform:scale(1.07)}}

.ks-a__cap{
  position:absolute;left:6%;bottom:12%;z-index:3;max-width:min(560px,80%);
  color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.75);
}
.ks-a__no{font-family:var(--lat);font-size:12px;letter-spacing:.28em;color:#E6D2A3;margin:0 0 16px}
.ks-a__no .sep{margin:0 8px;opacity:.6}
.ks-a__t{
  font-family:var(--min);font-weight:500;margin:0;
  font-size:clamp(24px,3.4vw,40px);letter-spacing:.16em;line-height:1.5;
}
.ks-a__s{
  display:inline-block;margin-top:26px;padding:12px 30px;
  border:1px solid rgba(255,255,255,.55);color:#fff;
  font-size:12.5px;letter-spacing:.2em;transition:.3s;text-shadow:none;
}
.ks-a__s:hover{background:#fff;color:#15151a;border-color:#fff}
.ks-a .ks-dots{
  position:absolute;right:6%;bottom:12%;z-index:3;display:flex;gap:12px;flex-wrap:wrap;max-width:40%;
}
.ks-dot{
  width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.7);transition:.3s;
}
.ks-dot:hover{border-color:var(--gold)}
.ks-dot.on{background:var(--gold);border-color:var(--gold)}
@media(max-width:900px){
  .ks-a__stage{height:64vh}
  .ks-a__cap{left:8%;right:8%;bottom:22%;max-width:none}
  .ks-a .ks-dots{right:auto;left:8%;bottom:10%;max-width:84%;gap:10px}
}

/* ---------- B：中央を大きく、左右が見切れる横送り ---------- */
.ks-b{background:var(--ink2);padding:0 0 20px;overflow:hidden}
.ks-b__view{overflow:hidden;padding:10px 0 34px}
.ks-b__track{
  display:flex;gap:26px;align-items:center;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);will-change:transform;
}
.ks-b__item{
  margin:0;flex:0 0 min(62vw,880px);
  opacity:.32;filter:saturate(.65);transition:opacity .7s ease,filter .7s ease,transform .7s ease;
  transform:scale(.94);
}
.ks-b__item.on{opacity:1;filter:none;transform:scale(1)}
.ks-b__item img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.ks-b__cap{text-align:center;padding:0 20px}
.ks-b__t{
  font-family:var(--min);font-weight:500;color:#15151a;margin:0;
  font-size:clamp(19px,2.3vw,27px);letter-spacing:.16em;
}
.ks-b__s{
  display:inline-block;margin-top:14px;font-size:12px;letter-spacing:.22em;color:var(--gold-t);
}
.ks-b__s:hover{text-decoration:underline;text-underline-offset:4px}
.ks-b__no{font-family:var(--lat);font-size:12px;letter-spacing:.26em;color:#9A9AA3;margin:22px 0 0}
.ks-b__no .sep{margin:0 7px;opacity:.6}
@media(max-width:900px){
  .ks-b__item{flex:0 0 82vw}
  .ks-b__track{gap:14px}
}

/* ---------- C：大きな1枚＋下にサムネイル ---------- */
.ks-c{background:#fff;padding:0 0 10px}
.ks-c__main{position:relative;background:#0B0B0E;overflow:hidden}
.ks-c__item{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease}
.ks-c__item:first-child{position:relative}
.ks-c__item.on{opacity:1;position:relative;z-index:2}
.ks-c__item img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.ks-c__bar{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px 2px 0;
}
.ks-c__t{
  font-family:var(--min);font-weight:500;color:#15151a;margin:0;
  font-size:clamp(18px,2.1vw,25px);letter-spacing:.16em;
}
.ks-c__s{font-size:12px;letter-spacing:.22em;color:var(--gold-t)}
.ks-c__s:hover{text-decoration:underline;text-underline-offset:4px}
.ks-c__thumbs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-top:26px;
}
.ks-c__th{
  padding:0;border:0;background:none;cursor:pointer;display:block;overflow:hidden;
  opacity:.5;transition:opacity .3s;
}
.ks-c__th img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.ks-c__th:hover{opacity:.8}
.ks-c__th.on{opacity:1;outline:1px solid var(--gold-t);outline-offset:-1px}
@media(max-width:900px){
  .ks-c__thumbs{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:6px}
  .ks-c__bar{padding-top:20px}
}

/* =====================================================================
   高知ページ：写真を切らずに見せるスライド（D 暗い場 / E 白い場）
   ・object-fit:contain なので、パソコンでも写真の全体が一目で見える
   ・切り替えは重なるフェード。矢印は置かず、下のサムネイルで選ぶ
   ===================================================================== */
.kv{position:relative}
/* 黒に近い紫。作品の空の色（紫〜マゼンタ）と響かせるため、
   わずかに上を明るくして奥行きを出している */
/* 暗い紫の場。メッセージ節（トップ）と高知のスライドで同じ色を使う */
.kv--dark,.msg-lt{
  background:#1A1230;
  background-image:linear-gradient(180deg,#241944 0%,#1A1230 45%,#120C22 100%);
}
.kv--light{background:var(--ink2)}
.kv__in{max-width:1640px;margin:0 auto;padding:64px 40px 72px}

/* 写真の場。3:2の枠にして、写真は枠の中に収める */
.kv__stage{
  /* 幅を先に決め、高さは疑似要素の余白（3:2）で出す。
     以前は「高さ→aspect-ratioで幅」だったが、iPadOS18のSafariは親の fit-content にその幅を伝えず、
     枠が幅0（実測46px）になって写真が消えた（2026-09-15 桐野さんのiPad横向きで発生）。
     幅 min(96vh,930px) ＝ 旧 高さ min(64vh,620px) × 1.5 なので見た目の大きさは同じ */
  position:relative;width:min(96vh,930px);max-width:100%;margin:0 auto;
}
.kv__stage::before{content:"";display:block;padding-top:66.6667%}
.kv__item{
  position:absolute;top:0;right:0;bottom:0;left:0;inset:0;margin:0;
  opacity:0;transform:scale(1.015);
  transition:opacity 1.6s ease,transform 2.4s cubic-bezier(.16,.84,.36,1);
  pointer-events:none;
}
.kv__item.on{opacity:1;transform:scale(1);pointer-events:auto}
.kv__item img{
  width:100%;height:100%;display:block;
  object-fit:contain;object-position:center;
}
.kv--dark .kv__item img{filter:drop-shadow(0 24px 60px rgba(0,0,0,.55))}
.kv--light .kv__item img{filter:drop-shadow(0 18px 44px rgba(0,0,0,.18))}
/* タッチ端末（iPad・スマホ）では影の filter を外す。
   iPadのWebKitは大きい画像に drop-shadow を掛けると、LINE/Facebookのアプリ内ブラウザなど
   メモリの少ない環境で画像自体が描画されない（2026-09-15 桐野さんのiPadで発生） */
@media (hover:none),(pointer:coarse){.kv--dark .kv__item img,.kv--light .kv__item img{filter:none}}

/* 進み具合の線。写真のまわりを一周し、枠が閉じたところで次の1枚へ。
   線は2本が同時に走る：
     1本目 … 上を左から右へ → 右辺を上から下へ
     2本目 … 下を右から左へ → 左辺を下から上へ
   同時に終わるので、四辺がきれいに閉じる */
.kv__frame{position:relative;width:fit-content;max-width:100%;margin:0 auto;padding:17px}
.kv__bar{position:absolute;display:flex;background:rgba(154,154,163,.22)}
.kv--dark .kv__bar{background:rgba(255,255,255,.13)}
.kv__bar--t{top:0;left:0;right:0;height:1px}
.kv__bar--b{bottom:0;left:0;right:0;height:1px;justify-content:flex-end}
.kv__bar--r{right:0;top:0;bottom:0;width:1px;flex-direction:column}
.kv__bar--l{left:0;top:0;bottom:0;width:1px;flex-direction:column;justify-content:flex-end}
.kv__bar--t i,.kv__bar--b i{display:block;height:100%;width:0}
.kv__bar--r i,.kv__bar--l i{display:block;width:100%;height:0}
.kv__bar i{background:var(--gold-t)}
.kv--dark .kv__bar i{background:var(--gold)}
/* 線の長さは JS が1コマずつ書き換えるので、CSS側での動きは付けない */

/* 作品名 */
.kv__cap{text-align:center;margin-top:44px}
.kv__t{
  font-family:var(--min);font-weight:500;margin:0;
  font-size:clamp(19px,2.2vw,26px);letter-spacing:.2em;
  transition:opacity .8s ease;
}
.kv--dark .kv__t{color:#fff}
.kv--light .kv__t{color:#15151a}
.kv__t.out{opacity:0}
/* 作品ごとの言葉。作品名より少し遅れて、いっしょに入れ替わる */
.kv__x{
  max-width:660px;margin:22px auto 0;
  font-family:var(--min);font-size:13.5px;line-height:2.45;letter-spacing:.06em;
  transition:opacity .8s ease;
}
.kv--dark .kv__x{color:rgba(255,255,255,.82)}
.kv--light .kv__x{color:#4A4A52}
.kv__x.out{opacity:0}
.kv__x:empty{display:none}

.kv__meta{
  display:flex;align-items:center;justify-content:center;gap:26px;
  margin:26px 0 0;font-family:var(--lat);font-size:11.5px;letter-spacing:.26em;
}
.kv__no{color:#9A9AA3}
.kv--dark .kv__no{color:rgba(255,255,255,.5)}
.kv__no .sep{margin:0 7px;opacity:.55}
.kv__s{letter-spacing:.22em;color:var(--gold-t)}
.kv--dark .kv__s{color:var(--gold)}
.kv__s:hover{text-decoration:underline;text-underline-offset:5px}

/* 全点のサムネイル。ここで「何点あるか」が一目で分かる */
.kv__rail{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:52px;
}
.kv__th{
  padding:0;border:0;background:none;cursor:pointer;display:block;overflow:hidden;
  width:92px;opacity:.42;transition:opacity .45s ease;
}
.kv__th img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.kv__th:hover{opacity:.78}
.kv__th.on{opacity:1}
.kv--dark .kv__th.on{box-shadow:0 0 0 1px var(--gold)}
.kv--light .kv__th.on{box-shadow:0 0 0 1px var(--gold-t)}

@media(max-width:900px){
  .kv__in{padding:40px 20px 52px}
  .kv__frame{width:100%;padding:12px}
  .kv__stage{width:100%}
  .kv__cap{margin-top:34px}
  .kv__x{font-size:13px;line-height:2.2;margin-top:18px;padding:0 4px}
  .kv__meta{gap:18px;flex-wrap:wrap}
  .kv__rail{gap:6px;margin-top:34px}
  .kv__th{width:62px}
}

/* =====================================================================
   Soraの会：年会費の3段階
   ===================================================================== */
.sk-note{max-width:none;margin-top:0}

/* 入会金なし。ここがいちばん伝わってほしいので大きく出す */
.sk-free{margin:0 0 44px;padding-bottom:36px;border-bottom:1px solid rgba(0,0,0,.10)}
.sk-free .en{margin:0 0 12px}
.sk-free__t{
  font-family:var(--min);font-weight:500;color:#15151a;margin:0;
  font-size:clamp(24px,3vw,34px);letter-spacing:.18em;line-height:1.4;
}
.sk-free__t strong{font-weight:500;font-size:1.25em;letter-spacing:.14em;margin-left:.15em}

.sk-fee{margin-top:34px}
/* .plan p の指定より強くする必要があるので、親も含めて書く */
.plan .sk-fee__y{
  font-family:var(--min);font-size:clamp(27px,2.9vw,36px);letter-spacing:.04em;
  color:#15151a;margin:16px 0 0;line-height:1.15;flex:none;
}
.plan .sk-fee__y span{font-size:.36em;margin-left:6px;letter-spacing:.1em;color:#5A5A62}

/* ---- ロゴの位置を少し下げる（2026-08-20）---- */
.hd .logo{transform:translateY(5px)}
@media(max-width:900px){.hd .logo{transform:translateY(3px)}}

/* ---- シリーズ代表作：日本だけ1段まるごと使う ----
   写真は切り取らない。下の3列のうち2列ぶんの幅にして、
   大きすぎず、それでいて主役に見える大きさにしてある */
.theme-nav--solo{
  grid-template-columns:1fr;
  max-width:calc(66.666% - 8px);margin:0 auto 44px;
}
.theme-nav--solo img{aspect-ratio:3/2;object-fit:contain}
.theme-nav--solo .jp{font-size:22px;margin-top:24px}
.theme-nav--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:768px){
  .theme-nav--solo{max-width:none;margin-bottom:26px}
  .theme-nav--solo .jp{font-size:20px}
  .theme-nav--3{grid-template-columns:1fr}
}

/* ---- メディア掲載：雑誌の誌面を並べる（押すと元の大きさで開く） ---- */
.page-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:16px;margin-top:24px;
}
.page-grid a{display:block;overflow:hidden;background:#fff;border:1px solid var(--line);transition:.35s}
.page-grid a:hover{border-color:var(--gold-t);transform:translateY(-2px)}
.page-grid img{width:100%;height:auto;display:block}
@media(max-width:768px){
  .page-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
}

/* ---- プロフィール見出しの下の紹介文 ---- */
.phead__bio{
  margin-top:30px;padding-top:26px;border-top:1px solid rgba(0,0,0,.10);
  max-width:720px;font-size:13.5px;line-height:2.4;
}
@media(max-width:768px){
  .phead__bio{margin-top:24px;padding-top:22px;font-size:13px;line-height:2.2}
  .phead__bio br{display:none}
}

/* ---- 日本の四季：4つ並べる ---- */
.theme-nav--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.theme-nav--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.theme-nav--4{grid-template-columns:1fr}}

/* ---- ギャラリー（ハブ）：日本のカードに小さな添え書き ---- */
.theme-nav .note{
  display:block;margin-top:8px;
  font-family:var(--min);font-size:12px;letter-spacing:.24em;color:#9A9AA3;
}
.theme-nav--4{margin-top:0}

/* ---- お知らせ：購入・予約などのリンク ---- */
.n-link{margin:14px 0 0}
.n-link a{font-size:12.5px;letter-spacing:.14em;color:var(--gold-t)}
.n-link a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---- 言語切り替えのボタンだけ、うっすら色を付ける ---- */
.hd .lang{background:rgba(201,164,92,.15);border-color:rgba(201,164,92,.62)}
.hd .lang:hover{background:var(--gold-t);border-color:var(--gold-t);color:#fff}
body.home .hd:not(.on) .lang:hover{color:#fff}
@media(max-width:900px){
  /* メニューを開いているときも、色は保つ */
  body.nav-open .lang{border-color:rgba(154,123,60,.6)!important;background:rgba(201,164,92,.15)!important}
}

/* ---- 英語ボタン：マウスを乗せたとき、文字が背景と同化していたので白で固定 ----
   （body.home .hd.on .lang:hover が金色を当てていたのが原因） */
/* .lang は .nav の中の a なので、ナビ用の色指定（.hd.on .nav a など）が
   先に当たってしまう。ここだけは確実に白にしたいので !important を使う */
.hd .lang:hover{
  background:var(--gold-t)!important;
  border-color:var(--gold-t)!important;
  color:#fff!important;
}

/* ---- 誌面を、そのページのまま拡大して見る ---- */
.lb{
  position:fixed;inset:0;z-index:9998;display:none;
  background:rgba(10,7,16,.94);
  align-items:center;justify-content:center;
}
.lb.on{display:flex}
.lb__img{max-width:min(94vw,1100px);max-height:92vh;object-fit:contain;display:block;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.lb__btn{
  position:absolute;z-index:2;cursor:pointer;
  background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.1);color:#15151a;
  width:52px;height:52px;border-radius:50%;font-size:26px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.25s;
}
.lb__btn:hover{background:#fff;color:var(--gold-t);border-color:var(--gold-t)}
.lb__prev{left:26px;top:50%;transform:translateY(-50%)}
.lb__next{right:26px;top:50%;transform:translateY(-50%)}
.lb__close{right:26px;top:26px;font-size:30px}
.lb__no{
  position:absolute;left:0;right:0;bottom:22px;text-align:center;
  font-family:var(--lat);font-size:12px;letter-spacing:.26em;color:rgba(255,255,255,.65);
}
@media(max-width:768px){
  .lb__btn{width:42px;height:42px;font-size:22px}
  .lb__prev{left:8px}.lb__next{right:8px}.lb__close{right:8px;top:8px}
  .lb__img{max-width:96vw;max-height:84vh}
}

/* ---- 帯の中にボタンを2つ並べる ---- */
.banner__btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media(max-width:600px){.banner__btns{width:100%}.banner__btns .btn{flex:1;text-align:center}}

/* ---- 年表の中の会場リスト（プロフィール 2016/2019）----
   会場が多いので、一文にせず縦に並べる。パソコンでは2列。
   ★注意：.tl li が grid（200px 1fr・下線・上下44px）なので、
     入れ子の li にもそれが当たってしまう。ここで打ち消している。
     .tl li より詳細度を高くしてあるので、書く場所が前後しても効く */
.tl .tl-list{
  list-style:none;margin:14px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:2px 40px;
}
.tl .tl-list:first-child{margin-top:0}   /* 見出しが無い行は、上の余白を詰める */
.tl .tl-list li{
  display:block;grid-template-columns:none;gap:0;
  padding:0 0 0 1.3em;border-bottom:0;text-indent:-1.3em;
  color:var(--gray);font-size:13px;line-height:2.1;
}
.tl .tl-list li::before{content:"—";color:var(--gold);opacity:.5;margin-right:.5em}
@media(max-width:768px){
  .tl .tl-list{grid-template-columns:1fr;gap:0}
}
/* 会場一覧の下に添える一文（「等 全国各地で〜」）。
   .tl p の色・大きさをそのまま使い、一覧との間だけ少し空ける */
.tl .tl-note{margin-top:18px}

/* ---- フッターの無断転載禁止（全ページ）----
   .ft-btm は左右に振り分ける flex。この一文だけ幅いっぱいで
   独立した行にして、Copyright の上に置く。
   ★.ft-btm small が欧文フォント(--lat)なので、和文は打ち消す */
.ft-btm .ft-note{
  flex-basis:100%;order:-1;margin-bottom:14px;
  font-family:var(--min);font-size:11.5px;letter-spacing:.04em;line-height:1.9;
}
@media(max-width:600px){
  .ft-btm .ft-note{margin-bottom:10px}
}

/* ---- /ikimono/ のサムネイルだけ、スマホで3列に ----
   作品が6点なので、既定の折り返しだと 5＋1 で下段に1枚だけ残って不揃いに見える。
   このページだけ3列にして 3＋3 に揃える。
   ★.kv__th{width:62px} を打ち消す必要があるので width:auto を入れている。
     詳細度は .kirino-ikimono .kv__th（0,2,0）＞ .kv__th（0,1,0）なので効く */
@media(max-width:768px){
  .kirino-ikimono .kv__rail{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;justify-content:center;
  }
  .kirino-ikimono .kv__th{width:auto}
}

/* ---- お知らせの写真に影をつける ----
   白い場に細い枠だけだと平板に見えるので、浮かせる。
   ★影を2枚重ねている。1枚目＝写真の際に落ちる輪郭のはっきりした影、
     2枚目＝下にやわらかく広がる影。1枚だけだと、ぼやけて締まらない */
.n-ph img{box-shadow:0 1px 3px rgba(0,0,0,.28), 0 7px 16px rgba(0,0,0,.18)}

/* ---- ギャラリーの「日本」の下に並べる春夏秋冬 ----
   ★写真は切らない（contain）。日本の大きいカード（.theme-nav--solo）と同じ扱い。
     .theme-nav img は cover なので、ここで打ち消さないと上下が切れる。
   ★下のシリーズの列は .theme-nav--4{margin-top:0} で余白ゼロなので、
     こちら側に margin-bottom を持たせないと、くっついて一続きに見える */
.theme-nav--season img{aspect-ratio:3/2;object-fit:contain}
.theme-nav--season{margin-bottom:72px}
@media(max-width:768px){
  .theme-nav--season{margin-bottom:48px}
}

/* ---- 地紋（モロッカン柄）----
   NEWのセクションの「下だけ」に敷く。柄はヨーロッパのタイル風のひし形（SVGで描いている）。
   ★モロッカン柄に戻したいときは background-image を
     url("assets/img/pattern-moroccan.png") に、background-size を 118px 131px にするだけ。
     画像は消さずに残してある（客からもらった 22442356.png の黒地を抜いて切り出したもの）
   全面ではなく、下に余白をたっぷり取って、そこへ帯状に置く形。
   ★濃さは opacity。0.2 が既定（薄く=0.14／濃く=0.3）
   ★帯の高さは ::after の height、余白は .sec-pat の padding-bottom
   ★柄の大きさは background-size（78×109）
   ★opacity は ::after に掛けている。この擬似要素には中身が無いので、
     文字や写真が薄くなる心配はない（セクション本体に掛けると全部薄くなる） */
.sec-pat{position:relative;padding-bottom:230px}
.sec-pat > *{position:relative;z-index:1}   /* 中身は柄より前に置く */
.sec-pat::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:200px;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='140' viewBox='0 0 100 140'%3E%3Cg fill='none' stroke='%239A7B3C' stroke-width='1.6'%3E%3Cpath d='M50 0 L100 70 L50 140 L0 70 Z'/%3E%3Cpath d='M50 -9 L59 0 L50 9 L41 0 Z'/%3E%3Cpath d='M50 131 L59 140 L50 149 L41 140 Z'/%3E%3Cpath d='M100 61 L109 70 L100 79 L91 70 Z'/%3E%3Cpath d='M0 61 L9 70 L0 79 L-9 70 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:78px 109px;
  background-repeat:repeat;
  opacity:.2;
  /* 上端をぼかして、地の色から浮かび上がるようにする */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 55%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 55%);
}
@media(max-width:768px){
  .sec-pat{padding-bottom:150px}
  .sec-pat::after{height:130px;background-size:62px 87px}
}

/* ---- 年表の中の、大きく見せる一文 ----
   見出しを外した行の本文を「言葉」として立たせる。
   本文（13px ゴシック）より大きく、見出し（20px）より控えめに。
   使うときは page-profile.php の $tl の5つめに 'tl-big' と書く */
.tl .tl-big{
  font-family:var(--min);font-size:17px;line-height:2.1;
  letter-spacing:.06em;color:#3A3A42;margin-top:0;
}
@media(max-width:768px){
  .tl .tl-big{font-size:15.5px;line-height:2.05}
}

/* ---- 書籍の「完売」表示 ----
   購入ボタンと同じ位置に、リンクではない文字として置く。
   金ではなく灰色にして「押せない」ことが分かるようにする */
.bk__l--soldout{color:#9A9AA3;cursor:default;pointer-events:none}
.b-link--soldout{color:#9A9AA3;font-size:12px;letter-spacing:.1em}

/* ---- Contact Form 7 をサイトの見た目に合わせる（2026-09-13）----
   CF7 は入力を <span class="wpcf7-form-control-wrap"> で包むので、既存の .form input のスタイルは効く。
   足りないのは「送信中」「送信後のメッセージ」「必須エラー」の見た目だけ */
.form .wpcf7-form-control-wrap{display:block;margin-bottom:22px}
.form .wpcf7-not-valid-tip{display:block;font-size:11.5px;color:#B5453C;margin-top:6px}
.form .wpcf7-response-output{margin:24px 0 0;padding:14px 18px;border:1px solid var(--line);font-size:13px;line-height:1.9}
.form .wpcf7-form.sent .wpcf7-response-output{border-color:var(--gold-t);color:#15151a}
.form .wpcf7-form.invalid .wpcf7-response-output,.form .wpcf7-form.failed .wpcf7-response-output{border-color:#B5453C}
.form .wpcf7-spinner{margin-left:12px}

/* スマホだけ改行する <br class="br-sp">（見出しが変な位置で折れるのを防ぐ。PCでは無いものとして扱う） */
.br-sp{display:none}
@media(max-width:768px){.br-sp{display:inline}}

/* reCAPTCHA v3：右下のバッジは消し、代わりにフォーム下へ規約の一文（.rc-note）を出す（Googleの条件） */
.grecaptcha-badge{visibility:hidden}
.form .rc-note{font-size:11px;line-height:1.9;color:var(--gray);margin:18px 0 0;letter-spacing:.04em}
.form .rc-note a{color:inherit;text-decoration:underline}

/* OPの前に出す「音あり／音なし」の選択画面（2026-09-15） */
.op-ask{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:5;background:#000;display:flex;align-items:center;justify-content:center;text-align:center;transition:opacity .6s ease}
.op-ask.off{opacity:0;pointer-events:none}
.op-ask__in{padding:24px}
.op-ask__logo{width:min(260px,64vw);height:auto;margin:0 auto 26px;display:block;opacity:.95}
.op-ask__t{font-family:var(--min);color:rgba(255,255,255,.85);font-size:14px;letter-spacing:.12em;line-height:2;margin:0 0 26px}
.op-ask__b{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.op-btn--lg{font-size:13px;padding:14px 28px;min-width:180px;letter-spacing:.18em}
.op-ask__skip{margin-top:30px;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.35);color:rgba(255,255,255,.6);font-family:var(--got);font-size:11px;letter-spacing:.14em;padding:0 2px 4px;cursor:pointer;transition:.3s}
.op-ask__skip:hover{color:#fff;border-color:#fff}
.op.rip .op-ask{display:none}
@media(max-width:600px){.op-ask__t{font-size:13px}.op-btn--lg{min-width:0;width:100%}.op-ask__b{flex-direction:column;gap:12px;width:min(300px,80vw);margin:0 auto}}

/* プライバシーポリシー（/privacy/）とフッターのリンク（2026-09-16） */
.policy{max-width:760px;margin:44px auto 0}
.policy h3{font-family:var(--min);font-weight:500;font-size:15px;letter-spacing:.08em;margin:34px 0 10px}
.policy h3:first-child{margin-top:0}
.policy p{color:var(--gray);font-size:13.5px;line-height:2.2;margin:0}
.policy p a{color:inherit;text-decoration:underline}
.policy .policy__date{margin-top:40px;font-size:12.5px}
.ft-btm .ft-links{flex-basis:100%;margin-bottom:6px}
.ft-btm .ft-links a{color:inherit;text-decoration:underline;text-underline-offset:3px;letter-spacing:.08em}