/* 共和化学興業 2026 — 採用サイト調の構成(ピルのヘッダー・波・ブロブ・アーチ写真)。色は藍×紙×朱〜金茶 */
:root{
  --sg2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Ccircle cx='0' cy='20' r='20' fill='%23f58220' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.3'/%3E%3Ccircle cx='0' cy='20' r='15' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.3'/%3E%3Ccircle cx='0' cy='20' r='10' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.3'/%3E%3Ccircle cx='0' cy='20' r='5' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.3'/%3E%3Ccircle cx='40' cy='20' r='20' fill='%23f58220' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.3'/%3E%3Ccircle cx='40' cy='20' r='15' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.3'/%3E%3Ccircle cx='40' cy='20' r='10' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.3'/%3E%3Ccircle cx='40' cy='20' r='5' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.3'/%3E%3Ccircle cx='20' cy='10' r='20' fill='%23f58220' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.3'/%3E%3Ccircle cx='20' cy='10' r='15' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.3'/%3E%3Ccircle cx='20' cy='10' r='10' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.3'/%3E%3Ccircle cx='20' cy='10' r='5' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='1.3'/%3E%3C/svg%3E");
  --sg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Ccircle cx='0' cy='20' r='20' fill='%23fbefd9' stroke='%23e8700f' stroke-opacity='.5' stroke-width='1.2'/%3E%3Ccircle cx='0' cy='20' r='15' fill='none' stroke='%23e8700f' stroke-opacity='.5' stroke-width='1.2'/%3E%3Ccircle cx='0' cy='20' r='10' fill='none' stroke='%23e8700f' stroke-opacity='.5' stroke-width='1.2'/%3E%3Ccircle cx='0' cy='20' r='5' fill='none' stroke='%23e8700f' stroke-opacity='.5' stroke-width='1.2'/%3E%3Ccircle cx='40' cy='20' r='20' fill='%23fbefd9' stroke='%23e8700f' stroke-opacity='.5' stroke-width='1.2'/%3E%3Ccircle cx='40' cy='20' r='15' fill='none' stroke='%23e8700f' stroke-opacity='.5' stroke-width='1.2'/%3E%3Ccircle cx='40' cy='20' r='10' fill='none' stroke='%23e8700f' stroke-opacity='.5' stroke-width='1.2'/%3E%3Ccircle cx='40' cy='20' r='5' fill='none' stroke='%23e8700f' stroke-opacity='.5' stroke-width='1.2'/%3E%3Ccircle cx='20' cy='10' r='20' fill='%23fbefd9' stroke='%23e8700f' stroke-opacity='.5' stroke-width='1.2'/%3E%3Ccircle cx='20' cy='10' r='15' fill='none' stroke='%23e8700f' stroke-opacity='.5' stroke-width='1.2'/%3E%3Ccircle cx='20' cy='10' r='10' fill='none' stroke='%23e8700f' stroke-opacity='.5' stroke-width='1.2'/%3E%3Ccircle cx='20' cy='10' r='5' fill='none' stroke='%23e8700f' stroke-opacity='.5' stroke-width='1.2'/%3E%3C/svg%3E");
  --orange:#f58220; --orange-2:#ffb347; --orange-d:#b8480a; --brown:#33200f;
  --blue:#b8480a; --blue-d:#33200f; --blue-l:#fff1de; --sky:#ffe2c2;
  --warm:#fff8ee; --sand:#fbe9d0; --white:#fff; --text:#2b1c10; --muted:#6a5543; --line:#f0d9bf;
  --red:#b8480a; --gold:#ffb347; --on-orange:#33200f;
  --grad:linear-gradient(90deg,#f26b0f 0%,#f58220 52%,#ffb347 100%);
  --sans:"Zen Kaku Gothic New","Hiragino Maru Gothic ProN","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  --gut:clamp(20px,5vw,80px); --ease:cubic-bezier(.2,.7,.1,1); --hd:96px;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 8px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--warm);color:var(--text);font-family:var(--sans);font-weight:500;font-size:16px;line-height:2;letter-spacing:.06em;-webkit-font-smoothing:antialiased;font-feature-settings:"palt";overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure,blockquote,dl,dd,address{margin:0;font-style:normal}
h1,h2,h3{font-weight:700;text-wrap:balance}
p,li,dd{text-wrap:pretty;line-break:strict;word-break:auto-phrase}
button{font:inherit;color:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--blue);color:#fff;padding:8px 14px;z-index:300}.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:rgba(184,72,10,.15)}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.page{position:relative;overflow-x:clip}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:880px}

/* ローダー */
.loader{position:fixed;inset:0;z-index:400;background:#fff;display:grid;place-items:center;transition:opacity .6s .1s,visibility .6s .1s}
.loader img{width:120px;height:auto;animation:pulse 1.2s ease-in-out infinite}
.loader.is-done{opacity:0;visibility:hidden}
@keyframes pulse{50%{transform:scale(1.06);opacity:.75}}
html:not(.js-ready) .loader{display:none}

/* ヘッダー: 白いピル */
.hd{position:fixed;left:0;right:0;top:0;z-index:200;padding:16px clamp(12px,2.4vw,32px);pointer-events:none;transition:transform .5s var(--ease)}
.hd.is-hide{transform:translateY(-130%)}
.hd__bar{pointer-events:auto;display:flex;align-items:center;gap:clamp(12px,2vw,28px);max-width:1320px;margin:0 auto;height:64px;padding:0 8px 0 24px;background:rgba(255,255,255,.96);border-radius:999px;box-shadow:0 6px 24px rgba(51,32,15,.16);position:relative}
.hd__logo{display:flex;align-items:center;gap:14px;flex:none}
.hd__logo img{height:36px;width:auto}
.hd__name{display:grid;gap:1px;line-height:1.25}
.hd__name strong{font-size:clamp(14px,1.25vw,17px);font-weight:900;letter-spacing:.1em;color:var(--blue-d);white-space:nowrap}
.hd__sub{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--blue);white-space:nowrap;opacity:.85}
.hd__nav{margin-left:auto}
.hd__nav>ul{display:flex;align-items:center}
.hd__item{position:relative}
.hd__item+.hd__item::before{content:"";position:absolute;left:0;top:50%;width:1px;height:14px;background:var(--line);transform:translateY(-50%)}
.hd__link,.hd__btn{display:flex;align-items:center;gap:8px;padding:10px clamp(10px,1.3vw,20px);font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--blue);background:none;border:0;cursor:pointer;min-height:44px;white-space:nowrap}
.hd__btn i{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s}
.hd__btn[aria-expanded=true] i{transform:translateY(1px) rotate(-135deg)}
.hd__link:hover span,.hd__btn:hover span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat}
.hd__sub-list{position:absolute;left:50%;top:calc(100% + 18px);min-width:220px;padding:10px;background:#fff;border-radius:24px;box-shadow:0 14px 34px rgba(51,32,15,.2);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .25s,transform .3s var(--ease),visibility .25s}
.hd__item.is-open .hd__sub-list{opacity:1;visibility:visible;transform:translate(-50%,0)}
.hd__sub-list a{display:block;padding:12px 18px;border-radius:14px;font-size:14px;font-weight:700;color:var(--blue);white-space:nowrap}
.hd__sub-list a:hover{background:var(--blue-l)}
.hd__cta{flex:none;display:grid;place-items:center;height:48px;padding:0 30px;border-radius:999px;background:var(--grad);color:var(--on-orange);font-weight:700;font-size:15px;letter-spacing:.14em;box-shadow:0 4px 12px rgba(245,130,32,.35);transition:filter .3s,transform .3s var(--ease)}
.hd__cta:hover{filter:brightness(1.06);transform:translateY(-1px)}
.hd__burger{display:none;width:48px;height:48px;border:0;border-radius:50%;background:var(--grad);position:relative;cursor:pointer;flex:none}
.hd__burger i{position:absolute;left:14px;right:14px;height:2px;background:var(--on-orange);border-radius:2px;transition:transform .35s var(--ease),opacity .2s}
.hd__burger i:nth-child(1){top:16px}.hd__burger i:nth-child(2){top:23px}.hd__burger i:nth-child(3){top:30px}
.hd__burger[aria-expanded=true] i:nth-child(1){transform:translateY(7px) rotate(35deg)}
.hd__burger[aria-expanded=true] i:nth-child(2){opacity:0}
.hd__burger[aria-expanded=true] i:nth-child(3){transform:translateY(-7px) rotate(-35deg)}
.drawer{position:fixed;inset:0;z-index:150;background:linear-gradient(160deg,var(--orange-2) 0%,var(--orange) 55%,#ee7410 100%);color:var(--on-orange);padding:calc(var(--hd) + 8px) var(--gut) 32px;overflow:auto;display:flex;flex-direction:column;gap:24px}
.drawer[hidden]{display:none}
.drawer>ul>li{border-bottom:1px solid rgba(255,255,255,.25)}
.drawer a{display:block;padding:14px 0;font-weight:700;font-size:18px}
.drawer ul ul{padding:0 0 12px 16px}.drawer ul ul a{font-size:15px;padding:8px 0;opacity:.9}

/* 波 */
.wave{position:absolute;left:0;width:200%;height:clamp(50px,7vw,110px);display:block;animation:waveX 22s linear infinite;will-change:transform;pointer-events:none}
.wave--bottom{bottom:-1px}.wave--top{top:-1px;transform:scaleY(-1)}
@keyframes waveX{to{transform:translateX(-50%)}}
.wave--top{animation-name:waveXr}
@keyframes waveXr{from{transform:scaleY(-1) translateX(-50%)}to{transform:scaleY(-1) translateX(0)}}

/* ボタン(ピル+丸の矢印) */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:6px 8px 6px 28px;border:2px solid var(--blue);border-radius:999px;background:#fff;color:var(--blue);font-weight:700;font-size:15px;letter-spacing:.12em;line-height:1.4;margin-top:32px;transition:background .3s,color .3s,border-color .3s}
.btn .lb{display:block;position:relative;overflow:hidden}
.btn .lb>span{display:block;transition:transform .45s var(--ease)}
.btn .lb>span+span{position:absolute;left:0;top:100%}
.btn:hover .lb>span{transform:translateY(-100%)}
.arw{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;transition:transform .3s var(--ease),background .3s}
.btn:hover .arw{transform:translateX(3px)}
.btn:hover{background:var(--blue-l)}
.btn--sm{min-height:44px;margin-top:20px;font-size:14px}
.btn--ghost{background:transparent;color:var(--brown);border-color:var(--brown)}
.btn--ghost .arw{background:var(--brown);color:#fff}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.btn--ghost:hover .arw,.btn--ghost:focus-visible .arw{background:#fff;color:var(--orange-d)}
.btn--grad{background:var(--grad);border:0;color:var(--on-orange);padding-left:32px}
.btn--grad .arw{background:var(--brown);color:#fff}
.btn--line{margin-top:0}
.circ{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;transition:transform .3s var(--ease),background .3s}
.circ:hover{transform:scale(1.08);background:var(--brown)}
.circ .arw{background:none;width:auto;height:auto}

/* 見出し・ラベル */
.h-blue{font-size:clamp(28px,3.6vw,44px);color:var(--blue);letter-spacing:.12em;line-height:1.4}
.h-label{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--blue)}
.h-label i{width:18px;height:18px;background:var(--grad);border-radius:50% 50% 50% 8%;flex:none}
.v-ttl{writing-mode:vertical-rl;font-size:clamp(26px,3vw,38px);font-weight:900;letter-spacing:.3em;color:var(--blue);line-height:1.2;border-left:0}
.v-ttl::before{content:"";display:block;width:2px;height:48px;background:var(--grad);margin:0 auto 18px;border-radius:2px}
html.js-ready [data-reveal]{opacity:0;transform:translateY(22px)}
html.js-ready.rm [data-reveal]{opacity:1;transform:none}

/* ===== FV ===== */
.fv{position:relative;height:100svh;min-height:640px;overflow:hidden;color:#fff;background:var(--blue-d)}
.fv__slider,.fv__slider .splide__track,.fv__slider .splide__list,.fv__slider .splide__slide,.fv__slider img{height:100%}
.fv__slider{position:absolute;inset:0}
.fv__slider img{width:100%;object-fit:cover}
.fv__shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(51,32,15,.06) 25%,rgba(214,96,14,.6) 72%,rgba(51,32,15,.72));mix-blend-mode:multiply}
.fv__swoosh{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sw{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sw--w{stroke:#fff;stroke-width:26;stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 2.4s .5s var(--ease) forwards}
.sw--r{stroke:var(--orange);stroke-width:8;stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 2.6s .8s var(--ease) forwards}
.sw--k{stroke:#ffd9a0;stroke-width:3.5;stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 2.8s 1s var(--ease) forwards}
.sw-g{transform-origin:100% 60%;will-change:transform}
@keyframes draw{to{stroke-dashoffset:0}}
.fv__catch{position:absolute;right:clamp(20px,6vw,110px);top:clamp(110px,19vh,190px);display:flex;flex-direction:column;align-items:flex-start;font-size:clamp(40px,min(7.4vw,12.5vh),118px);line-height:1.12;letter-spacing:.04em;font-weight:900;text-shadow:0 4px 30px rgba(51,32,15,.35)}
.fv__catch::before{content:"“";position:absolute;left:-.45em;top:-.35em;font-size:1.3em;line-height:1;color:#fff;opacity:.95}
.fv__line{display:block;overflow:hidden;padding:.04em 0}
.fv__line>span{display:block}
.fv__line--2{margin-left:1.4em}.fv__line--3{margin-left:.5em}.fv__line--4{margin-left:2.1em}
html.js-ready .fv__line>span{opacity:0}
.fv__badge{position:absolute;left:clamp(16px,3vw,48px);bottom:clamp(120px,22vh,200px);background:#fff;color:var(--blue);padding:18px 24px 16px;border-radius:20px;border:2px solid var(--blue);box-shadow:0 10px 30px rgba(51,32,15,.25);display:grid;gap:4px;max-width:20em}
.fv__badge strong{font-size:24px;letter-spacing:.14em;line-height:1.3}
.fv__badge span{font-size:12px;line-height:1.7;color:var(--muted)}
.wave--fv{bottom:-1px;opacity:1}
.fv::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px}
.fv__news{position:absolute;right:clamp(16px,4vw,64px);bottom:clamp(14px,3.2vh,34px);z-index:3;display:flex;align-items:center;gap:18px;color:var(--blue-d);max-width:min(640px,calc(100% - 32px))}
.fv__news-lb{font-weight:900;font-size:20px;color:var(--blue);letter-spacing:.1em;flex:none}
.fv__news-list{position:relative;flex:1;min-width:260px;height:30px}
.fv__news-list li{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s var(--ease);pointer-events:none}
.fv__news-list li.is-on{opacity:1;transform:none;pointer-events:auto}
.fv__news-list a{display:flex;gap:14px;align-items:center;font-size:14px;font-weight:700;white-space:nowrap}
.fv__news-list time{font-size:12px;color:var(--muted);flex:none}
.fv__news-list span{overflow:hidden;text-overflow:ellipsis}
.fv__news-ctl{display:flex;gap:8px;flex:none}
.fv__news-ctl button,.ctl button{width:44px;height:44px;border-radius:50%;border:2px solid var(--blue);background:#fff;color:var(--blue);display:grid;place-items:center;cursor:pointer;transition:background .3s,color .3s}
.fv__news-ctl button:hover,.ctl button:hover{background:var(--blue);color:#fff}
.fv__news-ctl .arw,.ctl .arw{background:none;color:inherit;width:auto;height:auto}
.fv__news-ctl [data-prev] svg,.ctl [data-prev] svg{transform:scaleX(-1)}
.fv__scroll{display:none}

/* ===== 理念の導入 ===== */
.intro{position:relative;background:linear-gradient(180deg,var(--warm) 0%,#fff1de 100%);padding:clamp(70px,9vw,130px) 0 0;overflow:hidden}
.intro__in{position:relative;z-index:2;max-width:860px;margin:0 auto;padding:0 var(--gut);text-align:center}
.intro__ttl{font-size:clamp(24px,3.4vw,40px);line-height:1.7;color:var(--blue-d);letter-spacing:.1em;margin-bottom:36px}
.intro__p{display:grid;gap:18px;margin-bottom:12px}
.intro__p p{font-size:clamp(15px,1.5vw,17px);line-height:2.1}
.intro .btn{margin-top:36px}
.intro__photo{position:relative;margin-top:clamp(56px,8vw,110px);height:clamp(320px,44vw,560px);overflow:hidden}
.intro__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro__photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,241,222,.85),rgba(245,130,32,.35) 45%,rgba(184,72,10,.6));z-index:1}
.flow-text{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:2;width:max-content;white-space:nowrap;font-size:clamp(70px,11vw,170px);font-weight:900;letter-spacing:.06em;line-height:1;color:transparent;-webkit-text-stroke:2px #fff;animation:flowX 40s linear infinite}
@keyframes flowX{to{transform:translate(-50%,-50%)}}
.bubble{position:absolute;z-index:3;margin:0;border-radius:50%;overflow:hidden;box-shadow:0 14px 40px rgba(51,32,15,.2);border:8px solid #fff;will-change:transform}
.bubble img{width:100%;height:100%;object-fit:cover}
.bubble--tr{top:clamp(-30px,-2vw,0px);right:clamp(-60px,2vw,40px);width:clamp(150px,22vw,320px);aspect-ratio:1;animation:floatY 7s ease-in-out infinite}
.bubble--bl{left:clamp(-70px,2vw,60px);bottom:clamp(20px,6vw,90px);width:clamp(130px,19vw,280px);aspect-ratio:1;animation:floatY 8s -2s ease-in-out infinite}
.bubble--tr2{right:clamp(-40px,3vw,60px);top:clamp(20px,5vw,80px);width:clamp(120px,17vw,250px);aspect-ratio:1;animation:floatY 9s -4s ease-in-out infinite}
@keyframes floatY{50%{translate:0 -14px}}

/* ===== 事業(藍の面) ===== */
.biz{position:relative;background:var(--orange);color:var(--on-orange);padding:clamp(80px,10vw,150px) 0 clamp(120px,14vw,200px);overflow:hidden}
.biz__in{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:0 var(--gut);text-align:center}
.biz__ttl{font-size:clamp(22px,3vw,34px);line-height:1.8;letter-spacing:.1em;margin-bottom:26px}
.biz__p{font-size:15px;line-height:2.2}
.oval{position:absolute;z-index:1;margin:0;overflow:hidden;border:8px solid rgba(255,255,255,.9);box-shadow:0 16px 40px rgba(0,0,0,.25);will-change:transform}
.oval img{width:100%;height:100%;object-fit:cover}
.oval--l{left:clamp(-90px,-4vw,0px);top:clamp(30px,6vw,100px);width:clamp(150px,25vw,360px);aspect-ratio:.8;border-radius:50%;animation:floatY 8s ease-in-out infinite}
.oval--r{right:clamp(-80px,-3vw,0px);bottom:clamp(60px,10vw,160px);width:clamp(150px,24vw,340px);aspect-ratio:.82;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;animation:floatY 9s -3s ease-in-out infinite}

/* ===== 〜を知る(ブロブ) ===== */
.know{position:relative;padding:clamp(70px,9vw,130px) var(--gut) clamp(90px,11vw,150px);background:var(--warm);overflow:hidden}
.know__head{max-width:1100px;margin:0 auto clamp(30px,5vw,60px)}
.blobs{position:relative;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);align-items:start}
.blob{position:relative;background:var(--sky);border-radius:56% 44% 52% 48%/48% 54% 46% 52%;padding:clamp(40px,5.5vw,80px) clamp(32px,5vw,72px);min-height:clamp(280px,32vw,380px);display:flex;flex-direction:column;justify-content:center;color:var(--blue-d)}
.blob h3{font-size:clamp(20px,2vw,26px);color:var(--blue);line-height:1.5;margin-bottom:14px;letter-spacing:.1em}
.blob p{font-size:14px;line-height:2.1}
.blob .btn{align-self:flex-start}
.blob--a{background:#ffe5c8}
.blob--b{background:#fff0df;margin-top:clamp(30px,6vw,90px);border-radius:46% 54% 44% 56%/54% 46% 54% 46%}
.blobs--rev .blob--a{background:#fff0df}.blobs--rev .blob--b{background:#ffe5c8}
.know--env{background:linear-gradient(180deg,var(--warm),#fff1de)}

/* ===== 取り扱い商品: アーチ写真のカルーセル ===== */
.items{position:relative;padding:clamp(70px,9vw,120px) 0 clamp(80px,10vw,140px) var(--gut);background:linear-gradient(180deg,#fff1de,var(--warm) 60%);overflow:hidden}
.items__head{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"t l" "t c";column-gap:36px;max-width:1160px;margin:0 auto 40px;padding-right:var(--gut);align-items:start}
.items__head .v-ttl{grid-area:t}
.items__lead{grid-area:l;max-width:34em;font-size:15px;align-self:center}
.ctl{grid-area:c;display:flex;gap:12px;margin-top:18px}
.items__slider{max-width:none}
.items__slider .splide__track{overflow:visible}
.arch{display:grid;gap:8px;position:relative;padding-bottom:64px}
.arch figure{position:relative;margin:0;aspect-ratio:3/4;border-radius:999px 999px 28px 28px;overflow:hidden;background:var(--sky)}
.arch img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.arch:hover img{transform:scale(1.06)}
.arch__tag{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:#fff;color:var(--blue);border-radius:999px;padding:4px 16px;font-size:12px;font-weight:700;letter-spacing:.08em;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.arch__no{margin-top:8px;font-size:13px;font-weight:700;color:var(--red);letter-spacing:.2em}
.arch__txt{font-size:13px;line-height:1.9;color:var(--muted);padding-right:60px}
.arch>.arw{position:absolute;right:0;bottom:6px;width:46px;height:46px;border:0}

/* ===== 気になる私の一品(クロストーク型) ===== */
.talk{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,5vw,80px);padding:clamp(70px,9vw,120px) var(--gut) clamp(60px,8vw,110px);background:var(--warm);max-width:1360px;margin:0 auto}
.talk__head{position:sticky;top:130px;align-self:start}
.talk__list{display:grid;gap:clamp(60px,9vw,130px)}
.tk{position:relative;max-width:980px}
.tk--r{margin-left:auto}
.tk__no{position:absolute;z-index:3;left:-14px;top:-14px;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--blue);color:#fff;font-weight:900;font-size:22px;letter-spacing:.04em;box-shadow:0 8px 20px rgba(51,32,15,.25)}
.tk--r .tk__no{left:auto;right:-14px}
.tk__ph{margin:0;aspect-ratio:16/10;overflow:hidden;border-radius:120px 24px 24px 24px;background:var(--sky)}
.tk--r .tk__ph{border-radius:24px 120px 24px 24px}
.tk__ph img{width:100%;height:100%;object-fit:cover}
.tk__card{position:relative;margin:-64px 0 0 auto;width:min(86%,640px);background:#fff;border-radius:28px 28px 28px 80px;padding:30px 36px 34px;box-shadow:0 16px 40px rgba(51,32,15,.16)}
.tk--r .tk__card{margin:-64px auto 0 0;border-radius:28px 28px 80px 28px}
.tk__card h3{font-size:clamp(18px,2vw,24px);color:var(--blue);margin-bottom:8px;letter-spacing:.1em}
.tk__card p{font-size:14px;line-height:2;padding-right:50px}
.tk__card .circ{position:absolute;right:18px;bottom:18px;width:48px;height:48px}
.talk__more{grid-column:2;display:flex;justify-content:center}

/* ===== エントリー(藍の面+角丸カード) ===== */
.entry{position:relative;background:var(--orange);color:var(--on-orange);padding:clamp(100px,12vw,180px) var(--gut) clamp(110px,13vw,200px);overflow:hidden;text-align:center}
.entry__flow{position:absolute;left:0;top:clamp(60px,8vw,120px);width:100%;overflow:hidden;opacity:.14;pointer-events:none}
.entry__flow span{display:block;width:max-content;white-space:nowrap;font-size:clamp(90px,14vw,220px);font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:2px #fff;animation:flowX2 50s linear infinite}
@keyframes flowX2{to{transform:translateX(-50%)}}
.entry__in{position:relative;max-width:1000px;margin:0 auto}
.entry__lead{font-size:clamp(22px,3vw,34px);line-height:1.8;letter-spacing:.1em;margin-bottom:18px}
.entry__p{font-size:15px;line-height:2.1;max-width:34em;margin:0 auto}
.entry__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,32px);margin-top:clamp(44px,6vw,80px)}
.ecard a{position:relative;display:grid;align-content:start;gap:8px;aspect-ratio:1/1;padding:clamp(22px,3vw,40px);background:#fff;color:var(--blue);border-radius:clamp(36px,5vw,64px);text-align:left;transition:transform .5s var(--ease),box-shadow .5s}
.ecard a:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.25)}
.ecard strong{font-size:clamp(18px,2.2vw,26px);letter-spacing:.1em}
.ecard span{font-size:13px;color:var(--muted)}
.ecard .arw{color:var(--on-orange);position:absolute;left:clamp(22px,3vw,40px);bottom:clamp(22px,3vw,40px);width:46px;height:46px;background:var(--grad)}

/* ===== フッター ===== */
.ft{position:relative;overflow:hidden;background:#fff;padding:clamp(80px,9vw,130px) var(--gut) 28px;margin-top:-1px}
.ft__wave{top:-1px;bottom:auto;transform:scaleY(-1);height:clamp(40px,5vw,80px)}
.ft__in{max-width:1160px;margin:0 auto;display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;padding-bottom:40px}
.ft__co img{width:auto;height:56px;margin-bottom:14px}
.ft__name{font-weight:900;font-size:18px;color:var(--blue);letter-spacing:.1em;margin-bottom:6px}
.ft__co address{font-size:13px;line-height:2}
.ft__sns{display:flex;gap:18px;margin-top:12px;font-size:13px;font-weight:700;color:var(--blue)}.ft__sns a{text-decoration:underline;text-underline-offset:4px}
.ft__cols{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap}
.ft__h{font-weight:900;font-size:14px;color:var(--blue);margin-bottom:8px;letter-spacing:.1em}
.ft__col li a{display:block;padding:4px 0 4px 14px;position:relative;font-size:13px}
.ft__col li a::before{content:"";position:absolute;left:0;top:50%;width:7px;height:2px;background:var(--blue)}
.ft__col a:hover{color:var(--red)}
.ft__legal{max-width:1160px;margin:0 auto;border-top:1px solid var(--line);padding-top:22px;display:flex;gap:22px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.ft__legal small{margin-left:auto}

/* ===== 下層ページ ===== */
.phero{position:relative;padding:calc(var(--hd) + clamp(40px,6vw,80px)) 0 clamp(90px,10vw,150px);background:linear-gradient(160deg,var(--blue-l),#fff1de 60%,var(--warm));overflow:hidden}
.phero::before{content:"";position:absolute;right:-8%;top:-20%;width:46vw;max-width:620px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(184,72,10,.16),rgba(184,72,10,0) 70%)}
.phero__in{position:relative}
.phero__ttl{font-size:clamp(30px,4.6vw,54px);color:var(--blue);letter-spacing:.14em;line-height:1.35;margin-top:6px}
.crumb{margin-top:18px;font-size:12px;color:var(--muted)}.crumb a:hover{text-decoration:underline}.crumb span::before{content:"＞";margin:0 .8em}
.sec{position:relative;padding:clamp(56px,8vw,110px) 0;background:var(--warm)}
.sec:nth-of-type(even){background:linear-gradient(180deg,var(--warm),#fff4e6)}
.sec__ttl{font-size:clamp(26px,3.2vw,38px);color:var(--blue);letter-spacing:.12em;line-height:1.5;margin-bottom:clamp(26px,4vw,48px);display:flex;align-items:center;gap:14px}
.sec__ttl::before{content:"";width:18px;height:18px;background:var(--grad);border-radius:50% 50% 50% 8%;flex:none}
.sec__lead{max-width:36em;margin:-20px 0 clamp(26px,4vw,48px);color:var(--muted)}
.lead-ttl{font-size:clamp(20px,2.6vw,30px);line-height:1.8;color:var(--blue-d);margin-bottom:30px;letter-spacing:.08em}
.sub-ttl{font-size:20px;color:var(--blue);margin:44px 0 16px;padding-left:16px;border-left:6px solid var(--gold)}
.prose{margin-bottom:1.7em;text-align:justify}.prose--lead{font-size:17px}
.bgrid,.sgrid,.pick__list{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px}
.bc,.sg,.pk{background:#fff;border-radius:28px;padding:14px 14px 26px;box-shadow:0 8px 24px rgba(51,32,15,.08)}
.bc figure,.sg figure,.pk figure{margin:0 0 14px;border-radius:20px;overflow:hidden;aspect-ratio:4/3}
.bc img,.sg img,.pk img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pk a:hover img{transform:scale(1.05)}
.bc>*:not(figure),.sg>*:not(figure),.pk a>*:not(figure){margin-left:12px;margin-right:12px}
.bc h3,.sg h3,.pk h3{font-size:19px;color:var(--blue);letter-spacing:.08em;line-height:1.6;margin-top:4px}
.bc p,.sg p,.pk p{font-size:14px;line-height:2}
.str__no{display:inline-block;font-size:13px;font-weight:900;letter-spacing:.12em;color:var(--on-orange);background:var(--grad);padding:0 14px;border-radius:999px}
.pk .more{display:inline-flex;gap:10px;align-items:center;margin-top:10px;font-size:14px;font-weight:700;color:var(--red)}
.pk .more .arw{width:28px;height:28px;background:var(--red)}
.post-fig{margin:0 0 32px;border-radius:32px;overflow:hidden;box-shadow:0 12px 30px rgba(51,32,15,.15)}
.post-body{background:#fff;border-radius:28px;padding:clamp(24px,4vw,44px);margin-bottom:28px}
.post-body p{margin-bottom:1.3em}.post-body a:not(.btn){color:var(--blue);text-decoration:underline;word-break:break-all}.post-body .ext{margin:24px 0 0}
.dl>div{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:20px 8px;border-bottom:1px solid var(--line)}
.dl dt{font-weight:900;color:var(--blue)}.dl a{color:var(--blue);text-decoration:underline}
.kk-form .fld{margin-bottom:26px}
.kk-form label{display:block;font-weight:700;margin-bottom:8px}
.tag{display:inline-block;font-size:11px;padding:1px 10px;margin-right:10px;color:#fff;border-radius:999px}
.tag.req{background:var(--red)}.tag.opt{background:#8a6f58}
.kk-form input[type=text],.kk-form input[type=tel],.kk-form input[type=email],.kk-form input[type=date],.kk-form select,.kk-form textarea{width:100%;padding:14px 18px;border:2px solid var(--line);border-radius:16px;background:#fff;font:inherit;color:var(--text);transition:border-color .2s}
.kk-form input:focus,.kk-form select:focus,.kk-form textarea:focus{outline:none;border-color:var(--blue)}
.kk-form input:user-invalid,.kk-form textarea:user-invalid,.kk-form select:user-invalid{border-color:var(--red);background:#fff4f1}
.kk-form .agree{display:flex;gap:10px;align-items:center;margin:8px 0}.kk-form .agree a{text-decoration:underline;color:var(--blue)}
.kk-form button{cursor:pointer;margin-top:20px;border:0;background:var(--grad);color:var(--on-orange);padding-left:32px}
.kk-form button .arw{background:var(--brown);color:#fff}
.form-note{padding:14px 20px;margin-bottom:26px;border-radius:16px}.is-ok{background:#e1f2e5}.is-ng{background:#fde4de}
.legal h2{font-size:20px;color:var(--blue);margin:2em 0 .6em}.legal p,.legal li{margin-bottom:.8em}.legal ul{list-style:disc;padding-left:1.4em}
.kk-table{width:100%;border-collapse:collapse}.kk-table th,.kk-table td{border-bottom:1px solid var(--line);padding:18px 12px;text-align:left;vertical-align:top}.kk-table th{width:200px;color:var(--blue)}

/* ===== レスポンシブ ===== */
@media (max-width:1100px){
  .hd__nav,.hd__cta{display:none}.hd__burger{display:block;margin-left:auto}
  .hd__bar{padding-right:8px}
}
@media (max-width:960px){
  .blobs{grid-template-columns:1fr}.blob--b{margin-top:0}
  .talk{grid-template-columns:1fr}.talk__head{position:static}.talk__head .v-ttl{writing-mode:horizontal-tb;letter-spacing:.16em}.talk__head .v-ttl::before{margin:0 0 14px}
  .talk__more{grid-column:1}
  .bgrid,.sgrid,.pick__list{grid-template-columns:repeat(2,1fr)}
  .fv__catch{right:var(--gut);top:clamp(100px,16vh,150px)}
  .fv__badge{bottom:150px}
  .items__head{grid-template-columns:1fr;grid-template-areas:"t" "l" "c"}.items__head .v-ttl{writing-mode:horizontal-tb;letter-spacing:.16em}.items__head .v-ttl::before{margin:0 0 14px}
}
@media (max-width:640px){
  :root{--hd:84px}
  .hd__bar{height:58px;padding-left:14px}.hd__sub{display:none}.hd__logo{gap:10px}.hd__logo img{height:30px}.hd__name strong{font-size:13px;letter-spacing:.06em}
  .bgrid,.sgrid,.pick__list{grid-template-columns:1fr}
  .dl>div{grid-template-columns:1fr;gap:4px}
  .kk-table th{width:auto;display:block;border:0;padding-bottom:0}.kk-table td{display:block}
  .entry__cards{grid-template-columns:1fr}.ecard a{aspect-ratio:auto;min-height:150px;padding-bottom:84px}
  .fv__catch{font-size:clamp(38px,12.5vw,60px)}
  .fv__badge{left:16px;right:16px;bottom:118px;max-width:none;padding:12px 16px}.fv__badge strong{font-size:18px}
  .fv__news{left:16px;right:16px;max-width:none;gap:10px}.fv__news-lb{font-size:15px}
  .oval--l,.oval--r{opacity:.5}
  .tk__card{width:92%;padding:22px 22px 26px}.tk__ph{border-radius:70px 20px 20px 20px}.tk--r .tk__ph{border-radius:20px 70px 20px 20px}
  .ft__legal small{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html.js-ready [data-reveal],html.js-ready .fv__line>span{opacity:1;transform:none}
  .sw{stroke-dashoffset:0!important}
}

/* ===== 水引の曲線(スクロールで描かれ、結びが生まれる) ===== */
.knot-sym .a,.knot .a,.rb-head .a{fill:none;stroke:#f58220;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.knot-sym .b,.knot .b,.rb-head .b{fill:none;stroke:#ffd9a0;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.knot-sym .f,.knot .f,.rb-head .f{fill:#f58220}.knot-sym .g,.knot .g,.rb-head .g{fill:#ffd9a0}
.ribbon{position:absolute;left:0;top:0;z-index:2;pointer-events:none;overflow:visible}
.r-sh{fill:none;stroke:rgba(51,32,15,.22);stroke-linecap:round;filter:blur(3px);transform:translateY(5px)}
.r-main{fill:none;stroke:#f58220;stroke-linecap:round}
.r-edge{fill:none;stroke:#fff;stroke-linecap:round}
.r-stitch{fill:none;stroke:#ffd9a0;stroke-linecap:round}
.knot{filter:drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 1.2px #fff) drop-shadow(0 6px 8px rgba(51,32,15,.3))}
.knot.is-on .knot__fl{animation:knotFloat 5s ease-in-out infinite}
.knot__fl{transform-box:fill-box;transform-origin:center}
@keyframes knotFloat{50%{transform:translateY(-5px) rotate(3deg)}}
.rb-head{filter:drop-shadow(0 4px 6px rgba(51,32,15,.3))}
.fv__knot-w{position:absolute;right:clamp(10px,2vw,40px);top:41%;width:clamp(64px,7.4vw,112px);z-index:3}
.fv__knot{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 8px 12px rgba(51,32,15,.35))}
@media (max-width:640px){.fv__knot-w{top:44%;right:10px;width:64px}}

/* ===== 2026-10 下層ページの再構成 ===== */
/* ページ見出しの水引(トップの簡略版) */
.phero__cord{position:absolute;right:clamp(10px,5vw,90px);bottom:clamp(36px,6vw,80px);width:min(560px,58vw);height:clamp(60px,9vw,110px);pointer-events:none}
.phero__cord svg{width:100%;height:100%;overflow:visible}
.pc{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2s .35s var(--ease) forwards}
.pc--w{stroke:#fff;stroke-width:16;animation-delay:.2s;filter:drop-shadow(0 3px 5px rgba(51,32,15,.16))}
.pc--r{stroke:var(--red);stroke-width:5;animation-delay:.5s}
.pc--k{stroke:#ffd9a0;stroke-width:2.5;animation-delay:.7s}
.phero__bow{position:absolute;right:-10px;top:-6px;width:clamp(44px,5vw,72px);height:auto;filter:drop-shadow(0 6px 8px rgba(51,32,15,.3))}
.phero::before{animation:floatY 9s ease-in-out infinite}
@media (max-width:640px){.phero__cord{right:8px;bottom:24px;width:70vw;opacity:.9}}

/* 共通部品 */
.card{background:#fff;border-radius:28px;box-shadow:0 10px 28px rgba(51,32,15,.08)}
.card--text{padding:clamp(24px,4vw,48px)}
.card--text>*:last-child{margin-bottom:0}
.dl.card{padding:clamp(8px,2vw,20px) clamp(20px,3vw,40px)}
.dl.card>div:last-child{border-bottom:0}
.lead-card{background:#fff;border-radius:36px;padding:clamp(28px,4.5vw,60px);box-shadow:0 12px 32px rgba(51,32,15,.08);position:relative}
.lead-card::before{content:"“";position:absolute;left:clamp(16px,3vw,36px);top:-.1em;font-size:clamp(70px,9vw,120px);line-height:1;color:var(--red);opacity:.9}
.lead-card__ttl{font-size:clamp(22px,2.8vw,32px);line-height:1.8;color:var(--blue-d);letter-spacing:.08em;margin:clamp(16px,2.4vw,28px) 0 clamp(18px,2.4vw,30px)}
.cols{columns:2;column-gap:clamp(30px,5vw,64px)}
.cols p{break-inside:avoid-column;margin-bottom:1.4em;text-align:justify}
.lead-card--p{max-width:none;text-align:left;margin-bottom:0}
.split{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,80px);align-items:start}
.split__ttl{position:sticky;top:130px;align-self:start}
.split--photo{grid-template-columns:minmax(220px,380px) 1fr;align-items:center}
.split--rev{grid-template-columns:1fr minmax(220px,380px)}.split--rev .arch-ph{order:2}
.arch-ph{margin:0;border-radius:999px 999px 36px 36px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 18px 40px rgba(51,32,15,.18);border:8px solid #fff}
.arch-ph img{width:100%;height:100%;object-fit:cover}
.msgs{display:grid;gap:0;margin-bottom:28px}
.msgs .prose{position:relative;padding-left:26px;margin-bottom:1.2em}
.msgs .prose::before{content:"";position:absolute;left:0;top:.9em;width:12px;height:12px;border-radius:50% 50% 50% 4%;background:var(--grad)}
/* 強み(経営理念ページ): 写真を左に置く横長カード */
.shl{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.sh{display:grid;grid-template-columns:42% 1fr;gap:0;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 8px 24px rgba(51,32,15,.08)}
.sh figure{margin:0;min-height:100%}.sh img{width:100%;height:100%;object-fit:cover}
.sh>div{padding:clamp(18px,2.4vw,30px)}
.sh h3{font-size:18px;color:var(--blue);margin:8px 0;line-height:1.6;letter-spacing:.08em}
.sh p{font-size:14px;line-height:2}
/* 一所懸命 */
.issho{background:linear-gradient(180deg,var(--warm),#fbe9d0);overflow:hidden}
.issho::before{content:"";position:absolute;right:-10%;top:-30%;width:60vw;max-width:760px;aspect-ratio:1;border-radius:50%;border:2px solid rgba(184,72,10,.12)}
.issho__in{position:relative;display:grid;grid-template-columns:minmax(240px,400px) 1fr;gap:clamp(30px,6vw,100px);align-items:center}
.issho__enso{position:relative;margin:0;aspect-ratio:3/4;border-radius:999px 999px 32px 32px;overflow:hidden;box-shadow:0 22px 50px rgba(51,32,15,.22);border:8px solid #fff;background:#fff}
.issho__enso img{width:100%;height:100%;object-fit:cover}
.issho__ring{position:absolute;inset:-14px;border-radius:inherit;border:1px dashed rgba(245,130,32,.55);pointer-events:none;animation:ringspin 60s linear infinite;z-index:1}
@keyframes ringspin{to{transform:rotate(360deg)}}
.issho__kaisho{margin-bottom:24px}.issho__kaisho img{width:min(380px,80%);height:auto;filter:drop-shadow(0 2px 0 rgba(255,255,255,.7))}
.issho__close{margin-top:28px;padding-left:22px;border-left:6px solid var(--gold);font-size:clamp(20px,2.6vw,30px);font-weight:700;color:var(--blue);line-height:1.8;letter-spacing:.12em}
@media (max-width:960px){
  .split,.split--photo,.split--rev,.issho__in{grid-template-columns:1fr}
  .split__ttl{position:static}.split__ttl.v-ttl{writing-mode:horizontal-tb;letter-spacing:.16em}.split__ttl.v-ttl::before{margin:0 0 14px}
  .split--rev .arch-ph{order:0}.arch-ph{max-width:340px;margin-inline:auto}
  .cols{columns:1}.shl{grid-template-columns:1fr}
  .issho__enso{max-width:340px;margin-inline:auto}
}
@media (max-width:560px){.sh{grid-template-columns:1fr}.sh figure{aspect-ratio:4/3;min-height:0}}
@media (max-width:640px){.prose,.cols p,.post-body p{text-align:left}.lead-card{border-radius:28px}}

/* ===== 結ぶ動き: 紐が輪を描き → 結び目が現れて → きゅっと締まる ===== */
.knot-sym .k,.knot .k{stroke-dasharray:1;stroke-dashoffset:1}
.knot-sym.is-on .k,.knot.is-on .k{animation:kdraw .85s cubic-bezier(.5,0,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes kdraw{to{stroke-dashoffset:0}}
.knot-sym .core,.knot .core{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.knot-sym.is-on .core,.knot.is-on .core{animation:kcore .55s cubic-bezier(.3,1.5,.5,1) 1.05s forwards}
@keyframes kcore{0%{transform:scale(0)}55%{transform:scale(1.55)}100%{transform:scale(1)}}
.knot-sym .loops,.knot .loops{transform-box:fill-box;transform-origin:center}
.knot-sym.is-on .loops,.knot.is-on .loops{animation:ktight .5s cubic-bezier(.4,0,.2,1) 1.2s}
@keyframes ktight{0%{transform:scale(1.09)}60%{transform:scale(.94)}100%{transform:scale(1)}}
.knot.is-on .knot__fl{animation:knotFloat 5s 2s ease-in-out infinite}
/* ローダー: 水引が結ばれてロゴが現れる */
.loader{flex-direction:column;gap:6px;display:flex;align-items:center;justify-content:center}
.loader__bow{display:block;overflow:visible;filter:drop-shadow(0 8px 10px rgba(51,32,15,.25))}
.loader img{animation:none;opacity:0;transform:translateY(8px);animation:logoIn .7s 1.7s cubic-bezier(.2,.7,.1,1) forwards}
@keyframes logoIn{to{opacity:1;transform:none}}
/* 結びの意味(結ばれた直後に添える) */
.knot-cap{position:absolute;z-index:4;width:clamp(150px,13vw,190px);padding:10px 14px 12px;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 8px 22px rgba(51,32,15,.18);pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.1,1)}
.knot-cap.is-on{opacity:1;transform:none;transition-delay:1.7s}
.knot-cap b{display:block;font-size:13px;color:var(--red);letter-spacing:.14em;margin-bottom:2px}
.knot-cap span{display:block;font-size:11.5px;line-height:1.7;color:var(--text);letter-spacing:.04em}
@media (max-width:900px){.knot-cap{width:auto;max-width:150px;padding:6px 12px}.knot-cap span{display:none}}
/* お問い合わせカードに掛かる結び */
.ecard a{overflow:visible}
.ecard__bow{position:absolute;right:clamp(14px,2vw,26px);top:clamp(-26px,-2.4vw,-18px);width:clamp(54px,6vw,76px);height:auto;overflow:visible;filter:drop-shadow(0 6px 8px rgba(51,32,15,.3));z-index:2}
@media (prefers-reduced-motion:reduce){
  .knot-sym .k,.knot .k{stroke-dashoffset:0!important;animation:none!important}
  .knot-sym .core,.knot .core,.knot-cap{transform:none!important;animation:none!important;opacity:1}
  .knot-sym .loops,.knot .loops,.loader img{animation:none!important;opacity:1;transform:none}
}

/* ===== 箱づくり: 展開図 → 組み立て → 蓋 → 水引 → 積み上げ(CSS 3D・スクロール連動) ===== */
.make{position:relative;background:linear-gradient(180deg,#fff1de,#fff6ea);overflow:hidden}
.make__stick{position:relative;min-height:100svh;max-width:1360px;margin:0 auto;display:grid;grid-template-columns:minmax(0,500px) 1fr;grid-template-rows:auto 1fr;gap:0 clamp(24px,5vw,80px);padding:calc(var(--hd) + 14px) var(--gut) 36px}
.make__head{grid-column:1/-1}
.make__lead{max-width:38em;font-size:15px;margin-top:8px;color:var(--muted)}
.make__list{position:relative;grid-column:1;grid-row:2;align-self:center;min-height:230px}
.make__item{position:absolute;left:0;right:0;top:50%;opacity:0;transform:translateY(calc(-50% + 22px));transition:opacity .25s,transform .5s var(--ease);pointer-events:none}
.make__item.is-on{opacity:1;transform:translateY(-50%);transition:opacity .45s .2s,transform .6s .2s var(--ease)}
.make__no{display:block;font-size:clamp(76px,9vw,128px);font-weight:900;line-height:1;color:var(--blue);opacity:.14}
.make__item h3{position:relative;margin:-.55em 0 12px;font-size:clamp(22px,2.6vw,32px);color:var(--blue);letter-spacing:.1em}
.make__item p{max-width:24em;font-size:15px;line-height:2.1}
.make__dots{position:absolute;left:var(--gut);bottom:30px;display:flex;gap:12px}
.make__dots li{width:12px;height:12px;border:2px solid var(--blue);transform:rotate(45deg);transition:background .3s,transform .3s}
.make__dots li.is-on{background:var(--red);border-color:var(--red);transform:rotate(45deg) scale(1.3)}
html:not(.js-ready) .make__list,.rm .make__list{position:static;display:grid;gap:22px;align-self:start}
html:not(.js-ready) .make__item,.rm .make__item{position:static;opacity:1;transform:none;pointer-events:auto}
html:not(.js-ready) .make__dots,.rm .make__dots{display:none}
body.is-make .ribbon,body.is-make .knot-cap{opacity:0;transition:opacity .3s}
.ribbon,.knot-cap{transition:opacity .4s}

.stage{--s:clamp(96px,min(17vw,22vh),220px);--h:calc(var(--s)*.6);--ff:0;--fb:0;--fl:0;--fr:0;--lid:0;--pat:0;--band:0;--sk:0;--tilt:60deg;--rz:-28deg;
  grid-column:2;grid-row:2;position:relative;perspective:1500px;min-height:min(64vh,560px)}
.stage .shadow{position:absolute;left:50%;top:56%;width:calc(var(--s)*2.8);height:calc(var(--s)*1.5);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(51,32,15,.26),rgba(51,32,15,0));filter:blur(8px);opacity:var(--shadow,0);pointer-events:none}
.stage .chips{position:absolute;right:2%;top:6%;display:flex;gap:14px;opacity:0;pointer-events:none}
.chip{width:clamp(40px,4.4vw,58px);aspect-ratio:1;border-radius:50%;border:3px solid #fff;box-shadow:0 6px 14px rgba(51,32,15,.22)}
.chip--sg{background:#f6ecd6 var(--sg) 0 0/30px 15px}.chip--ai{background:var(--brown)}.chip--sh{background:var(--orange)}
.floor{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(var(--tilt)) rotateZ(var(--rz))}
.item,.bx,.base,.wall,.lid{transform-style:preserve-3d}
.item{position:absolute;left:calc(var(--s)/-2);top:calc(var(--s)/-2);width:var(--s);height:var(--s);transform:translate3d(calc(var(--s)*var(--ix,0)),calc(var(--s)*var(--iy,0)),calc(var(--s)*var(--iz,0))) scale(var(--is,1));will-change:transform}
.item--c{--ff:1;--fb:1;--fl:1;--fr:1;--lid:1;--pat:1;--band:1;--sk:1}
.base{position:relative;width:var(--s);height:var(--s)}
.base>i,.wall>i,.lid>i{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.in{background:#fbf3e0;outline:1.5px dashed rgba(184,72,10,.4);outline-offset:-2px}
.in::after{content:"";position:absolute;inset:0;background:var(--sg) 0 0/calc(var(--s)*.3) calc(var(--s)*.15);opacity:calc(var(--pat)*(1 - var(--fr)))}

.out{background:#f58220 var(--sg2) 0 0/calc(var(--s)*.3) calc(var(--s)*.15);transform:rotateY(180deg);box-shadow:inset 0 0 0 1px rgba(51,32,15,.18),inset 0 0 0 2px rgba(255,255,255,.35)}
.out u{position:absolute;left:41%;width:18%;top:0;bottom:0;background:var(--brown);box-shadow:inset 3px 0 0 rgba(255,179,71,.95),inset -3px 0 0 rgba(255,179,71,.95);opacity:var(--band)}
.out b{position:absolute;left:50%;top:50%;width:64%;aspect-ratio:1.7;transform:translate(-50%,-50%) scaleX(-1);display:block;background:#fff url(../img/logo-orange.png) center/80% auto no-repeat;border:2px solid var(--orange);border-radius:12%;font-size:0;opacity:var(--band)}
.wall{position:absolute}
.w-f{left:0;top:100%;width:100%;height:var(--h);transform-origin:50% 0;transform:rotateX(calc(var(--ff)*90deg))}
.w-b{left:0;bottom:100%;width:100%;height:var(--h);transform-origin:50% 100%;transform:rotateX(calc(var(--fb)*-90deg))}
.w-l{right:100%;top:0;width:var(--h);height:100%;transform-origin:100% 50%;transform:rotateY(calc(var(--fl)*90deg))}
.w-r{left:100%;top:0;width:var(--h);height:100%;transform-origin:0 50%;transform:rotateY(calc(var(--fr)*-90deg))}
.w-l .out u,.w-r .out u,.w-l .out b,.w-r .out b{display:none}
.w-l .out,.w-r .out{background-size:calc(var(--s)*.3) calc(var(--s)*.15)}
.lid{position:absolute;left:calc(var(--s)*-.035);bottom:100%;width:calc(var(--s)*1.07);height:calc(var(--s)*1.04);transform-origin:50% 100%;transform:rotateX(calc(var(--lid)*-90deg + var(--fb)*(1 - var(--lid))*24deg))}
.sk{position:absolute;transform-style:preserve-3d}
.sk-f{left:0;bottom:100%;width:100%;height:calc(var(--s)*.17);transform-origin:50% 100%;transform:rotateX(calc(var(--sk)*-90deg))}
.sk-l{right:100%;top:0;width:calc(var(--s)*.17);height:100%;transform-origin:100% 50%;transform:rotateY(calc(var(--sk)*90deg))}
.sk-r{left:100%;top:0;width:calc(var(--s)*.17);height:100%;transform-origin:0 50%;transform:rotateY(calc(var(--sk)*-90deg))}
.sk-l .out u,.sk-r .out u{display:none}
.sk>i{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lid .out u{left:calc(41% + 1.2%)}
.lid__bow{position:absolute;left:50%;top:50%;width:50%;height:auto;transform:translate(-50%,-50%);overflow:visible;filter:drop-shadow(0 3px 4px rgba(51,32,15,.3))}
@media (max-width:860px){
  .make__stick{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;padding-bottom:70px}
  .make__list{grid-column:1;grid-row:3;min-height:170px;align-self:start}
  .stage{grid-column:1;grid-row:2;min-height:min(40vh,320px);--s:clamp(74px,min(22vw,15vh),130px)}
  .make__lead{display:none}
  .make__no{font-size:64px}
  .make__item p{font-size:14px}
  .make__dots{bottom:22px}
}

/* 箱らしさ: 面ごとの陰影・縁・接地影 */
.out::before,.in::before{content:"";position:absolute;inset:0;pointer-events:none}
.out::before{background:linear-gradient(180deg,rgba(255,255,255,var(--hi,0)),rgba(51,32,15,var(--lo,0)))}
.w-f .out{--hi:.04;--lo:.12}
.w-l .out,.w-r .out{--hi:0;--lo:.26}
.w-b .out{--hi:0;--lo:.18}
.sk-f .out{--hi:0;--lo:.2}
.sk-l .out,.sk-r .out{--lo:.3}
.lid>.out::before{background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,0) 55%,rgba(51,32,15,.08))}
.in::before{background:rgba(51,32,15,calc(var(--ishade,.06)*var(--fr)))}
.wall .in{--ishade:.2}
.base>.in{--ishade:.07}
.stage .shadow::after{content:"";position:absolute;left:24%;top:30%;width:52%;height:42%;background:radial-gradient(closest-side,rgba(51,32,15,.4),rgba(51,32,15,0));filter:blur(5px)}

.lid__bow .a{stroke:#fff3df}.lid__bow .b{stroke:#ffb347}.lid__bow .f{fill:#fff3df}.lid__bow .g{fill:#f58220}
.lid__bow{filter:drop-shadow(0 0 1px #33200f) drop-shadow(0 2px 3px rgba(51,32,15,.45))}
.out::before{mix-blend-mode:multiply}
.in{background:#fffdf8;outline-color:rgba(184,72,10,.6)}

/* ===== 私達の強み 1〜4: タブで切り替え(縦に長くならない) ===== */
.tabs__list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.tabs__tab{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 16px;text-align:left;border:2px solid var(--line);border-radius:20px;background:#fff;color:var(--blue-d);cursor:pointer;font-weight:700;font-size:15px;line-height:1.5;letter-spacing:.06em;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.tabs__tab:hover{border-color:var(--orange);transform:translateY(-2px)}
.tabs__no{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--peach-2,#ffefdb);color:var(--blue);font-size:17px;font-weight:900;transition:background .25s,color .25s}
.tabs__tab[aria-selected="true"]{background:var(--grad);border-color:transparent;color:var(--on-orange);box-shadow:0 8px 20px rgba(245,130,32,.3)}
.tabs__tab[aria-selected="true"] .tabs__no{background:var(--brown);color:#fff}
.tabs__panels{display:block}
.tabs__panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0;background:#fff;border-radius:32px;overflow:hidden;box-shadow:0 14px 36px rgba(51,32,15,.1)}
.tp__ph{position:relative;margin:0;min-height:100%}
.tp__ph img{width:100%;height:100%;object-fit:cover}
.tp__badge{position:absolute;left:18px;top:18px;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--grad);color:var(--on-orange);font-size:26px;font-weight:900;box-shadow:0 6px 16px rgba(51,32,15,.25)}
.tp__body{padding:clamp(22px,3vw,40px)}
.tp__ttl{font-size:clamp(20px,2.2vw,26px);color:var(--blue-d);letter-spacing:.08em;line-height:1.5;margin-bottom:6px}
.tp__sum{font-size:16px;font-weight:700;color:var(--blue);line-height:1.8;margin-bottom:18px}
.tp__pts{display:grid;gap:12px;counter-reset:pt;margin-bottom:18px}
.tp__pts li{position:relative;padding:12px 16px 12px 56px;background:var(--warm);border-radius:16px;counter-increment:pt;display:grid;gap:2px}
.tp__pts li::before{content:counter(pt);position:absolute;left:14px;top:14px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--orange);color:var(--on-orange);font-size:15px;font-weight:900}
.tp__pts b{font-size:15px;color:var(--blue-d);letter-spacing:.06em}
.tp__pts span{font-size:14px;line-height:1.9;color:var(--text)}
.tp__benefit{padding:14px 18px;border-left:6px solid var(--orange);background:#fff1de;border-radius:0 16px 16px 0;font-size:14px;line-height:1.9}
.tp__benefit em{display:block;font-style:normal;font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--blue);margin-bottom:2px}
.tp__more{margin-top:14px;font-size:13px}
.tp__more summary{cursor:pointer;color:var(--blue);font-weight:700;padding:6px 0;list-style:none}
.tp__more summary::before{content:"＋";margin-right:6px}
.tp__more[open] summary::before{content:"－"}
.tp__more p{margin-top:6px;padding:12px 14px;background:var(--warm);border-radius:12px;line-height:2;color:var(--muted)}
.tabs__panel .btn{margin-top:14px}
/* JSあり: 1つだけ表示 / JSなし・動きを減らす場合も内容は全て読める(縦に並べる) */
.tabs.is-tabs .tabs__panel{display:none}
.tabs.is-tabs .tabs__panel.is-on{display:grid;animation:tabIn .5s var(--ease)}
@keyframes tabIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html:not(.js-ready) .tabs__list{display:none}
html:not(.js-ready) .tabs__panels{gap:22px}
html:not(.js-ready) .tabs__panel[hidden]{display:grid}
@media (max-width:960px){
  .tabs__list{grid-template-columns:repeat(4,1fr);gap:8px}
  .tabs__tab{flex-direction:column;justify-content:center;min-height:60px;padding:8px;text-align:center;gap:2px}
  .tabs__t{display:none}
  .tabs__no{width:40px;height:40px;font-size:20px}
  .tabs__panel{grid-template-columns:1fr}
  .tp__ph{aspect-ratio:16/9;min-height:0}
}
@media (max-width:560px){.tp__pts li{padding-left:50px}}
/* 強み: 大きい画面ではポイントを3列にして、縦の長さを抑える */
@media (min-width:1100px){
  .tp__pts{grid-template-columns:repeat(3,1fr);gap:12px}
  .tp__pts li{padding:56px 14px 14px;align-content:start}
  .tp__pts li::before{left:14px;top:14px}
  .tp__pts span{font-size:13.5px;line-height:1.85}
  .tp__sum{margin-bottom:16px}
}

.tp__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.tp__chips li{padding:5px 14px;border-radius:999px;background:#ffe5c8;color:var(--blue-d);font-size:13px;font-weight:700;letter-spacing:.06em}
.tabs__panel{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
@media (max-width:960px){.tabs__panel{grid-template-columns:1fr}}

/* ===== 色の重なり対策(色は変えず、層・縁・台で解決) ===== */
.wrap,.intro__in,.biz__in,.entry__in,.know__head,.blobs,.items__head,.items__slider,.talk,.make__stick,.phero__in,.ft__in,.ft__legal{position:relative;z-index:3}
.bubble,.oval{z-index:3}
/* お知らせ帯: 白い台で、暗い写真の上でも読める */
.fv__news{background:rgba(255,255,255,.96);border-radius:999px;padding:6px 8px 6px 22px;box-shadow:0 8px 24px rgba(51,32,15,.22)}
.fv__news-list time{color:var(--muted)}
/* FVの文字: 白い曲線と重ならないよう暗幕+二重の影 */
.fv__catch{text-shadow:0 2px 2px rgba(51,32,15,.35),0 4px 30px rgba(51,32,15,.55)}
.fv__shade::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 72% 42%,rgba(51,32,15,.28),rgba(51,32,15,0) 70%)}
.fv__badge{box-shadow:0 10px 30px rgba(51,32,15,.3)}
/* 橙の面の上の装飾文字は控えめに */
.entry__flow{opacity:.09}
.biz .oval,.intro .bubble{border-color:#fff}
/* 橙の面の上の濃い茶の文字: 細字を避けて太めに */
.biz__p,.entry__p{font-weight:700}
/* 写真の上の小さな札は白い台を保証 */
.arch__tag,.fv__badge{background:#fff}

/* ===== 全体を動的に(動きを減らす設定では全て無効) ===== */
.pbar{position:fixed;left:0;top:0;width:100%;height:4px;background:var(--grad);transform-origin:0 50%;transform:scaleX(0);z-index:350;pointer-events:none}
.hd__bar{transition:height .35s var(--ease),box-shadow .35s}
.hd.is-compact .hd__bar{height:54px;box-shadow:0 10px 30px rgba(51,32,15,.22)}
.hd.is-compact .hd__logo img{height:30px}
.hd__logo img{transition:height .35s var(--ease)}
/* 見出し: マスクからせり上がる */
.lr{display:block;overflow:hidden;padding-bottom:.08em}
.lr__in{display:block}
html.js-ready .lr__in{opacity:0}
/* 写真: 上から開くワイプ+ゆっくり縮むズーム */
html.js-ready .wipe{clip-path:inset(0 0 100% 0)}
.wipe img{transform:scale(1.18)}
.wipe.is-in{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--ease)}
.wipe.is-in img{transform:none;transition:transform 1.6s var(--ease)}
/* FV: ゆっくり寄る写真 */
.fv__slider .splide__slide.is-active img{animation:kenburns 9s ease-out both}
@keyframes kenburns{from{scale:1.09}to{scale:1}}
/* ブロブ: ゆっくり形が変わる */
.blob{animation:morph 16s ease-in-out infinite}
.blob--b{animation-delay:-6s}
@keyframes morph{50%{border-radius:46% 54% 50% 50%/52% 46% 54% 48%}}
/* 傾き・磁石 */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .35s var(--ease)}
.tilt.is-hot{transition:transform .08s linear}
.ecard a:hover{--ty:-6px;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
/* カーソル(マウスのみ) */
.cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid var(--brown);box-shadow:0 0 0 2px #fff,inset 0 0 0 2px #fff;pointer-events:none;z-index:500;display:grid;place-items:center;font-size:12px;font-weight:900;color:var(--brown);opacity:0;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,opacity .3s}
.cur.is-on{opacity:1}
.cur.is-link{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(245,130,32,.28)}
.cur.is-view{width:78px;height:78px;margin:-39px 0 0 -39px;background:rgba(255,255,255,.92)}
/* 画面遷移の幕 */
.pt{position:fixed;inset:0;z-index:600;background:var(--orange);transform:translateY(100%);transition:transform .55s var(--ease);pointer-events:none;display:grid;place-items:center;border-radius:50% 50% 0 0/70px 70px 0 0}
.pt img{width:110px;height:auto;opacity:0;transition:opacity .3s .12s}
.pt.is-leaving{transform:translateY(0);border-radius:0}
.pt.is-leaving img{opacity:1}
html.pt-arrive .pt{transform:translateY(0);transition:none;border-radius:0}
html.pt-arrive .pt img{opacity:1;transition:none}
.pt.is-out{transform:translateY(-100%);transition:transform .6s var(--ease);border-radius:0 0 50% 50%/0 0 70px 70px}
.pt.is-out img{opacity:0}
@media (prefers-reduced-motion:reduce){
  .pt,.pbar,.cur{display:none!important}
  .blob,.fv__slider .splide__slide.is-active img{animation:none}
  .wipe,.wipe img{clip-path:none!important;transform:none!important}
  .lr__in{opacity:1!important}
}

/* ===== 箱の質感強化(A1〜A6)。--paper-tex を差し替えると実写の紙テクスチャに置換できる ===== */
.stage{--paper-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85 .55' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .12 0 0 0 0 .06 1.3 0 0 0 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--paper-size:calc(var(--s)*.9)}
/* A1 紙の繊維 + A3 面ごとの陰影(光は左上から) */
.out::before,.in::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--paper-tex) 0 0/var(--paper-size)}
.out::before{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(51,32,15,.10)),var(--paper-tex) 0 0/var(--paper-size)}
.w-f .out::before{background:linear-gradient(180deg,rgba(51,32,15,.16),rgba(255,255,255,.06) 40%,rgba(51,32,15,0)),var(--paper-tex) 0 0/var(--paper-size)}
.w-b .out::before{background:linear-gradient(0deg,rgba(51,32,15,.22),rgba(51,32,15,.06)),var(--paper-tex) 0 0/var(--paper-size)}
.w-l .out::before{background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(51,32,15,.2)),var(--paper-tex) 0 0/var(--paper-size)}
.w-r .out::before{background:linear-gradient(270deg,rgba(51,32,15,.28),rgba(51,32,15,.12)),var(--paper-tex) 0 0/var(--paper-size)}
.lid>.out::before{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,0) 45%,rgba(51,32,15,.12)),var(--paper-tex) 0 0/var(--paper-size)}
.sk .out::before{background:linear-gradient(180deg,rgba(51,32,15,.18),rgba(51,32,15,.05)),var(--paper-tex) 0 0/var(--paper-size)}
.item[data-it="1"] .out::before{box-shadow:inset 0 0 0 999px rgba(51,32,15,.05)}
.item[data-it="2"] .out::before{box-shadow:inset 0 0 0 999px rgba(255,255,255,.07)}
/* 内側: 折り目の周りを落とす(環境遮蔽) */
.in::before{background:radial-gradient(120% 120% at 50% 50%,rgba(51,32,15,0) 55%,rgba(51,32,15,.2)),var(--paper-tex) 0 0/var(--paper-size)}
.w-f .in::before,.w-b .in::before,.w-l .in::before,.w-r .in::before{background:linear-gradient(180deg,rgba(51,32,15,.22),rgba(51,32,15,0) 55%),var(--paper-tex) 0 0/var(--paper-size)}
/* A2 紙の厚み: 自由端に明るい芯(断面)を足す */
.out::after{content:"";position:absolute;pointer-events:none;inset:0;border:calc(var(--s)*.012) solid #fbf3e0;border-color:#fff7e6 #f1e2c4 #e6d3ae #f6ead0;box-shadow:inset 0 0 0 1px rgba(51,32,15,.16)}
.w-f .out::after{border-width:0 0 calc(var(--s)*.014) 0}
.w-b .out::after{border-width:calc(var(--s)*.014) 0 0 0}
.w-l .out::after,.w-r .out::after{border-width:0 calc(var(--s)*.014)}
.out::after{-webkit-mask:none}
.in{box-shadow:inset 0 0 calc(var(--s)*.1) rgba(51,32,15,.18)}
/* 蓋と身の隙間の影 */
.lid{filter:none}
.w-b .lid>.in{box-shadow:inset 0 calc(var(--s)*-.08) calc(var(--s)*.12) rgba(51,32,15,.35)}
/* A4 金箔押しの帯: 光が流れる + 浮き出しの影 */
.out u{background:linear-gradient(115deg,rgba(255,225,140,0) 35%,rgba(255,236,170,.6) 50%,rgba(255,225,140,0) 65%) 100% 0/260% 100%,var(--paper-tex) 0 0/var(--paper-size),var(--brown);box-shadow:inset 3px 0 0 rgba(255,179,71,.95),inset -3px 0 0 rgba(255,179,71,.95),0 0 3px rgba(51,32,15,.45);animation:kk-foil 4.8s ease-in-out infinite}
@keyframes kk-foil{0%,25%{background-position:100% 0,0 0,0 0}75%,100%{background-position:0 0,0 0,0 0}}
.rm .out u{animation:none}
@media (prefers-reduced-motion:reduce){.out u{animation:none}}
/* A5 積み上げた箱のばらつき(わずかな回転) */
.item[data-it="1"]{rotate:0 0 1 1.6deg}
.item[data-it="2"]{rotate:0 0 1 -1.2deg}
/* A6 接地影の二層化: 広い柔らかい影 + 接地部の濃い影 */
.stage .shadow::before{content:"";position:absolute;inset:26% 20%;background:radial-gradient(closest-side,rgba(51,32,15,.42),rgba(51,32,15,0));filter:blur(3px)}
.stage .shadow{filter:blur(7px)}

/* ===== 流れる輪郭文字をやめ、静かな表現へ ===== */
.flow-text{display:none}
.intro__photo::before{background:linear-gradient(180deg,rgba(255,241,222,.55),rgba(255,241,222,0) 28%,rgba(51,32,15,0) 50%,rgba(51,32,15,.55))}
.intro__cap{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:clamp(54px,7vw,96px);margin:0;max-width:1200px;margin-inline:auto;color:#fff;font-family:var(--serif);font-weight:600;font-size:clamp(22px,3.2vw,40px);letter-spacing:.28em;text-shadow:0 2px 18px rgba(51,32,15,.45)}
.intro__cap span{display:inline-block;padding-left:1.1em;border-left:1px solid rgba(255,255,255,.75)}
.entry__flow{inset:0;top:0;width:auto;height:auto;opacity:.09;background:var(--sg2) 0 0/90px 45px;-webkit-mask:linear-gradient(180deg,#000,rgba(0,0,0,0) 70%);mask:linear-gradient(180deg,#000,rgba(0,0,0,0) 70%)}
.entry__flow span{display:none}

/* ===== 数字帯(老舗らしい落ち着き) ===== */
:root{--serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","BIZ UDPMincho",serif}
.facts{background:#fff;border-bottom:1px solid var(--line);padding:clamp(34px,5vw,64px) var(--gut);position:relative;z-index:3}
.facts__in{list-style:none;margin:0 auto;padding:0;max-width:1180px;display:grid;grid-template-columns:repeat(5,1fr)}
.facts__in li{display:grid;gap:4px;justify-items:center;text-align:center;padding:6px 10px;border-left:1px solid var(--line)}
.facts__in li:first-child{border-left:0}
.facts__k{font-size:12px;letter-spacing:.3em;color:var(--orange-d);font-weight:700}
.facts__v{font-family:var(--serif);font-weight:600;font-size:clamp(15px,1.5vw,19px);color:var(--brown);letter-spacing:.08em;line-height:1.5}
.facts__v em{font-style:normal;font-size:clamp(30px,3.8vw,52px);line-height:1.1;margin:0 .06em;letter-spacing:.02em}
.facts__s{font-size:12px;color:var(--muted);letter-spacing:.12em}
@media (max-width:760px){
  .facts__in{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .facts__in li:nth-child(odd){border-left:0}
  .facts__in li:last-child{grid-column:1/-1;border-left:0}
}
/* 見出しだけ明朝(ロゴの筆記体とも調和) */
.intro__ttl,.biz__ttl,.entry__lead,.h-blue,.v-ttl{font-family:var(--serif);font-weight:600}

/* ===== 静かモード(既定) ===== */
.quiet .blob,.quiet .bubble,.quiet .fv__slider .splide__slide.is-active img{animation:none}
.quiet .pt,.quiet .cur{display:none!important}
.quiet .tilt{transform:none!important}
.ft__motion{background:none;border:0;padding:0;font:inherit;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ft__motion:hover,.ft__motion:focus-visible{color:var(--brown)}

/* ===== 橙の大面積を抑える: 生成り地 + 橙の細線(色は変えず面積だけ減らす) ===== */
.biz,.entry{background:#fdeeda;color:var(--brown)}
.biz::before,.entry::before{content:"";position:absolute;left:50%;top:clamp(34px,4vw,56px);width:1px;height:clamp(28px,3.4vw,44px);background:var(--orange);z-index:3}
.biz__ttl::after,.entry__lead::after{content:"";display:block;width:56px;height:0;border-top:1px solid var(--orange);margin:22px auto 0}
.biz .oval,.intro .bubble{border-color:#fff}
.entry__flow{background-image:var(--sg);opacity:.35}
.ecard a{border:1px solid var(--orange);box-shadow:0 10px 30px rgba(184,72,10,.1)}
.ecard a:hover{box-shadow:0 18px 40px rgba(184,72,10,.2)}

/* 完成形の実写(assets/img/box-complete.jpg を置いたときだけ出る) */
.stage__real{position:absolute;left:50%;top:50%;width:min(100%,560px);aspect-ratio:1;object-fit:cover;transform:translate(-50%,-50%);border-radius:24px;opacity:0;pointer-events:none;box-shadow:0 20px 50px rgba(51,32,15,.2)}
.is-static .stage__real,.rm .stage__real{opacity:1}

/* 人間確認 */
.fld--human .human__q{margin:6px 0 10px;font-size:14px;color:var(--muted)}
.fld--human .human__q strong{color:var(--brown);font-size:1.15em;letter-spacing:.14em;margin-left:.4em}

/* ===== 改行の整え ===== */
.ph{display:inline-block}
h1,h2,h3,h4,.fv__badge span,.arch__tag,.tk__card h3,.ecard strong,.ecard span,.btn .lb{text-wrap:balance;line-break:strict;word-break:auto-phrase}
p,li,dd,dt,blockquote,figcaption,small,td,th,.fv__badge,.make__item p,.shodo__p{text-wrap:pretty;line-break:strict;word-break:auto-phrase}
.kk-form label,.agree{line-break:strict;word-break:auto-phrase}

/* ===== 一所懸命(縦書き・中央): 1文字ずつ順に浮かび上がる。FVに少し重なり、スクロールで薄くなる ===== */
.shodo{--W:clamp(112px,15vw,200px);position:relative;z-index:3;margin:calc(var(--W)*-.5) 0 0;padding:0 var(--gut) clamp(40px,6vw,80px);pointer-events:none}
.shodo__defs{position:absolute;width:0;height:0}
.shodo__in{max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.shodo__col{position:relative;margin:0;width:var(--W);display:flex;flex-direction:column;font-size:0;line-height:0;opacity:var(--fade,1)}
.shodo__ch{display:block;height:auto;overflow:visible;align-self:center;margin-bottom:-3%}
.shodo__ch--1{rotate:-1.4deg}.shodo__ch--2{rotate:1deg}.shodo__ch--3{rotate:-.6deg}
.shodo__ink{fill:url(#kk-sumi)}
.shodo__bleed{fill:#2a1b10;opacity:.26}
.shodo__ch .sp{transform-box:fill-box}
.shodo__ch .sp>*{fill:#2a1b10}
.shodo__seal{position:absolute;left:calc(var(--W)*-.4);bottom:calc(var(--W)*.1);width:clamp(56px,6.6vw,92px);aspect-ratio:1;transform:rotate(-4deg);opacity:.93}
.shodo__seal svg{display:block;width:100%;height:100%;fill:#d3281f}
.shodo__txt{pointer-events:auto;margin-top:clamp(26px,4vw,48px)}
.shodo__eye{margin:0 0 14px;font-size:12px;letter-spacing:.4em;color:var(--orange-d);font-weight:700;display:flex;align-items:center;justify-content:center;gap:14px}
.shodo__eye::before,.shodo__eye::after{content:"";width:34px;border-top:1px solid var(--orange)}
.shodo__p{margin:0 auto 26px;font-family:var(--serif);font-weight:600;font-size:clamp(15px,1.8vw,22px);line-height:2;letter-spacing:.12em;color:var(--brown);max-width:22em}
html.js-ready:not(.rm) .shodo:not(.is-done) .shodo__ch,html.js-ready:not(.rm) .shodo:not(.is-done) .sp,html.js-ready:not(.rm) .shodo:not(.is-done) .shodo__seal,html.js-ready:not(.rm) .shodo:not(.is-done) [data-shodo-t]{opacity:0}
@media (max-width:640px){.shodo{--W:clamp(96px,30vw,140px)}.shodo__p{font-size:15px;line-height:1.9;letter-spacing:.08em}}

/* ===== 納品素材(2026-10)で箱の質感を実写寄りに: 紙の繊維・内紙・金箔の帯・完成形の写真 ===== */
.stage{--paper-tex:url("../img/paper-fiber.png");--paper-size:calc(var(--s)*1.2)}
.in{background:#fbf3e0 url("../img/paper-inner.jpg") 0 0/calc(var(--s)*1.1)}
.out u{background:linear-gradient(115deg,rgba(255,225,140,0) 35%,rgba(255,236,170,.55) 50%,rgba(255,225,140,0) 65%) 100% 0/260% 100%,url("../img/gold-band.jpg") center/cover,var(--brown)}
.stage__real{width:min(100%,640px);aspect-ratio:4/3;object-fit:cover;border-radius:0;box-shadow:none;-webkit-mask-image:radial-gradient(closest-side,#000 80%,rgba(0,0,0,0));mask-image:radial-gradient(closest-side,#000 80%,rgba(0,0,0,0))}

/* ===== 全面の水引をやめ、背景に紙の質感と青海波の透かし(ごくゆっくり視差)+章の入口に小さな結び ===== */
.ribbon,.knot-cap{display:none!important}
body{background:var(--warm)}
.intro,.know,.items,.talk,.sec,.shodo{isolation:isolate}
.intro::before,.know::before,.items::before,.talk::before,.sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;
  background:url("../img/seigaiha.svg") 0 calc(var(--sy,0)*-.035px)/160px 160px repeat;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.intro::after,.know::after,.items::after,.talk::after,.sec::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.09;background:url("../img/paper-fiber.png") 0 0/640px}
.kdiv{position:absolute;top:clamp(22px,3vw,40px);left:0;right:0;display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,22px);pointer-events:none}
.kdiv__knot{width:clamp(44px,4.6vw,60px);height:auto;overflow:visible;flex:none}
.kdiv__l{order:-1;flex:0 1 clamp(80px,16vw,230px);height:1px;background:linear-gradient(90deg,rgba(245,130,32,0),var(--orange));transform:scaleX(0);transform-origin:right center;transition:transform 1.2s .5s cubic-bezier(.2,.7,.2,1)}
.kdiv__l--r{order:1;background:linear-gradient(270deg,rgba(245,130,32,0),var(--orange));transform-origin:left center}
.kdiv__knot.is-on~.kdiv__l{transform:scaleX(1)}
.rm .kdiv__l,html:not(.js-ready) .kdiv__l{transform:none}

/* ===== 強調(引用符の代わり): 太字+橙の色+蛍光ペン風の下地 ===== */
.em{font-style:normal;font-weight:900;color:var(--orange-d);padding:0 .12em;background:linear-gradient(transparent 62%,rgba(245,130,32,.26) 62% 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ===== ご案内(お知らせ + 迷わず動ける入口) ===== */
.guide{position:relative;z-index:3;background:#fff;padding:clamp(34px,5vw,64px) var(--gut)}
.guide__in{max-width:1180px;margin:0 auto;display:grid;gap:clamp(22px,3vw,40px)}
.guide__in.has-news{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.guide__h{margin:0 0 12px;font-family:var(--serif);font-weight:600;font-size:clamp(18px,1.8vw,22px);letter-spacing:.18em;color:var(--brown);display:flex;align-items:center;gap:14px}
.guide__h::after{content:"";flex:1;border-top:1px solid var(--line)}
.guide__news ul{list-style:none;margin:0;padding:0}
.guide__news li{display:flex;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line)}
.guide__news time{font-size:12px;color:var(--muted);letter-spacing:.08em;flex:none}
.guide__news a{font-size:14.5px;font-weight:700;line-height:1.7}
.guide__news a:hover{color:var(--orange-d)}
.guide__links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px)}
.has-news .guide__links{grid-template-columns:repeat(2,1fr)}
.guide__links a{position:relative;display:grid;gap:3px;padding:18px 44px 18px 20px;border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:14px;background:var(--warm);transition:transform .35s var(--ease),box-shadow .35s}
.guide__links a:hover,.guide__links a:focus-visible{transform:translateY(-3px);box-shadow:0 12px 26px rgba(184,72,10,.14)}
.guide__links b{font-size:15px;color:var(--brown);letter-spacing:.08em}
.guide__links span{font-size:12.5px;color:var(--muted);letter-spacing:.06em}
.guide__links .arw{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:26px;height:26px}
@media (max-width:900px){.guide__links{grid-template-columns:repeat(2,1fr)}.guide__in.has-news{grid-template-columns:1fr}}
@media (max-width:480px){.guide__links{grid-template-columns:1fr}}

/* ===== スマホ: FVの見出しが左端で切れないように ===== */
@media (max-width:640px){
  .fv__catch{font-size:clamp(30px,10.4vw,52px);right:var(--gut);left:var(--gut);align-items:flex-end}
  .fv__line--2{margin-left:0}.fv__line--3{margin-left:0}.fv__line--4{margin-left:0}
  .fv__catch::before{left:-.1em}
}