:root{
  --ink: #2B2530;
  --ink-soft: #3D3546;
  --paper: #F3EFF5;
  --paper-warm: #EDE6EE;
  --gold: #C9A24B;
  --gold-soft: #D9BE81;
  --plum: #4A3B5C;
  --plum-mist: #8B6FA8;
  --plum-line: rgba(139,111,168,0.28);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Zen Kaku Gothic New', sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.mincho{font-family:'Shippori Mincho', serif;}
img{display:block; max-width:100%;}

/* ---------- petals ---------- */
.petals{position:fixed;inset:0;pointer-events:none;z-index:2;}
.petal{
  position:absolute; top:-5%;
  width:10px;height:10px;
  background:var(--gold-soft);
  border-radius:0 60% 0 60%;
  opacity:0.55;
  animation:fall linear infinite;
}
@keyframes fall{
  to{ transform:translateY(110vh) rotate(300deg); }
}
@media (prefers-reduced-motion: reduce){
  .petal{animation:none; display:none;}
}

/* ---------- nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 6vw;
  backdrop-filter:blur(6px);
  background:linear-gradient(to bottom, rgba(43,37,48,0.85), transparent);
}
.nav-mark{display:flex; align-items:center; gap:10px; font-size:14px; letter-spacing:0.15em;}
.crest-mini{width:22px;height:22px;flex-shrink:0;}
nav ul{list-style:none; display:flex; gap:2.4vw; font-size:13px; letter-spacing:0.1em;}
nav a{color:var(--paper); text-decoration:none; opacity:0.75; transition:opacity .3s;}
nav a:hover{opacity:1;}

/* リンクが少ない簡易ページ（サポート窓口・管理者ページ等）は
   固定ヘッダーにせず、通常のページの流れに沿った配置にする。
   これにより、狭い画面でリンクが折り返しても下のコンテンツと重ならない。 */
nav.admin-nav{
  position:static; background:var(--ink); backdrop-filter:none;
  border-bottom:1px solid var(--plum-line); flex-wrap:wrap; row-gap:12px;
}

/* ---------- ハンバーガーメニュー（モバイル用） ---------- */
.nav-toggle{
  display:none; width:34px; height:34px; padding:0; border:none; background:none;
  cursor:pointer; position:relative; z-index:60; flex-shrink:0;
}
.nav-toggle span{
  display:block; width:24px; height:2px; background:var(--paper);
  position:absolute; left:5px; transition:transform .3s, opacity .3s;
}
.nav-toggle span:nth-child(1){ top:11px; }
.nav-toggle span:nth-child(2){ top:17px; }
.nav-toggle span:nth-child(3){ top:23px; }
.nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.nav-scrim{
  display:none; position:fixed; inset:0; z-index:45;
  background:rgba(20,16,24,0.55); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.nav-scrim.open{ display:block; opacity:1; pointer-events:auto; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items:center;
  padding: 0 6vw;
  overflow:hidden;
  isolation:isolate;
}
/* 背景写真フック: images/bg-hero.jpg を置くとここに反映されるにゃ */
.hero-bg{
  position:absolute; inset:0; z-index:-2;
  background-image: url('../images/bg-hero.jpg');
  background-size:cover;
  background-position:center;
  filter:saturate(0.7) brightness(0.55);
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(43,37,48,0.55) 35%, var(--ink) 100%);
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 60% 50% at 78% 30%, rgba(139,111,168,0.35), transparent 60%),
    radial-gradient(ellipse 40% 40% at 15% 80%, rgba(201,162,75,0.12), transparent 60%);
}
.hero-text{position:relative; z-index:3;}
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:12px; letter-spacing:0.35em; color:var(--gold-soft); margin-bottom:28px;
}
.eyebrow::before{content:""; width:36px; height:1px; background:var(--gold-soft);}
h1.title{
  font-size:clamp(48px, 7vw, 96px);
  line-height:1.15;
  font-weight:600;
  letter-spacing:0.06em;
}
h1.title small{
  display:block; font-size:0.32em; color:var(--plum-mist); font-weight:400; letter-spacing:0.4em; margin-top:14px;
}
.hero-copy{
  margin-top:32px; max-width:420px; font-size:15px; line-height:2; color:#D8CEE0; font-weight:300;
}
.hero-cta{margin-top:44px; display:flex; gap:18px; flex-wrap:wrap;}
.btn{
  padding:14px 30px; font-size:13px; letter-spacing:0.15em;
  border:1px solid var(--gold-soft); color:var(--paper); text-decoration:none;
  position:relative; overflow:hidden; transition:color .4s;
  display:inline-block;
}
.btn.solid{background:var(--gold-soft); color:var(--ink); border-color:var(--gold-soft);}
.btn:hover{color:var(--ink);}
.btn:not(.solid)::after{
  content:""; position:absolute; inset:0; background:var(--gold-soft);
  transform:translateY(101%); transition:transform .4s ease; z-index:-1;
}
.btn:not(.solid):hover::after{transform:translateY(0);}

