@charset "UTF-8";
/*
Version: 1.0.0
Creation Date: 2025.12.16
Last Updated: 2025.12.21
*/


/* 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://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";
@import url('https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&family=Shippori+Mincho+B1:wght@400;500;600;700;800&display=swap');


/* Overwrite
------------------------------------------------------------ */
.share__icon {
margin: 0;
}
header a:hover img,
main a:hover img {
opacity: 1;
}


/* set
------------------------------------------------------------ */
:root {
--font-base: 'Shippori Mincho B1', serif;
--font-en: 'Cardo', serif;
--color-LOGO: #1A1A7C;
--color-primary: #192350;
--color-secondary: #BBB074;
}
* {
margin: 0;
padding: 0;
font-style: normal;
box-sizing: border-box;
}
body {
min-width: auto;
}
img {
vertical-align: middle;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
:hover {
transition: .3s;
}
.smd,.smp {
display: none;
}
.pc {
display: block;
}


/* common
------------------------------------------------------------ */
/* font */
.EN {	/* Cardo */
font-family: var(--font-en);
font-weight: 700;
letter-spacing: .1em;
}
small {
font-size: 86%;
}

/* layout */
header,
main {
font-family: var(--font-base);
font-size: clamp(8.75px, calc(10 * 100vw / 1366), 11.25px);
width: 100%;
display: block;
}
article {
width: 100%;
position: relative;
}
section {
font-size: 1.7rem;
line-height: 1.8;
width: 74%;
margin: 0 auto;
position: relative;
z-index: 2;
}

/* style */
.none {
display: none;
}
.center,
main h2 {
text-align: center;
}
main a img {
display: inline-block;
transition: .5s;
}
main a:hover img {
transform: scale(1.02);
transition: .5s;
}
.link {
max-width: 80%;
margin: 5rem auto;
}
.link img {
transition: 1s;
}
.link img:hover {
transform: scale(1.1,1.1);
transition: 1s;
}


/* header
------------------------------------------------------------ */
header {
background: var(--color-primary);
}
header section {
height: 7rem;
display: flex;
justify-content: space-between;
gap: 2vw;
z-index: 3;
}
header h1 {
margin-top: -1rem;
max-width: 20vw;
}
header nav {
height: 100%;
display: flex;
align-items: center;
}
header ul {
display: flex;
gap: 2vw;
}
header li {
overflow: hidden;
}
header li a {
color: #FFF;
height: 1.7em;
display: block;
position: relative;
}
header li a span {
white-space: nowrap;
display: block;
transition: transform .3s ease;
}
header li a span:first-child {
transform: translateY(0);
}
header li a span:last-child {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(100%);
}
header li a:hover span:first-child {
transform: translateY(-100%);
}
header li a:hover span:last-child {
color: var(--color-secondary);
transform: translateX(-50%) translateY(0);
}

header nav.active {
background: var(--color-secondary);
text-align: center;
height: 80%;
padding: 6rem;
display: block;
border-radius: 1rem 0 1rem 1rem;
position: fixed;
top: 1rem;
right: 1rem;
animation: pulse .4s ease;
}
header nav.active ul {
display: block;
}
header nav.active li {
margin-top: 2em;
}
header nav.active li.none {
display: block;
}
header nav.active li a:hover span:last-child {
color: var(--color-primary);
}

/* Triple Menu */
#triple {
display: none;
background: var(--color-secondary);
width: 6rem;
height: 6rem;
padding: 2rem 1.4rem 0;
cursor: pointer;
position: fixed;
top: 1rem;
right: 1rem;
z-index: 1;
}
#triple span {
background: #FFF;
width: 100%;
height: 1px;
margin: 0 auto .8rem;
display: block;
transition: all .2s ease-in-out;
}
#triple span:last-child {
margin-bottom: 0;
}
#triple.open span:nth-child(1) {
transform: translateY(.9rem) rotate(-225deg);
}
#triple.open span:nth-child(2) {
opacity: 0;
}
#triple.open span:nth-child(3) {
transform: translateY(-.9rem) rotate(225deg);
}
#triple.show {
display: block;
animation: pulse .4s ease;
}


/* main
------------------------------------------------------------ */
/* #kv */
#kv h1 {
max-width: 30%;
position: absolute;
top: 6vw;
left: 50%;
transform: translateX(-50%);
}
#kv h2 {
position: absolute;
bottom: -9rem;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
#kv div img {
width: 100vw;
}

