@import url("https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap");
/******************************************************

introduction

******************************************************/
.introduction .inner {
  max-width: 1000px; }
.introduction .img01 {
  max-width: 295px;
  margin-inline: auto; }
.introduction .img02,
.introduction .midashi {
  margin-top: 9rem; }
.introduction .midashi {
  letter-spacing: 0.15em; }
.introduction .logo {
  max-width: 24.2rem;
  margin-inline: auto;
  margin-top: 4rem; }
.introduction .note {
  margin-top: 5rem; }

@media screen and (max-width: 768px) {
  .introduction .img02,
  .introduction .midashi {
    margin-top: 6rem; } }
/******************************************************

premist-history

******************************************************/
.premist-history {
  background-color: #e1ded8; }
  .premist-history .inner {
    max-width: 1200px; }
  .premist-history .section-title {
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: normal;
    color: #5c6481;
    text-align: center;
    font-size: 4.2rem;
    letter-spacing: 0.15em; }
  .premist-history .chronology {
    background-color: #fff;
    margin-top: 6rem;
    position: relative;
    overflow: scroll;
    height: 80rem; }
  .premist-history .line {
    display: grid;
    grid-template-columns: 16rem 1fr;
    column-gap: 2.5rem;
    color: #000000; }
    .premist-history .line .age {
      font-family: "adobe-garamond-pro", serif;
      font-weight: 400;
      font-style: normal;
      text-align: center;
      border-right: 1px solid #000000;
      font-size: 3rem;
      padding: 2rem 1rem;
      letter-spacing: 0.05em;
      line-height: 1.4; }
    .premist-history .line:last-of-type .content {
      padding-bottom: 5rem; }
    .premist-history .line .content {
      font-size: 1.7rem;
      padding: 2rem 5rem 2rem 0;
      line-height: 2.2; }
      .premist-history .line .content .event {
        display: grid;
        grid-template-columns: 140px 1fr; }
        .premist-history .line .content .event:has(.logo) {
          grid-template-columns: 1fr;
          max-width: 650px; }
        .premist-history .line .content .event .logo {
          text-align: center;
          margin-top: 4rem; }
          .premist-history .line .content .event .logo img {
            width: 18.6rem; }
      .premist-history .line .content.work-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 3rem;
        max-width: 700px; }
        .premist-history .line .content.work-list .text {
          font-size: 1.5rem;
          line-height: 1.6;
          margin-top: 1rem; }
        .premist-history .line .content.work-list .event {
          grid-column: span 2; }
          .premist-history .line .content.work-list .event .text {
            font-size: 1.7rem;
            margin-top: 0;
            line-height: 2.2; }
    .premist-history .line:first-of-type .age,
    .premist-history .line:first-of-type .content {
      padding-top: 4rem; }

@media screen and (max-width: 768px) {
  .premist-history .chronology {
    height: 60rem; }
  .premist-history .line {
    grid-template-columns: 12rem 1fr; }
    .premist-history .line .age {
      line-height: 1.2; }
    .premist-history .line .content {
      line-height: 1.8; }
      .premist-history .line .content .event {
        grid-template-columns: 80px 1fr; }
      .premist-history .line .content.work-list .event {
        grid-column: span 2; }
        .premist-history .line .content.work-list .event .text {
          line-height: 1.8; } }
@media screen and (max-width: 480px) {
  .premist-history .line .content {
    display: flex;
    flex-direction: column;
    row-gap: 3rem; }
    .premist-history .line .content .event {
      grid-template-columns: 1fr; }
    .premist-history .line .content.work-list {
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 3rem; }
      .premist-history .line .content.work-list .event {
        grid-column: span 1; } }
/******************************************************

achievements

******************************************************/
.achievements .section-copy {
  font-size: 2.8rem; }
.achievements .map-image {
  max-width: 700px;
  margin-top: 4rem;
  margin-inline: auto; }
  .achievements .map-image + .note {
    margin-top: 8rem; }
.achievements .work-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6rem 4rem;
  margin-top: 5rem; }
  .achievements .work-list .name {
    font-size: 15px;
    line-height: 1.4;
    margin-top: 2rem; }

