/* 120周年記念号 */
/* 既存スタイルを上書きするスタイル */
:root {
  --color-navigator--primary: #761c10;
}

.bg-navigator--primary {
  background-color: var(--color-navigator--primary);
}

.l-content__120th_anniversary {
  .p-catch__inner {
    display: block;
    height: 660px;

    @media (width <=768px) {
      height: auto;
      width: 100%;
    }

    @media (width >=769px) {
      display: flex;
      justify-content: space-between;
    }
  }

  .p-catch__movie {
    @media (width <=768px) {
      display: grid;
      height: auto;
      background-image: none;
    }
  }

  .p-catch__movie::before {
    background: rgba(16, 38, 51, 0.7);
  }

  .p-catch__movie img {
    height: 100%;
    object-fit: cover;

    @media (width <=768px) {
      grid-column: 1/-1;
      grid-row: 1/-1;
    }
  }

  .p-catch__box {
    width: fit-content;
    margin-inline: auto;
    align-content: center;
    /* padding: min(5.1%, 40px); */
    padding: 20px;
    position: absolute;
    color: rgb(255 255 255);
    top: unset;
    left: unset;
    transform: unset;
    inset: 0;

    @media (width <=768px) {
      position: static;
      grid-column: 1/-1;
      grid-row: 1/-1;
    }

  }

  .p-catch__box ul li {
    font-size: min(1.4svw, 20px);

    @media (width <=768px) {
      font-size: 1.2rem;
    }
  }

  .p-catch__box ul li span {
    background-color: unset;
    color: #fff;
    font-size: 26px;

    @media (width <=768px) {
      font-size: 1.4rem;
    }
  }

  .msgBox__text {
    @media (width <=768px) {
      margin-block-start: 20px;
    }
  }

  .grad-wrap h2 {
    position: absolute;
    top: 0;
  }

  .grad-wrap .p-chapter__title h2 {
    position: static;
    padding-inline-start: 12px;
    border-left: solid 10px #761c10;
    text-align: left;

    >span {
      padding-inline-start: 8px;
      font-size: 18px;
    }
  }

  .introBox__first .row {
    height: auto;
  }

  .introBox-item h3 {
    color: #fff;

    @media (width <=768px) {
      font-size: .95rem;
      margin-block-end: 0;
    }

  }

}

/* 単独で利用するスタイル */
.anniversary-box {
  height: 100%;
  text-align: center;
  background-color: rgb(130 13 13);

  :where(*) {
    color: rgb(255 255 255);
  }

  @media (width <=768px) {
    aspect-ratio: 3/2;
  }

  @media (width <=480px) {
    aspect-ratio: 1;
  }

  @media (width >=769px) {
    width: 43.29%;
  }

}

.anniversary-box__inner {
  width: min(64%, 100%);
  margin-inline: auto;
  /* background: linear-gradient(106deg,
      #ad8538 10.4433%,
      #cfaf69 54.88%,
      #a77f2c 94.9067%); */
  align-content: center;
  height: 100%;

  @media (width <=768px) {
    width: 90%;
    padding-inline: 10px;
  }
}

.top-title__top {
  margin-block-end: 30px;
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: .05em;

  @media (width <=768px) {
    margin-block-end: 16px;
    font-size: 28px;
  }
}

.top-title__image {
  margin-block-end: 30px;

  @media (width <=768px) {
    margin-block-end: 16px;
  }

  img {
    width: min(100%, 284px);
    margin-inline: auto;
    aspect-ratio: 283/96;
  }

  div {
    margin-inline: auto;
    font-size: 35px;
    letter-spacing: 0.05em;
    font-weight: 700;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.35);
  }
}

.top-title__bottom {
  font-size: 25px;
  line-height: 1.1;

  >span {
    font-size: 15px;
  }
}

.card-120th__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 18px;
  margin-block-end: 18px;

  @media (width <=768px) {
    gap: 8px;
    margin-block-end: 0.6rem;
  }

}

.card-120th__head-label {
  color: rgb(130 13 13);
  padding: 2px 5px;
}

.card-120th__title {
  margin-block-end: 40px;
  font-size: 2rem;
  line-height: 1.3;

  @media (width <=768px) {
    font-size: 1.6rem;
    margin-block-end: 32px;
  }
}

