/* =============================
   responsive.css  (max-width:768px)
   スマホ専用：競合をなくした統合版
   ============================= */

@media (max-width: 768px){

  /* --- 基本リセット --- */
  body{
    padding-top: 0 !important; /* PCの固定ヘッダー余白を解除 */
  }

  /* --- ヘッダー / ナビ --- */
  .header{

    height: auto !important;
  }



   /* ▼ ハンバーガーを左に表示 */
  .hamburger{
    display:block !important;
    position:relative;
    width:28px;
    height:22px;
    cursor:pointer;
    z-index:1000;
    margin-top:0 !important;
  }
  .hamburger span{
    position:absolute;
    width:100%;
    height:3px;
    background:#333;
    left:0;
    transition:0.3s;
  }
  .hamburger span:nth-child(1){ top:0; }
  .hamburger span:nth-child(2){ top:9px; }
  .hamburger span:nth-child(3){ top:18px; }



  /* ▼ ナビ全体をヘッダー内で横並びに（ハンバーガー＋ロゴ） */
  .nav{
    max-width:none;
    width:100%;
    padding:4px 10px;
    display:flex;
    align-items:center;
    gap:12px;
  }
  /* ナビ（メニュー）が開くときはひとつ下に展開 */
  .nav.active{
    display:flex !important;
    flex-direction:column;
    width:100%;
    position:absolute;
    top:58px; /* ヘッダーの下に展開 */
    left:0;
    background:rgba(255,247,238,0.97);
    padding:18px 0;
    border-bottom:1px solid #ffe4d6;
  }

  .nav a{
    font-size: 16px;
    padding: 14px 20px;
  }

  .logo img{
    height: 28px !important;
    width:auto;
  }
  /* ロゴはハンバーガーの右に自然に配置される */
  .logo{
    display:flex !important;
    align-items:center !important;
    gap:8px;
  }
  /* ロゴ文字（2Wロジ〜部分）の調整 */
  .logo div{
    font-size:14px !important;
    line-height:1.1;
    font-weight:800;
  }
.nav-spacer{
    flex:1;
  }
/* ▼ メニューはデフォルト非表示（ハンバーガーで開く） */
  .nav-links{
    display:none;
    flex-direction:column;
    position:absolute;
    top:58px;
    left:0;
    width:100%;
    background:rgba(255,247,238,0.97);
    padding:18px 0;
    border-bottom:1px solid #ffe4d6;
  }
  .nav-links a{
    font-size:16px;
    padding:14px 20px;
  }
  .nav-links.active{
    display:flex;
  }
  /* --- HERO --- */
  .hero{
    margin-top: 0px !important; /* 固定ヘッダー分だけ下げる */
    min-height: 480px !important;
    background-image: url("./images/warehouse_vertical_640.webp") !important;
    background-position: center top !important;
    padding-top: 10px !important;
  }
  .hero h1{
    font-size: 42px !important;
    line-height: 1.15 !important;
  }
  .hero p{
    font-size: 13px !important;
  }
#hero .container > div > div{
    display: flex !important;
    justify-content: center !important; /* 真ん中に寄せる */
    flex-wrap: wrap !important;         /* 折り返し可能 */
    gap: 10px !important;               /* ボタンの間隔 */
  }

  /* ボタン幅の自動調整（必要なら） */
  #hero .btn{
    flex: 0 1 auto !important;
  }


  .hero .chip{
    font-size: 12px !important;   /* ★お好みで 15/14/17 に調整可 */
    line-height: 1.4 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100%;
    margin: 8px auto 0 !important;
  }
    /* --- twlogi-explain（背景） --- */
  #twlogi-explain{
    background-image: url('./images/sol_640.webp') !important;
    background-position: center top !important;
  }

  .tw-pillars-img{
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* --- flow（背景とタイムラインの被り防止・中央固定） --- */
  #flow{
    background-image: url("./images/flow_640.webp") !important;
    background-repeat: no-repeat !important;
    background-size:55% !important;
    background-position: center bottom !important;
    padding-top: 10px !important;
    /* ★画像が下に入るスペースを確保 */
    padding-bottom: 220px !important;
  }

  .timeline{
    padding-left: 10px !important;
  }
  .timeline::before{
    left: 20px !important;
  }
  .step{
    grid-template-columns: 56px 1fr !important;
    gap: 10px !important;
  }
  .step .num{
    width: 56px !important;
    height: 56px !important;
  }

  /* --- CTA固定ボタン（中央寄せ） --- */
  .cta-fixed{
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: 80% !important;
    text-align: center;
    padding: 16px 0 !important;   /* ← 横幅アップ（22 → 36） */
    font-size: 17px !important;      /* ← 読みやすいサイズに微増 */
    border-radius: 999px !important; /* ← 形は丸み維持 */
  }

  #pain .tile img,
  #pain-extra .tile img{
    width: 60% !important;   /* ← 小さめにする（180px → 120px） */
    height:auto !important;
    display: block;
    margin: 0 auto 10px;         /* 左右中央寄せ＋下に少し余白 */
    object-fit: cover !important;
  }
  /* ★ タイトル・テキストも中央寄せにする */
  #pain .tile,
  #pain-extra .tile{
    text-align: center !important;
    

  }
