@charset "UTF-8";

/*背景とフォント*/
body {
  background-color: #FFFFFF;
  font-family: 'Kosugi Maru', sans-serif;
}

a {
  display: block;
  text-decoration: none;
}

/*header設定*/
#header{
  position: fixed;
  top: 0;
  right:0;
  left:0;
  bottom:0;
  height: 100dvh;
} 

/* 9:16の時 */

@media (aspect-ratio: 9/16) {

  #video-area {
    /*天地中央配置*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    /*高さを100dvh*/
    width:56.25dvh;
    height: 100dvh;
  }

  #video {
    /*高さを100dvh*/
    height:100dvh;
    position: absolute;
    z-index: -1;
  }

  /* リンクボタン装飾 */
  .btn {
    font-size: 2dvh;
    font-weight: 500;
    color: #FFFFFF;
    padding: 1dvh 2dvh;
    border-radius: 3dvh;
    background-color: #ba2f27;
    width: 26dvh;
    opacity: 0;
  }

  /* 映像コンサルボタン装飾 */
  .btn_ec2 {
    font-size: 4vw;
    font-weight: 500;
    color: #FFFFFF;
    padding: 2dvw 4dvw;
    border-radius: 7dvw;
    background-color: #ba2f27;
    width: 42dvw;
    opacity: 0;
  }

  /* 安否初期登録ボタン装飾*/
  .btnup {
    font-size: 3dvh;
    font-weight: 500;
    color: #FFFFFF;
    padding: 1dvh 2dvh;
    border-radius: 3dvh;
    background-color: #28cdff;
    opacity: 0;
  }

  /*SOSメールボタン装飾*/
  .btn3 {
    font-size: 3dvh;
    font-weight: 500;
    color: #212529;
    padding: 2dvh;
    border-radius: 4dvh;
    background-color: #ffc107;
  }

}

/* 9:16以上（横長）の時 */

@media (min-aspect-ratio: 9/16) {


  #video-area {
    /*天地中央配置*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    /*高さを100dvh*/
    width:56.25dvh;
    height: 100dvh;
  }

  #video {
    /*高さを100dvh*/
    height:100dvh;
    position: absolute;
    z-index: -1;
  }

  /* 質問ボタン装飾 */
  .btn {
    font-size: 2dvh;
    font-weight: 500;
    color: #FFFFFF;
    padding: 1dvh 2dvh;
    border-radius: 3dvh;
    background-color: #ba2f27;
    width: 26dvh;
    opacity: 0;
  }

      /* 映像コンサルボタン装飾 */
  .btn_ec2 {
    font-size: 4dvh;
    font-weight: 500;
    color: #FFFFFF;
    padding: 0;
    border-radius: 7dvw;
    background-color: #ba2f27;
    width: 25dvh;
    opacity: 0;
  }

  /* 安否初期登録ボタン装飾*/
  .btnup {
    font-size: 3dvh;
    font-weight: 500;
    color: #FFFFFF;
    padding: 1dvh 2dvh;
    border-radius: 3dvh;
    background-color: #28cdff;
    opacity: 0;
  }

  /*SOSメールボタン装飾*/
  .btn3 {
    font-size: 3dvh;
    font-weight: 500;
    color: #212529;
    padding: 2dvh;
    border-radius: 4dvh;
    background-color: #ffc107;
  }

}

/* 9:16以下（縦長）の時 */

@media (max-aspect-ratio: 9/16) {

  #video-area {
    /*天地中央配置*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    /* 幅を100dvw */
    width:100dvw;
    height: 178dvw;
  }

  #video {
    /* 幅を100dvw */
    width:100dvw;
    position: absolute;
    z-index: -1;
  }

  /* リンクボタン装飾 */
  .btn {
    font-size: 4vw;
    font-weight: 500;
    color: #FFFFFF;
    padding: 2dvw 4dvw;
    border-radius: 7dvw;
    background-color: #ba2f27;
    width: 45dvw;
    opacity: 0;
  }

    /* 映像コンサルボタン装飾 */
  .btn_ec2 {
    font-size: 3vw;
    font-weight: 500;
    color: #FFFFFF;
    padding: 0;
    border-radius: 7dvw;
    background-color: #ba2f27;
    width: 35dvw;
    opacity: 0;
  }

  /* 安否初期登録ボタン装飾*/
  .btnup {
    font-size: 6vw;
    font-weight: 500;
    color: #FFFFFF;
    padding: 2vw 4vw;
    border-radius: 7vw;
    background-color: #28cdff;
    opacity: 0;
  }

  /*SOSメールボタン装飾*/
  .btn3 {
    font-size: 6vw;
    font-weight: 500;
    color: #212529;
    padding: 4vw;
    border-radius: 7vw;
    background-color: #ffc107;
  }

}

/*site1ボタン配置*/
.btn1{
  position:absolute;
  z-index: 1;
  top:90%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

/*site2ボタン配置*/
.btn2{
  position:absolute;
  z-index: 1;
  top: 96%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

/*映像コンサルボタン配置*/
.btn_ec{
  position:absolute;
  z-index: 1;
  top: 5%;
  left: 25%;
  transform: translateY(-50%) translateX(-50%);
}

/*安否初期登録ボタン配置*/
.btn6{
  position:absolute;
  z-index: 1;
  top: 90%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  pointer-events: none;
}

/* SOSメールボタン配置 */
.btn5{
  position:absolute;
  z-index: 1;
  top: 91%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%); 
}

.btnX {
	font-size: 4dvh;
  font-weight: 300;
	color: #1e1e1e;
	padding: 1dvh;
  border-radius: 4dvh;
  background-color: rgba(172,172,172,0.5);
}

/*サウンドオンオフ設定*/

.btn4 {
  /*要素の配置*/
  position:fixed;
  z-index: 1;
  bottom: 0%;
  right: 0%;
  transform: translateY(-50%) translateX(-50%);
}

.btnon {
	font-size: 2dvh;
  font-weight: bold;
	color: rgba(42, 42, 42, 0.9);
	padding-top: 0.5dvh;
  padding-bottom: 0.5dvh;
  padding-left: 1dvh;
  padding-right: 1dvh;
  border-radius: 4dvh;
  background-color: rgba(172,172,172,0.5);
}


/* 安否初期登録ボタン　42秒後に1秒かけて"late-open"を実行する */

.lateup {
  animation-name: late-open;
  animation-duration: 1s;
  animation-delay: 42s;
  animation-fill-mode: forwards;
}

/* late-open = display: block; */
@keyframes late-open {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}