/* =========================================================
   制作サンプル 共通スタイル(高級路線・明朝基調)
   /assets/sample.css として公開し、4つのサンプルが読み込みます。
   各ページは :root で色だけを上書きします。
   ここを直すと、4本すべてに反映されます。
   ========================================================= */

:root{
  /* 既定値。各ページで上書きします */
  --paper:#f6f3ec;
  --paper2:#fbf9f6;
  --sumi:#1d1b18;
  --sumi2:#403b33;
  --muted:#857d70;
  --accent:#9c8250;
  --accent-lt:#c3aa78;
  --accent-ink:#ffffff;
  --hair:rgba(29,27,24,.14);
  --hair-lt:rgba(29,27,24,.07);
  --deep:#16181a;
  --deep-ink:#e8e2d6;

  --mincho:'Shippori Mincho B1','Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif;
  --latin:'Cormorant Garamond',Georgia,serif;
  --gothic:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--mincho);
  background:var(--paper);
  color:var(--sumi);
  font-size:16px;
  line-height:2.2;
  letter-spacing:.09em;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.num{font-variant-numeric:tabular-nums;}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(22px,5vw,56px);}
.narrow{max-width:760px;}

/* ===== 小さな欧文ラベル ===== */
.lbl{
  display:block;font-family:var(--latin);
  font-size:12px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--accent);font-weight:400;line-height:1;
}

/* ===== 見出し ===== */
.head{
  font-size:clamp(23px,3.3vw,35px);
  font-weight:500;line-height:1.85;letter-spacing:.14em;
  margin:22px 0 0;
}
.head em{font-style:normal;color:var(--accent);}
.head-rule{width:44px;height:1px;background:var(--accent);margin:34px 0 0;}
.sec-head{margin-bottom:clamp(44px,6vw,72px);}
.sec-head .lead{
  font-size:14.5px;color:var(--muted);margin-top:26px;max-width:42em;line-height:2.3;
}
.sec-head.center{text-align:center;}
.sec-head.center .head-rule{margin-left:auto;margin-right:auto;}
.sec-head.center .lead{margin-left:auto;margin-right:auto;}

h3.sub{font-size:clamp(18px,2.3vw,23px);font-weight:500;letter-spacing:.13em;line-height:1.8;}

/* ===== 本文 ===== */
p.body{font-size:15.5px;line-height:2.4;color:var(--sumi2);letter-spacing:.08em;}
p.body + p.body{margin-top:1.8em;}
.small{font-size:12.5px;color:var(--muted);line-height:2.1;letter-spacing:.06em;}
.small + .small{margin-top:.5em;}

/* ===== サンプル告知帯 ===== */
.sample-note{
  background:var(--deep);color:#cfc7b6;
  font-family:var(--gothic);font-weight:300;
  font-size:12px;letter-spacing:.12em;text-align:center;
  padding:11px 18px;line-height:1.8;
}
.sample-note b{color:var(--accent-lt);font-weight:400;}

/* ===== ヘッダー ===== */
.sh{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:24px 0;border-bottom:1px solid transparent;
  transition:background .5s ease,padding .5s ease,border-color .5s ease;
}
.sh.solid{
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:14px 0;border-bottom-color:var(--hair);
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .sh.solid{background:var(--paper);}
}
.sh-in{display:flex;align-items:center;justify-content:space-between;gap:28px;}
.brand{line-height:1.5;}
.brand .jp{display:block;font-size:20px;letter-spacing:.28em;font-weight:500;color:var(--sumi);}
.brand .en{display:block;font-family:var(--latin);font-size:10px;letter-spacing:.34em;color:var(--accent);margin-top:3px;}
.nav{display:flex;gap:clamp(16px,2.2vw,32px);align-items:center;}
.nav a{font-size:13px;letter-spacing:.16em;position:relative;padding:5px 0;color:var(--sumi2);}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.nav a:hover::after{transform:scaleX(1);transform-origin:left;}
.sh-tel{text-align:right;line-height:1.3;}
.sh-tel .t{display:block;font-size:9.5px;letter-spacing:.24em;color:var(--muted);}
.sh-tel .n{display:block;font-family:var(--latin);font-size:22px;letter-spacing:.06em;color:var(--sumi);font-weight:400;}

