/* ==========================================================================
   CHIRASAKU 下層ページ — sub.css（style.css＝トップの部品の上に重ねる）
   ========================================================================== */
.sub .sec--tight{padding:clamp(48px,6vw,88px) 0}
.sub .sec--paper{background:var(--c-bg-2)}

/* --- ページの見出し --- */
.phero{background:var(--c-bg-2);padding:clamp(28px,4vw,48px) 0 clamp(36px,5vw,64px);position:relative}
.phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;border-bottom:1.5px dashed #CFCEC8}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;font-size:12px;color:var(--c-sub);margin-bottom:clamp(20px,3vw,32px)}
.crumbs li{display:flex;align-items:center;min-width:0}
.crumbs li+li::before{content:"/";margin:0 8px;color:#B5B4AE}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs li[aria-current]{max-width:28em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phero__ttl{font-size:clamp(24px,3.6vw,44px);font-weight:800;line-height:1.4;max-width:30em}
.phero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--f-en);font-weight:700;font-size:13px;color:var(--c-sub)}
.phero__meta .tag{margin:0;font-family:var(--f-body);background:#fff;padding:3px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--c-line)}
.phero__lead{margin-top:14px;color:var(--c-sub);max-width:46em}

/* --- 本文 --- */
.prose{max-width:860px;margin-inline:auto;font-size:16px;line-height:2;overflow-wrap:anywhere}
.prose > *+*{margin-top:1.1em}
.prose h2{font-size:clamp(21px,2.4vw,28px);font-weight:800;line-height:1.5;margin-top:2.4em;padding-top:22px;position:relative}
.prose h2::before{content:"";position:absolute;left:0;top:0;width:56px;height:4px;background:var(--c-ink);box-shadow:4px 3px 0 var(--c-mag),-2px 2px 0 var(--c-cyan)}
.prose h3{font-size:clamp(18px,2vw,21px);font-weight:800;line-height:1.55;margin-top:2em;padding-left:16px;border-left:4px solid var(--c-ink)}
.prose h4,.prose h5{font-size:17px;font-weight:800;margin-top:1.6em}
.prose > h2:first-child,.prose > h3:first-child{margin-top:0}
.prose .hl{font-weight:800;font-size:18px;line-height:1.7}
.prose a:not(.btn):not(.more):not(.pcard2){color:var(--c-cyan-t);text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.4em}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li+li{margin-top:.3em}
.prose img{border-radius:8px;height:auto}
.prose strong,.prose b{font-weight:800}
.prose blockquote{border-left:4px solid var(--c-line);padding:4px 0 4px 18px;color:var(--c-sub)}
.prose hr{border:0;border-top:1.5px dashed #CFCEC8;margin:2.4em 0}
.fig{margin-top:1.4em}
.fig img{margin-inline:auto}
.fig figcaption{font-size:13px;color:var(--c-sub);text-align:center;margin-top:6px}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:1.4em}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.7;min-width:520px}
.prose th,.prose td{border:1px solid var(--c-line);padding:10px 12px;text-align:left;vertical-align:top}
.prose thead th,.prose tr:first-child th{background:var(--c-bg-2);font-weight:800}
.prose td:not(:first-child){font-feature-settings:"tnum"}
.embed{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6em}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
/* 料金の行 */
.ptbl{width:100%;border-collapse:collapse;min-width:0!important;font-size:15px}
.ptbl th,.ptbl td{border:0!important;border-bottom:1px solid var(--c-line)!important;padding:14px 4px!important;background:none!important}
.ptbl th{font-weight:700;width:58%}
.ptbl td{text-align:right!important;white-space:nowrap}
.ptbl td b{font-family:var(--f-en);font-weight:800;font-size:20px}
.ptbl td small{font-size:12px;margin-left:2px}
.ptbl td span{display:block;font-size:12px;color:var(--c-sub)}
/* カード（CTA・画像ボックス） */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:1.6em}
.pcard2{display:flex;flex-direction:column;background:var(--c-bg-2);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
a.pcard2:hover{transform:translateY(-4px);box-shadow:0 20px 36px -24px rgba(26,26,31,.45)}
.pcard2 figure{aspect-ratio:16/10;overflow:hidden;background:var(--c-bg-3)}
.pcard2 figure img{width:100%;height:100%;object-fit:cover;border-radius:0}
.pcard2__b{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard2 h3{font-size:17px;font-weight:800;border:0;padding:0;margin:0;line-height:1.5}
.pcard2__d{font-size:14px;color:var(--c-sub);line-height:1.8}
.pcard2__d p{margin:0}
.pcard2 .more{margin-top:auto;padding-top:6px;align-self:flex-start;font-size:14px}
/* アコーディオン */
.acc{display:grid;gap:10px;margin-top:1.2em}
.acc details{background:var(--c-bg-2);border-radius:16px}
.acc summary{list-style:none;cursor:pointer;padding:18px 52px 18px 54px;font-weight:800;position:relative;line-height:1.6}
.acc summary::-webkit-details-marker{display:none}
.acc summary::before{content:"Q";position:absolute;left:18px;top:16px;width:26px;height:26px;border-radius:50%;background:var(--c-ink);color:#fff;font-family:var(--f-en);font-size:13px;display:grid;place-items:center}
.acc summary::after{content:"";position:absolute;right:22px;top:50%;width:12px;height:12px;margin-top:-8px;border-right:2px solid var(--c-ink);border-bottom:2px solid var(--c-ink);transform:rotate(45deg);transition:transform .3s}
.acc details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.acc__a{padding:0 22px 20px 54px;font-size:15px;line-height:1.95}
.acc__a > *+*{margin-top:.8em}
.faqs h2:first-child{margin-top:0}
.qlist{list-style:none!important;padding:0!important}
.qlist li{border-bottom:1px solid var(--c-line);padding:12px 0}
.vq2{margin:1.2em 0 0;background:var(--c-bg-2);border-radius:20px;padding:24px}

/* --- 一覧（事例・ブログ） --- */
.list__n{font-size:13px;color:var(--c-sub);margin:20px 0 18px}
.list__n b{font-family:var(--f-en);font-size:18px;color:var(--c-ink);margin-right:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--c-line);font-weight:700;font-size:14px;text-decoration:none;transition:background .3s,color .3s,box-shadow .3s}
.chips a small{font-family:var(--f-en);font-size:11px;color:var(--c-sub)}
.chips a:hover{box-shadow:inset 0 0 0 1.5px var(--c-ink)}
.chips a.is-on{background:var(--c-ink);color:#fff;box-shadow:none}
.chips a.is-on small{color:#C9C9CF}
.wks{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:32px 20px}
@media(max-width:599px){.wks{grid-template-columns:1fr 1fr;gap:22px 12px}}
.wk{display:block;text-decoration:none;color:inherit}
.wk__p{aspect-ratio:4/5;background:var(--c-bg-2);border-radius:16px;display:grid;place-items:center;padding:14px;overflow:hidden;transform-style:preserve-3d}
.wk__p img{max-height:100%;width:auto;max-width:100%;object-fit:contain;box-shadow:var(--shadow-paper);transition:transform .6s var(--ease)}
.wk:hover .wk__p img{transform:translateY(-4px) rotate(-1deg)}
.wk__b{padding:12px 2px 0}
.wk__m{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--c-sub);font-family:var(--f-en);font-weight:700}
.wk__m span{font-family:var(--f-body)}
.wk h3{font-size:14.5px;font-weight:700;line-height:1.6;margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wk:hover h3{text-decoration:underline;text-underline-offset:3px}
.noimg{display:block;width:100%;height:100%;background:repeating-linear-gradient(45deg,#ECEBE6 0 8px,#F3F3F0 8px 16px);border-radius:8px}
.posts{display:grid;gap:28px 20px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.posts .post figure{aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:var(--c-bg-2)}
.posts .post img{width:100%;height:100%;object-fit:cover}
.posts .post h3{font-size:16px;font-weight:700;line-height:1.6;margin-top:4px}
.post__meta span{font-family:var(--f-body);margin-left:10px}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:44px}
.pager a,.pager span{min-width:44px;height:44px;padding:0 12px;border-radius:999px;display:grid;place-items:center;font-family:var(--f-en);font-weight:800;text-decoration:none;box-shadow:inset 0 0 0 1px var(--c-line)}
.pager a:hover{box-shadow:inset 0 0 0 1.5px var(--c-ink)}
.pager span[aria-current]{background:var(--c-ink);color:#fff;box-shadow:none}
.pager .pager__p{font-family:var(--f-body);font-size:14px}
.pager .pager__gap{box-shadow:none;min-width:20px;padding:0}
.sub-h{font-size:clamp(20px,2.4vw,26px);font-weight:800;margin-bottom:24px}
.sub .sec--paper .wk__p{background:#fff}

/* --- 事例のページ：作品（紙）＋文章 --- */
.work{display:grid;gap:36px}
@media(min-width:980px){.work{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}.board{position:sticky;top:calc(var(--hd) + 24px)}}
.board{background:var(--c-bg-2);border-radius:var(--radius);padding:clamp(20px,3vw,36px);display:grid;gap:22px;justify-items:center}
.board__p{margin:0;max-width:520px}
.board__p img{box-shadow:0 1px 1px rgba(26,26,31,.06),0 18px 36px -16px rgba(26,26,31,.4);background:#fff;border-radius:0}
.work__txt{max-width:none;margin:0}
.work__txt > :first-child{margin-top:0}
/* ブログ */
.article{max-width:860px}
.eye{margin:0 0 36px;border-radius:20px;overflow:hidden}
.eye img{width:100%;height:auto}
.posts--3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

/* --- フォーム --- */
.cform{margin-top:2em;background:#fff;border-radius:var(--radius);box-shadow:0 0 0 1.5px var(--c-line);padding:clamp(20px,4vw,44px)}
.cform__rows{display:grid}
.cform__row{display:grid;gap:8px;padding:18px 0;border-bottom:1px solid var(--c-line)}
.cform__row:first-child{padding-top:0}
@media(min-width:760px){.cform__row{grid-template-columns:15em 1fr;gap:24px;align-items:start}}
.cform__lb{font-weight:800;font-size:15px;line-height:1.6;padding-top:10px;margin:0}
.req,.opt{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;margin-left:6px;vertical-align:2px}
.req{background:var(--c-accent);color:#fff}
.opt{background:var(--c-bg-2);color:var(--c-sub)}
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform select,.cform textarea{width:100%;font-size:16px;padding:12px 14px;border-radius:10px;border:1.5px solid var(--c-line);background:#FCFCFB;transition:border-color .2s,box-shadow .2s}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--c-ink);box-shadow:0 0 0 3px rgba(0,160,233,.18)}
.cform input[type=file]{font-size:14px;max-width:100%}
.cform__opts{display:flex;flex-wrap:wrap;gap:8px}
.chk{position:relative;display:inline-flex}
.chk input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chk span{display:inline-block;padding:9px 16px;border-radius:999px;background:var(--c-bg-2);font-size:14px;font-weight:700;box-shadow:inset 0 0 0 1px var(--c-line);transition:background .2s,color .2s}
.chk input:checked + span{background:var(--c-ink);color:#fff}
.chk input:focus-visible + span{outline:2px solid var(--c-accent);outline-offset:2px}
.cform__note{font-size:12.5px;color:var(--c-sub);margin-top:6px!important;line-height:1.7}
.cform__row.is-err input,.cform__row.is-err select,.cform__row.is-err textarea{border-color:var(--c-accent)}
.cform__row.is-err .cform__lb{color:var(--c-accent)}
.cform__agree{margin-top:20px;font-size:14px}
.cform__err{margin-top:12px;color:var(--c-accent);font-weight:700;font-size:14px}
.cform__send{margin-top:20px;text-align:center}
.cform__send .btn{width:min(100%,420px)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .btn:disabled{opacity:.6;pointer-events:none}

/* 下層の相談 */
.cta--sub{padding:clamp(56px,7vw,96px) 0}
@media(max-width:599px){.prose{font-size:15px}.prose table{min-width:480px}}
.eye img{max-height:520px;object-fit:cover}
.prose tr > :first-child{min-width:7.5em}
.vq2 figcaption{font-weight:800;margin-bottom:8px}.vq2 blockquote{margin:0}
.formula{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:1.6em!important}
.formula span{background:var(--c-bg-2);border-radius:14px;padding:14px 20px;font-weight:800}
.formula span:last-child{background:var(--c-ink);color:#fff}
.formula i{font-style:normal;font-weight:800;font-size:22px}

/* --- 一覧ページ：開いた直後に作例が見えるよう、見出しの帯・絞り込み・案内を詰める --- */
.is-list .phero{padding:18px 0 22px}
.is-list .crumbs ol{margin-bottom:10px}
.is-list .phero .eyebrow{margin-bottom:6px}
.is-list .phero__ttl{font-size:clamp(22px,2.6vw,32px)}
.is-list .sec.list{padding-top:22px}
.is-list .chips{gap:6px}
.is-list .chips a{padding:6px 13px;font-size:13px}
.is-list .list__n{margin:12px 0 14px}
@media(max-width:599px){
  .is-list .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(var(--pad)*-1);padding:2px var(--pad)}
  .is-list .chips::-webkit-scrollbar{display:none}
  .is-list .chips a{flex:none}
}
.list__lead{margin-top:14px}
.leadc{display:flex;align-items:center;gap:18px;background:var(--c-bg-2);border-radius:16px;padding:12px;text-decoration:none;color:inherit;transition:box-shadow .3s}
.leadc:hover{box-shadow:inset 0 0 0 1.5px var(--c-ink)}
.leadc img{width:240px;height:96px;object-fit:cover;border-radius:10px;flex:none}
.leadc__b{display:flex;flex-direction:column;gap:4px;min-width:0}
.leadc__b b{font-size:15px;font-weight:800;line-height:1.5}
.leadc__d{font-size:13px;color:var(--c-sub);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.leadc .more{font-size:13px;align-self:flex-start}
@media(max-width:599px){.leadc{gap:12px;padding:10px}.leadc img{width:84px;height:84px}.leadc__d{display:none}.leadc__b b{font-size:14px}}