/* みちしるべ開発 — 共通スタイル。
   見た目(色・余白・字送り)は元のHTMLのインラインstyleがそのまま持っている。
   このファイルは「全ページ共通の土台」と「狭い画面での打ち消し」だけを持つ。 */

body{margin:0;font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',Meiryo,sans-serif;background:#FFFFFF;color:#222222;-webkit-text-size-adjust:100%}
a{color:#1A55B5}
a:hover{color:#0E3A82}

/* キーボード操作時の輪郭。元CSSには無かったので足す。 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #1A55B5;outline-offset:2px}

/* 横スクロールの発生源を塞ぐ。長いURL・メールアドレスが表で溢れるのを防ぐ。 */
*{box-sizing:border-box}
td,th{overflow-wrap:anywhere}

/* --- 狭い画面 (おおよそタブレット縦〜スマホ) --- */
@media (max-width: 760px){
  /* ヘッダー: 屋号とナビを縦に積む */
  header > div{
    flex-direction:column;align-items:flex-start!important;
    height:auto!important;padding-top:14px!important;padding-bottom:14px!important;gap:10px
  }
  nav{flex-wrap:wrap;gap:8px 16px!important}

  footer div[style*="gap: 20px"]{flex-wrap:wrap;gap:8px 16px!important}

  /* 2列グリッド(アプリ一覧など)を1列に */
  div[style*="repeat(2"]{grid-template-columns:1fr!important}

  /* 本文の上下余白を詰める */
  main{padding-top:28px!important;padding-bottom:56px!important;gap:32px!important}
  h1{font-size:21px!important}
  h2{font-size:17px!important}

  /* 表を「見出し／中身」の縦積みにする。
     横並びのままだと th を 96px まで削っても中身が2〜3文字で折り返して読めない。 */
  table,tbody,tr,th,td{display:block;width:100%!important}
  tr{margin-bottom:-1px}
  th[scope=row]{
    padding:8px 12px!important;border-bottom:0!important;
    font-size:13px;color:#333333;vertical-align:top!important
  }
  td{padding:10px 12px!important}
}

/* --- フォーム --- */
/* iOS Safari は 16px 未満の入力欄にフォーカスすると勝手に拡大する。
   狭い画面でだけ 16px に上げて拡大を止める(見た目の差は1px)。 */
@media (max-width: 760px){
  input,select,textarea{font-size:16px!important}
  form button{width:100%!important;min-width:0!important}
}
/* 元HTMLの送信ボタンは min-width に余白用の計算式が入っていて、
   広い画面でボタンが伸びてしまう。ここで正す。 */
form button[type=submit]{min-width:160px}

/* 入力欄はフォームの幅いっぱいに。max-width 付きの親に収める。 */
input[type=text],input[type=email],select,textarea{width:100%;max-width:100%}

/* --- フォーム送信の結果表示 --- */
.form-status{margin:0;padding:12px 14px;border-radius:4px;font-size:14px;line-height:1.7}
.form-status[data-state=ok]{background:#E8F3EA;border:1px solid #2E7D46;color:#1B5E2B}
.form-status[data-state=error]{background:#FDECEA;border:1px solid #B3261E;color:#8C1D18}
.form-status[hidden]{display:none}

/* 入力に不備がある欄の赤枠 */
.field-error{border-color:#B3261E!important}
.field-error-text{margin:0;font-size:13px;color:#B3261E}
.field-error-text[hidden]{display:none}

/* 蜜壺(スパム対策)。人には見えず、読み上げにも拾われない。 */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 印刷時はヘッダーのナビとフッターのリンクを落とす */
@media print{
  nav,footer a{display:none}
  body{color:#000}
}