/*
Theme Name : MIWACS Theme
Description : 施工事例の読みやすさとSEOを強化したスタイル
*/

/* 全体ベース */
/* body {
    line-height: 1.8; /* 行間を広くして読みやすく */
    color: #333;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}*/

/* body という言葉を .post に書き換える */
.post, .entry-content {
    line-height: 1.8;
    color: #333;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* コンテナ - レスポンシブ対応 */
div#container {
    max-width: 1140px;
    margin: auto;
}

/* コンテンツエリア - 固定幅を解除して柔軟に */
div#content {
    width: 100%; 
    max-width: 800px; /* 読みやすい最大幅 */
    margin: 0 auto 40px;
}

/* 施工事例の各記事カード */
div.post {
    background: #fff;
    border: 1px solid #e1e8ed; /* 緑から落ち着いたグレーへ */
    border-top: 4px solid #00704a; /* 上部にアクセントカラー */
    padding: 30px;
    margin: 30px auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* 軽い浮き出しでプロ感を出す */
}

/* 記事タイトル (H2) */
div.post h2 {
    border: none;
    padding: 0 0 15px 0;
    margin-bottom: 20px;
    font-size: 1.75rem;
    font-weight: bold;
    border-bottom: 2px solid #f0f0f0;
}

div.post h2 a {
    text-decoration: none;
    color: #1a1a1a;
    transition: color 0.3s;
}

div.post h2 a:hover {
    color: #00704a;
}

/* 記事内の見出し（H3, H4, H5） - SEOと読みやすさのために左寄せに変更 */
div.post h3 {
    text-align: left;
    font-size: 1.4rem;
    border-left: 6px solid #00704a;
    padding: 10px 15px;
    background: #f9f9f9;
    margin: 40px 0 20px;
}

div.post h4 {
    text-align: left;
    font-size: 1.2rem;
    font-weight: bold;
    border-bottom: 2px solid #00704a;
    padding-bottom: 5px;
    margin: 30px 0 15px;
}

div.post h5 {
    text-align: left;
    font-size: 1.1rem;
    font-weight: bold;
    margin: 20px 0 10px;
    color: #444;
}

/* 本文テキスト */
div.post p {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

/* 投稿情報（日付など） */
p.postinfo {
    color: #888;
    font-size: 0.9em;
    text-align: right;
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
}

/* 画像の最適化 */
div.post img {
    border-radius: 6px;
    margin-bottom: 20px;
    max-width: 100%;
    height: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.aligncenter { display: block; margin: 20px auto; }
.alignleft { float: left; margin: 0 20px 20px 0; }
.alignright { float: right; margin: 0 0 20px 20px; }

/* 箇条書きリストも綺麗に */
div.post ul, div.post ol {
    margin-bottom: 20px;
    padding-left: 20px;
}
div.post li {
    margin-bottom: 8px;
}

/* ページリンク */
.pagelink {
    margin: 40px 0;
}
.pagination .page-numbers {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: #fff;
    margin: 0 2px;
    color: #00704a;
    border-radius: 4px;
}
.pagination .current {
    background: #00704a;
    color: #fff;
    border-color: #00704a;
}

/* ジャンボトロン内のボタン */
.jbbutton2 {
    display: inline-block;
    color: #00704a;
    width: auto;
    min-width: 250px;
    font-size: 18px;
    padding: 10px 25px;
    border: 2px solid #00704a;
    border-radius: 50px;
    transition: all 0.3s;
    background: #fff;
}
.jbbutton2:hover {
    background: #00704a;
    color: #fff !important;
}
.jbbutton2 a { color: inherit; }

/* モバイル対応：フロート解除 */
@media (max-width: 768px) {
    div#content { width: 100%; padding: 0 10px; }
    .alignleft, .alignright { float: none; margin: 0 0 20px 0; width: 100%; }
    div.post { padding: 20px; }
}

/* --- 見出しのカスタマイズ --- */

/* 記事メイン見出し (H2)
   左側に太いライン、下に細いラインを入れ、背景に薄いグレーを敷いて視認性を高めました */
div.post h2 {
    position: relative;
    padding: 12px 15px 12px 20px;
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    background: #f8f9fa; /* 薄いグレーの背景 */
    border-left: 8px solid #00704a; /* コーポレートカラーの太線 */
    border-bottom: 1px solid #d1d1d1;
    line-height: 1.4;
    margin: 40px 0 25px;
    border-radius: 0 4px 4px 0;
}

/* 中見出し (H3)
   シンプルながら「ここから新しい項目」と分かりやすい下線デザイン */
div.post h3 {
    position: relative;
    padding: 8px 0 8px 15px;
    font-size: 1.35rem;
    font-weight: bold;
    color: #00704a;
    border-bottom: 2px solid #00704a;
    background: none;
    margin: 35px 0 20px;
}

/* H3の左側に小さなアクセント角丸四角を入れる */
div.post h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 1.2em;
    background-color: #00704a;
    border-radius: 3px;
}

/* --- テーブル（表）の装飾 --- 
   施工概要や仕様表などに最適化したデザイン */
div.post table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.95rem;
    border: 1px solid #e1e8ed;
}