/* ===== ボタン ===== */
.btn{
  display:inline-block;font-size:13.5px;letter-spacing:.2em;
  padding:16px 38px;border:1px solid var(--sumi);color:var(--sumi);white-space:nowrap;
  transition:background .45s ease,color .45s ease,border-color .45s ease;
}
.btn:hover{background:var(--sumi);color:var(--paper);}
.btn.accent{border-color:var(--accent);color:var(--accent);}
.btn.accent:hover{background:var(--accent);color:var(--accent-ink);}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.btn.solid:hover{background:transparent;color:var(--accent);}
.nav .btn{padding:11px 22px;font-size:12.5px;}
.nav .btn::after{display:none;}
.acts{display:flex;gap:14px;flex-wrap:wrap;}
.acts.center{justify-content:center;}

/* ===== ヒーロー ===== */
.hero{
  position:relative;min-height:calc(100svh - var(--noteH,42px));
  display:flex;align-items:center;padding:150px 0 108px;overflow:hidden;
  background:var(--hero-bg, linear-gradient(172deg,var(--paper2),var(--paper)));
}
.hero-art{position:absolute;right:-6%;bottom:-4%;width:min(70vw,860px);opacity:.5;pointer-events:none;}
.hero-art svg{width:100%;height:auto;}
.hero-in{position:relative;z-index:2;}
.hero h1{
  font-size:clamp(31px,6.6vw,66px);
  font-weight:400;line-height:1.68;letter-spacing:.13em;margin:30px 0 0;
}
.hero h1 .ln{display:block;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero .sub{margin-top:36px;max-width:30em;font-size:15.5px;line-height:2.5;color:var(--sumi2);}
.hero .acts{margin-top:46px;}
.hero .foot{margin-top:22px;font-size:12px;letter-spacing:.1em;color:var(--muted);}

/* 立ち上がりのアニメーション */
.hero .lbl{opacity:0;animation:fadeUp 1.5s .2s cubic-bezier(.22,1,.36,1) forwards;}
.hero h1{opacity:0;animation:fadeUp 1.6s .4s cubic-bezier(.22,1,.36,1) forwards;}
.hero .sub{opacity:0;animation:fadeUp 1.6s .62s cubic-bezier(.22,1,.36,1) forwards;}
.hero .acts{opacity:0;animation:fadeUp 1.6s .82s cubic-bezier(.22,1,.36,1) forwards;}
.hero .foot{opacity:0;animation:fadeUp 1.6s .98s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* 縦書きのひとこと */
.tate{
  position:absolute;right:clamp(16px,3.2vw,44px);top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;font-size:13px;letter-spacing:.42em;color:var(--muted);
  z-index:3;opacity:0;animation:fadeIn 2s 1.15s ease forwards;
}
.tate::after{content:"";display:block;width:1px;height:70px;background:var(--hair);margin:24px auto 0;}

/* ===== スクロールでふわりと ===== */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity 1.2s cubic-bezier(.22,1,.36,1),transform 1.2s cubic-bezier(.22,1,.36,1);}
.rv.on{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .hero .lbl,.hero h1,.hero .sub,.hero .acts,.hero .foot,.tate{animation:none;opacity:1;}
}

/* ===== セクション ===== */
section{padding:clamp(80px,12vw,150px) 0;}
section.alt{background:var(--paper2);border-top:1px solid var(--hair-lt);border-bottom:1px solid var(--hair-lt);}
section.dark{
  background:var(--deep);color:var(--deep-ink);
  --sumi:var(--deep-ink);--sumi2:#a8a195;--muted:#8a8478;
  --hair:rgba(232,226,214,.16);--hair-lt:rgba(232,226,214,.09);
  --paper2:rgba(255,255,255,.03);
}
section.dark .lbl{color:var(--accent-lt);}
section.dark .head-rule{background:var(--accent-lt);}
section.dark .brand .jp{color:var(--deep-ink);}

/* ===== 番号つきの箇条(罫線で区切る) ===== */
.pillars{display:grid;}
.pil{
  display:grid;grid-template-columns:104px 1fr;gap:clamp(18px,4vw,52px);
  padding:clamp(34px,4.6vw,50px) 0;border-top:1px solid var(--hair);
}
.pil:last-child{border-bottom:1px solid var(--hair);}
.pil .n{font-family:var(--latin);font-size:clamp(28px,3.8vw,42px);color:var(--accent-lt);line-height:1;font-weight:300;}
.pil h3{font-size:clamp(17.5px,2.3vw,23px);font-weight:500;letter-spacing:.13em;line-height:1.8;margin-bottom:14px;}
.pil p{font-size:14.5px;line-height:2.35;color:var(--sumi2);max-width:42em;}

/* ===== 均等な一覧(サービス等) ===== */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  border-top:1px solid var(--hair);border-left:1px solid var(--hair);}
.cols .cell{
  padding:clamp(26px,3.2vw,38px) clamp(20px,2.4vw,30px);
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.cols .cell h3{font-size:16.5px;font-weight:500;letter-spacing:.12em;margin-bottom:10px;line-height:1.75;}
.cols .cell p{font-size:13px;line-height:2.1;color:var(--muted);}
.cols .cell .from{
  display:block;margin-top:14px;font-family:var(--latin);font-size:19px;
  letter-spacing:.06em;color:var(--accent);
}
.cols .cell .from small{font-family:var(--mincho);font-size:12px;letter-spacing:.1em;margin-left:4px;}
.cols .cell .ic{width:34px;height:34px;color:var(--accent);margin-bottom:16px;opacity:.85;}

/* ===== 流れ ===== */
.flow-list{border-top:1px solid var(--hair);}
.fl{
  display:grid;grid-template-columns:80px 1fr;gap:clamp(14px,3vw,38px);
  padding:clamp(24px,3.2vw,36px) 0;border-bottom:1px solid var(--hair);align-items:baseline;
}
.fl .st{font-family:var(--latin);font-size:13px;letter-spacing:.2em;color:var(--accent);}
.fl h3{font-size:16.5px;font-weight:500;letter-spacing:.13em;margin-bottom:8px;}
.fl p{font-size:14px;line-height:2.2;color:var(--sumi2);max-width:46em;}

/* ===== 表(料金・仕様・会社概要) ===== */
.table-wrap{overflow-x:auto;}
table.t{width:100%;border-collapse:collapse;font-size:14px;letter-spacing:.06em;}
table.t caption{
  caption-side:top;text-align:left;font-size:14px;font-weight:500;letter-spacing:.16em;
  color:var(--sumi);padding-bottom:16px;
}
table.t th,table.t td{
  text-align:left;padding:clamp(13px,1.7vw,18px) 14px;
  border-bottom:1px solid var(--hair);vertical-align:top;line-height:2;
}
table.t thead th{
  font-size:11.5px;letter-spacing:.22em;font-weight:500;color:var(--muted);
  border-bottom:1px solid var(--sumi);padding-top:0;
}
table.t th:first-child,table.t td:first-child{padding-left:0;}
table.t th:last-child,table.t td:last-child{padding-right:0;}
table.t tbody tr:last-child td,table.t tbody tr:last-child th{border-bottom:none;}
table.t td.p{
  text-align:right;white-space:nowrap;font-family:var(--latin);font-size:17px;
  letter-spacing:.04em;color:var(--accent);font-variant-numeric:tabular-nums;
}
table.t td.p small{font-family:var(--mincho);font-size:11.5px;letter-spacing:.1em;margin-left:3px;color:var(--muted);}
table.t td.cond{font-size:12.5px;color:var(--muted);line-height:1.95;}
table.t tr.total td{border-top:1px solid var(--sumi);border-bottom:none;padding-top:20px;font-weight:500;}
table.t tr.total td.p{font-size:22px;color:var(--sumi);}
/* 縦並びの定義表(会社概要・仕様) */
table.def th{
  width:clamp(96px,24%,190px);font-weight:500;font-size:13px;letter-spacing:.18em;
  color:var(--muted);white-space:nowrap;
}
table.def td{font-size:14.5px;color:var(--sumi2);}

/* ===== 罫線だけの注記ボックス ===== */
.note{border-left:1px solid var(--accent);padding:4px 0 4px 22px;}
.note .t{font-size:14px;font-weight:500;letter-spacing:.14em;margin-bottom:10px;}
.note p{font-size:13.5px;line-height:2.25;color:var(--sumi2);}
.notes{margin-top:28px;}

/* ===== 2列・3列の素の並び ===== */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,4vw,56px);}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(22px,3vw,44px);}
.stack{display:grid;gap:clamp(26px,3.4vw,42px);}
.hr-item{border-top:1px solid var(--hair);padding-top:26px;}
.hr-item h3{font-size:16.5px;font-weight:500;letter-spacing:.13em;margin-bottom:10px;line-height:1.8;}
.hr-item p{font-size:13.5px;line-height:2.2;color:var(--sumi2);}

