@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* NSE 台本システム Ver.1.0 */

.nse-script{
  writing-mode: horizontal-tb !important;
  height:85vh !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  background:#111 !important;
  color:#f3f3f3 !important;
  padding:24px !important;
  box-sizing:border-box !important;
  border-radius:15px !important;
  display:flex !important;
  flex-direction:row-reverse !important;
  gap:0.5em !important;

  -webkit-overflow-scrolling:touch;
}
  .nse-block{
  display:inline-block !important;
  padding:8px !important;
  margin-left:0 !important;
  box-sizing:border-box !important;
  border:2px solid transparent !important;
  border-radius:12px !important;
  vertical-align:top !important;
  overflow:visible !important;
	  height:auto !important;
  writing-mode:vertical-rl !important;
  text-orientation:mixed !important;
  flex:0 0 auto !important;
	  
}
.nse-name{
  font-size:24px !important;
  font-weight:bold !important;
  margin-top:0 !important;
  margin-bottom:18px !important;
  cursor:pointer !important;
	display:inline-block !important;
	margin-left:-24px !important;
}
.nse-line{
  font-size:18px !important;
  line-height:1.5!important;
  white-space:pre-wrap !important;	
  overflow:visible !important;
}

/* キャラクター名前色 */
.raiden .nse-name{ color:#6ec1ff !important; }
.sara .nse-name{ color:#b57cff !important; }
.ishtar .nse-name{ color:#CC6699 !important; }
.stanley .nse-name{ color:#FFCC33 !important; }
.altair .nse-name{ color:#ff4d6d !important; }
.putin .nse-name{ color:#4CAF50 !important; }

.kirito .nse-name{ color:#2196f3 !important; }
.yifan .nse-name{ color:#fbc02d !important; }
.emma .nse-name{ color:#ff4fa0 !important; }

/* 押した時 */
.raiden.active{
  border-color:#6ec1ff !important;
  background:rgba(110,193,255,0.12) !important;
}

.sara.active{
  border-color:#b57cff !important;
  background:rgba(181,124,255,0.12) !important;
}

.ishtar.active{
  border-color:#CC6699 !important;
  background:rgba(204,102,153,0.12) !important;
}

.stanley.active{
  border-color:#e68600 !important;
  background:rgba(230,134,0,0.12) !important;
}

.altair.active{
  border-color:#ff4d6d !important;
  background:rgba(255,77,109,0.12) !important;
}

.putin.active{
  border-color:#4CAF50 !important;
  background:rgba(76,175,80,0.12) !important;
}

.kirito.active{
  border-color:#2196f3 !important;
  background:rgba(33,150,243,0.12) !important;
}

.yifan.active{
  border-color:#fbc02d !important;
  background:rgba(251,192,45,0.14) !important;
}

.emma.active{
  border-color:#ff4fa0 !important;
  background:rgba(255,79,160,0.12) !important;
}
/* ===== ライデン（緋色）===== */
.raiden .nse-name{
  color:#B22222 !important;
}

.raiden.active{
  border-color:#B22222 !important;
  background:rgba(178,34,34,0.15) !important;
}
.nse-line{
  position:static !important;
  margin:0 !important;
  overflow:visible !important;	
}

/* ===== NSE 幕見出し ===== */
.nse-heading{
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  flex:0 0 auto !important;

  color:#ffffff !important;
  font-size:22px !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  letter-spacing:0.12em !important;

  padding:16px 8px !important;
  margin:0 0.5em !important;

  display:flex !important;
  align-items:flex-start !important;
justify-content:flex-start !important;
}
/* NSE 枠の下側を少し短くする */
.nse-script{
  align-items:flex-start !important;
}

.nse-block{
  height:calc(100% - 32px) !important;
}

/* ===== 金糸雀 ===== */

/* 彼女 */
.nse-block.nse-female .nse-name{
  color:#8BC34A !important;
}

/* 彼 */
.nse-block.nse-male .nse-name{
  color:#5C6BC0 !important;
}

/* クリック */
.nse-block.nse-female.active{
  border-color:#8BC34A !important;
  background:rgba(139,195,74,0.15) !important;
}

.nse-block.nse-male.active{
  border-color:#5C6BC0 !important;
  background:rgba(92,107,192,0.15) !important;
}

/* ライン */
.nse-line{
  position:static !important;
  margin:0 !important;
  overflow:visible !important;
}
/* ===========================
   猫One〜 TOP PAGE
=========================== */

.neko-top-hero{

    padding:120px 20px;
    text-align:center;

    background:
    radial-gradient(circle at top,
    rgba(135,90,255,.25),
    rgba(0,0,0,0) 45%),
    #080808;

}

.neko-top-inner{

    max-width:900px;
    margin:auto;

}

.neko-top-label{

    color:#bfa9ff;
    letter-spacing:4px;
    font-size:14px;
    margin-bottom:15px;

}

.neko-top-hero h1{

    color:#fff;
    font-size:56px;
    margin-bottom:15px;
    font-weight:700;

}

.neko-top-hero h2{

    color:#d7c5ff;
    font-size:34px;
    margin-bottom:40px;
    font-weight:300;

}

.neko-top-lead{

    color:#ddd;
    font-size:20px;
    line-height:2.2;

}



/* ===========================
   世界紹介
=========================== */

.neko-world-section{

    background:#111;
    padding:90px 20px;

}

.neko-section-title{

    color:#fff;
    text-align:center;
    font-size:42px;
    margin-bottom:20px;

}

.neko-section-text{

    color:#cfcfcf;
    text-align:center;
    max-width:700px;
    margin:auto auto 70px;
    line-height:2;

}



/* ===========================
   カード
=========================== */

.neko-world-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

    max-width:1200px;

    margin:auto;

}



.neko-world-card{

    background:#1a1a1a;

    border:1px solid #2b2b2b;

    border-radius:18px;

    padding:40px 25px;

    text-align:center;

    transition:.35s;

    text-decoration:none;

    display:block;

}



.neko-world-card:hover{

    transform:translateY(-8px);

    border-color:#9d73ff;

    box-shadow:
    0 0 35px rgba(138,92,255,.35);

}



.neko-world-card span{

    font-size:50px;

    display:block;

    margin-bottom:20px;

}



.neko-world-card h3{

    color:#fff;

    font-size:28px;

    margin-bottom:15px;

}



.neko-world-card p{

    color:#bdbdbd;

    line-height:1.8;

}



/* ===========================
   スマホ
=========================== */

@media(max-width:768px){

.neko-top-hero{

padding:80px 20px;

}

.neko-top-hero h1{

font-size:40px;

}

.neko-top-hero h2{

font-size:24px;

}

.neko-top-lead{

font-size:17px;

line-height:2;

}

.neko-section-title{

font-size:30px;

}

}
/*/* ===========================
   TOP 流星群演出
=========================== */

/* ===========================
   TOP JS流星演出
=========================== */

.neko-top-hero{
    position:relative;
    overflow:hidden;
}

.neko-top-inner{
    position:relative;
    z-index:2;
}

.neko-meteor{
    position:absolute;
    width:2px;
    height:2px;
    background:#fff;
    border-radius:50%;
    pointer-events:none;
    z-index:1;
    opacity:0;
    box-shadow:
        0 0 8px rgba(255,255,255,.9),
        0 0 18px rgba(180,140,255,.7);
    animation:nekoMeteorMove 1.4s linear forwards;
}

.neko-meteor::after{
    content:"";
    position:absolute;
    top:50%;
    right:0;
    width:120px;
    height:1px;
    background:linear-gradient(
        to left,
        rgba(255,255,255,.9),
        rgba(180,140,255,.45),
        rgba(255,255,255,0)
    );
    transform:translateY(-50%);
}

@keyframes nekoMeteorMove{
    0%{
        opacity:0;
        transform:translate(0,0) rotate(-28deg) scale(.8);
    }

    10%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translate(-520px,320px) rotate(-28deg) scale(1.1);
    }
}
/*/* 旧・疑似要素の月を停止 */
.neko-top-hero::before,
.neko-top-hero::after{
    content:none !important;
}

/* 実月齢連動の月 */
.neko-real-moon{
    position:absolute;
    top:55px;
/* ===========================
   Moon System v0.5
   NASA Moon Texture / 月齢マスク対応
=========================== */

/* 旧CSS月を停止 */
.neko-top-hero::before,
.neko-top-hero::after{
  content:none !important;
}

/* TOP内の重なり調整 */
.neko-top-hero{
  position:relative;
  overflow:hidden;
}

.neko-top-inner{
  position:relative;
  z-index:5;
}

/* 月本体 */
.neko-real-moon{
  position:absolute;
  top:55px;
  left:55px;
  width:110px;
  height:110px;
  border-radius:50%;
  z-index:4;
  pointer-events:auto;
  overflow:hidden;

  background-image:
    radial-gradient(circle at 35% 30%,
      rgba(255,255,255,.22),
      transparent 38%
    ),
    url("https://www.nekoone-official.com/wp-content/uploads/2026/07/IMG_3221.webp");

  background-size:cover;
  background-position:center;

  box-shadow:
    0 0 18px rgba(255,235,190,.75),
    0 0 45px rgba(255,205,120,.35),
    0 0 90px rgba(255,190,90,.18);

  filter:
    contrast(1.08)
    brightness(1.08)
    saturate(.95);
}

/* 月の立体感 */
.neko-real-moon::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:2;
  pointer-events:none;
/* ===========================
   Moon System v1.0
=========================== */

.neko-top-hero::before,
.neko-top-hero::after{
  content:none !important;
}

.neko-top-hero{
  position:relative;
  overflow:hidden;
}

.neko-top-inner{
  position:relative;
  z-index:5;
}

.neko-real-moon{
  position:absolute;
  top:55px;
  left:55px;
  width:110px;
  height:110px;
  border-radius:50%;
  z-index:4;
  overflow:hidden;
  pointer-events:auto;

  background-image:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.22), transparent 36%),
    url("https://www.nekoone-official.com/wp-content/uploads/2026/07/IMG_3221.webp");

  background-size:cover;
  background-position:center;

  box-shadow:
    0 0 18px rgba(255,235,190,.75),
    0 0 45px rgba(255,205,120,.35),
    0 0 90px rgba(255,190,90,.18);

  filter:
    contrast(1.08)
    brightness(1.08)
    saturate(.95);
}

.neko-real-moon::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:2;
  pointer-events:none;

  box-shadow:
    inset -16px -10px 20px rgba(0,0,0,.24),
    inset 8px 6px 16px rgba(255,255,255,.14);
}

.neko-real-moon::after{
  content:"";
  position:absolute;
  top:-3%;
  left:var(--moon-shadow-x, 0%);
  width:106%;
  height:106%;
  border-radius:50%;
  z-index:3;
  pointer-events:none;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(5,5,12,.96) 0%,
      rgba(5,5,12,.94) 52%,
      rgba(5,5,12,.76) 72%,
      rgba(5,5,12,0) 100%
    );

  transition:left 1.2s ease;
}

@media(max-width:768px){
  .neko-real-moon{
    top:35px;
    left:28px;
    width:92px;
    height:92px;
  }
}
	
	/* =========================================================
   NekoOne World Engine
   v1.1.2 - WordPress Stable / Moon Info
   Removed moving moon. Kept Aurora, stars, moving Summer Triangle, light meteors.
========================================================= */

:root {
  --moon-info-size: 64px;
  --moon-filter-default:
    sepia(.42)
    saturate(1.45)
    hue-rotate(-12deg)
    brightness(1.18)
    contrast(1.08);
}

.neko-world-engine {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  contain: layout paint;
}

.world-aurora-layer,
.neko-hero-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.world-aurora-layer { z-index: 1; }
.neko-hero-sky { z-index: 2; }

/* Aurora */
.aurora-lab {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 84%, rgba(18,48,88,.16), transparent 56%),
    linear-gradient(to bottom, #02040a 0%, #000 74%, #000 100%);
}

.aurora-lab-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  pointer-events: none;
}

.aurora-lab::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 120%;
  height: 56%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 22% 44%, rgba(135,255,255,.10), transparent 46%),
    radial-gradient(ellipse at 56% 36%, rgba(90,180,255,.10), transparent 48%),
    radial-gradient(ellipse at 82% 34%, rgba(220,95,230,.07), transparent 50%);
  filter: blur(32px);
  opacity: .48;
  animation:
    auroraAtmosphere 46s ease-in-out infinite alternate,
    auroraCycleAtmosphereLite 54s linear infinite;
}

.aurora-bundle-field {
  position: absolute;
  top: -2%;
  left: 0;
  width: 104%;
  height: 70%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 50%, transparent 100%);
  animation:
    auroraCycleOpacityLite 54s linear infinite,
    auroraLeftWindLite 54s ease-in-out infinite;
}

