/* Scss Document */
img {
  vertical-align: bottom;
}

.anchor {
  padding-top: 70px;
  margin-top: -70px;
}
@media (min-width: 960px) {
  .anchor {
    padding-top: 120px;
    margin-top: -120px;
  }
}

.color {
  position: relative;
}
.color:before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--colorWeakGray);
  position: absolute;
  z-index: -1;
  top: 0;
}

@keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 50px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 50px;
    opacity: 0;
  }
}
body.scrolled .scrolldown {
  opacity: 0;
}

#mv {
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  grid-gap: var(--space2);
}
#mv > .cont {
  height: 100%;
  width: 100%;
}
#mv > .cont > .box_wrap {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#mv .logo_wrap .logo {
  width: 210px;
  aspect-ratio: 499/404;
}
#mv .logo_wrap .logo .icon {
  background-image: url("../images/home/logo_mv.png");
}
#mv .day {
  color: #231815;
  font-weight: bold;
}
#mv > .news_wrap {
  background: var(--colorWeakGray);
  padding: calc(var(--space1) * 1.5) 0;
  min-height: 60px;
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
  --labelHeight: 32px;
  box-sizing: border-box;
}
#mv > .news_wrap .container {
  position: relative;
  height: 100%;
}
#mv > .news_wrap .title {
  position: absolute;
  left: 0;
  top: 0;
  height: var(--labelHeight);
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--primaryColor);
}
#mv > .news_wrap .list_wrap .list {
  padding: 0;
}
#mv > .news_wrap .list_wrap .list > .a .label {
  display: flex;
  justify-content: flex-end;
  height: var(--labelHeight);
  align-items: center;
  flex-direction: row;
  color: var(--primaryColor);
}
#mv .fixed_scroll_area {
  position: absolute;
  bottom: 0;
}
@media (min-width: 768px) {
  #mv .logo_wrap .logo {
    width: 300px;
  }
  #mv .day.h2 {
    font-size: 3.2rem;
  }
  #mv .news_wrap .container {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  #mv .news_wrap .title {
    position: relative;
    width: 7rem;
    height: -moz-fit-content;
    height: fit-content;
  }
  #mv .news_wrap .list_wrap {
    width: calc(100% - 7rem);
  }
  #mv .news_wrap .list_wrap .list > .a {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
  }
  #mv .news_wrap .list_wrap .list > .a .label {
    height: auto;
  }
}
@media (min-width: 960px) {
  #mv .logo_wrap .logo {
    width: 399px;
  }
  #mv .day.h2 {
    font-size: 2.2rem;
  }
  #mv .scrolldown {
    display: none !important;
  }
}

#concept {
  background: var(--secondaryColor);
  color: #FFF;
}
#concept .block:last-child {
  margin-bottom: 0;
}
#concept .block.laliga {
  padding: var(--space4) 0 var(--space4);
  color: #FFFFFF;
}
#concept .block.laliga span {
  display: inline;
}
#concept .block.laliga.color {
  background-color: var(--primaryColor);
}
#concept .block.laliga .section_title_wrap .title .eng,
#concept .block.laliga .section_title_wrap .title .ja {
  color: #FFFFFF !important;
}
#concept .block.laliga .box_wrap {
  display: block;
}
@media (min-width: 960px) {
  #concept .block:not(.laliga):not(:last-child) {
    margin-bottom: 60px;
  }
  #concept .block.laliga {
    padding: 45px 0;
  }
  #concept .block.laliga span {
    display: inline-block;
  }
}

#ambassador .profile_wrap,
#guest .profile_wrap {
  display: flex;
  flex-direction: column;
  grid-gap: var(--space1) var(--space4);
}
#ambassador .profile_wrap .profile,
#guest .profile_wrap .profile {
  position: relative;
}
#ambassador .profile_wrap .profile .name_wrap,
#guest .profile_wrap .profile .name_wrap {
  display: flex;
  flex-direction: column;
  grid-gap: 2px;
}
#ambassador .profile_wrap .profile .name_wrap *:not(.name),
#guest .profile_wrap .profile .name_wrap *:not(.name) {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-weight: 400;
}
#ambassador .profile_wrap .profile .name_wrap *.name,
#guest .profile_wrap .profile .name_wrap *.name {
  font-size: 1.8rem;
}
@media (min-width: 521px) {
  #ambassador .profile_wrap,
  #guest .profile_wrap {
    flex-direction: row;
    align-items: center;
  }
  #ambassador .profile_wrap .photo,
  #guest .profile_wrap .photo {
    width: 280px;
  }
  #ambassador .profile_wrap .profile,
  #guest .profile_wrap .profile {
    width: calc(100% - (280px + var(--space4)));
  }
  #ambassador .profile_wrap .profile .position,
  #guest .profile_wrap .profile .position {
    position: absolute;
    bottom: calc(100% + var(--space4));
  }
}

