@charset "utf-8";

:root {
  --width-s: min(800px, 100%);
  --width-m: min(1120px, 100%);
  --width-l: min(1600px, 100%);

  --color-gry-01: #f8f8f8;
  --color-gry-02: #ececec;
  --color-gry-03: #888;
  --color-gry-04: #5f5f5f;
  --color-bl-01: #27aedf;
  --color-bl-01__rgb: 39, 174, 223;

  --f-size-s: calc(var(--f-size-m) * 0.85);
  --f-size-l: calc(var(--f-size-m) * 1.4);
  --f-size-xl: calc(var(--f-size-m) * 2);
  --f-size-xxl: calc(var(--f-size-m) * 2.8);
  --f-lheight-xs: 1.2;
  --f-lheight-s: 1.4;
  --f-lheight-m: 1.58;
  --f-family-en: "Montserrat", "Noto Sans JP", sans-serif;

  --b-size-xs: 0.8rem;
  --b-size-s: 1.6rem;
  --b-size-m: 2.4rem;
  --b-size-l: 3.2rem;
  --b-size-xl: 4rem;
}

body {
  line-height: var(--f-lheight-m);
  color: #222;
  font-size: var(--f-size-m);
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  text-align: justify;
}
a {
  color: inherit;
  text-decoration: none;
  .fa-solid {
    display: inline-block;
    margin-left: 0.5em;
  }
}
li {
  list-style: none;
}
img {
  max-width: 100%;
  vertical-align: baseline;
}

/* u
==================================================== */
.u-dp--b { display: block; }
.u-ta--c { text-align: center; }
.u-fs--s { font-size: var(--font-size-s); }
.u-fw--b { font-weight: 700; }
.u-c--bl { color: var(--color-bl-01); }


/* module
==================================================== */
.--family-en {
  font-family: var(--f-family-en);
}

/* section ----------------------------- */
.l-section__inner--m {
  width: var(--width-m);
  margin: 0 auto;
}

/* title ----------------------------- */
*[class^="m-title--"] {
  letter-spacing: 0.02em;
  & .m-title__sub {
    margin-top: var(--b-size-xs);
    color: var(--color-gry-03);
    font-size: var(--f-size-s);
  }
  & .--family-en + .m-title__sub {
    margin-top: calc(var(--b-size-xs) / 2);
  }
}
.m-title--xxl,
.m-title--xl {
  line-height: var(--f-lheight-xs);
}
.m-title--xxl {
  margin-bottom: var(--b-size-xs);
  font-family: var(--f-family-en);
  text-align: center;
}
.m-title--xl {
  margin-bottom: var(--b-size-m);
  font-size: var(--f-size-xl);
  &:not(.u-ta--c) .m-title__name::before {
    content: "";
    display: block;
    width: 1.5rem;
    height: 1px;
    background: #222;
  }
}
.m-title--l {
  margin-bottom: var(--b-size-xs);
  font-size: var(--f-size-l);
  & .--ja {
    display: inline-block;
    margin-left: 0.5em;
    font-size: 0.8em;
    font-weight: 500;
  }
}
.m-title--m {
  font-size: var(--f-size-m);
}

/* list ----------------------------- */
.m-list--card {
  display: grid;
  gap: var(--b-size-xs);
  & .m-list__item {
    padding: var(--b-size-s) 0;
    text-align: center;
    border-radius: 1rem;
    & .title {
      font-weight: 500;
    }
    & .text {
      color: var(--color-gry-03);
      font-size: var(--f-size-s);
    }
  }
}
.m-list--post {
  & .m-date {
    margin: var(--b-size-xs) 0 calc(var(--b-size-xs) / 1.4 * -1);
    color: var(--color-gry-03);
    font-size: var(--f-size-s);
    font-weight: 700;
  }
  & .m-title--m {
    margin: var(--b-size-xs) 0;
  }
  & .m-img {
    overflow: hidden;
    border: 4px solid var(--color-gry-02);
    border-radius: 1rem;
    & img {
      display: block;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }
  }
}
.m-list--link li {
  margin-bottom: calc(var(--b-size-xs) / 2);
  & .m-date {
    width: 8em;
    font-size: var(--f-size-s);
    font-weight: 500;
  }
}

/* btn ----------------------------- */
.m-btn--more {
  display: block;
  width: min(30em, 80%);
  margin: var(--b-size-l) auto 0;
  padding: var(--b-size-xs) 0;
  color: #fff;
  text-align: center;
  background: var(--color-bl-01);
  border-radius: 2rem;
}

/* header / footer
==================================================== */
.l-header,
.l-footer {
  line-height: 1;
  & .footer--copyright,
  & .m-title {
    font-size: var(--f-size-s);
  }
  & a {
    display: block;
  }
}

/* header ----------------------------- */
.l-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 var(--b-size-s);
  background: rgba(255, 255, 255, 0.95);
  z-index: 10;
  & .m-link {
    padding: var(--b-size-xs);
  }
}

