@layer settings {
  :root {
    --torem: calc(1rem / 16);
    --torlh: calc(1rlh / 16);
    --tovi: calc(100vi / var(--viewport));
    --tovi-sm: calc(100vi / var(--design-width-sm));
    --tovi-md: calc(100vi / var(--design-width-md, 768));
    --tovi-lg: calc(100vi / var(--design-width-lg));
    --tovw-sm: calc(100vw / var(--design-width-sm));
    --tovw-md: calc(100vw / var(--design-width-md, 768));
    --tovw-lg: calc(100vw / var(--design-width-lg));
    --toremvw: calc((var(--torem) * 0.5) + (var(--viewport) * 0.5));
    --toremvi-sm: calc((var(--torem) * 0.5) + (var(--tovi-sm) * 0.5));
    --toremvi-md: calc((var(--torem) * 0.5) + (var(--tovi-md) * 0.5));
    --toremvi-lg: calc((var(--torem) * 0.5) + (var(--tovi-lg) * 0.5));
    --design-ratio: calc(100% / var(--viewport));
    --min-viewport: 375;
    --max-viewport: 1440;
    --design-width-sm: 375;
    --design-width-lg: 1440;
    --color-blue-50: #1e1a07;
    --color-grey: #b5b4ac;
    --base-background-color: #fff;
    --base-color: var(--color-dark);
    --font-sans-ja:
      "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
      "BIZ UDPGothic", "Meiryo", sans-serif;
    --font-sans-en:
      "Montserrat", "Helvetica Neue", "Arial", system-ui, sans-serif;
    --font-sans-mix: "Montserrat", "Noto Sans JP", sans-serif;
    --base-font-family: var(--font-sans-ja);
    --font-base: 16;
    --font-ratio: 8;
    --font-2xs: calc(var(--font-base) * var(--font-ratio) / 12 * var(--torem));
    --font-xs: calc(var(--font-base) * var(--font-ratio) / 10 * var(--torem));
    --font-sm: calc(var(--font-base) * var(--font-ratio) / 9 * var(--torem));
    --font-md: calc(var(--font-base) * var(--font-ratio) / 8 * var(--torem));
    --font-lg: calc(var(--font-base) * var(--font-ratio) / 7 * var(--torem));
    --font-xl: calc(var(--font-base) * var(--font-ratio) / 5 * var(--torem));
    --font-2xl: calc(var(--font-base) * var(--font-ratio) / 3 * var(--torem));
    --font-fluid-xs: clamp(0.666688rem, 0.63433rem + 0.138058vi, 0.8rem);
    --font-fluid-sm: clamp(0.888875rem, 0.861903rem + 0.115081vi, 1rem);
    --font-fluid-md: clamp(1rem, 0.965322rem + 0.147961vi, 1.14288rem);
    --font-fluid-lg: clamp(1.125rem, 1.07444rem + 0.215728vi, 1.33331rem);
    --font-fluid-xl: clamp(1.6rem, 1.50291rem + 0.414239vi, 2rem);
    --font-fluid-2xl: clamp(2rem, 1.83818rem + 0.690421vi, 2.66669rem);
    --font-fluid-3xl: clamp(2.66669rem, 2.34307rem + 1.38078vi, 4rem);
    --leading-base: 4;
    --leading-xs: calc(var(--leading-base) * 3 * var(--torem));
    --leading-sm: calc(var(--leading-base) * 4 * var(--torem));
    --leading-md: calc(var(--leading-base) * 5 * var(--torem));
    --leading-lg: calc(var(--leading-base) * 6 * var(--torem));
    --leading-xl: calc(var(--leading-base) * 7 * var(--torem));
    --leading-2xl: calc(var(--leading-base) * 8 * var(--torem));
    --leading-3xl: calc(var(--leading-base) * 9 * var(--torem));
    --leading-4xl: calc(var(--leading-base) * 10 * var(--torem));
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    --leading-loose: 2;
    --tracking-tigher: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: normal;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --container-size-4xs: 460px;
    --container-size-3xs: 480px;
    --container-size-2xs: 600px;
    --container-size-xs: 640px;
    --container-size-sm: 768px;
    --container-size-md: 1200px;
    --container-size-lg: 1440px;
    --container-size-xl: 1500px;
    --container-size-2xl: 1640px;
    --offset-xs: 1.5vw;
    --offset-sm: 2.8vw;
    --offset-md: 5.5vw;
    --offset-lg: 7.3vw;
    --offset-xl: 13vw;
    --space-base: 8;
    --space-2xs: calc(var(--space-base) * var(--torem));
    --space-xs: calc(var(--space-base) * 2 * var(--torem));
    --space-sm: calc(var(--space-base) * 3 * var(--torem));
    --space-md: calc(var(--space-base) * 5 * var(--torem));
    --space-lg: calc(var(--space-base) * 8 * var(--torem));
    --space-xl: calc(var(--space-base) * 13 * var(--torem));
    --radius-sm: 1rem;
    --radius-md: 2rem;
    --radius-lg: 2.5rem;
    --radius-full: 50%;
    --grid-fit-sm: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    --grid-fit-md: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    --grid-fit-lg: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    --grid-fill-sm: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    --grid-fill-md: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    --grid-fill-lg: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
    --grid-1: repeat(1, minmax(0, 1fr));
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-4: repeat(4, minmax(0, 1fr));
    --grid-5: repeat(5, minmax(0, 1fr));
    --grid-6: repeat(6, minmax(0, 1fr));
    --grid-7: repeat(7, minmax(0, 1fr));
    --grid-8: repeat(8, minmax(0, 1fr));
    --grid-9: repeat(9, minmax(0, 1fr));
    --grid-10: repeat(10, minmax(0, 1fr));
    --grid-11: repeat(11, minmax(0, 1fr));
    --grid-12: repeat(12, minmax(0, 1fr));
    --arrow-width: 10%;
    --arrow-prev: polygon(
      75% var(--arrow-width),
      calc(75% - var(--arrow-width)) 0,
      calc(25% - var(--arrow-width)) 50%,
      calc(75% - var(--arrow-width)) 100%,
      75% calc(100% - var(--arrow-width)),
      calc(25% + var(--arrow-width)) 50%,
      75% var(--arrow-width)
    );
    --arrow-next: polygon(
      25% var(--arrow-width),
      calc(25% + var(--arrow-width)) 0,
      calc(75% + var(--arrow-width)) 50%,
      calc(25% + var(--arrow-width)) 100%,
      25% calc(100% - var(--arrow-width)),
      calc(75% - var(--arrow-width)) 50%,
      25% var(--arrow-width)
    );
    --arrow-down: polygon(
      var(--arrow-width) 25%,
      0 calc(25% + var(--arrow-width)),
      50% calc(75% + var(--arrow-width)),
      100% calc(25% + var(--arrow-width)),
      calc(100% - var(--arrow-width)) 25%,
      50% calc(75% - var(--arrow-width)),
      var(--arrow-width) 25%
    );
    --duration-fast: 0.3s;
    --duration-normal: 0.6s;
    --duration-slow: 1.6s;
    --ease-in-sine: cubic-bezier(0.12, 0, 0.39, 0);
    --ease-out-sine: cubic-bezier(0.61, 1, 0.88, 1);
    --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
    --ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
    --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-in-quint: cubic-bezier(0.64, 0, 0.78, 0);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
    --ease-in-circ: cubic-bezier(0.55, 0, 1, 0.45);
    --ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
    --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
    --ease-in-quad: cubic-bezier(0.11, 0, 0.5, 0);
    --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
    --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
    --ease-in-back: cubic-bezier(0.36, 0, 0.66, -0.56);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    --viewport: var(--design-width-sm);
  }

  @media (width >= 48rem) {
    :root {
      --viewport: var(--design-width-md, var(--design-width-sm));
    }
  }

  @media (width >= 64rem) {
    :root {
      --viewport: var(--design-width-lg);
    }
  }

  :root {
    --z-index-header: 100;
    --z-index-modal: 9999;
    --z-index-over: 30;
    --z-index-middle: 20;
    --z-index-under: 1;
    --site-color: #990;
    --gray-color: #666;
    --font-color: #fff;
    --white-color: #fff;
    --bg-color-main: #000;
    --black-color: #000;
    --font-serif-ja:
      "Yu Mincho", "YuMincho", "游明朝", "Hiragino Mincho ProN",
      "Hiragino Mincho Pro", "MS PMincho", serif;
  }
}

@layer vendors;

