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


/* 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";
@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 {
background: url("img/main_bg_2x.jpg") repeat-y center/100% auto;
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: 80%;
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.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;
}


/* main
------------------------------------------------------------ */
/* #about */
#about {
background: url("img/about_bg_2x.jpg") no-repeat center/cover;
padding: 5rem 0 10rem;
}
#about .attention {
background: #FFF;
padding: 3rem 4rem;
border-radius: 2.3rem;
position: relative;
}
#about .attention h2 {
width: 100%;
position: absolute;
top: -2rem;
left: 0;
}
#about .attention ol {
color: var(--color-LOGO);
font-weight: 700;
text-align: left;
list-style: decimal;
padding-left: 1em;
}
#about .attention ol > li {
margin-top: 1rem;
}
#about .attention ol ul {
list-style: disc;
padding-left: 1em;
}
#about .attention ol ul li {
margin-top: .3em;
}
#about .attention em {
color: #df1a25;
}
#about h3 {
margin: 6rem auto 3rem;
}
#about nav {
color: #FFF;
width: 80%;
margin: 0 auto;
position: relative;
}
#about nav::before {
content: "";
background: url("img/dio_2x.png") no-repeat center/contain;
width: 10.83vw;
aspect-ratio: 148 / 320;
position: absolute;
top: -9rem;
left: 103%;
z-index: -1;
}
#about nav p {
line-height: 1.7;
text-align: left;
margin-bottom: 3rem;
display: inline-block;
}
#about nav p em {
font-size: 2.1rem;
font-weight: 700;
text-align: center;
margin-bottom: 1rem;
display: block;
}
#about nav ul {
margin: 4rem auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
}
#about nav ul li: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);
	}
}

/* #course */
#course {
padding: 0 0 10rem;
}
#course h2 {
margin-top: -4rem;
}
#course div {
margin-top: 6rem;
}

/* #special */
#special {
padding: 0 0 15rem;
}
#special h2 {
margin-bottom: -6rem;
position: relative;
z-index: 1;
}
#special h3 {
margin-top: -3rem;
}
#special picture {
margin-bottom: 1rem;
display: block;
}
#special picture:last-child {
margin-top: 8rem;
}

/* #benefits */
#benefits {
background: url("img/benefits_bg_2x.jpg") no-repeat center/cover;
padding: 6rem 0 2rem;
}
#benefits::before {
content: "";
background: url("img/fan_01_2x.png") no-repeat center/contain;
width: 38.36vw;
aspect-ratio: 524 / 350;
position: absolute;
top: -19.5rem;
left: 50%;
transform: translateX(-50%);
}
#benefits ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}

/* #exchange */
#exchange {
padding: 6rem 0 9rem;
}
#exchange h2 {
text-align: left;
margin-top: 6rem;
}
#exchange ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4rem;
position: relative;
}
#exchange ul::before {
content: "";
background: url("img/fan_02_2x.png") no-repeat center/contain;
width: 24.6vw;
aspect-ratio: 336 / 224;
position: absolute;
top: -18rem;
right: -4.5rem;
z-index: -1;
}

/* #fanfun */
#fanfun {
background: url("img/fanfun_bg.svg") repeat;
padding: 0 0 7rem;
}
#fanfun section {
width: 84%;
}
#fanfun .hdr {
display: flex;
gap: 2rem;
}
#fanfun .hdr h2 {
flex-basis: 30%;
margin-top: -5rem;
}
#fanfun .hdr div {
flex-basis: 40%;
order: -1;
margin: -2rem 0 0 -7rem;
}
#fanfun .hdr h3 {
flex-basis: 30%;
margin-top: 2rem;
}
#fanfun p {
font-size: 2.1rem;
font-weight: 700;
margin: -4rem 0 4rem;
}
#fanfun p em {
color: #0090cf;
}
#fanfun ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

/* #price */
#price {
padding: 6rem 0;
}
#price::before {
content: "";
background: url("img/fan_04_2x.png") no-repeat center/contain;
width: 20.5vw;
aspect-ratio: 280 / 346;
position: absolute;
top: -6rem;
left: 0;
z-index: -1;
}
#price div {
margin-bottom: 5rem;
}

/* #request_web */
#request_web {
width: 92%;
}
#request_web .swiper {
margin-bottom: 6rem;
}
#request_web .step {
width: 88%;
margin: 3rem auto;
position: relative;
overflow: hidden;
}
#request_web .swiper-prev,
#request_web .swiper-next {
cursor: pointer;
position: absolute;
top: 40%;
left: 0;
transform: translateY(-50%);
z-index: 1;
}
#request_web .swiper-next {
left: auto;
right: 0;
}
#request_web .swiper-pagination {
position: static;
}
#request_web .swiper-pagination-bullet {
background: #FFF;
width: 9rem;
height: 1.5rem;
border-radius: 0;
opacity: 1;
}
#request_web .swiper-pagination-bullet-active {
background: #f5c640;
}

/* #reception_bg */
#reception_bg {
background: url("img/reception_bg_2x.jpg") no-repeat center/cover;
margin-top: 13rem;
}

