@charset "Shift_JIS";

/* ===== noscript 案内バナー ===== */
.smm-noscript-notice{
  background:#c00;
  color:#fff;
  text-align:center;
  padding:12px 16px;
  font-size:14px;
  line-height:1.6;
}
.smm-noscript-notice a{
  color:#fff;
  text-decoration:underline;
}

/* box-sizing reset removed */
:root{
  --smm-primary:#0250BF;
  --smm-accent:#F78A23;
  --smm-primary-light:#e8f0fb;
  --smm-accent-light:#fff4e6;
  --smm-text:#1a1a1a;
  --smm-text-muted:#555;
  --smm-border:#d0d8e8;
  --smm-white:#fff;
  --smm-nav-h:48px;
  --smm-mega-w:1180px;
  --smm-radius:8px;
}

/* ===== HEADER WRAPPER（ロゴ左固定 + 右側2行レイアウト） ===== */
.smm-header-wrapper{
  background:var(--smm-primary);
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.smm-header-wrapper-inner{
  width: 100%;
  max-width:var(--smm-mega-w);
  margin:0 auto;
  display:flex;
  align-items:stretch;
}
/* ロゴ：縦2行（補助ナビ行＋検索行）にまたがる左カラム */
.smm-logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
  text-decoration:none;
  padding:8px 24px 8px 16px;
}
.smm-header-right{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* TOP BAR（リンク右寄せ） */
.smm-top-bar{color:var(--smm-white);font-size:12px;padding:4px 0}
.smm-top-bar-inner{display:flex;align-items:center;gap:24px;justify-content:flex-end;padding:0 16px}
.smm-top-bar a{color:var(--smm-white);text-decoration:none;display:flex;align-items:center;gap:4px}
.smm-top-bar a:hover{text-decoration:underline}
.smm-top-bar-inner > a::before{content:'○';font-size:10px;margin-right:2px}

/* HEADER（検索行） */
.smm-header{flex:1}
.smm-header-main{display:flex;align-items:center;gap:16px;padding:10px 16px 10px 0}
.smm-logo-icon{width:52px;height:52px;background:var(--smm-accent);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:28px}
.smm-logo-text{color:var(--smm-white);line-height:1.2}
.smm-logo-text .ja{font-size:22px;font-weight:700;letter-spacing:.2em}
.smm-logo-text .en{font-size:10px;opacity:.85}
.smm-header-spacer{flex:1}
/* background/border-radius は Google CSE 自身が描画するため、コンテナは透明のまま */
.smm-header-search{display:flex;align-items:center;gap:8px}
.smm-header-search input{border:none;outline:none;font-size:13px;flex:1;font-family:inherit}
.smm-header-search input:focus-visible{outline:2px solid var(--smm-accent);outline-offset:1px;border-radius:2px}
.smm-header-search button{background:none;border:none;cursor:pointer;color:var(--smm-primary);padding:0;display:flex;align-items:center}
.smm-hamburger{display:none;background:none;border:2px solid var(--smm-white);border-radius:var(--smm-radius);color:var(--smm-white);cursor:pointer;padding:6px 10px;flex-direction:row;gap:8px;align-items:center;justify-content:center}
.smm-hamburger-label{font-size:12px;font-weight:700;color:var(--smm-white);white-space:nowrap}
.smm-hamburger-icon{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.smm-hamburger-icon span{display:block;width:22px;height:2px;background:var(--smm-white);border-radius:2px;transition:transform .3s,opacity .3s}
.smm-hamburger[aria-expanded="true"] .smm-hamburger-icon span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.smm-hamburger[aria-expanded="true"] .smm-hamburger-icon span:nth-child(2){opacity:0}
.smm-hamburger[aria-expanded="true"] .smm-hamburger-icon span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* NAV BAR */
.smm-nav-bar{background:var(--smm-white);border-bottom:3px solid var(--smm-accent);position:relative;z-index:999}
.smm-nav-inner{max-width:var(--smm-mega-w);margin:0 auto;display:flex;align-items:stretch}
.smm-nav-item{flex:1}
.smm-nav-btn{
  width:100%;height:var(--smm-nav-h);background:none;border:none;
  border-right:1px solid var(--smm-border);
  cursor:pointer;font-family:inherit;font-size:16px;font-weight:700;color:var(--smm-text);
  display:flex;align-items:center;justify-content:center;gap:4px;
  padding:0 4px;white-space:nowrap;transition:background .1s,color .1s;
}
.smm-nav-item:first-child .smm-nav-btn{border-left:1px solid var(--smm-border)}
.smm-nav-btn:hover,.smm-nav-btn[aria-expanded="true"]{background:var(--smm-primary-light);color:var(--smm-primary)}
.smm-nav-btn svg{flex-shrink:0;transition:transform .2s}
.smm-nav-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.smm-nav-btn:focus-visible{outline:3px solid var(--smm-accent);outline-offset:-2px;z-index:1}

/* MEGA PANEL */
.smm-mega-panel{
  visibility:hidden;opacity:0;pointer-events:none;
  position:absolute;left:50%;transform:translateX(-50%);
  width:min(var(--smm-mega-w),100vw);
  background:var(--smm-white);border:1px solid var(--smm-border);border-top:3px solid var(--smm-accent);
  border-radius:0 0 var(--smm-radius) var(--smm-radius);
  box-shadow:0 8px 32px rgba(0,0,0,.10);
  padding:20px 24px 16px;
  z-index:998;
  overflow:hidden; /* はみ出し防止 */
}
.smm-mega-panel.smm-is-open{visibility:visible;opacity:1;pointer-events:auto}
.smm-mega-panel.smm-do-transition{transition:opacity .15s ease,visibility .15s ease}

/* 閉じるボタン */
.smm-mega-close{
  position:absolute;top:12px;right:12px;
  background:none;border:1px solid var(--smm-border);border-radius:50%;
  width:28px;height:28px;cursor:pointer;font-size:14px;
  color:var(--smm-text-muted);display:flex;align-items:center;justify-content:center;
  transition:background .1s,color .1s,border-color .1s;flex-shrink:0;z-index:1;
}
.smm-mega-close:hover{background:var(--smm-primary);color:var(--smm-white);border-color:var(--smm-primary)}
.smm-mega-close:focus-visible{outline:2px solid var(--smm-accent);outline-offset:2px}

/* =====================================================
   メガメニュー内レイアウト
   ─────────────────────────────────────────────────
   構造:
     .smm-mega-sections
       .smm-mega-section
         .smm-mega-heading   ← 見出し（上段）
         .smm-mega-link-row  ← リンク群（見出し下にインデント）
   ===================================================== */
.smm-mega-sections{
  display:flex;
  flex-direction:column;
  gap:0;
  /* 閉じるボタン分の右余白 */
  padding-right:40px;
}

/* セクション1つ：縦積み（見出し→リンク） */
.smm-mega-section{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 0;
  border-bottom:1px solid var(--smm-border);
}
.smm-mega-section:last-of-type{border-bottom:none}

/* 見出し */
.smm-mega-heading{
  /* ラベル型（非リンク）見出し */
  display:flex;
  align-items:center;
  gap:6px;
  font-size:16px;
  font-weight:700;
  color:var(--smm-text-muted);
  letter-spacing:.03em;
  padding:4px 0 4px 10px;
  border-left:3px solid var(--smm-accent);
  white-space:nowrap;
}
/* リンク型見出し：クリック可能であることを明示 */
.smm-mega-heading-link{
  display:flex;
  align-items:flex-start;
  gap:5px;
  font-size:16px;
  font-weight:700;
  color:var(--smm-primary);
  text-decoration:none;
  padding:4px 8px 4px 10px;
  border-left:3px solid var(--smm-accent);
  border-radius:0 4px 4px 0;
  line-height:1.4;
  transition:background .1s,color .1s,border-color .1s;
  white-space:normal;
}
.smm-mega-heading-link::after{
  content:'';
}
.smm-mega-heading-link:hover{
  background:var(--smm-accent-light);
  color:var(--smm-primary);
  text-decoration:underline;
}
.smm-mega-heading-link:hover::after{
  transform:translateX(3px);
}
.smm-mega-heading-link:focus-visible{outline:2px solid var(--smm-accent);outline-offset:2px}
/* heading-link セクションはコンパクトに（padding縮小） */
.smm-mega-section--heading-link{
  padding:4px 0;
}

/* リンクを横並び・見出し下にインデント */
.smm-mega-link-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2px 8px;
  width:100%;
  min-width:0;
}

/* リンク1件 */
.smm-mega-link-row a{
  display:flex;
  align-items:flex-start;
  gap:5px;
  font-size:16px;
  color:var(--smm-text);
  text-decoration:none;
  padding:5px 8px;
  border-radius:4px;
  line-height:1.5;
  transition:background .1s,color .1s;
  white-space:normal;
  min-width:0;
}
.smm-mega-link-row a .smm-link-icon{
  flex-shrink:0;
  width:18px;
  height:18px;
  margin-top:3px; /* テキストの行頭に合わせた微調整 */
  color:var(--smm-accent);
}
.smm-mega-link-row a:hover{background:var(--smm-accent-light);color:var(--smm-primary)}
.smm-mega-link-row a:focus-visible{outline:2px solid var(--smm-accent);outline-offset:1px}

/* ＞アロー（大見出し・小見出し共通でオレンジ） */
.smm-link-arrow{
  color:var(--smm-accent) !important;
  font-weight:700;
  flex-shrink:0;
  align-self:flex-start;
}

/* サブリンク */
.smm-mega-link-row a.smm-sub-link{padding-left:20px}

/* フッター */
.smm-mega-footer{
  margin-top:12px;padding-top:12px;
  border-top:1px solid var(--smm-border);
  display:flex;justify-content:center;
}
.smm-mega-footer a{
  font-size:13px;color:var(--smm-primary);text-decoration:none;font-weight:700;
  display:flex;align-items:center;gap:4px;padding:6px 20px;
  border:1px solid var(--smm-primary);border-radius:var(--smm-radius);
  transition:background .1s,color .1s;
}
.smm-mega-footer a::before{content:'\203A';color:var(--smm-accent);font-size:15px;font-weight:700}
.smm-mega-footer a:hover{background:var(--smm-primary);color:var(--smm-white)}
.smm-mega-footer a:hover::before{color:var(--smm-white)}
.smm-mega-footer a:focus-visible{outline:2px solid var(--smm-accent);outline-offset:2px}

/* OVERLAY */
.smm-nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:997}
.smm-nav-overlay.smm-is-visible{display:block}

