@charset "UTF-8";

/* liのデフォルトCSSを削除 */
.cmn--ul {
    list-style-type: none;
}

.cmn--li {
    list-style-type: none;
}

/*!
 * Sanfrecce HIROSHIMA website styles
 */
:root {
    --spacing: 16px
}

@media (min-width:992px) {
    :root {
        --spacing: 20px
    }
}

:root {
    --input-font-size: calc(1.6rem * 0.625)
}

@media (min-width:992px) {
    :root {
        --input-font-size: calc(1.4rem * 0.625)
    }
}

:root {
    --list-group-item-padding-x: 16px
}

@media (min-width:992px) {
    :root {
        --list-group-item-padding-x: 20px
    }
}

.score {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around
}

.score--num {
    flex: 2ch 0 0;
    max-width: 2ch;
    text-align: center
}

.score--num.is-myteam {
    color: #6638b6
}

.score--vs {
    flex: 1ch 0 0;
    max-width: 1ch;
    display: flex;
    align-items: center
}

.score--vs:before {
    content: "";
    width: 100%;
    border-top: 0.13em solid;
    margin-top: 0.15em
}

.score--vs-pk {
    font-size: 80%;
    line-height: 1.3;
    flex: 0 0 2ch;
    max-width: 2ch;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid;
    margin-left: 0.5ch;
    margin-right: 0.5ch
}

.score--vs-detail {
    font-size: 80%;
    line-height: 1.3;
    flex: 1 1 4em;
    max-width: 5em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5ch;
    margin-right: 0.5ch
}

.match--ha-type {
    flex-shrink: 0;
    flex-grow: 0;
    padding: calc(var(--spacing) / 8) calc(var(--spacing) / 2);
    min-width: 4em;
    display: inline-block;
    text-align: center;
    font-family: "Oswald", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: #F3F4F4;
    color: #8d9093
}

@media (min-width:992px) {
    .match--ha-type {
        font-size: 0.75rem
    }
}

.match--ha-type.is-match-detail {
    margin-left: 0.5em;
    -webkit-transform: translateY(-0.125em);
    transform: translateY(-0.125em)
}

.match--ha-type.is-home {
    background-color: #6638b6;
    color: #fafafa;
    padding: 1.25rem;
}

.match--ha-type.is-away {
    background-color: #aeaeae;
    color: #fafafa;
    padding: 1.25rem;
}

.match--ha-type.is-other {
    background-color: #d8cbef;
    color: #fafafa;
    padding: 1.25rem;
}

.match--game-state {
    flex-shrink: 0;
    flex-grow: 0;
    padding: calc(var(--spacing) / 8) calc(var(--spacing) / 2);
    min-width: 4em;
    display: inline-block;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: rgba(102, 56, 182, 0.15);
    color: #6638b6
}

@media (min-width:992px) {
    .match--game-state {
        font-size: 0.75rem
    }
}

.match--game-state.is-before\/end {
    background-color: #8d9093;
    color: #fafafa
}

.match--game-state.is-disabled {
    background-color: #fff;
    color: #8d9093
}

.match--scoreboard {
    display: flex;
    justify-content: space-around;
    margin: auto
}

.match--scoreboard .match--team {
    flex: 0 1 24%
}

.match--scoreboard .match--info {
    flex: 1 1 52%
}

.match--scoreboard .match--score {
    flex: 1 1 52%
}

.match--team {
    text-align: center;
    font-size: 0.625rem;
    -webkit-transform: translateY(-1vw);
    transform: translateY(-1vw)
}

@media (min-width:992px) {
    .match--team {
        font-size: 0.75rem
    }
}

.match--team.is-home {
    margin-left: auto
}

.match--team.is-away {
    margin-right: auto
}

.match--team-emblem {
    display: block;
    margin: auto;
    width: 20vw;
    max-width: 160px;
    height: auto
}

.match--date {
    font-size: 1.5rem;
    font-family: "Oswald", sans-serif
}

@media (min-width:992px) {
    .match--date {
        font-size: 2rem
    }
}

.match--day {
    display: inline-block;
    -webkit-transform: translateY(-0.15em);
    transform: translateY(-0.15em);
    font-size: 0.875rem;
    display: inline-block
}

@media (min-width:992px) {
    .match--day {
        font-size: 0.875rem
    }
}

.match--day:before {
    content: "["
}

.match--day:after {
    content: "]"
}

.match--ko {
    display: inline-block;
    font-size: 1rem;
    font-family: "Oswald", sans-serif;
    text-indent: 0.1em
}

