@charset "utf-8";
/* =========================================================
   nagai-tokuda-dc 追加カスタムCSS
   別コーダーのstyle.cssは触らず、ここに追記（後勝ち）
   更新日: 2026-06-10
   ========================================================= */

/* ---------------------------------------------------------
   PC固定ナビ: 診療メニュー(MEDICAL)・医院案内(CLINIC) unlink
   親自体は非リンク化（href削除）。ドロップダウンはli:hoverで維持。
   非リンク<a>はカーソルがデフォルトになるため、操作可能を示す
   pointerを補う。
   --------------------------------------------------------- */
@media screen and (min-width: 769px), print {
  .header_sticky > ul > li.hasSub > a {
    cursor: pointer;
  }
}

/* ---------------------------------------------------------
   コア表(wp:table)の下に出る余分な余白を縮小
   style.cssは margin:120px 0(PC) / 16vw 0(SP)。直後のキャプション
   文と離れすぎるため下マージンのみ詰める。上は据え置き。
   --------------------------------------------------------- */
@media screen and (min-width: 769px), print {
  .p_under .detail .wp-block-table {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 768px) {
  .p_under .detail .wp-block-table {
    margin-bottom: 6vw;
  }
}

/* ---------------------------------------------------------
   医師紹介(acf/doctor)キャプションの崩れ対策
   theme は figcaption を inline-flex で「役職(small)＋氏名」を
   横一列に表示。役職が長いと氏名と重なるため、縦2行(役職→氏名)に。
   全 doctor 共通（役職が短い院長等も2行になるが自然な見た目）。
   --------------------------------------------------------- */
@media screen and (min-width: 769px), print {
  .p_under .detail .d-doctor figure figcaption {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    line-height: 1.3;
  }
  .p_under .detail .d-doctor figure figcaption small {
    margin-right: 0;
    margin-bottom: 8px;
    -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
            align-self: flex-end;
  }
}
@media screen and (max-width: 768px) {
  .p_under .detail .d-doctor figure figcaption {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    line-height: 1.4;
    padding: 5vw 4vw;
  }
  .p_under .detail .d-doctor figure figcaption small {
    margin-right: 0;
    margin-bottom: 1.5vw;
    -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
            align-self: flex-end;
  }
}

/* ---------------------------------------------------------
   段落(コア p)直後の画像ブロック(acf/textimg)が詰まる問題
   d-blkImg は下マージンのみ設定で上マージンが無いため、
   段落の直後に来たときだけ上に余白を確保（textimg連続には不干渉）。
   --------------------------------------------------------- */
@media screen and (min-width: 769px), print {
  .p_under .detail p + .d-blkImg {
    margin-top: 50px;
  }
}
@media screen and (max-width: 768px) {
  .p_under .detail p + .d-blkImg {
    margin-top: 9vw;
  }
}

/* ---------------------------------------------------------
   TOP SP: ファーストビュー短縮
   kv_sp.png(750x750=高さ100vw)＋ヘッダー帯40vwで、写真下の
   キャッチコピーが初画面に入らないため、写真下部をグラデーションで
   フェードアウトし、テキストを写真上に引き上げて重ねる。
   調整ノブ: ::after height(フェード範囲) / .kv__txt margin-top(重なり量)
   --------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .p_top .kv {
    /* theme 40vw。固定ヘッダーのロゴ(下端約43vw)に写真上端を
       少し潜り込ませてFVをさらに短縮。ロゴ文字は写真の天井部に重なる */
    padding-top: 31vw;
  }
  .p_top .kv picture {
    display: block;
    position: relative;
  }
  .p_top .kv picture img {
    display: block;
    width: 100%;
  }
  .p_top .kv picture::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 55vw;
    background: -webkit-linear-gradient(top, rgba(241, 239, 225, 0) 0%, rgba(241, 239, 225, 0.92) 40%, #f1efe1 70%);
    background: linear-gradient(to bottom, rgba(241, 239, 225, 0) 0%, rgba(241, 239, 225, 0.92) 40%, #f1efe1 70%);
    pointer-events: none;
  }
  .p_top .kv__txt {
    position: relative;
    z-index: 2;
    margin-top: -34vw;
    padding-top: 0;
  }
}

