@charset "UTF-8";

/* ======================================================
* baseball game_year_overview（ENEOS野球部 試合日程・結果）
* ------------------------------------------------------
* - Override
* - Keyframes
* - MainVisual
* - BaseballNav（TOP用追従ナビ）
* - Content
====================================================== */

/* ------------------------------------------------------
* hidden
------------------------------------------------------ */
@media (min-width: 767px) {
  .game-year-overview-pc-hidden {
    display: none;
  }
}
@media screen and (max-width: 766px) {
  .game-year-overview-sp-hidden {
    display: none;
  }
}

@media screen and (min-width: 1440px) {
  .game-year-overview-md-hidden {
    display: none;
  }
}
/* ------------------------------------------------------
* Override
------------------------------------------------------ */
@media (min-width: 767px) {
  .game-year-overview-layout {
    max-width: 1200px;
    margin: 0 auto;
  }
  .lowerContentWrapper {
    margin-bottom: clamp(130px,calc(130px + (266 - 130) * ((100vw - 768px) / (1920 - 768))),266px);
  }
}
@media screen and (max-width: 766px) {
  .lowerContentWrapper {
    margin-bottom: max(80px, calc(80 / 375 * 100vw));
  }
}

/* ------------------------------------------------------
* Keyframes
------------------------------------------------------ */
@keyframes transformGameYearHeadingLink {
  0% {
    opacity: 1
  }
  30% {
    opacity: 0;
    right: clamp(5px, calc(5px + (10 - 5) * ((100vw - 768px) / (1920 - 768))), 10px);
  }
  70% {
    opacity: 0;
    right: clamp(20px, calc(20px + (25 - 20) * ((100vw - 768px) / (1925 - 768))), 25px);
  }
  to {
    opacity: 1;
    right: clamp(15px, calc(15px + (20 - 15) * ((100vw - 768px) / (1920 - 768))), 20px);
  }
}
@keyframes transformGameYearRecordLink {
  0% {
    opacity: 1
  }
  30% {
    opacity: 0;
    right: 24px;
  }
  70% {
    opacity: 0;
    right: 44px;
  }
  to {
    opacity: 1;
    right: 32px;
  }
}
@keyframes transformGameYearResultCardLink {
  0% {
    opacity: 1
  }
  30% {
    opacity: 0;
    right: clamp(15px, calc(15px + (36 - 15) * ((100vw - 768px) / (1920 - 768))), 36px);
  }
  70% {
    opacity: 0;
    right: clamp(28px, calc(28px + (66 - 28) * ((100vw - 768px) / (1920 - 768))), 66px);
  }
  to {
    opacity: 1;
    right: clamp(20px, calc(20px + (48 - 20) * ((100vw - 768px) / (1920 - 768))), 48px);
  }
}
/* ------------------------------------------------------
* Content
------------------------------------------------------ */
/*----- game-year-overview-result-card -----*/
.game-year-overview-result-card__team {
  color: #e94709;
}
.game-year-overview-result-card__opponent {
  color: #666;
}
/*----- game-year-overview-table -----*/
.game-year-overview-table__cell--v2 {
  background-color: #f4f4f0;
}
.game-year-overview-table__cell--v3 {
  position: relative;
  background-color: #eee;
}
.game-year-overview-table__cell--v4 {
  background-color: #e94709;
  color: #fff;
}
.game-year-overview-highlight {
  color: #e94709;
  font-weight: 700;
}