@layer base {
  *,
  :before,
  :after {
    box-sizing: border-box;
    text-underline-offset: 0.25em;
    border-width: 1px;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
  }

  :where(html) {
    font-family: var(--base-font-family), system-ui, sans-serif;
    font-weight: var(--base-font-weight, 400);
    line-height: var(--base-leading, 1.5);
    color: var(--base-color, initial);
    letter-spacing: var(--base-tracking, initial);
    overflow-wrap: anywhere;
    color-scheme: var(--base-color-scheme, only light);
    scrollbar-gutter: stable;
    background-color: var(--base-background-color, initial);
    line-break: strict;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  :where(html:has(dialog:modal[open], :popover-open)) {
    overflow: hidden;
  }

  :where(body) {
    min-block-size: 100svb;
    overflow-x: clip;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--base-font-heading-weight, 700);
  }

  :where(h1) {
    font-size: var(--base-font-heading-1, unset);
  }

  :where(h2) {
    font-size: var(--base-font-heading-2, unset);
  }

  :where(h3) {
    font-size: var(--base-font-heading-3, unset);
  }

  :where(h4) {
    font-size: var(--base-font-heading-4, unset);
  }

  :where(h5) {
    font-size: var(--base-font-heading-5, unset);
  }

  :where(h6) {
    font-size: var(--base-font-heading-6, unset);
  }

  :where(hr) {
    border-block-start-style: solid;
  }

  :where(ul, ol) {
    list-style-type: "";
  }

  :where(address:lang(ja)) {
    font-style: unset;
  }

  :where(b, strong) {
    font-weight: 700;
  }

  :where(small) {
    font-size: max(0.625rem, 0.875em);
  }

  :where(code, kbd, samp) {
    font-family: ui-monospace, monospace;
  }

  :where(:any-link) {
    color: unset;
    text-decoration-skip-ink: auto;
  }

  :where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
  }

  :where(img, picture, svg, video) {
    block-size: auto;
    max-inline-size: 100%;
  }

  :where(svg) {
    fill: currentColor;
  }

  :where(table) {
    border-collapse: collapse;
  }

  :where(caption, th) {
    text-align: unset;
  }

  :where(th) {
    font-weight: 700;
  }

  :where(input, button, textarea, select, optgroup) {
    color: unset;
    letter-spacing: inherit;
    word-spacing: inherit;
    font: unset;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
  }

  :where(textarea) {
    resize: vertical;
    resize: block;
  }

  :where(textarea:not([rows])) {
    min-block-size: 10em;
  }

  :where(button, label, select, summary, [role="button"], [role="option"]) {
    cursor: pointer;
  }

  :where(input[type="file"])::-webkit-file-upload-button {
    cursor: pointer;
  }

  :where(input[type="file"])::file-selector-button {
    cursor: pointer;
  }

  :where([disabled], label:has(> input:disabled), label:has(+ input:disabled)) {
    cursor: not-allowed;
  }

  :where(button, [role="button"]) {
    touch-action: manipulation;
    border-style: solid;
  }

  :where(dialog, [popover]) {
    max-inline-size: unset;
    max-block-size: unset;
    color: unset;
    background-color: unset;
    border-style: none;
    margin: auto;
  }

  :where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
    display: none;
  }

  :where([aria-disabled="true"]) {
    cursor: not-allowed;
  }

  :where([aria-busy="true"]) {
    cursor: progress;
  }

  :where([aria-controls]) {
    cursor: pointer;
  }

  :where([aria-hidden="false"][hidden]) {
    display: initial;
  }

  :where([aria-hidden="false"][hidden]):not(:focus) {
    clip: rect(0, 0, 0, 0);
    position: absolute;
  }

  :where([hidden]:not([hidden="until-found"])) {
    display: none;
  }

  :where(:focus:not(:focus-visible)) {
    outline: none;
  }

  :where(:focus-visible, :target) {
    scroll-margin-block: 8vh;
  }

  :where(.visually-hidden:not(:focus-within, :active)) {
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    user-select: none !important;
    border: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    position: absolute !important;
    overflow: hidden !important;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    :before,
    :after,
    ::backdrop {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      animation-delay: unset !important;
      transition-delay: unset !important;
      scroll-behavior: auto !important;
      view-transition-name: none !important;
      transition-duration: 0.01ms !important;
    }
  }

  body {
    color: var(--font-color);
    font-size: px2rem(18);
    font-family: var(--font-serif-ja);
    background-color: var(--bg-color-main);
  }

  @media (width >= 36rem) {
    body {
      font-size: px2rem(19);
    }
  }

  body.is-modal-open {
    overflow: hidden;
  }
}

@layer layouts {
  .l-container {
    width: min(90%, 1000px);
    margin-inline: auto;
  }
}

