/** -------------------------------------------------- フォント設定 -------------------------------------------------- */
@font-face {
    font-family: 'NotoSansJP-Regular';
    src: url(../font/NotoSansJP/NotoSansJP-Regular.otf) format('opentype');
}
@font-face {
    font-family: 'NotoSansJP-Medium';
    src: url(../font/NotoSansJP/NotoSansJP-Medium.otf) format('opentype');
}
@font-face {
    font-family: 'NotoSansJP-Bold';
    src: url(../font/NotoSansJP/NotoSansJP-Bold.otf) format('opentype');
}
@font-face {
    font-family: 'D-DINCondensed';
    src: url(../font/D-DINCondensed/D-DINCondensed.ttf) format('opentype');
}
@font-face {
    font-family: 'D-DINCondensed-Bold';
    src: url(../font/D-DINCondensed/D-DINCondensed-Bold.ttf) format('opentype');
}


/** -------------------------------------------------- PC用・ディスプレイ幅1124px以上 -------------------------------------------------- */
body {
    width: 100%;
    height: 100vh;
    margin: 0;
    background-color: #CFCFCF;
    font-family: 'NotoSansJP-Regular';
    color: #000;
}
body > div {
    width: 100%;
    height: 100%;
    background-color: transparent;
}

div {
    height: auto;
    background-color: #FFF;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
label {
    display: inline-block;
}

a {
    text-decoration:none;
}

/* HOMEゲームカラー設定 */
.for_home_game {
    background-color: #000;
    color: #FFF;
}
/* AWAYゲームカラー設定 */
.for_away_game {
    background-color: #f2f2f2;
    color: #000;
}

/* 土曜日カラー設定 */
.for_saturday {
    color: #5984FB;
}
/* 日曜日および祝日カラー設定 */
.for_sunday, .for_holiday {
    color: #EB5A4B;
}

/* コンテンツ下地 */
div.groundwork {
    z-index: 3;
    margin: 0 auto;
    width: 1320px;
    height: auto;
}


/** ------------------------- トップバー、ここから ------------------------- */
div.top_bar {
    z-index: 2;
    height: 60px;
    margin: 0;
    padding: 30px 50px;
    background-color: #FFD400;
    display: flex;
    justify-content: space-between;
}
div.top_bar div {
    background-color: transparent;
}

/** ---------- タイトル ---------- */
.title {
    display: flex;
    align-items: center;
}
.title p {
    font-family: 'NotoSansJP-Regular';
    font-size: 32px;
    margin: auto;
}

/** ---------- シーズン選択 ---------- */
div.container_season {
    z-index: 100;
    width: 290px;
    font-family: 'NotoSansJP-Medium';
    font-size: 24px;
}

div.season_dropdown > div {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0 30px;
    background-color: white;
    border: #000 solid 1px;
}
p.selected_season {
    margin: 0;
}
p.selected_season::before {
    content: attr(season-selected);
}
div.img_arrow_for_select {
    width: 24px;
    height: 12px;
    background-image: url(../img/arrow_season.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
}

li.season_item {
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #FFF;
    border: #000 solid 1px;
    border-top: none;
}
li.season_item:hover {
    background-color: #000;
    color: #FFF;
}
li.season_item label {
    margin-left: 30px;
}

/** ------------------------- トップバー、ここまで ------------------------- */


/** ------------------------- 試合スケジュール、ここから ------------------------- */
/* 試合コンテンツ下地 */
div.groundwork_game_schedule_info {
    z-index: 1;
    height: auto;
}
/* 試合コンテンツ */
div.container_game_schedule_info {
    height: 100%;
    width: 1024px;
    margin: 0 auto;
}


/** ---------- 試合情報チェックボックス、ここから ---------- */
div.container_game_type {
    height: auto;
    margin: 50px auto 0px;
}
div.container_game_type form {
    text-align: center;
}
div.container_game_type label {
    height: 30px;
    width: auto;
    font-size: 18px;
    font-family: 'NotoSansJP-Medium';
    color: #12315A;
    margin: 0 15px 30px;
}
input.game_type_toggle {
    appearance: none;
    height: 30px;
    width: 30px;
    border: 2px solid #12315A;
    background-color: #FFF;
    margin:0 10px 0 0;
    vertical-align: middle;
}
input.game_type_toggle:checked {
    background-color: #FFD400;
    background-image: url(../img/check.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
/** ----------試合情報チェックボックス、ここまで ---------- */


/** ---------- 今後／過去の試合タブ、ここから ---------- */
div.tab {
    height: 50px;
    margin: 20px auto 0px;
    display: flex;
    justify-content: center;
}
/* div.tab input {
    appearance: none;
}
div.tab label {
    width: 300px;
    height: 50px;
    font-size: 24px;
    font-family: 'NotoSansJP-Medium';
    border: solid 2px #12315a;
    color: #12315A;
    background-color: #FFF;
}
div.tab label input:checked {
    color: #fff;
    background-color: #12315a;
} */

button.switch_category {
    width: 300px;
    height: 100%;
    font-size: 24px;
    font-family: 'NotoSansJP-Medium';
    border: solid 2px #12315a;
    color: #12315A;
    background-color: #FFF;
}
button.switch_category.active {
    color: #fff;
    background-color: #12315a;
}
/** ---------- 今後／過去の試合タブ、ここまで ---------- */


/** ---------- 試合スケジュールリスト、ここから ---------- */
div.game_schedule {
    height: auto;
    margin: 50px auto 100px;
    /* position: relative; */
}

div.before_game_card {
    height: auto;
    width: 100%;
    border: solid #000 2px;
    box-shadow: 5px 5px #000;
    margin: 0 0 30px;
}


/** ---------- 今後試合リスト、ここから ---------- */
div.container_future_schedule {
    /* position: absolute; */
    height: auto;
    width: 100%;
}
div.no_game_card {
    height: 244px;
    width: 100%;
    border: solid #000 2px;
    box-shadow: 5px 5px #000;
    margin: 0 0 30px;
}
div.no_game_card p {
    font-family: 'NotoSansJP-Regular';
    font-size: 20px;
    text-align: center;
    margin: auto;
    line-height: 245px;
}
/* 試合が開催されていない場合の表記 */
div.before_game div.no_game_card p::before {
    content: attr(data-before-game);
}
/* 条件に合致した試合がない場合の表記 */
div.no_game_card p::before {
    content: attr(data-no-game);
}
/* リストの中に配置する空の試合カード */
.no_game_card_in_list {
    display: none;
}

/** ----- 今後の試合カード、ここから ----- */
div.game_card {
    height: auto;
    width: 100%;
    border: solid #000 2px;
    box-shadow: 5px 5px #000;
    margin: 0 0 30px;
}

/* 試合カードヘッダー部（スマホ向け・非表示） */
div.header_game_card_for_portable {
    display: none;
}
/* 試合カードヘッダー部 */
div.header_game_card {
    height: 36px;
    display: flex;
    justify-content: space-between;
    border-bottom: #000 solid 2px;
}
div.game_status_and_arena_info {
    display: flex;
}

/* HOME/AWAY表示 */
div.game_status {
    width: 80px;
    height: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
}
div.game_status p {
    margin: auto 0;
    font-family: 'D-DINCondensed-Bold';
    font-size: 24px;
}
/* 中立試合のフォント設定 */
div.game_status p.for_neutral_game {
    font-family: 'NotoSansJP-Bold';
    font-size: 20px;
    margin-left: 1px;
    margin-bottom: 5px;
}

/* 会場情報 */
div.game_arena_info {
    margin: auto 0;
    display: flex;
    padding-left: 10px;
}
div.game_arena_info > div {
    display: flex;
    justify-content: center;
}
div.game_arena_info p {
    margin: auto;
}
div.arena p {
    font-size: 18px;
    font-family: 'NotoSansJP-Medium';
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
div.city p {
    font-size: 12px;
    font-family: 'NotoSansJP-Regular';
    padding-left: 6px;
    padding-right: 10px;
    margin-bottom: 1px;
}
/* マップピンアイコン */
button.map {
    position: relative;
    height: 100%;
    width: 21px;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0px;
}
button.map div {
    background-color: transparent;
}
button.map .imgPin {
    position: absolute;
    top: 3px;
    width: 100%;
    height: 16px;
}
button.map .imgPin div {
    width: 11px;
    height: 100%;
    margin: 0 auto;
    background-image: url(../img/map_pin.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
button.map .imgMap {
    position: absolute;
    bottom: 6px;
    width: 100%;
    height: 8px;
    background-image: url(../img/map_base.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* 試合種類 */
div.game_type {
    width: 240px;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
}
div.game_type p {
    margin: auto 0;
}
/* 試合基本情報 */
div.container_game_info {
    margin-bottom: 10px;
}
/* 試合日時 */
/* div.game_date_and_time {
    position: relative;
    margin-top: 16px;
    height: 90px;
} */
div.game_date_and_time {
    position: relative;
    /* 高さをautoに設定するとTIP OFFの有無で高さが可変となる */
    /* height: auto; */
    height: 90px;
    margin-top: 16px;
}
div.container_future_schedule div.game_date_and_time {
    /* 今後の試合のみ */
    display: flex;
    justify-content: center;
}
div.game_date_and_time > div{
    position: relative;
}
div.game_date_and_time .game_date {
    position: relative;
    height: 60px;
    display: flex;
    justify-content: center;
}
div.game_date_and_time .game_time {
    height: auto;
}
div.game_day{
    font-family: 'D-DINCondensed-Bold';
    font-size: 60px;
    display: flex;
    justify-content: first baseline;
}
div.game_day p {
    margin: auto;
}
div.game_day_of_week{
    font-family: 'NotoSansJP-Medium';
    font-size: 24px;
    display: flex;
    justify-content: first baseline;
    margin-left: 2px;
}
div.game_day_of_week p{
    margin: auto auto 5px;
}
div.game_tip_off{
    font-family: 'D-DINCondensed-Bold';
    /* margin-left: 10px; */
    font-size: 24px;
    display: flex;
    justify-content: first baseline;
}
div.game_tip_off p {
    margin: auto auto 5px;
}

/* 試合中止 */
div.label_game_cancel {
    /* 基本非表示 */
    display: none;
}
/* 試合中止時のみラベル表示 */
div.game_cancel div.label_game_cancel {
    display: block;
    position: absolute;
    right: 0;
    width: 240px;
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    text-align: center;
}
div.label_game_cancel div {
    width: 110px;
    height: 36px;
    margin: auto;
    border-radius: 18px;
    background-color: #333;
    display: flex;
    justify-content: center;
    text-align: center;
}
div.label_game_cancel p {
    margin: auto;
    color: #FFF;
}

/* 対戦カード */
div.container_game_versus {
    position: relative;
    height: 80px;
    /* margin-top: 10px; */
}
div.container_game_versus div {
    background-color: transparent;
}
div.versus {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    background-color: transparent;
}
div.versus p::before {
    content: attr(data-vs);
}

div.versus p {
    font-family: 'NotoSansJP-Medium';
    font-size: 24px;
    margin: auto;
}

div.container_team {
    display: flex;
    justify-content: space-between;
}
div.container_future_schedule div.container_team > div {
    display: flex;
    width: 50%;
}
div.container_future_schedule div.container_team div > div {
    display: flex;
    width: calc((100% - 116px)); /* 116px：[vs.]の横幅の50%(=16px) + [vs.]とチームアイコン間の余白(=20px) + チームアイコンの幅(=80px) */
}
div.container_team p {
    margin: auto 10px;
}
div.home_team div {
    justify-content: right;
}

div.away_team {
    flex-direction: row-reverse;
}
div.container_future_schedule .team_name {
    font-family: 'NotoSansJP-Bold';
    font-size: 20px;
}
.team_name::before {
    content: attr(data-pc);
}
div.container_future_schedule .team_icon {
    width: 80px;
    height: 80px ;
}
/* 試合中止時 */
div.game_cancel .team_name {
    color: #A0A0A0;
}

/* チケット購入ボタン */
div.container_ticket {
    width: 248px;
    height: 50px;
    margin: 20px auto 4px;
    background-color: #12315A;
}
div.container_ticket div {
    background-color: transparent;
}
div.btn_ticket > div {
    display: flex;
    text-align: center;
}
span.btn_ticket_text {
    font-family: 'NotoSansJP-Bold';
    font-size: 20px;
    color: #FFF;
    text-align: center;
    line-height: 50px;
    margin-left: 20px;
}
span.btn_ticket_text::after {
    content: '〉';
    width: auto;
    height: auto;
    margin-left: 10px;
    display: inline-block;
    color: #FFD400;
}


/** ---- アコーディオン、ここから ---- */
div.container_game_info_with_kv {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* div.toggle_game_info {
    height: 36px;
    width: 140px;
    margin-bottom: 20px;
    display: flex;
    background-color: #FFD400;
    border-radius: 18px;
} */

label.game_info_with_kv_label p {
    height: 36px;
    width: 140px;
    text-align: center;
    line-height: 36px;
    margin-bottom: 20px;
    background-color: #FFD400;
    border-radius: 18px;
    font-family: 'NotoSansJP-Bold';
    font-size: 16px;
    color: #12315A;
}
input.game_info_with_kv_toggle {
    appearance: none;
    margin: 0;
}
label.game_info_with_kv_label p:after {
    content: url(../img/toggle_kv.png);
    width: 16px;
    height: auto;
    margin-left: 4px;
    display: inline-block;
}
input.game_info_with_kv_toggle:checked  +label.game_info_with_kv_label +div.game_info_with_kv{
    display: flex;
    /* height: 511px;
    margin-bottom: 20px;
    transition-duration: 200ms; */
}
input.game_info_with_kv_toggle:checked +label.game_info_with_kv_label p:after {
    transform: rotate(180deg);
}


/* アコーディオン中身 */
div.game_info_with_kv {
    display: none;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-bottom: 20px;
    overflow: hidden;
}
div.img_key_visual {
    height: auto;
    width: 640px;
    aspect-ratio: 16 / 9;
    margin: 10px auto;
}

div.img_key_visual img{
    height: 100%;
    width: 100%;
}
.btn_game_info {
    display: flex;
    justify-content: center;
}

.btn_game_info button {
    height: 50px;
    width: 200px;
    padding: 0;
    border: solid #12315a 2px;
    background-color: #FFF;
    display: flex;
}
.btn_game_info div {
    vertical-align: middle;
    margin: auto 0;
}
.btn_game_info a {
    display: flex;
    width: 100%;
    height: 100%;
}
span.btn_game_info_text {
    margin-left: 16px;
    font-family: 'NotoSansJP-Bold';
    font-size: 20px;
    color: #12315A;
    display: inline-block;
}
span.btn_game_info_text::after {
    content: '〉';
    width: auto;
    height: auto;
    margin-left: 4px;
    display: inline-block;
}

/* アコーディオン非表示時 */
div.container_future_schedule div.game_info_without_kv div.container_game_info_with_kv {
    display: none;
}
div.container_future_schedule div.game_info_without_kv div.container_ticket {
    margin-bottom: 24px;
}

/** ---- アコーディオン、ここまで ---- */

/** ----- 今後の試合カード、ここまで ----- */
/** ---------- 今後試合リスト、ここまで ---------- */


/** ---------- 過去試合リスト、ここから（※今後の試合のカスタム） ---------- */
/* 過去試合リスト */
div.container_past_schedule {
    height: auto;
    width: 100%;
    display: flex;
}
/* 過去試合一覧エリア */
div.container_past_game {
    margin-top: 80px;
}

/* ラベル */
div.container_label {
    height: 48px;
    margin-bottom: 20px;
}
div.label {
    height: 100%;
    width: 248px;
    display: flex;
}
div.label div {
    height: 100%;
}
div.label .head {
    width: 6px;
    background-color: #FFD400;
}
div.label .title_area {
    width: 236px;
    margin-left: 6px;
    display: flex;
}
div.label .title_area div {
    background-color: #FFD400;
}
div.label .title {
    width: calc(100% - 48px);
}
div.label .triangle {
    width: 48px;
    clip-path: polygon(0 0, 100% 100% ,0 100%);
}
div.label .title p {
    margin-left: 10px;
    font-family: 'NotoSansJP-Medium';
    font-size: 24px;
}


/** ----- 過去の試合カード、ここから（※今後の試合のカスタム） ----- *

/* 最新/最後の試合 */
div.last_game {
    position: relative;
}
div.last_game div.game_card_in_last {
    display: none;
}

div.last_game div.game_card_in_last:last-child{
    display: block;
}


div.container_past_schedule div.game_contents {
    position: relative;
}

/* 試合コンテンツボタン */
div.container_btn_game_contents {
    position: absolute;
    right: 0;
    top: 0;
    width: 240px;
    /* TODO: アコーディオンが閉じている状態の高さ100%の数値を当てる */
    height: 228px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-color: transparent;
}
div.group_btn_game_contents {
    background-color: transparent;
}
div.group_btn_game_contents{
    margin: auto;
    width: 196px;
}
div.group_btn_game_contents > div {
    height: 46px;
    width: 100%;
    margin: 10px 0;
    background-color: #12315a;
    border: solid #FFF 2px;
    box-shadow: #12315A 4px 4px 0px -2px;
}

/* ボタン非活性表示設定 */
div.group_btn_game_contents > div.for_disabled {
    background-color: #D4D4D4;
    box-shadow: #D4D4D4 4px 4px 0px -2px;
}


button.btn_game_contents {
    height: 100%;
    padding: 0px;
    background-color: transparent;
    border: transparent;
    display: flex;
}
button.btn_game_contents a {
    display: flex;
    width: 100%;
    height: 100%;
}
button.btn_game_contents div {
    background-color: transparent;
    margin: auto auto auto 0px;
}
span.text_btn_game_contents {
    margin-left: 14px;
    font-family: 'NotoSansJP-Medium';
    font-size: 20px;
    color: #FFF;
    display: inline-block;
}
span.text_btn_game_contents::after {
    content: '〉';
    width: auto;
    height: auto;
    margin-left: 10px;
    display: inline-block;
}
div.container_past_schedule div.container_game_info {
    display: flex;
    margin-bottom: 10px;
}
div.container_past_schedule div.game_score_info {
    width: calc(100% - 240px);
}
div.area_btn_game_contents_group {
    width: 240px;
}

/* 試合日時 */
div.container_past_schedule div.game_date_and_time {
    height: 80px;
}
div.container_past_schedule div.game_date {
    height: 40px;
}
div.container_past_schedule div.game_day {
    font-size: 40px;
}
div.container_past_schedule div.game_day_of_week {
    font-size: 20px;
    margin-left: 2px;
}
div.container_past_schedule div.game_day_of_week p {
    margin: auto auto 3px;
}
div.container_past_schedule div.game_time {
    height: auto;
}
div.container_past_schedule div.game_tip_off {
    font-size: 24px;
}
div.container_past_schedule div.game_tip_off p{
    margin: 4px auto 6px;
}

/* 対戦カード */

div.container_game_score {
    margin-top: 6px;
    height: 60px;
}
div.container_game_score div {
    background-color: transparent;
}
div.container_past_schedule div.team {
    width: calc((100% - 100px)); /* 100px：[vs.]の横幅の50%(=80px) + [vs.]とチームアイコン間の余白(=20px) */
}
div.container_past_schedule div.team > div {
    display: flex;
}
div.score {
    height: 60px;
    margin: 0;
}
div.score div {
    margin: auto 20px;
    width: 162px;
    display: flex;
}
div.score p {
    font-family: 'D-DINCondensed-Bold';
    font-size: 48px;
}
div.score p.hyphen  {
    margin: auto 10px;
}
div.score p.home {
    width: 63px;
    margin:auto 0;
    text-align: right;
}
div.score p.away {
    width: 63px;
    margin:auto 0;
}
div.container_past_schedule .team_icon {
    width: 60px;
    height: 60px;
}
div.container_past_schedule .team > div > div {
    display: flex;
}
p.team_name_for_past_game {
    font-family: 'NotoSansJP-Bold';
    font-size: 18px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    word-break: break-all;
}
p.hyphen::before {
    content: attr(data-hyphen);
}

/* アコーディオン */
div.container_past_schedule label.game_info_with_kv_label {
    width: 100%;
}
div.container_past_schedule label.game_info_with_kv_label div {
    width: calc(100% - 240px);
    margin-bottom: 20px;
    background-color: transparent;
}
div.container_past_schedule label.game_info_with_kv_label p {
    margin: auto;
}

/* キービジュアルの領域を非表示時 */
div.container_past_schedule div.game_info_without_kv div.container_game_info_with_kv {
    height: 56px;
}
div.container_past_schedule div.game_info_without_kv input.game_info_with_kv_toggle,
div.container_past_schedule div.game_info_without_kv label.game_info_with_kv_label,
div.container_past_schedule div.game_info_without_kv div.game_info_with_kv,
div.container_past_schedule div.game_info_without_kv div.btn_game_info {
    display: none;
}

/* 試合中止時 */
div.game_cancel div.group_btn_game_contents {
    display: none;
}

div.container_past_schedule div.game_cancel div.label_game_cancel {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

div.game_cancel p.home, div.game_cancel p.away {
    display: none;
}
div.game_cancel div.score p.hyphen  {
    margin: auto;
}
/** ----- 過去の試合カード、ここまで ----- */
/** ---------- 過去試合リスト、ここまで ---------- */


/** ---------- 試合スケジュールリスト、ここまで ---------- */






/** ------------------------------ PC版のみ適用するアニメーション ------------------------------ */
@media screen and (min-width: 768px) {
    /* マップピンのアニメーション */
    button.map:hover {
        opacity: 0.5;
        transition-duration: 200ms;
    }
    button.map:hover .imgPin{
        top: 10px;
        transition-duration: 200ms;
    }

    /* チケット購入 */
    div.container_ticket:hover span.btn_ticket_text::after {
        margin-left: 16px;
        transition-duration: 200ms;
    }

    /* 試合情報ボタンのアニメーション */
    .btn_game_info button:hover span.btn_game_info_text::after {
        margin-left: 12px;
        transition-duration: 200ms;
    }
    /* 試合コンテンツボタンのアニメーション */
    .btn_game_contents:hover .text_btn_game_contents::after {
        margin-left: 16px;
        transition-duration: 200ms;
    }
    .for_disabled > .btn_game_contents:hover .text_btn_game_contents::after {
        margin-left: 10px;
    }
}



/** -------------------------------------------------- PC版画面比率維持 -------------------------------------------------- */
@media screen and (max-width: 1123px) {
    /* PC用・幅に応じてサイズを可変 */
    div.groundwork {
        width: 100%;
        height: auto;
    }
    div.container_game_schedule_info {
        width: calc(100% - 100px);
        height: auto;
    }
    div.game_type {
        width: 23.4375%;
    }

    div.container_future_schedule div.game_cancel div.label_game_cancel {
        width: 23.4375%;
    }
    p.team_name_for_past_game {
        font-size: clamp(12px, 1.6vw, 18px);
    }
}


/** --------------------------------------------------   スマホ版表示   -------------------------------------------------- */
@media screen and (max-width: 767px) {
    /* 下地 */
    div.groundwork {
        width: 100%;
        height: auto;
    }
    div.container_game_schedule_info {
        width: calc(100% - 20px);
        height: auto;
    }


    /**
     *
     * トップバー、ここから
     */
    div.top_bar {
        height: 36px;
        padding: 10px;
    }
    /* タイトル */
    .title p {
        font-size: 20px;
    }
    /* シーズン選択 */
    div.container_season {
        width: 135px;
        font-size: 12px;
    }

    div.season_dropdown > div {
        height: 36px;
        padding: 0 10px;
    }
    div.img_arrow_for_select {
        width: 14px;
        height: 7px;
    }

    li.season_item {
        height: 36px;
    }
    li.season_item:hover {
        background-color: #000;
        color: #FFF;
    }
    li.season_item label {
        margin-left: 10px;
    }
    /**
     *
     * トップバー、ここまで
     */


    /**
     *
     * チェックボックス、ここから
     */
    div.container_game_type {
        margin: 30px auto 0px;
    }
    div.container_game_type label {
        height: 20px;
        width: auto;
        font-size: 12px;
        margin: 0 15px 10px;
    }
    input.game_type_toggle {
        height: 20px;
        width: 20px;
        margin:0 6px 0 0;
        vertical-align: middle;
    }
    input.game_type_toggle:checked {
        background-image: url(../img/check.png);
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
    /**
     *
     * チェックボックス、ここまで
     */


    /**
     *
     * 試合タブボタン、ここから
     */
    div.tab {
        height: 36px;
        margin: 10px auto 0px;
        font-size: 16px;
    }
    div.tab button {
        width: 120px;
        font-size: 16px;
    }
    /**
     *
     * 試合タブボタン、ここまで
     */

    /** -------- 試合スケジュール（今後）、ここから -------- */
    div.game_schedule {
        height: auto;
        margin: 30px auto;
    }
    /* 過去試合一覧エリア */
    div.container_past_game {
        margin-top: 30px;
    }

    /* 表示する試合がない場合のカード */
    div.no_game_card {
        height: 233px;
        /* height: 183px; */
        box-shadow: 2px 2px #000;
        margin: 0 0 10px;
    }
    div.no_game_card p {
        font-size: 12px;
        text-align: center;
        margin: auto;
        line-height: 233px;
    }

    /** ---- 試合カード（今後）、ここから ---- */
    div.game_card {
        height: auto;
        width: 100%;
        border: solid #000 2px;
        box-shadow: 2px 2px #000;
        margin: 0 0 10px;
    }
     /* ヘッダー部（HOME/AWAY　試合種類） */
    div.header_game_card_for_portable {
        display: block;
        height: 24px;
        width: calc(100% - 20px);
        padding: 0  10px;
        display: flex;
        justify-content: space-between;
        border-bottom: #000 solid 2px;
    }
    div.header_game_card_for_portable div {
        background-color: transparent;
        display: flex;
    }
    div.header_game_card_for_portable p {
        margin: auto 0;
    }
    /* HOME/AWAY */
    p.game_status_for_portable {
        font-family: 'D-DINCondensed-Bold';
        font-size: 16px;
    }
    /* 中立試合時 */
    div.header_game_card_for_portable p.for_neutral_game {
        font-family: 'NotoSansJP-Bold';
        font-size: 14px;
        margin-left: 1px;
        margin-bottom: 3.5px;
    }
    /* 試合種別 */
    p.game_type_for_portable {
        font-family: 'NotoSansJP-Medium';
        font-size: 12px;
    }

    /* ヘッダー部（会場情報のみ） */
    div.header_game_card {
        height: 25px;
        padding: 0 10px;
    }
    div.game_arena_info {
        padding-left: 0px;
    }
    div.arena p {
        font-size: 12px;
    }
    div.city p {
        font-size: 8px;
        padding-left: 2px;
    }
    /* マップピンアイコン */
    button.map {
        height: 100%;
        width: 20px;
    }
    button.map .imgPin {
        top: 3px;
    }
    button.map .imgMap {
        bottom: 3px;
    }

    div.game_status {
        display: none;
    }
    div.game_type {
        display: none;
    }

    /* 試合概要（今後） */
    div.container_future_schedule div.container_game_info {
        margin-bottom: 4px;
    }
    /* 試合日時（今後） */
    div.game_date_and_time {
        /* 高さをautoに設定するとTIP OFFの有無で高さが可変となる */
        height: auto;
        margin-top: 4px;
    }
    div.game_date_and_time div {
        background-color: transparent;
    }
    div.game_date_and_time .game_date {
        height: 36px;
    }
    div.game_date_and_time .game_day{
        font-size: 32px;
        margin: 0;
    }
    div.game_date_and_time .game_day_of_week{
        font-size: 16px;
        margin-left: 2px;
    }
    div.game_date_and_time .game_day_of_week p {
        margin: auto auto 5px;
    }
    div.game_date_and_time .game_time {
        height: auto;
        margin-top: -4px;
    }
    div.game_date_and_time .game_tip_off{
        font-size: 20px;
    }
    div.game_date_and_time .game_tip_off p {
        margin: auto auto 1px;
    }
    /* 試合中止ラベル */
    div.label_game_cancel div {
        display: none;
    }

    /* 対戦カード */
    div.container_game_versus {
        height: 40px;
        margin-top: 6px;
    }
    div.versus p {
        font-size: 16px;
    }
    div.container_future_schedule div.container_team div > div {
        width: calc((100% - 60px)); /* 60px：[vs.]の横幅の50%(=10px) + [vs.]とチームアイコン間の余白(=10px) + チームアイコンの幅(=40px) */
    }
    div.container_future_schedule .team_name {
        font-size: 16px;
        vertical-align: middle;
    }
    div.container_future_schedule .team_icon {
        width: 40px;
        height: 40px;
    }
    .team_name::before {
        content: attr(data-sp);
    }
    /* 試合中止時 */
    div.game_cancel div.versus p {
        font-size: 10px;
        white-space: pre-wrap;
    }
    div.game_cancel div.versus p::before {
        content: attr(data-cancel);
    }

    /* TODO: 追加3 */
    /* チケット購入ボタン */
    div.container_future_schedule div.game_info_without_kv div.container_ticket {
        margin-bottom: 10px;
    }
    div.container_ticket {
        width: 140px;
        height: 30px;
        margin: 4px auto 14px;
    }
    span.btn_ticket_text {
        font-size: 12px;
        color: #FFF;
        line-height: 30px;
        margin-left: 10px;
    }
    span.btn_ticket_text::after {
        margin-left: 4px;
    }



    /* アコーディオン部分 */
    label.game_info_with_kv_label p {
        height: 30px;
        width: 100px;
        line-height: 30px;
        border-radius: 15px;
        font-size: 12px;
        margin-bottom: 10px;
        margin-top: 0;
    }
    label.game_info_with_kv_label p:after {
        content: url(../img/toggle_kv_for_sp.png);
        width: 12px;
        height: auto;
        margin-left: 4px;
    }
    div.game_info_with_kv {
        margin-bottom: 10px;
    }

    /* キービジュアル */
    div.img_key_visual {
        width: calc(100% - 20px);
        margin: 0 auto 10px;
    }
    /* 試合情報を見るボタン */
    .btn_game_info button {
        width: 140px;
        height: 36px;
    }
    span.btn_game_info_text {
        margin-left: 20px;
        font-size: 12px;
    }

    /** -------- 試合スケジュール（過去）、ここから -------- */
    /**  最新の試合 / 最後の試合ラベル */
    div.container_label {
        height: 24px;
        margin-bottom: 10px;
    }
    div.label {
        height: 100%;
        width: 132px;
    }
    div.label .title {
        width: calc(100% - 24px);
    }
    div.label .triangle {
        width: 24px;
    }
    div.label .title p {
        margin-left: 6px;
        font-size: 12px;
    }

    /** ---- 過去の試合カード、ここから ---- */
    div.container_past_schedule div.container_game_info {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
    }
    div.container_past_schedule div.game_score_info {
        width: 100%;
    }
    div.container_past_schedule div.game_day_of_week {
        margin-left: 0px;
    }
    div.container_team p {
        margin: auto 6px;
    }
    div.area_btn_game_contents_group {
        height: 36px;
        background-color: transparent;
    }
    div.container_btn_game_contents {
        /* 試合日程 + 対戦成績の高さ */
        top: 100px;
        width: 100%;
        height: 30px;
    }
    div.group_btn_game_contents {
        margin: 0 auto;
        width: auto;
        height: 100%;
        display: flex;
        justify-content: center;
    }
    div.group_btn_game_contents div {
        height: 30px;
        width: 86px;
        margin: 0 5px;
        display: flex;
        justify-content: center;
    }
    span.text_btn_game_contents {
        margin: auto;
        font-family: 'NotoSansJP-Medium';
        font-size: 10px;
    }
    span.text_btn_game_contents::after {
        content: none;
    }

    div.container_past_schedule label.game_info_with_kv_label div {
        width: 100%;
        margin-bottom: 10px;
    }
    div.container_past_schedule .team_icon {
        width: 30px;
        height: 30px;
    }
    /** 試合日時（過去） */
    div.container_past_schedule div.game_date_and_time {
        /* 高さをautoに設定するとTIP OFFの有無で高さが可変となる */
        height: auto;
        margin-top: 4px;
    }
    div.container_past_schedule div.game_date_and_time .game_date{
        height: 36px;
    }
    div.container_past_schedule div.game_date_and_time .game_day{
        font-size: 32px;
    }
    div.container_past_schedule div.game_date_and_time .game_day_of_week{
        font-size: 16px;
    }
    div.container_past_schedule div.game_date_and_time .game_day_of_week p {
        margin: auto auto 4px 2px;
    }
    div.container_past_schedule div.game_date_and_time .game_time{
        height: auto;
    }
    div.container_past_schedule div.game_date_and_time .game_tip_off{
        font-size: 20px;
    }
    div.container_past_schedule div.game_date_and_time .game_tip_off p {
        margin: auto auto 1px;
    }
    /** 試合基本情報（過去） */
    div.container_game_score {
        margin-top: 6px;
        height: 30px;
    }
    div.score {
        height: 30px;
    }
    div.score div {
        margin: auto 0px;
        width: 96px;
    }
    div.container_past_schedule div.score p {
        font-size: 28px;
    }
    /* div.score p.home {
        width: 48px;
    }
    div.score p.away {
        width: 48px;
    } */
    div.score p.hyphen {
        margin: auto 4px;
    }
    p.team_name_for_past_game {
        font-size: 12px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    /* キービジュアル非表示時 */
    div.container_past_schedule div.game_info_without_kv div.container_game_info_with_kv {
        height: 0px;
    }

    /* 試合中止時 */
    div.game_cancel p.home, div.game_cancel p.away {
        display: none;
    }
    /* div.game_cancel div.score > div {
        width: 80px;
    } */
    div.game_cancel p.hyphen {
        margin: auto;
        line-height: 100%;
    }
    div.game_cancel p.hyphen::before {
        content: attr(data-cancel);
        font-family: 'NotoSansJP-Bold';
        font-size: 12px;
    }
    div.game_cancel div.group_btn_game_contents {
        display: none;
    }

    div.game_cancel div.container_btn_game_contents,
    div.game_cancel div.area_btn_game_contents_group {
        height: auto;
    }
    /**
     *
     * 試合カード、ここまで
     */


}

@media screen and (max-width: 374px) {
    div.container_btn_game_contents div.group_btn_game_contents {
        margin: 0 2%;
    }
    div.container_btn_game_contents div.group_btn_game_contents > div {
        width: calc(((100% / 374) * 100) * 1.1);
    }
    span.text_btn_game_contents {
        font-size: clamp(6px, 2.67vw, 10px)
    }
}