/* =====================================================
   pc-wide.css — PC(1024px以上)だけ横幅を広げるレイアウト
   ・スマホ/タブレット(〜1023px)は一切変更しない
   ・元に戻すときは index.html の pc-wide.css の <link> を消すだけ
   ===================================================== */
@media (min-width: 1024px) {

  /* メニューから飛んだとき、固定ヘッダーで見出しが隠れないように */
  html { scroll-padding-top: 64px; }

  /* FV(ヒーロー)は画面いっぱい(01-fv.css の1200px制限を解除) */
  html body section.fv-mobile {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---------- 共通：600px固定を解除して1040px幅へ(FV=1200pxより狭くし、左右に壁紙を見せる) ---------- */
  .strengths-mobile,
  .philosophy-mobile,
  .empathy-mobile,
  .evolve-mobile,
  .reasons-mobile,
  .trust-mobile,
  .truth-mobile,
  .voices-mobile,
  .partner-mobile,
  .flow-mobile,
  .tips-mobile,
  .faq-mobile {
    max-width: 1040px !important;
    box-sizing: border-box;
  }

  /* もともと全幅だったセクションも同じ1040pxにそろえる(フッターは全幅のまま) */
  .works-mobile,
  .pricing-map,
  .sec-about,
  .howto-order,
  .closing-mobile,
  .taf-blog {
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* ---------- 02 3つの強み ---------- */
  .strengths-mobile {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 28px;
    align-items: stretch;
    padding: 100px 48px 100px !important;
  }
  .strengths-mobile .sm-header { grid-column: 1 / -1; }
  .strengths-mobile .sm-badge { margin: 0 !important; }
  .strengths-mobile .sm-title { font-size: 36px; }
  /* メッセージ:画像左・本文右の横並び */
  .strengths-mobile .sm-message-block {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: none !important;
  }
  .strengths-mobile .sm-message-image {
    aspect-ratio: auto !important;
    height: 100%;
    min-height: 420px;
    border-bottom: none !important;
    border-right: 1px solid rgba(197, 160, 89, 0.22);
  }
  .strengths-mobile .sm-message-content { padding: 48px 44px !important; }

  /* ---------- 03 哲学 ---------- */
  .philosophy-mobile {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
    row-gap: 48px;
    align-items: center;
    padding: 110px 48px !important;
  }
  .philosophy-mobile .ph-header { grid-column: 1 / -1; margin-bottom: 0 !important; }
  .philosophy-mobile .ph-visual { grid-column: 1; grid-row: 2; margin: 0 !important; }
  .philosophy-mobile .ph-body { grid-column: 2; grid-row: 2; margin: 0 !important; }
  .philosophy-mobile .ph-promise { grid-column: 1; grid-row: 3; margin: 0 !important; width: auto !important; }
  .philosophy-mobile .ph-visual-2 { grid-column: 2; grid-row: 3; margin: 0 !important; }
  .philosophy-mobile .ph-closing { grid-column: 1 / -1; margin-top: 16px !important; }
  .philosophy-mobile .ph-visual img { width: 100%; height: 400px; object-fit: cover; }

  /* ---------- 04 お悩み ---------- */
  .empathy-mobile .em-hero,
  .empathy-mobile .em-hero-img { height: 360px !important; }
  .empathy-mobile .em-hero-text { padding-left: 48px !important; padding-right: 48px !important; }
  .empathy-mobile .em-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 64px 48px 0 !important;
  }
  .empathy-mobile .em-card { margin: 0 !important; width: auto !important; }

  /* ---------- 05 進化 ---------- */
  .evolve-mobile .ev-banner-inner,
  .evolve-mobile .ev-hero-img-wrap,
  .evolve-mobile .ev-features {
    max-width: 944px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }
  .evolve-mobile .ev-banner-inner { padding-left: 0 !important; padding-right: 0 !important; }
  .evolve-mobile .ev-hero-img-wrap,
  .evolve-mobile .ev-hero-img { height: 380px !important; }
  .evolve-mobile .ev-hero-img { width: 100%; object-fit: cover; }
  .evolve-mobile .ev-features {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .evolve-mobile .ev-features-title { grid-column: 1 / -1; }
  .evolve-mobile .ev-feat { margin: 0 !important; width: auto !important; }

  /* 帯(ADD-ON / REASON)だけ画面いっぱいに広げる */
  .evolve-mobile,
  .reasons-mobile { overflow: visible !important; }
  .evolve-mobile .ev-banner { overflow: hidden; }
  .evolve-mobile .ev-ticker-wrap,
  .reasons-mobile .rs-marquee {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    position: relative;
    z-index: 2;
  }

  /* ---------- 06 選ばれる理由 ---------- */
  .reasons-mobile .rs-header { padding-left: 48px !important; padding-right: 48px !important; }
  .reasons-mobile .rs-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    padding: 0 48px !important;
  }
  .reasons-mobile .rs-card { margin: 0 !important; width: auto !important; }
  .reasons-mobile .rs-closing { padding-left: 48px !important; padding-right: 48px !important; }

  /* ---------- 07 信頼 ---------- */
  .trust-mobile {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .trust-mobile > * { grid-column: 1 / -1; }
  .trust-mobile .tr-header { padding-left: 0 !important; padding-right: 0 !important; }
  .trust-mobile .tr-hero-img-wrap { grid-column: 1; margin: 0 !important; width: auto !important; height: 100% !important; min-height: 300px; }
  .trust-mobile .tr-hero-img { height: 100% !important; object-fit: cover; }
  .trust-mobile .tr-company { grid-column: 2; margin: 0 !important; width: auto !important; align-self: center; }
  .trust-mobile .tr-services { padding-left: 0 !important; padding-right: 0 !important; margin-top: 56px !important; }
  .trust-mobile .tr-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .trust-mobile .tr-closing { margin-left: auto !important; margin-right: auto !important; max-width: 720px; }

  /* ---------- 08 本当のこと ---------- */
  .truth-mobile .th-header { padding-left: 48px !important; padding-right: 48px !important; }
  .truth-mobile .th-vs {
    display: grid !important;
    grid-template-columns: 1fr 80px 1fr;
    align-items: stretch;
    padding: 0 48px !important;
  }
  .truth-mobile .th-vs-card { margin: 0 !important; width: auto !important; }
  .truth-mobile .th-vs-arrow {
    width: auto !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }
  .truth-mobile .th-vs-arrow span { writing-mode: horizontal-tb; white-space: nowrap; }
  .truth-mobile .th-vs-arrow-icon { width: auto !important; transform: rotate(-90deg); }
  .truth-mobile .th-formula,
  .truth-mobile .th-quote {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .truth-mobile .th-roles {
    width: auto !important;
    max-width: 944px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .truth-mobile .th-roles-title,
  .truth-mobile .th-roles-intro { width: auto !important; }
  .truth-mobile .th-role-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: auto !important;
  }
  .truth-mobile .th-role-card { margin: 0 !important; width: auto !important; }

  /* ---------- 09 お客様の声 ---------- */
  .voices-mobile .vc-header { padding-left: 48px !important; padding-right: 48px !important; }
  .voices-mobile .vc-stars-banner,
  .voices-mobile .vc-closing {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .voices-mobile .vc-category { padding-left: 48px !important; padding-right: 48px !important; }
  .voices-mobile .vc-cat-header { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
  .voices-mobile .vc-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .voices-mobile .vc-card { margin: 0 !important; width: auto !important; }

  /* ---------- 11 保守プラン ---------- */
  .partner-mobile {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-items: start;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .partner-mobile > * { grid-column: 1 / -1; }
  .partner-mobile .pp-header { padding-left: 0 !important; padding-right: 0 !important; }
  .partner-mobile .pp-hero-img,
  .partner-mobile .pp-hero-img img { height: 320px !important; }
  .partner-mobile .pp-hero-img { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
  .partner-mobile .pp-hero-img img { width: 100%; object-fit: cover; }
  .partner-mobile .pp-plan { margin: 0 !important; width: auto !important; }
  .partner-mobile .pp-plan--maint { grid-column: 1; grid-row: 3; }
  .partner-mobile .pp-plan--featured { grid-column: 2; grid-row: 3; }
  .partner-mobile .pp-alt-buyout { grid-row: 4; margin-top: 32px !important; }
  .partner-mobile .pp-calc { margin-top: 32px !important; }
  .partner-mobile .pp-alt-buyout,
  .partner-mobile .pp-calc { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }

  /* ---------- 12 制作の流れ ---------- */
  .flow-mobile .fl-header { padding-left: 48px !important; padding-right: 48px !important; }
  .flow-mobile .fl-timeline {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
    padding: 0 48px !important;
  }
  .flow-mobile .fl-axis { display: none !important; }
  .flow-mobile .fl-step {
    grid-column: span 2;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    position: relative;
  }
  /* 1行目に3つ、2行目に2つを中央寄せ(先頭の div は .fl-axis) */
  .flow-mobile .fl-step:nth-of-type(5) { grid-column: 2 / span 2; }
  .flow-mobile .fl-step-marker {
    position: relative !important;
    left: auto !important; right: auto !important; top: auto !important;
    transform: none !important;
    margin: 0 0 16px !important;
  }
  .flow-mobile .fl-step-card {
    width: auto !important;
    margin: 0 !important;
    height: calc(100% - 72px);
    box-sizing: border-box;
  }

  /* ---------- 13 ヒント ---------- */
  .tips-mobile .tp-header { padding-left: 48px !important; padding-right: 48px !important; }
  .tips-mobile .tp-hero-img,
  .tips-mobile .tp-voice,
  .tips-mobile .tp-closing {
    max-width: 944px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .tips-mobile .tp-hero-img,
  .tips-mobile .tp-hero-img img { height: 360px !important; }
  .tips-mobile .tp-hero-img img { width: 100%; object-fit: cover; }
  .tips-mobile .tp-lead { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
  .tips-mobile .tp-points { padding-left: 48px !important; padding-right: 48px !important; }
  .tips-mobile .tp-points-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .tips-mobile .tp-point { margin: 0 !important; width: auto !important; }
  .tips-mobile .tp-voice {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  .tips-mobile .tp-voice-img { width: auto !important; margin: 0 !important; height: 100% !important; min-height: 320px; }
  .tips-mobile .tp-voice-img img { height: 100% !important; object-fit: cover; }
  .tips-mobile .tp-voice-text { width: auto !important; }

  /* ---------- 14 FAQ(読みやすさ優先で1列・幅は広めに) ---------- */
  .faq-mobile .fq-header { padding-left: 48px !important; padding-right: 48px !important; }
  .faq-mobile .fq-hero-img {
    max-width: 944px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .faq-mobile .fq-hero-img,
  .faq-mobile .fq-hero-img img { height: 320px !important; }
  .faq-mobile .fq-hero-img img { width: 100%; object-fit: cover; }
  .faq-mobile .fq-list,
  .faq-mobile > a {
    max-width: 880px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}