/* 2カラムレイアウト用スタイル - 最適化された設定 */
/* リセットCSSはtheme-styles.cssで管理 */

body {
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    line-height: 1.6; 
    letter-spacing: 0.05rem;
    color: #333;
}

img {
    vertical-align: bottom;
}

/* ========================================
 * 2カラムレイアウトの基本設定
 * ======================================== */

/* コンテンツ全体の設定 */
.content {
    padding-top: 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* PC画面でcontainer-fluidと組み合わせた場合はmax-widthを無効化 */
@media (min-width: 769px) {
    .container-fluid.content {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* 行の設定 */
.content .row {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
}

/* カラムの基本設定 */
.content .col-lg-8,
.content .col-lg-4 {
    padding: 0 15px;
    box-sizing: border-box;
}

/* メインコンテンツカラムの設定 */
.content .col-lg-8 {
    flex: 1;
    min-width: 0;
}

/* サイドバーカラムの特別設定 */
.content .col-lg-4 {
    min-width: 300px !important;
    width: 300px !important;
    max-width: 300px !important;
}

/* より強力なセレクタでサイドバー幅を強制設定 */
.content .row .col-lg-4,
.content .col-lg-4,
.col-lg-4,
div[class*="col-lg-4"] {
    min-width: 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    flex: 0 0 300px !important;
}

/* Bootstrapの設定を強制的に上書き */
.content .col-lg-4 {
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
    flex: 0 0 300px !important;
    box-sizing: border-box !important;
}

/* さらに強力なセレクタで上書き */
html body .content .col-lg-4,
html body .content .row .col-lg-4,
.content .row .col-lg-4 {
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
    flex: 0 0 300px !important;
    box-sizing: border-box !important;
}

/* 最終手段：すべての要素に強制適用 */
.content .col-lg-4,
.content .row .col-lg-4,
.col-lg-4 {
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
    flex: 0 0 300px !important;
    box-sizing: border-box !important;
}

/* 特定のページ用の強制スタイル */
body.page-template-column_two .content .col-lg-4,
body.page-template-column_two .col-lg-4 {
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
    flex: 0 0 300px !important;
    box-sizing: border-box !important;
}

/* 大画面での2カラムレイアウト */
@media (min-width: 992px) {
    .content .col-lg-8 {
        flex: 0 0 calc(100% - 300px) !important;
        max-width: calc(100% - 300px) !important;
        min-width: 600px !important;
    }
    
    .content .col-lg-4 {
        flex: 0 0 300px !important;
        max-width: 300px !important;
        width: 300px !important;
        min-width: 300px !important;
    }
}

/* ========================================
 * メインコンテンツエリア
 * ======================================== */

.main_second {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    height: auto;
}

/* コンテンツヘッダー */
.content-Header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 3px solid #337ab7;
}

.content-Title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

/* アイキャッチ画像 */
.content-EyeCatch {
    margin: 20px 0 30px 0;
    text-align: center;
}

.content-EyeCatch img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* コンテンツ本文 */
.content-Body {
    line-height: 1.8;
    color: #333;
}


.content-Body p {
    margin-bottom: 1.5em;
    text-align: left;
}

/* シンプルなpタグの左寄せ */
.content p,
.main_second p {
    text-align: left;
}

/* メインコンテンツの左寄せ */
.content .col-lg-8 {
    text-align: left;
}

/* コンテンツ本文の左寄せ */
.content-Body {
    text-align: left;
}



.content-Body ul, .content-Body ol {
    margin: 1em 0 1.5em 2em;
}

.content-Body li {
    margin-bottom: 0.5em;
}

/* ========================================
 * サイドバー
 * ======================================== */

.widget-area {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 12px;
    border-left: 4px solid #337ab7;
    position: relative;
    text-align: left;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
    z-index: 10;
    overflow: visible;
}

.widget {
    margin-bottom: 30px;
    text-align: left;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    display: block;
}

.widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #337ab7;
    text-align: left;
    writing-mode: horizontal-tb;
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    display: block;
}

/* ウィジェット内のフォーム要素を幅いっぱいに */
.widget form,
.widget input,
.widget textarea,
.widget button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* .side-codeの画像をコラム内に収める */
.side-code img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.side-code {
    max-width: 100%;
}

/* #profile_p img img img imgの横幅設定 */
#profile_p img {
    width: 200px;
    max-width: 200px;
}

/* サイドバーの基本設定は上記の.widget-areaに統合済み */

/* ========================================
 * レスポンシブ対応
 * ======================================== */

@media (max-width: 991px) {
    .content .col-lg-8,
    .content .col-lg-4 {
        padding: 0 10px;
    }
    
    .main_second {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .content-Title {
        font-size: 2rem;
    }
    
    .widget-area {
        padding: 20px;
        position: relative;
        text-align: left;
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        overflow: visible;
    }
    
    /* 中画面でもpタグを左寄せに */
    .content p,
    .main_second p {
        text-align: left;
    }
    
    /* 中画面でも#profile_p img img img imgの横幅を維持 */
    #profile_p img {
        width: 200px;
        max-width: 200px;
    }
    
}

