@charset "UTF-8";
/*
Version: 2.9.0
Creation Date: 2024.2.7
Last Updated: 2025.12.23
*/


/* import
------------------------------------------------------------ */
@import "https://www.montedioyamagata.jp/wp-content/themes/montedio/assets/css/match.css";
@import "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css";
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap";


/* Overwrite
------------------------------------------------------------ */
.header {
position: fixed;
z-index: 9999;
}
.spnav,
.spsubnav,
.gnav__subitem__table td a {
text-align: left;
}
.share__icon {
margin: 0;
}
main a:hover img {
opacity: 1;
}


/* set
------------------------------------------------------------ */
:root {
--font-base: 'Noto Sans JP', sans-serif;
--color-LOGO: #1A1A7C;
--color-primary: #0C3388;
--color-secondary: #BBA87F;
}
* {
margin: 0;
padding: 0;
font-style: normal;
box-sizing: border-box;
}
body {
min-width: auto;
visibility: hidden;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
:hover {
transition: .3s;
}
.smd,.smp {
display: none;
}
.pc {
display: block;
}


/* common
------------------------------------------------------------ */
/* layout */
main {
background: linear-gradient(90deg,rgba(38,87,178,1) 0%,rgba(0,39,75,1) 80%);
font-family: var(--font-base);
font-size: clamp(8.75px, calc(10 * 100vw / 1366), 11.25px);
color: #FFF;
width: 100%;
display: block;
overflow: hidden;
}
article {
width: 100%;
position: relative;
}
section {
font-size: 1.7rem;
line-height: 2;
letter-spacing: .03em;
width: 74%;
margin: 0 auto;
position: relative;
z-index: 1;
}

/* style */
.none {
display: none;
}

/* .swiper*/
div.swiper {
max-width: 1000px;
}
.swiper-prev,
.swiper-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.swiper-prev {
left: 0;
}
.swiper-next {
right: 0;
}
.swiper.loop .swiper-wrapper {
transition-timing-function: linear !important;
}


/* main
------------------------------------------------------------ */
/* #kv */
#kv h1 img {
width: 100vw;
}

/* #movie */
#movie {
background: url("img/movie_bg.jpg") repeat-y center/100% auto;
padding-top: 11rem;
}
.movie {
aspect-ratio: 16 / 9;
___border: .5rem solid #FFF;
position: relative;
}
.movie iframe {
width: 100%;
height: 100%;
border: 0;
position: absolute;
inset: 0;
}
#movie h2 {
color: var(--color-secondary);
font-size: 3.8rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: .09em;
font-style: italic;
margin: 6rem 0 3rem;
}
#movie figure {
display: grid;
grid-template-columns: 55% 45%;
}
@media screen and (min-width: 1366px) {
#movie figure {grid-template-columns: 60% 40%;}
}
#movie figcaption {
padding-bottom: 4rem;
}
#movie figure > div {
align-self: end;
margin-right: -10rem;
}

/* #uniform */
#uniform {
background: url("img/uniform_bg.jpg") no-repeat top/cover;
}
#uniform section {
padding-top: 8rem;
}
#uniform section h1 {
position: absolute;
top: 8rem;
left: 0;
}
#uniform section h2 {
text-align: center;
margin-bottom: 8rem;
}
#uniform > section ul {
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
}
#uniform > section ul::after {
content: "";
background: url("img/30th_opcy.svg") no-repeat center/contain;
width: 21.3vw;
aspect-ratio: 291 / 283;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: -1;
}
#uniform > section ul::before {
content: "";
position: absolute;
top: 0;
z-index: -1;
}
#uniform ul.field-player::before {
background: url("img/field-player.svg") no-repeat center/contain;
width: 47.07vw;
aspect-ratio: 643 / 92;
left: 0;
}
#uniform ul.goalkeeper::before {
background: url("img/goalkeeper.svg") no-repeat center/contain;
width: 47.7vw;
aspect-ratio: 556 / 84;
right: 0;
}
#uniform ul.goalkeeper {
margin-top: 6rem;
}
#uniform article {
background: linear-gradient(90deg,rgba(38,87,178,1) 0%,rgba(0,39,75,1) 80%);
}
#uniform article section {
width: calc(1000px + 10rem);
padding: 6rem 0 4rem;
}

/* #numbers */
#numbers {
background: url("img/numbers_bg.jpg") no-repeat top right/cover;
padding: 8rem 0 12rem;
}
#numbers figure {
margin: 6rem 0;
display: grid;
grid-template-columns: 65% 30%;
align-items: center;
}

