@charset "UTF-8";
/*
Version: 2.7.0
Creation Date: 2024.2.7
Last Updated: 2025.11.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/lightbox2/2.11.5/css/lightbox.min.css";
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap";
@import "https://use.typekit.net/rlw6stg.css";


/* Overwrite
------------------------------------------------------------ */
.header {
position: fixed;
z-index: 9999;
}
.spnav,
.spsubnav,
.gnav__subitem__table td a {
text-align: left;
}
.access {
padding: 0;
}
.access .accessSection {
width: 100%;
margin: 0 auto;
}
.access__table {
table-layout: auto;
}
.share__icon {
margin: 0;
}
main a:hover img {
opacity: 1;
}


/* set
------------------------------------------------------------ */
:root {
--font-base: 'Noto Sans JP', sans-serif;
--font-en: 'futura-pt', sans-serif;
--color-LOGO: #1A1A7C;
--color-primary: #004098;
--color-secondary: #F4D900;
}
* {
margin: 0;
padding: 0;
font-style: normal;
box-sizing: border-box;
}
body {
-webkit-text-size-adjust: 100%;
background: #FFF;
color: #000;
text-align: center;
min-width: auto;
visibility: hidden;
}
ul {
list-style: none;
}
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 {	/* Futura PT Medium */
font-family: var(--font-EN);
font-weight: 500;
letter-spacing: .05em;
}
small {
font-size: 77%;
}

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

/* style */
.none {
display: none;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.vwmax img {
width: 100vw;
}
main a img {
display: inline-block;
transition: .5s;
}
main a:hover img {
transform: scale(1.05);
transition: .5s;
}
.more {
margin: 5rem auto;
}
.more a {
background: var(--color-LOGO);
color: #FFF;
font-size: 2.3rem;
font-weight: 700;
line-height: 1;
padding: 1em 2em;
display: inline-block;
border-radius: 100vh;
position: relative;
z-index: 1;
transition: 1s;
}
.more a:hover {
transform: scale(1.1);
transition: 1s;
}

/* Swiper */
.swiper[class*="loop"] .swiper-wrapper {
transition-timing-function: linear !important;
flex-wrap: nowrap !important;
}
.swiper[class*="loop"] .swiper-slide {
margin: 0 0 -1px -1px;
}


/* main
------------------------------------------------------------ */
/* nav */
main nav {
background: linear-gradient(to right, #0099CC 0%, #004EA2 80%);
color: #FFF;
}
main nav ul {
font-size: 1.7rem;
font-weight: 700;
line-height: 1;
letter-spacing: .01em;
margin: 0 auto;
padding: 1.5em 0;
display: flex;
justify-content: center;
}
main nav li:not(:first-child) {
margin-left: .8em;
padding-left: .8em;
border-left: 1px solid #FFF;
}
main nav a {
position: relative;
}
main nav a:hover {
color: var(--color-secondary);
}
main nav a::after {
content: "▼";
font-size: 1rem;
position: absolute;
bottom: -1em;
right: 50%;
transform: translateX(50%);
opacity: 0;
visibility: hidden;
transition: 1s;
}
main nav a:hover::after {
bottom: -1.5em;
opacity: 1;
visibility: visible;
}

/* #overview */
#overview {
background: url("img/overview_bg_2x.jpg") no-repeat bottom/cover;
margin-bottom: -1px;
padding: 3rem 0 40rem;
}
#overview h1 {
margin: 0 3rem 7rem;
}
#overview h2 {
margin-bottom: 4rem;
}
#overview h3 {
margin: 3rem auto -2rem;
}
#overview ul {
display: flex;
justify-content: center;
gap: 1rem;
}
#overview p {
font-size: 1.9rem;
font-weight: 600;
margin-top: 5rem;
}