@media (min-width:992px) {
    .match--ko {
        font-size: 1.25rem
    }
}

.match--info-vs {
    text-align: center;
    font-weight: 500;
    font-size: 0.6875rem;
    line-height: 1.5
}

@media (min-width:992px) {
    .match--info-vs {
        font-size: 0.875rem
    }
}

.match--info {
    text-align: center;
    padding-top: 0.25em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.match--info--date {
    font-family: "Oswald", sans-serif;
    font-size: 9.25vw;
    line-height: 1;
    margin-bottom: 0
}

@media (min-width:992px) {
    .match--info--date {
        font-size: 4rem
    }
}

.match--info--day-ko {
    font-size: 4vw;
    margin-bottom: 0;
    line-height: 1.25;
    margin-top: 0.125em
}

@media (min-width:992px) {
    .match--info--day-ko {
        font-size: 1.5rem
    }
}

.match--info--day {
    font-size: 90%;
    -webkit-transform: translateY(-0.1em);
    transform: translateY(-0.1em)
}

.match--info--ko {
    font-size: inherit
}

.match--info--hv {
    position: relative;
    font-family: "Oswald", sans-serif
}

.match--info--hv:after {
    content: "｜";
    display: inline-block
}

.match--info--stadium {
    font-size: 0.6875rem;
    margin-top: -0.08em;
    margin-bottom: 0
}

@media (min-width:992px) {
    .match--info--stadium {
        font-size: 0.875rem
    }
}

.match--info--sponsor {
    width: 80%;
    margin-left: auto;
    margin-right: auto
}

.match--info--sponsor-title {
    display: inline-block;
    font-size: 0.75rem;
    margin-bottom: 0.75em;
    padding-top: 0.6em;
    border-top: 1px solid #262626
}

@media (min-width:992px) {
    .match--info--sponsor-title {
        font-size: 0.875rem
    }
}

.match--info--sponsor-holder {
    display: inline-block;
    min-width: 94px;
    height: 28px;
    background-color: #fff
}

@media (min-width:768px) {
    .match--info--sponsor-holder {
        height: 50px;
        min-width: 150px
    }
}

.match--info--sponsor-img {
    background-color: #fff;
    display: inline-block;
    width: auto;
    height: 100%;
    padding: 2%
}

.match--info--sponsor-text {
    display: block;
    margin-top: 0.75em;
    margin-bottom: 1em;
    font-size: 0.625rem
}

@media (min-width:992px) {
    .match--info--sponsor-text {
        font-size: 0.75rem
    }
}

.match--score {
    font-size: 14vw;
    line-height: 1.25
}

@media (min-width:992px) {
    .match--score {
        font-size: 7.5rem;
        margin-top: -0.125em;
        letter-spacing: -0.025em
    }
}

.match--progress {
    display: flex;
    justify-content: space-around;
    margin: auto
}

.match--progress-score {
    flex: 0 1 7em;
    white-space: nowrap
}

@media (min-width:992px) {
    .match--progress-score {
        font-size: 1.125rem
    }
}

.match--progress-goal {
    flex: 0 1 35%;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.6875rem;
    margin-bottom: 0
}

@media (min-width:992px) {
    .match--progress-goal {
        font-size: 0.75rem
    }
}

.match--progress-goal.is-home {
    text-align: right;
    padding-right: 1em
}

.match--progress-goal.is-away {
    padding-left: 1em
}

.match--progress-goal--item {
    margin-bottom: 0.5em
}

.match--progress-goal a {
    color: inherit;
    border-bottom: 1px solid
}

.match--subheading {
    font-size: 0.875rem
}

@media (min-width:768px) {
    .match--subheading {
        font-size: 1.125rem
    }
}

.event--title {
    background-color: #6638b6;
    color: #fafafa;
}

.event--title-away {
    background-color: #aeaeae;
    color: #fafafa;
}

.event--title2 {
    background-color: #EFF0F0;
    border-top: 1px solid rgba(141, 144, 147, 0.34);
    border-right: 1px solid rgba(141, 144, 147, 0.34);
    border-left: 1px solid rgba(141, 144, 147, 0.34);
}

.event--title2-away {
    background-color: #EFF0F0;
    border-top: 1px solid rgba(141, 144, 147, 0.34);
    border-right: 1px solid rgba(141, 144, 147, 0.34);
    border-left: 1px solid rgba(141, 144, 147, 0.34);
}

.remarks--text {
    color: #848484;
}

.match--item {
    position: relative;
    border: 1px solid rgba(141, 144, 147, 0.34);
    padding-bottom: var(--spacing)
}

@media (min-width:992px) {
    .match--item {
        padding-bottom: calc(var(--spacing) / 2)
    }
}

.match--item.is-live {
    border-top: 1px solid #6638b6;
    border-bottom: 1px solid #6638b6;
    background-color: rgba(102, 56, 182, 0.08)
}

.match--item.is-disabled {
    opacity: 0.75;
    background-color: #F3F4F4
}

.match--item--info {
    margin-bottom: calc(var(--spacing) / 4)
}

.match--item--stadium {
    font-size: 0.75rem
}

.match--item--date {
    font-size: 1.5rem;
    font-family: "Oswald", sans-serif
}

@media (min-width:992px) {
    .match--item--date {
        font-size: 3rem
    }
}

.match--item--day {
    display: inline-block;
    -webkit-transform: translateY(-0.15em);
    transform: translateY(-0.15em);
    font-size: 0.75rem;
    display: inline-block
}

@media (min-width:992px) {
    .match--item--day {
        font-size: 1rem
    }
}

.match--item--day:before {
    content: "["
}

.match--item--day:after {
    content: "]"
}

.match--item--matchdate-undecided {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.2;
    min-height: 2.25rem
}

@media (min-width:992px) {
    .match--item--matchdate-undecided {
        min-height: 2.9375rem
    }
}

.match--item--matchdate-undecided .match--item--date {
    font-size: 1rem
}

@media (min-width:992px) {
    .match--item--matchdate-undecided .match--item--date {
        font-size: 1.25rem
    }
}

.match--item--matchdate-undecided .match--item--day {
    font-size: 0.625rem
}

@media (min-width:992px) {
    .match--item--matchdate-undecided .match--item--day {
        font-size: 0.75rem
    }
}

.match--item--ko {
    display: inline-block;
    font-size: 1rem;
    font-family: "Oswald", sans-serif;
    text-indent: 0.1em
}

@media (min-width:992px) {
    .match--item--ko {
        font-size: 1.25rem
    }
}

.match--item--ko-undecided {
    display: inline-block;
    font-size: 0.625rem;
    -webkit-transform: translateY(-0.2em);
    transform: translateY(-0.2em)
}

@media (min-width:992px) {
    .match--item--ko-undecided {
        font-size: 0.75rem;
        -webkit-transform: translateY(-0.15em);
        transform: translateY(-0.15em)
    }
}

.match--item--round {
    display: block;
    font-size: 0.6875rem;
    text-indent: 0.1em;
    margin-bottom: calc(var(--spacing) / 1.5)
}

@media (min-width:992px) {
    .match--item--round {
        font-size: 0.75rem;
        margin-bottom: 0
    }
}

.match--item--vsteam {
    margin-bottom: calc(var(--spacing) / 1.5);
    font-size: 0.6875rem;
    line-height: 1.2;
    text-align: center;
    -webkit-transform: translateY(-0.1em);
    transform: translateY(-0.1em);
    margin-right: auto
}

@media (min-width:768px) {
    .match--item--vsteam {
        display: block;
        font-size: 0.6875rem;
        line-height: 1.2;
        text-align: center;
        -webkit-transform: translateY(-0.5em);
        transform: translateY(-0.5em)
    }
}

@media (min-width:992px) {
    .match--item--vsteam {
        display: flex;
        align-items: center;
        font-size: 0.9375rem;
        text-align: left;
        font-weight: 700;
        -webkit-transform: translateY(-0.6em);
        transform: translateY(-0.6em)
    }
}

.match--item--vsteam-emblem {
    display: block;
    width: 100%;
    max-width: 48px;
    height: auto;
    margin-left: auto;
    margin-right: auto
}

@media (min-width:768px) {
    .match--item--vsteam-emblem {
        max-width: 54px
    }
}

@media (min-width:992px) {
    .match--item--vsteam-emblem {
        max-width: 100px;
        margin-left: 0;
        margin-right: 0.75em
    }
}

.match--item--we-action-day {
    display: inline-block;
    font-size: 1rem;
    font-family: "Oswald", sans-serif;
    margin-top: 0.55em;
    padding-left: 3%
}

@media (min-width:768px) {
    .match--item--we-action-day {
        font-size: 1.25rem;
        margin-top: 0.2em;
        padding-left: 1%
    }
}

.match--item--we-action-day--description {
    font-size: 0.6875rem
}

.match--item--btn {
    font-size: 0.75rem;
    padding: 0.5em 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 100px
}

@media (min-width:992px) {
    .match--item--btn {
        font-size: 0.875rem;
        padding: 0.536em 1em;
        display: flex;
        width: 100%
    }
}

.match--item--btn img,
.match--item--btn svg {
    flex-shrink: 0
}

.match--item--media {
    display: flex;
    font-size: 0.6875rem;
    line-height: 1.5;
    -webkit-transform: translateY(0.2em);
    transform: translateY(0.2em)
}

@media (min-width:992px) {
    .match--item--media {
        font-size: 0.75rem
    }
}

.match--item--media2 {
    display: flex;
    font-size: 0.6875rem;
    line-height: 1.5;
    -webkit-transform: translateY(0.2em);
    transform: translateY(0.2em)
}

@media (min-width:992px) {
    .match--item--media2 {
        font-size: 0.75rem
    }
}

.match--item--media--heading {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid rgba(141, 144, 147, 0.34);
    margin-right: 0.5em;
    white-space: nowrap;
    align-self: flex-start;
    -webkit-transform: translateY(-0.2em);
    transform: translateY(-0.2em)
}

.match--item--media--body {
    margin: 0
}

.match--item--media--channel {
    display: inline-block
}

.match--item--ticket-info {
    font-size: 0.6875rem;
    line-height: 1.5;
    list-style: none;
    padding-left: 0;
    padding-right: 0.25em;
    margin-bottom: calc(var(--spacing) / 1.5)
}

@media (min-width:1200px) {
    .match--item--ticket-info {
        font-size: 0.75rem
    }
}

.match--item--ticket-info li {
    display: flex;
    -webkit-transform: translateY(0.2em);
    transform: translateY(0.2em)
}

.match--item--ticket-info li+li {
    margin-top: 1px
}

.match--item--ticket-info--heading {
    display: inline-block;
    white-space: nowrap;
    padding-right: 1em;
    align-self: flex-start;
    -webkit-transform: translateY(-0.2em);
    transform: translateY(-0.2em);
}

.match--item--ticket-info--heading2 {
    display: inline-block;
    align-self: flex-start;
    -webkit-transform: translateY(-0.2em);
    transform: translateY(-0.2em);
    overflow-wrap: break-word;
}

.match--item--ticket-info--heading::before {
    content: "●";
    display: inline;
    font-size: 10px;
    color: #6638b6;
    margin-right: .2rem;
}

.match--item--ticket-link {
    text-align: right
}

.match--item--detail-link {
    text-align: right
}

.match--item--result {
    font-size: 1.25rem;
    text-align: right;
    padding-right: 0.25em
}

.match--item--result-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1em
}

