body {
      margin: 2rem;
      background: #fff;
      color: #000;
      font-family: serif;
      }

      .logo {
      width: 100%;
      max-width: 1000px;
      display: block;
      margin: 0 auto;
      }

      .main-header {
      margin-bottom: 5em;
      text-align: center;
      }

      .main{
      max-width:900px;
      margin: 0 auto;
      }

      .main h1{
            text-align: center;
      }

      .sub-title{
      text-align: center;
      margin-bottom: 10em;
      line-height: 5em;
      }

      .scenario {
      white-space: pre-wrap;
      line-height: 1.8;
      overflow-wrap: anywhere;
      }

      .production_date{
      text-align: right;
      padding: 5em 0 1em 0;
      }

      .photo-page {
      max-width: 900px;
      margin: 0 auto;
      }

      .photo-main {
      margin: 2rem 0;
      }

      .photo-main img {
      display: block;
      max-height: 800px;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      }

      .photo-main figcaption {
      font-size: 14px;
      margin: 2rem 0;
      }
 
      .scenario-body[hidden] {
      display: none;
      }

      .scenario {
      white-space: pre-wrap;
      line-height: 1.8;
      }

      .scenario strong {
      font-weight: 700;
      }

      .scenario em {
      font-style: italic;
      }

      .scenario-indent {
      display: block;
      }

      .scenario-indent--1 {
      padding-left: 2em;
      }

      .scenario-indent--2 {
      padding-left: 4em;
      }

      .scenario-indent--3 {
      padding-left: 6em;
      }

      ruby {
      ruby-position: over;
      }

      rt {
      font-size: 0.55em;
      line-height: 1;
      }

      .portal-page {
      max-width: 900px;
      margin: 0 auto;
      padding: 2rem 1rem;
      }

      .portal-header {
      inset: 0;

      min-height: 100svh;
      padding-top: 30svh;

      place-items: center;
      }

      .portal-header h1 {
      font-size: clamp(2.5rem, 10vw, 5rem);
      margin-top: 30svh;
      letter-spacing: 0.08em;
      }

      .portal-choices {
      display: grid;
      gap: 1rem;
      margin-bottom: 5em;
      }

      .portal-card {
      display: block;
      border: 1px solid #000;
      padding: 1.5rem;
      color: inherit;
      text-decoration: none;
      }

      .portal-card:hover {
      text-decoration: none;
      }

      .portal-card__label {
      display: block;
      font-size: 0.9rem;
      letter-spacing: 0.16em;
      }

      .portal-card__title {
      display: block;
      margin-top: 0.5rem;
      font-size: 1.5rem;
      font-weight: bold;
      }

      .portal-card__description {
      display: block;
      margin-top: 1rem;
      line-height: 1.8;
      }

      footer {
      max-width:900px;
      margin: 0 auto;
      text-align: center;  
      }

      .ink {
      color: inherit;
      text-decoration: none;
      cursor: default;
      }

      .ink:hover {
      color: inherit;
      text-decoration: none;
      }

      .ink:focus-visible {
      outline: 1px solid currentColor;
      outline-offset: 0.25em;
      }

      .ink:visited {
      color: #A00000;
      }