@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500|Roboto:300,400,500&display=swap&subset=japanese');

:root {
  /* ==========================================================================
     1. カラーパレット (Colors)
     ========================================================================== */
  /* ブランドカラー */
  --color-green: #01444C;       /* メインカラー */
  --color-sub-green: #0B6764;       /* サブカラー　（green) */
  --color-navy: #003C80;        /* サブカラー（Hover用など） */
  --color-red: #ff0000;         /* 警告・注記用 */

  /* テキストカラー */
  --color-text-main: #3e3d35;   /* 基本文字色 */
  --color-text-dark: #2d2d2d;   /* 濃い文字色 */
  --color-text-light: #7C766E;  /* 薄い文字色（パンくずなど） */
  --color-warm-white: #F8F8F8;
  --color-white: #FFFFFF;

  /* 背景・境界線用グレー */
  --color-bg-light: #FBFAF8;    /* テーブル偶数行・パンくず背景 */
  --color-bg-header: #DDDBD5;   /* 非アクティブタブ*/
  --color-line-black: #3e3d35;   /* 境界線 ブラック*/
  --color-line-gray: #DDDBD5;   /* 境界線 グレー*/
  --color-line-light-gray: #F5F2ED;   /* 境界線 ライトグレー*/
  --color-bg-sub: #F5F2ED;      /* サブメニュー背景 */
  --color-light-green: #169C98;       /* ボタンホバー */
	
  /* テーブルカラー */
  --color-table-header: #01444C;    /* テーブルヘッダー */
  --color-table-sub-header: #D6D6D6;   /* サブヘッダー */
  --color-table-data-odd: #F5F2ED;      /* データ奇数行 */
  --color-table-data-even: #FBFAF8;       /* データ偶数行 */
  --color-table-data-total: #D1FAF9;       /* データホバー */

  /* ==========================================================================
     2. 余白 (Typography & Spacing)
     ========================================================================== */
  /* フォントサイズ */
  --font-size-base: 20px;
  --font-size-sp: 14px;
	
  /* フォントウェイト */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;	
	
  /* 余白の基準値（1em = 20px をベースに階層化） */
  --space-none: 0;
  --space-1em: 1em;
  --space-2em: 2em;
  --space-3em: 3em;
  --space-4em: 4em;
	
  /* テーブル用などの固定余白 */
  --space-padding-table: 10px 15px;
  --border-table-white: 5px solid var(--color-white);
  --border-li-green: 1px solid var(--color-green);
}

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, a,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, main, 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;
    font-size:100%;
    font-weight: var(--font-weight-light);
    vertical-align:baseline;
    background:transparent;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,main,menu,nav,section { 
    display:block;
}

ol, ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

ins {
    background-color:#ccc;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ccc;
    color:#000; 
    font-style:italic;
    font-weight:var(--font-weight-medium);
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
    background: #FFF;
    font-family:'Roboto','Noto Sans JP', "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    color: var(--color-text-main);
	font-size: var(--font-size-base);
    line-height:1;
}

a, a:visited {
	color:var(--color-text-main);
	text-decoration: none;
}

a:hover {
	opacity: 0.6;
}