@charset "UTF-8";

/* ══════════════════════════════════════
   ゆり と かな — 思い出のアルバム
   ══════════════════════════════════════ */

:root{
  /* 地の色 */
  --cream:      #fffaf3;
  --cream-deep: #fdf0e2;
  --paper:      #ffffff;

  /* 彩り */
  --pink:       #ffe2e9;
  --pink-deep:  #ffb3c4;
  --coral:      #ff8f76;
  --gold:       #f5b83d;
  --mint:       #8fd8bd;
  --sky:        #9ecdf0;
  --lav:        #c6b4ec;

  /* パーソナルカラー  ユリ＝青 / カナ＝赤 */
  --yuri:       #7aa8db;
  --yuri-deep:  #4174ad;
  --yuri-wash:  rgba(150,192,236,.30);
  --kana:       #e9808a;
  --kana-deep:  #c8505f;
  --kana-wash:  rgba(255,190,196,.34);

  /* 文字 */
  --ink:        #4a3a33;
  --ink-soft:   #7d6a60;
  --ink-faint:  #ab9a90;
  --coal:       #2b2429;
  --line:       #f0dfd0;

  --wrap: 1120px;
  --r: 20px;
  --shadow:    0 18px 40px -22px rgba(74,58,51,.42);
  --shadow-lg: 0 30px 60px -28px rgba(74,58,51,.5);

  /* YakuHanRP / YakuHanMP … 「」、。の空きだけを詰める約物フォント（丸ゴ用 / 明朝用）。先頭に置く */
  --ff-round:  YakuHanRP, "Zen Maru Gothic", system-ui, -apple-system, "Hiragino Maru Gothic ProN", "Yu Gothic UI", sans-serif;
  --ff-mincho: YakuHanMP, "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --ease: cubic-bezier(.22,.68,.32,1);
  --pop:  cubic-bezier(.34,1.4,.5,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ff-round);
  font-size:16px;
  line-height:2;
  letter-spacing:.04em;
  /* 約物のツメ組み。YakuHan と両方入れる（片方だけだと空きが残る） */
  font-feature-settings:"palt";
  /* 禁則：行頭に 。、」 が来ない／長い英数がはみ出さない */
  line-break:strict;
  overflow-wrap:anywhere;
  hanging-punctuation:allow-end;
  overflow-x:hidden;
  background-image:
    radial-gradient(1100px 520px at 10% -6%,  rgba(255,226,233,.85), transparent 62%),
    radial-gradient( 900px 480px at 92% 14%,  rgba(255,236,205,.8),  transparent 60%),
    radial-gradient( 800px 520px at  4% 52%,  rgba(200,240,225,.5),  transparent 62%),
    radial-gradient( 900px 560px at 96% 78%,  rgba(210,196,240,.45), transparent 62%);
  background-attachment:fixed;
}
body.is-locked{ overflow:hidden; }

img{ display:block; max-width:100%; height:auto; }

/* ── 日本語の折り返し ─────────────────────
   auto-phrase … 文節の切れ目で折り返す（「やってきまし／た。」を防ぐ）
   balance     … 短い中央寄せの文を、行の長さが揃うように分ける
   pretty      … 長い段落で、最後の行が1〜2文字だけ残るのを防ぐ */
h1,h2,h3,
.hero__lead,.lead,.breath,.bye__msg,.bye__cause,.bye__note,
.last p,.now__txt,.spec li,.day__name,.foot__txt{
  word-break:auto-phrase;
  text-wrap:balance;
}
.prose p,.story p,.story h3{
  word-break:auto-phrase;
  text-wrap:pretty;
}
/* 熟語が行またぎで割れるのを防ぐ（inline-block：balance に縮められて中で折れないように） */
.nb,.np{ display:inline-block; white-space:nowrap; }
/* 日付・数字は途中で折らない */
.nowrap{ white-space:nowrap; }

/* PC だけの改行。スマホでは消して、文をひとつづきに流す */
@media (max-width:760px){
  .br-pc{ display:none; }
}

.wrap{ width:min(100% - 36px, var(--wrap)); margin-inline:auto; }
.sec{ padding:clamp(64px, 10vw, 116px) 0; position:relative; }

/* ── スクロール進捗バー ───────────── */
.prog{
  position:fixed; inset:0 auto auto 0;
  z-index:60;
  height:4px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--pink-deep), var(--coral), var(--gold), var(--mint), var(--sky));
  will-change:transform;
}

/* ── ふわふわ浮かぶ肉球 ───────────── */
.paws{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.paws b{
  position:absolute;
  bottom:-8vh;
  font-size:22px;
  opacity:0;
  animation:float 22s linear infinite;
  will-change:transform,opacity;
}
@keyframes float{
  0%   { transform:translateY(0) rotate(0deg)      scale(.7); opacity:0; }
  8%   { opacity:.4; }
  92%  { opacity:.3; }
  100% { transform:translateY(-118vh) rotate(320deg) scale(1.1); opacity:0; }
}

/* ══════════ スクロール表示 ══════════ */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d, 0s);
}
.reveal--l{ transform:translateX(-46px); }
.reveal--r{ transform:translateX(46px); }
.reveal--pop{ transform:scale(.86) rotate(-2.5deg); transition-timing-function:var(--pop); }
.reveal--tilt{ transform:translateY(34px) rotate(3deg); transition-timing-function:var(--pop); }
.reveal.is-in{ opacity:1; transform:none; }

/* 対応ブラウザ（Chrome 115+ / Safari 26+）では、スクロール量そのものに結びつけて出す。
   画面下端に入って 12%〜38% を進むあいだに opacity と transform が動く。
   JS の .is-in より先に動くので、二重にならないよう transition は切る */
@supports (animation-timeline: view()){
  .reveal,.reveal.is-in{
    transition:none;
    animation:revealIn linear both;
    animation-timeline:view();
    animation-range:entry 12% entry 38%;
    animation-delay:0s;
  }
  .reveal--pop,.reveal--pop.is-in{ animation-name:revealPop; }
  .reveal--tilt,.reveal--tilt.is-in{ animation-name:revealTilt; }
  .reveal--l,.reveal--l.is-in{ animation-name:revealL; }
  .reveal--r,.reveal--r.is-in{ animation-name:revealR; }
  @keyframes revealIn  { from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }
  @keyframes revealL   { from{ opacity:0; transform:translateX(-46px); } to{ opacity:1; transform:none; } }
  @keyframes revealR   { from{ opacity:0; transform:translateX(46px); } to{ opacity:1; transform:none; } }
  @keyframes revealPop { from{ opacity:0; transform:scale(.86) rotate(-2.5deg); } to{ opacity:1; transform:none; } }
  @keyframes revealTilt{ from{ opacity:0; transform:translateY(34px) rotate(3deg); } to{ opacity:1; transform:none; } }
  /* 進捗バーも CSS だけで動く（JS 側は上書きされないよう transform を触らない） */
  .prog{ animation:progGrow linear both; animation-timeline:scroll(root); transform:none; }
  @keyframes progGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal,.reveal.is-in,.prog,.more{ animation:none !important; transition:none !important; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none !important; }
  .intro{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .paws, .prog{ display:none; }
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; }
}

