@charset "utf-8";

/* ブロックエディタの iframe 内ではテーマのフォントが読まれないため、
   ここで読み込んでフロントと同じ見え方にする（フロントでは重複読込でも無害） */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap");

/* エディタ内の本文フォントをフロントに揃える
   （.editor-styles-wrapper はエディタ側にしか存在しないのでフロントへは影響しない） */
.editor-styles-wrapper,
.editor-styles-wrapper p,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper li,
.editor-styles-wrapper td,
.editor-styles-wrapper th,
.editor-styles-wrapper summary {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  letter-spacing: 1px;
}

/* =========================================================
   サービス詳細ページのブロックパターン用スタイル
   ---------------------------------------------------------
   このファイルは「フロント」と「ブロックエディタ」の両方から
   読み込みます（include/basic.php と editor/init.php）。
   片方だけに書くと投稿画面とフロントで見た目がずれるので、
   パターンの見た目に関わるものは必ずここに書くこと。
   ========================================================= */

/* ---------------------------------------------------------
   共通：ブロックの最大幅をコンテンツ幅に合わせる
   --------------------------------------------------------- */
.svc-issue-table,
.svc-step,
.svc-case,
.svc-faq {
  margin-top: 28px;
  margin-bottom: 28px;
}

/* =========================================================
   1. よくある課題テーブル
   ========================================================= */
.wp-block-table.svc-issue-table {
  /* エディタで左に寄らないよう中央寄せ（WPの .wp-block 既定に合わせる） */
  margin-left: auto;
  margin-right: auto;
}
.wp-block-table.svc-issue-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background-color: #fff;
  border: 1px solid #DFDFDF;
  border-radius: 6px;
  overflow: hidden;
  /* テーマ既定の nowrap を解除。これが無いと隣の列へ文字が突き抜ける */
  white-space: normal;
}
.wp-block-table.svc-issue-table th,
.wp-block-table.svc-issue-table td {
  border: 1px solid #DFDFDF;
  /* ボディは必ず白。テーマ既定の薄グレーを打ち消す */
  background-color: #fff;
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.9;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;   /* 長い語も列内で折り返す */
}
.wp-block-table.svc-issue-table td:first-of-type {
  font-weight: 500;
}
/* 左＝課題 / 右＝解決策 */
.wp-block-table.svc-issue-table th:first-child,
.wp-block-table.svc-issue-table td:first-child {
  width: 46%;
}
/* 見出し行：左はグレー、右は青 */
.wp-block-table.svc-issue-table thead th {
  font-weight: 700;
  background-color: #F6F6F6;
  color: #1A1A1A;
}
.wp-block-table.svc-issue-table thead th:last-child {
  background-color: #008EE8;
  color: #fff;
}
.wp-block-table.svc-issue-table tbody td:first-child {
  font-weight: 500;
}

/* =========================================================
   2. 特徴・支援の流れのステップ
   ========================================================= */
.wp-block-columns.svc-step {
  gap: 0 18px;
  align-items: flex-start;
  margin-bottom: 40px;
}
/* 番号カラム（左）— 幅を固定して青い丸にする */
.wp-block-columns.svc-step > .wp-block-column:first-child {
  flex: 0 0 44px !important;
  max-width: 44px;
  min-width: 44px;
}
.svc-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #008EE8;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  letter-spacing: 0.02em;
}
/* 本文カラム（右）— 最小幅で押し広げられないようにする */
.wp-block-columns.svc-step > .wp-block-column:last-child {
  min-width: 0;
}
.svc-step__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  color: #1A1A1A;
  margin: 4px 0 0;
}
.svc-step__desc {
  font-size: 14px;
  line-height: 2;
  color: #1A1A1A;
  margin: 16px 0 0;
}
/* ステップ内の画像（1枚でも2枚並びでも破綻しないように） */
.wp-block-columns.svc-step .wp-block-image,
.wp-block-columns.svc-step .wp-block-gallery {
  margin-top: 20px;
}
.wp-block-columns.svc-step .wp-block-image img {
  border: 1px solid #E3E3E3;
  border-radius: 6px;
}