@media (max-width: 768px) {
    .content {
        padding: 0 15px;
    }
    
    .content .row {
        flex-direction: column;
        max-width: 100%;
    }
    
    .content .col-lg-8,
    .content .col-lg-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    .main_second {
        padding: 15px;
    }
    
    .content-Title {
        font-size: 1.8rem;
    }
    
    .widget-area {
        padding: 15px;
        position: relative;
        text-align: left;
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        overflow: visible;
    }
    
    /* モバイルでもpタグを左寄せに */
    .content p,
    .main_second p {
        text-align: left;
    }
    
    /* モバイルでも#profile_p img img img imgの横幅を維持 */
    #profile_p img {
        width: 200px;
        max-width: 200px;
    }
    
    
}

/* ========================================
 * 最終的なサイドバー幅の強制設定
 * ======================================== */

/* すべてのサイドバー要素に300px幅を強制適用 */
.content .col-lg-4,
.content .row .col-lg-4,
.col-lg-4,
div[class*="col-lg-4"],
aside.widget-area,
.widget-area {
    min-width: 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    flex: 0 0 300px !important;
}

/* メインコンテンツの幅も調整 */
.content .col-lg-8,
.content .row .col-lg-8,
.col-lg-8,
div[class*="col-lg-8"] {
    flex: 1 !important;
    min-width: 0 !important;
}

/* インラインスタイルを上書きするための設定 */
.content .col-lg-4[style*="width"],
.content .col-lg-4[style*="max-width"],
.content .col-lg-4[style*="min-width"] {
    min-width: 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    flex: 0 0 300px !important;
}

/* ページトップに戻るフローティングボタン */
.page-top-floating {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.page-top-floating.show {
    opacity: 1;
    visibility: visible;
}

/* その他のページ用の位置（画面右下隅） */
.page-top-corner {
    bottom: 30px;
    right: 30px;
    top: auto;
}

.page-top-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #337ab7;
    color: #fff;
    text-decoration: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(51, 122, 183, 0.3);
    transition: all 0.3s ease;
}

.page-top-btn:hover {
    background: #286090;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(51, 122, 183, 0.4);
    color: #fff;
    text-decoration: none;
}

.page-top-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.page-top-icon {
    font-size: 16px;
    font-weight: bold;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .page-top-floating {
        bottom: 20px;
        right: 20px;
    }
    
    .page-top-link {
        width: 50px;
        height: 50px;
    }
    
    .page-top-text {
        font-size: 12px;
    }
}

/* ========================================
   サイドバーのスタイリング統一
   ======================================== */

/* サイドバーの基本スタイル */
.sidebar .widget {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    overflow: hidden;
}

.sidebar .widget-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    padding: 15px;
    border-bottom: 1px solid #eee;
    margin-top: 0;
    margin-bottom: 15px;
    background-color: #f7f7f7;
}

.sidebar .widget-content {
    padding: 15px;
}

/* お問い合わせウィジェットの特別スタイル */
.sidebar .contact-widget,
.col-lg-4 .contact-widget {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #6c757d;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.15);
    margin-bottom: 25px;
}

