@charset "UTF-8";

/* ===================================
   リセット・ベース
=================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

html {
  height: 100%;
}


body {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  line-height: 1.6;
  /* overflow-x: hidden;
  overflow-y: hidden; */
}
.zen-ant-re {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-ant-me {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-ant-bo {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.zen-new-re {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-new-me {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-new-bo {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
}
body.scroll-detected {
  overflow-y: scroll;
}

body.scroll-enabled {
  height: auto;
  overflow-y: scroll;
}

img {
  width: 100%;
}

/* PC/SP表示切替 */
.pc_only {
  display: block;
}

.sp_only {
  display: none !important;
}

a:hover img {
  opacity: 0.8;
}


.fade-up{

  opacity:0;

  transform:translateY(40px);

  transition:

    opacity .8s ease,

    transform .8s ease;

}
.fade-up.show{

  opacity:1;

  transform:translateY(0);

}
.delay1{
  transition-delay:.1s;
}

.delay2{
  transition-delay:.25s;
}

.delay3{
  transition-delay:.4s;
}

.delay4{
  transition-delay:.55s;
}


.delay5{
  transition-delay:.7s;
}


.delay5{
  transition-delay:.85s;
}


/* ===================================
   ヘッダー
=================================== */



body.scroll-enabled #mv {
  position: relative;
  top: 0;
  height: 100vh;
  padding-top: 7.86vh;
}

header {
  background: linear-gradient(to left, #00ff00, #00b9b2 );
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}

header .header_inner {
  /* max-width: 1830px; */
  padding: 0 3.23vw;
  height: 7.86vh;
  /* max-height: 110px; */
  margin: 0 auto;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

header .header_inner .logo {
  display: block;
  width: 14.5vw;
  max-width: 278.4505px;
  height: auto;
  margin-top: 10px;
}


/* ===================================
   コンテナ
=================================== */


#mv{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  height:100svh;

  overflow:hidden;

  z-index:1;

  background-color: #f2f2f2;

}



.mv_base{

  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  width:min(70vw,900px);

  z-index:10;

  opacity:0;

  animation:mvPop .9s cubic-bezier(.17,.84,.44,1) forwards;

}

.mv_base img{
  width:100%;
  display:block;
}
@keyframes mvPop {

  0%{

    opacity:0;

    transform:
      translate(-55%,-50%)
      scale(.5);

  }

  70%{

    opacity:1;

    transform:
      translate(-55%,-50%)
      scale(1.12);

  }

  100%{

    opacity:1;

    transform:
      translate(-55%,-50%)
      scale(1);

  }

}

.human{

  opacity:0;

  transform:scale(.3);

}

.human.show{

  opacity:1;

  transform:scale(1);

  transition:

  opacity .7s ease,

  transform .7s cubic-bezier(.17,.84,.44,1);

}

#mv .left{

  position:absolute;

  width:22vw;

  min-width:160px;

  top:54%;

  left:-1%;

  z-index:20;

}

#mv .right_top{

  position:absolute;

  width:16vw;

  min-width:140px;

  top:16%;

  left:72%;

  z-index:9;

}

#mv .right_bottom{

  position:absolute;

  width:20vw;

  min-width:200px;

  top:62%;

  left:77%;

  z-index:9;

}

.human img{

  width:100%;

  display:block;

}

.icon{

opacity:0;

position:absolute;

transform:

translate(-50%,-50%)

scale(.2);

}

.icon.show{

opacity:1;

transform:

translate(-50%,-50%)

scale(1);

transition:

all .4s ease;

}

@keyframes iconFloat1{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translateY(0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translateY(-15px);
  }
}

@keyframes iconFloat2{

  0%,100%{

    transform:
      translate(-50%,-50%)
      translate(0,0);

  }

  50%{

    transform:
      translate(-50%,-50%)
      translate(10px,-12px);

  }

}

@keyframes iconFloat3{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}

@keyframes iconFloat4{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}

@keyframes iconFloat5{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}

@keyframes iconFloat6{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}

@keyframes iconFloat7{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}

@keyframes iconFloat8{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}

@keyframes iconFloat9{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}

@keyframes iconFloat10{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}

@keyframes iconFloat11{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}

@keyframes iconFloat12{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}

@keyframes iconFloat13{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}

@keyframes iconFloat14{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}

@keyframes iconFloat15{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}

@keyframes iconFloat16{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}

@keyframes iconFloat17{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}
@keyframes iconFloat18{

  0%,100%{
    transform:
      translate(-50%,-50%)
      translate(0,0);

  }
  50%{
    transform:
      translate(-50%,-50%)
      translate(-10px,-12px);
  }

}

/* 各アイテムごとに異なる遅延とアニメーションパターンを設定 */

.item_1.is-floating {
  animation:iconFloat1 4s ease-in-out infinite;
}

.item_2.is-floating {
  animation:iconFloat2 4s ease-in-out infinite;
}

.item_3.is-floating {
  animation:iconFloat3 4s ease-in-out infinite;
}

.item_4.is-floating {
  animation:iconFloat4 4s ease-in-out infinite;
}

.item_5.is-floating {
  animation:iconFloat5 4s ease-in-out infinite;
}

.item_6.is-floating {
  animation:iconFloat6 4s ease-in-out infinite;
}

.item_7.is-floating {
  animation:iconFloat7 4s ease-in-out infinite;
}

.item_8.is-floating {
  animation:iconFloat8 4s ease-in-out infinite;
}

.item_9.is-floating {
  animation:iconFloat9 4s ease-in-out infinite;
}

.item_10.is-floating {
  animation:iconFloat10 4s ease-in-out infinite;
}

.item_11.is-floating {
  animation:iconFloat11 4s ease-in-out infinite;
}

.item_12.is-floating {
  animation:iconFloat12 4s ease-in-out infinite;
}

.item_13.is-floating {
  animation:iconFloat13 4s ease-in-out infinite;
}

.item_14.is-floating {
  animation:iconFloat14 4s ease-in-out infinite;
}

.item_15.is-floating {
  animation:iconFloat15 4s ease-in-out infinite;
}

.item_16.is-floating {
  animation:iconFloat16 4s ease-in-out infinite;
}

.item_17.is-floating {
  animation:iconFloat17 4s ease-in-out infinite;
}

.item_18.is-floating {
  animation:iconFloat18 4s ease-in-out infinite;
}


/* 飛行機 */
.item_1 {
  width: min(12.1vw, 16.6vh);
  /* max-width: 231.8125px; */
  bottom: 9.2%;
  right: 22.4%;
  z-index: 22;
}


/* ノートPC */
.item_2 {
  width: min(15.5vw, 20.5vh);
  /* max-width: 258.9009px; */
  top: 68.2%;
  left: 30.9%;
  z-index: 22;
}

/* AIチップ */
.item_3 {
  width: min(8.6vw, 12.5vh);
  /* max-width: 205.5074px; */
  top: 52.2%;
  left: 20.9%;
  z-index: 22;
}

/* AIコア */
.item_4 {
  width: min(9.3vw, 12.8vh);
  /* max-width: 180.7039px; */
  top: 54%;
  right: 7.5%;
  z-index: 22;
}

/* 吹き出し */
.item_5 {
  width: min(7.9vw, 10.8vh);
  /* max-width: 151.1582px; */
  top: 16.1%;
  left: 88.1%;
}

/* ふわふわ１ */
.item_6 {
  width: min(6.2vw, 10vh);
  /* max-width: 196.1416px; */
  top: 22.4%;
  left: 36.1%;
  z-index: 9;
}

/* ふわふわ2 */
.item_7 {
  width: min(6.1vw, 9.1vh);
  /* max-width: 154.8699px; */
  top: 80.6%;
  left: 44.1%;
  z-index: 22;
}

/* ふわふわ3 */
.item_8 {
  width: min(9.8vw, 13.4vh);
  /* max-width: 188.013px; */
  top: 90.8%;
  left: 30.4%;
}

/* ふわふわ4 */
.item_9 {
  width: min(18.4vw, 22.3vh);
  /* max-width: 200.4413px; */
  top: 40.8%;
  left: 8.9%;
}

/* ふわふわ5 */
.item_10 {
  width: min(10.3vw, 14.1vh);
  /* max-width: 196.9233px; */
  top: 12.2%;
  left: 20.6%;
}

/* ふわふわ6 */
.item_11 {
  width: min(10.3vw, 14.1vh);
  /* max-width: 196.9233px; */
  top: 12.2%;
  left: 4.6%;
}


/* ふわふわ7 */
.item_12 {
  width: min(4.3vw, 8.1vh);
  /* max-width: 196.9233px; */
  top: 11.2%;
  left: 34.6%;
}


/* ふわふわ8 */
.item_13 {
  width: min(10.3vw, 14.1vh);
  /* max-width: 196.9233px; */
  top: 10.2%;
  left: 50.6%;
}

/* ふわふわ9 */
.item_14 {
  width: min(8.4vw, 12.3vh);
  /* max-width: 200.4413px; */
  top: 60.8%;
  left: 98.9%;
}

/* ふわふわ10 */
.item_15 {
  width: min(10.3vw, 14.1vh);
  /* max-width: 196.9233px; */
  top: 40.2%;
  left: 95.6%;
}

/* ふわふわ11 */
.item_16 {
  width: min(10.3vw, 14.1vh);
  /* max-width: 196.9233px; */
  top: 10.2%;
  left: 62.6%;
  z-index: 9;
}


/* ふわふわ12 */
.item_17 {
  width: min(10.3vw, 14.1vh);
  /* max-width: 196.9233px; */
  top: 10.2%;
  left: 95.6%;
}


/* ふわふわ13 */
.item_18 {
  width: min(10.3vw, 14.1vh);
  /* max-width: 196.9233px; */
  bottom: -5.2%;
  left: 66.6%;
}




/* ===================================
   浮遊アニメーション
=================================== */


.fade-up-item {
  opacity: 0.2;
  visibility: hidden;
  transition: opacity 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0s 2.5s;
}

/* is-floating 時のスタイル（ふわふわアニメーション） */
.fade-up-item.is-floating {
  animation: float-y 6s ease-in-out infinite;
}

/* ===================================
   レスポンシブ対応
=================================== */

@media (max-width: 768px) {
  .pc_only {
    display: none !important;
  }

  .sp_only {
    display: block !important;
  }

  /* body {
    overflow: hidden !important;
  } */

  /* ===================================
   ヘッダー
=================================== */

  body.scroll-enabled #mv {
    height: 109.8vw;
    padding-top: 45px;
  }

  header .header_inner {
    padding: 0 4vw;
    height: 45px;
  }

  header .header_inner .logo {
    width: 113.9116px;
    margin-top: 8px;
  }

  #mv {
   
    padding-top: 45px;
  }




  /* ===================================
   コンテナ
=================================== */
  .container {
    width: 100%;
    height: calc(112.8vw - 45px);
  }

  .student {
    width: 59.9vw;
    top: 28.3%;
    left: 55.7%;
  }

.mv_base{

  position:absolute;

  top:45%;
  left:50%;

  transform:translate(-50%,-50%);

  width:min(80vw,900px);

  z-index:10;

  opacity:0;

  animation:mvPop .9s cubic-bezier(.17,.84,.44,1) forwards;

}

.mv_base img{
  width:100%;
  display:block;
}
@keyframes mvPop {

  0%{

    opacity:0;

    transform:
      translate(-45%,-50%)
      scale(.5);

  }

  70%{

    opacity:1;

    transform:
      translate(-45%,-50%)
      scale(1.12);

  }

  100%{

    opacity:1;

    transform:
      translate(-45%,-50%)
      scale(1);

  }

}


#mv .left{

  position:absolute;

  width:20vw;

  min-width:180px;

  top:64%;

  left:-10%;

  z-index:9;

}

