/* D-FORCE 新デザイン 下層ページ共通CSS (2026-08-24)
   使用箇所: page-legal.php / page-news.php / single.php
   front-page.php は自己完結型(インラインCSS)。SEO実装時に統合予定 */
:root{
  --bg:#fcfcfa; --ink:#101318; --mut:#565d68; --line:#e4e5e2;
  --blue:#2447f0; --blue-soft:#eef1fe;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg); color:var(--ink);
  font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif; line-height:1.9}
a{color:inherit; text-decoration:none}
::selection{background:var(--blue); color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c9ccd2; border-radius:5px}

/* nav */
.nav{position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 40px; background:rgba(252,252,250,.92); backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--line)}
.logo{display:flex; align-items:center}
.logo img{height:20px; width:auto; display:block}
.menu{display:flex; gap:26px; list-style:none; font-family:'Syne',sans-serif; font-size:11.5px; letter-spacing:.18em}
.menu a{opacity:.7} .menu a:hover{opacity:1; color:var(--blue)}
/* ナビのCONTACTだけ枠付きで少し目立たせる(06-B) */
.nav .nav-cta{opacity:1; color:var(--blue); background:#fcfcfa; border:1px solid var(--blue); border-radius:999px; padding:7px 16px; transition:background .25s, color .25s} /* 地色で塗り、TOPの粒子が枠内を横切っても読めるように */
.nav .nav-cta:hover{background:var(--blue); color:#fff}
@media (min-width:861px) and (max-width:1180px){ .nav .nav-cta{padding:6px 12px} }
@media (min-width:861px) and (max-width:1180px){
  /* ノートPC幅: 8項目が1行に収まるように詰める(折り返し・右端欠け防止) */
  .nav{padding-left:24px; padding-right:24px}
  .menu{gap:14px; font-size:11px; letter-spacing:.1em}
  .menu li{white-space:nowrap}
.logo img{height:17px}
}
@media (min-width:861px) and (max-width:960px){
  .menu{gap:10px; font-size:10.5px; letter-spacing:.06em}
}

/* hamburger */
.burger{display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; border:0; background:transparent; cursor:pointer; padding:10px; z-index:70; position:relative}
.burger span{display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s}
body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-open .nav{z-index:70}
body.nav-open{overflow:hidden}
.drawer{position:fixed; inset:0; z-index:65; background:rgba(252,252,250,.97);
  backdrop-filter:blur(10px); display:flex; flex-direction:column;
  justify-content:center; align-items:flex-end; text-align:right; padding:90px 34px 30px; /* 上部は×ボタンを避ける */
  opacity:0; pointer-events:none; transition:opacity .3s}
body.nav-open .drawer{opacity:1; pointer-events:auto}
.drawer ul{list-style:none}
.drawer a{display:block; font-family:'Syne',sans-serif; font-weight:700; font-size:24px;
  letter-spacing:.06em; padding:10px 0; color:var(--ink)}
.drawer a:active{color:var(--blue)}
.drawer .legal{margin-top:38px; display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:flex-end}
.drawer .legal a{font-family:'Zen Kaku Gothic New',sans-serif; font-weight:400;
  font-size:12.5px; color:var(--mut); padding:0; letter-spacing:.06em}

/* page head */
.page-head{max-width:1120px; margin:0 auto; padding:150px 40px 0}
.page-head.narrow{/* 2026-08-24 外枠を1120に統一(タイトル開始位置を全ページで揃える) */}
.eyebrow{font-family:'Chivo Mono',monospace; font-size:12px; letter-spacing:.22em; color:var(--blue)}
.page-ttl{font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(30px,4vw,48px); letter-spacing:.02em}
.page-ttl .jp{display:block; font-family:'Zen Kaku Gothic New',sans-serif; font-weight:400; font-size:13px; color:var(--mut); letter-spacing:.14em; margin-top:6px}
.page-head h1.plain{font-family:'Zen Kaku Gothic New',sans-serif; font-size:clamp(24px,3.4vw,34px); font-weight:700; margin-top:10px; letter-spacing:.04em}
.page-head .rule{height:1px; background:var(--line); margin-top:34px}

/* article (読み物) */
.article{max-width:1120px; margin:0 auto; padding:44px 40px 110px; font-size:14.5px; color:#2a2e35}
.article>*{max-width:760px}
.article h2{font-size:16.5px; font-weight:700; color:var(--ink);
  margin:44px 0 14px; padding-left:14px; border-left:3px solid var(--blue); line-height:1.5}
.article h2:first-child{margin-top:0}
.article h3{font-size:14.5px; font-weight:700; margin:26px 0 8px}
.article p{margin:0 0 14px}
.article ul,.article ol{margin:0 0 14px; padding-left:1.6em}
.article li{margin-bottom:4px}
.article table{width:100%; border-collapse:collapse; margin:8px 0 22px; font-size:13.5px}
.article th,.article td{border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top}
.article th{background:#f4f5f3; font-weight:500; white-space:nowrap; width:11em}
.article .date{color:var(--mut); font-size:12.5px; margin-top:36px; text-align:right}
.article a{color:var(--blue)} .article a:hover{text-decoration:underline}
.article img{max-width:100%; height:auto}

/* news list */
.news-wrap{max-width:1120px; margin:0 auto; padding:40px 40px 110px}
.genre-filter{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px}
.genre-filter a{font-size:12px; border:1px solid var(--line); border-radius:999px; padding:5px 16px;
  color:var(--mut); transition:background .2s, color .2s, border-color .2s}
.genre-filter a:hover{border-color:var(--blue); color:var(--blue)}
.genre-filter a.on{background:var(--blue); border-color:var(--blue); color:#fff}
/* NEWS: 最新1件の大型表示(1ページ目のみ) */
.news-feat{display:grid; grid-template-columns:minmax(300px,460px) 1fr; border:1px solid var(--line); background:#fff;
  margin-bottom:44px; overflow:hidden; position:relative; transition:transform .25s, box-shadow .25s}
.news-feat:hover{transform:translateY(-4px); box-shadow:0 12px 32px rgba(16,19,24,.08)}
.news-feat::before{content:""; position:absolute; top:0; left:0; height:2px; width:0; background:var(--blue); transition:width .35s ease; z-index:1}
.news-feat:hover::before{width:100%}
.nf-thumb{display:block; overflow:hidden; border-right:1px solid var(--line); aspect-ratio:16/9}
.nf-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.nf-fallback{display:block; width:100%; height:100%;
  background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 80' width='110'%3E%3Cpath fill='%23c6cff5' d='M 27 0 L 99 0 L 99 2 L 76 24 L 50 24 Z M 20 3 L 24 3 L 47 27 L 47 53 L 24 77 L 19 76 L 0 43 L 0 37 Z M 102 3 L 107 4 L 122 30 L 124 38 L 87 38 L 84 35 L 81 30 L 81 24 Z M 87 42 L 125 43 L 106 77 L 102 77 L 81 56 L 81 50 Z M 50 56 L 76 56 L 99 80 L 27 80 Z'/%3E%3C/svg%3E") center/110px no-repeat}
.nf-body{padding:30px 34px; display:flex; flex-direction:column; gap:14px; justify-content:center; align-items:flex-start}
.nf-label{font-family:'Chivo Mono',monospace; font-size:10.5px; letter-spacing:.3em; color:var(--blue)}
.nf-meta{display:flex; align-items:center; gap:14px}
.nf-ttl{font-size:clamp(16px,2vw,21px); font-weight:700; line-height:1.7; letter-spacing:.02em; color:var(--ink)}
.news-feat:hover .news-cat{background:var(--blue); color:#fff}

.news-list{border-top:1px solid var(--line)}
.news-item{display:grid; grid-template-columns:110px 128px 1fr; gap:20px; align-items:baseline;
  padding:20px 36px 20px 4px; border-bottom:1px solid var(--line); position:relative}
.news-item:hover{background:var(--blue-soft)}
.news-item::after{content:"→"; position:absolute; right:14px; top:50%; transform:translate(-8px,-50%);
  color:var(--blue); font-family:'Chivo Mono',monospace; font-size:14px; opacity:0; transition:opacity .25s, transform .25s}
.news-item:hover::after{opacity:1; transform:translate(0,-50%)}
.news-date{font-family:'Chivo Mono',monospace; font-size:12px; color:var(--mut)}
.news-cat{font-size:10.5px; letter-spacing:.06em; color:var(--blue); border:1px solid var(--blue);
  border-radius:999px; text-align:center; padding:1px 8px; white-space:nowrap; background:#fff;
  transition:background .25s, color .25s}
.news-item:hover .news-cat{background:var(--blue); color:#fff}
.news-ttl{font-size:14.5px}
.no-post{padding:40px 0; color:var(--mut); font-size:14px}

/* pagination */
.pager{display:flex; justify-content:center; gap:6px; margin-top:44px; font-family:'Chivo Mono',monospace; font-size:13px}
.pager a,.pager span{min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:999px; padding:0 12px}
.pager a:hover{border-color:var(--blue); color:var(--blue)}
.pager .current{background:var(--blue); border-color:var(--blue); color:#fff}
.pager .dots{border:0}

/* 記事詳細 head */
.post-head{max-width:1120px; margin:0 auto; padding:150px 40px 0}
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--mut); margin-bottom:22px; flex-wrap:wrap}
.breadcrumb a{color:var(--mut)} .breadcrumb a:hover{color:var(--blue)}
.breadcrumb .sep{color:#b6bac1; font-family:'Chivo Mono',monospace}
.breadcrumb .cur{color:var(--ink); max-width:28em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.post-meta{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.post-head h1{font-size:clamp(22px,3vw,32px); font-weight:700; line-height:1.5; letter-spacing:.02em}
.post-head .rule{height:1px; background:var(--line); margin-top:30px}
.back-link{display:inline-block; margin-top:34px; font-family:'Chivo Mono',monospace; font-size:12.5px;
  letter-spacing:.1em; color:var(--blue)}
.back-link:hover{text-decoration:underline}

/* 記事アイキャッチ */
/* ── 記事タイポグラフィ(技術記事向け) ── */
.code-wrap{position:relative; margin:28px 0}
.article pre{background:#101318; color:#e6e9ee; padding:24px 26px; margin:28px 0; overflow-x:auto}
.code-wrap pre{margin:0}
.article pre code{font-family:'Chivo Mono',monospace; font-size:13px; line-height:1.75; display:block}
.article pre code.hljs{background:none; padding:0}
.article :not(pre)>code{font-family:'Chivo Mono',monospace; font-size:.88em; background:#eef0f3;
  border:1px solid var(--line); padding:1px 7px; margin:0 1px}
.code-copy{position:absolute; top:12px; right:12px; font-family:'Chivo Mono',monospace; font-size:11px;
  letter-spacing:.08em; color:#9aa1ad; background:rgba(255,255,255,.06); border:1px solid #3a4048; border-radius:999px;
  padding:4px 12px; cursor:pointer; opacity:0; transition:opacity .2s, color .2s, border-color .2s}
.code-wrap:hover .code-copy{opacity:1}
.code-copy:hover{color:#fff; border-color:#9aa1ad}
.code-copy.done{opacity:1; color:#6d86ff; border-color:#6d86ff}
.article blockquote{border-left:3px solid var(--blue); background:#f7f8f9; padding:16px 22px; margin:24px 0; color:#3a4048}
.article table{border-collapse:collapse; margin:26px 0; font-size:13.5px}
.article th,.article td{border:1px solid var(--line); padding:9px 14px; text-align:left}
.article th{background:#f4f5f7; font-weight:700}
.article figcaption{font-size:12px; color:var(--mut); text-align:center; margin-top:8px}

/* ── 記事のシェア行 ── */
.share-row{display:flex; align-items:center; gap:12px; margin:44px 0 6px; flex-wrap:wrap}
.share-label{font-family:'Chivo Mono',monospace; font-size:11px; letter-spacing:.24em; color:var(--mut)}
.share-btn{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; letter-spacing:.04em; line-height:1.5; /* aとbuttonで行高が異なり高さがずれるため明示 */
  font-family:inherit; color:var(--blue); border:1px solid var(--blue); border-radius:999px; padding:8px 20px;
  cursor:pointer; background:#fff; transition:background .25s, color .25s}
.share-btn:hover{background:var(--blue); color:#fff}
.share-btn:active{background:#fff; color:var(--blue); transition:none}
.share-btn svg{width:14px; height:14px; fill:currentColor; flex-shrink:0}

.post-hero{margin-bottom:34px}
.post-hero img{width:100%; max-width:760px; height:auto; display:block; border:1px solid var(--line)}

.ai-powered{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:60px; font-size:12px; color:var(--mut)}
.article p.ai-powered{margin:56px 0 0} /* .article p の余白指定に負けないよう詳細度を確保 */
.ai-powered svg{width:26px; height:auto; color:var(--blue); flex-shrink:0}
.ai-powered .en{font-family:'Chivo Mono',monospace; letter-spacing:.14em; color:var(--blue)}

/* footer */
footer{padding:46px 40px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line)}
footer .menu{font-size:10.5px; font-family:'Zen Kaku Gothic New',sans-serif; letter-spacing:.06em}
footer .cr{font-family:'Chivo Mono',monospace; font-size:10.5px; color:var(--mut); letter-spacing:.08em}

@media (max-width:860px){
  .nav .menu{display:none}
  .burger{display:flex}
  footer .menu{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; order:1}
  footer .cr{order:2}
  .nav{padding:14px 22px}
  .burger{margin-right:-10px} /* 3本線はボタン枠の10px内側にあるため、線が右端22pxに来るよう寄せる */
  footer{flex-direction:column; gap:14px; text-align:center}
  .page-head,.news-wrap,.article,.post-head{padding-left:22px; padding-right:22px}
  .news-feat{grid-template-columns:1fr}
  .nf-thumb{border-right:0; border-bottom:1px solid var(--line)}
  .nf-body{padding:22px 22px 26px}
  .news-item{grid-template-columns:96px auto; grid-template-rows:auto auto}
  .news-item .news-cat{justify-self:start}
  .news-ttl{grid-column:1/-1}
  .article table,.article thead,.article tbody,.article tr{display:block}
  .article th,.article td{display:block; width:100%; border-top:0}
  .article tr:first-child th{border-top:1px solid var(--line)}
  .article th{width:100%}
}

/* スマホの文字サイズ引き上げ(2026-10-05): 本文16px基準。PCは変えない */
@media (max-width:860px){
  .page-ttl .jp{font-size:14px} .eyebrow{font-size:13px} .breadcrumb{font-size:13px}
  .article{font-size:16px} .article h2{font-size:18.5px} .article h3{font-size:16.5px}
  .article table{font-size:15px} .article .date{font-size:13.5px} .article figcaption{font-size:13px}
  .genre-filter a{font-size:13.5px}
  .nf-label{font-size:12px} .news-date{font-size:13px} .news-cat{font-size:12px} .news-ttl{font-size:16px} .no-post{font-size:15px}
  .back-link{font-size:13.5px} .share-label{font-size:12px} .share-btn{font-size:13.5px} .ai-powered{font-size:13px}
  footer .menu{font-size:12px} footer .cr{font-size:11.5px}
  .drawer .legal a{font-size:13.5px}
}