*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --black:#0a0a0a;
  --white:#fafaf8;
  --cream:#f0ebe3;
  --bg:#ffffff;
  --text:#1a1410;
  --gold:#8c6a3f;
  --gold-light:#b8956a;
  --gold-pale:#e8ddd0;
  --border:#ddd5c8;
  --gray-text:#6b6055;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Noto Serif JP',serif;
  overflow-x:hidden;
}

/* === CAT STALKER === */
#cat-stalker{
  width:64px;height:64px;
  position:fixed;
  pointer-events:none;
  z-index:9999;
  /* 中心基準 */
  margin-left:-32px;
  margin-top:-32px;
  transition:opacity .4s;
  will-change:transform;
}
#cat-stalker img{
  width:100%;height:100%;
  display:block;
  object-fit:contain;
}

/* === HEADER === */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 52px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.header-logo{
  height:38px;
}
nav{display:flex;gap:40px;}
nav a{
  font-family:'Cormorant Garamond',serif;
  font-size:13px;letter-spacing:.22em;
  color:var(--gray-text);
  text-decoration:none;
  text-transform:uppercase;
  transition:color .3s;
  position:relative;
}
nav a::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;
  height:1px;background:var(--gold);
  transform:scaleX(0);transition:transform .3s;
}
nav a:hover{color:var(--gold);}
nav a:hover::after{transform:scaleX(1);}

/* === FV === */
#fv{
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  background:var(--cream);
  padding-top:80px;
}
/* 薄いドット背景 */
#fv::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(139,106,63,.12) 1px,transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}
.fv-center{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  align-items:center;
  gap:0;
  animation:fvFloat 6s ease-in-out infinite;
}
@keyframes fvFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
.fv-logo-img{
  width:520px;max-width:88vw;
  filter:drop-shadow(0 8px 32px rgba(139,106,63,.2));
  display:block;
  
  margin-top:40px;
  margin-bottom:36px;
}
.fv-copy{text-align:center;}
.fv-copy h1{
  font-family:'Zen Antique Soft',serif;
  font-size:clamp(30px,5vw,52px);
  letter-spacing:.14em;
  font-weight:400;
  line-height:1.4;
  color:var(--text);
  margin-bottom:14px;
}
.fv-copy .en{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(28px,1.6vw,15px);
  letter-spacing:.45em;
  color:var(--gold);
  font-style:italic;
  font-weight:300;
}

/* FV下部の左右ボタンエリア */
.fv-bottom{
  position:relative;z-index:2;
  width:100%;max-width:1100px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:28px;
  margin-top:64px;
  padding:0 48px 80px;
}
.fv-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:4px;
  padding:32px 36px 28px;
  text-decoration:none;
  color:var(--text);
  transition:box-shadow .3s,transform .3s,border-color .3s;
  display:block;
  position:relative;
  overflow:hidden;
}
.fv-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(to right,var(--gold),var(--gold-light));
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
}
.fv-card:hover{
  box-shadow:0 8px 32px rgba(139,106,63,.15);
  transform:translateY(-3px);
  border-color:var(--gold-pale);
}
.fv-card:hover::before{transform:scaleX(1);}
.fv-card-label{
  font-family:'Cormorant Garamond',serif;
  font-size:12px;letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
  display:block;
}
.fv-card-title{
  font-family:'Zen Antique Soft',serif;
  font-size:20px;letter-spacing:.08em;
  color:var(--text);
  margin-bottom:14px;
  line-height:1.5;
}
.fv-card-desc{
  font-size:15px;line-height:2;
  color:var(--gray-text);
  letter-spacing:.04em;
}
/* プログレスレポートのダミーニュース */
.news-list{margin-top:16px;}
.news-item{
  display:flex;align-items:baseline;gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--border);
  font-size:14px;
}
.news-item:last-child{border-bottom:none;}
.news-date{
  font-family:monospace;
  font-size:13px;letter-spacing:.1em;color:var(--gold);
  white-space:nowrap;
}
.news-text{
  color:var(--gray-text);
  line-height:1.8;
  text-decoration:none;
  transition:.3s;
}

.news-text:hover{
  color:var(--gold);
  padding-left:4px;
}

