@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W0);
  font-weight: 100;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W1);
  font-weight: 200;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W2);
  font-weight: 300;
}
@font-face {
  font-family: "Hiragino Sanso";
  src: local(HiraginoSans-W3);
  font-weight: 400;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W4);
  font-weight: 500;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W5);
  font-weight: 600;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W6);
  font-weight: 700;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W7);
  font-weight: 800;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W8);
  font-weight: 900;
}
@font-face {
  font-family: "Hiragino Sans W9";
  src: local(HiraginoSans-W9);
  font-weight: 900;
}

body {
  font-family: 'Hiragino Sans', sans-serif;
}

#GOLTEN.container {
  box-sizing: border-box;
  margin: 0 auto;
  border: 2px solid #209A79;
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
li { list-style: none; }
li { display: block; }

h1, h2, h3, h4, h5, h6 {
  font-size: 1em;
  font-weight: normal;
}
a {
  text-decoration: none;
}
img { vertical-align: top; }

td, th {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

table {
  text-align: center;
  border-spacing: 0;
}


/**
 * ==============================
 * ICON
 * ==============================
 */
.icon {
  border: 1px solid #C9C9C9;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  padding: 2px;
  position: relative;
}

.icon:before {
  content: '';
  display: block;
  background-size: cover;
}
.icon:after {
  content: '';
  display: block;
  background-size: cover;
}

/* icon_X-1 */
.icon_1-1:before,
.icon_2-1:before,
.icon_3-1:before, 
.icon_4-1:before {
  width: 100%; height: 100%;
}
.icon_1-1:after,
.icon_2-1:after,
.icon_3-1:after,
.icon_4-1:after {
  content: none;
}

/* icon_X-2, icon_X-3, icon_X-4 */
.icon_1-2:before,
.icon_1-3:before,
.icon_1-4:before,
.icon_2-2:before,
.icon_2-3:before,
.icon_2-4:before,
.icon_3-2:before,
.icon_3-3:before,
.icon_3-4:before,
.icon_4-2:before,
.icon_4-3:before,
.icon_4-4:before {
  position: absolute;
  width: 22px; height: 22px;
  left: 0px; top: 0px;
}
.icon_2-2:before,
.icon_2-3:before,
.icon_2-4:before {
  left: 1px;
}

.icon_1-2:after,
.icon_1-3:after,
.icon_1-4:after,
.icon_2-2:after,
.icon_2-3:after,
.icon_2-4:after,
.icon_3-2:after,
.icon_3-3:after,
.icon_3-4:after,
.icon_4-2:after,
.icon_4-3:after,
.icon_4-4:after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  right: -1px; bottom: -1px;
  border: 1px solid #C9C9C9;
  background-color: #fff;
}

/* icon_X-5, icon_X-6, icon_X-7 */
.icon_1-5:before,
.icon_1-6:before,
.icon_1-7:before,
.icon_2-5:before,
.icon_2-6:before,
.icon_2-7:before,
.icon_3-5:before,
.icon_3-6:before,
.icon_3-7:before,
.icon_4-5:before,
.icon_4-6:before,
.icon_4-7:before {
  position: absolute;
  width: 17px; height: 17px;
  left: 1px; top: 0px;
}

.icon_1-5:after,
.icon_1-6:after,
.icon_1-7:after,
.icon_2-5:after,
.icon_2-6:after,
.icon_2-7:after,
.icon_3-5:after,
.icon_3-6:after,
.icon_3-7:after,
.icon_4-5:after,
.icon_4-6:after,
.icon_4-7:after {
  content: '';
  position: absolute;
  width: 17px; height: 17px;
  right: 1px; bottom: 0px;
}

.icon_1-5,
.icon_1-6,
.icon_1-7,
.icon_2-5,
.icon_2-6,
.icon_2-7,
.icon_3-5,
.icon_3-6,
.icon_3-7,
.icon_4-5,
.icon_4-6,
.icon_4-7 {
  background: linear-gradient(-45deg, #fff, #fff 49%, #c9c9c9 49%, #c9c9c9 51%, #fff 51%, #fff);
}
/* icon images */

.icon_1-1:before,
.icon_1-2:before,
.icon_1-3:before,
.icon_1-4:before,
.icon_1-5:before,
.icon_1-6:before,
.icon_1-7:before,
.icon_2-2:after,
.icon_3-2:after,
.icon_4-2:after,
.icon_2-5:after,
.icon_3-5:after,
.icon_4-5:after {
  background-image: url(https://www.golfweather.info/widget/icons/wheather/hare.png);
}


.icon_2-1:before,
.icon_2-2:before,
.icon_2-3:before,
.icon_2-4:before,
.icon_2-5:before,
.icon_2-6:before,
.icon_2-7:before,
.icon_1-2:after,
.icon_3-3:after,
.icon_4-3:after,
.icon_1-5:after,
.icon_3-6:after,
.icon_4-6:after {
  background-image: url(https://www.golfweather.info/widget/icons/wheather/kumori.png);
}

.icon_3-1:before,
.icon_3-2:before,
.icon_3-3:before,
.icon_3-4:before,
.icon_3-5:before,
.icon_3-6:before,
.icon_3-7:before,
.icon_1-3:after,
.icon_2-3:after,
.icon_4-4:after,
.icon_1-6:after,
.icon_2-6:after,
.icon_4-7:after {
  background-image: url(https://www.golfweather.info/widget/icons/wheather/ame.png);
}

.icon_4-1:before,
.icon_4-2:before,
.icon_4-3:before,
.icon_4-4:before,
.icon_4-5:before,
.icon_4-6:before,
.icon_4-7:before,
.icon_1-4:after,
.icon_2-4:after,
.icon_3-4:after,
.icon_1-7:after,
.icon_2-7:after,
.icon_3-7:after {
  background-image: url(https://www.golfweather.info/widget/icons/wheather/yuki.png);
}

/**
 * ==============================
 * DIRECTION
 * ==============================
 */
.direction_s   img { transform: rotate(0deg); }
.direction_ssw img { transform: rotate(22.5deg); }
.direction_sw  img { transform: rotate(45deg); }
.direction_wsw img { transform: rotate(67.5deg); }
.direction_w   img { transform: rotate(90deg); }
.direction_wnw img { transform: rotate(112.5deg); }
.direction_nw  img { transform: rotate(135deg); }
.direction_nnw img { transform: rotate(157.5deg); }
.direction_n   img { transform: rotate(180deg); }
.direction_nne img { transform: rotate(202.5deg); }
.direction_ne  img { transform: rotate(225deg); }
.direction_ene img { transform: rotate(247.5deg); }
.direction_e   img { transform: rotate(270deg); }
.direction_ese img { transform: rotate(292.5deg); }
.direction_se  img { transform: rotate(315deg); }
.direction_sse img { transform: rotate(337.5deg); }