/* =========================================================
   Service Menu Page 専用スタイル（整理版・差し替え用）
   ========================================================= */

/* ---- 基本カラー / タイポ ---- */
:root{
  --color-text-dark:#32373c;
  --color-text-normal:#555;
  --color-gray-base:#7c7c7c;
  --color-gray-darker:#636363;
  --color-blue-accent:#007BFF;
  --color-blue-accent-hover:#0069d9;
  --color-bg-light-gray:#F8F8F8;
  --color-bg-light-blue:#F0F7FF;
  --color-white:#fff;
  --color-border:#e5e7eb;
  --color-breadcrumbs:#666;
}

body{font-family:"Noto Sans JP",sans-serif;color:var(--color-text-normal);line-height:1.7}

/* ---- ページ枠 ---- */
.service-menu-page{max-width:100%;overflow-x:hidden}

/* ---- ヒーロー ---- */
.section-hero{background:var(--color-white);padding:30px 20px 30px;text-align:center}
.page-main-title{color:var(--color-text-dark);font-size:clamp(28px,4vw,38px);font-weight:700;line-height:1.4;margin:0 0 20px;text-shadow:.84px .84px 1.68px rgba(0,0,0,.05)}
.page-intro-text{max-width:800px;margin:0 auto;font-size:16px;line-height:1.8;color:var(--color-text-dark)}

/* ---- サービス（①〜⑤） ---- */
.section-content{padding:60px 0;background:var(--color-bg-light-gray)}
.section-content .container{max-width:1000px;margin:0 auto;padding:0 20px}

.service-block{
  display:flex;align-items:flex-start;background:var(--color-white);
  border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.05);
  padding:30px 50px;gap:25px;margin-bottom:30px
}
.service-block:last-child{margin-bottom:0}

.service-number{
  flex-shrink:0;width:40px;height:40px;background:var(--color-blue-accent);color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700
}

.service-details{flex-grow:1;padding-right:40px;box-sizing:border-box}
.service-title{color:var(--color-text-dark);font-size:22px;font-weight:700;line-height:1.5;margin:0 0 15px;position:relative}
/* ①〜⑤ 見出しの短い青ライン（残す） */
.service-title::after{
  content:"";display:block;width:120px;height:3px;background:var(--color-blue-accent);
  border-radius:2px;margin-top:8px
}

.service-details ul{list-style:none;padding:0;margin:0}
.service-details li{margin-bottom:10px;line-height:1.8;color:var(--color-text-normal)}
.service-details li:last-child{margin-bottom:0}
.service-details .bullet{color:var(--color-text-normal);margin-right:5px}

/* ---- Flow：ご相談から解決までの流れ ---- */
.section-flow{
  padding:60px 20px;background:var(--color-white);text-align:center
}
.section-flow .section-title{
  color:var(--color-text-dark);font-size:clamp(24px,3.5vw,32px);font-weight:700;margin:0 0 40px;line-height:1.4;
  border:none !important
}
/* ※大見出しの短い装飾ラインを使いたければ下を有効化
.section-flow .section-title::after{content:"";display:block;width:150px;height:4px;background:var(--color-blue-accent);margin:12px auto 0;border-radius:4px}
*/

.section-flow .container{
  position:relative;max-width:880px;margin:0 auto;display:flex;flex-direction:column;padding:0 20px
}

/* タイムライン：線は中間レイヤー */
.section-flow .container::before{
  content:"";
  position:absolute;
  left:var(--timeline-left, 66px);
  top:47px;              /* 開始位置はお好みで */
  bottom:84px;          /* 伸ばしたい分だけマイナス */
  width:2px;
  background:rgba(0,0,0,.08);
  z-index:1;             /* ← 中間 */
  pointer-events:none;
}

/* カードは最背面（白背景が線を隠さないように） */
.flow-item{
  position:relative;
  z-index: auto !important; 
  transform: none !important;   /* これらがあると箱化します */
  opacity: 1 !important;
  filter: none !important;
  isolation: auto !important;
  will-change: auto !important;
  background:#fff;
  border-radius:8px;
  padding:25px;
  display:flex;
  align-items:flex-start;
  gap:30px;              /* 丸と本文の距離 */
}

/* 丸数字は最前面（線より前）← セミコロン必須！ */
.flow-number{
  flex-shrink:0;
  width:44px;
  height:44px;
  background:#D9EEFF;
  color:var(--color-blue-accent);
  border:1px solid var(--color-blue-accent);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:700;
  box-shadow:0 6px 14px rgba(0,123,255,.15);  /* ← ここに ; */
  position:relative;                           /* 有効になる */
  z-index:2;                                   /* 線より前に来る */
}