/* カード②のiframeラッパー */
.card-iframe-wrap{
  margin-top:16px;
  border:1px solid var(--border);
  border-radius:3px;
  overflow:hidden;
  position:relative;
  height:200px;
}
.card-iframe-wrap iframe{
  width:100%;height:100%;
  border:none;
  transform:scale(.75);transform-origin:top left;
  width:133%;height:133%;
  pointer-events:none;
}
.card-iframe-overlay{
  position:absolute;inset:0;
  background:transparent;
  cursor:pointer;
}
.fv-card-link{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:16px;
  font-family:'Cormorant Garamond',serif;
  font-size:12px;letter-spacing:.2em;
  color:var(--gold);
  text-transform:uppercase;
}
.fv-card-link::after{content:'→';}

/* FV下部の仕切り線 */
.fv-divider{
  width:1px;height:60px;
  background:linear-gradient(to bottom,transparent,var(--gold),transparent);
  margin:0 auto;
  position:relative;z-index:2;
  margin-top:40px;
}

/* === SECTION BASE === */
section.content-section{padding:120px 52px;max-width:1200px;margin:0 auto;}

.section-label{
  font-family:'Cormorant Garamond',serif;
  font-size:14px;letter-spacing:.45em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
  display:block;
}
.section-heading{
  font-family:'Zen Antique Soft',serif;
  font-size:clamp(26px,3.5vw,38px);
  font-weight:400;
  letter-spacing:.1em;
  line-height:1.6;
  color:var(--text);
}
.section-heading-en{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(11px,1.3vw,13px);
  letter-spacing:.35em;
  color:var(--gold);
  font-style:italic;
  margin-top:8px;
  display:block;
}

/* === ABOUT === */
#about{background:var(--bg);}
.about-wrap{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;
  margin-top:72px;
}

.about-visual{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:360px; max-width:100%;
  padding:44px 0; margin:0 auto;
  border-radius:28px;
  background:#000;
  box-shadow:0 24px 60px rgba(30,20,10,.30), inset 0 0 0 1px rgba(184,149,106,.20);
  overflow:hidden;
  isolation:isolate;
}

/* ===== スキャンポッド（PC/基本） ===== */
.pod-glow{
  position:absolute; top:46%; left:50%;
  width:320px; height:420px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 45%,
    rgba(184,149,106,.22) 0%,
    rgba(184,149,106,.07) 42%,
    rgba(0,0,0,0) 72%);
  z-index:0; pointer-events:none;
}

.pod-base{
  position:absolute; left:50%; bottom:60px;
  width:210px; height:46px; margin-left:-105px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(245,232,210,.9) 0%,
    rgba(184,149,106,.5) 52%,
    rgba(184,149,106,0) 78%);
  box-shadow:0 0 40px rgba(184,149,106,.6);
  z-index:3; pointer-events:none; mix-blend-mode:screen;
  animation:base-pulse 3s ease-in-out infinite;
}
@keyframes base-pulse{
  0%,100%{ opacity:.7; transform:scaleX(.94); }
  50%    { opacity:1;  transform:scaleX(1.05); }
}

.scan-pod{
  --rise:175px;
  position:absolute; top:50%; left:50%;
  width:340px; height:460px;
  transform:translate(-50%,-50%);
  z-index:4; pointer-events:none;
  mix-blend-mode:screen;
}
.scan-pod .ring{
  position:absolute; left:50%; top:50%;
  width:280px; height:54px; margin-left:-140px; margin-top:-27px;
  border-radius:50%;
  border:2px solid #e0bd8c;
  box-shadow:0 0 18px rgba(224,189,140,.8), inset 0 0 12px rgba(224,189,140,.45);
  opacity:0;
  animation:scan-rise 4s linear infinite;
}
.scan-pod .ring:nth-child(1){ animation-delay:0s; }
.scan-pod .ring:nth-child(2){ animation-delay:.66s; }
.scan-pod .ring:nth-child(3){ animation-delay:1.33s; }
.scan-pod .ring:nth-child(4){ animation-delay:2s; }
.scan-pod .ring:nth-child(5){ animation-delay:2.66s; }
.scan-pod .ring:nth-child(6){ animation-delay:3.33s; }
@keyframes scan-rise{
  0%  { transform:translateY(var(--rise)) scale(.72); opacity:0; }
  12% { opacity:1; }
  88% { opacity:1; }
  100%{ transform:translateY(calc(var(--rise) * -1)) scale(1.12); opacity:0; }
}

