@charset "UTF-8";
/* CSS Document */

body{

margin: 0 auto;
padding: 0;
text-decoration: none;

}

img{
width: 100%;
vertical-align: bottom;

}

a {
  opacity: 1;
  transition: opacity 0.3s ease;
}

a:hover {
  opacity: 0.5;
}


.wrap{

width: 640px;
max-width: 100%;
margin: 0 auto;
padding: 0 0 122px 0;

}

/* mv contents area */

.mv-cont {
  position: relative;
}

.backimg {
  width: 100%;
}

.mv01 {
    position: absolute;
    left: 3%;
    width: 94%;
}
.mv02 {
    position: absolute;
    left: 15%;
    width: 70.5%;
}
.mv03 {
    position: absolute;
    top: 3.5%;
    left: 3%;
    width: 94%;
}
.mv04 {
    position: absolute;
    top: 8.5%;
    left: 9%;
    width: 80.5%;
}
.mv05 {
    position: absolute;
    left: 9.4%;
    width: 81.5%;
}
.mv06 {
    position: absolute;
    top: 4%;
    left: 6.5%;
    width: 47%;
}


/* anime yajirshi */
.anime-yajirusshi {
  position: relative;
  width: 100%;
}

.overlay {
  width: 100%;
  height: auto;
  position: absolute;
  top: 24%;
  left: 0;
}
.overlay2 {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0%;
  left: 0;
}


/* ofa btn */

.ofa {
  position: relative;
  width: 100% !important;
}

.ofa-btn {
    width: 100% !important;
}

.ofa-btn2 {
    width: 100% !important;
}

.site-btn{
    position: absolute;
    bottom: 33.8%;
    width: 39%;
    left: 30.5%;
}


.overlay2 {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0%;
  left: 0;
}



/* reflection area */
.reflection-img{
    position    :absolute;
    overflow    :hidden;
    top: 10%;
    left: 7%;
    width: 84% !important;
    z-index: 1;
}
.reflection-img2{
    position    :absolute;
    overflow    :hidden;
    bottom: 2.5%;
    left: 7%;
    width: 84% !important;
    z-index: 1;
}
 
.reflection {
    height:100%;
    width:30px;
    position    :absolute;
    z-index: 2;
    top         :-180px;
    left        :0;
    background-color: rgba(255, 255, 255, 0.5);
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 3s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 3s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 3s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 3s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 3s ease-in-out infinite;
}
 
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.3; }
    81% { transform: scale(4) rotate(45deg); opacity: 0.7; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.3; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 0.7; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.3; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 0.7; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.3; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 0.7; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.3; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 0.7; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}



/* back marker */

.text-anime {
  position: relative;
  width: 100%;
}

.text-border {
    width: 43%;
    height: auto;
    position: absolute;
    top: 14%;
    left: 28%;
}
.text-anime {
  position: relative;
  width: 100%;
}

.text-border {
position: absolute;
  width: 43%;
  height: auto;
  top: 14%;
  left: 28%;
  z-index: 2;
}
.text-border2 {
    position: absolute;
    width: 61%;
    height: auto;
    top: 19.5%;
    left: 19.5%;
    z-index: 2;
}
.text-border3 {
    position: absolute;
    width: 78%;
    height: auto;
    top: 17.5%;
    left: 11.5%;
    z-index: 2;
}
.text-border4 {
    position: absolute;
    width: 29%;
    height: auto;
    top: 32%;
    left: 36%;
    z-index: 2;
}

.marker {
    position: absolute;
    top: 16%;
    left: 28.5%;
    height: 2em;
    z-index: 1;
    width: 0; 
    background: rgba(255, 209, 209, 1); 
    transition: width 2s linear; 
}
.marker2 {
    position: absolute;
    top: 19%;
    left: 19.5%;
    height: 2.7em;
    z-index: 1;
    width: 0;
    background: rgba(255, 209, 209, 1);
    transition: width 2s linear;
}
.marker3 {
    position: absolute;
    top: 18%;
    left: 9.5%;
    height: 2.6em;
    z-index: 1;
    width: 0;
    background: rgba(255, 209, 209, 1);
    transition: width 2s linear;
}

.marker4 {
    position: absolute;
    top: 31.5%;
    left: 36%;
    height: 2.6em;
    z-index: 1;
    width: 0;
    background: rgba(255, 209, 209, 1);
    transition: width 2s linear;
}


/* アクティブ時の状態 */
.marker.active {
  width: 43%; 
}
/* アクティブ時の状態 */
.marker2.active {
  width: 61%; 
}
/* アクティブ時の状態 */
.marker3.active {
  width: 82%; 
}
/* アクティブ時の状態 */
.marker4.active {
  width: 29%; 
}

/* メディアクエリで画面幅に応じて高さを調整 */
@media (max-width: 640px) {
  .marker {
    height: 1.2em; /* 画面幅が640px以下のときの高さ */
  } 
  .marker2 {
    height: 1.2em; /* 画面幅が640px以下のときの高さ */
  }
  .marker3 {
    height: 1.2em; /* 画面幅が640px以下のときの高さ */
  }
  .marker4 {
    height: 1.2em; /* 画面幅が640px以下のときの高さ */
  }
}

@media (max-width: 480px) {
  .marker {
    height: 1.3em; /* 画面幅が480px以下のときの高さ */
  } 
  .marker2 {
    height: 1.3em; /* 画面幅が480px以下のときの高さ */
  } 
  .marker3 {
    height: 1.3em; /* 画面幅が480px以下のときの高さ */
  }
  .marker4 {
    height: 1.3em; /* 画面幅が480px以下のときの高さ */
  } 
}

@media (max-width: 320px) {
  .marker {
    height: 1.2em; /* 画面幅が320px以下のときの高さ */
  } 
  .marker2 {
    height: 1.2em; /* 画面幅が320px以下のときの高さ */
  }
  .marker3 {
    height: 1.2em; /* 画面幅が320px以下のときの高さ */
  } 
  .marker4 {
    height: 1.2em; /* 画面幅が320px以下のときの高さ */
  }
}


/*footer*/
footer {
  position: relative;
  font-family: Arial, sans-serif;
  color: #666;
  text-align: center;
  padding: 0;
  margin: 0;
}

/* 背景画像と要素の配置 */
.footer-bk {
  position: relative;
  width: 100%;
}

.footer-bk img {
  width: 100%;
  height: auto;
  display: block;
}

.footer-links {
  position: absolute;
width: 80%;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: #666;
}

.footer-links li {
  margin: 0 7px;
}

.footer-links li.divider {
  color: #666; 
}

.footer-links a {
  text-decoration: none; 
  color: #666;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #333;
}

.footer-copy {
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    color: #666;
    margin: 0 auto;
    width: 80%;
}
@media (max-width: 480px) {
.footer-copy {
    top: 55%;
}
}

/* flooting */
#page-top {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  max-width: 100%;
  z-index: 9999; 
  text-align: center;
      margin: 0;
  display: none;
}

#page-top img {
  width: 100%;
  height: auto;
}