@charset "UTF-8";

/* ======================================================
 * baseball eneosfan_trajectory_victory_detail（ENEOS野球部優勝詳細）
 * ------------------------------------------------------
 * - Wrapper
 * - Override
 * - BaseballNav（追従ナビ）
 * - ScrollLock
====================================================== */

/* ------------------------------------------------------
 * Override
------------------------------------------------------ */

.eneosfan-trajectory-victory-detail-layout {
  max-width: 1200px;
}

@media (min-width: 767px) {
  .eneosfan-trajectory-victory-detail-layout {
    margin: 0 auto 15rem;
  }
}

@media screen and (max-width: 766px) {
  .eneosfan-trajectory-victory-detail-layout {
    margin: 0 auto;
    margin-bottom: max(68px, calc(80 / 375 * 100vw));
  }
}

.eneosfan-trajectory-victory-detail-layout > *:last-child,
.eneosfan-trajectory-victory-detail-layout > section:last-child > *:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------
* Keyframes
------------------------------------------------------ */
@keyframes transformEeneosfanTrajectoryVictoryCardLink {
  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
------------------------------------------------------ */

/*----- eneosfan-trajectory-victory-detail-box -----*/
.eneosfan-trajectory-victory-detail-box {
  display: flex;
  flex-direction: column;
  background-color: #f4f4f0;
}
/*----- eneosfan-trajectory-victory-detail-card -----*/
.eneosfan-trajectory-victory-detail-card__team {
  color: #e94709;
}
.eneosfan-trajectory-victory-detail-card__opponent {
  color: #666;
}
/*----- eneosfan-trajectory-victory-detail-figure -----*/
.eneosfan-trajectory-victory-detail-figure-wrap{
  display: flex;
  justify-content: center;
}
.eneosfan-trajectory-victory-detail-figure{
  max-width: 100%;
}
.eneosfan-trajectory-victory-detail-figure__frame > img{
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/*----- PC -----*/
@media (min-width: 767px) {
  /*----- eneosfan-trajectory-victory-detail-figure-wrap -----*/
  .eneosfan-trajectory-victory-detail-figure-wrap{
    margin: 0 auto clamp(2rem, calc(2rem + (100vw - 768px) * 25 / 1152), 4.5rem);
    max-width: 160rem;
  }
  /*----- eneosfan-trajectory-victory-detail-box -----*/
  .eneosfan-trajectory-victory-detail-box {
    row-gap: clamp(2rem, calc(2rem + (100vw - 768px) * 27 / 1152), 4.7rem);
    margin-bottom: clamp(2.1rem, calc(2.1rem + (100vw - 768px) * 23 / 1152), 4.4rem);
    padding: clamp(2.1rem, calc(2.1rem + (100vw - 768px) * 23 / 1152), 4.4rem);
  }
  .eneosfan-trajectory-victory-detail-box__title{
    font-size: clamp(2rem, calc(2rem + (100vw - 768px) * 6 / 1152), 2.6rem);
    color: #282828;
    line-height: 1.5;
  }
  /*----- eneosfan-trajectory-victory-detail-card -----*/
  .eneosfan-trajectory-victory-detail-card-wrap{
    display: flex;
    flex-direction: column;
    row-gap: clamp(2.1rem, calc(2.1rem + (100vw - 768px) * 23 / 1152), 4.4rem);
  }
  .eneosfan-trajectory-victory-detail-card {
    background-color: #fff;
  }
  .eneosfan-trajectory-victory-detail-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;
  }
  .eneosfan-trajectory-victory-detail-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: 2px solid #fff;
    border-right: 2px solid #fff;
    position: absolute;
    right:clamp(20px, calc(20px + (48  - 20) * ((100vw - 768px) / (1920 - 768))), 48px);
    top: calc(50% - clamp(5px, calc(5px + (6  - 5) * ((100vw - 768px) / (1920 - 768))), 6px));
    z-index: 2;
  }
  .eneosfan-trajectory-victory-detail-card__link {
    display: flex;
    position: relative;
    color: #282828;
    border: 1px solid #aaa;
    border-left: clamp(5px, calc(5px + (6 - 5) * ((100vw - 768px) / (1920 - 768))), 6px) solid #282828;
    height: clamp(90px, calc(90px + (112  - 90) * ((100vw - 768px) / (1920 - 768))), 112px);
    padding-right: clamp(45px, calc(45px + (100  - 45) * ((100vw - 768px) / (1920 - 768))), 100px);
  }
  .eneosfan-trajectory-victory-detail-card__link--nolink {
    display: flex;
    color: #282828;
    border: 1px solid #aaa;
    border-left: 6px solid #282828;
    height: clamp(90px, calc(90px + (112  - 90) * ((100vw - 768px) / (1920 - 768))), 112px);
    padding-right: clamp(45px, calc(45px + (100  - 45) * ((100vw - 768px) / (1920 - 768))), 100px);
  }
  .eneosfan-trajectory-victory-detail-card__link:hover {
    border: 1px solid #e94709;
    border-left: clamp(5px, calc(5px + (6 - 5) * ((100vw - 768px) / (1920 - 768))), 6px) solid #e94709;
  }
  .eneosfan-trajectory-victory-detail-card__link:hover::after {
    animation: transformEeneosfanTrajectoryVictoryCardLink .4s ease forwards
  }
  .eneosfan-trajectory-victory-detail-card__title {
    font-weight: 700;
    font-size: clamp(1.9rem, calc(1.9rem + (100vw - 768px) * 5 / 1152), 2.4rem);
    line-height: 1.4;
  }
  .eneosfan-trajectory-victory-detail-card__date {
    margin-top: 3px;
    line-height: 1.7;
    font-size: clamp(1.1rem, calc(1.1rem + (100vw - 768px) * 3 / 1152), 1.4rem);
  }
  .eneosfan-trajectory-victory-detail-card__head {
    padding: 1.5rem;
    width: clamp(190px, calc(190px + (343  - 190) * ((100vw - 768px) / (1920 - 768))), 343px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .eneosfan-trajectory-victory-detail-card__head > * {
    width: 100%;
  }
  .eneosfan-trajectory-victory-detail-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    flex: 1;
    background-color: #f4f4f0;
    padding: clamp(7px, calc(7px + (9 - 7) * ((100vw - 768px) / (1920 - 768))), 9px) clamp(10px, calc(10px + (26 - 10) * ((100vw - 768px) / (1920 - 768))), 26px);
  }
  .eneosfan-trajectory-victory-detail-card__body__inner {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(45px, calc(45px + (60 - 45) * ((100vw - 768px) / (1920 - 768))), 60px);
  }
  .eneosfan-trajectory-victory-detail-card__body__inner > * {
    width: calc((100% - clamp(45px, calc(45px + (60 - 45) * ((100vw - 768px) / (1920 - 768))), 60px)) / 2);
  }
  .eneosfan-trajectory-victory-detail-card__body__inner::before {
    content: "";
    position: absolute;
    top: 47%;
    left: 50%;
    width: clamp(17px, calc(17px + (23 - 17) * ((100vw - 768px) / (1920 - 768))), 23px);
    height: clamp(7px, calc(7px + (9 - 7) * ((100vw - 768px) / (1920 - 768))), 9px);
    background-color: #666;
    transform: translateX(-50%);
  }
  .eneosfan-trajectory-victory-detail-card__score {
    height: clamp(70px, calc(70px + (92  - 70) * ((100vw - 768px) / (1920 - 768))), 92px);
    line-height: 1;
    font-size : clamp(6.4rem, calc(6.4rem + (100vw - 768px) * 16 / 1152), 8rem);
    font-weight: 700;
    min-width: clamp(52px, calc(52px + (70 - 52) * ((100vw - 768px) / (1920 - 768))), 70px);
  }
  .eneosfan-trajectory-victory-detail-card__lead {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: clamp(1.4rem, calc(1.4rem + (100vw - 768px) * 4 / 1152), 1.8rem);
    font-weight: 700;
    line-height: 1.5;
    top: 5px;
  }
  .eneosfan-trajectory-victory-detail-card__team,
  .eneosfan-trajectory-victory-detail-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;
  }
}