.scan-text{
  position:absolute; left:0; right:0;
  text-align:center;
  z-index:5;                 /* リングより前面で常にクッキリ */
  pointer-events:none;
  color:#e0bd8c;
  text-shadow:0 0 10px rgba(224,189,140,.45);
}
.scan-text-top{ top:24px; }
.scan-text-bottom{ bottom:24px; }

.scan-text .en{
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-size:13px; letter-spacing:.3em;
  text-transform:uppercase;
}
.scan-text .ja{
  display:block; margin-top:6px;
  font-family:'Noto Serif JP',serif;
  font-size:11px; letter-spacing:.25em;
  color:#b8956a; opacity:.85;
  text-shadow:none;
}

.momo-spin{
  width:300px;height:420px;
  position:relative;
}
.momo-spin img{
  width:100%; height:100%;
  object-fit:contain; object-position:center bottom;
  position:absolute; top:0; left:0;
  opacity:0;                       /* 追加：既定は隠す */
  transition:opacity .08s linear;  /* フラッシュ用に速く */
}


.about-text .sub-copy{
  font-size:clamp(17px,2vw,20px);
  letter-spacing:.08em;line-height:1.9;
  color:var(--text);margin-bottom:6px;
}
.about-text .sub-copy-en{
  font-family:'Cormorant Garamond',serif;
  font-size:13px;letter-spacing:.35em;
  color:var(--gold);font-style:italic;margin-bottom:40px;
}
.about-items{display:flex;flex-direction:column;gap:28px;}
.about-item{border-left:2px solid var(--gold-pale);padding-left:20px;}
.about-item h4{
  font-family:'Cormorant Garamond',serif;
  font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px;
}
.about-item p{font-size:15px;line-height:2.1;color:var(--gray-text);letter-spacing:.04em;}

/* === CERT === */
#cert-section{
  background:var(--cream);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:100px 52px;
}
.cert-inner{max-width:800px;margin:0 auto;text-align:center;}
.cert-badge{
  width:88px;height:88px;
  border:1px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 36px;
}
.cert-badge span{
  font-family:'Cormorant Garamond',serif;
  font-size:24px;letter-spacing:.05em;color:var(--gold);
}
.cert-inner p{
  font-size:16px;line-height:2.3;
  color:var(--gray-text);letter-spacing:.05em;
  max-width:640px;margin:28px auto 0;
}

/* === TEXTBOOK === */
#textbook{background:var(--bg);}
.textbook-wrap{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:80px;align-items:start;margin-top:72px;
}

/* 左カラム：テキスト情報 */
.textbook-info{
  display:flex;flex-direction:column;gap:0;
}
/* 見出し内の書名 */
.section-heading-book{
  font-size:.85em;
  letter-spacing:.12em;
}
/* ボディコピー */
.textbook-body{
  font-family:'Noto Serif JP',serif;
  font-size:15px;line-height:2.2;color:var(--text);
  letter-spacing:.04em;
  margin-top:0;margin-bottom:24px;
}
/* スペック行（小文字） */
.textbook-spec{
  font-family:'Yu Gothic',sans-serif;
  font-size:12px;letter-spacing:.12em;
  color:var(--gray-text);
  line-height:2;
}

