/* 全体の表示サイズ / 制作：みろん
 * 本文・見出し・イラストを一緒に拡大し、PCとスマホで読みやすい密度に揃える。
 */
:root { --header: 96px; }
.header { padding-inline: 5%; }
.brand { width: 190px; }
.header nav { gap: 34px; }
.header nav a { font-size: 13px; }
.hero { padding-inline: 5%; }
.hero-inner { max-width: 1360px; gap: clamp(32px, 4vw, 64px); }
.hero h1 { font-size: clamp(48px, 5.3vw, 80px); line-height: 1.45; }
.hero-copy > .eyebrow { font-size: 13px; }
.hero-name p { font-size: 26px; }
.hero-name > span { font-size: 13px; }
.hero-description { font-size: 16px; line-height: 2.1; margin-block: 24px 32px; }
.hero .button { min-height: 56px; padding: 17px 28px; font-size: 15px; gap: 72px; }
.hero-visual { height: clamp(720px, 60vw, 900px); padding-bottom: 154px; }
.hero-visual .hero-signature { width: 170px; bottom: 0; }
.hero-index { font-size: 10px; }
.hero-bottom { font-size: 10px; }
.dive-link { left: 5%; font-size: 11px; }
.hero-visual .visual-tag { font-size: 10px; }
.section { padding-inline: 5%; }
.section-inner { max-width: 1280px; }
.section-heading .eyebrow { font-size: 13px; }
.section-heading h2 { font-size: clamp(32px, 3.4vw, 46px); }
.heading-note { font-size: 14px; }
.profile-grid { gap: clamp(32px, 4vw, 64px); }
.profile-copy > .eyebrow { font-size: 12px; }
.profile-copy h3 { font-size: 34px; }
.profile-copy h3 span { font-size: 14px; }
.bio { font-size: 16px; line-height: 2.2; }
.facts > div { grid-template-columns: 108px minmax(0, 1fr); gap: 20px; padding-block: 20px; }
.facts dt { font-size: 12px; }
.facts dd { font-size: 16px; }
.profile-soon { font-size: 13px; }
.portrait-controls button { font-size: 12px; min-height: 48px; padding-inline: 28px; }
.keyvisual-work { max-width: 760px; }
.visual-caption .eyebrow { font-size: 12px; }
.visual-caption h3 { font-size: 28px; }
.visual-caption p { font-size: 15px; line-height: 2.1; }
.artwork-open > .artwork-info { padding: 19px 22px; font-size: 12px; }
.artwork-actions > p, .artwork-reset { font-size: 13px; }
.artwork-progress { gap: 8px; margin-top: 20px; }
.artwork-progress > span { height: 3px; }
.design-preview .eyebrow { font-size: 12px; }
.design-preview h3 { font-size: 18px; }
.coming-label { font-size: 12px; }
.design-soon p { font-size: 14px; }
.stream-intro > p { font-size: 26px; }
.stream-intro p span { font-size: 15px; }
.stream-intro img { width: 170px; height: 200px; }
.platform-link { padding-block: 30px; gap: 24px; }
.platform-link strong { font-size: 30px; }
.platform-link small { font-size: 14px; }
.platform-icon { width: 50px; height: 50px; }
.platform-icon svg { width: 36px; height: 36px; }
.movie-placeholder > .eyebrow { font-size: 13px; }
.movie-placeholder strong { font-size: clamp(32px, 4.4vw, 60px); }
.movie-placeholder p { font-size: 15px; }
.movie-mark { font-size: 10px; }
.social-list > a { padding-block: 30px; }
.social-list strong { font-size: 30px; }
.social-number { font-size: 12px; }
.social-caption { font-size: 14px; }
.contact-heading .eyebrow { font-size: 12px; }
.contact-heading h3 { font-size: 24px; }
.contact-heading > p:last-child { font-size: 14px; }
.contact-option { grid-template-columns: 68px minmax(0, 1fr) 22px; padding-block: 20px; }
.contact-kind { font-size: 12px; }
.contact-address { font-size: 16px; }
.footer img { width: 185px; }
.footer p, .back-top { font-size: 11px; }

@media (min-width: 701px) and (max-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; }
  .hero h1 { font-size: 44px; }
  .hero-name p { font-size: 23px; }
  .hero-description { font-size: 14px; }
  .hero-visual { height: 710px; padding-bottom: 134px; }
  .hero-visual .hero-signature { width: 145px; }
  .character-viewer { max-width: 680px; }
  .profile-copy { max-width: 680px; }
  .keyvisual-work { max-width: 760px; }
}

