/* ============================================
   Tablet (640px〜) — moderate scale-up
   ============================================ */
@media (min-width: 640px) {
  .fv {
    height: 560px;
  }

  .fv__copy {
    font-size: 2.25rem;
  }

  .fv__closure-banner {
    left: auto;
    right: var(--sp-3);
    bottom: var(--sp-3);
    min-width: 240px;
  }

  .manufacturers__item {
    width: 200px;
  }

  .manufacturers__img {
    height: 120px;
  }

  .services__side-row {
    flex-direction: row;
  }

  .services__side-row .service-card {
    flex: 1;
  }

  .used-machine-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .used-machine-cta__lead {
    max-width: 480px;
  }

  .news__item {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
  }

  .news__date {
    flex: none;
    width: 100px;
  }

  .news__category {
    flex: none;
    align-self: center;
  }

  .final-cta__top {
    flex-direction: row;
  }

  .final-cta__top .final-cta__group {
    flex: 1;
  }

  .footer__nav {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   Desktop (1024px〜)
   ヘッダーのフルナビ（リンク7個+ボタン3個+ロゴ）は
   1024pxには収まりきらないため、ヘッダーだけ1280px
   ブレークポイントで別途切り替える（下部の別ブロック参照）。
   ============================================ */
@media (min-width: 1024px) {
  /* ---- FV ---- */
  .fv {
    height: 720px;
  }

  .fv__content {
    left: 120px;
    bottom: 128px;
    right: auto;
    max-width: 720px;
    gap: var(--sp-2);
  }


  .fv__copy {
    font-size: 3.375rem;
    line-height: 1.3;
  }

  .fv__subcopy {
    font-size: 1.125rem;
  }

  .fv__scroll {
    right: var(--sp-3);
    bottom: var(--sp-2);
  }

  .fv__scroll-line {
    height: 56px;
  }

  /* ---- FV 廃業支援バナー ---- */
  .fv__closure-banner {
    right: 120px;
    bottom: 48px;
  }

  /* ---- Concept（フルビジュアル） ---- */
  .concept {
    min-height: 85vh;
  }

  .concept__inner {
    padding: 128px 120px;
  }

  .concept__content {
    max-width: 1040px;
  }

  .concept__title {
    font-size: clamp(1.6875rem, 3.4vw, 2.875rem);
    line-height: 1.5;
  }

  .concept__text {
    font-size: 1.0625rem;
  }

  .concept__caption {
    right: var(--sp-3);
    bottom: var(--sp-3);
  }

  /* ---- Manufacturers ---- */
  .manufacturers {
    padding: var(--sp-5) 0;
  }

  .manufacturers .container {
    max-width: none;
    padding: 0 120px;
  }

  .manufacturers__slider {
    padding-left: 120px;
  }

  .manufacturers__item {
    width: 220px;
  }

  .manufacturers__img {
    height: 130px;
  }

  /* ---- Services ---- */
  .services .container {
    max-width: none;
    padding: 0 120px;
  }

  .services__grid {
    flex-direction: row;
    gap: var(--sp-3);
  }

  .service-card--primary {
    flex: 1;
    min-height: 0;
  }

  .service-card--primary .service-card__media {
    flex: 1;
    height: auto;
    min-height: 300px;
  }

  .service-card--primary .service-card__body {
    padding: 28px 32px;
  }

  .service-card--primary .service-card__title {
    font-size: 1.625rem;
  }

  .service-card--primary .service-card__desc {
    font-size: 0.9375rem;
  }

  .services__side {
    flex: 2;
    gap: var(--sp-3);
    min-width: 0;
  }

  .services__side-row {
    gap: var(--sp-3);
    min-width: 0;
  }

  .service-card--secondary {
    flex-direction: row;
    height: 200px;
    min-height: 0;
    min-width: 0;
  }

  .service-card--secondary .service-card__media {
    flex: none;
    width: 260px;
    height: auto;
  }

  .service-card--secondary .service-card__body {
    justify-content: center;
    padding: 24px 28px;
    min-width: 0;
  }

  .service-card--secondary .service-card__more {
    margin-top: auto;
    align-self: flex-end;
    border-top: none;
    padding-top: 0;
  }

  /* tertiary (04/05) の横並び・120px画像・小フォントはtop-b.htmlの
     1440px想定サイズのため、1024〜1279pxでは幅が足りず文字が潰れる。
     この幅では縦積み(画像上・テキスト下)のまま自然な高さで表示し、
     厳密なカンプ再現は1280px〜のブロックに委ねる */
  .service-card--tertiary .service-card__more {
    display: none;
  }

  .services__cta-link {
    min-width: 360px;
    padding: 18px 28px;
  }

  /* ---- Used machine CTA ---- */
  .used-machine-cta .container {
    max-width: none;
    padding: 0 120px;
  }

  .used-machine-cta__lead {
    font-size: 1.125rem;
  }

  /* ---- News ---- */
  .news .container {
    max-width: none;
    padding: 0 120px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 64px;
    align-items: start;
  }

  .news .section-header {
    margin-bottom: 0;
  }

  .news__list {
    display: block;
  }

  .news__item {
    display: grid;
    grid-template-columns: 110px 88px 1fr;
    gap: var(--sp-3);
    align-items: center;
    padding: 22px 0;
  }

  .news__category {
    justify-self: start;
    padding: 4px 12px;
  }

  .news__more {
    margin-top: 0;
  }

  /* ---- Final CTA ---- */
  .final-cta .container {
    max-width: none;
    padding: 0 120px 96px;
  }

  .final-cta__bar {
    padding: 20px;
  }

  .final-cta__text {
    min-width: 0;
  }

  .final-cta__bar--contact {
    padding: 48px 56px;
  }

  .final-cta__title--lg {
    font-size: 2.125rem;
  }

  .final-cta__arrow--lg {
    width: 64px;
    height: 64px;
  }

  /* ---- Footer ---- */
  .footer .container {
    max-width: none;
    padding: 0 120px;
  }

  .footer__main {
    flex-direction: row;
    gap: 40px;
  }

  .footer__company {
    flex: none;
    width: 320px;
  }

  .footer__nav {
    flex: 1;
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   Wide desktop (1280px〜)
   top-b.htmlは1440px想定のため、幅に余裕が要る3箇所を
   ここでカンプの寸法に厳密に合わせる:
   1) ヘッダーのフルナビ（リンク7個+ボタン3個+ロゴ、
      合計必要幅 約1440px）は1024pxには収まらない
      → 実測で1280px台だと横はみ出しが起きるため、
        ナビ表示の切り替え自体は下の1440pxブロックで行う
        （1024〜1439pxはハンバーガーメニュー＋下部固定バー）
   2) サービスカード04/05の横並び・120px画像・小フォント
   3) CONCEPTの写真幅520px固定
   1024〜1279pxはサービスカード04/05が縦積み、
   CONCEPT写真は比率幅で表示する。
   ============================================ */
@media (min-width: 1280px) {
  /* ---- Service card tertiary (04/05): top-b.html準拠の寸法 ---- */
  .service-card--tertiary {
    flex-direction: row;
    height: 150px;
    min-height: 0;
    min-width: 0;
  }

  .service-card--tertiary .service-card__media {
    flex: none;
    width: 120px;
    height: auto;
  }

  .service-card--tertiary .service-card__body {
    justify-content: center;
    padding: 20px 22px;
    gap: 6px;
    min-width: 0;
  }

  .service-card--tertiary .service-card__label {
    font-size: 0.625rem;
  }

  .service-card--tertiary .service-card__title {
    font-size: 1.0625rem;
    line-height: 1.4;
  }

  .service-card--tertiary .service-card__desc {
    font-size: 0.75rem;
    line-height: 1.7;
  }

  /* ---- Final CTA bar media/title: top-b.html準拠の寸法 ---- */
  .final-cta__media {
    width: 140px;
    height: 96px;
  }

  .final-cta__title {
    font-size: 1.25rem;
  }
}

/* ============================================
   ヘッダーのPCフルナビ切り替え（1440px〜）
   リンク7個+ボタン3個+ロゴ+電話番号の合計必要幅は約1440px。
   以前は1280pxで切り替えていたため、1280〜1330px程度の
   やや狭いPC画面幅でナビが横にはみ出す不具合があった。
   1024〜1439pxはハンバーガーメニュー＋下部固定バーを使う。
   ============================================ */
@media (min-width: 1440px) {
  .header__topbar {
    padding: 0 48px;
  }

  .header__inner {
    padding: 0 48px;
  }

  .header__logo-placeholder {
    width: 180px;
    height: 44px;
  }

  .header__nav {
    display: flex;
    align-items: center;
    gap: 40px;
  }

  .header__nav-list {
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .header__nav-item {
    position: relative;
  }

  .header__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: var(--fs-nav);
    color: var(--color-navy);
    white-space: nowrap;
  }

  .header__nav-link--dropdown::after {
    content: "\25BC";
    font-size: 8px;
  }

  .header__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    display: none;
    flex-direction: column;
    min-width: 220px;
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border);
    box-shadow: 0 8px 20px rgba(20, 33, 61, 0.08);
  }

  .header__nav-item:hover .header__dropdown,
  .header__nav-item:focus-within .header__dropdown {
    display: flex;
  }

  .header__dropdown-link {
    padding: var(--sp-2);
    font-size: 0.8125rem;
    color: var(--color-navy);
    border-bottom: var(--border-width) solid var(--color-border);
    white-space: nowrap;
  }

  .header__dropdown-link:last-child {
    border-bottom: none;
  }

  .header__cta {
    display: flex;
    gap: 6px;
  }

  .header__cta .btn {
    white-space: nowrap;
  }

  .header__mobile-btn,
  .mobile-menu,
  .fixed-bottom-bar {
    display: none;
  }
}


