/* ------teruko--------------------------------------------------------- */
/* ------ common ------------------------------------------------------- */

* {
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, Arial, sans-serif;
  line-height: 160%;
  word-wrap: break-word; /* 長い単語やURLも折り返す */
  overflow-wrap: break-word; /* 長い単語やURLを適切な場所で折り返す */
  max-width: 100%;
  }

html { 
  background-color: #fff;
  }

h1,h2,h3,h4,h5,h6 {
  margin: 0px;
  padding: 0px;
  }

a { text-decoration: none; /* リンクすべて*/
  } 

/* a { color: #333; } /* リンクすべて*/
/* a:visited { color: #333; } もう行った */
/* a:hover { color: red; } マウスが上にある */
/* a:active { color: red; } マウスを離していない */
/* a:link { color: #333; } これから行く、未訪問 */

p {
/*  margin: 0; もろ影響するし、消しちゃダメ */ 
padding: .5em; /*  これは関係ない */ 
  }

ul {
  margin: 0px;
  padding: 0px;
  list-style:none;
  }

ul li{
  list-style-type: none;
  }

a ul { 
  list-style:none;
  padding: 0;
  }

ol li {
  list-style-type: decimal;
  }

ol li ul li {
  list-style-type: none;
  }

img {
  border: 0;
  }

hr {
  margin: 2em 0;
  }

.black { color: #000000; }
.gray { color: #808080; }
.silver { color: #c0c0c0; }
.white { color: #ffffff; }
.maroon { color: #800000; }
.red { color: #ff0000; }
.purpl { color: #800080; }
.fuchsia { color: #ff00ff; }
.green { color: #008000; }
.lime { color: #00ff00; }
.olive { color: #808000; }
.yellow { color: #ffff00; }
.navy { color: #000080; }
.blue { color: #0000ff; }
.teal { color: #008080; }
.aqua { color: #00ffff; }

/* ------ body --------------------------------------------------------- */

body {
  margin: 0;
  padding: 0px;
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, Arial, sans-serif;
  color: #333;
  background: #fff;
  }

/* ------ header ------------------------------------------------------- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  padding: 6px 0 4px; /* ヘッダーの余白を指定 */
  text-align: center; /* ヘッダー内のテキストを中央揃えにする */
  border-bottom: none;
  border-bottom: none;
  background-color: #fff;
  /* box-shadow: 3px 3px 7px rgba(0, 0, 0, .1); */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .1); /* 影をつける */
  }

/* ----- footer -------------------------------------------------------- */

.footer {
  width: 100%;
  padding: 1em 0;
  text-align: center;
  margin: 0 auto;
  background-color: #fff;
  }

/* ----- table ----------------------------------------------------------*/

table {
	/*　五要穴で必要になった　*/
	border-collapse: collapse;
	width: 100%;
	margin: 30px 0 50px;
	}

th, td {
	border-bottom: 1px solid #000;
	padding: 8px;
	text-align: center;
	}

th {
	background-color: #f2f2f2;
	}

/* ----- レスポンシブデザイン用 ---------------------------------------------- */
/* ----- body,header,footerのみ ----------------------------------------- */

@media only screen and (max-width: 800px) {
/* 800pxより小さい画面用のスタイル */

  *{
    font-size: 14px;
    }

  }

@media only screen and (max-width: 768px) {
/* 768pxより小さい画面用のスタイル */

  *{
    font-size: 14px;
    }

  body {
    font-size: 14px;
    }

  }

@media (max-width: 600px) {
/* 600pxより小さい：スマホ用の1カラムレイアウト */

  * {
    margin: auto;
    }

  .header {
    display: flex; 
    align-items: center;
    justify-content: center;
    height: 55px;
    }

  .header img {
    width:80%;
    }

}

@media only screen and (max-width: 480px) {
  /* 非常に小さい画面用のスタイル */

  *{
    font-size: 16px; /* 大きいフォントサイズ */
    }

  body {
    font-size: 16px; /* 大きなフォントサイズ */
    }

  }

/* --------------------------------------------------------------------- */