/*
Theme Name: Ojisan Minimal
Theme URI: https://challenge-ojisan.jp/
Author: AI Partner
Description: Minimal blank theme for Challenge Ojisan – build freely with HTML/CSS.
Version: 1.0
Text Domain: ojisan-minimal
*/

/* ====== モバイル最適化（追加分） ====== */

/* ベースの余白と文字 */
@media (max-width: 960px){
  .container{ padding: 0 16px; }
  body{ line-height: 1.8; }
  .hero .title{ font-size: clamp(24px, 6vw, 34px); }
  .hero p{ font-size: 15px; color:#555; }
  .btn{ padding: 14px 16px; font-size: 15px; border-radius: 12px; }
}

/* ナビは小画面で簡素化（リンクを折り返し＆小さく） */
@media (max-width: 840px){
  nav.nav{ flex-direction: column; align-items: flex-start; gap: 8px; }
  nav .links{ display: flex; flex-wrap: wrap; gap: 12px; }
  nav .links a{ margin: 0; font-size: 14px; color:#444; }
}

/* ヒーロー画像の余白＆幅調整 */
@media (max-width: 840px){
  .hero{ padding: 48px 0 28px; }
}
.hero{ margin-bottom: 60px; }        /* PCでも少し余白増量 */
.hero-image{ width:100%; height:auto; border-radius: 18px; }
.hero-caption{ color:#999; font-size:.85rem; }

/* KPIカードは1列～2列で自動改行 */
.kpis{ display:flex; gap:12px; flex-wrap:wrap; }
.kpi{ flex:1 1 200px; }

/* チャレンジログのカードも詰まり防止 */
.list{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }

/* テーブル（Blog/Note）をスマホで横スクロールに */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
.table{ min-width: 560px; } /* スマホで折り返さず横スクロール */

/* セクション間の間延びを抑える */
@media (max-width: 720px){
  .section{ padding: 40px 0; }
}

/* ボタンは小画面でフル幅にして押しやすく */
@media (max-width: 520px){
  .cta{ display:block; }
  .btn, .btn.secondary{ width:100%; justify-content:center; margin-bottom:10px; }
}

/* 文字のにじみ軽減（iOS対策） */
*{ -webkit-text-size-adjust:100%; }