@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)}}