#mv .right_top{

  position:absolute;

  width:12vw;

  min-width:180px;

  top:6%;

  left:62%;

  z-index:9;

}

#mv .right_bottom{

  position:absolute;

  width:12vw;

  min-width:180px;

  top:68%;

  left:60%;

  z-index:9;

}
  
/* 飛行機 */
.item_1 {
  width: 17.1vw;
  /* max-width: 231.8125px; */
  bottom: 22.2%;
  right: 14.4%;
  z-index: 22;
}


/* ノートPC */
.item_2 {
  width: 24.5vw;
  top: 85.2%;
  left: 55.9%;
  z-index: 22;
}

/* AIチップ */
.item_3 {
  width: 18vw;
  /* max-width: 205.5074px; */
  top: 60.2%;
  left: 18.9%;
  z-index: 22;
}

/* AIコア */
.item_4 {
  width: 16vw;
  /* max-width: 180.7039px; */
  top: 15%;
  right: 35%;
  z-index: 22;
}

/* 吹き出し */
.item_5 {
  width: 15vw;
  /* max-width: 151.1582px; */
  top: 32.1%;
  left: 88.1%;
  z-index: 22;
}

/* ふわふわ１ */
.item_6 {
  width: min(6.2vw, 10vh);
  /* max-width: 196.1416px; */
  top: 22.4%;
  left: 36.1%;
  z-index: 9;
}

