@charset "UTF-8";
/* ============================================================
   auvisa.jp スマホ対応用 上書きCSS（sp.css）
   ・画面幅768px以下のときだけ効きます。PC表示は変わりません。
   ・style.css / top.css / mailform.css は触らず、ここで上書きします。
   ・全ページ共通（/css/sp.css）
   ============================================================ */

/* PCでは非表示（sp.js が追加する電話ボタン・メニューボタン） */
.spTel,
.spMenuBtn { display: none; }

@media screen and (max-width: 768px) {

  /* ---------- 全体 ---------- */
  html, body {
    min-width: 0 !important;
    width: auto !important;
    -webkit-text-size-adjust: 100%;
  }
  body {
    overflow-x: hidden;
    font-size: 16px !important;   /* 本文は約14.7px（style.css の92%指定が効く） */
  }
  img, iframe, embed, object {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 固定幅のレイアウト枠を画面幅に合わせる */
  .headArea, .headInner1, .headInner2,
  .globalMnu, ul.globalMnuList, .mainArea, .mainInner,
  .leftArea, .rightArea, #TopMainCnts, #TopSubCnts,
  .footArea, .footInner, .copyright, #TopVisual, p.pageTop {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  .mainArea { padding-top: 12px !important; }
  .mainInner,
  .footInner { padding-left: 12px !important; padding-right: 12px !important; }
  .mainInner { line-height: 1.7 !important; }
  .mainInner { overflow-wrap: anywhere; word-break: normal; }   /* 長いURLを折り返す */
  p.pageTop { margin: 30px 12px 0 !important; }

  /* heightLine.js が付ける高さ揃えを解除 */
  .heightLineParent > * { height: auto !important; }

  /* ---------- ヘッダー ---------- */
  .headArea .seoTxt {
    padding: 6px 12px 0 !important;
    text-align: left !important;
    font-size: 11px !important;
  }
  .headInner2 { position: relative !important; padding: 6px 12px 10px !important; }
  .headArea .siteLogo {
    float: none !important;
    position: static !important;
    width: auto !important;
    margin: 0 !important;
  }
  .headArea .siteLogo img { width: 220px !important; margin: 0 !important; }
  .hdSubMnu {
    float: none !important;
    position: static !important;
    width: auto !important;
    margin: 6px 0 0 !important;
    text-align: left !important;
  }
  .hdSubMnu address { display: none !important; }   /* 電話番号画像 → 電話ボタンに置き換え */
  .hdSubMnu ul.inlineList li {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 14px 8px 0 !important;
  }

  /* 電話ボタン（sp.js が追加） */
  .spTel {
    display: block;
    margin: 10px 12px;
    padding: 13px 10px;
    background: #CC0000;
    color: #fff !important;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none !important;
    border-radius: 6px;
  }
  .spTel small { display: block; font-size: 12px; font-weight: normal; }

  /* ---------- トップのスライドショー：1枚目だけ表示 ---------- */
  #slideshow,
  #slideshow .slides,
  #slideshow .slideList {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
  }
  #slideshow .slideList li {
    display: none !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }
  #slideshow .slideList li:first-child { display: block !important; opacity: 1 !important; }
  #slideshow .slideMnu { display: none !important; }
  #slideshow { margin: 0 !important; }
  #TopVisual { margin-top: 8px !important; padding: 0 !important; background: none !important; }

  /* ---------- グローバルメニュー：ボタンで開閉 ---------- */
  .spMenuBtn {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 24px);
    margin: 10px 12px;
    padding: 12px 14px;
    background: #333;
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
  }
  .spMenuBtn::after { content: "＋"; float: right; }
  .spMenuBtn[aria-expanded="true"]::after { content: "－"; }

  .globalMnu {
    display: none !important;
    margin: 0 12px 12px !important;
    border: 1px solid #ccc;
    background: #fff !important;
  }
  .globalMnu.spOpen { display: block !important; }

  ul.globalMnuList,
  ul.globalMnuList > li {
    float: none !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
  }
  ul.globalMnuList > li > a {
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 13px 12px !important;
    text-indent: 0 !important;
    overflow: visible !important;
    background: #f3f3f3 !important;   /* 画像メニューを文字表示に */
    border-bottom: 1px solid #ddd;
    color: #333 !important;
    font-size: 15px !important;
    font-weight: bold;
  }
  ul.globalMnuList > li > a::after { content: "▼"; float: right; font-size: 11px; }
  ul.globalMnuList > li.spOpen > a::after { content: "▲"; }

  /* 2段目（トップ：globalMnuCntsInner／下層：localMnu） */
  .globalMnuBox {
    display: none !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  ul.globalMnuList > li.spOpen > .globalMnuBox {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .globalMnuBox h3 { display: none !important; }
  .globalMnuCntsInner, .localMnu,
  .globalMnuBox ul, .globalMnuBox li {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
  }
  /* 開いたメニューが途中で切れないよう、高さ制限・はみ出し非表示をすべて解除
     （top.css / jquery.menu.js が付ける固定高さ・overflow:hidden 対策） */
  ul.globalMnuList > li,
  .globalMnuBox,
  .globalMnuInner,
  .globalMnuCnts,
  .globalMnuCntsInner,
  .localMnu,
  .globalMnuBox ul,
  .globalMnuBox li {
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    columns: auto !important;
  }
  .globalMnuCntsInner:after,
  .globalMnuBox ul:after { content: none !important; }

  /* jquery.menu.js が自動で追加する包み枠（top.css で高さ270px固定・幅868px） */
  .globalMnuInner,
  .globalMnuCnts {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  /* メニュー内の「左側が〜右側が〜」等の説明文はスマホでは縦並びのため非表示 */
  .globalMnuBox ul p,
  .globalMnuBox ul br { display: none !important; }

  .globalMnuBox li a span { display: block; }   /* 2行になっても左端をそろえる */

  .globalMnuBox li a {
    display: block !important;
    height: auto !important;
    padding: 12px 12px 12px 22px !important;
    text-indent: 0 !important;
    border-bottom: 1px solid #eee;
    font-size: 15px !important;
  }

  /* ---------- 本文（下層ページ） ---------- */
  ul.breadCrumb { padding-bottom: 12px !important; font-size: 13px; }

  .leftInner { padding: 12px 8px !important; }

  dl.leadTitle { padding-top: 14px !important; }
  dl.leadTitle dt, dl.leadTitle dd { padding: 0 14px 8px !important; }

  .cntsBox, .cntsBoxInner {
    width: auto !important;
    margin: 0 0 10px !important;
    background-image: none !important;
  }
  .cntsBox {
    background-color: #fff !important;
    border-radius: 5px;
    padding-bottom: 10px !important;
  }
  .cntsBoxInner { padding-top: 14px !important; }
  .cntsTitle { padding: 0 12px 12px 34px !important; background-position: 8px 0 !important; }
  .cnts { width: auto !important; margin: 0 12px !important; }

  .trigger { margin: 0 12px 0 auto !important; }

  .indexBox,
  .indexBox .index2BoxInner,
  .indexBox .index4BoxInner {
    width: auto !important;
    float: none !important;
    margin: 0 0 8px !important;
  }

  /* 汎用の左右ボックスは縦積み */
  .mainArea .leftBox,
  .mainArea .rightBox {
    float: none !important;
    width: auto !important;
    margin-right: 0 !important;
  }

  .btnBox, .btnBox .btnBoxInner { background-image: none !important; }
  .btnBox { border-radius: 5px; }
  .noticeBox { padding: 10px !important; }

  /* トップのリード枠（左に写真、右に文章） */
  .leadBnrBox, .leadBnrInner { width: auto !important; height: auto !important; float: none !important; }
  .leadBnrBox { margin-bottom: 12px !important; }
  .leadBnrInner { padding: 10px !important; border-radius: 6px; overflow: hidden; }
  .mainArea .leadBnrBox .leftBox {
    float: left !important;
    width: 72px !important;
    margin: 0 12px 6px 0 !important;
  }
  .leadBnrBox .leftBox img { margin: 0 !important; }
  .mainArea .leadBnrBox .rightBox { float: none !important; width: auto !important; overflow: hidden; }
  .leadBnrBox dl, .leadBnrBox ul { padding-right: 0 !important; }

  /* 表：画面幅に収める（列が多い表は sp.js が横スクロール枠で囲む） */
  .mainArea table {
    width: 100% !important;
    max-width: 100% !important;
  }
  .mainArea td, .mainArea th { word-break: break-word; }
  .mainArea .spTableScroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 10px;
  }
  .mainArea .spTableScroll table {
    width: auto !important;
    min-width: 560px;
    max-width: none !important;
  }

  /* サイドメニュー */
  .mnuList, .mnuList li,
  .bnrList, .bnrList li {
    float: none !important;
    width: auto !important;
    height: auto !important;
  }
  ul.mnuList li a { padding: 12px 11px 11px 13px !important; }

  /* 右カラムのバナー */
  .rightArea { text-align: center !important; margin-top: 15px !important; }
  .rightArea .bnrList li { margin-bottom: 8px !important; }

  /* スマホでは不要なもの（Skype・旧モバイルサイト案内・募金・サイトシール等） */
  .dottedBox,
  #TopSubCnts > table,
  .rightArea p.lined { display: none !important; }

  /* ---------- フッター ---------- */
  dl.ftSiteInfo, dl.ftMnuBox, dl.ftLastMnuBox {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 18px !important;
  }
  dl.ftMnuBox { background: none !important; border-top: 1px dotted #666; }
  dl.ftMnuBox dt { padding: 12px 0 10px !important; }
  dl.ftMnuBox dd { padding-left: 0 !important; }
  dl.ftMnuBox li { padding: 6px 0 6px 15px !important; }
  .footArea .copyright { text-align: center; margin-top: 10px !important; }

  /* ---------- お問い合わせフォーム（contactus/form.html・thanks.html） ---------- */
  div#mf_wrapper {
    width: auto !important;
    padding: 12px !important;
    box-sizing: border-box;
  }
  div#mf_header img { max-width: 220px !important; }
  div#mf_header h1 { font-size: 20px !important; padding-top: 8px !important; }
  div#mf_wrapper table { width: 100% !important; }
  div#mf_wrapper td { font-size: 15px; line-height: 1.7; }

  table.mailform,
  table.mailform tbody,
  table.mailform tr,
  table.mailform tr th,
  table.mailform tr td {
    display: block !important;
    width: auto !important;
    box-sizing: border-box;
  }
  table.mailform tr th {
    border-bottom: 0 !important;
    padding: 12px 0 4px !important;
    font-size: 14px !important;
    font-weight: bold !important;
  }
  table.mailform tr td {
    padding: 0 0 12px !important;
    font-size: 15px !important;
  }
  table.mailform input[type="text"],
  table.mailform input[type="email"],
  table.mailform input[type="tel"],
  table.mailform select,
  table.mailform textarea {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important;    /* iPhoneで入力時に拡大されるのを防ぐ */
    padding: 8px !important;
  }
  table.mailform input[type="radio"],
  table.mailform input[type="checkbox"] { transform: scale(1.3); margin: 0 6px 0 4px; }
  table.mailform input[type="submit"],
  table.mailform input[type="reset"] {
    font-size: 16px !important;
    padding: 10px 18px !important;
    margin: 4px 8px 4px 0;
  }
}


/* ============================================================
   ここから下：2026年10月 新デザイン（案D）
   ============================================================ */
/* ============================================================
   国別専門サイト 案D テーマ（国カラー）  vg-theme.css
   ・HTMLは変更せず、見た目だけを案Dに寄せる上書きCSSです。
   ・テスト後は、この中身を sp.css の「末尾」にそのまま貼り付けて使います。
   ・サイトごとに変えるのは、下の :root の5行（国カラー）だけです。
   ============================================================ */

/* ---------- 国カラー（サイトごとにここだけ変更） ----------
   auvisa.jp     --vg-main:#00843D; --vg-sub:#FFCD00; --vg-tint:#EFF7F1; --vg-deep:#005C2B; --vg-mid:#D4EBDC;
   ukvisa.jp     --vg-main:#012169; --vg-sub:#C8102E; --vg-tint:#EEF1F8; --vg-deep:#00133F; --vg-mid:#D6DCEC;
   usvisainfo.jp --vg-main:#B22234; --vg-sub:#3C3B6E; --vg-tint:#FBF0F1; --vg-deep:#841826; --vg-mid:#F2D8DB;
   nzvisa.jp     --vg-main:#111111; --vg-sub:#A7A9AC; --vg-tint:#F2F2F2; --vg-deep:#000000; --vg-mid:#DDDEE0;
   ------------------------------------------------------------ */
:root {
  --vg-main: #111111;
  --vg-sub:  #A7A9AC;
  --vg-tint: #F2F2F2;
  --vg-deep: #000000;   /* 濃い国カラー（見出しの文字など） */
  --vg-mid:  #DDDEE0;   /* 中くらいの国カラー（サイドバー見出しの帯） */

  /* 以下は4サイト共通（変更不要） */
  --vg-text:  #1B1F24;
  --vg-muted: #555D68;
  --vg-line:  #E6E8EB;
  --vg-bg:    #F7F8F9;
}

/* ---------- 全体 ---------- */
body {
  color: var(--vg-text);
  background: #fff !important;
}
/* style.css は全要素に「ＭＳ Ｐゴシック」を指定しているため、全要素で上書き */
body, body * {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif !important;
}
/* style.css のリンク色（赤 #CC0000）を国カラーに */
a:link, a:visited { color: var(--vg-main); }
a:hover, a:active { color: var(--vg-main); opacity: 0.8; }

/* ---------- ヘッダー（PC） ---------- */
.headArea {
  background: #fff !important;
  border-top: 6px solid var(--vg-main);
  border-image: linear-gradient(to right, var(--vg-main) 0, var(--vg-main) 75%, var(--vg-sub) 75%, var(--vg-sub) 100%) 1;
  border-bottom: 1px solid var(--vg-line);
}
.headArea { padding-bottom: 0 !important; }
.headInner1, .headInner2 { background-image: none !important; background-color: #fff !important; }
.headInner1 { border-bottom: 0 !important; }   /* style.css の赤い下線を消す */
.headArea .seoTxt { color: var(--vg-muted) !important; }

/* 画像メニュー → 文字（sp.js が置き換え） */
.hdSubMnu ul.inlineList .vgImgTxt {
  font-size: 13px;
  font-weight: bold;
  color: var(--vg-text);
  white-space: nowrap;
}
.hdSubMnu ul.inlineList a { text-decoration: none !important; }
.hdSubMnu ul.inlineList a:hover .vgImgTxt { color: var(--vg-main); }

/* 電話番号画像 → 文字（sp.js が置き換え） */
.hdSubMnu address { font-style: normal; text-align: right; line-height: 1.4; }
.hdSubMnu address .vgTel { color: var(--vg-text) !important; text-decoration: none !important; font-size: 13px; }
.hdSubMnu address .vgTel strong { font-size: 22px; letter-spacing: 0.02em; }
.hdSubMnu address small { display: block; font-size: 12px; color: var(--vg-muted); }

/* ---------- グローバルメニュー（PCのみ。スマホは sp.css の開閉メニュー） ---------- */
@media screen and (min-width: 769px) {
  .globalMnu { background: var(--vg-main) none !important; border-radius: 8px; margin-top: 12px !important; }
  ul.globalMnuList > li { background-image: none !important; }
  ul.globalMnuList > li > a {
    display: block;
    background: transparent none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    line-height: 37px;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
  }
  ul.globalMnuList > li > a:hover,
  ul.globalMnuList > li > a.globalActiveLink { background: rgba(0, 0, 0, 0.18) !important; }
  ul.globalMnuList > li:first-child > a { border-radius: 8px 0 0 8px; }
  ul.globalMnuList > li:last-child > a { border-radius: 0 8px 8px 0; }

  /* プルダウン：白い不透明の枠にして、右側のバナーより手前に表示 */
  ul.globalMnuList { z-index: 1000 !important; }
  .globalMnuBox { z-index: 1001 !important; }
  /* 下層ページ（トップは上に開く大きなメニューのまま）
     メニューバーのすぐ下から透明な余白つきで開き、マウスを下に動かしても消えないようにする */
  body:not(#TopCnts) .globalMnuBox { top: 30px !important; padding-top: 10px !important; background: transparent !important; }
  .localMnu {
    background: #fff none !important;
    padding: 6px 0 !important;
    border: 1px solid var(--vg-line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
  }
  .localMnu ul { background: none !important; padding: 0 !important; }
  .localMnu ul li a { padding: 10px 16px !important; }
}

/* プルダウンの中身（赤い矢印・赤い帯を国カラーに） */
.localMnu ul li a span { background: none !important; padding-left: 0 !important; color: var(--vg-text) !important; }
.localMnu ul li a:link, .localMnu ul li a:visited { background: transparent none !important; border-bottom: 1px solid #EEF0F2; }
.localMnu ul li a:hover, .localMnu ul li a:active { background: var(--vg-main) none !important; }
.localMnu ul li a:hover span, .localMnu ul li a:active span { color: #fff !important; }

/* トップページの大きなメニュー（中のリンクの色を国カラーに） */
.globalMnuCntsInner li a span { background: none !important; padding-left: 0 !important; color: var(--vg-text) !important; }
.globalMnuCntsInner li a:link, .globalMnuCntsInner li a:visited { background: transparent none !important; border-bottom: 1px solid #EEF0F2; }
.globalMnuCntsInner li a:hover, .globalMnuCntsInner li a:active { background: var(--vg-main) none !important; }
.globalMnuCntsInner li a:hover span, .globalMnuCntsInner li a:active span { color: #fff !important; }

/* ---------- トップページ ---------- */
/* キャッチコピー（画像 → 文字。sp.js が置き換え） */
.vgTagline {
  display: block;
  font-size: 17px;
  font-weight: bold;
  color: var(--vg-text);
  letter-spacing: 0.02em;
}
/* スライド：枠の画像を外し、角を丸く */
#TopVisual { background: none !important; padding: 0 !important; margin-top: 14px !important; }
#slideshow .slides { border-radius: 14px; }

/* サービス紹介の3つの枠 */
#Top2Cnts .leadBnrInner {
  border: 1px solid var(--vg-line) !important;
  border-radius: 16px;
  padding: 14px 12px !important;
  background: #fff;
}
#Top2Cnts .leadBnrBox { margin-bottom: 14px !important; }
@media screen and (min-width: 769px) { #Top2Cnts .leadBnrBox .rightBox { width: 290px !important; } }
#Top2Cnts .leadBnrBox .leftBox img { margin: 0 !important; border-radius: 10px; }
#Top2Cnts .leadBnrBox dt { padding-top: 0 !important; }
#Top2Cnts .leadBnrBox dt .vgImgTxt { font-size: 16px; font-weight: bold; color: var(--vg-text); line-height: 1.5; }
#Top2Cnts .leadBnrBox dd { font-size: 13px !important; line-height: 1.75; color: #3B424C; }
#Top2Cnts .leadBnrBox ul.inlineList a { font-weight: bold; font-size: 13px; }

/* ニュース */
#TopMainCnts .leftInner { padding: 12px 0 0 !important; }
#viewgrant-news-list details { border: 1px solid var(--vg-line) !important; border-radius: 12px !important; padding: 12px 16px !important; }
#viewgrant-news-list summary { font-size: 14px; line-height: 1.6; color: var(--vg-text); }
#viewgrant-news-list summary .news-date { color: var(--vg-muted) !important; }
a.vgMoreLink {
  display: inline-block;
  margin-top: 4px;
  padding: 8px 18px;
  border: 1px solid var(--vg-main);
  border-radius: 999px;
  color: var(--vg-main) !important;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none !important;
}

/* トップの古いバナー類（募金・旧モバイルサイト・Skype・サイトシール・CO2マーク）を非表示 */
.dottedBox, #TopSubCnts > table, .rightArea p.lined { display: none !important; }

/* ---------- 本文エリア ---------- */
.mainArea, .mainInner { background-image: none !important; background-color: #fff !important; }
.leftArea { background-image: none !important; }
.leftInner { background: #fff none !important; padding: 0 0 15px !important; }   /* style.css の灰色背景を白に */

ul.breadCrumb { color: var(--vg-muted); font-size: 13px; }
ul.breadCrumb a { color: var(--vg-muted) !important; }

/* ページタイトル */
.leftArea h2.title {
  background: var(--vg-tint) none !important;
  height: auto !important;
  padding: 28px 24px !important;
  margin: 8px 0 12px !important;
  border: 0 !important;   /* style.css の赤い下線を消す */
  border-radius: 16px;
  text-indent: 0 !important;
  overflow: visible !important;
}
.leftArea h2.title span {
  display: block;
  background: none !important;
  padding: 0 !important;
  text-indent: 0 !important;
  font-size: 26px !important;
  line-height: 1.45;
  font-weight: bold;
  color: var(--vg-text) !important;
}

/* タイトル下のリード（見出し画像は非表示にし、文章だけ残す） */
dl.leadTitle { background: none !important; color: #3B424C !important; padding: 0 !important; margin: 0 0 20px !important; height: auto !important; }
dl.leadTitle dt { display: none !important; }
dl.leadTitle dd { background: none !important; padding: 0 4px 4px !important; font-size: 15px; line-height: 1.85; color: #3B424C; }

/* 目次（見出しが2つ以上あるページで sp.js が自動作成） */
.vgToc {
  background: var(--vg-bg);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 0 0 20px;
}
.vgToc p { margin: 0 0 6px; font-size: 13px; font-weight: bold; color: var(--vg-muted); }
.vgToc ul { list-style: none; margin: 0; padding: 0; }
.vgToc li { display: inline-block; margin: 2px 18px 2px 0; }
.vgToc a { color: var(--vg-main) !important; font-weight: bold; font-size: 14px; text-decoration: none !important; }

/* 内容の枠 */
.cntsBox, .cntsBoxInner { background: none !important; background-image: none !important; width: auto !important; height: auto !important; }
.cntsBox {
  border: 1px solid var(--vg-line);
  border-radius: 16px;
  padding: 4px 0 20px !important;
  margin: 0 0 24px !important;
}
.cntsBoxInner { padding: 0 !important; }

/* 中見出し */
h3.cntsTitle {
  background: none !important;
  margin: 0 24px 18px !important;
  padding: 18px 0 10px !important;
  border-bottom: 3px solid var(--vg-main);
  font-size: 21px !important;
  line-height: 1.5;
  color: var(--vg-text) !important;
  text-indent: 0 !important;
  height: auto !important;
}

/* 本文 */
.cnts { width: auto !important; margin: 0 24px !important; font-size: 15px; line-height: 1.9; }
.cnts p { margin: 0 0 1em; padding-bottom: 0 !important; }
/* style.css は p・li などを92%に縮めるため、本文は15pxにそろえる */
.cnts p, .cnts li, .cnts dt, .cnts dd { font-size: 100%; }
.cnts a { color: var(--vg-main); text-decoration: underline; }

/* 小見出し（「参加条件」など、太字・色文字だけの段落を sp.js が判定） */
.cnts p.vgSub {
  margin: 28px 0 10px !important;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--vg-line);
  font-size: 17px;
  font-weight: bold;
}
.cnts p.vgSub font, .cnts p.vgSub b, .cnts p.vgSub strong { color: var(--vg-text) !important; }

/* 「・」の箇条書き（sp.js がリストに変換） */
.cnts ul.vgList {
  list-style: none;
  margin: 4px 0 20px;
  padding: 0;
  border: 1px solid var(--vg-line);
  border-radius: 14px;
  overflow: hidden;
}
.cnts ul.vgList li {
  position: relative;
  margin: 0;
  padding: 11px 16px 11px 42px;
  border-bottom: 1px solid #EEF0F2;
  background: none;
}
.cnts ul.vgList li:last-child { border-bottom: 0; }
.cnts ul.vgList li::before {          /* 通常：丸 */
  content: "";
  position: absolute;
  left: 20px;
  top: 23px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vg-main);
}
.cnts ul.vgList.vgCheck li::before {  /* 「条件」の直後：チェック */
  left: 18px;
  top: 19px;
  width: 11px;
  height: 6px;
  border-radius: 0;
  background: none;
  border-left: 2.5px solid var(--vg-main);
  border-bottom: 2.5px solid var(--vg-main);
  transform: rotate(-45deg);
}

/* お問い合わせボタン（画像 → 文字ボタン） */
.btnBox, .btnBox .btnBoxInner { background: none !important; height: auto !important; padding: 0 !important; text-align: center; }
a.vgBtnLink {
  display: inline-block;
  margin: 12px 0 4px;
  padding: 13px 32px;
  border-radius: 999px;
  background: var(--vg-main);
  color: #fff !important;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none !important;
}
a.vgBtnLink:hover { opacity: 0.85; }

/* 注意書きの枠 */
dl.noticeBox {
  background: var(--vg-tint) none !important;
  border: 0 !important;
  border-radius: 14px;
  padding: 16px 20px !important;
  margin: 16px 0 0 !important;
}
dl.noticeBox dt, dl.noticeBox dd { background: none !important; padding: 0 !important; }
dl.noticeBox dt { font-weight: bold; }
dl.noticeBox a { color: var(--vg-main) !important; }

/* ページトップへ戻る */
p.pageTop a { color: var(--vg-muted) !important; font-size: 13px; text-decoration: none !important; }

/* ---------- サイドバー ---------- */
.rightArea h3.title, #TopSubCnts h3.title, #TopMainCnts h3.title {
  background: var(--vg-mid) none !important;   /* 見出しの帯を中くらいの国カラーに */
  height: auto !important;
  margin: 20px 0 0 !important;
  padding: 12px 16px !important;
  border: 1px solid var(--vg-mid) !important;
  border-top: 3px solid var(--vg-main) !important;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  text-indent: 0 !important;
}
.rightArea h3.title span, #TopSubCnts h3.title span, #TopMainCnts h3.title span {
  display: block;
  background: none !important;
  padding: 0 !important;
  text-indent: 0 !important;
  font-size: 15px !important;
  font-weight: bold;
  color: var(--vg-deep) !important;
}
#TopMainCnts h3.title span { color: var(--vg-text) !important; }   /* トップのニュース見出しは下線型のまま */
.rightArea ul.mnuList, #TopSubCnts ul.mnuList {
  background: #fff none !important;
  border: 1px solid var(--vg-line);
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
.rightArea ul.mnuList li, #TopSubCnts ul.mnuList li { background: none !important; border-bottom: 1px solid #EEF0F2; margin: 0 !important; padding: 0 !important; }
.rightArea ul.mnuList li:last-child, #TopSubCnts ul.mnuList li:last-child { border-bottom: 0; }
.rightArea ul.mnuList li a, #TopSubCnts ul.mnuList li a {
  display: block;
  background: none !important;
  padding: 10px 14px !important;
  border-left: 4px solid transparent;
  color: var(--vg-text) !important;
  font-size: 14px;
  text-decoration: none !important;
}
.rightArea ul.mnuList li a:link, .rightArea ul.mnuList li a:visited, #TopSubCnts ul.mnuList li a:link, #TopSubCnts ul.mnuList li a:visited { border-bottom: 0 !important; }
.rightArea ul.mnuList li a:hover, #TopSubCnts ul.mnuList li a:hover { background: var(--vg-bg) !important; }
.rightArea ul.mnuList li a span, #TopSubCnts ul.mnuList li a span { background: none !important; padding: 0 !important; color: inherit !important; }
.rightArea ul.mnuList li a.vgCurrent {          /* 表示中のページ（sp.js が判定） */
  background: var(--vg-tint) !important;
  border-left-color: var(--vg-main);
  color: var(--vg-main) !important;
  font-weight: bold;
}

/* InstagramとXのリンク（ロゴ付き） */
.rightArea ul.mnuList li a.vgSns span, #TopSubCnts ul.mnuList li a.vgSns span { display: flex !important; align-items: center; gap: 10px; }
.rightArea ul.mnuList li a.vgSns .vgSnsIco, #TopSubCnts ul.mnuList li a.vgSns .vgSnsIco { flex: none; display: block; }

/* 古くなったバナー（旧モバイルサイト案内）を非表示。Twitterは sp.js で非表示 */
.rightArea .dottedBox { display: none !important; }

/* ---------- フッター ---------- */
.footArea { background: #15181C none !important; color: #B9BFC7; }
.footArea .footInner { background: none !important; }
.footArea dl, .footArea dt, .footArea dd, .footArea ul, .footArea li { background-image: none !important; }
.footArea a { color: #B9BFC7 !important; text-decoration: none !important; }
.footArea a:hover { color: #fff !important; }
.footArea dl.ftMnuBox dt .vgImgTxt { color: #fff; font-weight: bold; font-size: 14px; }
.footArea .vgLogoTxt { color: #fff; font-weight: bold; font-size: 20px; }
.footArea .ftSiteInfo dd { color: #B9BFC7; }
.footArea .copyright { background: #0F1215 none !important; color: #8A929C; font-size: 12px; padding: 14px 0; }

/* ---------- スマホ（sp.css の色を国カラーに） ---------- */
@media screen and (max-width: 768px) {
  .spTel { background: var(--vg-main) !important; }
  /* メニューボタン：白地に国カラーの枠と文字（電話ボタンと区別しやすく） */
  .spMenuBtn {
    background: #fff !important;
    color: var(--vg-main) !important;
    border: 2px solid var(--vg-main) !important;
  }

  .leftArea h2.title { padding: 20px 16px !important; border-radius: 12px; }
  .leftArea h2.title span { font-size: 21px !important; }
  .cntsBox { border-radius: 12px; }
  h3.cntsTitle { margin: 0 14px 14px !important; font-size: 18px !important; }
  .cnts { margin: 0 14px !important; }
  .rightArea { text-align: left !important; }
}

/* トップページのニュース見出し（枠ではなく下線の見出しに） */
#TopMainCnts h3.title {
  background: none !important;
  border: 0 !important;
  border-bottom: 3px solid var(--vg-main) !important;
  border-radius: 0 !important;
  padding: 0 0 8px !important;
  margin: 10px 0 0 !important;
}
#TopMainCnts h3.title span { font-size: 18px !important; }

/* ---------- 「渡航目的別ビザ情報」などの一覧（indexBox） ---------- */
.indexBox { margin-top: 10px !important; }
.indexBox h3.vgIndexTitle {
  margin: 0 0 12px;
  padding: 12px 16px;
  background: var(--vg-mid);
  border-top: 3px solid var(--vg-main);
  border-radius: 14px;
  color: var(--vg-deep);
  font-size: 16px;
  font-weight: bold;
}
.indexBox ul.mnuList {
  background: #fff none !important;
  border: 1px solid var(--vg-line);
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
.indexBox ul.mnuList li { background: none !important; border-bottom: 1px solid #EEF0F2; margin: 0 !important; padding: 0 !important; }
.indexBox ul.mnuList li:last-child { border-bottom: 0; }
.indexBox ul.mnuList li a {
  display: block;
  background: none !important;
  padding: 11px 14px !important;
  border-bottom: 0 !important;
  color: var(--vg-text) !important;
  font-size: 14px;
  text-decoration: none !important;
}
.indexBox ul.mnuList li a:hover { background: var(--vg-bg) !important; }
.indexBox ul.mnuList li a span { background: none !important; padding: 0 !important; color: inherit !important; }

/* ---------- 表の見出し（赤い背景 → 国カラー。sp.js が判定） ---------- */
.mainArea .vgTh {
  background: var(--vg-main) none !important;
  color: #fff !important;
  border-color: var(--vg-main) !important;
}
.mainArea .vgTh * { color: #fff !important; }

/* ---------- 本文の電話番号（画像を文字に置き換えたもの） ---------- */
.vgTelBox {
  display: inline-block;
  margin: 10px auto 6px;
  padding: 14px 28px;
  border: 2px solid var(--vg-main);
  border-radius: 10px;
  background: var(--vg-tint);
  text-align: center;
  line-height: 1.5;
}
.vgTelBox span { display: block; font-size: 13px; color: var(--vg-muted); }
.vgTelBox a { display: block; font-size: 28px; font-weight: 700; color: var(--vg-deep) !important; text-decoration: none !important; letter-spacing: .03em; }
.vgTelBox small { display: block; font-size: 13px; color: var(--vg-text); }