/* #size */
#size {
padding: 6rem 0;
}
#size h2 {
text-align: center;
}
#size ul {
margin: 6rem 0;
display: grid;
grid-template-columns: 35% 65%;
align-items: center;
gap: 10rem 3rem;
}

/* #penalty */
#penalty section {
padding: 7rem 0 2rem;
border-top: .1rem solid #FFF;
}
#penalty figure {
margin: 6rem auto;
display: grid;
grid-template-columns: 48% 45%;
align-items: center;
gap: 3rem 7%; 
}
#penalty figcaption h3 {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.7;
white-space: nowrap;
margin-bottom: 3rem;
}
#penalty figcaption {
order: -1;
font-size: 1.9rem;
line-height: 2.3;
}

/* #products */
#products section {
padding: 6rem 0 8rem;
border-top: .1rem solid #FFF;
}
#products h2 {
text-align: center;
margin-bottom: 8rem;
}
#products ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem; 
}
#products ul li {
background: #FFF;
padding: 1rem;
border-radius: 2rem;
position: relative;
}
#products ul li h3 {
background: var(--color-primary);
padding: .5rem 3rem .8rem;
display: inline-block;
border-radius: 1rem 0 1rem 0;
}
#products ul li figure {
width: 90%;
margin: 2rem auto;
}
#products ul li h4 {
}
#products ul li figure div {
padding: 4rem 2rem;
}
#products ul li figcaption {
color: var(--color-primary);
font-size: 1.8rem;
font-weight: 700;
line-height: 1.5;
text-align: center;
padding-top: 2rem;
border-top: .1rem solid var(--color-primary);
}
#products ul li figcaption em {
font-size: 2.3rem;
}
#products ul li figcaption strong {
font-size: 2.7rem;
}
#products ul li figcaption small {
font-size: 1.4rem;
font-weight: 500;
}
#products ul li p {
color: #00050F;
font-size: 1.4rem;
line-height: 1.3;
margin-bottom: 2rem;
}
/* 
#products ul li > div {
display: none;
}
*/
#products ul li > div a {
background: var(--color-primary) url("img/swiper-next.svg") no-repeat right 1.5rem center/2.4rem 2.4rem;
font-size: 2.3rem;
line-height: 1;
text-align: center;
padding: .8em;
display: block;
border-radius: 0 0 1rem 1rem;
}
#products ul li > div a:hover {
background: var(--color-secondary) url("img/swiper-next.svg") no-repeat right 1.5rem center/2.4rem 2.4rem;
}
#products ul li.long::before,
#products ul li.kids::before {
content: "長袖";
background: #EAEAEA;
color: var(--color-primary);
font-size: 1.9rem;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
width: 8rem;
height: 8rem;
border-radius: 50%;
position: absolute;
top: 3rem;
right: 3rem;
z-index: 1;
}
#products ul li.kids::before {
content: "キッズ";
}

#products ul li.mynum::before {
  content: "マイ\Aナンバー";
  background: #EAEAEA;
  color: var(--color-primary);
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: pre;
  line-height: 1.1;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  position: absolute;
  top: 3rem;
  right: 3rem;
  z-index: 1;
}



/* #sales */
#sales section {
padding: 6rem 0;
text-align: center;
border-top: .1rem solid #FFF;
}
#sales h3 {
color: var(--color-secondary);
font-size: 3.5rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: .09em;
font-style: italic;
margin-bottom: 4rem;
}
#sales h4 {
font-size: 2.5rem;
font-weight: 700;
}
#sales h4 small {
font-size: 70%;
font-weight: 500;
}
#sales p {
padding: 1rem 0 3rem;
}
#sales strong {
color: var(--color-secondary);
font-size: 3rem;
font-weight: 700;
line-height: 1.4;
margin-bottom: 1rem;
display: block;
}

/* #sponsor */
#sponsor {
background: #FFF;
padding: 8rem 0;
}
#sponsor h2 {
text-align: center;
}
#sponsor ul {
margin-top: 6rem;
display: grid;
}
#sponsor ul li img {
transition: 1s;
}
#sponsor ul li:hover img {
transition: 1s;
transform: scale(1.2);
}
#sponsor ul.first {
justify-content: center;
}
#sponsor ul.second {
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
}