/* #request_counter */
#request_counter {
padding: 13rem 0;
}
#request_counter h3 {
width: 100%;
position: absolute;
top: -9rem;
left: 0;
}
#request_counter ul {
font-size: 1.7rem;
text-align: left;
}
#request_counter ul li {
font-weight: 700;
padding: 0 0 .3em 1.3em;
position: relative;
}
#request_counter ul li::before {
content: "●";
color: #df1a25;
position: absolute;
top: 0;
left: 0;
}
#request_counter p {
font-size: 1.8rem;
font-weight: 600;
text-align: left;
margin-top: 3rem;
}
#request_counter p small {
font-size: 1.6rem;
margin-top: 1rem;
display: block;
}

/* #reception */
#reception {
padding: 3rem 0 40rem;
z-index: 0;
}
#reception picture {
display: block;
position: relative;
}
#reception picture::before {
content: "";
background: url("img/fan_05_2x.png") no-repeat center/contain;
width: 26.35vw;
aspect-ratio: 360 / 240;
position: absolute;
bottom: 100%;
right: -3rem;
}
#reception h2 {
margin-bottom: -10rem;
position: relative;
z-index: 1;
}

/* #faq */
#faq section {
width: 65%;
padding-bottom: 10rem;
}
#faq h1 {
margin: -5rem auto 3rem;
}
#faq ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem 2rem;
}
#faq ul a {
background: var(--color-primary) url("img/icon_arrow.svg") no-repeat center right 10px/27px auto;
color: #FFF;
font-size: 2.1rem;
letter-spacing: .02em;
text-align: left;
padding: .4em 1em;
display: block;
}
#faq ul a:hover {
background: #FFF url("img/icon_arrow.svg") no-repeat center right 10px/27px auto;
color: var(--color-primary);
}
#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;
}
#faq p.att {
background: #FFF;
color: #C40000;
font-weight: 600;
max-width: 780px;
margin: 2em auto;
padding: .5em;
border: 2px solid #C40000;
}


/* footer
------------------------------------------------------------ */
footer {
background: #000;
}
footer section {
padding: 3rem 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-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;
}

/* #apply */
#apply {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 3;
}
#apply a {
background: #003e8d;
padding: 1rem;
display: block;
}
#apply img {
height: 5rem;
}
#apply a:hover {
background: #FFBA00;
}
#apply a:hover img {
opacity: 1;
}





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

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

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

/* main
------------------------------------------------------------ */
/* #about */
#about nav {
width: 100%;
}
#about nav::before {
left: 85%;
}

/* #benefits */
#benefits::before {
top: -15rem;
}

/* #exchange */
#exchange ul {
gap: 2rem;
}
#exchange ul::before {
display: none;
}

/* #fanfun */
#fanfun p {
margin: 0 0 4rem;
}

/* #price */
#price::before {
top: 3rem;
}

/* #request_counter */
#request_counter {
padding: 16rem 0 6rem;
}

}


@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;
}

/* common
------------------------------------------------------------ */
.mw200 {
overflow-x: auto;
}
.mw200 img {
width: 200%;
max-width: 200%;
}

/* main
------------------------------------------------------------ */
/* #about */
#about nav::before {
top: -12rem;
left: 90%;
}
#about nav ul {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#about nav ul li {
flex-basis: 30%;
}

/* #special */
#special {
padding: 0 0 5rem;
}
#special h2 {
margin-bottom: -3rem;
}
#special h2 img {
max-height: 6rem;
}
#special h3 {
max-width: 92%;
margin: -3rem auto 3rem;
}

/* #benefits */
#benefits::before {
width: 55vw;
top: -8rem;
}
#benefits ul {
width: 80%;
margin: 0 auto;
grid-template-columns: 1fr;
gap: 3rem;
}

/* #exchange */
#exchange ul {
width: 80%;
margin: 0 auto;
grid-template-columns: 1fr;
}

/* #fanfun */
#fanfun {
padding: 3rem 0 7rem;
}
#fanfun .hdr {
width: 80%;
margin: 0 auto;
display: block;
}
#fanfun .hdr h2 {
width: 80%;
margin: 0 auto 3rem;
}
#fanfun .hdr div {
display: none;
}
#fanfun ul {
width: 80%;
margin: 0 auto;
grid-template-columns: 1fr;
}

/* #price */
#price h2 img {
max-height: 10rem;
}

/* #request_web */
#request_web h2 img {
max-height: 10rem;
}
#request_web h3 img {
max-height: 10rem;
}
#request_web .step {
width: 80%;
margin: 3rem auto 1rem;
}
#request_web .swiper-prev,
#request_web .swiper-next {
width: 4rem;
}
#request_web .swiper-pagination-bullet {
width: 5rem;
height: 1rem;
}

/* #request_counter */
#request_counter {
padding: 8rem 0 5rem;
}
#request_counter h3 {
top: -6rem;
}
#request_counter h3 img {
max-height: 10rem;
}

/* #reception */
#reception h2 {
margin-bottom: -7rem;
}
#reception h2 img {
max-height: 10rem;
}

/* #faq */
#faq h1 img {
max-height: 15rem;
}
#faq ul {
grid-template-columns: repeat(2, 1fr);
gap: 1rem .5rem;
}
#faq ul a {
background-size: 20px auto !important;
font-size: 1.6rem;
}
#faq dl dt,
#faq dl dd {
padding: 1em 2em 1em 4em;
}
#faq dl dt::after {
font-size: 3rem;
}
#faq p.att {
text-align: left;
}

}