@layer common {
  .c-header {
    z-index: var(--z-index-header);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }

  .c-header__inner {
    background-color: var(--bg-color-main);
    justify-content: space-between;
    align-items: center;
    height: 66px;
    display: flex;
    overflow-y: hidden;
  }

  .c-header__inner.--top {
    background-color: #0000;
  }

  .c-header__inner.is-active {
    background-color: var(--bg-color-main);
    transition: background-color 0.3s;
  }

  @media (width >= 36rem) {
    .c-header__inner {
      height: 77px;
    }
  }

  .c-header__logo {
    width: 100px;
    margin-left: clamp(1.875rem, 0.206311rem + 7.11974vi, 8.75rem);
  }

  @media (width >= 48rem) {
    .c-header__logo {
      width: clamp(6.25rem, 5.27913rem + 4.1424vi, 10.25rem);
    }
  }

  .c-header__nav {
    display: none;
  }

  @media (width >= 36rem) {
    .c-header__nav {
      display: block;
    }
  }

  .c-header__navList {
    grid-template-columns: repeat(3, auto);
    display: grid;
  }

  .c-header__navItem:nth-child(2) {
    margin-left: 5.2vw;
    margin-right: 2.6vw;
  }

  @media (width >= 48rem) {
    .c-header__navItem:nth-child(2) {
      margin-left: 10.4vw;
      margin-right: 5.2vw;
    }
  }

  .c-header__navLink {
    font-family: var(--font-sans-ja);
    font-size: clamp(1.125rem, 1.09466rem + 0.12945vi, 1.25rem);
    padding: 0.5em;
    font-weight: 500;
    text-decoration: none;
    position: relative;
  }

  .c-header__navLink.--contact {
    background-color: var(--site-color);
    padding: 18px 23px;
    line-height: 1.3;
    transition: filter 0.3s;
  }

  .c-header__navLink.--contact:hover {
    filter: brightness(1.2);
    transition: filter 0.3s;
  }

  @media (width >= 36rem) {
    .c-header__navLink.--contact {
      padding: 32px 40px 30px;
      line-height: 1.6;
    }

    @media (width >= 48rem) {
      .c-header__navLink.--contact {
        padding: 32px 52px 30px;
        line-height: 1.8;
      }
    }
  }

  @media (width >= 48rem) {
    .c-header__navLink.--contact {
      padding: 32px 52px 26px;
    }
  }

  .c-header__navLink.--line:after {
    content: "";
    transform-origin: 100% 0;
    background-color: #fff;
    width: 100%;
    height: 1px;
    transition: transform 0.3s;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scale(0, 1);
  }

  .c-header__navLink.--line:hover:after {
    transform-origin: 0 0;
    transition: transform 0.3s;
    transform: scale(1);
  }

  .c-header__spMenu {
    grid-template-columns: auto auto;
    height: 100%;
    display: grid;
  }

  @media (width >= 36rem) {
    .c-header__spMenu {
      display: none;
    }
  }

  .c-header__spLinkWrapper {
    background-color: var(--site-color);
    place-items: center;
    height: 100%;
    display: grid;
  }

  .c-header__spMenuLink {
    font-family: var(--font-sans-ja);
    font-size: clamp(0.875rem, 0.84466rem + 0.12945vi, 1rem);
    font-weight: 500;
    text-decoration: none;
  }

  .c-header__spMenuLink.--contact {
    padding: 18px 23px;
    display: block;
  }

  .c-header__hamburger {
    cursor: pointer;
    background-color: #000;
    border: none;
    outline: none;
    place-items: center;
    width: 80px;
    display: grid;
  }

  @media (width >= 36rem) {
    .c-header__hamburger {
      display: none;
    }
  }

  .c-header__hamburgerLine {
    background-color: #fff;
    width: 37px;
    height: 2px;
    transition: all 0.4s;
    display: block;
  }

  .c-header__hamburgerLine:before,
  .c-header__hamburgerLine:after {
    content: "";
    background-color: #fff;
    width: 100%;
    height: 2px;
    transition: all 0.4s;
    display: block;
  }

  .c-header__hamburgerLine:before {
    transform: translateY(-11px);
  }

  .c-header__hamburgerLine:after {
    transform: translateY(9px);
  }

  .c-heading {
    font-size: px2rem(26);
    font-weight: 600;
  }

  .c-heading.--works,
  .c-heading.--company {
    font-size: px2rem(26);
  }

  @media (width >= 25rem) {
    .c-heading.--works,
    .c-heading.--company {
      font-size: px2rem(30);
    }
  }

  @media (width >= 36rem) {
    .c-heading {
      font-size: px2rem(40);
    }

    .c-heading.--works,
    .c-heading.--company {
      font-size: px2rem(40);
    }
  }

  .c-heading.--intro {
    text-align: center;
  }

  .c-section {
    position: relative;
  }

  .c-section.--works {
    background-color: var(--site-color);
  }

  .c-section.--company {
    background-color: var(--gray-color);
  }

  .c-section__wrapper {
    padding-left: 0;
  }

  @media (width >= 36rem) {
    .c-section__wrapper {
      padding-left: 24px;
    }
  }

  .c-section__wrapper.--works {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  @media (width >= 36rem) {
    .c-section__wrapper.--works {
      padding-top: 60px;
      padding-bottom: 42px;
    }
  }

  .c-section__wrapper.--company {
    padding-top: 77px;
    padding-bottom: 46px;
  }

  @media (width >= 36rem) {
    .c-section__wrapper.--company {
      padding-top: 124px;
      padding-bottom: 64px;
    }
  }

  .c-section__imageWrapper {
    width: 50%;
    height: 100%;
    display: grid;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
  }

  .c-section__imageWrapper:before {
    content: "";
    background: -moz-linear-gradient(
      -4.3% 51.85% 0deg,
      #fff 0%,
      #00000080 100%
    );
    background: -webkit-linear-gradient(0deg, #fff 0%, #00000080 100%);
    background: -o-linear-gradient(0deg, #fff 0%, #00000080 100%);
    background: -ms-linear-gradient(0deg, #fff 0%, #00000080 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000' ,GradientType=0)";
    width: 120%;
    height: 100%;
    filter: progid:DXImageTransform. Microsoft. gradient(startColorstr= "#FFFFFF", endColorstr= "#000000", GradientType= 1);
    mix-blend-mode: multiply;
    background: linear-gradient(90deg, #fff 0%, #00000080 100%);
    position: absolute;
    top: 0;
    left: 0;
  }

  .c-section__imageWrapper.--works {
    grid-template-rows: repeat(3, 33.3%);
    grid-template-columns: 1fr;
    width: 39%;
  }

  @media (width >= 48rem) {
    .c-section__imageWrapper.--works {
      grid-template-rows: 1fr;
      grid-template-columns: repeat(3, 33.3%);
      width: 50%;
    }
  }

  .c-section__imageWrapper.--company {
    grid-template-columns: 1fr;
    width: 65%;
  }

  @media (width >= 36rem) {
    .c-section__imageWrapper.--company {
      width: 55%;
    }
  }

  .c-section__img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
  }

  .c-btn {
    z-index: 1;
    width: fit-content;
    position: relative;
  }

  .c-btn:after {
    content: "";
    background-image: url("/assets/images/c-arrow-DwbIv73A.svg");
    background-size: cover;
    width: 29px;
    height: 10px;
    transition: transform 0.3s;
    display: block;
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
  }

  .c-btn:hover:after {
    transition: transform 0.3s;
    transform: translateY(-50%) translateX(5px);
  }

  .c-btn__link {
    width: 100%;
    height: 100%;
    font-size: px2rem(18);
    padding: 7px 25px 8px 23px;
    font-weight: 500;
    text-decoration: none;
    display: block;
  }

  .c-btn__link.--gray {
    background: linear-gradient(135deg, #666 0% 66.44%, #1e1e00 100%);
  }

  .c-btn__link.--accent {
    background: linear-gradient(135deg, #990 0% 66.44%, #1e1e00 100%);
  }

  @media (width >= 48rem) {
    .c-btn__link {
      font-size: px2rem(20);
      padding: 9px 30px 10px 27px;
    }
  }

  .c-footer {
    padding-top: 68px;
    padding-bottom: 18px;
  }

  .c-footer__inner {
    grid-template-columns: 1fr;
    place-items: center;
    gap: 30px;
    display: grid;
  }

  @media (width >= 36rem) {
    .c-footer__inner {
      grid-template-columns: repeat(2, auto);
      gap: 127px;
    }
  }

  @media (width >= 48rem) {
    .c-footer__logo {
      width: clamp(9.625rem, 9.4733rem + 0.647249vi, 10.25rem);
    }
  }

  .c-footer__info {
    font-family: var(--font-sans-ja);
    font-size: px2rem(14);
  }

  @media (width >= 48rem) {
    .c-footer__info {
      font-size: px2rem(18);
    }
  }

  .c-footer__copyright {
    text-align: center;
    font-family: var(--font-sans-ja);
    font-size: px2rem(14);
    margin-top: 72px;
  }

  .c-hero {
    background-color: var(--site-color);
    align-items: center;
    height: 270px;
    margin-top: 65px;
    display: grid;
    position: relative;
  }

  @media (width >= 36rem) {
    .c-hero {
      height: 340px;
      margin-top: 76px;
    }
  }

  .c-hero__inner {
    width: min(90%, 1000px);
    margin-inline: auto;
  }

  .c-hero__heading {
    font-size: px2rem(28);
    line-height: 1;
  }

  @media (width >= 25rem) {
    .c-hero__heading {
      font-size: px2rem(34);
    }
  }

  @media (width >= 36rem) {
    .c-hero__heading {
      font-size: px2rem(44);
    }
  }

  .c-hero__list {
    margin-top: 24px;
  }

  .c-hero__item {
    font-family: var(--font-sans-ja);
    font-size: px2rem(13);
    font-weight: 500;
    line-height: 1.67;
  }

  .c-hero__item:before {
    content: "ー";
    display: inline-block;
  }

  @media (width >= 25rem) {
    .c-hero__item {
      font-size: clamp(0.875rem, 0.708131rem + 0.711974vi, 1.5625rem);
    }
  }

  @media (width >= 36rem) {
    .c-hero__item {
      font-size: px2rem(22);
      line-height: 1.52;
    }
  }

  @media (width >= 48rem) {
    .c-hero__item {
      font-size: px2rem(25);
    }
  }

  .c-hero__imageWrapper {
    width: min(46%, 250px);
    height: 100%;
    display: grid;
    position: absolute;
    top: 0;
    right: 0;
  }

  @media (width >= 48rem) {
    .c-hero__imageWrapper {
      width: min(61%, 760px);
    }
  }

  .c-hero__imageWrapper.--twice {
    aspect-ratio: 50 / 27;
    object-fit: cover;
    grid-template-rows: repeat(2, 50%);
    grid-template-columns: 1fr;
    width: min(46.3%, 250px);
  }

  @media (width >= 48rem) {
    .c-hero__imageWrapper.--twice {
      grid-template-rows: 1fr;
      grid-template-columns: repeat(2, 50%);
      width: min(55%, 760px);
    }
  }

  .c-hero__imageWrapper:after {
    z-index: 1;
    content: "";
    background-color: var(--bg-color-main);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  .c-hero__image {
    z-index: 10;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: relative;
  }

  .c-hero__image.--left {
    object-position: center;
    opacity: 0.9;
  }

  .c-hero__image.--right {
    object-position: right center;
    opacity: 0.9;
  }

  .c-title {
    width: fit-content;
    font-size: clamp(2.25rem, 2.18932rem + 0.2589vi, 2.5rem);
    color: var(--site-color);
    margin-inline: auto;
    padding-bottom: 8px;
    line-height: 1.5;
    position: relative;
  }

  .c-title:after {
    content: "";
    background-color: var(--site-color);
    width: 80px;
    height: 2px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

@layer components {
  :where(.grid) {
    --grid-fit: repeat(
      auto-fit,
      minmax(min(var(--grid-min, 400px), 100%), 1fr)
    );
    --grid-fill: repeat(
      auto-fill,
      minmax(min(var(--grid-min, 400px), 100%), 1fr)
    );
    --grid-cols: none;
    --gap: 0;
    grid-template-columns: var(--grid-cols);
    gap: var(--gap);
    display: grid;
  }

  :where(.container) {
    --container-name: container;
    --layout: flow-root;
    --max-size: none;
    --offset-start: 0;
    --offset-end: 0;
    --offset: var(--offset-start) var(--offset-end);
    box-sizing: content-box;
    display: block var(--layout);
    max-inline-size: var(--max-size);
    padding-inline: var(--offset);
    margin-inline: auto;
  }

  .fv {
    background-image: url("/assets/images/t-fv-bg-d3hOXzYb.png");
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 617px;
    overflow: hidden;
  }

  @media (width >= 36rem) {
    .fv {
      height: 600px;
    }
  }

  .fv__inner {
    grid-template-rows: repeat(2, auto);
    grid-template-columns: 62.8% 1fr;
    column-gap: 13px;
    height: 100%;
    display: grid;
  }

  @media (width >= 36rem) {
    .fv__inner {
      grid-template-rows: 43.3% 1fr;
      grid-template-columns: 39% 1fr;
    }
  }

  .fv__logoArea {
    grid-area: 1 / 1 / 2 / 2;
    align-self: center;
    width: min(100%, 517px);
    margin-top: -10px;
    margin-left: -6px;
  }

  @media (width >= 36rem) {
    .fv__logoArea {
      grid-area: 1 / 1 / 3 / 2;
      margin-top: -80px;
      margin-left: -14px;
    }
  }

  .fv__logo {
    transform-origin: center;
    will-change: transform, opacity;
    width: 100%;
    height: auto;
  }

  .fv__heading {
    width: clamp(18.75rem, 13.926rem + 20.5825vi, 38.625rem);
    grid-area: 2 / 1 / 3 / 3;
    place-self: end center;
  }

  .fv__heading img {
    width: 100%;
  }

  @media (width >= 36rem) {
    .fv__heading {
      grid-area: 1 / 2 / 2 / 3;
      justify-self: start;
      width: min(81%, 618px);
    }
  }

  .fv__imageContainer {
    flex-direction: column-reverse;
    grid-area: 1 / 2 / 2 / 3;
    align-items: flex-end;
    gap: 12px;
    margin-right: 10%;
    display: flex;
  }

  @media (width >= 36rem) {
    .fv__imageContainer {
      grid-area: 2 / 2 / 3 / 3;
      grid-template-rows: auto;
      grid-template-columns: auto 42px auto 28px auto 1fr;
      place-items: start center;
      gap: 0;
      margin-top: 31px;
      display: grid;
    }
  }

  .fv__imageFigure {
    width: 92px;
  }

  .fv__imageFigure.--middle {
    grid-row: 4;
    margin-right: auto;
  }

  @media (width >= 36rem) {
    .fv__imageFigure {
      width: 100%;
    }

    .fv__imageFigure.--high,
    .fv__imageFigure.--middle,
    .fv__imageFigure.--low {
      grid-row: 1;
    }

    .fv__imageFigure.--high {
      grid-column: 5;
    }

    .fv__imageFigure.--middle {
      grid-column: 3;
      padding-top: 60px;
    }

    .fv__imageFigure.--low {
      grid-column: 1;
      padding-top: 96px;
    }
  }

  .intro {
    padding: 4rem 0 42px;
  }

  @media (width >= 36rem) {
    .intro {
      padding: 2rem 0 83px;
    }
  }

  .intro__conatiner {
    margin-inline: auto;
    grid-template-columns: 1fr;
    gap: 42px;
    width: 100%;
    margin-top: 1rem;
    display: grid;
  }

  @media (width >= 48rem) {
    .intro__conatiner {
      grid-template-columns: 56% 1fr;
      gap: min(34px, 3.4vw);
      margin-top: 50px;
    }
  }

  .intro__textWrapper {
    font-feature-settings: "palt" 1;
    font-weight: 600;
    line-height: 1.68;
  }

  @media (width >= 48rem) {
    .intro__textWrapper {
      letter-spacing: -0.0124em;
    }
  }

  .intro___text {
    text-indent: 1em;
  }

  .intro___text span {
    font-feature-settings: "pkna";
  }

  .intro__illust {
    width: 100%;
    margin: 0 auto;
  }

  .intro__illust img {
    width: 80%;
    margin: 0 auto;
  }

  @media (width >= 48rem) {
    .intro__illust img {
      width: 100%;
    }
  }

  .works__list {
    margin-top: 1rem;
  }

  .works__item {
    font-family: var(--font-sans-ja);
    font-size: px2rem(16);
    font-weight: 500;
    line-height: 1.52;
  }

  .works__item:before {
    content: "ー";
    display: inline-block;
  }

  @media (width >= 25rem) {
    .works__item {
      font-size: px2rem(18);
    }
  }

  @media (width >= 36rem) {
    .works__item {
      font-size: clamp(1.25rem, 1.17415rem + 0.323625vi, 1.5625rem);
    }
  }

  .works__btnArea {
    margin-top: 32px;
  }

  .company__btnArea {
    margin-top: 47px;
  }

  .content {
    font-family: var(--font-sans-ja);
    padding-top: 56px;
  }

  @media (width >= 36rem) {
    .content {
      padding-top: 80px;
    }
  }

  .content__heading {
    font-size: px2rem(22);
    text-align: center;
  }

  @media (width >= 25rem) {
    .content__heading {
      font-size: clamp(1.625rem, 1.56432rem + 0.2589vi, 1.875rem);
    }
  }

  .content__list {
    padding-left: 20px;
  }

  .content__type {
    font-family: var(--font-sans-ja);
    font-size: px2rem(18);
    font-weight: 400;
    line-height: 1.785;
  }

  @media (width >= 25rem) {
    .content__type {
      font-size: clamp(1.25rem, 1.12864rem + 0.517799vi, 1.75rem);
    }
  }

  .content__type:before {
    content: "■";
    margin-left: -20px;
    margin-right: 8px;
    display: inline-block;
  }

  .partner {
    margin-top: 48px;
  }

  @media (width >= 36rem) {
    .partner {
      margin-top: 120px;
    }
  }

  .partner__list {
    margin-top: 24px;
  }

  .partner__text {
    font-family: var(--font-sans-ja);
    font-size: clamp(1.125rem, 1.03398rem + 0.38835vi, 1.5rem);
    font-weight: 400;
    line-height: 1.75;
  }

  .partner__text span {
    display: block;
  }

  .overview {
    padding-top: 56px;
  }

  @media (width >= 36rem) {
    .overview {
      padding-top: 80px;
    }
  }

  .overview__table {
    font-family: var(--font-sans-ja);
    font-size: px2rem(20);
    margin-top: 40px;
    line-height: 1.58;
  }

  @media (-md) {
    .overview__table {
      font-size: px2rem(24);
    }
  }

  .overview__row {
    grid-template-columns: 1fr;
    display: grid;
  }

  @media (width >= 48rem) {
    .overview__row {
      grid-template-columns: 38.9% 1fr;
    }
  }

  @media (width >= 48rem) {
    .overview__row + .overview__row {
      border-top: 1px solid var(--white-color);
    }
  }

  .overview__term {
    background-color: #333;
    padding: 11px 9px;
    font-weight: 700;
  }

  @media (width >= 36rem) {
    .overview__term {
      padding: 30px 0 30px 27px;
    }
  }

  .overview__description {
    padding: 18px 9px;
  }

  @media (width >= 36rem) {
    .overview__description {
      padding: 30px 0 30px 28px;
    }
  }

  .overview__description a {
    text-decoration: none;
    transition:
      color 0.3s,
      text-decoration 0.3s;
  }

  .overview__description a:hover {
    color: var(--site-color);
    text-decoration: underline;
    transition:
      color 0.3s,
      text-decoration 0.3s;
  }

  .overview__descriptionWrapper {
    grid-template-columns: repeat(2, fit-content(100%));
    display: grid;
  }

  .overview__cell.--01 {
    grid-area: 1 / 1 / 2 / 2;
  }

  .overview__cell.--02 {
    grid-area: 1 / 2 / 2 / 3;
  }

  .overview__cell.--03 {
    grid-area: 2 / 2 / 3 / 3;
  }

  .overview__label {
    width: 8.5em;
    display: inline-block;
  }

  .overview__businessList li {
    display: inline-block;
  }

  .overview__businessList li:after {
    content: "、";
  }

  .overview__businessList li:last-of-type:after {
    content: "";
  }
}

@layer utilities {
  .u-visuallyHidden:not(:focus) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .u-dropshadow {
    text-shadow:
      0 0 24px #00000059,
      0 0 14px #000000a6;
  }
}

@layer general;

@layer conponents {
  .partner {
    margin-top: 48px;
  }

  @media (width >= 36rem) {
    .partner {
      margin-top: 120px;
    }
  }

  .partner__list {
    margin-top: 24px;
  }

  .partner__text {
    font-family: var(--font-sans-ja);
    font-size: clamp(1.125rem, 1.03398rem + 0.38835vi, 1.5rem);
    font-weight: 400;
    line-height: 1.75;
  }

  .partner__text span {
    display: block;
  }

  .exsample {
    padding-top: 56px;
  }

  @media (width >= 36rem) {
    .exsample {
      padding-top: 84px;
    }
  }

  .exsample__title {
    text-align: center;
  }

  .exsample__list {
    text-align: center;
    font-family: var(--font-sans-ja);
    font-size: clamp(1.125rem, 1.09466rem + 0.12945vi, 1.25rem);
  }

  .exsample__item {
    padding-bottom: 24px;
  }

  .exsample__item:last-child {
    padding-bottom: 0;
  }

  .exsample__heading {
    font-size: clamp(1.375rem, 1.34466rem + 0.12945vi, 1.5rem);
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 400;
  }

  @media (width >= 36rem) {
    .exsample__heading {
      margin-top: 50px;
    }
  }

  .exsample__photoItem {
    grid-template-columns: repeat(2, 50%);
    display: grid;
    overflow: hidden;
  }

  @media (width >= 36rem) {
    .exsample__photoItem {
      grid-template-columns: repeat(4, 25%);
      padding-bottom: 0;
    }
  }

  .exsample__imageWrapper {
    aspect-ratio: 25 / 17;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: relative;
  }

  .exsample__imageWrapper:after {
    z-index: 1;
    content: "";
    background: -moz-linear-gradient(
      -5.13% -8.07% -45deg,
      #fff 0%,
      #fff 63.69%,
      #00000080 100%
    );
    background: -webkit-linear-gradient(-45deg, #fff 0% 63.69%, #00000080 100%);
    background: -o-linear-gradient(-45deg, #fff 0% 63.69%, #00000080 100%);
    background: -ms-linear-gradient(
      -45deg,
      #fff 0%,
      #fff 63.69%,
      #00000080 100%
    );
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000' ,GradientType=0)";
    width: 100%;
    height: 100%;
    filter: progid:DXImageTransform. Microsoft. gradient(startColorstr= "#FFFFFF", endColorstr= "#000000", GradientType= 1);
    mix-blend-mode: multiply;
    background: linear-gradient(135deg, #fff 0% 63.69%, #00000080 100%);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  .exsample__imageWrapper img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .access {
    padding-top: 66px;
  }

  @media (width >= 36rem) {
    .access {
      padding-top: 100px;
    }
  }

  .access__container {
    width: 100%;
    height: 225px;
    margin-top: 30px;
  }

  @media (width >= 36rem) {
    .access__container {
      height: 400px;
      margin-top: 56px;
    }
  }

  .access__address {
    font-family: var(--font-sans-ja);
    margin-top: 24px;
    font-weight: 400;
  }

  .access__tel {
    font-family: var(--font-sans-ja);
    font-weight: 400;
  }

  .timeline {
    padding-top: 72px;
    padding-bottom: 20px;
  }

  @media (width >= 36rem) {
    .timeline {
      padding-top: 104px;
      padding-bottom: 70px;
    }
  }

  .timeline__list {
    margin-top: 54px;
  }

  .timeline__item {
    grid-template-columns: 1fr;
    display: grid;
  }

  @media (width >= 48rem) {
    .timeline__item {
      grid-template-columns: 28% 1fr;
    }
  }

  .timeline__item + .timeline__item {
    margin-top: 26px;
  }

  @media (width >= 48rem) {
    .timeline__item + .timeline__item {
      margin-top: 60px;
    }
  }

  .timeline__date {
    font-weight: 600;
    font-size: clamp(1.125rem, 1.03398rem + 0.38835vi, 1.5rem);
    background-image: url("/assets/images/label-VaG-F5Kk.png");
    background-position: 2px 1px;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .timeline__date span {
    padding-right: 0.2em;
  }

  .timeline__era {
    padding-left: clamp(1.8125rem, 1.64563rem + 0.711974vi, 2.5rem);
  }

  .timeline__year {
    font-size: clamp(1.375rem, 1.25364rem + 0.517799vi, 1.875rem);
  }

  .timeline__year span {
    font-size: clamp(1.125rem, 1.03398rem + 0.38835vi, 1.5rem);
  }

  .timeline__month {
    font-size: clamp(1.375rem, 1.25364rem + 0.517799vi, 1.875rem);
    padding-left: 0.2em;
  }

  .timeline__month span {
    font-size: clamp(1.125rem, 1.03398rem + 0.38835vi, 1.5rem);
  }

  .timeline__text {
    font-family: var(--font-sans-ja);
    font-size: clamp(1.125rem, 1.03398rem + 0.38835vi, 1.5rem);
    margin-left: -2vw;
    padding-top: 12px;
    padding-left: 42px;
    line-height: 1.66;
  }

  @media (width >= 48rem) {
    .timeline__text {
      margin-left: 0;
      padding-top: 0;
      padding-left: 0;
    }
  }

  .contact {
    padding-top: 96px;
    padding-bottom: 52px;
  }

  .contact__text {
    text-align: center;
    font-weight: 600;
    font-size: clamp(1.5rem, 1.40898rem + 0.38835vi, 1.875rem);
  }

  .contact__text span {
    display: block;
  }

  @media (width >= 36rem) {
    .contact__text span {
      display: inline;
    }
  }

  .contact__container {
    margin-top: 60px;
    color: #000;
    text-align: center;
    background-color: #fff;
    width: min(800px, 80%);
    margin-inline: auto;
    padding-top: 50px;
    padding-bottom: 45px;
  }

  @media (width >= 25rem) {
    .contact__container {
      padding-top: 75px;
      padding-bottom: 70px;
    }
  }

  @media (width >= 36rem) {
    .contact__container {
      padding-top: 70px;
    }
  }

  .contact__tel {
    font-size: px2rem(40);
    font-family: var(--font-sans-ja);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 8px;
    font-weight: 900;
    display: flex;
  }

  @media (width >= 25rem) {
    .contact__tel {
      gap: clamp(0.75rem, 0.567961rem + 0.776699vi, 1.5rem);
      flex-direction: row;
    }
  }

  @media (width >= 36rem) {
    .contact__tel {
      padding-left: 0;
    }
  }

  .contact__telIcon {
    width: 44px;
    height: 44px;
  }

  .contact__phoneNumber {
    text-decoration: none;
  }

  .contact__phoneNumber span {
    display: inline-block;
  }

  .contact__info {
    font-family: var(--font-sans-ja);
    font-size: px2rem(18);
    text-align: center;
    margin-top: 56px;
    font-weight: 500;
    line-height: 1.81;
  }

  @media (width >= 25rem) {
    .contact__info {
      font-size: px2rem(20);
    }
  }

  @media (width >= 36rem) {
    .contact__info {
      font-size: px2rem(24);
    }
  }
}
body {
  color: var(--font-color);
  font-size: 1.125rem;
  font-family: var(--font-serif-ja);
  background-color: var(--bg-color-main);
}

@media (width >= 36rem) {
  body {
    font-size: 1.1875rem;
  }
}

body.is-modal-open {
  overflow: hidden;
}
.c-btn {
  z-index: 1;
  width: fit-content;
  position: relative;
}

.c-btn:after {
  content: "";
  background-image: url("/assets/images/c-arrow-DwbIv73A.svg");
  background-size: cover;
  width: 29px;
  height: 10px;
  transition: transform 0.3s;
  display: block;
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
}

.c-btn:hover:after {
  transition: transform 0.3s;
  transform: translateY(-50%) translateX(5px);
}

.c-btn__link {
  width: 100%;
  height: 100%;
  padding: 7px 25px 8px 23px;
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  display: block;
}

.c-btn__link.--gray {
  background: linear-gradient(135deg, #666 0% 66.44%, #1e1e00 100%);
}

.c-btn__link.--accent {
  background: linear-gradient(135deg, #990 0% 66.44%, #1e1e00 100%);
}

@media (width >= 48rem) {
  .c-btn__link {
    padding: 9px 30px 10px 27px;
    font-size: 1.25rem;
  }
}
.c-footer {
  padding-top: 68px;
  padding-bottom: 18px;
}

.c-footer__inner {
  grid-template-columns: 1fr;
  place-items: center;
  gap: 30px;
  display: grid;
}

@media (width >= 36rem) {
  .c-footer__inner {
    grid-template-columns: repeat(2, auto);
    gap: 127px;
  }
}

@media (width >= 48rem) {
  .c-footer__logo {
    width: clamp(9.625rem, 9.4733rem + 0.647249vi, 10.25rem);
  }
}

.c-footer__info {
  font-family: var(--font-sans-ja);
  font-size: 0.875rem;
}

@media (width >= 48rem) {
  .c-footer__info {
    font-size: 1.125rem;
  }
}

.c-footer__copyright {
  text-align: center;
  font-family: var(--font-sans-ja);
  margin-top: 72px;
  font-size: 0.875rem;
}
.c-header {
  z-index: var(--z-index-header);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.c-header__inner {
  background-color: var(--bg-color-main);
  justify-content: space-between;
  align-items: center;
  height: 66px;
  display: flex;
  overflow-y: hidden;
}

.c-header__inner.--top {
  background-color: #0000;
}

.c-header__inner.is-active {
  background-color: var(--bg-color-main);
  transition: background-color 0.3s;
}

@media (width >= 36rem) {
  .c-header__inner {
    height: 77px;
  }
}

.c-header__logo {
  width: 100px;
  margin-left: clamp(1.875rem, 0.206311rem + 7.11974vi, 8.75rem);
}

@media (width >= 48rem) {
  .c-header__logo {
    width: clamp(6.25rem, 5.27913rem + 4.1424vi, 10.25rem);
  }
}

.c-header__nav {
  display: none;
}

@media (width >= 36rem) {
  .c-header__nav {
    display: block;
  }
}

.c-header__navList {
  grid-template-columns: repeat(3, auto);
  display: grid;
}

.c-header__navItem:nth-child(2) {
  margin-left: 5.2vw;
  margin-right: 2.6vw;
}

@media (width >= 48rem) {
  .c-header__navItem:nth-child(2) {
    margin-left: 10.4vw;
    margin-right: 5.2vw;
  }
}

.c-header__navLink {
  font-family: var(--font-sans-ja);
  font-size: clamp(1.125rem, 1.09466rem + 0.12945vi, 1.25rem);
  padding: 0.5em;
  font-weight: 500;
  text-decoration: none;
  position: relative;
}

.c-header__navLink.--contact {
  background-color: var(--site-color);
  padding: 18px 23px;
  line-height: 1.3;
  transition: filter 0.3s;
}

.c-header__navLink.--contact:hover {
  filter: brightness(1.2);
  transition: filter 0.3s;
}

@media (width >= 36rem) {
  .c-header__navLink.--contact {
    padding: 32px 40px 30px;
    line-height: 1.6;
  }

  @media (width >= 48rem) {
    .c-header__navLink.--contact {
      padding: 32px 52px 30px;
      line-height: 1.8;
    }
  }
}

@media (width >= 48rem) {
  .c-header__navLink.--contact {
    padding: 32px 52px 26px;
  }
}

.c-header__navLink.--line:after {
  content: "";
  transform-origin: 100% 0;
  background-color: #fff;
  width: 100%;
  height: 1px;
  transition: transform 0.3s;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scale(0, 1);
}

.c-header__navLink.--line:hover:after {
  transform-origin: 0 0;
  transition: transform 0.3s;
  transform: scale(1);
}

.c-header__spMenu {
  grid-template-columns: auto auto;
  height: 100%;
  display: grid;
}

@media (width >= 36rem) {
  .c-header__spMenu {
    display: none;
  }
}

.c-header__spLinkWrapper {
  background-color: var(--site-color);
  place-items: center;
  height: 100%;
  display: grid;
}

.c-header__spMenuLink {
  font-family: var(--font-sans-ja);
  font-size: clamp(0.875rem, 0.84466rem + 0.12945vi, 1rem);
  font-weight: 500;
  text-decoration: none;
}

.c-header__spMenuLink.--contact {
  padding: 18px 23px;
  display: block;
}

.c-header__hamburger {
  cursor: pointer;
  background-color: #000;
  border: none;
  outline: none;
  place-items: center;
  width: 80px;
  display: grid;
}

@media (width >= 36rem) {
  .c-header__hamburger {
    display: none;
  }
}

.c-header__hamburgerLine {
  background-color: #fff;
  width: 37px;
  height: 2px;
  transition: all 0.4s;
  display: block;
}

.c-header__hamburgerLine:before,
.c-header__hamburgerLine:after {
  content: "";
  background-color: #fff;
  width: 100%;
  height: 2px;
  transition: all 0.4s;
  display: block;
}

.c-header__hamburgerLine:before {
  transform: translateY(-11px);
}

.c-header__hamburgerLine:after {
  transform: translateY(9px);
}
.c-heading {
  font-size: 1.625rem;
  font-weight: 600;
}

.c-heading.--works,
.c-heading.--company {
  font-size: 1.625rem;
}

@media (width >= 25rem) {
  .c-heading.--works,
  .c-heading.--company {
    font-size: 1.875rem;
  }
}

@media (width >= 36rem) {
  .c-heading {
    font-size: 2.5rem;
  }

  .c-heading.--works,
  .c-heading.--company {
    font-size: 2.5rem;
  }
}

.c-heading.--intro {
  text-align: center;
}
.c-hero {
  background-color: var(--site-color);
  align-items: center;
  height: 270px;
  margin-top: 65px;
  display: grid;
  position: relative;
}

@media (width >= 36rem) {
  .c-hero {
    height: 340px;
    margin-top: 76px;
  }
}

.c-hero__inner {
  width: min(90%, 1000px);
  margin-inline: auto;
}

.c-hero__heading {
  font-size: 1.75rem;
  line-height: 1;
}

@media (width >= 25rem) {
  .c-hero__heading {
    font-size: 2.125rem;
  }
}

@media (width >= 36rem) {
  .c-hero__heading {
    font-size: 2.75rem;
  }
}

.c-hero__list {
  margin-top: 24px;
}

.c-hero__item {
  font-family: var(--font-sans-ja);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.67;
}

.c-hero__item:before {
  content: "ー";
  display: inline-block;
}

@media (width >= 25rem) {
  .c-hero__item {
    font-size: clamp(0.875rem, 0.708131rem + 0.711974vi, 1.5625rem);
  }
}

@media (width >= 36rem) {
  .c-hero__item {
    font-size: 1.375rem;
    line-height: 1.52;
  }
}

@media (width >= 48rem) {
  .c-hero__item {
    font-size: 1.5625rem;
  }
}

.c-hero__imageWrapper {
  width: min(46%, 250px);
  height: 100%;
  display: grid;
  position: absolute;
  top: 0;
  right: 0;
}

@media (width >= 48rem) {
  .c-hero__imageWrapper {
    width: min(61%, 760px);
  }
}

.c-hero__imageWrapper.--twice {
  aspect-ratio: 50 / 27;
  object-fit: cover;
  grid-template-rows: repeat(2, 50%);
  grid-template-columns: 1fr;
  width: min(46.3%, 250px);
}

@media (width >= 48rem) {
  .c-hero__imageWrapper.--twice {
    grid-template-rows: 1fr;
    grid-template-columns: repeat(2, 50%);
    width: min(55%, 760px);
  }
}

.c-hero__imageWrapper:after {
  z-index: 1;
  content: "";
  background-color: var(--bg-color-main);
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.c-hero__image {
  z-index: 10;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-hero__image.--left {
  object-position: center;
  opacity: 0.9;
}

.c-hero__image.--right {
  object-position: right center;
  opacity: 0.9;
}
.c-modal {
  z-index: 1000;
  opacity: 0;
  background-color: #000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition:
    opacity 0.3s,
    transform 0.3s;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(16px);
}

.c-modal.is-open {
  opacity: 1;
  transform: translateY(0);
}

.c-modal.is-open::backdrop {
  opacity: 1;
}

.c-modal.is-close {
  opacity: 0;
  transform: translateY(16px);
}

.c-modal.is-close::backdrop {
  opacity: 0;
}

.c-modal::backdrop {
  opacity: 0;
  background-color: #0009;
  transition: opacity 0.3s;
}

.c-modal__close {
  cursor: pointer;
  background-color: #999;
  border: none;
  outline: none;
  place-items: center;
  width: 80px;
  height: 60px;
  display: grid;
  position: absolute;
  top: 0;
  right: 0;
}

.c-modal__closeLine {
  background-color: var(--black-color);
  width: 32px;
  height: 2px;
  position: relative;
  rotate: 45deg;
}

.c-modal__closeLine:after {
  content: "";
  width: inherit;
  height: inherit;
  background-color: inherit;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  rotate: -90deg;
}

.c-modal__navList {
  margin-inline: auto;
  width: 88.9%;
  margin-top: 15%;
}

.c-modal__navItem {
  font-family: var(--font-sans-ja);
  border-bottom: 1px solid var(--white-color);
  font-size: 1.5rem;
  font-weight: 500;
}

.c-modal__navItem.--contact {
  text-align: center;
  margin-top: 8%;
  border-bottom: none;
  width: 74%;
  margin-inline: auto;
  padding-left: 0;
}

.c-modal__navLink {
  padding: 20px 0 20px 35px;
  text-decoration: none;
  display: block;
  position: relative;
}

.c-modal__navLink:after {
  content: "";
  background-image: url("/assets/images/c-arrow-DwbIv73A.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 25px;
  height: 10px;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.c-modal__navLink.--contact {
  background-color: var(--site-color);
  width: 100%;
  padding: 14px 0 16px;
}

.c-modal__navLink.--contact:after {
  content: none;
}

.c-modal__info {
  width: 100%;
  font-family: var(--font-sans-ja);
  justify-items: center;
  padding: 10svh 0 16px;
  display: grid;
}

@media screen and (height > 700px) {
  .c-modal__info {
    padding: 0;
    position: absolute;
    bottom: 16px;
  }
}

.c-modal__logo {
  width: 154px;
}

.c-modal__address {
  padding-top: 4.6svh;
}

@media screen and (height > 700px) {
  .c-modal__address {
    padding-top: 32px;
  }
}

.c-modal__addressText {
  font-size: 0.875rem;
  line-height: 1.45;
}

.c-modal__addressText:last-child {
  line-height: 2;
}

.c-modal__copy {
  fopnt-weight: 300;
  padding-top: 5.4svh;
  font-size: 0.75rem;
}

@media screen and (height > 700px) {
  .c-modal__copy {
    padding-top: 38px;
  }
}
.c-section {
  position: relative;
}

.c-section.--works {
  background-color: var(--site-color);
}

.c-section.--company {
  background-color: var(--gray-color);
}

.c-section__wrapper {
  padding-left: 0;
}

@media (width >= 36rem) {
  .c-section__wrapper {
    padding-left: 24px;
  }
}

.c-section__wrapper.--works {
  padding-top: 34px;
  padding-bottom: 34px;
}

@media (width >= 36rem) {
  .c-section__wrapper.--works {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}

.c-section__wrapper.--company {
  padding-top: 77px;
  padding-bottom: 46px;
}

@media (width >= 36rem) {
  .c-section__wrapper.--company {
    padding-top: 124px;
    padding-bottom: 64px;
  }
}

.c-section__imageWrapper {
  width: 50%;
  height: 100%;
  display: grid;
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
}

.c-section__imageWrapper:before {
  content: "";
  background: -moz-linear-gradient(-4.3% 51.85% 0deg, #fff 0%, #00000080 100%);
  background: -webkit-linear-gradient(0deg, #fff 0%, #00000080 100%);
  background: -o-linear-gradient(0deg, #fff 0%, #00000080 100%);
  background: -ms-linear-gradient(0deg, #fff 0%, #00000080 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000' ,GradientType=0)";
  width: 120%;
  height: 100%;
  filter: progid:DXImageTransform. Microsoft. gradient(startColorstr= "#FFFFFF", endColorstr= "#000000", GradientType= 1);
  mix-blend-mode: multiply;
  background: linear-gradient(90deg, #fff 0%, #00000080 100%);
  position: absolute;
  top: 0;
  left: 0;
}

.c-section__imageWrapper.--works {
  grid-template-rows: repeat(3, 33.3%);
  grid-template-columns: 1fr;
  width: 39%;
}

@media (width >= 48rem) {
  .c-section__imageWrapper.--works {
    grid-template-rows: 1fr;
    grid-template-columns: repeat(3, 33.3%);
    width: 50%;
  }
}

.c-section__imageWrapper.--company {
  grid-template-columns: 1fr;
  width: 65%;
}

@media (width >= 36rem) {
  .c-section__imageWrapper.--company {
    width: 55%;
  }
}

.c-section__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
.c-title {
  width: fit-content;
  font-size: clamp(2.25rem, 2.18932rem + 0.2589vi, 2.5rem);
  color: var(--site-color);
  margin-inline: auto;
  padding-bottom: 8px;
  line-height: 1.5;
  position: relative;
}

.c-title:after {
  content: "";
  background-color: var(--site-color);
  width: 80px;
  height: 2px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.access {
  padding-top: 66px;
}

@media (width >= 36rem) {
  .access {
    padding-top: 100px;
  }
}

.access__container {
  width: 100%;
  height: 225px;
  margin-top: 30px;
}

@media (width >= 36rem) {
  .access__container {
    height: 400px;
    margin-top: 56px;
  }
}

.access__address {
  font-family: var(--font-sans-ja);
  margin-top: 24px;
  font-weight: 400;
}

.access__tel {
  font-family: var(--font-sans-ja);
  font-weight: 400;
}
.company__btnArea {
  margin-top: 47px;
}
.contact {
  padding-top: 96px;
  padding-bottom: 52px;
}

.contact__text {
  text-align: center;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.40898rem + 0.38835vi, 1.875rem);
}

.contact__text span {
  display: block;
}

@media (width >= 36rem) {
  .contact__text span {
    display: inline;
  }
}

.contact__container {
  margin-top: 60px;
  color: #000;
  text-align: center;
  background-color: #fff;
  width: min(800px, 80%);
  margin-inline: auto;
  padding-top: 50px;
  padding-bottom: 45px;
}

@media (width >= 25rem) {
  .contact__container {
    padding-top: 75px;
    padding-bottom: 70px;
  }
}

@media (width >= 36rem) {
  .contact__container {
    padding-top: 70px;
  }
}

.contact__tel {
  font-size: 2.5rem;
  font-family: var(--font-sans-ja);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 8px;
  font-weight: 900;
  display: flex;
}

@media (width >= 25rem) {
  .contact__tel {
    gap: clamp(0.75rem, 0.567961rem + 0.776699vi, 1.5rem);
    flex-direction: row;
  }
}

@media (width >= 36rem) {
  .contact__tel {
    padding-left: 0;
  }
}

.contact__telIcon {
  width: 44px;
  height: 44px;
}

.contact__phoneNumber {
  text-decoration: none;
}

.contact__phoneNumber span {
  display: inline-block;
}

.contact__info {
  font-family: var(--font-sans-ja);
  text-align: center;
  margin-top: 56px;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.81;
}

@media (width >= 25rem) {
  .contact__info {
    font-size: 1.25rem;
  }
}

@media (width >= 36rem) {
  .contact__info {
    font-size: 1.5rem;
  }
}
.content {
  font-family: var(--font-sans-ja);
  padding-top: 56px;
}

@media (width >= 36rem) {
  .content {
    padding-top: 80px;
  }
}

.content__heading {
  text-align: center;
  font-size: 1.375rem;
}

@media (width >= 25rem) {
  .content__heading {
    font-size: clamp(1.625rem, 1.56432rem + 0.2589vi, 1.875rem);
  }
}

.content__list {
  padding-left: 20px;
}

.content__type {
  font-family: var(--font-sans-ja);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.785;
}

@media (width >= 25rem) {
  .content__type {
    font-size: clamp(1.25rem, 1.12864rem + 0.517799vi, 1.75rem);
  }
}

.content__type:before {
  content: "■";
  margin-left: -20px;
  margin-right: 8px;
  display: inline-block;
}
.exsample {
  padding-top: 56px;
}

@media (width >= 36rem) {
  .exsample {
    padding-top: 84px;
  }
}

.exsample__title {
  text-align: center;
}

.exsample__list {
  text-align: center;
  font-family: var(--font-sans-ja);
  font-size: clamp(1.125rem, 1.09466rem + 0.12945vi, 1.25rem);
}

.exsample__item {
  padding-bottom: 24px;
}

.exsample__item:last-child {
  padding-bottom: 0;
}

.exsample__heading {
  font-size: clamp(1.375rem, 1.34466rem + 0.12945vi, 1.5rem);
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 400;
}

@media (width >= 36rem) {
  .exsample__heading {
    margin-top: 50px;
  }
}

.exsample__photoItem {
  grid-template-columns: repeat(2, 50%);
  display: grid;
  overflow: hidden;
}

@media (width >= 36rem) {
  .exsample__photoItem {
    grid-template-columns: repeat(4, 25%);
    padding-bottom: 0;
  }
}

.exsample__imageWrapper {
  aspect-ratio: 25 / 17;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: relative;
}

.exsample__imageWrapper:after {
  z-index: 1;
  content: "";
  background: -moz-linear-gradient(
    -5.13% -8.07% -45deg,
    #fff 0%,
    #fff 63.69%,
    #00000080 100%
  );
  background: -webkit-linear-gradient(-45deg, #fff 0% 63.69%, #00000080 100%);
  background: -o-linear-gradient(-45deg, #fff 0% 63.69%, #00000080 100%);
  background: -ms-linear-gradient(-45deg, #fff 0%, #fff 63.69%, #00000080 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000' ,GradientType=0)";
  width: 100%;
  height: 100%;
  filter: progid:DXImageTransform. Microsoft. gradient(startColorstr= "#FFFFFF", endColorstr= "#000000", GradientType= 1);
  mix-blend-mode: multiply;
  background: linear-gradient(135deg, #fff 0% 63.69%, #00000080 100%);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.exsample__imageWrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.fv {
  background-image: url("/assets/images/t-fv-bg-d3hOXzYb.png");
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 617px;
  overflow: hidden;
}

@media (width >= 36rem) {
  .fv {
    height: 600px;
  }
}

.fv__inner {
  grid-template-rows: repeat(2, auto);
  grid-template-columns: 62.8% 1fr;
  column-gap: 13px;
  height: 100%;
  display: grid;
}

@media (width >= 36rem) {
  .fv__inner {
    grid-template-rows: 43.3% 1fr;
    grid-template-columns: 39% 1fr;
  }
}

.fv__logoArea {
  grid-area: 1 / 1 / 2 / 2;
  align-self: center;
  width: min(100%, 517px);
  margin-top: -10px;
  margin-left: -6px;
}

@media (width >= 36rem) {
  .fv__logoArea {
    grid-area: 1 / 1 / 3 / 2;
    margin-top: -80px;
    margin-left: -14px;
  }
}

.fv__logo {
  transform-origin: center;
  will-change: transform, opacity;
  width: 100%;
  height: auto;
}

.fv__heading {
  width: clamp(18.75rem, 13.926rem + 20.5825vi, 38.625rem);
  grid-area: 2 / 1 / 3 / 3;
  place-self: end center;
}

.fv__heading img {
  width: 100%;
}

@media (width >= 36rem) {
  .fv__heading {
    grid-area: 1 / 2 / 2 / 3;
    justify-self: start;
    width: min(81%, 618px);
  }
}

.fv__imageContainer {
  flex-direction: column-reverse;
  grid-area: 1 / 2 / 2 / 3;
  align-items: flex-end;
  gap: 12px;
  margin-right: 10%;
  display: flex;
}

@media (width >= 36rem) {
  .fv__imageContainer {
    grid-area: 2 / 2 / 3 / 3;
    grid-template-rows: auto;
    grid-template-columns: auto 42px auto 28px auto 1fr;
    place-items: start center;
    gap: 0;
    margin-top: 31px;
    display: grid;
  }
}

.fv__imageFigure {
  width: 92px;
}

.fv__imageFigure.--middle {
  grid-row: 4;
  margin-right: auto;
}

@media (width >= 36rem) {
  .fv__imageFigure {
    width: 100%;
  }

  .fv__imageFigure.--high,
  .fv__imageFigure.--middle,
  .fv__imageFigure.--low {
    grid-row: 1;
  }

  .fv__imageFigure.--high {
    grid-column: 5;
  }

  .fv__imageFigure.--middle {
    grid-column: 3;
    padding-top: 60px;
  }

  .fv__imageFigure.--low {
    grid-column: 1;
    padding-top: 96px;
  }
}
.intro {
  padding: 4rem 0 42px;
}

@media (width >= 36rem) {
  .intro {
    padding: 2rem 0 83px;
  }
}

.intro__conatiner {
  margin-inline: auto;
  grid-template-columns: 1fr;
  gap: 42px;
  width: 100%;
  margin-top: 1rem;
  display: grid;
}

@media (width >= 48rem) {
  .intro__conatiner {
    grid-template-columns: 56% 1fr;
    gap: min(34px, 3.4vw);
    margin-top: 50px;
  }
}

.intro__textWrapper {
  font-feature-settings: "palt" 1;
  font-weight: 600;
  line-height: 1.68;
}

@media (width >= 48rem) {
  .intro__textWrapper {
    letter-spacing: -0.0124em;
  }
}

.intro___text {
  text-indent: 1em;
}

.intro___text span {
  font-feature-settings: "pkna";
}

.intro__illust {
  width: 100%;
  margin: 0 auto;
}

.intro__illust img {
  width: 80%;
  margin: 0 auto;
}

@media (width >= 48rem) {
  .intro__illust img {
    width: 100%;
  }
}
.overview {
  padding-top: 56px;
}

@media (width >= 36rem) {
  .overview {
    padding-top: 80px;
  }
}

.overview__table {
  font-family: var(--font-sans-ja);
  margin-top: 40px;
  font-size: 1.25rem;
  line-height: 1.58;
}

@media (-md) {
  .overview__table {
    font-size: 1.5rem;
  }
}

.overview__row {
  grid-template-columns: 1fr;
  display: grid;
}

@media (width >= 48rem) {
  .overview__row {
    grid-template-columns: 38.9% 1fr;
  }
}

@media (width >= 48rem) {
  .overview__row + .overview__row {
    border-top: 1px solid var(--white-color);
  }
}

.overview__term {
  background-color: #333;
  padding: 11px 9px;
  font-weight: 700;
}

@media (width >= 36rem) {
  .overview__term {
    padding: 30px 0 30px 27px;
  }
}

.overview__description {
  padding: 18px 9px;
}

@media (width >= 36rem) {
  .overview__description {
    padding: 30px 0 30px 28px;
  }
}

.overview__description a {
  text-decoration: none;
  transition:
    color 0.3s,
    text-decoration 0.3s;
}

.overview__description a:hover {
  color: var(--site-color);
  text-decoration: underline;
  transition:
    color 0.3s,
    text-decoration 0.3s;
}

.overview__descriptionWrapper {
  grid-template-columns: repeat(2, fit-content(100%));
  display: grid;
}

.overview__cell.--01 {
  grid-area: 1 / 1 / 2 / 2;
}

.overview__cell.--02 {
  grid-area: 1 / 2 / 2 / 3;
}

.overview__cell.--03 {
  grid-area: 2 / 2 / 3 / 3;
}

.overview__label {
  width: 8.5em;
  display: inline-block;
}

.overview__businessList li {
  display: inline-block;
}

.overview__businessList li:after {
  content: "、";
}

.overview__businessList li:last-of-type:after {
  content: "";
}
.partner {
  margin-top: 48px;
}

@media (width >= 36rem) {
  .partner {
    margin-top: 120px;
  }
}

.partner__list {
  margin-top: 24px;
}

.partner__text {
  font-family: var(--font-sans-ja);
  font-size: clamp(1.125rem, 1.03398rem + 0.38835vi, 1.5rem);
  font-weight: 400;
  line-height: 1.75;
}

.partner__text span {
  display: block;
}
.timeline {
  padding-top: 72px;
  padding-bottom: 20px;
}

@media (width >= 36rem) {
  .timeline {
    padding-top: 104px;
    padding-bottom: 70px;
  }
}

.timeline__list {
  margin-top: 54px;
}

.timeline__item {
  grid-template-columns: 1fr;
  display: grid;
}

@media (width >= 48rem) {
  .timeline__item {
    grid-template-columns: 28% 1fr;
  }
}

.timeline__item + .timeline__item {
  margin-top: 26px;
}

@media (width >= 48rem) {
  .timeline__item + .timeline__item {
    margin-top: 60px;
  }
}

.timeline__date {
  font-weight: 600;
  font-size: clamp(1.125rem, 1.03398rem + 0.38835vi, 1.5rem);
  background-image: url("/assets/images/label-VaG-F5Kk.png");
  background-position: 2px 1px;
  background-repeat: no-repeat;
  background-size: contain;
}

.timeline__date span {
  padding-right: 0.2em;
}

.timeline__era {
  padding-left: clamp(1.8125rem, 1.64563rem + 0.711974vi, 2.5rem);
}

.timeline__year {
  font-size: clamp(1.375rem, 1.25364rem + 0.517799vi, 1.875rem);
}

.timeline__year span {
  font-size: clamp(1.125rem, 1.03398rem + 0.38835vi, 1.5rem);
}

.timeline__month {
  font-size: clamp(1.375rem, 1.25364rem + 0.517799vi, 1.875rem);
  padding-left: 0.2em;
}

.timeline__month span {
  font-size: clamp(1.125rem, 1.03398rem + 0.38835vi, 1.5rem);
}

.timeline__text {
  font-family: var(--font-sans-ja);
  font-size: clamp(1.125rem, 1.03398rem + 0.38835vi, 1.5rem);
  margin-left: -2vw;
  padding-top: 12px;
  padding-left: 42px;
  line-height: 1.66;
}

@media (width >= 48rem) {
  .timeline__text {
    margin-left: 0;
    padding-top: 0;
    padding-left: 0;
  }
}
.works__list {
  margin-top: 1rem;
}

.works__item {
  font-family: var(--font-sans-ja);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.52;
}

.works__item:before {
  content: "ー";
  display: inline-block;
}

@media (width >= 25rem) {
  .works__item {
    font-size: 1.125rem;
  }
}

@media (width >= 36rem) {
  .works__item {
    font-size: clamp(1.25rem, 1.17415rem + 0.323625vi, 1.5625rem);
  }
}

.works__btnArea {
  margin-top: 32px;
}
.l-container {
  width: min(90%, 1000px);
  margin-inline: auto;
}
:root {
  --z-index-header: 100;
  --z-index-modal: 9999;
  --z-index-over: 30;
  --z-index-middle: 20;
  --z-index-under: 1;
  --site-color: #990;
  --gray-color: #666;
  --font-color: #fff;
  --white-color: #fff;
  --bg-color-main: #000;
  --black-color: #000;
  --font-serif-ja:
    "Yu Mincho", "YuMincho", "游明朝", "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", "MS PMincho", serif;
}
.u-dropshadow {
  text-shadow:
    0 0 24px #00000059,
    0 0 14px #000000a6;
}
.u-visuallyHidden:not(:focus) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}