@charset "utf-8";

/* =Reset default browser CSS.
   Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
  border: 0; font-family: inherit; font-size: 100%; font-style: inherit;
  font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline;
}
:focus { outline: 0; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img{ border: 0; }
figure{ margin:0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
/* -------------------------------------------------------------- */


/* ==== CMSブロック（tpl_admin.cgi が上書きします） ==== */
 /* CMS: auto inserted by tpl_admin.cgi */
:root{
  /* CMS:START (編集対象) */
  --header-bg:   #0d47a1;
  --header-text: #ffffff;
  --accent:      #00a1ff;
  --nav-align:   center; /* left|center|right（※本CSSでは中央固定） */
  /* CMS:END */
}

/* ここから下はサイト共通のCSS */
body { font-family: sans-serif; margin: 0; }
.btn-accent { background: var(--accent); color: #fff; }

/* 既定本文/背景（従来値を維持） */
body{
  color:#333;
  font:12px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
  line-height:1.5;
  background:#f8f4f1;
  -webkit-text-size-adjust: none;
}
html{ background:#627166; }

/* リンク */
a{ color:#627166; text-decoration:none; }
a:hover{ color:#264a2e; }
a:active, a:focus{ outline:0; }

/* ========== ヘッダー/ナビ（flex版） ========== */
:root{
  --header-bg:   #202040;   /* ← 好きな色に */
  --header-text: #ffffff;   /* 文字色も必要なら */
}
#header{ background: var(--header-bg) !important; color: var(--header-text) !important; }

#header a{ color:var(--header-text); text-decoration:none; }

#header .inner{
  display:flex; align-items:center; gap:16px;
  width:100%; margin:0 auto;
}
#header .logo{
  margin-right:auto; /* ← 左に寄せる（floatは使わない） */
  padding:20px 0 0;
}
#header h1{ font-size:12px; font-weight:normal; color:#fff; }

/* ナビ（flexに一本化） */
#topnav{
  display:flex; flex-wrap:wrap; gap:16px 24px;
  list-style:none; margin:0; padding:0;
  justify-content:center;               /* ★いまは中央固定 */
}
#topnav li{ margin:0; }
#topnav li a{
  display:block; padding:20px 10px; line-height:1.2;
  color:#fff;
}
#topnav span{ color:#cdcdcd; font-size:14px; }
#topnav li.active a, #topnav li a:hover{
  background:#264a2e; border-radius:5px;
}

/* ==== ここから従来スタイル（競合するfloatを削除・調整済） ==== */

/* レイアウト枠 */
#wrapper{ margin:0 auto; padding:0 1%; width:98%; position:relative; }
.inner{ margin:0 auto; width:100%; }

/* --- Hero（キービジュアル） --- */
.kv { margin:16px 0; }
.kv .kv-img{
  aspect-ratio: 16 / 9; max-height: 520px; overflow: hidden; border-radius: 12px;
}
.kv .kv-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Hero（横いっぱい） --- */
.kv-hero{ position:relative; margin:0 0 16px; }
.kv-hero .kv-img.hero{
  position: relative; width: 100%; aspect-ratio: 21 / 9; max-height: 600px;
  overflow: hidden; border-radius: 12px;
}
.kv-hero .hero-slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; opacity:0; transition: opacity .5s;
}
.kv-hero .hero-slide.active{ opacity:1; }
.kv-hero .hero-link{ position:absolute; inset:0; display:block; z-index:5; }

/* --- 2コマの比率箱 --- */
.zig-media{ aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; }
.zig-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px){ .zig-media{ aspect-ratio: 16 / 9; } }