/* 表のヘッダー（一番上の行） */
div.post table th {
    background-color: #00704a;
    color: #ffffff;
    font-weight: bold;
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #00704a;
    white-space: nowrap;
}

/* 表のデータセル */
div.post table td {
    padding: 12px 15px;
    border: 1px solid #e1e8ed;
    background-color: #ffffff;
    vertical-align: middle;
}

/* 1行おきに背景色を変える（ゼブラデザイン）で読みやすく */
div.post table tr:nth-child(even) td {
    background-color: #fcfdfd;
}

/* スマホで表が横にはみ出すのを防ぐためのラッパー */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 25px;
}



/* --- 記事ごとの区切り（上品な枠線） --- */
div.post {
    background: #ffffff;
    /* 極薄いグレーの枠線で囲む */
    border: 1px solid #e0e0e0; 
    /* 角を少しだけ丸くしてプロっぽさを出す */
    border-radius: 4px;
    /* 記事間の余白をしっかり取る */
    margin-bottom: 60px;
    /* 内側の余白を広くして「読みもの」としての質を高める */
    padding: 40px;
    /* ほんの少しだけ影を付けて、背景から浮かせます */
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    transition: box-shadow 0.3s ease;
}

/* マウスを乗せた時に少しだけ影を強くする（クリックできることを示唆） */
div.post:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* --- ビジネス向けオーソドックスな見出し --- */

/* 記事タイトル (H2相当) 
   左に太めの線、下に細い線を入れる最も標準的で信頼感のあるスタイル */
div.post h2 {
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    padding: 10px 0 10px 15px;
    margin: 0 0 30px 0;
    border-left: 6px solid #00704a; /* 会社のテーマカラー */
    border-bottom: 1px solid #dcdcdc;
    background: none; /* 装飾をシンプルに */
    line-height: 1.4;
}

/* 記事内の見出し (H3)
   シンプルに左の線のみ。情報の整理に適しています */
div.post h3 {
    font-size: 1.3rem;
    font-weight: bold;
    color: #444;
    padding: 5px 0 5px 12px;
    margin: 40px 0 20px 0;
    border-left: 4px solid #00704a;
    border-bottom: none;
    text-align: left; /* 左寄せ固定 */
}

/* 投稿日などの情報 */
p.postinfo {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 20px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 10px;
}

/* --- 読みやすさの調整 --- */
div.post p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.5em;
}

/* スマホ閲覧時の調整 */
@media (max-width: 768px) {
    div.post {
        padding: 20px;
        margin-bottom: 40px;
    }
    div.post h2 {
        font-size: 1.4rem;
    }
}

/* --- 1. 施工のポイント（3行要約） ---
   記事の冒頭で「何をしたか」を瞬時に伝えるためのボックス */
