@charset "UTF-8";

/* ==========================================================================
   記事ページ（投稿）だけ最後に読む調整
   2026-09-10 株式会社THREE D PLUS

   記事のヘッダー・フッターを会社サイト共通（header-2 / footer-2）にしたことで、
   会社サイトのCSS（css/main.css・css/under.css）も記事ページに読み込まれる。
   この2つは全体セレクタ（* / body / table tr）を持っていて The Thor の記事表示を
   後勝ちで変えてしまうため、記事エリアだけ従来どおりに戻している。

   読み込み順は the-thor/style.min.css → main.css → under.css → このファイル。
   読み込みは header-2.php の is_singular('post') の分岐。

   スコープの考え方
     .page-wrap > main … 記事エリア（ヒーロー画像・パンくず・本文・サイドバー）
     それより後ろの #contact と #footer は会社共通のままにしたいので触らない。
   ========================================================================== */


/* --- 1. ボックス計算 -------------------------------------------------------
   main.css の * { box-sizing: initial } が
   The Thor の *,::before,::after { box-sizing: inherit } を打ち消し、
   幅とパディングが二重に効いて本文とサイドバーが横にはみ出す。 */
.l-wrapper,
.l-wrapper *,
.l-wrapper *::before,
.l-wrapper *::after {
    box-sizing: border-box;
}


/* --- 2. 表 -----------------------------------------------------------------
   under.css の table tr { display: block } は会社概要の縦並び表のための指定。
   記事の比較表まで1セルずつ縦積みになるので、本文の表は本来の表示に戻す。 */
.content table tr {
    display: table-row;
    padding: 0;
    border-bottom: none;
}
.content table tr:first-child {
    padding-top: 0;
}

/* 950px以下では under.css がさらに
     table th, table td { width: 100% !important }
     table th { display: block; margin-bottom: 10px }
   を当てる。これも会社概要の縦並び表のための指定で、記事の表に効くと
   1列目が横幅を全部取り、残りの列が1文字ずつ折り返す潰れ方になる。
   width の !important を打ち消すため、こちらも !important で戻す。 */
.content table th {
    display: table-cell;
    width: auto !important;
    margin-bottom: 0;
}
.content table td {
    width: auto !important;
}


/* --- 3. 固定ヘッダーの分だけ本文を下げる -----------------------------------
   会社共通ヘッダーは position: fixed（高さ72px／800px以下は約60px）。
   会社の下層ページは #under_page 側に padding-top 120px があるが、
   記事にはそれが無く、アイキャッチと記事タイトルがヘッダーの下に潜る。 */
.page-wrap {
    padding-top: 72px;
}


/* --- 4. 本文の文字を従来どおりに戻す ---------------------------------------
   main.css の body { font-weight: 600 } と font-family の !important が
   記事本文まで継承され、長文が重く読みにくくなる。
   コンテナ1か所に指定して子に継承させる（* で上書きすると
   icon.min.css のアイコンフォントまで潰れるため使わない）。 */
.page-wrap > main {
    font-weight: 500;
    font-family: Lato, "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


/* --- 5. スマホ ------------------------------------------------------------- */
@media only screen and (max-width: 800px) {
    .page-wrap {
        padding-top: 60px;
    }
}


/* --- 6. 背景 ---------------------------------------------------------------
   main.css の .bg_icon は body に装飾用の背景画像と height: 100vh を当てている。
   会社サイトの下層ページは白いセクションで覆われるので見えないが、記事は
   サイドバー脇の余白からその画像が透けて、色のにじみのように見える。
   記事のときだけ従来どおり無地（ブラウザ既定の白）に戻す。 */
body.bg_icon {
    background-image: none;
    height: auto;
}


/* --- 7. ボタン（.btn） -----------------------------------------------------
   会社サイトの main.css は .btn を「黒枠2px・240×60px固定（480px以下は200×50）・
   overflow:hidden・ホバーで浮く」ボタンとして定義している。
   The Thor も一覧の「続きを読む」などで .btn を外枠の div に使っており
   （中の .btn__link が本体）、外枠に黒枠と固定サイズが付いて二重の箱に見える。
   ブログ側の範囲だけ The Thor の指定（幅100%・行高1・寄せは .btn-right 等）に戻す。 */
.l-wrapper .btn {
    position: static;
    overflow: visible;
    z-index: auto;
    display: block;
    border: none;
    border-radius: 0;
    width: 100%;
    height: auto;
    line-height: 1;
    box-shadow: none;
    top: auto;
    text-align: left;
}
.l-wrapper .btn:hover {
    box-shadow: none;
    top: auto;
}
.l-wrapper .btn-right  { text-align: right; }
.l-wrapper .btn-center { text-align: center; }
.l-wrapper .btn-left   { text-align: left; }