/* ============================================================
   maru-M  home.css — トップページ固有
   ============================================================ */

/* ---------- hero ---------- */
.hero{min-height:100svh;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,var(--red-top) 0%,#9e0a21 50%,var(--red-deep) 100%);padding:calc(94 * var(--u) + 40px) 24px 60px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20%;background:radial-gradient(42% 38% at 50% 45%,rgba(255,120,130,.16),transparent 70%);animation:breathe 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes breathe{from{transform:translate(-3%,-2%) scale(.95)}to{transform:translate(3%,3%) scale(1.08)}}
.hero .tag{font-family:var(--futura);font-style:italic;font-weight:500;color:var(--red-dark);font-size:clamp(14px,1.615vw,31px);letter-spacing:.12em;margin-bottom:clamp(28px,5vw,96px);opacity:0;animation:tagIn 1.3s var(--ease) .5s forwards}
@keyframes tagIn{from{opacity:0;letter-spacing:.5em;transform:translateY(8px)}to{opacity:1;letter-spacing:.12em;transform:none}}
.hero .logo-wrap{will-change:transform;position:relative}
.hero .logo{width:clamp(210px,23.75vw,456px);opacity:0;animation:logoIn 1.4s var(--ease) .25s forwards,floaty 7s ease-in-out 1.7s infinite}
@keyframes logoIn{from{opacity:0;transform:scale(.9) translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero .just{font-family:var(--futura);font-style:italic;font-weight:500;color:var(--red-dark);font-size:clamp(18px,2.63vw,50px);letter-spacing:.32em;margin-top:clamp(22px,2.3vw,44px);padding-left:.32em;opacity:0;animation:tagIn2 1.3s var(--ease) .8s forwards}
@keyframes tagIn2{from{opacity:0;letter-spacing:.7em;transform:translateY(8px)}to{opacity:1;letter-spacing:.32em;transform:none}}
.hero .cue{position:absolute;left:50%;bottom:max(22px,calc(48 * var(--u)));width:1px;height:max(44px,calc(80 * var(--u)));background:rgba(255,255,255,.22);overflow:hidden;opacity:0;animation:fadeIn 1s 1.6s forwards}
.hero .cue::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:#fff;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{top:-100%}60%{top:100%}100%{top:100%}}
@keyframes fadeIn{to{opacity:1}}

/* ---------- 事業概要：吹き出しボックス ---------- */
.about{padding:calc(70 * var(--u)) 0 0;background:linear-gradient(180deg,var(--red-deep) 0%,#9a0a20 45%,#af0b21 100%);position:relative;overflow:hidden}
.about-box{margin:calc(96 * var(--u)) auto 0;background:var(--gray);border-radius:clamp(44px,5.8vw,112px);color:var(--ink);padding:0 clamp(18px,2.4vw,46px);position:relative;cursor:default;transition:border-radius .6s var(--ease),box-shadow .6s;box-shadow:0 20px 60px rgba(60,0,8,.0)}
.about-box.open{border-radius:clamp(36px,4.2vw,80px);box-shadow:0 30px 80px rgba(60,0,8,.28)}
.about-box .row{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--ease)}
.about-box.open .row{grid-template-rows:1fr}
.about-box .row>div{overflow:hidden;min-height:0}
.about-box .main{text-align:center;font-weight:900;font-size:clamp(17px,2.7vw,52px);letter-spacing:.07em;line-height:1.5;padding:clamp(28px,4.1vw,80px) 0;transition:padding .65s var(--ease)}
.about-box.open .main{padding:clamp(14px,1.25vw,24px) 0 clamp(14px,1.2vw,22px)}
.about-box .main .w{display:inline-block;white-space:nowrap}
.bub{background:var(--red-dark);color:#fff;border-radius:clamp(22px,2.7vw,52px);text-align:center;font-weight:900;letter-spacing:.08em;line-height:1.5;position:relative;padding:clamp(12px,1.4vw,26px) clamp(18px,2vw,40px);box-shadow:0 10px 30px rgba(80,0,10,.25);opacity:0;transform:translateY(16px) scale(.96);transition:opacity .5s,transform .55s var(--ease)}
.about-box.open .bub{opacity:1;transform:none}
.bub::before,.bub::after{content:"";position:absolute;width:0;height:0;border-left:clamp(7px,.8vw,14px) solid transparent;border-right:clamp(7px,.8vw,14px) solid transparent;transform:translateX(-50%);left:var(--t1,20%)}
.bub::before{display:none}
.bub.up::after{bottom:calc(-1 * clamp(10px,1.2vw,22px));border-top:clamp(10px,1.2vw,22px) solid var(--red-dark)}
.bub.down::before,.bub.down::after{top:calc(-1 * clamp(10px,1.2vw,22px));border-bottom:clamp(10px,1.2vw,22px) solid var(--red-dark)}
.bub.down.two::before{display:block;left:var(--t1,25%)}
.bub.down.two::after{left:var(--t2,75%)}
.bub .t{font-size:clamp(13px,1.745vw,33.5px)}
.bub .s{font-size:clamp(12px,1.42vw,27.3px)}
.bub .n{display:block;font-size:clamp(9px,.9vw,17.3px);font-weight:500;letter-spacing:.04em;margin-top:.2em;opacity:.95}
.top-bubs{display:flex;gap:clamp(12px,1.5vw,28px);padding:clamp(22px,3.4vw,66px) 0 clamp(22px,2.4vw,46px);align-items:flex-end}
.top-bubs .bub{flex:1}
.top-bubs .bub:nth-child(2){transition-delay:.08s}
.bot-bub{padding:clamp(22px,2.4vw,46px) 0 clamp(26px,3.3vw,64px)}
.bot-bub .bub{transition-delay:.16s;font-size:clamp(12px,1.62vw,31px);line-height:1.6;letter-spacing:.02em;padding-left:clamp(14px,1.4vw,28px);padding-right:clamp(14px,1.4vw,28px)}

.reach{text-align:center;margin-top:calc(150 * var(--u));font-weight:900;color:var(--w2);letter-spacing:.12em;font-size:clamp(20px,3.07vw,59px);line-height:1.5}
.reach .l2{margin-top:clamp(14px,1.5vw,28px);display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.5vw,30px);flex-wrap:wrap}
.ip-pill{display:inline-flex;align-items:baseline;justify-content:center;border:1px solid rgba(255,70,80,.55);border-radius:999px;font-size:clamp(28px,4.2vw,81px);line-height:1;padding:.22em .6em .24em;background:rgba(255,255,255,.015);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);position:relative;overflow:hidden}
.ip-pill::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);transform:translateX(-120%);animation:pillShine 4.5s var(--ease) 2s infinite}
@keyframes pillShine{0%{transform:translateX(-120%)}30%,100%{transform:translateX(120%)}}
.ip-pill .ip{font-size:1em;letter-spacing:.1em;line-height:1}
.ip-pill .ka{font-size:.73em;line-height:1}

/* ---------- IPをツクル／ミガク タブパネル ---------- */
.ipwrap{position:relative;margin-top:calc(240 * var(--u));padding-bottom:calc(140 * var(--u));--fr:clamp(22px,2.5vw,48px)}
.ipwrap .mark{position:absolute;left:50%;top:calc(-140 * var(--u));width:clamp(260px,37vw,710px);aspect-ratio:207/196;transform:translateX(-50%);background:rgba(0,0,0,.11);-webkit-mask:url(../logo/symbol-white.svg) center/contain no-repeat;mask:url(../logo/symbol-white.svg) center/contain no-repeat;pointer-events:none;will-change:transform}
.ip-tabs{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,6.1vw,117px)}
.tab{height:max(54px,calc(140 * var(--u)));border:1px solid rgba(255,70,80,.6);border-radius:999px;background:none;cursor:pointer;color:#f2f2f2;font-weight:900;letter-spacing:.14em;display:flex;align-items:center;justify-content:center;position:relative;transition:background .45s,color .45s,border-radius .45s,border-color .45s,transform .25s var(--ease);will-change:transform}
.tab .tx{display:inline-flex;align-items:baseline;gap:.05em;line-height:1;padding-top:.04em}
.tab .ip{font-size:clamp(22px,3.46vw,66px);line-height:1}.tab .wo{font-size:clamp(16px,2.59vw,49.7px);line-height:1}
.tab:hover{background:rgba(255,255,255,.06)}
.ipwrap.open .tab.on{background:var(--panel);color:var(--red-dark);border-color:var(--panel);border-radius:var(--fr) var(--fr) 0 0;transform:none!important}
.ipwrap.open .tab.on::before,.ipwrap.open .tab.on::after{content:"";position:absolute;bottom:0;width:var(--fr);height:var(--fr);background:var(--panel)}
.ipwrap.open .tab.on:first-child::after{right:calc(-1 * var(--fr));-webkit-mask:radial-gradient(circle var(--fr) at 100% 0,transparent 0 calc(100% - 1px),#000 100%);mask:radial-gradient(circle var(--fr) at 100% 0,transparent 0 calc(100% - 1px),#000 100%)}
.ipwrap.open .tab.on:first-child::before{display:none}
.ipwrap.open .tab.on:last-child::before{left:calc(-1 * var(--fr));-webkit-mask:radial-gradient(circle var(--fr) at 0 0,transparent 0 calc(100% - 1px),#000 100%);mask:radial-gradient(circle var(--fr) at 0 0,transparent 0 calc(100% - 1px),#000 100%)}
.ipwrap.open .tab.on:last-child::after{display:none}
.panel{position:relative;z-index:1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.ipwrap.open .panel{grid-template-rows:1fr}
.panel>.pin{overflow:hidden;min-height:0}
.pbody{background:var(--panel) url(../img/bg-sketch.jpg) center/cover;border-radius:var(--fr);position:relative;padding:calc(60 * var(--u)) calc(82 * var(--u)) calc(95 * var(--u));overflow:hidden;color:var(--ink-2)}
.pbody::before{content:"";position:absolute;inset:0;background:rgba(241,242,241,.86);pointer-events:none}
.pbody::after{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.pbody.lit::after{opacity:1}
.ipwrap.open[data-on="0"] .pbody{border-top-left-radius:0}
.ipwrap.open[data-on="1"] .pbody{border-top-right-radius:0}
.pane{position:relative;z-index:1;display:none}
.pane.on{display:block}
.pane.on .card{animation:cardIn .7s var(--ease) both}
.pane.on .card:nth-child(2){animation-delay:.1s}.pane.on .card:nth-child(3){animation-delay:.2s}.pane.on .card:nth-child(4){animation-delay:.3s}.pane.on .card:nth-child(5){animation-delay:.4s}
.pane.on .migaku-cta{animation:cardIn .7s var(--ease) .5s both}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
.cards{display:grid;gap:calc(52 * var(--u));max-width:1120px;margin:0 auto}
.cards.tsukuru{grid-template-columns:543fr 634fr;align-items:end}
.cards.migaku{grid-template-columns:1fr 1fr}
.card{background:rgba(255,255,255,.78);border:1px solid var(--card-line);border-radius:clamp(20px,2.1vw,40px);box-shadow:0 14px 34px rgba(60,0,8,.16);position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .35s var(--ease),box-shadow .35s;will-change:transform}
.card.lift{box-shadow:0 26px 50px rgba(60,0,8,.24)}
.card .ct{padding:calc(26 * var(--u)) calc(32 * var(--u)) 0}
.card h3{font-weight:400;font-size:clamp(15px,1.7vw,32px);letter-spacing:.06em;line-height:1.3;color:var(--ink-2);padding-left:clamp(10px,.9vw,18px);border-left:clamp(3px,.26vw,5px) solid var(--red-dark);margin-left:calc(-14 * var(--u))}
.card ul{margin-top:calc(12 * var(--u));font-size:clamp(11px,1.08vw,21px);letter-spacing:.04em;line-height:1.75;color:var(--ink-2)}
.card ul li::before{content:"・"}
.card .vis{width:100%;transition:transform .6s var(--ease)}
.card.lift .vis{transform:scale(1.02)}
.card.full{grid-column:1/-1}
.cards.migaku .card h3{font-size:clamp(13px,1.35vw,26px)}
.card.c{aspect-ratio:1241/322;display:flex;align-items:center;overflow:visible}
.card.c .ct{padding-bottom:calc(28 * var(--u));width:44%}
.card.c .vis{position:absolute;right:0;top:-18%;height:129%;width:auto;max-width:none}
.card.a .vis{margin-top:calc(16 * var(--u))}
.card.h{padding:0;border:0;background:none}
.migaku-cta{margin-top:calc(60 * var(--u));display:flex;justify-content:center;align-items:center;position:relative;padding-right:calc(170 * var(--u));max-width:1120px;margin-left:auto;margin-right:auto}
.badge{position:absolute;right:calc(-23 * var(--u));top:50%;width:clamp(150px,19.1vw,367px);aspect-ratio:367/236;transform:translateY(-54%) rotate(-7deg);border-radius:50%;background:radial-gradient(ellipse at 40% 35%,#b5101f,#8d0a19 85%);box-shadow:0 14px 30px rgba(60,0,8,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--yellow);font-weight:900;letter-spacing:.04em;line-height:1.25;font-size:clamp(11px,1.69vw,32.4px);animation:wob 3.2s ease-in-out infinite}
.badge::before{content:"";position:absolute;inset:calc(6 * var(--u) + 3px);border:1px solid rgba(255,255,255,.9);border-radius:50%}
.badge b{font-size:1.32em;display:block;margin-top:.1em}
@keyframes wob{0%,100%{transform:translateY(-54%) rotate(-7deg)}50%{transform:translateY(-58%) rotate(-5deg)}}

/* ---------- 企業理念 ---------- */
.phil{position:relative;overflow:hidden;padding:calc(130 * var(--u)) 0 calc(330 * var(--u));text-align:center}
.phil .notes{position:absolute;left:0;top:-6%;width:100%;aspect-ratio:2000/1494;background:url(../img/bg-notes.jpg) center top/cover;opacity:.2;mix-blend-mode:multiply;pointer-events:none;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent);will-change:transform}
.phil .in{position:relative}
.phil .h2{color:var(--ink-2)}
.mission{margin-top:calc(160 * var(--u))}.vision{margin-top:calc(300 * var(--u))}.value{margin-top:calc(230 * var(--u))}

/* ---------- お知らせ・会社概要 ---------- */
.news{padding:calc(120 * var(--u)) 0 calc(120 * var(--u));border-bottom:1px solid rgba(255,255,255,.35)}
.news .h2,.company .h2{color:#fff}
.nlist{margin:calc(70 * var(--u)) auto 0;max-width:1040px;border-top:1px solid var(--w3)}
.nlist li{display:grid;grid-template-columns:max(96px,calc(190 * var(--u))) 1fr;gap:12px;padding:clamp(14px,1.4vw,26px) 4px;border-bottom:1px solid var(--w3);font-weight:300;color:var(--w3);font-size:clamp(14px,1.5vw,28px);letter-spacing:.06em}
.nlist time{font-family:var(--futura);font-weight:400;letter-spacing:.1em}
.company{padding:calc(130 * var(--u)) 0 calc(150 * var(--u));overflow:hidden}
.company .grid{display:grid;grid-template-columns:1fr 606fr;gap:calc(60 * var(--u));align-items:start;max-width:1280px;margin:0 auto}
.company .grid>div:first-child{padding-left:calc(100 * var(--u))}
.company .h2{text-align:center;max-width:670px}
.ctable{margin-top:calc(110 * var(--u));max-width:670px}
.ctable .rw{display:grid;grid-template-columns:max(100px,calc(190 * var(--u))) 1fr;padding:clamp(16px,2.1vw,40px) 0;font-weight:300;color:var(--w3);font-size:clamp(15px,1.9vw,36.4px);letter-spacing:.1em;line-height:1.4;position:relative}
.ctable .rw span,.ctable .rw b{white-space:nowrap;font-weight:300}
.ctable .ln{height:1px;background:var(--w3)}
.company .store{width:100%;max-width:606px;opacity:.9;margin-top:calc(-20 * var(--u));will-change:transform}

/* ---------- お問合せ ---------- */
.contact{padding:calc(130 * var(--u)) 0 calc(170 * var(--u));text-align:center}
.contact .h2{color:var(--ink-2)}

/* ---------- スクロール連動パララックス（対応ブラウザのみ・メインスレッド不使用） ---------- */
@supports (animation-timeline: view()){
  .hero .logo-wrap{animation:heroPar linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes heroPar{to{transform:translateY(22vh);opacity:.2}}
  .ipwrap .mark{animation:markPar linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes markPar{from{transform:translateX(-50%) translateY(14%) rotate(-8deg)}to{transform:translateX(-50%) translateY(-14%) rotate(8deg)}}
  .phil .notes{animation:notesPar linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes notesPar{from{transform:translateY(-5%)}to{transform:translateY(7%)}}
  .company .store{animation:storePar linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes storePar{from{transform:translateY(8%)}to{transform:translateY(-8%)}}
  .about-box,.reach{animation:softPar linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  @keyframes softPar{from{transform:translateY(40px)}to{transform:none}}
}

/* ---------- レスポンシブ ---------- */
@media (max-width:1100px){
  .company .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .about-box{padding:0 18px}
  .top-bubs{flex-direction:column;align-items:stretch;gap:14px}
  .bub .n{letter-spacing:0}
  .ip-tabs{gap:14px}
  .ipwrap{--fr:22px;margin-top:90px;padding-bottom:70px}
  .ipwrap .mark{top:-40px;width:320px}
  .pbody{padding:34px 16px 36px}
  .cards{gap:20px}
  .cards.tsukuru,.cards.migaku{grid-template-columns:1fr}
  .card .ct{padding:18px 20px 0}
  .card h3{margin-left:-6px;font-size:18px}
  .card ul{font-size:13px;margin-top:8px}
  .card ul li{display:inline-block;margin-right:12px}
  .cards.migaku .card h3{font-size:16px}
  .card.c{aspect-ratio:auto;display:block}
  .card.c .ct{width:auto;padding-bottom:0}
  .card.c .vis{position:static;height:auto;width:100%;margin-top:6px}
  .card.a .vis,.card.b .vis{margin-top:8px}
  .migaku-cta{flex-direction:column;padding:0;gap:18px;margin-top:34px}
  .badge{position:static;transform:rotate(-5deg);width:190px;animation:none}
  .reach{margin-top:70px}
  .phil{padding:70px 0 110px}
  .mission{margin-top:60px}.vision{margin-top:110px}.value{margin-top:100px}
  .news{padding:70px 0}
  .nlist{margin-top:34px}
  .company{padding:70px 0 80px}
  .company .grid{grid-template-columns:1fr;gap:34px}
  .company .grid>div:first-child{padding-left:0}
  .ctable{margin:40px auto 0}
  .ctable .rw{grid-template-columns:92px 1fr;font-size:15px;padding:16px 0}
  .company .store{max-width:300px;margin:0 auto}
  .contact{padding:70px 0 90px}
}
@media (max-width:480px){
  .hero{padding-top:110px}
  .hero .logo{width:62vw}
  .about-box .main{font-size:17px;letter-spacing:.06em}
  .about-box .main .w{white-space:normal}
  .bub .t{font-size:14px}.bub .s{font-size:13px}.bot-bub .bub{font-size:12.5px}
  .tab .ip{font-size:22px}.tab .wo{font-size:16px}.tab{letter-spacing:.06em}
  .ip-pill .ip{font-size:28px}
  .reach{font-size:18px;letter-spacing:.06em}
  .reach .l2{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.hero .tag,.hero .logo,.hero .just,.hero .cue,.ip-pill::before,.badge,.pane.on .card,.pane.on .migaku-cta,.hero .logo-wrap,.ipwrap .mark,.phil .notes,.company .store,.about-box,.reach{animation:none!important;opacity:1;transform:none!important}
  .bub,.tab,.card{transition:none!important}
}