/* =====================================================
   レスポンシブ — SPスタイル
   @media (max-width: 768px)
===================================================== */

@media (max-width: 768px) {

  :root {
    --container-padding: 3rem; /* SP: 30px */
    --header-height:     7rem;
  }

  /* ヘッダー */
  .l-header {
    padding: 0 var(--container-padding);
  }

  .l-header__logo {
    width: 17rem;
  }

  .l-header__nav {
    display: none; /* SP ではドロワーに置き換え */
  }

  .l-header__hamburger {
    display: flex;
  }
  /* ドロワー背景動画 — SPで表示・再生 */
  .l-drawer__bg {
    display: block;
  }
  /* フッター */
  .l-footer {
    padding: 6rem var(--container-padding) 4rem;
  }

  .l-footer__top {
    flex-direction: column;
    gap: 4rem;
    padding-bottom: 4rem;
  }

  .l-footer__nav {
    flex-wrap: wrap;
    gap: 3rem 5rem;
    margin-left: 0;
  }

  .l-footer__copyright {
    text-align: center;
  }

  /* MV */
  .top__mv-content {
    left: var(--container-padding);
    bottom: 9rem;
  }

  .top__mv-catch {
    font-size: 1.7rem;
  }

  .top__mv-scroll {
    right: var(--container-padding);
    bottom: 3rem;
  }

  /* コンセプト */
  .top__concept {
    padding: 8rem 0 12rem;
  }

  .top__concept-inner {
    max-width: 100%;
    gap: 5rem;
    padding: 0 var(--container-padding);
  }

  .top__concept-heading {
    font-size: 2.2rem;
  }

  .top__concept-body-text {
    font-size: 1.4rem;
    line-height: 2.5;
  }

  /* Works */
  .top__works {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .top__works-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    padding: 0 var(--container-padding);
    margin-bottom: 4rem;
  }

  .top__works-heading {
    font-size: 6rem;
  }

  .top__works-img-wrap {
    aspect-ratio: 4 / 3;
  }

  .top__works-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding-top: 1.6rem;
  }

  .top__works-item {
    padding: 0 var(--container-padding);
  }

  .top__works-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .top__works-specs {
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 2rem;
  }

  /* Information */
  .top__information {
    padding: 7rem 0 8rem;
  }

  .top__information-inner {
    padding: 0 var(--container-padding);
  }

  .top__information-header {
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3.5rem;
  }

  .top__information-heading {
    font-size: 4rem;
    width: 100%;
  }

  .top__information-subheading {
    padding-bottom: 0;
  }

  .top__information-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.6rem;
  }

  .top__information-title {
    font-size: 1.3rem;
  }

  /* About ヒーロー */
  .about__hero {
    padding: calc(var(--header-height) + 6rem) var(--container-padding) 8rem;
  }

  .about__hero-top {
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 5rem;
  }

  .about__hero-heading {
    font-size: 5rem;
  }

  .about__hero-nav-list {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
  }

  .about__hero-subheading {
    font-size: 1.8rem;
    margin-bottom: 3rem;
  }

  .about__hero-body-cols {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  /* About サービス */
  .about__service {
    padding: 7rem var(--container-padding) 0;
  }

  .about__service-heading {
    font-size: 4rem;
    margin-bottom: 4rem;
  }

  .about__service-item {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 5rem 0;
  }

  .about__service-text {
    padding-right: 0;
  }

  .about__service-name {
    font-size: 2.8rem;
  }

  /* About フロー */
  .about__flow {
    padding: 8rem var(--container-padding);
  }

  .about__flow-heading {
    font-size: 4rem;
    margin-bottom: 5rem;
  }

  .about__flow-list {
    grid-template-columns: 1fr;
  }

  .about__flow-item {
    padding: 3.5rem 0;
    border-right: none;
  }

  .about__flow-item:nth-child(3n) {
    border-right: none;
  }

  .about__flow-item:nth-child(n+2) {
    border-top: 1px solid var(--color-border);
  }

  .about__flow-item:nth-child(n+4) {
    border-top: 1px solid var(--color-border);
  }

  /* About FAQ */
  .about__faq {
    padding: 8rem var(--container-padding);
  }

  .about__faq-inner {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .about__faq-heading {
    font-size: 4rem;
    position: static;
  }

  /* About 会社概要 */
  .about__company {
    padding: 8rem var(--container-padding);
  }

  .about__company-heading {
    font-size: 4rem;
    margin-bottom: 4rem;
  }

  .about__company-body {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .about__company-row {
    grid-template-columns: 12rem 1fr;
    gap: 1.5rem;
  }

  /* About プロフィール */
  .about__profile {
    padding: 8rem var(--container-padding) 10rem;
  }

  .about__profile-heading {
    font-size: 4rem;
    margin-bottom: 4rem;
  }

  .about__profile-body {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .about__profile-figure {
    aspect-ratio: 4 / 3;
    max-width: 60%;
  }

  /* Works 一覧ページ */
  .works__page {
    padding: calc(var(--header-height) + 6rem) 0 8rem;
  }

  .works__page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    padding: 0 var(--container-padding);
    margin-bottom: 4rem;
  }

  .works__page-heading {
    font-size: 5rem;
  }

  .works__filter-list {
    gap: 2rem;
  }

  .works__list {
    grid-template-columns: 1fr;
    gap: 4rem;
    padding: 0 var(--container-padding);
  }

  .works__img-wrap {
    aspect-ratio: 4 / 3;
  }

  .works__title {
    font-size: 2rem;
  }

  .works__more {
    margin-top: 5rem;
  }

  /* Works 詳細ページ */
  .works-single__heading {
    font-size: 3.2rem;
    padding: 4rem var(--container-padding) 3rem;
  }

  .works-single__hero-figure {
    aspect-ratio: 4 / 3;
  }

  .works-single__gallery {
    padding: 5rem var(--container-padding);
  }

  .works-single__gallery-thumbs {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .works-single__content {
    grid-template-columns: 1fr;
    gap: 5rem;
    padding: 0 var(--container-padding) 7rem;
  }

  .works-single__title {
    font-size: 2.8rem;
  }

  .works-single__spec-row {
    grid-template-columns: 10rem 1fr;
  }

  .works-single__other {
    padding: 7rem var(--container-padding) 9rem;
  }

  .works-single__other-heading {
    font-size: 3rem;
    margin-bottom: 4rem;
  }

  .works-single__other-list {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  /* Contact ページ */
  .contact__page {
    padding: calc(var(--header-height) + 6rem) var(--container-padding) 8rem;
  }

  .contact__inner {
    grid-template-columns: 1fr;
    gap: 5rem;
  }

  .contact__heading {
    font-size: 4.5rem;
    margin-bottom: 3rem;
  }

  .contact__desc {
    font-size: 1.3rem;
  }

  .contact__radio-group {
    gap: 1.4rem 2rem;
  }

}