#outline {
  padding-top: var(--space5);
  padding-bottom: calc(var(--space5) * 2);
  background: var(--secondaryColor);
  color: #FFF;
}
#outline .title a {
  text-decoration: none;
}
#outline .title a:hover {
  text-decoration: underline;
}
#outline .list_outline_wrap {
  --labelWidth: 100%;
  --contWidth: 100%;
  --listGap: var(--space2);
}
#outline .list_outline_wrap .list {
  border: 0;
  flex-wrap: wrap;
  grid-gap: var(--space1) var(--listGap);
}
#outline .list_outline_wrap .list .label {
  width: var(--labelWidth);
}
#outline .list_outline_wrap .list .cont {
  width: var(--contWidth);
}
@media (min-width: 768px) {
  #outline .list_outline_wrap {
    --labelWidth: 160px;
    --contWidth: calc(100% - (var(--labelWidth) + var(--space2)));
  }
  #outline .list_outline_wrap .list {
    align-items: flex-start;
  }
}

#schedule {
  background: var(--colorWeakGray);
}

#match {
  padding-bottom: calc(var(--space5) * 2);
}
#match .block_group .sub_block {
  margin-bottom: var(--space4);
  --teamMargin: calc(var(--space1) / 2);
}
#match .block_group .sub_block:last-child {
  margin-bottom: 0;
}
#match .block_group .sub_block .head {
  width: 100%;
  background: var(--secondaryColor);
  color: #FFF;
  text-align: center;
  height: 32px;
  margin-bottom: var(--teamMargin);
}
#match .block_group .sub_block .head .inner {
  display: flex;
  flex-direction: row;
  grid-gap: 0 var(--space2);
  font-size: 1.15rem;
  justify-content: center;
  align-items: center;
  height: 100%;
}
#match .block_group .sub_block .body .columns {
  --columnColumnGap: var(--teamMargin);
  --columnRowGap: var(--teamMargin);
  --columnWidth: calc((100% - var(--columnColumnGap) * 3) / 4);
}
#match .block_group .sub_block .body .columns .column {
  background: var(--colorWeakGray);
  padding: var(--space1) 0 5px;
}
#match .block_group .sub_block .body .team_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
#match .block_group .sub_block .body .team_wrap .emblem {
  width: 62%;
  margin-bottom: calc(var(--space1) / 2);
}
#match .block_group .sub_block .body .team_wrap .name,
#match .block_group .sub_block .body .team_wrap .area {
  font-size: 0.45rem;
  line-height: 1.5;
}
#match .block_day .head .title_wrap .title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  grid-gap: calc(var(--space1) / 2) var(--space2);
  letter-spacing: normal;
}
#match .block_day .head .title_wrap .title *:not(.h2) {
  font-size: 0.6rem;
}
#match .block_day .head .title_wrap .title a {
  color: var(--textcolor);
}
#match .block_day .head .title_wrap .title a span {
  display: inline;
}
#match .block_day .list_match_wrap {
  --labelWidth: 100%;
  --contWidth: 100%;
  --listGap: var(--space2);
}
#match .block_day .list_match_wrap .list {
  border-color: #CCC;
  padding: var(--space1) 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
#match .block_day .list_match_wrap .list:first-child {
  border-top-width: 1px;
  border-top-style: solid;
}
#match .block_day .list_match_wrap .list > .inner {
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  grid-gap: var(--space1) var(--listGap);
}
#match .block_day .list_match_wrap .list > .inner .label {
  display: flex;
  flex-direction: row;
  font-size: 0.6rem;
  align-items: center;
  grid-gap: var(--space1) var(--space2);
  width: var(--labelWidth);
}
#match .block_day .list_match_wrap .list > .inner .label .group_name {
  background: var(--primaryColor);
  color: #FFF;
  padding: 5px;
  min-width: 54px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