/*************
メイン画像（トップ/サブ）
*************/
#mainBanner{
  margin:30px auto; padding:0; width:100%; position:relative; line-height:0;
}
#mainBanner img{ max-width:100%; height:auto; border-radius:3px; }
.slogan{
  position:absolute; max-width:100%; height:auto; bottom:0; left:0;
  padding:5px 10px; line-height:1.4; background:url(images/tp.png);
}
.slogan h2{ padding-bottom:5px; color:#333; font-size:20px; }
.slogan h3{ font-size:14px; color:#666; }
.subImg .slogan{ background:url(images/tp2.png); }
.subImg .slogan h2{ color:#fff; }
.subImg .slogan h3{ color:#ccc; }

/**************************
グリッド（従来の4コマ：float版は維持）
**************************/
.gridWrapper{ padding-bottom:20px; overflow: hidden; }
.grid{
  float:left; border-radius:5px; background:#fff;
}
.grid h3{
  padding:20px 5px; text-align:center; color:#fff;
  border-radius:5px 5px 0 0; background:#264a2e;
}
.grid p{ padding:5px 10px; }
.gridWrapper img{ max-width:100%; height:auto; }

/* フッター内のグリッド(3カラム) */
#footer .grid{ color:#fff; background:transparent; }
#footer .grid p{ padding:0; }

/*************
メイン コンテンツ
*************/
section.content{
  padding:19px; margin-bottom:20px; border:1px solid #ebebeb;
  border-radius:6px; background:#fff; overflow:hidden; font-size:14px;
}
section.content p{ margin-bottom:5px; }
h3.heading{
  padding-left:7px; margin-bottom:10px; font-size:16px;
  border-left:5px solid #627166; color:#627166;
}
section.content img{ max-width:90%; height:auto; }
.alignleft{ float:left; clear:left; margin:3px 10px 10px 0; }
.alignright{ float:right; clear:right; margin:3px 0 10px 10px; }
img.frame,#gallery img{
  border:4px solid #fff; box-shadow:0 0 2px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.5);
}
#gallery .grid{ padding:5px 0 0; }

/*************
テーブル
*************/
table.table{ border-collapse:collapse; width:100%; margin:10px auto; }
table.table th,table.table td{ padding:5px; border:1px solid #264a2e; }
table.table th{
  text-align:right; font-weight:bold; letter-spacing:1px; white-space:nowrap;
  color:#fff; background:#627166; border-left:#264a2e 5px solid;
}
table.table td{ border-left:#264a2e 3px double; }

/*************
サブコンテンツ
*************/
#sub ul{ padding:10px; }
#sub li{ margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed #ebebeb; }
#sub li:last-child{ border:0; margin-bottom:0; }
#sub li a{ display:block; }
#sub ul.list{ padding-bottom:7px; }
#sub ul.list li{
  clear:both; margin-bottom:5px; padding:5px 0; overflow:hidden;
  font-size:12px; line-height:1.35;
}
#sub ul.list li img{ float:left; margin-right:10px; }

/*************
フッター#202040
*************/
#footer{
  background: #202040 !important;  /* 好きな色 */
  color: #ffffff !important;
}
#footer a{ color: #ffffff !important; }

#footer .inner{ max-width:960px; margin:0 auto; padding:0 16px; }
#footer a{ color:inherit; text-decoration:none; }
#footer a:hover{ color:#ccc; }
#footer .copyright{ font-size:11px; }

/* footer */
#footer .footer-nav .links{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 28px;list-style:none;padding:0;margin:0 0 12px 0}
#footer .footer-nav .links a{display:inline-block;text-decoration:none;line-height:1.2;padding:6px 8px}
#footer .footer-nav .links a span{display:block;font-size:.85em;opacity:.75}

/* PC用 */
@media only screen and (min-width:960px){
  #wrapper,.inner{ width:940px; padding:0; }
  #wrapper{ padding-bottom:20px; }
  .gridWrapper{ width:960px; margin:0 0 0 -20px; }
  .grid{ float:left; width:220px; margin-left:20px; }
  #sub .grid, #footer .grid{ width:300px; }
  #gallery{ width:920px; }
  #gallery .grid{ width:210px; }
  #gallery .zigzag{ width:210px; }
}

/* モニター幅940px以下 */
@media only screen and (max-width:940px){
  #header h1{ padding:0 0 5px 10px; }
  #header .logo{ padding-left:10px; }

  .grid{ float:left; width:48%; margin:10px 2% 0 0; }
  .grid img{ float:left; margin-right:5px; }

  #gallery{ padding-left:1px; }
  #gallery .grid{ width:23%; margin:0 2% 0 0; padding:0; }
  #gallery .grid img{ float:none; margin:0; }

  #sub .grid{ width:32%; margin:10px 1%; }
  #sub .grid:first-child{ margin-left:0; }
  #sub .grid:last-child{ margin-right:0; }

  #footer .grid{ float:none; width:100%; text-align:center; }
  #footer .grid:last-child{ padding-top:20px; }
}

/* iPad 縦 */
@media only screen and (max-width:768px){
  #header{ padding-bottom:0; }
  #header h1{ text-align:center; }
  #header .logo{ float:none; text-align:center; padding:10px 5px 20px; }

  /* ナビを2～3分割のグリッド風に */
  #topnav{ width:100%; justify-content:center; }
  #topnav li{
    width:33%; margin:0;
    border-top:1px solid #264a2e; border-right:1px dashed #264a2e;
    box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
  }
  #topnav li:nth-child(3n){ border-right:0; width:34%; }

  #topnav li.active a, #topnav li a:hover{ border-radius:0; }

  #sub ul.list{ padding:10px 10px 11px; }
  #sub ul.list li{ padding-bottom:10px; margin-bottom:8px; }
}

/* スマホ 横 */
@media only screen and (max-width:640px){
  #footer .grid p{ text-align:center; }
  .grid img{ float:none; margin:20px auto 10px; }
  .grid p,#sub .grid li{ text-align:left; }
  img.frame,#gallery img{ border-width:2px; }
  .alignleft,.alignright{ float:none; display:block; margin:0 auto 10px; }
}

/* スマホ 縦 */
@media only screen and (max-width:480px){
  #topnav li{ width:50%; }
  #topnav li:nth-child(3n){ border-right:1px dashed #264a2e; width:50%; }
  #topnav li:nth-child(2n), #topnav li:nth-child(6n){ border-right:0; }

  #mainBanner{ margin-left:1px; }
  #mainBanner h2,#mainBanner h3{ font-size:80%; }

  #sub .grid{ float:none; width:98%; }
  #sub .grid h3{ padding:10px 5px; }

  #sub ul.list{ padding:10px; }
  #sub ul.list li{ padding-bottom:3px; margin-bottom:3px; }
  #sub ul.list li img{ margin:0 5px 0 0; }
}

/* === Zigzag 2-up ============================= */
.zigzag{ margin-block:32px; }
.zigzag .row{
  display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:center;
}
.zigzag .image img{
  width:100%; height:auto; display:block; border-radius:12px;
  max-width:none !important; /* section.content img{max-width:90%} を打ち消し */
}
.zigzag .text h3{ margin:.2em 0; }
.zigzag .text p { margin:.6em 0 0; }

/* 既定：左→右 */
.zigzag .row .image{ grid-column:1; }
.zigzag .row .text { grid-column:2; }

/* 右固定（right） */
.zigzag[data-mode="right"] .row .image{ grid-column:2; }
.zigzag[data-mode="right"] .row .text { grid-column:1; }

/* 左固定（left） */
.zigzag[data-mode="left"] .row .image{ grid-column:1; }
.zigzag[data-mode="left"] .row .text { grid-column:2; }

/* 交互（left+right / alt / alternate） */
.zigzag[data-mode="left+right"] .row:nth-child(even) .image,
.zigzag[data-mode="alt"]        .row:nth-child(even) .image,
.zigzag[data-mode="alternate"]  .row:nth-child(even) .image{ grid-column:2; }
.zigzag[data-mode="left+right"] .row:nth-child(even) .text,
.zigzag[data-mode="alt"]        .row:nth-child(even) .text,
.zigzag[data-mode="alternate"]  .row:nth-child(even) .text { grid-column:1; }

/* モバイルは縦一列 */
@media (max-width: 768px){
  .zigzag .row{ grid-template-columns:1fr; }
  .zigzag .row .image{ grid-column:1; }
  .zigzag .row .text { grid-column:1; margin-top:12px; }
}

/* 画像とテキストの比率を明確化（PC時） */
.zig .col.img { flex: 0 0 42%; max-width: 42%; }
.zig .col.txt { flex: 1 1 58%; max-width: 58%; }
.zig .row     { align-items: stretch; }

/* 画像は常に枠いっぱいで表示 */
.zig .col.img img { width: 100%; height: auto; display: block; }

/* 画像URLが空 or ダミーのときは画像列を隠す（空で崩れるのを防止） */
.zig .col.img img[src=""], 
.zig .col.img img:not([src]), 
.zig .col.img img[src="#"] { display: none; }
.zig .col.img:has(img[src=""]), 
.zig .col.img:has(img:not([src])), 
.zig .col.img:has(img[src="#"]) { display:none; }  /* :has 非対応ブラウザは無視でOK */

/* SP時は縦積み */
@media (max-width: 768px) {
  .zig .col.img, .zig .col.txt { flex: 0 0 100%; max-width: 100%; }
}
/* --- 画像サイズ統一・レイアウト安定 --- */

/* ヒーロー領域：全画像を同じ枠でトリミング（16:9） */
.hero-slider { aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.hero-slider a { display: block; width: 100%; height: 100%; }
.hero-slider img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 4カラムのサムネ（220x175に統一・トリミング）*/
.gridWrapper .grid img {
  width: 220px;
  height: 175px;
  object-fit: cover;      /* はみ出す部分はトリミング */
  display: block;
}

/* ジグザグ2カラム（共通化：横幅100%、比率4:3でトリミング）*/
.zigzag img, .zig-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;           /* aspect-ratio と一緒に使うと縦は自動 */
  object-fit: cover;
  display: block;
}

/* 画像タグに width/height が入っていても優先してトリミング */
img[width][height] { height: auto; } /* 固定高さが効き過ぎる場合の保険 */

/* --- Hero: 同一比率＆トリミング --- */
.hero-slider { aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.hero-slider .slide { display:block; width:100%; height:100%; }
.hero-slider .hero-img { width:100%; height:100%; object-fit: cover; display:block; }

/* ============================================ */
/* 4カラムの画像を固定（220x175） */
.gridWrapper .grid img { width:220px; height:175px; object-fit:cover; display:block; }

/* ジグザグ用の汎用クラス（必要なら） */
.zig-img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

/* スローガンが空なら非表示 */
.slogan h2:empty, .slogan h3:empty { display:none; }

/* グローバルナビを横並びに強制（CGIページの崩れ対策） */
.header .gnav ul,
.header nav ul,
nav.gnav ul { display:flex; flex-wrap:wrap; gap:12px 24px; list-style:none; margin:0; padding:0; }
.header .gnav a,
.header nav a,
nav.gnav a { display:block; padding:8px 10px; text-decoration:none; line-height:1.2; }

/* ヒーロー・KV・グリッド内の画像を安定表示 */
#mainBanner img,
.mainImg img,
.kv img,
.grid img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 既存テンプレのグリッド縮小画像に合わせたい場合（任意） */
.grid img {
  width: 220px;   /* 既存テンプレの想定幅 */
  height: auto;
}
@media (max-width: 600px) {
  .grid img { width: 100%; }
}

/* ============================================
   ▼ CMSレイアウト調整用（追加）
   ============================================ */

/* 4カラムの画像サイズを固定 */
.gridWrapper .grid img {
  width: 220px;
  height: 175px;
  object-fit: cover;
  display: block;
}

/* ジグザグ画像を統一化 */
.zig img, .zigzag img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* スマホ時は縦積みに */
@media (max-width: 768px) {
  .zig .item,
  .zigzag .row {
    grid-template-columns: 1fr !important;
  }
}

/* ====== CMS安定化（画像サイズ＆ジグザグ） ====== */

/* 画像の基本：はみ出し防止・空srcは非表示 */
img { max-width: 100%; height: auto; display: block; }
img[src=""], img:not([src]) { display: none; }

/* キービジュアル */
.kv-img { width: 100%; height: auto; display: block; }

/* 4カラム領域の崩れ防止（幅可変グリッド） */
.gridWrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.grid img {
  width: 100%; height: auto;
  aspect-ratio: 220 / 175;     /* 一律比率でトリミング */
  object-fit: cover;
  border-radius: 8px;
}

/* 2コマ（ジグザグ） */
.zig { display: grid; gap: 28px; }
.zig .item { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; }
.zig .pic img { width: 100%; height: auto; border-radius: 12px; }
.zig .txt h3 { margin: 0 0 8px; font-size: 1.25rem; }
.zig .txt p  { margin: 0; }

/* 交互（zig_mode = alt もしくは left+right） */
.zig.alt .item:nth-child(2n) .pic { order: 2; }
.zig.alt .item:nth-child(2n) .txt { order: 1; }

/* 左固定（zig_mode = left） */
.zig.left .item .pic { order: 1; }
.zig.left .item .txt { order: 2; }

/* 右固定（zig_mode = right） */
.zig.right .item .pic { order: 2; }
.zig.right .item .txt { order: 1; }

/* スマホで縦積み */
@media (max-width: 768px) {
  .zig .item { grid-template-columns: 1fr; }
  .zig .item .pic { order: 1; }
  .zig .item .txt { order: 2; }
}

/* 空リンクのクリック無効化（URL未設定時の安全策） */
a[href=""] { pointer-events: none; cursor: default; }

/* === Zigzag images: 高さと比率を統一 === */
.zig .item { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; }
.zig .pic { width:100%; aspect-ratio: 16/9; }
.zig .pic img { width:100%; height:100%; object-fit:cover; border-radius:12px; display:block; }
.zig .txt h3 { margin:0 0 .5em; font-size:1.25rem; }
@media (max-width: 768px){
  .zig .item { grid-template-columns:1fr; }
}

/* グリッド画像も比率固定（崩れ防止） */
.gridWrapper { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:20px; }
.grid img { width:100%; height:auto; aspect-ratio: 4/3; object-fit:cover; border-radius:8px; }

/* 本文内の画像が親幅で暴れないように */
.content img { max-width:100%; height:auto; display:block; margin:0 auto; }

/* 空画像は非表示（CMSで未設定のとき） */
img[src=""], img:not([src]) { display:none; }
/* === Zigzag の画像を均一化 === */
img[data-zigimg]{
  width:100%;
  height:clamp(240px, 32vw, 420px); /* 画面幅に応じて適度な高さ */
  object-fit:cover;                 /* はみ出しトリミングで統一感 */
  aspect-ratio:16/9;                /* 比率固定（対応ブラウザ用） */
  border-radius:12px;
  display:block;
}

/* 2カラムの文章＋画像セクションが崩れにくいグリッド */
.zig, .zigzag, .twoCol, .featureZig {
  display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center;
}
@media (max-width: 768px){
  .zig, .zigzag, .twoCol, .featureZig { grid-template-columns: 1fr; }
  img[data-zigimg]{ height:auto; aspect-ratio:auto; }
}
/* ============================================
   ▼ CMSホットフィックス（ヒーロー／ZIG／4コマの干渉停止）
   ============================================ */

/* 1) ヒーローCSSの影響を #mainBanner 内に封じ込める */
#mainBanner { font-size: 100%; }
#mainBanner * { font-size: inherit; }

/* 2) .item のグローバル衝突を回避（ヒーロー内で無効化） */
#mainBanner .item { all: unset; display: initial; }

/* 3) ZIG（2コマ）専用の並び。4コマと分離する */
.zig .item { display: flex; gap: 24px; align-items: center; }
.zig .item .img, .zig .item .pic { flex: 0 0 48%; }
.zig .item .text, .zig .item .txt { flex: 1 1 52%; }
.zig .item img { width: 100%; height: auto; object-fit: cover; }
@media (max-width: 768px){
  .zig .item { flex-direction: column; }
  .zig .item > * { width: 100%; }
}

/* 4) 4コマ（四列）を明確に分離 */
.fourcol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fourcol .item { display: block; }
.fourcol .item img { width: 100%; height: auto; object-fit: cover; }

/* 5) section.content 内の画像90%制限がZIG/ヒーロー/4コマに干渉しないように上書き */
#mainBanner img,
.zig .item img,
.gridWrapper .grid img {
  max-width: 100% !important;
}

/* 6) レガシーfloatグリッドを使う場合は grid指定を無効化（重複定義の衝突対策） */
.gridWrapper { display: block; }  /* 既に display:grid がどこかにある場合の打ち消し */

/* === 固定幅レイアウトを強制：PC時は従来どおり 940/960 設計に戻す === */
@media (min-width: 960px){
  #wrapper,
  .inner{ width:940px !important; margin:0 auto; padding:0 !important; }
  .gridWrapper{ width:960px !important; margin:0 0 0 -20px !important; }
  .grid{ width:220px !important; margin-left:20px !important; float:left !important; }
}

/* === 4コマの画像サイズは 220x175 に固定（ZIGへは効かせない）=== */
.gridWrapper .grid img{
  width:220px !important;
  height:175px !important;
  object-fit:cover;
  display:block;
  float:none !important;  /* 画像のfloatでタイトルがズレるのを防止 */
  margin:0 auto 8px !important;
}

/* タイトル（grid_title）が落ちないように明示 */
.grid .grid_title,
.grid h3{
  display:block;
  text-align:center;
  padding:10px 6px;
  line-height:1.3;
}

/* === ZIG（2コマ）は4コマと別物としてサイズを分離 === */
.zig .item{ display:flex; gap:24px; align-items:center; }
.zig .item .img,
.zig .item .pic{ flex:0 0 48%; }
.zig .item .text,
.zig .item .txt{ flex:1 1 52%; }

/* ZIG画像は「幅100%・比率固定」で大きく、4コマの220幅に影響されない */
.zig .item img,
.zig img,
.zig-img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:12px;
  display:block;
}

/* スマホは縦積み */
@media (max-width: 768px){
  .zig .item{ flex-direction:column; }
  .zig .item > *{ width:100%; }
}

/* === 既存の “section.content img { max-width:90% }” などの干渉を打ち消す === */
#mainBanner img,
.zig .item img,
.gridWrapper .grid img{
  max-width:100% !important;
}

/* === 4コマが折り返す原因になりがちな display:grid の打ち消し（float版に固定）=== */
.gridWrapper{ display:block !important; }

/* === ヒーローが全体の文字を縮める問題の最終保険 === */
#mainBanner{ font-size:100%; }
#mainBanner *{ font-size:inherit; }
/* --- 4コマ見出し（gridWrapper直下の .heading）をfloatから分離 --- */
.gridWrapper > .heading{
  float:none; clear:both; width:100%;
  margin:0 0 12px 0;
}

/* --- 4コマのレイアウトを従来サイズに固定（ZIGへは効かせない） --- */
@media (min-width: 960px){
  #wrapper, .inner{ max-width:960px; margin:0 auto; padding:0; }
  .gridWrapper{ width:960px; margin:0 0 0 -20px; }
  .gridWrapper .grid{
    float:left; width:220px; margin-left:20px;
  }
}
.gridWrapper .grid img{
  width:220px; height:175px; object-fit:cover; display:block;
  float:none; margin:0 auto 8px;
}

/* --- ZIG（2コマ）は4コマと完全に分離 --- */
.zig .item{
  display:grid; grid-template-columns:1fr 1fr;
  gap:24px; align-items:center;
}
.zig .pic img{
  width:100%; height:auto; aspect-ratio:4/3;
  object-fit:cover; display:block; border-radius:12px;
}
@media (max-width:768px){
  .zig .item{ grid-template-columns:1fr; }
}

/* 既存の section.content img {max-width:90%} の干渉を打ち消し */
#mainBanner img,
.zig .pic img,
.gridWrapper .grid img{
  max-width:100% !important;
}

/* ====== HOTFIX (2025-08-20) ====== */

/* A) 4コマ見出しが1段ズレる対策：見出しを float から分離して先頭に固定 */
.gridWrapper > .heading{
  display:block;
  float:none;
  clear:both;
  width:100%;
  margin:0 0 12px 0;
}

/* B) 4コマは従来サイズで固定（ZIGへは波及させない） */
.gridWrapper .grid{
  float:left;
  width:220px;
  margin-left:20px;
}
.gridWrapper .grid img{
  width:220px;
  height:175px;
  object-fit:cover;
  display:block;
  float:none;
  margin:0 auto 8px;
}

/* C) 2コマ（ZIG）は4コマのサイズ指定を一切受けないよう隔離 */
section.zig .item{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center;
}

/* 2コマ画像：比率は端末に合わせて伸縮。4コマの 220x175 を上書き無効化 */
section.zig .pic img{
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  aspect-ratio:auto !important;
  object-fit:cover;
  border-radius:12px;
}

/* SP では縦積み */
@media (max-width: 768px){
  section.zig .item{ grid-template-columns:1fr; }
}

/* D) section.content 内の img {max-width:90%} などの既存縛りを
      ヒーロー/ZIG/4コマにだけは効かせない */
#mainBanner img,
section.zig .pic img,
.gridWrapper .grid img{
  max-width:100% !important;
}

/* E) 画面が「全体に小さく」見える対策：
      12px ベースを 14px に引き上げ（お好みで 16px にしてもOK） */
body{
  font-size:14px;       /* ← もっと大きくしたい場合は 16px に */
  line-height:1.6;
}

/* F) デスクトップ幅のベース（狭く見える対策） */
@media (min-width: 960px){
  #wrapper, .inner{
    max-width:960px;
    margin:0 auto;
    padding:0;
  }
}

/* G) gridWrapper を grid にしている別ルールの打ち消し
      （レガシー float 版で統一運用するため） */
.gridWrapper{
  display:block !important;
}

/* ==== CMS Hotfix: zig / grid / ヒーローの干渉分離 ==== */

/* 4コマ見出しの段ズレ対策：float をリセット */
.gridWrapper > .heading {
  clear: both;
  display: block;
  margin: 0 0 12px;
}

/* 4コマの画像サイズ指定を .grid 内に限定（zig へ波及させない）*/
.gridWrapper .grid img {
  width: 220px;
  height: 175px;
  object-fit: cover;
  display: block;
}

/* zig（2コマ）はフル幅・比率トリミング */
.zig .pic img, .zig .item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  max-width: 100%;
  border-radius: 12px;
  display: block;
}

