/* PILIMALS Creatures v1.3.0 — mobile rhythm refinement */
.pilimals-creatures{
  --ink:#285a70;--text:#6f7e79;--soft:#8eaaa2;--cream:#fffdf8;--paper:#fbfaf4;
  --mint:#edf6f0;--line:rgba(43,91,111,.10);--shadow:0 18px 55px rgba(49,72,64,.07);
  background:var(--cream);color:var(--ink);padding:0 22px 104px;
}
.pilimals-creatures *{box-sizing:border-box}
.pilimals-creatures__hero,.pilimals-creatures__intro,.pilimals-creatures__grid{max-width:1120px;margin-inline:auto}
.pilimals-creatures__hero{padding:92px 0 94px;text-align:center}
.pilimals-creatures__kicker{display:flex;justify-content:center;align-items:center;gap:15px;margin-bottom:24px;color:#89aaa2;font-size:11px;font-weight:600;letter-spacing:.24em}
.pilimals-creatures__kicker span:first-child{padding-right:15px;border-right:1px solid rgba(137,170,162,.42)}
.pilimals-creatures__hero h1{margin:0 0 24px;font-size:clamp(48px,6vw,72px);font-weight:700;letter-spacing:.015em;line-height:1.18}
.pilimals-creatures__hero p{margin:0;color:var(--text);font-size:14px;line-height:2.05;letter-spacing:.015em}
.pilimals-creatures__intro{padding:0 0 42px}
.pilimals-creatures__intro>span{display:block;margin-bottom:14px;color:#89aaa2;font-size:11px;font-weight:600;letter-spacing:.24em}
.pilimals-creatures__intro h2{margin:0;font-size:clamp(30px,3.5vw,43px);font-weight:700;line-height:1.4;letter-spacing:.01em}
.pilimals-creatures__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 34px}
.pilimals-creature-card{appearance:none;display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;color:inherit;cursor:pointer}
.pilimals-creature-card__image{position:relative;display:block;overflow:hidden;border-radius:28px;background:linear-gradient(145deg,#edf7f3,#e6efd9);box-shadow:var(--shadow);transform:translateZ(0)}
.pilimals-creature-card__image img,.pilimals-creature-card__placeholder{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .45s ease}
.pilimals-creature-card:hover .pilimals-creature-card__image img{transform:scale(1.018)}
.pilimals-creature-card__placeholder{display:grid;place-content:center;text-align:center;color:#8ba79f}
.pilimals-creature-card__placeholder span{font-size:13px;letter-spacing:.24em}
.pilimals-creature-card__placeholder small{margin-top:10px;font-size:11px;letter-spacing:.04em}
.pilimals-creature-card__number{position:absolute;top:18px;left:18px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 7px 20px rgba(35,64,54,.08);font-size:11px;font-weight:700;letter-spacing:.04em}
.pilimals-creature-card__copy{display:block;padding:22px 9px 0}
.pilimals-creature-card__copy small{display:block;margin-bottom:9px;color:#86a79e;font-size:11px;font-weight:600;letter-spacing:.19em}
.pilimals-creature-card__copy strong{display:block;margin-bottom:10px;font-size:26px;font-weight:700;line-height:1.35;letter-spacing:.01em}
.pilimals-creature-card__copy>span{display:block;color:var(--text);font-size:14px;line-height:1.8}
.pilimals-creature-card__copy em{display:inline-flex;align-items:center;margin-top:20px;padding-bottom:4px;border-bottom:1px solid transparent;font-style:normal;font-weight:700;font-size:13px;letter-spacing:.02em;transition:border-color .2s}
.pilimals-creature-card:hover .pilimals-creature-card__copy em{border-color:currentColor}

/* modal */
.pilimals-creatures__modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;z-index:99999;opacity:0;visibility:hidden;transition:.22s}
.pilimals-creatures__modal.is-open{opacity:1;visibility:visible}
.pilimals-creatures__backdrop{position:absolute;inset:0;border:0;background:rgba(20,36,32,.40);backdrop-filter:blur(8px)}
.pilimals-creatures__dialog{position:relative;width:min(880px,calc(100vw - 44px));max-height:90vh;overflow:auto;border-radius:30px;background:var(--cream);box-shadow:0 28px 80px rgba(21,43,36,.24);z-index:1;transform:translateY(20px) scale(.97);transition:.28s}
.pilimals-creatures__modal.is-open .pilimals-creatures__dialog{transform:none}
.pilimals-creatures__close{position:absolute;top:16px;right:16px;z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 5px 18px rgba(30,55,47,.09);font-size:24px;color:var(--ink)}
.pilimals-creatures__dialog-image{min-height:390px;background:linear-gradient(145deg,#edf7f3,#e3edd3);background-size:cover;background-position:center;border-radius:30px 30px 0 0}
.pilimals-creatures__dialog-body{padding:34px 40px 42px}
.pilimals-creatures__dialog-en{margin:0 0 8px;color:#86a79e;font-size:11px;font-weight:600;letter-spacing:.20em}
.pilimals-creatures__dialog-title{margin:0 0 12px;font-size:35px;line-height:1.35}
.pilimals-creatures__dialog-catch{margin:0 0 22px;font-size:17px;font-weight:700}
.pilimals-creatures__dialog-content{color:var(--text);line-height:1.95}
.pilimals-creatures__facts{margin:28px 0 0}
.pilimals-creatures__facts div{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:start;padding:15px 0;border-top:1px solid var(--line)}
.pilimals-creatures__facts dt{color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.08em}
.pilimals-creatures__facts dd{margin:0;color:#596b65;line-height:1.75}
.pilimals-creatures__pilimals-link{margin-top:28px;padding:22px 24px;border:1px solid rgba(67,100,88,.07);border-radius:20px;background:var(--mint)}
.pilimals-creatures__pilimals-link span{display:block;margin-bottom:7px;color:#86a79e;font-size:10px;letter-spacing:.16em}
.pilimals-creatures__pilimals-link p{margin:0;font-weight:700}

/* On the CREATURES page, let the custom visual be the page itself. */
body.pilimals-creatures-page .article-header,
body.pilimals-creatures-page .sns-share,
body.pilimals-creatures-page .sns-follow,
body.pilimals-creatures-page .author-box,
body.pilimals-creatures-page .breadcrumb,
body.pilimals-creatures-page .post-navi,
body.pilimals-creatures-page .footer-meta,
body.pilimals-creatures-page .entry-categories-tags{display:none!important}
body.pilimals-creatures-page .entry-content{margin-top:0!important}
body.pilimals-creatures-page .main{padding-top:0!important;padding-bottom:0!important}
body.pilimals-creatures-page .article{margin-bottom:0!important}

@media(max-width:700px){
  .pilimals-creatures{padding:0 20px 78px}
  .pilimals-creatures__hero{padding:46px 5px 54px}
  .pilimals-creatures__kicker{margin-bottom:17px;font-size:10px}
  .pilimals-creatures__hero h1{margin:0 auto 19px;font-size:38px;line-height:1.22;white-space:nowrap}
  .pilimals-creatures__hero p{max-width:340px;margin-inline:auto;font-size:13px;line-height:1.9}
  .pilimals-creatures__intro{padding:0 8px 32px}
  .pilimals-creatures__intro>span{margin-bottom:17px;font-size:10px}
  .pilimals-creatures__intro h2{font-size:28px;line-height:1.45}
  .pilimals-creatures__grid{grid-template-columns:1fr;gap:42px}
  .pilimals-creature-card__image{border-radius:26px}
  .pilimals-creature-card__image img,.pilimals-creature-card__placeholder{aspect-ratio:1.42/1}
  .pilimals-creature-card__number{top:16px;left:16px;width:42px;height:42px}
  .pilimals-creature-card__copy{padding:17px 10px 0}
  .pilimals-creature-card__copy small{margin-bottom:9px;font-size:10px}
  .pilimals-creature-card__copy strong{font-size:24px;margin-bottom:9px}
  .pilimals-creature-card__copy>span{font-size:13px;line-height:1.75}
  .pilimals-creature-card__copy em{margin-top:14px;font-size:12px}
  .pilimals-creatures__modal{align-items:flex-end;padding:8px}
  .pilimals-creatures__dialog{width:100%;max-height:90vh;border-radius:28px 28px 18px 18px}
  .pilimals-creatures__dialog-image{min-height:0;aspect-ratio:4/3;border-radius:28px 28px 0 0}
  .pilimals-creatures__dialog-body{padding:27px 24px 32px}
  .pilimals-creatures__dialog-title{font-size:28px}
  .pilimals-creatures__facts div{grid-template-columns:82px 1fr;gap:12px}
}


/* PILIMALS return navigation */
.pilimals-creatures__return{position:relative;z-index:2}
.pilimals-creatures__return a{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ink);text-decoration:none!important;
  font-size:12px;font-weight:700;letter-spacing:.08em;
  transition:opacity .2s ease,transform .2s ease
}
.pilimals-creatures__return a:hover{opacity:.68}
.pilimals-creatures__return--top{padding:28px 0 0}
.pilimals-creatures__return--top a:hover{transform:translateX(-2px)}
.pilimals-creatures__return--bottom{
  display:flex;justify-content:center;
  margin:76px 0 8px;padding-top:36px;
  border-top:1px solid var(--line)
}
.pilimals-creatures__return--bottom a{
  min-height:54px;padding:0 25px;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.64);
  box-shadow:0 10px 30px rgba(35,64,54,.05)
}
.pilimals-creatures__return--bottom a:hover{transform:translateY(-2px)}

@media(max-width:700px){
  .pilimals-creatures__return--top{padding:22px 5px 0}
  .pilimals-creatures__return--top a{font-size:11px}
  .pilimals-creatures__return--bottom{margin:58px 8px 0;padding-top:30px}
  .pilimals-creatures__return--bottom a{
    width:100%;justify-content:center;min-height:52px;font-size:11px
  }
}