html{
  scroll-behavior: smooth;
}

*{ 
margin:0; 
padding:0; 
} 

body {
  width:100%;
/*  background-image: url("../images/Bg.jpg");*/
/*  background-repeat: repeat;*/
  /*background-image: url("../images/~~~");*/
  /*background-repeat: no-repeat;*/
  background-color: #000;
  /*background: linear-gradient(#000 14.3%, #faae8f 14.8% 100%);*/
  font-family: sans-serif;
  color:#FFF;
}


p,b,h2 {
  /*font-weight: bold;*/
  /*text-shadow: 0px 0px 4px #0589c0;*/
  text-shadow: 1px 1px 2px #0186be;
}

a {
  color: #f57d80;
  text-decoration:none; 
}

a img:hover {
    -webkit-transition: all 0.2s;
}

a img:hover {
    transform: scale(1.03); /*画像の拡大/縮小(xy)*/
    /*opacity:0.9;/*透明度*/
}

b {
  font-weight:900;
  font-size:2.5vw;
}

dd {
/*  color: #FFF;*/
}



h1 {
  font-weight:900;
  text-align: center;
  font-size:3.7vw;
  color: #FFF;
  /*font-family: "M PLUS 1p";*/
/*  font-family:sans-serif;*/
/*  text-shadow: 1px 1px 2px #0589c0;*/
}

h2 {
/*  font-size:1.9vw;*/
  margin: 0px 0px 0px;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
  h2 {
/*    font-size:1.7vw;*/
  }
}


.TopArea{
  width: 95%;
  margin: auto;
}

.MainArea{
  width: 90%;
  margin: auto;
}


.LangBt {
  position: absolute;
  top: 0%;
  width:3.6%;
  height:6%;
  /*float: left;*/
  /*background-color:#F00;*/
}

.sns-box {
  margin: auto;
display: flex;
gap: 0.5rem;
width:160;
/*  background-color: #FFF;*/
}

.btn-sns {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
box-sizing: border-box;
border-radius: 50%;
color: white;
font-size: 1.5rem;
text-align: center;
text-decoration: none;
transition: 0.3s;
}

.btn-sns svg {
fill: #fff;
}

.btn-x {
/*background-color: #111319;*/
background-color: #212329;
}

.btn-facebook {
background-color: #375A94;
}

.btn-line {
background-color: #5DB40F;
}

.btn-pinterest {
background-color: #B83026;
}

.btn-sns:hover {
opacity: 0.8;
}

div#Top {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.6);
}

.TopPC {
  /*background-image: url("../images/xxxxxxxxx.jpg");*/
  /*background-size: 100%;*/
  /*position: relative;*/
  margin:0px;
  padding:0px;
  border: 0px;
  width:100%;
  /*height: 80%;*/
  background-repeat: no-repeat;
}


.TopPhone{
display: none;
}

/*-------01-------*/

div#section01 {
  position: relative;
  background-size: 100%;
/*  background-color: #FFF;*/
  padding:0px;
  border: 0px;
  width:80%;
  margin: auto;
  margin-top: 2%;
  margin-bottom: 2%;
}


#section01:before {
    content:"";
    display: block;
    padding-top: 33%;
}

div#section01 b {
  font-size:3vw;
  margin: auto;
  font-family:sans-serif;
  color: #041a5d;
}

.textbox01{
  position: absolute;
  top: 0%;
  width:100%;
/*  height:150%;*/
  text-align: center;
  margin: auto;
/*padding-bottom:100% : */
/*background-color: #0F0;*/
 }

.PCtext{
  display: none;
 }

.Phonetext h1{
  font-size:4.0vw;
 }

.Phonetext h2{
  font-size:3.0vw;
 }


div#infomation00 {
  position: relative;
  background-size: 100%;
/*  background-color: #F0F;*/
  position: relative;
  margin:auto;
  padding:10px;
  border: 0px;
  width:80%;
  color:#FFCC33;
}

#infomation00:before {
    content:"";
    display: block;
/*    padding-top: 33%;*/
}

#infomation00 a {
  color:#f57d80;
}

#infomation00 a:hover {
  color: #f57d80;
}

.textbox00{
/*  position: absolute;*/
/*  top: 0%;*/
  width:100%;
/*  height:100%;*/
  text-align: center;
  margin: auto;
/*padding-bottom:100% : */
/*background-color: #020;*/
 }

.textbox00 h3{
  font-size:2.5vw;
  line-height:4vW;
/*  padding-top: 2%;*/
/*  padding-bottom: 2%;*/
 }

