﻿@charset "utf-8";
/*--------------------------------------------------------------------------------
  .list
--------------------------------------------------------------------------------*/
.list {
  display: flex;
  flex-direction: column;
  counter-reset: educ-number 0;
  margin-top: var(--space-l);
}
.list_ttl {
  counter-increment: educ-number 1;
  font-size: var(--fs-2m);
  font-weight: bold;
  position: relative;
  padding-left: 2rem;
}
.list_ttl:not(:first-of-type) {
  margin-top: var(--space-l);
}
.list_ttl:before {
  content: "" counter(educ-number) ". ";
  position: absolute;
  left: 0;
  top: 0;
}
.list_txt {
  padding-left: 2rem;
  margin-top: 0.5rem;
}
.sign {
  text-align: right;
  margin-top: var(--space-l);
}

/*--------------------------------------------------------------------------------
  .list2
--------------------------------------------------------------------------------*/
.list2 {
  margin-top: var(--space-s);
  border-left: 1px solid var(--border-color-light);
}
.list2_item:not(:last-of-type) {
  padding-bottom: var(--space-l);
}
.list2_item {
  display: grid;
  column-gap: var(--space-m);
  position: relative;
}
.list2_no { grid-area: list2-no; }
.list2_ttl { grid-area: list2-ttl; }
.list2_content { grid-area: list2-content; }
.list2_item:before {
  content: "";
  grid-area: list2-space;
  border-left: 1px solid var(--color-primary);
  margin-left: -1px;
  z-index: 1;
}
@media not (max-width: 760px) {
  .list2 {
    margin-left: 2rem;
  }
  .list2_item {
    row-gap: var(--inner-space-2s);
    grid-template-columns: auto auto 1fr;
    grid-template-areas: 
      "list2-space list2-no list2-ttl"
      "dummy list2-no list2-content";
  }
}
@media (max-width: 760px) {
  .list2 {
    margin-left: 0.25rem;
  }
  .list2_item {
    grid-template-columns: auto 1fr;
    grid-template-areas: 
      "list2-space list2-no"
      "dummy list2-ttl"
      "dummy list2-content";
  }
  .list2_content {
    margin-top: var(--inner-space-2s);
  }
}
.list2_no {
  font-weight: bold;
  color: var(--color-primary);
  padding: 0.5rem 0;
}
.list2_item:not(:has(.cat)) .list2_no {
  margin-top: calc(var(--fs-m) - 1em);
}
.list2_ttl {
  font-size: var(--fs-m);
  font-weight: bold;
  padding: 0.5rem 0;
}
.list2_ttl .cat {
  display: inline-block;
  font-size: var(--fs-n-rem);
  font-weight: normal;
  padding-bottom: 0.5rem;
  transform: translateY(calc(-1 * calc(var(--fs-m) - 1em)));
}
.list2_box {
  border: 1px solid var(--border-color-dark);
  padding: var(--inner-space-s);
}
.list2_dl {
  border: 1px solid var(--border-color-dark);
  padding: var(--inner-space-s);
  display: flex;
  flex-direction: column;
  row-gap: 0.75rem;
}
.list2_dl dt {
  font-weight: bold;
  font-size: var(--fs-2m);
}
.list2_line {
  display: inline-block;
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -1px;
  background-color: var(--color-primary);
}

/*--------------------------------------------------------------------------------
  .list3
--------------------------------------------------------------------------------*/
.list3 {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-l);
}
.list .list3 {
  margin-top: var(--space-s);
  padding-left: 2rem;
}

