/* 本小松石（/komatsuishi/）専用。style.css の後に読む（functions.php で is_page('komatsuishi') のときだけ enqueue）
 * 2026-10-04 新設。作品写真が暗い背景で撮られているため、ページも墨の地にする。墨＋生成り＋石の青緑の3色 */
.ks{
  --ks-base:#151513; --ks-ink:#ECE8E0; --ks-acc:#9DB2A6; --ks-sub:#A9A49B; --ks-line:#34332E; --ks-deep:#1E1E1B;
  background:var(--ks-base);color:var(--ks-ink);
}
.ks .serif,.ks h1,.ks h2{font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;font-weight:600;}
.ks-kicker{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.14em;font-weight:600;color:var(--ks-acc);}
.ks-kicker::before{content:"";width:18px;height:2px;background:currentColor;}
.ks-btn{display:inline-block;background:var(--ks-ink);color:var(--ks-base);padding:15px 34px;border-radius:2px;font-size:14px;letter-spacing:.12em;font-weight:600;transition:opacity .2s;}
.ks-btn:hover{opacity:.85;}

/* ファーストビュー: 採掘場の写真の上に見出し */
.ks-fv{position:relative;min-height:min(78vh,760px);display:flex;align-items:flex-end;overflow:hidden;}
.ks-fv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;}
.ks-fv::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,21,19,.92) 0%,rgba(21,21,19,.55) 45%,rgba(21,21,19,.05) 80%);}
.ks-fv-in{position:relative;z-index:1;max-width:1240px;width:100%;margin:0 auto;padding:0 28px 72px;}
.ks-fv h1{font-size:46px;line-height:1.45;letter-spacing:.12em;margin:18px 0 22px;}
.ks-fv p{font-size:15.5px;line-height:1.95;max-width:520px;color:var(--ks-ink);margin-bottom:30px;}

/* 石について */
.ks-stone{max-width:1240px;margin:0 auto;padding:96px 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;}
.ks-stone img{width:100%;border-radius:2px;}
.ks-stone h2{font-size:28px;letter-spacing:.14em;margin-bottom:24px;}
.ks-stone p{font-size:15px;line-height:2;color:var(--ks-sub);margin-bottom:16px;max-width:520px;}

/* 六つの仕上げ */
.ks-tech{background:var(--ks-deep);padding:80px 28px;}
.ks-tech-head{max-width:1184px;margin:0 auto 40px;display:flex;gap:48px;align-items:flex-end;flex-wrap:wrap;}
.ks-tech-head h2{font-size:28px;letter-spacing:.14em;}
.ks-tech-head p{font-size:14.5px;color:var(--ks-sub);max-width:440px;line-height:1.9;}
.ks-tech ol{list-style:none;max-width:1184px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ks-line);}
.ks-tech li{display:flex;gap:18px;padding:26px 24px 26px 0;border-bottom:1px solid var(--ks-line);}
.ks-tech li>span{font-size:22px;color:var(--ks-acc);line-height:1.2;}
.ks-tech li div{font-size:14px;line-height:1.85;color:var(--ks-sub);}
.ks-tech li b{display:block;font-size:16px;color:var(--ks-ink);margin-bottom:4px;letter-spacing:.06em;}

/* 作品（シリーズごと） */
.ks-ch{max-width:1240px;margin:0 auto;padding:88px 28px 8px;}
.ks-ch-head{display:flex;gap:40px;align-items:baseline;flex-wrap:wrap;border-bottom:1px solid var(--ks-line);padding-bottom:20px;margin-bottom:32px;}
.ks-ch-head h2{font-size:26px;letter-spacing:.12em;}
.ks-ch-head p{font-size:14.5px;color:var(--ks-sub);}
.ks-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px;}
/* 4作品のシリーズはPCで4列（3列だと1枚だけ次の行に残る） */
@media (min-width:1101px){.ks-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 22px;}}
.ks-card{display:flex;flex-direction:column;}
.ks-card-ph{display:block;overflow:hidden;border-radius:2px;background:#1b1b19;margin-bottom:16px;}
.ks-card-ph img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s;}
.ks-card:hover .ks-card-ph img{transform:scale(1.03);}
.ks-card-no{font-size:12.5px;letter-spacing:.16em;color:var(--ks-acc);margin-bottom:6px;}
.ks-card-name{font-size:18px;line-height:1.5;margin-bottom:6px;}
.ks-card-by{font-size:13px;color:var(--ks-sub);margin-bottom:10px;}
.ks-card-price{font-size:16px;letter-spacing:.04em;}
.ks-card-price small{font-size:12.5px;color:var(--ks-sub);margin-left:4px;}
.ks-card-price em{font-style:normal;font-size:12.5px;color:var(--ks-acc);margin-left:10px;}
#works{padding-bottom:96px;}

