@charset "utf-8";
/* ============================================================================
   テーマ追加スタイル  theme-additions.css
   五月女建設株式会社 家の傾き相談室（katamukisoudan.com）
 
   ■ このファイルの役割
     既存の style.css / mediaquery.css / single-content.css / patterns.css を
     置き換えるのではなく、今回の改修で追加・修正した分をまとめたもの。
     読み込み順は patterns.css の後（＝最後）なので、
     同じセレクタが衝突した場合はこちらが優先される。
 
   ■ 収録している内容
     ・スキップリンク（キーボード操作でナビを読み飛ばす）
     ・記事上部のバイライン
     ・筆者ボックス（.author-box）
     ・トップページのサムネイルラッパー（.top-works__thumb / .top-voice__thumb）
     ・カードの記事タイプラベル（.card-badge）
     ・一覧カード・関連記事のタイトル省略（line-clamp）
     ・関連記事セクションの配置
     ・2列テーブルのスマホ縦積み（.table-stack）
 
   ■ 命名
     もとは author-box.css だったが、収録内容が筆者ボックス以外にも
     広がったため、実態に合わせて改名した。
 
   ■ ブランドカラー
     navy #002266 / orange #fda61a・#fa7d00 / 淡青 #ebf2ff / 文字 #222222
   ========================================================================== */

/* ==================================================================
   スキップリンク

   キーボード操作時、ヘッダーのナビ（PC 8リンク／SP 12リンク）を
   毎ページ読み飛ばせるようにする。
   通常は画面外に隠し、フォーカスされたときだけ表示する。
   ================================================================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: #002266;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  outline: 3px solid #fda61a;
  outline-offset: -3px;
}

/* ==================================================================
   記事上部のバイライン
   誰が書いたのかを、読み始める前に示す。
   ================================================================== */
.post-byline {
  font-size: 14px;
  line-height: 1.6;
  color: #333333;
  margin: -35px 0 50px; /* .post-meta の下余白 50px を引き継ぐ */
  padding-left: 12px;
  border-left: 3px solid #fda61a;
}

.post-byline__link {
  color: #002266;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-byline__link:hover {
  color: #fa7d00;
}

.post-byline__role {
  color: #5b6472;
  font-size: 13px;
}

/* ==================================================================
   筆者ボックス本体
   ================================================================== */
.author-box {
  margin: 3.5em 0 0;
  border: 1px solid #002266;
  padding: 0 40px 40px 40px;
  border-radius: 10px;
}

/* 「この記事を書いた人」ラベル
   見出しタグではなく段落＋CSS。記事本文の見出し階層（h2〜h5）を
   乱さないため。patterns.css の contact-cta と同じ考え方。 */
.author-box__label {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background: #002266;
  border-radius: 0 0 6px 6px;
  padding: 8px 16px;
  margin: 0 0 16px; /* 上罫線に食い込ませてタブのように見せる */
}

/* ---- レイアウト --------------------------------------------------
   PC : 写真を左に置き、右側に氏名・紹介・データを縦に積む
   SP : 写真と氏名を横並びにし、その下に紹介・データを全幅で置く
   （旧実装のスマホレイアウトの考え方を踏襲している） */
.author-box__body {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  grid-template-areas:
    "photo ident"
    "photo bio"
    "photo facts";
  column-gap: 26px;
  align-items: start;
}

.author-box__photo {
  grid-area: photo;
}
.author-box__ident {
  grid-area: ident;
}
.author-box__bio {
  grid-area: bio;
}
.author-box__facts {
  grid-area: facts;
}

/* ---- 顔写真 ---- */
.author-box__photo {
  margin: 0;
}

.author-box__photo img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: top center; /* 顔が切れないよう上寄せ */
  border-radius: 8px;
  border: 2px solid #002266;
  background: #ffffff;
  display: block;
}

/* ---- 氏名・肩書 ---- */
.author-box__ident {
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #ebf2ff;
}

.author-box__name {
  font-size: 20px;
  font-weight: 700;
  color: #002266;
  line-height: 1.4;
  margin: 0;
}

.author-box__namelink {
  color: inherit;
  text-decoration: none;
}

.author-box__namelink:hover {
  color: #fa7d00;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.author-box__role {
  font-size: 14px;
  color: #5b6472;
  line-height: 1.5;
  margin: 6px 0 0;
}

/* ---- 紹介文 ----
   旧実装は約400字の一段落で、記事本文（line-height 1.9）より
   明らかに読みにくかった。本文と同等の行間に揃える。 */
