:root{
  --washi:#F6F1E6;
  --washi-deep:#EFE7D6;
  --sumi:#3A362F;
  --ai:#33506B;
  --ai-deep:#27405A;
  --kaki:#E08A3C;
  --saba:#93A2B4;
  --line:#E0D6C2;
  --card:#FFFDF8;
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Zen Kaku Gothic New',sans-serif;
  background:var(--washi);
  color:var(--sumi);
  line-height:1.9;
  overflow-x:hidden;
}
h1,h2,h3,.brand{font-family:'M PLUS Rounded 1c',sans-serif;}
a{color:var(--ai);}
img{max-width:100%;}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(246,241,230,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1040px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.brand{
  font-weight:900;font-size:1.25rem;color:var(--sumi);
  text-decoration:none;letter-spacing:.06em;display:flex;align-items:center;gap:10px;
}
.brand .mark{font-size:1.1rem;}
nav{display:flex;gap:20px;font-size:.92rem;font-weight:500;flex-wrap:wrap;}
nav a{text-decoration:none;color:var(--sumi);padding:4px 2px;border-bottom:2px solid transparent;transition:border-color .2s,color .2s;}
nav a:hover,nav a:focus-visible{color:var(--ai);border-bottom-color:var(--kaki);}
nav a.active{color:var(--ai);border-bottom-color:var(--ai);}
:focus-visible{outline:3px solid var(--kaki);outline-offset:3px;border-radius:4px;}

/* ---------- hero（トップ用） ---------- */
.hero{
  max-width:1040px;margin:0 auto;padding:72px 24px 56px;
  display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;
  position:relative;
}
.tategaki{
  writing-mode:vertical-rl;
  font-family:'M PLUS Rounded 1c',sans-serif;
  font-weight:900;font-size:clamp(2.2rem,4.5vw,3.4rem);
  color:var(--sumi);letter-spacing:.28em;
  border-right:3px double var(--kaki);
  padding-right:22px;
  min-height:320px;
}
.hero-copy h1{
  font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:700;line-height:1.7;
  color:var(--sumi);margin-bottom:18px;
}
.hero-copy h1 .accent{color:var(--kaki);}
.hero-copy p{max-width:34em;color:#5C574D;}
.hero-hint{
  margin-top:26px;display:inline-flex;align-items:center;gap:10px;
  background:var(--card);border:1.5px dashed var(--saba);
  border-radius:999px;padding:10px 20px;font-size:.88rem;color:var(--ai-deep);
}
.hero-hint .paw{font-size:1.05rem;}

/* ---------- sections ---------- */
section{max-width:1040px;margin:0 auto;padding:56px 24px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.8rem;font-weight:700;letter-spacing:.22em;color:var(--kaki);
  margin-bottom:8px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--kaki);border-radius:2px;}
section h2{font-size:1.7rem;font-weight:700;color:var(--ai);margin-bottom:26px;letter-spacing:.04em;}
.page-head{max-width:1040px;margin:0 auto;padding:56px 24px 8px;}
.page-head h2{font-size:1.9rem;font-weight:700;color:var(--ai);letter-spacing:.04em;margin-bottom:10px;}
.page-head .lead{color:#5C574D;max-width:40em;}

/* ---------- cat profiles ---------- */
.profiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
.profile{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 26px 22px;display:flex;gap:18px;align-items:flex-start;
  box-shadow:0 2px 10px rgba(58,54,47,.05);
}
.profile .face{flex:0 0 74px;position:relative;width:74px;height:74px;cursor:pointer;}
.profile .face svg,.profile .face .photo{
  position:absolute;inset:0;width:74px;height:74px;min-width:74px;min-height:74px;
  border-radius:50%;overflow:hidden;transition:opacity .35s ease;
}
.profile .face .photo{object-fit:cover;object-position:center;}
.profile .face .photo{object-fit:cover;opacity:0;box-shadow:0 2px 8px rgba(58,54,47,.15);}
.profile .face .photo{transform:translateX(-20px) scale(1.7);transform-origin:50% 42%;}
/* 顔アップ調整：--sで拡大率、--x/--yで表示位置(%）。個別に上書き可 */
.profile .face .svgwrap{opacity:1;transition:opacity .35s ease;}
.profile .face.show-photo .photo{opacity:1;}
.profile .face.show-photo .svgwrap{opacity:0;}
/* 本物のホバーがある環境（PC）のみhover切替。タッチ端末はタップトグルのみ */
@media (hover: hover) and (pointer: fine){
  .profile .face:hover .photo{opacity:1;}
  .profile .face:hover .svgwrap{opacity:0;}
}
.profile .face .photo-hint{
  position:absolute;bottom:3px;right:3px;width:20px;height:20px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:.7rem;opacity:.9;pointer-events:none;
}
.profile h3{font-size:1.15rem;color:var(--sumi);margin-bottom:4px;}
.profile .role{font-size:.8rem;color:var(--kaki);font-weight:700;letter-spacing:.08em;margin-bottom:8px;}
.profile p{font-size:.92rem;color:#5C574D;line-height:1.8;}

/* ---------- トップのページ導線カード ---------- */
.nav-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;}
.nav-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 26px 24px;text-decoration:none;color:var(--sumi);
  box-shadow:0 2px 10px rgba(58,54,47,.05);
  transition:transform .25s ease,box-shadow .25s ease;
  display:flex;flex-direction:column;gap:8px;
}
.nav-card:hover{transform:translateY(-4px);box-shadow:0 8px 22px rgba(58,54,47,.10);}
.nav-card .icon{font-size:1.6rem;}
.nav-card h3{font-size:1.15rem;color:var(--ai);}
.nav-card p{font-size:.88rem;color:#5C574D;flex:1;}
.nav-card .go{font-size:.85rem;font-weight:700;color:var(--kaki);}

/* ---------- apps ---------- */
.apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px;}
.app-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 2px 10px rgba(58,54,47,.05);
  transition:transform .25s ease,box-shadow .25s ease;
}
.app-card:hover{transform:translateY(-4px);box-shadow:0 8px 22px rgba(58,54,47,.10);}
.app-band{height:10px;}
.band-ai{background:var(--ai);}
.band-kaki{background:var(--kaki);}
.band-saba{background:var(--saba);}
.app-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;}
.app-body h3{font-size:1.25rem;margin-bottom:4px;}
.app-head{display:flex;gap:14px;align-items:center;margin-bottom:12px;}
.app-icon{width:56px;height:56px;border-radius:14px;box-shadow:0 2px 8px rgba(58,54,47,.15);flex:0 0 56px;}
.status{
  align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  padding:3px 12px;border-radius:999px;margin-bottom:12px;
}
.status.live{background:#E4EBDD;color:#4E6B3C;}
.status.dev{background:#F4E3CE;color:#A45F17;}
.app-body p{font-size:.9rem;color:#5C574D;flex:1;}
.app-link{
  margin-top:16px;align-self:flex-start;text-decoration:none;
  font-size:.85rem;font-weight:700;color:var(--card);background:var(--ai);
  padding:9px 20px;border-radius:999px;transition:background .2s;
}
.app-link:hover{background:var(--ai-deep);}
.app-link.disabled{background:#B9B2A4;pointer-events:none;}

/* ---------- 開発日記（noteリンクカード） ---------- */
.note-cards{display:flex;flex-direction:column;gap:18px;}
.note-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 28px;text-decoration:none;color:var(--sumi);
  box-shadow:0 2px 10px rgba(58,54,47,.05);
  transition:transform .25s ease,box-shadow .25s ease;
  display:flex;flex-direction:column;gap:6px;
}
.note-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(58,54,47,.10);}
.note-card .meta{display:flex;align-items:center;gap:12px;font-size:.82rem;color:#8B8474;}
.note-card .tag{
  font-size:.72rem;font-weight:700;color:var(--ai);border:1.5px solid var(--saba);
  border-radius:999px;padding:1px 12px;
}
.note-card h3{font-size:1.12rem;color:var(--sumi);}
.note-card .excerpt{font-size:.9rem;color:#5C574D;}
.note-card .read{font-size:.85rem;font-weight:700;color:var(--kaki);margin-top:4px;}

/* ---------- 日常日記（写真・動画） ---------- */
/* ---------- diary layout (2カラム) ---------- */
.diary-layout{display:flex;gap:32px;align-items:flex-start;}
.diary-main{flex:1 1 auto;min-width:0;}
.diary-side{flex:0 0 232px;display:flex;flex-direction:column;gap:20px;position:sticky;top:24px;}
.diary-articles{display:flex;flex-direction:column;gap:44px;}

/* ---------- diary index & calendar ---------- */
.diary-toc,.diary-cal{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 2px 10px rgba(58,54,47,.05);padding:16px 18px;
}
.diary-side .nav-title{
  font-family:'M PLUS Rounded 1c',sans-serif;font-weight:700;font-size:.9rem;
  color:var(--sumi);margin:0 0 12px;display:flex;align-items:center;gap:7px;
}
.diary-toc ul{list-style:none;margin:0;padding:0;}
.diary-toc li{border-bottom:1px dashed var(--line);}
.diary-toc li:last-child{border-bottom:none;}
.diary-toc a{
  display:block;text-decoration:none;padding:9px 3px;
  color:var(--sumi);transition:background .15s;
}
.diary-toc a:hover{background:var(--washi-deep);}
.diary-toc .toc-date{display:block;font-size:.72rem;color:#8B8474;font-weight:500;margin-bottom:2px;}
.diary-toc .toc-title{display:block;font-size:.86rem;color:var(--sumi);line-height:1.45;}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.cal-head button{
  border:1px solid var(--line);background:var(--washi);border-radius:7px;
  width:26px;height:26px;cursor:pointer;font-size:.9rem;color:var(--sumi);
  font-family:inherit;transition:background .15s;line-height:1;
}
.cal-head button:hover{background:var(--washi-deep);}
.cal-head .cal-month{font-family:'M PLUS Rounded 1c',sans-serif;font-weight:700;font-size:.9rem;color:var(--sumi);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-grid .cal-dow{text-align:center;font-size:.62rem;color:#8B8474;padding:2px 0;font-weight:700;}
.cal-grid .cal-cell{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:.72rem;color:#C4BCA9;border-radius:6px;
}
.cal-grid .cal-cell.in-month{color:var(--sumi);}
.cal-grid a.cal-cell{
  background:var(--kaki);color:#fff;font-weight:700;text-decoration:none;
  transition:transform .12s,box-shadow .12s;
}
.cal-grid a.cal-cell:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(224,138,60,.4);}

/* スマホ：1カラムに戻す（サイドバーを上へ） */
@media (max-width:720px){
  .diary-layout{flex-direction:column;}
  .diary-side{flex:1 1 auto;width:100%;position:static;flex-direction:row;flex-wrap:wrap;}
  .diary-side .diary-toc,.diary-side .diary-cal{flex:1 1 260px;}
}
.diary-article{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 2px 10px rgba(58,54,47,.05);
}
.diary-article .art-head{padding:22px 26px 0;}
.diary-article time{font-size:.8rem;color:#8B8474;font-weight:500;}
.diary-article .who{
  display:inline-block;margin-left:8px;font-size:.72rem;font-weight:700;
  border-radius:999px;padding:1px 10px;vertical-align:middle;
}
.who.karin{background:#E2E8EE;color:var(--ai-deep);}
.who.anzu{background:#F7E4CE;color:#A45F17;}
.who.both{background:#EBE5D6;color:#6B6353;}
.diary-article .diary-title{
  font-family:'M PLUS Rounded 1c',sans-serif;font-weight:700;
  font-size:1.35rem;color:var(--sumi);line-height:1.5;margin:10px 0 18px;
}
.diary-article .media{background:var(--washi-deep);display:flex;justify-content:center;}
.diary-article .media img{width:100%;height:auto;display:block;}
.diary-article .media video{width:100%;height:auto;display:block;}
.diary-article .media .missing{font-size:.85rem;color:#8B8474;padding:40px 16px;text-align:center;line-height:1.7;}
.diary-article .diary-body{padding:24px 26px 28px;}
.diary-article .diary-body p{font-size:.96rem;color:#4A463D;line-height:2;margin:0 0 1.1em;}
.diary-article .diary-body p:last-child{margin-bottom:0;}

/* ---------- contact ---------- */
.contact-grid{display:flex;flex-wrap:wrap;gap:16px;}
.contact-btn{
  text-decoration:none;font-weight:700;font-size:.95rem;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--card);border:1.5px solid var(--ai);color:var(--ai);
  padding:13px 28px;border-radius:999px;transition:background .2s,color .2s;
}
.contact-btn:hover{background:var(--ai);color:var(--card);}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);margin-top:40px;
  padding:30px 24px 130px;text-align:center;font-size:.85rem;color:#8B8474;
}
footer .neko-note{margin-top:6px;font-size:.8rem;}

/* ---------- cats（横向きシルエット・地面と足場を移動） ---------- */
.cat{
  position:fixed;left:0;top:0;width:120px;height:84px;
  z-index:90;pointer-events:none;
  will-change:transform;
}
.cat .sprite{width:100%;height:100%;will-change:transform;transform-origin:50% 100%;}
.cat svg{width:100%;height:100%;pointer-events:auto;cursor:pointer;overflow:visible;display:block;}
.cat .nametag{
  position:absolute;left:50%;top:-14px;transform:translateX(-50%);
  background:var(--sumi);color:var(--washi);font-size:.7rem;font-weight:700;
  padding:2px 10px;border-radius:999px;opacity:0;transition:opacity .2s;
  pointer-events:none;white-space:nowrap;letter-spacing:.08em;z-index:2;
}
.cat:hover .nametag{opacity:.92;}
.cat .bubble{
  position:absolute;left:50%;top:-22px;transform:translateX(-50%) scale(.6);
  background:var(--card);border:1.5px solid var(--sumi);color:var(--sumi);
  font-size:.78rem;font-weight:700;padding:5px 14px;border-radius:14px;
  opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;white-space:nowrap;z-index:2;
}
.cat .bubble::after{
  content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%) rotate(45deg);
  width:9px;height:9px;background:var(--card);border-right:1.5px solid var(--sumi);border-bottom:1.5px solid var(--sumi);
}
.cat.show-bubble .bubble{opacity:1;transform:translateX(-50%) scale(1);}

/* ポーズ切り替え */
.cat .pose-sit{display:none;}
.cat.sitting .pose-sit{display:block;}
.cat.sitting .pose-walk{display:none;}

/* 歩き：猫の歩様（左後→左前→右後→右前の順に、時間差で柔らかく） */
.cat.walking .leg{animation:gait .52s linear infinite;}
.cat.walking .leg.g2{animation-delay:-.13s;}
.cat.walking .leg.g3{animation-delay:-.26s;}
.cat.walking .leg.g4{animation-delay:-.39s;}
@keyframes gait{
  0%{transform:rotate(-15deg) translateY(0)}
  58%{transform:rotate(15deg) translateY(0)}
  64%{transform:rotate(12deg) translateY(-3.5px)}
  84%{transform:rotate(-9deg) translateY(-4.5px)}
  100%{transform:rotate(-15deg) translateY(0)}
}
.cat.walking .body-bob{animation:trot .26s ease-in-out infinite;}
@keyframes trot{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.2px)}}
.cat.walking .head-bob{animation:headbob .26s ease-in-out infinite;animation-delay:-.13s;}
@keyframes headbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4px)}}

/* 空中：足をたたむ */
.cat.airborne .leg{animation:none !important;}
.cat.airborne .leg.back{transform:rotate(-32deg);}
.cat.airborne .leg.front{transform:rotate(28deg);}

/* しっぽ：支点は体の内側 */
.cat .pose-walk .tail{transform-origin:26px 62px;animation:tailsway 2.6s ease-in-out infinite;}
@keyframes tailsway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
.cat.walking .pose-walk .tail{animation-duration:1s;}
.cat .pose-sit .tail{transform-origin:36px 102px;animation:tailflick 5.5s ease-in-out infinite;}
@keyframes tailflick{0%,80%,100%{transform:rotate(0)}86%{transform:rotate(-7deg)}92%{transform:rotate(4deg)}}

/* まばたき（ポーズ別に目の位置が違う） */
.cat .eyes-open{animation:blink 4.6s infinite;}
.cat .pose-walk .eyes-open{transform-origin:138px 33px;}
.cat .pose-sit .eyes-open{transform-origin:100px 25px;}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}

/* なでなで反応 */
.cat .eyes-happy,.cat .blush{opacity:0;}
.cat.happy .eyes-happy,.cat.happy .blush{opacity:1;}
.cat.happy .eyes-open{opacity:0;}
.cat .torso{transform-origin:80px 110px;}
.cat.happy .torso{animation:mochi .5s ease-in-out 2;}
@keyframes mochi{0%,100%{transform:scale(1,1)}30%{transform:scale(1.07,.93)}70%{transform:scale(.96,1.05)}}

/* のび〜 */
.cat.stretching .torso{animation:stretchy 1.05s ease-in-out;}
@keyframes stretchy{0%,100%{transform:scale(1,1)}40%,70%{transform:scale(1.2,.85)}}

/* 猫パンチ（ちょいちょい）：前の前足 */
.cat.swat .swatleg{animation:swat .26s ease-in-out 3 !important;}
@keyframes swat{0%,100%{transform:rotate(0)}55%{transform:rotate(-82deg)}}

/* hearts & paw prints */
.heart{
  position:fixed;z-index:95;font-size:1rem;pointer-events:none;
  animation:heartup 1.1s ease-out forwards;
}
@keyframes heartup{0%{opacity:0;transform:translateY(0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translateY(-56px) scale(1.15)}}
.pawprint{
  position:fixed;z-index:80;font-size:.85rem;opacity:.28;pointer-events:none;
  animation:pawfade 1.3s ease-out forwards;
}
@keyframes pawfade{to{opacity:0}}

/* cat toggle */
.cat-toggle{
  position:fixed;right:18px;bottom:18px;z-index:110;
  font-family:'M PLUS Rounded 1c',sans-serif;font-weight:700;font-size:.82rem;
  background:var(--sumi);color:var(--washi);border:none;cursor:pointer;
  padding:10px 18px;border-radius:999px;box-shadow:0 4px 12px rgba(58,54,47,.25);
}
.cat-toggle:hover{background:#4A453C;}
.sound-toggle{bottom:64px;}
body.cats-off .cat{display:none;}

/* responsive */
@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:48px;gap:24px;}
  .tategaki{writing-mode:horizontal-tb;border-right:none;border-bottom:3px double var(--kaki);
    padding:0 0 14px;min-height:0;letter-spacing:.14em;font-size:1.9rem;}
  nav{gap:12px;font-size:.82rem;}
  .cat{width:96px;height:67px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .cat .pose-walk .tail,.cat .pose-sit .tail,.cat .eyes-open,
  .cat.walking .leg,.cat.walking .body-bob,.cat.walking .head-bob,
  .cat.happy .torso,.cat.stretching .torso,.cat.swat .swatleg{animation:none;}
}


/* ロゴの毛色マーカー（案C：鯖虎=グレー / 三毛=オレンジ） */
.m-saba{background:linear-gradient(transparent 62%, rgba(147,162,180,.55) 62%);}
.m-mike{background:linear-gradient(transparent 62%, rgba(232,150,74,.5) 62%);}
.tategaki .m-saba{background:linear-gradient(to left, transparent 62%, rgba(147,162,180,.55) 62%);}
.tategaki .m-mike{background:linear-gradient(to left, transparent 62%, rgba(232,150,74,.5) 62%);}


/* ---------- 丸くなって寝る ---------- */
.cat .pose-sleep{display:none;}
.cat.sleeping .pose-sleep{display:block;}
.cat.sleeping .pose-walk,.cat.sleeping .pose-sit{display:none;}
.cat.sleeping .torso{animation:breathe 3.4s ease-in-out infinite;}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.018,.968)}}
.cat .sleep-z{position:absolute;left:72%;top:-4px;font-size:.9rem;opacity:0;pointer-events:none;z-index:2;}
.cat.sleeping .sleep-z{animation:zfloat 2.8s ease-in-out infinite;}
@keyframes zfloat{0%{opacity:0;transform:translateY(8px) scale(.7)}30%{opacity:.85}100%{opacity:0;transform:translateY(-18px) scale(1.1)}}

/* ---------- あくび ---------- */
.cat .mouth-yawn{opacity:0;}
.cat.yawning .mouth-yawn{
  opacity:1;transform-box:fill-box;transform-origin:50% 15%;
  animation:yawnmouth 1.5s ease-in-out;
}
.cat.yawning .mouth-normal{opacity:0;}
.cat.yawning .eyes-open{opacity:0;}
.cat.yawning .eyes-happy{opacity:1;}
@keyframes yawnmouth{0%{transform:scaleY(.15)}35%,70%{transform:scaleY(1)}100%{transform:scaleY(.2)}}

@media (prefers-reduced-motion:reduce){
  .cat.sleeping .torso,.cat.sleeping .sleep-z,.cat.yawning .mouth-yawn{animation:none;}
}