/* ==========================================================================
   ファイルパス: /css/responsive.css
   内容: スマートフォン・タブレット向けのレイアウト調整
   ========================================================================== */

@media (max-width: 991px) {
  /* --------------------------------------
       Header SP (ハンバーガーメニュー)
    -------------------------------------- */
  .header__inner {
    height: 64px;
    padding: 0 var(--content-space-sp);
  }

  .header__hamburger {
    display: block;
  }

  /* メニュー開閉時のボタンアニメーション */
  .is-drawer-open .header__hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .is-drawer-open .header__hamburger-line:nth-child(2) {
    opacity: 0;
  }
  .is-drawer-open .header__hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ナビゲーションのドロワー化 */
  .header__nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-base-white);
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    padding: 80px var(--content-space-sp) 40px;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--transition-base),
      visibility var(--transition-base);
    z-index: 100;
    overflow-y: auto;
  }

  /* 開いた状態 */
  .is-drawer-open .header__nav {
    opacity: 1;
    visibility: visible;
  }

  .header__nav-list {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .header__nav-link {
    font-size: 1.125rem;
  }

  .header__cta {
    width: 100%;
    text-align: center;
  }

  .header__cta .btn {
    width: 100%; /* SPでは横幅いっぱい */
  }

  /* --------------------------------------
       Footer SP
    -------------------------------------- */
  .footer {
    padding: 80px 0 40px;
  }

  .footer__inner {
    flex-direction: column;
    gap: 40px;
    margin-bottom: 40px;
  }

  .footer__nav-list {
    flex-wrap: wrap;
    gap: 20px;
  }
}

/* ==========================================================================
   ファイルパス: /css/responsive.css (追記)
   内容: スマートフォン向けレイアウト (Hero〜Features)
   ========================================================================== */