/* ヒーロー内の .item と衝突しないようスコープ */
#mainBanner .item { all: unset; display: initial; }

/* 全体が狭く見える対策（最大幅と左右余白）*/
#wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}
/* ==== 4コマ（gridWrapper）をCSS Gridで再レイアウト ==== */
/* 見出しは1行使い、カードは等幅4列。float系は打ち消す */

.gridWrapper {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding-bottom: 20px;
}

/* 4コマのタイトル（見出し）は最上段で全幅に */
.gridWrapper > .heading {
  grid-column: 1 / -1;
  margin: 0 0 8px;
  clear: none !important;
}

/* 各カードはfloatを無効化して上揃え */
.gridWrapper .grid {
  float: none !important;
  margin: 0 !important;
  align-self: start;
}

/* 画像は枠にフィット（既存指定があってもこれで統一） */
.gridWrapper .grid img {
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: cover;
  aspect-ratio: 220 / 175; /* 必要な比率に固定。不要なら行ごと削除 */
  border-radius: 8px;
}

/* 画面幅に応じてカラム数を落とす */
@media (max-width: 960px) {
  .gridWrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .gridWrapper { grid-template-columns: 1fr; }
}

/* ==== FINAL OVERRIDES: 4コマはCSS Gridで固定（ズレ＆狭さ解消） ==== */