/* 右カラム：ブックカード */
.textbook-book-card{
  position:relative;
}
/* ケイ（罫線）囲みカード */
.book-frame{
  border:1px solid var(--border);
  padding:28px 24px 24px;
  background:var(--bg);
  position:relative;
}
/* ケイの内側二重線風 */
.book-frame::before{
  content:'';
  position:absolute;
  inset:6px;
  border:1px solid var(--gold-pale);
  pointer-events:none;
}
.book-cover-wrap{
  position:relative;
  display:block;
  max-width:220px;
  margin:0 auto 20px;
}
/* 背景装飾レイヤー（影） */
.book-cover-deco{
  position:absolute;
  top:10px;left:10px;right:-10px;bottom:-10px;
  border:1px solid var(--gold-pale);
  background:var(--cream);
  z-index:0;
}
/* 本の表紙画像 */
.book-cover-img{
  position:relative;z-index:1;
  width:100%;
  aspect-ratio:210/297;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(139,106,63,.16);
  border:1px solid var(--border);
}
/* PDF バッジ */
.book-badge{
  position:absolute;top:10px;right:10px;z-index:2;
  font-family:'Cormorant Garamond',serif;
  font-size:9px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--gold);
  padding:3px 7px;
  background:rgba(255,255,255,.88);
}
/* カード内説明文 */
.book-frame-desc{
  font-family:'Noto Serif JP',serif;
  font-size:13px;line-height:2;
  color:var(--gray-text);letter-spacing:.04em;
  text-align:center;
  margin-bottom:20px;
}
/* フルwidth購入ボタン */
.cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  flex-shrink:0;
  font-family:'Yu Gothic',sans-serif;
  font-size:14px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--gold);padding:12px 22px;
  text-decoration:none;transition:all .3s;
  position:relative;overflow:hidden;white-space:nowrap;
}
.cta-btn::after{
  content:'';position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s;z-index:-1;
}
.cta-btn:hover{color:#fff;}
.cta-btn:hover::after{transform:scaleX(1);}
/* ブロック幅ボタン */
.cta-btn--block{
  display:flex;justify-content:center;
  width:100%;box-sizing:border-box;
  letter-spacing:.25em;
  padding:14px;
}

@media(max-width:860px){
  .textbook-wrap{grid-template-columns:1fr;gap:48px;}
  .book-cover-wrap{max-width:200px;}
}

@media(max-width:860px){
  .textbook-wrap{grid-template-columns:1fr;gap:48px;}
  .book-cover-wrap{max-width:200px;}
}

/* === FOOTER === */
footer {
  background: #2e2d2d;
  border-top: 1px solid #d8c2a4;
  padding: 28px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.footer-copy {
  font-family: 'Yu Gothic', sans-serif;
  font-size: 13px;
  color: #fff;
  letter-spacing: .16em;
  color: #7c6b5d;
}
/* === SCROLL REVEAL === */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* WordPress admin bar adjustment */
body.admin-bar header {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar header {
    top: 46px;
  }
}

/* Ensure book cover image fills the card */
.book-cover-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* JSが動かない場合でも表示させる保険 */
.reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* =========================
   SP表示調整
========================= */
@media (max-width: 768px){

  .fv-bottom{
    grid-template-columns:1fr;
    gap:20px;
    padding:0 24px 60px;
  }

  .fv-card{
    padding:24px;
  }

  .fv-card-title{
    font-size:18px;
    line-height:1.6;
  }

  .fv-card-desc{
    font-size:14px;
    line-height:1.9;
  }

  .card-iframe-wrap{
    height:180px;
  }

}

.nav-toggle{
  display:none;
  width:40px;
  height:40px;
  border:none;
  background:transparent;
  cursor:pointer;
  position:relative;
  z-index:201;
}

.nav-toggle span{
  display:block;
  width:24px;
  height:1px;
  background:var(--gold);
  margin:6px auto;
  transition:.3s;
}

.scan-text-top{ top:14px; }
  .scan-text-bottom{ bottom:14px; }
  .scan-text .en{ font-size:11px; letter-spacing:.2em; }
  .scan-text .ja{ font-size:10px; }

@media (max-width:768px){

  header{
    padding:14px 20px;
  }

  .header-logo{
    height:32px;
  }

  .nav-toggle{
    display:block;
  }

  .site-nav{
    position:fixed;
    top:64px;
    left:0;
    right:0;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--border);
    display:flex;
    flex-direction:column;
    gap:0;
    padding:18px 24px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    transition:.3s ease;
    z-index:200;
  }

  .site-nav.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .site-nav a{
    padding:16px 0;
    font-size:14px;
    letter-spacing:.12em;
    border-bottom:1px solid var(--border);
  }

  .site-nav a:last-child{
    border-bottom:none;
  }
}

.siteHeader_pageTitle,
.page-header {
  background:#f0ebe3 !important;
  color:#1a1410 !important;
  border-bottom:3px solid #ddd5c8;
}

/* FV下部右側：PICT探索エリア */
.fv-pict-area {
  position: relative;
  width: 100%;
  min-height: 260px;
}

/* PICT共通 */
.pict-item {
  position: absolute;
  display: block;
  transition:
    transform 0.35s ease,
    filter 0.35s ease,
    opacity 0.35s ease;
}

.pict-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* ガラポン：位置調整はここ */
.pict-tower {
  width: 190px;
  right: 250px;
  bottom: 5px;
  cursor: pointer;
}

/* 鼻紋登録機：位置調整はここ */
.pict-bed {
  width: 270px;
  right: 30px;
  bottom: -6px;
  opacity: 0.95;
}

/* 壊れた時のサイズ調整 */
.pict-bed.is-bimon-broken {
  width: 235px;   /* ← お好みの値に */
}

/* クリックできる演出 */
.pict-tower:hover {
  transform: translateY(-8px) scale(1.04);
  filter: drop-shadow(0 0 14px rgba(255, 230, 150, 0.9));
}

/* 寝床も少しだけ反応 */
.pict-bed:hover {
  transform: translateY(-5px) scale(1.03);
  filter: drop-shadow(0 0 10px rgba(255, 230, 150, 0.65));
}

/* スマホ調整 */
@media (max-width: 768px) {
  .fv-pict-area {
    min-height: 210px;
  }

  .pict-tower {
    width: 150px;
    right: 180px;
    bottom: 8px;
  }

  .pict-bed {
    width:170px;
    right: 0;
    bottom: 0;
  }

  /* 壊れた時のサイズ調整 */
.pict-bed.is-bimon-broken {
  width: 160px;   /* ← お好みの値に */
}
}

/* PICTコピー */
.pict-copy {
  position: relative;
  margin-bottom: 24px;
}

.pict-lead {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.6;
  transform: rotate(-1deg);
}

.pict-sublead {
  font-size: 0.95rem;
  line-height: 1.9;
  opacity: 0.82;
}

/* 肉球が歩く演出 */
.paw-walk {
  position: absolute;
  right: 20px;
  top: -18px;
  width: 160px;
  height: 80px;
  pointer-events: none;
}

.paw {
  position: absolute;
  width: 22px;
  opacity: 0;
  animation: pawStep 4s infinite;
}

.paw-1 {
  left: 0;
  top: 48px;
  --paw-rotate: -18deg;
  animation-delay: 0s;
}

.paw-2 {
  left: 38px;
  top: 30px;
  --paw-rotate: 16deg;
  animation-delay: 0.6s;
}

.paw-3 {
  left: 76px;
  top: 18px;
  --paw-rotate: -14deg;
  animation-delay: 1.2s;
}

.paw-4 {
  left: 116px;
  top: 0;
  --paw-rotate: 18deg;
  animation-delay: 1.8s;
}

@keyframes pawStep {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.9) rotate(var(--paw-rotate));
  }
  12% {
    opacity: 0.75;
    transform: translateY(0) scale(1) rotate(var(--paw-rotate));
  }
  35% {
    opacity: 0.75;
    transform: translateY(0) scale(1) rotate(var(--paw-rotate));
  }
  55% {
    opacity: 0;
    transform: translateY(-2px) scale(1) rotate(var(--paw-rotate));
  }
  100% {
    opacity: 0;
    transform: translateY(-2px) scale(1) rotate(var(--paw-rotate));
  }
}

