@charset "utf-8";

/* ======================================================
 * JS
====================================================== */
.js-vision-fade__object {
  opacity: 0;
  will-change: transform, opacity;
}

/* ======================================================
 * PC
====================================================== */
@media print, screen and (min-width:768px) {
  /* ------------------------------------------------------
   * Override
  ------------------------------------------------------ */
  .Main__head {
    margin-top: 6.3rem;
  }
  .Main__content {
    padding: 11.7rem 30px 9.6rem;
  }

  /* ------------------------------------------------------
   * Parts
  ------------------------------------------------------ */
  /* ---- vision-heading1 ---- */
  .vision-heading1 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    margin-top: 8.8rem;
    margin-left: calc(50% - 50vw);
    padding: 0;
  }
  .vision-heading1 + * {
    margin-top: 3.3rem;
  }
  .vision-heading1__inner {
    width: 100%;
    max-width: calc(1256px + 30px * 2);
    margin: 0 auto;
    padding: 0 30px;
  }
  .vision-heading1__title {
    margin: 0;
    font-weight: 500;
    font-size: 4.8rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
  }
  .vision-heading1__subtitle {
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  /* ---- vision-heading2 ---- */
  .vision-heading2 {
    margin-top: 11rem;
    padding: 0;
  }
  body .vision-heading2 + * {
    margin-top: 2.6rem;
  }
  .vision-heading2__title {
    margin: 0;
    font-weight: 500;
    font-size: 3.6rem;
    line-height: 1.8;
    letter-spacing: 0.08em;
  }

  /* ---- vision-heading2-v2 ---- */
  .vision-heading2-v2 {
    margin-top: 11rem;
    padding: 0;
  }
  body .vision-heading2-v2 + * {
    margin-top: 2.6rem;
  }
  .vision-heading2-v2__title {
    margin: 0;
    font-weight: 500;
    font-size: 3.2rem;
    line-height: 1.8;
    letter-spacing: 0.08em;
  }

  /* ---- vision-text ---- */
  .vision-text {
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0.08em;
  }


    /* ----- vision-link-list ----- */
  .vision-link-list {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    gap: 1.6rem 32px;
    margin-top: 2.0rem;
  }
  .vision-link-list > li {
    border-bottom: 1px solid #C9CCD3;
  }
  .vision-link-list > li > [class*="__type"] {
    position: relative;
    display: block;
    padding-right: calc(18px + 34px);
    padding-block: 8px;
    color: #222222;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: -0.02em;
    transition: color 0.5s ease-out 0s;
  }
  .vision-link-list > li > [class*="__type"]::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 34px;
    height: 22px;
    border-radius: 8px;
    background: #0E0D6A;
    transform: translateY(-50%);
    transition: background 0.5s ease-out 0s;
  }
  .vision-link-list > li > [class*="__type"]::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 12px;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
  }
  .vision-link-list > li .vision-link-list__type::after {
    background: url(/extlib/common/img_new/cmn_ic02_05.svg) no-repeat center / contain;
  }
  .vision-link-list > li .vision-link-list__type--blank::after {
    background: url(/extlib/common/img_new/cmn_ic02_06.svg) no-repeat center / contain;
  }
  .vision-link-list > li > [class*="__type"]:hover {
    color: var(--color_text_sub);
  }
  .vision-link-list > li> [class*="__type"]:hover::before {
    background-color: var(--color_link_hover);
  }


  /* ---- vision-layout-v1 ---- */
  .vision-layout-v1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 40px;
  }
  .vision-layout-v1__head {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
  }
  .vision-layout-v1__body {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  .vision-layout-v1__foot {
    grid-column: 1;
    grid-row: 2;
    align-self: end
  }
  .vision-layout-v1__body > *:first-child,
  .vision-layout-v1__foot > *:first-child {
    margin-top: 0;
  }
  .vision-layout-v1__image {
    overflow: hidden;
    border-radius: 8px;
  }

  /* ---- vision-layout-v2 ---- */
  .vision-layout-v2 {
    display: flex;
    column-gap: 40px;
    justify-content: space-between;
  }
  .vision-layout-v2__body {
    flex: 1 1;
    max-width: 932px;
    width: 100%;
  }
  .vision-layout-v2__foot {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .vision-layout-v2__foot > *:first-child{
    margin-top: 0;
  }

  /* ---- vision-chronology ---- */
  .vision-chronology {
    display: grid;
    grid-template-columns: min(284px, calc((284 / 1256)*100vw)) 1fr min(284px, calc((284 / 1256)*100vw));
    gap: 8px;
    margin-top: 54px;
  }

  /* ---- vision-chronology-box ---- */
  .vision-chronology-box ,
  .vision-chronology-box--lightblue ,
  .vision-chronology-box--navyblue {
    position: relative;
    border-radius: 8px;
    border: 1px solid #222222;
    padding: 26px 32px;
    background: rgba(255, 255, 255, .7);
  }
  .vision-chronology-box--lightblue {
    border-color:#1EACE5;
  }
  .vision-chronology-box--navyblue {
    border-color:#0E0D6A;
  }
  .vision-chronology-box--lightblue::after ,
  .vision-chronology-box::after {
    position: absolute;
    top: 48px;
    right: -9px;
    display: block;
    width: 9px;
    height: 1px;
    background: #000000;
    content: '';
  }
  .vision-chronology-box__head {
    position: absolute;
    top: 0;
    left: 17px;
    transform: translateY(-50%);
  }
  .vision-chronology-box__title {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    padding: 6px 16px;
    background: #222;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    color: #fff;
  }
  .vision-chronology-box--lightblue .vision-chronology-box__title {
    background-color:#1EACE5;
  }
  .vision-chronology-box--lightblue .vision-chronology-layout__title {
    color:#1EACE5;
  }
  .vision-chronology-box--navyblue .vision-chronology-box__title {
    background-color:#0E0D6A;
  }
  .vision-chronology-box--navyblue .vision-chronology-layout__title {
    color:#0E0D6A;
  }


  /* ---- vision-chronology-layout ---- */
  .vision-chronology-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 64px 0;
  }
  .vision-chronology-layout__head {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
  }
  .vision-chronology-layout__body {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  .vision-chronology-layout__foot {
    grid-column: 1;
    grid-row: 2;
    align-self: end
  }
  .vision-chronology-layout__title {
    font-weight: 700;
    font-size: 3.0rem;
    line-height: 1.2;
    color: #222222;
  }
  .vision-chronology-layout__lead {
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
  }
  .vision-chronology-layout__text {
    margin-top: 0.4rem;
    font-size: 1.3rem;
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  .vision-chronology-layout__image {
    width: 245px;
    margin: -15px -20px -15px -25px;
  }


  /* ---- vision-card ---- */
  .vision-card-wrap {
    display: flex;
    flex-flow: row wrap;
    gap: 20px 16px;
    width: 100%;
    margin: 4.8rem 0 0;
  }
  .vision-card-wrap > * {
    width: calc(((100% - 16px) / 2));
  }
  .vision-card {
    display: flex;
  }
  .vision-card__type {
    overflow: hidden;
    display: flex;
    column-gap: 32px;
    width: 100%;
    border-radius: .8rem;
    background: rgba(255, 255, 255, 0.8);
    padding: 4.0rem 32px;
  }
  .vision-card__type:link,
  .vision-card__type:visited {
    color: #222222;
  }
  .vision-card__type:hover {
    background: #dde0e7;
  }
  .vision-card__head {
    width: 185px;
    transition: opacity  0.5s ease-out 0s;
  }
  .vision-card__body {
    flex: 1 1;
    position: relative;
    align-self: flex-start;
    transition: opacity  0.5s ease-out 0s;
    padding-bottom: 38px;
  }
  .vision-card__type .vision-card__body::before {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 34px;
    height: 22px;
    background: #222;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: background 0.5s ease-out 0s;
  }
  .vision-card__type .vision-card__body::before {
    mask-image: url(/extlib/common/img_new/cmn_ic01_01.svg);
  }
  .vision-card__image {
    overflow: hidden;
    border-radius: 4px;
    text-align: center;
  }
  .vision-card__title {
    position: relative;
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
  }
  .vision-card__title-caption {
    position: relative;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
  }
  .vision-card__description {
    margin-top: 1.4rem;
    letter-spacing: 0.08em;
  }


  /* ---- vision-sustainability-box ---- */
  .vision-sustainability-box {
    position: relative;
    overflow: hidden;
    margin-top: 16px;
    border-radius: 8px;
    padding: 8.2rem 80px 9.6rem;
    background: rgba(255, 255, 255, .7);
  }
  .vision-sustainability-box::before {
    position: absolute;
    bottom: max(-260px, calc((-260 / 1316)*100vw));
    right: max(-544px, calc((-544 / 1316)*100vw));
    display: block;
    width: min(1206px, calc((1206 / 1316)*100vw));
    height: min(794px, calc((794 / 1316)*100vw));
    border-radius: min(1206px, calc((1206 / 1316)*100vw));
    opacity: 0.5;
    background: linear-gradient(283deg, #C4D8ED 19.38%, #C4EBEB 87.31%);
    filter: blur(min(77px, calc((77 / 1316)*100vw)));
    content: '';
    z-index: 1;
  }
  .vision-sustainability-box__image {
    position: absolute;
    right: 68px;
    bottom: 9.0rem;
    z-index: 2;
  }
  .vision-sustainability-box__body {
    position: relative;
    width: 540px;
    margin-right: auto;
    z-index: 2;
  }

  /* ---- vision-sustainability-heading1 ---- */
  body .vision-sustainability-heading1 + * {
    margin-top: 1.4rem;
  }
  .vision-sustainability-heading1__title {
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1.8;
    letter-spacing: 0.08em;
  }

  /* ---- vision-sustainability-heading2 ---- */
  .vision-sustainability-heading2{
    margin-top: 3.1rem;
  }
  body .vision-sustainability-heading2 + * {
    margin-top: 0.8rem;
  }
  .vision-sustainability-heading2__title {
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 1.8;
    letter-spacing: 0.08em;
  }

  /* ---- vision-sustainability-materiality ---- */
  .vision-sustainability-materiality {
    margin-right: 109px;
  }

  /* ---- vision-order-list ---- */
  .vision-order-list {
    margin-top: 2.3rem;
  }
  .vision-order-list > li {
    position: relative;
    padding-left: calc(2.0rem + 18px);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.68;
    letter-spacing: 0.08em;
  }
  .vision-order-list__mark{
    position: absolute;
    top: calc(1.4rem * 1.68 / 2 - 9px);
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #222;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.08em;
  }

  /* ---- vision-sustainability-figure ---- */
  .vision-sustainability-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .vision-sustainability-figure__frame {
    display: inline-block;
  }
  .vision-sustainability-figure__caption {
    margin: 3.2rem 0 0;
    text-align: center;
    font-size: 1.4rem;
    color: #999;
    line-height: 1.7;
    letter-spacing: 0.08em;
  }

  /* ---- vision-horizontal-rule ---- */
  .vision-horizontal-rule {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-block: 12.8rem;
    border: 0;
    border-top: 1px solid rgba(153, 153, 153, 0.30);
  }

  /* ---- vision-lnav ---- */
  .vision-lnav {
    background: #fff;
  }
  .vision-lnav__inner {
    width: 100%;
    max-width: calc(1256px + 30px * 2);
    margin: 0 auto;
    padding: 8.0rem 30px;
  }
  .vision-lnav-link-list {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    gap: 0 40px;
    margin: 0;
  }
  .vision-lnav-link-list > li {
    position: relative;
    top: 0;
    width: calc((100% - (40px*2))/3);
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, #F1F2F6 78%, rgba(241, 242, 246, 0.00) 100%) 1;
    opacity: 1;
    transition: top  0.5s ease-out 0s, opacity  0.5s ease-out 0s;
  }
  .vision-lnav-link-list > li > [class*="__type"] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-block: 14px 13px;
    padding-inline: 0 45px;
    color: #222222;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.8;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.08em;
    text-align: left;
    transition: color 0.5s ease-out 0s;
  }
  .vision-lnav-link-list > li > [class*="__type"]::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 34px;
    height: 22px;
    background: #626262;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: background 0.5s ease-out 0s;
    transform: translateY(-50%);
  }
  .vision-lnav-link-list__type::after {
    mask-image: url(/extlib/common/img_new/cmn_ic01_01.svg);
  }
  .vision-lnav-link-list__type--blank::after {
    mask-image: url(/extlib/common/img_new/cmn_ic01_02.svg);
  }
  .vision-lnav-link-list > li > [class*="__type"]:hover {
    color: #1D9BFF;
  }
  .vision-lnav-link-list > li > [class*="__type"]:hover::after {
    background: #1D9BFF;
  }

    /* ---- vision-card-v2 ---- */
  .vision-card-v2-wrap {
    display: flex;
    flex-flow: row wrap;
    column-gap: 40px;
    width: 100%;
    margin: 6.4rem 0 0;
  }
  .vision-card-v2-wrap > * {
    width: calc(((100% - 40px) / 2));
    height: 400px;
  }
  .vision-card-v2--philosophy,
  .vision-card-v2--president {
    display: flex;
    overflow: hidden;
    border-radius: .8rem;
  }
  .vision-card-v2--philosophy {
    background: url(/extlib/vision/img_new/index_bg01.jpg) 0 0 no-repeat;
  }
  .vision-card-v2--president {
    background: url(/extlib/vision/img_new/index_bg02.jpg) 0 0 no-repeat;
    border: 6px solid #fff;
  }
  .vision-card-v2__type {
    position: relative;
    display: flex;
    width: 100%;
    padding: 2.4rem 46px 5.6rem 24px;
    column-gap: 40px;
  }
  .vision-card-v2--president .vision-card-v2__type {
    padding: 1.8rem 19px 5rem;
  }
  .vision-card-v2__type::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 34px;
    height: 22px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }
  .vision-card-v2__type::before {
    mask-image: url(/extlib/common/img_new/cmn_ic01_03.svg);
    background: #fff;
    bottom: 1.3em;
    right: 1.3em;
  }
  .vision-card-v2--president .vision-card-v2__type::before {
    mask-image: url(/extlib/common/img_new/cmn_ic01_01.svg);
    background: #626262;
    bottom: 0.9em;
    right: 0.9em;
  }
  .vision-card-v2__type:hover > .vision-card-v2__head .vision-card-v2__image > img {
    transform: scale(1.1);
  }
  .vision-card-v2__head {
    width: min(((260 / 1440) * 100vw), 260px);
  }
  .vision-card-v2__image {
    overflow: hidden;
    border-radius: 6px;
  }
  .vision-card-v2__image > img {
    width: 100%;
    transition: transform var(--transition_default-set);
  }
  .vision-card-v2__body {
    display: flex;
    flex-direction: column;
    row-gap: .9rem;
    flex: 1;
    justify-content: flex-end;
  }
  .vision-card-v2__title {
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
  }
  .vision-card-v2__description {
    font-size: 1.4rem;
    letter-spacing: 0.08em;
  }
  .vision-card-v2--philosophy .vision-card-v2__title,
  .vision-card-v2--philosophy .vision-card-v2__description {
    color: #fff;
  }
  .vision-card-v2--president .vision-card-v2__title,
  .vision-card-v2--president .vision-card-v2__description {
    color: #222;
  }


}
/* ======================================================
 * PC Media Queries
====================================================== */
@media screen and (min-width: 1921px) {}
@media screen and (min-width: 768px) and (max-width: 1920px) {}
@media screen and (min-width: 768px) and (max-width: 1440px) {}
@media screen and (min-width: 768px) and (max-width: 1372px) {}
@media screen and (min-width: 768px) and (max-width: 1260px) {
  .vision-sustainability-box__body{
    margin-right: 0;
    width: 100%;
  }
  .vision-sustainability-box__image {
    width: 100%;
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 5.6rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .vision-card-wrap > * {
    width: 100%;
  }
  .vision-chronology {
    display: flex;
    flex-direction: column;
    gap: 1.8rem 0;
  }
  .vision-chronology-box--lightblue::after ,
  .vision-chronology-box::after {
    position: absolute;
    top: auto;
    bottom: -19px;
    left: 79px;
    display: block;
    width: 1px;
    height: 19px;
    background: #000000;
    content: '';
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {}
@media screen and (min-width: 768px) and (max-width: 980px) {
  .vision-card-v2__type {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) and (max-width: 812px) {}

/* ======================================================
 * SP
====================================================== */
@media only screen and (max-width:767.98px) {
  /* ------------------------------------------------------
   * Override
  ------------------------------------------------------ */
  .Main__head {
    margin-top: 5.7rem;
  }
  .Main__content {
    padding-top: 6.8rem;
    padding-bottom: 8.0rem;
  }
  /* ------------------------------------------------------
   * Parts
  ------------------------------------------------------ */

  /* ---- vision-heading1 ---- */
  .vision-heading1 {
    width: 100vw;
    margin-top: 8.8rem;
    margin-inline: -32px;
    padding: 0;
  }
  body .vision-heading1 + *{
    margin-top: 1.7rem;
  }
  .Main__head .vision-heading1 {
    margin-inline: 0;
  }
  .vision-heading1__inner {
    width: 100%;
    padding: 0 32px;
  }
  .vision-heading1__title {
    font-weight: 500;
    font-size: 3.6rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
  }
  .vision-heading1__subtitle {
    font-weight: 600;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  /* ---- vision-heading2 ---- */
  .vision-heading2 {
    margin-top: 8.0rem;
    padding: 0;
  }
  body .vision-heading2 + * {
    margin-top: 1.8rem;
  }
  .vision-heading2__title {
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 1.4;
    letter-spacing: 0.08em;
  }

  /* ---- vision-heading2-v2 ---- */
  .vision-heading2-v2 {
    margin-top: 7.4rem;
    padding: 0;
  }
  body .vision-heading2-v2 + * {
    margin-top: 1.8rem;
  }
  .vision-heading2-v2__title {
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 1.4;
    letter-spacing: 0.08em;
  }

  /* ---- vision-heading2 ---- */
  .vision-text {
    font-size: 1.4rem;
    line-height: 1.7;
    letter-spacing: 0.08em;
  }

  /* ---- vision-layout-v1 ---- */
  .vision-layout-v1 {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .vision-layout-v1__head {
    order: 2;
    margin-top: 2.5rem;
  }
  .vision-layout-v1__body {
    order: 1;
  }
  .vision-layout-v1__foot {
    order: 3;
    margin-top: 3rem;
  }
  .vision-layout-v1__body > *:first-child ,
  .vision-layout-v1__foot > *:first-child {
    margin-top: 0;
  }
  .vision-layout-v1__image {
    overflow: hidden;
    border-radius: 8px;
  }

  /* ---- vision-layout-v2 ---- */
  .vision-layout-v2 {
    margin-top: 1.8rem;
  }
  .vision-layout-v2__foot {
    margin-top: 3rem;
  }
  .vision-layout-v2__foot > *:first-child{
    margin-top: 0;
  }



  /* ----- vision-link-list ----- */
  .vision-link-list {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    gap: .5rem 16px;
    justify-content: flex-end;
    margin-top: 3.2rem;
  }
  .vision-link-list > li {
    border-bottom: 1px solid #C9CCD3;
  }
  .vision-link-list > li > [class*="__type"] {
    position: relative;
    display: block;
    padding-block: 8px;
    padding-right: calc(18px + 34px);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 180%;
    letter-spacing: -0.02em;
    color: #222222;
  }
  .vision-link-list > li > [class*="__type"]::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 34px;
    height: 22px;
    border-radius: 8px;
    background: #0E0D6A;
    transform: translateY(-50%);
  }
  .vision-link-list > li > [class*="__type"]::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 12px;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
  }
  .vision-link-list > li .vision-link-list__type::after {
    background: url(/extlib/common/img_new/cmn_ic02_05.svg) no-repeat center / contain;
  }
  .vision-link-list > li .vision-link-list__type--blank::after {
    background: url(/extlib/common/img_new/cmn_ic02_06.svg) no-repeat center / contain;
  }


  /* ---- vision-chronology ---- */
  .vision-chronology {
    display: flex;
    flex-direction: column;
    gap: 1.8rem 0;
    margin-top: 3.3rem;
  }

  /* ---- vision-chronology-box ---- */
  .vision-chronology-box ,
  .vision-chronology-box--lightblue ,
  .vision-chronology-box--navyblue {
    position: relative;
    border-radius: 8px;
    border: 1px solid #222222;
    padding: 18px 24px;
    background: rgba(255, 255, 255, .7);
  }
  .vision-chronology-box--lightblue {
    border-color:#1EACE5;
  }
  .vision-chronology-box--navyblue {
    border-color:#0E0D6A;
  }
  .vision-chronology-box--lightblue::after ,
  .vision-chronology-box::after {
    position: absolute;
    bottom: -19px;
    left: 79px;
    display: block;
    width: 1px;
    height: 19px;
    background: #000000;
    content: '';
  }
  .vision-chronology-box__head {
    position: absolute;
    top: 0;
    left: 10px;
    transform: translateY(-50%);
  }
  .vision-chronology-box__title {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    padding: 4px 16px;
    background: #222;
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0.08em;
    color: #fff;
  }
  .vision-chronology-box--lightblue .vision-chronology-box__title {
    background-color:#1EACE5;
  }
  .vision-chronology-box--lightblue .vision-chronology-layout__title {
    color:#1EACE5;
  }
  .vision-chronology-box--navyblue .vision-chronology-box__title {
    background-color:#0E0D6A;
  }
  .vision-chronology-box--navyblue .vision-chronology-layout__title {
    color:#0E0D6A;
  }


  /* ---- vision-chronology-layout ---- */
  .vision-chronology-layout {
    display: flex;
    flex-direction: column;
  }
  .vision-chronology-layout__head {
    order: 3;
    margin-top: 1.4rem;
  }
  .vision-chronology-layout__body {
    order: 1;
  }
  .vision-chronology-layout__foot {
    order: 2;
    margin-top: 2.4rem;
  }
  .vision-chronology-layout__title {
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1.2;
    color: #222222;
  }
  .vision-chronology-layout__lead {
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
  }
  .vision-chronology-layout__text {
    margin-top: 0.4rem;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
  }
  .vision-chronology-layout__image {
    text-align: center;
    margin: 0 -16px -10px;
  }


  /* ---- vision-card ---- */
  .vision-card-wrap {
    display: flex;
    flex-flow: row wrap;
    gap: 8px 0;
    margin: 4.8rem -16px 0;
  }
  .vision-card-wrap > * {
    width: 100%;
  }
  .vision-card {
    display: flex;
  }
  .vision-card__type {
    overflow: hidden;
    display: block;
    width: 100%;
    border-radius: .8rem;
    background: rgba(255, 255, 255, 0.8);
    padding: 1.6rem 16px 3.2rem;
  }
  .vision-card__type:link,
  .vision-card__type:visited {
    color: #222222;
  }
  .vision-card__head {
    width: 100%;
    transition: opacity  0.5s ease-out 0s;
  }
  .vision-card__head + .vision-card__body {
    margin-top: 23px;
  }
  .vision-card__body {
    flex: 1 1;
    position: relative;
    align-self: flex-start;
    transition: opacity  0.5s ease-out 0s;
    padding: 0 16px 38px;
  }
  .vision-card__type .vision-card__body::before {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 16px;
    width: 34px;
    height: 22px;
    background: #222;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: background 0.5s ease-out 0s;
  }
  .vision-card__type .vision-card__body::before {
    mask-image: url(/extlib/common/img_new/cmn_ic01_01.svg);
  }
  .vision-card__image {
    overflow: hidden;
    border-radius: 4px;
    text-align: center;
  }
  .vision-card__title {
    position: relative;
    font-weight: 600;
    font-size: 2.0rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
  }
  .vision-card__title-caption {
    position: relative;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
  }
  .vision-card__description {
    margin-top: 0.8rem;
    letter-spacing: 0.08em;
  }


    /* ---- vision-sustainability-box ---- */
  .vision-sustainability-box {
    position: relative;
    overflow: hidden;
    margin: 8px -16px 0;
    border-radius: 8px;
    padding: 3.8rem 32px 4.8rem;
    background: rgba(255, 255, 255, .7);
  }
  .vision-sustainability-box::before {
    position: absolute;
    bottom: calc((-324 / 390)*100vw);
    right: calc((-243 / 390)*100vw);
    display: block;
    width: calc((726 / 390)*100vw);
    height: calc((478 / 390)*100vw);
    border-radius: calc((726 / 390)*100vw);
    background: linear-gradient(283deg, #C4D8ED 19.38%, #C4EBEB 87.31%);
    filter: blur(calc((77 / 390)*100vw));
    opacity: 0.5;
    z-index: 1;
    content: '';
  }
  .vision-sustainability-box__image ,
  .vision-sustainability-box__body {
    position: relative;
    z-index: 2;
  }
  .vision-sustainability-box__image {
    margin-top: 5.6rem;
    padding-inline: 8px;
  }

  /* ---- vision-sustainability-heading1 ---- */
  body .vision-sustainability-heading1 + * {
    margin-top: .7rem;
  }
  .vision-sustainability-heading1__title {
    font-size: 2.0rem;
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.08em;
  }

  /* ---- vision-sustainability-heading2 ---- */
  .vision-sustainability-heading2{
    margin-top: 3.3rem;
  }
  body .vision-sustainability-heading2 + * {
    margin-top: 0.8rem;
  }
  .vision-sustainability-heading2__title {
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 1.8;
    letter-spacing: 0.08em;
  }

  /* ---- vision-order-list ---- */
  .vision-order-list {
    margin-top: 1.5rem;
  }
  .vision-order-list > li {
    position: relative;
    padding-left: calc(.8rem + 15px);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.08em;
  }
  .vision-order-list__mark {
    position: absolute;
    top: calc(1.3rem * 1.6 / 2 - 9px);
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #222;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.08em;
  }

  /* ---- vision-sustainability-figure ---- */
  .vision-sustainability-figure__frame {
    display: inline-block;
  }
  .vision-sustainability-figure__caption {
    margin: 2.0rem 0 0;
    text-align: center;
    font-size: 1.2rem;
    color: #999;
    line-height: 1.7;
    letter-spacing: 0.08em;
  }

  /* ---- vision-horizontal-rule ---- */
  .vision-horizontal-rule {
    margin: 8.0rem -32px;
    border: 0;
    border-top: 1px solid rgba(153, 153, 153, 0.30);
  }

  /* ---- vision-lnav ---- */
  .vision-lnav {
    background: #fff;
  }
  .vision-lnav__inner {
    width: 100%;
    padding: 6.4rem 32px;
  }
  .vision-lnav-link-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0 0;
  }
  .vision-lnav-link-list > li {
    position: relative;
    top: 0;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, #F1F2F6 78%, rgba(241, 242, 246, 0.00) 100%) 1;
    opacity: 1;
    transition: top var(--transition_default-set), opacity var(--transition_default-set);
  }
  .vision-lnav-link-list > li > [class*="__type"] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-block: 14px 13px;
    padding-inline: 0 45px;
    color: var(--color_text_main);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.8;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.08em;
    text-align: left;
    transition: color var(--transition_default-set);
  }
  .vision-lnav-link-list > li > [class*="__type"]::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 34px;
    height: 22px;
    transform: translateY(-50%);
    transition: filter var(--transition_default-set);
  }
  .vision-lnav-link-list__type::after {
    background: url(/extlib/common/img_new/cmn_ic01_01.svg) no-repeat center /contain;
  }
  .vision-lnav-link-list__type--blank::after {
    background: url(/extlib/common/img_new/cmn_ic01_02.svg) no-repeat center /contain;
  }

  /* ---- vision-card-v2 ---- */
  .vision-card-v2-wrap {
    display: flex;
    flex-flow: row wrap;
    flex-direction: column;
    row-gap: 16px;
    width: 100%;
    margin: 6.4rem 0 0;
  }
  .vision-card-v2--philosophy,
  .vision-card-v2--president {
    display: flex;
    overflow: hidden;
    border-radius: .8rem;
  }
  .vision-card-v2--philosophy {
    background: #080808 url(/extlib/vision/img_new/index_bg01_sp.jpg) 0 0 / 100% auto no-repeat;
  }
  .vision-card-v2--president {
    background: #fff url(/extlib/vision/img_new/index_bg02_sp.jpg) bottom / 100% auto no-repeat;
    border: 3px solid #fff;
  }
  .vision-card-v2__type {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 2.4rem 24px 5.6rem 24px;
    row-gap: 17px;
  }
  .vision-card-v2--president .vision-card-v2__type {
    padding: 2.1rem 20px 5.4rem;
  }
  .vision-card-v2__type::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 34px;
    height: 22px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: background var(--transition_default-set);
  }
  .vision-card-v2__type::before {
    mask-image: url(/extlib/common/img_new/cmn_ic01_03.svg);
    background: #fff;
    bottom: 1.7em;
    right: 1.7em;
  }
  .vision-card-v2--president .vision-card-v2__type::before {
    mask-image: url(/extlib/common/img_new/cmn_ic01_01.svg);
    background: #626262;
    bottom: 1.5em;
    right: 1.5em;
  }
  .vision-card-v2__head {
    margin-left: auto;
    width: 34.9vw;
  }
  .vision-card-v2__image {
    overflow: hidden;
    border-radius: 6px;
  }
  .vision-card-v2__image > img {
    width: 100%;
    transform: scale(1.03) translate(3.8px, 3px);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1) 0s;
  }
  .vision-card-v2__body {
    display: flex;
    flex-direction: column;
    row-gap: .9rem;
    flex: 1;
    justify-content: flex-end;
  }
  .vision-card-v2--president .vision-card-v2__body {
    margin-top: 1.6em;
  }
  .vision-card-v2__title {
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.7;
    letter-spacing: 1.28px;
  }
  .vision-card-v2__description {
    font-size: 1.3rem;
    line-height: 1.7;
    letter-spacing: 1.04px;
  }
  .vision-card-v2--philosophy .vision-card-v2__title,
  .vision-card-v2--philosophy .vision-card-v2__description {
    color: #fff;
  }
  .vision-card-v2--president .vision-card-v2__title,
  .vision-card-v2--president .vision-card-v2__description {
    color: #222;
  }


}
/* ======================================================
 * SP Media Queries
====================================================== */
@media only screen and (max-width: 767px) {}
@media only screen and (max-width: 667px) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 580px) {}
@media only screen and (max-width: 480px) {}
@media only screen and (max-width: 414px) {}
@media only screen and (max-width: 390px) {}
@media only screen and (max-width: 375px) {}
@media only screen and (max-width: 360px) {}
@media only screen and (max-width: 320px) {}