.aurora-bundle {
  position: absolute;
  top: 0;
  left: var(--bundle-left);
  width: var(--bundle-width);
  height: var(--bundle-height);
  opacity: var(--bundle-opacity);
  transform-origin: top center;
  animation:
    auroraBundleDrift var(--bundle-speed) ease-in-out infinite alternate,
    auroraBundleBreath var(--bundle-breath) ease-in-out infinite alternate;
  animation-delay: var(--bundle-delay);
}

.aurora-bundle:nth-child(3n) { opacity: calc(var(--bundle-opacity) * .68); }
.aurora-bundle:nth-child(4n) { opacity: calc(var(--bundle-opacity) * .38); }
.aurora-bundle:nth-child(5n) { opacity: calc(var(--bundle-opacity) * 1.12); }

.aurora-ray {
  position: absolute;
  top: 0;
  left: var(--ray-left);
  width: var(--ray-width);
  height: var(--ray-height);
  border-radius: 999px;
  opacity: var(--ray-opacity);
  transform-origin: top center;
  background:
    linear-gradient(
      to bottom,
      rgba(255,150,235,0) 0%,
      rgba(255,130,230,.035) 10%,
      rgba(170,115,255,.075) 22%,
      rgba(85,165,255,.13) 38%,
      rgba(70,215,255,.26) 58%,
      rgba(95,245,255,.50) 74%,
      rgba(185,255,255,.72) 88%,
      rgba(245,255,255,.42) 96%,
      rgba(245,255,255,0) 100%
    );
  filter:
    blur(var(--ray-blur))
    brightness(1.16)
    saturate(1.72);
  animation: auroraRayInner var(--ray-speed) ease-in-out infinite alternate;
  animation-delay: var(--ray-delay);
}