#pain .grid.grid-3 > .tile .tag,#pain-extra .grid.grid-3 > .tile .tag {
font-size: 17px !important;
}
  /* 必要であれば文字サイズも微調整 */
  #pain .tile h3,
  #pain-extra .tile h3{
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  #pain .tile p,
  #pain-extra .tile p{
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  /* ★ ただし箇条書き（ul, li）は左揃えのままにする */
  #pain .tile ul,
  #pain .tile ul li,
  #pain-extra .tile ul,
  #pain-extra .tile ul li{
    text-align: left !important;
    margin-left: 0 !important;  /* 必要なら調整 */
  }
/* ▼ 見出し「2Wロジならすぐ解決！」を少し小さく */
  .solution-chip{
    font-size: 30px !important;
    padding: 6px 12px !important;
  }
#twlogi-explain .tw-pillars-img{
    width: 60% !important;   /* ← 小さめにする（180px → 120px） */
    height:auto !important;
    display: block;

    object-fit: cover !important;
    align-items: center;
  }

#services .service:first-child{
    justify-content: center !important; /* カード内レイアウトを中央寄せ */
  }

  
  

  /* ▼ グリッド間の余白を縮める */
  .grid.grid-3{
    gap: 14px !important;
  }

  /* ▼ タイルをコンパクトに */
  .grid.grid-3 .tile{
    padding: 14px !important;
    border-radius: 12px !important;
  }

  /* ▼ 箇条書きの文字サイズを少し小さく */
  .grid.grid-3 .tile ul li{
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
/* ▼ voiceセクションのタイルを中央寄せに */
  #voice .voice{
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  /* ▼ SPではvoice内の画像を非表示に */
  #voice .voice img{
    display: none !important;
  }

  /* ▼ 見出し・文章のサイズも微調整して整えるなら */
  #voice .voice h3{
    font-size: 18px !important;
    margin-top: 10px;
  }

  #voice .voice p{
    font-size: 20px !important;
    line-height: 1.6;
  }
/* ▼ VOICEカード本体：上にチップが乗るスペースを作る */
  #voice .voice{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 24px !important;
    padding: 24px 16px 20px !important;
    box-sizing: border-box;
    left: 0 !important;   /* margin-left:20px などを無効化 */
  }

  /* ▼ チップをカード上部に“乗せて”中央寄せ */
  #voice .voice > div:first-child{
    position: absolute !important;      /* ★ 再び absolute に */
    top: -18px !important;              /* カードから少し飛び出す高さ */
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 85% !important;              /* はみ出さないように幅を調整 */
    max-width: 320px !important;
    font-size: 18px !important;

    height: auto !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    text-align: center !important;
    border-radius: 999px !important;
  }
/* 念のため、横スクロールを殺しておく */
  html, body{
    overflow-x: hidden;
  }

  /* 本文ブロックはSPでは1カラムにする（flex無効化） */
  #voice .voice > div:nth-child(2){
    display: block !important;          /* inline style の flex を打ち消す */
  }

  /* テキスト幅も全幅に */
  #voice .voice > div:nth-child(2) p{
    width: 100% !important;
  }

  /* ★ 評価と会社情報も横幅を制限しないようにする */
  #voice .voice > div:nth-child(3){
    width: auto !important;             /* 幅10% を解除 */
  }
  #voice .voice > small{
    width: 100% !important;             /* 幅40% を解除 */
    display: block !important;
  }

  /* ▼ アウトソーシング中の課題（pain） */
  #pain h2{
    font-size: 29px !important;
  }


  #pain p{
    font-size: 19px !important;
  }

  /* ▼ 自社倉庫での課題（pain-extra） */
  #pain-extra h2{
    font-size: 29px !important;
  }

  #pain-extra p{
    font-size: 19px !important;
  }

  /* ▼ 2Wロジならすぐ解決（solution-chip含む） */
  .solution-chip{
    font-size: 25px !important;
    padding: 4px 10px !important;
  }
  .grid.grid-3 h3{
    font-size: 18px !important;
  }

  #twlogi-explain h2{
    font-size: 29px !important;
  }