.introBox__vol2 .card-120th__head-main {
  font-size: 20px;
}

.card-120th__link {
  text-align: right;

  >a {
    color: #fff;
    display: inline-grid;

    &:hover {
      color: #fff;
      opacity: .7;
    }

    >span {
      border-bottom: solid 1px #fff;
      padding-inline-end: 2.5rem;
      padding-block-end: 0.25rem;
      grid-area: 1/1/-1/-1;
    }

    &::after {
      content: "";
      display: block;
      width: 10px;
      height: 1px;
      grid-area: 1/1/-1/-1;
      background-color: #fff;
      align-self: flex-end;
      justify-self: flex-end;
      rotate: 45deg;
      translate: 1px -4px;
    }
  }
}

.contribute-item {

  .contribute-name,
  .contribute-link {
    text-align: center;
  }
}

.contribute-name {
  background-color: var(--color-navigator--primary);
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
}

.contribute-link {
  background-color: #e7e9eb;

  >a {
    color: var(--color-navigator--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.6rem;

    &:hover {
      color: var(--color-navigator--primary);
    }

    &::after {
      content: url(/lib/img/f04/020/common/grad-btn-arrow.png);
      rotate: -90deg;
    }
  }
}

.history-item__link {
  width: min(100%, 200px);
  display: grid;
  grid-template-columns: 1fr auto;
  margin-inline: auto;
  align-items: center;
  justify-content: center;
  border: solid 1px #fff;
  padding: 8px;

  &:hover {
    color: #fff;
  }

  &::after {
    content: "";
    display: inline-block;
    background-color: #fff;
    mask-image: url(/lib/img/f04/020/common/grad-btn-arrow.png);
    width: 26px;
    aspect-ratio: 1;
    rotate: -90deg;
  }
}

.history-item {
  grid-template: ". . ." 20px
    "photo photo photo" 1fr
    "head head head" auto
    ". . ." 20px / 30px 1fr 30px;

  &::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    background-color: #7b4900;
    opacity: 0.7;
    mix-blend-mode: multiply;
  }
}

.history-item__body {
  grid-area: body;
  z-index: 1;
  grid-column: 2/3;
  grid-row: 1/-1;
  align-content: center;
  text-align: center;
}

:is(.history-item__body) {
  * {
    color: #fff;

  }
}

.history-photo {
  grid-area: photo;
  grid-column: 1/-1;
  grid-row: 1/-1;

  @media (width <=768px) {
    aspect-ratio: 4/3;
  }

}

.history-item__title {
  font-size: 2rem;

  @media (width <=768px) {
    font-size: 1.65rem;
  }

}

.history-item__subtitle {
  font-size: 1.125rem;

  @media (width <=768px) {
    font-size: .875rem;
  }
}

.statics-head__body {
  width: fit-content;
  margin-inline: auto;
  text-align: center;

  >img {
    width: 72px;
    aspect-ratio: 72/54;
  }
}

.statics-row {
  display: flex;
}

.statics-head-col {
  align-content: center;
  background-color: #e3e1d3;

  @media (width >=768px) {
    flex: 490px 0 1;
  }

}

.statics-head__title {
  margin-block: 24px 34px;
  line-height: 1.6;
}

.statics-image-col {
  flex: 610px 0 1;
}

.statics-head__link {
  width: min(100%, 200px);
  display: grid;
  grid-template-columns: 1fr auto;
  margin-inline: auto;
  align-items: center;
  justify-content: center;
  border: solid 1px #082634;
  padding: 8px;

  &::after {
    content: "";
    display: inline-block;
    background-color: #082634;
    mask-image: url(/lib/img/f04/020/common/grad-btn-arrow.png);
    width: 26px;
    aspect-ratio: 1;
    rotate: -90deg;
  }
}

/* 寄稿文 */
.contribute-wrapper {
  width: min(78.57svw, 1100px);
  margin-inline: auto;

  @media (width <=768px) {
    width: calc(100svw - 30px);
  }
}