.author-box__bio {
  font-size: 15px;
  line-height: 1.85;
  color: #222222;
  margin: 0 0 18px;
}

/* ---- 資格・実績・経歴 ----
   箇条書きにすることで、読み手にも検索エンジンにも
   「何の専門家か」が拾いやすくなる。 */
.author-box__facts {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.author-box__fact {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  column-gap: 14px;
  padding: 9px 0;
  border-top: 1px dashed #cfdcf5;
}

.author-box__term {
  color: #002266;
  font-weight: 700;
  margin: 0;
}

.author-box__desc {
  color: #222222;
  margin: 0;
}

/* 複数行を span で分ける（dd 内の改行を CSS 側で制御する） */
.author-box__line {
  display: block;
}

.author-box__line + .author-box__line {
  margin-top: 3px;
}

/* ==================================================================
   タブレット以下
   ================================================================== */
@media screen and (max-width: 850px) {
  .post-byline {
    font-size: 13.5px;
    margin: -20px 0 35px;
  }

  .post-byline__role {
    display: block;
    font-size: 12.5px;
  }

  .author-box {
    margin-top: 3em;
    padding: 0 20px 20px 20px;
  }

  .author-box__label {
    font-size: 12px;
    padding: 8px 14px;
    margin: 0 0 18px;
  }

  .author-box__body {
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas:
      "photo ident"
      "bio   bio"
      "facts facts";
    column-gap: 18px;
  }

  .author-box__photo img {
    width: 104px;
    height: 104px;
  }

  /* 写真と氏名の高さを揃える */
  .author-box__ident {
    align-self: center;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }

  .author-box__bio {
    margin-top: 18px;
  }

  .author-box__name {
    font-size: 18px;
  }
}

/* ==================================================================
   スマートフォン
   ================================================================== */
@media screen and (max-width: 450px) {
  .author-box__body {
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: 14px;
  }

  .author-box__photo img {
    width: 84px;
    height: 84px;
  }

  .author-box__name {
    font-size: 17px;
  }

  .author-box__role {
    font-size: 13px;
  }

  .author-box__bio {
    font-size: 14.5px;
  }

  /* 幅が足りないので、項目名を上・内容を下の2段組みに切り替える */
  .author-box__fact {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3px;
  }
}

/* ==================================================================
   トップページのカード：サムネイルのラッパー

   ■ なぜラッパーが必要か
     旧実装は画像そのものに aspect-ratio を掛けていた。

       .top-works__item img { width:100%; aspect-ratio:1.21/1; object-fit:cover; }

     ところが WordPress が出力する <img> には width / height 属性が付く。
     この属性は height の指定として働くため幅と高さの両方が確定し、
     CSS の aspect-ratio が無視されて画像本来の比率で表示されてしまう。
     （代替画像 default.jpg だけ正しく見えていたのは、属性がないため）

     一覧ページの .post-list__thumb は最初からラッパーに比率を持たせる
     方式で、こちらは正しく揃っていた。同じ方式に統一する。

   ================================================================== */
.top-works__thumb,
.top-voice__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1.21 / 1;
  overflow: hidden;
}

/* .top-works__item img より詳細度を上げて確実に上書きする */
.top-works__item .top-works__thumb img,
.top-voice__item .top-voice__thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%);
  margin: 0;
  display: block;
}

/* ==================================================================
   カードの記事タイプラベル

   当初はサムネイルの角に重ねていたが、この記事群は図版・比較表・
   バナー画像など「文字入りのサムネイル」が多く、
   ラベルと画像内の文字が重なって双方とも読みにくくなった。
   サムネイルの下、タイトルの上に独立して置く。

   施工事例は受注に最も近い読者が探しているものなので、
   他の記事タイプと色を変えて目に留まりやすくしている。
   ================================================================== */
.card-badge {
  display: inline-block;
  background: #ebf2ff;
  color: #002266;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  margin: 10px 0 0 10px;
  border-radius: 4px;
  border-left: 3px solid #002266;
  white-space: nowrap;
}

/* 施工事例：オレンジの左バーで区別する
   （patterns.css のオレンジ系と同じ役割の使い分け） */
.card-badge--case {
  background: #fff4e0;
  border-left-color: #fda61a;
}

/* ラベルが入る分、タイトル側の上余白を詰める */
.post-list__thumb + .card-badge + .post-list__title,
.top-works__thumb + .card-badge + .top-works__title {
  margin-top: 6px;
}

