@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/*******以下追加*/
/* ロゴ左・メニュー右（Cocoon想定の共通セレクタ群） */
#header .container, .header .container, .header-container {
  display:flex !important; align-items:center !important; justify-content:space-between !important;
}
/* ロゴ側を左寄せ＆左側に固定 */
#header .logo, .header .logo, .site-branding, .logo-header, .header-logo {
  margin-right:auto !important; text-align:left !important; justify-content:flex-start !important;
}
/* “中央寄せ”クラスを殺す */
.logo-center, .header-logo-center, .logo-centered, .title-center { text-align:left !important; }
/* ナビ側を右へ追いやる */
#navi, .navi, .global-nav, .menu-header, .header .menu, .menu-container {
  margin-left:auto !important; display:flex !important; justify-content:flex-end !important; align-items:center !important;
}
#navi .menu, .global-nav .menu, .menu-header .menu {
  display:flex !important; gap:16px !important; justify-content:flex-end !important; align-items:center !important;
}
/* スキン由来の中央寄せを無効化 */
#header .logo img, .header .logo img { margin-left:0 !important; margin-right:auto !important; }
/* モバイルでは従来の挙動でOK（必要なら下記を調整） */
@media (max-width: 767px){
  #navi, .navi, .global-nav { justify-content:flex-start !important; }
}




/* ロゴの縦つぶれ防止（比率固定） */
#header .logo img,
.header .logo img,
.site-branding img,
.custom-logo {
  height: auto !important;
  width: auto !important;
  max-height: 48px;   /* ← 好みで 40–64px 程度に調整 */
  object-fit: contain;
}

/* ロゴコンテナの伸び防止・中央揃え */
#header .logo,
.header .logo,
.site-branding,
.header-logo {
  display: flex;
  align-items: center;     /* ← stretch を打ち消す */
  line-height: 1;          /* 行高で潰れないよう保険 */
}

/* ヘッダー行の縦中央揃え（メニューとの高さ合わせ） */
#header .container,
.header .container,
.header-container {
  display: flex;
  align-items: center;     /* 重要 */
}

/* スキンが img{height:100%} を当てている場合の保険 */
.header img {
  height: auto !important;
}

/* ロゴ画像の表示サイズを明示（デスクトップ/モバイル） */
.custom-logo,
#header .logo img,
.header .logo img,
.site-branding img{
  height:72px !important;   /* ←好みで 60〜80px */
  width:auto !important;
  max-height:none !important; /* 以前のmax-height指定を無効化 */
  object-fit:contain;
}
@media (max-width:767px){
  .custom-logo,
  #header .logo img,
  .header .logo img,
  .site-branding img{height:48px !important;}
}

/* ロゴ行の高さも合わせる */
#header .container,
.header .container,
.header-container{min-height:72px; align-items:center;}