/* footer ----------------------------- */
.l-footer {
  background: var(--color-gry-01);
  & .footer--copyright,
  & .m-title {
    font-weight: 400;
  }
  & .footer--copyright {
    color: var(--color-gry-03);
  }
  & .footer--snslink {
    & .m-list {
      display: flex;
      align-items: center;
      & .m-link {
        display: block;
        width: 100%;
        height: 100%;
        font-size: var(--f-size-l);
        text-align: center;
        & .fa-brands {
          vertical-align: middle;
        }
      }
    }
  }
}

/* 各コンテンツ
==================================================== */
.l-section.--csr .m-list--post .m-img img,
.l-section.--youtube .m-list--post .m-img img {
  aspect-ratio: 16 / 9;
}

/* mainvisual ----------------------------- */
.l-section.--mainvisual {
  position: relative;
  padding-bottom: 6%;
  & .mainvisual__inner {
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: var(--width-m);
    transform: translateX(-50%);
    & .m-title {
      line-height: var(--f-lheight-xs);
      & span {
        margin-bottom: calc(var(--b-size-xs) / 3);
      }
    }
    & span,
    & .m-text {
      display: inline-block;
      width: fit-content;
      background: #fff;
    }
    & .m-text {
      font-size: var(--f-size-s);
      font-weight: 500;
    }
  }
  & .m-img {
    width: var(--width-l);
    margin: 0 auto;
    & img {
      vertical-align: bottom;
    }
  }
}

/* mv ----------------------------- */
.l-section.--vision {
  margin-top: var(--b-size-m);
  padding-bottom: calc(var(--b-size-xl) * 1.5);
  background: rgba(var(--color-bl-01__rgb), 0.1);
  & .m-box--vision {
    line-height: var(--f-lheight-s);
    text-align: center;
    border-radius: 1rem;
    background: #fff;
    .u-fw--b {
      margin-bottom: calc(var(--b-size-xs) / 2);
    }
  }
  /* & .m-box--vision,
  & .m-list--vision .m-list__item {
    background: #fff;
  } */
  /* .m-box--vision,
  .m-list--vision .m-list__item  {
    line-height: var(--f-lheight-s);
  } */
}

/* csr ----------------------------- */
.l-section.--csr .m-list--post {
  & .m-list__item {
    display: flex;
    flex-direction: column;
    & .m-text {
      margin-bottom: var(--b-size-s);
    }
  }
} 
.m-list--csr {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
    & .m-list__item {
      width: calc(33.33% - var(--b-size-xs) / 2);
      line-height: var(--f-lheight-xs);
      padding: var(--b-size-xs);
      background: var(--color-gry-01);
      text-align: center;
      border-radius: 1rem;
      & .title {
        font-size: var(--f-size-l);
      }
      & .text {
        color: var(--color-gry-03);
        font-size: var(--f-size-s);
      }
    }
}

@media screen and (min-width: 769px) {
  :root {
    --f-size-m: 16px;
  }
  body {
    padding-top: 70px;
  }
  .is-only--sp {
    display: none;
  }

  .m-list .m-link {
    display: inline-block;
    transition: opacity 0.2s;
    &:hover {
      opacity: 0.6;
    }
  }
  .m-list--post {
  display: flex;
  justify-content: space-between;
    &.--column-02 > .m-list__item {
      width: calc(50% - var(--b-size-m) / 2);
    }
    &.--column-03 > .m-list__item {
      width: calc(33.33% - var(--b-size-s) * 2 / 3);
    }
  }
  .m-list--link li {
    display: flex;
    align-items: center;
    margin-bottom: calc(var(--b-size-xs) / 2);
  }
  .m-btn--more {
    transition: opacity 0.2s;
    &:hover {
      opacity: 0.7;
    }
  }

  .header--nav .m-list,
  .l-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .l-header {
    height: 70px;
    & .header--sitename {
      font-size: var(--f-size-l);
    }
    & .m-link {
      font-size: var(--f-size-s);
    }
    .header--btn {
      display: none;
    }
  }
  .l-footer {
    padding: var(--b-size-s);
    .footer--snslink,
    .footer--snslink .m-list {
      justify-content: space-between;
    }
    .footer--snslink {
      display: flex;
      align-items: center; 
      & .m-list {
      margin-left: var(--b-size-xs);
        & .m-list__item {
          width: 1.8rem;
          height: 1.8rem;
          margin-left: calc(var(--b-size-xs) / 3);
        }
      } 
    }
    & .footer--copyright {
      order: -1;
    }
  }

  .l-section:not(.--mainvisual) {
    padding: var(--b-size-xl) 0;
  }
  .m-title--xxl {
    font-size: calc(var(--f-size-xl) * 1.4);
  }
  .m-title--xl:not(.u-ta--c) .m-title__name {
    position: relative;
    &::before {
      position: absolute;
      top: 50%;
      left: calc(var(--b-size-s) * -1.5);
    }
  }


  .l-section.--mainvisual .mainvisual__inner {
    & .m-title {
      & span:nth-of-type(1) {
        font-size: var(--f-size-xl);
      }
      & span:nth-of-type(2) {
        font-size: var(--f-size-xxl);
      }
    }
    & .m-text {
      font-size: var(--f-size-l);
      font-weight: 700;
    }
  }

  .l-section.--vision {
    & .m-box--vision {
      margin-bottom: var(--b-size-m);
      padding: var(--b-size-m) var(--b-size-s);
      & .u-fw--b {
        font-size: var(--f-size-l);
      }
    }
    /* & .m-list--vision {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      & .m-list__item {
        &:last-of-type {
          grid-column: -1 / 3;
        }
      }
    } */
  }
}