.nyan-animate {
  display: inline-flex;
  gap: 0.02em;
}

.nyan-animate span {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  animation: nyanTextUp 2.8s ease-in-out infinite;
}

.nyan-animate span:nth-child(1) { animation-delay: 0s; }
.nyan-animate span:nth-child(2) { animation-delay: 0.12s; }
.nyan-animate span:nth-child(3) { animation-delay: 0.24s; }
.nyan-animate span:nth-child(4) { animation-delay: 0.36s; }
.nyan-animate span:nth-child(5) { animation-delay: 0.48s; }

@keyframes nyanTextUp {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  75% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* =========================
   ABOUT PICT
========================= */

#about {
  position: relative;
  overflow: hidden;
}

.about-wrap {
  position: relative;
}

.about-pict {
  position: absolute;
  z-index: 3;
  pointer-events: auto;
}

.about-pict img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.92;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    filter 0.35s ease;
}

.about-pict:hover img {
  opacity: 1;
  transform: translateY(-4px) rotate(2deg);
  filter: drop-shadow(0 8px 14px rgba(80, 55, 35, 0.18));
}

/* 左上：ねずみ */
.about-pict-mouse {
  width: 60px;
  top: 32px;
  left: 5.5%;
  transform: rotate(-8deg);
}

/* 教科書原本 */
.about-pict-tunnel {
  width: 170px;
  top: 100px;
  right: 4%;
  transform: rotate(3deg);
}


/* 左下：画像診断チェッカー */
.about-pict-checker {
  width: 180px;
  bottom: 20px;
  left: -2%;
}

/* 中央下：発明品がらくた */
.about-pict-garakuta {
  width: 180px;
  bottom: 30px;
  left: 17%;
}

