/* ============================================================
   The Gallery HARI — 索 SAKU シリーズ頁
   ブランド・デザインシート準拠（木 / 生成り / 瑠璃 / 灯火金）
   色を変えたいときは下の :root の値だけ書き換えればOK
   ============================================================ */
:root{
  --wood:        #4A3526;  /* メイン：木 */
  --wood-center: #6B4E36;  /* 暖炉の灯の中心 */
  --wood-edge:   #281C13;  /* 暖炉の灯の縁 */
  --wood-panel:  #38291C;  /* 焦茶パネル */
  --wood-card:   #241A11;  /* カード地 */
  --kinari:      #EDE4CF;  /* サブ：生成り（文字） */
  --kinari-dim:  #D9CDB5;  /* やや沈めた生成り */
  --ruri:        #3576AA;  /* アクセント：瑠璃 */
  --tomoshibi:   #C99A5E;  /* あしらい：灯火金 */
  --frame:       #6E5639;  /* 額縁ライン */
  --muted:       #8C775A;  /* 注記の小さな文字 */
  --jp: 'Shippori Mincho', serif;   /* 和文（はんなり明朝の代替） */
  --en: 'Cormorant Garamond', serif;/* 欧文 */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--jp);
  color:var(--kinari);
  background:var(--wood);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.en{font-family:var(--en);letter-spacing:.08em}

/* ---------- ヘッダー ---------- */
.site-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 28px;border-bottom:.5px solid var(--frame);
  background:var(--wood-edge);position:sticky;top:0;z-index:20;
}
.brand{font-family:var(--en);font-size:20px;letter-spacing:.1em;color:var(--kinari)}
.site-nav a{font-size:13px;letter-spacing:.12em;margin-left:22px;color:var(--kinari-dim)}
.site-nav a:hover{color:var(--tomoshibi)}