/* #news */
#news {
background: url("img/news_bg.jpg") repeat-y top/100% auto;
color: #FFF;
padding: 16rem 0;
}
#news figure {
margin-bottom: 10rem;
display: flex;
gap: 5rem;
}
#news:has(ul.none) figure {
margin-bottom: 0;
}
#news figcaption {
line-height: 2.4;
}
#news ul {
width: 65%;
margin: -3rem auto 0;
}
#news ul li {
margin-top: 8.5rem;
padding-left: 3rem;
border-left: .4rem solid var(--color-secondary);
}
#news ul li a:hover {
opacity: .7;
}
#news ul li time {
font-size: 1.8rem;
letter-spacing: .16em;
}
#news ul li h3 {
font-size: 2.2rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: .1em;
margin: .5rem 0 1rem;
}
#news ul li p {
font-size: 1.6rem;
}

/* #movie */
#movie {
background: url("img/movie_bg.svg") repeat;
padding: 8rem 0 16rem;
}
#movie::before {
content: "";
background: url("img/movie_left.png") no-repeat left/contain;
width: 49.63vw;
aspect-ratio: 678 / 1285;
position: absolute;
bottom: -10%;
left: 0;
z-index: 1;
}
#movie::after {
content: "";
background: url("img/movie_right.png") no-repeat right/contain;
width: 33vw;
aspect-ratio: 451 / 1285;
position: absolute;
top: -5%;
right: 0;
z-index: 1;
}
.movie {
width: 90%;
margin: 3rem auto;
aspect-ratio: 16 / 9;
border: .5rem solid #FFF;
position: relative;
}
.movie iframe {
width: 100%;
height: 100%;
border: 0;
position: absolute;
inset: 0;
}

/* #movie.none */
#movie.none + #uniform::before {
content: "";
background: url("img/movie_left.png") no-repeat left/contain;
width: 22vw;
aspect-ratio: 678 / 1285;
position: absolute;
top: -12%;
left: 0;
z-index: 1;
}
#movie.none + #uniform::after {
content: "";
background: url("img/movie_right.png") no-repeat right/contain;
width: 15vw;
aspect-ratio: 451 / 1285;
position: absolute;
top: -10%;
right: 0;
z-index: 1;
}

/* #uniform */
#uniform {
background: url("img/uniform_bg.jpg") repeat-y top/100% auto;
color: #FFF;
padding: 8rem 0 5rem;
}
#uniform p {
line-height: 2.2;
width: 85%;
margin: 4rem auto 8rem;
}
#uniform ul {
margin: 8rem auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10rem 6rem;
}

/* .swiper.loop */
.swiper.loop .swiper-wrapper {
transition-timing-function: linear !important;
}

/* #legend-match */
#legend-match {
background: url("img/movie_bg.svg") repeat;
padding-top: 12rem;
}
#legend-match > div {  /*（仮）*/
margin-top: 3rem;
}
#legend-match > div img {  /*（仮）*/
width: 100vw;
}

/* #history */
#history time {
font-size: 6rem;
font-weight: 400;
display: block;
margin-bottom: 2rem;
position: relative;
}
#history time::before {
content: "";
background: url("img/icon_01.svg") no-repeat center/contain;
width: 3.66vw;
aspect-ratio: 1 / 1;
position: absolute;
top: 50%;
left: -4.3vw;
transform: translateY(-50%);
}
#history .icon_02 time::before {
background: url("img/icon_02.svg") no-repeat center/contain;
}
#history .icon_02 {
color: var(--color-primary);
}
#history .icon_03 time::before {
background: url("img/icon_03.svg") no-repeat center/contain;
}
#history em {
font-weight: 800;
}

