@charset "UTF-8";

/* header
================================================= */
header {
  width: 100%;
  background: linear-gradient(transparent 30%, #ddf9ff 30%, #ddf9ff 90%, transparent 90%);
  overflow: hidden;
}
@media print, screen and (min-width: 600px) {
  header { background: linear-gradient(#ddf9ff 0%, #ddf9ff 35%, transparent 35%); }
  header h1 { width: min(100%, 1668px); margin-inline: auto; }
}
@media print, screen and (min-width: 960px) {
  header { background: linear-gradient(#ddf9ff 0%, #ddf9ff 30%, transparent 30%); }
}


/* main
================================================= */
/* text decoration */
.text-small {
  font-size: 0.85em;
}
.text-large {
  font-size: 1.25em;
}
.text-bold {
  font-weight: bold;
}
.text-red {
  color: #C80028;
}

/* youtube */
.youtube {
  width: 100%;
}
.youtube iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/* area */
.area > * {
  width: min(90%, 1230px);
  margin-inline: auto;
}

/* flex */
.flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.flex.col2 > * {
  width: 100%;
}
@media print, screen and (min-width: 600px) {
  .flex.col2 { justify-content: space-between; }
  .flex.col2 > * { width: 48%; }
}

/* area : intro */
.intro {
  margin-top: 10%;
}
.intro .catch {
  position: relative;
  width: 100%;
  margin-bottom: 5%;
}
.intro .catch::after {
  content: '';
  position: absolute;
  right: -2vw;
  bottom: -8vw;
  display: block;
  width: 25vw;
  aspect-ratio: 10 / 9.23;
  background: url("../image/illust-catch.svg") no-repeat bottom right;
  background-size: contain;
}
.intro .video {
  margin-block: 0.4em;
}
.intro .outline {
  font-size: clamp(1.6rem, 4.6vw, 1.8rem);
  font-weight: bold;
}
.intro .outline p + p {
  margin-top: 1.0em;
}
.intro .outline .clause {
  display: inline-block;
}
.intro .outline .emphasis {
  display: inline;
  margin-inline: 0.2em;
  padding: 0.1em 0.4em;
  background: #3688ff;
  color: #ffffff;
}
.intro .outline .emphasis.brackets {
  padding-inline: 0;
}
@media print, screen and (min-width: 600px) {
  .intro { margin-top: min(7%, 123px); }
  .intro .catch img { width: min(75%, 820px); }
  .intro .catch::after { width: min(19.0vw, 250px); left: min(76%, 850px); right: inherit; bottom: -15.0%; }
  .intro .video { order: 1; margin-top: 0.4em; }
  .intro .outline { font-size: clamp(1.5rem, 2.0vw, 1.8rem); }
}
@media print, screen and (min-width: 960px) {
  .intro .flex.col2 { align-items: center; }
  .intro .outline { font-size: clamp(1.7rem, 1.9vw, 2.1rem); }
}

/* area : cast */
.cast {
  margin-top: 5%;
}
@media print, screen and (min-width: 600px) {
  .cast { margin-top: min(2%, 62px); }
}

/* area : story */
.story {
  padding-top: 1px;
  padding-bottom: 13%;
}
.story.part1 {
  margin-top: 16%;
  background-color: #e1f6ff;
}
.story.part2 {
  margin-top: min(1.3vw, 10px);
  background-color: #ffeeeb;
}
.story.part3 {
  margin-top: min(1.3vw, 10px);
  background-color: #e1f6ff;
}
.story > section {
  margin-top: -15px;
}
.story .stories > * {
  margin-top: 5%;
}
.story .stories > section {
  padding: 4% 5%;
  border: 3px solid #222222;
  color: #222222;
  background-color: #ffffff;
}
.story .stories > section h3 {
  margin-bottom: 6%;
  font-family: "Murecho", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-size: clamp(1.9rem, 5.5vw, 2.7rem);
}
.story .stories > section h3 span.marker {
  display: inline;
  background: linear-gradient(transparent 40%, #ffff4a 40%, #ffff4a 100%);
}
.story .stories > section .name {
  margin-top: calc(4% - 0.4em);
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
}
.story .stories > .illust {
  display: none;
}
@media print, screen and (min-width: 600px) {
  .story { padding-bottom: min(10%, 111px); }
  .story.part1 { margin-top: min(12%, 148px); }
  .story > section { margin-top: -20px; }
  .story .stories > section { padding: 2.75% 3%; }
  .story .stories > section h3 { font-size: clamp(2.0rem, 2.8vw, 2.7rem); }
  .story .stories > section .name { font-size: 1.8rem; }
  .story .stories > .illust { display:  block; align-self: flex-end; }
  .story .stories > .illust img { width: 80%; margin-inline: auto; margin-bottom: 5%; }
}
@media print, screen and (min-width: 960px) {
  .story > section { margin-top: -30px; }
  .story .stories > section { padding: 3% 3.5%; }
  .story .stories > section h3 { font-size: clamp(2.7rem, 2.4vw, 3.3rem); }
}