/* #changes */
#changes {
background: linear-gradient(to right, #0099CC 0%, #004EA2 80%);
color: #FFF;
padding: 6rem 0;
}
#changes section {
width: 65%;
}
#changes section::before {
content: "";
background: url("img/dio_2x.png") no-repeat center/contain;
width: 9vw;
aspect-ratio: 249 / 538;
position: absolute;
bottom: -2rem;
right: -10vw;
z-index: -1;
}
#changes h2 {
margin-bottom: 3rem;
}
#changes ul {
margin-bottom: 3rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6rem;
}

/* #point */
#point {
padding: 4rem 0 8rem;
}
#point::before {
content: "";
background: url("img/fun_01_2x.png") no-repeat center/contain;
width: 40vw;
aspect-ratio: 557 /371;
position: absolute;
top: -8rem;
left: 0;
}
#point h1.right {
margin: 0 3rem 9rem;
}
#point h3 {
margin: 4rem 0;
}
#point article::before {
content: "";
width: 96%;
height: calc(100% - 10rem);
position: absolute;
bottom: 0;
}
#point article:nth-child(odd)::before {
background: linear-gradient(to right, #59C3E1 0%, #004EA2 80%);
border-radius: 0 100vh 100vh 0;
left: 0;
}
#point article:nth-child(even)::before {
background: linear-gradient(to right, #B3CDE5 0%, #E0F1F4 100%);
border-radius: 100vh 0 0 100vh;
right: 0;
}
#point article section {
width: 80%;
}
#point figure {
text-align: left;
margin-bottom: 9rem;
padding-bottom: 5rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#point figcaption {
flex-basis: 43%;
margin: 0 2%;
}
#point article:nth-child(odd) figcaption {
color: #FFF;
}
#point figure > div {
flex-basis: 50%;
}
#point article:nth-child(even) figure > div {
order: -1;
}
#point #point_05 {
z-index: -1;
}
#point #point_05 figure {
padding-bottom: 8rem;
}
#point #point_05 figure > div {
position: relative;
}
#point #point_05 figure > div img {
position: absolute;
bottom: -10rem;
left: 0;
} 
#point figure h1 {
margin-bottom: 3rem;
}
#point figure h2 {
font-size: 3.4rem;
font-weight: 700;
padding: .5em 0;
}
#point article:nth-child(even) figure h2,
#point article:nth-child(even) figure h3 {
color: var(--color-primary);
}
#point figure h3 {
font-size: 1.9rem;
font-weight: 700;
margin: -.5em 0 .3em;
}
#point figure p {
font-size: 1.8rem;
}
#point figure p em {
font-weight: 700;
}
#point figure p small {
display: block;
margin-top: .5em;
}
#point figure p a {
text-decoration: underline;
text-underline-offset: .2em;
font-weight: 600;
margin: 0 .2em;
}
#point article:nth-child(odd) figure p a {
color: var(--color-secondary);
}
#point article:nth-child(even) figure p a {
color: var(--color-primary);
}
#point figure p a:hover {
text-decoration: none;
}

/* #seat */
#seat {
background: url("img/seat_bg_2x.png") no-repeat bottom/100% auto,
linear-gradient(to bottom, #B3CDE5 0%, #E0F1F4 100%);
margin-bottom: -1px;
padding-bottom: 36rem;
}
#seat h1 {
margin: 4rem 3rem 7rem;
}
#seat h2 {
margin-bottom: 3rem;
position: relative;
z-index: 2
}
#seat h3 {
margin-bottom: 3rem;
padding: 1.3em;
position: relative;
z-index: 1;
}
#seat h3::before {
content: "";
background: linear-gradient(to right, #0099CC 0%, #004EA2 80%);
width: 88%;
height: 100%;
border-radius: 0 100vh 100vh 0;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#seat h3::after {
content: "";
background: url("img/fun_02_2x.png") no-repeat center/contain;
width: 28vw;
aspect-ratio: 388 / 259;
position: absolute;
bottom: 100%;
right: 11%;
}
#seat section h2 {
margin: 5rem auto 2rem;
}
#seat section p {
font-size: 1.5rem;
margin-bottom: 2rem;
}
#seat section ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#seat section ul li {
flex-basis: 49%;
margin-bottom: 1em;
}
#seat section ul li a {
background: #727171 linear-gradient(to bottom,rgba(255,255,255,.2) 50%,#727171 50%);
color: #FFF;
font-size: 1.8rem;
font-weight: 700;
white-space: nowrap;
padding: .5em 1em;
display: block;
border-radius: .8em;
border: 1px solid #FFF;
}
#seat section ul li a:hover {
background: #D9392B linear-gradient(to bottom,rgba(255,255,255,.2) 50%,#D9392B 50%);
transition: 0s;
}