/* =========================================================
   3. 事例
   Figma 準拠：外枠なし・背景なし。左に画像、右に会社名/タイトル/お客さまの声。
   下の「課題・支援内容・成果」はラベル列＋本文列の2列テーブル。
   セレクタに要素名を付けているのは、テーマの .p-editor 既定を打ち消すため。
   ========================================================= */
.wp-block-group.svc-case {
  border: 0;
  padding: 0;
  background: none;
  margin-left: auto;
  margin-right: auto;
}

/* ---- 上段：画像（左）とテキスト（右） ---- */
.wp-block-columns.svc-case__head {
  gap: 0 36px;
  align-items: flex-start;
  margin-bottom: 0;
}
.wp-block-columns.svc-case__head > .wp-block-column {
  align-self: flex-start;   /* 列を引き伸ばさず上端で揃える */
}
.svc-case__image {
  margin: 0;
}
.svc-case__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
p.svc-case__company {
  font-size: 14px;
  line-height: 1.6;
  color: #777;
  margin: 0;
}
/* タイトル：テーマ既定の左青バーを打ち消す */
h3.svc-case__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: #1A1A1A;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: none;
}
/* お客さまの声 */
.wp-block-group.svc-case__voice {
  background-color: #ECF4FD;
  border-radius: 6px;
  padding: 16px 18px;
  margin: 20px 0 0;
}
p.svc-case__voice-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: #008EE8;
  margin: 0 0 8px;
}
p.svc-case__voice-text {
  font-size: 14px;
  line-height: 1.9;
  color: #1A1A1A;
  margin: 0;
}

/* ---- 下段：課題 / 支援内容 / 成果（2列テーブル） ---- */
.wp-block-table.svc-case__facts {
  margin: 28px auto 0;
}
.wp-block-table.svc-case__facts table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: none;
  border: 0;
  white-space: normal;
}
.wp-block-table.svc-case__facts td {
  background: none;          /* 背景は白（＝透明）。区切り線だけで分ける */
  border: 0;
  border-top: 1px solid #ECECEC;
  padding: 18px 8px;
  font-size: 14px;
  line-height: 1.9;
  color: #1A1A1A;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* ラベル列 */
.wp-block-table.svc-case__facts td:first-of-type {
  width: 8.5em;
  font-weight: 700;
  padding-left: 0;
  white-space: nowrap;
}
.wp-block-table.svc-case__facts tr:last-child td {
  border-bottom: 1px solid #ECECEC;
}

/* =========================================================
   4. よくあるご質問（core/details のトグル）
   ========================================================= */
.wp-block-details.svc-faq {
  background-color: #fff;
  border: 1px solid #E3E3E3;
  border-radius: 6px;
  padding: 20px 24px;
  /* エディタで左に寄らないよう中央寄せ */
  margin: 0 auto 14px;
}
.wp-block-details.svc-faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #1A1A1A;
  cursor: pointer;
  list-style: none;
}
.wp-block-details.svc-faq > summary::-webkit-details-marker,
.wp-block-details.svc-faq > summary::marker {
  display: none;
  content: "";
}
/* 右端の山形アイコン（閉＝∨ / 開＝∧） */
.wp-block-details.svc-faq > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid #1A1A1A;
  border-bottom: 2px solid #1A1A1A;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .2s ease;
}
.wp-block-details.svc-faq[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}
.wp-block-details.svc-faq > *:not(summary) {
  font-size: 14px;
  line-height: 2;
  color: #1A1A1A;
  margin: 14px 0 0;
}

/* =========================================================
   SP（≦767px）
   ========================================================= */
