/* ドットフィックス新デザイン：ブログ（記事ページ・一覧）。dotfix.css のあとに読む。 */

/* ---- 見出し（記事ページはタイトルが長いので小さめ） */
#dotfix-wireframe .df-blog-hero h1{font-size:clamp(26px,2.6cqw,38px)}
#dotfix-wireframe .df-blog-hero .df-post-date{margin:4px 0 12px;font-size:14px}
#dotfix-wireframe .df-blog-hero .df-post-date span{margin-left:8px}
#dotfix-wireframe .df-blog-hero .df-tags{margin:0}

/* ---- タグ */
#dotfix-wireframe .df-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
#dotfix-wireframe .df-tag{display:inline-block;font-size:12px;line-height:1.4;padding:4px 9px;border:1px solid #082747;border-radius:3px;text-decoration:none;color:#082747;background:#fff}
#dotfix-wireframe .df-tag-device{background:#082747;color:#fff}
#dotfix-wireframe .df-tag-topic{background:#ffd000;border-color:#ffd000;color:#111}
#dotfix-wireframe .df-tag-model{border-color:#d7d8d4;color:#111}
#dotfix-wireframe a.df-tag:hover{opacity:.8}

/* ---- 絞り込み */
#dotfix-wireframe .df-blog-filter{border:1px solid #d7d8d4;padding:18px 20px 8px;margin:0 0 22px;background:#fff}
#dotfix-wireframe .df-filter-row{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:start;margin-bottom:10px}
#dotfix-wireframe .df-filter-label{margin:6px 0 0;font-weight:700;color:#082747;font-size:15px}
#dotfix-wireframe .df-filter-chips{display:flex;flex-wrap:wrap;gap:6px}
#dotfix-wireframe .df-blog-filter .df-chip{text-decoration:none;font-size:14px;color:#111}
#dotfix-wireframe .df-blog-filter .df-chip:hover{border-color:#082747}
#dotfix-wireframe .df-blog-filter .df-chip.active{background:#082747;border-color:#082747;color:#fff;font-weight:700}
#dotfix-wireframe .df-blog-count{font-weight:700;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
#dotfix-wireframe .df-blog-all{font-weight:400;font-size:14px}
#dotfix-wireframe .df-blog-empty{padding:28px;background:#f6f6f4}

/* ---- カード一覧 */
#dotfix-wireframe .df-post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}
#dotfix-wireframe .df-post-card{display:flex;flex-direction:column;background:#fff;border:1px solid #d7d8d4}
#dotfix-wireframe .df-post-thumb{display:block;aspect-ratio:16/10;background:#eff5fa;overflow:hidden}
#dotfix-wireframe .df-post-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
#dotfix-wireframe .df-post-card:hover .df-post-thumb img{transform:scale(1.03)}
#dotfix-wireframe .df-post-thumb.df-noimage{background:#eff5fa url("/wp/wp-content/uploads/2026/10/dfx-logo-side.png") center/38% no-repeat}
#dotfix-wireframe .df-post-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
#dotfix-wireframe .df-post-date{font-size:13px;margin:0 0 6px;color:#111}
#dotfix-wireframe .df-post-card .df-post-title{font-size:17px;line-height:1.6;margin:0 0 8px;letter-spacing:0}
#dotfix-wireframe .df-post-title a{text-decoration:none;color:#082747}
#dotfix-wireframe .df-post-title a:hover{text-decoration:underline}
#dotfix-wireframe .df-post-excerpt{font-size:14px;line-height:1.75;margin:0}
#dotfix-wireframe .df-post-card .df-tags{margin-top:auto;padding-top:12px}

/* ---- ページ送り */
#dotfix-wireframe .df-pager{margin:32px 0 0}
#dotfix-wireframe .df-pager ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;justify-content:center}
#dotfix-wireframe .df-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid #d7d8d4;text-decoration:none;font-size:15px;background:#fff}
#dotfix-wireframe .df-pager .page-numbers.current{background:#082747;border-color:#082747;color:#fff;font-weight:700}
#dotfix-wireframe .df-pager .page-numbers.dots{border:0;background:none}