/*--------------------------------------------------------------------------------

  environmental policy

--------------------------------------------------------------------------------*/
.env-mv_img img { object-position: 70% center; }
.env { --ttl2-mgb: 0; }
.env-list {
  counter-reset: env-number 0;
  border-top: 1px solid var(--border-color);
  margin-top: var(--space-l);
}
.env-list_item {
  counter-increment: env-number 1;
  display: grid;
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-l) 0;
  position: relative;
}
@media not (max-width: 760px) {
  .env-list_item {
    grid-template-columns: min(calc(260 / 1000 * 100%), 260px) 1fr;
    grid-template-areas: 
      "env-img env-ttl"
      "env-img env-txt";
  }
  .env-list_item:before {
  }
}
@media (max-width: 760px) {
  .env-list_item {
    grid-template-areas: 
      "env-img"
      "env-ttl"
      "env-txt";
  }
}
.env-list_item:before {
  content: "( " counter(env-number, decimal-leading-zero) " )";
  color: var(--color-primary);
  font-size: var(--fs-s);
  font-weight: 600;
  display: block;
  position: absolute;
  left: 0;
  top: max(var(--space-2s), 1rem);
}
.env-list_item .img {
  content: "";
  grid-area: env-img;
  align-self: center;
  text-align: center;
}
.env-list_item .img_icon {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  position: relative;
}
.env-list_item .img_icon img {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s var(--cubic-bezier),  transform 0.6s var(--cubic-bezier);
}
.env-list_item.is-active .img_icon img {
  opacity: 1;
  transform: scale(1);
}
.env-list_item .img_icon:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  background: currentColor;
  color: var(--bg-quaternary-3);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: contain;
}
.env-list_item.is-active .img_icon:after {
  color: transparent;
  transition: color 0.3s var(--cubic-bezier);
  transition-delay: 0.3s;
}
.env-list_item:nth-of-type(1) .img_icon:after {
  mask-image: url("../img/sustainability/env_icon01.svg");
}
.env-list_item:nth-of-type(2) .img_icon:after {
  mask-image: url("../img/sustainability/env_icon02.svg");
}
.env-list_item:nth-of-type(3) .img_icon:after {
  mask-image: url("../img/sustainability/env_icon03.svg");
}
.env-list_item:nth-of-type(4) .img_icon:after {
  mask-image: url("../img/sustainability/env_icon04.svg");
}
.env-list_item .ttl {
  grid-area: env-ttl;
  align-self: end;
  font-family: var(--ff-go);
  font-size: var(--fs-l);
  font-weight: 600;
}
.env-list_item .txt {
  --list-rgap: 1.5rem;
  grid-area: env-txt;
  align-self: start;
}
@media not (max-width: 760px) {
  .env-list_item:nth-of-type(4) .img {
    padding-bottom: 100%;
  }
  .env-list_item .ttl {
    margin-bottom: var(--space-2s);
  }
}
@media (max-width: 760px) {
  .env-list_item .img {
    margin-bottom: var(--space-s);
  }
  .env-list_item .ttl {
    text-align: center;
    margin-bottom: var(--space-s);
  }
}
.env-sign {
  text-align: right;
  margin-top: var(--space-l);
}

/*--------------------------------------------------------------------------------

  educational support

--------------------------------------------------------------------------------*/
@media not (max-width: 760px) {
  .educ-tbl thead th:first-of-type,
  .educ-tbl tbody td:first-of-type { width: 20%; text-align: center; }
  .educ-tbl tbody td:first-of-type { vertical-align: middle; white-space: nowrap; }
}
@media (max-width: 760px) {
  .educ-tbl { --tbl2-row-th-width: max(20%, 4em); }
  .educ-tbl th,
  .educ-tbl td { align-content: center; }
}

/*--------------------------------------------------------------------------------

  women support

--------------------------------------------------------------------------------*/
@media not (max-width: 760px) {
  .women-tbl thead th:first-of-type,
  .women-tbl tbody td:first-of-type { text-align: center; }
  .women-tbl tbody td:first-of-type { vertical-align: middle; white-space: nowrap; }
}
@media not (max-width: 500px) {
  .women-tbl2 th,
  .women-tbl2 td {
    width: 25%;
    text-align: center;
    vertical-align: middle;
  }
}
@media (max-width: 500px) {
  .women-tbl2 { --tbl2-row-th-width: 40%; }
  .women-tbl2 th,
  .women-tbl2 td { align-content: center; }
}