/* #application */
#application {
background: linear-gradient(to bottom, #0099CC 0%, #004EA2 80%);
color: #FFF;
padding: 3rem 0 8rem;
}
#application::before {
content: "";
background: url("img/fun_03_2x.png") no-repeat center/contain;
width: 18.8vw;
aspect-ratio: 515 / 633;
position: absolute;
top: -5rem;
left: 12%;
}
#application h1 {
margin: 0 3rem 5rem;
}
#application section {
width: 65%;
}
#application h2 {
margin: 5rem auto 3rem;
}
#application h3 {
margin: 5rem auto 3rem;
}
#application p em,
.em {
color: var(--color-secondary);
}
.dots {
background-color: #FFF;
background-image: radial-gradient(circle, #e5eaf1 4px, transparent 4px), radial-gradient(circle, #e5eaf1 4px, transparent 4px);
background-position: 0 0, 14px 14px;
background-size: 28px 28px;
padding: 3rem;
border: .8rem solid var(--color-primary);
margin-top: 3rem;
display: inline-block;
}
.dots ul {
display: flex;
justify-content: center;
gap: 5rem;
}
.dots ul li div {
margin-top: 2rem;
}
#application div + p.left {
margin-bottom: 6rem;
}
#application p.left {
margin-bottom: 3rem;
}
#application ul.left li {
font-size: 1.4rem;
margin-bottom: .5em;
padding-left: 1.5em;
position: relative;
}
#application ul.left li::before {
content: "●";
position: absolute;
top: 0;
left: 0;
}

/* #faq */
#faq {
background: url("img/faq_bg_2x.png") no-repeat center bottom -3px/100% auto,
linear-gradient(to bottom, #B3CDE5 0%, #E0F1F4 100%);
padding: 6rem 0 8rem;
}
#faq section {
width: 65%
}
#faq h1 {
margin-bottom: 4rem;
}
#faq h2 {
margin-bottom: 3rem;
}
#faq ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
#faq ul a {
background: var(--color-primary) url("img/icon_arrow.svg") no-repeat center bottom 20px/30px auto;
color: #FFF;
font-size: 1.9rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: .02em;
width: 14.5rem;
height: 14.5rem;
padding-bottom: 2rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
#faq ul a:hover {
animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@keyframes rotate-vert-center {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}
#faq h3 {
color: var(--color-primary);
font-size: 3rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: .03em;
margin: 4rem auto 3rem;
}
#faq dl {
font-weight: 700;
text-align: left;
}
#faq dl a {
text-decoration: underline;
}
#faq dl a:hover {
text-decoration: none;
}
#faq dl dt,
#faq dl dd {
background: #FFF;
color: var(--color-primary);
margin-top: 1em;
padding: 1em 2em 1em 5em;
position: relative;
cursor: pointer;
}
#faq dl dt::before,
#faq dl dd::before {
content: "Q";
background: var(--color-primary);
font-family: 'futura-pt', sans-serif;
color: #FFF;
font-size: 3.7rem;
font-weight: 500;
text-align: center;
width: 1.5em;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#faq dl dd::before {
content: "A";
background: #FFF;
color: var(--color-primary);
}
#faq dl dt::after {
content: "+";
font-size: 4.3rem;
line-height: 1;
font-weight: 500;
text-align: center;
width: 1em;
padding-bottom: .2em;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
#faq dl dt.open::after {
content: "-";
}
#faq dl dd {
display: none;
background: var(--color-primary);
color: #FFF;
margin-top: 0;
}

