@charset "UTF-8";
/* ==========================================================================
   INUNEKOLOGY / 広告専用LP
   Base : Navy #0C3074 × White
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
-------------------------------------------------------------------------- */
:root{
  --navy:        #0C3074;
  --navy-deep:   #081F4D;
  --navy-dark:   #061735;
  --navy-tint:   #E8EDF7;
  --navy-line:   #C7D3E8;
  --ink:         #24272E;
  --ink-soft:    #555B66;
  --ink-mute:    #8A909B;
  --paper:       #FFFFFF;
  --paper-warm:  #F7F6F3;
  --paper-cool:  #F4F6FA;
  --line:        #E4E3DF;
  --gold:        #B69355;

  --wrap:        1080px;
  --wrap-narrow: 760px;
  --pad:         clamp(20px, 5.4vw, 40px);

  --font-ja:     "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-min:    "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-en:     "Libre Baskerville", "Zen Old Mincho", serif;

  --ease:        cubic-bezier(.22,.61,.36,1);
  --radius:      14px;
  --shadow-sm:   0 2px 10px rgba(12,48,116,.06);
  --shadow-md:   0 10px 34px rgba(12,48,116,.10);
  --shadow-cta:  0 10px 26px rgba(12,48,116,.28);
}

/* --------------------------------------------------------------------------
   2. Reset
-------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,p,ul,ol,li,figure,dl,dd,details,summary{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
s{ text-decoration-thickness:1px; }
summary::-webkit-details-marker{ display:none; }

body{
  font-family:var(--font-ja);
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  line-height:1.9;
  font-size:15px;
  letter-spacing:.02em;
  overflow-x:hidden;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  padding-bottom:0;
}
@media (min-width:768px){ body{ font-size:16px; } }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{
  width:1em; height:1em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico--img{ stroke:none; }

.pc{ display:none; }
@media (min-width:768px){
  .pc{ display:inline; }
  .sp{ display:none; }
}

/* --------------------------------------------------------------------------
   3. Layout helpers
-------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:calc(var(--wrap) + var(--pad)*2); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:calc(var(--wrap-narrow) + var(--pad)*2); }

.sec{ padding-block:clamp(56px, 11vw, 104px); position:relative; }
.sec--empathy{ background:var(--paper); }
.sec--about{ background:var(--paper-cool); }
.sec--care{ background:var(--paper); }
.sec--why{ background:var(--navy); color:#fff; }
.sec--trust{ background:var(--paper-warm); }
.sec--howto{ background:var(--paper); }
.sec--voice{ background:var(--paper-cool); }
.sec--offer{ background:var(--navy-deep); color:#fff; }
.sec--faq{ background:var(--paper); }
.sec--last{ background:var(--navy); color:#fff; text-align:center; }

/* --------------------------------------------------------------------------
   4. Typography blocks
-------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.22em; color:var(--navy);
  display:flex; align-items:center; gap:10px;
  margin-bottom:16px;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--navy-line); }
.eyebrow--light{ color:#A9BEE4; }
.eyebrow--light::after{ background:rgba(255,255,255,.25); }
.ttl--center + .eyebrow{ justify-content:center; }
.sec--about .eyebrow, .sec--care .eyebrow, .sec--why .eyebrow,
.sec--trust .eyebrow, .sec--voice .eyebrow, .sec--faq .eyebrow{
  justify-content:center;
}
.sec--about .eyebrow::before, .sec--care .eyebrow::before, .sec--why .eyebrow::before,
.sec--trust .eyebrow::before, .sec--voice .eyebrow::before, .sec--faq .eyebrow::before{
  content:""; flex:1; height:1px; background:var(--navy-line);
}
.sec--why .eyebrow::before{ background:rgba(255,255,255,.25); }

.ttl{
  font-family:var(--font-min);
  font-weight:600;
  font-size:clamp(20px, 5.2vw, 27px);
  line-height:1.66;
  letter-spacing:.03em;
  color:var(--navy);
}
.ttl--lg{ font-size:clamp(20px, 5.5vw, 34px); line-height:1.62; }
.ttl--center{ text-align:center; }
.ttl--light{ color:#fff; }
.ttl em{ font-style:normal; position:relative; white-space:nowrap; }
.ttl em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.3em;
  background:linear-gradient(transparent 62%, rgba(182,147,85,.38) 62%);
  z-index:-1;
}
.ttl--light em::after{ background:linear-gradient(transparent 62%, rgba(182,147,85,.55) 62%); }
.ttl__lead{
  margin-top:18px; text-align:center;
  font-size:clamp(13px, 3.5vw, 15px); line-height:2; color:var(--ink-soft);
}
.ttl__lead--light{ color:#C3D0E8; }

.note{ font-size:11.5px; line-height:1.85; color:var(--ink-mute); margin-top:18px; }
.note--center{ text-align:center; }
.note--light{ color:rgba(255,255,255,.55); }

/* --------------------------------------------------------------------------
   5. Buttons
-------------------------------------------------------------------------- */
.btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  width:100%; max-width:420px; margin-inline:auto;
  min-height:72px; padding:12px 26px;
  border-radius:999px;
  background:linear-gradient(180deg, #14418E 0%, var(--navy) 55%, #0A2A67 100%);
  color:#fff;
  box-shadow:var(--shadow-cta);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
  position:relative; overflow:hidden;
  isolation:isolate;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(110deg, transparent 25%, rgba(255,255,255,.24) 45%, transparent 62%);
  transform:translateX(-120%);
  animation:sheen 4.6s var(--ease) 1.2s infinite;
  pointer-events:none;
}
@keyframes sheen{ 0%{transform:translateX(-120%);} 26%,100%{transform:translateX(120%);} }
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(12,48,116,.34); }
.btn:active{ transform:translateY(0); }
.btn__sub{
  font-size:11.5px; letter-spacing:.12em; line-height:1.5;
  padding:2px 12px; border-radius:999px;
  background:rgba(255,255,255,.16);
}
.btn__main{
  display:flex; align-items:center; gap:.5em;
  font-family:var(--font-min); font-weight:600;
  font-size:clamp(16px, 4.6vw, 19px); letter-spacing:.06em; line-height:1.4;
}
.btn__main .ico{ width:1.05em; height:1.05em; stroke-width:1.8; transition:transform .25s var(--ease); }
.btn:hover .btn__main .ico{ transform:translateX(3px); }