.point-box {
    background: #f0f7f4; /* 非常に薄い緑 */
    border: 1px solid #c2e0d4;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 4px;
}
.point-box-title {
    font-weight: bold;
    color: #00704a;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.point-box-title i { margin-right: 8px; }
.point-box ul {
    margin: 0;
    padding-left: 1.5em;
    list-style: square;
}

/* --- 2. 施工スペック表 ---
   工期や使用機材などをコンパクトにまとめる表 */
.spec-table-container {
    background: #fff;
    border: 1px solid #eee;
    margin: 30px 0;
}
.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.spec-table th {
    background: #f9f9f9;
    width: 30%;
    padding: 12px;
    border: 1px solid #eee;
    color: #666;
    text-align: left;
}
.spec-table td {
    padding: 12px;
    border: 1px solid #eee;
    color: #333;
}

/* --- 3. Before/After 画像のキャプション ---
   工事前後を分かりやすく説明する */
.case-image-grid {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}
.case-image-item {
    flex: 1;
}
.case-image-label {
    display: block;
    background: #666;
    color: #fff;
    font-size: 0.8rem;
    text-align: center;
    padding: 4px 0;
    margin-bottom: 5px;
    font-weight: bold;
}

/* --- 4. プロの視点（専門家のコメント） ---
   担当者の顔が見える信頼感の醸成 */
.expert-comment {
    background: #fff;
    border: 2px solid #00704a;
    padding: 20px;
    position: relative;
    margin-top: 50px;
}
.expert-comment::before {
    content: "担当者の視点";
    position: absolute;
    top: -15px;
    left: 20px;
    background: #00704a;
    color: #fff;
    padding: 2px 15px;
    font-size: 0.85rem;
    font-weight: bold;
    border-radius: 20px;
}

/* --- お問い合わせ誘導バナー（CTA） --- */
.article-cta {
    background: #f9f9f9;
    border: 2px solid #00704a;
    border-radius: 8px;
    padding: 35px;
    margin-top: 60px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.cta-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #00704a;
    margin-bottom: 15px;
}

.cta-text {
    font-size: 1rem;
    color: #555;
    margin-bottom: 25px;
    line-height: 1.6;
}

.cta-btn-wrap {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* お問い合わせボタン */
.cta-btn {
    display: inline-block;
    background: #ffc107; /* 視認性の高いイエロー */
    color: #333 !important;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 0 #d39e00;
}

.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 0 #d39e00;
    background: #ffca2c;
    text-decoration: none;
}

.cta-btn i {
    margin-right: 10px;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .article-cta { padding: 25px 15px; }
    .cta-btn { width: 100%; padding: 12px 20px; }
}

/* 「div.post」を「.post」に変更 */
article.post, .post {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top: 4px solid #00704a;
    border-radius: 4px;
    padding: 40px;
    margin-bottom: 60px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    overflow: hidden;
}

/* タイトル部分も同様 */
.post .post-title-link {
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin-bottom: 20px;
    text-decoration: none;
	padding: 16px;
    border-radius: 4px;
}

/* --- 記事タイトル：ビジネスライン・デザイン --- */
article.post .post-title-link {
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    /* 左に太いアクセント線、下に薄い線 */
    padding: 15px;
    margin-bottom: 25px;
    border-bottom: 4px solid #e0e0e0;
    background: #fafafa;
    border-radius: 0 4px 0 0;
    text-decoration: none;
}

/* --- 冒頭の要約文（em）：モダン・グレーボックス --- */
.entry-content p em {
    display: block; /* ボックス化 */
    font-style: normal; /* 斜体を解除して読みやすく */
    background: #f8f9fa; /* 薄いグレー背景 */
    border: 1px solid #e9ecef; /* さりげない枠線 */
    border-radius: 8px; /* 角に丸み（角R） */
    padding: 18px 25px;
    margin-bottom: 35px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
    /* 軽い浮き出し効果 */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
}

/* 冒頭文の中のキーワードだけ太くしたい場合 */
.entry-content p em strong {
    color: #333;
}

/* --- 記事全体の外枠：独立したカードのように見せる --- */
article.post {
    background: #ffffff;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    padding: 45px;
    margin-bottom: 80px; /* 次の記事との距離をしっかり取る */
    box-shadow: 0 12px 40px rgba(0,0,0,0.04); /* 柔らかい影で浮き出し効果 */
    overflow: hidden;
}

/* --- 冒頭の要約文（em）：アイコン付きのデザインへ --- */
.entry-content p em {
    display: block;
    font-style: normal;
    color: #555;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 35px;
    padding: 25px 25px 25px 55px; /* 左側にアイコン用の余白を確保 */
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    position: relative; /* アイコン配置の基準 */
}

/* アイコン（Font Awesome）の自動挿入 */
.entry-content p em::before {
    content: '\f15c'; /* ファイル（テキスト）アイコンのコード */
    font-family: 'FontAwesome';
    position: absolute;
    left: 20px;
    top: 24px;
    font-size: 1.4rem;
    color: #00704a; /* コーポレートカラーの緑 */
}
/* --- スマホ対応：記事内の画像を横幅いっぱいに --- */
.entry-content img {
    max-width: 100%;    /* 親要素の幅を超えないように */
    height: auto;       /* 縦横比を維持 */
    display: block;     /* ブロック要素にして余白調整しやすく */
    margin: 1.5em auto; /* 上下に程よい余白を空け、中央揃えに */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 軽く影をつけて写真をきれいに見せる */
    border-radius: 4px; /* 角を少し丸く */
}