/* 以前の“青い短線”は保険でOFF */
.flow-item::before{content:none !important;display:none !important} 

.flow-text-content{flex-grow:1}
.flow-title{color:var(--color-text-dark);font-size:18px;font-weight:700;margin:0 0 8px;line-height:1.5}
/* Flow内見出しの下線系は全て消す */
.section-flow .flow-item h1,.section-flow .flow-item h2,.section-flow .flow-item h3,.section-flow .flow-item h4{
  border:0 !important;background:none !important;text-decoration:none !important
}
.section-flow .flow-item h1::before,.section-flow .flow-item h1::after,
.section-flow .flow-item h2::before,.section-flow .flow-item h2::after,
.section-flow .flow-item h3::before,.section-flow .flow-item h3::after,
.section-flow .flow-item h4::before,.section-flow .flow-item h4::after{
  content:none !important;display:none !important
}

.flow-text-content p{margin:0;font-size:15px;line-height:1.7;color:var(--color-text-normal)}

/* ---- レスポンシブ ---- */
@media (max-width:768px){
  .service-block,.flow-item{flex-direction:column;align-items:center;text-align:center;gap:15px}
  .service-number,.flow-number{margin-bottom:10px}
  .service-details ul{text-align:left}

  /* モバイルでのタイムライン縦線の位置調整 */
  .section-flow .container::before {
    left: 50%;
    transform: translateX(-1px); /* 2px幅の線を中心に寄せる */
    top: 47px; /* モバイルでも同様に最初の丸数字の中心から開始 */
  }
}
@media (max-width:480px){
  .page-main-title{font-size:24px}
  .section-content,.section-flow,.section-cta{padding:40px 15px}
}

/* このページ内の h2 に入るテーマの上下ボーダーを完全オフ */
.service-menu-page h2:where(:not(.wp-block-post-title)) {
  border-top: none !important;
  border-bottom: none !important;
  padding-top: 0 !important;
  /* flow では下余白も 0、①〜⑤は service-title で個別に付ける */
  padding-bottom: 0 !important;
}

/* ①〜⑤の見出しだけ、下側の余白と青い短線を維持 */
.service-menu-page .service-block .service-title {
  padding-bottom: 10px !important;
}
.service-menu-page .service-block .service-title::after {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  background: var(--color-blue-accent);
  border-radius: 2px;
  margin-top: 8px;
}

/* Flow は常に左寄せ */
.service-menu-page .section-flow .flow-item{
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start;
  flex-direction: row; /* 念のため横並びを保証 */
}

/* モバイル時も Flow は左寄せのまま、サービスだけ中央寄せ */
@media (max-width:768px){
  .service-menu-page .service-block{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }
  .service-menu-page .section-flow .flow-item{
    flex-direction: row;          /* ← Flow は横並びキープ */
    align-items: flex-start;
    text-align: left;
    gap: 20px;                    /* モバイル時の数字と本文の距離 */
  }
  .service-menu-page .section-flow .flow-number{
    margin-bottom: 0;             /* モバイル中央寄せの副作用回避 */
  }
}

.service-menu-cta
{
  text-align: center;
  margin: 0px 0 70px;   /* 上/左右/下の余白 */
}

.service-menu-page a.button {
  display: inline-block;
  background-color: #007BFF;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 15px 32px;
  border-radius: 4px;
  box-shadow: 0 4px 13px rgba
}

/*
 Template CSS: page-service-menu.php 専用
*/

body.page-template-page-service-menu #site-header {
  position: sticky;
  top: 0;
  z-index: 10000;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/*
 Theme Name: 大山公認会計士事務所 lightning-child
 Template: lightning
 Version: 1.0.0
*/

/* ===========================
   page-service-menu.php 専用（ヘッダー最終版）
   =========================== */

/* 固定ヘッダーの土台（全幅共通） */
body.page-template-page-service-menu #site-header{
  position: sticky;
  top: 0;
  z-index: 10000;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* コンテナの中央寄せ（親の .container の center 指定を打ち消し） */
body.page-template-page-service-menu #site-header .site-header-container{
  text-align: left !important;
  min-height: 72px; /* モバイル暫定 */
}