@media (min-width:768px) {
    .match--item--result-icon {
        width: 1.75rem;
        height: 1.75rem
    }
}

@media (min-width:992px) {
    .match--item--result-icon {
        width: 2rem;
        height: 2rem;
        margin-top: 0.2em
    }
}

.match--item--result-icon.is-win {
    color: #6638b6
}

.match--item--result-icon.is-draw,
.match--item--result-icon.is-lose {
    color: #8d9093;
    -webkit-transform-origin: center center 2%;
    transform-origin: center center 2%;
    -webkit-transform: scale(0.9);
    transform: scale(0.9)
}

.match--item--score {
    font-size: 1.5rem
}

@media (min-width:768px) {
    .match--item--score {
        font-size: 1.75rem
    }
}

@media (min-width:992px) {
    .match--item--score {
        font-size: 2rem
    }
}

.match--item--score-pk {
    font-size: 0.75rem;
    justify-content: center;
    -webkit-transform: translateY(-0.5em);
    transform: translateY(-0.5em)
}

.match--item--btns {
    text-align: right
}

@media (max-width: 768px) {
    .match--item--btns.responsive-margin-top {
        margin-top: 0.675em;
    }
}
.match--item {
    display: flex;
    flex-wrap: wrap
}

.match--item--info {
    flex: 1 0 100%
}

