@charset "utf-8";

/*========= 背景動画設定のCSS ===============*/
#mainv{
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    height: 100vh;/*高さを全画面にあわせる*/
} 
/*header設定*/
#video-area{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}

/*見出し設定*/
#mainv h1{
    /*要素の配置*/
    position:absolute;
    /*要素を天地中央寄せ*/
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    /*見た目の調整*/
    color:#fff;
    text-shadow: 0 0 0px #666;z-index: 2;
}
#mainv h1 img{width: 100px; height: auto;}
#mainv p{
    /*要素の配置*/
    position:absolute;
    /*要素を天地中央寄せ*/
    bottom: 0%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    /*見た目の調整*/
    color:#fff;width: 460px; height: auto;
    text-shadow: 0px 0px 0px #000;z-index: 1000;
}

#mainv p a,#mainv p a img{width: 460px; height: auto;}

@media screen and (max-width: 480px) {
	#mainv p{width: 330px; height: auto;}
	#mainv p a,#mainv p a img{width: 330px; height: auto;}
}

.floating-banner
{
    position: fixed;
    right: 15px;
    top: 70%;
    z-index: 9999;
    display: block;
    background-color: #383838; /* バナー背景色 */
    padding: 0px;
    width: 420px;
    height: 105px;/* バナー内部の余白 */
    box-shadow: 0px 0px 0px rgba(51,51,51,0.64);
    -webkit-box-shadow: 0px 0px 0px rgba(51,51,51,0.64);
}
.close-button {
    position: absolute;border-radius: 50%;width: 28px;height: 28px;
    right: -10px;
    top: -10px;font-size: 20px;line-height: 23px;
    background-color: #000000; /* 閉じるボタンの背景色 */
    color: white; /* 閉じるボタンの文字色 */
    border: none; /* 枠線を消す */
    cursor: pointer; /* ホバー時にカーソルをポインターに */
}

.floating-banner-i {
 
}
.floating-banner__image {
  max-width: 100%; /* 画像の最大幅 */
}
@media screen and (max-width: 992px) { /* タブレット用のブレイクポイントを指定 */
  .floating-banner-i {
    display: none; /* タブレットサイズ以下でPC用のバナーを非表示に */
	  
  }
}
@media screen and (max-width: 991px) {
	.floating-banner
{width: 350px;height: 87.5px;
	 right: 15px;
   top:85%;
	}/* スマホ用のブレイクポイントを指定 */
  .floating-banner-i {
    display: block;/* 消していたバナーを表示させる */
    width: 100%; /* スマホの画面幅いっぱいにバナーを表示 */
	  margin: 0 auto;
  }
	.close-button {
    position: absolute;border-radius: 50%;width: 28px;height: 28px;padding:1px 0 5px 0;
    right: -10px;
    top: -10px;font-size: 20px;line-height: 25px;
    background-color: #000000; /* 閉じるボタンの背景色 */
    color: white; /* 閉じるボタンの文字色 */
    border: none; /* 枠線を消す */
    cursor: pointer; /* ホバー時にカーソルをポインターに */
}
}
/* ローディングアイコン設定 */

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    font-weight: bold;
}

/*jQueryで付与されたdisappearクラスがついたらロゴエリアを非表示*/

#loading.disappear{
     display: none;   
}


/* youtube設定 */

#youtube-area{position: fixed;
    /*position: fixed;*/
    z-index: 1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
  opacity: 0;    
}

/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
#youtube-area.appear {
  animation-name:PageAnimeAppear;
  animation-duration:.5s;
  animation-fill-mode:forwards;
}

@keyframes PageAnimeAppear{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

#youtube {
/*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*縦横幅指定*/
  width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}

/*youtubeがクリックされないためのマスク*/
#youtube-mask{
    position: absolute;
    z-index: 2;/*下から2番目に表示*/
    top:0;
    width:100%;
    height: 100%;
}
#mainvdot{
    position: absolute;
    z-index: 1;
    background-image: url(../images/dot.png);
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0.75;
}

/*youtube 上のロゴ 
#mainv h1{
  position:absolute;
  z-index: 2;/*下から2番目に表示*/
/*天地中央配置
  top: 60%;
  left: 50%;
  transform: translateY(-60%) translateX(-50%);
/*色指定
  color:#fff;
  text-shadow: 0 0 15px #666;
}*/

/*下のコンテンツ*/
#container{
    position: relative;/*relativeを指定してfixed指定をした#youtube-areaの上に表示*/
    z-index: 3;/*一番上に表示*/
    background-color: #ffffff;
    padding: 0px 0 30px 0;
    
 
}