@charset "UTF-8";

#movie-area {
  height: 90svh;
  position: relative;
  overflow: hidden;
}

#movie-area video {
  position: absolute;
  left: 50%;
  top: 50%;
  min-height: 100%;
  transform: translate(-50%,-50%);
}

/*スクロールダウン全体の場所*/
.scrolldown2{
  /*描画位置※位置は適宜調整してください*/
position:absolute;
bottom:10px;
left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
  /*描画位置*/
position: absolute;
left:10px;
bottom:10px;
  /*テキストの形状*/
color: #f2f2f2;
font-size: 0.7rem;
letter-spacing: 0.05em;
/*縦書き設定*/
-ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom:0;
  left:-4px;
  /*丸の形状*/
width:10px;
height:10px;
border-radius: 50%;
background:#f2f2f2;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
animation:
  circlemove 1.6s ease-in-out infinite,
  cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
    0%{bottom:45px;}
   100%{bottom:-5px;}
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
    0%{opacity:0}
   50%{opacity:1;}
  80%{opacity:0.9;}
100%{opacity:0;}
}

/* 線の描写 */
.scrolldown2:after{
content:"";
  /*描画位置*/
position: absolute;
bottom:0;
left:0;
  /*線の形状*/
width:2px;
height: 50px;
background:#f2f2f2;
}

.hero {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

#movie-area h1 {
  position: absolute;
  left:5vw;
}



.main {
  height:90svh;
}

.main h1 {
  font-weight:700;
  color:#86cc92;
  text-shadow: #505050 3px 3px 7px;
  line-height:140%;
  font-size:3.5vw;
}

.concept {
  background-color: #f2f2f2;
  padding:3rem 0;
}

.concept-con {
  background-color: #fff;
  border-radius:20px;
  padding:2rem;
}

.concept-con h2 {
  text-align:left;
  font-weight:400;
  font-size:1.7rem;
  color:#86cc92;
  padding-bottom:1rem;
}

.news {
  padding:3rem 0;
}

.news-con {
  background-color: #f2f2f2;
  border-radius:20px;
  padding:2rem;
}

.features {
  font-size:0.8rem;
  line-height:150%;
  text-align:center;
}

.features h2 {
  padding: .3rem;
  background-color:#86CC92;
  border-radius: 1.5rem;
  font-weight:600;
  color:#fff;
  font-size:1.1rem;
  text-align:center;
}

.features img {
  width:30%;
  margin-top:1.7rem;
  margin-bottom:1.5rem;
}

.features p {
  text-align:left;
}

.facility h2 {
  width: fit-content;
  padding: .3rem 1rem;
  background-color: #86CC92;
  color: #FFF;
  font-size: 1.1rem;
  border-radius: 1.5rem;
}

.features-con,
.program-con,
.facility-con,
.flow-con,
.gaiyou-con,
.contact-con {
  padding:2rem;
}

dt {
  color: #FFF;
  min-width: 88px;
  position: relative;
  z-index: 1;
}
dt::before {
  content: '';
  width: 76px;
  height: 20px;
  background: url(../img/arrow-tag.png) center/100% no-repeat;
  position: absolute;
  top: 2px;
  left: 9px;
  z-index: -1;
}

.flow-box {
  background-color:#f1f5dc;
  border-radius:20px;
  box-shadow: #ccc 3px 3px 0px;
  margin-bottom:1.5rem;
  padding:1rem 0;
}

.flow-box h2 {
  font-weight:700;
  color:#1eaa39;
  font-size:1.2rem;
  display: flex;
  align-items: center;
  margin-bottom:2rem;
}

.flow-box h2 span {
  color:#86cc92;
  font-weight:900;
  font-size:2rem;
  border:1px solid #86cc92;
  border-radius:10px;
  box-shadow: #1ca331 3px 3px 0;
  padding:0.1rem;
  margin-right:1rem;
}

.flow-box p {
  font-size:0.8rem;
}

.btn-orange {
  padding:0.7rem 0;
  color: #fff;
  background-color: #ff905c;
  border-color: #ff905c;
  box-shadow: #f1744a 3px 3px 0;
  font-weight:700;
}

.btn-backno {
  font-size:0.8rem;
  padding:0.3rem 0;
  color: #fff;
  background-color: #86cc92;
  border-color: #86cc92;
  box-shadow: #7fc28b 3px 3px 0;
  font-weight:700;
}

.btn-backno:focus,
.btn-backno:active,
.btn-backno:hover {
  background-color: #7fc28b;
  border-color:#7fc28b;
}

.btn-orange:focus,
.btn-orange:active,
.btn-orange:hover {
  background-color: #c55935;
  border-color:#c55935;
}


.btn-tel {
  background: #ff905c url(../img/icon-phone.png) no-repeat 25px center / 25px auto;
}

.btn-contact {
  background: #ff905c url(../img/icon-mail.png) no-repeat 25px center / 25px auto;
}

.google-map {
  height:50vh;
}

.nec {
  color:red;
  font-weight:700;
}

#contact {
  padding-top:5.5vh;
  margin-top:-5.5vh;
}


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

}


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

  .main {
    margin-top:4svh;
    height:66svh;
  }
  #movie-area {
    height:66svh;
  }

  h1.topics-title {
    font-size:1.3rem;
  }

  .program-con p {
    padding-left:0;
  }

  .flow-box h2 {
    justify-content: center;
    margin-top:1.5rem;
  }

  .flow-con img {
    width:10rem;
    padding-top:1rem;
  }

  .features img {
    margin-bottom:1.5rem;
  }

  .features h2 {
    padding-bottom:0.5rem;
  }

  .top-title h1 {
    font-weight:700;
    color:#86cc92;
    line-height:140%;
    font-size:8vw;
    height:25svh;
  }

  .concept-con h2 {
    font-size:1.3rem;
  }

  .concept {
    padding: 1rem 0 3rem 0;
  }

}