@charset "utf-8";
/* 
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
*/
html { -webkit-text-size-adjust: 100%;/* 2 */-ms-text-size-adjust: 100%;}
body { width:100%; overflow-x:hidden;}
html, body { width:100%; max-width:100%;}
* { font-family: "Open Sans", 'Noto Sans SC', sans-serif;}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
list-style:none;
vertical-align:middle;
background:transparent;
font-weight:normal;
letter-spacing:1px;
font-family: "Open Sans", 'Noto Sans SC', sans-serif;
font-weight: 300;
}
body { line-height:1; background: #ffffff;}
img {border-style: none;} 
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block;}
nav ul, ul, li { list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
mark {background-color:#ff9;color:#000; font-style:italic;font-weight:bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle; color:#833531;}

table{border: solid 1px #000;width: 100%;}
td{border: solid 1px #000;
padding: 5px;
}
th{border: solid 1px #000;
    color: #fff;
    background-color: #838383;

}




/* 全体的なフォントサイズの調整 */
body {
    font-size: 14px; /* 基本のフォントサイズを少し小さく */
    line-height: 1.6; /* 行の高さを調整して読みやすく */
  }
  
  /* スキル一覧のヘッダー */
  .skillnav h1 {
    font-size: 20px; /* H1はスマホで大きすぎないように */
    margin-bottom: 15px;
  }
  
  /* 職業名のH2 */
  .skillmain h2 {
    font-size: 18px; /* 職業名も調整 */
    margin-top: 25px;
    margin-bottom: 10px;
  }
  
  /* スキルタイプ (Active/Passive) のH5 */
  .skillmain h5 {
    font-size: 16px; /* スキルタイプ */
    margin-top: 20px;
    margin-bottom: 5px;
  }
  
  /* テーブルのスタイル調整 */
  .skillmain table {
    width: 100%; /* テーブルを横幅いっぱいに */
    border-collapse: collapse; /* セルの境界線をなくす */
    margin-bottom: 20px;
    display: block; /* スマホで横スクロール可能にするためにブロック要素に */
    overflow-x: auto; /* 必要に応じて横スクロールバーを表示 */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
  }
  
  .skillmain th,
  .skillmain td {
    padding: 8px 10px; /* セルのパディングを調整 */
    border: 1px solid #ddd; /* 境界線を追加 */
    vertical-align: top; /* 上揃え */
    font-size: 13px; /* テーブル内のフォントサイズ */
    white-space: normal; /* セル内のテキストは折り返す */
  }
  
  .skillmain th {
    background-color: #000000; /* ヘッダーの背景色 */
    text-align: left; /* 左揃え */
    width: auto; /* 幅指定を解除 */
  }
  
  /* 特定の要素の余白調整 */
  p {
    margin-bottom: 15px;
  }
  
  /* ハンバーガーメニューの調整（もし必要であれば） */
  .primnav {
    /* スマホでの表示方法に応じて調整 */
  }
  
  /* 赤文字と緑文字の視認性向上 */
  .red {
    color: #cc0000; /* よりはっきりとした赤色 */
    font-weight: bold; /* 強調 */
  }
  
  .green {
    color: #008000; /* よりはっきりとした緑色 */
    font-weight: bold; /* 強調 */
  }