/*****************************************************************************
CSS only for vision 202610 renewal
*****************************************************************************/

/* Set
---------------------------------------- */
.Vision {
  color: #1a1a1a;
  font-family: 'Noto Sans JP', sans-serif!important;
  --container-w1280: min(max(1280px, 71.875vw), 100%);
  --padding-w1280: 50px;
  --animation-duration: .3s;

  @media screen and (max-width: 640px) {
    --container-w1280: auto;
    --padding-w1280: 16px;
  }
}
.Vision {
  * {
    box-sizing: border-box;
  }
  picture {
    display: block;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  a {
    transition-duration: var(--animation-duration);

    &:link    { color: currentColor; text-decoration: none; }
    &:visited { color: currentColor; text-decoration: none; }
    &:hover   { color: currentColor; text-decoration: none; }
    &:focus   { color: currentColor; text-decoration: none; }
    &:active  { color: currentColor; text-decoration: none; }
  }
}

/* PageTitle
---------------------------------------- */
.PageTitle {
	background-color: #f0ede8;
  font-size: max(24px, 1.5625vw);
  line-height: 1.7;
}
@media screen and (max-width: 640px) {
  .PageTitle {
    font-size: 20px;
  }
}
.PageTitle__inner {
	width: var(--container-w1280);
	margin-inline: auto;
	padding: .73333em var(--padding-w1280);
}
@media screen and (max-width: 640px) {
  .PageTitle__inner {
    padding-block: 16px;
  }
}

/* Container
---------------------------------------- */
.Container {
  width: var(--container-w1280);
	margin-inline: auto;
	padding-inline: var(--padding-w1280);
}

/* Vision
---------------------------------------- */
.Vision {
  padding-bottom: 150px;
}
@media screen and (max-width: 640px) {
  .Vision {
    padding-bottom: 48px;
  }
}
.Vision__wrapper {
	padding-block: 64px 100px;
  text-align: center;
}
@media screen and (max-width: 640px) {
  .Vision__wrapper {
    padding-block: 48px 32px;
    text-align: left;
  }
}
.Vision__lead {
	font-size: max(32px, 2.08333vw);
	letter-spacing: 1px;
}
@media screen and (max-width: 640px) {
  .Vision__lead {
    font-size: 24px;
  }
}
.Vision__text {
	margin-top: 32px;
	font-size: 18px;
	line-height: 1.6;
}
@media screen and (max-width: 640px) {
  .Vision__text {
    font-size: 16px;
  }
}
.Vision__video {
  max-width: 1920px;
  margin-inline: auto;
}
.Vision__video a {
  display: block;
  transition-property: opacity;
}
.Vision__video a:is(:hover, :focus, :active) {
  opacity: .7;
}