/* vision.min-480.css */
/* 480px - 767.98px */

.vision__header .section-title {
  font-size: 2.2rem;
}
.vision__header .section-subtitle {
  font-size: 1.05rem;
}

.vision-slide__text h3 {
  font-size: 2.2rem;
}
.vision-slide__text h4 {
  font-size: 1.35rem;
}

/* requested: smaller paragraph for 480 */
.vision .japanese-text.text-white-20 {
  font-size: 0.75rem !important;
}

/* 767px以下: 英語見出し/日本語見出しのフォントサイズを指定 */
.vision-slide__text h3.english-text {
  font-size: 1.5rem;
  margin-top: 16px;
  margin-bottom: 0;
}
.vision-slide__text h4.japanese-text {
  font-size: 1rem;
}

/* shrink images by ~100px and center */
.vision-slide__visual {
  justify-content: center;
  align-items: center;
}
.vision-slide__image {
  width: auto;
  max-width: calc(100% - 100px);
  height: auto;
  margin: 0 auto;
  display: block;
}

/* avoid overlap with global header */
.vision__header .vision__container {
  margin-top: 40px;
}

/* section title size for this range */
.vision__header .section-title {
  font-size: 0.9rem !important;
}

/* section subtitle size and margin for this range */
.vision__header .section-subtitle {
  font-size: 0.8rem !important;
  margin-top: 0.2rem;
  color: rgb(222, 222, 222);
}

/* unify slide content height */
.vision-slide__content {
  height: 50vh;
  padding-left: 8px;
  padding-right: 8px;
}
.vision-slide__content.glass-panel {
  height: 50vh;
  max-height: none;
  padding-left: 16px;
  padding-right: 16px;
}

/* 767px以下: 要素順序を h3 → h4 → picture → p に再配置 */
.vision-slide__top {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "h3"
    "h4"
    "picture"
    "p";
  row-gap: 0.75rem;
}
.vision-slide__text {
  display: contents;
}
.vision-slide__visual {
  display: contents;
}
.vision-slide__text h3.english-text {
  grid-area: h3;
}
.vision-slide__text h4.japanese-text {
  grid-area: h4;
}
.vision-slide__text p {
  grid-area: p;
}
.vision-slide__visual picture {
  grid-area: picture;
  justify-self: center;
  margin-top: -16px;
}

.vision-progress {
  width: 90%;
}