@charset "UTF-8";
/* =========================================================
   サービス詳細ページ（page.php／.blog-wrap .blog-cont）の
   コンテンツ装飾。営業資料をそのまま流し込んだだけだと
   見出し・表・箇条書きが素のブラウザ標準の見た目になってしまうため、
   サイトの既存デザイン言語（ゴールドのアクセント、丸みのあるカード、
   ピル型ボタン）に合わせて上書きする。

   common.css には手を入れない（既存方針を踏襲）。
   WordPressコアのブロックCSS（.wp-block-table td 等）が
   theme側の素の td{}/th{} より詳細度で勝ってしまうため、
   ここでは .blog-cont .wp-block-table のように詳細度を
   上げて確実に上書きする。

   読み込みは header.php で front-page-extra.css の直後。
   対象: /clinic-opening/ など、page.php を使う全ての固定ページ本文。
   ========================================================= */

/* ---- 表：カード風の枠＋見出し行を濃色に＋縞模様 ---- */
.blog-cont .wp-block-table{
  margin: 0 0 2.4em;
  border-radius: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #e8e6e2;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
  -webkit-overflow-scrolling: touch;
}
.blog-cont .wp-block-table table{
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: #fff;
}
.blog-cont .wp-block-table th{
  background: var(--color-secondary);
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  padding: 14px 18px;
  border-bottom: none;
}
.blog-cont .wp-block-table td{
  padding: 14px 18px;
  font-size: .95rem;
  line-height: 1.7;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #eeece6;
  color: #333;
}
.blog-cont .wp-block-table tbody tr:last-child td{ border-bottom: none; }
.blog-cont .wp-block-table tbody tr:nth-child(even){ background: #faf9f5; }
.blog-cont .wp-block-table tbody tr:hover{ background: #f5f1e6; }

/* 金額を含む表は数値列を右寄せ・等幅数字にして視認性を上げる */
.blog-cont .wp-block-table.fin-table td:not(:first-child){
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.blog-cont .wp-block-table.fin-table td:first-child{ font-weight: 700; color: var(--color-secondary); }

/* 合計・損益分岐など、強調したい行 */
.blog-cont .wp-block-table tr.table-total-row td{
  background: rgba(var(--color-primary-rgb), .14) !important;
  font-weight: 700;
  color: var(--color-secondary);
  border-top: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

/* 3社体制の表だけヘッダーをブランドカラーに */
.blog-cont .wp-block-table.org-table th{ background: var(--color-secondary); }
.blog-cont .wp-block-table.org-table td:first-child{ font-weight: 700; color: var(--color-secondary); white-space: nowrap; }

@media screen and (max-width: 768px){
  .blog-cont .wp-block-table th,
  .blog-cont .wp-block-table td{ padding: 10px 12px; font-size: .85rem; }
}

/* ---- 番号付きリスト：ホームの事業内容と同じ「大きい番号」の言語を踏襲 ---- */
.blog-cont ol.wp-block-list{
  list-style: none;
  padding-left: 0;
  counter-reset: step;
}
.blog-cont ol.wp-block-list > li{
  counter-increment: step;
  position: relative;
  padding: .35em 0 .35em 3.2em;
  margin-bottom: 1.1em;
  min-height: 2.3em;
}
.blog-cont ol.wp-block-list > li::before{
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: "Iceland", sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---- 箇条書き：マーカーをブランドカラーに ---- */
.blog-cont ul.wp-block-list{ list-style: none; padding-left: 0; }
.blog-cont ul.wp-block-list > li{
  position: relative;
  padding-left: 1.6em;
  margin-bottom: .85em;
}
.blog-cont ul.wp-block-list > li::before{
  content: '';
  position: absolute;
  left: 0;
  top: .68em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--color-primary);
}

/* ---- 開業あるある失敗の引用カード（3列） ---- */
.fail-quotes{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 2em 0 2.2em;
}
.fail-quotes blockquote{
  margin: 0;
  padding: 1.4em 1.3em 1.2em;
  background: #faf9f5;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 8px 8px 0;
}
.fail-quotes blockquote p{
  margin: 0 0 .8em;
  font-size: .95rem;
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1.7;
}
.fail-quotes blockquote cite{
  display: block;
  font-style: normal;
  font-size: .78rem;
  color: #888;
}
@media screen and (max-width: 768px){
  .fail-quotes{ grid-template-columns: 1fr; }
}

/* ---- 費用ハイライトボックス ---- */
.price-box{
  background: linear-gradient(135deg, #fff, #faf6ec);
  border: 1px solid rgba(var(--color-primary-rgb), .4);
  border-radius: 14px;
  padding: 2em 2.2em;
  margin: 1.6em 0 2em;
  text-align: center;
}
.price-box .price-box-label{
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--color-secondary);
  margin: 0 0 .5em;
}
.price-box .price-box-amount{
  font-family: "Iceland", sans-serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--color-primary);
  margin: 0 0 .6em;
  font-weight: 400;
}
.price-box .price-box-amount span{
  font-family: inherit;
  font-size: 1.1rem;
  color: var(--color-secondary);
  margin-left: .3em;
}
.price-box .price-box-note{
  font-size: .82rem;
  color: #777;
  margin: 0;
  line-height: 1.8;
}

/* ---- FAQ：Q/Aをカード化 ---- */
.faq-item{
  background: #faf9f5;
  border-radius: 10px;
  padding: 1.4em 1.6em;
  margin: 0 0 1em;
}
.faq-item .faq-q{
  display: flex;
  gap: .6em;
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0 0 .6em;
  font-size: .98rem;
}
.faq-item .faq-q::before{
  content: 'Q';
  flex-shrink: 0;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-item .faq-a{
  display: flex;
  gap: .6em;
  margin: 0;
  font-size: .92rem;
  line-height: 1.85;
  color: #444;
}
.faq-item .faq-a::before{
  content: 'A';
  flex-shrink: 0;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- 本文内CTAリンクをピル型ボタンに（サイト共通の .service-more-link を流用） ---- */
.blog-cont p.cta-wrap{ text-align: center; margin: 2em 0; }
.blog-cont p.cta-wrap .service-more-link{
  font-size: 1.05rem;
  padding: 14px 34px;
}

/* 8. アイコン付きカードグリッド（図解用の汎用コンポーネント）
   箇条書きで済ませず、視覚的なオブジェクトとして提示するために追加。
   common.css の .icon-badge（丸グラデーションアイコン）をそのまま流用。 */
.icon-card-grid{
  display: grid;
  gap: 20px;
  margin: 2em 0 2.2em;
}
.icon-card-grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
.icon-card-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.icon-card-grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
.icon-card-grid .icon-card{
  background: #faf9f5;
  border-radius: 12px;
  padding: 2em 1.4em 1.6em;
  text-align: center;
}
.icon-card-grid .icon-card .icon-badge{ margin: 0 auto 16px; }
.icon-card-grid .icon-card h3,
.icon-card-grid .icon-card h4{
  margin: 0 0 .6em;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-secondary);
}
.icon-card-grid .icon-card p{
  margin: 0;
  font-size: .86rem;
  line-height: 1.8;
  color: #555;
  text-align: left;
}
.icon-card-grid .icon-card ul{
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.icon-card-grid .icon-card ul li{
  font-size: .86rem;
  line-height: 2;
  color: #555;
  padding-left: 1.1em;
  position: relative;
}
.icon-card-grid .icon-card ul li::before{
  content: '';
  position: absolute;
  left: 0;
  top: .85em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}
@media screen and (max-width: 900px){
  .icon-card-grid.cols-3, .icon-card-grid.cols-4{ grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 600px){
  .icon-card-grid.cols-2, .icon-card-grid.cols-3, .icon-card-grid.cols-4{ grid-template-columns: 1fr; }
}

/* 9. 費用の「含まれる／含まれない」2カラム比較カード */
.scope-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 1.6em 0 2em;
}
.scope-grid .scope-card{
  border-radius: 12px;
  padding: 1.6em 1.8em;
}
.scope-grid .scope-card.is-included{ background: rgba(var(--color-primary-rgb), .08); border: 1px solid rgba(var(--color-primary-rgb), .3); }
.scope-grid .scope-card.is-excluded{ background: #f5f5f3; border: 1px solid #e2e0da; }
.scope-grid .scope-card h3,
.scope-grid .scope-card h4{
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0 0 .8em;
  font-size: .95rem;
  font-weight: 700;
  color: var(--color-secondary);
}
.scope-grid .scope-card h3 .material-icons,
.scope-grid .scope-card h4 .material-icons{ font-size: 1.3rem; }
.scope-grid .scope-card.is-included h3 .material-icons,
.scope-grid .scope-card.is-included h4 .material-icons{ color: var(--color-primary); }
.scope-grid .scope-card.is-excluded h3 .material-icons,
.scope-grid .scope-card.is-excluded h4 .material-icons{ color: #999; }
.scope-grid .scope-card ul{ margin: 0; padding: 0; list-style: none; }
.scope-grid .scope-card ul li{
  font-size: .86rem;
  line-height: 2;
  color: #444;
  padding-left: 1.1em;
  position: relative;
}
.scope-grid .scope-card ul li::before{
  content: '';
  position: absolute;
  left: 0;
  top: .85em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .4;
}
@media screen and (max-width: 600px){
  .scope-grid{ grid-template-columns: 1fr; }
}

/* 10. 金額を「お問い合わせ時に」に変更した際の代替ボックス */
.quiet-note-box{
  background: #faf9f5;
  border: 1px dashed rgba(var(--color-primary-rgb), .5);
  border-radius: 12px;
  padding: 1.8em 2em;
  margin: 1.6em 0 2em;
  text-align: center;
}
.quiet-note-box p{ margin: 0; font-size: .95rem; color: #444; line-height: 1.9; }
.quiet-note-box strong{ color: var(--color-secondary); }

/* 11. 会社紹介ミニブロック（PG Labへのリンクを明示） */
.company-intro-box{
  display: flex;
  align-items: center;
  gap: 1.6em;
  background: #fff;
  border: 1px solid #e8e6e2;
  border-radius: 14px;
  padding: 1.8em 2em;
  margin: 2em 0;
}
.company-intro-box img{ width: 140px; flex: none; margin: 0; }
.company-intro-box p{ margin: 0 0 .6em; font-size: .9rem; line-height: 1.9; color: #444; }
.company-intro-box a{ font-weight: 700; color: var(--color-primary); }
@media screen and (max-width: 600px){
  .company-intro-box{ flex-direction: column; text-align: center; }
}

/* 12. 最終CTA帯：このページのCVは経営診断ツールではなく開業相談の問い合わせ */
.cta-band{
  background: var(--color-secondary);
  border-radius: 16px;
  padding: 2.6em 2em;
  margin: 2em 0 0;
  text-align: center;
}
.cta-band h3{ margin: 0 0 .6em; font-size: 1.3rem; color: #fff; }
.cta-band p{ margin: 0 0 1.4em; font-size: .92rem; color: rgba(255,255,255,.8); line-height: 1.9; }
.cta-band a.service-more-link{
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-size: 1.05rem;
  padding: 14px 36px;
}
.cta-band a.service-more-link:hover{ opacity: .88; }


/* 13. .cta-band内にCF7フォームを直接埋め込む場合の可読性調整（ダーク背景用） */
.cta-band .form-dl div{ border-bottom-color: rgba(255,255,255,.25); }
.cta-band .form-dl div dt{ color: #fff; }
.cta-band .form-dl div dt .mark{ color: #fff; }
.cta-band .form-privacy-link{ color: rgba(255,255,255,.75); }
.cta-band .form-privacy-link a{ color: var(--color-primary); }
.cta-band .caution{ color: #fff !important; }
.cta-band .wpcf7-form-control-wrap .wpcf7-list-item label{ color: #fff; }
.cta-band #form-message{ color: #fff; }
.cta-band form.wpcf7-form{ text-align: left; margin-top: 1.6em; }