@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap');

:root{--theme:#7be0a6;--blue:#493dcc;--ink:#111;--paper:#fff;--grey:#f2f2f2;--header:64px;color:var(--ink);background:var(--paper);font-family:'Noto Sans JP',sans-serif;font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:88px}
*{box-sizing:border-box}
body{margin:0;line-height:1.85;overflow-x:clip}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit}
h1,h2,h3,h4,p,figure{margin:0}
h2,h3,h4{text-wrap:balance}
.keep-word{display:inline-block;white-space:nowrap}
ul,ol{margin:0;padding:0;list-style:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:6px}
a:hover{text-decoration:none}
[hidden]{display:none!important}
.skip-link{position:fixed;left:12px;top:-80px;background:#fff;padding:12px;z-index:200}
.skip-link:focus{top:8px}
.container{width:90%;max-width:1200px;margin-inline:auto}
.site-header{position:fixed;inset:0 0 auto;z-index:100;height:var(--header);background:#fff;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.brand{display:flex;align-items:center;gap:10px;line-height:1.25}
.brand img{width:42px;height:42px;object-fit:contain}
.brand strong{display:block;font-weight:900;font-size:21px;letter-spacing:.04em}
.brand small{display:block;font-size:10px;letter-spacing:.06em;margin-top:4px;font-weight:700}
.menu-toggle{width:48px;height:48px;border:0;background:none;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center}
.menu-toggle span{position:absolute;display:block;width:23px;height:2px;background:var(--blue);transition:transform .2s}
.menu-toggle span:first-child{transform:translateY(-5px)}
.menu-toggle span:last-child{transform:translateY(5px)}
.menu-toggle[aria-expanded=true] span:first-child{transform:rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:rotate(-45deg)}
.site-menu{position:fixed;right:0;top:var(--header);width:min(460px,100%);height:calc(100dvh - var(--header));padding:28px 40px 48px;background:var(--theme);overflow:auto;overscroll-behavior:contain;box-shadow:-12px 15px 30px #0000000d}
.site-menu a{display:block;border-bottom:1px solid #1113;padding:18px 0;font-weight:700;font-size:19px}
.site-menu a:hover{color:var(--blue)}
.theme-pattern{background-color:var(--theme);position:relative;isolation:isolate;overflow:hidden}
.theme-pattern::before,.theme-pattern::after{content:'';position:absolute;z-index:-1;pointer-events:none;opacity:.8;background-image:radial-gradient(#fff 1.7px,transparent 2px);background-size:6px 6px;border-radius:35% 60% 40% 50%;transform:rotate(28deg);width:540px;height:470px}
.theme-pattern::before{right:22%;top:-80px}
.theme-pattern::after{left:-110px;bottom:-170px;width:460px;height:460px}
.hero{margin-top:var(--header);min-height:660px;height:calc(100svh - var(--header));max-height:850px;display:flex;align-items:center}
.hero-copy{position:relative;width:64%;padding:56px 0 60px 6%;z-index:2;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.hero-kicker{font-size:16px;font-weight:800;letter-spacing:.12em;margin-bottom:28px}
.hero h1{font-size:clamp(34px,3.55vw,56px);font-weight:900;line-height:1.65;letter-spacing:.035em;border-left:3px solid #fff;padding:8px 0 8px 26px}
.hero h1>span{display:block;white-space:nowrap;animation:copy-appear .8s both}
.hero h1>span:nth-child(2){animation-delay:.15s}
.hero h1>span:nth-child(3){animation-delay:.3s}
@keyframes copy-appear{from{opacity:0;filter:blur(7px);transform:translateY(8px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 76%,#fff 76%,#fff 94%,transparent 94%);font-size:1.16em}
.hero-photo{position:absolute;right:-6%;top:5%;width:45%;height:81%;border-radius:58px;transform:skewX(-17deg);overflow:hidden;background:#9caeba}
.hero-photo img{width:125%;max-width:none;height:100%;object-fit:cover;object-position:52% center;transform:skewX(17deg) scale(1.13);margin-left:-15%}
.hero-note{margin-top:24px;display:flex;align-items:center;gap:16px;font-size:13px;font-weight:700}
.hero-note .mascot{width:116px;flex-shrink:0;border-radius:50%;border:3px dashed white;background:#fff}
.hero-note p>span{font-size:24px;font-weight:900;margin-left:6px}
.mascot{display:block;position:relative;aspect-ratio:1;width:180px;overflow:hidden;isolation:isolate;flex-shrink:0}
.mascot img{position:absolute;max-width:none;width:300%;height:200%;object-fit:fill;left:0;top:0}
.pose-1 img,.pose-4 img{left:-100%}
.pose-2 img,.pose-5 img{left:-200%}
.pose-3 img,.pose-4 img,.pose-5 img{top:-100%}
.pose-4{clip-path:inset(0 4%)}
.section{padding:90px 0 100px}
.grid-paper{background-color:#fff;background-image:linear-gradient(#e9e9e959 1px,transparent 1px),linear-gradient(90deg,#e9e9e959 1px,transparent 1px);background-size:20px 20px}
.section-heading{text-align:center;margin-bottom:50px}
.section-label{font-size:16px;font-weight:800;letter-spacing:.09em;margin-bottom:12px}
.section-heading h2{font-size:clamp(28px,3vw,40px);font-weight:900;line-height:1.65;letter-spacing:.045em}
.problem-heading{text-align:center;margin-bottom:64px}
.problem-heading>.mascot{width:130px;margin:0 auto 6px}
.problem-heading h2{font-weight:900;line-height:1.75;letter-spacing:.09em}
.problem-heading h2 span{display:block;font-size:26px}
.problem-heading h2 strong{display:block;font-size:42px}
.problem-heading>p{font-size:15px;margin-top:22px;line-height:2}
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:62px 50px}
.case-grid li{text-align:center}
.case-number{display:flex;align-items:center;justify-content:center;width:58px;height:58px;background:var(--theme);border-radius:47% 53% 51% 49%;margin:0 auto 20px;font-size:24px;font-weight:800}
.case-grid h3{font-size:22px;line-height:1.6;font-weight:800}
.case-grid .mascot{width:210px;max-width:100%;margin:12px auto}
.case-grid p{font-size:15px;line-height:1.8;text-align:left;max-width:300px;margin:auto}
.services .section-heading{margin-bottom:18px}
.section-intro{text-align:center;font-size:22px;font-weight:800;line-height:1.9;margin:0 0 52px}
.blue{color:var(--blue)}
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.service-card{background:#fff;border-radius:30px;padding:28px 44px 38px;box-shadow:0 2px 9px #00000018;text-align:center}
.service-card .mascot{width:182px;margin:auto}
.service-card h3{font-size:24px;font-weight:900;line-height:1.6;margin:6px 0 18px}
.service-card p{font-size:16px;line-height:2;text-align:left}
.service-links p{text-align:center}
.service-links>div{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:26px}
.service-links a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:5px}
.price .section-heading{margin-bottom:86px}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.price-card{position:relative;background:#d1d3d3;border-radius:24px;padding:62px 26px 30px;text-align:center;display:flex;align-items:center;flex-direction:column}
.price-card h3{position:absolute;top:-32px;left:50%;transform:translateX(-50%);background:#111;color:#fff;font-size:21px;line-height:1.5;padding:20px 28px;border-radius:15px;min-width:250px;max-width:95%;white-space:nowrap}
.price-caption{font-size:19px;line-height:1.7;font-weight:800}
.price-value{min-height:76px;font-weight:800;color:var(--blue);display:flex;align-items:center;gap:3px;font-size:23px;margin:8px 0 22px}
.price-value>span{font-size:48px;line-height:1}
.price-value>strong{margin-left:8px;font-size:30px}
.price-value.estimate{font-size:29px}
.price-detail{background:white;border-radius:12px;overflow:hidden;text-align:left;margin-bottom:26px;width:100%;flex:1}
.price-detail h4{background:var(--theme);font-size:17px;text-align:center;padding:8px 12px;font-weight:800}
.price-detail p{padding:18px 22px;font-size:15px;line-height:1.95}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:68px;background:#111;color:#fff;border-radius:18px;padding:18px 32px;font-weight:900;font-size:20px;line-height:1.5;transition:background .2s,transform .2s;text-align:center}
.button:hover{background:var(--blue);transform:translateY(-2px)}
.text-link{display:inline-block;color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:5px}
.support-note{font-size:14px;line-height:1.95;margin-top:32px}
.contact-band{padding:65px 0}
.band-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}
.band-inner h2{font-size:clamp(22px,2.3vw,30px);font-weight:900;line-height:1.7}
.band-inner p{font-size:14px;margin-top:20px}
.band-inner>div:last-child{flex-shrink:0;text-align:center}
.mail-link{display:block;text-decoration:underline;text-underline-offset:5px;font-size:14px;font-weight:500;margin-top:18px}
.step-list{display:grid;gap:38px}
.step-list>li{display:grid;grid-template-columns:112px 1fr;gap:32px;position:relative}
.step-list>li:not(:last-child)::after{content:'';position:absolute;border-left:3px dotted #111;top:110px;bottom:-18px;left:55px}
.step-number{height:96px;background:#111;color:#fff;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:24px;font-weight:900}
.step-number small{font-size:11px;color:var(--theme);margin-bottom:4px}
.step-content h3{font-size:25px;font-weight:800;margin:3px 0 20px;line-height:1.5}
.step-panel{background:var(--theme);border-radius:30px;display:flex;gap:28px;align-items:center;padding:20px 36px;min-height:200px}
.step-panel .mascot{width:156px}
.step-panel p{font-size:17px;font-weight:600;line-height:2}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.about-image img{width:100%;border-radius:32px}
.about-inner .lead{font-size:17px;line-height:2.1;font-weight:500}
.about-inner .text-link{margin-top:28px}
.faq-list{border-top:3px solid #111}
.faq-item{border-bottom:3px solid #111;padding:26px 20px}
.faq-item h3,.faq-item>p{display:flex;align-items:flex-start;gap:22px;font-size:17px;line-height:1.9}
.faq-item h3{font-weight:800;margin-bottom:10px}
.faq-item h3>span,.faq-item p>span:first-child{font-size:38px;line-height:1.3;font-weight:500;flex:0 0 42px}
.faq-item h3>span{color:#d63834}
.faq-item p>span:first-child{color:var(--blue)}
.faq-item p>span:last-child{padding-top:5px}
.contact{background:#f2f2f2}
.contact .section-heading{max-width:820px;margin:0 auto 24px}
.contact-intro{max-width:650px;margin:auto;text-align:center;font-size:16px;line-height:2}
.contact-box{margin-top:50px;background:#fff;border-radius:30px;padding:44px;display:grid;grid-template-columns:170px 1fr 145px;align-items:center;gap:32px;text-align:center}
.contact-character .mascot{width:170px}
.contact-free{font-size:20px;font-weight:800;margin-bottom:22px}
.line-button{background:#06c755;color:#082b1c;font-size:22px;width:100%;max-width:390px}
.line-button:hover{background:#05b34c}
.small-note{font-size:12px;line-height:1.9;margin-top:20px}
.qr img{margin:auto}
.qr figcaption{font-size:10px;white-space:nowrap;margin-top:10px}
.site-footer{background:var(--theme);padding:62px 0 140px}
.footer-inner{display:flex;justify-content:space-between;gap:50px}
.footer-brand{font-size:27px;font-weight:900;letter-spacing:.05em}
.footer-inner p{font-size:13px;margin-top:20px;line-height:2}
.footer-inner nav{display:grid;gap:12px;font-size:14px;font-weight:700;min-width:230px}
.footer-inner nav a:hover{text-decoration:underline}
.copyright{font-size:12px;margin-top:44px}
.floating-contact{position:fixed;right:4%;bottom:max(28px,env(safe-area-inset-bottom));z-index:50;display:flex;align-items:center;justify-content:center;min-height:80px;border-radius:28px;background:#111;color:#fff;padding:20px 116px 20px 38px;font-size:20px;font-weight:900;transition:opacity .2s;max-width:92%}
.floating-contact>.mascot{position:absolute;right:-12px;bottom:0;width:116px;border-radius:50%;background:#fff;border:5px solid #111}
.floating-contact:hover{transform:translateY(-3px)}
.floating-contact.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.mobile-only{display:none}
@media(min-width:1500px){.hero-copy{padding-left:max(6%,calc((100vw - 1320px)/2))}}
@media(max-width:1000px){.hero h1{font-size:3.8vw}.hero-copy{padding-left:5%}.hero-photo{width:45%;right:-8%}.case-grid{gap:50px 24px}.case-grid h3{font-size:18px}.service-card{padding:24px 28px 32px}.contact-box{grid-template-columns:130px 1fr;gap:20px}.contact-character .mascot{width:130px}.contact-box .qr{display:none}.band-inner{gap:25px}.band-inner .button{font-size:18px;padding:18px 24px}.step-panel{gap:20px;padding:20px}.about-inner{gap:30px}.price-card h3{font-size:18px;min-width:220px}.price-caption{font-size:17px}}
@media(max-width:760px){
  :root{--header:60px;scroll-padding-top:78px}
  .site-header{padding:0 14px}.brand strong{font-size:18px}.brand small{font-size:9px}.brand img{width:37px;height:37px}
  .hero{display:block;height:auto;min-height:740px;max-height:none;padding-bottom:440px}
  .hero-copy{width:100%;padding:38px 7% 25px;display:block}
  .hero-kicker{font-size:12px;margin-bottom:22px;letter-spacing:.04em}
  .hero h1{font-size:clamp(27px,7vw,41px);line-height:1.65;padding-left:16px;letter-spacing:.02em}
  .hero-photo{top:auto;bottom:30px;right:-13%;width:89%;height:395px;border-radius:45px;transform:skewX(-16deg)}
  .hero-photo img{transform:skewX(16deg) scale(1.1);object-position:55% center}
  .hero-note{margin:14px 0 0 18px;font-size:11px;gap:10px}.hero-note .mascot{display:none}.hero-note p>span{font-size:18px}.hero-note br{display:none}
  .theme-pattern::before{width:430px;height:380px;right:-60%;top:-130px}.hero::after{bottom:-120px;left:-220px;width:530px;height:430px}
  .section{padding:64px 0 70px}.container{width:89%}
  .section-heading{margin-bottom:36px}.section-label{font-size:12px;letter-spacing:.04em;margin-bottom:10px}.section-heading h2{font-size:27px;letter-spacing:.025em;line-height:1.6}
  .problem-heading{margin-bottom:42px}.problem-heading>.mascot{width:115px}.problem-heading h2 span{font-size:21px}.problem-heading h2 strong{font-size:29px;letter-spacing:.01em}.problem-heading>p{font-size:13px;text-align:left}.problem-heading>p br{display:none}
  .case-grid{grid-template-columns:1fr;gap:46px}.case-number{width:50px;height:50px;font-size:21px;margin-bottom:14px}.case-grid h3{font-size:23px}.case-grid .mascot{width:195px;margin:4px auto}.case-grid p{font-size:15px;text-align:center;max-width:330px}
  .section-intro{font-size:17px;margin-bottom:36px}.service-grid{grid-template-columns:1fr;gap:22px}.service-card{padding:24px 26px 30px;border-radius:26px}.service-card .mascot{width:160px}.service-card h3{font-size:23px;margin-top:8px}.service-card p{font-size:15px}.service-links>div{gap:15px;font-size:14px}
  .price .section-heading{margin-bottom:68px}.price-grid{grid-template-columns:1fr;gap:70px}.price-card{padding:58px 18px 26px}.price-card h3{font-size:19px;min-width:240px;padding:18px 20px}.price-value{margin-bottom:18px}.price-detail h4{font-size:15px}.price-detail p{padding:16px;font-size:14px}.support-note{font-size:12px;line-height:2;margin-top:28px}.button{font-size:18px;min-height:62px;padding:17px 27px}
  .contact-band{padding:48px 0}.band-inner{display:block;text-align:center}.band-inner h2{font-size:23px}.band-inner p{font-size:13px;margin:18px 0 25px}.band-inner .button{min-width:270px}.mail-link{font-size:13px}
  .step-list{gap:36px}.step-list>li{grid-template-columns:1fr;gap:16px}.step-list>li:not(:last-child)::after{display:none}.step-number{height:auto;min-height:48px;border-radius:10px;font-size:20px;display:flex;flex-direction:row;gap:10px;width:max-content;padding:9px 18px}.step-number small{font-size:11px;margin:0}.step-content h3{font-size:22px;margin:0 0 17px;line-height:1.65}.step-panel{border-radius:24px;padding:20px 24px 26px;display:block}.step-panel .mascot{width:145px;margin:auto}.step-panel p{font-size:15px}
  .about-inner{grid-template-columns:1fr;gap:26px}.about-image img{border-radius:25px}.about-inner .lead{font-size:15px}.about-inner .text-link{font-size:14px;margin-top:18px}
  .faq-item{padding:24px 0}.faq-item h3,.faq-item>p{font-size:15px;gap:12px}.faq-item h3>span,.faq-item p>span:first-child{flex-basis:32px;font-size:30px}.faq-item p>span:last-child{padding-top:0}
  .contact-intro{font-size:14px;text-align:left}.contact-box{display:flex;flex-direction:column;padding:24px;margin-top:30px;gap:12px}.contact-character .mascot{width:135px}.contact-free{font-size:17px;margin-bottom:20px}.line-button{font-size:18px;padding-inline:20px}.small-note{font-size:11px}.contact-box .qr{display:none}
  .site-footer{padding:46px 0 130px}.footer-inner{display:block}.footer-brand{font-size:24px}.footer-inner p{font-size:11px}.footer-inner nav{margin-top:32px;font-size:13px;gap:14px}.copyright{margin-top:32px}
  .floating-contact{right:50%;transform:translateX(50%);bottom:max(18px,env(safe-area-inset-bottom));width:calc(100% - 44px);max-width:420px;min-height:65px;padding:16px 92px 16px 17px;font-size:17px;border-radius:24px;white-space:nowrap}.floating-contact>.mascot{width:88px;right:-5px;border-width:4px}.floating-contact:hover{transform:translateX(50%) translateY(-2px)}
  .mobile-only{display:block}
  .desktop-only{display:none}
}
@media(max-width:360px){.hero h1{font-size:24px}.hero{min-height:700px;padding-bottom:400px}.hero-photo{height:365px}.hero-note{margin-left:0}.hero-note br{display:block}.hero-kicker{font-size:11px}.problem-heading h2 strong{font-size:25px}.section-heading h2{font-size:24px}.case-grid h3{font-size:22px}.service-card{padding-inline:21px}.service-card h3{font-size:20px}.price-card h3{min-width:225px;font-size:17px}.contact-box{padding:20px 16px}.floating-contact{font-size:15px;width:calc(100% - 32px);padding-left:12px}.floating-contact>.mascot{width:80px}.band-inner h2{font-size:21px}.band-inner .button{min-width:0;width:100%}}
@media(max-height:500px) and (max-width:760px){.hero{min-height:760px}.floating-contact{min-height:48px;padding-block:10px;font-size:15px;bottom:10px}.floating-contact>.mascot{width:67px}.site-menu a{padding:12px 0;font-size:17px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
/* /web/ だけの追加：制作実績。/it/ の「リユース工房について」（.about-inner）と同じ部品を縦に並べる */
.work-list{display:grid;gap:72px}
.works .about-image img{box-shadow:0 2px 9px #00000018}
.works .about-inner .section-label{margin-bottom:6px}
.works .about-inner h3{font-size:25px;font-weight:800;line-height:1.5;margin-bottom:16px}
@media(max-width:760px){.work-list{gap:48px}.works .about-inner h3{font-size:22px;margin-bottom:12px}}
/* 2026-10-02 Tab で送ったフォーカスが、右下の「ご相談・お問い合わせ」の裏に隠れないように（1440px で LINE ボタンが全部隠れていた）。
   下の余白＝ボタンの下端からの位置＋いちばん高い犬の絵＋12px。数字は上の .floating-contact と .mascot の各幅の指定と同じにする */
:root{scroll-padding-bottom:calc(max(28px,env(safe-area-inset-bottom)) + 116px + 12px)}
@media(max-width:760px){:root{scroll-padding-bottom:calc(max(18px,env(safe-area-inset-bottom)) + 88px + 12px)}}
@media(max-width:360px){:root{scroll-padding-bottom:calc(max(18px,env(safe-area-inset-bottom)) + 80px + 12px)}}
@media(max-height:500px) and (max-width:760px){:root{scroll-padding-bottom:calc(10px + 67px + 12px)}}
/* 自作との違い（2026-10-15）：点数の棒グラフ2本。色はページの緑と灰だけ・天井は黒の線・犬は既存の2枚。文は2列の短い注と締めの1行 */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.score-chart{margin:0 auto 40px;max-width:620px}
.score-grid{display:grid;grid-template-columns:58px 1fr;gap:0 12px;padding-top:124px}
.score-axis{position:relative;height:360px}
.score-axis span{position:absolute;right:0;bottom:calc(var(--v)*1%);transform:translateY(50%);font-size:12px;font-weight:700;white-space:nowrap;line-height:1}
.score-axis span b{font-size:17px;font-weight:800}
.score-bars{display:grid;grid-template-columns:1fr 1fr;gap:44px;position:relative;align-items:start}
.score-lines{position:absolute;left:-12px;right:0;top:0;height:360px;pointer-events:none}
.score-lines i{position:absolute;left:0;right:0;bottom:calc(var(--v)*1%);border-top:1px dashed #c4c6c6}
.score-bar{position:relative}
.score-track{position:relative;height:360px}
.score-seg{position:absolute;left:0;right:0;bottom:calc(var(--from)*1%);height:calc((var(--to) - var(--from))*1%);display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;font-weight:800;line-height:1.45;transform-origin:bottom}
.seg-base{background:#e3e5e5}
.seg-self{background:#c6c9c9;font-size:14px}
.seg-fd{background:var(--theme)}
.seg-ai{background:#c9f2da;font-size:14px}
.score-ceiling{position:absolute;left:-14px;right:-14px;bottom:calc(var(--v)*1%);border-top:4px solid #111}
.score-ceiling span{position:absolute;left:14px;width:52%;top:-8px;transform:translateY(-100%);font-size:14px;font-weight:800;line-height:1.4;white-space:nowrap}
.score-track .mascot{position:absolute;left:50%;bottom:calc(var(--v)*1%);transform:translateX(-50%);width:104px}
.is-diy .score-track .mascot{left:auto;right:-10px;transform:none}
.score-name{text-align:center;font-size:15px;font-weight:800;line-height:1.5;margin-top:14px}
.score-name small{display:block;font-size:13px;font-weight:700;line-height:1.6;margin-top:8px;word-break:keep-all;overflow-wrap:anywhere}
.score-chart.js-ready .score-seg{transform:scaleY(0);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.score-chart.js-ready .score-seg span,.score-chart.js-ready .score-ceiling,.score-chart.js-ready .score-track .mascot{opacity:0;transition:opacity .45s}
.score-chart.is-on .score-seg{transform:none}
.score-chart.is-on .score-seg span{opacity:1;transition-delay:.5s}
.score-chart.is-on .seg-self,.score-chart.is-on .seg-ai{transition-delay:.6s}
.score-chart.is-on .seg-self span,.score-chart.is-on .seg-ai span{transition-delay:1s}
.score-chart.is-on .score-ceiling{opacity:1;transition-delay:1.15s}
.score-chart.is-on .score-track .mascot{opacity:1;transition-delay:1.35s}
.diff-close{max-width:720px;margin:0 auto;font-size:16px;font-weight:500;line-height:2.1}
.diff-close strong{font-weight:800;background:linear-gradient(transparent 70%,var(--theme) 70%,var(--theme) 92%,transparent 92%)}
@media(max-width:760px){.score-chart{margin-bottom:36px}.score-grid{grid-template-columns:46px 1fr;gap:0 8px;padding-top:96px}.score-axis,.score-lines,.score-track{height:300px}.score-axis span{font-size:11px}.score-axis span b{font-size:15px}.score-bars{gap:22px}.score-seg{font-size:13px}.seg-self,.seg-ai{font-size:12px}.score-ceiling{left:-8px;right:-8px}.score-ceiling span{left:8px;width:48%;font-size:12px}.score-track .mascot{width:72px}.is-diy .score-track .mascot{right:-12px;width:64px}.score-name{font-size:14px;margin-top:12px}.score-name small{font-size:12px;margin-top:6px}.diff-close{font-size:15px;line-height:2}}
/* 2026-10-16 自作との違いの見出し：小さい見出し（自作との違い）をやめ、はてなの犬＋吹き出しの問いかけに（本人「問いかけ＋アイコン」）。犬は図の「制約の壁」の犬と同じ絵＝同じ人が迷って壁に当たる流れ。導入は本人の原稿2文を左ぞろえで */
.diff-ask{display:flex;align-items:center;justify-content:center;gap:26px;margin:0 auto 40px}
.diff-ask>.mascot{width:116px;border-radius:50%;background:#fff;border:4px solid var(--ink)}
.diff-ask h2{position:relative;background:#fff;border:3px solid var(--ink);border-radius:30px;padding:20px 30px;font-size:clamp(21px,2.3vw,30px);font-weight:900;line-height:1.6;letter-spacing:.04em;text-align:left}
.diff-ask h2::before{content:'';position:absolute;left:-13px;top:50%;width:22px;height:22px;background:#fff;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);border-bottom-left-radius:4px;transform:translateY(-50%) rotate(45deg)}
.diff-lead{max-width:720px;margin:0 auto 44px;font-size:16px;font-weight:500;line-height:2.1}
.diff-lead p+p{margin-top:.9em}
@media(max-width:760px){.diff-ask{gap:14px;margin-bottom:28px}.diff-ask>.mascot{width:78px;border-width:3px}.diff-ask h2{font-size:19px;letter-spacing:.02em;line-height:1.55;padding:13px 18px;border-radius:22px}.diff-ask h2::before{left:-10px;width:16px;height:16px}.diff-lead{font-size:15px;line-height:2;margin-bottom:36px}}
@media(max-width:360px){.diff-ask{gap:12px}.diff-ask>.mascot{width:66px}.diff-ask h2{font-size:17px;padding:12px 15px}}
/* 2026-10-16 制限の段落を絵に（本人「ここも図や吹き出し、イメージで伝えて。困ってるアイコン＋吹き出し」）：困り顔の犬4匹＋灰色の吹き出し。灰色は図の「作成サービスで自作」の棒と同じ色＝同じ側の声。枠で囲まない（カードにしない） */
.diff-voices{display:grid;grid-template-columns:1fr 1fr;gap:26px 44px;max-width:900px;margin:0 auto 30px;padding:0;list-style:none}
.diff-voices li{display:flex;align-items:center;gap:20px}
.diff-voices .mascot{width:118px}
.diff-voices p{position:relative;flex:1;background:#e3e5e5;border-radius:24px;padding:16px 22px;font-size:16px;font-weight:800;line-height:1.7}
.diff-voices p::before{content:'';position:absolute;left:-8px;top:50%;width:18px;height:18px;background:#e3e5e5;border-bottom-left-radius:3px;transform:translateY(-50%) rotate(45deg)}
.diff-wall{text-align:center;font-size:20px;font-weight:800;line-height:1.8;margin:0 auto}
@media(max-width:760px){.diff-voices{grid-template-columns:1fr;gap:14px;margin-bottom:24px}.diff-voices li{gap:14px}.diff-voices .mascot{width:86px}.diff-voices p{font-size:14px;padding:12px 16px;border-radius:20px}.diff-voices p::before{left:-6px;width:14px;height:14px}.diff-wall{font-size:17px}}
@media(max-width:360px){.diff-voices .mascot{width:74px}.diff-voices p{font-size:13px;padding:11px 14px}.diff-wall{font-size:16px}}
@media(min-width:761px) and (max-width:960px){.diff-voices{grid-template-columns:1fr;max-width:600px;gap:16px}.diff-voices .mascot{width:96px}}
/* 2026-10-16 目盛りの省略の印（本人「ちょいとやりすぎかもなので、〜をいれて省略してる感じをいれて」）：0〜70点を縮めて描いているので、縦軸と2本の棒の下のほう（8%）に二重の波線を入れる。棒が伸びたあとに出す */
:root{--score-break:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'%3E%3Cpath d='M0 4Q6 1 12 4T24 4L24 10Q18 13 12 10Q6 7 0 10Z' fill='%23fff'/%3E%3Cpath d='M0 4Q6 1 12 4T24 4M0 10Q6 7 12 10T24 10' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E")}
.score-axis::after,.score-track::after{content:'';position:absolute;bottom:calc(8% - 7px);height:14px;background:var(--score-break) repeat-x 0 0/24px 14px;z-index:1;pointer-events:none}
.score-axis::after{right:-4px;width:24px}
.score-track::after{left:-6px;right:-6px}
.seg-base span{transform:translateY(-8px)}
.score-chart.js-ready .score-axis::after,.score-chart.js-ready .score-track::after{opacity:0;transition:opacity .45s}
.score-chart.is-on .score-axis::after,.score-chart.is-on .score-track::after{opacity:1;transition-delay:.75s}
/* 2026-10-28 お客様の声（片付けいこ相談室様）：本人が聞いた感想を「話した人の欄＋吹き出し」で（brain rules/voice_design_show_the_person.md＝出典より人物像・本人の言葉から見出し・1人1ブロック）。
   吹き出しは「自作との違い」の問いかけ（.diff-ask h2）と同じ線・角・しっぽ。星・大きな引用符・カードの枠は置かない。面はページの緑＝制作実績（方眼）と費用（白）のあいだ */
.voice .section-heading{margin-bottom:56px}
.voice-item{display:grid;grid-template-columns:250px minmax(0,1fr);gap:0 46px;align-items:center;max-width:1000px;margin:0 auto}
.voice-site{width:100%;border-radius:18px;box-shadow:0 2px 9px #00000018;margin-bottom:22px}
.voice-name{font-size:21px;font-weight:900;line-height:1.5}
.voice-role{font-size:14px;font-weight:700;line-height:1.8;margin-top:8px}
.voice-order{font-size:13px;font-weight:500;line-height:1.8;margin-top:2px}
.voice-person .text-link{font-size:14px;margin-top:14px}
.voice-bubble{position:relative;margin:0;background:#fff;border:3px solid var(--ink);border-radius:30px;padding:40px 48px 44px}
.voice-bubble::before{content:'';position:absolute;left:-13px;top:50%;width:22px;height:22px;background:#fff;border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);border-bottom-left-radius:4px;transform:translateY(-50%) rotate(45deg)}
.voice-catch{font-size:clamp(22px,2.2vw,28px);font-weight:900;line-height:1.6;letter-spacing:.04em;margin-bottom:24px}
.voice-catch .keep-word{background:linear-gradient(transparent 70%,var(--theme) 70%,var(--theme) 92%,transparent 92%)}
.voice-bubble p:not(.voice-catch){font-size:16px;font-weight:500;line-height:2.1}
.voice-bubble p:not(.voice-catch)+p{margin-top:.9em}
@media(max-width:1000px){.voice-item{grid-template-columns:200px minmax(0,1fr);gap:0 34px}.voice-bubble{padding:32px 34px 36px}}
@media(max-width:760px){.voice .section-heading{margin-bottom:36px}.voice-item{grid-template-columns:1fr;gap:30px}.voice-person{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:center}.voice-site{margin:0;border-radius:12px}.voice-name{font-size:18px}.voice-role{font-size:13px;margin-top:4px}.voice-order{font-size:12px}.voice-person .text-link{font-size:13px;margin-top:8px}.voice-bubble{padding:28px 22px 30px;border-radius:24px}.voice-bubble::before{left:50px;top:-13px;width:20px;height:20px;transform:rotate(135deg)}.voice-catch{font-size:20px;letter-spacing:.02em;margin-bottom:18px}.voice-bubble p:not(.voice-catch){font-size:15px;line-height:2}}
@media(max-width:360px){.voice-person{grid-template-columns:96px 1fr;gap:14px}.voice-name{font-size:16px}}