@media (max-width: 991px) {
  /* セクション共通 */
  .section {
    padding: var(--section-space-sp) 0;
  }
  .section__title {
    font-size: 1.5rem;
    margin-bottom: 32px;
  }

  /* Section 01: Hero */
  .hero {
    padding: 120px 0 80px;
  }
  .hero__inner {
    flex-direction: column;
    gap: 40px;
  }
  .hero__title {
    font-size: 2.25rem;
  }

  /* Section 02: 共感 */
  .empathy__grid {
    grid-template-columns: 1fr; /* スマホは1列 */
  }
  .empathy__message {
    font-size: 1.125rem;
  }

  /* Section 03 & 04: 課題とブランド */
  .issue__inner,
  .brand__inner {
    flex-direction: column;
    gap: 40px;
  }
  /* スマホでは画像を上に配置するため order を変更 */
  .issue__image,
  .brand__image {
    order: -1;
  }

  /* Section 05: 価値 */
  .value__grid {
    grid-template-columns: 1fr;
  }

  /* Section 06: サービス */
  .service__grid {
    grid-template-columns: 1fr;
  }

  /* Section 07: 特長 */
  .features__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ファイルパス: /css/responsive.css (後半部分の追記)
   ========================================================================== */
@media (max-width: 991px) {
  /* Section 08: 実績 */
  .reviews__grid {
    grid-template-columns: 1fr;
  }

  /* Section 09: 声 */
  .voice__grid {
    grid-template-columns: 1fr;
  }

  /* Section 10: メッセージ */
  .message__inner {
    flex-direction: column;
    gap: 40px;
  }
  .message__image {
    order: -1;
  }

  /* Section 11: FAQ */
  .faq__question {
    padding: 20px 16px;
  }
  .faq__answer-inner {
    padding: 0 16px 20px 16px;
  }

  /* Section 12: CTA */
  .cta__inner {
    flex-direction: column;
    padding: 40px 20px;
  }
  .cta__title {
    font-size: 1.5rem;
  }
  .cta__actions {
    flex-direction: column;
  }
  .cta__image {
    order: -1;
    width: 100%;
  }

  /* Section 13: 関連記事 */
  .related__grid {
    grid-template-columns: 1fr;
  }

  /* Section 14: Closing */
  .closing__title {
    font-size: 1.75rem;
  }
  .closing__lead {
    font-size: 1.125rem;
  }
}

/* ==========================================================================
   ファイルパス: /css/responsive.css (ABOUTページの追記)
   ========================================================================== */
@media (max-width: 991px) {
  /* 下層ページヘッダー */
  .page-header {
    padding: 100px 0 40px;
  }
  .page-header__title {
    font-size: 2rem;
  }

  /* ABOUT: Story */
  .story__inner {
    flex-direction: column;
    gap: 40px;
  }
  .story__image {
    order: -1;
  }

  /* ABOUT: PVV */
  .philosophy__concept-title {
    font-size: 1.5rem;
  }
  .philosophy__grid {
    grid-template-columns: 1fr;
  }

  /* ABOUT: Brand Value */
  .brand-value__item {
    flex-direction: column;
    gap: 16px;
    padding: 32px 0;
  }
  .brand-value__number {
    font-size: 2rem;
  }
}

/* ==========================================================================
   ファイルパス: /css/responsive.css (SERVICEページの追記)
   ========================================================================== */
@media (max-width: 991px) {
  /* SERVICE: ページ内リンク */
  .service-lead__links {
    flex-direction: column;
  }
  .service-lead__links .btn {
    width: 100%;
  }

  /* SERVICE: Detail */
  .service-detail__inner {
    flex-direction: column;
    gap: 40px;
  }

  .service-detail__header {
    position: static; /* SP時は追従を解除 */
  }

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

/* ==========================================================================
   ファイルパス: /css/responsive.css (WORKSページの追記)
   ========================================================================== */
@media (max-width: 991px) {
  /* WORKS: Voice Detail */
  .voice-detail__item {
    padding: 32px 24px;
  }

  .voice-detail__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .voice-detail__name {
    font-size: 1.25rem;
  }

  .voice-detail__body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ==========================================================================
   ファイルパス: /css/responsive.css (CONTACTページの追記)
   ========================================================================== */
@media (max-width: 991px) {
  /* CONTACT: 全体レイアウト */
  .contact__grid {
    flex-direction: column;
    gap: 40px;
  }

  .contact__form {
    width: 100%;
    padding: 32px 20px; /* SP時はパディングを狭める */
  }

  .contact__info {
    width: 100%;
    flex-direction: column; /* INFOボックス自体も縦並びに */
    gap: 20px;
  }

  .form__submit .btn {
    max-width: 100%; /* SP時はボタンを横幅いっぱいに */
  }
}
/* css/responsive.css に追記 */
@media (max-width: 991px) {
  /* 無料キット部分を縦並びに */
  .service__free-kit {
    flex-direction: column;
    align-items: stretch !important;
    gap: 24px !important;
    padding: 32px 20px !important;
  }
}

@media (max-width: 991px) {
  /* パッケージ商品カードをSPでは縦積みに（画像→テキスト→ボタンの順、Frame_7デザインに準拠） */
  .package-card {
    display: block;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
  }
  .package-card__bg {
    position: relative;
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
  }
  .package-card__bg::after {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 40%,
      var(--color-base-white) 95%
    );
  }
  .package-card__content {
    max-width: 100%;
    padding: 0 20px;
  }
  .package-card__label {
    margin-left: auto;
    margin-right: auto;
  }
  .package-card__btn {
    position: static;
    display: flex;
    width: calc(100% - 40px);
    margin: 24px 20px 32px;
    text-align: center;
  }
}
/* ==========================================================================
   ファイルパス: /css/responsive.css
   内容: スマートフォン・タブレット向け レスポンシブ調整
   ========================================================================== */

/* --------------------------------------
   タブレット・スマートフォン共通 (991px以下)
-------------------------------------- */
@media (max-width: 991px) {
  /* 下層ページヘッダー */
  .page-header {
    padding: 100px 0 40px;
  }
  .page-header__title {
    font-size: 2rem;
  }

  /* ABOUT: Brand Story */
  .story__inner {
    flex-direction: column;
    gap: 40px;
  }
  .story__image {
    order: -1;
  }

  /* ABOUT: PVV */
  .philosophy__concept-title {
    font-size: 1.5rem;
  }
  .philosophy__grid {
    grid-template-columns: 1fr;
  }

  /* ABOUT: Brand Value */
  .brand-value__item {
    flex-direction: column;
    gap: 16px;
    padding: 32px 0;
  }
  .brand-value__number {
    font-size: 2rem;
  }

  /* CONTACT: 全体レイアウト */
  .contact__grid {
    flex-direction: column;
    gap: 40px;
  }
  .contact__form {
    width: 100%;
    padding: 32px 20px;
  }
  .contact__info {
    width: 100%;
    flex-direction: column;
    gap: 20px;
  }
  .form__submit .btn {
    max-width: 100%;
  }
}

/* --------------------------------------
   スマートフォン向け (768px以下)
-------------------------------------- */
@media (max-width: 768px) {
  /* セクション共通余白 */
  .section {
    padding: var(--section-space-sp) 0;
  }
  .section__title {
    font-size: 1.5rem;
    margin-bottom: 32px;
  }

  /* ① 無料：事業整理キット (スマホ時の幅つぶれ崩れ対策) */
  .package-item--free {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
    padding: 32px 16px !important;
  }
  .package-item--free .package-item__action {
    width: 100%;
    text-align: center;
  }
  .package-item--free .package-item__action .btn {
    width: 100%; /* ボタンを横幅いっぱいに */
  }

  /* 単発サービスセクションのリード */
  .single-services__lead {
    padding: 20px 16px !important;
  }

  /* テーブルを1メニュー＝1枚のカード形式に縦積み変形 */
  .single-table,
  .single-table thead,
  .single-table tbody,
  .single-table tr,
  .single-table td {
    display: block;
    width: 100%;
  }

  /* スマホ表示ではテーブルヘッダー（行タイトル）を非表示化 */
  .single-table thead {
    display: none;
  }

  /* 1つの行(tr)＝独立した1枚のカードにする */
  .single-table tr {
    background-color: var(--color-base-white) !important;
    border: 1px solid var(--color-sub-lightgray) !important;
    border-radius: var(--radius-card);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: none;
    transition: var(--transition-base);
  }

  .single-table tr:hover {
    border-color: var(--color-brand-green) !important;
  }

  /* セルを縦に整列 */
  .single-table td {
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
  }

  /* 1. メニュー名 (上部に太字表示) */
  .single-table td:nth-child(1) {
    font-size: 1.0625rem;
    font-weight: var(--weight-bold);
    color: var(--color-text-main);
    margin-bottom: 6px;
  }

  /* 2. 価格 (中央に緑文字で大きく表示) */
  .single-table td:nth-child(2) {
    font-size: 1rem;
    font-weight: var(--weight-bold);
    color: var(--color-brand-green);
    margin-bottom: 12px;
  }

  /* 3. 内容説明 (最下部に小さめの文字で表示) */
  .single-table td:nth-child(3) {
    font-size: 0.875rem;
    color: var(--color-text-sub);
    line-height: var(--leading-base);
  }

  /* 成果物プランの強調テキスト（SPカード時も価格の下に小さめの緑文字として保持） */
  .single-table__note {
    font-size: 0.75rem !important;
    margin-top: 8px !important;
    color: var(--color-brand-green) !important;
    font-weight: var(--weight-bold);
    line-height: 1.5;
  }

  /* 申し込みフォーム全体のスマホパディングを 16px に制限 */
  .booking-form__wrapper {
    padding: 24px 16px !important;
  }

  /* 申し込みフォーム内のチェックボックスグループの見せ方調整 */
  .form__checkbox-label {
    font-size: 0.875rem !important;
    line-height: 1.5;
    margin-bottom: 12px !important;
  }
}

/* --------------------------------------
   TOPページ：共感セクション（Section02）
   （index.html の <style> 直書きから移設）
-------------------------------------- */
@media (max-width: 991px) {
  /* タブレットサイズ時は2列に変更 */
  .empathy__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  /* スマートフォンサイズではグリッドを縦1列に変更 */
  .empathy__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* 共感セクションのCTAエリアを中央配置 */
  .empathy .section__cta {
    text-align: center;
    margin-top: 32px;
  }

  /* ボタンをスマホ専用にワンサイズ縮小して中央寄せ */
  .empathy .section__cta .btn {
    font-size: 0.8125rem !important;
    height: 44px !important;
    padding: 0 20px !important;
    width: auto !important;
    display: inline-flex !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 991px) {
  /* ABOUT: Profile (代表プロフィール) - モバイルでは縦積みに */
  .profile__grid {
    flex-direction: column;
    gap: 32px;
  }

  .profile__side {
    flex: none;
    width: 100%;
  }

  .profile__photo {
    max-width: 280px;
    margin: 0 auto 24px;
    display: block;
  }

  .profile__stats {
    gap: 16px;
    flex-wrap: wrap;
  }

  .profile__stat-card {
    padding: 32px 24px;
  }
}

@media (max-width: 991px) {
  /* TOPページ：申し込みの流れ (FLOW) - タブレット以下は3列×2段 */
  .flow__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .flow__lead {
    max-width: none;
  }

  .flow__steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 599px) {
  /* スマホでは1列に */
  .flow__steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  /* TOPページ：即座に申し込める4つのサービス - タブレットは2列 */
  .quick-apply__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  /* TOPページ：即座に申し込める4つのサービス - スマホは1列 */
  .quick-apply__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  /* TOPページ：CALCISが選ばれる理由 (MERIT) */
  .merit__grid {
    grid-template-columns: 1fr;
  }
  .merit__main {
    padding: 32px 20px;
  }
}

/* ==========================================================================
   モバイル専用ブラッシュアップ（デスクトップ表示には影響させない）
   ========================================================================== */
@media (max-width: 599px) {

  /* 本文テキストのサイズ統一（16px） */
  .empathy__text {
    font-size: 16px;
  }
  .faq__answer-inner {
    font-size: 16px;
  }

  /* ヒーロー：画像を先に、ボタン（本文）を後に表示 */
  .hero__image {
    order: -1;
  }

  /* 本文・リード文をスマホでは左寄せに統一 */
  .section__lead,
  .single-services__lead-text,
  .philosophy__concept-text {
    text-align: left;
  }

  /* 申し込みの流れ：番号と見出しを横並び・左揃えに */
  .flow__step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    text-align: left;
  }
  .flow__number {
    margin-bottom: 0;
  }
  .flow__step-title {
    margin-bottom: 0;
  }
  .flow__step-text {
    flex-basis: 100%;
    margin-top: 12px;
  }

  /* 事業整理・設計キット（service__intro-kit）の縦積み対応 */
  .service__intro-kit {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 24px;
  }
  .service__intro-kit-action {
    width: 100%;
  }
  .service__intro-kit-action .btn {
    width: 100%;
    text-align: center;
  }

  /* コンテンツ写真は横長 1:1.1414 の比率に統一（ロゴ・アイコン・比較図は対象外） */
  .hero__image,
  .issue__image,
  .brand__image,
  .cta__image,
  .story__image {
    height: auto;
    aspect-ratio: 1.732/ 1;
  }
  .media-cover:not(.media-cover--round):not(.profile__photo) {
    height: auto;
    aspect-ratio: 1.732 / 1;
  }
  
  .single-table {
  box-shadow: none;
}
}

@media (max-width: 599px) {
  /* スマホ専用改行・改行禁止タグの有効化 */
  br.sp-only {
    display: inline;
  }
  .sp-nowrap {
    white-space: nowrap;
  }
}

@media (max-width: 599px) {
  /* テキストサイズを1remに統一 */
  .service__intro-kit-text,
  .faq__q-text,
  .service__card-link {
    font-size: 1rem;
  }

  /* テキストサイズを14pxに */
  .profile__skills-note {
    font-size: 14px;
  }

  /* 余白の統一 */
  .service__intro-kit,
  .service__extra-info,
  .package-item--free {
    padding: 40px 28px;
  }
}