.aurora-ray::before {
  content: "";
  position: absolute;
  top: 16%;
  left: 50%;
  width: 16%;
  height: 72%;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(170,255,255,.08) 28%,
      rgba(210,255,255,.32) 68%,
      rgba(255,255,255,.22) 88%,
      transparent 100%
    );
  filter: blur(1.6px);
  opacity: .48;
}

.aurora-ray::after {
  content: "";
  position: absolute;
  top: 56%;
  left: 50%;
  width: 34%;
  height: 16%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(245,255,255,.16);
  filter: blur(3px);
  opacity: .34;
}

.aurora-ray:nth-child(3n) { opacity: calc(var(--ray-opacity) * .56); }
.aurora-ray:nth-child(4n) { opacity: calc(var(--ray-opacity) * .82); }
.aurora-ray:nth-child(5n) { width: calc(var(--ray-width) * .60); }
.aurora-ray:nth-child(7n) { width: calc(var(--ray-width) * 1.32); }
.aurora-ray:nth-child(8n)::after { opacity: 0; }
.aurora-ray:nth-child(6n)::before { opacity: .20; }

/* Sky */
.neko-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow:
    0 0 6px rgba(255,255,255,.9),
    0 0 14px rgba(170,200,255,.65);
  animation: nekoTwinkle 3.6s ease-in-out infinite alternate;
}

.summer-triangle {
  position: absolute;
  left: 12%;
  top: 16%;
  width: 280px;
  height: 230px;
  animation: triangleMoveRight 52s linear infinite;
}

.triangle-star {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 10px rgba(255,255,255,1),
    0 0 24px rgba(160,210,255,.85),
    0 0 44px rgba(120,160,255,.45);
  pointer-events: auto;
}

.triangle-star b {
  position: absolute;
  left: 13px;
  top: -8px;
  font-size: 10px;
  font-weight: 400;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease;
}

.triangle-star:hover b,
.triangle-star:active b {
  opacity: 1;
  transform: translateY(0);
}

.star-vega { left: 24px; top: 18px; }
.star-deneb { left: 225px; top: 55px; }
.star-altair { left: 118px; top: 185px; }

.meteor {
  position: absolute;
  width: 110px;
  height: 2px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92));
  box-shadow:
    0 0 8px rgba(255,255,255,.55),
    0 0 14px rgba(160,200,255,.32);
}

.meteor-01 {
  top: 28%;
  left: 86%;
  animation: meteorOne 6.8s linear infinite;
}

.meteor-02 {
  top: 50%;
  left: 40%;
  animation: meteorTwo 6.8s linear infinite;
  animation-delay: 3.4s;
}

/* Moon Info */
.moon-info-button {
  position: absolute;
  left: 70px;
  bottom: 125px;
  width: var(--moon-info-size);
  height: var(--moon-info-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  z-index: 5;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.moon-info-button::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,218,145,.24), transparent 62%);
  filter: blur(3px);
  opacity: .58;
  pointer-events: none;
}

.moon-info-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  filter: var(--moon-filter-default);
  box-shadow:
    0 0 10px rgba(255,205,120,.45),
    0 0 22px rgba(255,170,80,.24);
}

.moon-phase-shadow {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: transparent;
}

.moon-info-button.phase-new .moon-phase-shadow { background: rgba(0,0,0,.82); }
.moon-info-button.phase-waxing-crescent .moon-phase-shadow {
  background: radial-gradient(circle at 76% 50%, transparent 0 24%, rgba(0,0,0,.72) 25% 100%);
}
.moon-info-button.phase-first-quarter .moon-phase-shadow {
  background: linear-gradient(to right, rgba(0,0,0,.72) 0 50%, transparent 51% 100%);
}
.moon-info-button.phase-waxing-gibbous .moon-phase-shadow {
  background: radial-gradient(circle at 112% 50%, transparent 0 58%, rgba(0,0,0,.58) 59% 100%);
}
.moon-info-button.phase-full .moon-phase-shadow { background: transparent; }
.moon-info-button.phase-waning-gibbous .moon-phase-shadow {
  background: radial-gradient(circle at -12% 50%, transparent 0 58%, rgba(0,0,0,.58) 59% 100%);
}
.moon-info-button.phase-last-quarter .moon-phase-shadow {
  background: linear-gradient(to left, rgba(0,0,0,.72) 0 50%, transparent 51% 100%);
}
.moon-info-button.phase-waning-crescent .moon-phase-shadow {
  background: radial-gradient(circle at 24% 50%, transparent 0 24%, rgba(0,0,0,.72) 25% 100%);
}

.moon-info-button.moon-strawberry .moon-info-image {
  filter: sepia(.38) saturate(1.85) hue-rotate(-24deg) brightness(1.2) contrast(1.08);
}
.moon-info-button.moon-blue .moon-info-image {
  filter: saturate(1.35) hue-rotate(178deg) brightness(1.24) contrast(1.06);
}
.moon-info-button.moon-harvest .moon-info-image,
.moon-info-button.moon-hunter .moon-info-image {
  filter: sepia(.68) saturate(1.65) hue-rotate(-18deg) brightness(1.23) contrast(1.08);
}
.moon-info-button.moon-cold .moon-info-image,
.moon-info-button.moon-wolf .moon-info-image {
  filter: saturate(.85) hue-rotate(15deg) brightness(1.28) contrast(1.12);
}

.moon-info-card {
  position: absolute;
  left: 140px;
  bottom: 145px;
  width: min(72%, 310px);
  padding: 15px 16px 13px;
  border-radius: 22px;
  z-index: 8;
  pointer-events: auto;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,226,170,.20), transparent 35%),
    radial-gradient(circle at 92% 18%, rgba(125,180,255,.18), transparent 42%),
    linear-gradient(145deg, rgba(7,12,28,.94), rgba(25,13,42,.90));
  border: 1px solid rgba(225,232,255,.32);
  box-shadow:
    0 0 18px rgba(130,180,255,.20),
    0 0 34px rgba(255,190,100,.13),
    inset 0 0 18px rgba(255,255,255,.035);
  color: rgba(255,250,235,.96);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.98);
  transition: opacity .32s ease, visibility .32s ease, transform .32s ease;
}

.moon-info-card.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.moon-card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "YuGothic", system-ui, sans-serif;
}

.moon-card-label {
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(205,220,255,.72);
}

.moon-card-phase {
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .03em;
}

.moon-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 9px 0 10px;
}

.moon-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 25px;
  background: radial-gradient(circle, rgba(255,226,160,.28), rgba(255,226,160,.06) 64%, transparent 70%);
  box-shadow: 0 0 18px rgba(255,205,120,.16);
}

