/* YPY Style: demo1 homepage structural/design CSS. Keep cascade order unchanged. */
:root{
  --deep:#073522;
  --paper:#f8f4e8;
  --ink:#0d3c2a;
  --orange:#f05a2a;
  --green:#68bc43;
  --blue:#5579ba;
  --pink:#e8529b;
  --color-a: #ff1500;
  --color-b: #00b34f;
  --color-c: #1a7436;
  --color-d: #252525;
  --color-e: #0065b3;
  --color-f: #dff3e1;
  --color-g: #fff5eb;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  background:#082719;
  color:#fff;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
header{
  position:fixed;
  inset:0 0 auto;
  z-index:60;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 26px;
  background:linear-gradient(to bottom,rgba(4,34,21,.78),transparent);
  transition:.3s ease;
}
header.scrolled{
  background:rgba(5,43,28,.88);
  backdrop-filter:blur(10px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.brand img{width:70px;border-radius:6px}
.brand strong{letter-spacing:.12em}
.menu{
  width:48px;height:48px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:50%;
  background:rgba(0,0,0,.12);
  position:relative;
}
.menu::before,.menu::after,.menu span{
  content:"";
  position:absolute;
  left:13px;right:13px;
  height:2px;background:#fff;
}
.menu::before{top:15px}.menu span{top:23px}.menu::after{top:31px}

.scene{
  font-size:clamp(13px,calc(100vw / 20),18px);
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.scene::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(to bottom,rgba(0,0,0,.04),rgba(0,0,0,.38));
}
.hero{background-image:url("assets/bg1.webp")}
.orangutan{background-image:linear-gradient(rgba(3,25,16,.32),rgba(3,25,16,.42)),url("assets/bg2.webp")}
.gorilla{background-image:url("assets/bg3.webp")}
.chimpanzee{background-image:linear-gradient(rgba(3,25,16,.28),rgba(3,25,16,.40)),url("assets/bg4.webp")}
.bonobo{background-image:url("assets/bg5.webp")}

.hero-inner{
  width:min(980px,calc(100% - 40px));
  margin:auto;
  text-align:center;
  padding:120px 0 90px;
  color:var(--ink);
}
.eyebrow{
  font-size: clamp(14px, calc(100vw / 22), 16px);
  font-weight:800;
  letter-spacing:.18em;
  margin:0 0 18px;
  text-shadow:
    #fff .08em 0 .08em,#fff -.08em 0 .08em,
    #fff 0 -.08em .08em,#fff 0 .08em .08em;
}
.hero h1{
  font-size: clamp(20px, calc(100vw / 11.25), 30px);
  line-height:1.14;
  letter-spacing:-.04em;
  font-weight:900;
  margin:0;
  -webkit-text-stroke:.012em rgba(255,255,255,.88);
  text-shadow:
    #fff .10em 0 .10em,#fff -.10em 0 .10em,
    #fff 0 -.10em .10em,#fff 0 .10em .10em,
    #fff .08em .08em .10em,#fff -.08em .08em .10em,
    #fff .08em -.08em .10em,#fff -.08em -.08em .10em,
    0 .05em .20em rgba(255,255,255,.95),
    0 .08em .22em rgba(0,0,0,.12);
  opacity:0;
  transform:translateY(38px);
  transition:opacity 1s ease .2s,transform 1s ease .2s;
}
.hero h1 .sub{
  font-size: clamp(22px, calc(100vw / 13.8), 26px);
  letter-spacing:.10em;
  display:block;
  margin-bottom:.5em;
  color:#fff;
  text-shadow:
    #000 .10em 0 .10em,#000 -.10em 0 .10em,
    #000 0 -.10em .10em,#000 0 .10em .10em,
    #000 .08em .08em .10em,#000 -.08em .08em .10em,
    #000 .08em -.08em .10em,#000 -.08em -.08em .10em,
    0 .05em .20em rgba(0,0,0,.95),
    0 .08em .22em rgba(255,255,255,.12);
}
.hero h1 .line{
  font-size: clamp(26px, calc(100vw / 11.25), 30px);
  position:relative;
  display:inline-block;
}
.hero h1 .line::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:.02em;
  height:.13em;
  z-index:-1;
  border-radius:999px;
  background:#f3c52d;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1s ease 1.05s;
}
.hero.is-visible h1{opacity:1;transform:none}
.hero.is-visible h1 .line::after{transform:scaleX(1)}
.hero-lead{
  font-size: clamp(20px, calc(100vw / 20), 22px);
  line-height:1.95;
  font-weight:700;
  margin:28px auto 0;
  max-width:680px;
  opacity:0;
  transform:translateY(24px);
  transition:.8s ease .75s;
  color:#fff;
  text-shadow:
    #000 .10em 0 .10em,#000 -.10em 0 .10em,
    #000 0 -.10em .10em,#000 0 .10em .10em,
    #000 .08em .08em .10em,#000 -.08em .08em .10em,
    #000 .08em -.08em .10em,#000 -.08em -.08em .10em,
    0 .05em .20em rgba(0,0,0,.95),
    0 .08em .22em rgba(255,255,255,.12);
}
.hero.is-visible .hero-lead{opacity:1;transform:none}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:30px;
  opacity:0;
  transform:translateY(24px);
  transition:.8s ease 1s;
}
.hero.is-visible .hero-actions{opacity:1;transform:none}
.btn{
  display:inline-flex;
  min-height:56px;
  align-items:center;
  justify-content:center;
  padding:12px 28px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  transition:.25s ease;
}
.btn-primary{background:#0d5a39;color:#fff}
.btn-secondary{background:rgba(255,255,255,.88);color:var(--ink);border:1px solid rgba(13,60,42,.26)}
.btn:hover{transform:translateY(-3px)}
.scroll-cue{
  text-shadow:
    #fff .08em 0 .08em,#fff -.08em 0 .08em,
    #fff 0 -.08em .08em,#fff 0 .08em .08em;
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  color:var(--ink);
  font-size:.7rem;
  letter-spacing:.18em;
}
.scroll-cue::before{
  content:"";
  display:block;
  width:17px;height:17px;
  margin:0 auto 8px;
  border-right:3px solid currentColor;
  border-bottom:3px solid currentColor;
  transform:rotate(45deg);
  animation:down 1.7s ease-in-out infinite;
}
@keyframes down{
  0%,100%{translate:0 -3px;opacity:.4}
  50%{translate:0 6px;opacity:1}
}

.type-scene{
  padding:80px clamp(20px,7vw,100px);
}
.type-wrap{
  width:min(1180px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(320px,1fr);
  gap:clamp(30px,8vw,120px);
  align-items:center;
}
.type-scene.alt .visual{order:2}
.type-scene.alt .copy{order:1}
.visual{
  position:relative;
  opacity:0;
  transform:translateY(45px) scale(.95);
  transition:opacity .9s ease,transform 1s cubic-bezier(.16,.85,.24,1);
}
.type-scene.is-visible .visual{opacity:1;transform:none}
.visual img{
  width:min(390px,37vw);
  max-height:66vh;
  object-fit:contain;
  margin:auto;
  filter:drop-shadow(0 24px 20px rgba(0,0,0,.34));
}
.copy{
  max-width:520px;
  padding:34px 18px 34px 36px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(5,39,26,.58);
  backdrop-filter:blur(8px);
  opacity:0;
  transform:translateX(36px);
  transition:opacity .85s ease .25s,transform .9s ease .25s;
}
.alt .copy{transform:translateX(-36px)}
.type-scene.is-visible .copy{opacity:1;transform:none}
.copy .type-en{
  display:block;
  margin-bottom:8px;
  font-size:.78em;
  font-weight:800;
  letter-spacing:.18em;
}
.copy h2{
  margin:0 0 17px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(2em,3.65vw,4em);
  font-weight:500;
  line-height:1.22;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
}
.copy p{
  margin:0;
  font-size:clamp(1.05em,1.9vw,1.45em);
  line-height:1.95;
  letter-spacing:.08em;
}
.copy .mini{
  margin-top:18px;
  font-size:.93em;
  line-height:1.8;
  opacity:.9;
}
.orangutan h2,.orangutan .type-en{color:#9eb8ee}
.gorilla h2,.gorilla .type-en{color:#a6df83}
.chimpanzee h2,.chimpanzee .type-en{color:#ff8a54}
.bonobo h2,.bonobo .type-en{color:#ff86bf}

/* Type-specific motion */
.orangutan .visual{animation:orangutanThink 5.8s ease-in-out infinite}
.gorilla .visual{animation:gorillaGuard 6.5s ease-in-out infinite}
.chimpanzee .visual{animation:chimpDash 3.6s ease-in-out infinite}
.bonobo .visual{animation:bonoboBounce 4.7s ease-in-out infinite}
@keyframes orangutanThink{
  0%,100%{translate:0 0;rotate:0}
  35%{translate:0 -6px;rotate:-1deg}
  50%{translate:0 -6px;rotate:1deg}
  70%{translate:0 0;rotate:0}
}
@keyframes gorillaGuard{
  0%,100%{translate:0 0}
  25%{translate:-3px 0}
  38%{translate:3px 0}
  52%,88%{translate:0 0}
}
@keyframes chimpDash{
  0%,60%,100%{translate:0 0;rotate:0}
  70%{translate:-14px 0;rotate:-2deg}
  80%{translate:18px -3px;rotate:2deg}
}
@keyframes bonoboBounce{
  0%,100%{translate:0 0;scale:1}
  48%{translate:0 -5px;scale:1.012}
  68%{translate:0 0;scale:1}
}
.butterfly{
  position:absolute;
  z-index:3;
  font-size:2.1rem;
  animation:flutter 4s ease-in-out infinite;
}
.bf1{right:16%;top:20%}
.bf2{right:29%;top:36%;animation-delay:1.1s}
@keyframes flutter{
  0%,100%{translate:0 0;rotate:-8deg}
  50%{translate:20px -22px;rotate:8deg}
}

.rail{
  position:fixed;
  z-index:55;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:12px 7px;
  border-radius:999px;
  background:rgba(5,45,29,.76);
  backdrop-filter:blur(8px);
}
.rail a{
  width:34px;height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  text-decoration:none;
  opacity:.42;
  border:1px solid transparent;
  transition:.25s ease;
}
.rail a.active{
  opacity:1;
  border-color:#fff;
  background:rgba(255,255,255,.12);
  transform:scale(1.08);
}
.rail i{width:1px;height:18px;background:rgba(255,255,255,.5)}

/* ===== 固定クイック導線 ===== */
.quick-actions{
  position:fixed;
  z-index:59;
  left:14px;
  bottom:10%;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.quick-actions a{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:126px;
  min-height:46px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:999px;
  color:#fff;
  background:rgba(7,63,40,.88);
  backdrop-filter:blur(8px);
  box-shadow:0 9px 24px rgba(0,0,0,.18);
  text-decoration:none;
  font-size:.82rem;
  font-weight:800;
  transition:transform .22s ease,background .22s ease;
}
.quick-actions a:hover{
  transform:translateX(4px);
  background:rgba(10,82,52,.96);
}
.quick-actions .qa-icon{
  font-size:1.05em;
  line-height:1;
}

footer{
  padding:34px 20px;
  text-align:center;
  background:#0b3b29;
}



/* ===== 続きのトップページコンテンツ ===== */
.content-section{
  position:relative;
  padding:clamp(76px,9vw,130px) clamp(18px,5vw,70px);
  color:var(--ink);
  background:var(--paper);
}
.content-section.alt-bg{
  background:
    radial-gradient(circle at 12% 15%,rgba(85,121,186,.09),transparent 25%),
    radial-gradient(circle at 88% 12%,rgba(232,82,155,.09),transparent 25%),
    #fffdf7;
}
.content-inner{width:min(1180px,100%);margin:auto}
.section-kicker{
  margin:0 0 12px;
  text-align:center;
  color:#5d7b6c;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.18em;
}
.section-title{
  margin:0;
  text-align:center;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(18px, calc(100vw / 18), 20px);
  font-weight:600;
  line-height:1.35;
}
.section-lead{
  max-width:760px;
  margin:20px auto 0;
  text-align:center;
  line-height:1.9;
  color:#456052;
}
.compare-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px;
  margin-top:46px;
  padding-top:46px;
}
.compare-card{
  --type:#777;
  display:grid;
  grid-template-columns:240px 1fr;
  gap:24px;
  align-items:center;
  padding:24px;
  border:1px solid color-mix(in srgb,var(--type) 22%,white);
  border-radius:22px;
  background:color-mix(in srgb,var(--type) 7%,white);
  box-shadow:0 13px 34px rgba(13,60,42,.08);
  opacity:0;
  transform:translateY(32px);
  transition:.75s ease;
}
.compare-card.is-visible{opacity:1;transform:none}
.compare-card:nth-child(2){transition-delay:.08s}
.compare-card:nth-child(3){transition-delay:.16s}
.compare-card:nth-child(4){transition-delay:.24s}
.compare-card.orangutan-card{--type:var(--blue)}
.compare-card.gorilla-card{--type:var(--green)}
.compare-card.chimp-card{--type:var(--orange)}
.compare-card.bonobo-card{--type:var(--pink)}
.compare-visual img{max-height:180px;width:auto;margin:auto}
.compare-copy .catch{margin:0;color:var(--type);font-size:.82rem;font-weight:800}
.compare-copy h3{margin:4px 0 3px;color:var(--type);font-size:1.45rem}
.compare-copy .role{margin:0 0 13px;font-weight:700}
.compare-copy ul{margin:0;padding:0;list-style:none;line-height:1.85;font-size:.92rem}
.compare-copy ul li{text-indent: -1em; padding-left: 1em;}
.compare-copy li::before{content:"◆";color:var(--type);margin-right:.45em;font-size:.72em}
.card-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin-top:16px;
  padding:8px 18px;
  border-radius:999px;
  color:#fff;
  background:var(--type);
  text-decoration:none;
  font-weight:800;
  font-size:.88rem;
  transition:.25s ease;
}
.card-button:hover{transform:translateY(-2px);filter:brightness(.94)}
.center-action{text-align:center;margin-top:38px}
.outline-button{
  display:inline-flex;
  min-height:54px;
  align-items:center;
  justify-content:center;
  padding:11px 28px;
  border:2px solid #0d5a39;
  border-radius:999px;
  color:#0d5a39;
  text-decoration:none;
  font-weight:800;
  background:#fff;
  transition:.25s ease;
}
.outline-button:hover{background:#0d5a39;color:#fff;transform:translateY(-2px)}
.diagnosis-box{
  width:min(860px,100%);
  margin:42px auto 0;
  padding:clamp(24px,5vw,52px);
  border-radius:28px;
  background:#fff;
  box-shadow:0 18px 50px rgba(13,60,42,.11);
}
.question{display:none}
.question.active{display:block;animation:fadeQuestion .45s ease}
@keyframes fadeQuestion{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.question-no{margin:0 0 8px;color:#6d8879;font-size:.8rem;font-weight:800;letter-spacing:.14em}
.question h3{margin:0;text-align:center;font-size:clamp(1.35rem,3vw,2rem)}
.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.answer-button{
  min-height:64px;
  border:1px solid #bdd0c5;
  border-radius:16px;
  background:#f7fbf8;
  color:var(--ink);
  font-weight:800;
  cursor:pointer;
  transition:.25s ease;
}
.answer-button:hover{background:#e8f4ec;transform:translateY(-2px)}
.diagnosis-result{display:none;text-align:center}
.diagnosis-result.show{display:block;animation:fadeQuestion .45s ease}
.result-animal{height:210px;display:flex;align-items:flex-end;justify-content:center}
.result-animal img{max-height:200px;width:auto}
.result-title{margin:16px 0 6px;font-size:2rem}
.result-text{margin:0 auto;max-width:560px;line-height:1.8;color:#4a6557}
.result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:24px}
.restart-button{border:0;background:none;color:#5f7a6c;text-decoration:underline;cursor:pointer}
.training-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:44px;
}
.training-card{
  position:relative;
  min-height:330px;
  padding:30px 26px;
  overflow:hidden;
  border-radius:24px;
  color:#fff;
  background:
    linear-gradient(to bottom,rgba(5,46,29,.30),rgba(5,46,29,.91)),
    url("assets/csemp2.webp") center/cover no-repeat;
  box-shadow:0 16px 38px rgba(13,60,42,.13);
  opacity:0;
  transform:translateY(30px);
  transition:.75s ease;
}
.training-card:nth-child(2){background-image:linear-gradient(to bottom,rgba(5,46,29,.25),rgba(5,46,29,.91)),url("assets/csemp1.webp");transition-delay:.1s}
.training-card:nth-child(3){background-image:linear-gradient(to bottom,rgba(5,46,29,.25),rgba(5,46,29,.91)),url("assets/csemp3.webp");transition-delay:.2s}
.training-card.is-visible{opacity:1;transform:none}
.training-icon{font-size:2.2rem}
.training-card h3{margin:16px 0 10px;font-size:1.45rem}
.training-card p{margin:0;line-height:1.8}
.training-card a{position:absolute;left:26px;bottom:26px;text-decoration:none;font-weight:800;border-bottom:1px solid rgba(255,255,255,.7)}
.training-benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:24px;
}
.benefit{
  padding:18px;
  border-radius:16px;
  text-align:center;
  background:#eef6f0;
  font-weight:700;
}
.contact-band{
  position:relative;
  padding:clamp(76px,9vw,120px) 20px;
  text-align:center;
  background:
    linear-gradient(rgba(5,46,29,.70),rgba(5,46,29,.88)),
    url("assets/bg1.webp") center/cover no-repeat;
}
.contact-band h2{margin:0;font-family:"Yu Mincho",serif;font-size:clamp(18px, calc(100vw / 18), 20px);font-weight:500;}
.contact-band p{max-width:680px;margin:20px auto 0;line-height:1.9}
.contact-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:min(360px,90vw);
  min-height:64px;
  margin-top:30px;
  padding:13px 30px;
  border-radius:999px;
  color:#0d5a39;
  background:#fff;
  text-decoration:none;
  font-weight:900;
  box-shadow:0 14px 35px rgba(0,0,0,.18);
  transition:.25s ease;
}
.contact-button:hover{transform:translateY(-3px)}

@media(max-width:1280px){
  .compare-grid{ width:fit-content; margin:0 auto; gap:40px;}
  .compare-card{grid-template-columns:1fr; width:fit-content; margin:0 auto;}
  .compare-visual img{max-height:150px}
  .training-grid,.training-benefits{grid-template-columns:1fr}
}
@media(max-width:1024px){
  .compare-card{grid-template-columns:1fr; text-align:center}
  .compare-copy ul{text-align:left}
  .answer-grid{grid-template-columns:1fr}
}
@media(max-width:834px){
  .compare-grid{grid-template-columns:1fr; min-width:70%;}
  .compare-card{min-width:100%;}
  .compare-copy ul{width:fit-content; margin:0 auto;}
  .training-grid,.training-benefits{grid-template-columns:1fr}
  .personality-loop-indicator{display:none !important;}
}
@media(max-width:540px){
  .rail{display:none;}
}

@media(max-width:834px){

  body{padding-bottom:64px}
  .quick-actions{
    left:0;
    right:0;
    top:auto;
    bottom:0;
    transform:none;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    padding:max(5px,env(safe-area-inset-bottom)) 6px 6px;
    background:rgba(5,43,28,.96);
    backdrop-filter:blur(10px);
  }
  .quick-actions a{
    min-width:0;
    min-height:48px;
    justify-content:center;
    flex-direction:column;
    gap:2px;
    padding:5px 3px;
    border:0;
    border-radius:8px;
    background:transparent;
    box-shadow:none;
    font-size:.72rem;
  }
  .quick-actions a + a{
    border-left:1px solid rgba(255,255,255,.2);
  }
  .quick-actions a:hover{transform:none;background:rgba(255,255,255,.08)}

  header{height:66px;padding:8px 12px}
  .brand img{width:56px}
  .brand strong{font-size:.82rem}
  .rail{right:5px;padding:8px 4px}
  .rail a{width:29px;height:29px;font-size:.9rem}
  .rail i{height:12px}
  .hero-inner{padding:95px 0 84px}
  .hero-actions{display:grid}
  .btn{width:min(340px,88vw)}
  .type-scene{min-height:90svh;padding:82px 18px 52px}
  .type-wrap{grid-template-columns:1fr;text-align:center;gap:18px}
  .type-scene.alt .visual,.type-scene.alt .copy{order:initial}
  .visual img{width:min(68vw,320px);max-height:49vh}
  .copy,.alt .copy{transform:translateY(26px);padding:24px 14px 24px 20px;margin:auto}
  .copy h2{
    font-size:clamp(1.8em,8.4vw,2.35em);
    white-space:nowrap;
  }
  .copy p{font-size:1em}
  .butterfly{font-size:1.6rem}
}

/* ===== SNSアプリ内ブラウザの文字自動拡大対策 ===== */
html.is-inapp,
html.is-inapp[lang="ja"]{
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
}
html.is-inapp *,
html.is-inapp *::before,
html.is-inapp *::after{
  -webkit-text-size-adjust:none!important;
  text-size-adjust:none!important;
  max-height:99999px!important;
}
html.is-inapp body{
  font-size:14px!important;
}
@media(max-width:359.9px){
  html.is-inapp body{font-size:13px!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero h1,.hero-lead,.hero-actions,.visual,.copy{opacity:1;transform:none}
}

/* ===== Ver.3: desktop navigation / icon images / lower-section rail ===== */
.desktop-nav{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.65vw,30px);
  margin-left:auto;
  margin-right:14px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
}
header.scrolled .desktop-nav{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.desktop-nav a{
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  font-size:clamp(.78rem,.88vw,.98rem);
  font-weight:700;
  letter-spacing:.035em;
}
.desktop-nav a:hover{text-decoration:underline;text-underline-offset:5px}
.desktop-nav .desktop-contact{
  padding:9px 16px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.mobile-menu-panel{
  position:fixed;
  z-index:58;
  top:66px;
  right:10px;
  width:min(310px,calc(100vw - 28px));
  display:grid;
  padding:14px;
  border-radius:14px;
  background:rgba(5,43,28,.97);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  pointer-events:none;
  transition:.25s ease;
}
.mobile-menu-panel.is-open{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.mobile-menu-panel a{
  padding:12px 10px;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-weight:700;
}
.mobile-menu-panel a:last-child{border-bottom:0}
.rail a img{
  width:27px;
  height:27px;
  object-fit:contain;
}
.quick-actions .qa-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  object-fit:contain;
}
@media(min-width:1023.9px){
  .menu{display:none}
  .mobile-menu-panel{display:none}
}
@media(max-width:1024px){
  .desktop-nav{display:none}
  .menu{display:block}
}
@media(max-width:834px){
  .quick-actions .qa-icon{
    width:21px;
    height:21px;
    flex-basis:21px;
  }
  .rail a img{width:23px;height:23px}
}


@media(min-width:1024px){
  header.scrolled{
    background:#0b4a31!important;
    box-shadow:0 5px 20px rgba(0,0,0,.18);
    backdrop-filter:none!important;
  }
  header.scrolled .desktop-nav{
    display:flex!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  header.scrolled .desktop-nav a{
    color:#fff!important;
  }
}
.rail a{
  position:relative;
}
.rail a.active{
  opacity:1!important;
  border-color:#fff!important;
  background:#fff!important;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.22),
    0 0 18px rgba(255,255,255,.72);
  transform:scale(1.18)!important;
}
.rail a.active img{
  transform:scale(1.06);
}
.rail a.active::after{
  content:"";
  position:absolute;
  inset:-7px;
  border:2px solid rgba(255,255,255,.85);
  border-radius:50%;
  animation:currentPulse 1.8s ease-out infinite;
}
@keyframes currentPulse{
  0%{scale:.85;opacity:.85}
  100%{scale:1.45;opacity:0}
}
/* JSが読み込まれる前でも、本文を消さない */
.reveal-item{
  opacity:1!important;
  transform:none!important;
}


/* ===== 4タイプ個別モーション ===== */
.compare-card{
  transition:transform .5s ease,box-shadow .5s ease,opacity .5s ease;
}
.compare-card.personality-loop-card.is-current{
  transform:translateY(-11px) scale(1.018)!important;
  box-shadow:
    0 24px 46px rgba(13,60,42,.18),
    0 0 0 4px color-mix(in srgb,var(--type) 23%,transparent)!important;
}
.personality-motion-stage{
  position:relative;
  overflow:visible!important;
}
.personality-motion-stage img,
.result-motion img{
  position:relative;
  z-index:3;
  transform-origin:center bottom;
}
.motion-thought{
  position:absolute;
  z-index:5;
  border-radius:50%;
  background:#5579ba;
  opacity:0;
  pointer-events:none;
}
.motion-thought.mt1{width:10px;height:10px;right:29%;top:27%}
.motion-thought.mt2{width:17px;height:17px;right:19%;top:17%}

.motion-speed{
  position:absolute;
  z-index:2;
  left:4%;
  width:72px;
  height:3px;
  border-radius:999px;
  background:#f05a2a;
  opacity:0;
  transform-origin:right;
  pointer-events:none;
}
.motion-speed.ms1{top:42%}
.motion-speed.ms2{top:53%;width:56px}
.motion-speed.ms3{top:64%;width:43px}

.motion-butterfly{
  position:absolute;
  z-index:5;
  font-size:1.35rem;
  opacity:0;
  pointer-events:none;
}
.motion-butterfly.mb1{right:8%;top:17%}
.motion-butterfly.mb2{left:8%;top:37%}

/* オランウータン */
.orangutan-card.is-current .personality-motion-stage img,
.result-motion.result-orangutan img{
  animation:v5Orangutan 3.1s ease-in-out infinite;
}
.orangutan-card.is-current .motion-thought,
.result-motion.result-orangutan .motion-thought{
  animation:v5Thought 2.1s ease-in-out infinite;
}
.orangutan-card.is-current .mt2,
.result-motion.result-orangutan .mt2{animation-delay:.25s}
@keyframes v5Orangutan{
  0%,100%{transform:translateY(0) rotate(0)}
  32%{transform:translateY(-4px) rotate(-2deg)}
  58%{transform:translateY(-4px) rotate(2deg)}
  78%{transform:translateY(0) rotate(0)}
}
@keyframes v5Thought{
  0%,100%{opacity:0;scale:.5}
  40%,68%{opacity:.82;scale:1}
}

/* ゴリラ */
.gorilla-card.is-current .personality-motion-stage img,
.result-motion.result-gorilla img{
  animation:v5Gorilla 3.8s ease-in-out infinite;
}
@keyframes v5Gorilla{
  0%,18%,100%{transform:translateX(0)}
  31%{transform:translateX(-4px)}
  46%{transform:translateX(4px)}
  60%,88%{transform:translateX(0)}
}

/* チンパンジー */
.chimp-card.is-current .personality-motion-stage img,
.result-motion.result-chimpanzee img{
  animation:v5Chimp 2.15s cubic-bezier(.3,.8,.2,1) infinite;
}
.chimp-card.is-current .motion-speed,
.result-motion.result-chimpanzee .motion-speed{
  animation:v5SpeedLine 2.15s ease-in-out infinite;
}
.chimp-card.is-current .ms2,
.result-motion.result-chimpanzee .ms2{animation-delay:.06s}
.chimp-card.is-current .ms3,
.result-motion.result-chimpanzee .ms3{animation-delay:.12s}
@keyframes v5Chimp{
  0%,52%,100%{transform:translateX(0) rotate(0)}
  63%{transform:translateX(-12px) rotate(-3deg)}
  76%{transform:translateX(17px) translateY(-3px) rotate(3deg)}
  87%{transform:translateX(0) rotate(0)}
}
@keyframes v5SpeedLine{
  0%,52%,100%{opacity:0;transform:scaleX(.1)}
  62%,78%{opacity:.85;transform:scaleX(1)}
  88%{opacity:0}
}

/* ボノボ */
.bonobo-card.is-current .personality-motion-stage img,
.result-motion.result-bonobo img{
  animation:v5Bonobo 2.8s ease-in-out infinite;
}
.bonobo-card.is-current .motion-butterfly,
.result-motion.result-bonobo .motion-butterfly{
  animation:v5Flutter 2.8s ease-in-out infinite;
}
.bonobo-card.is-current .mb2,
.result-motion.result-bonobo .mb2{animation-delay:.45s}
@keyframes v5Bonobo{
  0%,100%{transform:translateY(0) scale(1)}
  42%{transform:translateY(-8px) scale(1.025)}
  62%{transform:translateY(0) scale(1)}
}
@keyframes v5Flutter{
  0%,100%{opacity:0;transform:translate(0,8px) rotate(-8deg)}
  25%{opacity:1}
  55%{opacity:1;transform:translate(13px,-10px) rotate(9deg)}
  80%{opacity:0}
}

.personality-loop-indicator{
  display:flex;
  justify-content:center;
  gap:9px;
  margin:28px 0 5px;
}
.personality-loop-dot{
  width:10px;
  height:10px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#c9d3cc;
  cursor:pointer;
  transition:.25s ease;
}
.personality-loop-dot.is-current{
  width:34px;
  border-radius:999px;
  background:#0d5a39;
}

/* 診断結果 */
.result-motion{
  position:relative;
  width:min(300px,80vw);
  height:230px;
  margin:0 auto;
  overflow:visible;
}
.result-motion img{
  max-height:210px;
  width:auto;
  margin:auto;
  filter:drop-shadow(0 12px 12px rgba(13,60,42,.14));
}
.result-motion .motion-thought.mt1{right:24%;top:25%}
.result-motion .motion-thought.mt2{right:14%;top:14%}
.result-motion .motion-speed{left:0}
.result-motion .motion-butterfly.mb1{right:1%;top:13%}
.result-motion .motion-butterfly.mb2{left:2%;top:38%}

@media(max-width:834px){
  .compare-card.personality-loop-card.is-current{
    transform:translateY(-6px) scale(1.01)!important;
  }
  .motion-speed{width:48px}
  .motion-speed.ms2{width:38px}
  .motion-speed.ms3{width:29px}
}
@media(prefers-reduced-motion:reduce){
  .personality-motion-stage img,
  .result-motion img,
  .motion-thought,
  .motion-speed,
  .motion-butterfly{
    animation:none!important;
  }
}


/* ===== 共通ヘッダー：サブメニュー ===== */
.desktop-menu-item{position:relative;display:flex;align-items:center;height:74px}
.desktop-menu-parent{display:flex;align-items:center;gap:5px}
.submenu-caret{display:inline-block;font-size:.82em;transition:transform .22s ease}
.desktop-menu-item:hover .submenu-caret,
.desktop-menu-item:focus-within .submenu-caret{transform:rotate(180deg)}
.desktop-submenu{
  position:absolute;z-index:90;top:calc(100% - 5px);left:50%;width:285px;padding:10px;
  border:1px solid rgba(255,255,255,.22);border-radius:15px;background:#0b4a31;
  box-shadow:0 18px 42px rgba(0,0,0,.24);opacity:0;visibility:hidden;
  transform:translate(-50%,-8px);pointer-events:none;transition:.22s ease
}
.desktop-menu-item:hover .desktop-submenu,
.desktop-menu-item:focus-within .desktop-submenu{
  opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto
}
.desktop-submenu::before{
  content:"";position:absolute;left:50%;top:-7px;width:14px;height:14px;
  background:#0b4a31;transform:translateX(-50%) rotate(45deg)
}
.desktop-submenu a{
  position:relative;z-index:1;display:grid!important;grid-template-columns:46px 1fr;
  align-items:center;gap:10px;min-height:58px;padding:7px 10px!important;border-radius:10px;
  color:#fff!important;text-decoration:none!important;font-size:.86rem!important;white-space:normal!important
}
.desktop-submenu a:hover,.desktop-submenu a:focus{background:rgba(255,255,255,.11);text-decoration:none!important}
.desktop-submenu img{width:43px;height:43px;object-fit:contain}

.mobile-menu-group{border-bottom:1px solid rgba(255,255,255,.14)}
.mobile-submenu-toggle{
  width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;
  padding:12px 10px;border:0;color:#fff;background:transparent;font:inherit;font-weight:700;
  text-align:left;cursor:pointer
}
.mobile-caret{
  width:25px;height:25px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.10);transition:transform .22s ease
}
.mobile-submenu-toggle[aria-expanded="true"] .mobile-caret{transform:rotate(45deg)}
.mobile-submenu{display:none;padding-bottom:8px}
.mobile-menu-group.is-open .mobile-submenu{display:grid}
.mobile-submenu a{
  display:grid!important;grid-template-columns:42px 1fr;align-items:center;gap:9px;
  margin:0 6px;padding:7px 10px 7px 20px!important;border-bottom:0!important;
  border-radius:9px;background:rgba(255,255,255,.055);font-size:.84rem
}
.mobile-submenu a + a{margin-top:4px}
.mobile-submenu img{width:38px;height:38px;object-fit:contain}

/*================================================
 *  important
 ================================================*/
.righta, .right, .editor-styles-wrapper .righta, .editor-styles-wrapper .right {text-align:right !important;}
.lefta, .left, .editor-styles-wrapper .lefta, .editor-styles-wrapper .left {text-align:left !important;}
.centera, .center, .editor-styles-wrapper .centera, .editor-styles-wrapper .center {text-align:center !important;}
.rightb {display:block !important; float:right !important;}
.leftb {display:block !important; float:left !important;}
.centerb {display:block !important; float:none; margin:0 auto !important;}
.rightc {text-align:right !important;}
.leftc {text-align:left !important;}
.rightf {display:block !important; float:none !important; vertical-align:top;}
.leftf {display:block !important; float:none !important; vertical-align:top;}
@media print, screen and (min-width: 540.1px){
  .rightc {text-align:center !important;}
  .leftc {text-align:center !important;}
  .rightf {float:right !important;}
  .leftf {float:left !important;}
}
.naname {
  transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -webkit-transform: rotate(-3deg);
  padding-left: 0.45em;
  margin-bottom:0.5em;
  margin-top:0.2em;
}
.nanameb {
  transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
  padding-left: 0.45em;
  margin-bottom:0.5em;
  margin-top:0.2em;
}

/* ===== text-shadow utilities ===== */
.tshadow{
  text-shadow:
    white 0.1em 0px 0.1em, white -0.1em 0px 0.1em,
    white 0px -0.1em 0.1em, white -0.1em 0px 0.1em,
    white 0.1em 0.1em 0.1em, white -0.1em 0.1em 0.1em,
    white 0.1em -0.1em 0.1em, white -0.1em -0.1em 0.1em,
    white 0.05em 0.1em 0.1em, white -0.05em 0.1em 0.1em,
    white 0.05em -0.1em 0.1em, white -0.05em -0.1em 0.1em,
    white 0.1em 0.05em 0.1em, white -0.1em 0.05em 0.1em,
    white 0.1em -0.05em 0.1em, white -0.1em -0.05em 0.1em,
    white 0.05em 0.05em 0.1em, white -0.05em 0.05em 0.1em,
    white 0.05em -0.05em 0.1em, white -0.05em -0.05em 0.1em;
}
.tshadowb{
  text-shadow:
    black 0.1em 0px 0.1em, black -0.1em 0px 0.1em,
    black 0px -0.1em 0.1em, black -0.1em 0px 0.1em,
    black 0.1em 0.1em 0.1em, black -0.1em 0.1em 0.1em,
    black 0.1em -0.1em 0.1em, black -0.1em -0.1em 0.1em,
    black 0.05em 0.1em 0.1em, black -0.05em 0.1em 0.1em,
    black 0.05em -0.1em 0.1em, black -0.05em -0.1em 0.1em,
    black 0.1em 0.05em 0.1em, black -0.1em 0.05em 0.1em,
    black 0.1em -0.05em 0.1em, black -0.1em -0.05em 0.1em,
    black 0.05em 0.05em 0.1em, black -0.05em 0.05em 0.1em,
    black 0.05em -0.05em 0.1em, black -0.05em -0.05em 0.1em;
}
.tshadowc{
  text-shadow:
    black 0.05em 0px 0.05em, black -0.05em 0px 0.05em,
    black 0px -0.05em 0.05em, black -0.05em 0px 0.05em,
    black 0.05em 0.05em 0.05em, black -0.05em 0.05em 0.05em,
    black 0.05em -0.05em 0.05em, black -0.05em -0.05em 0.05em,
    black 0.025em 0.05em 0.05em, black -0.025em 0.05em 0.05em,
    black 0.025em -0.05em 0.05em, black -0.025em -0.05em 0.05em,
    black 0.05em 0.025em 0.05em, black -0.05em 0.025em 0.05em,
    black 0.05em -0.025em 0.05em, black -0.05em -0.025em 0.05em,
    black 0.025em 0.025em 0.05em, black -0.025em 0.025em 0.05em,
    black 0.025em -0.025em 0.05em, black -0.025em -0.025em 0.05em;
}
.tshadowa{
  text-shadow:
    var(--color-e) 0.1em 0px 0.1em, var(--color-e) -0.1em 0px 0.1em,
    var(--color-e) 0px -0.1em 0.1em, var(--color-e) -0.1em 0px 0.1em,
    var(--color-e) 0.1em 0.1em 0.1em, var(--color-e) -0.1em 0.1em 0.1em,
    var(--color-e) 0.1em -0.1em 0.1em, var(--color-e) -0.1em -0.1em 0.1em,
    var(--color-e) 0.05em 0.1em 0.1em, var(--color-e) -0.05em 0.1em 0.1em,
    var(--color-e) 0.05em -0.1em 0.1em, var(--color-e) -0.05em -0.1em 0.1em,
    var(--color-e) 0.1em 0.05em 0.1em, var(--color-e) -0.1em 0.05em 0.1em,
    var(--color-e) 0.1em -0.05em 0.1em, var(--color-e) -0.1em -0.05em 0.1em,
    var(--color-e) 0.05em 0.05em 0.1em, var(--color-e) -0.05em 0.05em 0.1em,
    var(--color-e) 0.05em -0.05em 0.1em, var(--color-e) -0.05em -0.05em 0.1em;
}
.tshadown{text-shadow:none;}

/* ===== colors / bg utilities ===== */
.pr1{
  font-size: 120%;
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-color: #ffd00054;
  text-decoration-thickness: 0.35em;
  text-underline-offset: -0.15em;

  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.pr2{
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-color: #ffd00054;
  text-decoration-thickness: 0.35em;
  text-underline-offset: -0.15em;

  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.pr3{
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-color: #ff007c2e;
  text-decoration-thickness: 0.35em;
  text-underline-offset: -0.15em;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
.pr1 strong, .pr2 strong, .pr3 strong{font-size:150%;}
.fit {display: inline-block; white-space: nowrap;}
.uchikeshi{
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
  text-decoration-style: double;
  text-decoration-skip-ink: none;
  text-underline-offset: -50%;
}

.clf{color: #ffffff !important; fill: #fff;}
.clb{color: #000000 !important; fill: #000;}
.clr{color: #ff0000 !important; fill: #ff0000;}
.cly{color: #ffff00 !important; fill: #ffff00;}
.cl1{color:var(--color-a)!important;fill:var(--color-a);}
.cl2{color:var(--color-b)!important;fill:var(--color-b);}
.cl3{color:var(--color-c)!important;fill:var(--color-c);}
.cl4{color:var(--color-d)!important;fill:var(--color-d);}
.cl5{color:var(--color-e)!important;fill:var(--color-e);}
.cl6{color:var(--color-f)!important;fill:var(--color-f);}
.cl7{color:var(--color-g)!important;fill:var(--color-g);}

.bgff{background: rgb(255 255 255 / 50%); border-radius: 10px;}
.bgf{background: #ffffff !important;}
.bge{background: #eeeeee !important;}
.bgr{background: #ff0000 !important;}
.bgy{background: #ffff00 !important;}
.bgyy{background: #ffffe6 !important;}
.bgyyy{background: #f6f6e9 !important;}
.bgb{background: #000000 !important;}
.bgbb{background: #dbdbdb !important;}
.bgbbb{background: #f3f3f3 !important;}
.bg1, .bg1 > a{background: var(--color-a) !important;}
.bg2, .bg2 > a{background: var(--color-b) !important;}
.bg3, .bg3 > a{background: var(--color-c) !important;}
.bg4, .bg4 > a{background: var(--color-d) !important;}
.bg5, .bg5 > a{background: var(--color-e) !important;}
.bg6, .bg6 > a{background: var(--color-f) !important;}
.bg7, .bg7 > a{background: var(--color-g) !important;}
.bg-insta{background:linear-gradient(45deg, #FCAF45, #FD1D1D, #C837AB, #833AB4) !important;}
.bg-line{background:#00b900 !important;}
.bg-facebook{background:#3b75d4 !important;}
.bg-tiktok{background:#080404 !important;}

/* ===== size / spacing utilities ===== */
.fs500{font-size:500% !important;} .fs400{font-size:400% !important;} .fs300{font-size:300% !important;}
.fs290{font-size:290% !important;} .fs280{font-size:280% !important;} .fs270{font-size:270% !important;} .fs260{font-size:260% !important;}
.fs250{font-size:250% !important;} .fs240{font-size:240% !important;} .fs230{font-size:230% !important;} .fs220{font-size:220% !important;} .fs210{font-size:210% !important;}
.fs200{font-size:200% !important;} .fs190{font-size:190% !important;} .fs180{font-size:180% !important;} .fs170{font-size:170% !important;} .fs160{font-size:160% !important;}
.fs150{font-size:150% !important;} .fs140{font-size:140% !important;} .fs130{font-size:130% !important;} .fs120{font-size:120% !important;} .fs110{font-size:110% !important;}
.fs100{font-size:100% !important;} .fs90{font-size:90% !important;} .fs80{font-size:80% !important;} .fs70{font-size:70% !important;} .fs60{font-size:60% !important;} .fs50{font-size:50% !important;}
.fs40{font-size:40% !important;} .fs30{font-size:30% !important;} .fs20{font-size:20% !important;} .fs10{font-size:10% !important;}
.lh3{line-height:3 !important;} .lh2{line-height:2 !important;} .lh1{line-height:1 !important;} .lh05{line-height:0.5 !important;} .lh0{line-height:0 !important;}
.pdxxx{padding:3em !important;} .pdxx{padding:2.5em !important;} .pdx{padding:1.5em !important;} .pdm{padding:1em !important;} .pds{padding:.5em !important;} .pdss{padding:.25em !important;} .pdn{padding:0 !important;}
.pdlrxxx{padding-left:3em !important; padding-right:3em !important;} .pdlrxx{padding-left:2.5em !important; padding-right:2.5em !important;} .pdlrx{padding-left:1.5em !important; padding-right:1.5em !important;}
.pdlrm{padding-left:1em !important; padding-right:1em !important;} .pdlrs{padding-left:.5em !important; padding-right:.5em !important;} .pdlrss{padding-left:.25em !important; padding-right:.25em !important;} .pdlrn{padding-left:0 !important; padding-right:0 !important;}
.pdlxxx{padding-left:3em !important;} .pdlxx{padding-left:2.5em !important;} .pdlx{padding-left:1.5em !important;} .pdlm{padding-left:1em !important;} .pdls{padding-left:.5em !important;} .pdlss{padding-left:.25em !important;} .pdln{padding-left:0 !important;}
.pdrxxx{padding-right:3em !important;} .pdrxx{padding-right:2.5em !important;} .pdrx{padding-right:1.5em !important;} .pdrm{padding-right:1em !important;} .pdrs{padding-right:.5em !important;} .pdrss{padding-right:.25em !important;} .pdrn{padding-right:0 !important;}
.pdtbxxx{padding-top:3em !important; padding-bottom:3em !important;} .pdtbxx{padding-top:2.5em !important; padding-bottom:2.5em !important;} .pdtbx{padding-top:1.5em !important; padding-bottom:1.5em !important;}
.pdtbm{padding-top:1em !important; padding-bottom:1em !important;} .pdtbs{padding-top:.5em !important; padding-bottom:.5em !important;} .pdtbss{padding-top:.25em !important; padding-bottom:.25em !important;} .pdtbn{padding-top:0 !important; padding-bottom:0 !important;}
.pdtxxx{padding-top:3em !important;} .pdtxx{padding-top:2.5em !important;} .pdtx{padding-top:1.5em !important;} .pdtm{padding-top:1em !important;} .pdts{padding-top:.5em !important;} .pdtss{padding-top:.25em !important;} .pdtn{padding-top:0 !important;}
.pdbxxx{padding-bottom:3em !important;} .pdbxx{padding-bottom:2.5em !important;} .pdbx{padding-bottom:1.5em !important;} .pdbm{padding-bottom:1em !important;} .pdbs{padding-bottom:.5em !important;} .pdbss{padding-bottom:.25em !important;} .pdbn{padding-bottom:0 !important;}
.mra{margin:0 auto !important;}
.mrxxx{margin:3em !important;} .mrxx{margin:2.5em !important;} .mrx{margin:1.5em !important;} .mrm{margin:1em !important;} .mrs{margin:.5em !important;} .mrss{margin:.25em !important;} .mrn{margin:0 !important;}
.mrlrxxx{margin-left:3em !important; margin-right:3em !important;} .mrlrxx{margin-left:2.5em !important; margin-right:2.5em !important;} .mrlrx{margin-left:1.5em !important; margin-right:1.5em !important;} .mrlrm{margin-left:1em !important; margin-right:1em !important;} .mrlrs{margin-left:.5em !important; margin-right:.5em !important;} .mrlrss{margin-left:.25em !important; margin-right:.25em !important;} .mrlrn{margin-left:0 !important; margin-right:0 !important;}
.mrlxxx{margin-left:3em !important;} .mrlxx{margin-left:2.5em !important;} .mrlx{margin-left:1.5em !important;} .mrlm{margin-left:1em !important;} .mrls{margin-left:.5em !important;} .mrlss{margin-left:.25em !important;} .mrln{margin-left:0 !important;}
.mrrxxx{margin-right:3em !important;} .mrrxx{margin-right:2.5em !important;} .mrrx{margin-right:1.5em !important;} .mrrm{margin-right:1em !important;} .mrrs{margin-right:.5em !important;} .mrrss{margin-right:.25em !important;} .mrrn{margin-right:0 !important;}
.mrtbxxx{margin-top:3em !important; margin-bottom:3em !important;} .mrtbxx{margin-top:2.5em !important; margin-bottom:2.5em !important;} .mrtbx{margin-top:1.5em !important; margin-bottom:1.5em !important;} .mrtbm{margin-top:1em !important; margin-bottom:1em !important;} .mrtbs{margin-top:.5em !important; margin-bottom:.5em !important;} .mrtbss{margin-top:.25em !important; margin-bottom:.25em !important;} .mrtbn{margin-top:0 !important; margin-bottom:0 !important;}
.mrtxxx{margin-top:3em !important;} .mrtxx{margin-top:2.5em !important;} .mrtx{margin-top:1.5em !important;} .mrtm{margin-top:1em !important;} .mrts{margin-top:.5em !important;} .mrtss{margin-top:.25em !important;} .mrtn{margin-top:0 !important;}
.mrbxxx{margin-bottom:3em !important;} .mrbxx{margin-bottom:2.5em !important;} .mrbx{margin-bottom:1.5em !important;} .mrbm{margin-bottom:1em !important;} .mrbs{margin-bottom:.5em !important;} .mrbss{margin-bottom:.25em !important;} .mrbn{margin-bottom:0 !important;}
.pdz{padding-left:1em !important; padding-right:1em !important; padding-bottom:1em !important; padding-top:0em !important;}
.pindex{text-indent: 1em;}
.vam{vertical-align: middle;}
.por{position: relative;}
.poa{position: absolute;}
.maxss{width: 90% !important; max-width: 250px !important; margin-left: auto; margin-right: auto;}
.maxs{width: 100% !important; max-width: 300px !important; margin-left: auto; margin-right: auto;}
.maxsm{width: 100% !important; max-width: 460px !important; margin-left: auto; margin-right: auto;}
.maxm{width: 100% !important; max-width: 540px !important; margin-left: auto; margin-right: auto;}
.maxl{width: 100% !important; max-width: 800px !important; margin-left: auto; margin-right: auto;}
.maxll{width: 100% !important; max-width: 1280px !important; margin-left: auto; margin-right: auto;}
.maxf{width: fit-content !important; max-width:100% !important;}
.tdu{text-decoration:unset !important;}
.autolr{margin-left:auto; margin-right:auto;}
/* ===== 表示切替ユーティリティ ===== */
@media only screen and (max-width: 320px){ .minmbbb{display:none !important;} }
@media only screen and (max-width: 360px){ .minmbb{display:none !important;} }
@media only screen and (max-width: 540px){ .minmb{display:none !important;} }
@media only screen and (max-width: 834px){ .mintb{display:none !important;} }
@media only screen and (max-width: 1023.9px){ .minpc{display:none !important;} }
@media only screen and (max-width: 1279.9px){ .minpcb{display:none !important;} }

@media print, screen and (min-width: 320.1px){ .maxmbbb{display:none !important;} }
@media print, screen and (min-width: 360.1px){ .maxmbb{display:none !important;} }
@media print, screen and (min-width: 540.1px){ .maxmb{display:none !important;} }
@media print, screen and (min-width: 834.1px){ .maxtb{display:none !important;} }
@media print, screen and (min-width: 1024px){ .maxpcb{display:none !important;} }
@media print, screen and (min-width: 1280px){ .maxpc{display:none !important;} }

@media only screen and (max-width: 833.9px){ .onlytb{display:none !important;} }
@media only screen and (min-width: 1024px){ .onlytb{display:none !important;} }
@media only screen and (min-width: 834px) and (max-width: 1023.9px){ .nonetb{display:none !important;} }

.iconss{width: 22px; height: 22px; margin-left:auto; margin-right:auto;}
.icons{width: 27px; height: 27px; margin-left:auto; margin-right:auto;}
.iconm{width: 42px; height: 42px; margin-left:auto; margin-right:auto;}
.icon{width: 54px; height: 54px; margin-left:auto; margin-right:auto;}
.iconl{width: 72px; height: 72px; margin-left:auto; margin-right:auto;}
.iconll{width: 120px; height: 120px; margin-left:auto; margin-right:auto;}

/* ===== タイプ紹介：1枚の画像を差し替えて動物→人間（2026-07） ===== */
.type-scene .visual.type-transform-stage{
  position:relative;
  display:block;
  width:min(390px,37vw);
  margin-inline:auto;
  overflow:visible;
  animation:none!important;
}
.type-scene .type-transform-picture{
  display:block;
  width:100%;
  margin:0;
}
.type-scene .type-transform-picture img{
  display:block;
  width:100%;
  height:auto;
  max-height:66vh;
  object-fit:contain;
  margin:auto;
  transform-origin:50% 72%;
}
.type-scene.is-transform-shaking .type-transform-picture img{
  animation:typeAnimalShake .9s ease-in-out both;
}
.type-scene.is-transform-human .type-transform-picture img{
  animation:typeHumanAppear .48s ease-out both;
}
@keyframes typeAnimalShake{
  0%{opacity:1;transform:translateX(0) rotate(0) scale(1)}
  14%{transform:translateX(-7px) rotate(-2deg) scale(1.01)}
  28%{transform:translateX(7px) rotate(2deg) scale(1.01)}
  42%{transform:translateX(-6px) rotate(-1.6deg) scale(1.015)}
  56%{transform:translateX(6px) rotate(1.6deg) scale(1.015)}
  72%{opacity:1;transform:translateX(-3px) rotate(-.8deg) scale(1.01)}
  100%{opacity:0;transform:translateX(0) rotate(0) scale(.9)}
}
@keyframes typeHumanAppear{
  0%{opacity:0;transform:scale(.92)}
  100%{opacity:1;transform:scale(1)}
}
@media(max-width:834px){
  .type-scene .visual.type-transform-stage{width:min(68vw,320px)}
}
@media(prefers-reduced-motion:reduce){
  .type-scene.is-transform-shaking .type-transform-picture img,
  .type-scene.is-transform-human .type-transform-picture img{animation:none!important}
}


/* =========================================================
   WordPress generic subpages
   Structural / above-the-fold rules. demo1 front rules above remain unchanged.
   ========================================================= */
body.ypy-subpage{padding-top:74px;color:#183c30;background:#f7f5ed}
.ypy-subpage > header{background:#0b4a31!important;box-shadow:0 5px 20px rgba(0,0,0,.16);backdrop-filter:none!important}
.ypy-subpage > header .desktop-nav{display:flex;opacity:1;visibility:visible;transform:none;pointer-events:auto}
.ypy-subpage > header .desktop-nav a{color:#fff}
.ypy-subpage > header .desktop-nav ul{margin:0;padding:0;list-style:none}
.ypy-subpage > header .desktop-nav li{position:relative;list-style:none}
.ypy-subpage > header .desktop-nav .sub-menu{position:absolute;top:100%;left:0;min-width:220px;padding:10px;border-radius:0 0 12px 12px;background:#0b4a31;box-shadow:0 16px 30px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(-5px);transition:.2s}
.ypy-subpage > header .desktop-nav li:hover>.sub-menu,.ypy-subpage > header .desktop-nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.ypy-subpage > header .desktop-nav .sub-menu a{display:block;height:auto;padding:10px 12px;white-space:nowrap}
.ypy-subpage .mobile-menu-panel ul{margin:0;padding:0;list-style:none}
.ypy-subpage .mobile-menu-panel .sub-menu{padding-left:16px}

.subpage-hero{position:relative;min-height:460px;display:grid;align-items:end;overflow:hidden;isolation:isolate;background:linear-gradient(90deg,rgba(4,47,32,.88),rgba(4,47,32,.45) 58%,rgba(4,47,32,.10)),url("assets/bg2.webp") center 42%/cover no-repeat}
.subpage-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(4,38,27,.58),transparent 60%)}
.subpage-hero-inner{width:min(1180px,calc(100% - 56px));margin:auto;padding:90px 0 66px;color:#fff}
.subpage-kicker{margin:0 0 13px;font-size:.75rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase}
.subpage-hero h1{margin:0;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(3rem,6vw,6.4rem);font-weight:500;line-height:1.2;letter-spacing:.08em}
.subpage-hero-lead{max-width:760px;margin:24px 0 0;font-size:clamp(.96rem,1.35vw,1.18rem);line-height:2}
.subpage-hero-lead p{margin:0}.subpage-hero-lead p+p{margin-top:.65em}
.subpage-content-wrap{width:min(1080px,calc(100% - 56px));margin:auto;padding:clamp(64px,8vw,110px) 0}

@media(max-width:1024px){
  body.ypy-subpage{padding-top:66px}
  .ypy-subpage > header .desktop-nav{display:none}
  .subpage-hero{min-height:390px}
}
@media(max-width:700px){
  .subpage-hero-inner,.subpage-content-wrap{width:min(100% - 30px,1080px)}
  .subpage-hero-inner{padding:72px 0 48px}
  .subpage-hero h1{font-size:clamp(2.6rem,14vw,4.3rem)}
}