@charset "UTF-8";

/* =====================
  Custom Property
===================== */
:root {
  /* debug */
  --debug: false;

  /* color */
  --black: #1d1d1d;
  --primary: #003f97;
  --secondary: #007ac6;

  /* font */
  --yumin: 'Yu Mincho Demibold', 'YuMincho Demibold', '游明朝', 'Yu Mincho Regular', 'Yu Mincho', 'YuMincho Medium', serif;
  --yugo: '游ゴシック', 'Yu Gothic', yugothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', meiryo, 'ＭＳ ゴシック', sans-serif;
  --sanserif: 'Noto Sans JP', sans-serif;
  --title: 'Train One', system-ui;
  --number: 'Tilt Warp', sans-serif;
  --name: 'Shippori Mincho', serif;

  /* icon */
  --icon-arrow: url('data:image/svg+xml,<svg width="21" height="15" viewBox="0 0 21 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.7071 8.07088C21.0976 7.68035 21.0976 7.04719 20.7071 6.65666L14.3431 0.292702C13.9526 -0.0978227 13.3195 -0.0978227 12.9289 0.292702C12.5384 0.683226 12.5384 1.31639 12.9289 1.70692L18.5858 7.36377L12.9289 13.0206C12.5384 13.4111 12.5384 14.0443 12.9289 14.4348C13.3195 14.8254 13.9526 14.8254 14.3431 14.4348L20.7071 8.07088ZM0 7.36377L0 8.36377H20V7.36377V6.36377H0L0 7.36377Z" fill="currentColor"/></svg>');
  --icon-link: url('data:image/svg+xml,<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.1927 0H10.2779C9.83206 0 9.47059 0.361485 9.47059 0.807327C9.47059 1.25317 9.83206 1.61465 10.2779 1.61465H14.2439L7.02328 8.83545C6.70793 9.15047 6.70793 9.66189 7.02328 9.97691C7.18112 10.1348 7.38739 10.2135 7.594 10.2135C7.80061 10.2135 8.00721 10.1348 8.16472 9.97691L15.3854 2.75579V6.72223C15.3854 7.16807 15.7469 7.52956 16.1927 7.52956C16.6385 7.52956 17 7.16807 17 6.72223V0.807327C17 0.361485 16.6385 0 16.1927 0Z" fill="currentColor"/><path d="M14.38 8.59919C13.9342 8.59919 13.5727 8.96067 13.5727 9.40651V15.3857H1.61462V3.42735H7.59367C8.0395 3.42735 8.40098 3.06587 8.40098 2.62002C8.40098 2.17418 8.0395 1.8127 7.59367 1.8127H0.807311C0.361478 1.8127 0 2.17418 0 2.62002V16.1927C0 16.6385 0.361478 17 0.807311 17H14.38C14.8259 17 15.1873 16.6385 15.1873 16.1927V9.40618C15.1873 8.96034 14.8259 8.59919 14.38 8.59919Z" fill="currentColor"/></svg>');

  /* ease */
  --slideInBezier: cubic-bezier(0.16, 0.5, 0.43, 1);
  --easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
  --easeOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
  --easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
  --easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
  --easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
}

/* =====================
  container context
===================== */
@container style(--debug:true) {
  * {
    outline: 1px solid tomato;

    &:focus {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }
  }
}