.moon-card-date,
.moon-card-age,
.moon-card-special,
.moon-card-message,
.moon-card-sign {
  margin: 0;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "YuGothic", system-ui, sans-serif;
}

.moon-card-date {
  font-size: 12px;
  color: rgba(230,238,255,.78);
}

.moon-card-age {
  margin-top: 3px;
  font-size: 15px;
  color: rgba(255,240,198,.94);
}

.moon-card-special {
  margin: 9px 0 7px;
  font-size: 14px;
  color: rgba(255,213,165,.96);
}

.moon-card-special:empty { display: none; }

.moon-card-message {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,.86);
}

.moon-card-close {
  display: grid;
  place-items: center;
  width: 52px;
  height: 42px;
  margin: 13px auto 7px;
  border-radius: 999px;
  border: 1px solid rgba(245,236,220,.34);
  background:
    radial-gradient(circle at 50% 44%, rgba(255,232,198,.22), rgba(255,255,255,.04) 62%),
    linear-gradient(145deg, rgba(95,90,112,.36), rgba(15,18,32,.48));
  color: rgba(255,244,225,.98);
  box-shadow:
    0 0 12px rgba(255,210,150,.14),
    inset 0 0 12px rgba(255,255,255,.05);
  cursor: pointer;
}

.moon-card-close span {
  font-size: 24px;
  line-height: 1;
}

.moon-card-close:active { transform: scale(.94); }

.moon-card-sign {
  text-align: center;
  font-size: 10px;
  letter-spacing: .06em;
  color: rgba(215,225,255,.48);
}

/* Keyframes */
@keyframes auroraCycleOpacityLite {
  0% { opacity: 0; }
  22.222% { opacity: 1; }
  59.259% { opacity: 1; }
  81.481% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes auroraCycleAtmosphereLite {
  0% { opacity: 0; }
  22.222% { opacity: .48; }
  59.259% { opacity: .48; }
  81.481% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes auroraLeftWindLite {
  0% { transform: translateX(3%); }
  22.222% { transform: translateX(0%); }
  59.259% { transform: translateX(-2%); }
  81.481% { transform: translateX(-5%); }
  100% { transform: translateX(-5%); }
}
@keyframes auroraAtmosphere {
  0% { transform: translateX(-2%) rotate(-6deg) scale(1); }
  50% { transform: translateX(3%) rotate(-4deg) scale(1.04); }
  100% { transform: translateX(-1%) rotate(-7deg) scale(1.02); }
}
@keyframes auroraBundleDrift {
  0% { transform: translateX(-7px) skewX(-3deg); }
  50% { transform: translateX(9px) skewX(2deg); }
  100% { transform: translateX(-4px) skewX(-1deg); }
}
@keyframes auroraBundleBreath {
  0% { opacity: calc(var(--bundle-opacity) * .46); }
  45% { opacity: var(--bundle-opacity); }
  100% { opacity: calc(var(--bundle-opacity) * .64); }
}
@keyframes auroraRayInner {
  0% {
    opacity: calc(var(--ray-opacity) * .48);
    transform: translateX(-3px) skewX(-2deg) scaleY(.96);
  }
  45% {
    opacity: calc(var(--ray-opacity) * 1.08);
    transform: translateX(4px) skewX(3deg) scaleY(1.04);
  }
  100% {
    opacity: calc(var(--ray-opacity) * .62);
    transform: translateX(-2px) skewX(-1deg) scaleY(1);
  }
}
@keyframes nekoTwinkle {
  from { opacity: .35; transform: scale(.75); }
  to { opacity: 1; transform: scale(1.45); }
}
@keyframes triangleMoveRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(260px); }
}
@keyframes meteorOne {
  0% { opacity: 0; transform: translate3d(0,0,0) rotate(155deg); }
  8% { opacity: 1; }
  28% { opacity: 0; transform: translate3d(-270px,150px,0) rotate(155deg); }
  100% { opacity: 0; }
}
@keyframes meteorTwo {
  0% { opacity: 0; transform: translate3d(0,0,0) rotate(25deg); }
  8% { opacity: 1; }
  28% { opacity: 0; transform: translate3d(270px,150px,0) rotate(25deg); }
  100% { opacity: 0; }
}
	/* =========================================================
   NekoOne Moon Info Extension Pack v1.0
   Aurora Engine 追加CSS
========================================================= */

:root{
  --moon-info-size:64px;
}

/* ===========================
   月ボタン
=========================== */

.moon-info-button{
    position:absolute;
    left:70px;
    bottom:125px;
    width:var(--moon-info-size);
    height:var(--moon-info-size);
    padding:0;
    border:none;
    background:transparent;
    border-radius:50%;
    cursor:pointer;
    z-index:40;
    overflow:visible;
    transition:.35s;
}

.moon-info-button:hover{
    transform:scale(1.05);
}

.moon-info-button::after{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:50%;
    background:
        radial-gradient(circle,
        rgba(255,220,150,.22),
        transparent 70%);
    filter:blur(4px);
    z-index:0;
}

.moon-info-image{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:50%;

    filter:
        sepia(.40)
        saturate(1.45)
        hue-rotate(-10deg)
        brightness(1.18);

    box-shadow:
        0 0 14px rgba(255,215,120,.35),
        0 0 26px rgba(255,170,70,.18);

    position:relative;
    z-index:1;
}

/* ===========================
   月の影
=========================== */

.moon-phase-shadow{

    position:absolute;

    inset:0;

    border-radius:50%;

    pointer-events:none;

    z-index:2;

}

.phase-new .moon-phase-shadow{
    background:rgba(0,0,0,.82);
}

.phase-waxing-crescent .moon-phase-shadow{
    background:
    radial-gradient(circle at 76% 50%,
    transparent 25%,
    rgba(0,0,0,.72) 26%);
}

.phase-first-quarter .moon-phase-shadow{

    background:
    linear-gradient(to right,
    rgba(0,0,0,.72) 50%,
    transparent 51%);
}

.phase-waxing-gibbous .moon-phase-shadow{

    background:
    radial-gradient(circle at 112% 50%,
    transparent 58%,
    rgba(0,0,0,.60) 59%);
}

.phase-full .moon-phase-shadow{

    background:transparent;

}

.phase-waning-gibbous .moon-phase-shadow{

    background:
    radial-gradient(circle at -12% 50%,
    transparent 58%,
    rgba(0,0,0,.60) 59%);
}

.phase-last-quarter .moon-phase-shadow{

    background:
    linear-gradient(to left,
    rgba(0,0,0,.72) 50%,
    transparent 51%);
}

.phase-waning-crescent .moon-phase-shadow{

    background:
    radial-gradient(circle at 24% 50%,
    transparent 25%,
    rgba(0,0,0,.72) 26%);
}

/* ===========================
   特別な満月
=========================== */

.moon-strawberry .moon-info-image{

    filter:
        sepia(.38)
        saturate(1.9)
        hue-rotate(-24deg)
        brightness(1.18);

}

.moon-blue .moon-info-image{

    filter:
        saturate(1.4)
        hue-rotate(180deg)
        brightness(1.24);

}