/*----- PC -----*/
@media (min-width: 1025px) {
}

/*----- TB / SP -----*/
@media print, screen and (min-width: 768px) {
}


/*----- SP ～767px -----*/
@media screen and (max-width: 766px) {
  /*----- eneosfan-trajectory-victory-detail-figure -----*/
  .eneosfan-trajectory-victory-detail-figure-wrap{
    margin: 0 auto 2rem;
  }
  /*----- eneosfan-trajectory-victory-detail-box -----*/
  .eneosfan-trajectory-victory-detail-box {
    row-gap: 2.1rem;
    margin-bottom: clamp(2.1rem, calc(2.1rem + (100vw - 768px) * 23 / 1152), 4.4rem);
    padding: 1.4rem 1.5rem;
  }
  .eneosfan-trajectory-victory-detail-box__title{
    font-size: max(13px, calc(16 / 375 * 100vw));
    color: #282828;
    line-height: 1.5;
  }
  /*----- eneosfan-trajectory-victory-detail-card -----*/
  .eneosfan-trajectory-victory-detail-card-wrap{
    display: flex;
    flex-direction: column;
    row-gap: 2.2rem;
  }
  .eneosfan-trajectory-victory-detail-card {
    background-color: #fff;
  }
  .eneosfan-trajectory-victory-detail-card__link:before {
    content: "";
    width: max(17px, calc(20 / 375 * 100vw));
    height: max(17px, calc(20 / 375 * 100vw));
    background: #e94709;
    position: absolute;
    right: max(8px, calc(10 / 375 * 100vw));
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .eneosfan-trajectory-victory-detail-card__link:after {
    content: "";
    width: max(5px, calc(7 / 375 * 100vw));
    height: max(5px, calc(7 / 375 * 100vw));
    -webkit-transform: rotate(45deg) skew(-15deg, -15deg);
            transform: rotate(45deg) skew(-15deg, -15deg);
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    position: absolute;
    right: max(15px, calc(18 / 375 * 100vw));
    top: 47%;
    z-index: 2;
  }
  .eneosfan-trajectory-victory-detail-card__link {
    display: flex;
    position: relative;
    color: #282828;
    border: 1px solid #aaa;
    border-left: 3px solid #282828;
    padding-right: max(34px, calc(41 / 375 * 100vw));
  }
  .eneosfan-trajectory-victory-detail-card__link--nolink {
    display: flex;
    color: #282828;
    border: 1px solid #aaa;
    border-left: 3px solid #282828;
    padding-right: max(34px, calc(41 / 375 * 100vw));
  }
  .eneosfan-trajectory-victory-detail-card__title {
    font-weight: 700;
    font-size: max(14px, calc(17 / 375 * 100vw));
    line-height: 1.4;
  }
  .eneosfan-trajectory-victory-detail-card__date {
    position: relative;
    top: -2px;
    margin-top: 3px;
    line-height: 1.7;
    font-size: max(8px, calc(10 / 375 * 100vw));
  }
  .eneosfan-trajectory-victory-detail-card__head {
    padding: 1.1rem;
    width: max(89px, calc(105 / 375 * 100vw));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .eneosfan-trajectory-victory-detail-card__head > * {
    width: 100%;
  }
  .eneosfan-trajectory-victory-detail-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    flex: 1;
    padding: 0.6rem 0.8rem;
    background-color: #f4f4f0;
    border-right: 1px solid #aaa;
  }
  .eneosfan-trajectory-victory-detail-card__body__inner {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.2rem;
  }
  .eneosfan-trajectory-victory-detail-card__body__inner > * {
    width: calc((100% - 2.2rem) / 2);
  }
  .eneosfan-trajectory-victory-detail-card__body__inner::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 50%;
    width: max(9px, calc(11 / 375 * 100vw));
    height: max(3px, calc(4 / 375 * 100vw));
    background-color: #666;
    transform: translateX(-50%);
  }
  .eneosfan-trajectory-victory-detail-card__score {
    height: max(39px, calc(46 / 375 * 100vw));
    line-height: 1;
    font-size: max(34px, calc(40 / 375 * 100vw));
    font-weight: 700;
    min-width: 26px;
  }
  .eneosfan-trajectory-victory-detail-card__lead {
    display: flex;
    position: relative;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: max(9px, calc(11 / 375 * 100vw));
    font-weight: 700;
    line-height: 1.5;
    top: -2px;
  }
  .eneosfan-trajectory-victory-detail-card__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: max(1px, calc(2 / 375 * 100vw));
    height: stretch;
    text-align: center;
    line-break: anywhere;
  }
  .eneosfan-trajectory-victory-detail-card__opponent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: max(1px, calc(2 / 375 * 100vw));
    height: stretch;
    text-align: center;
    line-break: anywhere;
  }
  .eneosfan-trajectory-victory-detail-card__body__inner > *:first-child {
    flex-direction: column-reverse;
  }
}