/* ふわふわ2 */
.item_7 {
  width: 12vw;
  /* max-width: 154.8699px; */
  top: 68.6%;
  left: 44.1%;
  z-index: 22;
}

/* ふわふわ3 */
.item_8 {
  width: 16vw;
  /* max-width: 188.013px; */
  top: 98.8%;
  left: 46.4%;
  z-index: 22;
}

/* ふわふわ4 */
.item_9 {
  width: 40vw;
  /* max-width: 200.4413px; */
  top: 32.8%;
  left: 8.9%;
}

/* ふわふわ5 */
.item_10 {
  width: min(10.3vw, 14.1vh);
  /* max-width: 196.9233px; */
  top: 12.2%;
  left: 20.6%;
}

/* ふわふわ6 */
.item_11 {
  width: min(10.3vw, 14.1vh);
  /* max-width: 196.9233px; */
  top: 12.2%;
  left: 4.6%;
}


/* ふわふわ7 */
.item_12 {
  width: min(4.3vw, 8.1vh);
  /* max-width: 196.9233px; */
  top: 11.2%;
  left: 34.6%;
}


/* ふわふわ8 */
.item_13 {
  width: min(10.3vw, 14.1vh);
  /* max-width: 196.9233px; */
  top: 10.2%;
  left: 50.6%;
}