.contributer {
  display: grid;

  @media (width >=768px) {
    grid-template-columns: 1fr 31.3%;
  }

  &:has(img[src*="/lib/img/f04/020/120th/contribution_03.jpg"]) {
    .contributer-meta__title {
      text-align: center;

      @media (width <=768px) {
        font-size: 21px;
      }


      >span {
        display: flex;
        justify-content: center;

        @media (width <=768px) {
          justify-content: space-between;
        }


        &::before {
          content: "";
          display: inline-block;
          width: 16px;
          aspect-ratio: 16 / 60;
          border: solid 3px #000;
          border-right: 0;
          border-bottom: 0;
          align-self: flex-start;
        }

        &::after {
          content: "";
          display: inline-block;
          width: 16px;
          aspect-ratio: 16 / 60;
          border: solid 3px #000;
          border-left: 0;
          border-top: 0;
          align-self: flex-end;
        }
      }
    }
  }

  &:has(img[src*="/lib/img/f04/020/120th/contribution_04.jpg"]) {
    .contributer-meta__title {
      font-size: 39px;
    }
  }
}

.contributer-meta {
  display: grid;
  grid-template: ". content ." / min(7.14svw, 100px) 1fr min(5.35svw, 75px);
  background-color: #e1eaef;
  align-content: center;
  padding-block: 1rem;

  @media (width <=768px) {
    grid-area: 2/1/3/-1;
  }

}

.contributer-meta__inner {
  grid-area: content;
}

.contributer-meta__head {
  font-size: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;

  @media (width <=768px) {
    font-size: 16px;
  }


  &::after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background-color: #000;
  }
}

.contributer-meta__title {
  margin-block-end: 24px;
  font-size: 40px;
  line-height: 1.3;
  letter-spacing: .05em;

  @media (width <=768px) {
    margin-block-end: 18px;
    font-size: 24px;
  }
}

.contributer-meta__author {
  text-align: right;
  font-size: 22px;

  @media (width <=768px) {
    font-size: 14px;
  }
}

.contributer-image {
  height: 100%;
  aspect-ratio: 350 / 356;
  object-fit: cover;
  object-position: top;

  @media (width <=768px) {
    grid-area: 1/1/2/-1;
  }
}

.contributer-message {
  width: min(64.2svw, 900px);
  margin-inline: auto;
}

.contributer-content {
  padding: 0 min(round(up, 7.14svw, 1px), 100px) 140px;

  @media (width <=768px) {
    padding: 0 15px 70px;
  }
}

.contributer-content__body {
  padding-block: 75px 125px;

  @media (width <=768px) {
    padding-block: 40px 70px;
  }
}

.back-to-home__link {
  border: 1px solid var(--color-navigator--primary);
  color: var(--color-navigator--primary);
  margin-inline: auto;
  font-size: 18px;
  width: 235px;
  display: flex;
  justify-content: center;
  padding: .5rem 1rem;
  column-gap: .875rem;

  &:hover {
    color: var(--color-navigator--primary);
  }

  &::after {
    content: url('/lib/img/f04/020/common/grad-btn-arrow.png');
    rotate: -90deg;
  }
}

.contribute-note {
  width: min(calc(100% - 30px), 800px);
  margin: 75px auto;
  border: solid 5px #e1eaef;

  >p {
    text-indent: -1em;
    padding-inline-start: 1em;
  }
}

.navigator-page-header {
  background-color: #012432;

  :is(h1, p) {
    color: #fff;
  }
}

.navigator-page-header__inner {
  display: flex;
  justify-content: space-between;
  width: min(100%, 1440px);
  margin-inline: auto;
}

.navigator-page-header__title {
  margin-inline: 10px;
  align-content: center;

  @media (width <=576px) {
    padding-block: 1rem;
    font-size: 1rem;
  }

  >span {
    display: flex;
    font-size: 20px;
    align-items: center;

    @media (width <=576px) {
      font-size: 11px;
    }


    &::after {
      content: "";
      background-color: #fff;
      height: 1px;
      flex: 1;
      margin-inline-start: 10px;
    }
  }
}

.navigator-page-header__image {
  flex: 470px 0 1;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);

  @media (width <=768px) {
    flex-basis: 38%;
  }

  >img {
    height: 100%;
    object-fit: cover;
  }
}

.statistics-item {
  &+.statistics-item {
    margin-block-start: 108px;
  }

  &:last-child {
    margin-block-end: 70px;
  }
}

.statistics-item__title {
  width: fit-content;
  display: flex;
  margin-block-end: 30px;
}