/* 見出しを最上段全幅、カード4列。古い float 指定を全面無効化 */
:root body .gridWrapper{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding-bottom: 20px;
  margin: 0 !important;
  width: auto !important;
}

:root body .gridWrapper > .heading{
  grid-column: 1 / -1;
  margin: 0 0 12px !important;
  float: none !important;
  clear: none !important;
}

/* 各カードは float を禁止し、幅/余白の上書きを遮断 */
:root body .gridWrapper .grid{
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  align-self: start;
}

/* 画像は枠フィット。昔の 220x175 強制を打ち消し */
:root body .gridWrapper .grid img{
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: cover;
  aspect-ratio: 220 / 175; /* 比率固定したい場合。不要ならこの1行だけ消す */
  border-radius: 8px;
}

/* 画面幅に応じて段数を落とす */
@media (max-width: 960px){
  .gridWrapper{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .gridWrapper{ grid-template-columns: 1fr; }
}

/* 2コマ（zig）は4コマのサイズ指定の影響を受けないように分離 */
:root body .zig .item{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; }
:root body .zig .pic img{
  width:100% !important; height:auto !important; object-fit:cover; border-radius:12px;
}
@media (max-width:768px){ .zig .item{ grid-template-columns:1fr; } }

/* “本文内画像90%”など既存縛りがヒーロー/zig/4コマへ干渉しないように */
#mainBanner img,
.zig .pic img,
.gridWrapper .grid img{ max-width:100% !important; }

/* ===== ZIG（2コマ）を4コマから完全分離：画像サイズを統一 ===== */

/* 2カラムの基本レイアウト */
section.zig { margin: 32px 0; }
section.zig .item{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}

/* 交互レイアウト（.zig.alt） */
section.zig.alt .item:nth-child(even) .pic { order: 2; }
section.zig.alt .item:nth-child(even) .txt { order: 1; }

/* ここが肝：ZIG画像は “幅100%・同じ比率・同じ見た目高さ” に固定 */
section.zig .pic img{
  width: 100% !important;
  /* どちらか好きな方へ。固定比率なら下を使う */
  aspect-ratio: 4 / 3;         /* ← 全画像を同じ比率に揃える */
  height: auto !important;
  /* もし “高さも見た目で揃えたい” なら下の行に切替
     height: clamp(240px, 33vw, 420px) !important; aspect-ratio:auto; */

  object-fit: cover;
  display: block;
  border-radius: 12px;
  max-width: 100% !important;
}

/* スマホは縦積み */
@media (max-width: 768px){
  section.zig .item{ grid-template-columns: 1fr; }
  /* スマホ時は交互の並び順をリセットして読みやすく */
  section.zig.alt .item:nth-child(even) .pic,
  section.zig.alt .item:nth-child(even) .txt { order: initial; }
  /* スマホ時は高さ自動の方が自然 */
  section.zig .pic img{
    height: auto !important;
    aspect-ratio: auto;
  }
}

/* 4コマ用の画像指定（例：.gridWrapper .grid img { width:220px; ... }）を絶対に拾わないよう、
   より強いセレクタ＋!importantで上書き済み。これで “2コマが4コマと同じ大きさになる” を防ぎます。*/

/* （任意）空画像は非表示にして段ズレ防止 */
section.zig .pic img[src=""],
section.zig .pic img:not([src]),
section.zig .pic img[src="/images/"]{ display:none !important; }

/* ===== ZIG（2コマ）画像を統一。4コマの指定は一切拾わない ===== */
section.zig .item{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center;
}

/* 交互（alt） */
section.zig.alt .item:nth-child(even) .pic { order:2; }
section.zig.alt .item:nth-child(even) .txt { order:1; }

/* ここが肝：ZIGの画像を共通比率で統一 */
section.zig .pic img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:4/3;         /* ← 16/9にしたければここを変更 */
  object-fit:cover;
  display:block;
  border-radius:12px;
  max-width:100% !important;
}