/* ふわふわ9 */
.item_14 {
  width: min(8.4vw, 12.3vh);
  /* max-width: 200.4413px; */
  top: 60.8%;
  left: 98.9%;
}

/* ふわふわ10 */
.item_15 {
  width: min(10.3vw, 14.1vh);
  /* max-width: 196.9233px; */
  top: 40.2%;
  left: 95.6%;
}

/* ふわふわ11 */
.item_16 {
  width: min(10.3vw, 14.1vh);
  /* max-width: 196.9233px; */
  top: 25.2%;
  left: 50.6%;
  z-index: 9;
}


/* ふわふわ12 */
.item_17 {
  width: min(10.3vw, 14.1vh);
  /* max-width: 196.9233px; */
  top: 10.2%;
  left: 95.6%;
}


/* ふわふわ13 */
.item_18 {
  width: 14.3vw;
  /* max-width: 196.9233px; */
  bottom: -5.2%;
  left: 77.6%;
  z-index: 22;
}

}

  /* ===================================
   浮遊アニメーション（スマホ用 - 動きを小さく）
=================================== */


/* ===================================
   MV以下を仮設置
=================================== */

.under{

  position:relative;

  z-index:10;

  margin-top:100dvh;
  

}

/* ===================================
   スクロールしたら表示されるコンテンツ
=================================== */

.scrolled_contents{

  position:relative;
  z-index:20;
  border-radius:0;
  margin-top:-10px;
  padding-top:10px;

}




.scrolled_bg {
  background: linear-gradient(90deg,rgba(0, 185, 178, 0.85), rgba(0, 255, 0, 0.85));
  position: relative;
  width: 100%;
  height: 100svh;
  z-index: 21;
  display: flex;
  justify-content: center;
  align-items: center;
}


.scrolled_bg .text_wrap {
  width: 100%;
  color: #fff;
  margin: auto;
  padding: 0 0 0 0;
}



.scrolled_bg .text_wrap h3 {
  width: 550px;
  max-width: 100%;
  margin: auto;
  padding: 10px 0 40px;

}

.scrolled_bg .text_wrap .read {
  width: 690px;
  max-width: 100%;
  margin: auto;
  padding: 10px 0 20px;
}


.scrolled_bg .text_wrap p {
  margin: 10px auto 20px;
  font-size: 1.16rem;
  line-height: 2.0;
   text-align: center;
}

@media (max-width: 768px) {

  .scrolled_bg {
  background: linear-gradient(90deg,rgba(0, 185, 178, 1), rgba(0, 255, 0, 1));
  position: relative;
  width: 100%;
  height: 100svh;
  z-index: 21;
}
  
.scrolled_bg .text_wrap h3 {
  width: 80%;
  max-width: 100%;
  margin: auto;
  padding: 10px 0 20px;
}

.scrolled_bg .text_wrap .read {
  width: 65%;
  max-width: 100%;
  margin: auto;
  padding: 4px 0 30px;
}


.scrolled_bg .text_wrap p {
  margin: 0px auto 18px;
  font-size: 3.7vw;
  line-height: 1.8;
   text-align: center;
}

}


.contents_contents {
  background-color: #f2f2f2;
  margin: 0 auto;
  padding: 10px 0 10px;
}


/* ===================================
   studies
=================================== */
#studies {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 60px 0;
  
}

#studies .studies_studies {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 2% 0 10%;
  background: linear-gradient(90deg,rgba(0, 185, 178, 1), rgba(0, 255, 0, 1));
  border-top-left-radius: 44% 10%;
  border-top-right-radius: 44% 10%;
  border-bottom-right-radius: 44% 10%;
  border-bottom-left-radius: 44% 10%;
  position: relative;
}

#studies .tate {
  position: absolute;
  width: 80px;
  max-width: 100%;
  padding-left: 10px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}


#studies h3 {
  width: 740px;
  max-width: 100%;
  margin: auto;
  padding: 20px 0 40px;
  text-align: center;
  font-size: 50px;
  line-height: 1.8;
}

#studies h4 {
  width: 85%;
  max-width: 100%;
  margin: 20px 0 20px 15%;
  padding: 4px 40px 4px 18%;
  text-align: center;
  background-color: #000;
  color: #fff;
  font-size: 24px;
  display: flex;
  justify-content: flex-start;
}

#studies p {
  width: 70%;
  max-width: 100%;
  margin: auto 15% 4%;
  padding: 0;
  font-size: 19px;
  line-height: 1.8;
  text-align: left;
}


