@charset "UTF-8";
/* ==========================================================================
   responsive.css  —  PC ファースト
   --------------------------------------------------------------------------
   1500px 〜        : Illustrator 実寸（1rem = 10px）
   992px 〜 1500px  : ページ全体を等比縮小（style.css の vw スケールが担当）
                      → レイアウトは Illustrator と完全に同じ比率のまま
   〜992px / 〜768px / 〜480px : 1カラム化などのレイアウト変更
   ========================================================================== */

/* --------------------------------------------------------------------------
   〜1200px：等比縮小のみ。ナビだけ詰まりやすいので字間を調整
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px){
  .l-nav__list{ gap: 3.2rem; }
}

/* --------------------------------------------------------------------------
   〜992px：スマホ／タブレットレイアウトへ切替（ここから rem = 10px 固定）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 992px){

  .l-inner{ width: calc(100% - 64px); }

  /* ---- ハンバーガー ---- */
  .l-hamburger{ display: block; margin-top: 22px; margin-left: auto; }
  .l-nav{
    position: fixed; inset: 0; z-index: 105;
    flex-direction: column; align-items: center; justify-content: center; gap: 40px;
    margin: 0; background: var(--color-bg-cream);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
  }
  .l-nav.is-open{ opacity: 1; visibility: visible; }
  .l-nav__list{ flex-direction: column; align-items: center; gap: 28px; margin-top: 0; }
  .l-nav__item a{ font-size: 18px; }
  .l-nav__cta{ margin: 0; width: 217px; height: 60px; font-size: 17px; }

  body.is-nav-open{ overflow: hidden; }
  body.is-nav-open .l-hamburger__bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  body.is-nav-open .l-hamburger__bar:nth-child(2){ opacity: 0; }
  body.is-nav-open .l-hamburger__bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* ---- 共通 ---- */
  .c-heading-mincho    { font-size: 32px; }
  .c-heading-mincho--lg{ font-size: 38px; }
  .c-label             { font-size: 16px; }
  .c-label + .c-heading-mincho{ margin-top: 10px; }
  .c-btn{ width: 280px; height: 64px; font-size: 18px; gap: 30px; }
  .c-btn__arrow{ width: 34px; height: 10px; }
  .c-btn__arrow::after{ width: 9px; height: 9px; }
  .c-btn--wide{ width: 340px; height: 80px; font-size: 22px; }

  /* ---- header / hero ---- */
  .l-header__inner{ padding: 0 20px; }
  .l-header__logo { width: 180px; margin-top: 20px; }

  .p-hero{ height: auto; padding: 140px 0 80px; }
  .p-hero__inner{ padding-top: 0; }
  .p-hero__title{ font-size: 40px; line-height: 1.6; }
  .p-hero__lead { margin-top: 24px; font-size: 16px; line-height: 2.1; }
  .p-hero__btn  { margin-top: 32px; height: 64px; }
  .p-hero__scroll{ display: none; }

  /* ---- お悩み ---- */
  .p-worry{ padding: 64px 0 72px; }
  .p-worry__list{ grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
  .c-worry-card{ height: auto; padding: 32px 12px 32px; }
  .c-worry-card__icon{ height: 76px; }
  .c-worry-card__icon img{ max-height: 76px; width: auto; }
  .c-worry-card__text{ margin-top: 20px; font-size: 15px; line-height: 1.9; }

  /* ---- ABOUT ---- */
  .p-about{ grid-template-columns: 1fr; }
  .p-about__ribbon{
    position: static; width: calc(100% - 32px); height: auto; min-height: 72px;
    margin: 0 auto; padding: 12px 24px; transform: none; border-radius: 8px;
  }
  .p-about__ribbon span{ transform: none; font-size: 22px; letter-spacing: .04em; text-align: center; }
  .p-about__media img{ aspect-ratio: 16 / 10; }
  .p-about__body{ padding: 48px 32px 56px; }
  .p-about__title{ margin-top: 12px; }
  .p-about__text { margin-top: 20px; font-size: 15px; line-height: 2.2; }
  .p-about__body .c-btn{ margin-top: 32px; }
  .p-about__deco{ display: none; }

  /* ---- SERVICE（改修：画像上・3カラム維持） ---- */
  .p-service{ padding: 64px 0 56px; }
  .p-service__list{ grid-template-columns: repeat(3, 1fr); column-gap: 20px; row-gap: 40px; margin-top: 40px; }
  .c-service-card__body { margin-top: 20px; }
  .c-service-card__title{ font-size: 24px; gap: 14px; }
  .c-service-card__num  { font-size: 40px; }
  .c-service-card__text { margin-top: 14px; font-size: 15px; line-height: 2; }

  /* ---- こんな営業支援も行っています（改修：新規／タブレットは2×2） ---- */
  .p-tactical{ padding: 56px 0 64px; }
  .p-tactical__list{ grid-template-columns: repeat(2, 1fr); row-gap: 48px; margin-top: 40px; }
  .c-tactical{ padding: 0 16px; }
  .c-tactical + .c-tactical::before{ display: none; }
  .c-tactical:nth-child(even)::before{ display: block; left: 0; top: 8px; bottom: 8px; }
  .c-tactical__icon{ height: 100px; }
  .p-tactical__list li:nth-child(1) .c-tactical__icon img{ width: 84px; }
  .p-tactical__list li:nth-child(2) .c-tactical__icon img{ width: 78px; }
  .p-tactical__list li:nth-child(3) .c-tactical__icon img{ width: 74px; }
  .p-tactical__list li:nth-child(4) .c-tactical__icon img{ width: 90px; }
  .c-tactical__title{ margin-top: 18px; font-size: 21px; }
  .c-tactical__text { margin-top: 14px; font-size: 15px; line-height: 2; }

  /* ---- CASE（既存維持） ---- */
  .p-case   { padding: 64px 0 72px; }
  .p-case__list{ grid-template-columns: 1fr; row-gap: 40px; margin-top: 40px; }
  .c-case-card{ grid-template-columns: 40% 1fr; column-gap: 20px; }
  .c-case-card__media img{ width: 100%; }
  .c-case-card__head { gap: 12px; }
  .c-case-card__title{ font-size: 18px; }
  .c-case-card__num  { font-size: 34px; }
  .c-case-card__text { max-width: none; margin-top: 16px; font-size: 15px; line-height: 2; }

  /* ---- 選ばれる理由 ---- */
  .p-strengths{ padding: 64px 0 72px; }
  .p-strengths__list{ grid-template-columns: repeat(2, 1fr); row-gap: 48px; margin-top: 40px; }
  .c-strength{ padding: 0 16px; }
  .c-strength + .c-strength::before{ display: none; }
  .c-strength:nth-child(even)::before{ display: block; left: 0; top: 20px; height: calc(100% - 40px); }
  .c-strength__icon{ width: 116px; height: 116px; }
  .c-strength__icon img{ max-width: 76px; height: auto; }
  .c-strength__title{ margin-top: 16px; font-size: 21px; }
  .c-strength__text { margin-top: 14px; font-size: 15px; line-height: 2; }

  /* ---- 取引先ロゴ ---- */
  .p-partners{ flex-wrap: wrap; justify-content: center; gap: 24px 32px; height: auto; margin-top: 48px; padding: 28px 24px; }
  .p-partners img{ width: auto; max-width: 130px; max-height: 52px; object-fit: contain; }

  /* ---- FLOW ---- */
  .p-flow{ padding: 64px 0 72px; }
  .p-flow__list{ flex-wrap: wrap; justify-content: center; gap: 40px 24px; margin-top: 40px; padding: 0; }
  .c-flow-step{ flex: 0 0 calc(50% - 12px); }
  .c-flow-step:not(:last-child)::after,
  .c-flow-step:not(:last-child)::before{ display: none; }
  .c-flow-step__icon{ width: 116px; height: 116px; }
  .c-flow-step__icon img{ max-width: 82px; height: auto; }
  .c-flow-step__num  { margin-top: 14px; font-size: 16px; }
  .c-flow-step__title{ margin-top: 4px; font-size: 21px; }
  .c-flow-step__text { width: auto; margin-top: 10px; font-size: 15px; }

  /* ---- NEWS ---- */
  .p-news{ padding: 64px 0 80px; }
  .p-news__list{ grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
  .c-news-card__title{ margin-top: 18px; font-size: 15px; }
  .c-news-card__cat  { width: 60px; height: 26px; font-size: 15px; }
  .c-news-card__date { font-size: 17px; }
  .p-news__more{ margin-top: 48px; }

  /* ---- MESSAGE ---- */
  .p-message{ padding: 64px 0 72px; }
  .p-message__title{ margin-bottom: 40px; }
  .p-message__row,
  .p-message__row--reverse{ grid-template-columns: 1fr; row-gap: 24px; width: calc(100% - 64px); }
  .p-message__row--reverse{ margin-top: 56px; }
  .p-message__row--reverse .p-message__media{ order: -1; }
  .p-message__media img{ width: 100%; }
  .p-message__body--right,
  .p-message__body--left { padding-top: 0; }
  .p-message__lead{ font-size: 21px; }
  .p-message__text{ margin-top: 16px; font-size: 15px; }
  .p-message__text + .p-message__text{ margin-top: 24px; }
  .p-message__deco{ display: none; }

  /* ---- COMPANY ---- */
  .p-company__panel  { width: calc(100% - 64px); padding-bottom: 56px; }
  .p-company__message{ padding: 40px 24px 0; }
  .p-company__person { position: static; display: flex; justify-content: center; width: auto; height: auto; overflow: visible; }
  .p-company__person img{ position: static; width: 200px; height: 267px; }
  .p-company__message-title{ margin-top: 24px; font-size: 21px; text-align: center; }
  .p-company__message-text { margin-top: 16px; font-size: 15px; text-align: center; }
  .p-company__outline{ margin: 40px 24px 0; padding-top: 40px; }
  .p-company__title  { margin-top: 12px; font-size: 30px; }
  .c-company-table   { width: 100%; margin-top: 32px; }
  .c-company-table__row{ grid-template-columns: 120px 1fr; min-height: 0; padding: 16px 0 14px; }
  .c-company-table dt,
  .c-company-table dd{ font-size: 15px; }

  /* ---- CONTACT ---- */
  .p-contact{ height: auto; padding: 64px 0; }
  /* ⑦ Footer CTA：キャッチ・2ボタンをすべて中央配置 */
  .p-contact__inner{ flex-direction: column; align-items: center; gap: 32px; height: auto; padding-right: 0; text-align: center; }
  .p-contact__title{ font-size: 28px; line-height: 1.7; }
  .p-contact__actions{ width: 80vw; max-width: 340px; margin-inline: auto; align-items: center; }
  /* ボタンはアクション幅いっぱい・中央（≤480の .c-btn max-width:280px 上限を無効化） */
  .p-contact .c-btn--wide{ width: 100%; max-width: none; }
  .p-contact__tel  { font-size: 24px; }
  .p-contact__hours{ font-size: 13px; }

  /* ---- FOOTER ---- */
  .l-footer{ padding: 64px 0 40px; }
  .l-footer__catch{ font-size: 24px; }
  .l-footer__logo { margin-top: 40px; }
  .l-footer__logo img{ width: 200px; }
  .l-footer__copy { margin-top: 64px; font-size: 13px; }

  .js-fade{ transform: translateY(24px); }
}

/* --------------------------------------------------------------------------
   〜768px
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px){

  .l-inner{ width: calc(100% - 40px); }

  .c-heading-mincho    { font-size: 26px; letter-spacing: .04em; }
  .c-heading-mincho--lg{ font-size: 30px; }

  .p-hero{ padding: 120px 0 56px; }
  .p-hero__title{ font-size: 30px; }
  .p-hero__lead { font-size: 15px; }

  /* SERVICE（改修）：1カラムへ（カード幅を制限して中央） */
  .p-service__list{ grid-template-columns: 1fr; }
  .c-service-card{ max-width: 460px; width: 100%; margin-inline: auto; }

  /* CASE（既存）：画像を上に積む */
  .c-case-card{ grid-template-columns: 1fr; row-gap: 20px; }
  .c-case-card__media img{ aspect-ratio: 16 / 10; }

  .p-about__ribbon span{ font-size: 18px; }
  .p-about__body{ padding: 40px 20px 48px; }

  .p-message__row,
  .p-message__row--reverse{ width: calc(100% - 40px); }

  .p-company__panel{ width: calc(100% - 40px); }
  .p-company__outline{ margin: 32px 16px 0; }

  .p-contact__actions{ width: 100%; max-width: 340px; margin-inline: auto; }
  .c-btn--wide{ width: 100%; }
}