@media (max-width: 767px) {
  /* よくある課題：2列のままだと1セルが狭すぎるので、
     「課題」→「解決策」を縦に積んだカード形式にする */
  .wp-block-table.svc-issue-table table {
    table-layout: auto;
    display: block;
  }
  .wp-block-table.svc-issue-table thead {
    display: none;   /* 1列目がそのまま課題の見出しになるため不要 */
  }
  .wp-block-table.svc-issue-table tbody {
    display: block;
  }
  .wp-block-table.svc-issue-table tbody tr {
    display: block;
    border-bottom: 1px solid #DFDFDF;
  }
  .wp-block-table.svc-issue-table tbody tr:last-child {
    border-bottom: 0;
  }
  .wp-block-table.svc-issue-table td {
    display: block;
    width: auto !important;
    border: 0;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.8;
  }
  /* 課題（上段）：グレー帯で見出しらしく */
  .wp-block-table.svc-issue-table td:first-of-type {
    background-color: #F6F6F6;
    font-weight: 700;
  }
  /* 解決策（下段）：小さい青ラベルを付けて対応関係を明示 */
  .wp-block-table.svc-issue-table td:last-of-type::before {
    content: "c-blog の解決策";
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #008EE8;
    margin-bottom: 4px;
  }

  /* 料金など3列の表は横スクロールで可読性を確保 */
  .wp-block-table.svc-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wp-block-table.svc-table table {
    min-width: 560px;
  }

  /* ステップ：番号と本文を縦に積まず、番号だけ小さくして横並びを保つ */
  .wp-block-columns.svc-step {
    flex-wrap: nowrap !important;
    gap: 0 12px;
  }
  .wp-block-columns.svc-step > .wp-block-column:first-child {
    flex: 0 0 34px !important;
    max-width: 34px;
    min-width: 34px;
  }
  .svc-step__num {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  .svc-step__title {
    font-size: 17px;
  }

  .wp-block-table.svc-case__facts table {
    table-layout: auto;
  }
  .wp-block-table.svc-case__facts td {
    display: block;
    border-top: 0;
    padding: 4px 0;
  }
  .wp-block-table.svc-case__facts td:first-of-type {
    width: auto;
    border-top: 1px solid #ECECEC;
    padding-top: 16px;
  }
  .wp-block-table.svc-case__facts tr:last-child td:last-child {
    padding-bottom: 16px;
  }

  .wp-block-details.svc-faq {
    padding: 16px 18px;
  }
  .wp-block-details.svc-faq > summary {
    font-size: 14px;
  }
}


/* =========================================================
   5. 本文で自由に使う汎用パーツ
   （「支援の内容」「料金」など、パターンを用意していないセクション用）
   ========================================================= */

/* 枠で囲ったボックス（箇条書きを入れる想定） */
.wp-block-group.svc-box {
  border: 1px solid #E3E3E3;
  border-radius: 6px;
  padding: 28px 34px;
  background-color: #fff;
}
.wp-block-group.svc-box ul {
  margin: 0;
  /* テーマ既定の背景グレー・大きな内側余白を打ち消す */
  background: none;
  padding: 0 0 0 1.4em;
}
.wp-block-group.svc-box li {
  font-size: 14px;
  line-height: 2.2;
  color: #1A1A1A;
}

/* 汎用テーブル（見出し行はグレー） */
.wp-block-table.svc-table {
  margin-left: auto;
  margin-right: auto;
}
.wp-block-table.svc-table table {
  width: 100%;
  white-space: normal;
  border-collapse: collapse;
  background-color: #fff;
  border: 1px solid #DFDFDF;
  border-radius: 6px;
  overflow: hidden;
}
.wp-block-table.svc-table th,
.wp-block-table.svc-table td {
  border: 1px solid #DFDFDF;
  background-color: #fff;   /* ボディは白 */
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.9;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}
.wp-block-table.svc-table td:first-of-type {
  font-weight: 500;
}
.wp-block-table.svc-table thead th {
  background-color: #F6F6F6;
  font-weight: 700;
  color: #1A1A1A;
}

@media (max-width: 767px) {
  .wp-block-group.svc-box {
    padding: 20px 18px;
  }
  .wp-block-table.svc-table th,
  .wp-block-table.svc-table td {
    padding: 12px 14px;
    font-size: 13px;
  }
}