#studies .point01, #studies .point03, #studies .point05 {
  width: 90%;
  margin-left: 10%;
  padding: 30px 0 30px 20px;
}

#studies .point02, #studies .point04  {
  width: 90%;
  margin-right: 10%;
  padding: 30px 20px 30px 0;
}


#studies .point06 {
  width: 89%;
  margin-left: 11%;
  padding: 30px 0 30px 30px;
}


#studies .point07 {
  width: 89%;
  margin-right: 11%;
  padding: 30px 30px 30px 0;
}

#studies .fuwa {
  position: absolute;
  z-index: 20;
}

#studies .fuwa  {
  animation: floating-xy 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-xy {
  0% {
    transform: translateX(-5px) translateY(-10px);
  }
  100% {
    transform: translateX(5px) translateY(10px);
  }
}

#studies .fuwa2 {
  position: absolute;
  z-index: 20;

}

#studies .fuwa2  {
  animation: floating-xxy 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-xxy {
  0% {
    transform: translateX(5px) translateY(10px);
  }
  100% {
    transform: translateX(-5px) translateY(-10px);
  }
}


.icon_item01 {
  width: 8%;
  top:2%;
  right: 6%;
}

.icon_item02 {
  width: 6%;
  top:10%;
  right: 4%;
}

.icon_item03 {
  width: 8%;
  top:18%;
  left: 6%;
}

.icon_item04 {
  width: 12%;
  top:30%;
  right: 4%;
}


.icon_item05 {
  width: 10%;
  top:34%;
  left: 6%;
}

.icon_item06 {
  width: 6%;
  top:44%;
  right: 4%;
}


.icon_item07 {
  width: 8%;
  bottom:2%;
  right: 18%;
}




@media (max-width: 768px) {
  #studies {
  width: 100%;
  max-width: 100%;
  margin: 30px auto;
  padding: 0;
}

#studies .tate {
  position: absolute;
  width: 8%;
  max-width: 100%;
  padding-left: 10px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#studies .studies_studies {
  border-top-left-radius: 44% 5%;
  border-top-right-radius: 44% 5%;
  border-bottom-right-radius: 44% 5%;
  border-bottom-left-radius: 44% 5%;
}


#studies h3 {
  width: 74%;
  max-width: 100%;
  margin: auto;
  padding: 20px 0 30px;
  font-size: 6.8vw;
  line-height: 1.8;
}


#studies h4 {
  width: 92%;
  max-width: 100%;
  margin: 4% 0 4% 8%;
  padding: 2px 0 2px 12%;
  text-align: center;
  background-color: #000;
  color: #fff;
  font-size: 3.2vw;
}

#studies h5 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#studies p {
  width: 80%;
  max-width: 100%;
  margin: auto 10% 10%;
  padding: 0;
  font-size: 3.2vw;
  line-height: 1.8;
  text-align: left;
}



#studies .point01, #studies .point03, #studies .point05 {
  width: 94%;
  margin-left: 6%;
  padding: 2px 0 2px 20px;
}

#studies .point02, #studies .point04  {
  width: 94%;
  margin-right: 6%;
  padding: 2px 20px 2px 0;
}


#studies .point06 {
  width: 94%;
  margin-left: 6%;
  padding: 0px 0 30px 0px;
}


#studies .point07 {
  width: 98%;
  margin-right: 2%;
  padding: 0px 0px 30px 0;
}

.icon_item01 {
  width: 18%;
  top:-1%;
  right: 10%;
}

.icon_item02 {
  width: 12%;
  top:12%;
  left: 4%;
}

.icon_item03 {
  width: 8%;
  top:18%;
  left: 90%;
}

.icon_item04 {
  width: 12%;
  top:24%;
  left: 0%;
}


.icon_item05 {
  width: 10%;
  top:34%;
  left: 80%;
}

.icon_item06 {
  width: 7%;
  top:40%;
  right: 48%;
}


.icon_item07 {
  width: 16%;
  bottom:2%;
  right: 8%;
}



}







/* ===================================
   course
=================================== */
#course {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 60px 0;
  
}

#course .course_course {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 2% 0 5%;
  background: linear-gradient(90deg,rgba(62, 125, 255, 1), rgba(45, 233, 255, 1));
  border-top-left-radius: 44% 10%;
  border-top-right-radius: 44% 10%;
  border-bottom-right-radius: 44% 10%;
  border-bottom-left-radius: 44% 10%;
  position: relative;
}

#course .tate {
  position: absolute;
  width: 80px;
  max-width: 100%;
  padding-left: 10px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}


#course h3 {
  width: 446px;
  max-width: 100%;
  margin: auto;
  padding: 20px 0 40px;
  text-align: center;
  font-size: 50px;
  line-height: 1.8;
}