/*----- PC -----*/
@media (min-width: 767px) {
  /*----- game-year-overview-table -----*/
  .game-year-overview-table {
    width: 100%;
    margin-bottom: clamp(20px, calc(20px + (42 - 20) * ((100vw - 768px) / (1920 - 768))), 42px);
  }
  .game-year-overview-table__matrix {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    table-layout: fixed;
  }
  .game-year-overview-table__caption {
    text-align: end;
    font-size: clamp(13px, calc(13px + (16 - 13) * ((100vw - 768px) / (1920 - 768))), 16px);
    line-height: 1.5;
    margin-bottom: clamp(22px, calc(22px + (44 - 22) * ((100vw - 768px) / (1920 - 768))), 44px);
  }
  .game-year-overview-table__caption__item + .game-year-overview-table__caption__item {
    margin-left: clamp(26px, calc(26px + (32 - 26) * ((100vw - 768px) / (1920 - 768))), 32px);
  }
  .game-year-overview-table__width {
    width: calc(100% / 5);
  }
  .game-year-overview-table__cell,
  .game-year-overview-table__cell--v2,
  .game-year-overview-table__cell--v3,
  .game-year-overview-table__cell--v4  {
    padding: clamp(14px, calc(14px + (20 - 14) * ((100vw - 768px) / (1920 - 768))), 20px) 2rem clamp(15px, calc(15px + (24 - 15) * ((100vw - 768px) / (1920 - 768))), 24px);
    font-size: clamp(13px, calc(13px + (16 - 13) * ((100vw - 768px) / (1920 - 768))), 16px);
    line-height: 1.8;
    text-align: center;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  .game-year-overview-table__cell--v5 {
    padding: clamp(14px, calc(14px + (20 - 14) * ((100vw - 768px) / (1920 - 768))), 20px) 2rem clamp(15px, calc(15px + (24 - 15) * ((100vw - 768px) / (1920 - 768))), 24px);
    font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 768px) / (1920 - 768))), 20px);
    line-height: 1.8;
    background-color: #fff;
    text-align: center;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  .game-year-overview-table__cell--v3::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      to top right,
      transparent calc(50% - 0.5px),
      #ddd calc(50% - 0.5px),
      #ddd calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
  }
  /*----- game-year-overview-result-card -----*/
  .game-year-overview-result-card {
    margin-bottom: clamp(21px, calc(21px + (44 - 21) * ((100vw - 768px) / (1920 - 768))), 44px);
  }
  .game-year-overview-result-card:last-child {
    margin-bottom: clamp(21px, calc(21px + (44 - 21) * ((100vw - 768px) / (1920 - 768))), 44px);
  }
  .game-year-overview-result-card__link:before {
    content: "";
    width: clamp(28px, calc(28px + (40 - 28) * ((100vw - 768px) / (1920 - 768))), 40px);
    height: clamp(28px, calc(28px + (40 - 28) * ((100vw - 768px) / (1920 - 768))), 40px);
    background: #e94709;
    position: absolute;
    right:clamp(8px, calc(8px + (30 - 8) * ((100vw - 768px) / (1920 - 768))), 30px);
    top: 50%;
   -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
   -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .game-year-overview-result-card__link:after {
    content: "";
    width: clamp(10px, calc(10px + (15 - 10) * ((100vw - 768px) / (1920 - 768))), 15px);
    height: clamp(10px, calc(10px + (15 - 10) * ((100vw - 768px) / (1920 - 768))), 15px);
   -webkit-transform: rotate(45deg) skew(-15deg, -15deg);
            transform: rotate(45deg) skew(-15deg, -15deg);
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    position: absolute;
    right:clamp(20px, calc(20px + (48 - 20) * ((100vw - 768px) / (1920 - 768))), 48px);
    top: calc(50% - clamp(6px, calc(6px + (7 - 6) * ((100vw - 768px) / (1920 - 768))), 7px));
    z-index: 2;
  }
  .game-year-overview-result-card__link {
    display: flex;
    position: relative;
    color: #282828;
    border: 1px solid #aaa;
    border-left: 6px solid #282828;
    padding-right: clamp(45px, calc(45px + (100 - 45) * ((100vw - 768px) / (1920 - 768))), 100px);
  }
  .game-year-overview-result-card__link:hover {
    border: 1px solid #e94709;
    border-left: 6px solid #e94709;
  }
  .game-year-overview-result-card__link:hover::after {
    animation: transformGameYearResultCardLink .4s ease forwards
  }
  .game-year-overview-result-card__title {
    font-weight: 700;
    font-size : clamp(19px, calc(19px + (24 - 19) * ((100vw - 768px) / (1920 - 768))),24px);
    line-height: 1.4;
  }
  .game-year-overview-result-card__date {
    font-size : clamp(11px, calc(11px + (14 - 11) * ((100vw - 768px) / (1920 - 768))),14px);
    line-height: 1.78;
  }
  .game-year-overview-result-card__head {
    padding: clamp(10px, calc(10px + (14 - 10) * ((100vw - 768px) / (1920 - 768))), 14px) clamp(10px, calc(10px + (15 - 10) * ((100vw - 768px) / (1920 - 768))), 15px) clamp(10px, calc(10px + (20 - 10) * ((100vw - 768px) / (1920 - 768))), 20px);
    width: clamp(210px, calc(210px + (372 - 210) * ((100vw - 768px) / (1920 - 768))), 372px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .game-year-overview-result-card__head > * {
    width: 100%;
  }
  .game-year-overview-result-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    flex: 1;
    background-color: #f4f4f0;
    padding: clamp(10px, calc(10px + (12 - 10) * ((100vw - 768px) / (1920 - 768))), 12px) clamp(10px, calc(10px + (26 - 10) * ((100vw - 768px) / (1920 - 768))), 26px) clamp(13px, calc(13px + (18 - 13) * ((100vw - 768px) / (1920 - 768))), 18px);
  }
  .game-year-overview-result-card__body__inner {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, calc(22px + (60 - 22) * ((100vw - 768px) / (1920 - 768))), 60px);
  }
  .game-year-overview-result-card__body__inner > * {
    width: calc((100% - clamp(45px, calc(45px + (60 - 45) * ((100vw - 768px) / (1920 - 768))), 60px)) / 2);
  }
  .game-year-overview-result-card__body__inner::before {
    content: "";
    position: absolute;
    top: calc(50% + 1px);
    left: 50%;
    width: clamp(20px, calc(20px + (23 - 20) * ((100vw - 768px) / (1920 - 768))), 23px);
    height: clamp(7px, calc(7px + (9 - 7) * ((100vw - 768px) / (1920 - 768))), 9px);
    background-color: #666;
    transform: translateX(-50%);
  }
  .game-year-overview-result-card__score {
    line-height: 1;
    font-size : clamp(64px, calc(64px + (80 - 64) * ((100vw - 768px) / (1920 - 768))), 80px);
    font-weight: 700;
    min-width: 81px;
  }
  .game-year-overview-result-card__lead {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 1;
    font-size : clamp(14px, calc(14px + (18 - 14) * ((100vw - 768px) / (1920 - 768))), 18px);
    font-weight: 700;
    line-height: 1.5;
    top: clamp(3px, calc(3px + (5 - 3) * ((100vw - 768px) / (1920 - 768))), 5px);
  }
  .game-year-overview-result-card__team,
  .game-year-overview-result-card__opponent {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: clamp(2px, calc(2px + (5 - 2) * ((100vw - 768px) / (1920 - 768))), 5px);
    height: stretch;
    font-size : clamp(16px, calc(16px + (20 - 16) * ((100vw - 768px) / (1920 - 768))), 20px);
    text-align: center;
    line-break: anywhere;
  }
  /*----- game-year-overview-list -----*/
  .game-year-overview-list-wrap {
    margin: 0 0 clamp(20px, calc(20px + (44 - 20) * ((100vw - 768px) / (1920 - 768))), 44px);
  }
  .game-year-overview-description-list {
    display: flex;
    flex-flow: row nowrap;
    gap: 0  clamp(17px, calc(17px + (20 - 17) * ((100vw - 768px) / (1920 - 768))), 20px);
    margin: 0 0 clamp(18px, calc(18px + (20 - 18) * ((100vw - 768px) / (1920 - 768))), 20px);
  }
  .game-year-overview-description-list > dt {
    width: clamp(92px, calc(92px + (112 - 92) * ((100vw - 768px) / (1920 - 768))), 112px);
    font-size : clamp(13px, calc(13px + (16 - 13) * ((100vw - 768px) / (1920 - 768))), 16px);
    flex-shrink: 0;
    line-height: 1.375;
    font-weight: 700;
  }
  .game-year-overview-description-list > dd {
    font-size : clamp(13px, calc(13px + (16 - 13) * ((100vw - 768px) / (1920 - 768))), 16px);
    flex-grow: 1;
    line-height: 1.375;
  }
  .game-year-overview-description-list:last-child {
    margin-bottom: 0;
  }
  /*----- game-year-overview-list-box -----*/
  .game-year-overview-list-box {
    padding: clamp(22px, calc(22px + (44 - 22) * ((100vw - 768px) / (1920 - 768))), 44px) clamp(22px, calc(22px + (43 - 22) * ((100vw - 768px) / (1920 - 768))), 43px);
    border: 1px solid #aaa;
    margin: 0 0 clamp(20px, calc(20px + (40 - 20) * ((100vw - 768px) / (1920 - 768))), 40px);
  }
  /*----- game-year-overview-list-v2 -----*/
  .game-year-overview-list-wrap-v2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(16px, calc(16px + (20 - 16) * ((100vw - 768px) / (1920 - 768))), 20px) clamp(16px, calc(16px + (45 - 16) * ((100vw - 768px) / (1920 - 768))), 45px);
  }
  .game-year-overview-list-wrap-v2 > * {
    width: calc((100% - clamp(16px, calc(16px + (45 - 16) * ((100vw - 768px) / (1920 - 768))), 45px)) / 2);
  }
  .game-year-overview-description-list-v2 {
    display: flex;
    flex-flow: row nowrap;
    gap: 0 clamp(16px, calc(16px + (20 - 16) * ((100vw - 768px) / (1920 - 768))), 20px);
    margin: 0;
  }
  .game-year-overview-description-list-v2 > dt {
    width: 4.2em;
    font-size : clamp(13px, calc(13px + (16 - 13) * ((100vw - 768px) / (1920 - 768))), 16px);
    flex-shrink: 0;
    line-height: 1.375;
    font-weight: 700;
  }
  .game-year-overview-description-list-v2 > dd {
    font-size : clamp(13px, calc(13px + (16 - 13) * ((100vw - 768px) / (1920 - 768))), 16px);
    flex-grow: 1;
    line-height: 1.375;
  }
  .game-year-overview-description-list-v2:last-child {
    margin-bottom: 0;
  }
}