/* ══════════ トップ ══════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  padding:clamp(20px,4vw,40px) 0 0;
  overflow:hidden;
  z-index:1;
  /* 写真が沈まないよう、地色に厚みを持たせる */
  background:
    /* 下端は本文の地色へ溶かして、境目を出さない */
    linear-gradient(to bottom, transparent 68%, var(--cream) 99%),
    /* 写真の後ろのやわらかい光 */
    radial-gradient(46% 38% at 50% 32%, rgba(255,255,255,.68), rgba(255,255,255,0) 72%),
    /* 右上の陽だまり */
    radial-gradient(62% 58% at 92%  2%, rgba(255,196,128,.80), transparent 70%),
    /* 左のばら色 */
    radial-gradient(60% 64% at  2% 18%, rgba(255,158,184,.72), transparent 70%),
    /* 右下の青（ユリ） */
    radial-gradient(70% 58% at 96% 96%, rgba(146,188,238,.70), transparent 70%),
    /* 左下のピンク（カナ） */
    radial-gradient(66% 52% at  4% 100%, rgba(255,172,194,.70), transparent 70%),
    /* やわらかい光の玉をいくつか */
    radial-gradient(16% 12% at 22% 24%, rgba(255,255,255,.72), transparent 70%),
    radial-gradient(12% 9%  at 76% 16%, rgba(255,255,255,.6),  transparent 70%),
    radial-gradient(14% 10% at 66% 84%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(168deg, #ffe9cf 0%, #ffe0ea 34%, #f0e6fa 68%, #e2edfb 100%);
}
/* いちばん外側をほんの少し落として、中央を光だまりに見せる */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(116% 96% at 50% 42%, transparent 50%, rgba(122,88,80,.15) 100%);
  pointer-events:none;
  z-index:0;
}

/* 舞う紙吹雪 */
.hero__conf{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero__conf i{
  position:absolute; top:-6%;
  width:9px; height:9px;
  border-radius:2px;
  opacity:.75;
  animation:conf 9s linear infinite;
}
@keyframes conf{
  0%   { transform:translateY(-10vh) rotate(0deg); opacity:0; }
  10%  { opacity:.8; }
  100% { transform:translateY(112vh) rotate(680deg); opacity:0; }
}

.hero__frame{
  position:relative;
  width:min(100% - 36px, 880px);
  margin:0 auto;
  align-self:center;
}
.hero__photo{
  position:relative;
  width:100%;
  aspect-ratio:2.28;
  max-height:min(44svh, 400px);
  border-radius:42px;
  overflow:hidden;
  box-shadow:
    0 34px 72px -26px rgba(78,54,48,.55),
    0 8px 20px -10px rgba(78,54,48,.20),
    0 0 0 13px #fff,
    0 0 0 16px rgba(255,183,203,.55),
    0 0 0 24px rgba(255,255,255,.55);
  transform:rotate(-1.2deg);
  animation:heroPop 1.5s var(--pop) both;
  will-change:transform;
}
.hero__photo::after{
  content:"";
  position:absolute; inset:9px;
  border:2px dashed rgba(255,255,255,.9);
  border-radius:34px;
  box-shadow:0 0 18px rgba(78,54,48,.18) inset;
  pointer-events:none;
}
.hero__photo picture,
.hero__photo img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;
  animation:kenburns 26s ease-in-out infinite alternate;
}
@keyframes heroPop{
  0%   { opacity:0; transform:translateY(48px) rotate(-7deg) scale(.86); }
  100% { opacity:1; transform:translateY(0)    rotate(-1.2deg) scale(1); }
}
@keyframes kenburns{
  from{ transform:scale(1);    }
  to  { transform:scale(1.09); }
}