.hero-visual{
  position:relative; z-index:2; height:78vh; display:flex; align-items:flex-end; justify-content:center;
}
/* キャラ画像本体: images/hero-rin.png を置くとここに反映されるにゃ */
.hero-character{
  width:100%; max-width:380px; height:100%;
  background-image:url('../images/hero-rin.png');
  background-size:cover;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, black 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 88%, transparent 100%);
  filter:drop-shadow(0 20px 60px rgba(74,59,92,0.5));
  border-radius: 6px 6px 0 0;
}
.visual-caption{
  position:absolute; bottom:6%; right:-6%; writing-mode:vertical-rl;
  font-size:12px; letter-spacing:0.4em; color:var(--gold-soft);
}

.scroll-hint{
  position:absolute; bottom:36px; left:6vw; z-index:3;
  font-size:11px; letter-spacing:0.3em; color:var(--plum-mist);
  display:flex; align-items:center; gap:10px;
}
.scroll-hint span{width:1px; height:34px; background:var(--plum-mist); display:block; animation:scrollLine 2s infinite;}
@keyframes scrollLine{ 0%{transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;} }

/* ---------- section shared ---------- */
section{padding:140px 6vw; position:relative; z-index:2;}
.section-head{display:flex; align-items:baseline; gap:24px; margin-bottom:70px; flex-wrap:wrap;}
.section-num{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:15px; color:var(--gold-soft);}
.section-title{font-size:clamp(28px,3.4vw,44px); letter-spacing:0.08em;}
.section-sub{margin-left:auto; font-size:12px; color:var(--plum-mist); letter-spacing:0.1em; text-align:right;}

/* ---------- ledger (about) ---------- */
.ledger{
  background:var(--paper);
  color:var(--ink);
  border-radius:2px;
}
.ledger .section-title, .ledger .section-num{color:var(--plum);}
.ledger .section-sub{color:var(--plum-mist);}
.about-layout{
  display:grid; grid-template-columns: 1fr 1.4fr; gap:60px; align-items:start;
}
/* 資料写真: images/reference-sheet.png を置くとここに反映されるにゃ */
.about-figure{
  border:1px solid var(--plum-line);
  background:#fff;
  padding:10px;
}
.about-figure img{width:100%; height:auto;}
.about-figure figcaption{
  font-size:11px; letter-spacing:0.1em; color:var(--plum-mist); padding:10px 4px 2px;
}
.entry-grid{
  display:grid; grid-template-columns: 130px 1fr; gap:0;
  border-top:1px solid var(--plum-line);
}
.entry-row{display:contents;}
.entry-label{
  padding:22px 16px 22px 0; font-size:12px; letter-spacing:0.15em; color:var(--plum-mist);
  border-bottom:1px solid var(--plum-line);
}
.entry-value{
  padding:22px 0; font-size:15px; line-height:1.9; font-weight:400;
  border-bottom:1px solid var(--plum-line);
}
.entry-value .accent{color:var(--plum); font-family:'Shippori Mincho', serif; font-size:1.1em;}
.seal{
  margin-top:40px; display:flex; align-items:center; gap:18px;
}
.seal-mark{
  width:54px; height:54px; border-radius:50%;
  background:var(--plum); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:'Shippori Mincho', serif; font-size:20px;
  box-shadow:0 4px 18px rgba(74,59,92,0.35);
}
.seal-text{font-size:11px; letter-spacing:0.2em; color:var(--plum-mist);}

/* ---------- diary (read-only + public comments) ---------- */
.diary-lead{
  font-size:13px; color:var(--plum-mist); margin-bottom:40px; letter-spacing:0.03em;
}
.diary-list{display:flex; flex-direction:column; gap:1px; background:var(--plum-line); border:1px solid var(--plum-line);}
.diary-empty{background:var(--ink); padding:50px; text-align:center; color:var(--plum-mist); font-size:13px; letter-spacing:0.1em;}