@media screen and (max-width: 450px) {
  .card-badge {
    font-size: 11px;
    padding: 5px 8px;
    margin-top: 8px;
  }
}

/* ==================================================================
   タイトルの行数制限（line-clamp）

   page-works / page-news / page-voice / front-page の PHP 側での
   文字数切り詰め（mb_substr / mb_strimwidth）を廃止したため、
   こちらで丸める。全文が HTML に残るのでリンクのテキストが痩せない。
   高さが揃うので、カードの下端もきれいに並ぶ。

   ■ ★ クランプする要素に padding-bottom を付けないこと

     -webkit-line-clamp が高さを2行分にするのは「コンテンツボックス」だが、
     overflow: hidden が切るのは「パディングボックス」。
     そのため padding-bottom を付けると、2行分の高さの下に
     パディング分の帯が残り、そこに3行目の上部が描画されてしまう。

       ┌──────── パディングボックス（ここで切られる）
       │ 1行目
       │ 2行目 …
       │ ▓▓▓▓  ← padding-bottom の帯。3行目が覗く
       └────────

     「省略記号は出ているのに3行目が見える」という症状が出たら、
     まず padding-bottom を疑うこと。余白はカード側で取る。

   ■ max-height を併記している理由
     line-clamp が効かなかった場合の保険。
     line-height と行数から算出した高さで物理的に切る。
     単位を em にしているので font-size が変わっても追従する。

     ★ box-sizing: border-box が効いている場合、max-height は
       パディング込みで計算される。padding-bottom と併用すると
       今度は2行目が切れるため、必ず padding-bottom は 0 にしておく。

     ★ max-height を使う要素には line-height を必ず明示すること。
       未指定だとフォント既定の行間（約1.2）との差で行が切れる。

   ■ プレフィックスなしの line-clamp を書かない理由
     line-clamp（プレフィックスなし）は近年 Chrome に実装された
     新しい標準プロパティで、Firefox はまだ未対応。
     DevTools 上でも取り消し線と警告が出る。
     -webkit- 付きは主要ブラウザで動くため、そちらに統一する。
   ================================================================== */

/* ---- 一覧カード・関連記事のカード ---- */
.post-list__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
  max-height: 3em; /* 1.5em × 2行 */
  padding: 0 10px; /* 左右のみ */
  padding-bottom: 0; /* 上の★参照。ここに余白を付けると3行目が覗く */
}

/* 下の余白はカード側で取る。

   ★ display: block が必須。
     <a> は既定でインライン要素で、インライン要素の padding-bottom は
     行ボックスの高さに加算されない。余白として機能せず、
     下の要素に重なってしまう。 */
.post-list__item a {
  display: block;
  padding-bottom: 10px;
}

/* トップページのカード（旧版は mb_strimwidth で60幅に切り詰めていた） */
.top-works__title,
.top-voice__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
  max-height: 3em;
  padding-bottom: 0;
}

/* トップページのお知らせ（旧版は32文字で切り詰めていた）
   PC は1行に収め、スマホは2行まで許容する */
.news-list .news-title,
.news-list__sp .news-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  line-height: 1.5;
  max-height: 1.5em;
  padding-bottom: 0;
}

@media screen and (max-width: 850px) {
  .news-list__sp .news-title {
    -webkit-line-clamp: 2;
    max-height: 3em; /* 行数を変えたら max-height も揃えること */
  }
}

/* 人気記事も同様（旧版は16文字で切り詰めていた）

   ★ padding は親の li 側（15px 0 18px 0）にあり、
     クランプ対象の a には付いていないため問題ない。
     line-height は元CSSに指定がないので、ここで明示する。 */
.popular-works__ul a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
  max-height: 3em;
  padding-bottom: 0;
}

/* ==================================================================
   関連記事：一覧ページと同じカードを使う

   旧実装は .related-post という別系統のクラスで、
   画像の比率も padding-top: calc(100% / 1.37) というハックだった。
   template-parts/card.php で .post-list__item に統一したので、
   一覧ページのカードCSSがそのまま効く。

   ここでは配置の微調整だけ行う。
   （.related-posts / .related-post 系の旧CSSは動作確認後に削除可）
   ================================================================== */
.post-list--related {
  margin-top: 25px;
}

@media screen and (max-width: 850px) {
  /* 一覧ページと同じく2列。3件目は次の行に回るが、
       display:none で隠すと内部リンクを1本失うため、そのまま出す。 */
  .post-list--related .post-list__item {
    width: 49%;
  }
}