.match--item--matchdate {
    flex: 0 0 41%
}

@media (min-width:768px) {
    .match--item--matchdate {
        flex: 0 0 20%
    }
}

.match--item--vsteam {
    flex: 0 0 18%
}

@media (min-width:768px) {
    .match--item--vsteam {
        flex: 0 0 16%
    }
}

@media (min-width:992px) {
    .match--item--vsteam {
        flex: 0 0 31%
    }
}

.match--item--we-action-day {
    flex: 0 0 auto
}

.match--item--we-action-day--description {
    margin-bottom: 0
}

@media (min-width:768px) {
    .match--item--we-action-day--description {
        flex: 0 0 51%;
        margin-left: auto;
        margin-top: 0.8em;
        margin-bottom: 0.8em
    }
}

.match--item--media {
    flex: 1 1 100%;
    margin-top: 2px;
    margin-bottom: 0
}

@media (min-width:768px) {
    .match--item--media {
        order: 99;
        flex: 1 1 100%;
        padding-left: 70%;
        margin-top: -1.9em
    }
}

@media (min-width:992px) {
    .match--item--media {
        padding-left: 74%
    }
}

.match--item--ticket-info {
    /* flex: 0 0 70% */
}

.match--item--media2 {
    flex: 1 1 100%;
    margin-top: 2px;
    margin-bottom: 0
}

