@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;
  }
}