@charset "UTF-8";
/*
Theme Name: LIFESEEDS
Description: Cocoon の子テーマです。静岡県島田市のLIFESEEDS（AI活用支援・ホームページ制作・写真撮影）用に、design.md のデザイントークンを組み込んでいます。カスタマイズはすべてこの子テーマ側で行ってください。
Theme URI: https://www.lifeseeds.biz/
Author: LIFESEEDS
Author URI: https://www.lifeseeds.biz/
Template: cocoon-master
Version: 1.0.0
Requires at least: 6.1.0
Requires PHP: 7.4.0
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================
   このファイルの使い方
   ------------------------------------------------------------
   ・親テーマ（Cocoon）のstyle.cssは書き換えないでください。
     アップデートで上書きされ、変更がすべて消えます。
   ・CSSの追記は、必ずこのファイルに書いてください。
   ・このstyle.cssは、親テーマ側の仕組みで自動的に読み込まれます
     （functions.phpで読み込む必要はありません）。
   ============================================================ */


/* ------------------------------------------------------------
   1. デザイントークン（design.md 準拠 / v1.0.0）
   色やサイズはここだけを直せば、サイト全体に反映されます。
   ------------------------------------------------------------ */
:root {
  /* ブランドカラー */
  --ls-primary:        #009cea;  /* メイン：知性と信頼のテックシアン */
  --ls-primary-hover:  #0086cb;
  --ls-primary-subtle: #e0f2fe;  /* バッジ・タグ・淡い背景 */
  --ls-secondary:      #05ae99;  /* サブ：伴走・成長のティールグリーン */
  --ls-accent:         #0bd99f;  /* CTA：エメラルドグリーン */
  --ls-accent-hover:   #05c48e;
  --ls-on-accent:      #111827;  /* accent の上に乗せる文字色 */

  /* 背景・面 */
  --ls-bg:             #ffffff;
  --ls-bg-sub:         #f8fafc;
  --ls-surface:        #ffffff;
  --ls-surface-dark:   #1e293b;
  --ls-surface-tint:   #f0fdfa;

  /* 罫線 */
  --ls-border:         #e2e8f0;
  --ls-border-subtle:  #f1f5f9;
  --ls-border-bold:    #cbd5e1;

  /* 文字 */
  --ls-text:           #111827;
  --ls-text-2:         #334155;
  --ls-text-muted:     #64748b;
  --ls-text-inverse:   #ffffff;

  /* フォント */
  --ls-font:    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif;
  --ls-font-en: "Inter", "Plus Jakarta Sans", sans-serif;

  /* 角丸 */
  --ls-r-sm:   4px;
  --ls-r-md:   8px;
  --ls-r-lg:  16px;
  --ls-r-xl:  24px;
  --ls-r-pill: 9999px;

  /* 影 */
  --ls-shadow-card:  0 4px 20px rgba(0, 0, 0, .04);
  --ls-shadow-hover: 0 12px 32px rgba(0, 0, 0, .08);
  --ls-shadow-cta:   0 12px 28px rgba(11, 217, 159, .35);

  /* 余白・レイアウト */
  --ls-container: 1160px;
  --ls-section-sp: 64px;
  --ls-section-pc: 120px;

  /* モーション */
  --ls-ease: cubic-bezier(.16, 1, .3, 1);
}


/* ------------------------------------------------------------
   2. 改行制御ユーティリティ
   .ls-nb を付けた文節の内部では、絶対に改行されません。
   見出しやリード文で「1文字だけ次の行に落ちる」のを防ぎます。
   例）<span class="ls-nb">AIを、</span><span class="ls-nb">現場の道具に。</span>
   ※ span同士の間に改行やスペースを入れないでください。
   ------------------------------------------------------------ */
.ls-nb { display: inline-block; }

body {
  /* 日本語の禁則処理（行頭に「。」「ー」「っ」等が来ないようにする） */
  line-break: strict;
  overflow-wrap: break-word;
}


/* ------------------------------------------------------------
   3. 汎用パーツ
   ------------------------------------------------------------ */

/* コンテナ */
.ls-wrap {
  width: 100%;
  max-width: var(--ls-container);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 768px) {
  .ls-wrap { padding-inline: 40px; }
}

/* セクションの上下余白 */
.ls-section { padding: var(--ls-section-sp) 0; }
@media (min-width: 1024px) {
  .ls-section { padding: var(--ls-section-pc) 0; }
}

/* 英字ラベル（[ 01 / SERVICES ] のような小見出し） */
.ls-label {
  display: inline-block;
  font-family: var(--ls-font-en);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ls-primary);
  margin-bottom: 14px;
}

/* ボタン */
.ls-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 30px;
  border: 2px solid transparent;
  border-radius: var(--ls-r-pill);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 1.4;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s var(--ls-ease);
}
.ls-btn--cta {
  background: var(--ls-accent);
  color: var(--ls-on-accent);
  box-shadow: var(--ls-shadow-cta);
}
.ls-btn--cta:hover {
  background: var(--ls-accent-hover);
  color: var(--ls-on-accent);
  transform: translateY(-2px);
}
.ls-btn--ghost {
  background: #fff;
  color: var(--ls-text);
  border-color: var(--ls-border-bold);
}
.ls-btn--ghost:hover {
  border-color: var(--ls-primary);
  color: var(--ls-primary);
}

/* カード */
.ls-card {
  background: var(--ls-surface);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-r-lg);
  padding: 26px 22px;
  box-shadow: var(--ls-shadow-card);
  transition: transform .3s var(--ls-ease), box-shadow .3s var(--ls-ease);
}
.ls-card:hover {
  box-shadow: var(--ls-shadow-hover);
  transform: translateY(-3px);
}


/* ------------------------------------------------------------
   4. ここから下に、ページ固有のCSSを追記していってください
   ------------------------------------------------------------ */