#course .course3 {
  width: 880px;
  margin: auto;
  padding: 0;
  
}


#course .fuwa3 {
  position: absolute;
  z-index: 20;
}

#course .fuwa3  {
  animation: floating-xyy 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-xyy {
  0% {
    transform: translateX(-5px) translateY(-10px);
  }
  100% {
    transform: translateX(5px) translateY(10px);
  }
}

#course .fuwa4 {
  position: absolute;
  z-index: 20;

}

#course .fuwa4  {
  animation: floating-xxyy 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-xxyy {
  0% {
    transform: translateX(5px) translateY(10px);
  }
  100% {
    transform: translateX(-5px) translateY(-10px);
  }
}


.icon_item08 {
  width: 6%;
  top:36%;
  left: 8%;
}

.icon_item09 {
  width: 6%;
  top:48%;
  right: 10%;
}

.icon_item10 {
  width: 11%;
  bottom:13%;
  left: 6%;
}

.icon_item11 {
  width: 20%;
  bottom:-2%;
  left: 6%;
}



#course .course3 li.course01 {
  text-align: left;
  display: flex;
  justify-content: flex-start;
  margin: 20px 0;
}
#course .course3 li.course01 img {
  width: 840px;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  margin: 0;
}


#course .course3 li.course02 {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}
#course .course3 li.course02 img {
  width: 840px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

#course .course3 li.course03 {
  text-align: left;
  display: flex;
  justify-content: flex-start;
  margin: 20px 0;
}
#course .course3 li.course03 img {
  width: 840px;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  margin: 0;
}


#course p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: center;
}

@media (max-width: 768px) {
  #course {
  width: 100%;
  max-width: 100%;
  margin: 40px auto;
  padding: 0;
}

#course .tate {
  position: absolute;
  width: 8%;
  max-width: 100%;
  padding-left: 10px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#course .course_course {
  border-top-left-radius: 44% 5%;
  border-top-right-radius: 44% 5%;
  border-bottom-right-radius: 44% 5%;
  border-bottom-left-radius: 44% 5%;
}


#course h3 {
  width: 60%;
  max-width: 100%;
  margin: auto;
  padding: 20px 0 30px;
  font-size: 6.8vw;
  line-height: 1.8;
}

#course h5 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#course .course3 {
  width: 90%;
  margin: auto;
  padding: 0;
  
}

#course .course3 li.course01 {
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}
#course .course3 li.course01 img {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}


#course .course3 li.course02 {
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}
#course .course3 li.course02 img {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}

#course .course3 li.course03 {
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}
#course .course3 li.course03 img {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}


#course p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  font-size: 4.2vw;
  line-height: 1.8;
}

.icon_item08 {
  width: 8%;
  top:36%;
  left: 8%;
}

.icon_item09 {
  width: 8%;
  top:48%;
  right: 10%;
}

.icon_item10 {
  width: 13%;
  bottom:13%;
  left: 6%;
}

.icon_item11 {
  width: 22%;
  bottom:-2%;
  left: 6%;
}

}







/* ===================================
   step
=================================== */
#step {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 60px 0;
  
}

#step .step_step {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 2% 0 5%;
  background: linear-gradient(90deg,rgba(255, 237, 0, 1), rgba(253, 138, 0, 1));
  border-top-left-radius: 44% 10%;
  border-top-right-radius: 44% 10%;
  border-bottom-right-radius: 44% 10%;
  border-bottom-left-radius: 44% 10%;
  position: relative;
}

#step .tate {
  position: absolute;
  width: 80px;
  max-width: 100%;
  padding-left: 10px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}


#step h3 {
  width: 476px;
  max-width: 100%;
  margin: auto;
  padding: 20px 0 40px;
  text-align: center;
  font-size: 50px;
  line-height: 1.8;
}


#step p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: center;
}

#step .step3 {
  width: 980px;
  max-width: 100%;
  margin: auto;
  padding: 0;
  
}

#step .step3 li.step01 {
  text-align: left;
  display: flex;
  justify-content: flex-start;
  margin: 0;
}
#step .step3 li.step01 img {
  width: 780px;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  margin: 0;
}


#step .step3 li.step02 {
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}
#step .step3 li.step02 img {
  width: 780px;
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}

#step .step3 li.step03 {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}
#step .step3 li.step03 img {
  width: 780px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}



#step .step_box {
  /*background: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);*/
  top:0;
  left: 0;
  width: 90%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: left;
}


 #step .fuwa5 {
  position: absolute;
  z-index: 20;
}

 #step .fuwa5  {
  animation: floating-xxyyy 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-xxyyy {
  0% {
    transform: translateX(-5px) translateY(-10px);
  }
  100% {
    transform: translateX(5px) translateY(10px);
  }
}



.icon_item12 {
  width: 9%;
  bottom:1%;
  right: 7%;
}




