/* 植木屋 そよぎ園（デモ）。苔・白・土。見出し Zen Antique／本文 Sawarabi Gothic */
:root{
  --moss:#5E7B3A;
  --moss-d:#4C6630;
  --moss30:#CFD7C4;
  --tint:#F6F8F3;          /* 苔の7% */
  --soil:#6B4F36;
  --soil-l:#C9BBAC;        /* 土の細い罫（薄め） */
  --ink:#2E2A22;
  --berry:#B23A2A;
  --white:#FFFFFF;
  --f-h:"Zen Antique",serif;
  --f-b:"Sawarabi Gothic","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --wrap:1160px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f-b);font-size:clamp(15px,.9rem + .2vw,17px);line-height:1.85;letter-spacing:.02em;overflow-x:hidden}
img,svg{max-width:100%;height:auto}
img{display:block}
a{color:inherit}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{font-family:var(--f-h);font-weight:400;letter-spacing:.04em;line-height:1.45;margin:0;word-break:auto-phrase;text-wrap:balance;font-feature-settings:"palt"}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--moss);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:24px;padding-right:24px}
.num{font-family:var(--f-h);letter-spacing:.02em}
.small{font-size:.85em;color:#4A443A;line-height:1.75}

/* ---------- ヘッダー ---------- */
.hd{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--soil-l)}
.hd__in{max-width:1320px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:14px;min-height:72px}
.brand{display:block;flex:none;text-decoration:none;line-height:0}
.logo{height:50px;width:auto;display:block}
.logo__sm{font-family:var(--f-b);font-size:11px;fill:var(--soil);letter-spacing:.3em}
.logo__nm{font-family:var(--f-h);font-size:29px;fill:var(--ink);letter-spacing:.06em}
.demo{align-self:center;font-size:9px;letter-spacing:.12em;color:var(--soil);border:1px solid var(--soil-l);padding:0 4px;line-height:1.6;flex:none}
.gnav{margin-left:auto;display:flex;align-items:center;gap:26px}
.gnav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.gnav li a{display:block;text-decoration:none;font-size:15px;padding:8px 0;position:relative;white-space:nowrap}
.gnav li a::after{content:"";position:absolute;left:50%;bottom:0;width:20px;height:2px;background:var(--moss);transform:translateX(-50%) scaleX(0);transition:transform .25s var(--ease)}
.gnav li a:hover::after{transform:translateX(-50%) scaleX(1)}
.gnav li a[aria-current="page"]::after{transform:translateX(-50%) scaleX(1)}
.gnav__end{display:flex;align-items:center;gap:16px}
.tel{font-family:var(--f-h);font-size:15px;color:var(--soil);text-decoration:none;white-space:nowrap;letter-spacing:.04em}
.menu{display:none}

/* ---------- ボタン・文字リンク ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:46px;padding:10px 22px;border-radius:2px;font-size:15px;line-height:1.4;text-decoration:none;letter-spacing:.06em;transition:background-color .2s,color .2s}
.btn--fill{background:var(--moss);color:var(--white);border:1px solid var(--moss)}
.btn--fill:hover{background:var(--moss-d);border-color:var(--moss-d)}
.btn--line{background:var(--white);color:var(--soil);border:1px solid var(--soil)}
.btn--line:hover{background:var(--tint)}
.btn--sm{min-height:40px;padding:6px 16px;font-size:14px}
.more{color:var(--soil);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;white-space:nowrap}
.more:hover{color:var(--moss)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px}
.links{display:flex;flex-wrap:wrap;gap:12px 32px}

/* ---------- 区画 ---------- */
.sec{padding:clamp(60px,8vw,112px) 0}
.sec--tint{background:var(--tint)}
.sec--tight{padding-top:clamp(36px,5vw,64px)}
.h2{display:flex;align-items:flex-start;gap:12px;font-size:clamp(23px,1.2rem + 1.1vw,34px);margin-bottom:clamp(22px,3vw,34px)}
.h2 .leaf{flex:none;width:24px;height:20px;margin-top:.32em}
.h1{display:flex;align-items:flex-start;gap:14px;font-size:clamp(32px,1.4rem + 2.6vw,56px);line-height:1.3;margin-bottom:24px}
.h1 .leaf{flex:none;width:30px;height:25px;margin-top:.3em}
.h3{font-size:clamp(19px,1rem + .5vw,23px);margin-bottom:12px}
.lead{max-width:40em}

