/*
Theme Name: Optimal Supple LP
Theme URI: https://optimal-supple.com/
Author: 株式会社オプティマルサプリ
Author URI: https://optimal-supple.com/
Description: 株式会社オプティマルサプリ公式ランディングページ用テーマ。固定ページの「テンプレート」から「オプティマルサプリ LP」を選択すると表示されます。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: optimal-supple
*/

/* 基本リセット（詳細なスタイルは各テンプレート内のインラインスタイルで指定） */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  color: #1b2436;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #c56a2c; color: #fff; }
a { color: inherit; }
img { max-width: 100%; height: auto; }

@keyframes floatUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   改行の出し分け（PC / スマホ）
   ============================================================ */
.pc-br { display: inline; }   /* PC：改行する */
.sp-br { display: none;   }   /* PC：改行しない */

/* ============================================================
   流体タイポグラフィ（clamp で画面幅に応じて滑らかに可変）
   ※インラインの font-size を上書きするため !important
   ============================================================ */
.os-h1      { font-size: clamp(30px, 7.2vw, 52px) !important; line-height: 1.32 !important; }
.os-h2      { font-size: clamp(23px, 5.2vw, 40px) !important; }
.os-lead    { font-size: clamp(15px, 2.6vw, 18px) !important; }
.os-body    { font-size: clamp(13.5px, 2.1vw, 16px) !important; }

/* ============================================================
   タブレット以下：グリッドを1カラムに
   ============================================================ */
@media (max-width: 900px) {
  .os-hero-grid { grid-template-columns: 1fr !important; }
  .os-grid-3   { grid-template-columns: 1fr !important; }
  .os-grid-2   { grid-template-columns: 1fr !important; }
  .os-founder  { grid-template-columns: 1fr !important; }
}

/* ============================================================
   スマホ（768px以下）専用スタイル
   ============================================================ */
@media (max-width: 768px) {
  /* セクション余白を圧縮 */
  .os-section { padding-left: 20px !important; padding-right: 20px !important; }
  .os-hero-grid { padding: 40px 20px 44px !important; gap: 28px !important; }

  /* 改行の出し分けを反転 */
  .pc-br { display: none;   }
  .sp-br { display: inline; }

  /* 行間を少し詰めて読みやすく */
  .os-section p { line-height: 1.85 !important; }

  /* トラストストリップ・ソリューションの数値ブロックを縦積みに */
  .os-trust  { gap: 6px 18px !important; padding: 16px 18px !important; font-size: 12px !important; }
  .os-metric { flex-direction: column !important; width: 100% !important; }
  .os-metric > div { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; }
  .os-metric > div:last-child { border-bottom: none !important; }
}