@charset "UTF-8";
/**
 * デジハリ・オンラインスクールは、あなたと、次の学習体験へ。（2025.10.1作成）
 */

/* -----------------------------------------------------------
Reset
----------------------------------------------------------- */

.aiwithyou {
font-size: 1rem;
line-height: 1em;
-webkit-text-size-adjust: 100%;
visibility: hidden;
position: relative;
animation: loading 2s;
}

@keyframes loading {

0% {
opacity: 0;
}

100% {
opacity: 1;
}

}

html.wf-active .aiwithyou {
visibility: visible;
}

.aiwithyou * {
font-family: "fot-udkakugo-large-pr6n", "YuGothic", "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: 500;
color: #000;
}

.aiwithyou .body-group {
background: #fff;
padding-top: 0;
padding-bottom: 0;
}


/* -----------------------------------------------------------
Style
----------------------------------------------------------- */

.clearfix {
overflow: hidden;
position: relative;
}

.bg-gn {
background: #d5ead8;
}

.bg-bl {
background: #d3edfb;
}

.bg-pr {
background: #d3edfb;
}

.br {
display: block;
font-family: inherit;
font-weight: inherit;
color: inherit;
}

.br-inline {
display: inline-block;
font-family: inherit;
font-weight: inherit;
color: inherit;
}

.c-pk {
font-family: inherit;
font-weight: inherit;
color: #eb6ea5;
}

.c-gn {
font-family: inherit;
font-weight: inherit;
color: #3eb370;
}

.c-bl {
font-family: inherit;
font-weight: inherit;
color: #00b9ef;
}

.c-pr {
font-family: inherit;
font-weight: inherit;
color: #6356a3;
}

.c-or {
font-family: inherit;
font-weight: inherit;
color: #ed6d46;
}

.c-gradient {
background: linear-gradient(90deg, #eb6ea5 12%, #3eb370 31%, #00b9ef 50%, #6356a3 69%, #ed6d46 88%);
font-family: inherit;
font-weight: inherit;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.heading01 {
font-size: clamp(2.25rem, 2.652vw + 1.628rem, 3.75rem);
font-weight: 700;
text-align: center;
line-height: 1.4;
margin-bottom: calc(clamp(3.125rem, 6.25vw, 5rem) - (clamp(2.25rem, 2.652vw + 1.628rem, 3.75rem) * 0.2) - (clamp(1.125rem, 1.326vw + 0.814rem, 1.875rem) * 0.4));
}

.heading01.container-sm {
margin-top: calc(clamp(6.25rem, 12.5vw, 10rem) - (clamp(2.25rem, 2.652vw + 1.628rem, 3.75rem) * 0.2));
}

.heading01:nth-child(1) {
margin-top: 0;
}

.subheading01 {
font-size: clamp(1.125rem, 1.326vw + 0.814rem, 1.875rem);
font-weight: 700;
text-align: center;
line-height: 1.8;
margin-bottom: calc(clamp(1.875rem, 3.125vw, 2.5rem) - (clamp(1.125rem, 1.326vw + 0.814rem, 1.875rem) * 0.4) - (clamp(0.938rem, 0.663vw + 0.782rem, 1.313rem) * 0.5));
}

.fadeUp {
animation-name: fadeUpAnime;
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 0;
}

@keyframes fadeUpAnime {

from {
opacity: 0;
transform: translateY(100px);
}

to {
opacity: 1;
transform: translateY(0);
}

}

.fadeIn {
animation-name: fadeInAnime;
animation-duration: 1.5s;
animation-fill-mode: forwards;
opacity: 0;
}

@keyframes fadeInAnime {

from {
opacity: 0;
}

to {
opacity: 1;
}

}

.fadeUpTrigger, .fadeInTrigger {
opacity: 0;
}


/* -----------------------------------------------------------
Layout
----------------------------------------------------------- */

.scroll {
position: fixed;
bottom: 10px;
left: 50%;
z-index: 2;
}

.scroll span {
font-family: "lato", sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
position: absolute;
left: 10px;
bottom: 10px;
}

.scroll::before {
animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
background: rgba(237, 109, 70, 1);
border-radius: 50%;
content: "";
width: 10px;
height: 10px;
position: absolute;
bottom: 0;
left: -4px;
z-index: 3;
}

@keyframes circlemove {
0% {bottom: 45px;}
100% {bottom: -5px;}
}

@keyframes cirlemovehide {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}

.scroll::after{
background: linear-gradient(135deg, #eb6ea5 12%, #3eb370 31%, #00b9ef 50%, #6356a3 69%, #ed6d46 88%);
content: "";
width: 2px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
}

#mv {
background: #fafafc;
width: 100%;
height: calc(100vh - 66px);
position: relative;
} 

#mv::before{
/*background: #eaeaea;
background-size: cover;*/
content: "";
width: 100%;
height: calc(100vh - 66px);
position: fixed;
top: 0;
left: 0;
z-index: -1;
}

#mv h1.glow {
width: 16em;
font-size: max(3.75vw, 1.3125rem);
font-weight: 600;
line-height: 1.75;
position: fixed;
top: 50%;
left: 50%;
z-index: 2;
transform: translateY(-50%) translateX(-50%);
visibility: hidden;
}

.glow span {
display: inline-block;
width: 1em;
height: 1em;
font-weight: inherit;
opacity: 0;
}

.glow span.ing {
animation: glow_anim 1s ease-out forwards;
}

p.glow span.ing {
animation-delay: 1s;
}

@keyframes glow_anim {

0% {
opacity: 0;
text-shadow: 0 0 0 var(--white), 0 0 0 var(--white);
}

50% {
opacity: 1;
text-shadow: 0 0 10px var(--white), 0 0 15px var(--white);
}

100% {
opacity: 1;
text-shadow: 0 0 0 var(--white), 0 0 0 var(--white);
}

}