/* ====== 992px以上：親の flex を上書きして完全再現 ====== */
@media (min-width: 992px) {
  /* 3列：左=ロゴ / 中央=ナビ / 右=スペーサー */
  body.page-template-page-service-menu #site-header .site-header-container{
    display: grid !important;               /* 親の flex 指定を無効化 */
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 40px;
    max-width: 960px;                        /* 実測 */
    margin-left: auto;
    margin-right: auto;
    min-height: 94px;                        /* 実測 93.59 に合わせる */
  }

  /* ロゴ */
  body.page-template-page-service-menu .site-header-logo{
    padding-top: 18px;                       /* 実測 */
    margin-right: 48px;                      /* 実測 */
  }
  body.page-template-page-service-menu .site-header-logo img{
    height: 60px;                            /* 実測 59.99 */
    width: auto;
  }

  /* ナビ（中央） */
  body.page-template-page-service-menu #global-nav.global-nav{
    justify-self: center;
  }
  body.page-template-page-service-menu #global-nav .menu{
    display: flex !important;
    align-items: center;
    gap: 0;                                   /* 間隔は a の padding で作る */
    margin: 0;
    padding: 0;
    list-style: none;
  }
  body.page-template-page-service-menu #global-nav .menu > li{ margin: 0; list-style: none; }
  body.page-template-page-service-menu #global-nav .menu > li > a{
    display: block;
    padding: 14px 18px;                      /* 実測：上下14 / 左右18 */
    font-weight: 700;
    color: #333;
    text-decoration: none;
  }
  body.page-template-page-service-menu #global-nav .menu > li.current-menu-item > a,
  body.page-template-page-service-menu #global-nav .menu > li.current_page_item > a{
    border-bottom: 3px solid #111;           /* 実測：太めの下線 */
  }

  /* 右スペーサー（ロゴ実幅 303px に合わせて中央ぴったり） */
  body.page-template-page-service-menu .site-header-spacer{
    width: 303px;
    justify-self: end;
  }
}

/* ====== ページヘッダー（タイトル帯） ====== */
body.page-template-page-service-menu .page-header{
  background: #777;
  min-height: 128px;                          /* 実測 */
  display: flex;
  align-items: center;
  margin: 0;
}
body.page-template-page-service-menu .page-header-title{
  color: #fff;
  margin: 0;
  font-weight: 800;
}

/* 本文がヘッダーに隠れないように押し下げ（必要なら微調整） */
body.page-template-page-service-menu .service-menu-page{ padding-top: 20px; }

/* ===== 事務所メニュー：ヘッダー最終調整（薄く＆横一列＆14px） ===== */
@media (min-width: 992px) {
  /* ヘッダー全体を少し薄く */
  body.page-template-page-service-menu #site-header .site-header-container{
    min-height: 80px;            /* 94px → 80px に圧縮 */
    column-gap: 32px;            /* 40px → 32px に詰める（好みで調整可） */
  }

  /* ロゴは「画像1枚」想定 */
  body.page-template-page-service-menu .site-header-logo{
    padding-top: 10px;           /* 18px → 10px：上を詰める */
    margin-right: 32px;          /* 48px → 32px：ナビに寄せる */
  }
  body.page-template-page-service-menu .site-header-logo img{
    width: 303px;                /* main-oyama.png 実幅 */
    height: 60px;                /* 実高 59.99 ≒ 60 */
  }

  /* ナビを確実に横一列・14pxに（親の float / 縦積みを無効化） */
  body.page-template-page-service-menu #global-nav .menu{
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0;                      /* 間隔は a の padding で作る */
    white-space: nowrap;         /* 折返し防止 */
    margin: 0; padding: 0; list-style: none;
  }
  body.page-template-page-service-menu #global-nav .menu > li{
    margin: 0; list-style: none; float: none !important;
    display: block;
  }
  body.page-template-page-service-menu #global-nav .menu > li > a{
    display: block;
    padding: 12px 16px;          /* 14/18 → 12/16 でヘッダーを薄く */
    font-size: 14px;             /* ご指定 */
    line-height: 1;              /* 余計な縦伸びを防ぐ */
    font-weight: 700;
    color: #333; text-decoration: none;
  }

  /* 右スペーサーもロゴ幅に合わせて中央バランスを厳密化 */
  body.page-template-page-service-menu .site-header-spacer{
    width: 303px; justify-self: end;
  }
}

/* ナビゲーションを右寄せ */
body.page-template-page-service-menu #global-nav {
  margin-left: auto;   /* ← コンテナ内で右端へ */
}
body.page-template-page-service-menu #global-nav .menu {
  justify-content: flex-end; /* flexboxで右寄せ */
}