/* スマホは縦積み＆順序リセット */
@media (max-width:768px){
  section.zig .item{ grid-template-columns:1fr; }
  section.zig.alt .item:nth-child(even) .pic,
  section.zig.alt .item:nth-child(even) .txt { order:initial; }
  section.zig .pic img{ aspect-ratio:auto; }
}

/* 空画像は非表示（段ズレ防止） */
section.zig .pic img[src=""],
section.zig .pic img:not([src]),
section.zig .pic img[src="/images/"]{ display:none !important; }
/* === ZIG（2コマ）最終統一・交互配置（他と干渉しない強スコープ） === */
section.zig .item{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  align-items:center;
}

/* 交互（alt）→ 偶数行だけ左右を入れ替え（Gridは order じゃなく列を切替） */
section.zig.alt .item:nth-child(even) .pic{ grid-column:2; }
section.zig.alt .item:nth-child(even) .txt{ grid-column:1; }

/* 画像を“絶対に”同じ見え方へ（はみ出しトリミング） */
section.zig .pic{
  width:100%;
  aspect-ratio: 4 / 3;    /* ← 16/9 にしたいならここを変更 */
  overflow:hidden;
  border-radius:12px;
}
section.zig .pic img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
  max-width:none !important;
}

/* スマホは縦積み（交互は解除） */
@media (max-width: 768px){
  section.zig .item{ grid-template-columns:1fr; }
  section.zig.alt .item:nth-child(even) .pic,
  section.zig.alt .item:nth-child(even) .txt{ grid-column:auto; }
  section.zig .pic{ aspect-ratio:auto; }
}

/* 空画像は表示しない（段ズレ防止） */
section.zig .pic img[src=""],
section.zig .pic img[src="/images/"]{ display:none !important; }