/* #fanclub */
#fanclub {
padding: 8rem 0;
}


/* footer
------------------------------------------------------------ */
footer {
background: #000;
}
footer section {
padding: 3rem 0;
}
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-primary);
color: #FFF;
width: 6rem;
height: 6rem;
border-radius: 50%;
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;
}

/* #online */
#online {
display: none;
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 4;
}





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

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

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

/* main
------------------------------------------------------------ */
main article > h1 img,
#faq h1 img {
max-height: 8rem;
}

/* #changes */
#changes section::before {
bottom: 90%;
right: 0;
}
#changes ul {
gap: 3rem;
}

/* #point */
#point::before {
top: 5rem;
left: -5%;
}
#point figcaption {
flex-basis: 48%;
}
#point figure > div {
flex-basis: 48%;
padding: 0 2%;
}
#point #point_05 figure > div img {
_width: 90%;
}

/* #seat */
#seat h3::before {
width: 98%;
}
#seat h3::after {
right: 1%;
}

/* #application */
#application::before {
top: 8rem;
left: 0;
}

}


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

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

/* common
------------------------------------------------------------ */
/* style */
.more a {
font-size: 2rem;
}
.mw200 {
overflow-x: auto;
}
.mw200 img {
width: 200%;
max-width: 200%;
}

/* main
------------------------------------------------------------ */
/* nav */
main nav ul span {
display: none;
}

/* #overview */
#overview {
padding: 2rem 0 38rem;
}
#overview h1 {
margin: 0 2rem 5rem;
}
#overview h2 {
margin: 0 2rem 4rem;
}
#overview h3 {
margin: 3rem 2rem -1rem;
}
#overview ul {
flex-direction: column;
}

/* #changes */
#changes section::before {
width: 12vw;
bottom: 100%;
right: 42%;
}
#changes h2 {
margin: 0 2rem 3rem;
}
#changes ul {
grid-template-columns: 1fr;
}

/* #point */
#point {
padding: 2rem 0 0;
}
#point::before {
top: 1rem;
}
#point section > h2 {
margin: -2rem 2rem;
}
#point article::before {
width: 100%;
height: calc(100% - 8rem);
border-radius: 0 !important;
}
#point figure {
display: block;
margin-bottom: 5rem;
}
#point figure > div {
margin-top: 2rem;
}
#point figure h1 {
text-align: center;
}
#point figure h1 img {
max-height: 6rem;
margin-left: -3rem;
}
#point #point_05 figure {
margin-bottom: 0;
}
#point #point_05 figure > div img {
position: static;
aspect-ratio: 1.2 / 1;
object-fit: cover;
object-position: center bottom;
}

/* #seat */
#seat {
padding-bottom: 18rem;
}
#seat h1 {
margin: 2rem 2rem 4rem;
}
#seat h2 {
margin: 0 2rem 3rem;
}
#seat h3 {
padding: 1.3em 2em;
}
#seat h3::after {
display: none;
}
#seat section h2 {
margin: 5rem 2rem 2rem;
}
#seat section ul {
display: block;
}
#seat section ul li {
margin-bottom: .5em;
}

/* #application */
#application {
padding: 2rem 0 5rem;
}
#application::before {
display: none;
}
#application h1 {
margin: 0 2rem -2rem;
}
#application h2,
#application h3 {
margin: 5rem 2rem 3rem;
}
.dots {
padding: 3rem 2rem;
border: .4rem solid var(--color-primary);
}
.dots ul {
flex-direction: column;
gap: 3rem;
}

/* #faq */
#faq {
padding: 2rem 0 8rem;
}
#faq h2 {
margin: 0 2rem 3rem;
}
#faq ul a {
background: var(--color-primary) url("img/icon_arrow.svg") no-repeat center bottom 10px/20px auto;
font-size: 1.7rem;
width: 12rem;
height: 12rem;
padding-bottom: 1rem;
}
#faq dl dt,
#faq dl dd {
padding: 1em 2em 1em 4em;
}
#faq dl dt::after {
font-size: 3rem;
}

}