.moon-harvest .moon-info-image,
.moon-hunter .moon-info-image{

    filter:
        sepia(.65)
        saturate(1.7)
        hue-rotate(-18deg)
        brightness(1.20);

}

.moon-cold .moon-info-image,
.moon-wolf .moon-info-image{

    filter:
        saturate(.85)
        hue-rotate(15deg)
        brightness(1.28);

}

/* ===========================
   Moon Card
=========================== */
	        
.moon-card-header{

    margin-bottom:12px;

    font-family:
    "Hiragino Maru Gothic ProN",
    "Yu Gothic UI",
    sans-serif;

}

.moon-card-label{

    display:block;

    font-size:11px;

    color:#9fc7ff;

}

.moon-card-phase{

    font-size:20px;

}

.moon-card-main{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:12px;

}

.moon-card-icon{

    font-size:30px;

}

.moon-card-date{

    font-size:12px;

    opacity:.8;

}

.moon-card-age{

    font-size:15px;

    color:#ffe6a2;

}

.moon-card-special{

    color:#ffd8a0;

    margin-bottom:8px;

}

.moon-card-message{

    line-height:1.7;

}

.moon-card-close{

    width:56px;

    height:44px;

    margin:18px auto 6px;

    display:grid;

    place-items:center;

    border-radius:999px;

    border:none;

    cursor:pointer;

    background:
    linear-gradient(
        145deg,
        rgba(90,90,120,.45),
        rgba(20,20,35,.55)
    );

}

.moon-card-close span{

    font-size:24px;

}

.moon-card-sign{

    text-align:center;

    font-size:10px;

    opacity:.55;

    margin-top:10px;

}
	.neko-hero-sky{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:20;
  pointer-events:none;
}

.summer-triangle{
  position:absolute;
  left:12%;
  top:16%;
  width:280px;
  height:230px;
  animation:triangleMoveRight 52s linear infinite;
}

.triangle-star{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 0 10px rgba(255,255,255,1),
    0 0 24px rgba(160,210,255,.85);
}

.star-vega{left:24px;top:18px;}
.star-deneb{left:225px;top:55px;}
.star-altair{left:118px;top:185px;}

@keyframes triangleMoveRight{
  0%{transform:translateX(0);}
  100%{transform:translateX(260px);}
}

.neko-star{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.9);
}
	/* =========================================================
   Moon Information Engine
   Card Container
   （外観CSSへ追加）
========================================================= */

.moon-info-card{

    position:absolute;

    width:300px;

    padding:18px;

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(10,18,40,.94),
            rgba(35,18,60,.90)
        );

    border:1px solid rgba(255,255,255,.16);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:
        0 0 20px rgba(120,180,255,.20),
        0 0 35px rgba(255,210,140,.12);

    color:#fff;

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;

    z-index:1000;

}

.moon-info-card.is-open{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}
	
	/* =========================================================
   Moon Information Engine v1.0
   Final Override
   （外観CSSの最後へ追加）
========================================================= */

.neko-world-engine .moon-info-card{

    position:absolute;

    width:300px;

    padding:18px;

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(10,18,40,.94),
            rgba(35,18,60,.90)
        );

    border:1px solid rgba(255,255,255,.16);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:
        0 0 22px rgba(90,170,255,.22),
        0 0 34px rgba(255,205,120,.14),
        inset 0 0 18px rgba(255,255,255,.05);

    color:#fff;

    z-index:1000;

}

.neko-world-engine .moon-card-header{

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:10px;

}

.neko-world-engine .moon-card-label{

    font-size:12px;
    letter-spacing:.08em;
    color:rgba(220,225,255,.70);

}

.neko-world-engine .moon-card-phase{

    font-size:22px;
    font-weight:700;

    color:#fff;

}

.neko-world-engine .moon-card-main{

    display:flex;
    align-items:center;
    gap:14px;

    margin:12px 0;

}

.neko-world-engine .moon-card-icon{

    width:48px;
    height:48px;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:26px;

    background:
        radial-gradient(circle,
            rgba(255,226,160,.28),
            rgba(255,226,160,.06) 65%,
            transparent 72%);

    box-shadow:
        0 0 18px rgba(255,205,120,.18);

}

.neko-world-engine .moon-card-date,
.neko-world-engine .moon-card-age,
.neko-world-engine .moon-card-special,
.neko-world-engine .moon-card-message{

    margin:8px 0;

    line-height:1.7;

    color:rgba(245,245,255,.94);

}

.neko-world-engine .moon-card-close{

    display:block;

    width:92px;
    height:42px;

    margin:14px auto 8px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    color:#fff;

    background:
        radial-gradient(circle at 50% 40%,
            rgba(255,232,198,.22),
            rgba(255,255,255,.05) 65%),

        linear-gradient(
            145deg,
            rgba(95,90,112,.40),
            rgba(15,18,32,.56)
        );

    box-shadow:
        0 0 12px rgba(255,210,150,.14),
        inset 0 0 10px rgba(255,255,255,.06);

}

.neko-world-engine .moon-card-close span{

    font-size:24px;

}

.neko-world-engine .moon-card-sign{

    margin-top:10px;

    text-align:center;

    font-size:10px;

    letter-spacing:.08em;

    color:rgba(215,225,255,.52);

}
	/* Moon Information Engine v1.0
   Open / Close Visibility Fix
   外観CSSの最後へ追加
*/

.neko-world-engine .moon-info-card {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.neko-world-engine .moon-info-card.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
	/* Moon Information Engine v1.0 Final Appearance */

.neko-world-engine .moon-info-card {
  position: absolute;
  width: 300px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(10,18,40,.94), rgba(35,18,60,.90));
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 0 22px rgba(90,170,255,.22),
    0 0 34px rgba(255,205,120,.14),
    inset 0 0 18px rgba(255,255,255,.05);
  color: #fff;
  z-index: 1000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.neko-world-engine .moon-info-card.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.neko-world-engine .moon-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.neko-world-engine .moon-card-main {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0;
}

/* =========================================================
   🌙🌙🌙 MOON INFORMATION CARD APPEARANCE 🌙🌙🌙

   Moon Information Card
   Final Appearance Override v1.0.0

   配置場所:
   【外観CSSの一番最後】

   役割:
   ・月情報カードの背景
   ・月銀フレーム
   ・クリスタルの奥行き
   ・本文と見出しの視認性
   ・肉球ボタンの外観

   管理しないもの:
   ・カードの位置
   ・カードの横幅
   ・カードの開閉
   ・JavaScript動作

   状態:
   ✅ 最終上書き
========================================================= */


/* =========================================================
   🌙 カード本体

   Moon Information Card
========================================================= */

.neko-world-engine .moon-info-card {
  overflow: hidden;

  color: rgba(248, 248, 255, .96) !important;

  background:
    radial-gradient(
      circle at 18% 16%,
      rgba(255, 228, 178, .18),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 18%,
      rgba(132, 178, 255, .16),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(8, 14, 34, .96) 0%,
      rgba(28, 18, 52, .94) 58%,
      rgba(12, 10, 28, .96) 100%
    ) !important;

  border:
    1px solid
    rgba(226, 232, 255, .34) !important;

  border-radius: 22px !important;

  box-shadow:
    0 18px 42px rgba(0, 0, 0, .42),
    0 0 22px rgba(95, 165, 255, .20),
    0 0 38px rgba(255, 198, 116, .12),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(30, 18, 48, .48),
    inset 0 0 24px rgba(255, 255, 255, .035) !important;

  backdrop-filter:
    blur(14px)
    saturate(1.12);

  -webkit-backdrop-filter:
    blur(14px)
    saturate(1.12);
}


/* =========================================================
   ✨ カード内部の月光

   Internal Moonlight
========================================================= */

.neko-world-engine .moon-info-card::before {
  content: "";

  position: absolute;
  inset: 1px;

  pointer-events: none;

  border-radius: 21px;

  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, .14) 0%,
      transparent 24%,
      transparent 72%,
      rgba(188, 158, 238, .06) 100%
    );

  opacity: .88;
}


