/* ============================================================
   ECコンサルティング /ec_consulting/（中間カテゴリ型）
   数値・文言の正本: design_handoff_2026-08-12/LATERAL_デザイン確認.html
                     の実物（02番の枠、SP375px / PC1280px）
   共通パーツ（ヘッダー・フッター・FV等）は components.css。
   ここには p-ec__ 接頭辞のこのページ専用クラスだけを置く。
   ============================================================ */

/* ============================================================
   ページヘッダー（パンくず＋タイトル）
   README §11: 図形を置かない面。塗り円・軌道とも無し。
   ============================================================ */
.p-ec__head {
  position: relative;
  background: var(--c-ground);
}

.p-ec__head-body { padding: 36px 0 32px; }
.p-ec__head-body h1 { margin: 12px 0 0; }

@media (min-width: 768px) {
  .p-ec__head-body { padding: 62px 0 46px; }
  .p-ec__head-body h1 { margin: 14px 0 0; }
}

/* ============================================================
   リード：ECサイトの運営をひとりで悩んでいませんか
   data-orbit="ring-lead"（README §11。orbit.js が背景の図形を生成する）
   ============================================================ */
.p-ec__lead { padding-block: 48px 52px; }
@media (min-width: 768px) {
  .p-ec__lead { padding-block: 88px 92px; }
}

/* base.css の h2 既定（22px/34px）は本文よりやや大きいので、
   実物の寸法（22px/32px）にここだけ合わせる */
.p-ec__lead-title {
  font-size: 22px;
  line-height: 1.65;
}
@media (min-width: 768px) {
  .p-ec__lead-title { font-size: 32px; line-height: 1.6; }
}

/* SP→PCで改行位置が変わる箇所（文言は同じ・改行だけ追加）。
   br の表示/非表示だけで切り替える */
.p-ec__br--pc { display: none; }
@media (min-width: 768px) {
  .p-ec__br--pc { display: inline; }
}

/* PCだけ、意味の切れ目でinline-blockにして改行位置を制御する（README §2「本文組み」）。
   SPはinlineのまま＝両端揃え＋禁則の自然な折り返しに任せる */
.p-ec__phrase { display: inline; }
@media (min-width: 768px) {
  .p-ec__phrase { display: inline-block; }
}

/* ============================================================
   分岐2カード：近いお悩みからお選びください
   README §11: 選択肢カードの面＝図形を置かない
   ============================================================ */
.p-ec__select { padding-block: 48px 52px; }
@media (min-width: 768px) {
  .p-ec__select { padding-block: 88px 92px; }
}

.p-ec__select-title { margin: 12px 0 0; font-size: 22px; line-height: 1.5; }
@media (min-width: 768px) {
  .p-ec__select-title { margin: 14px 0 0; font-size: 32px; line-height: 1.45; }
}

.p-ec__cards { margin-top: 24px; }
@media (min-width: 768px) {
  .p-ec__cards { margin-top: 40px; }
}

.p-ec__card {
  border: 1px solid #EAE3D6;
  border-radius: 12px;
  background: var(--c-panel);
  padding: 22px 20px;
}
@media (min-width: 768px) {
  .p-ec__card {
    border-radius: 14px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
  }
}

.p-ec__card-head { display: flex; align-items: center; gap: 11px; }
@media (min-width: 768px) {
  .p-ec__card-head { gap: 14px; }
}

.p-ec__card-bar {
  display: block;
  flex: none;
  width: 3px;
  height: 20px;
  background: var(--c-accent);
}
@media (min-width: 768px) {
  .p-ec__card-bar { height: 26px; }
}

/* base.css の h3 既定（17.5px/22px）より少し大きい実物寸法（18px/24px）に合わせる */
.p-ec__card-title { margin: 0; font-size: 18px; }
@media (min-width: 768px) {
  .p-ec__card-title { font-size: 24px; }
}

.p-ec__card-text {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--c-heading-sub);
  /* ⚠ 狭いカラムでは body既定の字間均等割り付け(inter-character)が行ごとの文字数差で
     バラついて見えるため、このカードだけ左揃えに戻す（おじさん指示2026-08-13）。
     word-break:auto-phraseは768px以上で既に指定済み（下のメディアクエリ）。SPにも揃える。 */
  text-align: left;
  word-break: auto-phrase;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .p-ec__card-text {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 2;
    word-break: auto-phrase;
    text-wrap: pretty;
    padding-bottom: 40px;
  }
}

.p-ec__card-link {
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-ground);
  border: 1px solid #E3DBCA;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-link);
  text-decoration: none;
}
.p-ec__card-link:hover { color: var(--c-link-hover); }
@media (min-width: 768px) {
  /* ⚠ 2026-08-13: カードの高さは grid(l-cards) の stretch で揃うが、本文の行数が
     カードごとに違うため、margin-top を固定にするとボタンの位置が28pxずれていた（実測）。
     margin-top:auto でカード下端に揃える。最低限の間隔は
     .p-ec__card-text の padding-bottom:40px が受け持つ。
     → page-homepage.css の .p-hp__card-link と同じ直し方（あちらは先に直っていた）。 */
  .p-ec__card-link { margin: 0; margin-top: auto; }
}

/* ⚠ 2026-08-13：CONTACT面は parts/contact-band.php（共通パーツ）へ寄せたため、
   このページ専用のCONTACT面CSSは削除。共通の見た目は components.css の
   .contact-band* / .btn-contact を参照。 */