/* ====== FootMedi main sections ====== */
.fm-page{background:linear-gradient(#f0f9ff, #fff 30%, #f0f9ff)}
.fm-wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.fm-wrap.two{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.fm-wrap.two{grid-template-columns:1.05fr .95fr}}
.fm-section{padding:48px 0}
.fm-section-bordered{padding:48px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.fm-section h2{font-size:clamp(20px,3vw,24px);font-weight:700;margin:0}
.lead{color:#64748b}

/* Hero */
.fm-hero{padding:48px 0}
.fm-hero h1{font-size:clamp(28px,5vw,44px);line-height:1.2;margin:0 0 8px}
.fm-hero h1 span{display:block;color:#0369a1}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.btn{display:inline-block;padding:10px 16px;border-radius:12px;text-decoration:none;border:1px solid #e2e8f0}
.btn.primary{background:#0284c7;color:#fff;border-color:#0284c7}
.btn.ghost{background:#fff;color:#0f172a}
.btn.small{padding:8px 12px;font-size:14px;border-radius:10px}
.badges{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 0;padding:0;color:#64748b;list-style:none}
.fm-hero-card{background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.ph-image{display:grid;place-items:center;aspect-ratio:4/3;border-radius:16px;background:linear-gradient(135deg,#e0f2fe,#fff)}
.ph-image>div{color:#0c4a6e;font-weight:600}
.ph-image p{margin:4px 0 0;color:#64748b;font-size:13px;text-align:center}
.fm-contacts{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px;color:#64748b;font-size:13px}
@media(min-width:640px){.fm-contacts{grid-template-columns:repeat(3,1fr)}}

/* Cards & grids */
.grid-3{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
.grid-4{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.card.soft{background:#f0f9ff63}
.card .row{display:flex;align-items:center;gap:10px;color:#0369a1}
.card .tt{font-weight:600}
.card .ico{font-size:22px}
.card .price{margin:8px 0 6px;font-size:22px;font-weight:700}
.card .price span{font-size:12px;color:#64748b}

/* Table */
.tbl-wrap{overflow:auto;margin-top:18px;border:1px solid #e5e7eb;border-radius:16px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl thead{background:#e0f2fe;color:#0c4a6e}
.tbl th,.tbl td{padding:10px}
.tbl tr+tr{border-top:1px solid #e5e7eb}
.tbl .tr{text-align:right}

/* Flow */
.step{font-size:22px;font-weight:700;color:#0369a1}

/* Area */
.note{color:#64748b;margin-top:6px}
.ph-map{display:grid;place-items:center;aspect-ratio:16/9;border-radius:16px;background:linear-gradient(135deg,#e0f2fe,#fff);border:1px solid #e5e7eb;margin-top:14px}
.ph-map>div{color:#0c4a6e;font-weight:600}
.ph-map p{margin:4px 0 0;color:#64748b;font-size:12px}

/* FAQ */
.faq details{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer;font-weight:600;color:#0f172a}

/* CTA band */
.fm-cta-band{background:linear-gradient(90deg,#0284c7,#0369a1);color:#fff}
.fm-cta-band .fm-wrap.two{align-items:center}
.fm-cta-band h2{margin:0}
.fm-cta-band .sub{color:#dbeafe;margin-top:6px}
.cta-buttons{display:flex;flex-direction:column;gap:10px}
.btn.wide{display:flex;justify-content:center;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;text-decoration:none}
.btn.white{background:#fff;color:#075985;border-color:#fff}
.btn.ghost-white{background:transparent;color:#e2e8f0;border-color:rgba(255,255,255,.5)}

/* ===========================
   Header ⇄ Main の境目をゼロ
   =========================== */
/* 記事ヘッダーの下側を詰める（タイトル・日付行ふくむ） */
.article-header,
.entry-header{margin-bottom:0!important;padding-bottom:0!important;border-bottom:none!important}

/* 日付やアイキャッチの余白を消す */
.date-tags,
.eye-catch-wrap{margin:0!important;padding:0!important}

/* “メイン直前のウィジェット帯”が空でも隙間を作らない */
#content-top,
#content-top-in,
#content-top .wrap{margin:0!important;padding:0!important}

/* マージンのにじみ（折り畳み）対策 */
.article-header{overflow:hidden}

/* 記事ヘッダー直後の本文の上余白をゼロ */
.article-header + .entry-content{margin-top:0!important;padding-top:0!important}

/* content-top の直後が main/container のときの上余白をゼロ */
#content-top + #main,
#content-top + .l-container{margin-top:0!important;padding-top:0!important}

/* 念のため main 側の“外周”上余白もゼロ化（中身の余白は触らない） */
#main,
.l-container,
.site-main,
.content{margin-top:0!important;padding-top:0!important}


/* ===========================
   Main ⇄ Footer の境目をゼロ
   =========================== */
/* main 側の下余白をゼロ（外周のみ） */
#main,
.l-container,
.site-main,
.content{margin-bottom:0!important;padding-bottom:0!important}

/* main 直後の content-bottom 帯が空でも隙間を作らない */
#content-bottom,
.content-bottom{margin:0!important;padding:0!important;border:none!important}

/* フッターの“外周”上余白をゼロ */
#footer,
.footer,
.footer-container{margin-top:0!important;padding-top:0!important}

/* テーマがフッター境界に擬似要素の線を出す場合は消す */
#footer::before,#footer::after,
.footer::before,.footer::after{content:none!important;display:none!important}

/* フッター内側（in / bottom）の先頭パディングをゼロ
   ※フッター内の最小パディングを残したい場合はここを 8–16px に */
#footer-in,
.footer-in,
.navi-footer-in,
.footer-bottom{margin:0!important;padding-top:0!important}

/* ============================
   Header ⇄ Main の隙間削除（Cocoon構造対応）
   ============================ */

/* content-top 全体の外周余白と高さをゼロに */
#content-top,
.content-top {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  border: none !important;
  background: none !important;
}

/* content-top 内部もゼロ化 */
#content-top-in,
.content-top-in,
#content-top .wrap,
.content-top .wrap {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* 空のウィジェットを非表示（中身があるときだけ高さ発生） */
.widget-content-top:empty,
.widget_box_menu:empty {
  display: none !important;
}

/* content-top の直後（main / container）の上余白をゼロに */
#content-top + #main,
#content-top + .l-container,
#content-top + .site-main,
#content-top + .content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 20251017ここまでは完了ヘッダーフッタ余白問題 */



/* ヒーローセクション（トップ見出し）背景を淡い水色に */
.fm-hero {
  background-color: #f5fbff !important;
}

/* 背景グラデーションなどを上書きして単色にする場合 */
.fm-hero {
  background: #f5fbff !important;
}

/* ───────────────
   安心への配慮セクション
   タイトル：白
   カード：淡ブルー＋薄い枠線
   ─────────────── */

/* タイトル部分（h2）は白背景 */
.fm-section.care,
.fm-section.care .fm-wrap > h2,
.fm-section:nth-of-type(2),
.fm-section:nth-of-type(2) .fm-wrap > h2 {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* カード部分（衛生管理・医療職の対応・個人情報の保護） */
.fm-section.care .card,
.fm-section:nth-of-type(2) .card {
  background-color: #f9fdff !important;
  background: #f9fdff !important;
  border: 1px solid #e5e7eb !important;  /* 枠線を薄いグレーで復活 */
  border-radius: 16px;                   /* 角丸を保つ（好みに応じて） */
  box-shadow: none !important;           /* 影は消してスッキリ */
}



/* 施術内容・料金セクション背景を淡いブルーに */
.fm-section.price,
.fm-section:nth-of-type(3) {
  background-color: #f9fdff !important;
  background: #f9fdff !important;
}

/* 「施術内容・料金」見出し文字の背後に淡い帯を敷く */
.fm-section.price h2,
.fm-section:nth-of-type(3) h2 {
  display: inline-block;
  background-color: #f9fdff;
  padding: 4px 12px;          /* 背景帯の余白（上下・左右） */
  border-radius: 6px;         /* 角をやや丸く */
  font-weight: 700;
  line-height: 1.4;
}

/* ───────────────
   ご利用の流れセクション
   タイトル：白
   カード：淡ブルー＋薄い枠線
   ─────────────── */

/* タイトル部分（h2）は白背景 */
.fm-section.flow,
.fm-section.flow .fm-wrap > h2,
.fm-section:nth-of-type(4),
.fm-section:nth-of-type(4) .fm-wrap > h2 {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* カード部分（手順など） */
.fm-section.flow .card,
.fm-section:nth-of-type(4) .card {
  background-color: #f9fdff !important;
  background: #f9fdff !important;
  border: 1px solid #e5e7eb !important;  /* 薄いグレーの枠線 */
  border-radius: 16px;                   /* 角丸を保持 */
  box-shadow: none !important;           /* 影を消して清潔感を保つ */
}


/* 「お客様の声」＆「よくある質問」セクション背景を淡いブルーに */
.fm-section.voice,
.fm-section.faq,
.fm-section:nth-of-type(5),
.fm-section:nth-of-type(6) {
  background-color: #f9fdff !important;
  background: #f9fdff !important;
}

/* 「よくある質問」セクション背景を #f9fdff に強制 */
.fm-section.faq,
.fm-section:nth-of-type(6),
#faq,
.faq,
section.faq,
div.faq {
  background-color: #f9fdff !important;
  background: #f9fdff !important;
}

/* 内包されているカードやブロックの白背景を統一 */
.fm-section.faq .card,
#faq .card,
.faq .card {
  background-color: #f9fdff !important;
  background: #f9fdff !important;
  box-shadow: none !important;
  border: none !important;
}

/* 「よくある質問」見出しにも同色を適用 */
.fm-section.faq h2,
#faq h2,
.faq h2 {
  background-color: #f9fdff !important;
  background: #f9fdff !important;
}

/* 「訪問対応エリア」セクション背景を白に */
.fm-section.area,
.fm-section:nth-of-type(7),
#area,
section.area,
div.area {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* 内包されているカードやブロックも白で統一 */
.fm-section.area .card,
#area .card,
.area .card {
  background-color: #ffffff !important;
  background: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
}

/* 見出しも白背景で一体化 */
.fm-section.area h2,
#area h2,
.area h2 {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* 「お客様の声」見出しの文字部分だけ淡いブルー帯に */
.fm-section .fm-wrap > h2 {
  display: inline-block;
  background-color: #f9fdff;
  padding: 4px 12px;   /* 背景帯の余白 */
  border-radius: 6px;  /* 角の丸み */
  font-weight: 700;
  line-height: 1.4;
}

/*ヘッダーのスタイル編集スタート ====== ヘッダーナビ・ベース ====== -------------------------------------------------------------------------------*/
#navi .menu li a,
.global-nav .menu li a,
.navi a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.5ch;
  padding:10px 8px;
  font-weight:600;
  color:#0f172a;              /* 文字色：インク */
  text-decoration:none;
  line-height:1.2;
}

/* 文字のトーン（通常時は少し淡く、hoverで濃く） */
#navi .menu li a,
.global-nav .menu li a,
.navi a{color:#0f172a;}
#navi .menu li a:hover,
.global-nav .menu li a:hover,
.navi a:hover{color:#0369a1}

/* 下線スライド（hover時に左→右へ伸びる） */
#navi .menu li a::after,
.global-nav .menu li a::after,
.navi a::after{
  content:"";
  position:absolute;
  left:8px; right:8px; bottom:6px;      /* 文字の下に細線 */
  height:2px;
  background:#0284c7;                   /* 医療系ブルー */
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s ease;
}
#navi .menu li a:hover::after,
.global-nav .menu li a:hover::after,
.navi a:hover::after{transform:scaleX(1)}

/* 現在ページ（WPの標準クラス）を強調 */
#navi .menu .current-menu-item > a,
#navi .menu .current_page_item > a,
.global-nav .menu .current-menu-item > a,
.global-nav .menu .current_page_item > a,
.navi .current-menu-item > a,
.navi .current_page_item > a{
  color:#0284c7;
}
#navi .menu .current-menu-item > a::after,
#navi .menu .current_page_item > a::after,
.global-nav .menu .current-menu-item > a::after,
.global-nav .menu .current_page_item > a::after,
.navi .current-menu-item > a::after,
.navi .current_page_item > a::after{
  transform:scaleX(1);
}

/* アクセシビリティ（キーボード操作で見えるフォーカス） */
#navi .menu li a:focus-visible,
.global-nav .menu li a:focus-visible,
.navi a:focus-visible{
  outline:2px solid #94d6ff; outline-offset:2px; border-radius:6px;
}

/* モバイル：タップしやすい行高と余白 */
@media(max-width:767px){
  #navi .menu li a,
  .global-nav .menu li a,
  .navi a{padding:12px 10px}
}

/* 低モーション環境への配慮 */
@media (prefers-reduced-motion: reduce){
  #navi .menu li a::after,
  .global-nav .menu li a::after,
  .navi a::after{transition:none}
}

/*ヘッダーのスタイル編集エンド--------------------------------------------------------------------------------------------------------*/

/*ごあいさつのスタイル編集スタート--------------------------------------------------------------------------------------------------------*/
/* ================================
   /introduce/ ごあいさつ 最終版CSS
   ================================ */

/* 1) ごあいさつボックス（枠なし・白背景・わずかな影） */
.intro-box{
  background:#ffffff;
  border:1px solid #ffffff;      /* 枠は実質非表示 */
  border-radius:20px;
  padding:40px 36px;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
  max-width:900px;
  margin:0 auto 48px;
}

/* 2) 見出し（枠・下線を出さない／上品な明朝） */
.intro-box h1{
  font-family:"Noto Serif JP","Yu Mincho",serif;
  font-size:28px;
  font-weight:600;
  color:#0369a1;
  text-align:center;
  letter-spacing:.03em;
  margin:0 0 24px !important;
  padding:0 !important;
  border:none !important;
  box-shadow:none !important;
  background:none !important;
}

/* 3) 本文（読みやすい行間と両端揃え） */
.intro-prose p{
  font-family:"Noto Sans JP","Yu Gothic",sans-serif;
  font-size:16.5px;
  line-height:1.9;
  color:#1e293b;
  margin:0 0 1.2em;
  text-align:justify;
}

/* ごあいさつ末尾のセンターテキスト強調 */
.intro-prose .has-text-align-center{
  text-align:center;
  font-weight:600;
  color:#075985;
  margin-top:1.5em;
  font-size:17px;
}

/* 4) 箇条書き（資格・経歴） */
.intro-list{list-style:none;margin:.8rem 0;padding:0}
.intro-list li{
  position:relative;
  padding-left:1.25em;
  margin:.35em 0;
  line-height:1.7;
  color:#0f172a;
}
.intro-list li::before{
  content:"";
  position:absolute; left:.2em; top:.6em;
  width:6px; height:6px; border-radius:50%;
  background:#0369a1; opacity:.9;
}
/* カード内の余白微調整 */
.card .intro-list{margin-top:.4rem}
.card .intro-list li{margin:.3em 0}

/* 5) プロフィールセクションの余白除去＆枠なし */
.fm-section.intro-profile{margin:0 !important; padding:0 !important}
.fm-section.intro-profile .fm-wrap.two{margin:0 !important; padding:0 !important; gap:0 !important}
.intro-profile-text,
.intro-profile-photo{margin:0 !important; padding:0 !important}
.intro-profile-photo{border:none !important; box-shadow:none !important; background:none !important}
.intro-profile-photo img{display:block; width:100%; height:auto; border:none !important; box-shadow:none !important}
/* 空要素起因の隙間を消す */
.intro-profile-photo br,
.fm-section.intro-profile p:empty{display:none !important}

/* 6) モバイル最適化 */
@media (max-width:767px){
  /* 2カラム → 1カラム */
  .intro-profile .fm-wrap.two{grid-template-columns:1fr}

  /* 資格・経歴カードの中央寄せを解除し左寄せに */
  .fm-section.intro-points .card{ text-align:left !important; align-items:flex-start !important }
  .fm-section.intro-points ul,
  .fm-section.intro-points li{ text-align:left !important; margin-left:0 !important; padding-left:1.2em !important }
  .fm-section.intro-points li::before{ left:0 !important }
}

@media (max-width:600px){
  .intro-box{padding:24px 20px}
  .intro-box h1{font-size:22px}
  .intro-prose p{font-size:15px}
}

@media (max-width:480px){
  .intro-list li{line-height:1.8}
}

/*ごあいさつのスタイル編集エンド--------------------------------------------------------------------------------------------------------*/
/*ヒーロー画像スタート--------------------------------------------------------------------------------------------------------*/
/* Hero画像（右カラム）の見た目を整える */
.ph-image {
  position: relative;
  display: grid;
  place-items: center;
  background: #f9fdff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  aspect-ratio: 4/3;
}

/* 実際の画像を全体にきれいにフィット */
.ph-image img.hero-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 枠いっぱいにきれいにトリミング */
  object-position: center;
  display: block;
}

/* モバイル時は縦長で見やすく */
@media (max-width: 767px) {
  .ph-image { aspect-ratio: 16/10; }
}
/*ヒーロー画像エンド--------------------------------------------------------------------------------------------------------*/
/*一番下の青いお問い合わせバースタート--------------------------------------------------------------------------------------------------------*/
/* contactセクション全体を#0077beに統一 */
#contact.fm-section.cta {
  background-color: #0077be;
  color: #ffffff;
}

/* h2の白背景・余白をリセットして統一色に */
#contact.fm-section.cta h2 {
  background-color: transparent; /* 背景を透明にする */
  color: #ffffff;                /* 文字は白に */
  margin: 0 auto 20px;           /* 下にだけ少し余白 */
  padding: 0;                    /* 内側余白を削除 */
  border: none;                  /* 下線などがある場合も削除 */
  box-shadow: none;              /* 影効果も削除 */
}

/* サブテキストや段落も白文字に */
#contact.fm-section.cta p {
  color: #ffffff;
}

/* ボタン配色も統一（必要に応じて） */
#contact.fm-section.cta .btn.white,
#contact.fm-section.cta .btn.ghost-white {
  background-color: #ffffff;
  color: #0077be;
  border: none;
  transition: 0.3s;
}
#contact.fm-section.cta .btn.white:hover,
#contact.fm-section.cta .btn.ghost-white:hover {
  background-color: #e0e0e0;
  color: #005a91;
}
/*一番下の青いお問い合わせバーエンド--------------------------------------------------------------------------------------------------------*/
/*地図の調整スタート--------------------------------------------------------------------------------------------------------*/
/* セクション全体の余白を調整 */
#area.fm-section.fm-section-bordered {
  padding-top: 0;
  padding-bottom: 0;
}

/* 画像コンテナ調整 */
#area .ph-map {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 上下の余白をカット */
  line-height: 0;   /* 画像下の隙間を消す */
}

/* 画像フィット設定 */
#area .ph-map .area-map {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 余白を消して中央でトリミング */
  object-position: center;
  border: none;
}
/*地図の調整エンド--------------------------------------------------------------------------------------------------------*/
/*料金表ｓ--------------------------------------------------------------------------------------------------------*/
/* ===== /menu/ 表スタイル（強化版） ===== */
section.fm-section.menu-sync{padding:48px 0}
section.fm-section.menu-sync>.fm-wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* 見出し（必要なら表示のまま。非表示にしたい場合は下のコメント解除） */
/* section.fm-section.menu-sync h2.wp-block-heading.has-background{display:none!important} */

section.fm-section.menu-sync figure.wp-block-table{margin:0;overflow:hidden}
section.fm-section.menu-sync figure.wp-block-table>table{
  width:100%!important;border-collapse:separate;border-spacing:0;
  background:#fff;border:1px solid #e7ecf2;border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.08)
}
section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr>td{
  padding:14px 16px;vertical-align:top;line-height:1.7;color:#26323a;
  border-bottom:1px solid #eef3f7
}

/* 先頭行をヘッダー風（元は<td>なのでCSSで演出） */
section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr:first-child>td{
  background:linear-gradient(180deg,#f6fbff 0%,#ecf6ff 100%)!important;
  color:#0f2b3e;font-weight:800;border-bottom:2px solid #d9e8f8
}

/* 偶数行のうっすらゼブラ */
section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr:nth-child(even)>td{background:#fcfeff}

/* 左端列のアクセントバー＆強調（ヘッダー行を除外） */
section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr:not(:first-child)>td:first-child{
  font-weight:700;color:#0f2b3e;border-left:4px solid #0077be
}

/* 料金列（3列目）を強調 */
section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr>td:nth-child(3){
  color:#0077be;font-weight:800;white-space:nowrap
}

/* 角丸を視覚化 */
section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr:first-child>td:first-child{border-top-left-radius:16px}
section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr:first-child>td:last-child{border-top-right-radius:16px}
section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr:last-child>td:first-child{border-bottom-left-radius:16px}
section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr:last-child>td:last-child{border-bottom-right-radius:16px}

/* スマホ保険（表の崩れ防止） */
@media(max-width:860px){
  section.fm-section.menu-sync figure.wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  section.fm-section.menu-sync figure.wp-block-table>table{min-width:720px}
}
@media(max-width:480px){
  section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr>td{padding:12px 12px}
}

h2.wp-block-heading.has-background {
  display: none !important;
}
/* ===== モバイル時：表→カード化（HTML変更なし） ===== */
@media (max-width: 760px){
  /* テーブル全体をブロック表示にして“行＝カード”化 */
  section.fm-section.menu-sync figure.wp-block-table>table{
    display:block;border-collapse:separate;border-spacing:0;
    background:transparent;border:none;box-shadow:none
  }
  /* 1行目（ヘッダー行）は非表示 */
  section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr:first-child{display:none}

  /* 各データ行をカード化 */
  section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr{
    display:block;background:#fff;border:1px solid #e7ecf2;border-radius:14px;
    box-shadow:0 6px 16px rgba(0,0,0,.07);padding:10px 12px;margin:14px 0
  }

  /* 各セルを“ラベル＋内容”の2カラム風に */
  section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr>td{
    display:flex;gap:10px;align-items:flex-start;
    padding:10px 4px;border-bottom:1px solid #eef3f7;
    background:transparent !important; /* 既存ゼブラ無効化 */
  }
  /* 最後のセルの下線は消す */
  section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr>td:last-child{border-bottom:none}

  /* ラベル（nth-childで見出し名を付与） */
  section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr>td:nth-child(1)::before{
    content:"メニュー";min-width:7em;font-weight:700;color:#0f2b3e
  }
  section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr>td:nth-child(2)::before{
    content:"所要時間";min-width:7em;font-weight:700;color:#0f2b3e
  }
  section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr>td:nth-child(3)::before{
    content:"料金（すべて税込・出張費込）";min-width:7em;font-weight:700;color:#0f2b3e
  }
  section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr>td:nth-child(4)::before{
    content:"サービス内容";min-width:7em;font-weight:700;color:#0f2b3e
  }

  /* 料金の強調は維持 */
  section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr>td:nth-child(3){
    color:#0077be;font-weight:800;white-space:normal
  }

  /* 左バー装飾はカード化では不要なので無効化 */
  section.fm-section.menu-sync figure.wp-block-table>table>tbody>tr:not(:first-child)>td:first-child{
    border-left:none
  }
}


/*料金表e--------------------------------------------------------------------------------------------------------*/

#services .more-link{margin-top:16px; text-align:center}
#services .more-link a{
  display:inline-block; padding:10px 16px; border-radius:10px;
  text-decoration:none; font-weight:700;
  background:#0077be; color:#fff; border:2px solid #0077be;
  transition:.2s;
}
#services .more-link a:hover{opacity:.9}

/* ===== 安心への配慮s -------------------------------------------------------------------------------===== */
#trust {padding: 48px 0; background: #f6fbff}
#trust .fm-wrap {max-width: 1080px; margin: 0 auto; padding: 0 20px}

/* 見出し */
#trust h2 {
  margin: 0 0 18px;
  font-size: 1.8rem; font-weight: 800; line-height: 1.25;
  color: #0f2b3e;
  position: relative; padding-left: 12px;
}
#trust h2:before {
  content: ""; position: absolute; left: 0; top: .2em; bottom: .2em;
  width: 6px; border-radius: 6px; background: #0077be;
}

/* グリッド */
#trust .grid-3 {
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px){ #trust .grid-3 {grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ #trust .grid-3 {grid-template-columns: 1fr} }

/* カード */
#trust .card.soft {
  background: #fff; border: 1px solid #e7ecf2; border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  padding: 18px; transition: transform .15s ease, box-shadow .15s ease;
}
#trust .card.soft:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.08) }
@media (prefers-reduced-motion: reduce){
  #trust .card.soft, #trust .card.soft:hover {transition: none; transform: none}
}

/* タイトル（小見出し） */
#trust .tt {
  font-weight: 800; color: #0077be; margin-bottom: 8px; font-size: 1.15rem;
  display: inline-flex; align-items: center; gap: 8px;
}
#trust .tt::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: #0077be33; box-shadow: inset 0 0 0 2px #0077be;
}

/* 本文 */
#trust p {margin: 0; color: #26323a; line-height: 1.8}

/* 余白微調整（セクション間の境界が近い場合） */
#trust.fm-section-bordered {border-top: 1px solid #e7ecf2; border-bottom: 1px solid #e7ecf2}

/* ===== 安心への配慮e-------------------------------------------------------------------------------===== */
/* ===== hero画像s-------------------------------------------------------------------------------===== */
/* ===== Hero 画像：最終安定版（数値は下の変数だけ） ===== */
:root{
  --hero-w: 600px;          /* PC時の表示幅（数値だけ変えればOK） */
  --hero-h: 375px;          /* PC時の表示高さ（数値だけ変えればOK） */
  --hero-pos-y: 45%;        /* 見せたい縦位置（0%=上 / 50%=中央） */
  --hero-radius: 16px;      /* 角丸 */
  --hero-m-ratio: 16/9;     /* スマホ時の比率（16/9, 4/3 など） */
}

/* 空pは無効化（WPの自動挿入対策） */
.fm-hero-card>p:empty{display:none!important;margin:0!important;padding:0!important}

/* 右カラムの枠：余分な伸張を止める（display指定は触らない） */
.fm-hero-card{margin:0!important;padding:0!important}

/* 画像枠：ピクセル固定。余白/枠線/比率指定をリセット */
.fm-hero-card .ph-image{
  position:relative!important;
  box-sizing:content-box!important;    /* 枠線・padding 加算を避ける */
  width:var(--hero-w)!important;
  height:var(--hero-h)!important;
  max-width:none!important;
  margin:0!important;padding:0!important;border:0!important;outline:0!important;
  overflow:hidden!important;border-radius:var(--hero-radius)!important;
  background:#eef4f8; line-height:0!important;
}

/* 画像：枠いっぱいにフィット（白い縁ゼロ） */
.fm-hero-card .ph-image .hero-main-img{
  position:absolute!important; inset:0!important;
  display:block!important; margin:0!important; padding:0!important; border:0!important;
  width:100%!important; height:100%!important;
  object-fit:cover!important; object-position:center var(--hero-pos-y)!important;
  background:none!important; opacity:1!important; visibility:visible!important; transform:none!important;
}

/* 親の高さを引っ張らせない保険（既存のflex/gridと衝突しにくい） */
.fm-hero .fm-wrap.two{align-items:start!important}

/* ▼ スマホ：幅100%＋比率維持（absoluteでも高さが出る） */
@media (max-width:800px){
  .fm-hero-card .ph-image{
    width:100%!important; height:auto!important; max-width:100%!important;
    aspect-ratio:var(--hero-m-ratio)!important;   /* 例：16/9, 4/3, 2/1 */
  }
  .fm-hero-card .ph-image .hero-main-img{
    object-position:center 42%!important; /* スマホでの見せ位置だけ微調整 */
  }
}
/* ===== hero画像e-------------------------------------------------------------------------------===== */

/* ===== hero画像の左側文書ｓ-------------------------------------------------------------------------------===== */
/* === Heroテキスト調整 === */

/* 見出し（上に少しスペース） */
.fm-hero-copy h1 {
  margin-top: 16px;      /* ← 上方向の余白を追加 */
  margin-bottom: 0.6rem; /* ↓ リード文との間を少し詰める */
  font-size: 2.2rem;
  line-height: 1.4;
  font-weight: 800;
}

/* リード文（下の余白を詰めてボタンとの間を近づける） */
.fm-hero-copy .lead {
  margin-top: 0.3rem;
  margin-bottom: 0.6rem; /* ← この値を小さくして詰める */
  font-size: 1.1rem;
  line-height: 1.7;
  color: #333;
}

/* ボタン間の余白（上下の隙間を整える） */
.fm-hero-copy .btns {
  margin-top: 0.4rem;   /* ↓ リード文との距離を短縮 */
  margin-bottom: 1rem;  /* ↓ バッジとのバランス確保 */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* === フットケア見出しの改行調整 === */
.fm-hero-copy h1 {
  margin-top: 16px;
  margin-bottom: 0.6rem;
  font-size: 2.2rem;
  line-height: 1.35;        /* ← 少し狭くして改行防止 */
  font-weight: 800;
  word-break: keep-all;     /* ← 「ア」が落ちるのを防ぐ */
  white-space: normal;
}

/* “痛くない・こわくない” 部分（強調色） */
.fm-hero-copy .care-highlight {
  color: #0069a8;
  font-weight: 900;
  display: inline-block;    /* ← 独立ブロック化で折返し安定 */
}

/* === バッジ（✔）横並び＋目立たせる === */
.fm-hero-copy .badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 12px;
  margin-top: 0.8rem;
  padding: 0;
  list-style: none;
}

.fm-hero-copy .badges li {
  background: #e1f3ff;          /* 明るい水色でやさしく強調 */
  color: #005a91;               /* 文字は少し濃い青で視認性UP */
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  transition: background 0.2s, transform 0.2s;
}

.fm-hero-copy .badges li:hover {
  background: #cbe9ff;
  transform: translateY(-2px);
}

/* スマホでは中央寄せ */
@media (max-width: 768px) {
  .fm-hero-copy .badges {
    justify-content: center;
  }
}
/* === Heroセクション上部ライン復元 === */
.fm-hero {
  position: relative;
  border-top: 1px solid #e5e7eb !important; /* ← 上だけにラインを付ける */
  background-color: #fff;                   /* 背景を白で維持 */
  margin-top: 0;                            /* 余計な隙間を防止 */
  padding-top: 40px;                        /* 上部に少し余白を戻す */
}

/* ===== hero画像の左側文書e-------------------------------------------------------------------------------===== */

/* ===== お問い合わせバーｓ-------------------------------------------------------------------------------===== */
/* === お問い合わせバー 強制復旧パッチ === */
/* 同じIDが複数あっても効くように、IDではなくクラスで強制指定 */
.fm-section.cta{
  background-color:#0077be !important;
  color:#fff !important;
}

/* 見出し・段落の“白背景/影/枠線/余白”を完全リセットし白文字に */
.fm-section.cta h2,
.fm-section.cta p{
  background:transparent !important;
  color:#fff !important;
  border:none !important;
  box-shadow:none !important;
  margin-top:0;
}

/* 空<p>が入って余白が出る対策（WP自動挿入分も抑止） */
.fm-section.cta p:empty{display:none !important; margin:0 !important; padding:0 !important}

/* ボタンは白地にブランド色文字で統一 */
.fm-section.cta .btn.white,
.fm-section.cta .btn.ghost-white{
  background:#fff !important;
  color:#0077be !important;
  border:none !important;
  transition:.2s;
}
.fm-section.cta .btn.white:hover,
.fm-section.cta .btn.ghost-white:hover{
  background:#e8edf2 !important;
  color:#005a91 !important;
}

/* 余計な内側背景が付くテーマ対策（念のため） */
.fm-section.cta .fm-wrap,
.fm-section.cta .fm-wrap>*{
  background:transparent !important;
}
/* ===== お問い合わせバーe-------------------------------------------------------------------------------===== */
/* === Heroセクション下余白：自然なバランスに調整 ---------------------------------------------------------=== */

/* 空pタグの不要スペース除去（WP対策） */
.fm-hero p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* hero全体の下マージンを他ブロックと統一（やや控えめ） */
.fm-hero {
  margin-bottom: 30px !important;   /* ← ここの値を他ブロックと合わせる */
  padding-bottom: 30px !important;  /* 内側にも少し余裕 */
}

/* ラップ要素の底も安定させる */
.fm-hero .fm-wrap.two {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* === Heroセクション下余白：自然なバランスに調整 ---------------------------------------------------------=== */
/* ===== 利用規約Terms (scoped)---------------------------------------------------------ーーーーーーーーーーーーー ===== */
.fm-terms {
  --fm-blue: #0077be;
  --fm-sky: #e5f4fe;
  --ink: #1e293b;
  --muted: #475569;
  --card: #fff;
}

.fm-terms .fm-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(16px, 2vw, 24px);
}

.fm-terms-head {
  margin: 8px 0 20px;
}

.fm-terms-head h1 {
  font-size: clamp(28px, 3.2vw, 36px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}

.fm-terms-lead {
  color: var(--muted);
  font-size: clamp(14px, 1.6vw, 16px);
  margin: 0;
}

.fm-terms-card {
  background: var(--card);
  border: 2px solid var(--fm-sky);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(2, 48, 71, 0.06);
  padding: clamp(18px, 3vw, 32px);
}

.fm-terms-block {
  padding: 18px 0;
  border-bottom: 1px dashed #e5e7eb;
}

.fm-terms-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.fm-terms-block h2 {
  margin: 0 0 10px;
  font-size: clamp(18px, 2.2vw, 20px);
  line-height: 1.35;
  color: var(--ink);
  font-weight: 700;
}

.fm-terms p {
  margin: 0.5em 0;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.9;
  color: var(--ink);
}

.fm-terms .bullet {
  position: relative;
  padding-left: 1.2em;
  text-indent: -1.2em;
}

.fm-terms-foot .sign {
  margin-top: 0.4em;
  font-weight: 600;
}

@media (max-width: 520px) {
  .fm-terms-card {
    border-radius: 14px;
  }
}
/* ===== 利用規約Terms (scoped)---------------------------------------------------------ーーーーーーーーーーーーー ===== */
/* ===============================/announce（page-id=20）最終統一版   =============================== ーーーーーーーーーーー*/

/* 全体のレイアウトとカードスタイル（ホーム準拠） */
.page-id-20 .fm-wrap{
  max-width:1167px;
  margin:0 auto;
  padding:clamp(16px,2vw,24px);
  box-sizing:border-box;
}
.page-id-20 .fm-hero-card{
  border:2px solid #e5f4fe;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(2,48,71,.06);
  padding:clamp(18px,3vw,32px);
  overflow:hidden;
  background:#fff;
}

/* タイトル・本文 */
.page-id-20 .fm-hero-card h2{
  margin:0 0 .4em;
  font-size:clamp(20px,2.6vw,24px);
  line-height:1.3;
  color:#1e293b;
  font-weight:700;
}
.page-id-20 .fm-hero-card .note{
  margin:.2em 0 1em;
  color:#475569;
  font-size:clamp(14px,1.6vw,16px);
  line-height:1.8;
}
.page-id-20 .fm-hero-card .fm-desc p{
  margin:0 0 12px;
  color:#1e293b;
  font-size:clamp(14px,1.6vw,16px);
  line-height:1.9;
}

/* 画像外枠：フル幅展開してセンタリング */
.page-id-20 .ph-image-viewport{
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;
}

/* 画像本体：ホーム実測1167×661、角丸14px */
.page-id-20 .ph-image-fixed{
  max-width:1167px;
  height:661px;
  margin:0 auto;
  overflow:hidden;
  border-radius:14px;
  line-height:0;
  font-size:0;
}

/* 画像：coverで中央トリミング＋角丸継承 */
.page-id-20 .ph-image-fixed img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  margin:0;
  padding:0;
  border:0;
  box-shadow:none;
  background:none;
  vertical-align:bottom;
  line-height:0;
  border-radius:14px; /* ← 角丸を確実に適用 */
}

/* スマホ時：同比率縮小（1167:661） */
@media (max-width:1167px){
  .page-id-20 .ph-image-fixed{height:56.67vw;} /* 661/1167 */
}

/* 余計なテーマ側マージンを打ち消す */
.page-id-20 .entry-content .ph-image-fixed,
.page-id-20 .entry-content .ph-image-fixed img{
  margin:0 !important;
  padding:0 !important;
}
/* === Hotfix: /announce (page-id=20) 画像が左に寄って半分欠ける問題を解消 === */
.page-id-20 .ph-image-viewport{
  position:static !important;
  width:auto !important;
  max-width:none !important;
  left:auto !important;
  right:auto !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding:0 !important;
}

/* カード内で中央寄せ＆ホーム実測サイズに合わせる */
.page-id-20 .ph-image-fixed{
  max-width:1167px !important;
  height:661px !important;
  margin:0 auto !important;
  overflow:hidden !important;
  border-radius:14px !important;
  line-height:0 !important;
  font-size:0 !important;
  display:block !important;
}

/* 画像は cover で枠いっぱい・中央トリミング */
.page-id-20 .ph-image-fixed img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:14px !important;
}

/* PC幅未満は同比率で縮小（1167:661） */
@media (max-width:1167px){
  .page-id-20 .ph-image-fixed{height:56.67vw !important;}
	
/* スマホ（768px以下）：左右を約10%ぶんトリミング相当で拡大 */
@media (max-width:768px){
  .page-id-20 .ph-image-fixed{height:56.67vw !important;} /* 既存比率を維持 */
  .page-id-20 .ph-image-fixed > img{
    transform:scale(1.00) !important;      /* ≒左右10%ずつカット */
    transform-origin:center center !important;
    object-fit:cover !important;            /* 既存のカバーを維持 */
    width:100% !important; height:100% !important; /* 既存を明示再指定 */
  }
}
@media (max-width:768px){
  body.page-id-20.single .entry-content .fm-hero-card .ph-image-fixed{aspect-ratio:1167/661; height:auto !important; overflow:hidden !important;}
  body.page-id-20.single .entry-content .fm-hero-card .ph-image-fixed > img,
  body.page-id-20.single .entry-content .fm-hero-card .ph-image-fixed > picture > img{
    width:100% !important; height:100% !important;
    object-fit:cover !important; object-position:center center !important;
    clip-path:inset(0 10%) !important;
    display:block !important;
  }
}

@media (max-width:768px){
  body.page-id-20 .ph-image-fixed{
    aspect-ratio:1167/661; height:auto !important; overflow:hidden !important;
    background-size:120% auto !important;   /* 横を約20%拡大 = 左右10%カット */
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }
}



/* ===============================/announce（page-id=20）最終統一版   =============================== ーーーーーーーーーーー*/
/* ===============================/色の交互 =============================== ーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/* 交互で f5fbfa / ffffff にする（.fm-page 直下の <section> を数える） */
.fm-page > section:nth-of-type(odd){ background:#f5fbfa; }
.fm-page > section:nth-of-type(even){ background:#ffffff; }

/* セクションの上下余白（任意） */
.fm-page > section{ padding:clamp(40px,5vw,70px) 0; }

/* ===============================/色の交互 =============================== ーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/* ===============================/挨拶ページのもじくずれ =============================== ーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/* page-id=16 のセンター固定＆日本語改行の崩れ対策 */
.page-id-16 p.has-text-align-center{
  /* センターを最優先で固定（PCで左寄りになるのを防ぐ） */
  text-align:center !important;
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;

  /* 文章の見栄え改善（任意） */
  line-height:1.9;
  max-width:95%;
}

/* PC：自然な2行/3行バランスに（対応ブラウザで有効） */
@media (min-width:601px){
  .page-id-16 p.has-text-align-center{
    white-space:normal;
    word-break:keep-all;
    line-break:loose;
    text-wrap:balance;   /* 行のバランスを自動調整（対応ブラウザ） */
  }
}

/* スマホ：句読点の孤立を避ける（“を。”だけが改行されるのを抑制） */
@media (max-width:600px){
  .page-id-16 p.has-text-align-center{
    white-space:normal;      /* 1行固定はせず通常折返し */
    word-break:keep-all;     /* 日本語の語単位で折り返し */
    line-break:strict;       /* 禁則を強める */
    text-wrap:pretty;        /* 句読点の見栄え優先（対応ブラウザ） */
  }
}
.page-id-16 .nobr{white-space:nowrap;}
/* ===============================/挨拶ページのもじくずれ =============================== ーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/* ==== パンくずリストのホーム項目を非表示 ==== */
.breadcrumb .fa-home,
.breadcrumb a[href="https://footmedi.com"],
.breadcrumb a[href="https://footmedi.com/"],
.breadcrumb a[href="/"],
.breadcrumb a[href="/index.html"] {
  display:none !important;
}

/* アイコンの隣に余白が残る場合はその親ごと非表示 */
.breadcrumb li:first-child,
.breadcrumb span[itemprop="name"].breadcrumb-caption {
  display:none !important;
}
/* ===============================/挨拶ページのもじくずれ =============================== ーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/* ===============================/といあわせページ =============================== ーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/* ===== Contact page base ===== */
.fm-contact.v1{padding:56px 20px;background:#f8fcff}
.fm-contact .fm-wrap{max-width:920px;margin:0 auto}
.fm-contact-title{font-size:clamp(22px,2.5vw,30px);margin:0 0 10px;color:#111}
.fm-contact-lead{color:#333;line-height:1.9;margin:0 0 28px}
.fm-card{background:#fff;border-radius:14px;padding:22px 20px;margin:16px 0;box-shadow:0 6px 18px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.04)}
.fm-card__head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.fm-card__head h2{font-size:clamp(18px,2vw,22px);margin:0}
.fm-card__body{color:#333;line-height:1.8}
.fm-badge{display:inline-block;font-size:12px;background:#0077be;color:#fff;padding:3px 8px;border-radius:999px}
.fm-note{margin-top:22px;color:#666;font-size:13px}
.fm-line-block{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
.fm-line-qr img{width:120px;height:120px;object-fit:contain;border-radius:10px;border:1px solid rgba(0,0,0,.08);background:#fff}
.fm-line-cta .fm-help{display:block;color:#666;margin-top:6px}
.fm-btn{display:inline-block;text-decoration:none;font-weight:700;padding:10px 16px;border-radius:10px;border:1px solid transparent;transition:transform .05s ease,box-shadow .2s ease}
.fm-btn:active{transform:translateY(1px)}
.fm-btn--line{background:#06c755;color:#fff}
.fm-btn--line:hover{box-shadow:0 6px 16px rgba(6,199,85,.25)}
.fm-btn--tel{background:#0077be;color:#fff}
.fm-btn--tel:hover{box-shadow:0 6px 16px rgba(0,119,190,.25)}
.fm-btn--mail{background:#555;color:#fff}
.fm-btn--mail:hover{box-shadow:0 6px 16px rgba(0,0,0,.2)}
.fm-tel-row,.fm-mail-row{margin:10px 0 0}
.fm-card--line{border-left:4px solid #06c755}
.fm-card--tel{border-left:4px solid #0077be}
.fm-card--mail{border-left:4px solid #888}
@media (max-width:640px){
  .fm-line-block{grid-template-columns:1fr;justify-items:center;text-align:center}
  .fm-line-qr img{width:160px;height:160px}
}

/* ===== Contact page: hide date & default H1 (THIS PAGE ONLY) ===== */
/* ← ここは必ず正しいIDに置き換え */
body.page-id-468 .entry-title,
body.page-id-468 .post-date,
body.page-id-468 time.entry-date,
body.page-id-468 .entry-meta .post-date{
  display:none !important;
}

/* ===============================/といあわせページ =============================== ーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/* ==========================================================
   FootMedi お問い合わせページ（最終安定版・バッジ揃え）
   ページ外背景：#f9fdff / カード背景：#ffffff / バッジ：#cbe9ff
   ========================================================== */

.fm-contact.v1 {
  padding: clamp(24px, 3vw, 40px) 0;
  background: #f9fdff;
}
.fm-contact .fm-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
}
.fm-contact-title {
  margin: 0 0 8px;
  font-size: clamp(24px,3.2vw,32px);
  line-height: 1.3;
  color: #0077be;
}
.fm-contact-lead {
  margin: 0 0 20px;
  color: #334;
  opacity: .9;
}

/* カード */
.fm-card {
  background: #ffffff;
  border: 1px solid #e6eef5;
  border-radius: 16px;
  padding: 16px 16px 18px;
  margin: 0 0 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.fm-card__head {
  display: flex;
  align-items: center;   /* ← 見出しとバッジを縦中央に */
  gap: 10px;
  margin: 0 0 8px;
}
.fm-card__head h2 {
  font-size: clamp(18px,2.4vw,22px);
  margin: 0;
  color: #223;
}

/* バッジ（上下位置を見出しと揃える） */
.fm-badge {
  display: inline-flex;                /* ← 中身の縦中央を安定させる */
  align-items: center;                 /* ← 文字を上下中央に */
  justify-content: center;
  background: #cbe9ff !important;
  color: #055 !important;
  border: 1px solid #b2d6ff !important;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;                      /* ← 余白の揺れを防ぐ */
  transform: translateY(10px);          /* ← ベースライン微調整（1px下げ）*/
}

/* ページ限定での強制上書き（保険） */
body.page-id-468 .fm-badge {
  background: #cbe9ff !important;
  border: 1px solid #b2d6ff !important;
  color: #055 !important;
}

/* QR画像の拡大防止 */
.fm-line-block {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 8px;
}
.fm-line-qr img {
  width: 100%;
  max-width: 120px;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #e6eef5;
  background: #fff;
}
.fm-line-cta .fm-help {
  display: block;
  margin-top: 6px;
  color: #556;
  opacity: .85;
}

/* ボタン */
.fm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform .04s ease, box-shadow .2s ease;
}
.fm-btn:active { transform: translateY(1px); }
.fm-btn--line { background: #06C755; color: #fff; }
.fm-btn--tel  { background: #0077be; color: #fff; }
.fm-btn--mail { background: #f4f7fb; color: #123; border-color: #dbe7f3; }

/* カード左ライン */
.fm-contact .fm-card--line { border-left: 4px solid #06C755; background: #ffffff; }
.fm-contact .fm-card--tel  { border-left: 4px solid #0077be; }
.fm-contact .fm-card--mail { border-left: 4px solid #9bbad1; }

/* 補足 */
.fm-tel-row,.fm-mail-row { margin: .6em 0 0; }
.fm-note { margin: 16px 0 0; color: #345; opacity: .9; }

/* Cocoon側のタイトル/日付非表示 */
body.page-id-468 .entry-header .entry-title,
body.page-id-468 span.post-date { display: none !important; }
body.page-id-468 .entry-content { margin-top: 0; }

/* PC時 */
@media (min-width: 720px) {
  .fm-line-block { grid-template-columns: 140px 1fr; gap: 18px; }
  .fm-line-qr img { max-width: 140px; }
  .fm-card { padding: 18px 20px 22px; }
}


/* ===============================/といあわせページ =============================== ーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/* ご相談・お問い合わせ用（淡い青トーン統一）ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
.fm-btn--contact {
  background: #cbe9ff;
  color: #055;
  border: 1px solid #b2d6ff;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 80, 160, 0.08);
}
.fm-btn--contact:hover {
  background: #b9ddff;
  box-shadow: 0 6px 18px rgba(0, 100, 200, 0.15);
}
.fm-btn--contact:active {
  transform: translateY(1px);
}