.gyo{
	font-size:12px;
	text-decoration:none;
	line-height:10px;
}
body {
  margin: 0;
  padding: 0;
}


#HeaderArea { 
  width: 100%;
  height: 80px;
	position:relative;
	text-align: center;
	/*font-size: 100%;*/
	font-size: 62.5%;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: rgb(255, 255, 255);
	background-color: rgb(255, 255, 255);
	margin: 0;
}

#menu{
	width:100%;
	max-width:1920px;
	height:80px;
	margin-right:auto;
	margin-left:auto;
}

#menu a{
  text-decoration:none;
  position:absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.button-stay{
  width:calc(100%/5);
  height:80px;
  float:left;
  text-align:center;
  position:relative;
  box-sizing:border-box;
  bottom:0px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-family:arial;
  font-size:30px;
  font-size: calc(16 * ((100vw - 770px) / 1150) + 16px);
  color:#fff;
  text-decoration:none;
  line-height:50px;
  overflow:hidden;
  margin:0 0 20px 0;
}

.button-still{
  width:calc(100%/5);
  height:80px;
  float:left;
  text-align:center;
  position:relative;
  box-sizing:border-box;
  bottom:0px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-family:arial;
  font-size:30px;
  font-size: calc(16 * ((100vw - 770px) / 1150) + 16px);
  color:#fff;
  text-decoration:none;
  line-height:50px;
  overflow:hidden;
  margin:0 0 20px 0;
  pointer-events: none;
}

.button-still::before {
  content: '';
  /* ↓暗いオーバーレイを半透明で配置 */
  background-color: rgba(0, 0, 0, 0.4);
  /* ↓全体を覆うように配置 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.button-stay a{
  padding: 7px 0;
  color: black;
}
.button-still a{
  padding: 7px 0;
  color: black;
	pointer-events: none;
}

#button-on-1{
  background-image: url("../img/01_top/tab_01_on.png");
}
#button-on-2{
  background-image: url("../img/01_top/tab_02_on.png");
}
#button-on-3{
  background-image: url("../img/01_top/tab_03_on.png");
}
#button-on-4{
  background-image: url("../img/01_top/tab_04_on.png");
}
#button-on-5{
  background-image: url("../img/01_top/tab_05_on.png");
}

#button-1:hover{
  background-image: url("../img/01_top/tab_01_on.png");
}
#button-2:hover{
  background-image: url("../img/01_top/tab_02_on.png");
}
#button-3:hover{
  background-image: url("../img/01_top/tab_03_on.png");
}
#button-4:hover{
  background-image: url("../img/01_top/tab_04_on.png");
}
#button-5:hover{
  background-image: url("../img/01_top/tab_05_on.png");
}

#button-1{
  background-image: url("../img/01_top/tab_01_off.png");
}
#button-2{
  background-image: url("../img/01_top/tab_02_off.png");
}
#button-3{
  background-image: url("../img/01_top/tab_03_off.png");
}
#button-4{
  background-image: url("../img/01_top/tab_04_off.png");
}
#button-5{
  background-image: url("../img/01_top/tab_05_off.png");
}

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

/*html { font-size: 62.5%; }*/

/*html { font-size: calc(6 * ((100vw - 320px) / 1600) + 12px); }*/
/*                calc(フォントサイズの変化量 * ((100vw - 最小画面幅) / 最大画面幅) + 最小フォントサイズ) 

・最小画面幅
フォントサイズを変化させたい最小のウィンドウサイズを指定します。
基本、最小はスマホだと思うので、320px安定だと思います
・最大画面幅
フォントサイズを変化させたい最大のウィンドウサイズを指定します。
ただしココでの指定は、想定する「最大ウィンドウサイズ – 最小画面幅」を記述します。
よって、上記サンプルだと、1920pxを指定したいので、「1920px – 320px = 1600」

*/