/* main.css  改良済み完全版 */

/* --------------------------------------
   既存コード
-------------------------------------- */
body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

div#link {
    width: 700px;
    height: 20px;
    margin-top: 0px;
    font-size: 9pt;
    line-height: 130%;
    text-align: center;
}

div#footer {
    width: 700px;
    height: 20px;
    background-color: #000000;
    color: #ffffff;
    margin-top: 6px;
    text-align: center;
    font-size: 10pt;
    line-height: 130%;
}

div.menu_b {
    border: solid 1px #000000;
    width: 500px;
    margin-top: 5px;
    margin-bottom: 4px;
    margin-left: 2px;
}

a#sub_menu11, a#sub_menu12, a#sub_menu13, a#sub_menu14,
a#sub_menu15, a#sub_menu16, a#sub_menu17, a#sub_menu18,
a#sub_menu19, a#sub_menu20 {
    display: block;
    width: 340px;
    height: 40px;
    border: solid 1px #929292;
    float: left;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 2px;
}

a.menu_mini {
    font-size: 9pt;
    color: #000000;
    text-decoration: none;
}

/* --------------------------------------
   ここから追加（レスポンシブ対応＋中央寄せ）
-------------------------------------- */

/* 全体のボックス計算を統一 */
*, *:before, *:after {
  box-sizing: border-box;
}

/* コンテナ（PCでは700px固定＋中央寄せ、スマホでは縮小） */
div.container {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;     /* PC時に中央寄せ */
}

/* 各テーブルも可変に対応 */
table.responsive {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;     /* PC時に中央寄せ */
}

/* 画像は比率を保って縮小 */
img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

/* リンク・フッターを可変に */
div#link {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

div#footer {
  width: 100%;
  max-width: 700px;
  margin: 6px auto 0;
}

/* メニュー枠（500px幅）も可変に */
div.menu_b {
  width: 100%;
  max-width: 500px;
  margin: 5px auto 4px;
}

/* サブメニュー二列対応（スマホでは幅50%に自動調整） */
a#sub_menu11, a#sub_menu12, a#sub_menu13, a#sub_menu14,
a#sub_menu15, a#sub_menu16, a#sub_menu17, a#sub_menu18,
a#sub_menu19, a#sub_menu20 {
  display: inline-block;
  width: calc(50% - 8px);
  max-width: 340px;
  height: auto;
  border: solid 1px #929292;
  margin: 2px;
  vertical-align: top;
  float: none; /* floatを解除してインラインブロックで並べる */
}

/* テーブルセルの文字折返し */
table.responsive td {
  word-break: break-word;
}

/* PC（幅701px以上）では元のピクセル幅を優先 */
@media screen and (min-width: 701px) {
  table.responsive { width: 700px; }
  div#link, div#footer { width: 700px; }
  img[width="700"] { width: 700px; height: auto; }
  img[width="500"] { width: 500px; height: auto; }
  img[width="340"] { width: 340px; height: auto; }
  img[width="180"] { width: 180px; height: auto; }
  img[width="150"] { width: 150px; height: auto; }
}

/* スマホ（幅400px以下）でフォントを微調整 */
@media screen and (max-width: 400px) {
  body { font-size: 13px; }
  div#footer { font-size: 9pt; }
}