/* ===== RESPONSIVE ===== */
/* PCデザインを縮小するのではなく、SPEC.md 20章に沿って再構成する。 */
/* ブレークポイントはSPEC.md 6章の基準に合わせる: PC 1440px / タブレット 768〜1023px / スマートフォン 767px以下 */

@media (max-width: 1023px) {
  .hero__title-line--shift {
    margin-left: clamp(24px, 10vw, 120px);
  }

  .about-hero__title-line--shift {
    margin-left: clamp(20px, 8vw, 100px);
  }

  /* WORKS HERO: サイド情報を狭めて見出しの比率を優先する */
  .works-hero__title {
    grid-column: 1 / 9;
  }

  .works-hero__side {
    grid-column: 9 / -1;
  }

  /* SERVICES HERO: 導入文とメタ情報の比率を調整する */
  .services-hero__intro {
    grid-column: 1 / 8;
  }

  .services-hero__meta {
    grid-column: 8 / -1;
  }

  .service-detail--browser .container,
  .service-detail--funnel .service-detail__layout,
  .service-detail--map .container {
    grid-template-columns: 1fr 1fr;
  }

  /* CONTACT HERO / CONTACT INTRO: サイド情報を狭めて本文の比率を優先する */
  .contact-hero__intro,
  .contact-intro__body {
    grid-column: 1 / 8;
  }

  .contact-hero__meta,
  .contact-intro__topics {
    grid-column: 8 / -1;
  }

  /* PRIVACY HERO: サイド情報を狭めて本文の比率を優先する */
  .privacy-hero__intro {
    grid-column: 1 / 8;
  }

  .privacy-hero__meta {
    grid-column: 8 / -1;
  }

  /* INDEX: 3カラムでは詰まりやすいため2カラムにする */
  .privacy-index__list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 条項本文: 左カラムを少し狭める */
  .policy__row {
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  }

  /* ABOUT HERO: サイド情報を狭めて本文の比率を優先する */
  .about-hero__intro {
    grid-column: 1 / 8;
  }

  .about-hero__meta {
    grid-column: 8 / -1;
  }

  .about-hero__visual {
    display: none;
  }

  /* WHO WE ARE / OUR PRINCIPLES / LOCATION: 左右比率を詰める */
  .who-we-are__row,
  .principles__item,
  .location__row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }

  /* COMPANY PROFILE: 左カラムを少し狭める */
  .profile__row {
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  }
}

/* 現在案件・現在サービスナビゲーションは1024px以上でのみ表示する */
@media (min-width: 1024px) {
  .works-project-nav,
  .services-nav {
    display: flex;
  }

  /* CONTACTフォーム: PCのみ左(番号・ラベル・説明)/右(入力欄)の2カラムにする */
  .form-field:not(.form-field--consent) {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    column-gap: clamp(24px, 3vw, 48px);
    align-items: start;
  }

  .form-field__meta {
    margin-bottom: 0;
  }
}

