/* ---------- HERO ---------- */
.hero{ position:relative; padding-top:clamp(48px,6vw,86px); padding-bottom:0; overflow:clip; background:var(--paper); }
.hero .wm{ top:-6px; left:-14px; color:#f0f3f8; }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:0; position:relative; z-index:2; }
.hero-copy{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  padding-bottom:clamp(56px,7vw,104px);
}
.hero-copy__head{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:0;
  align-items:end;
}
.hero-copy__main{ padding-right:40px; }
.hero-banners{ grid-column:1; padding-right:40px; }
.hero h1{ font-size:clamp(34px,5.2vw,68px); font-weight:900; line-height:1.28; letter-spacing:.01em; margin:20px 0 0; }
.hero h1 .b{ color:var(--blue); }
.hero h1 .r{ position:relative; }
.hero h1 .r::after{ content:""; position:absolute; left:0; right:0; bottom:.06em; height:.14em; background:var(--red); opacity:.85; z-index:-1; }
.hero-sub{ color:var(--ink-2); font-size:clamp(14px,1.2vw,16.5px); line-height:2.1; margin:28px 0 36px; max-width:48ch; }
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; }
.hero-banners{ display:flex; gap:14px; flex-wrap:wrap; margin-top:48px; padding-top:30px; border-top:1px solid var(--line); }
.hero-banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex:1 1 200px; max-width:280px; min-height:92px;
  padding:18px 18px 18px 22px;
  background:#fff; border:1px solid var(--line-2);
  box-shadow:0 14px 36px -22px rgba(21,30,60,.28);
  position:relative; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.hero-banner::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--blue); transition:width .25s var(--ease);
}
.hero-banner::after{
  content:""; position:absolute; right:-28px; top:-28px; width:88px; height:88px;
  background:var(--paper-2); clip-path:polygon(0 0,100% 0,0 100%);
  opacity:.85; pointer-events:none;
}
.hero-banner:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -20px rgba(21,30,60,.34); border-color:var(--line); }
.hero-banner:hover::before{ width:5px; }
.hero-banner__body{ position:relative; z-index:1; min-width:0; }
.hero-banner__en{
  display:block; font-family:var(--ff-en); font-weight:700; font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--blue);
}
.hero-banner__label{
  display:block; font-family:var(--ff-jp); font-weight:900; font-size:clamp(14px,1.4vw,16px);
  line-height:1.45; margin-top:8px; color:var(--ink);
}
.hero-banner .arr{ width:22px; flex:none; position:relative; z-index:1; color:var(--ink-3); transition:color .25s var(--ease); }
.hero-banner .arr::before{ content:""; position:absolute; inset:0; top:3px; height:1.5px; background:currentColor; }
.hero-banner .arr::after{ content:""; position:absolute; right:0; top:0; width:7px; height:7px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); transform-origin:right; }
.hero-banner:hover .arr{ color:var(--blue); animation:nudge .6s var(--ease); }
.hero-banner--ozone{ background:linear-gradient(135deg,#fff 0%,#fdf4f5 100%); }
.hero-banner--ozone::before{ background:var(--red); }
.hero-banner--ozone .hero-banner__en{ color:var(--red); }
.hero-banner--ozone::after{ background:rgba(214,31,43,.08); }
.hero-banner--ozone:hover .arr{ color:var(--red); }
.hero-banner--epilation{ background:linear-gradient(135deg,#fff 0%,#f2f6fc 100%); }
.hero-banner--epilation::before{ background:var(--blue); }
.hero-banner--epilation .hero-banner__en{ color:var(--blue); }
.hero-banner--epilation::after{ background:rgba(27,58,123,.08); }
.hero-banner--epilation:hover .arr{ color:var(--blue); }
.hero-visual{ position:relative; align-self:stretch; min-height:520px; }
.hero-visual .shot{ position:absolute; inset:0 calc(-1 * var(--gutter)) 0 0; }
.hero-visual .shot img{ width:100%; height:100%; clip-path:polygon(8% 0,100% 0,100% 100%,0 100%); }
.hero-visual .badge{ position:absolute; left:-34px; bottom:64px; background:#fff; box-shadow:0 24px 60px -28px rgba(21,30,60,.4); padding:20px 26px; z-index:3; border-left:3px solid var(--red); }
.hero-visual .badge .en{ font-size:10px; letter-spacing:.22em; color:var(--blue); font-weight:700; }
.hero-visual .badge b{ display:block; font-family:var(--ff-jp); font-weight:900; font-size:18px; margin-top:6px; }
.hero-visual .deco{ position:absolute; top:34px; left:-50px; display:flex; gap:5px; z-index:3; }
.hero-visual .deco i{ width:18px; height:18px; display:block; }
.tri{ clip-path:polygon(0 0,100% 0,0 100%); }

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(36px,5vw,80px); align-items:center; }
.about-visual{ position:relative; }
.about-visual .figpanel > img{ width:100%; height:440px; clip-path:polygon(0 0,100% 0,100% 100%,7% 100%); }
.about-visual .sub{ position:absolute; right:-32px; bottom:-36px; width:46%; height:200px; }
.about-visual .sub img{ width:100%; height:100%; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); border:6px solid #fff; object-fit:cover; }
.about-body h2{ font-size:clamp(24px,3vw,38px); font-weight:900; line-height:1.5; }
.about-body p{ color:var(--ink-2); margin:24px 0; line-height:2.1; font-size:15px; }
.about-sign{ display:flex; align-items:baseline; gap:14px; margin-top:30px; }
.about-sign small{ color:var(--ink-3); font-size:12px; letter-spacing:.06em; }
.about-sign b{ font-family:var(--ff-jp); font-weight:900; font-size:18px; }

/* ---------- STRENGTH ---------- */
.str-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.str-item{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(28px,3vw,46px); background:#fff; position:relative; transition:background .3s var(--ease); }
.str-item:hover{ background:var(--paper-2); }
.str-item .n{ display:flex; align-items:baseline; gap:14px; margin-bottom:20px; }
.str-item .n .num-en{ font-size:clamp(40px,5vw,64px); }
.str-item .n .en{ font-family:var(--ff-en); font-weight:700; font-size:11px; letter-spacing:.22em; color:var(--ink-3); padding-bottom:8px; }
.str-item h3{ font-size:clamp(19px,2vw,24px); font-weight:900; line-height:1.5; margin-bottom:14px; }
.str-item p{ color:var(--ink-2); font-size:14px; line-height:2; margin:0; }
.str-item .bar{ position:absolute; left:0; top:0; width:3px; height:0; background:var(--blue); transition:height .4s var(--ease); }
.str-item:hover .bar{ height:100%; }

/* ---------- SERVICE ---------- */
.svc-list{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.svc-row{ display:grid; grid-template-columns:80px 1fr 2.2fr auto; gap:clamp(20px,3vw,46px); align-items:center; padding:clamp(26px,3vw,40px) 0; border-bottom:1px solid var(--line); transition:transform .3s var(--ease); }
.svc-row:hover{ transform:translateX(14px); }
.svc-row .num-en{ font-size:clamp(28px,3vw,40px); }
.svc-row h3{ font-size:clamp(18px,2vw,23px); font-weight:900; white-space:nowrap; }
.svc-row h3 .en{ display:block; font-family:var(--ff-en); font-weight:700; font-size:11px; letter-spacing:.2em; color:var(--blue); margin-top:8px; }
.svc-row p{ color:var(--ink-2); font-size:14px; line-height:1.95; margin:0; }
.svc-row .go{ width:46px; height:46px; border:1px solid var(--line-2); display:grid; place-items:center; flex:none; transition:.3s var(--ease); }
.svc-row:hover .go{ background:var(--blue); border-color:var(--blue); }
.svc-row .go svg{ width:16px; }
.svc-row:hover .go svg{ stroke:#fff; }

/* ---------- NEWS ---------- */
.news-grid{ display:grid; grid-template-columns:.5fr 1.5fr; gap:clamp(30px,5vw,70px); }
.news-list{ border-top:1px solid var(--line); }
.news-list a{ display:grid; grid-template-columns:120px 90px 1fr auto; gap:24px; align-items:center; padding:22px 4px; border-bottom:1px solid var(--line); transition:.25s var(--ease); }
.news-list a:hover{ background:var(--paper-2); padding-inline:14px; }
.news-list time{ font-family:var(--ff-en); font-weight:600; font-size:13px; color:var(--ink-3); }
.news-list .cat{ font-family:var(--ff-jp); font-weight:700; font-size:11px; letter-spacing:.04em; color:var(--blue); border:1px solid var(--line-2); padding:3px 0; text-align:center; }
.news-list p{ margin:0; font-size:14.5px; font-weight:500; }
.news-list .arr{ width:24px; }

@media (max-width:980px){
  .hero{ padding-top:0; overflow:visible; }
  .hero .wm{ display:none; }
  .hero-copy{
    display:block;
    padding-bottom:clamp(40px,6vw,64px);
  }
  .hero-copy__head{
    display:grid;
    position:relative;
    grid-template-columns:1fr;
    align-items:stretch;
    margin-inline:calc(-1 * var(--gutter));
    padding-inline:var(--gutter);
    padding-top:clamp(32px,5vw,56px);
    overflow:hidden;
    isolation:isolate;
  }
  .hero-copy__main{
    position:relative;
    z-index:2;
    padding-right:0;
  }
  .hero-visual{
    position:absolute;
    inset:0;
    z-index:0;
    min-height:0;
    margin:0;
    width:auto;
    pointer-events:none;
  }
  .hero-visual .deco{ display:none; }
  .hero-visual .shot{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-height:none;
    aspect-ratio:unset;
  }
  .hero-visual .shot::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.78) 42%,rgba(255,255,255,.94) 72%,#fff 100%);
  }
  .hero-visual .shot img{
    clip-path:none;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 30%;
  }
  .hero-visual .fig-tag,
  .hero-visual .badge{ display:none; }
  .hero-banners{
    position:relative;
    z-index:2;
    padding-right:0;
    background:var(--paper);
  }
  .about-grid,.news-grid{ grid-template-columns:1fr; }
  .about-visual .figpanel > img{ height:340px; }
  .str-grid{ grid-template-columns:1fr; }
  .svc-row{ grid-template-columns:54px 1fr; grid-template-areas:"n t" "p p" "g g"; gap:14px 20px; }
  .svc-row:hover{ transform:none; }
  .svc-row h3{ white-space:normal; }
  .svc-row .num-en{ grid-area:n; } .svc-row h3{ grid-area:t; } .svc-row p{ grid-area:p; } .svc-row .go{ grid-area:g; justify-self:start; }
}
@media (max-width:560px){
  .hero-banners{ gap:12px; margin-top:32px; padding-top:24px; }
  .hero-banner{ flex:1 1 100%; max-width:none; }
  .news-list a{ grid-template-columns:1fr; gap:6px; }
  .news-list .arr{ display:none; }
}