/* 右寄り下：留守番シミュレーター */
.about-pict-rusuban {
  width: 195px;
  bottom: 20px;
  left: 32%;
}

/* hover時に親の角度を維持しつつ少し動かす */
.about-pict-mouse:hover img {
  transform: translateY(-3px) rotate(-4deg);
}

.about-pict-tunnel:hover img {
  transform: translateY(-5px) rotate(2deg);
}


/* スマホでは邪魔にならないよう控えめに */
@media (max-width: 768px) {
  .about-pict-mouse {
    width: 45px;
    top: 20px;
    left: 6%;
  }

/* 教科書原本 */
  .about-pict-tunnel {
    width: 70px;
    top: 120px;
    right: 4%;
  }

  .about-pict-checker {
    width: 100px;
    bottom: -10px;
    left: 0%;
  }

  .about-pict-garakuta {
    width: 90px;
    bottom: 16px;
    left: 35%;
  }

  .about-pict-rusuban {
    width: 100px;
    bottom: 12px;
    left: 70%;
  }
}

/* =========================
   CERTIFICATION PICT
========================= */

#cert-section {
  position: relative;
  overflow: hidden;
}

.cert-inner {
  position: relative;
}

/* Cバッジ差し替え：猫シャドウ */
.cert-cat-shadow {
  width: 96px;
  margin: 0 auto 22px;
}

.cert-cat-shadow img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.85;
}

/* 左右PICT共通 */
.cert-pict {
  position: absolute;
  z-index: 2;
  pointer-events: auto;
}

.cert-pict img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.9;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    filter 0.35s ease;
}

.cert-pict:hover img {
  opacity: 1;
  transform: translateY(-4px) rotate(2deg);
  filter: drop-shadow(0 8px 14px rgba(80, 55, 35, 0.16));
}

/* 猫集会録音装置 */
.cert-pict-cardboard {
  width: 205px;
  left: -18%;
  top: 210px;
  transform: rotate(-4deg);
}

/* 飼い主装置 */
.cert-pict-catfood {
  width: 205px;
  right: -16%;
  top: 150px;
  transform: rotate(5deg);
}

/* スマホ調整 */
@media (max-width: 768px) {
  .cert-cat-shadow {
    width: 76px;
    margin-bottom: 18px;
  }

  .cert-inner p {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  .cert-pict-cardboard {
    width: 200px;
    left: -10px;
    top: 210px;
  }

  .cert-pict-catfood {
    width: 200px;
    right: -8px;
    top: 150px;
  }
}

.sub-copy-gothic {
  font-family: 'Cormorant Garamond',serif;
}
/* =========================
   TEXTBOOK CARD CTA 強調
========================= */

.textbook-book-card .book-frame {
  background: #fbf6ee;
  border: 1px solid #d8c2a4;
  box-shadow: 0 18px 40px rgba(92, 67, 43, 0.08);
}

.textbook-book-card .cta-btn {
  background: #8b5e34;
  color: #fff;
  border: 1px solid #8b5e34;
  transition:
    background 0.35s ease,
    color 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.textbook-book-card .cta-btn:hover {
  background: #5f3f23;
  border-color: #5f3f23;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(92, 67, 43, 0.18);
}

/* =========================
   TEXTBOOK PICT
========================= */

#textbook {
  position: relative;
  overflow: hidden;

  max-width: none;
  width: 100%;
  padding: 120px 52px;
}


.textbook-pict-layer {
  position: absolute;
  inset: 0;
  z-index: 3;           /* textbook-wrap(z:2)より上。layer自体はpointer-events:noneなのでコンテンツ操作に影響なし */
  pointer-events: none;
}

.textbook-wrap {
  position: relative;
  z-index: 2;

  max-width: 1200px;
  margin: 72px auto 0;
}
.textbook-pict {
  position: absolute;
  pointer-events: auto;
}

.textbook-pict img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.9;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    filter 0.35s ease;
}

.textbook-pict:hover img {
  opacity: 1;
  transform: translateY(-4px) rotate(2deg);
  filter: drop-shadow(0 8px 14px rgba(80, 55, 35, 0.16));
}

/* 相性診断機 */
.textbook-pict-cube {
  width: 220px;
  left: 3vw;
  top: 700px;
}

/* 段ボール転送装置 */
.textbook-pict-tensou {
  width:180px;
  left: 40vw;
  top: 285px;
}