/*#hero {
background: url("../img/bg.jpg") no-repeat center center;
background-size: cover;
width: 100%;
height: 100vh;
transform-origin: center;
position: fixed;
z-index: 1;
top: 0;
}*/

/**
 * contents
 */

#wrapper {
background: #fff;
position: relative;
z-index: 4;
}

#content {
width: 93.75%;
max-width: 1200px;
margin: 0 auto;
padding: clamp(5rem, 12.5vw, 10rem) 0;
}

.container-sm {
width: 67.5%;
margin: 0 auto;
}

#content p {
font-size: clamp(0.938rem, 0.663vw + 0.782rem, 1.313rem);
color: #575254;
text-align: center;
line-height: 2;
}

#content p small {
display: inline-block;
font-size: clamp(0.563rem, 0.331vw + 0.485rem, 0.75rem);
font-weight: inherit;
color: inherit;
margin-top: 1em;
}

.feature-slider {
margin-top: clamp(2.5rem, 4.6875vw, 3.75rem);
}

.splide__slide {
border-radius: clamp(0.9375rem, 2.34375vw, 1.875rem);
font-size: clamp(0.75rem, 0.166vw + 0.711rem, 0.844rem);
color: #575254;
line-height: 2;
padding: clamp(1.5rem, 2.34375vw, 1.875rem);
}

.splide__slide .em {
display: block;
font-size: clamp(0.938rem, 0.331vw + 0.86rem, 1.125rem);
font-weight: 700;
line-height: 1.75;
margin: calc(1.875rem - (1.125rem * 0.375)) 0 calc(1.875rem - (1.125rem * 0.375) - (0.84375rem * 0.5));
}

.splide__arrows {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: clamp(0.84375rem, 1.40625vw, 1.125rem);
margin-top: clamp(1.875rem, 3.125vw, 2.5rem);
}

.splide__arrow {
background: none;
width: clamp(1.6875rem, 2.8125vw, 2.25rem);
height: clamp(1.6875rem, 2.8125vw, 2.25rem);
opacity: 1;
position: relative;
top: inherit;
transform: inherit;
}

.splide__arrow--prev {
left: inherit;
}

.splide__arrow--next {
right: inherit;
}

.splide__arrow:disabled {
opacity: .5;
}

.splide.is-focus-in .splide__slide:focus, .splide.is-focus-in .splide__arrow:focus, 
.splide__arrow:focus-visible {
outline: none;
outline-offset: inherit;
}

.figure {
border-radius: clamp(0.9375rem, 2.34375vw, 1.875rem);
margin: calc(clamp(3.125rem, 6.25vw, 5rem) - (3.75rem * 0.2)) 0 calc(clamp(3.125rem, 6.25vw, 5rem) - (1.875rem * 0.4));
}

.figure img {
border-radius: clamp(0.9375rem, 2.34375vw, 1.875rem);
}

.movie {
margin-top: calc(clamp(3.125rem, 6.25vw, 5rem) - (3.75rem * 0.2));
}

.movie iframe {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}

#lineup {
background: #fafafc;;
padding: clamp(5rem, 12.5vw, 10rem) 0;
}

#lineup .container-sm {
width: 63.28125%;
max-width: 810px;
}

#lineup .heading01 {
margin-bottom: calc(clamp(3.125rem, 6.25vw, 5rem) - (3.75rem * 0.2));
}

#lineup ol li:not(:nth-child(1)) {
margin-top: 1.375rem;
}

#lineup ol li a {
background: #fff;
border-radius: clamp(0.75rem, 1.40625vw, 1.125rem);
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: clamp(1.125rem, 0.663vw + 0.97rem, 1.5rem);
line-height: 1.75;
padding: 1em;
}

#lineup ol li a::after {
background: url("../img/arrow-right.svg") no-repeat center center;
content: "";
width: 1.125em;
height: 1.125em;
}

#lineup ol li a div {
width: calc(100% - 1.125em);
font-weight: 600;
padding-right: 1em;
}

#lineup .btn-group {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: clamp(2.5rem, 3.90625vw, 5rem);
margin-top: clamp(5rem, 9.375vw, 7.5rem);
}

#lineup .btn-group li {
width: calc((100% - clamp(2.5rem, 3.90625vw, 5rem)) / 2);
}

#lineup .btn-group li a {
background: #000;
border-radius: 1.5em;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
font-size: clamp(1.125rem, 0.663vw + 0.97rem, 1.5rem);
font-weight: 700;
line-height: 1;
padding: 1em 0.5em;
color: #fff;
}

/**
 * footer
 */

footer {
position: relative;
z-index: 4;
}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 1193px)
-------------------------------------------------------------------------------------------------- */

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

#lineup .btn-group {
align-items: center;
flex-direction: column;
}

#lineup .btn-group li {
width: 100%;
max-width: 360px;
}

#lineup .btn-group li a {
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 834px)
-------------------------------------------------------------------------------------------------- */

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

.container-sm {
width: 80%;
}

.splide__arrows {
justify-content: center;
}

#lineup .container-sm {
width: 75%;
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 767px)
-------------------------------------------------------------------------------------------------- */

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

#mv h1.glow {
font-size: min(5.6vw, 1.875rem);
}

#content p {
text-align: left;
}

#content p .br-inline {
display: inline;
}

}


/* --------------------------------------------------------------------------------------------------
Media Queries (max-width: 600px)
-------------------------------------------------------------------------------------------------- */

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

.heading01, .subheading01 {
text-align: left;
}

#content {
width: 90%;
}

.container-sm {
width: 100%;
}

#lineup .container-sm {
width: 80%;
}

#lineup .heading01 {
text-align: center;
}

}