/* ---- 記事本文（ブロックエディタの中身） */
#dotfix-wireframe .df-article{max-width:780px;font-size:16px;line-height:1.95;overflow-wrap:anywhere}
#dotfix-wireframe .df-article>*{margin:0 0 1.4em}
#dotfix-wireframe .df-article h2{font-size:24px;line-height:1.5;margin:2.2em 0 .9em;padding:0 0 10px;border-bottom:3px solid #082747;color:#082747}
#dotfix-wireframe .df-article h3{font-size:19px;line-height:1.55;margin:1.9em 0 .8em;padding-left:12px;border-left:5px solid #ffd000}
#dotfix-wireframe .df-article h4{font-size:17px;margin:1.6em 0 .6em}
#dotfix-wireframe .df-article>:first-child{margin-top:0}
#dotfix-wireframe .df-article ul,#dotfix-wireframe .df-article ol{padding-left:1.4em}
#dotfix-wireframe .df-article li{margin:.3em 0}
#dotfix-wireframe .df-article img{max-width:100%;height:auto}
#dotfix-wireframe .df-article figure{margin-left:0;margin-right:0}
#dotfix-wireframe .df-article figcaption{font-size:13px;text-align:center;margin-top:6px}
#dotfix-wireframe .df-article a{color:#082747;text-decoration:underline}
#dotfix-wireframe .df-article strong{background:linear-gradient(transparent 62%,#fff1a6 62%)}
#dotfix-wireframe .df-article table{border-collapse:collapse;width:100%;font-size:15px}
#dotfix-wireframe .df-article th,#dotfix-wireframe .df-article td{border:1px solid #d7d8d4;padding:8px 10px;text-align:left}
#dotfix-wireframe .df-article th{background:#eff5fa}
#dotfix-wireframe .df-article blockquote{margin-left:0;padding:12px 18px;border-left:4px solid #d7d8d4;background:#f6f6f4}
#dotfix-wireframe .df-article iframe,#dotfix-wireframe .df-article .wp-block-embed{max-width:100%}
#dotfix-wireframe .df-article .wp-block-image.aligncenter,#dotfix-wireframe .df-article .aligncenter{text-align:center;margin-left:auto;margin-right:auto}

/* ---- 前後の記事・関連記事・相談 */
#dotfix-wireframe .df-post-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:780px;margin:44px 0 0;padding-top:24px;border-top:1px solid #d7d8d4}
#dotfix-wireframe .df-post-nav a{display:block;padding:14px 16px;border:1px solid #d7d8d4;text-decoration:none;font-size:14px;line-height:1.6;color:#082747;background:#fff}
#dotfix-wireframe .df-post-nav a:hover{border-color:#082747}
#dotfix-wireframe .df-post-nav span{display:block;font-size:13px;color:#111;margin-bottom:4px}
#dotfix-wireframe .df-post-next{text-align:right}
#dotfix-wireframe .df-related h2{margin-bottom:22px}
#dotfix-wireframe .df-blog-more{text-align:center;margin:28px 0 0}
#dotfix-wireframe .df-blog-cta{margin:0;padding:40px}
#dotfix-wireframe .df-blog-cta .df-actions{margin-bottom:0}

/* ---- 幅に応じて */
@container df (max-width:1100px){
  #dotfix-wireframe .df-post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container df (max-width:640px){
  #dotfix-wireframe .df-post-grid{grid-template-columns:1fr;gap:16px}
  #dotfix-wireframe .df-blog-filter{padding:14px 14px 4px}
  #dotfix-wireframe .df-filter-row{grid-template-columns:1fr;gap:6px}
  #dotfix-wireframe .df-filter-label{margin:0}
  #dotfix-wireframe .df-article{font-size:15px}
  #dotfix-wireframe .df-article h2{font-size:21px}
  #dotfix-wireframe .df-article h3{font-size:18px}
  #dotfix-wireframe .df-post-nav{grid-template-columns:1fr}
  #dotfix-wireframe .df-post-next{text-align:left}
  #dotfix-wireframe .df-blog-cta{padding:24px 20px}
  #dotfix-wireframe .df-blog-hero .df-tags{grid-column:1/-1}
  #dotfix-wireframe .df-blog-hero .df-post-date{grid-column:1/-1;margin-top:10px}
}

/* ---- 404 */
#dotfix-wireframe .df-notfound-links{display:flex;flex-wrap:wrap;gap:10px}