ol.history {
position: relative;
}
ol.history::before {
content: "";
background: var(--color-primary);
width: 1.5rem;
height: 100%;
position: absolute;
top: 10rem;
left: 50%;
transform: translateX(-50%);
}
ol.history li {
width: calc(50% + 6.5rem);
margin-bottom: -17rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ol.history li:nth-child(even) {
margin-left: auto;
}
ol.history div {
flex-basis: 13rem;
padding-top: 6.5rem;
position: relative;
}
ol.history div::before {
content: "";
background: var(--color-primary);
width: 3.6rem;
height: .1rem;
position: absolute;
top: 13rem;
left: -3.6rem;
}
ol.history li:nth-child(even) div::before {
left: auto;
right: -3.6rem;
}
ol.history figure {
flex-basis: calc(85% - 13rem)
}
ol.history li:nth-child(odd) figure {
order: -1;
}
ol.history figcaption {
font-size: 1.9rem;
line-height: 1.5;
padding: 1rem 0 6rem;
}
ol.history figcaption strong {
font-size: 2.5rem;
font-weight: 500;
}
#history_02 ol.history li:last-child figcaption {
color: #FFF;
}
#history_03 ol.history div::before {
background: #FFF;
}

#history_01 {
background: url("img/history_bg_01.svg") repeat;
padding: 4rem 0 8rem;
}
#history_01 h2 {
padding: 8rem 0 4rem;
position: relative;
}
#history_01 h2::before {
content: "";
background: url("img/30th_opcy.svg") no-repeat center/contain;
width: 26.13vw;
aspect-ratio: 357 / 348;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
opacity: .4;
z-index: -1;
}
#history_01 h3 {
color: var(--color-primary);
font-size: 4.4rem;
text-align: center;
margin-bottom: 3rem;
}
#history_01 h3 + p {
color: var(--color-primary);
font-size: 1.9rem;
line-height: 1.9;
letter-spacing: .12em;
text-align: center;
}
#history_01 h4 {
font-size: 2.9rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: .1em;
}
#history_01 ol > li {
margin-top: 8rem;
}
#history_01 figure {
display: grid;
grid-template-columns: 60% 32%;
gap: 6%;
margin: 3rem 0;
}
#history_01 figure ul {
display: flex;
flex-direction: column;
gap: 2rem;
}
#history_01 figcaption {
line-height: 2.2;
order: -1;
}
#history_01 figcaption h4 {
margin-bottom: 2rem;
}

#history_02 {
background: url("img/history_bg_02.svg") repeat;
padding: 3rem 0;
}

#history_03 {
background: url("img/history_bg_03.svg") repeat;
color: #FFF;
padding: 3rem 0 18rem;
}

#history_04 {
background: url("img/history_bg_04.svg") repeat;
color: #FFF;
padding: 3rem 0 10rem;
}
#history_04 figure {
display: grid;
grid-template-columns: 50% 42%;
gap: 6%;
}
#history_04 figure ul {
display: flex;
flex-direction: column;
gap: 4rem;
}
#history_04 figcaption {
line-height: 2;
order: -1;
}
#history_04 figcaption h4 {
font-size: 2.7rem;
font-weight: 600;
line-height: 1.7;
letter-spacing: .1em;
margin-bottom: 3rem;
}

/* #ssfc */
#ssfc {
background: url("img/ssfc_bg.jpg") no-repeat center bottom/cover;
color: var(--color-primary);
text-align: center;
padding: 12rem 0 6rem;
}
#ssfc h2 {
margin-bottom: 6rem;
}
#ssfc p {
font-size: 1.9rem;
line-height: 1.9;
letter-spacing: .12em;
margin-bottom: 3rem;
}

/* #goods */
#goods {
background: url("img/goods_bg.jpg") repeat-y top/100% auto;
padding: 8rem 0;
}
#goods ul {
margin: 6rem auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4rem;
}
#goods ul li {
background: url("img/goods_item_bg.svg") no-repeat center/cover;
color: var(--color-primary);
padding: 1rem;
outline: .3rem solid var(--color-primary);
outline-offset: -1.3rem;
position: relative;
}
#goods ul li::before {
content: "";
background: url("img/goods_sub.svg") no-repeat top/contain;
width: 16.1vw;
aspect-ratio: 220 / 34;
position: absolute;
top: 1rem;
left: 1rem;
z-index: 1;
}
#goods ul li figure {
height: 100%;
display: flex;
flex-direction: column;
}
#goods ul li figcaption {
display: grid;
grid-template-rows: auto 1fr auto;
padding: 2rem 3rem;
flex: 1;
}
#goods ul li h3 {
font-size: 3.1rem;
font-weight: 600;
line-height: 1.4;
min-height: 8.7rem;
margin-bottom: 2rem;
display: flex;
align-items: center;
}
#goods ul li h4 {
font-size: 1.8rem;
letter-spacing: .1em;
margin-top: 3rem;
}
#goods ul li h4 em {
font-weight: 700;
}


