/* ============================================================
   responsive.css — レスポンシブ対応(全ページ共通で読み込み)

   ・1080px以下 / 600px以下 は CodePen ラフの内容をそのまま踏襲
   ・480px以下 は今回追加した補完ブレークポイント
     (CodePen側で未対応だった箇所への対応)
   ============================================================ */

@media(max-width:1080px){
  .nav{
    position:fixed;top:73px;left:0;right:0;
    flex-direction:column;align-items:stretch;
    background:var(--paper);
    padding:20px;gap:0;
    border-bottom:1px solid var(--line);
    transform:translateX(100%);
    transition:transform .3s;
    height:calc(100vh - 73px);overflow-y:auto;
  }
  .nav.open{transform:translateX(0)}
  .nav-link{padding:18px;border-bottom:1px solid var(--line-soft)}
  .hamburger{display:block}
  .header-actions .btn-contact{display:none}
  .hero-grid,.about-grid,.biz-detail,.factory-card,
  .business-grid,.products-grid,.works-grid,.cta-block,
  .form-row,.footer-top,.sitemap-list{
    grid-template-columns:1fr!important;
  }
  .biz-detail:nth-child(even) .biz-detail-img,
  .factory-card:nth-child(even) .img-ph{order:0}
  .factory-card:nth-child(even) .img-ph{border-left:none;border-bottom:1px solid var(--line)}
  .factory-card .img-ph{border-right:none;border-bottom:1px solid var(--line)}
  .business-grid,.works-grid{grid-template-columns:1fr 1fr!important}
  .hero-vertical{display:none}
  .hero-img-frame{display:none}
  .section{padding:80px 0}
  .hero{min-height:auto;padding:120px 0 80px}
  .container{padding:0 20px}
  .header-inner{padding:18px 20px}
  .contact-wrap{padding:40px 24px}
  .philosophy{padding:50px 24px}
  .recruit-hero{padding:60px 28px}
  .recruit-hero h3{font-size:32px}
  .biz-detail-img-num,.about-img-num{font-size:80px}
  .news-item{grid-template-columns:100px 80px 1fr;font-size:12px;gap:16px}
  .news-arrow{display:none}
  .job-card{grid-template-columns:1fr;text-align:left;gap:16px}
  .job-meta{text-align:left}
  .info-table th{width:120px;font-size:12px;padding:18px 12px}
  .info-table td{padding:18px 12px;font-size:13px}
  .history-item{grid-template-columns:80px 1fr;gap:20px;padding:24px 0}
  .history-year{font-size:22px;padding-left:18px}
  .footer-bottom{flex-direction:column;gap:14px}
  .cta-box:first-child{border-right:none;border-bottom:1px solid var(--line)}
}
@media(max-width:600px){
  .business-grid,.works-grid{grid-template-columns:1fr!important}
  .hero-title{font-size:42px}
  .section-title{font-size:32px}
  .biz-features{grid-template-columns:1fr}
  .product-spec{grid-template-columns:1fr}
}

/* ============================================================
   ここから追加分(CodePen未対応箇所の補完)
   ============================================================ */
@media(max-width:480px){
  /* ヘッダー: ロゴ・言語切替・ハンバーガーが横並びで
     崩れやすいため、余白とフォントサイズを縮小 */
  .header-inner{padding:14px 16px;gap:10px}
  .logo{gap:8px}
  .logo-mark{width:34px;height:34px;font-size:16px}
  .logo-text{font-size:15px}
  .logo-text small{font-size:8px;letter-spacing:.2em}
  .lang-btn{padding:5px 7px;font-size:9px}
  .btn-contact{padding:9px 16px;font-size:10px}

  /* 見出し類のサイズ調整(小画面でclamp()下限より詰める) */
  .hero-title{font-size:34px}
  .hero-sub{font-size:14px}
  .section-title{font-size:26px}
  .page-title{font-size:34px}
  .philosophy h3{font-size:28px}
  .recruit-hero{padding:44px 18px}
  .recruit-hero h3{font-size:26px}
  .contact-wrap{padding:28px 16px}
  .philosophy{padding:36px 16px}
  .business-card-num{font-size:44px}
  .biz-detail-img-num,.about-img-num{font-size:56px}
  .btn{padding:15px 24px;font-size:10px;gap:8px}

  /* 会社概要テーブル: th/tdを横並びのままにすると
     文字が詰まって読みにくいため、縦積みレイアウトに変更 */
  .info-table,.info-table tbody,.info-table tr{display:block;width:100%}
  .info-table th,.info-table td{
    display:block;width:100%;padding:8px 0;
  }
  .info-table th{border-bottom:none;padding-top:20px}
  .info-table td{padding-bottom:20px}

  /* 沿革: 年号列を縦積みへ */
  .history-item{grid-template-columns:1fr;gap:6px}
  .history-year{font-size:20px}

  /* FAQ: 回答欄の左パディングが固定104pxのままだと
     回答文の表示幅が極端に狭くなるため、縦積みに変更 */
  .faq-q{grid-template-columns:36px 1fr 32px;gap:14px;padding:24px 12px}
  .faq-q-mark{font-size:24px}
  .faq-q-text{font-size:14px}
  .faq-toggle{width:30px;height:30px}
  .faq-a-inner{
    padding:0 12px 24px 12px;
    grid-template-columns:1fr;gap:8px;
  }
  .faq-a-mark{display:none}
  .faq-a-text{padding-top:0;font-size:13px}

  /* 工場・アクセス dl のラベル幅を縮小 */
  .factory-info{padding:32px 20px}
  .factory-info dl{grid-template-columns:64px 1fr;gap:10px 16px}

  /* 求人カード内の余白調整 */
  .job-card:hover{padding-left:0;padding-right:0}

  /* お問い合わせフォームのチェック行が折り返す際の調整 */
  .form-check{text-align:center;flex-wrap:wrap}
}