/*----- PC 1440px～ -----*/
@media screen and (min-width: 1440px) {
}

/*----- PC 766～1439px -----*/
@media screen and (min-width: 767px) and (max-width: 1439px) {
}

/*----- PC 766～1440px -----*/
@media screen and (min-width: 767px) and (max-width: 1440px) {
}

/*----- TB / SP -----*/
@media screen and (max-width: 1024px) {
}

/*----- SP ～766px -----*/
@media screen and (max-width: 766px) {
  /*----- game-year-overview-table -----*/
  .game-year-overview-table {
    width: 100%;
    margin-bottom: max(22px, calc(22 / 375 * 100vw));
  }
  .game-year-overview-table__matrix {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    table-layout: fixed;
  }
  .game-year-overview-table__caption {
    text-align: end;
    font-size: max(13px, calc(13 / 375 * 100vw));
    line-height: 1.5;
    margin-bottom: max(22px, calc(22 / 375 * 100vw));
  }
  .game-year-overview-table__caption__item + .game-year-overview-table__caption__item {
    margin-left: max(26px, calc(26 / 375 * 100vw));
  }
  .game-year-overview-table__width {
    width: calc(100% / 5);
  }
  .game-year-overview-table__cell,
  .game-year-overview-table__cell--v2,
  .game-year-overview-table__cell--v3,
  .game-year-overview-table__cell--v4  {
    padding: max(6px, calc(6 / 375 * 100vw)) max(5px, calc(5 / 375 * 100vw)) max(8px, calc(8 / 375 * 100vw));
    font-size: max(10px, calc(10 / 375 * 100vw));
    line-height: 1.5;
    text-align: center;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  .game-year-overview-table__cell--v5 {
    padding: max(6px, calc(10 / 375 * 100vw)) max(5px, calc(5 / 375 * 100vw)) max(8px, calc(8 / 375 * 100vw));
    font-size: max(12px, calc(12 / 375 * 100vw));
    line-height: 1.4;
    background-color: #fff;
    text-align: center;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  .game-year-overview-table__cell--v3::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      to top right,
      transparent calc(50% - 0.5px),
      #ddd calc(50% - 0.5px),
      #ddd calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
  }
  /*----- game-year-overview-result-card -----*/
  .game-year-overview-result-card {
    margin-bottom: max(20px, calc(20 / 375 * 100vw));
  }
  .game-year-overview-result-card__link:before {
    content: "";
    width: max(20px, calc(20 / 375 * 100vw));
    height: max(20px, calc(20 / 375 * 100vw));
    background: #e94709;
    position: absolute;
    right:max(10px, calc(10 / 375 * 100vw));
    top: 50%;
   -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .game-year-overview-result-card__link:after {
    content: "";
    width: max(7px, calc(7 / 375 * 100vw));
    height: max(7px, calc(7 / 375 * 100vw));
   -webkit-transform: rotate(45deg) skew(-15deg, -15deg);
            transform: rotate(45deg) skew(-15deg, -15deg);
    position: absolute;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    position: absolute;
    right: max(19px, calc(19 / 375 * 100vw));
    top: calc(50% - max(3px, calc(3 / 375 * 100vw)) );
    z-index: 2;
  }
  .game-year-overview-result-card__link {
    display: flex;
    position: relative;
    color: #282828;
    border: 1px solid #aaa;
    border-left: 4px solid #282828;
    padding-right: max(40px, calc(40 / 375 * 100vw));
  }
  .game-year-overview-result-card__title {
    font-weight: 700;
    font-size : max(17px, calc(17 / 375 * 100vw));
    line-height: 1.5;
  }
  .game-year-overview-result-card__venue {
    margin-top: max(4px, calc(4 / 375 * 100vw));
    line-height: 1.5;
    font-size : max(10px, calc(10 / 375 * 100vw));
  }
  .game-year-overview-result-card__date {
    line-height: 1.8;
    font-size : max(10px, calc(10 / 375 * 100vw));
  }
  .game-year-overview-result-card__head {
    padding: max(8px, calc(8 / 375 * 100vw)) max(10px, calc(10 / 375 * 100vw)) max(10px, calc(10 / 375 * 100vw));
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .game-year-overview-result-card__head > * {
    width: 100%;
  }
  .game-year-overview-result-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    flex: 1;
    padding: max(10px, calc(10 / 375 * 100vw)) max(8px, calc(8 / 375 * 100vw));
    border-right: 1px solid #aaa;
    background-color: #f4f4f0;
  }
  .game-year-overview-result-card__body__inner {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 max(36px, calc(36 / 375 * 100vw));
  }
  .game-year-overview-result-card__body__inner > *:first-child {
    flex-direction: column-reverse;
  }
  .game-year-overview-result-card__body__inner::before {
    content: "";
    position: absolute;
    top:  max(19px, calc(19 / 375 * 100vw));
    left: 50%;
    width: max(11px, calc(11 / 375 * 100vw));
    height: max(5px, calc(5 / 375 * 100vw));
    background-color: #666;
    transform: translateX(-50%);
  }
  .game-year-overview-result-card__score {
    font-size : calc((40 / 375) * 100vw);
    min-height: max(40px, calc(40 / 375 * 100vw));
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
  }
  .game-year-overview-result-card__lead {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    font-size : max(11px, calc(11 / 375 * 100vw));
    font-weight: 700;
    line-height: 1.5;
    margin-top: max(8px, calc(8 / 375 * 100vw));
  }
  .game-year-overview-result-card__team,
  .game-year-overview-result-card__opponent {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: calc((100% - max(39px, calc(39 / 375 * 100vw))) / 2);
    font-size : max(11px, calc(11 / 375 * 100vw));
    text-align: center;
    line-break: anywhere;
  }
  /*----- game-year-overview-list -----*/
  .game-year-overview-list-wrap {
    margin: 0 0 max(18px, calc(18 / 375 * 100vw));
  }
  .game-year-overview-description-list {
    display: flex;
    flex-flow: row nowrap;
    gap: 0  max(15px, calc(15 / 375 * 100vw));
    margin: 0 0 max(14px, calc(14 / 375 * 100vw));
  }
  .game-year-overview-description-list > dt {
    width: max(94px, calc(94 / 375 * 100vw));
    font-size : max(13px, calc(13 / 375 * 100vw));
    flex-shrink: 0;
    line-height: 1.5;
    font-weight: 700;
  }
  .game-year-overview-description-list > dd {
    font-size : max(13px, calc(13 / 375 * 100vw));
    flex-grow: 1;
    line-height: 1.5;
  }
  .game-year-overview-description-list:last-child {
    margin-bottom: 0;
  }
  /*----- game-year-overview-list-box -----*/
  .game-year-overview-list-box {
    padding: max(13px, calc(13 / 375 * 100vw)) max(15px, calc(15 / 375 * 100vw));
    border: 1px solid #aaa;
    margin: 0 0 max(20px, calc(20 / 375 * 100vw));
  }
  /*----- game-year-overview-list-v2 -----*/
  .game-year-overview-list-wrap-v2 {
  }
  .game-year-overview-description-list-v2 {
    display: flex;
    flex-flow: row nowrap;
    gap: 0  max(16px, calc(16 / 375 * 100vw));
    margin: 0 0 max(16px, calc(16 / 375 * 100vw));
  }
  .game-year-overview-description-list-v2 > dt {
    width: 4.2em;
    font-size :  max(13px, calc(13 / 375 * 100vw));
    flex-shrink: 0;
    line-height: 1.375;
    font-weight: 700;
  }
  .game-year-overview-description-list-v2 > dd {
    font-size :  max(13px, calc(13 / 375 * 100vw));
    flex-grow: 1;
    line-height: 1.375;
  }
  .game-year-overview-description-list-v2:last-child {
    margin-bottom: 0;
  }
}