/* 四つ目垣の竹1本としゅろ縄の結び目 */
.kaki{height:14px;max-width:var(--wrap);margin:0 auto;padding:0 24px;background-clip:content-box;background-origin:content-box;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'%3E%3Cg stroke='%232E2A22' stroke-width='1.4' stroke-linecap='round' fill='none'%3E%3Cpath d='M56 3.5l6.5 7M62.5 3.5l-6.5 7M57.5 3.5l6.5 7M64 3.5l-6.5 7'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(var(--soil),var(--soil)),linear-gradient(var(--soil),var(--soil));background-repeat:repeat-x,no-repeat,no-repeat;background-size:120px 14px,100% 1px,100% 1px;background-position:0 0,0 4px,0 9px}

/* 写真 */
.ph{margin:0}
.ph img{width:100%;height:auto}
.ph figcaption{font-size:13px;color:var(--soil);margin-top:10px;letter-spacing:.04em}
.sec--tint .ph{background:var(--white);padding:10px 10px 12px}
.ph--wide img{aspect-ratio:21/8;object-fit:cover}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
.split--64{grid-template-columns:6fr 4fr}
.split--46{grid-template-columns:4fr 6fr}
.split--rev > :first-child{order:2}
.split--75{grid-template-columns:7fr 5fr}
.split--74{grid-template-columns:7fr 4fr}
.split--mid{align-items:center}

/* 行（左に名前・右に値段） */
.rows{margin:0;border-top:1px solid var(--soil)}
.rows > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 4px;border-bottom:1px solid var(--soil-l)}
.rows dt{margin:0}
.rows dd{margin:0;text-align:right}
.yen{font-family:var(--f-h);font-size:1.3em;letter-spacing:.02em;white-space:nowrap}

/* 表 */
.tbl{width:100%;border-collapse:collapse;border-top:1px solid var(--soil)}
.tbl th,.tbl td{border-bottom:1px solid var(--soil-l);padding:14px 10px;text-align:left;vertical-align:baseline;font-weight:400}
.tbl thead th{font-size:13px;color:var(--soil);padding-top:10px;padding-bottom:10px}
.tbl tbody th{white-space:nowrap}
.tbl td.r{text-align:right;white-space:nowrap}
.tbl .yen{font-size:1.35em}
.tbl--info th{width:9em;color:var(--soil);white-space:normal}
.tbl--sm{font-size:14px}
.tbl--sm th,.tbl--sm td{padding:10px 8px}

/* よく聞かれること */
.qa{margin:0;border-top:1px solid var(--soil)}
.qa > div{padding:22px 4px;border-bottom:1px solid var(--soil-l);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 48px}
.qa dt{font-family:var(--f-h);font-size:clamp(17px,1rem + .3vw,20px);line-height:1.6}
.qa dd{margin:0}