@media (max-width: 768px) {
  #step {
  width: 100%;
  max-width: 100%;
  margin: 40px auto;
  padding: 0;
}

#step .step_step {
border-top-left-radius: 44% 5%;
  border-top-right-radius: 44% 5%;
  border-bottom-right-radius: 44% 5%;
  border-bottom-left-radius: 44% 5%;
}


#step h3 {
  width: 64%;
  max-width: 100%;
  margin: auto;
  padding: 20px 0 30px;
  font-size: 6.8vw;
  line-height: 1.8;
}

#step h5 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#step p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  font-size: 4.2vw;
  line-height: 1.8;
}

#step .tate {
  position: absolute;
  width: 8%;
  max-width: 100%;
  padding-left: 10px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#step .step3 {
  width: 90%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  
}

#step .step3 li.step01 {
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}
#step .step3 li.step01 img {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}


#step .step3 li.step02 {
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}
#step .step3 li.step02 img {
 width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}

#step .step3 li.step03 {
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}
#step .step3 li.step03 img {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}


#step .step_box {
  /*background: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);*/
  top:0;
  left: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: left;
}


.icon_item12 {
  width: 12%;
  bottom:0%;
  right: 6%;
}


}






/* ===================================
   future
=================================== */
#future {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 60px 0;
  
}

#future .future_future {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 2% 0 5%;
  background: linear-gradient(90deg,rgba(255, 51, 86, 1), rgba(152, 157, 255, 1));
  border-top-left-radius: 44% 10%;
  border-top-right-radius: 44% 10%;
  border-bottom-right-radius: 44% 10%;
  border-bottom-left-radius: 44% 10%;
  position: relative;
}

#future .tate {
  position: absolute;
  width: 80px;
  max-width: 100%;
  padding-left: 10px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}


#future h3 {
  width: 396px;
  max-width: 100%;
  margin: auto;
  padding: 20px 0 40px;
  text-align: center;
  font-size: 50px;
  line-height: 1.8;
}


#future p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: center;
}

#future .future01 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

#future .future01 img {
  width: 80%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

#future .future02 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

#future .future02 img {
  width: 78%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}


#future .future_box {
  /*background: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);*/
  top:0;
  left: 0;
  width: 90%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: left;
}


@media (max-width: 768px) {
  #future {
  width: 100%;
  max-width: 100%;
  margin: 40px auto;
  padding: 0;
}

#future .future_future {
    background: linear-gradient(90deg,rgba(255, 51, 86, 1), rgba(152, 157, 255, 1));
  border-top-left-radius: 44% 5%;
  border-top-right-radius: 44% 5%;
  border-bottom-right-radius: 44% 5%;
  border-bottom-left-radius: 44% 5%;

}

#future .tate {
  position: absolute;
  width: 8%;
  max-width: 100%;
  padding-left: 10px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#future h3 {
  width: 54%;
  max-width: 100%;
  margin: auto;
  padding: 20px 0 30px;
  font-size: 6.8vw;
  line-height: 1.8;
}

#future h5 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
}

#future p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  font-size: 4.2vw;
  line-height: 1.8;
}


#future .future01 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

#future .future01 img {
  width: 99%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

#future .future02 {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

#future .future02 img {
  width: 97%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}


#future .future_box {
  /*background: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);*/
  top:0;
  left: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: #222;
  font-size: 19px;
  line-height: 2.4;
  text-align: left;
}

}




/* ===================================
   access
=================================== */


#access {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 60px 0;
  
}

#access .access_access {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 3% 0 8%;
  background: linear-gradient(90deg,rgba(0, 185, 178, 1), rgba(0, 255, 0, 1));
  border-top-left-radius: 44% 10%;
  border-top-right-radius: 44% 10%;
  border-bottom-right-radius: 44% 10%;
  border-bottom-left-radius: 44% 10%;
  position: relative;
}

#access .tate {
  position: absolute;
  width: 80px;
  max-width: 100%;
  padding-left: 10px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}


#access h3 {
  width: 548px;
  max-width: 100%;
  margin: auto;
  padding: 20px 0 40px;
  text-align: center;
  font-size: 50px;
  line-height: 1.8;
}

#access h4 {
  width: 360px;
  max-width: 100%;
  margin: auto;
  padding: 20px 0 20px;
  text-align: center;
  font-size: 50px;
  line-height: 1.8;
}


#access p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0 0 20px;
  color: #fff;
  font-size: 19px;
  line-height: 2.4;
  text-align: center;
}

#access .jikan {
  width: 1000px;
  max-width: 100%;
  margin: auto;
  padding: 20px 0 40px;
  text-align: center;
}

#access .line {
  width: 1000px;
  max-width: 100%;
  margin: auto;
  padding: 40px 0 ;
  text-align: center;
}