/* footer
------------------------------------------------------------ */
footer {
background: #000;
}
footer section {
text-align: center;
padding: 4rem 0;
/*padding: 3rem 0 10rem;*/
}
footer h1 {
width: 190px;
margin: 0 auto 3rem;
}
footer p {
color: #FFF;
font-size: 1.2rem;
line-height: 1.3;
}
footer p + p {
font-size: 1.1rem;
margin-top: 1rem;
}

/* #sns */
#sns {
background: #FFF;
}

/* #pagetop */
#pagetop {
display: none;
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 4;
}
#pagetop a {
background: var(--color-secondary);
color: #FFF;
width: 6rem;
height: 6rem;
border-radius: .3rem;
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
position: relative;
}
#pagetop a::before {
content: "";
width: 2rem;
height: 2rem;
margin: 0 auto;
display: block;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: 2.5rem;
right: 2rem;
}





@media screen and (max-width: 1023px) {

/* set
------------------------------------------------------------ */
.pc {
display: none;
}
.smd {
display: block;
}
img {
width: auto;
}

/* common
------------------------------------------------------------ */
/* layout */
section {
width: 92% !important;
}

/* .swiper*/
.swiper-prev {
left: -3.2rem;
}
.swiper-next {
right: -3.2rem;
}

/* main
------------------------------------------------------------ */
/* #movie */
#movie {
padding-top: 6rem;
}
#movie figure {
grid-template-columns: 1fr;
}
#movie figure > div {
max-width: 70%;
margin: 0 auto;
}

/* #uniform */
#uniform section h1 img {
height: 130px;
}
#uniform section h2 img {
height: 160px;
}

/* #numbers */
#numbers h2 img {
height: 54px;
}
#numbers figure {
gap: 5%;
}

/* #size */
#size {
padding: 6rem 0 0;
}
#size h2 img {
height: 54px;
}
#size ul {
text-align: center;
grid-template-columns: 1fr;
gap: 3rem;
}
#size ul li:nth-child(even) {
margin-bottom: 3rem;
}

/* #penalty */
#penalty h2 img {
height: 50px;
}

/* #products */
#products h2 img {
height: 77px;
}
#products ul li figure {
width: 100%;
}
#products ul li.long::before,
#products ul li.kids::before {
width: 7rem;
height: 7rem;
top: 1rem;
right: 1rem;
}

/* #sponsor */
#sponsor h2 img {
height: 50px;
}
#sponsor ul.first li {
max-width: 50%;
margin: 0 auto;
}

}


@media screen and (max-width: 540px) {

/* set
------------------------------------------------------------ */
.smd {
display: none;
}
.smp {
display: block;
}
br.smp {
font-size: 0;
}
.smp-none {
display: none;
}

/* common
------------------------------------------------------------ */
/* .swiper*/
div.swiper {
max-width: calc(92% - 4rem);
}
.swiper-prev {
left: 0;
}
.swiper-next {
right: 0;
}

/* main
------------------------------------------------------------ */
/* #movie */
#movie h2 {
font-size: 3rem;
}

/* #uniform */
#uniform section {
padding-top: 4rem;
}
#uniform section h1 {
text-align: center;
margin-bottom: 2rem;
position: static;
}
#uniform section h1 img {
height: 90px;
}
#uniform section h2 {
margin-bottom: 4rem;
}
#uniform section h2 img {
height: 112px;
}
#uniform ul.field-player,
#uniform ul.goalkeeper,
#uniform > article {
display: none;
}
#uniform article section {
padding: 3rem 0 2rem;
}

/* #numbers */
#numbers {
padding: 4rem 0 4rem;
}
#numbers h2 img {
height: 38px;
}
#numbers figure {
margin: 3rem 0;
grid-template-columns: 1fr;
}
#numbers figure div {
width: 80%;
margin: 0 auto;
}

/* #size */
#size h2 img {
height: 38px;
}
#size ul li:nth-child(odd) {
width: 80%;
margin: 0 auto;
}

/* #penalty */
#penalty h2 img {
height: auto;
}
#penalty figure {
grid-template-columns: 1fr;
gap: 5rem; 
}

/* #products */
#products h2 img {
height: 70px;
}
#products ul {
width: 90%;
margin: 0 auto;
grid-template-columns: 1fr;
gap: 5rem; 
}

/* #sponsor */
#sponsor h2 img {
height: auto;
}
#sponsor ul.first li {
max-width: 70%;
}
#sponsor ul.second {
grid-template-columns: repeat(2, 1fr);
}

}