/* ヘッダー: 960px未満は通常ナビを隠し、MENUボタンのみを表示する */
@media (max-width: 959px) {
  .global-nav {
    display: none;
  }

  .menu-button {
    display: inline-flex;
    align-items: center;
  }

  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .site-footer__nav ul {
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 767px) {
  /* 巨大英字見出しを画面幅に合わせて改行しやすくする */
  .hero__title-line--shift {
    margin-left: 8vw;
  }

  /* PHILOSOPHY: PC版の非対称グリッドを解除し、縦積みへ再構成する */
  .philosophy__body {
    grid-column: 1 / -1;
  }

  /* SERVICES: 1行を縦積みにし、常時すべての情報を確認できるようにする */
  .service-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .service-row__link {
    justify-self: start;
    margin-top: 8px;
  }

  /* 強み: 2カラムを縦積みへ再構成し、本文の1行を長くしすぎないようにする */
  .strengths__item {
    grid-template-columns: 1fr;
  }

  .strengths__item-desc {
    align-self: start;
  }

  /* PROCESS: 番号・工程名・説明を1カラムへ再構成する */
  .process__step {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "label" "desc";
    row-gap: 8px;
  }

  .process__list {
    padding-left: 32px;
  }

  .process__line {
    left: 5px;
  }

  .process__step-dot {
    left: -32px;
    top: 4px;
  }

  /* ABOUT: ビジュアルと本文を縦に再構成する */
  .about-preview__visual {
    grid-column: 1 / -1;
    margin-bottom: 40px;
    aspect-ratio: 16 / 10;
  }

  .about-preview__content {
    grid-column: 1 / -1;
  }

  /* CTAを画面幅いっぱいに近いサイズへ変更する(SPEC.md 20章) */
  .contact-cta__button {
    width: 100%;
  }

  /* WORKS HERO: 見出しとサイド情報を縦積みにする */
  .works-hero__title,
  .works-hero__side {
    grid-column: 1 / -1;
  }

  .works-hero__side {
    margin-top: 32px;
    padding-bottom: 0;
  }

  /* PROJECT INDEX: 情報を縦積みにし、タップ領域を確保する */
  .works-index__link {
    grid-template-columns: 1fr auto;
    grid-template-areas: "no arrow" "name name" "category category";
    row-gap: 8px;
    padding-block: 24px;
  }

  .works-index__no {
    grid-area: no;
  }

  .works-index__arrow {
    grid-area: arrow;
  }

  .works-index__name {
    grid-area: name;
  }

  .works-index__category {
    grid-area: category;
  }

  /* PROJECT 01/03: 左右分割を解除し、stickyを外して縦積みにする */
  .works-project--split-right .container,
  .works-project--split-left .container {
    grid-template-columns: 1fr;
  }

  .works-project--split-right .works-project__visual,
  .works-project--split-left .works-project__visual {
    position: static;
    order: -1;
  }

  .works-project--split-right .works-project__info,
  .works-project--split-left .works-project__info {
    order: 0;
  }

  /* PROJECT 02: 3枚並びのビジュアルを縦積みにし、2カラム情報を1カラムへ */
  .works-project__visual--full {
    flex-direction: column;
  }

  .works-project--full-visual .works-visual--tall {
    aspect-ratio: 16 / 10;
  }

  .works-project__columns {
    grid-template-columns: 1fr;
  }

  /* PROJECT 04: PC/SPモックアップを縦積みにする */
  .works-project__visual-pair {
    grid-template-columns: 1fr;
  }

  .works-visual--mobile {
    max-height: none;
    aspect-ratio: 9 / 16;
  }

  /* PROJECT 05: 巨大見出しの折り返しを画面幅に合わせやすくする */
  .works-project__name--huge {
    font-size: clamp(3rem, 16vw, 5rem);
  }

  /* SERVICES HERO: 見出しと導入文・メタ情報を縦積みにする */
  .services-hero__intro,
  .services-hero__meta {
    grid-column: 1 / -1;
  }

  .services-hero__meta {
    margin-top: 32px;
  }

  /* SERVICE INDEX: 情報を縦積みにし、タップ領域を確保する */
  .services-index__link {
    grid-template-columns: 1fr auto;
    grid-template-areas: "no arrow" "name name" "desc desc";
    row-gap: 8px;
    padding-block: 24px;
  }

  .services-index__no {
    grid-area: no;
  }

  .services-index__arrow {
    grid-area: arrow;
  }

  .services-index__name {
    grid-area: name;
  }

  .services-index__desc {
    grid-area: desc;
  }

  /* SERVICE 01/04: 左右分割を解除する */
  .service-detail--browser .container,
  .service-detail--map .container {
    grid-template-columns: 1fr;
  }

  .service-detail--browser .service-detail__visual,
  .service-detail--map .service-detail__visual {
    order: -1;
    margin-bottom: 32px;
  }

  /* SERVICE 02: ファネルを本文の上に配置する */
  .service-detail--funnel .service-detail__layout {
    grid-template-columns: 1fr;
  }

  .service-detail--funnel .service-detail__visual {
    margin-bottom: 40px;
  }

  /* SERVICE 03: 3レイヤーを縦積みにする */
  .layers {
    grid-template-columns: 1fr;
  }

  /* SERVICE 05: 横方向フローを2カラムへ再構成する */
  .ad-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }

  .ad-flow li:nth-child(2)::after {
    content: none;
  }

  .service-detail__columns {
    grid-template-columns: 1fr;
  }

  /* SERVICE共通: 重視するポイント・関連サービスを縦積みにする */
  .service-detail__foot {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* HOW WE SUPPORT: 1カラムへ再構成する */
  .support__grid {
    grid-template-columns: 1fr;
  }

  /* CONTACT HERO / CONTACT INTRO: 縦積みにする */
  .contact-hero__intro,
  .contact-hero__meta,
  .contact-intro__body,
  .contact-intro__topics {
    grid-column: 1 / -1;
  }

  .contact-hero__meta {
    margin-top: 40px;
  }

  .contact-intro__topics {
    margin-top: 40px;
  }

  /* CONTACTフォーム: 選択肢を画面幅いっぱいに近づけ、タップ領域を確保する */
  .option-item {
    flex: 1 1 100%;
  }

  /* WHAT HAPPENS NEXT: 3カラムを縦積みにする */
  .next-steps__list {
    grid-template-columns: 1fr;
  }

  .next-steps__item {
    border-right: 1px solid var(--color-border);
  }

  /* PRIVACY HERO: 縦積みにする */
  .privacy-hero__intro,
  .privacy-hero__meta {
    grid-column: 1 / -1;
  }

  .privacy-hero__meta {
    margin-top: 32px;
  }

  /* INDEX: 1カラムへ再構成する */
  .privacy-index__list {
    grid-template-columns: 1fr;
  }

  /* 条項本文: 番号・ラベルを見出しの上に積む */
  .policy__row {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .policy__operator div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  /* ABOUT HERO: 縦積みにする */
  .about-hero__intro,
  .about-hero__meta {
    grid-column: 1 / -1;
  }

  .about-hero__meta {
    margin-top: 32px;
  }

  /* WHO WE ARE / OUR PRINCIPLES / LOCATION: 縦積みにする */
  .who-we-are__row,
  .location__row {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .who-we-are__body {
    border-left: none;
    padding-left: 0;
  }

  .location__visual {
    max-width: 240px;
  }

  .principles__item {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .principles__item:nth-child(even) {
    direction: ltr;
  }

  /* モバイルでは横方向の交互スライドを行わない(狭い画面幅での横オーバーフロー防止) */
  .principles__item.js-reveal,
  .principles__item:nth-child(even).js-reveal {
    transform: translateY(48px);
  }

  .principles__item.js-reveal.is-visible {
    transform: translateY(0);
  }

  /* WORKING STYLE: 3カラムを縦積みにする */
  .working-style__list {
    grid-template-columns: 1fr;
  }

  .working-style__item {
    border-right: 1px solid var(--color-border);
  }

  /* CAPABILITIES: 情報を縦積みにし、タップ領域を確保する */
  .capabilities__link {
    grid-template-columns: 1fr auto;
    grid-template-areas: "no arrow" "name name" "desc desc";
    row-gap: 8px;
    padding-block: 24px;
  }

  .capabilities__no {
    grid-area: no;
  }

  .capabilities__arrow {
    grid-area: arrow;
  }

  .capabilities__name {
    grid-area: name;
  }

  .capabilities__desc {
    grid-area: desc;
  }

  /* COMPANY PROFILE: 項目名の下に値を積む */
  .profile__row {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
}

@media (max-width: 479px) {
  .hero__title-line--shift {
    margin-left: 4vw;
  }

  .about-hero__title-line--shift {
    margin-left: 4vw;
  }

  .site-footer__meta {
    flex-direction: column;
    gap: 24px;
  }

  .about-preview__visual-mark {
    font-size: clamp(4.5rem, 22vw, 6rem);
  }
}