/* ===== 施工実例 ===== */
.wgrid{display:grid;gap:clamp(44px,6.5vw,88px);}
.w{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,40px);align-items:center;}
@media (min-width:880px){
  .w{grid-template-columns:1.3fr 1fr;}
  .w.flip .w-ph{order:2;}
  .w.flip .w-tx{order:1;}
}
.w-ph{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:var(--ph-bg, rgba(0,0,0,.05));
  display:flex;align-items:center;justify-content:center;
}
.w-ph::after{content:"";position:absolute;inset:13px;border:1px solid var(--hair);pointer-events:none;}
.w-ph .ph-note{font-size:12px;letter-spacing:.24em;color:var(--muted);text-align:center;line-height:2.2;padding:0 20px;}
.w-ph svg{position:absolute;width:54%;opacity:.14;color:var(--accent);}
.ph-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ph-pair .w-ph{aspect-ratio:4/3;}
.ph-pair .tag{
  position:absolute;top:0;left:0;font-family:var(--latin);font-size:11px;letter-spacing:.24em;
  background:var(--sumi);color:var(--paper);padding:4px 12px;z-index:2;
}
.w-tx .cat{font-family:var(--latin);font-size:12px;letter-spacing:.3em;color:var(--accent);}
.w-tx h3{font-size:clamp(19px,2.6vw,25px);font-weight:500;letter-spacing:.14em;margin:14px 0 18px;line-height:1.8;}
.w-tx p{font-size:14px;line-height:2.3;color:var(--sumi2);}
.w-spec{margin-top:24px;border-top:1px solid var(--hair);}
.w-spec div{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid var(--hair-lt);font-size:12.5px;}
.w-spec dt{color:var(--muted);min-width:5.5em;}
.w-spec dd{color:var(--sumi2);}
.w-price{
  margin-top:20px;font-family:var(--latin);font-size:25px;letter-spacing:.04em;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.w-price small{font-family:var(--mincho);font-size:11.5px;letter-spacing:.1em;color:var(--muted);margin-left:6px;}

/* ===== 電話の大きい表示 ===== */
.tel-block{margin-top:40px;}
.tel-block .t{font-size:11px;letter-spacing:.32em;color:var(--muted);}
.tel-block .n{
  font-family:var(--latin);font-size:clamp(30px,5.2vw,48px);letter-spacing:.08em;
  margin-top:8px;font-weight:300;line-height:1.15;color:var(--sumi);
}
.tel-block .h{font-size:12.5px;color:var(--muted);letter-spacing:.14em;margin-top:8px;}

/* ===== 最後のCTA ===== */
.end{text-align:center;border-top:1px solid var(--hair-lt);background:var(--paper2);}
.end .head{margin-top:20px;}
.end .head-rule{margin:32px auto;}
.end p.body{max-width:34em;margin:0 auto;text-align:left;}
.end .acts{margin-top:42px;}

/* ===== フッター ===== */
.sf{background:var(--deep);color:#8d8579;padding:clamp(54px,7vw,78px) 0 38px;}
.sf-top{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;
  padding-bottom:34px;border-bottom:1px solid rgba(232,226,214,.12);}
.sf .brand .jp{color:#f0ebe1;}
.sf .brand .en{color:var(--accent-lt);}
.sf-links{display:flex;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap;font-size:12.5px;letter-spacing:.16em;}
.sf-links a:hover{color:var(--accent-lt);}
.sf-btm{padding-top:24px;font-size:11.5px;letter-spacing:.14em;line-height:2.2;color:#6d675d;}

/* ===== 画面の幅に応じて ===== */
@media (max-width:980px){
  .sh-tel{display:none;}
}
@media (max-width:880px){
  .nav a:not(.btn){display:none;}
  .tate{display:none;}
  .hero-art{right:-24%;bottom:-2%;width:124vw;opacity:.32;}
  .pil{grid-template-columns:1fr;gap:10px;}
  .pil .n{font-size:25px;}
  .fl{grid-template-columns:1fr;gap:6px;}
}
@media (max-width:560px){
  body{font-size:15.5px;letter-spacing:.06em;}
  .brand .jp{font-size:15.5px;letter-spacing:.12em;}
  .sh-in{gap:12px;}
  .nav{flex:none;}
  .hero{padding:124px 0 84px;}
  .hero h1{letter-spacing:.1em;}
  .btn{padding:14px 26px;font-size:12.5px;}
  .ph-pair{grid-template-columns:1fr;}
  table.t th,table.t td{padding-left:8px;padding-right:8px;}
  table.def th{width:auto;display:block;border-bottom:none;padding-bottom:0;}
  table.def td{display:block;padding-top:4px;}
}

/* =========================================================
   動きの追加(2026-09-18)
   ふわりと出るときに、ぼかしが晴れるようにしました。
   ========================================================= */
:root{--ease:cubic-bezier(.16,1,.3,1);}
.rv{filter:blur(6px);
  transition:opacity 1.25s var(--ease),transform 1.25s var(--ease),filter 1.25s var(--ease);}
.rv.on{filter:blur(0);}

/* 見出しの下の線が、すっと引かれる */
.head-rule{transform:scaleX(0);transform-origin:left;transition:transform 1.1s .3s var(--ease);}
.rv.on .head-rule,.head-rule.rv.on{transform:scaleX(1);}
.philo .head-rule,.end .rule{transform-origin:center;}

/* 触れたときの手ごたえ */
.cols .cell,.hr-item,.fq,.check .it,.pil,.fl{transition:background .6s var(--ease);}
.cols .cell:hover,.hr-item:hover,.fq:hover,.check .it:hover{background:rgba(128,128,128,.055);}
.w-ph svg{transition:transform 1.2s var(--ease);}
.w:hover .w-ph svg{transform:scale(1.08);}

/* ボタンは、下から色が満ちる */
.btn{position:relative;overflow:hidden;isolation:isolate;}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--sumi);
  transform:translateY(101%);transition:transform .6s var(--ease);}
.btn:hover{background:transparent;}
.btn:hover::after{transform:none;}
.btn.accent::after{background:var(--accent);}

/* スクロールの進み具合 */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:500;
  background:linear-gradient(90deg,var(--accent),var(--accent-lt));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .12s linear;}

/* 上に戻るボタン */
.totop{position:fixed;right:22px;bottom:22px;z-index:450;width:44px;height:44px;
  border:1px solid var(--hair);border-radius:50%;display:grid;place-items:center;
  background:var(--paper);color:var(--accent);cursor:pointer;font-size:15px;line-height:1;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .5s var(--ease);}
.totop.show{opacity:1;pointer-events:auto;transform:none;}
.totop:hover{border-color:var(--accent);}

@media (prefers-reduced-motion:reduce){
  .rv{filter:none!important;}
  .head-rule{transform:none!important;}
}