@charset "UTF-8";
/*---------------------------------------------------------
秋期講習FV
---------------------------------------------------------*/
#TopMain-autumn{
	position: relative;
	z-index: 1;
}
#TopMain-autumn{
    width: 100%;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background: url(../img/k-wam-autumn_bg_pc.png);
}

.TopMain-autumn-inner{
    width: 100%;
    margin: 0 auto;
    max-width: 1400px;
        position: relative;
    z-index: 3;
}
#TopMain-autumn > h1 > img{
    width: 100%;
}

/*---------------------------------------------------------
 定期テスト対策
 ---------------------------------------------------------*/
 .regular-test-area-ttl{
    display: flex;
    align-items: center;
 }
.regular-test-area-ttl-icon{
    position: relative;
    display: inline-block;
    padding-right: 1vw;
}
.regular-test-area-ttl-icon:before{
    content: " ";
  background: url(https://wam.onl/wp/wp-content/themes/wam.onl/img/high/plan-icn.svg) center center no-repeat;
  background-size: 45px auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: block;
  background-color: #007440;
}
.list-check{
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-check > li{
  text-indent: -1em;
  padding-left: 1em;
    position: relative;
}
.list-check > li:before {
    font-family: "Font Awesome 5 pro";
    font-display: swap;
    content: "\f14a";
    position: absolute;
    font-weight: 900;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.list-chec-wam-green{
    margin: 2vh 0;
    padding: 0 0 0 2vw;
}
.list-chec-wam-green > li{
    text-align: left;
    margin:0 0 1.5vh;
    line-height:1.3;
        text-indent: 0;
    padding-left: 0;
}
.list-chec-wam-green > li:before{
    color:#007440;
    text-indent: -1em;
        top: 2.25vh;
}
.list-chec-wam-green > li > span,
.list-chec-wam-green > li:before{
font-size: clamp(1.8rem, 3vw, 2rem);
}
@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
.regular-test-area-ttl-icon:before {
    width: 60px;
    height: 60px;
    background-size: 30px auto
}
.list-chec-wam-green > li:before{
        top: 18px;
}
}

/*---------------------------------------------------------
 夏期講習FV
---------------------------------------------------------*/
#TopMain-summer{
	position: relative;
	z-index: 1;
}

#TopMain-summer{
    width: 100%;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background: url(../img/summer_bg_pc.png);
}

.TopMain-summer-inner{
    width: 100%;
    margin: 0 auto;
    max-width: 1400px;
        position: relative;
    z-index: 3;
}
#TopMain-summer > h1 img{
    width: 95%;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
#TopMain-summer{
    background: url(../img/summer_bg_sp.png);
}
.TopMain-summer-inner{
    width: 100%;
}
#TopMain-summer > h1 > img{
    width: 100%;
}
}

/*---------------------------------------------------------
冬期講習FV
---------------------------------------------------------*/
#TopMain-winter{
	position: relative;
	z-index: 1;
}
/*--webp対応ブラウザの場合--*/
#TopMain-winter{
background:#fff url(../img/winter2025CP-FV_parts_bg_kwam_PC.webp);
}
/*--webp非対応ブラウザの場合--*/
.no-webp #TopMain-winter{
background:#fff url(../img/winter2025CP-FV_parts_bg_kwam_PC.png);
}
#TopMain-winter{
    width: 100%;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    background-size: cover !important;
}
#TopMain-winter::after{
  content: "";
  position: absolute;
  z-index: 2;
  width: 100%;
  height:100%;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.2;
}

.TopMain-winter-inner{
    width: 90%;
    margin: 0 auto;
    max-width: 1600px;
        position: relative;
    z-index: 3;
        padding: 3vh 0 0;
}
#TopMain-winter > h1 > img{
    width: 95%;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */

}
/*-----------------------------------
snow_block
-----------------------------------*/
.snow_parts_box{
  position: relative;
}
.snowpct{
  position: absolute;
}
.snowpct:nth-child(2n+1){
  width: 40px;/*花びらのサイズ*/
}
.snowpct:nth-child(2n){
  width: 90px;/*花びらのサイズ*/
}

/*-----------------------------------
yukiパーツの表示位置
-----------------------------------*/
img.parts_01{top: 0; left: 5%;}
img.parts_03{top: 0; left: 15%;}
img.parts_04{top: 0; left: 30%;}
img.parts_05{top: 0; left: 45%;}
img.parts_06{top: 0; left: 60%;}
img.parts_07{top: 0; left: 75%;}
img.parts_08{top: 0; left: 90%;}


/*-----------------------------------
舞い散るアニメーション
回転しつつ上から下へ
-----------------------------------*/
@keyframes snow {
    0% {
      opacity: 0;
    }
    20% {
      transform:translate(3px,30px) rotate(20deg);
      opacity: 1;
    }
    30% {
      transform:translate(0,50px) rotate(50deg);
    }
    50% {
      transform:translate(-20px,100px)  rotate(150deg);
    }
    70% {
      transform:translate(-40px,150px) rotate(-50deg);
      opacity: .8;
    }
    90% {
      transform:translate(-60px,200px) rotate(-180deg);
    }
    100% {
      transform:translate(-70px,230px);
      opacity: 0;
    }
}

.snowpct {
    animation: snow linear 6s infinite;
    /*アニメーションが始まるまで画像を見えなくしておく*/
    opacity: 0;
}

/*-----------------------------------
アニメーションが始まるまでの時間
-----------------------------------*/
img.parts_01,img.parts_04,img.parts_07,img.parts_10,img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
img.parts_02,img.parts_05{
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
img.parts_03,img.parts_06,img.parts_09,img.parts_12{
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
img.parts_14,img.parts_17{
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
img.parts_15,img.parts_18{
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

@media screen and (max-width: 640px) {
/* 640pxまでの幅の場合に適応される */
/*--webp対応ブラウザの場合--*/
#TopMain-winter{
background:#fff url(../img/winter2025CP-FV_parts_bg_kwam_SP.webp);
}
/*--webp非対応ブラウザの場合--*/
.no-webp #TopMain-winter{
background:#fff url(../img/winter2025CP-FV_parts_bg_kwam_SP.png);
}
#TopMain-winter{
    width: 100%;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}
.TopMain-winter-inner{
    width: 100%;
    padding: 1vh 0 0;
}
#TopMain-winter > h1 > img{
    width: 100%;
}
}