@media (min-width:768px) {
    .match--item--media2 {
        order: 99;
        flex: 1 1 100%;
        padding-left: 70%;
    }
}

@media (min-width:992px) {
    .match--item--media2 {
        padding-left: 74%
    }
}

.match--item--ticket-info {
    /* flex: 0 0 70% */
}

@media (min-width:768px) {
    .match--item--ticket-info {
        flex: 1 0 32%;
        order: 90;
        margin-left: auto
    }
}

@media (min-width:992px) {
    .match--item--ticket-info {
        flex: auto
    }
}

.match--item--ticket-link {
    flex: 0 0 30%;
    margin-left: auto
}

@media (min-width:768px) {
    .match--item--ticket-link {
        margin-left: 0;
        flex: 0 0 15%;
        order: 97;
        padding-right: 0.5px
    }
}

@media (min-width:992px) {
    .match--item--ticket-link {
        flex: 0 0 13%
    }
}

.match--item--detail-link {
    flex: 0 0 30%;
    margin-left: auto;
    margin-top: 0.25em
}

@media (min-width:768px) {
    .match--item--detail-link {
        margin-left: 0;
        margin-top: 0;
        flex: 0 0 15%;
        order: 98;
        padding-left: 0.5px
    }
}

@media (min-width:992px) {
    .match--item--detail-link {
        flex: 0 0 13%
    }
}

@media (min-width:768px) {
    .match--item--detail-link.is-no-ticket {
        flex: 0 0 30%
    }
}

@media (min-width:992px) {
    .match--item--detail-link.is-no-ticket {
        flex: 0 0 26%
    }
}

.match--item--result {
    flex: 0 0 10%;
    margin-left: auto
}

@media (min-width:768px) {
    .match--item--result {
        flex: 0 0 4%
    }
}

@media (min-width:992px) {
    .match--item--result {
        margin-left: 0
    }
}

.match--item--score {
    flex: 0 0 25%
}

@media (min-width:768px) {
    .match--item--score {
        flex: 0 0 16%;
        line-height: 1.25;
        padding-right: calc(var(--spacing) * 1);
        margin-right: auto
    }
}

@media (min-width:992px) {
    .match--item--score {
        padding-right: calc(var(--spacing) * 2)
    }
}

.match--item--btns {
    flex: 0 0 60%;
    order: 99;
    white-space: nowrap;
    margin-left: auto;
    display: flex;
    gap: 1px;
    align-items: flex-end;
    justify-content: flex-end;
    min-width: 30%
}

@media (min-width:768px) {
    .match--item--btns {
        flex: 0 0 30%;
        order: 98;
        align-items: flex-start;
        padding-left: 0
    }
}

@media (min-width:992px) {
    .match--item--btns {
        flex: 0 0 26%;
        min-width: 0
    }
}

.match--item--btns .match--item--btn {
    max-width: 50%
}

/* @media (min-width:768px) {
    .match--item--btns .match--item--btn {
        max-width: 100%
    }
} */

@media (max-width:991.98px) {
    .match--item--btns.is-btn-single {
        flex: 0 0 30%
    }

    .match--item--btns.is-btn-single .match--item--btn {
        max-width: 100%
    }
}

.match--item--media.is-result {
    order: 97;
    flex: 0 1 36%;
    margin-top: 0;
    padding-right: calc(var(--spacing) / 4)
}

@media (min-width:768px) {
    .match--item--media.is-result {
        order: 99;
        flex: 1 1 100%;
        padding-left: 70%;
        margin-top: -1.9em
    }
}

@media (min-width:992px) {
    .match--item--media.is-result {
        padding-left: 74%
    }
}

@media (max-width:320px) {
    .match--item--media.is-result {
        flex: 1 1 100%;
        margin-bottom: 0.5em
    }
}

.match--item--media.is-result.is-btn-single {
    flex: 0 1 60%
}

@media (min-width:768px) {
    .match--item--media.is-result.is-btn-single {
        flex: 1 1 100%
    }
}