.statistics-item__title-number {
  background-color: #000;
  aspect-ratio: 1;
  width: 2rem;
  display: inline-block;
  color: #fff;
  text-align: center;
  align-content: center;
}

.statistics-item__title-text {
  background-color: #c0c9cc;
  padding: 2px 6px;
}

.statistics-item__description {
  margin-block-end: 90px;
}

.statistics-item__note {
  width: fit-content;
  margin-inline: auto;
  text-indent: -1em;
  margin-block-start: 80px;
  padding-inline-start: 1em;

  @media (width <=768px) {
    font-size: 0.75rem;
  }


  &:has(+.back-to-home__link) {
    margin-block-end: 90px;
  }
}

.crosstalk-intro {
  width: min(calc(100% - 30px), 1100px);
  margin: 0 auto 4rem;
  border-bottom: 1px solid black;
  padding-block-end: 6px;

  @media (width <=768px) {
    margin-block-end: 2rem;
  }

  &::after {
    content: "";
    border-bottom: solid 1px #000;
    display: block;
  }
}

.crosstalk-container {}

.crosstalk-body {
  width: min(calc(100% - 30px), 1100px);
  margin-inline: auto;

  p {
    font-size: 1.125rem;

    &:has(.crosstalk-q) {
      display: flex;

      @media (width >=992px) {
        align-items: center;
      }
    }

    @media (width <=768px) {
      font-size: 1rem;
    }
  }

  >p {
    margin-block-end: 2.5rem;

  }

  >h2 {
    font-size: 1.75rem;
    padding-block-end: 1.125rem;
    margin-block-end: 1.5rem;
    border-bottom: 1px solid #000;

    @media (width <=768px) {
      font-size: clamp(1rem, calc(1.25rem + .8vw), 28px);
    }
  }

}

.crosstalk-q {
  width: 40px;
  display: inline-block;
  height: 1px;
  background-color: #000;

  @media (width <=768px) {
    translate: 0 1rem;
  }

}

.heading-line--center {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-block-end: 4.5rem;

  @media (width <=768px) {
    grid-template-columns: 1fr 70% 1fr;
    margin-block-end: 1.25rem;
  }

  &::before,
  &::after {
    content: "";
    display: block;
    height: 1px;
    background-color: #000;
  }

  >span {
    padding-inline: 1rem;

    @media (width <=768px) {
      font-size: 1.25rem;
    }

  }
}

.heading-line--left {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  margin-block-end: 4.5rem;

  @media (width <=768px) {
    margin-block-end: 1.25rem;
  }

  &::after {
    content: "";
    display: block;
    height: 1px;
    background-color: #000;
  }

  >span {
    padding-inline-end: 1rem;
  }
}


.content--narrow {
  @media (width >=992px) {
    padding-inline: 4.5rem;
  }
}

.content-facilities {
  &:has(img[src*="/lib/f04/020/120th/crosstalk02_05.jpg"]) {
    background-color: #f1eeea;
    padding-block: 3rem 1rem;
  }

  h4 {
    font-size: 1.25rem;

    @media (width <=768px) {
      font-size: 1.125rem;
    }
  }

  p {
    font-size: 1.0625rem;

    @media (width <=768px) {
      font-size: 1rem;
    }
  }
}

.content-room {
  background-color: #e1eaef;
  padding: 3rem 4.5rem;

  @media (width <=768px) {
    padding: 2rem 15px;
  }

  p {
    font-size: 1.0625rem;

    @media (width <=768px) {
      font-size: 1rem;
    }
  }
}

.content-profile {
  h4 {
    @media (width <=768px) {
      font-size: 1.125rem;
    }
  }

  &:has(img[src*="/lib/f04/020/120th/crosstalk02_07.png"]) {
    .col-lg-6 {

      >div {
        background-color: #6b7d85;
      }

      h4,
      p {
        color: #fff;
      }

      h4 {
        border-bottom: solid 1px #fff;
        padding-block-end: 1rem;
        margin-block-end: 1rem;
      }

    }
  }
}