/*--------------------------------------------------------------------------------

  leave report

--------------------------------------------------------------------------------*/
.leave-tbl { margin-top: var(--space-l); }
.leave-tbl th, .leave-tbl td { vertical-align: middle; }
.leave-tbl td { text-align: center; }
.leave-tbl td:last-of-type {
  white-space: nowrap;
  border-left-style: dotted;
}
.leave-tbl td:first-of-type {
  border-right: 0;
  color: var(--color-gray);
  font-size: var(--fs-2s);
}
.leave-tbl th small {
  font-size: var(--fs-2s);
  font-weight: normal;
  display: inline-block;
}

/*--------------------------------------------------------------------------------

  regional contribution

--------------------------------------------------------------------------------*/
.reg-main_inner {
  margin-top: calc(-1 * var(--rd-4));
}
.reg-main.is-active .reg-main_inner {
  clip-path: inset(0);
}

/*--------------------------------------------------------------------------------
  .reg-mv
--------------------------------------------------------------------------------*/
.reg-mv {
  position: sticky;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  background-color: var(--bg-quaternary);
}
.reg-mv_area-img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.reg-mv_img { overflow: hidden; }
.reg-mv_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reg-mv_img.-col2 { grid-column: span 2; }
.reg-mv_img img[src*="mv02"] { object-position: right center; }
.reg-mv_area-txt {
  position: relative;
  z-index: 2;
  display: grid;
  place-content: center;
  place-items: center;
  padding: var(--space-3l) 0;
}
.reg-mv_txt {
  aspect-ratio: 1 / 1;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../img/sustainability/reg/mv_txt-bg.webp") no-repeat center center;
  background-size: cover;
  position: relative;
  z-index: 2;
  font-family: var(--ff-go);
  font-weight: 700;
  padding: 3.5em;
  margin-bottom: var(--rd-4);
}
@media not (max-width: 760px) {
  .reg-mv_txt { font-size: var(--fs-2m); }
}
@media (max-width: 760px) {
  .reg-mv_area-img { width: 125%; }
}
@media (max-width: 500px) {
  .reg-mv_txt { font-size: var(--fs-s); }
}