/* ---------- ① シリーズ物語 ---------- */
.series-story{
  background:radial-gradient(ellipse at 50% 36%, var(--wood-center) 0%, #3A2A1B 52%, var(--wood-edge) 100%);
  padding:64px 24px 76px;text-align:center;
}
.story-inner{max-width:560px;margin:0 auto}
.story-photo{
  height:230px;margin:0 auto 34px;max-width:460px;
  background:#241A11;border:.5px solid var(--frame);border-radius:3px;
  display:flex;align-items:center;justify-content:center;color:#7C6750;font-size:12px;
}
.series-en{font-family:var(--en);font-size:14px;color:var(--tomoshibi);letter-spacing:.1em}
.series-mark{font-family:var(--en);font-size:64px;font-weight:500;color:var(--kinari);line-height:1.1;margin:4px 0 8px}
.series-title{font-size:22px;letter-spacing:.22em}
.series-sub{font-size:14px;letter-spacing:.2em;color:var(--kinari-dim);margin-top:6px}
.rule{display:block;width:38px;height:1px;background:var(--tomoshibi);margin:24px auto}
.series-lead{font-size:15px;color:var(--kinari-dim)}

/* ---------- ② 作品グリッド ---------- */
.works{background:var(--wood-panel);padding:60px 24px 70px}
.sec-en{font-family:var(--en);font-size:13px;color:var(--tomoshibi);text-align:center;letter-spacing:.1em}
.sec-title{font-size:18px;font-weight:500;letter-spacing:.16em;text-align:center;margin:4px 0 36px}
.works-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
  max-width:680px;margin:0 auto;
}
.work-card{
  border:.5px solid var(--frame);border-radius:3px;background:var(--wood-card);
  padding:14px;transition:transform .25s ease, border-color .25s ease;
}
.work-card:hover{transform:translateY(-3px);border-color:var(--tomoshibi)}
.work-card.is-feature{border:1px solid var(--ruri)}
.work-photo{
  height:200px;background:#2E211A;border-radius:2px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#7C6750;font-size:12px;
}
.work-photo img{width:100%;height:100%;object-fit:cover;display:block}
.work-link{display:block;color:inherit}
.work-no{font-family:var(--en);font-size:15px;color:var(--tomoshibi);margin-top:12px;letter-spacing:.06em}
.work-link:hover .work-no{color:var(--kinari)}
.work-name{font-size:15px;margin:2px 0 0}
.work-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.work-price{font-size:15px;color:var(--kinari-dim)}
.work-price small{font-size:11px}
.welcome-btn{
  font-size:13px;color:var(--kinari);border:.5px solid var(--tomoshibi);
  padding:8px 18px;border-radius:2px;transition:background .2s ease,color .2s ease;
}
.welcome-btn:hover{background:var(--tomoshibi);color:#3A2A1B}
.is-feature .welcome-btn{border-color:var(--ruri)}
.is-feature .welcome-btn:hover{background:var(--ruri);color:var(--kinari)}
.work-card.is-soon{opacity:.55}
.work-card.is-soon .work-photo{font-size:12px}
.soon-badge{font-size:12px;letter-spacing:.18em;color:var(--kinari-dim);border:.5px solid var(--frame);padding:5px 14px;border-radius:2px}
.work-soon{font-family:var(--en);font-size:12px;color:var(--muted);letter-spacing:.08em}
.works-note{text-align:center;font-size:12px;color:var(--muted);margin-top:24px}

/* ---------- ③ おすすめ カルーセル ---------- */
.recommend{background:var(--wood-card);padding:60px 16px 66px;border-top:.5px solid var(--frame)}
.carousel{display:flex;align-items:center;gap:10px;max-width:760px;margin:8px auto 0}
.car-track{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:14px 6px 20px;scrollbar-width:none;flex:1;
}
.car-track::-webkit-scrollbar{display:none}
.car-card{
  flex:0 0 160px;scroll-snap-align:center;position:relative;
  border:.5px solid var(--frame);border-radius:4px;overflow:hidden;background:var(--wood-card);
  transition:flex-basis .25s ease, border-color .25s ease;
}
.car-card.is-center{flex-basis:188px;border:1px solid var(--tomoshibi)}
.car-photo{
  height:330px;background:#2E211A;
  display:flex;align-items:flex-start;justify-content:center;color:#7C6750;font-size:12px;padding-top:14px;
}
.car-card.is-center .car-photo{height:360px}
.car-num{
  position:absolute;top:14px;left:0;right:0;text-align:center;
  font-family:var(--en);font-size:28px;color:var(--kinari);text-shadow:0 1px 8px rgba(0,0,0,.65);
}
.car-ttl{
  position:absolute;top:60px;left:0;right:0;margin:0 auto;width:max-content;
  writing-mode:vertical-rl;font-size:18px;letter-spacing:.18em;color:#F2EADA;
  text-shadow:0 1px 8px rgba(0,0,0,.7);max-height:230px;
}
.car-arrow{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:.5px solid var(--tomoshibi);background:var(--wood-edge);color:var(--kinari);
  font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.car-arrow:hover{background:var(--frame)}
.recommend-foot{text-align:center;margin-top:18px}
.ghost-btn{
  display:inline-block;font-family:var(--en);font-size:14px;color:#3A2A1B;
  background:var(--kinari);padding:9px 26px;border-radius:999px;letter-spacing:.06em;
}
.ghost-btn:hover{background:var(--tomoshibi)}

/* ---------- フッター ---------- */
.site-footer{background:var(--wood-edge);padding:40px 24px;text-align:center;border-top:.5px solid var(--frame)}
.foot-mark{font-family:var(--en);font-size:18px;color:var(--tomoshibi);letter-spacing:.1em}
.foot-nav{margin:14px 0 10px}
.foot-nav a{font-size:12px;color:var(--kinari-dim);margin:0 12px;letter-spacing:.08em}
.foot-nav a:hover{color:var(--tomoshibi)}
.foot-copy{font-size:11px;color:var(--muted)}

/* ============================================================
   作品詳細ページ（works/saku-001.html など）
   ============================================================ */
.detail-crumb{
  background:var(--wood-edge);padding:12px 28px;font-size:12px;color:var(--kinari-dim);
  letter-spacing:.06em;border-bottom:.5px solid var(--frame);
}
.detail-crumb a{color:var(--tomoshibi)}
.detail-crumb span{margin:0 6px;color:var(--muted)}
.detail{background:var(--wood-panel);padding:44px 24px 64px}
.detail-wrap{
  max-width:920px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;
}

/* 写真ギャラリー */
.detail-main{
  background:#2E211A;border:.5px solid var(--frame);border-radius:3px;overflow:hidden;
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:#7C6750;font-size:13px;
}
.detail-main img{width:100%;height:100%;object-fit:contain;display:block}
.detail-thumbs{display:flex;gap:10px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:thin}
.detail-thumb{
  flex:0 0 64px;width:64px;height:64px;padding:0;cursor:pointer;
  background:#241A11;border:.5px solid var(--frame);border-radius:2px;overflow:hidden;
  color:#7C6750;font-size:11px;font-family:var(--jp);
  display:flex;align-items:center;justify-content:center;transition:border-color .2s ease;
}
.detail-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.detail-thumb.is-active{border:1px solid var(--tomoshibi)}
.detail-thumb:hover{border-color:var(--tomoshibi)}
.detail-photonote{font-size:11px;color:var(--muted);margin-top:8px}

/* 作品情報 */
.detail-series{font-family:var(--en);font-size:14px;color:var(--tomoshibi);letter-spacing:.1em}
.detail-title{font-family:var(--en);font-size:34px;font-weight:500;color:var(--kinari);margin:2px 0 12px;letter-spacing:.04em}
.detail-price{font-size:24px;color:var(--kinari);margin-bottom:4px}
.detail-price small{font-size:13px;color:var(--kinari-dim)}
.buy-specs{margin:20px 0 24px}
.spec-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 2px;border-bottom:.5px solid var(--frame);font-size:14px}
.spec-row:first-child{border-top:.5px solid var(--frame)}
.spec-k{color:var(--tomoshibi);letter-spacing:.08em;white-space:nowrap}
.spec-v{color:var(--kinari-dim);text-align:right}
.detail-welcome{
  display:block;text-align:center;font-size:15px;color:#2C2017;letter-spacing:.16em;
  background:var(--tomoshibi);border:none;padding:16px;border-radius:2px;transition:opacity .2s ease;
}
.detail-welcome:hover{opacity:.88}
.detail-ship{font-size:12.5px;color:var(--kinari-dim);margin-top:12px;text-align:center}
.detail-gift{font-size:12px;color:var(--muted);margin-top:6px;text-align:center;line-height:1.7}

/* この子について（カルテ） */
.detail-karte{margin-top:30px;border-top:.5px solid var(--frame);padding-top:22px}
.karte-h{font-size:16px;font-weight:500;letter-spacing:.12em;margin-bottom:14px}
.karte-list{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14px;margin-bottom:16px}
.karte-list dt{color:var(--tomoshibi);letter-spacing:.08em}
.karte-list dd{color:var(--kinari-dim)}
.karte-sub{font-size:13px;font-weight:500;color:var(--tomoshibi);letter-spacing:.14em;margin:18px 0 6px}
.karte-body{font-size:14px;color:var(--kinari-dim);line-height:1.95}
.karte-body a{color:var(--tomoshibi);text-decoration:underline;text-underline-offset:3px}
.karte-note{
  font-size:12.5px;color:var(--kinari-dim);line-height:1.9;margin-top:12px;
  padding:12px 14px;background:rgba(110,86,57,.18);border-left:2px solid var(--tomoshibi);border-radius:0;
}
.karte-link{font-size:13px;color:var(--kinari-dim);margin-top:16px}
.karte-link a{color:var(--tomoshibi);text-decoration:underline;text-underline-offset:3px}
.detail-back{display:inline-block;margin-top:26px;font-size:13px;color:var(--tomoshibi);letter-spacing:.06em}
.detail-back:hover{color:var(--kinari)}

/* 写真の下：文様・特徴（エディトリアル） */
.detail-story{max-width:600px;margin:52px auto 0;padding-top:40px;border-top:.5px solid var(--frame);text-align:center}
.story-h{font-size:17px;font-weight:500;letter-spacing:.22em;color:var(--kinari);margin:36px 0 16px}
.story-h:first-child{margin-top:0}
.story-body{font-size:15px;color:var(--kinari-dim);line-height:2.05;margin:0 auto}
.story-caution{font-size:12.5px;color:var(--muted);margin-top:16px;letter-spacing:.04em}
.detail-story .karte-note{text-align:left;margin-top:30px}
.detail-story .karte-link{text-align:center;margin-top:22px}
.story-back{margin-top:30px}

/* ---------- スマホ対応 ---------- */
@media (max-width:600px){
  .works-grid{grid-template-columns:1fr;max-width:340px}
  .series-mark{font-size:52px}
  .site-nav a{margin-left:14px}
  .car-card{flex-basis:140px}
  .car-card.is-center{flex-basis:160px}
  .detail-wrap{grid-template-columns:1fr;gap:26px}
  .detail-title{font-size:30px}
}