/* ==================================================================
   関連記事の旧クラス

   template-parts/card.php で .post-list__item に統一したため、
   現在このクラスは出力されていない。
   旧テンプレートが残っている環境向けの保険として置いてあるだけなので、
   全ページの動作確認が済んだら、style.css の .related-posts /
   .related-post 系（1929行前後〜）とあわせて削除してよい。
   ================================================================== */
.related-post__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
  max-height: 3em;
  padding-bottom: 0;
}

/* ==================================================================
   2列テーブルをスマホで縦積みにする（.table-stack）

   ■ 背景
     mediaquery.css に、スマホ時の指定として次の2行がある。

       .wp-block-table       { overflow-x: auto; display: block; }
       .wp-block-table table { min-width: 600px; }

     比較表のような横長のデータ表には妥当だが、
     「項目｜内容」形式の2列テーブル（プロフィール、仕様、物件概要など）では
     不要な横スクロールが発生し、はみ出して見える。

   ■ 使い方
     ブロックエディタでテーブルを選択 →
     右サイドバー「高度な設定」→「追加CSSクラス」に table-stack と入力。

     PCでは通常の表のまま。600px以下で「見出し＋内容」の積み重ねに変わる。

   ■ 対象
     2列のテーブルのみ。3列以上に付けると意味が通らなくなるので使わないこと。
   ================================================================== */
@media screen and (max-width: 600px) {
  /* 横スクロールの指定を解除 */
  .single-content .wp-block-table.table-stack {
    display: block;
    overflow: visible;
  }

  .single-content .wp-block-table.table-stack table {
    display: block;
    min-width: 0;
    width: 100%;
    border: 0;
  }

  .single-content .wp-block-table.table-stack tbody,
  .single-content .wp-block-table.table-stack tr,
  .single-content .wp-block-table.table-stack th,
  .single-content .wp-block-table.table-stack td {
    display: block;
    width: auto;
  }

  /* 1行＝1つのカードとして見せる */
  .single-content .wp-block-table.table-stack tr {
    border: 2px solid #002266;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #ffffff;
  }

  .single-content .wp-block-table.table-stack tbody tr:nth-child(even) td {
    background: transparent; /* 縞模様は縦積みでは不要 */
  }

  /* 1列目＝項目名。淡青の見出し帯にする */
  .single-content .wp-block-table.table-stack td:first-child,
  .single-content .wp-block-table.table-stack th:first-child {
    background: #ebf2ff;
    color: #002266;
    font-weight: 700;
    font-size: 14px;
    border: 0;
    padding: 9px 14px;
  }

  /* 2列目＝内容 */
  .single-content .wp-block-table.table-stack td:last-child {
    border: 0;
    padding: 12px 14px;
    line-height: 1.75;
  }
}

/* ==================================================================
   施工事例の物件概要テーブル（.works-spec）

   アイキャッチの直後、本文の前に置く。
   施工事例を探しに来た読者が最初に知りたいのは
   「どんな家が、どうなったのか」なので、本文より前に出す。

   スマホでは .table-stack と同じ縦積みに切り替える。
   ================================================================== */
.works-spec {
  margin: 0 0 2.5em;
  padding: 22px 0 0;
  border-top: 2px solid #002266;
}

.works-spec__label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #002266;
  background: #ebf2ff;
  border-left: 3px solid #fda61a;
  border-radius: 4px;
  padding: 7px 12px;
  margin: 0 0 16px;
}

.works-spec__table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #002266;
  font-size: 16px;
}

.works-spec__table th,
.works-spec__table td {
  border: 1px solid #002266;
  padding: 12px 14px;
  color: #002266;
  line-height: 1.7;
  text-align: left;
  vertical-align: middle;
}

.works-spec__table th {
  width: 8em;
  background: #ebf2ff;
  font-weight: 700;
  white-space: nowrap;
}

.works-spec__table td {
  background: #ffffff;
  font-weight: 500;
}

@media screen and (max-width: 600px) {
  .works-spec__table,
  .works-spec__table tbody,
  .works-spec__table tr,
  .works-spec__table th,
  .works-spec__table td {
    display: block;
    width: auto;
  }

  .works-spec__table {
    border: 0;
  }

  .works-spec__table tr {
    border: 2px solid #002266;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
  }

  .works-spec__table th {
    border: 0;
    font-size: 14px;
    padding: 9px 14px;
    white-space: normal;
  }

  .works-spec__table td {
    border: 0;
    padding: 12px 14px;
  }
}