@font-face {
    font-family: 'Open Sans';
    font-weight: normal;
    src: url('resource/font/OpenSans-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    font-weight: bold;
    src: url('resource/font/OpenSans-Bold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans JP';
    font-weight: normal;
    src: url('resource/font/NotoSansJP-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans JP';
    font-weight: bold;
    src: url('resource/font/NotoSansJP-Bold.ttf') format('truetype');
    font-display: swap;
}

body
{
    font-family: 'Open Sans', 'Noto Sans JP';
}

.HeaderBar {
    background-color: #606060;
    width: 100%;
    height: 70px;
    top: 0;
    left: 0;
    z-index: 10;
    position: fixed;
}

.HeaderButton a{
    position: relative;
    display: inline-block;
    width: auto;
    padding: 8px 30px;
    text-align: center;
    margin: 0px 5px;
    color: #000;
    font-size: 18px;
    line-height: 1.3em;
    text-decoration: none;
}

.HeaderButton a::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    border: 1px solid #000;
    background-color: white;
}

.HeaderButton a:hover::before{
    background-color: #ffe8e8;
}

main {
  margin-top: 70px;
}

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 50;
}
.dropdown-content a {
  color: black;
  white-space: nowrap;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
    background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}
    
/* ドロップダウンのコンテンツが表示されているときのドロップダウンボタンの背景色を変更 */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.中見出し {
    position: relative;
    font-size: 24px;
    font-weight: bold;
    margin-top: 35px;
    margin-bottom: 20px;
    padding-left: 15px;      /* 線の分、少し余白を広げる */
    color: #111111;
}

.中見出し::before {
  content: "";            /* 必須：中身は空っぽ */
  position: absolute;     /* 見出しに対して絶対配置 */
  left: 0;                /* 左端にピタッ */
  top: -15%;
  width: 4px;             /* 線の太さ */
  height: 140%;           /* 見出しの高さ100%分 */
  
  /* 上半分赤(0-50%)、下半分黒(50-100%)のグラデーション */
  background: #ff0000;
  
  border-radius: 2px;     /* お好みで角を少し丸くする */
}

.Header{display: flex; justify-content: space-between; width: 100%; height: 70px; top: 0; left: 0; z-index: 10; position: fixed;}

.HeaderLogo{scale: 1; max-width: 100%; transform-origin: left top; margin-left: 30px; margin-right: 30px; margin-top: 10px; margin-bottom: 10px;}

.SubHeader{color: red; font-weight: bold; font-size: 32px; margin-top: 12px; margin-bottom: 12px; margin-left: 30px; margin-right: 30px;}
.MainText{margin-top: 20px; margin-left: 30px; margin-right: 30px; margin-bottom: 20px; font-weight: 400; font-size: 20px;}

.Poster{max-width: 100%; max-height: auto; display: block; margin: auto; text-align: center; margin-top: 85px; margin-bottom: 15px;}

.VideoArea{margin-left: 30px; margin-right: 30px; margin-bottom: 15px; display: flex; overflow-x: auto;}
.VideoArea iframe{margin-right: 10px; width: 480px; height: 270px; min-width: 480px; max-width: 480px; border: none;}

.IntroImage{margin-right: 10px; width: 480px; height: 270px;}
.HorizonBox{margin-left: 30px; margin-right: 30px; margin-bottom: 15px; display: flex; overflow: auto;}

/* #region 未使用 */
.Tab{margin-left: 30px; margin-right: 100px; margin-bottom: 15px; max-width: 100%; display: flex; justify-content: flex-end;}
.PullDown{width: 120px; padding-top: 5px; padding-bottom: 5px; margin-left: 20px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 3px; font-size: 16px; text-align: center;}

.Table_Align_Left{text-align: start; line-height: 133%;}
.Table_Align_Center{text-align: center; line-height: 133%;}
.Table_Align_Right{text-align: end; line-height: 133%;}

.Table_Number_500{text-align: center; line-height: 133%; background-image: url('resource/image/result/GT500_number.png'); background-repeat: no-repeat; background-position: center; padding-top: 15px;}
.Table_Number_300{text-align: center; line-height: 133%; background-image: url('resource/image/result/GT300_number.png'); background-repeat: no-repeat; background-position: center; padding-top: 15px;}
.Table_Standing_500{text-align: center; line-height: 133%; background-image: url('resource/image/result/GT500_Ranking.png'); background-repeat: no-repeat; background-position: center; padding-top: 15px;}
.Table_Standing_300{text-align: center; line-height: 133%; background-image: url('resource/image/result/GT300_Ranking.png'); background-repeat: no-repeat; background-position: center; padding-top: 15px;}

.ClassTab{display: flex; max-width: 1200px; margin: auto; margin-bottom: 12px;}
.SessionTab{display: flex; max-width: 1200px; margin: auto;}

.SessionTabLink{position: relative; display: flex; justify-content: center; align-items: center; min-width: 220px; padding: 10px 20px; color: white; background-color: #555; text-decoration: none; 
    border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}

.SessionTabLink:not(:last-child)::before{content: ""; position: absolute; top: 0; right: -16px; width: 0; height: 0; border-style: solid; border-width: 18px 0px 18px 15px; border-color: transparent transparent transparent #ccc; z-index: 1;}
.SessionTabLink:not(:last-child)::after{content: ""; position: absolute; top: 0; right: -15px; width: 0; height: 0; border-style: solid; border-width: 18px 0px 18px 15px; border-color: transparent transparent transparent #555; z-index: 2;}

.SessionTabLink.Active500{background-color: #ef0000;}
.SessionTabLink.Active500::after{border-color: transparent transparent transparent #ef0000; z-index: 2;}
.SessionTabLink.Active300{background-color: #ef9f00;}
.SessionTabLink.Active300::after{border-color: transparent transparent transparent #ef9f00; z-index: 2;}

.SessionTabLink.Disable{background-color: #888; pointer-events: none; cursor: default; width: 100%;}

.ClassTabLink{position: relative; display: flex; width: 50%; color: white; background-color: #555; text-decoration: none; padding: 12px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.ClassTabLink.Disable500{border-left: 1px solid #ccc; align-items: start; justify-content: start;}
.ClassTabLink.Disable300{border-right: 1px solid #ccc; align-items: end; justify-content: end;}
.ClassTabLink.Active500{background-color: #ef0000; border-left: 1px solid #ccc; align-items: start; justify-content: start;}
.ClassTabLink.Active300{background-color: #ef9f00; border-right: 1px solid #ccc; align-items: end; justify-content: end;}

.ResultDiscription{max-width: 1200px; margin: auto;}

.ResultMain{display: flex; width: fit-content; margin: auto;}

.ResultSchedule{width: 250px; height: fit-content; margin-left: 50px; border: 1px solid #555; padding: 6px 12px 12px 12px;}

.ResultPullDown{position: relative;}

.ResultPullDown::before,
.ResultPullDown::after{position: absolute; content: ''; pointer-events: none;}
.ResultPullDown::before{display: inline-block; right: 0; width: 40px; height: 30px; background-color: #333;}
.ResultPullDown::after{position: absolute; right: 14px; top: 4px; width: 0; height: 0; border-style: solid; border-width: 12px 6px 10px 6px; border-color: #fff transparent transparent transparent;}
.ResultPullDown select{appearance: none; width: 250px; height: 30px; border: none; background-color: #cfcfcf; color: #000; cursor: pointer; font-size: 15px; padding-left: 10px;}
.ResultPullDown:focus-within::before{background-color: #ef0000;}
.ResultPullDown:hover::before{background-color: #ef0000;}
.ResultPullDown select:focus{outline: none;}
.ResultPullDown select option{background-color: #fff; color: #000;}

.ResultSchedule_Space{height: 25px;}
.ResultSchedule_Link_500, .ResultSchedule_Link_300{display: inline-block; width: 230px; height: 22px; padding: 5px 10px; color: white; background-color: #555; font-size: 15px; text-decoration: none; margin-bottom: 2px; line-height: 22px;}
.ResultSchedule_Link_500:hover{background-color: #ef0000;}
.ResultSchedule_Link_300:hover{background-color: #ef9f00;}
/* #endregion */