@media (max-width: 768px) {
#access h3 {
  width: 66%;
  max-width: 100%;
  margin: auto;
  padding: 20px 0 20px;
  text-align: center;
  font-size: 50px;
  line-height: 1.8;
}
#access h4 {
  width: 50%;
  max-width: 100%;
  margin: auto;
  padding: 10px 0 10px;
  text-align: center;
  font-size: 50px;
  line-height: 1.8;
}


#access p {
  width: 100%;
  max-width: 100%;
  margin: auto;
  padding: 0 0 20px;
  color: #fff;
  font-size: 3.2vw;
  line-height: 1.8;
  text-align: center;
}

#access .jikan {
  width: 80%;
  max-width: 100%;
  margin: auto;
  padding: 20px 0 40px;
  text-align: center;
}

#access .line {
  width: 1000px;
  max-width: 100%;
  margin: auto;
  padding: 10px 0 ;
  text-align: center;
}

}




#access .card-gallery{
  width:100%;
  overflow:hidden;
  margin:30px auto 80px;

  position:relative;   /* ←追加 */
}

#access .card-track{
  overflow:hidden;
  width:100%;

  position:relative;
}

/* タイトル */
#access .card-gallery .card_title{

  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%, -50%);

  z-index:20;       /* スライドより手前 */

  margin:0;

  width:316px;
  max-width:316px;
}

#access .card-gallery .card_title img{
  width:100%;
  display:block;
}

#access .card-slide{
  position:relative;
  z-index:1;

  display:flex;

  width:max-content;

  animation:slideLoop 48s linear infinite;

  padding:0;
  margin:0;
}

#access .card-slide li{

  list-style:none;

  flex-shrink:0;

  width:332px;

  margin-right:20px;
}

#access .card-slide img{

  width:100%;

  display:block;
}

#access .card-slide:hover{

  animation-play-state:paused;

}


/* 左に流れる */
@keyframes slideLoop{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(calc(-50%));
  }

}
@media(max-width:768px){

  #access .card-gallery .card_title{

  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%, -50%);

  z-index:10;       /* スライドより手前 */

  margin:0;

  width:50%;
  max-width:316px;
}

#access .card-slide li{

  width:220px;

  margin-right:16px;

}

#access .card-slide{

  animation:slideLoop 48s linear infinite;

}

}


/* ===================================
   footer
=================================== */



footer {
 width: 100%;
 margin: auto;
 padding: 40px 0 0;
 background-color: #f2f2f2;
}

footer .box-content {
  
  width: 900px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: auto;
}

footer .box-content a {
  
  width: 48%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 40px;
}

footer .box-content a:last-child {
  
  width: 100%;
  max-width: 100%;
}


footer .box-content a{
  position:relative;
  display:block;
  overflow:visible;
}

footer .box-content a img{
  width:100%;
  display:block;
  position:relative;
  z-index:1;
}

footer .box-content a::after{
  content:"";
  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:100%;

  border:3px solid;
  box-sizing:border-box;

  z-index:2;
  pointer-events:none;

  /* 初期位置 */
  transform:translate(12px,12px);

  transition:transform .4s cubic-bezier(.22,1,.36,1);
}

footer .box-content a:hover::after{
  transform:translate(0,0);
}

footer .box-content a:nth-child(1)::after{
  border-color:#B23D74;
}

footer .box-content a:nth-child(2)::after{
  border-color:#008CC7;
}

footer .box-content a:nth-child(3)::after{
  border-color:#00A89A;
}

footer .box-content a:hover::after{
  transform:translate(0,0);
}

@media (max-width: 768px) {
  footer .box-content {
  
  width: 90%;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: auto;
}

footer .box-content a {
  
  width: 100%;
  max-width: 100%;
  padding: 0;
}

footer .box-content a::after{
    transform:translate(8px,8px);
    border-width:2px;
  }

  footer .box-content a:hover::after{
    transform:translate(0,0);
  }

}


.footer-play {
  width: 800px;
  max-width: 90%;
  margin: auto;
  padding: 60px 0;
}


.footer-logo {
  width: 100%;
  margin: auto;
  padding: 70px 0;
  text-align: center;
  background-color: #114d8d;
}

.footer-logo img.m-auto  {
  width: 302px;
}


.footer_recruit {
    padding: 30px;
    background-color: #f3f2f2;
}

.footer_recruit img {
    width: 258px;
}


/* モーダル背景 */
.movie-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 9999;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* 中身 */
.movie-modal-inner {
  position: relative;
  width: 90%;
  max-width: 800px;
}

/* iframe比率維持 */
.movie-iframe-wrap {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
}

.movie-iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 閉じるボタン */
.movie-close {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 36px;
  color: #fff;
  cursor: pointer;
}

/* trigger */
#movie button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}