/* =====================================================
   common.css
   - Biz-Vektor テーマを壊さず “追記で補う” 共通CSS
   - NO-JS menu toggle
   - Sticky footer (tablet gap fix)
   - SNS buttons component (PNG icon)
   - FIX: top banner (#topMainBnr) background/layout
   - FIX: info list thumbnail/layout
===================================================== */

/* ===== CSS-only Menu Toggle ===== */
.nojs-menu-toggle{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  border:0;
  padding:0;
  margin:0;
}

.nojs-menu-button{
  cursor:pointer;
  display:inline-block;
  user-select:none;
}

/* PC/Tablet: menu always visible; toggle hidden */
#gMenuInner ul.menu{
  display:block;
}
.nojs-menu-button{
  display:none;
}

/* Mobile only: checkbox toggles menu */
@media (max-width:768px){
  /* In case theme hides assistive-text too aggressively */
  #gMenu .assistive-text{
    position:static;
    width:auto;
    height:auto;
    clip:auto;
  }

  .nojs-menu-button{
    display:inline-block;
  }

  /* Closed */
  #gMenuToggle:not(:checked) ~ #wrap #gMenu #gMenuInner ul.menu{
    display:none;
  }

  /* Open */
  #gMenuToggle:checked ~ #wrap #gMenu #gMenuInner ul.menu{
    display:block;
  }
}

/* ===== Sticky Footer (iPad/Safari white gap fix) ===== */
/* 既存テーマのレイアウトを崩しにくい最小構成 */
html, body{
  height:100%;
}

body{
  min-height:100vh;
  min-height:100dvh;
}

/* Make wrap a column flex container */
#wrap{
  display:flex !important;
  flex-direction:column !important;
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  min-width:0; /* Safari/Chromeで横伸び抑止 */
}

/* Content grows to fill remaining space */
#main{
  flex:1 0 auto !important;
  min-width:0;
}

/* Footer stays at bottom */
#footerSection{
  flex-shrink:0 !important;
  min-width:0;
}

/* Remove leftover padding/margin that footerFixed JS would manage (bottomだけ) */
#wrap,
#main,
#container,
#footerSection{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

/* If any fixed/footerFixed positioning remains, neutralize it */
#footerSection,
#siteBottom,
#footer{
  position:static !important;
  bottom:auto !important;
  left:auto !important;
  right:auto !important;
}

/* =====================================================
   SNS Buttons Component (PNG icon)
   - icon-x.png / icon-facebook.png
===================================================== */

.sns-buttons{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

/* Button base */
.sns-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 18px;
  border-radius:9999px;

  text-decoration:none;
  font-weight:700;
  font-size:16px;
  line-height:1;

  border:1px solid transparent;
  transition:opacity .15s ease, transform .05s ease;
}

.sns-btn:hover{ opacity:.92; }
.sns-btn:active{ transform:translateY(1px); }

/* icon */
.sns-btn__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex:0 0 18px;
}

.sns-btn__icon img{
  width:18px;
  height:18px;
  display:block;
}

/* X */
.sns-btn--x{
  background:#000;
  color:#fff;
  border-color:#000;
}

/* Facebook */
.sns-btn--facebook{
  background:#1877F2;
  color:#fff;
  border-color:#1877F2;
}

/* Mobile */
@media (max-width:768px){
  .sns-btn{
    padding:8px 14px;
    font-size:14px;
  }

  .sns-btn__icon{
    width:16px;
    height:16px;
    flex-basis:16px;
  }

  .sns-btn__icon img{
    width:16px;
    height:16px;
  }
}

/* ===== Header clearfix / z-index ===== */
/* ヘッダー内の float を親がちゃんと抱えるようにする（clearfix） */
#headerInner::after{
  content:"";
  display:table;
  clear:both;
}

/* 念のため：レイヤー順も安定させる */
#header{ position:relative; z-index:20; }
#gMenu { position:relative; z-index:10; }

/* =====================================================
   FIX 1) トップバナー (#topMainBnr) が「左右だけ青」「背景が消える」問題
   - #topMainBnr は常にフル幅で青
   - #topMainBnrFrame は中央寄せ（最大幅950px）、枠だけ
   - 画像は100%で枠内に収める
===================================================== */

#topMainBnr{
  background-color:#253D7D;  /* 青帯は常に出す */
  padding:10px 0;
  overflow:visible;          /* テーマ挙動に合わせる */
}

/* 枠のコンテナ：中央寄せ＋最大幅 */
#topMainBnrFrame{
  width:96%;
  max-width:950px;
  margin:0 auto;
  border:1px solid #ccc;
  background:transparent;    /* ここを白にしない（左右だけ青化の原因になりやすい） */
  box-sizing:border-box;
}

/* 画像を囲う白枠（テーマの見た目を維持） */
#topMainBnrFrame .slideFrame{
  border:4px solid #fff;
  background:#fff;
  display:block;
  overflow:hidden;
  box-sizing:border-box;
}

/* 画像を枠にフィット */
#topMainBnrFrame img{
  display:block;
  width:100%;
  height:auto;
}

/* テーマ既定と同じ：660px以上はpaddingを少し増やす */
@media (min-width:660px){
  #topMainBnr{ padding:15px 0; }
}

/* =====================================================
   FIX 2) お知らせ（.infoList）の崩れ
   - RSSボタンの位置
   - サムネが巨大化/下に落ちる/位置がズレる
   - haveThumbnail の右余白が効かない
===================================================== */

/* 「お知らせ」ブロックはテーマの前提通り relative */
#content .infoList{
  position:relative;
}

/* RSSボタン：テーマはマイナスマージンで右上に載せるので、その前提を固定 */
#content .infoList .rssBtn{
  text-align:right;
  position:relative;
  margin-top:-34px;
  margin-bottom:15px;
}

/* 1記事ブロックの基礎：absoluteサムネの基準点を確実にする */
#content .infoList .infoListBox{
  position:relative; /* ←これが抜けるとサムネが変な所へ行く */
}

/* サムネありのとき本文が右に回り込む余白（テーマ既定を固定） */
#content .infoList .infoListBox div.entryTxtBox.haveThumbnail{
  margin-right:100px;
}

/* サムネ：右上に固定（テーマ既定を固定） */
#content .infoList .infoListBox div.thumbImage{
  width:35%;
  float:right;
  text-align:right;
  position:absolute;
  top:20px;
  right:0;
}

/* サムネ画像：必ず小さくする（どこかで width:100% が当たるのを防ぐ） */
#content .infoList .infoListBox div.thumbImage div.thumbImageInner img{
  width:88px;
  height:auto;
  max-width:none; /* ← max-width:100% の影響で拡大する事故を防ぐ */
  border:1px solid #ccc;
}

/* スマホは absolute をやめて自然に下へ（見切れ防止） */
@media (max-width:660px){
  #content .infoList .infoListBox div.entryTxtBox.haveThumbnail{
    margin-right:0;
  }

  #content .infoList .infoListBox div.thumbImage{
    position:static;
    width:auto;
    float:none;
    text-align:left;
    margin-top:10px;
  }

  #content .infoList .infoListBox div.thumbImage div.thumbImageInner img{
    width:88px;      /* スマホでも同じサイズを維持したいなら固定 */
    max-width:none;
  }
}