#match .block_day .list_match_wrap .list > .inner .cont {
  width: var(--contWidth);
}
#match .block_day .list_match_wrap .list .result_wrap {
  display: flex;
  flex-direction: row;
  --scoreWrapSize: 120px;
  --resultMargin: var(--space1);
  align-items: center;
}
#match .block_day .list_match_wrap .list .result_wrap .team {
  width: calc((100% - var(--scoreWrapSize) - var(--resultMargin) * 2) / 2);
  display: flex;
  align-items: center;
  grid-gap: var(--space1);
}
#match .block_day .list_match_wrap .list .result_wrap .team.team_left {
  flex-direction: row-reverse;
}
#match .block_day .list_match_wrap .list .result_wrap .team.team_right {
  flex-direction: row;
}
#match .block_day .list_match_wrap .list .result_wrap .team .emblem {
  width: 45px;
}
#match .block_day .list_match_wrap .list .result_wrap .team .name {
  font-size: 0.5rem;
}
#match .block_day .list_match_wrap .list .result_wrap .score_wrap {
  display: flex;
  flex-direction: column;
  grid-gap: calc(var(--space1) / 2) 0;
  align-items: center;
  width: var(--scoreWrapSize);
  letter-spacing: normal;
}
#match .block_day .list_match_wrap .list .result_wrap .score_wrap .score {
  font-size: 1.8rem;
  line-height: 1;
}
#match .block_day .list_match_wrap .list .result_wrap .score_wrap .score .num {
  width: 40px;
  text-align: center;
}
#match .block_day .list_match_wrap .list .result_wrap .score_wrap .score.pk_score {
  font-size: 90%;
  position: relative;
}
#match .block_day .list_match_wrap .list .result_wrap .score_wrap .score.pk_score .num {
  width: 20px;
}
#match .block_day .list_match_wrap .list .result_wrap .score_wrap .score.pk_score::before {
  content: "PK";
  position: absolute;
  right: 100%;
}
@media (min-width: 768px) {
  #match .block_group .sub_block {
    display: flex;
    grid-gap: var(--teamMargin);
    flex-direction: row;
  }
  #match .block_group .sub_block > .head {
    width: calc((100% - var(--teamMargin) * 4) / 5);
    margin: 0 !important;
    height: auto;
  }
  #match .block_group .sub_block > .head .inner {
    font-size: 1rem;
    flex-direction: column;
  }
  #match .block_group .sub_block > .head .inner .name {
    font-size: 5rem;
    line-height: 1;
  }
  #match .block_group .sub_block > .body {
    width: calc(100% - (100% - var(--teamMargin) * 4) / 5 - var(--teamMargin));
  }
  #match .block_group .sub_block > .body .columns .column {
    padding: var(--space2) 0;
  }
  #match .block_group .sub_block > .body .team_wrap .name {
    font-size: 0.9rem;
  }
  #match .block_group .sub_block > .body .team_wrap .area {
    font-size: 0.72rem;
  }
  #match .block_day .list_match_wrap {
    --labelWidth: 200px;
    --contWidth: calc(100% - (var(--labelWidth) + var(--listGap)));
  }
  #match .block_day .list_match_wrap .list > .inner {
    flex-direction: row;
  }
  #match .block_day .list_match_wrap .list > .inner .label {
    flex-direction: column;
    align-items: flex-start;
    grid-row-gap: calc(var(--space1) / 2);
  }
  #match .block_day .list_match_wrap .list .result_wrap {
    --scoreWrapSize: 160px;
  }
  #match .block_day .list_match_wrap .list .result_wrap .team .emblem {
    width: 62px;
  }
  #match .block_day .list_match_wrap .list .result_wrap .team .name {
    font-size: 0.8rem;
  }
  #match .block_day .list_match_wrap .list .result_wrap .score_wrap .score {
    font-size: 3rem;
  }
  #match .block_day .list_match_wrap .list .result_wrap .score_wrap .score .num {
    width: 60px;
  }
  #match .block_day .list_match_wrap .list .result_wrap .score_wrap .score.score_pk {
    font-size: 90%;
  }
  #match .block_day .list_match_wrap .list .result_wrap .score_wrap .score.score_pk .num {
    width: 20px;
  }
}
@media (min-width: 960px) {
  #match .block_group {
    margin-bottom: var(--space5);
  }
  #match .block_day .head .title_wrap .title *:not(.h2) {
    font-size: 0.9rem;
  }
  #match .block_day .list_match_wrap .list {
    padding: var(--space2) 0;
  }
  #match .block_day .list_match_wrap .list > .inner {
    align-items: center;
  }
  #match .block_day .list_match_wrap .list > .inner .label {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.8rem;
    grid-row-gap: var(--space1);
  }
  #match .block_day .list_match_wrap .list .result_wrap {
    --scoreWrapSize: 180px;
  }
}