/* --------------------------------------------------------------------------
   〜480px
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px){

  .l-inner{ width: calc(100% - 32px); }

  .c-heading-mincho    { font-size: 22px; }
  .c-heading-mincho--lg{ font-size: 26px; }
  .c-label             { font-size: 14px; }

  .p-hero__title{ font-size: 25px; }

  .p-worry__list{ grid-template-columns: 1fr; }

  .p-strengths__list{ grid-template-columns: 1fr; row-gap: 40px; }

  /* こんな営業支援も行っています：スマホは1カラム・中央揃え・項目間を広めに（SPのみ） */
  .p-tactical{ padding: 56px 0 64px; }
  .p-tactical__list{ grid-template-columns: 1fr; row-gap: 60px; margin-top: 36px; }
  .c-tactical{ padding: 0 24px; text-align: center; }        /* 項目全体を中央に */
  .c-tactical:nth-child(even)::before{ display: none; }        /* 縦罫なし */
  .c-tactical__icon{ height: auto; margin: 0 auto; }          /* アイコンを中央配置 */
  .c-tactical__icon img{ margin: 0 auto; }
  .c-tactical__title{ margin-top: 20px; font-size: 20px; line-height: 1.5; letter-spacing: .02em; }
  .c-tactical__text { max-width: 300px; margin: 12px auto 0; font-size: 15px; line-height: 1.9; letter-spacing: .02em; }

  .c-strength:nth-child(even)::before{ display: none; }

  .c-flow-step{ flex: 0 0 100%; }

  .c-btn{ width: 100%; max-width: 280px; }

  .c-company-table__row{ grid-template-columns: 1fr; row-gap: 4px; }
  .c-company-table dt{ opacity: .75; }

  .l-footer__catch{ font-size: 19px; }
  .l-footer__logo img{ width: 160px; }
}