/* ---------------------------------------------------------
   TOP SP: KV内NEWS欄の余白圧縮
   表示はMAX2件(front-page.php posts_per_page=2)。theme標準は
   padding 8vw・ラベル下6.66vw・一覧リンク上6vwと縦に冗長なため詰める。
   リストは右寄せ幅可変→全幅にして左の空白も解消。
   一覧はこちらは縦積み(丸矢印の下に文字)→横並びにして高さ削減。
   --------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .p_top .kv_news .news {
    padding: 5.33vw 4vw;
  }
  .p_top .kv_news .news__label {
    margin-bottom: 3vw;
  }
  .p_top .kv_news .news__list {
    width: 100%;
  }
  .p_top .kv_news .news__more {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin-top: 3vw;
  }
  .p_top .kv_news .news__more::before {
    width: 8vw;
    height: 8vw;
    margin-bottom: 0;
    margin-right: 2vw;
    -moz-background-size: 3.3vw 2.55vw;
         background-size: 3.3vw 2.55vw;
  }
}

@media screen and (min-width: 769px) {
  .p_top .kv__main {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9;
    display: flex;
    justify-content: center;
    padding-top: 7.6%;
  }
  .p_top .kv__main h2 {
    max-width: 304px;
    width: 15.83%;
    position: relative;
    transform: translateZ(0);
  }
  .p_top .kv__main--list {
    position: absolute;
    bottom: 19px;
    right: 11px;
    width: 51.6%;
  }
}
@media screen and (max-width: 768px) {
  .p_top .kv picture::after {
    display: none;
  }
}

/* ---------------------------------------------------------
   PC: ヘッダー/ヒーローのロゴ縮小
   theme標準 357px。KV上で主張が強すぎるため縮小。全ページ共通。
   大きさは width 値で調整。
   --------------------------------------------------------- */
@media screen and (min-width: 769px), print {
  .header .header_top--logo img {
    width: 220px;
  }
}
/* ---------------------------------------------------------
   投稿詳細ページ 右サイドバー（追加: 2026-07-04）
   single.php で .p_list ラッパーを使いリストページの
   サイドバーCSSを流用。body側 .p_list の背景・余白だけ打ち消す
   --------------------------------------------------------- */
.p_under .single-cols {
  background: none;
  padding-top: 0;
}
@media screen and (min-width: 769px), print {
  .p_under .single-cols .news__sidebar {
    padding-top: 0;
  }
}
@media screen and (max-width: 768px) {
  .p_under .single-cols {
    padding-top: 0;
  }
  .p_under .single-cols .news__sidebar {
    padding-top: 0;
  }
}

/* ---------------------------------------------------------
   料金表(price-table)：金額列の寄せ・表幅（追加: 2026-07-04）
   wp:table に className "price-table" を付与した表が対象。
   1列目=緑ラベル(theme既定) / 2列目=金額。
   金額列は PC右寄せ・SP中央。表幅は PC80%中央（SPは全幅のまま）。
   --------------------------------------------------------- */
@media screen and (min-width: 769px), print {
  .p_under .detail .price-table {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .p_under .detail .price-table table td:last-child {
    text-align: right;
  }
}
@media screen and (max-width: 768px) {
  .p_under .detail .price-table table td:last-child {
    text-align: center;
  }
}

/* ---------------------------------------------------------
   TOP: ortho-hero st2（1期治療）上部のライン装飾が隠れる対策
   （追加: 2026-07-04）
   前セクション st1 が z-index:2 で前面のため、st2 上部の
   ライン(line2.png)・見出し装飾が覆われる。st2 の .row を
   同レベルに上げて前面化する。
   --------------------------------------------------------- */
.p_top .ortho-hero.st2 .row {
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------
   TOP/症例一覧: サムネイル高さ揃え（追加: 2026-07-04）
   case-list__media に固定高さ＋object-fit:cover で縦横比を吸収し
   カードのサムネイル高さを統一。
   --------------------------------------------------------- */
.case-list__media a {
  display: block;
  width: 100%;
  height: 100%;
}
.case-list__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 769px), print {
  .case-list__media {
    height: 220px;
  }
}
@media screen and (max-width: 768px) {
  .case-list__media {
    height: 40vw;
  }
}