#twlogi-explain p{
    font-size: 14px !important;
    text-align: center !important;
  }



  /* ▼ 導入の流れ（flow） */
  #flow h2{
    font-size: 29px !important;
    text-align: center !important;
  }
#flow h3{
    font-size: 18px !important;

  }
#flow p{
    font-size: 13px !important;

  }

  /* ▼ 提供サービス（services） */
  #services h2{
    font-size: 29px !important;
  }
#services p{
    font-size: 13px !important;
  }
#services p.sec-lead{
    font-size: 18px !important;
  }


  #services h3{
    font-size: 16px !important;
  }

  /* ▼ お客様の声（voice） */
  #voice h2{
    font-size: 28px !important;
  }
  #voice p{
    font-size: 18px !important;
  }

#voice .voice p{
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin-bottom: 10px !important;
  }

  #voice .voice small{
    font-size: 12px !important;
    line-height: 1.4 !important;
    display: block;
    margin-top: 6px;
  }

  /* ▼ よくある質問（confidence） */
  #confidence h2{
    font-size: 27px !important;
    text-align: center !important;
  }

  /* ▼ 資料ダウンロード（contact） */
  #contact h2{
    font-size: 29px !important;
    text-align: center !important;

  }
#contact p{
    font-size: 20px !important;
    text-align: center !important;
  }
#contact .hint{
    font-size: 10px !important;
    text-align: left !important;
    }

/* フッターのレイアウトを、SPでは通常ブロック＋中央寄せにする */
  footer .container > div{
    display: block !important;          /* ← flex をやめる */
    text-align: center !important;
  }

  /* nav-spacer はSPでは不要なので消す */
  footer .nav-spacer{
    display: none !important;
  }

  /* リンクと ｜ を横並び・中央に */
  footer .container > div > a,
  footer .container > div > span.small{
    display: inline !important;         /* インラインに戻す */
    margin: 0 6px !important;           /* 横の余白だけ少し足す */
    font-size: 14px !important;
  }

  /* ▼ HERO全体の余白を縮める */
  #hero,
  #hero .container,
  .hero,
  .hero .container{
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
  }

  /* ▼ CTAボタン周りの上下余白を調整 */
  #hero .btn{
    margin-bottom: 6px !important;
  }



  /* ▼ コンテンツを下に押している余白をリセット */
  #hero *{
    scroll-margin-bottom: 0 !important;
  }

/* twlogi-explain と pain の上下余白をSPだけ小さくする */
  #twlogi-explain .container,
  #pain .container,#pain-extra .container,
  #services .container,#flow .container{
    padding-top: 10px !important;   /* 上の余白 */
    padding-bottom: 10px !important;/* 下の余白 */
  }
　　#pain .section{
    padding-bottom: 10px !important;/* 下の余白 */
  }
.section{
   padding-bottom: 10px !important;/* 下の余白 */
   padding-top: 10px !important;   /* 上の余白 */

 }
#services.section{
   padding-bottom: 10px !important;/* 下の余白 */
   padding-top: 10px !important;   /* 上の余白 */

 }

.section.alt{
   padding-bottom: 10px !important;/* 下の余白 */
   padding-top: 10px !important;   /* 上の余白 */

 }

/* ▼ HERO内 「すぐ○○」のフォントサイズ調整 */
  #hero .benefit-title{
    font-size: 10px !important; /* ←おすすめの値 */
    line-height: 1.3 !important;
  }

#services .service:first-child img{
    display: block !important;
    margin: 20px auto 0 !important;  /* 左右 auto で中央 */
    max-width: 90% !important;       /* 余白を少し残して中央に */
    height: auto !important;
  }
#services .grid.grid-2 .service img {
    width: 65% !important;  /* ← ここを調整して大きさを変えられます */
    margin: 0 auto !important;
    height: auto !important;
  }
#services .service ul li{
    font-size: 11px !important;   /* ←お好みで 12〜15px で調整 */
    line-height: 1.6 !important;  /* 読みやすく */
    margin-bottom: 4px !important;
  }
#services .service ul {
    padding-left: 10px !important;
  }
#services .grid.grid-2 p {
    font-size: 14px !important;
    text-align: center !important;
  }
}



/* =============================
   さらに小さい端末向け（max-width:450px）
   ============================= */
@media (max-width: 450px){

  .hero h1{
    font-size: 38px !important;
  }

  .sec-title{
    font-size: 32px !important;
    letter-spacing: -0.6px !important;
  }
  .sec-lead{
    font-size: 20px !important;
  }

  .service{
    flex-direction: column !important;
    padding: 18px !important;
  }
  .service img{
    width: 100% !important;
    margin-left: 0 !important;
  }

  #voice .voice{
    margin-left: 0 !important;
    width: 100% !important;
  }


}