/* 写真のまわりのシール */
.hero__tape{
  position:absolute;
  width:66px; height:66px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  z-index:3;
  filter:drop-shadow(0 6px 10px rgba(90,60,70,.28));
}
/* 左上：リボン */
.hero__tape--a{
  top:-30px; left:2%;
  transform:rotate(-14deg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M32 22c-6-9-15-14-22-10s-5 15 4 17 14-3 18-7z' fill='%23ffa9c1'/%3E%3Cpath d='M32 22c6-9 15-14 22-10s5 15-4 17-14-3-18-7z' fill='%23ffc0d2'/%3E%3Ccircle cx='32' cy='22' r='6' fill='%23ff8fae'/%3E%3Cpath d='M28 27l-7 15 8-4 5 4 4-15z' fill='%23ffb6cb'/%3E%3C/svg%3E");
  animation:tapeFloat 4.6s ease-in-out infinite;
}
/* 右下：肉球 */
.hero__tape--b{
  bottom:-26px; right:3%;
  width:56px; height:56px;
  transform:rotate(12deg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cellipse cx='30' cy='40' rx='16' ry='13' fill='%2396c2ec'/%3E%3Cellipse cx='13' cy='24' rx='6.5' ry='8' fill='%2396c2ec'/%3E%3Cellipse cx='24' cy='16' rx='6.5' ry='8.5' fill='%2396c2ec'/%3E%3Cellipse cx='37' cy='16' rx='6.5' ry='8.5' fill='%2396c2ec'/%3E%3Cellipse cx='48' cy='24' rx='6.5' ry='8' fill='%2396c2ec'/%3E%3C/svg%3E");
  animation:tapeFloat 5.4s ease-in-out .8s infinite;
}
@keyframes tapeFloat{
  0%,100%{ translate:0 0; }
  50%    { translate:0 -6px; }
}

.hero__body{
  position:relative;
  text-align:center;
  padding:clamp(26px,4.6vw,42px) 18px clamp(62px,8vw,92px);
}
.hero__eyebrow{
  margin:0 0 .5em;
  font-size:.78rem;
  letter-spacing:.42em;
  text-indent:.42em;
  color:var(--coral);
  animation:fadeUp .9s .4s var(--ease) both;
}
.hero__title{
  margin:0;
  font-size:clamp(2.6rem, 11vw, 4.8rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:.08em;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.16em;
  flex-wrap:wrap;
}
.hero__title i{
  display:inline-block;
  font-style:normal;
  animation:letter .85s var(--pop) both;
  animation-delay:calc(.5s + var(--i) * .09s);
}
.hero__title .n-yuri{ color:var(--yuri-deep); }
.hero__title .n-kana{ color:var(--kana-deep); }
.hero__title em{
  font-style:normal;
  font-size:.4em;
  font-weight:400;
  color:var(--gold);
  letter-spacing:.1em;
}
@keyframes letter{
  0%   { opacity:0; transform:translateY(38px) rotate(-14deg) scale(.6); }
  100% { opacity:1; transform:none; }
}
.hero__sub{
  margin:1.1em 0 0;
  font-family:var(--ff-mincho);
  font-size:.95rem;
  letter-spacing:.18em;
  color:var(--ink-soft);
  animation:fadeUp .9s 1.15s var(--ease) both;
}
.hero__sub time{
  display:block;
  font-size:1.1rem;
  letter-spacing:.24em;
  text-indent:.24em;
  color:var(--ink);
}
.hero__sub::after{
  content:"";
  display:block;
  width:34px; height:2px;
  margin:1.15em auto 0;
  border-radius:2px;
  background:linear-gradient(90deg, var(--yuri), var(--kana));
  opacity:.6;
}
.hero__lead{
  margin:1.15em auto 0;
  max-width:30em;
  font-size:.95rem;
  color:var(--ink-soft);
  animation:fadeUp .9s 1.3s var(--ease) both;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1;} }

.hero__cue{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); }
.hero__cue span{
  display:block; width:1px; height:46px;
  background:linear-gradient(var(--coral), transparent);
  animation:cue 2.2s ease-in-out infinite;
  transform-origin:top;
}
@keyframes cue{ 0%,100%{ transform:scaleY(.3); opacity:.3; } 50%{ transform:scaleY(1); opacity:1; } }

@media (prefers-reduced-motion:reduce){
  .hero__photo, .hero__title i, .hero__eyebrow, .hero__sub, .hero__lead{ animation:none; }
  .hero__photo img{ animation:none; }
  .hero__cue span, .hero__conf{ display:none; }
}

/* ══════════ オープニング（2秒） ══════════ */
.intro{ display:none; }
.intro-on .intro{
  display:grid;
  position:fixed; inset:0;
  z-index:100;
  place-items:center;
  /* ユリの青と、カナのピンクを基調に */
  background:
    radial-gradient(70% 58% at 14% 12%, rgba(255,141,175,.92), transparent 64%),
    radial-gradient(66% 56% at 88% 16%, rgba( 99,163,228,.90), transparent 62%),
    radial-gradient(84% 56% at 84% 94%, rgba(255,158,186,.88), transparent 64%),
    radial-gradient(76% 54% at  8% 92%, rgba(120,176,232,.86), transparent 64%),
    radial-gradient(46% 40% at 50% 46%, rgba(255,252,246,.88), transparent 70%),
    linear-gradient(158deg, #ffdbe8 0%, #e4edfb 46%, #ffdde8 100%);
  animation:introOut .55s ease 1.45s forwards;
}
.intro-on{ overflow:hidden; }
.intro__inner{ text-align:center; padding:20px; }

.intro__photo{
  position:relative;
  height:min(54svh, 580px);
  width:auto;
  max-width:min(66vw, 440px);
  aspect-ratio:3/4;
  margin:0 auto;
  border-radius:16px;
  background:var(--coal);
  border:9px solid #fff;
  box-shadow:0 34px 70px -24px rgba(70,44,56,.55), 0 8px 22px -10px rgba(70,44,56,.25);
  transform:rotate(-1.8deg);
  animation:introPhoto 1.1s cubic-bezier(.22,.72,.3,1) both;
}
.intro__photo img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:7px;
}
.intro__tape{
  position:absolute;
  top:-20px; left:50%;
  width:96px; height:28px;
  transform:translateX(-52%) rotate(-3deg);
  background:rgba(255,255,255,.8);
  box-shadow:0 3px 10px -5px rgba(70,52,60,.5);
  z-index:2;
}

.intro__name{
  margin:1.35em 0 0;
  font-size:clamp(1.5rem, 6.4vw, 2.1rem);
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.2;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.1em;
}
.intro__name i{
  display:inline-block;
  font-style:normal;
  animation:introChar .6s cubic-bezier(.34,1.36,.5,1) both;
  animation-delay:calc(.45s + var(--i) * .07s);
}
.intro__name i:nth-child(-n+2){ color:#2f5f97; }
.intro__name i:nth-last-child(-n+2){ color:#b23c4c; }
.intro__name{ text-shadow:0 2px 10px rgba(255,255,255,.7); }
.intro__name em{
  font-style:normal;
  font-size:.5em;
  font-weight:400;
  color:#b3862f;
  animation:introChar .6s .62s cubic-bezier(.34,1.36,.5,1) both;
}

@keyframes introPhoto{
  from{ opacity:0; transform:scale(.86) translateY(18px) rotate(-6deg); }
  to  { opacity:1; transform:rotate(-1.8deg); }
}
@keyframes introChar{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}
@keyframes introOut{
  from{ opacity:1; }
  to  { opacity:0; visibility:hidden; }
}

/* オープニングが出ているあいだ、トップの動きは止めておく */
.intro-on .hero__photo,
.intro-on .hero__title i,
.intro-on .hero__eyebrow,
.intro-on .hero__sub,
.intro-on .hero__lead,
.intro-on .hero__conf i{ animation-play-state:paused; }


/* ══════════ 流れる写真の帯 ══════════ */
.band{
  position:relative;
  padding:clamp(14px,2.5vw,22px) 0;
  overflow:hidden;
  background:linear-gradient(90deg, rgba(255,226,233,.5), rgba(255,236,205,.5), rgba(200,240,225,.45));
  border-block:1px solid var(--line);
  z-index:1;
}
.band + .band{ border-top:0; }
.band__row{
  display:flex;
  width:max-content;
  gap:12px;
  animation:slide var(--dur, 68s) linear infinite;
  will-change:transform;
}
.band__row--rev{ animation-direction:reverse; }
.band:hover .band__row{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.band img{
  height:clamp(96px, 15vw, 156px);
  width:auto;
  border-radius:12px;
  box-shadow:0 10px 22px -16px rgba(74,58,51,.6);
  border:4px solid var(--paper);
  transition:transform .45s var(--pop);
}
.band img:nth-child(odd){ transform:rotate(-1.6deg); }
.band img:nth-child(even){ transform:rotate(1.6deg); }
.band img:hover{ transform:scale(1.09) rotate(0deg); }

@media (prefers-reduced-motion:reduce){ .band__row{ animation:none; } }

/* ══════════ 見出し ══════════ */
@supports (text-box-trim: trim-both){
  .h2__ja,.last__end,.day__n{ text-box-trim:trim-both; text-box-edge:cap alphabetic; }
}
.h2{
  margin:0 0 clamp(26px,4.4vw,42px);
  text-align:center;
  line-height:1.3;
}
.h2__ja{
  display:block;
  font-size:clamp(1.55rem,4.8vw,2.15rem);
  font-weight:700;
  letter-spacing:.16em;
}
.h2__ja i{
  display:inline-block;
  font-style:normal;
  opacity:0;
  transform:translateY(20px) rotate(-8deg);
  transition:opacity .5s var(--pop), transform .5s var(--pop);
  transition-delay:calc(var(--i) * .05s);
}
.is-in .h2__ja i, .h2.is-in .h2__ja i{ opacity:1; transform:none; }
.h2__en{
  display:block;
  margin-top:.7em;
  font-size:.7rem;
  letter-spacing:.4em;
  text-indent:.4em;
  color:var(--coral);
}
.h2__en::before,.h2__en::after{
  content:"";
  display:inline-block;
  width:26px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--pink-deep), var(--gold));
  vertical-align:middle;
  margin:0 1em;
}

.lead{
  max-width:34em;
  margin:0 auto clamp(30px,4.6vw,46px);
  text-align:center;
  color:var(--ink-soft);
  font-size:.95rem;
}

/* ══════════ はじまり ══════════ */
.sec--start .prose{
  max-width:48em;
  margin-inline:auto;
  position:relative;
  padding:clamp(30px,5vw,46px) clamp(24px,5vw,44px);
  background:rgba(255,255,255,.78);
  border-radius:var(--r);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.sec--start .prose::before,
.sec--start .prose::after{
  content:"";
  position:absolute;
  width:74px; height:26px;
  background:rgba(255,255,255,.85);
  box-shadow:0 3px 10px -6px rgba(74,58,51,.5);
}
.sec--start .prose::before{ top:-13px; left:12%;  transform:rotate(-6deg); }
.sec--start .prose::after { bottom:-13px; right:14%; transform:rotate(4deg); }
.sec--start .prose p{ margin:0 0 1.6em; }
.sec--start .prose p:last-child{ margin-bottom:0; }
.sec--start .prose p:last-child{ margin-bottom:0; }

/* ══════════ 猫のセクション ══════════ */
.cat{ position:relative; z-index:1; }
.cat--yuri{ background:linear-gradient(180deg, transparent, var(--yuri-wash) 18%, var(--yuri-wash) 82%, transparent); }
.cat--kana{ background:linear-gradient(180deg, transparent, var(--kana-wash) 18%, var(--kana-wash) 82%, transparent); }

.cat__head{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,5vw,60px);
  align-items:center;
  margin-bottom:clamp(52px,7.5vw,84px);
}
.cat__portrait{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  background:var(--coal);
  transform:rotate(-1.4deg);
  transition:transform .6s var(--pop);
}
.cat--kana .cat__portrait{ transform:rotate(1.4deg); }
.cat__portrait:hover{ transform:rotate(0deg) scale(1.02); }
.cat--yuri .cat__portrait{ box-shadow:var(--shadow-lg), 0 0 0 5px var(--paper), 0 0 0 8px var(--yuri); }
.cat--kana .cat__portrait{ box-shadow:var(--shadow-lg), 0 0 0 5px var(--paper), 0 0 0 8px var(--kana); }
.cat__portrait img{ width:100%; }

.cat__eyebrow{
  margin:0 0 .3em;
  font-size:.72rem;
  letter-spacing:.42em;
  text-indent:.42em;
  color:var(--gold);
}
.cat--yuri .cat__eyebrow{ color:var(--yuri-deep); }
.cat--kana .cat__eyebrow{ color:var(--kana-deep); }
.cat__name{
  margin:0 0 .55em;
  font-size:clamp(2.3rem,7.4vw,3.4rem);
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.2;
  background:linear-gradient(96deg, var(--ink) 25%, var(--coral));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.cat--yuri .cat__name{ background-image:linear-gradient(96deg, var(--ink) 25%, var(--yuri-deep)); }
.cat--kana .cat__name{ background-image:linear-gradient(96deg, var(--ink) 25%, var(--kana-deep)); }

.spec{
  margin:0;
  padding:clamp(14px,2.4vw,22px) clamp(16px,2.6vw,26px);
  list-style:none;
  background:rgba(255,255,255,.66);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.spec li:first-child{ padding-top:0; }
.spec li:last-child{ padding-bottom:0; border-bottom:0; }
.cat--yuri .spec{ border-color:rgba(122,168,219,.5); }
.cat--kana .spec{ border-color:rgba(233,128,138,.5); }
.cat--yuri .spec li{ border-bottom-color:var(--yuri); }
.cat--kana .spec li{ border-bottom-color:var(--kana); }
.spec li{
  position:relative;
  padding:.8em 0 .8em 1.9em;
  border-bottom:2px dotted var(--pink-deep);
  border-top:0;
  font-size:.96rem;
  line-height:1.85;
}
.spec li::before{
  content:"";
  position:absolute; left:.25em; top:1.02em;
  width:.62em; height:.62em;
  border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 0 4px rgba(255,143,118,.18);
}
.cat--yuri .spec li::before{ background:var(--yuri); box-shadow:0 0 0 4px rgba(122,168,219,.24); }
.cat--kana .spec li::before{ background:var(--kana); box-shadow:0 0 0 4px rgba(233,128,138,.24); }

/* ── エピソード ───────────────── */
.stories{ display:grid; gap:clamp(46px,6.6vw,78px); }

.story{
  display:grid;
  grid-template-columns:1fr minmax(0,.85fr);
  gap:clamp(24px,5vw,54px);
  align-items:center;
}
.story--rev > figure{ order:-1; }
.story__txt{ min-width:0; }

.story h3{
  margin:0 0 .8em;
  font-size:clamp(1.18rem,3.7vw,1.45rem);
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.6;
  position:relative;
  padding-left:1.1em;
}
.story h3::before{
  content:"";
  position:absolute; left:0; top:.66em;
  width:.55em; height:.55em;
  border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 0 4px rgba(255,143,118,.2);
}
.cat--yuri .story h3::before{ background:var(--yuri); box-shadow:0 0 0 4px rgba(122,168,219,.24); }
.cat--kana .story h3::before{ background:var(--kana); box-shadow:0 0 0 4px rgba(233,128,138,.24); }
.story p{ margin:0; color:var(--ink-soft); font-size:.95rem; }

.story figure{
  margin:0;
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--coal);
  transform:rotate(1deg);
  transition:transform .6s var(--pop), box-shadow .6s;
}
.story--rev figure{ transform:rotate(-1deg); }
.story figure:hover{ transform:rotate(0deg) scale(1.03); box-shadow:var(--shadow-lg); }
.story figure img{ width:100%; }

/* ══════════ ギャラリー ══════════ */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
  gap:clamp(10px,2vw,18px);
}

.shot{
  appearance:none; -webkit-appearance:none;
  padding:0; border:0;
  background:var(--coal);
  border-radius:14px;
  overflow:hidden;
  cursor:zoom-in;
  display:block;
  line-height:0;
  box-shadow:0 12px 26px -20px rgba(74,58,51,.7);
  opacity:0;
  transform:translateY(26px) scale(.9) rotate(var(--rot, 0deg));
  transition:opacity .6s var(--ease), transform .6s var(--pop), box-shadow .4s;
  transition-delay:var(--d, 0s);
}
.shot.is-in{ opacity:1; transform:rotate(var(--rot, 0deg)); }
.shot img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.shot:hover{
  transform:translateY(-6px) rotate(0deg) scale(1.04) !important;
  box-shadow:0 24px 40px -22px rgba(74,58,51,.62);
  z-index:2;
}
.shot:hover img{ transform:scale(1.09); }
.shot:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* ══════════ 写真のあいだの短い文章 ══════════ */
.breath{
  margin:clamp(38px,6vw,64px) auto;
  max-width:26em;
  text-align:center;
  font-family:var(--ff-mincho);
  font-size:clamp(.98rem,2.7vw,1.12rem);
  line-height:2.5;
  letter-spacing:.1em;
  color:var(--ink-soft);
  position:relative;
}
.breath::before,.breath::after{
  content:"";
  display:block;
  width:40px; height:2px;
  margin:0 auto;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--pink-deep), transparent);
}
.breath::before{ margin-bottom:1.6em; }
.breath::after { margin-top:1.6em; }