.textbook-contact-cta {
  margin-top: 32px;
  max-width: 620px;
}

.textbook-contact-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  background: #3f6f4a;
  color: #fff;
  border-radius: 16px;
  padding: 24px 32px;
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

.textbook-contact-title {
  font-family: serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .08em;
}

.textbook-contact-text {
  flex: 1;
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
}

.textbook-contact-button {
  border: none;
  background: transparent;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.textbook-contact-button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 14px;
  width: 44px;
  height: 44px;
  background: #fff;
  color: #3f6f4a;
  border-radius: 50%;
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.contact-modal.is-open {
  display: block;
}

.contact-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
}

.contact-modal-box {
  position: relative;
  width: min(520px, calc(100% - 40px));
  margin: 8vh auto;
  background: #fbf8f2;
  border-radius: 18px;
  padding: 44px 36px 36px;
  z-index: 1;
}

.contact-modal-close {
  position: absolute;
  top: 18px;
  right: 22px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #777;
}

.contact-modal-label {
  text-align: center;
  color: #c99a32;
  letter-spacing: .45em;
  font-size: 13px;
  margin-bottom: 18px;
}

.contact-modal-box h2 {
  text-align: center;
  font-family: serif;
  font-size: 24px;
  margin: 0 0 20px;
}

.contact-modal-lead {
  text-align: center;
  font-size: 13px;
  line-height: 1.9;
  color: #777;
  margin-bottom: 28px;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-modal label {
  display: block;
  font-size: 12px;
  color: #777;
  margin-bottom: 14px;
}

.contact-modal label span {
  color: #c33;
}

.contact-modal input,
.contact-modal textarea {
  width: 100%;
  margin-top: 7px;
  padding: 14px;
  border: 1px solid #d8d4cc;
  border-radius: 7px;
  background: #fff;
  font-size: 14px;
}

.contact-modal textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-submit {
  display: block;
  margin: 18px auto 0;
  border: none;
  background: #86a987;
  color: #fff;
  border-radius: 7px;
  padding: 14px 34px;
  font-weight: 700;
  cursor: pointer;
}

.contact-form-message {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
}

.contact-honeypot {
  display: none;
}

@media (max-width: 768px) {
  .textbook-contact-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
  }
}

.textbook-contact-inner {
  cursor: pointer;
}

/* =========================
   TEXTBOOK：Contact CTAと右カード下揃え
========================= */

#textbook .textbook-wrap {
  align-items: stretch;
}

#textbook .textbook-info {
  height: 100%;
}

#textbook .textbook-book-card {
  height: 100%;
}

#textbook .book-frame {
  height: 100%;
  min-height: 565px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#textbook .book-cover-wrap {
  max-width: 260px;
  width: 260px;
  margin: 0 auto 24px;
}

#textbook .book-frame-desc {
  margin-top: 8px;
  margin-bottom: 24px;
}

#textbook .textbook-contact-inner {
  cursor: pointer;
}

/* Contact CTA hover演出 */
#textbook .textbook-contact-inner {
  position: relative;
  overflow: hidden;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

#textbook .textbook-contact-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.16) 45%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events: none;
}

#textbook .textbook-contact-inner:hover {
  transform: translateY(-4px) rotate(-.4deg);
  background: #477d54;
  box-shadow: 0 18px 38px rgba(0,0,0,.18);
}

#textbook .textbook-contact-inner:hover::before {
  transform: translateX(120%);
}

#textbook .textbook-contact-inner:hover .textbook-contact-button span {
  animation: contactArrowNeko .55s ease;
}

@keyframes contactArrowNeko {
  0%   { transform: translateX(0) rotate(0); }
  35%  { transform: translateX(5px) rotate(8deg); }
  70%  { transform: translateX(-2px) rotate(-5deg); }
  100% { transform: translateX(0) rotate(0); }
}