#main_sponsor .block {
  margin-bottom: var(--space5);
}
#main_sponsor .block .head .h5 {
  font-size: var(--fontSize_n);
}
#main_sponsor .banners {
  display: flex;
  grid-gap: var(--space2) var(--space4);
  justify-content: center;
}
#main_sponsor .banners .banner {
  --maxWidth: 360px;
}
#main_sponsor .banners .banner .logo {
  max-width: var(--maxWidth);
}
#main_sponsor .banners .banner[key=parceiro] {
  --maxWidth: 239px;
}
@media (max-width: 767px) {
  #main_sponsor .banners {
    flex-wrap: wrap;
  }
  #main_sponsor .banners .banner[key=naganocity] {
    --maxWidth: 128px;
  }
  #main_sponsor .banners .banner[key=iizuna] {
    --maxWidth: 135px;
  }
  #main_sponsor .banners .banner[key=jleague] {
    --maxWidth: 80px;
  }
  #main_sponsor .banners .banner[key=naganofa] {
    --maxWidth: 72px;
  }
  #main_sponsor .banners .banner[key=meijiyasudaseimei] {
    --maxWidth: 186px;
  }
  #main_sponsor .banners .banner[key=mitsuisumitomokaijo] {
    --maxWidth: 214px;
  }
}

#sponsor .row {
  padding: var(--space3) 0;
}
#sponsor .row:not(:last-child) {
  border-bottom: 1px solid #CCC;
}
#sponsor .row .columns {
  --gap: 0;
  align-items: center;
}
#sponsor .row .columns .column {
  text-align: center;
}
#sponsor .row .columns .column .text {
  font-size: 0.75rem;
  font-family: "Noto Sans JP", sans-serif !important;
}
#sponsor .row.row1 .columns, #sponsor .row.row2 .columns {
  justify-content: center;
  grid-gap: 10px;
}
#sponsor .row.row1 .columns .column, #sponsor .row.row2 .columns .column {
  width: calc((100% - 10px) / 2);
}
#sponsor .row.row3 .columns {
  grid-gap: 40px 40px;
}
#sponsor .row.row3 .columns .column {
  width: calc((100% - 40px) / 2);
}
#sponsor .row.row4 .columns {
  grid-gap: 20px 10px;
}
#sponsor .row.row4 .columns .column {
  width: calc((100% - 20px) / 3);
}
#sponsor .row.row5 .columns {
  grid-gap: 20px 10px;
}
#sponsor .row.row5 .columns:not(:last-child) {
  margin-bottom: var(--space3);
}
#sponsor .row.row5 .columns .column {
  width: calc((100% - 10px) / 2);
}
#sponsor .partner .label {
  color: #cccccc;
  margin-bottom: var(--space2);
  font-size: 1.15rem;
}
#sponsor .partner .columns {
  grid-gap: 20px;
}
#sponsor .partner .columns .column {
  display: flex;
  align-items: center;
}
#sponsor .partner.platinum .columns .column {
  width: calc((100% - 20px) / 2);
}
#sponsor .partner.gold .columns .column {
  width: calc((100% - 40px) / 3);
}
@media (min-width: 768px) {
  #sponsor .row {
    padding: 40px 0;
  }
  #sponsor .row.row3 .columns {
    grid-gap: 40px 40px;
  }
  #sponsor .row.row3 .columns .column {
    width: calc((100% - 80px) / 3);
  }
  #sponsor .row.row4 .columns {
    grid-gap: 20px 10px;
  }
  #sponsor .row.row4 .columns .column {
    width: calc((100% - 30px) / 4);
  }
  #sponsor .row.row5 .columns {
    grid-gap: 0;
    justify-content: space-between;
  }
  #sponsor .row.row5 .columns:last-child {
    justify-content: flex-start;
    grid-gap: 0 93px;
  }
  #sponsor .row.row5 .columns .column {
    width: auto;
  }
  #sponsor .partner .label {
    margin-bottom: var(--space1);
  }
  #sponsor .partner.platinum {
    margin-bottom: var(--space2);
  }
  #sponsor .partner.platinum .columns {
    grid-gap: 30px;
  }
  #sponsor .partner.platinum .columns .column {
    width: calc((100% - 90px) / 4);
  }
  #sponsor .partner.gold .columns {
    grid-gap: 40px;
  }
  #sponsor .partner.gold .columns .column {
    width: calc((100% - 160px) / 5);
  }
}
@media (min-width: 960px) {
  #sponsor .row {
    padding: calc(var(--space4) + 5px) 0;
  }
  #sponsor .row.row2 .columns {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
  #sponsor .row.row3 .columns {
    grid-gap: 30px 40px;
  }
  #sponsor .row.row3 .columns .column {
    width: calc((100% - 160px) / 5);
  }
  #sponsor .row.row4 .columns {
    grid-gap: 40px 30px;
  }
  #sponsor .row.row4 .columns .column {
    width: calc((100% - 180px) / 7);
  }
}