/* 作り手 */
.ks-makers{background:var(--ks-deep);}
.ks-makers-in{max-width:1240px;margin:0 auto;padding:88px 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;}
.ks-makers h2{font-size:28px;letter-spacing:.14em;margin-bottom:22px;}
.ks-makers p{font-size:15px;line-height:2;color:var(--ks-sub);max-width:520px;}
.ks-makers .ks-makers-sub{font-size:13.5px;margin-top:18px;}
.ks-makers ul{list-style:none;border-top:1px solid var(--ks-line);}
.ks-makers li a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--ks-line);transition:color .2s;}
.ks-makers li a:hover{color:var(--ks-acc);}
.ks-makers li b{font-size:17px;letter-spacing:.08em;font-weight:600;}
.ks-makers li span{font-size:13px;color:var(--ks-sub);}

/* 相談 */
.ks-cta{text-align:center;padding:96px 28px 104px;}
.ks-cta h2{font-size:26px;letter-spacing:.12em;margin-bottom:18px;}
.ks-cta h2 span{display:inline-block;}
.ks-cta p{font-size:15px;color:var(--ks-sub);margin:0 auto 32px;max-width:460px;line-height:1.9;}

@media (min-width:901px) and (max-width:1100px){
  .ks-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ks-stone{gap:40px;}
}
@media (max-width:900px){
  .ks-stone{grid-template-columns:minmax(0,1fr);gap:32px;padding:72px 22px;}
  .ks-tech ol{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ks-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px;}
  .ks-makers-in{grid-template-columns:minmax(0,1fr);gap:36px;padding:72px 22px;}
  .ks-ch{padding:72px 22px 8px;}
  .ks-tech{padding:64px 22px;}
}
@media (max-width:600px){
  .ks-fv{min-height:82vh;}
  .ks-fv-in{padding:0 20px 48px;}
  .ks-fv h1{font-size:31px;letter-spacing:.08em;}
  .ks-fv p{font-size:15px;}
  .ks-stone h2,.ks-tech-head h2,.ks-makers h2{font-size:23px;}
  .ks-ch-head{gap:8px;flex-direction:column;}
  .ks-ch-head h2,.ks-cta h2{font-size:21px;}
  .ks-tech ol{grid-template-columns:minmax(0,1fr);}
  .ks-tech li{padding:20px 0;}
  .ks-grid{grid-template-columns:minmax(0,1fr);gap:40px;}
  .ks-cta{padding:72px 20px 80px;}
}
/* 動き（2026-10-04c）: FVは写真がゆっくり引き、文字が順に浮かぶ。下はスクロールで順に現れる。
 * 隠すのは page-komatsuishi.php のスクリプトが html に ks-js を付けたときだけ＝JSが無くても全部見える */
@keyframes ks-pull{from{transform:scale(1.08);}to{transform:scale(1);}}
@keyframes ks-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.ks-fv-img{animation:ks-pull 2.6s cubic-bezier(.2,.6,.2,1) both;}
.ks-fv-in>*{animation:ks-rise .9s cubic-bezier(.2,.6,.2,1) both;}
.ks-fv-in>:nth-child(1){animation-delay:.25s;}
.ks-fv-in>:nth-child(2){animation-delay:.4s;}
.ks-fv-in>:nth-child(3){animation-delay:.6s;}
.ks-fv-in>:nth-child(4){animation-delay:.8s;}
.ks-js .ks-rv{opacity:0;transform:translateY(18px);}
.ks-js .ks-rv.is-in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1);}

@media (prefers-reduced-motion:reduce){
  .ks-card-ph img,.ks-btn{transition:none;}
  .ks-fv-img,.ks-fv-in>*{animation:none;}
  .ks-js .ks-rv{opacity:1;transform:none;transition:none;}
}