/* =========================
   SP修正パッチ (2026-05 rev3)
   ① 全体右ズレ修正
   ② About：1カラム化・ピクトを文字に被らない位置へ
   ③ Cert：ピクトをセクション下端に安全配置
   ④ Textbook：1カラム化・ピクトをbookカード下に安全配置
========================= */
@media (max-width: 768px) {

  /* ------------------------------------------------
     ① 全体右ズレ：content-sectionのpadding縮小
  ------------------------------------------------ */
  section.content-section {
    padding: 72px 20px;
    max-width: 100%;
  }

  /* ------------------------------------------------
     ② About：2カラム→1カラム
  ------------------------------------------------ */
  .about-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
  }

  /* 猫画像エリア：コンパクトに中央配置 */
  .about-visual{
    display:flex; width:240px; padding:28px 0;
    border-radius:22px; margin:0 auto;
  }
  .momo-spin { width: 180px; height: 240px; }
  .momo-flat { width: 150px; height: 240px; }   /* 250:400 と同じ 5:8 */

 .pod-glow{ width:210px; height:280px; }
  .scan-pod{ --rise:120px; width:230px; height:320px; }
  .scan-pod .ring{ width:190px; height:38px; margin-left:-95px; margin-top:-19px; }
  .pod-base{ width:140px; height:32px; margin-left:-70px; bottom:38px; }



  /* About ピクト：
     ねずみ → セクション左上（既存設定で概ねOK、微調整）
     トンネル → セクション右上（既存設定で概ねOK）
     爪とぎ → aboutセクション自体の下端・右端に退避
              テキストの flow より下に来るよう top を大きく設定 */
  .about-pict-mouse {
    width: 36px;
    top: auto;
    bottom: 12px;
    left: 4px;
  }

  .about-pict-tunnel {
    width:110px;
    top: 400px;
    bottom: auto;
    right: 2px;
  }

  
  /* ------------------------------------------------
     ③ Cert：ピクトをセクション下端・左右に安全配置
        #cert-section の overflow:hidden を解除して
        はみ出しを許容、cert-inner で余白確保
  ------------------------------------------------ */
  #cert-section {
    overflow: visible;
    padding-bottom: 40px;
  }

  .cert-inner {
    position: relative;
    overflow: visible;
    padding-bottom: 96px;
  }

  .cert-pict-cardboard {
    width: 115px;
    left: 4px;
    top: auto;
    bottom: -15px;
    transform: rotate(-4deg);
  }

  .cert-pict-catfood {
    width: 115px;
    right: 4px;
    top: auto;
    bottom: -15px;
    transform: rotate(5deg);
  }

  /* ------------------------------------------------
     ④ Textbook：1カラム化
        ピクトは textbook-pict-layer（absolute, inset:0）が
        基準なので、コンテンツと重ならない
        セクション下部の左右隅に配置する
  ------------------------------------------------ */
  #textbook {
    padding: 72px 20px 120px; /* 下padding大きめでピクト用余白 */
    overflow: hidden;
  }

  .textbook-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 32px;
  }

  /* ---- Textbook ピクト3つ：セクション下端に左2個・右1個 ---- */

  /* 相性診断機 */
  .textbook-pict-cube {
    display: block;
    width: 130px;
    left: 12px;
    right: auto;
    top: auto;
    bottom: 32px;
  }

  /* 転送装置：右隣 */
  .textbook-pict-tensou {
    display: block;
    width: 120px;
    left: 150px;
    right: auto;
    top: auto;
    bottom: 28px;
  }

  /* book-frameの最小高さ解除 */
  #textbook .book-frame {
    min-height: 0;
  }

  /* book-cover幅をスマホに合わせて縮小 */
  #textbook .book-cover-wrap {
    width: 100%;
    max-width: 200px;
  }

  /* contact CTAの横並びを縦に */
  .textbook-contact-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  .textbook-contact-cta {
    max-width: 100%;
  }

  /* fv-right-card内のpict-areaがはみ出す場合の保険 */
  .fv-right-card {
    overflow: hidden;
  }

}

/* ===== momo パターンB：平面回転 ===== */
.momo-spin{ transition:opacity .6s ease; }   /* クロスフェード用に追記 */

.momo-flat{
  position:absolute;
  top:50%;
  left:50%;
  width:250px;          /* 実寸に合わせて修正 */
  height:400px;         /* 〃 */
  object-fit:contain;
  transform-origin:center center;
  opacity:0;
  pointer-events:none;
  z-index:2;
  transition:opacity .6s ease;
  animation:momo-rotate 12s linear infinite;
}

/* 切り替え：.about-visual に momo-show-flat が付いたらB表示 */
.about-visual.momo-show-flat .momo-spin{ opacity:0; }
.about-visual.momo-show-flat .momo-flat{ opacity:1; }

/* 右回り（時計回り）。translateで中央維持したまま回転 */
@keyframes momo-rotate{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to  { transform:translate(-50%,-50%) rotate(360deg); }
}