/* =========================================================
   🧭 カード内部レイヤー

   Card Content Layer
========================================================= */

.neko-world-engine .moon-info-card > * {
  position: relative;
  z-index: 1;
}


/* =========================================================
   🏷️ 見出し

   Header
========================================================= */

.neko-world-engine .moon-card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;

  margin-bottom: 10px;
}

.neko-world-engine .moon-card-label {
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .16em;

  color: rgba(190, 210, 255, .68) !important;
}

.neko-world-engine .moon-card-phase {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .04em;

  color: rgba(255, 251, 240, .98) !important;

  text-shadow:
    0 0 10px rgba(255, 220, 160, .14),
    1px 2px 4px rgba(0, 0, 0, .36);
}


/* =========================================================
   🌕 月情報の中心部

   Moon Information Main
========================================================= */

.neko-world-engine .moon-card-main {
  display: flex;
  align-items: center;
  gap: 12px;

  margin: 10px 0 12px;
}

.neko-world-engine .moon-card-icon {
  flex: 0 0 auto;

  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  font-size: 27px;

  background:
    radial-gradient(
      circle,
      rgba(255, 228, 164, .28) 0%,
      rgba(255, 228, 164, .07) 62%,
      transparent 72%
    );

  box-shadow:
    0 0 16px rgba(255, 205, 120, .16),
    inset 0 0 10px rgba(255, 255, 255, .05);
}


/* =========================================================
   📖 本文

   Card Text
========================================================= */

.neko-world-engine .moon-card-date,
.neko-world-engine .moon-card-age,
.neko-world-engine .moon-card-special,
.neko-world-engine .moon-card-message,
.neko-world-engine .moon-card-sign {
  margin: 0;

  font-family:
    "Hiragino Maru Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    system-ui,
    sans-serif;
}

.neko-world-engine .moon-card-date {
  font-size: 12px;
  line-height: 1.5;

  color: rgba(215, 226, 255, .76) !important;
}

.neko-world-engine .moon-card-age {
  margin-top: 3px;

  font-size: 15px;
  line-height: 1.5;

  color: rgba(255, 233, 177, .96) !important;
}

.neko-world-engine .moon-card-special {
  margin: 8px 0 7px;

  font-size: 13px;
  line-height: 1.6;

  color: rgba(255, 211, 164, .98) !important;
}

.neko-world-engine .moon-card-special:empty {
  display: none;
}

.neko-world-engine .moon-card-message {
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: .02em;

  color: rgba(245, 246, 255, .88) !important;

  text-shadow:
    1px 1px 3px rgba(0, 0, 0, .28);
}


/* =========================================================
   🐾 閉じるボタン

   Close Button
========================================================= */

.neko-world-engine .moon-card-close {
  border:
    1px solid
    rgba(245, 236, 220, .24) !important;

  border-radius: 999px !important;

  color: rgba(255, 246, 228, .96) !important;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255, 232, 198, .20),
      rgba(255, 255, 255, .04) 64%
    ),
    linear-gradient(
      145deg,
      rgba(88, 86, 110, .34),
      rgba(15, 18, 34, .56)
    ) !important;

  box-shadow:
    0 0 12px rgba(255, 210, 150, .11),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 0 10px rgba(255, 255, 255, .035) !important;

  -webkit-tap-highlight-color: transparent;
}

.neko-world-engine .moon-card-close:hover,
.neko-world-engine .moon-card-close:focus-visible {
  border-color:
    rgba(255, 222, 174, .42) !important;

  box-shadow:
    0 0 18px rgba(255, 210, 150, .17),
    inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

.neko-world-engine .moon-card-close:active {
  transform: scale(.94);
}

.neko-world-engine .moon-card-close span {
  font-size: 23px;
  line-height: 1;
}


/* =========================================================
   🖋️ 署名

   Signature
========================================================= */

.neko-world-engine .moon-card-sign {
  margin-top: 8px;

  text-align: center;

  font-size: 10px;
  line-height: 1.55;
  letter-spacing: .05em;

  color: rgba(205, 218, 248, .52) !important;
}


/* =========================================================
   🌙🌙🌙 MOON INFORMATION CARD END 🌙🌙🌙
========================================================= */

/* =========================================================
   Moon Information Card
   Emergency Appearance Restore
========================================================= */

.neko-world-engine .moon-info-card {
  position: absolute !important;
  display: block !important;
  overflow: hidden !important;

  padding: 18px !important;
  box-sizing: border-box !important;

  color: #ffffff !important;

  background:
    radial-gradient(
      circle at 18% 16%,
      rgba(255, 228, 178, .18),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 18%,
      rgba(132, 178, 255, .16),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(8, 14, 34, .98),
      rgba(28, 18, 52, .96) 58%,
      rgba(12, 10, 28, .98)
    ) !important;

  border: 1px solid rgba(226, 232, 255, .45) !important;
  border-radius: 22px !important;

  box-shadow:
    0 18px 42px rgba(0, 0, 0, .48),
    0 0 22px rgba(95, 165, 255, .24),
    0 0 38px rgba(255, 198, 116, .14),
    inset 0 1px 0 rgba(255, 255, 255, .20),
    inset 0 0 24px rgba(255, 255, 255, .04) !important;

  backdrop-filter: blur(14px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
}

.neko-world-engine .moon-info-card > * {
  position: relative;
  z-index: 2;
}
/* =========================================================
   NekoOne Interior Skin Engine
   NISE Story Theme v0.1

   配置場所：
   外観CSSの一番最後

   対象：
   body.nise-page.nise-story のページだけ

   対象外：
   Moonlight Lounge
   他の固定ページ
   他カテゴリーの投稿
========================================================= */

/* =========================================================
   0. Story Theme Variables
========================================================= */

body.nise-page.nise-story {
  --nise-bg: #070914;
  --nise-panel: rgba(13, 16, 35, .97);
  --nise-panel-soft: rgba(26, 22, 53, .94);
  --nise-line: rgba(216, 209, 240, .28);
  --nise-line-bright: rgba(240, 235, 255, .70);
  --nise-accent: 145, 117, 218;
  --nise-text: #f2eff8;
  --nise-soft: rgba(229, 224, 239, .76);
}

/* =========================================================
   1. Cocoon Layout Integration
========================================================= */

body.nise-page.nise-story #content,
body.nise-page.nise-story .content-in {
  background: var(--nise-bg) !important;
}

body.nise-page.nise-story .content-in {
  display: block !important;
}

body.nise-page.nise-story #main,
body.nise-page.nise-story .main {
  width: 100% !important;
  max-width: 980px !important;
  margin-inline: auto !important;

  color: var(--nise-text) !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--nise-accent), .12),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      var(--nise-panel-soft),
      var(--nise-panel)
    ) !important;

  border: 1px solid var(--nise-line) !important;
  border-radius: 24px !important;

  box-shadow:
    0 24px 58px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