/* 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: 2;
animation: pulse .4s ease;
}
#pagetop a {
background: var(--color-secondary);
width: 6rem;
height: 6rem;
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: 1px solid #FFF;
border-right: 1px solid #FFF;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: 2.5rem;
right: 2rem;
}





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

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

/* main
------------------------------------------------------------ */
/* #news */
#news ul {
width: 85%;
}

/* #history */
#history time {
margin-left: 4.3vw;
}

}


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

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

/* header
------------------------------------------------------------ */
header section {
height: 8rem;
}
header nav {
display: none;
}
#triple {
display: block;
}

}


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

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

/* main
------------------------------------------------------------ */
/* #kv */
#kv h1 {
top: 10vw;
}
#kv h2 {
bottom: -6rem;
width: 70%;
}
#kv div img {
aspect-ratio: 4 / 3;
object-fit: cover;
}

/* #news */
#news {
padding: 8rem 0;
}
#news figure {
flex-direction: column;
gap: 3rem;
}
#news figure > div {
width: 30%;
margin: 0 auto;
}
#news figcaption {
line-height: 1.8;
}
#news h2 img {
width: auto;
height: 70px;
}
#news ul {
width: 95%;
}

/* #movie */
#movie {
padding: 6rem 0;
}
#movie::before {
width: 29.63vw;
}
#movie::after {
width: 23vw;
top: -10%;
}
#movie h2 img {
width: auto;
height: 105px;
}

/* #movie.none */
#movie.none + #uniform::before {
top: -3%;
}
#movie.none + #uniform::after {
top: -2%;

}


/* #uniform */
#uniform h2 img {
width: auto;
height: 70px;
}
#uniform p {
line-height: 1.8;
width: 100%;
margin: 4rem auto;
}
#uniform ul {
margin: 3rem auto;
grid-template-columns: 1fr;
gap: 4rem;
}

/* #history */
#history time {
font-size: 4rem;
margin-bottom: 1rem;
}
ol.history::before {
display: none;
}
ol.history li {
width: 100%;
margin-bottom: 2rem;
display: block;
}
ol.history div {
width: 10rem;
margin-bottom: -5rem;
padding-top: 0;
position: relative;
z-index: 1;
}
ol.history div::before {
display: none;
}
ol.history li:nth-child(even) div {
margin-left: auto;
}
ol.history figcaption {
padding: 1rem 0;
}
#history_02 ol.history li:last-child figcaption {
color: var(--color-primary);
}

#history_01 {
padding: 4rem 0;
}
#history_01 h2 {
padding: 4rem 0 2rem;
}
#history_01 h2 img {
width: auto;
height: 66px;
}
#history_01 h3 {
font-size: 3rem;
}
#history_01 h3 + p {
letter-spacing: .05em;
}
#history_01 h4 {
font-size: 2.5rem;
}
#history_01 ol > li {
margin-top: 4rem;
}
#history_01 figure {
grid-template-columns: 1fr;
gap: 1rem;
}
#history_01 figure ul {
flex-direction: row;
gap: 1rem;
}
#history_01 figcaption {
line-height: 2;
order: 1;
}

#history_03 {
padding: 3rem 0;
}

#history_04 {
padding: 3rem 0 6rem;
}
#history_04 figure {
grid-template-columns: 1fr;
gap: 1rem;
}
#history_04 figcaption {
order: 1;
}
#history_04 figcaption h4 {
font-size: 2.5rem;
}

/* #ssfc */
#ssfc {
padding: 6rem 0 3rem;
}
#ssfc section {
width: 100% !important;
}
#ssfc h2 {
width: 90%;
margin: 0 auto 3rem;
}
#ssfc p {
font-size: 1.8rem;
letter-spacing: .1em;
width: 92%;
margin: 0 auto 3rem;
}

/* #goods */
#goods {
padding: 4rem 0;
}
#goods h2 img {
width: auto;
height: 70px;
}
#goods ul {
width: 90%;
margin: 3rem auto;
grid-template-columns: 1fr;
}
#goods ul li::before {
width: 40vw;
}
#goods ul li h3 {
font-size: 2.8rem;
min-height: auto;
margin-bottom: 1rem;
}

}