/* ══════════ のこりを見る ══════════ */
.more[hidden]{ display:none; }
/* 開くとき、高さを 0 → auto へなめらかに。interpolate-size は対応ブラウザだけで効く */
@supports (interpolate-size: allow-keywords){
  .more{ interpolate-size:allow-keywords; overflow:clip; height:auto;
         transition:height .6s var(--ease), opacity .5s ease; }
  .more.is-closing{ height:0; opacity:0; }
  .more.is-opening{ animation:moreOpen .6s var(--ease) both; }
  @keyframes moreOpen{ from{ height:0; opacity:0; } to{ height:auto; opacity:1; } }
}
.more__btn{
  display:block;
  margin:clamp(26px,4vw,40px) auto 0;
  padding:.85em 2.4em;
  appearance:none; -webkit-appearance:none;
  border:2px solid var(--pink-deep);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--ink);
  font-family:inherit;
  font-size:.88rem;
  letter-spacing:.14em;
  cursor:pointer;
  transition:background .35s, border-color .35s, transform .35s var(--pop), box-shadow .35s;
  box-shadow:0 10px 24px -18px rgba(74,58,51,.6);
}
.more__btn span{ display:inline-block; }
.more__btn::after{
  content:"▾";
  display:inline-block;
  margin-left:.7em;
  transition:transform .35s var(--pop);
}
.more__btn.is-open::after{ transform:rotate(180deg); }
.more__btn:hover{
  background:#fff;
  border-color:var(--coral);
  transform:translateY(-2px);
  box-shadow:0 16px 30px -18px rgba(74,58,51,.5);
}
.more__btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.more > .gallery:first-child{ margin-top:clamp(18px,3vw,26px); }
.more .gallery,.sec--album2 .gallery{ content-visibility:auto; contain-intrinsic-size:auto 1200px; }

