div#sub_header_menu{
	margin:0 0 15px	
}
.sub_header_menu_icon {width:auto;margin:0 1px;background: #FFF;height:30px;box-sizing: border-box;}
.sub_header_menu_icon a{color: #000;padding-bottom:2px;border-bottom: 3px solid #999999;}

/* ------ 編集ＯＫ ------ */
/* ------ Instagram用アイコン ------ */
a:link.btn-insta {
  /*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 30px;/*高さ*/
  width: 150px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 20px;/*文字のサイズ*/
  line-height: 30px;/*高さと合わせる*/
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}
a:visited.btn-insta {
  color:#ffffff;
}

a:link.btn-insta:before {
  /*グラデーション②*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}
a:link.btn-insta span {
  /*テキスト*/
  display:inline-block;
  position: relative;
  transition: .5s
}

a:link.btn-insta:hover span {
  /*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

span#insta::before{
  display:inline-block;
  position: relative;
  transition: .5s;
  font-family: "Font Awesome 5 Brands"; 
  font-weight: 400;
  content: '\f16d';
  font-size: 20px;/*アイコンサイズ*/
  position: relative;
  top: 0px;/*アイコン位置の微調整*/
  right: 4px;/*アイコン位置の微調整*/
}

span#insta{
  font-family: "Robot";
  /*font-weight: bold;*/
}

a:link.btn {
  /*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 30px;/*高さ*/
  width: 150px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 20px;/*文字のサイズ*/
  line-height: 30px;/*高さと合わせる*/
  background: #17317a;
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}
a:visited.btn {
  color:#CCCCff;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  
  gap: 20px;
  padding: 0px;
  max-width: 900px;
  margin: auto;
  color:#fff;
  font-weight: normal;
}

.grid-item {
  background-color: #0000ffb4;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 10px;
  text-align: center;
  font-size: 1.5rem;
  color: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-item-gold {
  background: linear-gradient(45deg, #DAAF08 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #DAAF08 90% 100%);
  background-size: 800% 400%;
  animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 10px;
  text-align: center;
  font-size: 1.5rem;
  color: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  justify-content: center;
}
.grid-item-silver {
  background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
  background-size: 800% 400%;
  animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 10px;
  text-align: center;
  font-size: 1.5rem;
  color: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  justify-content: center;
}
.grid-item-bronze {
  background: linear-gradient(45deg, #a57e65 0%, #a57e65 45%, #f3cfb8 70%, #a57e65 85%, #a57e65 90% 100%);
  background-size: 800% 400%;
  animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 10px;
  text-align: center;
  font-size: 1.5rem;
  color: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  justify-content: center;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


.grid-item:hover {
  transform: translateY(5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.table-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow-x: auto; /* 画面が狭い時に横スクロールさせる */
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* テーブル全体のスタイル */
table {
    width: 100%;
    border-collapse: collapse; /* ボーダーを重ねる */
    text-align: left;
    
}

/* テーブルヘッダーとデータセルのスタイル */
th, td {
    padding: 5px 20px;

}

/* テーブルヘッダーのスタイル */
thead#main th {
    background-color: #14416d;
    color: #ffffff;
    font-weight: 900;
    font-size: 1em;
    text-transform: uppercase;
    
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    
}
thead td {
    border-radius: 0px;
}

/* テーブルボディの行のスタイル */
tbody tr {
    
    border-top-right-radius: solid 5px;
    
}
/* 一行おきに背景色を付ける（ゼブラストライピング） */
tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}