/*--------------------------------------------------------------------------------
  .reg-item
--------------------------------------------------------------------------------*/
.reg:not(:first-of-type) { margin-top: var(--space-2l); }
.reg-item-ttl { --ttl3-mgb: var(--space-m); }
.reg-item-ttl:not(:first-of-type) { margin-top: var(--space-2l); }
.reg-item {
  display: grid;
  gap: var(--space-m) var(--space-l);
}
.reg-item .img { text-align: center; }
.reg-item .img img {
  border-radius: var(--rd-1);
}
@media not (max-width: 760px) {
  .reg-item {
    grid-template-columns: 1fr min(calc(480 / var(--base-width) * 100%), 480px);
  }
  .reg-item .img { order: 2; }
  .reg-item .txt { order: 1; }
}
@media (max-width: 760px) {
  .reg-item {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------------------------------------
  .reg-item-tbl
--------------------------------------------------------------------------------*/
.reg-item-tbl {
  width: 100%;
  border-collapse: collapse;
  line-height: var(--line-height-s);
  border-top: 1px solid var(--border-color-dark);
  margin-top: var(--space-m);
}
.reg-item-tbl th,
.reg-item-tbl td {
  border-bottom: 1px solid var(--border-color-dark);
  padding: 0.75rem;
  vertical-align: middle;
}
.reg-item-tbl th {
  width: 25%;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
  background-color: var(--bg-gray);
}

/*--------------------------------------------------------------------------------
  .reg-item-dl
--------------------------------------------------------------------------------*/
.reg-item-dl {
  margin-top: var(--space-m);
  border: 1px solid var(--border-color-dark);
  padding: max(var(--inner-space-s), 1.25rem);
  display: flex;
  flex-direction: column;
  row-gap: 0.75rem;
}
.reg-item-dl dt {
  font-weight: bold;
  font-size: var(--fs-2m);
}

/*--------------------------------------------------------------------------------

  prifoods stadium

--------------------------------------------------------------------------------*/
@media not (max-width: 760px) { .stadium-mv-logo img { width: min(42%, 400px); } }
@media (max-width: 760px) { .stadium-mv-logo img { width: min(50%, 320px); } }

/*--------------------------------------------------------------------------------
  .stadium-intro
--------------------------------------------------------------------------------*/
.stadium-intro {
  text-align: center;
  font-family: var(--ff-go);
  font-weight: 500;
  font-size: clamp(var(--fs-m), 4vw, var(--fs-l));
  margin-bottom: var(--space-m);
  line-height: var(--line-height-l);
}
.stadium-intro [class^="highlight"] {
  font-weight: 600;
  font-size: var(--fs-l);
  line-height: var(--line-height-2s);
}
.stadium-intro .highlight {
  color: var(--color-tertiary-light);
}

/*--------------------------------------------------------------------------------
  .stadium-vanraure-logo
--------------------------------------------------------------------------------*/
@media not (max-width: 760px) { .stadium-vanraure-logo { --img-breakpoint: 1000; --img-max: 220px; --img-base: 220; } }
@media (max-width: 760px) { .stadium-vanraure-logo { --img-breakpoint: 500; --img-max: 180px; --img-base: 180; } }
.stadium-vanraure-logo {
  text-align: center;
  margin-bottom: var(--space-l);
}
.stadium-vanraure-logo img {
  width: min(calc(var(--img-base) / var(--img-breakpoint) * 100%), var(--img-max));
}

/*--------------------------------------------------------------------------------
  .stadium-partner
--------------------------------------------------------------------------------*/
.stadium-partner {
  margin-top: var(--space-l);
  background-color: var(--bg-tertiary);
  padding: var(--inner-space-m);
  border-radius: var(--rd-1h);
  display: grid;
  gap: var(--inner-space-m) var(--inner-space-s);
}
.stadium-partner_img {
  position: relative;
}
.stadium-partner_img > img {
  border-radius: var(--rd-q);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stadium-partner_area-txt {
  display: grid;
  grid-template-rows: 1fr auto;
  row-gap: var(--space-m);
}
.stadium-partner_txt {
  /* viewport(min:760px, max:1300px) */
  padding: 0 clamp(0rem, -2.815rem + 5.93vw, 2rem);
  align-self: center;
  font-family: var(--ff-go);
  font-size: clamp(var(--fs-n), 3vw, var(--fs-m));
  font-weight: 500;
}
.stadium-partner_txt .highlight {
  font-weight: 600;
  font-size: var(--fs-2m);
  line-height: var(--line-height-2s);
  color: var(--color-tertiary-light);
  display: inline-block;
  margin-top: 0.25rem;
}
@media not (max-width: 760px) {
  .stadium-partner {
    grid-template-columns: min(calc(600 / var(--base-width) * 100%), 600px) 1fr;
  }
  .stadium-partner_img { order: 1; }
  .stadium-partner_area-txt { order: 2; }
}
@media (max-width: 760px) {
  .stadium-partner_area-txt {
    text-align: center;
  }
}
/* ヴァン太（左）*/
.stadium-partner_img .character {
  pointer-events: none;
  width: 20%;
  position: absolute;
  left: calc(-1 * var(--inner-space-2s));
  bottom: calc(-1 * (var(--inner-space-m) + var(--space-m)));
  z-index: 1;
}
.stadium-partner_img .character img { object-fit: contain; }
/* ヴァン太（右）*/
.stadium-partner_area-txt .character {
  pointer-events: none;
  align-self: end;
}
.stadium-partner_area-txt .character img { width: 70%; }
@media not (max-width: 760px) {
  .stadium-partner_area-txt .character { text-align: right; }
}

/*--------------------------------------------------------------------------------
  .stadium-access
--------------------------------------------------------------------------------*/
.stadium-access {
  margin-top: var(--space-3l);
}
.stadium-map {
  margin-top: var(--space-m);
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  max-width: calc(var(--base-width) * 1px);
  max-height: 600px;
  min-height: 300px;
  border: 0;
  vertical-align: bottom;
}