.crosstalk-catch {
  width: min(calc(100% - 30px), 1440px);
  margin-inline: auto;
  border: 1px solid #000;

  @media (width >=992px) {
    display: grid;
    grid-template-columns: round(39.2857142857svw, 1px) 1fr;
  }

  &:has(img[src*="/lib/img/f04/020/120th/crosstalk02_main.jpg"]) {
    .crosstalk-catch__title {
      align-content: center;
      background-color: #80685f;

      .crosstalk-author__cross {

        &::before,
        &::after {
          background-color: #fff;
        }
      }

      h1,
      p {
        color: #fff;

      }
    }

    ~.crosstalk-intro {
      width: min(calc(100% - 30px), 1400px);
      background-color: #e6ecea;
      border-bottom: 0;

      &::after {
        content: none;
      }

      .crosstalk-inner {
        width: min(calc(100% - 30px), 1100px);
        margin-inline: auto;
      }
    }
  }

}

.crosstalk-catch__title {
  text-align: center;

  img {
    width: 226px;
    aspect-ratio: 452/78;
  }
}

.crosstalk-author__cross {
  display: grid;
  width: fit-content;

  &::before,
  &::after {
    content: "";
    display: inline-block;
    width: 54px;
    height: 1px;
    background-color: #000;
  }

  &::before {
    rotate: 45deg;
  }

  &::after {
    rotate: -45deg;
  }
}

.crosstalk-author {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: min(7.8%, 60px);

  @media (width <=576px) {
    flex-direction: column;
    row-gap: 30px;
  }
}

.crosstalk-author__item {
  span {
    display: block;
  }
}

.crosstalk-author__name {
  font-size: 1.5rem;
}

.histroy-table__wrapper {
  width: min(calc(100% - 30px), 1100px);
  margin: 112px auto 0;
  border-top: solid 2px #80685F;

  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    background-color: #E9E3DF;
  }

  @media (max-width: 768px) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.histroy-table {
  border-collapse: collapse;
  width: 100%;
  /* table-layout: fixed; */

  @media (max-width: 768px) {
    width: max-content;
    min-width: 100%;
  }


  th {
    padding: .2rem .5rem;
    text-align: center;
    border-right: solid 1px #80685F;
  }

  >thead {
    background-color: #e9e3df;


    >tr {
      th {
        /* padding: 4px 1rem; */

        &:not(:last-child) {
          >span {
            /* border-right: solid 1px #80685e; */
          }
        }

        >span {
          display: block;
          /* padding-block: calc(1rem - 2px); */
        }
      }
    }
  }

  >tbody {
    /* border-top: solid 4px #fff; */

    >tr {
      &:first-child {
        background-color: #e9e3df;
      }

      &:nth-child(2) {
        >td {
          &::before {
            /* content: ""; */
            display: block;
            height: 5px;
            background-color: #fff;
            translate: 2px 0;
          }
        }
      }

      >td {
        border-bottom: solid 1px #80685e;
        padding: .2rem .5rem;

        &:not(:last-child) {
          border-right: dotted 1px #80685e;
        }

        &:first-child {
          text-align: center;
        }
      }
    }
  }
}

.kyouju-page-header {
  background-color: #7d191d;
}

.kyouju-table__wrapper {
  width: min(calc(100% - 30px), 1100px);
  margin: 110px auto 70px;

  @media (max-width: 768px) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.kyouju-table {
  width: 100%;
  border: solid 1px #727171;
  border-collapse: collapse;
  /* table-layout: fixed; */

  th,
  td {
    padding: .2rem .5rem;
  }

  @media (max-width: 768px) {
    width: max-content;
    min-width: 100%;
  }

  >tbody {
    >tr {

      &:nth-child(n+2) td:nth-child(2) {
        background-color: #d8babb;
      }

      >th,
      >td {
        text-align: center;
      }

      >th {
        background-color: #a45d61;
        color: #fff;
        border-bottom: solid 1px #fff;

        &:not(:last-child) {
          border-right: solid 1px #7d181d;
        }
      }

      >td {
        border: solid 1px #727171;

        &:first-child {
          background-color: #a45d61;
          border-bottom: solid 1px #7d181d;
          color: #fff;
        }
      }
    }
  }
}

section#historyBox {
  padding-block-end: 0;
}
.writeBox120th {
      margin-block-end: 140px;
      text-align: center;
      figure {
          img {
              border: solid 1px #ccc;
              width: min(100%,187px);
          }
      }
  }