.textbox00 p{
/*  color:#FFCC33;*/
/*  font-style: italic; */
  font-size:1.5vw;
/*  font-family:sans-serif;*/
/*  background-color: #020;*/
  text-align: left;
  width:45%;
  margin: auto;
 }

/*-------02-------*/

div#VideoArea {
  background-size: 100%;
/*  background-color: #FFF;*/
  position: relative;
  margin:auto;
  padding:0px;
  border: 0px;
  width:82%;
}


#VideoArea:before {
    content:"";
    display: block;
    /*padding-top: 6.25%;*/
}


@keyframes changeMainImage {
  0% { /*28秒中0%地点で透明度0*/
    opacity: 0;
  }

  1.73% { /*28秒中5%地点で透明度1*/
    opacity: 1;
  }
  6.95% {
    opacity: 1;
  }
  8.69% {
    opacity: 0;
  }
}

@keyframes changeMainImageLast {
  0% { /*28秒中0%地点で透明度0*/
    opacity: 0;
  }

  1.73% { /*28秒中5%地点で透明度1*/
    opacity: 1;
  }
  6.95% {
    opacity: 1;
  }
  7.82% {
    opacity: 0;
  }
}

div#ScreenShotArea {
  margin:auto;
  margin-bottom: 2%;
  padding-bottom:2%;
  width:82%;
/*  background-color: #F0F;*/
}

.Animation {
  position: relative;
  margin: 0px auto 0px;

}

.Animation:before {
    content:"";
    display: block;
    padding-top: 54.0%;
}

.Animation__img.no1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 0.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}
.Animation__img.no2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 3.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}
.Animation__img.no3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;

  animation-name: changeMainImage;
  animation-delay: 6.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}
.Animation__img.no4 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 9.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}

.Animation__img.no5 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 12.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}

.Animation__img.no6 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 15.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}

.Animation__img.no7 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 18.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}

.Animation__img.no8 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 21.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}
.Animation__img.no9 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 24.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}

.Animation__img.no10 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 27.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}

.Animation__img.no11 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 30.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}

.Animation__img.no12 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 33.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}

.Animation__img.no13 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 36.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}

.Animation__img.no14 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 39.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}

.Animation__img.no15 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 42.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}

.Animation__img.no16 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 45.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}

.Animation__img.no17 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 48.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}

.Animation__img.no18 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImage;
  animation-delay: 51.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}

.Animation__img.no19 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;


  animation-name: changeMainImageLast;
  animation-delay: 54.0s;
  animation-duration: 57.5s;
  animation-iteration-count: infinite;
}


/*-------03-------*/

div#NewsLetterArea {
/*   background-image: url("../images/BGnewsletter.jpg?240905_1925_8");*/
   background-repeat: no-repeat;
   background-position: bottom;
  background-size: 100%;
  /*background-color: #FFF;*/
  position: relative;
  margin:0px;
  padding:0px;
  border: 0px;
  width:100%;
/*  background-color: #FFF; */
}


#NewsLetterArea:before {
    content:"";
    display: block;
/*    padding-top: 10%;*/
}

.button_box img{
  margin-bottom: 2%;
 }

.textbox02{
  display: none;
/*  background-color: #F3F; */
 }



/*-------04-------*/
div#SubVideoArea{
  width:100%;
  margin-bottom: 0.8%;
}

div#SpecArea {
  width:91%;
  /*height:43%;*/
  /*background-color: #FFF;*/
  position: relative;
  margin:auto;
  padding:0px;
  border: 0px;
  text-align: center;
  margin-bottom: 1%;
}


/*#SpecArea:before {
    content:"";
    display: block;
    padding-top: 56.25%;
}*/

.textbox03{
  padding-top: 1%;
  padding-bottom: 1%;
  width:82%;
  margin:auto;
 }

.textbox03 img{
  padding-top: 1%;
  padding-bottom: 1%;
 }

/*--------------*/


div#Footer {
  margin:auto;
  padding:0px;
  border: 0px;
  width:80%;
  text-align: center;

}

.textbox_link {
  width:30%;
  margin:auto;
}

.textbox_link p{
font-family:sans-serif;
/*color: #000;*/
padding-top: 1%;
font-size:1.5vw;
  filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
  /*text-shadow: black 0 0 0px;*/
  text-shadow: 1px 1px 2px #004c6c;
}

.textbox_link img{
  filter: drop-shadow(1px 1px 1px #004c6c);
}

.video-container {
    position: relative;
    width:100%;
  /*height:100%;*/
  /*background-color: #FFF;*/
}

.video-container:before {
    content:"";
    display: block;
    padding-top: 56.25%;
}

#trailer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bottom {
    width:100%;
    text-align: center;
/*    background-color: #F1F;*/
}