/* =================================================
LOF 共通CSS（整理統合版 / Cocoon対応）
縦書き記事＋書き方記事用
================================================= */


/* =================================
画像
================================= */

.entry-content img{
display:block;
margin:20px auto;
max-width:100%;
height:auto;
}

.entry-content img.wp-post-image{
max-width:640px;
width:100%;
height:auto;
}


/* =================================
テーブル
================================= */

.entry-content table{
width:100%;
margin:20px 0;
border-collapse:collapse;
border:2px solid #ccc;
background:#fff;
}

.entry-content th,
.entry-content td{
border:1px solid #ddd;
padding:10px;
color:#333;
}

.entry-content thead th{
background:#f3f6f8;
font-weight:bold;
}


/* テーブル横スクロール */

.table-wrap{
overflow-x:auto;
}


/* =================================
レイアウト補助
================================= */

.box-space{
margin:30px auto;
}

.vertical-center{
text-align:center;
margin:30px 0;
}


/* =================================
基本ボックス
================================= */

.box-point{
background:#fff9c4;
border-left:6px solid #fbc02d;
padding:12px 16px;
margin:18px 0;
border-radius:6px;
}

.box-attention{
background:#ffe1e1;
border-left:6px solid #e53935;
padding:12px 16px;
margin:18px 0;
border-radius:6px;
}

.box-note{
background:#e9f5ff;
border-left:6px solid #039be5;
padding:12px 16px;
margin:18px 0;
border-radius:6px;
}


/* =================================
書き方記事ボックス
================================= */

.write-answer{
border:2px solid #2f7dd1;
background:#f5f9ff;
padding:18px;
margin:24px 0;
border-radius:6px;
font-size:1.05em;
font-weight:500;
}

.write-ok{
border-left:5px solid #2ea44f;
background:#f4fbf6;
padding:16px;
margin:20px 0;
border-radius:4px;
}

.write-ng{
border-left:5px solid #e5533d;
background:#fff5f5;
padding:16px;
margin:20px 0;
border-radius:4px;
}

.write-point{
border-left:5px solid #ffc107;
background:#fffbe6;
padding:16px;
margin:20px 0;
border-radius:4px;
}

.write-caution{
border-left:5px solid #d9534f;
background:#fff4f4;
padding:16px;
margin:20px 0;
border-radius:4px;
}

.write-example{
background:#f8f8f8;
border:1px solid #e5e5e5;
padding:16px;
margin:22px 0;
border-radius:6px;
font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
text-align:center;
font-size:1.05em;
}


/* =================================
関連記事ボックス
================================= */

.related-box{
background:#f7f9fc;
border:1px solid #e3e8ef;
padding:16px 18px;
margin:25px 0;
border-radius:6px;
}

.related-box ul{
list-style:none;
padding-left:0;
}

.related-box li{
margin-bottom:6px;
}

.related-box a::before{
content:"\25B6";
margin-right:6px;
color:#2f7dd1;
font-size:0.85em;
}


/* =================================
縦書き基本
================================= */

.vertical{
writing-mode:vertical-rl;
text-orientation:upright;
font-size:22px;
line-height:2;
margin:25px auto;
display:inline-block;
}


/* =================================
縦書き例
================================= */

.vertical-example{
writing-mode:vertical-rl;
text-orientation:upright;
font-size:24px;
line-height:2.6;
background:#fdfbf6;
border:1px solid #d9d1c7;
padding:22px;
margin:30px auto;
display:inline-block;
}


/* 正解・不正解 */

.vertical-ok{
color:#1e73be;
font-weight:bold;
}

.vertical-ng{
color:#e53935;
font-weight:bold;
}

.vertical-mid{
color:#f39c12;
font-weight:bold;
}


/* =================================
縦書き住所・日付
================================= */

.vertical-address,
.vertical-date{
writing-mode:vertical-rl;
text-orientation:upright;
font-size:22px;
line-height:2;
background:#f7f7f7;
border:1px solid #ddd;
padding:20px;
display:inline-block;
margin:25px auto;
}


/* =================================
比較表示
================================= */

.vertical-compare{
display:flex;
justify-content:center;
gap:60px;
margin:20px 0;
}

.vertical-compare div{
text-align:center;
font-weight:bold;
line-height:1.7;
}


/* =================================
スマホ最適化
================================= */

@media screen and (max-width:768px){

.entry-content img{
max-width:100%;
height:auto;
}

.vertical{
font-size:18px;
}

.vertical-example{
font-size:20px;
padding:18px;
}

.vertical-address,
.vertical-date{
font-size:18px;
}

.write-answer,
.write-ok,
.write-ng,
.write-point,
.write-caution,
.write-example{
padding:12px;
font-size:15px;
}

}
.table-wrap table th,
.table-wrap table td{
text-align:center;
}