@media screen and (max-width: 1121px) {
  .achievements .work-list {
    gap: 3rem 2.5rem; } }
@media screen and (max-width: 768px) {
  .achievements .work-list {
    grid-template-columns: 1fr;
    row-gap: 4rem; }
    .achievements .work-list .name {
      text-align: center; } }
/******************************************************

after-supports

******************************************************/
.after-supports {
  background-color: #f2f1ed; }
  .after-supports .section-title {
    font-family: "adobe-garamond-pro", serif;
    font-weight: 400;
    font-style: normal;
    color: #5c6481;
    text-align: center;
    font-size: 4.2rem;
    letter-spacing: 0.1em; }
  .after-supports .overview {
    max-width: 566px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 0.49fr;
    align-items: center;
    margin-top: 5rem; }
    .after-supports .overview .copy {
      font-size: 2.8rem; }
  .after-supports .detail {
    margin-top: 5rem; }
    .after-supports .detail > .title {
      font-size: 2.2rem;
      line-height: 1.4;
      padding: 1.5rem 3rem;
      border: 1px solid #c6c4bf;
      background: linear-gradient(90deg, white 0%, #eae8e3 100%); }
    .after-supports .detail > .content {
      padding: 4rem 5rem 0; }
    .after-supports .detail .img img {
      mix-blend-mode: multiply; }
  .after-supports .detail01 .content {
    display: grid;
    grid-template-columns: 1fr 0.54fr;
    column-gap: 15.8rem; }
  .after-supports .detail01 .img {
    max-width: 332px;
    grid-row: span 2; }
  .after-supports .detail02 .img {
    max-width: 952px;
    margin-inline: auto;
    margin-top: 3rem; }
    .after-supports .detail02 .img + .note {
      margin-top: 3rem; }
  .after-supports .detail02 .equipment-sample {
    margin-top: 5rem; }
    .after-supports .detail02 .equipment-sample .title {
      width: calc(25% - 6px);
      font-size: 14px;
      color: #584d47;
      padding: 1.5rem 10px;
      text-align: center;
      border: 1px solid currentColor;
      border-width: 0 1px; }
    .after-supports .detail02 .equipment-sample .list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      color: #fff;
      gap: 10px;
      margin-top: 10px; }
      .after-supports .detail02 .equipment-sample .list li {
        background-color: #876066;
        font-size: 13px;
        text-align: center;
        font-feature-settings: "palt";
        letter-spacing: 0.05em;
        padding: 1.5rem 10px; }
    .after-supports .detail02 .equipment-sample .note {
      margin-top: 1.5rem; }
  .after-supports .detail03 .img01 {
    max-width: 750px;
    margin-inline: auto;
    margin-top: 3rem; }
  .after-supports .detail03 .lead02 {
    margin-top: 4rem; }
  .after-supports .detail03 .img02 {
    margin-top: 3rem; }
  .after-supports .detail03 .note-area {
    font-size: 12px;
    margin-top: 3rem; }
    .after-supports .detail03 .note-area .block {
      display: grid;
      grid-template-columns: 25px 1fr; }
      .after-supports .detail03 .note-area .block ul {
        list-style: disc;
        padding-left: 1.5em; }

@media screen and (max-width: 1121px) {
  .after-supports .detail01 .content {
    column-gap: 3rem; } }
@media screen and (max-width: 768px) {
  .after-supports .overview .copy {
    font-size: 2.6rem; }
  .after-supports .detail {
    margin-top: 4rem; }
    .after-supports .detail > .content {
      padding: 3rem; }
  .after-supports .detail01 .content {
    grid-template-columns: 1fr;
    row-gap: 3rem; }
    .after-supports .detail01 .content .img {
      grid-row: span 1;
      width: 90%;
      margin-inline: auto; }
  .after-supports .detail02 .equipment-sample .title {
    width: calc(33% - 1px); }
  .after-supports .detail02 .equipment-sample .list {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px; } }
.kana-main2 {
  width: 80%;
  max-width: 440px;
  aspect-ratio: 560/46;
  text-align: center;
  margin: 8rem auto auto; }
  .kana-main2 img {
    width: 100%;
    height: auto; }