@media screen and (max-width: 768px) {
  :root {
    --f-size-m: 15px;
  }
  body {
    padding-top: 50px;
    &.is-active {
      overflow: hidden;
      height: 100lvh;
      & .header--nav {
        visibility: visible;
        opacity: 1;
      }
      & .header--btn span {
        &::before,
        &::after {
          top: 0;
        }
        &::before {
          transform: rotate(45deg);
        }
        &::after {
          transform: rotate(-45deg);
        }
      }
    }
  }
  .is-only--pc {
    display: none;
  }

  .l-header {
    height: 50px;
    padding: 0 0 0 var(--b-size-xs);
    & .header--sitename {
      font-size: var(--f-size-m);
    }
    & .m-link {
      font-size: var(--f-size-m);
    }
    & .header--btn {
      position: relative;
      display: block;
      width: 50px;
      height: 100%;
      padding-top: 34px;
      letter-spacing: 0.08em;
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      font-family: var(--family-en);
      text-align: center;
      background: var(--color-bl-01);
      & span {
        position: absolute;
        top: calc(50% - 6px);
        left: 50%;
        display: block;
        width: 24px;
        transform: translate(-50%, -50%);
        &::before,
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 1px;
          background: #fff;
          display: block;
          transition: top 0.2s, transform 0.2s;
        }
        &::before {
          top: -6px;
        }
        &::after {
          top: 0;
        }
      }
    }
    & .header--nav {
      position: absolute;
      top: 50px;
      left: 0;
      visibility: hidden;
      width: 100vw;
      height: calc(100lvh - 51px);
      background: rgba(255, 255, 255, 0.95);
      opacity: 0;
      transition: visibility 0.2s, opacity 0.2s;
      & .m-list {
        width: calc(100% - var(--b-size-m) * 2);
        margin: var(--b-size-m) auto;
        border-bottom: 1px solid var(--color-gry-02);
        & .m-list__item {
          border-top: 1px solid var(--color-gry-02);
        }
      }
    }
  }
  .l-footer {
    padding: var(--b-size-s) var(--b-size-xs);
    text-align: center;
    & .footer--snslink .m-list {
      justify-content: center;
      & .m-list__item {
        margin: calc(var(--b-size-xs) / 2) calc(var(--b-size-xs) / 4) var(--b-size-s);
        & .m-link {
          padding: calc(var(--b-size-xs) / 2);
        }
      }
    }
  }

  .m-list--card {
    gap: calc(var(--b-size-xs) / 2);
  }
  .m-list--link li {
    & + li {
      margin-top: var(--b-size-xs);
      padding-top: var(--b-size-xs);
      border-top: 1px solid var(--color-gry-02);
    }
    & .m-date {
      display: block;
      margin-bottom: calc(var(--b-size-xs) / 2);
    }
  }

  .m-title--xxl {
    font-size: calc(var(--f-size-xl) * 1.2);
  }
  .m-title--xl {
    &:not(.u-ta--c) .m-title__name::before {
      margin-bottom: var(--b-size-xs);
    }
    &.u-ta--c {
      font-size: calc(var(--f-size-xl) * 0.8);
    }
  }

  .l-section.--mainvisual {
    padding-bottom: 3rem;
    & .mainvisual__inner {
      padding-left: var(--b-size-xs);
      & .m-title {
        & span:nth-of-type(2) {
          font-size: var(--f-size-l);
        }
        & span:nth-of-type(1) {
          font-size: var(--f-size-m);
        }
      }
      & .m-text {
        font-size: var(--f-size-m);
      }
    }
  }

  .l-section.--vision {
    margin-top: var(--b-size-s);
    & .m-title--xl.u-ta--c {
      line-height: 1.4;
      margin-bottom: var(--b-size-s);
    }
    & .m-box--vision {
      margin-bottom: var(--b-size-s);
      padding: var(--b-size-s);
    }
    & .m-title--l {
      font-size: calc(var(--f-size-m) * 1.2);
    }
    /* & .m-list--vision {
      grid-template-columns: 1fr 1fr;
      & .m-list__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--b-size-xs) 0;
        &:last-of-type {
          grid-column: -1 / 1;
        }
        & .title {
          margin-bottom: calc(var(--b-size-xs) / 2);
        }
      }
    } */
  }

  .l-section:not(.--mainvisual) {
    padding: var(--b-size-l) var(--b-size-xs);
  }

  .m-list--post > .m-list__item + .m-list__item {
    margin-top: var(--b-size-m);
  }
}