body.nise-page.nise-story #sidebar,
body.nise-page.nise-story .sidebar {
  display: none !important;
}

/* =========================================================
   2. Article Foundation
========================================================= */

body.nise-page.nise-story .article,
body.nise-page.nise-story .entry-content,
body.nise-page.nise-story .article-header,
body.nise-page.nise-story .article-footer {
  color: var(--nise-text) !important;
  background: transparent !important;
}

body.nise-page.nise-story .entry-content {
  line-height: 1.95;
}

/* =========================================================
   3. Page / Post Title
========================================================= */

body.nise-page.nise-story .entry-title {
  position: relative !important;

  margin:
    28px auto
    36px !important;

  padding:
    22px 24px
    28px !important;

  color: #f7f3ff !important;

  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "YuMincho",
    serif !important;

  font-size: clamp(28px, 6vw, 42px) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: .045em !important;
  text-align: center !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--nise-accent), .18),
      transparent 66%
    ) !important;

  border: 0 !important;
  box-shadow: none !important;

  text-shadow:
    0 0 12px rgba(var(--nise-accent), .30) !important;
}

body.nise-page.nise-story .entry-title::after {
  content: "" !important;

  display: block !important;
  width: min(220px, 72%) !important;
  height: 1px !important;

  margin: 18px auto 0 !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(var(--nise-accent), .48),
      var(--nise-line-bright),
      rgba(var(--nise-accent), .48),
      transparent
    ) !important;
}

/* =========================================================
   4. Cocoon Heading Reset + NISE Heading
========================================================= */

body.nise-page.nise-story .entry-content h2,
body.nise-page.nise-story .entry-content h3 {
  position: relative !important;

  color: #f4f0fa !important;

  background: transparent !important;
  background-image: none !important;

  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(var(--nise-accent), .28) !important;
  border-left: 2px solid rgba(var(--nise-accent), .80) !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}

body.nise-page.nise-story .entry-content h2 {
  margin-top: 42px !important;
  padding: 4px 0 12px 16px !important;

  font-size: clamp(23px, 5vw, 32px) !important;
}

body.nise-page.nise-story .entry-content h3 {
  margin-top: 32px !important;
  padding: 3px 0 10px 14px !important;

  font-size: clamp(19px, 4.3vw, 25px) !important;
}

body.nise-page.nise-story .entry-content h2::before,
body.nise-page.nise-story .entry-content h2::after,
body.nise-page.nise-story .entry-content h3::before,
body.nise-page.nise-story .entry-content h3::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   5. Text and Links
========================================================= */

body.nise-page.nise-story .entry-content p,
body.nise-page.nise-story .entry-content li {
  color: var(--nise-soft) !important;
}

body.nise-page.nise-story .entry-content a {
  color: #cdbcf0 !important;
  text-decoration-color:
    rgba(var(--nise-accent), .52) !important;
}

/* =========================================================
   6. Images
========================================================= */

body.nise-page.nise-story .entry-content img {
  max-width: 100%;
  height: auto;

  border-radius: 14px;

  box-shadow:
    0 16px 34px rgba(0, 0, 0, .28);
}

/* =========================================================
   7. Table of Contents
   Storyページでは自動目次を非表示
========================================================= */

body.nise-page.nise-story .toc,
body.nise-page.nise-story .toc-content,
body.nise-page.nise-story #toc {
  display: none !important;
}

/* =========================================================
   8. Metadata / Categories
========================================================= */

body.nise-page.nise-story .date-tags,
body.nise-page.nise-story .entry-categories,
body.nise-page.nise-story .entry-tags {
  color: rgba(229, 224, 239, .60) !important;
}

/* =========================================================
   9. Mobile
========================================================= */

@media screen and (max-width: 768px) {
  body.nise-page.nise-story #main,
  body.nise-page.nise-story .main {
    width: calc(100% - 18px) !important;
    border-radius: 20px !important;
  }

  body.nise-page.nise-story .article {
    padding-inline: 14px !important;
  }

  body.nise-page.nise-story .entry-title {
    margin:
      22px auto
      28px !important;

    padding:
      18px 14px
      24px !important;

    font-size: clamp(26px, 8vw, 35px) !important;
  }
}

/* =========================================================
【外観CSS】
NekoOne Living Character Engine
Version: 1.0.0
状態: 共通エンジン基盤
配置場所: 外観 → カスタムCSS
役割:
- 全部屋共通のキャラクター表示
- 会話ウィンドウ
- スマホ対応
- 他の部屋でも再利用可能
========================================================= */
/* START: 【外観CSS】NLCE v1.0.0 */

.nlce-stage {
  --nlce-stage-height: 300px;
  --nlce-character-width: 130px;
  --nlce-ground-bottom: 12px;

  position: relative;
  width: 100%;
  min-height: var(--nlce-stage-height);
  overflow: hidden;
  isolation: isolate;
}

.nlce-stage,
.nlce-stage * {
  box-sizing: border-box;
}

.nlce-character {
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: var(--nlce-ground-bottom);
  width: var(--nlce-character-width);
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: 50% 100%;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.nlce-character-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.35));
}

.nlce-character:focus-visible {
  outline: 3px solid rgba(255, 220, 100, 0.95);
  outline-offset: 4px;
  border-radius: 14px;
}

.nlce-character.is-talking {
  z-index: 30;
}

.nlce-character.is-tapped {
  animation: nlce-tap-reaction 0.62s ease;
}

@keyframes nlce-tap-reaction {
  0% {
    transform:
      translate3d(var(--nlce-x, 0px), 0, 0)
      scale(1);
  }

  35% {
    transform:
      translate3d(var(--nlce-x, 0px), -10px, 0)
      scale(1.03);
  }

  70% {
    transform:
      translate3d(var(--nlce-x, 0px), 0, 0)
      scale(0.99);
  }

  100% {
    transform:
      translate3d(var(--nlce-x, 0px), 0, 0)
      scale(1);
  }
}


/* =========================================================
 会話ウィンドウ
========================================================= */

.nlce-dialog {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(3px);
}

.nlce-dialog.is-open {
  display: grid;
}

.nlce-dialog-card {
  width: min(520px, 100%);
  padding: 24px 22px;
  color: #2c2416;
  background: rgba(255, 252, 240, 0.98);
  border: 1px solid rgba(170, 128, 34, 0.38);
  border-radius: 22px;
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.34);
  text-align: center;
}

