/* 公開版：AkazukiPOP・パステルタイトル・イラストの全体表示。 */
@font-face {
  font-family: "Akazuki POP";
  src: url("assets/fonts/AkazukiPOP.woff") format("woff"),
       url("assets/fonts/AkazukiPOP.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { --font-cute: "Akazuki POP", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif; }
.masthead h1, .hero-copy h2, .menu-heading, .menu-link > span,
.ribbon-heading > span, .page-heading, .quick-links strong,
.reading-paper h3, .diary-entry h3, .music-room h3,
.gallery-grid figcaption > strong, .memory-postcard > span:last-of-type {
  font-family: var(--font-cute);
  font-weight: 400;
  font-synthesis: none;
}
.page-heading small, .menu-link small { font-family: var(--font); }
.masthead { grid-template-columns: 210px minmax(0, 1fr) 120px; height: 180px; }
.masthead-title { margin: 0; padding: 0 18px; }
.masthead-title .title-overline { margin: 0 0 12px; font: 700 10px/1.4 var(--font); letter-spacing: .25em; color: #72619b; text-shadow: 0 1px white; }
.masthead h1 {
  margin: 0;
  font-size: clamp(40px, 5.2vw, 70px);
  line-height: 1.35;
  letter-spacing: .025em;
  white-space: nowrap;
  color: #f5aecf;
  -webkit-text-stroke: 1.3px #80669c;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 white, 0 5px 0 #b4acd6, 0 7px 12px #7968b326;
}
.title-letters > span:nth-child(7n + 1) { color: #f7b2d2; }
.title-letters > span:nth-child(7n + 2) { color: #ffc7a6; }
.title-letters > span:nth-child(7n + 3) { color: #ffe6a5; }
.title-letters > span:nth-child(7n + 4) { color: #b6e7d1; }
.title-letters > span:nth-child(7n + 5) { color: #b7ddfa; }
.title-letters > span:nth-child(7n + 6) { color: #d4bdf5; }
.title-letters > span:nth-child(7n + 7) { color: #f1b7dd; }
.masthead-note { justify-content: center; padding: 0 16px 15px 0; }
.masthead-note .crescent { font-size: 68px; }
.spark-one { left: 5px; top: -5px; font-size: 26px; }
.spark-two { right: 4px; bottom: -8px; font-size: 25px; }
.skyline { left: 210px; opacity: .35; }
.menu-heading { font-size: 21px; }
.menu-link > span { font-size: 20px; }
.menu-link small { font-size: 9px; }
.page-heading { font-size: 28px; flex-wrap: wrap; }
.ribbon-heading { min-height: 35px; height: auto; }
.ribbon-heading > span { font-size: 25px; }
.quick-links strong { font-size: 21px; }
.reading-paper h3 { font-size: 26px; line-height: 1.8; }
.diary-entry h3 { font-size: 26px; line-height: 1.8; }
.music-room h3 { font-size: 28px; line-height: 1.8; }

/* 元画像はトリミングせず、説明は余白のある左側に配置。 */
.hero-frame { height: auto; aspect-ratio: 2/1; background: #f0dcfa; border-color: #a28acb; box-shadow: 0 0 0 3px #ede5fc; }
.hero-art { width: 100%; height: auto; aspect-ratio: 2/1; object-fit: contain; object-position: center; }
.hero-frame::after { display: none; }
.hero-copy { top: 50%; bottom: auto; left: 5%; width: 42%; transform: translateY(-50%); color: #493968; text-shadow: 0 1px 0 #ffffffa8; }
.hero-copy h2 { font-size: clamp(26px, 2.7vw, 36px); line-height: 1.5; letter-spacing: .02em; margin: 0 0 16px; }
.hero-intro { font-size: 13px; line-height: 2; font-weight: 600; letter-spacing: .02em; margin: 0 0 20px; color: #493968; }
.hero-link { font-size: 12px; gap: 16px; color: #493968; border-color: #80679d; text-shadow: none; background: #fff7ffb8; padding: 7px 13px; border-radius: 4px; }
.hero-corner { color: #fff3a7; }
.postcard-picture img { object-position: 72% center; transform: scale(1.15); transform-origin: 75% center; }
.memory-postcard > span:last-of-type { font-size: 23px; line-height: 1.7; }
.gallery-grid { grid-template-columns: minmax(0, 1fr); max-width: 780px; margin-inline: auto; }
.gallery-grid figure { transform: none; }
.gallery-grid figcaption > strong { font-size: 24px; }
.gallery-item img { aspect-ratio: 2/1; object-fit: contain; }
.mascot-image { display: block; flex: 0 0 auto; width: 66px; height: 66px; object-fit: contain; }
.work-status .mascot-image { width: 76px; height: 76px; }
.site-footer small { margin-left: 0; }

@media (max-width: 1150px) {
  .masthead { grid-template-columns: 180px minmax(0, 1fr) 100px; }
  .masthead h1 { font-size: clamp(40px, 5.3vw, 58px); }
  .masthead-note .crescent { font-size: 54px; }
  .skyline { left: 180px; }
  .hero-copy h2 { font-size: 28px; }
  .hero-intro { font-size: 12px; }
  .quick-links strong { font-size: 19px; }
  .hamster-note .mascot-image { width: 52px; height: 52px; }
}
@media (max-width: 900px) {
  .masthead { grid-template-columns: 140px minmax(0, 1fr) 65px; height: 165px; }
  .masthead h1 { font-size: clamp(38px, 5.5vw, 49px); }
  .masthead-note { padding: 0 9px 15px 0; }
  .masthead-note .crescent { font-size: 43px; }
  .masthead-note .tiny-star { right: 19px; }
  .skyline { left: 140px; }
  .menu-link > span { font-size: 18px; }
  .menu-link small { font-size: 8px; }
  .hamster-note .mascot-image { width: 42px; height: 42px; }
  .hero-copy h2 { font-size: 24px; margin-bottom: 10px; }
  .hero-intro { font-size: 11px; line-height: 1.8; margin-bottom: 12px; }
  .hero-link { font-size: 11px; }
}
@media (max-width: 700px) {
  .masthead { grid-template-columns: 56px minmax(0, 1fr) 22px; height: 142px; }
  .welcome-pc { font-size: 8px; }
  .welcome-pc .pc-icon { width: 35px; height: 35px; }
  .welcome-pc small { font-size: 7px; }
  .masthead-title { margin: 0; padding: 0 5px; }
  .masthead-title .title-overline { font-size: 7px; letter-spacing: .15em; margin-bottom: 10px; }
  .masthead h1 { font-size: clamp(25px, 7.4vw, 48px); line-height: 1.5; letter-spacing: 0; -webkit-text-stroke: 1px #80669c; text-shadow: 0 2px 0 white, 0 4px 0 #b4acd6; }
  .masthead-note { padding: 14px 4px 0 0; }
  .masthead-note .crescent { font-size: 23px; }
  .spark-one { font-size: 17px; top: -14px; left: 5px; }
  .spark-two { font-size: 18px; bottom: -18px; right: 9px; }
  .skyline { left: 56px; }
  .menu-heading { font-size: 17px; }
  .menu-link { flex-direction: column; gap: 2px; height: 66px; text-align: center; }
  .menu-link > span { font-size: 12px; }
  .menu-link small { font-size: 7px; margin-top: 2px; }
  .hero-frame { height: auto; aspect-ratio: auto; }
  .hero-art { height: auto; object-fit: contain; }
  .hero-copy { position: relative; inset: auto; width: auto; transform: none; padding: 18px 20px 20px; background: linear-gradient(120deg, #fff4fc, #f1f1ff); }
  .hero-copy h2 { font-size: 29px; margin-bottom: 7px; }
  .hero-intro { font-size: 12px; margin-bottom: 12px; }
  .hero-link { font-size: 12px; }
  .hero-corner { font-size: 21px; }
  .ribbon-heading > span { font-size: 23px; }
  .quick-links strong { font-size: 16px; }
  .quick-links a { min-height: 105px; }
  .page-heading { font-size: 26px; }
  .page-heading small { font-size: 11px; }
  .reading-paper h3 { font-size: 24px; }
  .diary-entry h3, .music-room h3 { font-size: 23px; }
  .work-status .mascot-image { width: 51px; height: 51px; }
}
@media (max-width: 380px) {
  .masthead { grid-template-columns: 45px minmax(0, 1fr) 16px; }
  .masthead h1 { font-size: clamp(24px, 7.4vw, 28px); }
  .masthead-note .crescent { font-size: 19px; }
  .menu-link { gap: 2px; }
  .menu-link svg { width: 17px; height: 17px; }
  .menu-link > span { font-size: 11px; }
  .quick-links strong { font-size: 15px; }
  .page-heading { font-size: 24px; gap: 7px; }
}
@media (forced-colors: active) {
  .masthead h1, .title-letters > span { color: CanvasText; -webkit-text-stroke: 0; text-shadow: none; }
}

/* ウェルカム帯：メッセージと更新日を右から左へ連続スクロール。 */
.welcome-strip {
  display:block;
  overflow:hidden;
  padding:3px 0;
}
.welcome-track { display:flex; width:max-content; }
.welcome-content {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:space-between;
  gap:clamp(36px,8vw,100px);
  min-width:var(--welcome-width,0px);
  padding:0 40px 0 15px;
  white-space:nowrap;
}
/* 懐かしい虹色文字。各文言の左端から右端へ、赤→紫のグラデーション。 */
.welcome-content > span { color:#8b367d; }
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .welcome-content > span {
    background-image:linear-gradient(90deg,
      #e92d48 0%,#e27012 17%,#d3a200 33%,#169944 50%,
      #0089ce 67%,#384cce 83%,#a32bc7 100%);
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
    filter:drop-shadow(0 1px 0 #ffffffe6);
  }
  .welcome-content > span,
  .welcome-content > span * {
    color:transparent;
    -webkit-text-fill-color:transparent;
    text-shadow:none;
  }
}
@media (forced-colors:active) {
  .welcome-content > span,
  .welcome-content > span * {
    background:none;
    color:CanvasText;
    -webkit-text-fill-color:CanvasText;
    filter:none;
  }
}
.welcome-strip.is-scrolling .welcome-track {
  animation:welcome-scroll var(--welcome-duration,28s) linear infinite;
}
@keyframes welcome-scroll {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}
/* きらめきOFF・動きを減らす設定では、全文を静止表示。 */
.effects-off .welcome-track { width:100%; transform:none; }
.effects-off .welcome-copy { display:none; }
.effects-off .welcome-content {
  width:100%; min-width:0; flex-wrap:wrap; white-space:normal;
  gap:4px 20px; padding:0 15px;
}
@media (max-width:700px) {
  .welcome-strip { padding:6px 0; }
  .welcome-content { gap:36px; padding:0 36px 0 10px; }
}
@media (prefers-reduced-motion:reduce) {
  .welcome-strip.is-scrolling .welcome-track { width:100%; animation:none; transform:none; }
  .welcome-copy { display:none; }
  .welcome-content {
    width:100%; min-width:0; flex-wrap:wrap; white-space:normal;
    gap:4px 20px; padding:0 15px;
  }
}