/* ============================================
   下層ページ（max-width 基準）
   ============================================ */
@media (max-width:1100px){
  .related-services__grid{grid-template-columns:repeat(2,1fr)}
  .skills-grid,.values-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .service-hero{padding:48px 0}
  .service-hero__inner,.feature-block,.support-section__inner{grid-template-columns:minmax(0,1fr);gap:32px}
  .feature-block--reverse .feature-block__content,.feature-block--reverse .feature-block__image{order:0}
  .feature-block__image,.service-hero__image{order:-1}
  .service-hero__image,.feature-block__image,.support-section__image{max-width:560px}
  .service-hero__title,.page-header__title,.about-hero__title{font-size:2rem}
  .machine-doctor__title,.recruit-section .section-title__ja{font-size:1.625rem}
  .strength-grid--3col{grid-template-columns:minmax(0,1fr)}
  .machine-doctor__steps{grid-template-columns:minmax(0,1fr)}
  .machine-doctor__step+.machine-doctor__step{border-left:0;border-top:1px solid var(--color-border-card)}
  .flow-grid-2col,.application-list__items,.used-machine-banner__grid{grid-template-columns:minmax(0,1fr)}
  .machine-doctor__inner{padding:32px 24px}
  .about-hero{padding:56px 0}
  .about-hero__catch{font-size:1.375rem}
  .about-policy__grid{grid-template-columns:minmax(0,1fr)}
  .about-policy__card{border-right:0}
  .about-policy__card:nth-last-child(2){border-bottom:1px solid var(--color-border-card)}
  .about-policy__card-body{padding:28px 24px}
  .model-diagram{grid-template-columns:minmax(0,1fr)}
  .model-diagram__plus{height:auto;padding:8px 0}
  .machines__grid{grid-template-columns:repeat(3,1fr)}
  .about-company-cta__inner{flex-direction:column;align-items:flex-start;padding:28px 24px}
  .info-table__row{grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0}
  .location-grid,.location-grid--3col{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .access-block__content{grid-template-columns:minmax(0,1fr);gap:32px}
  .column-layout{grid-template-columns:minmax(0,1fr);gap:56px}
  .news-page__item{grid-template-columns:minmax(0,1fr);gap:10px;padding:20px 0}
  .contact-intro{grid-template-columns:minmax(0,1fr);gap:32px}
  .contact-intro__tel{align-items:flex-start;text-align:left}
  .form-group{grid-template-columns:minmax(0,1fr)}
  .form-group>*:not(.form-label),.form-hint{grid-column:1}
  .form-label{padding-top:0}
  .recruit-hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .recruit-hero__bg{grid-column:1;grid-row:1;height:280px;border-left:0;border-bottom:1px solid var(--color-border-card)}
  .recruit-hero__content{grid-row:2;padding:56px var(--sp-2)}
  .recruit-hero__title{font-size:2rem}
  .for-you-grid,.education-grid{grid-template-columns:minmax(0,1fr)}
  .feature-item{grid-template-columns:minmax(0,1fr);gap:12px;padding:28px 0}
  .feature-item__number{font-size:1.75rem}
  .job-card__header{padding:28px 24px}
  .job-card__body{grid-template-columns:minmax(0,1fr);gap:32px;padding:28px 24px}
  .job-card__image{order:-1}
  .career-path{grid-template-columns:minmax(0,1fr);gap:16px}
  .person-list,.guidelines-grid,.job-card__list,.career-path__list{grid-template-columns:minmax(0,1fr)}
  .flow-vertical__item{grid-template-columns:minmax(0,1fr);gap:6px;padding:20px 0}
  .recruit-cta__title{font-size:1.625rem}
}
@media (max-width:768px){
  .machine-doctor__deco-sub{display:none}
  .machine-doctor__deco-main{top:0;right:0;width:120px;height:120px}
}
@media (max-width:480px){
  .machine-doctor__deco-main{display:none}
}
@media (max-width:600px){
  .features-list{gap:56px}
  .feature-block__title{font-size:1.375rem}
  .related-services__grid{grid-template-columns:minmax(0,1fr)}
  .pre-footer-cta__btn,.pre-footer-cta__btn .btn,.used-machine-banner__cta .btn,.recruit-cta__buttons .btn,.guideline-card .btn,.form-submit .btn{width:100%;min-width:0}
  .used-machine-banner__inner{padding:32px 20px}
  .tel-banner__tel{font-size:1.625rem}
  .machines__grid{grid-template-columns:repeat(2,1fr)}
  .location-grid,.location-grid--3col{grid-template-columns:minmax(0,1fr)}
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .skills-grid,.values-grid{grid-template-columns:minmax(0,1fr)}
  .form-checkbox-group{grid-template-columns:minmax(0,1fr)}
  .contact-intro__tel-number{font-size:1.625rem}
  .access-block+.access-block{margin-top:48px;padding-top:48px}
}

/* ============================================
   サービス下層: 写真とテキストの比率調整
   768px〜 2カラム（写真:テキスト = 1:1）／ 767px以下は縦積み
   ============================================ */
@media (min-width:768px){
  .service-hero__inner,.feature-block,.support-section__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
  .service-hero__image,.feature-block__image,.support-section__image{max-width:none;order:0}
  .feature-block--reverse .feature-block__content{order:2}
  .feature-block--reverse .feature-block__image{order:1}
  .service-hero__title{font-size:36px}
  .strength-grid--3col{grid-template-columns:repeat(2,minmax(0,1fr))}
  .related-services__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .service-hero__inner,.feature-block,.support-section__inner{gap:64px}
  .service-hero__inner{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .strength-grid--3col{grid-template-columns:repeat(3,minmax(0,1fr))}
  .related-services__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:767px){
  .service-hero__image,.feature-block__image,.support-section__image{aspect-ratio:16/10;max-width:none}
  .service-hero__title{font-size:28px}
  .service-hero__catch{font-size:19px}
  .feature-block__title{font-size:21px}
  .service-hero__lead,.feature-block__text,.feature-block__case,.support-section__text{max-width:none}
}