/* MOBILE NAV */
.smm-mobile-nav{display:none;position:fixed;top:0;right:0;bottom:0;width:min(340px,100vw);background:var(--smm-white);z-index:1100;overflow-y:auto;box-shadow:-4px 0 20px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .3s ease}
.smm-mobile-nav.smm-is-open{transform:translateX(0)}
.smm-mobile-nav-header{background:var(--smm-primary);color:var(--smm-white);padding:16px;display:flex;justify-content:space-between;align-items:center}
.smm-mobile-nav-close{background:none;border:none;color:var(--smm-white);font-size:22px;cursor:pointer;line-height:1;padding:4px}
.smm-mobile-acc{list-style:none}
.smm-mobile-acc-btn{width:100%;text-align:left;padding:14px 16px;background:none;border:none;border-bottom:1px solid var(--smm-border);font-family:inherit;font-size:14px;font-weight:700;color:var(--smm-primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.smm-mobile-acc-btn::after{content:'+';font-size:18px;color:var(--smm-accent)}
.smm-mobile-acc-btn[aria-expanded="true"]::after{content:'−'}
.smm-mobile-sub{display:none;background:#f8f9fc;border-bottom:1px solid var(--smm-border)}
.smm-mobile-sub.smm-is-open{display:block}
.smm-mobile-sub-heading{font-size:11px;font-weight:700;color:var(--smm-primary);padding:10px 20px 4px}
.smm-mobile-sub a{display:block;padding:8px 20px 8px 32px;font-size:13px;color:var(--smm-text);text-decoration:none;border-bottom:1px solid #eef;text-indent:-10px}
.smm-mobile-sub a:hover{background:var(--smm-primary-light)}
.smm-mobile-sub a::before{content:'\203A';color:var(--smm-accent)}

/* SKIP LINK */
.smm-skip-link{position:absolute;top:-100px;left:0;background:var(--smm-primary);color:#fff;padding:8px 16px;z-index:9999;border-radius:0 0 8px 0;text-decoration:none;font-weight:700}
.smm-skip-link:focus{top:0}

/* スクリーンリーダー専用テキスト（視覚的非表示） */
.smm-sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* DEMO */
.smm-demo-content{max-width:var(--smm-mega-w);margin:32px auto;padding:0 16px}
.smm-demo-content h2{font-size:16px;color:var(--smm-primary);border-left:4px solid var(--smm-accent);padding-left:12px;margin-bottom:8px}
.smm-demo-content p{font-size:13px;color:var(--smm-text-muted);margin-bottom:16px}

/* RESPONSIVE */
@media(max-width:900px){
  .smm-top-bar{display:none}
  .smm-header-search{display:none}
  .smm-hamburger{display:flex}
  .smm-nav-bar{display:none}
  .smm-mobile-nav{display:block}
}
@media(max-width:600px){
  .smm-header-main{padding:8px 12px 8px 0}
  .smm-logo{padding:6px 12px 6px 10px}
  .smm-logo-text .ja{font-size:18px}
}

.slicknav_menu { display: none !important; }

/* ===== gcse 検索ボックス調整 ===== */
#smm-header-area *       { box-sizing: border-box; }
#smm-header-area .gsc-search-box     { margin: 0; }
#smm-header-area .gsc-input          { padding: 0; }
#smm-header-area table.gsc-search-box{ margin-bottom: 0; }

/* ===== トップバー: smm-top-bar-policy ===== */
.smm-top-bar-policy{
  color:var(--smm-white);
  font-size:12px;
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:2px;
}
.smm-top-bar-policy a{
  color:var(--smm-white);
  text-decoration:none;
  font-size:12px;
}
.smm-top-bar-policy a::before{content:''}
.smm-top-bar-policy a:hover{text-decoration:underline}

/* ── top.css の #container border-top 上書き ──────────────────────────
   top.css で #container { border-top: 2px solid #000 } が定義されているが
   メガメニューのナビバーが区切り線の役割を担うため、黒線を非表示にする */
#container {
  border-top: none !important;
}