/* ── ページの先頭にもどる ─────────────── */
.totop{
  position:fixed;
  right:clamp(14px,2.5vw,26px);
  bottom:clamp(14px,2.5vw,26px);
  z-index:55;
  width:46px; height:46px;
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  opacity:0;
  transform:translateY(12px) scale(.85);
  pointer-events:none;
  transition:opacity .4s, transform .4s var(--pop), background .3s;
  box-shadow:0 12px 26px -16px rgba(74,58,51,.7);
}
.totop.is-on{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ background:#fff; color:var(--coral); }
.totop:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* ══════════ いっしょにいた日数 ══════════ */
.days{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,3vw,28px);
  max-width:720px;
  margin:0 auto clamp(40px,6vw,60px);
}
.day{
  text-align:center;
  padding:clamp(22px,3.6vw,30px) 12px;
  border-radius:var(--r);
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.day__name{ margin:0; font-size:.86rem; letter-spacing:.3em; text-indent:.3em; color:var(--coral); }
.day--yuri .day__name{ color:var(--yuri-deep); }
.day--kana .day__name{ color:var(--kana-deep); }
.day--yuri{ box-shadow:var(--shadow), inset 0 4px 0 var(--yuri); }
.day--kana{ box-shadow:var(--shadow), inset 0 4px 0 var(--kana); }
.day__n{
  display:inline-block;
  margin:.1em .12em 0 0;
  font-size:clamp(2.4rem,8vw,3.4rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:.02em;
  font-family:"Cormorant Garamond", var(--ff-mincho), serif;
  font-weight:600;
  font-size:clamp(3rem,10vw,4.6rem);
  background:linear-gradient(100deg, var(--coral), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.day--yuri .day__n{ background-image:linear-gradient(100deg, var(--yuri), var(--yuri-deep)); }
.day--kana .day__n{ background-image:linear-gradient(100deg, var(--kana), var(--kana-deep)); }
.day__u{ font-size:.82rem; letter-spacing:.2em; color:var(--ink-faint); }

/* ══════════ アルバム ══════════ */
.sec--album { background:linear-gradient(180deg, transparent, rgba(255,236,205,.45) 10%, rgba(255,236,205,.45) 90%, transparent); }
.sec--album2{ background:linear-gradient(180deg, transparent, rgba(200,240,225,.42) 10%, rgba(200,240,225,.42) 90%, transparent); }

/* ══════════ 虹の橋 ══════════ */
.bridge{
  position:relative;
  width:min(100%, 1000px);
  margin:0 auto clamp(-56px, -4vw, -30px);
  pointer-events:none;
  z-index:0;
}
.bridge svg{ display:block; width:100%; height:auto; overflow:visible; }
.bridge path{
  fill:none;
  stroke-width:8;
  stroke-linecap:round;
  opacity:0;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
/* 画面に入ったら、赤い外側から順にすうっと架かる */
.bridge.is-in path{
  animation:
    bridgeDraw 2.1s cubic-bezier(.32,.72,.3,1) forwards,
    bridgeGlow 5.5s ease-in-out 2.4s infinite;
  animation-delay:calc(var(--i) * .14s), calc(2.4s + var(--i) * .14s);
}
@keyframes bridgeDraw{
  0%   { opacity:0;   stroke-dashoffset:1; }
  12%  { opacity:.62; }
  100% { opacity:.62; stroke-dashoffset:0; }
}
@keyframes bridgeGlow{
  0%,100% { opacity:.62; }
  50%     { opacity:.9;  }
}

/* 橋の下のやわらかい光 */
.bridge::after{
  content:"";
  position:absolute; inset:18% 6% -8% 6%;
  background:radial-gradient(60% 80% at 50% 100%, rgba(255,255,255,.6), transparent 70%);
  opacity:0;
  transition:opacity 1.6s 1.2s ease;
}
.bridge.is-in::after{ opacity:1; }

/* むすびの一文の虹の線が、あとから伸びる */
.bye__msg::before{ width:0; transition:width 1.4s .3s cubic-bezier(.32,.72,.3,1); }
.bye__msg.is-in::before{ width:150px; }

@media (prefers-reduced-motion:reduce){
  .bridge path{ opacity:.62; stroke-dashoffset:0; animation:none; }
  .bridge::after{ opacity:1; transition:none; }
  .bye__msg::before{ width:150px; transition:none; }
}

@media (max-width:760px){
  .bridge{ width:min(100%, 420px); margin-bottom:clamp(-26px,-3vw,-14px); }
  .hero__photo{ aspect-ratio:4/3; max-height:none; }
  .bridge path{ stroke-width:11; }
}

/* ══════════ おわかれ ══════════ */
.sec--bye{ padding-block:clamp(88px,13vw,150px); }
.bye{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,3.4vw,32px);
  align-items:stretch;   /* 二枚のカードの高さを揃える */
}
.bye__one{
  display:flex;
  flex-direction:column;
  padding:clamp(34px,5vw,48px) clamp(20px,3vw,30px) clamp(30px,4.4vw,40px);
  background:rgba(255,255,255,.76);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  text-align:center;
}
.bye__name{ margin:0 0 .55em; font-size:1.4rem; font-weight:700; letter-spacing:.22em; text-indent:.22em; }
.bye__one--yuri .bye__name{ color:var(--yuri-deep); }
.bye__one--kana .bye__name{ color:var(--kana-deep); }
.bye__one--yuri{ box-shadow:var(--shadow), inset 0 4px 0 var(--yuri); }
.bye__one--kana{ box-shadow:var(--shadow), inset 0 4px 0 var(--kana); }
.bye__one--yuri .bye__dash{ color:var(--yuri); }
.bye__one--kana .bye__dash{ color:var(--kana); }
.bye__span{
  margin:0;
  font-family:var(--ff-mincho);
  font-size:.98rem; letter-spacing:.08em;
  color:var(--ink-soft); line-height:2.2;
}
.bye__dash{ display:block; color:var(--pink-deep); font-size:.8em; }
.bye__cause{ margin:1.4em 0 0; font-size:.9rem; line-height:2.4; color:var(--ink-soft); }
.bye__shots{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:auto;                    /* 写真をカードの下端に寄せて揃える */
  padding-top:clamp(18px,2.8vw,24px);
}
.bye__shots .shot{ flex:1 1 160px; max-width:264px; }
.bye__msg{
  margin:clamp(34px,5.5vw,54px) auto 0;
  max-width:26em;
  text-align:center;
  font-family:var(--ff-mincho);
  font-size:clamp(1rem,2.9vw,1.16rem);
  line-height:2.5;
  letter-spacing:.1em;
  color:var(--ink);
}
.bye__msg::before{
  content:"";
  display:block;
  width:150px; height:4px;
  margin:0 auto 1.7em;
  border-radius:4px;
  background:linear-gradient(90deg,
    var(--kana) 0 16.6%, var(--gold) 16.6% 33.3%, #f2dd76 33.3% 50%,
    var(--mint) 50% 66.6%, var(--yuri) 66.6% 83.3%, var(--lav) 83.3% 100%);
  opacity:.85;
}

/* おわかれの見出しの線も虹色に */
.sec--bye .h2__en::before,
.sec--bye .h2__en::after{
  background:linear-gradient(90deg, var(--kana), var(--gold), var(--mint), var(--yuri));
}

/* ══════════ いま ══════════ */
.sec--now{ padding-block:clamp(80px,12vw,140px); }
.now{ max-width:520px; margin-inline:auto; text-align:center; }
.now__shot{ width:100%; background:var(--cream-deep); border-radius:var(--r); }
.now__shot img{ width:100%; aspect-ratio:auto; object-fit:contain; }
.now__txt::after{
  content:"";
  display:block;
  width:120px; height:3px;
  margin:1.5em auto 0;
  border-radius:3px;
  background:linear-gradient(90deg, var(--yuri) 0 50%, var(--kana) 50% 100%);
}
.now__txt{
  margin:1.9em 0 0;
  font-family:var(--ff-mincho);
  font-size:clamp(1.12rem,3.4vw,1.42rem);
  line-height:2.2;
  letter-spacing:.14em;
  color:var(--ink);
}
.br-sp{ display:none; }
@media (max-width:520px){ .br-sp{ display:inline; } }

/* ══════════ さいごに ══════════ */
.sec--last{ padding-block:clamp(84px,12vw,140px) clamp(96px,14vw,170px); }
.last{
  max-width:30em;
  margin-inline:auto;
  text-align:center;
  font-family:var(--ff-mincho);
  font-size:clamp(1.08rem,3.1vw,1.26rem);
  line-height:2.7;
  letter-spacing:.12em;
}
.last p{ margin:0 0 2em; }
.last__names{
  font-size:1.22em;
  letter-spacing:.24em;
  text-indent:.24em;
  margin-bottom:2.4em !important;
}
/* 「それじゃ」は、そっと置いて、そのあと少し間をあける */
.last__bye{
  font-size:.94em;
  letter-spacing:.2em;
  text-indent:.2em;
  color:var(--ink-soft);
  margin-bottom:1.4em !important;
}
.last__end{
  margin:.42em 0 0;
  /* 字面（インク）の中心が「それじゃ」より右に出るぶんを戻す。実測値で調整（下の検算メモ参照） */
  padding-right:.25em;
  font-size:clamp(2.6rem,8.6vw,3.5rem);
  letter-spacing:.3em;
  text-indent:.3em;
  background:linear-gradient(100deg, var(--coral), var(--gold), var(--pink-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sway 4.5s ease-in-out infinite;
  display:inline-block;
}
@keyframes sway{ 0%,100%{ transform:rotate(-2deg); } 50%{ transform:rotate(2deg); } }

/* ══════════ フッター ══════════ */
.foot{
  position:relative; z-index:1;
  padding:42px 20px 54px;
  text-align:center;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.5);
}
.foot__mark{ margin:0 0 .4em; font-size:1.3rem; animation:sway 3.4s ease-in-out infinite; }
.foot__txt{ margin:0; font-size:.78rem; letter-spacing:.36em; text-indent:.36em; color:var(--ink-faint); }

/* ══════════ 写真の拡大表示 ══════════ */
.lb{
  position:fixed; inset:0; z-index:70;
  width:100%; height:100%; max-width:none; max-height:none;
  margin:0; border:0;
  display:grid; place-items:center;
  padding:clamp(16px,5vw,48px);
  background:rgba(43,36,41,.95);
  color:var(--cream);
  backdrop-filter:blur(7px);
  animation:lbIn .28s ease both;
}
.lb::backdrop{ background:transparent; }
.lb:not([open]){ display:none; }
/* 開閉のフェード：@starting-style で「開いた瞬間」の値を決め、閉じるときは allow-discrete で消える */
@supports (transition-behavior: allow-discrete){
  .lb{ animation:none; opacity:1;
       transition:opacity .32s ease, display .32s allow-discrete, overlay .32s allow-discrete; }
  .lb:not([open]){ opacity:0; }
  @starting-style{ .lb[open]{ opacity:0; } }
}
@keyframes lbIn{ from{opacity:0;} to{opacity:1;} }

.lb__img{
  max-width:100%; max-height:100%;
  border-radius:10px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
  animation:lbImg .38s var(--pop) both;
  view-transition-name:photo;
}
/* View Transitions：押したサムネイルが、その場から拡大表示へ「動いて」いく */
.shot.is-vt img{ view-transition-name:photo; }
::view-transition-old(photo),::view-transition-new(photo){
  animation-duration:.42s; animation-timing-function:var(--ease);
  mix-blend-mode:normal; overflow:hidden; border-radius:10px;
}
::view-transition-group(photo){ animation-timing-function:var(--ease); }
html.is-vt .lb__img{ animation:none; }
@keyframes lbImg{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; } }

.lb__count{
  position:absolute; bottom:16px; left:50%;
  transform:translateX(-50%);
  margin:0;
  font-size:.76rem; letter-spacing:.22em;
  color:rgba(255,250,243,.7);
  font-variant-numeric:tabular-nums;
}

.lb__close,.lb__nav{
  position:absolute;
  appearance:none; -webkit-appearance:none;
  border:0;
  background:rgba(255,250,243,.15);
  color:var(--cream);
  cursor:pointer;
  border-radius:999px;
  line-height:1;
  transition:background .25s, transform .25s var(--pop);
}
.lb__close:hover,.lb__nav:hover{ background:rgba(255,250,243,.3); transform:scale(1.1); }
.lb__nav:hover{ transform:translateY(-50%) scale(1.1); }
.lb__close:focus-visible,.lb__nav:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.lb__close{ top:14px; right:14px; width:44px; height:44px; font-size:1.05rem; }
.lb__nav{ top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:2rem; padding-bottom:.16em; }
.lb__nav--prev{ left:10px; }
.lb__nav--next{ right:10px; }

/* ══════════ スマホ ══════════ */
@media (max-width:760px){
  body{ font-size:15.5px; line-height:1.95; }

  .cat__head{ grid-template-columns:1fr; gap:24px; }
  .cat__intro{ text-align:center; }
  .spec{ text-align:left; max-width:22em; margin-inline:auto; }

  .story{ grid-template-columns:1fr; gap:20px; }
  .story--rev > figure{ order:0; }
  .story figure{ order:-1; }

  .bye{ grid-template-columns:1fr; }
  .days{ grid-template-columns:1fr; }

  .gallery{ grid-template-columns:repeat(2,1fr); gap:9px; }
  .shot:hover{ transform:rotate(var(--rot,0deg)) !important; }

  .lb__nav{ width:42px; height:42px; font-size:1.7rem; }
  .hero__tape{ width:78px; height:24px; }

  /* 写真の元の比率のまま出して、二匹とも見切れないようにする */
  .hero__photo{
    height:auto; aspect-ratio:4/3;
    border-radius:32px;
    box-shadow:
      0 24px 50px -22px rgba(78,54,48,.5),
      0 0 0 9px #fff,
      0 0 0 11px rgba(255,183,203,.55),
      0 0 0 17px rgba(255,255,255,.5);
  }
  .hero__photo::after{ inset:7px; border-radius:26px; }
  .hero__tape--a{ width:46px; height:46px; top:-22px; left:-2px; }
  .hero__tape--b{ width:40px; height:40px; bottom:-18px; right:0; }
  .hero__photo img{ object-position:50% 50%; }
  .band img{ height:clamp(84px,22vw,120px); }
}

@media (max-width:400px){
  .hero__title{ gap:.08em; }
  .spec > div{ grid-template-columns:5.6em 1fr; }
}

/* ══════════ 印刷 ══════════ */
@media print{
  body{ background:#fff; }
  .hero{ min-height:auto; }
  .hero__cue,.lb,.paws,.prog,.band,.hero__conf{ display:none !important; }
  .reveal,.shot{ opacity:1 !important; transform:none !important; }
  .shot{ box-shadow:none; }
}

/* ══════════════════════════════════════
   かわいい仕上げ
   ══════════════════════════════════════ */

/* ── 紙のような地 ─────────────────────── */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(200,168,150,.16) 1px, transparent 1px),
    radial-gradient(rgba(200,168,150,.10) 1px, transparent 1px);
  background-size:22px 22px, 22px 22px;
  background-position:0 0, 11px 11px;
}

/* ── 波型の区切り ────────────────────── */
.sec--album, .sec--album2, .cat--yuri, .cat--kana, .sec--days{
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V6c10 0 10-6 20-6s10 6 20 6 10-6 20-6 10 6 20 6 10-6 20-6 10 6 20 6v6z' fill='%23fffaf3'/%3E%3C/svg%3E");
}
.sec--album::before, .sec--album2::before, .cat--yuri::before,
.cat--kana::before, .sec--days::before,
.sec--album::after,  .sec--album2::after,  .cat--yuri::after,
.cat--kana::after,  .sec--days::after{
  content:"";
  position:absolute; left:0; right:0;
  height:12px;
  background:var(--wave) repeat-x;
  background-size:120px 12px;
  pointer-events:none; z-index:2;
}
.sec--album::before,.sec--album2::before,.cat--yuri::before,.cat--kana::before,.sec--days::before{ top:-1px; transform:scaleY(-1); }
.sec--album::after, .sec--album2::after, .cat--yuri::after, .cat--kana::after, .sec--days::after{ bottom:-1px; }

/* ── 見出しに手描きの下線と、小さな飾り ────────── */
.h2__ja{ position:relative; display:inline-block; }
.h2__ja::after{
  content:"";
  position:absolute; left:-.2em; right:-.2em; bottom:-.28em;
  height:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 9'%3E%3Cpath d='M2 6C28 2 52 7 80 4s54-2 78 1' fill='none' stroke='%23ffc3d0' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  opacity:.9;
}
.cat--yuri .h2__ja::after{ filter:hue-rotate(155deg) saturate(.85); }

/* ── 猫の耳がついたプロフィールカード ─────────── */
.spec{ position:relative; overflow:visible; }
.spec::before, .spec::after{
  content:"";
  position:absolute; top:-15px;
  width:0; height:0;
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-bottom:19px solid rgba(255,255,255,.66);
  filter:drop-shadow(0 -1px 0 var(--line));
}
.spec::before{ left:26px; transform:rotate(-12deg); }
.spec::after { right:26px; transform:rotate(12deg); }
.cat--yuri .spec::before,.cat--yuri .spec::after{ filter:drop-shadow(0 -1px 0 rgba(122,168,219,.6)); }
.cat--kana .spec::before,.cat--kana .spec::after{ filter:drop-shadow(0 -1px 0 rgba(233,128,138,.6)); }

/* ── エピソードを吹き出しに ───────────────── */
.story__txt{
  position:relative;
  background:rgba(255,255,255,.72);
  border:2px dashed var(--pink-deep);
  border-radius:22px;
  padding:clamp(20px,3.2vw,30px) clamp(20px,3vw,28px);
}
.cat--yuri .story__txt{ border-color:rgba(122,168,219,.75); }
.cat--kana .story__txt{ border-color:rgba(233,128,138,.75); }
.story__txt::after{
  content:"";
  position:absolute; top:38px; width:16px; height:16px;
  background:rgba(255,255,255,.72);
  border-right:2px dashed var(--pink-deep);
  border-bottom:2px dashed var(--pink-deep);
  transform:rotate(-45deg);
}
.cat--yuri .story__txt::after{ border-color:rgba(122,168,219,.75); }
.cat--kana .story__txt::after{ border-color:rgba(233,128,138,.75); }
.story:not(.story--rev) .story__txt::after{ right:-10px; }
.story--rev .story__txt::after{ left:-10px; transform:rotate(135deg); }
.story h3{ padding-left:1.3em; }

/* ── 写真をポラロイド風に ───────────────── */
.story figure{
  background:#fff;
  padding:10px 10px 26px;
  border-radius:8px;
  box-shadow:0 16px 34px -18px rgba(74,58,51,.55);
}
.story figure img{ border-radius:4px; }
.story figure::after{
  content:"";
  position:absolute; left:50%; bottom:9px;
  width:34px; height:4px; border-radius:4px;
  transform:translateX(-50%);
  background:var(--pink-deep);
  opacity:.55;
}
.cat--yuri .story figure::after{ background:var(--yuri); }
.cat--kana .story figure::after{ background:var(--kana); }
.story figure{ position:relative; }

/* ── 写真のあいだの文章を、ふきだしカードに ────── */
.breath{
  background:rgba(255,255,255,.66);
  border:2px dotted var(--pink-deep);
  border-radius:26px;
  padding:clamp(22px,3.4vw,30px) clamp(24px,4vw,38px);
  max-width:30em;
}
.breath::before{ display:none; }
.breath::after{
  content:"🐾";
  display:block;
  margin:.9em auto 0;
  font-size:.9rem;
  width:auto; height:auto;
  background:none;
  opacity:.5;
}

/* ── ボタンをぷっくり ───────────────────── */
.more__btn{ border-width:3px; font-weight:500; }
.more__btn:active{ transform:translateY(1px) scale(.98); }
.totop{ border-width:2px; border-color:var(--pink-deep); }

/* ── 写真にホバーでちいさく揺れる ───────────── */
@keyframes wiggle{
  0%,100%{ transform:rotate(var(--rot,0deg)); }
  25%    { transform:rotate(calc(var(--rot,0deg) - 1.6deg)) scale(1.04); }
  75%    { transform:rotate(calc(var(--rot,0deg) + 1.6deg)) scale(1.04); }
}
@media (hover:hover){
  .gallery .shot:hover{ animation:wiggle .5s ease-in-out; }
}

/* ── いっしょにいた日のカードに、しっぽ ───────── */
.day{ position:relative; overflow:visible; }
.day::after{
  content:"";
  position:absolute; right:-6px; bottom:14px;
  width:44px; height:22px;
  border:3px solid var(--pink-deep);
  border-left:0; border-bottom:0;
  border-radius:0 22px 0 0;
  transform:rotate(12deg);
  opacity:.6;
}
.day--yuri::after{ border-color:var(--yuri); }
.day--kana::after{ border-color:var(--kana); }

/* ── 製作クレジット ────────────────────── */
.maker{
  max-width:34rem; margin:1.8rem auto 0; padding-top:1.6rem;
  border-top:1px dashed var(--line);
  display:flex; flex-direction:column; align-items:center;
  gap:1.5rem;
}
.maker__lead{
  font-size:.78rem; letter-spacing:.34em; text-indent:.34em;
  color:var(--ink-faint); margin:0;
}
.maker__marks{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:clamp(1.6rem, 7vw, 3.2rem);
}
.maker__mark{
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  padding:.4rem .2rem; min-height:44px;
  text-decoration:none; color:var(--ink-faint); opacity:.85;
  transition:opacity .3s, transform .3s;
}
.maker__mark:hover,
.maker__mark:focus-visible{ opacity:1; transform:translateY(-2px); }
.maker__mark img{ display:block; height:auto; }
/* 文字の高さが揃うように幅を決めている（実測：文字帯がプチハウス67.5%、コトナエ56.6%） */
.maker__mark .m-puchi{
  width:156px;
  /* 線が太く塗りが濃いので、コトナエと同じ重さに見えるまで薄くする（画像自体は無加工） */
  opacity:.6;
}
.maker__mark .m-koto { width:134px; }
.maker__mark b{ font-weight:400; font-size:.76rem; letter-spacing:.1em; line-height:1.7; }
.maker__mark .sfx{ font-size:.72rem; letter-spacing:.3em; text-indent:.3em; opacity:.7; margin-top:-.25rem; }

@media (prefers-reduced-motion:reduce){
  .gallery .shot:hover{ animation:none; }
  .maker__mark{ transition:none; }
  .maker__mark:hover{ transform:none; }
}

@media (max-width:760px){
  .story__txt::after{ display:none; }
  .spec::before{ left:18px; } .spec::after{ right:18px; }
}