/* ---------- 最初の画面 ---------- */
.hero{position:relative;height:78vh;height:78svh;min-height:440px;max-height:860px;overflow:hidden;background:#45552F}
.hero img{width:100%;height:100%;object-fit:cover;object-position:34% 50%;transform-origin:34% 55%}
html.motion .hero img{animation:zoom 12s ease-out both}
@keyframes zoom{from{transform:scale(1)}to{transform:scale(1.04)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(24,28,16,.62) 0,rgba(24,28,16,.28) 26%,rgba(24,28,16,0) 46%);pointer-events:none}
.hero__copy{position:absolute;z-index:1;left:max(24px,calc((100% - var(--wrap)) / 2 + 24px));right:24px;bottom:clamp(28px,5vh,56px);color:var(--white)}
.hero__copy h1{font-size:clamp(28px,1.1rem + 3.2vw,58px);line-height:1.38;letter-spacing:.05em;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero__copy p{margin-top:14px;font-size:clamp(13px,.8rem + .2vw,15px);max-width:46em;text-shadow:0 1px 8px rgba(0,0,0,.4)}
html.motion .hero__copy > *{animation:rise .9s var(--ease) both}
html.motion .hero__copy p{animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* 季節の帯 */
.band{background:var(--white);padding:18px 0 0}
.band__in{max-width:var(--wrap);margin:0 auto;padding:0 24px;display:flex;align-items:stretch;gap:16px}
.band__scroll{position:relative;flex:1 1 auto;min-width:0}
.band ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:76px;text-decoration:none;border:1px solid var(--soil-l);border-left-width:0;background:var(--white);transition:background-color .2s}
.band li:first-child .cell{border-left-width:1px}
.cell b{font-family:var(--f-h);font-weight:400;font-size:26px;line-height:1.1}
.cell span{font-size:12px;letter-spacing:.04em;white-space:nowrap}
.cell:hover{background:var(--tint)}
.cell.is-now{background:var(--moss);border-color:var(--moss);color:var(--white)}
html.motion .band li{animation:rise .5s var(--ease) both;animation-delay:calc(var(--i) * 40ms)}
.band__more{align-self:center;font-size:14px}

/* はじめの文 */
.intro{padding-top:clamp(36px,5vw,60px);padding-bottom:clamp(56px,7vw,96px)}
.intro p{font-size:clamp(16px,.95rem + .3vw,19px);max-width:36em}

/* ---------- 図の共通 ---------- */
.fig{margin:0}
.fig__t{display:flex;align-items:baseline;gap:10px;font-family:var(--f-h);font-size:17px;color:var(--soil);letter-spacing:.06em;margin:0 0 18px;padding-bottom:8px;border-bottom:1px solid var(--soil-l)}
.fig__note{font-size:13px;color:#4A443A;margin-top:14px}
.fig__note--r{text-align:right}
.svg-t{font-family:var(--f-b);fill:var(--ink)}
.svg-h{font-family:var(--f-h);fill:var(--ink)}
.only-sp{display:none}

/* Z-2 木の高さと料金 */
.z2 .tr{transform-box:fill-box;transform-origin:50% 100%;transition:transform .4s var(--ease);transition-delay:calc(var(--i) * .18s)}
html.motion .z2:not(.is-in) .tr{transform:scaleY(.6)}

/* Z-4 どの枝を切るか */
.z4 .hl{transition:opacity .5s ease;transition-delay:calc(var(--i) * .5s + .2s)}
html.motion .z4:not(.is-in) .hl{opacity:0}

/* Z-3 お電話から作業の日まで */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:44px;row-gap:0;position:relative}
.flow__note{margin:0;grid-row:1;grid-column:var(--c);font-size:13px;color:var(--soil);line-height:1.6;padding:0 2px 10px;align-self:end}
.flow__step{grid-row:2;grid-column:var(--c);position:relative;border-top:1px solid var(--soil);padding:18px 0 22px}
.flow__step:not(:last-of-type)::after{content:"";position:absolute;top:44px;right:-36px;width:28px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='10' viewBox='0 0 28 10'%3E%3Cpath d='M1 5h25M21 1l5 4-5 4' fill='none' stroke='%236B4F36' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.flow__ic{width:60px;height:60px;display:block;margin-bottom:10px}
.flow__step h3{font-size:21px;margin-bottom:6px}
.flow__step p{font-size:15px;line-height:1.7}
.flow__band{margin:0;grid-row:3;font-size:14px;letter-spacing:.06em;padding:9px 14px;text-align:center;transform-origin:left center;transition:transform .7s var(--ease) .5s}
.flow__band--free{grid-column:1 / 4;background:var(--moss);color:var(--white)}
.flow__band--pay{grid-column:4;background:var(--soil);color:var(--white)}
html.motion .flow__step{transition:opacity .5s ease,transform .5s var(--ease);transition-delay:calc(var(--c) * .14s)}
html.motion .flow:not(.is-in) .flow__step{opacity:0;transform:translateY(10px)}
html.motion .flow:not(.is-in) .flow__band{transform:scaleX(0)}

/* Z-1 庭木の手入れの1年 */
.cal{display:grid;grid-template-columns:minmax(150px,1.7fr) repeat(12,minmax(0,1fr));grid-template-rows:44px repeat(6,54px) auto;position:relative}
.cal__col{grid-column:var(--a);grid-row:1 / 8;border-left:1px solid #E7E0D8}
.cal__col--last{border-right:1px solid #E7E0D8}
.cal__m{grid-column:var(--a);grid-row:1;display:flex;align-items:center;justify-content:center;font-family:var(--f-h);font-size:20px;border-bottom:1px solid var(--soil);position:relative;z-index:1}
.cal__m.is-now{background:var(--moss);color:var(--white);border-bottom-color:var(--moss)}
.cal__k{grid-column:1;grid-row:var(--r);display:flex;flex-direction:column;justify-content:center;font-size:14px;line-height:1.35;padding-right:12px;border-bottom:1px solid #E7E0D8}
.cal__k small{font-size:11.5px;color:#5B5348}
.cal__k--head{grid-row:1;border-bottom:1px solid var(--soil)}
.cal__line{grid-column:1 / -1;grid-row:var(--r);border-bottom:1px solid #E7E0D8}
.cal__b{grid-column:var(--a) / var(--b);grid-row:var(--r);margin:11px 3px;background:var(--moss);color:var(--white);font-size:13px;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;letter-spacing:.04em;position:relative;z-index:1;transform-origin:left center;transition:transform .6s var(--ease);transition-delay:calc(var(--d,0) * 70ms)}
.cal__b--l{background:var(--moss30);color:var(--ink)}
.cal__b--low{margin-top:24px;margin-bottom:6px}
.cal__ar{font-size:12px;line-height:1}
.cal__ar--sp{display:none}
.cal__dot{grid-column:var(--a);grid-row:var(--r);align-self:start;justify-self:center;margin-top:3px;display:flex;align-items:center;gap:4px;font-size:11px;line-height:1.3;position:relative;z-index:2}
.cal__dot i{width:9px;height:9px;border-radius:50%;background:var(--berry);flex:none}
.cal__note{grid-column:8 / 10;grid-row:8;font-size:12px;color:var(--soil);text-align:center;padding-top:8px;line-height:1.5}
html.motion .cal:not(.is-in) .cal__b{transform:scaleX(0)}

/* 手入れの暦の月 */
.months{border-top:1px solid var(--soil)}
.month{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,300px);gap:8px 40px;padding:26px 0;border-bottom:1px solid var(--soil-l);align-items:start}
.month--nophoto{grid-template-columns:120px minmax(0,1fr)}
.month__no{margin:0;font-family:var(--f-h);font-size:64px;line-height:1;color:var(--soil);letter-spacing:0}
.month__no small{font-size:20px;margin-left:2px}
.month.is-now .month__no{color:var(--moss)}
.month h3{font-size:22px;margin:4px 0 8px}
.month .ph{margin-top:4px}

/* 見積りの紙（計算の例） */
.sheet{background:var(--white);border:1px solid var(--soil);padding:clamp(22px,4vw,44px);max-width:720px;box-shadow:6px 6px 0 var(--moss30)}
.sheet__t{font-family:var(--f-h);font-size:clamp(18px,1rem + .5vw,22px);margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--soil)}
.sheet table{width:100%;border-collapse:collapse}
.sheet th,.sheet td{padding:11px 4px;border-bottom:1px solid var(--soil-l);text-align:left;font-weight:400;vertical-align:baseline}
.sheet td{text-align:right;white-space:nowrap;font-family:var(--f-h);font-size:1.25em}
.sheet tr.sum th,.sheet tr.sum td{border-bottom:1px solid var(--soil)}
.sheet tr.pay th,.sheet tr.pay td{border-bottom:3px double var(--soil);padding-top:16px}
.sheet tr.pay td{font-size:1.6em;color:var(--moss-d)}
.sheet tr.pay td small{font-family:var(--f-b);font-size:.5em;color:var(--ink);margin-left:4px}

/* LINE（文字のボタン） */
.lineq{margin-top:28px;padding:22px 0 0;border-top:1px solid var(--soil-l);max-width:44em}
.lineq .btn{text-align:left;justify-content:flex-start;padding:14px 20px;line-height:1.6}
.lineq p{margin-top:12px}

/* 枠の四角（クーリング・オフ） */
.box{border:1px solid var(--soil);padding:clamp(20px,3.4vw,36px);background:var(--white);max-width:820px}
.bigtel{display:inline-block;font-family:var(--f-h);font-size:clamp(34px,1.5rem + 2.4vw,54px);color:var(--ink);text-decoration:none;letter-spacing:.06em;line-height:1.2;margin:18px 0 8px}
.checks{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--soil);max-width:44em}
.checks li{padding:13px 4px;border-bottom:1px solid var(--soil-l)}

/* 庭づくりの工事（2列×2段） */
.works{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px) clamp(24px,4vw,56px)}
.work{border-top:1px solid var(--soil);padding-top:18px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:22px;align-items:start}
.work__pic{margin:0}
.work__pic img{aspect-ratio:4/3;object-fit:cover;width:100%}
.work__pic svg{display:block;width:100%;height:auto;background:var(--tint)}
.work h3{font-size:21px;margin-bottom:8px}
.work p{font-size:15px;line-height:1.8}

/* 地図 */
.map{max-width:620px;margin:32px 0 0}

/* ページの頭・パンくず */
.crumb{max-width:var(--wrap);margin:0 auto;padding:14px 24px 0;font-size:13px;color:var(--soil)}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumb li+li::before{content:"／";margin-right:6px;color:var(--soil-l)}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.phead{padding-top:clamp(28px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.phead--band{padding-top:0}
.phead__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px 64px;align-items:end}
.hero2{margin:0 0 clamp(36px,4vw,56px)}
.hero2 img{width:100%;aspect-ratio:21/8;object-fit:cover}
html.motion .hero2 img{animation:zoom 12s ease-out both}
.hero2{overflow:hidden}
.pend{padding-top:8px;padding-bottom:clamp(56px,7vw,96px)}
@media (min-width:768px){.z4 .only-pc{display:block;max-width:980px;margin:0 auto}}

/* 見えたら出す */
html.motion .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s var(--ease)}
html.motion .rv.is-in{opacity:1;transform:none}

/* ---------- フッター ---------- */
.ft{padding:0 0 32px;margin-top:0}
.ft__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px 64px;padding-top:44px;padding-bottom:28px}
.ft .logo{height:54px}
.ft__info{font-size:14px;line-height:1.9;margin-top:18px}
.ft__nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 32px}
.ft__nav a{display:block;padding:8px 0;font-size:14px;text-decoration:none;border-bottom:1px solid #EEE8E1}
.ft__nav a:hover{color:var(--moss)}
.ft__copy{font-size:12px;color:var(--soil)}

/* ---------- 幅ごと ---------- */
@media (max-width:1180px){
  .gnav ul{gap:18px}
  .gnav li a{font-size:14px}
}
@media (max-width:1080px){
  html.js .menu{display:inline-flex;margin-left:auto;align-items:center;gap:8px;background:none;border:1px solid var(--soil-l);border-radius:2px;min-height:44px;padding:0 12px;font:inherit;font-size:12px;letter-spacing:.12em;color:var(--ink);cursor:pointer}
  .menu__bars{width:18px;height:10px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;position:relative}
  .menu__bars::after{content:"";position:absolute;left:0;right:0;top:3.5px;border-top:1px solid currentColor}
  html.js .gnav{display:none;position:fixed;left:0;right:0;top:73px;bottom:0;background:var(--white);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 32px;overflow-y:auto;border-top:1px solid var(--soil-l)}
  html.js body.is-menu .gnav{display:flex}
  html.js .gnav ul{flex-direction:column;gap:0}
  html.js .gnav li a{font-size:17px;padding:16px 2px;border-bottom:1px solid #EEE8E1}
  html.js .gnav li a::after{left:2px;bottom:10px;transform:none;width:0}
  html.js .gnav li a[aria-current="page"]{color:var(--moss)}
  html.js .gnav__end{flex-direction:column;align-items:flex-start;gap:14px;margin-top:24px}
  html.js .gnav__end .tel{font-size:22px}
  html:not(.js) .hd__in{flex-wrap:wrap}
  html:not(.js) .gnav{flex-wrap:wrap;width:100%}
  html:not(.js) .gnav ul{flex-wrap:wrap}
}
@media (max-width:1023px){
  .band__in{padding:0;gap:0;flex-direction:column}
  .band__scroll{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:0 0 6px;scrollbar-width:thin}
  .band ol{grid-template-columns:repeat(12,76px);width:max-content;padding:0 16px}
  .band li{scroll-snap-align:start;scroll-margin-left:16px}
  .band__more{align-self:flex-end;padding:8px 16px 0}
}
@media (max-width:899px){
  .split,.split--64,.split--46,.split--75,.split--74{grid-template-columns:1fr}
  .split--rev > :first-child{order:0}
  .qa > div{grid-template-columns:1fr}
  .flow{grid-template-columns:30px minmax(0,1fr);column-gap:18px}
  .flow__note{grid-column:2;grid-row:var(--mr);padding:8px 0 4px}
  .flow__step{grid-column:2;grid-row:var(--mr);padding:16px 0 30px;display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 14px}
  .flow__ic{width:52px;height:52px;grid-row:1 / 3}
  .flow__step:not(:last-of-type)::after{top:auto;bottom:6px;right:auto;left:16px;transform:rotate(90deg)}
  .flow__band{grid-column:1;writing-mode:vertical-rl;padding:14px 6px;text-align:start;transform-origin:center top;font-size:13px;letter-spacing:.12em}
  .flow__band--free{grid-row:1 / 6}
  .flow__band--pay{grid-row:6;grid-column:1}
  html.motion .flow:not(.is-in) .flow__band{transform:scaleY(0)}

  .cal{grid-template-columns:36px repeat(6,minmax(0,1fr)) 20px;grid-template-rows:auto repeat(12,78px)}
  .cal__col{grid-column:1 / 8;grid-row:var(--a);border-left:0;border-top:1px solid #E7E0D8}
  .cal__col--last{border-right:0;border-bottom:1px solid #E7E0D8}
  .cal__m{grid-row:var(--a);grid-column:1;border-top:0;border-bottom:0;border-right:1px solid var(--soil);font-size:19px}
  .cal__m.is-now{border-right-color:var(--moss)}
  .cal__k{grid-row:1;grid-column:var(--r);display:block;writing-mode:vertical-rl;height:156px;font-size:12px;line-height:1.3;letter-spacing:.04em;padding:6px 0 8px;margin:0 auto;border-bottom:0;text-align:start}
  .cal__k small{display:inline;font-size:9.5px;letter-spacing:0}
  .cal__k--head{border-bottom:0}
  .cal__k--head{grid-column:1}
  .cal__line{grid-row:1 / -1;grid-column:var(--r);border-bottom:0;border-right:1px solid #E7E0D8}
  .cal__b{grid-row:var(--a) / var(--b);grid-column:var(--r);margin:3px 8px;writing-mode:vertical-rl;font-size:10.5px;letter-spacing:0;line-height:1.2;transform-origin:center top}
  .cal__b--low{margin:3px 8px}
  .cal__dot{grid-row:var(--a);grid-column:var(--r);flex-direction:column;gap:1px;align-self:center;margin:0;background:var(--white);padding:3px 1px;font-size:10px}
  .cal__note{grid-column:8;grid-row:8 / 10;writing-mode:vertical-rl;padding:8px 0 0;text-align:start;font-size:11px;white-space:nowrap;align-self:start;justify-self:center}
  html.motion .cal:not(.is-in) .cal__b{transform:scaleY(0)}

  .month,.month--nophoto{grid-template-columns:72px minmax(0,1fr);gap:4px 18px;padding:24px 0}
  .month .ph{grid-column:2}
  .month__no{font-size:48px}
  .works{grid-template-columns:1fr}
  .ft__in{grid-template-columns:1fr}
  .phead__grid{grid-template-columns:1fr}
  .hero2 img{aspect-ratio:16/9}
}
@media (max-width:767px){
  .only-pc{display:none}
  .only-sp{display:block}
  .hd__in{min-height:64px;padding:8px 16px;gap:10px}
  .logo{height:42px}
  html.js .gnav{top:65px}
  .wrap{padding-left:18px;padding-right:18px}
  .kaki{padding:0 18px}
  .crumb{padding:12px 18px 0}
  .hero{height:78vh;height:78svh;min-height:460px}
  .hero__copy{left:18px;right:18px}
  .rows > div{flex-wrap:wrap}
  .work{grid-template-columns:1fr}
  .tbl th,.tbl td{padding:12px 6px}
  .tbl--info th{width:6.2em}
  .tbl--wrap tbody th{white-space:normal}
  .tbl--3 thead{display:none}
  .tbl--3 tr{display:grid;grid-template-columns:auto 1fr;border-bottom:1px solid var(--soil-l)}
  .tbl--3 th,.tbl--3 td{border-bottom:0}
  .tbl--3 td.note{grid-column:1 / -1;padding-top:0;font-size:14px;color:#4A443A}
  .sheet th{font-size:14px}
  .sheet td{font-size:1.1em}
  .ft__nav ul{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  .hd,.menu,.band__more{position:static}
  .hero{height:auto;max-height:none}
}