.nlce-dialog-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.nlce-dialog-title {
  margin: 0 0 14px;
  font-size: clamp(1.1rem, 4vw, 1.45rem);
  line-height: 1.5;
}

.nlce-dialog-message {
  margin: 0;
  white-space: pre-line;
  line-height: 1.9;
}

.nlce-dialog-close {
  min-width: 150px;
  min-height: 44px;
  margin-top: 20px;
  padding: 10px 22px;
  color: #3c2700;
  background:
    linear-gradient(
      135deg,
      #fff0a3,
      #e5b83f
    );
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}


/* =========================================================
 スマートフォン
========================================================= */

@media screen and (max-width: 600px) {
  .nlce-stage {
    --nlce-stage-height: 250px;
    --nlce-character-width: 105px;
  }

  .nlce-dialog {
    padding: 12px;
  }

  .nlce-dialog-card {
    padding: 22px 16px;
  }
}


/* =========================================================
 動きを抑える設定
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .nlce-character {
    transition: none !important;
    animation: none !important;
  }
}

/* END: 【外観CSS】NLCE v1.0.0 */

/* =========================================================
【外観CSS】
🐾 暮らしエンジン 共通外観 v1.0.0

配置場所:
- 現在使用している「外観CSS」の一番下へ追加
- 既存CSSは削除・書き換えしない

役割:
- 暮らしエンジンの共通外観
- 部屋背景
- キャラクター
- 歩行・考える・タップ動作
- 会話ウィンドウ
- スマートフォン対応

原本:
- p=1509 暮らしエンジン v1.1.3
========================================================= */
/* START: 🐾 暮らしエンジン 共通外観 v1.0.0 */


/* =========================================================
 01. 暮らしエンジンページ
========================================================= */

.nlce-page {
  width: min(
    920px,
    calc(100% - 24px)
  );
  margin: 30px auto 60px;
  color: #fff5d3;
}

.nlce-page-header {
  margin-bottom: 24px;
  text-align: center;
}

.nlce-page-kicker {
  margin: 0 0 8px;
  color: #e9c45f;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.nlce-page-title {
  margin: 0 0 12px;
  color: #fff3bc;
  font-size:
    clamp(
      1.55rem,
      5vw,
      2.25rem
    );
  line-height: 1.4;
}

.nlce-page-guide {
  margin: 0;
  color: #eadfb8;
  line-height: 1.8;
}


/* =========================================================
 02. キャラクターステージ
========================================================= */

.nlce-stage {
  --nlce-stage-height: 340px;
  --nlce-character-width: 108px;
  --nlce-ground-bottom: 34px;

  position: relative;
  width: 100%;
  min-height:
    var(--nlce-stage-height);
  overflow: hidden;
  isolation: isolate;

  background:
    #2a1a08;

  border:
    1px solid
    rgba(255, 220, 111, 0.34);

  border-radius: 26px;

  box-shadow:
    0 22px 55px
    rgba(0, 0, 0, 0.38),
    inset 0 1px 0
    rgba(255, 248, 211, 0.12);
}

.nlce-stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 5%;
  right: 5%;
  bottom: 0;
  height: 72px;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(122, 78, 8, 0.10),
      rgba(48, 31, 4, 0.62)
    );

  border-top:
    1px solid
    rgba(255, 218, 103, 0.20);
}

.nlce-room-layer {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.nlce-destination-point {
  position: absolute;
  z-index: 2;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}


/* =========================================================
 03. キャラクター
========================================================= */

.nlce-character {
  position: absolute;
  z-index: 10;
  left: 0;
  bottom:
    var(--nlce-ground-bottom);
  width:
    var(--nlce-character-width);
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: 50% 100%;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.nlce-character-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;

  filter:
    drop-shadow(
      0 14px 18px
      rgba(0, 0, 0, 0.35)
    );
}

.nlce-character.is-walking
.nlce-character-image {
  animation:
    nlce-walk-bob
    0.58s ease-in-out
    infinite;
}

@keyframes nlce-walk-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

.nlce-character.is-thinking
.nlce-character-image {
  animation:
    nlce-thinking-motion
    2.8s ease-in-out
    infinite;
}

@keyframes nlce-thinking-motion {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(0deg);
  }

  35% {
    transform:
      translateY(-2px)
      rotate(-1deg);
  }

  65% {
    transform:
      translateY(-1px)
      rotate(1deg);
  }
}

.nlce-character:focus-visible {
  outline:
    3px solid
    rgba(255, 220, 100, 0.95);
  outline-offset: 4px;
  border-radius: 14px;
}

.nlce-character.is-tapped {
  animation:
    nlce-tap 0.62s ease;
}

@keyframes nlce-tap {
  0% {
    transform:
      translate3d(
        var(--nlce-x, 0px),
        0,
        0
      )
      scale(1);
  }

  35% {
    transform:
      translate3d(
        var(--nlce-x, 0px),
        -10px,
        0
      )
      scale(1.03);
  }

  70% {
    transform:
      translate3d(
        var(--nlce-x, 0px),
        0,
        0
      )
      scale(0.99);
  }

  100% {
    transform:
      translate3d(
        var(--nlce-x, 0px),
        0,
        0
      )
      scale(1);
  }
}


/* =========================================================
 04. 会話ウィンドウ
========================================================= */

.nlce-dialog {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: none;
  place-items: center;
  padding: 18px;

  background:
    rgba(0, 0, 0, 0.42);

  backdrop-filter:
    blur(3px);
}

.nlce-dialog.is-open {
  display: grid;
}

.nlce-dialog-card {
  width: min(520px, 100%);
  padding: 24px 22px;
  color: #2c2416;

  background:
    rgba(255, 252, 240, 0.98);

  border:
    1px solid
    rgba(170, 128, 34, 0.38);

  border-radius: 22px;

  box-shadow:
    0 20px 55px
    rgba(0, 0, 0, 0.34);

  text-align: center;
}

.nlce-dialog-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.nlce-dialog-title {
  margin: 0 0 14px;
  font-size:
    clamp(
      1.1rem,
      4vw,
      1.45rem
    );
  line-height: 1.5;
}

.nlce-dialog-message {
  margin: 0;
  white-space: pre-line;
  line-height: 1.9;
}

.nlce-dialog-close {
  min-width: 150px;
  min-height: 44px;
  margin-top: 20px;
  padding: 10px 22px;
  color: #3c2700;

  background:
    linear-gradient(
      135deg,
      #fff0a3,
      #e5b83f
    );

  border: 0;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}


/* =========================================================
 05. スマートフォン
========================================================= */

@media screen and (max-width: 600px) {
  .nlce-page {
    width:
      calc(100% - 16px);
    margin-top: 18px;
  }

  .nlce-stage {
    --nlce-stage-height: 270px;
    --nlce-character-width: 84px;
    --nlce-ground-bottom: 26px;

    border-radius: 20px;
  }

  .nlce-dialog {
    padding: 12px;
  }

  .nlce-dialog-card {
    padding: 22px 16px;
  }
}


/* =========================================================
 06. 動きを抑える設定
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .nlce-character {
    animation: none !important;
  }
}


/* END: 🐾 暮らしエンジン 共通外観 v1.0.0 */