@media (max-width: 700px) {
  :root { --header: 82px; }
  .header { padding-inline: 5%; }
  .brand { width: 155px; }
  .header nav a { font-size: 13px; }
  .hero { padding-inline: 5%; }
  .hero-inner { gap: 16px; }
  .hero h1 { font-size: clamp(39px, 10.5vw, 64px); margin-block: 24px; }
  .hero-copy > .eyebrow { font-size: 12px; }
  .hero-name p { font-size: 23px; }
  .hero-name > span { font-size: 12px; }
  .hero-description { font-size: 15px; line-height: 2; margin-block: 20px 24px; }
  .hero .button { font-size: 15px; min-height: 54px; padding: 16px 24px; }
  .hero-visual {
    width: calc(100% + 10vw);
    height: clamp(500px, calc(150vw + 128px), 880px);
    margin: 20px 0 0 -5vw;
    padding-bottom: 128px;
  }
  .hero-visual .hero-signature { width: 135px; right: 5vw; bottom: 0; }
  .hero-visual .visual-tag { left: 5vw; font-size: 9px; }
  .hero-index { left: 5%; right: 5%; font-size: 9px; }
  .hero-bottom { left: 5%; right: 5%; font-size: 8px; }
  .dive-link { font-size: 10px; }
  .section { padding-inline: 5%; padding-block: 72px; }
  .section-heading h2 { font-size: clamp(28px, 7.5vw, 36px); }
  .section-heading .eyebrow { font-size: 12px; }
  .heading-note { font-size: 13px; }
  .profile-grid { gap: 36px; }
  /* 本文より広くして、尻尾を含めた全身を大きく見せる。 */
  .character-viewer { width: calc(100% + 10vw); max-width: none; margin-inline: -5vw; }
  .portrait-controls { margin-inline: 5vw; }
  .portrait-controls button { font-size: 12px; min-height: 48px; }
  .profile-copy h3 { font-size: 30px; }
  .profile-copy h3 span { font-size: 13px; }
  .profile-copy > .eyebrow { font-size: 11px; }
  .bio { font-size: 15px; }
  .facts > div { grid-template-columns: 90px minmax(0, 1fr); gap: 14px; padding-block: 18px; }
  .facts dt { font-size: 11px; }
  .facts dd { font-size: 15px; }
  .profile-soon { font-size: 12px; }
  .keyvisual-work { max-width: 100%; }
  .visual-caption h3 { font-size: 24px; }
  .visual-caption p { font-size: 14px; }
  .artwork-open > .artwork-info { font-size: 12px; padding: 18px; }
  .artwork-actions > p, .artwork-reset { font-size: 12px; }
  .design-preview .eyebrow { font-size: 11px; }
  .design-preview h3 { font-size: 16px; }
  .coming-label { font-size: 11px; }
  .stream-intro > p { font-size: 21px; }
  .stream-intro p span { font-size: 13px; }
  .stream-intro img { width: 120px; height: 150px; }
  .platform-link strong { font-size: 28px; }
  .platform-link small { font-size: 13px; }
  .movie-placeholder strong { font-size: clamp(26px, 7vw, 38px); }
  .movie-placeholder > .eyebrow { font-size: 12px; }
  .movie-placeholder p { font-size: 14px; }
  .movie-mark { font-size: 9px; }
  .social-list strong { font-size: 28px; }
  .social-number { font-size: 11px; }
  .social-caption { font-size: 13px; }
  .contact-heading h3 { font-size: 22px; }
  .contact-heading > p:last-child { font-size: 13px; }
  .contact-option { grid-template-columns: 54px minmax(0, 1fr) 18px; gap: 12px; padding-block: 18px; }
  .contact-kind { font-size: 11px; }
  .contact-address { font-size: 15px; }
  .footer img { width: 160px; }
  .footer p, .back-top { font-size: 10px; }
}

@media (max-width: 370px) {
  .hero h1 { font-size: 37px; }
  .hero-name p { font-size: 21px; }
  .hero-description { font-size: 14px; }
  .facts > div { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
  .stream-intro > p { font-size: 19px; }
  .stream-intro img { width: 95px; height: 125px; }
  .contact-address { font-size: 14px; }
}