.sidebar .contact-widget .widget-title,
.col-lg-4 .contact-widget .widget-title {
    background: #6c757d;
    color: white;
    margin: -2px -2px 15px -2px;
    padding: 12px 15px;
    border-radius: 8px 8px 0 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.sidebar .contact-widget .widget-content,
.col-lg-4 .contact-widget .widget-content {
    padding: 0 15px 15px 15px;
}

/* 最近の記事のスタイル */
.sidebar .recent-posts-widget,
.col-lg-4 .recent-posts-widget {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #007bff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
    margin-bottom: 25px;
}

.sidebar .recent-posts-widget .widget-title,
.col-lg-4 .recent-posts-widget .widget-title {
    background: #007bff;
    color: white;
    margin: -2px -2px 15px -2px;
    padding: 12px 15px;
    border-radius: 8px 8px 0 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.sidebar .recent-posts-widget .widget-content,
.col-lg-4 .recent-posts-widget .widget-content {
    padding: 0 15px 15px 15px;
}

.sidebar .recent-posts-list .recent-post-item {
    display: flex;
    margin-bottom: 12px;
    padding: 8px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sidebar .recent-posts-list .recent-post-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,123,255,0.2);
    border-color: #007bff;
}

.sidebar .recent-posts-list .recent-post-item:last-child {
    margin-bottom: 0;
}

.sidebar .recent-post-thumbnail {
    flex: 0 0 70px;
    margin-right: 12px;
}

.sidebar .recent-post-thumbnail img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.sidebar .recent-post-content {
    flex: 1;
}

.sidebar .recent-post-title {
    margin: 0 0 5px 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
}

.sidebar .recent-post-title a {
    text-decoration: none;
    color: #2c3e50;
    transition: color 0.3s ease;
}

.sidebar .recent-post-title a:hover {
    color: #007bff;
}

.sidebar .recent-post-date {
    font-size: 9px;
    color: #007bff;
    font-weight: 500;
    background: #e3f2fd;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
}

/* カテゴリーウィジェットの特別スタイル */
.sidebar .categories-widget,
.col-lg-4 .categories-widget {
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
    border: 2px solid #17a2b8;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.15);
    margin-bottom: 25px;
}

.sidebar .categories-widget .widget-title,
.col-lg-4 .categories-widget .widget-title {
    background: #17a2b8;
    color: white;
    margin: -2px -2px 15px -2px;
    padding: 12px 15px;
    border-radius: 8px 8px 0 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.sidebar .categories-widget .widget-content,
.col-lg-4 .categories-widget .widget-content {
    padding: 0 15px 15px 15px;
}

/* カテゴリーリストのスタイル */
.sidebar .categories-widget .widget-content ul li,
.col-lg-4 .categories-widget .widget-content ul li {
    margin-bottom: 8px;
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
}

.sidebar .categories-widget .widget-content ul li:last-child,
.col-lg-4 .categories-widget .widget-content ul li:last-child {
    border-bottom: none;
}

.sidebar .categories-widget .widget-content ul li a,
.col-lg-4 .categories-widget .widget-content ul li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.sidebar .categories-widget .widget-content ul li a:hover,
.col-lg-4 .categories-widget .widget-content ul li a:hover {
    color: #17a2b8;
}

.sidebar .categories-widget .widget-content ul li .count,
.col-lg-4 .categories-widget .widget-content ul li .count {
    background: #17a2b8;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    margin-left: 8px;
    font-weight: normal;
}

/* サイト内検索のスタイル */
.sidebar .search-widget {
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
    border: 2px solid #007bff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
    margin-bottom: 25px;
}

.sidebar .search-widget .widget-title {
    background: #007bff;
    color: white;
    margin: -2px -2px 15px -2px;
    padding: 12px 15px;
    border-radius: 8px 8px 0 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.sidebar .search-widget .widget-content {
    padding: 0 15px 15px 15px;
}

.sidebar .search-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar .search-form input[type="search"] {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.sidebar .search-form input[type="search"]:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.sidebar .search-submit {
    width: 100%;
    background: #28a745;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sidebar .search-submit:hover {
    background: #218838;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.sidebar .search-submit:active {
    transform: translateY(0);
}

/* タグクラウドのスタイル */
.sidebar .widget-content .tagcloud a {
    display: inline-block;
    background: #f8f9fa;
    color: #007bff;
    padding: 4px 8px;
    margin: 2px 4px 2px 0;
    border-radius: 12px;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.sidebar .widget-content .tagcloud a:hover {
    background: #007bff;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,123,255,0.3);
}

/* よく読まれている記事のスタイル */
.sidebar .popular-posts-widget,
.col-lg-4 .popular-posts-widget {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
    border: 2px solid #e74c3c;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.15);
    margin-bottom: 25px;
}

.sidebar .popular-posts-widget .widget-title,
.col-lg-4 .popular-posts-widget .widget-title {
    background: #e74c3c;
    color: white;
    margin: -2px -2px 15px -2px;
    padding: 12px 15px;
    border-radius: 8px 8px 0 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.sidebar .popular-posts-widget .widget-content,
.col-lg-4 .popular-posts-widget .widget-content {
    padding: 0 15px 15px 15px;
}

.sidebar .popular-posts-list .popular-post-item {
    display: flex;
    margin-bottom: 12px;
    padding: 8px;
    background: white;
    border-radius: 8px;
    border: 1px solid #f0e6e6;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sidebar .popular-posts-list .popular-post-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231,76,60,0.2);
    border-color: #e74c3c;
}

.sidebar .popular-posts-list .popular-post-item:last-child {
    margin-bottom: 0;
}

.sidebar .popular-post-thumbnail {
    flex: 0 0 70px;
    margin-right: 12px;
}

.sidebar .popular-post-thumbnail img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.sidebar .popular-post-content {
    flex: 1;
}

.sidebar .popular-post-title {
    margin: 0 0 5px 0;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
}

.sidebar .popular-post-title a {
    text-decoration: none;
    color: #2c3e50;
    transition: color 0.3s ease;
}

.sidebar .popular-post-title a:hover {
    color: #e74c3c;
}

.sidebar .popular-post-excerpt {
    font-size: 11px;
    color: #666;
    line-height: 1.4;
}