.btn--light{
  background:#fff; color:var(--navy);
  box-shadow:0 12px 30px rgba(0,0,0,.26);
}
.btn--light .btn__sub{ background:var(--navy-tint); color:var(--navy); }
.btn--light::after{ background:linear-gradient(110deg, transparent 25%, rgba(12,48,116,.10) 45%, transparent 62%); }
.btn--lg{ max-width:470px; min-height:80px; }

.ctablock{ margin-top:clamp(32px, 6vw, 48px); }
.ctablock--tight{ margin-top:24px; }

/* --------------------------------------------------------------------------
   6. Header
-------------------------------------------------------------------------- */
.hd{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.hd.is-stuck{ box-shadow:0 2px 14px rgba(12,48,116,.08); }
.hd__inner{
  width:100%; max-width:calc(var(--wrap) + var(--pad)*2); margin-inline:auto;
  padding:10px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.hd__logo img{ width:auto; height:26px; }
@media (min-width:768px){ .hd__logo img{ height:32px; } }
.hd__cta{
  display:none; align-items:center; gap:.45em;
  font-size:13px; font-weight:500; letter-spacing:.04em;
  color:#fff; background:var(--navy);
  padding:11px 22px; border-radius:999px;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.hd__cta:hover{ opacity:.88; transform:translateY(-1px); }
@media (min-width:768px){ .hd__cta{ display:inline-flex; } }

/* --------------------------------------------------------------------------
   7. SECTION 1 / First view
-------------------------------------------------------------------------- */
.fv{
  position:relative;
  background:
    radial-gradient(120% 90% at 80% 0%, #17458F 0%, transparent 58%),
    linear-gradient(170deg, var(--navy) 0%, var(--navy-deep) 62%, var(--navy-dark) 100%);
  color:#fff;
  overflow:hidden;
}
.fv::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 55% at 50% 108%, rgba(182,147,85,.16) 0%, transparent 70%);
  pointer-events:none;
}
.fv__inner{
  position:relative; z-index:1;
  width:100%; max-width:calc(var(--wrap) + var(--pad)*2); margin-inline:auto;
  padding:clamp(34px,8vw,64px) var(--pad) clamp(40px,9vw,72px);
  display:flex; flex-direction:column; gap:clamp(26px,6vw,40px);
}
.fv__eyebrow{
  font-size:11px; letter-spacing:.2em; color:#A9BEE4;
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.fv__eyebrow::before{ content:""; width:26px; height:1px; background:rgba(255,255,255,.4); }
.fv__title{
  font-family:var(--font-min); font-weight:600;
  font-size:clamp(23px, 6.3vw, 38px);
  line-height:1.58; letter-spacing:.02em;
}
.fv__title em{ font-style:normal; position:relative; }
.fv__title em::after{
  content:""; position:absolute; left:-.04em; right:-.04em; bottom:-.1em; height:2px;
  background:linear-gradient(90deg, var(--gold), rgba(182,147,85,.25));
}
.fv__lead{
  margin-top:18px;
  font-size:clamp(13px, 3.6vw, 15.5px); line-height:1.95; color:#C7D4EC;
}
.fv__badges{
  margin-top:24px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  max-width:460px;
}
.fv__badges li{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:6px; text-align:center;
  padding:12px 4px 11px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  background:rgba(255,255,255,.06);
  font-size:11.5px; font-weight:500; letter-spacing:.02em; line-height:1.4;
}
.fv__badges .ico{ width:24px; height:24px; stroke-width:1.5; color:#fff; opacity:.95; }
.fv__badges .ico--img{ width:31px; height:31px; margin-block:-4px; opacity:.95; }
@media (min-width:400px){ .fv__badges li{ font-size:12.5px; } }

.fv__action{ margin-top:clamp(26px,6vw,34px); }
.fv__action .btn{ margin-inline:0; }
.fv__note{ margin-top:14px; font-size:11.5px; color:rgba(255,255,255,.62); line-height:1.7; }

.fv__visual{ position:relative; }
.fv__visual img{
  width:100%; max-width:520px; margin-inline:auto;
  border-radius:var(--radius);
  box-shadow:0 20px 50px rgba(0,0,0,.34);
}

@media (min-width:900px){
  .fv__inner{
    flex-direction:row; align-items:center; gap:52px;
    padding-block:clamp(56px,6vw,84px);
  }
  .fv__body{ flex:1 1 54%; }
  .fv__visual{ flex:1 1 46%; }
  .fv__action .btn{ margin-inline:0; }
  .fv__badges{ max-width:100%; }
}

/* --------------------------------------------------------------------------
   8. SECTION 2 / Empathy
-------------------------------------------------------------------------- */
.sec--empathy .ttl .mark{
  background:linear-gradient(transparent 66%, rgba(12,48,116,.10) 66%);
}
.worries{
  margin-top:clamp(28px,6vw,40px);
  display:grid; gap:10px;
  max-width:560px; margin-inline:auto;
}
.worries li{
  position:relative;
  padding:14px 18px 14px 44px;
  background:var(--paper-cool);
  border-radius:10px;
  font-size:14px; line-height:1.7; color:var(--ink-soft);
}
.worries li::before{
  content:"?";
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%;
  background:var(--navy-line); color:var(--navy);
  font-family:var(--font-en); font-size:11px;
  display:grid; place-items:center;
}
.empathy__txt{
  margin-top:clamp(28px,6vw,38px); text-align:center;
  font-size:clamp(13.5px,3.7vw,16px); line-height:2.05; color:var(--ink-soft);
}
.empathy__txt strong{
  display:inline-block; margin-block:4px;
  font-family:var(--font-min); font-weight:600;
  font-size:clamp(14.5px,4.1vw,19px); color:var(--ink);
}
.turn{
  margin-top:clamp(34px,7vw,52px);
  padding:clamp(26px,6vw,38px) clamp(20px,5vw,34px);
  border:1px solid var(--navy-line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, #fff 0%, var(--paper-cool) 100%);
  text-align:center;
  position:relative;
}
.turn::before{
  content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:16px; height:16px; background:#fff;
  border-top:1px solid var(--navy-line); border-left:1px solid var(--navy-line);
}
.turn__label{ font-size:12.5px; letter-spacing:.08em; color:var(--navy); }
.turn__main{
  margin-top:10px;
  font-family:var(--font-min); font-weight:600;
  font-size:clamp(18px,5.1vw,26px); line-height:1.65; color:var(--navy);
}
.turn__sub{ margin-top:14px; font-size:13.5px; color:var(--ink-soft); line-height:1.9; }

/* --------------------------------------------------------------------------
   9. SECTION 3 / About : flow
-------------------------------------------------------------------------- */
.flow{
  margin-top:clamp(34px,7vw,52px);
  display:grid; gap:12px;
  counter-reset:flow;
}
.flow__item{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:16px; row-gap:2px;
  align-items:center;
  padding:18px 20px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.flow__item::after{
  content:""; position:absolute; left:50%; bottom:-12px; transform:translateX(-50%);
  width:1px; height:12px; background:var(--navy-line);
}
.flow__item:last-child::after{ display:none; }
.flow__num{
  grid-row:1 / 3;
  font-family:var(--font-en); font-size:12px; color:var(--navy); opacity:.45;
  writing-mode:horizontal-tb;
}
.flow__icowrap{
  grid-row:1 / 3; grid-column:3;
  width:42px; height:42px; border-radius:50%;
  background:var(--navy-tint); color:var(--navy);
  display:grid; place-items:center;
}
.flow__ico{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.flow__ttl{
  grid-column:2; grid-row:1;
  font-family:var(--font-min); font-weight:600; font-size:15.5px; color:var(--navy); line-height:1.5;
}
.flow__txt{ grid-column:2; grid-row:2; font-size:12px; line-height:1.7; color:var(--ink-soft); }
.flow__txt br{ display:none; }
.flow__item{ grid-template-columns:auto 1fr auto; }

@media (min-width:768px){
  .flow{ grid-template-columns:repeat(4,1fr); gap:0 22px; }
  .flow__item{
    grid-template-columns:1fr; grid-template-rows:auto auto auto auto;
    justify-items:center; text-align:center;
    padding:26px 16px 24px; row-gap:0;
  }
  .flow__item::after{
    left:auto; right:-22px; bottom:auto; top:50%; transform:translateY(-50%);
    width:22px; height:1px;
  }
  .flow__num{ grid-row:1; grid-column:1; font-size:12px; letter-spacing:.14em; }
  .flow__icowrap{ grid-row:2; grid-column:1; width:56px; height:56px; margin-block:12px 14px; }
  .flow__ico{ width:26px; height:26px; }
  .flow__ttl{ grid-row:3; grid-column:1; font-size:15.5px; letter-spacing:.01em; }
  .flow__txt{ grid-row:4; grid-column:1; margin-top:8px; font-size:12.5px; }
  .flow__txt br{ display:inline; }
}
@media (min-width:980px){
  .flow__ttl{ font-size:17px; letter-spacing:.03em; }
}

/* categories chips */
.cats{
  margin-top:clamp(28px,6vw,40px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  max-width:720px; margin-inline:auto;
}
.cats li{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:14px 4px;
  background:#fff; border:1px solid var(--navy-line); border-radius:10px;
  font-size:12px; font-weight:500; color:var(--navy); letter-spacing:.01em;
  text-align:center; line-height:1.3;
}
.cats .ico{ width:26px; height:26px; stroke-width:1.5; }
@media (min-width:768px){
  .cats{ grid-template-columns:repeat(6,1fr); }
  .cats li{ padding:18px 4px; font-size:13px; }
  .cats .ico{ width:30px; height:30px; }
}

/* --------------------------------------------------------------------------
   10. SECTION 4 / Cards
-------------------------------------------------------------------------- */
.cards{
  margin-top:clamp(34px,7vw,52px);
  display:grid; gap:14px;
}
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (min-width:980px){ .cards{ grid-template-columns:repeat(3,1fr); } }

.card{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px 16px 12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--accent, var(--navy));
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.card__pkg{ flex:none; width:74px; }
.card__pkg img{ width:100%; filter:drop-shadow(0 6px 12px rgba(0,0,0,.14)); }
.card__body{ flex:1; min-width:0; }
.card__cat{
  display:flex; align-items:center; gap:.4em;
  font-family:var(--font-min); font-weight:600;
  font-size:16.5px; line-height:1.4; color:var(--accent, var(--navy));
}
.card__cat .ico{ width:20px; height:20px; stroke-width:1.6; }
.card__desc{ margin-top:5px; font-size:12.5px; line-height:1.7; color:var(--ink-soft); }
.card__ing{
  margin-top:10px; display:flex; flex-wrap:wrap; gap:5px;
}
.card__ing li{
  font-size:10.5px; letter-spacing:.01em; line-height:1.5;
  padding:3px 9px; border-radius:999px;
  background:var(--paper-cool); color:var(--ink-soft);
  border:1px solid var(--line);
  white-space:nowrap;
}
@media (min-width:640px){
  .card{ flex-direction:column; align-items:stretch; text-align:left; padding:22px 20px 20px; }
  .card::before{ width:100%; height:4px; bottom:auto; }
  .card__pkg{ width:96px; margin:8px auto 10px; }
  .card__cat{ justify-content:center; font-size:18px; }
  .card__desc{ text-align:center; min-height:3.4em; }
  .card__ing{ justify-content:center; }
}

/* --------------------------------------------------------------------------
   11. SECTION 5 / Why three  (key diagram)
-------------------------------------------------------------------------- */
.cases{
  margin-top:clamp(34px,7vw,52px);
  display:grid; gap:clamp(18px,4.4vw,26px);
}
.case{
  padding:clamp(22px,5vw,32px) clamp(16px,4vw,28px) clamp(24px,5vw,34px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
}
.case--pet{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.3);
}
.case__tag{
  display:inline-flex; align-items:center;
  font-size:11.5px; letter-spacing:.1em; line-height:1;
  padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.14); color:#D6E1F4;
  margin-bottom:clamp(20px,4.6vw,26px);
}
.case--pet .case__tag{ background:#fff; color:var(--navy); font-weight:700; }

/* tree */
.tree{ text-align:center; }
.tree__root{
  display:inline-block;
  font-family:var(--font-min); font-weight:600;
  font-size:clamp(16px,4.6vw,21px); line-height:1.4; letter-spacing:.04em;
  color:var(--navy);
  background:#fff;
  padding:12px 26px; border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.case--pet .tree__root{
  background:linear-gradient(180deg,#fff,#EEF2FA);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.tree__stem{
  display:block; width:1px; height:22px; margin:0 auto;
  background:rgba(255,255,255,.4);
}
.tree__branches{
  position:relative;
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
  padding-top:14px;
}
/* horizontal connector bar: from the centre of the 1st col to the centre of the last */
.tree__branches::before{
  content:""; position:absolute; top:0; height:1px;
  left:25%; right:25%;
  background:rgba(255,255,255,.4);
}
.tree__branches li{ position:relative; }
.tree__branches li::before{
  content:""; position:absolute; left:50%; top:-14px;
  width:1px; height:14px; background:rgba(255,255,255,.4);
}
/* on 2-col layout only the first row gets stubs */
.tree__branches li:nth-child(n+3)::before{ display:none; }
.tree__branches li:nth-child(n+3){ margin-top:0; }
.tree__branches li span{
  display:flex; align-items:center; justify-content:center;
  min-height:52px; padding:10px 8px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:9px;
  background:rgba(255,255,255,.08);
  font-size:12.5px; font-weight:500; line-height:1.4; letter-spacing:.01em;
  text-align:center;
}
@media (min-width:720px){
  .tree__branches{ grid-template-columns:repeat(4,1fr); gap:14px; }
  .tree__branches::before{ left:12.5%; right:12.5%; }
  .tree__branches li:nth-child(n+3)::before{ display:block; }
  .tree__branches li span{ min-height:58px; font-size:13.5px; }
}

.cases__bridge{
  text-align:center; position:relative;
}
.cases__bridge span{
  display:inline-block;
  font-family:var(--font-min); font-weight:600;
  font-size:clamp(14px,4vw,17px); letter-spacing:.05em; color:#fff;
  padding-top:26px;
  position:relative;
}
.cases__bridge span::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:11px; height:11px;
  border-right:1px solid rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.55);
  rotate:45deg;
}

.why__lead{
  margin-top:clamp(34px,7vw,50px); text-align:center;
  font-family:var(--font-min); font-weight:600;
  font-size:clamp(16px,4.6vw,23px); line-height:1.75; letter-spacing:.03em;
}

/* 6 -> 3 */
.pick{
  margin-top:clamp(26px,5.5vw,38px);
  display:grid; gap:0;
  padding:clamp(22px,5vw,34px) clamp(16px,4vw,30px);
  border-radius:var(--radius);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
}
.pick__label{
  text-align:center; font-size:12px; letter-spacing:.09em; color:#BACBE8;
  margin-bottom:14px;
}
.pick__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pick__grid li{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 3px; border-radius:9px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.04);
  font-size:11px; line-height:1.3; text-align:center;
  color:rgba(255,255,255,.55);
  transition:all .3s var(--ease);
}
.pick__grid .ico{ width:24px; height:24px; stroke-width:1.5; }
.pick__grid li.is-on{
  background:#fff; color:var(--navy); font-weight:700;
  border-color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.24);
}
.pick__arrow{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding-block:20px;
}
.pick__arrowtxt{
  font-size:11px; letter-spacing:.1em; color:#fff;
  padding:5px 13px; border-radius:999px; background:rgba(255,255,255,.16);
}
.pick__arrow .ico{ width:22px; height:22px; rotate:90deg; color:rgba(255,255,255,.7); }
.pick__pkgs{ display:flex; justify-content:center; gap:8px; }
.pick__pkgs img{ width:22%; max-width:92px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.34)); }
@media (min-width:860px){
  .pick{ grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(18px,3vw,34px); }
  .pick__grid{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .pick__grid li{ font-size:12px; padding:14px 4px; }
  .pick__arrow{ padding-block:0; }
  .pick__arrow .ico{ rotate:0deg; width:26px; height:26px; }
  .pick__pkgs img{ width:30%; }
}

.why__concl{
  margin-top:clamp(30px,6vw,44px);
  text-align:center;
  font-size:clamp(13px,3.6vw,15.5px); line-height:2.1; color:#D3DDEF;
}
.why__concl em{
  font-style:normal; font-weight:700; color:#fff;
  border-bottom:1px solid rgba(182,147,85,.8); padding-bottom:1px;
}

/* --------------------------------------------------------------------------
   12. SECTION 6 / Reliability
-------------------------------------------------------------------------- */
.trust{
  margin-top:clamp(30px,6vw,44px);
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
.trust li{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; text-align:center;
  padding:20px 8px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  font-size:12.5px; font-weight:500; line-height:1.4; color:var(--navy);
}
.trust li:last-child{ grid-column:1 / -1; }
.trust .ico{ width:30px; height:30px; stroke-width:1.5; color:var(--navy); }
@media (min-width:768px){
  .trust{ grid-template-columns:repeat(5,1fr); gap:14px; }
  .trust li:last-child{ grid-column:auto; }
  .trust li{ padding:26px 10px; font-size:13px; }
  .trust .ico{ width:34px; height:34px; }
}

.vet{
  margin-top:clamp(26px,5.5vw,40px);
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:clamp(24px,5.5vw,34px);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  text-align:center;
}
.vet__photo img{
  width:88px; height:88px; border-radius:50%; object-fit:cover;
  border:1px solid var(--navy-line);
}
.vet__label{
  display:inline-block; font-size:11px; letter-spacing:.12em;
  padding:4px 12px; border-radius:999px; background:var(--navy); color:#fff;
}
.vet__name{
  margin-top:10px; font-family:var(--font-min); font-weight:600;
  font-size:19px; color:var(--navy); letter-spacing:.04em;
}
.vet__name span{ font-size:12px; margin-left:.4em; font-weight:400; }
.vet__career{ margin-top:8px; font-size:11.5px; line-height:1.8; color:var(--ink-mute); }
.vet__comment{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; line-height:1.95; color:var(--ink-soft);
}
.vet__comment::before{ content:"「"; }
.vet__comment::after{ content:"」"; }
@media (min-width:768px){
  .vet{ flex-direction:row; align-items:flex-start; text-align:left; gap:28px; }
  .vet__photo img{ width:112px; height:112px; }
  .vet__body{ flex:1; }
  .vet__comment{ font-size:13.5px; }
}

/* --------------------------------------------------------------------------
   13. SECTION 7 / How to
-------------------------------------------------------------------------- */
.howto{
  display:flex; flex-direction:column-reverse; gap:24px;
  padding:clamp(26px,6vw,44px);
  border:1px solid var(--navy-line); border-radius:var(--radius);
  background:linear-gradient(180deg,#fff, var(--paper-cool));
}
.howto .eyebrow{ justify-content:flex-start; }
.howto .eyebrow::before{ display:none; }
.howto__txt{ margin-top:16px; font-size:13.5px; line-height:2; color:var(--ink-soft); }
.howto__list{ margin-top:18px; display:grid; gap:9px; }
.howto__list li{
  display:flex; align-items:flex-start; gap:.6em;
  font-size:13px; line-height:1.7; color:var(--ink);
}
.howto__list .ico{ width:17px; height:17px; margin-top:.35em; color:var(--navy); stroke-width:2.1; }
.howto__visual{
  display:grid; place-items:center;
  width:104px; height:104px; margin-inline:auto;
  border-radius:50%; background:var(--navy); color:#fff;
}
.howto__ico{ width:50px; height:50px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:768px){
  .howto{ flex-direction:row; align-items:center; gap:40px; }
  .howto__body{ flex:1; }
  .howto__visual{ flex:none; width:150px; height:150px; margin:0; }
  .howto__ico{ width:70px; height:70px; }
}

/* --------------------------------------------------------------------------
   14. SECTION 8 / Voice
-------------------------------------------------------------------------- */
.voices{ margin-top:clamp(28px,6vw,44px); display:grid; gap:14px; }
@media (min-width:900px){ .voices{ grid-template-columns:repeat(3,1fr); gap:18px; } }
.voice{
  display:flex; gap:14px;
  padding:18px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.voice__photo{ flex:none; width:76px; }
.voice__photo img{ width:76px; height:76px; object-fit:cover; border-radius:10px; }
.voice__meta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.voice__owner,.voice__pet{
  font-size:10.5px; letter-spacing:.02em; line-height:1.5;
  padding:2px 9px; border-radius:999px;
}
.voice__owner{ background:var(--navy); color:#fff; }
.voice__pet{ background:var(--navy-tint); color:var(--navy); }
.voice__txt{ font-size:12.5px; line-height:1.95; color:var(--ink-soft); }
@media (min-width:900px){
  .voice{ flex-direction:column; }
  .voice__photo{ width:100%; }
  .voice__photo img{ width:100%; height:150px; }
}

/* --------------------------------------------------------------------------
   15. SECTION 9 / Offer
-------------------------------------------------------------------------- */
.offer{
  margin-top:clamp(28px,6vw,42px);
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.offer__visual{ width:100%; max-width:420px; }
.offer__visual img{ width:100%; }
.offer__box{
  width:100%; max-width:520px;
  margin-top:-8px;
  padding:clamp(24px,5.5vw,34px) clamp(20px,5vw,32px);
  background:#fff; color:var(--ink);
  border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(0,0,0,.3);
}
.offer__desc{ text-align:center; font-size:13px; line-height:1.8; color:var(--ink-soft); }
.offer__desc strong{
  display:block; margin-top:3px;
  font-family:var(--font-min); font-weight:600; font-size:clamp(16px,4.5vw,19px); color:var(--navy);
}
.offer__price{
  margin-top:18px; padding:18px 10px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  text-align:center;
}
.offer__regular{ font-size:12.5px; color:var(--ink-mute); }
.offer__first{
  margin-top:8px;
  display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:6px 10px;
}
.offer__tag{
  font-size:11.5px; font-weight:700; letter-spacing:.06em; line-height:1;
  padding:6px 11px; border-radius:5px;
  background:var(--navy); color:#fff;
  align-self:center;
}
.offer__num{
  font-family:var(--font-min); font-weight:600; color:var(--navy);
  font-size:18px; letter-spacing:.02em;
}
.offer__num em{
  font-style:normal; font-family:var(--font-en);
  font-size:clamp(38px,11vw,50px); line-height:1; letter-spacing:0;
  margin-right:.06em;
}
.offer__tax{ font-size:12px; color:var(--ink-mute); }
.offer__merits{ margin-top:18px; display:grid; gap:8px; }
.offer__merits li{
  display:flex; align-items:flex-start; gap:.55em;
  font-size:13px; line-height:1.7;
}
.offer__merits .ico{ width:17px; height:17px; margin-top:.32em; color:var(--navy); stroke-width:2.1; }
.offer .note{ margin-top:14px; }
@media (min-width:900px){
  .offer{ flex-direction:row; align-items:center; justify-content:center; gap:20px; }
  .offer__visual{ flex:1 1 46%; max-width:460px; }
  .offer__box{ flex:1 1 54%; margin-top:0; }
}

/* --------------------------------------------------------------------------
   16. SECTION 10 / FAQ
-------------------------------------------------------------------------- */
.faq{ margin-top:clamp(26px,5.5vw,40px); border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  display:flex; align-items:flex-start; gap:12px;
  padding:18px 34px 18px 0;
  position:relative; cursor:pointer;
  font-size:14px; font-weight:500; line-height:1.7; color:var(--navy);
  list-style:none;
  transition:opacity .2s var(--ease);
}
.faq__item summary::before{
  content:"Q"; flex:none;
  font-family:var(--font-en); font-size:13px; color:var(--navy); opacity:.55;
  line-height:1.6;
}
.faq__item summary::after{
  content:""; position:absolute; right:6px; top:26px;
  width:9px; height:9px;
  border-right:1.5px solid var(--navy); border-bottom:1.5px solid var(--navy);
  rotate:45deg; translate:0 -3px;
  transition:rotate .3s var(--ease);
}
.faq__item[open] summary::after{ rotate:225deg; translate:0 2px; }
.faq__item summary:hover{ opacity:.7; }
.faq__a{
  display:flex; gap:12px;
  padding:0 8px 20px 0;
  font-size:13px; line-height:1.95; color:var(--ink-soft);
  animation:faqIn .3s var(--ease);
}
.faq__a::before{
  content:"A"; flex:none;
  font-family:var(--font-en); font-size:13px; color:var(--gold);
  line-height:1.7;
}
@keyframes faqIn{ from{ opacity:0; translate:0 -4px; } to{ opacity:1; translate:0 0; } }

/* --------------------------------------------------------------------------
   17. SECTION 11 / Last CTA
-------------------------------------------------------------------------- */
.sec--last{ padding-block:clamp(56px,11vw,96px); }
.last__mark img{ width:150px; margin-inline:auto; opacity:.9; }
.last__mark{ margin-bottom:26px; }
.last__badges{
  margin-top:24px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.last__badges li{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:11.5px; letter-spacing:.02em;
  padding:8px 15px; border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.07);
}
.last__badges .ico{ width:15px; height:15px; }

/* --------------------------------------------------------------------------
   18. Footer
-------------------------------------------------------------------------- */
.ft{
  background:var(--navy-dark); color:rgba(255,255,255,.66);
  padding-block:34px calc(34px + var(--sticky-h, 0px));
  font-size:11.5px;
}
.ft__notes{ border:1px solid rgba(255,255,255,.14); border-radius:10px; }
.ft__notes summary{
  padding:13px 16px; cursor:pointer; list-style:none;
  font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.82);
  position:relative;
}
.ft__notes summary::after{
  content:""; position:absolute; right:16px; top:19px;
  width:8px; height:8px;
  border-right:1.4px solid rgba(255,255,255,.6); border-bottom:1.4px solid rgba(255,255,255,.6);
  rotate:45deg; transition:rotate .3s var(--ease);
}
.ft__notes[open] summary::after{ rotate:225deg; }
.ft__notes ul{ padding:0 16px 16px; display:grid; gap:5px; }
.ft__notes li{ position:relative; padding-left:1em; line-height:1.8; }
.ft__notes li::before{ content:"・"; position:absolute; left:-.1em; }
.ft__links{
  margin-top:22px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px;
}
.ft__links a{ transition:opacity .2s var(--ease); }
.ft__links a:hover{ opacity:.7; text-decoration:underline; }
.ft__copy{
  margin-top:22px; text-align:center;
  font-family:var(--font-en); font-size:10.5px; letter-spacing:.08em;
  color:rgba(255,255,255,.42);
}

/* --------------------------------------------------------------------------
   19. Sticky CTA
-------------------------------------------------------------------------- */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(12,48,116,.10);
  transition:transform .4s var(--ease);
}
/* JSが動く環境でだけ隠しておく（JS無効時は常時表示） */
.js .sticky{ transform:translateY(110%); visibility:hidden; }
.js .sticky.is-on{ transform:translateY(0); visibility:visible; }
.sticky__inner{
  max-width:560px; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.sticky__txt{
  display:flex; align-items:center; gap:.4em;
  font-size:11px; letter-spacing:.04em; color:var(--navy); font-weight:500;
}
.sticky__txt .ico{ width:13px; height:13px; }
.btn--sticky{ min-height:52px; padding:8px 24px; }
.btn--sticky .btn__main{ font-size:16px; }
@media (min-width:768px){
  .sticky{ display:none; }
}

/* --------------------------------------------------------------------------
   20. Reveal animation
-------------------------------------------------------------------------- */
.js .reveal{ opacity:0; translate:0 18px; transition:opacity .7s var(--ease), translate .7s var(--ease); }
.js .reveal.is-in{ opacity:1; translate:0 0; }
.js .cards .card.reveal{ transition-delay:calc(var(--i, 0) * 60ms); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; translate:0 0; transition:none; }
  .btn::after{ animation:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* --------------------------------------------------------------------------
   21. Focus visibility
-------------------------------------------------------------------------- */
a:focus-visible, summary:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
}
.sec--why a:focus-visible, .sec--offer a:focus-visible, .sec--last a:focus-visible, .ft a:focus-visible{
  outline-color:#fff;
}