@layer style {
  /* =====================
    common
  ===================== */
  html,
  body {
    font-family: var(--sanserif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--black);

    @media (width <= 768px) {
      font-size: calc((100 / 390) * 15 * 1vw);
    }
  }

  body {
    @media (width > 768px) {
      min-inline-size: 1440px;
    }
  }

  @media (width > 768px) {
    .sp {
      display: none;
    }
  }

  @media (width <= 768px) {
    .pc {
      display: none;
    }
  }

  /* p */
  :where(p, li, dt, dd, th, td) {
    line-height: 1.8;
  }

  /* =====================
    header
  ===================== */
  .header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    min-block-size: 80px;
    padding-inline: 40px 0;
    box-shadow: 0 0 20px 0 rgba(65, 65, 65, 0.1);
    background-color: #fff;
    z-index: 20;
    display: block grid;
    grid-template-columns: 1fr auto;
    justify-content: space-between;
    transition: all 250ms ease 0s;
    margin-block-start: 20px;
    margin-inline: 20px;
    border-radius: 10px;

    @media (width <= 768px) {
      min-block-size: calc((100 / 390) * 54 * 1vw);
      padding-inline: calc((100 / 390) * 16 * 1vw);
      margin-block-start: calc((100 / 390) * 16 * 1vw);
      margin-inline: calc((100 / 390) * 16 * 1vw);
      border-radius: calc((100 / 390) * 10 * 1vw);
      box-shadow: calc((100 / 390) * 4 * 1vw) calc((100 / 390) * 4 * 1vw) calc((100 / 390) * 8 * 1vw) 0 rgba(0, 0, 0, 0.2);
      padding-block: 0;
    }

    /* ==== logo ==== */
    .logo {
      inline-size: fit-content;
      pointer-events: auto;
      display: block grid;
      place-content: center;

      @media (width <= 768px) {
        & img {
          width: calc((100 / 390) * 133 * 1vw);
        }
      }
    }

    /* ==== nav ==== */
    .nav {
      pointer-events: auto;
      display: block grid;
      grid-template-columns: auto max-content 100px;

      @media (width <= 768px) {
        display: none;
      }

      & > ul {
        text-align: center;
        font-weight: 500;
        display: block grid;
        grid-template-columns: repeat(6, max-content);
        gap: 60px;
        block-size: 100%;

        & > li {
          position: relative;
          block-size: inherit;
          .u-hover {
            display: block grid;
            padding-block-start: 18px;
            inline-size: 100%;
            block-size: inherit;
          }
          &::before {
            content: '';
            display: none;
            inline-size: 8px;
            aspect-ratio: 1/1;
            border-radius: 50rem;
            background-color: var(--secondary);
            pointer-events: none;
            position: absolute;
            bottom: 18px;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
      .unit {
        .u-hover {
          display: block grid;
          place-content: center;
          inline-size: 100%;
          block-size: 100%;
        }
        &[data-id='sdgs'] {
          .u-hover {
            padding-inline: 50px;
          }
        }
        &[data-id='contact'] {
          background-color: #003f97;
          border-radius: 0 10px 10px 0;
        }

        @media (width <= 768px) {
          display: none;
        }
      }
    }
  }

  /* ==== current ==== */
  body[data-page='top'] .header .nav > ul > li[data-id='home'],
  body[data-page='service'] .header .nav > ul > li[data-id='service'],
  body[data-page='mice'] .header .nav > ul > li[data-id='mice'],
  body[data-page='works'] .header .nav > ul > li[data-id='works'],
  body[data-page='company'] .header .nav > ul > li[data-id='company'],
  body[data-page='recruit'] .header .nav > ul > li[data-id='recruit'] {
    &::before {
      display: block flow;
    }
  }
  /* =====================
    footer
  ===================== */
  .footer {
    position: relative;
    background-color: #f4f5f9;

    /* =====================
        aside
      ===================== */
    .aside {
      position: relative;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-image: url('../img/_common/contact_bg.png');
      inline-size: 100%;
      min-block-size: 398px;
      padding-block: 64px;

      @media (width <= 768px) {
        background-image: url('../img/_common/contact_bg_2x.png');
        min-block-size: calc((100 / 390) * 791 * 1vw);
        padding-block: calc((100 / 390) * 80 * 1vw);
      }
      .u-inner {
        padding-inline: 80px;

        @media (width <= 768px) {
          padding-inline: calc((100 / 390) * 16 * 1vw);

          .u-h2-title {
            justify-content: center;
            text-align: center;
            margin-inline: auto;
            & > h2.title {
              justify-content: center;
              &::after {
                content: '';
                display: block;
                inline-size: calc((100 / 390) * 5 * 1vw);
                aspect-ratio: 1 / 1;
                background-color: #fff;
                border-radius: 50rem;
              }
            }
          }
        }

        .aside_wrap {
          display: block grid;
          grid-template-columns: auto 330px 330px;
          align-items: start;
          gap: 30px;

          @media (width <= 768px) {
            grid-template-columns: 1fr;
            gap: 0;
          }

          .description {
            color: #fff;
            margin-block-start: 55px;

            @media (width <= 768px) {
              text-align: center;
              margin-block-start: calc((100 / 390) * 27 * 1vw);
            }
          }

          .unit {
            background-color: #fff;
            min-block-size: 270px;
            border-radius: 10px;
            display: block grid;
            grid-template-rows: repeat(3, max-content);
            justify-items: center;
            align-content: center;
            gap: 24px;

            @media (width <= 768px) {
              min-block-size: calc((100 / 390) * 208 * 1vw);
              border-radius: calc((100 / 390) * 10 * 1vw);
              gap: calc((100 / 390) * 12 * 1vw);
              margin-inline: calc((100 / 390) * 16 * 1vw);
              align-content: start;
              padding-block-start: calc((100 / 390) * 31 * 1vw);
            }

            .btn-title {
              position: relative;
              font-size: 20px;
              font-weight: 500;
              color: var(--primary);
              display: block flex;
              align-items: center;
              gap: 16px;

              @media (width <= 768px) {
                font-size: calc((100 / 390) * 16 * 1vw);
                gap: calc((100 / 390) * 8 * 1vw);
              }

              &::before {
                content: '';
                display: block flow;
                inline-size: 8px;
                aspect-ratio: 1/1;
                border-radius: 50rem;
                background-color: var(--secondary);
              }

              @media (width <= 768px) {
                &::before {
                  inline-size: calc((100 / 390) * 5 * 1vw);
                }
              }
            }
            &[data-id='tel'] {
              @media (width <= 768px) {
                margin-block-start: calc((100 / 390) * 40 * 1vw);
              }
              .img {
                @media (width <= 768px) {
                  inline-size: calc((100 / 390) * 49 * 1vw);
                }
              }
              .tel-no {
                font-size: 36px;
                font-weight: 500;

                @media (width <= 768px) {
                  font-size: calc((100 / 390) * 36 * 1vw);
                }
              }
            }
            &[data-id='mail'] {
              @media (width <= 768px) {
                margin-block-start: calc((100 / 390) * 16 * 1vw);
                gap: calc((100 / 390) * 16 * 1vw);
              }
              .img {
                @media (width <= 768px) {
                  inline-size: calc((100 / 390) * 47 * 1vw);
                }
              }
              .u-anchor {
                @media (width <= 768px) {
                  margin-block-start: calc((100 / 390) * 6 * 1vw);
                }
              }
            }
          }
        }
      }
    }

    /* =====================
      footer_wrap
    ===================== */
    .u-inner {
      padding-inline: 80px;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }

      .footer_wrap {
        padding-block-start: 80px;
        padding-block-end: 26px;
        display: block grid;
        align-items: start;
        grid-template-columns: max-content auto;
        justify-content: space-between;

        @media (width <= 768px) {
          padding-block-start: calc((100 / 390) * 62 * 1vw);
          padding-block-end: calc((100 / 390) * 24 * 1vw);
          grid-template-columns: 1fr;
          grid-template-rows: repeat(4, auto);
          column-gap: 0;
          row-gap: 0;
          padding-inline-end: 0;
        }

        /* ==== nav ==== */
        .main-nav {
          grid-area: 1/2/2/3;
          margin-block-start: 22px;

          @media (width <= 768px) {
            grid-area: 1/1/2/2;
            margin-block-start: 0;
          }
          & > ul {
            text-align: center;
            font-weight: 500;
            display: block grid;
            grid-template-columns: 135px 135px 135px 104px;
            block-size: 100%;
            column-gap: 64px;
            row-gap: 8px;

            @media (width <= 768px) {
              grid-template-columns: repeat(2, calc((100 / 390) * 110 * 1vw));
              column-gap: calc((100 / 390) * 64 * 1vw);
              row-gap: calc((100 / 390) * 12 * 1vw);
              justify-content: center;
            }

            & > li {
              position: relative;
              .u-hover {
                position: relative;
                display: block flex;
                align-items: center;
                inline-size: 100%;
                block-size: inherit;
                padding-block: 10px;
                font-size: 18px;
                font-weight: 500;
                color: var(--primary);
                gap: 16px;

                @media (width <= 768px) {
                  font-size: calc((100 / 390) * 15 * 1vw);
                  gap: calc((100 / 390) * 10 * 1vw);
                  padding-block: calc((100 / 390) * 10 * 1vw);
                }

                &::before {
                  content: '';
                  display: block flow;
                  inline-size: 8px;
                  aspect-ratio: 1/1;
                  border-radius: 50rem;
                  background-color: var(--secondary);
                }

                @media (width <= 768px) {
                  &::before {
                    inline-size: calc((100 / 390) * 6 * 1vw);
                  }
                }
              }
            }
          }
        }

        /* ==== 会社情報 ==== */
        .footer_info {
          grid-area: 1/1/3/2;

          @media (width <= 768px) {
            grid-area: 3/1/4/2;
            margin-block-start: calc((100 / 390) * 59 * 1vw);

            & img {
              display: block flow;
              inline-size: calc((100 / 390) * 313 * 1vw);
              margin-inline: auto;
            }
          }

          .address {
            margin-block-start: 32px;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 14 * 1vw);
              margin-block-start: calc((100 / 390) * 32 * 1vw);
              text-align: center;
            }
          }

          .pdf-btn {
            background-color: var(--primary);
            border-radius: 10px;
            inline-size: fit-content;
            margin-block-start: 56px;

            @media (width <= 768px) {
              border-radius: calc((100 / 390) * 10 * 1vw);
              margin-block-start: calc((100 / 390) * 31 * 1vw);
              margin-inline: auto;
            }

            .anchor {
              position: relative;
              inline-size: 100%;
              block-size: 100%;
              display: block flex;
              align-items: center;
              gap: 8px;
              padding-block: 16px;
              padding-inline: 24px;

              @media (width <= 768px) {
                gap: calc((100 / 390) * 8 * 1vw);
                padding-block: calc((100 / 390) * 16 * 1vw);
                padding-inline: calc((100 / 390) * 24 * 1vw);
              }

              .btn-txt {
                font-size: 15px;
                color: #fff;

                @media (width <= 768px) {
                  font-size: calc((100 / 390) * 15 * 1vw);
                }
              }
              &::before {
                content: '';
                display: block flow;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                background-image: url('../img/_common/icon_dl.svg');
                inline-size: 19px;
                block-size: 15px;
                position: absolute;
                top: 50%;
                right: 30px;
                transform: translateY(-50%);
              }

              @media (width <= 768px) {
                &::before {
                  inline-size: calc((100 / 390) * 19 * 1vw);
                  block-size: calc((100 / 390) * 15 * 1vw);
                  right: calc((100 / 390) * 30 * 1vw);
                }
              }
              &::after {
                content: '';
                display: block flow;
                inline-size: 32px;
                aspect-ratio: 1/1;
                border: 1px solid #fff;
                border-radius: 50rem;

                @media (width <= 768px) {
                  inline-size: calc((100 / 390) * 32 * 1vw);
                }
              }
            }
          }
        }

        .sub-nav {
          grid-area: 2/2/3/3;
          display: block flex;
          align-items: center;
          justify-content: flex-end;
          gap: 54px;
          margin-block-start: 60px;

          @media (width <= 768px) {
            grid-area: 2/1/3/2;
            margin-block-start: calc((100 / 390) * 27 * 1vw);
            flex-direction: column;
            justify-content: center;
            gap: calc((100 / 390) * 25 * 1vw);
          }

          .unit {
            @media (width <= 768px) {
              & img {
                inline-size: calc((100 / 390) * 148 * 1vw);
              }
            }
          }

          & > ul {
            display: block flex;
            justify-content: center;
            gap: 54px;
            font-size: 14px;
            color: #797979;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 12 * 1vw);
              gap: calc((100 / 390) * 32 * 1vw);
            }
          }
        }

        .foot {
          grid-area: 3/1/4/3;

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

          .copyright {
            display: block flow;
            margin-block-start: 39px;
            padding-block-start: 24px;
            font-size: 12px;
            text-align: center;
            color: #848484;
            border-top: 1px solid #c3d2d9;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 31 * 1vw);
              padding-block-start: calc((100 / 390) * 17 * 1vw);
              font-size: calc((100 / 390) * 12 * 1vw);
            }
          }
        }
      }
    }
  }

  /* =====================
  sp-nav
  ===================== */
  @media (width > 768px) {
    .sp-menu,
    .sp-nav {
      display: none;
    }
  }
  @media (width <= 768px) {
    /* ==== ボタン ==== */
    .sp-menu {
      position: fixed;
      top: calc((100 / 390) * 16 * 1vw);
      right: calc((100 / 390) * 16 * 1vw);
      background-color: var(--primary);
      inline-size: calc((100 / 390) * 54 * 1vw);
      block-size: calc((100 / 390) * 54 * 1vw);
      z-index: 220;

      /*=============================
    .btn-trigger
    =============================*/
      &.btn-trigger {
        inline-size: calc((100 / 390) * 54 * 1vw);
        block-size: calc((100 / 390) * 54 * 1vw);
        cursor: pointer;
        border-radius: 0 calc((100 / 390) * 10 * 1vw) calc((100 / 390) * 10 * 1vw) 0;

        span {
          position: absolute;
          left: 0;
          inline-size: calc((100 / 390) * 24 * 1vw);
          block-size: 1px;
          background-color: #fff;
          border-radius: calc((100 / 390) * 2 * 1vw);
          &:nth-of-type(1) {
            top: calc((100 / 390) * 18 * 1vw);
            left: 50%;
            transform: translateX(-50%);
          }
          &:nth-of-type(2) {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          &:nth-of-type(3) {
            bottom: calc((100 / 390) * 18 * 1vw);
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
      &.btn-trigger,
      &.btn-trigger span {
        display: inline-block;
        transition: all 0.5s;
        box-sizing: border-box;
      }
    }

    .menu-on .btn-trigger {
      block-size: calc((100 / 390) * 54 * 1vw);

      & span:nth-of-type(1) {
        -webkit-transform: translateY(calc((100 / 390) * 9 * 1vw)) rotate(-45deg);
        transform: translateY(calc((100 / 390) * 9 * 1vw)) translateX(-50%) rotate(-45deg);
      }
      & span:nth-of-type(2) {
        opacity: 0;
      }
      & span:nth-of-type(3) {
        -webkit-transform: translateY(calc((100 / 390) * -9 * 1vw)) rotate(45deg);
        transform: translateY(calc((100 / 390) * -9 * 1vw)) translateX(-50%) rotate(45deg);
      }
    }

    .sp-nav {
      position: fixed;
      inset: 0;
      z-index: 18;
      opacity: 0;
      pointer-events: none;
      transition: all 350ms var(--easeOutExpo) 0s;

      /* ==== inner ==== */
      .sp-nav-inner {
        position: relative;
        max-block-size: 100dvh;
        background-color: var(--secondary);

        .body {
          color: #fff;
          block-size: 100dvh;
          padding-block: calc((100 / 390) * 103 * 1vw) calc((100 / 390) * 40 * 1vw);
          padding-inline: calc((100 / 390) * 53 * 1vw);
          overflow-y: scroll;

          .main-nav {
            gap: calc((100 / 390) * 27 * 1vw) 0;

            & > ul {
              display: block grid;
              grid-template-columns: repeat(2, 1fr);
              column-gap: calc((100 / 390) * 64 * 1vw);
              font-size: calc((100 / 390) * 15 * 1vw);
              font-weight: 500;
              line-height: 1.4;
              color: #fff;
              & li {
                .u-menu {
                  position: relative;
                  display: block flex;
                  gap: calc((100 / 390) * 10 * 1vw);
                  align-items: center;
                  inline-size: 100%;
                  block-size: inherit;
                  padding-block: calc((100 / 390) * 24 * 1vw);

                  &::before {
                    content: '';
                    inline-size: calc((100 / 390) * 6 * 1vw);
                    aspect-ratio: 1/1;
                    border-radius: 50rem;
                    background-color: #fff;
                  }
                }
              }
            }
          }
        }
        .sub-nav {
          margin-block-start: calc((100 / 390) * 113 * 1vw);

          .unit {
            inline-size: fit-content;
            background-color: #fff;
            margin-inline: auto;
            .u-hover {
              display: block grid;
              place-content: center;
              padding: calc((100 / 390) * 8 * 1vw);
              inline-size: 100%;
              block-size: 100%;

              & img {
                inline-size: calc((100 / 390) * 148 * 1vw);
                block-size: calc((100 / 390) * 18 * 1vw);
              }
            }
          }
          & > ul {
            display: block flex;
            justify-content: center;
            gap: calc((100 / 390) * 32 * 1vw);
            font-size: calc((100 / 390) * 12 * 1vw);
            color: #e2e2e2;
            margin-block-start: calc((100 / 390) * 25 * 1vw);
          }
        }
      }
    }
  }
  /* Menu on */
  .menu-on {
    .sp-nav {
      pointer-events: auto;
      opacity: 1;
      transition: all 350ms var(--easeOutExpo) 0s;
    }
  }
}