/* 技術だより 共通スタイル（錦絵デザイン・静的HTML用） */
*{margin:0;padding:0;box-sizing:border-box}
body{background:#f6efdd;color:#26221c;font-family:'Shippori Mincho',serif;font-size:18px;line-height:2}

/* ── ヘッダー（本体ページの nv4 を再現） ── */
.nv4{display:flex;align-items:flex-start;gap:10px;padding:0 44px;height:132px;border-bottom:3px double #26221c;max-width:1440px;margin:0 auto}
.nv4 .brand{display:flex;align-items:center;gap:14px;align-self:center;text-decoration:none;color:#26221c}
.nv4 .brand img{width:120px;height:114px;object-fit:contain}
.nv4 .brand .b1{display:block;font-size:30px;font-weight:800;letter-spacing:.2em;white-space:nowrap}
.nv4 .brand .b2{display:block;font-size:20px;letter-spacing:.28em;color:#000;margin-top:4px}
.nv4 .sp{flex:1}
.nv4 .brand{flex-shrink:1;min-width:0}
.nv4 a.fuda{flex-shrink:0}
.nv4 a.fuda{margin-top:14px;text-decoration:none;writing-mode:vertical-rl;color:#3d3021;font-family:'Yuji Syuku',serif;font-size:25px;letter-spacing:.22em;background:linear-gradient(180deg,#e6d3ac,#d9c294 70%,#cdb383);border:1.5px solid #8a6f4a;border-top:5px solid #6d5636;padding:16px 9px 12px;height:74px;box-sizing:content-box;transform-origin:top center;transition:transform .3s;box-shadow:2px 3px 4px rgba(38,34,28,.25)}
.nv4 a.fuda:hover{transform:rotate(5deg)}
.nv4 a.fuda.on{background:linear-gradient(180deg,#b8503f,#af4c4c);color:#f6efdd;border-color:#7e332a;border-top-color:#5f261f}
.nv4 a.fuda.small{font-size:20px}
.nv4 a.lift{background:#22406b;color:#f6efdd;font-size:25px;font-weight:700;letter-spacing:.2em;padding:12px 24px;border-radius:2px;align-self:center;margin-left:12px;text-decoration:none;transition:transform .25s;flex-shrink:0;white-space:nowrap;writing-mode:horizontal-tb}
.nv4 a.lift:hover{transform:translateY(-2px)}

@media (max-width:1700px){
  .nv4{gap:10px}
  .nv4 a{flex-shrink:0}
  .nv4 .brand{flex-shrink:1;min-width:0}
  .nv4 a.fuda{font-size:20px;padding:14px 8px 11px}
  .nv4 a.lift{font-size:21px;padding:11px 18px;margin-left:4px}
  .nv4 .brand img{width:100px;height:95px}
  .nv4 .brand .b1{font-size:26px}
  .nv4 .brand .b2{font-size:16px}
}
@media (max-width:1249px){
  .nv4{gap:6px}
  .nv4 a.fuda{padding:12px 6px 10px}
  .nv4 a.lift{padding:11px 14px}
  .nv4 .brand img{width:88px;height:84px}
  .nv4 .brand .b1{font-size:24px}
  .nv4 .brand .b2{font-size:14px}
}
@media (max-width:1099px){
  .nv4{flex-wrap:wrap;height:auto;padding:10px 12px 14px;gap:8px;justify-content:center;align-items:stretch}
  .nv4 .brand{flex:0 0 100%;justify-content:center;margin-bottom:2px}
  .nv4 .sp{display:none}
  .nv4 .brand img{width:56px;height:53px}
  .nv4 .brand .b1{font-size:21px;letter-spacing:.12em}
  .nv4 .brand .b2{font-size:11px;letter-spacing:.1em;white-space:normal}
  .nv4 a.fuda{margin-top:0;writing-mode:horizontal-tb;flex:1 1 21%;text-align:center;font-size:17px;letter-spacing:.18em;height:auto;padding:12px 2px 10px;border-top-width:4px;white-space:nowrap}
  .nv4 a.lift{flex:1 1 100%;text-align:center;font-size:18px;letter-spacing:.3em;padding:13px 0;margin-left:0;align-self:center}
}

/* ── 題字・パンくず ── */
.pgh{max-width:1080px;margin:0 auto;padding:48px 24px 8px}
.crumb{font-size:16px;letter-spacing:.22em;color:#8a5a2e;margin-bottom:14px}
.crumb a{color:#8a5a2e;text-decoration:none}
h1.ttl{font-family:'Yuji Syuku',serif;font-weight:400;font-size:40px;line-height:1.6;letter-spacing:.08em;margin-bottom:10px}
.meta{font-size:15px;color:#6d5636;letter-spacing:.12em;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.meta .tag{background:#22406b;color:#f6efdd;font-size:13px;padding:3px 12px;letter-spacing:.2em}
.rule{width:120px;height:3px;background:#caa243;margin:22px 0 0}

/* ── 本文 ── */
main.art{max-width:1080px;margin:0 auto;padding:26px 24px 70px}
.art h2{font-family:'Yuji Syuku',serif;font-weight:400;font-size:28px;letter-spacing:.12em;margin:52px 0 18px;padding-left:16px;border-left:6px solid #af4c4c;line-height:1.5}
.art p{margin:0 0 22px}
.art strong{font-weight:800}
.art .beni{color:#a23d35;font-weight:800}
.art .ai{color:#22406b;font-weight:800}
.art u{text-decoration:underline;text-decoration-color:#c1503f;text-decoration-thickness:3px;text-underline-offset:5px}
.lead{background:#fbf6e8;border:2px solid #26221c;box-shadow:3px 3px 0 rgba(38,34,28,.25);padding:22px 24px;margin:26px 0 10px;font-size:17px}
.art ul,.art ol{margin:0 0 22px;padding-left:1.6em}
.art li{margin-bottom:8px}
.art table{width:100%;border-collapse:collapse;margin:0 0 26px;background:#fbf6e8;font-size:16px}
.art th,.art td{border:1.5px solid #26221c;padding:10px 14px;text-align:left;vertical-align:top;line-height:1.8}
.art th{background:#ece0c4;font-family:'Yuji Syuku',serif;font-weight:400;letter-spacing:.1em;white-space:nowrap}
.tblwrap{overflow-x:auto;margin:0 0 26px}
.tblwrap table{margin:0}

/* 手順（流れ）表示 */
.steps{counter-reset:st;list-style:none;padding:0;margin:0 0 26px}
.steps li{position:relative;background:#fbf6e8;border:1.5px solid #26221c;margin-bottom:12px;padding:16px 18px 16px 66px;line-height:1.9}
.steps li::before{counter-increment:st;content:counter(st);position:absolute;left:16px;top:14px;width:34px;height:34px;border:2px solid #af4c4c;border-radius:50%;color:#af4c4c;font-family:'Yuji Syuku',serif;font-size:19px;display:flex;align-items:center;justify-content:center}
.steps li b{display:block;font-size:18px;letter-spacing:.08em}
.steps li span{font-size:16px;color:#3d3021}

/* 動画（クリックで読込） */
.yt{position:relative;width:100%;aspect-ratio:16/9;background:#26221c center/cover no-repeat;border:2px solid #26221c;box-shadow:4px 4px 0 rgba(38,34,28,.3);cursor:pointer;margin:8px 0 10px}
.yt::after{content:"";position:absolute;inset:0;margin:auto;width:84px;height:58px;background:rgba(38,34,28,.82);border-radius:12px;clip-path:none}
.yt .tri{position:absolute;inset:0;margin:auto;width:0;height:0;border-left:26px solid #f6efdd;border-top:16px solid transparent;border-bottom:16px solid transparent;z-index:2}
.yt:hover::after{background:rgba(175,76,76,.92)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.yt.playing::after,.yt.playing .tri{display:none}
.ytcap{font-size:14px;color:#6d5636;letter-spacing:.08em;margin:0 0 30px}

/* 誘導カード */
.cta{background:#fbf6e8;border:2px solid #26221c;box-shadow:4px 4px 0 rgba(38,34,28,.3);padding:30px 26px;margin:54px 0 0;text-align:center}
.cta .t{font-family:'Yuji Syuku',serif;font-size:24px;letter-spacing:.16em;margin-bottom:12px}
.cta p{font-size:16px;margin-bottom:20px}
.cta .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta a{display:inline-block;text-decoration:none;font-weight:700;font-size:18px;letter-spacing:.18em;padding:13px 30px;border-radius:2px;transition:transform .25s}
.cta a:hover{transform:translateY(-2px)}
.cta a.b1{background:#22406b;color:#f6efdd}
.cta a.b2{background:#af4c4c;color:#f6efdd}
.back{display:block;text-align:center;margin:44px auto 0;font-size:17px;letter-spacing:.2em;color:#8a5a2e}

/* ── 一覧ページ ── */
.cards{max-width:1080px;margin:0 auto;padding:20px 24px 70px;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.card{background:#fbf6e8;border:2px solid #26221c;box-shadow:4px 4px 0 rgba(38,34,28,.3);text-decoration:none;color:#26221c;display:flex;flex-direction:column;transition:transform .25s}
.card:hover{transform:translateY(-4px)}
.card .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:2px solid #26221c;display:block}
/* 題箋 ─ 分野色の地に和柄・白抜き筆文字・朱の落款 */
.card .daisen{position:relative;width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;border-bottom:2px solid #26221c;overflow:hidden}
.card .daisen span{position:relative;z-index:2;writing-mode:vertical-rl;font-family:'Yuji Syuku',serif;font-size:clamp(28px,3vw,38px);letter-spacing:.24em;color:#f6efdd;line-height:1.25;text-shadow:2px 2px 0 rgba(38,34,28,.4);max-height:92%}
.card .daisen::before{content:"";position:absolute;left:50%;top:50%;width:150px;height:150px;transform:translate(-50%,-50%);border-radius:50%;border:10px solid rgba(246,239,221,.16)}
.card .daisen::after{content:"";position:absolute;right:12px;bottom:12px;width:30px;height:30px;border:2px solid #f6efdd;border-radius:4px;color:#f6efdd;font-family:'Yuji Syuku',serif;font-size:17px;display:flex;align-items:center;justify-content:center;background:rgba(175,76,76,.85);transform:rotate(-4deg);z-index:2}
/* 境界・土地 ─ 緋色×矢羽根縞 */
.daisen.d-tochi{background:repeating-linear-gradient(115deg,#b0413a 0 34px,#c14b42 34px 68px)}
.daisen.d-tochi::after{content:"地"}
/* 空・UAV・災害 ─ 瑠璃×青海波 */
.daisen.d-sora{background:radial-gradient(circle at 50% 0,rgba(246,239,221,.16) 0 6px,transparent 7px) 0 0/44px 22px repeat,radial-gradient(circle at 0 0,rgba(246,239,221,.16) 0 6px,transparent 7px) 0 11px/44px 22px repeat,linear-gradient(180deg,#1f4e8c,#2a5ea6)}
.daisen.d-sora::after{content:"空"}
/* 挑戦の記 ─ 江戸紫×市松 */
.daisen.d-cho{background:repeating-conic-gradient(#6a4a99 0 25%,#7754a8 0 50%) 0 0/56px 56px}
.daisen.d-cho::after{content:"挑"}
/* 読み物・会社 ─ 青碧×七宝 */
.daisen.d-yomi{background:radial-gradient(circle,transparent 62%,rgba(246,239,221,.18) 63% 68%,transparent 69%) 0 0/48px 48px repeat,radial-gradient(circle,transparent 62%,rgba(246,239,221,.18) 63% 68%,transparent 69%) 24px 24px/48px 48px repeat,linear-gradient(180deg,#1f7a6d,#26907f)}
.daisen.d-yomi::after{content:"学"}
.card .bd{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .date{font-size:14px;color:#6d5636;letter-spacing:.14em}
.card .ct{font-size:20px;font-weight:800;line-height:1.7;letter-spacing:.04em}
.card .ex{font-size:15px;color:#3d3021;line-height:1.9}
.card .more{margin-top:auto;font-family:'Yuji Syuku',serif;font-size:16px;color:#af4c4c;letter-spacing:.2em;text-align:right}
@media (max-width:700px){.cards{grid-template-columns:1fr}}
@media (max-width:520px){h1.ttl{font-size:30px}.art h2{font-size:23px}body{font-size:17px}}

/* ── フッター ── */
footer{border-top:3px double #26221c;padding:30px 24px 40px;text-align:center;font-size:15px;color:#3d3021;letter-spacing:.12em}
footer a{color:#3d3021}