/* ---- 過去の日記（月別アーカイブへのリンク） ---- */
.archive-heading{
  margin-top:50px; margin-bottom:18px; font-size:16px; letter-spacing:0.08em; color:var(--gold-soft);
}
.archive-links{ display:flex; flex-wrap:wrap; gap:12px; }
.archive-link{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--plum-line); padding:12px 20px;
  color:var(--paper); text-decoration:none; font-size:13px; letter-spacing:0.05em;
  transition:border-color .3s, color .3s;
}
.archive-link:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }
.archive-link-count{ font-size:11px; color:var(--plum-mist); }

.diary-entry{background:var(--ink); padding:36px 38px;}
.diary-entry-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:14px; flex-wrap:wrap;}
.diary-entry-title{font-family:'Shippori Mincho', serif; font-size:19px; letter-spacing:0.04em;}
.diary-entry-date{font-size:11px; color:var(--gold-soft); letter-spacing:0.1em; white-space:nowrap;}
.diary-entry-body{font-size:14px; line-height:2; color:#D8CEE0; font-weight:300; white-space:pre-wrap;}

/* ---- comments ---- */
.comments-block{ margin-top:28px; padding-top:24px; border-top:1px solid var(--plum-line); }
.comments-toggle{
  background:none; border:none; color:var(--plum-mist); font-size:12px; letter-spacing:0.1em;
  cursor:pointer; font-family:inherit; padding:0; display:flex; align-items:center; gap:8px;
}
.comments-toggle:hover{ color:var(--gold-soft); }
.comments-list{ margin-top:18px; display:flex; flex-direction:column; gap:14px; }
.comment-item{
  background:rgba(139,111,168,0.08); border:1px solid var(--plum-line);
  padding:14px 16px; font-size:13px; line-height:1.85; color:#D8CEE0; font-weight:300;
}
.comment-item-head{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.comment-item-number{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:13px; color:var(--gold-soft); letter-spacing:0.05em;
}
.comment-item-date{ font-size:10px; color:var(--plum-mist); letter-spacing:0.08em; }
.comment-item-body{ white-space:pre-wrap; }
.comment-quote-btn{
  margin-top:10px; background:none; border:none; color:var(--plum-mist);
  font-size:10px; letter-spacing:0.05em; cursor:pointer; padding:0; font-family:inherit;
}
.comment-quote-btn:hover{ color:var(--gold-soft); }
.comment-empty{ font-size:12px; color:var(--plum-mist); margin-top:18px; }
.comment-form{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.comment-textarea{
  width:100%; min-height:70px; resize:vertical;
  background-color:var(--paper); color:var(--ink); border:none; padding:12px 14px;
  font-family:'Zen Kaku Gothic New', sans-serif; font-size:13px; line-height:1.8; outline:none;
  color-scheme: light;
}
.comment-form-actions{ display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.comment-status{ font-size:11px; color:var(--plum-mist); }
.comment-submit-btn{ border:none; cursor:pointer; font-family:inherit; padding:10px 22px; font-size:12px; }
.comment-admin-del{
  margin-top:8px; background:none; border:none; color:var(--plum-mist); font-size:10px;
  letter-spacing:0.08em; cursor:pointer; padding:0; font-family:inherit;
}
.comment-admin-del:hover{ color:var(--gold-soft); }

/* ---------- diary write (used on the admin panel) ---------- */
.diary-write{
  background:var(--paper); color:var(--ink);
  padding:40px 44px; margin-bottom:50px; border-radius:2px;
}
.diary-input, .diary-textarea{
  width:100%; border:none; border-bottom:1px solid var(--plum-line);
  background-color:var(--paper); color:var(--ink);
  font-family:'Zen Kaku Gothic New', sans-serif; font-size:15px;
  padding:14px 4px; outline:none;
  color-scheme: light;
}
.diary-input{margin-bottom:8px; font-size:17px; font-family:'Shippori Mincho', serif;}
.diary-textarea{
  min-height:120px; resize:vertical; line-height:1.9; border-bottom:none;
  margin-top:10px;
}
.diary-input:focus, .diary-textarea:focus{border-color:var(--plum-mist);}
/* ハニーポット欄: 画面上は完全に見えないが、DOM上には存在する（bot対策） */
.hp-field{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
  opacity:0; pointer-events:none;
}
.diary-policy-note{
  margin-top:14px; font-size:11px; color:var(--plum-mist); line-height:1.8;
}
.diary-policy-note a{ color:var(--plum); text-decoration:underline; }
.diary-actions{
  display:flex; align-items:center; justify-content:flex-end; gap:18px; margin-top:18px;
}
.diary-status{font-size:12px; color:var(--plum-mist); letter-spacing:0.05em;}
.diary-save-btn{border:none; cursor:pointer; font-family:inherit;}
.diary-entry-del{
  margin-top:16px; background:none; border:none; color:var(--plum-mist);
  font-size:11px; letter-spacing:0.1em; cursor:pointer; padding:0; font-family:inherit;
}
.diary-entry-del:hover{color:var(--gold-soft);}

/* admin panel: entry management list uses a slightly different shade */
.admin-panel .diary-entry{ background:var(--ink-soft); }

/* ---------- admin page ---------- */
.admin-wrap{ padding:60px 6vw 100px; max-width: clamp(600px, 62vw, 940px); margin:0 auto; }
.admin-wrap h1{ font-family:'Shippori Mincho', serif; font-size:clamp(24px,3vw,32px); margin-bottom:40px; }
.admin-login{
  background:var(--paper); color:var(--ink); padding:40px; max-width:420px; margin:0 auto;
}
.admin-login input{
  width:100%; border:none; border-bottom:1px solid var(--plum-line); background-color:var(--paper);
  color:var(--ink); font-size:15px; padding:14px 4px; outline:none; margin-bottom:20px;
  font-family:'Zen Kaku Gothic New', sans-serif;
  color-scheme: light;
}
.admin-login input:focus{ border-color:var(--plum-mist); }
.admin-login-status{ font-size:12px; color:var(--plum-mist); min-height:18px; margin-bottom:10px; }
.admin-badge{
  display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:0.1em;
  color:var(--gold-soft); margin-bottom:36px; border:1px solid var(--plum-line); padding:8px 16px;
}
.admin-logout{ background:none; border:none; color:var(--plum-mist); font-size:11px; cursor:pointer; font-family:inherit; text-decoration:underline; }
.admin-panel{ display:none; }
.admin-panel.active{ display:block; }
.admin-section-title{ font-family:'Shippori Mincho', serif; font-size:18px; margin:44px 0 20px; }

/* ---- メンテナンスパネル ---- */
.maintenance-panel{ background:var(--paper); color:var(--ink); padding:32px 36px; }
.maintenance-status{ font-size:13px; margin-bottom:16px; }
.maintenance-badge{
  display:inline-block; padding:3px 12px; border-radius:20px; font-size:12px; letter-spacing:0.05em;
  background:rgba(139,111,168,0.18); color:var(--plum);
}
.maintenance-badge.on{ background:rgba(201,90,90,0.18); color:#a33; }
.maintenance-panel .diary-textarea{ margin-bottom:14px; }

/* ---------- gallery / expressions ---------- */
.strip{
  display:flex; gap:14px; overflow-x:auto; padding-bottom:20px;
  scrollbar-width:none;
}
.strip::-webkit-scrollbar{display:none;}
.strip-card{
  flex:0 0 auto; width:220px; aspect-ratio:3/4;
  background:linear-gradient(150deg, var(--plum), var(--ink) 70%);
  border:1px solid var(--plum-line);
  position:relative;
  overflow:hidden;
}
.strip-card img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
}
.strip-card span{
  position:absolute; left:18px; bottom:18px; z-index:2;
  background:rgba(43,37,48,0.6); padding:5px 12px; backdrop-filter:blur(2px);
  font-size:12px; letter-spacing:0.15em; color:var(--gold-soft);
}

/* ---------- social / footer ---------- */
.social{
  display:flex; flex-wrap:wrap; gap:16px;
}
.social a{
  padding:18px 26px; border:1px solid var(--plum-line); color:var(--paper); text-decoration:none;
  font-size:13px; letter-spacing:0.1em; display:flex; align-items:center; gap:12px; transition:border-color .3s, color .3s;
}
.social a:hover{border-color:var(--gold-soft); color:var(--gold-soft);}

footer{
  padding:70px 6vw 40px; border-top:1px solid var(--plum-line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
.foot-mark{font-family:'Shippori Mincho', serif; font-size:15px; letter-spacing:0.15em;}
.foot-copy{font-size:11px; color:var(--plum-mist); letter-spacing:0.05em;}

/* ---------- サイトシール（右下固定表示） ---------- */
#site-seal-wrap{
  position:fixed; right:16px; bottom:16px; z-index:30;
  line-height:0; /* 画像下の余分な隙間を防ぐ */
}
@media (max-width:600px){
  #site-seal-wrap{ right:10px; bottom:10px; transform:scale(0.85); transform-origin:bottom right; }
}

a:focus-visible, button:focus-visible{outline:2px solid var(--gold-soft); outline-offset:3px;}

/* ---------- error pages ---------- */
.error-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:8vh 6vw; position:relative; isolation:isolate;
  text-align:center;
}
.error-page .hero-bg{ filter:saturate(0.5) brightness(0.4); }
.error-inner{ max-width:520px; position:relative; z-index:2; }
.error-crest{
  width:74px; height:74px; margin:0 auto 32px;
  border-radius:50%; border:1px solid var(--plum-line);
  display:flex; align-items:center; justify-content:center;
  background:rgba(74,59,92,0.25);
}
.error-crest svg{ width:34px; height:34px; }
.error-code{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:15px; letter-spacing:0.3em; color:var(--gold-soft); margin-bottom:18px;
}
.error-title{
  font-family:'Shippori Mincho', serif; font-size:clamp(24px,3.4vw,34px);
  letter-spacing:0.08em; margin-bottom:24px;
}
.error-message{
  font-size:14px; line-height:2.1; color:#D8CEE0; font-weight:300;
  margin-bottom:44px;
}
.error-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.error-sub{
  margin-top:56px; font-size:11px; letter-spacing:0.15em; color:var(--plum-mist);
}

/* ---------- レスポンシブ対応 ---------- */

/* タブレット〜スマホ横（860px以下）：ハンバーガーメニューに切り替え */
@media (max-width: 860px){
  .hero{grid-template-columns:1fr; padding-top:120px;}
  .hero-visual{height:44vh; margin-top:40px;}

  .nav-toggle{ display:block; }
  nav ul{
    display:flex; flex-direction:column; align-items:flex-start;
    position:fixed; top:0; right:-78%; width:78%; max-width:320px; height:100vh;
    background:var(--ink); border-left:1px solid var(--plum-line);
    padding:110px 34px 40px; gap:30px; font-size:15px;
    box-shadow:-16px 0 40px rgba(0,0,0,0.4);
    transition:right .35s ease; z-index:50; overflow-y:auto;
  }
  nav ul.open{ right:0; }
  nav ul li{ width:100%; }
  nav ul a{ display:block; padding:6px 0; opacity:0.85; }

  /* リンクが1つしか無い簡易ナビ（管理者ページ等）はハンバーガー化せず常時表示 */
  nav.admin-nav ul{
    position:static; display:flex; flex-direction:row; width:auto; height:auto;
    background:none; border:none; box-shadow:none; padding:0; gap:0; font-size:12px;
  }
  nav.admin-nav .nav-toggle{ display:none; }

  .about-layout{grid-template-columns:1fr;}
  .entry-grid{grid-template-columns:1fr;}
  .entry-label{padding:22px 0 6px;}
  .section-sub{display:none;}

  section{ padding:100px 6vw; }
}

/* スマホ縦（600px以下）：文字サイズ・余白をさらに詰める */
@media (max-width: 600px){
  section{ padding:80px 6vw; }
  .hero{ padding-top:110px; }
  .hero-visual{ height:38vh; margin-top:28px; }
  .hero-copy{ font-size:14px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ text-align:center; }

  .section-head{ gap:14px; margin-bottom:44px; }
  .section-title{ font-size:clamp(22px,6vw,28px); }

  .diary-write, .diary-entry{ padding:24px 20px; }
  .archive-links{ flex-direction:column; }
  .archive-link{ justify-content:space-between; }
  .comment-item{ padding:12px 14px; }
  .diary-lead{ margin-bottom:28px; }

  .content-grid{ grid-template-columns:1fr; }
  .strip-card{ width:170px; }

  .social{ flex-direction:column; }
  .social a{ justify-content:center; }

  footer{ padding:50px 6vw 30px; flex-direction:column; align-items:flex-start; }

  .admin-wrap{ padding:50px 6vw 70px; }
  .admin-login{ padding:28px; max-width:100%; }

  .error-inner{ max-width:100%; }
  .error-crest{ width:60px; height:60px; }
  .error-crest svg{ width:28px; height:28px; }

  nav.admin-nav ul{ flex-wrap:wrap; row-gap:8px; }
}

/* 極小画面（380px以下）：さらに微調整 */
@media (max-width: 380px){
  .nav-mark{ font-size:12px; }
  .eyebrow{ font-size:10px; }
  h1.title{ font-size:clamp(36px,11vw,52px); }
  .btn{ padding:12px 22px; font-size:12px; }
}