/* ==========================================================================
   スマートフォン版デザイン再現（SP専用 / PCには影響しない）
   --------------------------------------------------------------------------
   SPデザイン（ふるくま_top-sp.ai）はアートボード幅 900px。
   値は「デザイン実測 px ÷ 9 = vw」で記述し、端末幅に比例して原寸再現する。
   対象は今回指定の5箇所（① Hero / ② ハンバーガー / ③ ABOUT / ④ CTA / ⑤ COMPANY手前）のみ。
   ========================================================================== */
@media screen and (max-width: 992px){

  /* ---- ヘッダー（ロゴ 33.6vw / 左右余白） ---- */
  .l-header__inner{ padding: 0 6vw 0 5.2vw; }
  .l-header__logo { width: 33.6vw; margin-top: 5.9vw; }
  .l-hamburger    { margin-top: 6.6vw; }

  /* ---- ① HERO ---- */
  .p-hero{ height: 150vw; padding: 0; }
  .p-hero__bg img{ object-position: 80% center; }   /* 人物を右に見せる */
  .p-hero__inner{ width: auto; margin: 0; padding: 30.4vw 6vw 0 6.2vw; }
  .p-hero__title{ font-size: 7.1vw; line-height: 1.6; letter-spacing: .03em; }
  .p-hero__lead { margin-top: 3.5vw; font-size: 2.7vw; line-height: 2.45; letter-spacing: .02em; }
  .p-hero__btn  { margin-top: 9vw; width: 47vw; height: 11vw; font-size: 2.7vw; gap: 3vw; }

  /* ---- ② ハンバーガーメニュー（ロゴ追加・項目・ボタン） ---- */
  .l-nav__logo{ display: block; position: absolute; top: 5.9vw; left: 5.2vw; width: 33.6vw; z-index: 1; }
  .l-nav__logo img{ width: 100%; }
  .l-nav__list{ gap: 6.7vw; }
  .l-nav__item a{ font-size: 3.1vw; }
  .l-nav__cta{ margin-top: 8vw; width: 47vw; height: 11vw; font-size: 3.1vw; }

  /* ---- ③ ABOUT US ---- */
  .p-about{ display: block; }   /* 帯→写真→本文を素直に縦積み（帯の重なり／中央寄せを正しく） */
  .p-about__ribbon{
    position: relative; z-index: 2; top: 0; left: auto;   /* PCの top/left をリセット */
    width: 86vw; height: 9.3vw; min-height: 0; margin: 0 auto -2.7vw; padding: 0;
    transform: skewX(-20.4deg); border-radius: 1.3vw;
    display: flex; align-items: center; justify-content: center;
  }
  .p-about__ribbon span{ transform: skewX(20.4deg); font-size: 4vw; letter-spacing: 0; padding: 0 1vw; }
  .p-about__media img{ aspect-ratio: 900 / 571; }
  .p-about__body{ padding: 10.6vw 5.6vw 9vw; }
  /* ① ABOUT US ラベルは SERVICE ラベルと同じサイズに（共通 .c-label に統一） */
  .u-pc-br{ display: none; }   /* SPでは改行を無効化（見出しを1行に） */
  .u-sp-br{ display: inline; } /* スマホ版だけ改行を有効化（見出しを2行に） */
  .p-about__title{ margin-top: 2.4vw; font-size: 6.3vw; line-height: 1.35; letter-spacing: .024em; white-space: nowrap; }
  .p-about__text { margin-top: 4vw; font-size: 2.9vw; line-height: 1.8; letter-spacing: .04em; }
  .p-about__body .c-btn{ margin-top: 5vw; width: 47vw; height: 11vw; font-size: 2.7vw; gap: 3vw; }

  /* ---- ④ SERVICE下 CTA帯（人物なし・ボタン中央） ---- */
  .p-cta-band{ height: auto; padding: 9vw 6vw; border-radius: 1.8vw 1.8vw 0 0; }
  /* SPは1カラムなので右寄せは解除（PC専用の指定を戻す） */
  .p-cta-band__body{ width: auto; max-width: none; margin-left: 0; }
  .p-cta-band__text{ font-size: 2.9vw; line-height: 1.9; letter-spacing: .03em; }
  .p-cta-band .c-btn{ margin: 6vw auto 0; width: 47vw; height: 10.9vw; font-size: 2.7vw; gap: 3vw; }

  /* ---- ⑤ COMPANY手前（メッセージ：人物写真は削除・中央寄せ） ---- */
  .p-company__message{ padding: 9vw 6vw 0; text-align: center; }
  .p-company__message-title{ margin-top: 0; font-size: 4vw; line-height: 1.5; letter-spacing: .03em; }
  .p-company__message-text { margin-top: 3vw; font-size: 2.9vw; line-height: 1.8; }

  /* ---- ボタンの矢印もSP寸法に（デザイン実測 総幅約40px＝4.4vw） ---- */
  .p-hero__btn .c-btn__arrow,
  .p-about__body .c-btn__arrow,
  .p-cta-band .c-btn__arrow{ width: 4.4vw; height: 1.2vw; }
  .p-hero__btn .c-btn__arrow::after,
  .p-about__body .c-btn__arrow::after,
  .p-cta-band .c-btn__arrow::after{ width: 1.3vw; height: 1.3vw; }
}